mirror of
https://github.com/status-im/consul.git
synced 2025-01-11 06:16:08 +00:00
ui: Use empty-state for our small empty states (#8262)
This commit is contained in:
parent
c1b50f757c
commit
f0333138fe
@ -1,5 +1,6 @@
|
|||||||
{{yield}}
|
{{yield}}
|
||||||
<div class="empty-state" ...attributes>
|
<div class="empty-state" ...attributes>
|
||||||
|
{{#if hasHeader}}
|
||||||
<header>
|
<header>
|
||||||
{{#yield-slot name="header"}}
|
{{#yield-slot name="header"}}
|
||||||
{{yield}}
|
{{yield}}
|
||||||
@ -8,6 +9,7 @@
|
|||||||
{{yield}}
|
{{yield}}
|
||||||
{{/yield-slot}}
|
{{/yield-slot}}
|
||||||
</header>
|
</header>
|
||||||
|
{{/if}}
|
||||||
{{#yield-slot name="body"}}
|
{{#yield-slot name="body"}}
|
||||||
<div>
|
<div>
|
||||||
{{yield}}
|
{{yield}}
|
||||||
|
@ -1,6 +1,11 @@
|
|||||||
import Component from '@ember/component';
|
import Component from '@ember/component';
|
||||||
|
import { set } from '@ember/object';
|
||||||
import Slotted from 'block-slots';
|
import Slotted from 'block-slots';
|
||||||
|
|
||||||
export default Component.extend(Slotted, {
|
export default Component.extend(Slotted, {
|
||||||
tagName: '',
|
tagName: '',
|
||||||
|
willRender: function() {
|
||||||
|
this._super(...arguments);
|
||||||
|
set(this, 'hasHeader', this._isRegistered('header') || this._isRegistered('subheader'));
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
@ -40,3 +40,7 @@
|
|||||||
%empty-state-anchor::before {
|
%empty-state-anchor::before {
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
|
%empty-state > div:only-child {
|
||||||
|
padding: 50px 0 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@ -42,7 +42,7 @@ pre code,
|
|||||||
%flash-message p,
|
%flash-message p,
|
||||||
%filter-bar input,
|
%filter-bar input,
|
||||||
%phrase-editor input,
|
%phrase-editor input,
|
||||||
%tab-section section p {
|
%tab-section p {
|
||||||
@extend %p1;
|
@extend %p1;
|
||||||
}
|
}
|
||||||
%menu-panel dl,
|
%menu-panel dl,
|
||||||
@ -60,6 +60,7 @@ pre code,
|
|||||||
}
|
}
|
||||||
.template-error > div,
|
.template-error > div,
|
||||||
%empty-state-subheader,
|
%empty-state-subheader,
|
||||||
|
%empty-state p,
|
||||||
%button,
|
%button,
|
||||||
%main-content p,
|
%main-content p,
|
||||||
%form-element-note,
|
%form-element-note,
|
||||||
|
@ -3,9 +3,13 @@
|
|||||||
{{#if (gt item.Checks.length 0) }}
|
{{#if (gt item.Checks.length 0) }}
|
||||||
<HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
|
<HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
This node has no health checks.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
This node has no health checks.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -3,9 +3,13 @@
|
|||||||
{{#if item.Meta}}
|
{{#if item.Meta}}
|
||||||
<ConsulMetadataList @items={{object-entries item.Meta}} />
|
<ConsulMetadataList @items={{object-entries item.Meta}} />
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
This node has no metadata.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
This node has no metadata.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -13,9 +13,13 @@
|
|||||||
<ConsulServiceInstanceList @routeName="dc.services.show" @items={{filtered}} @checks={{checks}}/>
|
<ConsulServiceInstanceList @routeName="dc.services.show" @items={{filtered}} @checks={{checks}}/>
|
||||||
</BlockSlot>
|
</BlockSlot>
|
||||||
<BlockSlot @name="empty">
|
<BlockSlot @name="empty">
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no services.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no services.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
</BlockSlot>
|
</BlockSlot>
|
||||||
</ChangeableSet>
|
</ChangeableSet>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,9 +53,13 @@
|
|||||||
</BlockSlot>
|
</BlockSlot>
|
||||||
</TabularCollection>
|
</TabularCollection>
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no Lock Sessions for this Node. For more information, view <a href="{{ env 'CONSUL_DOCS_URL'}}/internals/sessions.html" rel="help noopener noreferrer" target="_blank">our documentation</a>
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no Lock Sessions for this Node. For more information, view <a href="{{ env 'CONSUL_DOCS_URL'}}/internals/sessions.html" rel="noopener noreferrer" target="_blank">our documentation</a>
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,9 +5,13 @@
|
|||||||
{{#if (gt item.Tags.length 0) }}
|
{{#if (gt item.Tags.length 0) }}
|
||||||
<TagList @item={{item}} />
|
<TagList @item={{item}} />
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no tags.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no tags.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</section>
|
</section>
|
||||||
<section class="metadata">
|
<section class="metadata">
|
||||||
@ -15,9 +19,13 @@
|
|||||||
{{#if item.Meta}}
|
{{#if item.Meta}}
|
||||||
<ConsulMetadataList @items={{object-entries item.Meta}} />
|
<ConsulMetadataList @items={{object-entries item.Meta}} />
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
This instance has no metadata.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
This instance has no metadata.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,11 +0,0 @@
|
|||||||
<div id="tags" class="tab-section">
|
|
||||||
<div role="tabpanel">
|
|
||||||
{{#if (gt item.Tags.length 0) }}
|
|
||||||
<TagList @item={{item}} />
|
|
||||||
{{else}}
|
|
||||||
<p>
|
|
||||||
There are no tags.
|
|
||||||
</p>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
@ -12,9 +12,13 @@
|
|||||||
<ConsulServiceInstanceList @routeName="dc.services.instance" @items={{filtered}} @proxies={{keyedProxies}}/>
|
<ConsulServiceInstanceList @routeName="dc.services.instance" @items={{filtered}} @proxies={{keyedProxies}}/>
|
||||||
</BlockSlot>
|
</BlockSlot>
|
||||||
<BlockSlot @name="empty">
|
<BlockSlot @name="empty">
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no services.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no services.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
</BlockSlot>
|
</BlockSlot>
|
||||||
</ChangeableSet>
|
</ChangeableSet>
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,9 +34,13 @@
|
|||||||
/>
|
/>
|
||||||
</BlockSlot>
|
</BlockSlot>
|
||||||
<BlockSlot @name="empty">
|
<BlockSlot @name="empty">
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no intentions for this service.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no intentions for this service.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
</BlockSlot>
|
</BlockSlot>
|
||||||
</ChangeableSet>
|
</ChangeableSet>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,17 +1,19 @@
|
|||||||
<div id="services" class="tab-section">
|
<div id="services" class="tab-section">
|
||||||
<div role="tabpanel">
|
<div role="tabpanel">
|
||||||
{{#if (gt gatewayServices.length 0)}}
|
{{#if (gt gatewayServices.length 0)}}
|
||||||
<section>
|
|
||||||
<p>
|
<p>
|
||||||
The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our
|
The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our
|
||||||
<a href="{{env 'CONSUL_DOCS_URL'}}/connect/terminating-gateway" target="_blank" rel="noopener noreferrer">step-by-step guide</a>.
|
<a href="{{env 'CONSUL_DOCS_URL'}}/connect/terminating-gateway" target="_blank" rel="noopener noreferrer">step-by-step guide</a>.
|
||||||
</p>
|
</p>
|
||||||
<ConsulServiceList @items={{gatewayServices}} @nspace={{nspace}} />
|
<ConsulServiceList @items={{gatewayServices}} @nspace={{nspace}} />
|
||||||
</section>
|
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no linked services.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no linked services.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,9 +3,13 @@
|
|||||||
{{#if (gt item.Tags.length 0) }}
|
{{#if (gt item.Tags.length 0) }}
|
||||||
<TagList @item={{item}} />
|
<TagList @item={{item}} />
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no tags.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no tags.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,16 +1,18 @@
|
|||||||
<div id="upstreams" class="tab-section">
|
<div id="upstreams" class="tab-section">
|
||||||
<div role="tabpanel">
|
<div role="tabpanel">
|
||||||
{{#if (gt gatewayServices.length 0)}}
|
{{#if (gt gatewayServices.length 0)}}
|
||||||
<section>
|
|
||||||
<p>
|
<p>
|
||||||
Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our <a href="{{env 'CONSUL_DOCS_URL'}}/connect/ingress-gateway" target="_blank" rel="noopener noreferrer">documentation</a>.
|
Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our <a href="{{env 'CONSUL_DOCS_URL'}}/connect/ingress-gateway" target="_blank" rel="noopener noreferrer">documentation</a>.
|
||||||
</p>
|
</p>
|
||||||
<ConsulUpstreamList @items={{gatewayServices}} @dc={{dc}} @nspace={{nspace}} />
|
<ConsulUpstreamList @items={{gatewayServices}} @dc={{dc}} @nspace={{nspace}} />
|
||||||
</section>
|
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>
|
<EmptyState>
|
||||||
There are no upstreams.
|
<BlockSlot @name="body">
|
||||||
</p>
|
<p>
|
||||||
|
There are no upstreams.
|
||||||
|
</p>
|
||||||
|
</BlockSlot>
|
||||||
|
</EmptyState>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user