ui: Move to a nested folder structure for Consul prefixed components (#8937)

* ui: Move all consul-* components to nested consul/* components

* Move tomography-graph

* Remove old basic rendering tests
This commit is contained in:
John Cowen 2020-10-14 09:03:39 +01:00 committed by GitHub
parent 4cdb2ca066
commit 34b9ea94d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
141 changed files with 220 additions and 390 deletions

View File

@ -1,69 +0,0 @@
<ul data-test-proxy-exposed-paths>
{{#each items as |path|}}
<li>
<div class="header">
{{#let (concat address ':' path.Path) as |combinedAddress|}}
<p class="combined-address">
<span>
{{combinedAddress}}
</span>
<CopyButton
@value={{combinedAddress}}
@name="Address"
/>
</p>
{{/let}}
</div>
<div class="detail">
{{#if path.Protocol}}
<dl class="protocol">
<dt>
<Tooltip>
Protocol
</Tooltip>
</dt>
<dd>
{{path.Protocol}}
</dd>
</dl>
{{/if}}
{{#if path.ListenerPort}}
<dl class="port">
<dt>
<Tooltip>
Port
</Tooltip>
</dt>
<dd>
listening on :{{path.ListenerPort}}
</dd>
</dl>
{{/if}}
{{#if path.LocalPathPort}}
<dl class="port">
<dt>
<Tooltip>
Port
</Tooltip>
</dt>
<dd>
local port :{{path.LocalPathPort}}
</dd>
</dl>
{{/if}}
{{#if path.Path}}
<dl class="path">
<dt>
<Tooltip>
Path
</Tooltip>
</dt>
<dd>
{{path.Path}}
</dd>
</dl>
{{/if}}
</div>
</li>
{{/each}}
</ul>

View File

@ -1,32 +0,0 @@
{{#if (gt items.length 0)}}
{{#if (eq healthCheck.check 'empty') }}
<dl class={{healthCheck.check}}>
<dt>
<Tooltip>
{{capitalize type}} Checks
</Tooltip>
</dt>
<dd>No {{type}} checks</dd>
</dl>
{{else}}
{{#if (eq healthCheck.count items.length)}}
<dl class={{healthCheck.check}}>
<dt>
<Tooltip>
{{capitalize type}} Checks
</Tooltip>
</dt>
<dd>All {{type}} checks {{healthCheck.status}}</dd>
</dl>
{{else}}
<dl class={{healthCheck.check}}>
<dt>
<Tooltip>
{{capitalize type}} Checks
</Tooltip>
</dt>
<dd>{{healthCheck.count}}/{{items.length}} {{type}} checks {{healthCheck.status}}</dd>
</dl>
{{/if}}
{{/if}}
{{/if}}

View File

@ -1,5 +0,0 @@
import Component from '@ember/component';
export default Component.extend({
tagName: '',
});

View File

@ -1,5 +0,0 @@
import Component from '@ember/component';
export default Component.extend({
tagName: '',
});

View File

@ -0,0 +1,76 @@
<div
class="consul-exposed-path-list"
...attributes
>
<ul
data-test-proxy-exposed-paths
>
{{#each @items as |path|}}
<li>
<div class="header">
{{#let (concat address ':' path.Path) as |combinedAddress|}}
<p class="combined-address">
<span>
{{combinedAddress}}
</span>
<CopyButton
@value={{combinedAddress}}
@name="Address"
/>
</p>
{{/let}}
</div>
<div class="detail">
{{#if path.Protocol}}
<dl class="protocol">
<dt>
<Tooltip>
Protocol
</Tooltip>
</dt>
<dd>
{{path.Protocol}}
</dd>
</dl>
{{/if}}
{{#if path.ListenerPort}}
<dl class="port">
<dt>
<Tooltip>
Port
</Tooltip>
</dt>
<dd>
listening on :{{path.ListenerPort}}
</dd>
</dl>
{{/if}}
{{#if path.LocalPathPort}}
<dl class="port">
<dt>
<Tooltip>
Port
</Tooltip>
</dt>
<dd>
local port :{{path.LocalPathPort}}
</dd>
</dl>
{{/if}}
{{#if path.Path}}
<dl class="path">
<dt>
<Tooltip>
Path
</Tooltip>
</dt>
<dd>
{{path.Path}}
</dd>
</dl>
{{/if}}
</div>
</li>
{{/each}}
</ul>
</div>

View File

@ -0,0 +1,8 @@
.consul-exposed-path-list {
> ul {
border-top: 1px solid $gray-200;
}
> ul > li {
@extend %composite-row;
}
}

View File

@ -1,9 +1,13 @@
{{#if item}}
{{#let (service/external-source item) as |externalSource|}}
{{#if @item}}
{{#let (service/external-source @item) as |externalSource|}}
{{#if externalSource}}
<span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
{{#if label}}
{{label}}
<span
data-test-external-source={{externalSource}}
class="consul-external-source {{externalSource}}"
...attributes
>
{{#if @label}}
{{@label}}
{{else}}
{{#if (eq externalSource 'aws')}}
Registered via {{uppercase externalSource}}

View File

@ -0,0 +1,3 @@
.consul-external-source {
@extend %pill-200, %frame-gray-600;
}

View File

@ -0,0 +1,32 @@
{{#if (gt @items.length 0)}}
{{#if (eq this.healthCheck.check 'empty') }}
<dl class={{this.healthCheck.check}}>
<dt>
<Tooltip>
{{capitalize @type}} Checks
</Tooltip>
</dt>
<dd>No {{@type}} checks</dd>
</dl>
{{else}}
{{#if (eq this.healthCheck.count @items.length)}}
<dl class={{this.healthCheck.check}}>
<dt>
<Tooltip>
{{capitalize @type}} Checks
</Tooltip>
</dt>
<dd>All {{@type}} checks {{this.healthCheck.status}}</dd>
</dl>
{{else}}
<dl class={{this.healthCheck.check}}>
<dt>
<Tooltip>
{{capitalize @type}} Checks
</Tooltip>
</dt>
<dd>{{this.healthCheck.count}}/{{@items.length}} {{@type}} checks {{this.healthCheck.status}}</dd>
</dl>
{{/if}}
{{/if}}
{{/if}}

View File

@ -1,14 +1,12 @@
import Component from '@ember/component';
import { computed } from '@ember/object';
import Component from '@glimmer/component';
export default Component.extend({
tagName: '',
healthCheck: computed('items.[]', function() {
export default class ConsulInstanceChecks extends Component {
get healthCheck() {
let ChecksCritical = 0;
let ChecksWarning = 0;
let ChecksPassing = 0;
this.items.forEach(item => {
this.args.items.forEach(item => {
switch (item.Status) {
case 'critical':
ChecksCritical += 1;
@ -48,5 +46,5 @@ export default Component.extend({
check: 'empty',
};
}
}),
});
}
}

View File

@ -155,7 +155,7 @@
<a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>
</p>
</div>
<ConsulIntentionPermissionList
<Consul::Intention::Permission::List
@items={{item.Permissions}}
@onclick={{queue (action (mut permission)) (action (mut shouldShowPermissionForm) true)}}
@ondelete={{action 'delete' 'Permissions' item}}
@ -200,12 +200,12 @@
<h3>Edit Permission</h3>
</BlockSlot>
<BlockSlot @name="body">
<ConsulIntentionPermissionForm
<Consul::Intention::Permission::Form
@item={{permission}}
@onsubmit={{action 'add' 'Permissions' item}}
as |permissionForm|>
<Ref @target={{this}} @name="permissionForm" @value={{permissionForm}} />
</ConsulIntentionPermissionForm>
</Consul::Intention::Permission::Form>
</BlockSlot>
<BlockSlot @name="actions">
<button

View File

@ -41,7 +41,7 @@
/>
{{/if}}
<form onsubmit={{action api.submit}}>
<ConsulIntentionForm::Fieldsets
<Consul::Intention::Form::Fieldsets
@nspaces={{nspaces}}
@services={{services}}
@SourceName={{SourceName}}
@ -71,7 +71,7 @@
</div>
</form>
{{else}}
<ConsulIntentionView
<Consul::Intention::View
@item={{item}}
/>
{{/if}}

View File

@ -51,7 +51,7 @@ as |item index|>
</td>
<td class="meta">
{{#if item.IsManagedByCRD}}
<ConsulExternalSource @item={{item}} @label="Managed by CRD" />
<Consul::ExternalSource @item={{item}} @label="Managed by CRD" />
{{/if}}
</td>
</BlockSlot>

View File

@ -119,18 +119,18 @@ as |group|>
<fieldset>
<h2>Headers</h2>
<ConsulIntentionPermissionHeaderList
<Consul::Intention::Permission::Header::List
@items={{changeset-get changeset 'HTTP.Header'}}
@ondelete={{action 'delete' 'HTTP.Header' changeset}}
as |headerList|>
</ConsulIntentionPermissionHeaderList>
</Consul::Intention::Permission::Header::List>
<ConsulIntentionPermissionHeaderForm
<Consul::Intention::Permission::Header::Form
@onsubmit={{action 'add' 'HTTP.Header' changeset}}
as |headerForm|>
<Ref @target={{this}} @name="headerForm" @value={{headerForm}} />
</ConsulIntentionPermissionHeaderForm>
</Consul::Intention::Permission::Header::Form>
<button
type="button"

View File

@ -34,7 +34,7 @@
</p>
</div>
<ConsulIntentionPermissionList
<Consul::Intention::Permission::List
@items={{item.Permissions}}
/>
{{/if}}

View File

@ -0,0 +1,6 @@
.consul-kind {
@extend %pill-200, %frame-gray-600;
}
.consul-kind::before {
@extend %with-gateway-mask, %as-pseudo;
}

View File

@ -1,8 +1,8 @@
## ConsulLoader
## Consul::Loader
`<ConsulLoader />`
`<Consul::Loader />`
Simple template-only component to show the circulr animated Consul loader animation.
Simple template-only component to show the circular animated Consul loader animation.
| Argument | Type | Default | Description |
| --- | --- | --- | --- |

View File

@ -1,4 +1,7 @@
<div class="consul-loader" ...attributes>
<div
class="consul-loader"
...attributes
>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44px" height="44px" viewBox="0 0 44 44" version="1.1">
<g>
<circle r="1" cx="27" cy="2" style="transform-origin: 27px 2px" />

View File

@ -17,7 +17,7 @@
</dd>
</dl>
{{#if (env 'CONSUL_ACLS_ENABLED')}}
<ConsulTokenRulesetList @item={{item}} />
<Consul::Token::Ruleset::List @item={{item}} />
{{/if}}
</BlockSlot>
<BlockSlot @name="actions" as |Actions|>

View File

@ -4,7 +4,7 @@
<a data-test-role={{item.Name}} href={{href-to 'dc.acls.roles.edit' item.ID}}>{{item.Name}}</a>
</BlockSlot>
<BlockSlot @name="details">
<ConsulTokenRulesetList @item={{item}} />
<Consul::Token::Ruleset::List @item={{item}} />
<dl>
<dt>Description</dt>
<dd data-test-description>

View File

@ -13,12 +13,12 @@
</BlockSlot>
<BlockSlot @name="details">
{{#if checks}}
<ConsulExternalSource @item={{item}} />
<ConsulInstanceChecks @type="service" @items={{get checks item.Service}} />
<Consul::ExternalSource @item={{item}} />
<Consul::InstanceChecks @type="service" @items={{get checks item.Service}} />
{{else}}
<ConsulExternalSource @item={{item.Service}} />
<ConsulInstanceChecks @type="service" @items={{filter-by 'ServiceID' '' item.Checks}} />
<ConsulInstanceChecks @type="node" @items={{reject-by 'ServiceID' '' item.Checks}} />
<Consul::ExternalSource @item={{item.Service}} />
<Consul::InstanceChecks @type="service" @items={{filter-by 'ServiceID' '' item.Checks}} />
<Consul::InstanceChecks @type="node" @items={{reject-by 'ServiceID' '' item.Checks}} />
{{/if}}
{{#if item.ProxyInstance}}
<dl class="mesh">

View File

@ -44,8 +44,8 @@
</dl>
{{/if}}
{{/if}}
<ConsulKind @item={{item}} />
<ConsulExternalSource @item={{item}} />
<Consul::Kind @item={{item}} />
<Consul::ExternalSource @item={{item}} />
{{#if (and (not-eq item.InstanceCount 0) (and (not-eq item.Kind 'terminating-gateway') (not-eq item.Kind 'ingress-gateway'))) }}
<span>
{{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}

View File

@ -19,7 +19,7 @@
{{if item.Local 'local' 'global' }}
</dd>
</dl>
<ConsulTokenRulesetList @item={{item}} />
<Consul::Token::Ruleset::List @item={{item}} />
<dl>
<dt>Description</dt>
<dd data-test-description>

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Some files were not shown because too many files have changed in this diff Show More