ui: Use empty-state for our small empty states (#8262)

This commit is contained in:
John Cowen 2020-07-08 14:34:57 +01:00 committed by GitHub
parent c1b50f757c
commit f0333138fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 90 additions and 49 deletions

View File

@ -1,5 +1,6 @@
{{yield}}
<div class="empty-state" ...attributes>
{{#if hasHeader}}
<header>
{{#yield-slot name="header"}}
{{yield}}
@ -8,6 +9,7 @@
{{yield}}
{{/yield-slot}}
</header>
{{/if}}
{{#yield-slot name="body"}}
<div>
{{yield}}

View File

@ -1,6 +1,11 @@
import Component from '@ember/component';
import { set } from '@ember/object';
import Slotted from 'block-slots';
export default Component.extend(Slotted, {
tagName: '',
willRender: function() {
this._super(...arguments);
set(this, 'hasHeader', this._isRegistered('header') || this._isRegistered('subheader'));
},
});

View File

@ -40,3 +40,7 @@
%empty-state-anchor::before {
margin-top: -1px;
}
%empty-state > div:only-child {
padding: 50px 0 10px 0;
text-align: center;
}

View File

@ -42,7 +42,7 @@ pre code,
%flash-message p,
%filter-bar input,
%phrase-editor input,
%tab-section section p {
%tab-section p {
@extend %p1;
}
%menu-panel dl,
@ -60,6 +60,7 @@ pre code,
}
.template-error > div,
%empty-state-subheader,
%empty-state p,
%button,
%main-content p,
%form-element-note,

View File

@ -3,9 +3,13 @@
{{#if (gt item.Checks.length 0) }}
<HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
{{else}}
<p>
This node has no health checks.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
This node has no health checks.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</div>
</div>

View File

@ -3,9 +3,13 @@
{{#if item.Meta}}
<ConsulMetadataList @items={{object-entries item.Meta}} />
{{else}}
<p>
This node has no metadata.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
This node has no metadata.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</div>
</div>

View File

@ -13,9 +13,13 @@
<ConsulServiceInstanceList @routeName="dc.services.show" @items={{filtered}} @checks={{checks}}/>
</BlockSlot>
<BlockSlot @name="empty">
<p>
There are no services.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
There are no services.
</p>
</BlockSlot>
</EmptyState>
</BlockSlot>
</ChangeableSet>
</div>

View File

@ -53,9 +53,13 @@
</BlockSlot>
</TabularCollection>
{{else}}
<p>
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>
</p>
<EmptyState>
<BlockSlot @name="body">
<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}}
</div>
</div>

View File

@ -5,9 +5,13 @@
{{#if (gt item.Tags.length 0) }}
<TagList @item={{item}} />
{{else}}
<p>
There are no tags.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
There are no tags.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</section>
<section class="metadata">
@ -15,9 +19,13 @@
{{#if item.Meta}}
<ConsulMetadataList @items={{object-entries item.Meta}} />
{{else}}
<p>
This instance has no metadata.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
This instance has no metadata.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</section>
</div>

View File

@ -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>

View File

@ -12,9 +12,13 @@
<ConsulServiceInstanceList @routeName="dc.services.instance" @items={{filtered}} @proxies={{keyedProxies}}/>
</BlockSlot>
<BlockSlot @name="empty">
<p>
There are no services.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
There are no services.
</p>
</BlockSlot>
</EmptyState>
</BlockSlot>
</ChangeableSet>
</div>

View File

@ -34,9 +34,13 @@
/>
</BlockSlot>
<BlockSlot @name="empty">
<p>
There are no intentions for this service.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
There are no intentions for this service.
</p>
</BlockSlot>
</EmptyState>
</BlockSlot>
</ChangeableSet>
</div>

View File

@ -1,17 +1,19 @@
<div id="services" class="tab-section">
<div role="tabpanel">
{{#if (gt gatewayServices.length 0)}}
<section>
<p>
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>.
</p>
<ConsulServiceList @items={{gatewayServices}} @nspace={{nspace}} />
</section>
{{else}}
<p>
There are no linked services.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
There are no linked services.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</div>
</div>

View File

@ -3,9 +3,13 @@
{{#if (gt item.Tags.length 0) }}
<TagList @item={{item}} />
{{else}}
<p>
There are no tags.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
There are no tags.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</div>
</div>

View File

@ -1,16 +1,18 @@
<div id="upstreams" class="tab-section">
<div role="tabpanel">
{{#if (gt gatewayServices.length 0)}}
<section>
<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>.
</p>
<ConsulUpstreamList @items={{gatewayServices}} @dc={{dc}} @nspace={{nspace}} />
</section>
{{else}}
<p>
There are no upstreams.
</p>
<EmptyState>
<BlockSlot @name="body">
<p>
There are no upstreams.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</div>
</div>