ui: Adding partitions + icons to upstreams/upstream instances (#11556)

Adds a partition badge/label/visual to upstreams and upstream instances.
This commit is contained in:
John Cowen 2021-11-17 17:46:50 +00:00 committed by GitHub
parent 38d4974584
commit a31cc5f7c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 126 additions and 1 deletions

3
.changelog/11556.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Add upstream icons for upstreams and upstream instances
```

View File

@ -24,6 +24,7 @@ as |item index|>
{{else}} {{else}}
{{item.SourceName}} {{item.SourceName}}
{{/if}} {{/if}}
{{#if (or (can 'use nspaces') (can 'use partitions'))}}
{{! TODO: slugify }} {{! TODO: slugify }}
<em> <em>
<span <span
@ -32,6 +33,7 @@ as |item index|>
class={{concat 'nspace-' (or item.SourceNS 'default')}} class={{concat 'nspace-' (or item.SourceNS 'default')}}
>{{or item.SourceNS 'default'}}</span> >{{or item.SourceNS 'default'}}</span>
</em> </em>
{{/if}}
</a> </a>
</td> </td>
<td class="intent intent-{{slugify item.Action}}" data-test-intention-action={{item.Action}}> <td class="intent intent-{{slugify item.Action}}" data-test-intention-action={{item.Action}}>
@ -44,6 +46,7 @@ as |item index|>
{{else}} {{else}}
{{item.DestinationName}} {{item.DestinationName}}
{{/if}} {{/if}}
{{#if (or (can 'use nspaces') (can 'use partitions'))}}
{{! TODO: slugify }} {{! TODO: slugify }}
<em> <em>
<span <span
@ -52,6 +55,7 @@ as |item index|>
class={{concat 'nspace-' (or item.DestinationNS 'default')}} class={{concat 'nspace-' (or item.DestinationNS 'default')}}
>{{or item.DestinationNS 'default'}}</span> >{{or item.DestinationNS 'default'}}</span>
</em> </em>
{{/if}}
</span> </span>
</td> </td>
<td class="permissions"> <td class="permissions">

View File

@ -0,0 +1,39 @@
# Consul::UpstreamInstance::List
```hbs
<DataSource
@src={{uri '/partition/default/dc-1/proxies/for-service/origin-service-slug'}}
as |source|>
<Consul::UpstreamInstance::List
@items={{source.data}}
@dc={{'dc-1'}}
@nspace={{'nspace'}}
@partition={{'partition'}}
/>
</DataSource>
```
A presentational component for rendering Consul Upstream Instances. Upstreams
instances are a Consul Service Instance that specifically has a relationship
with an origin Service Instance.
Currently you have to pass in the current dc, nspace and partition so that we
can figure out whether to show things that aren't in same 'bucket' that you are
currently in in the UI.
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `array` | | An array of Upstreams |
| `dc` | `string` | | The slug of the current dc |
| `nspace` | `string` | | The slug of the current nspace |
| `partition` | `string` | | The slug of the current partition |
## See
- [Possible
Occurances](/hashicorp/consul/search?q=%22Consul%3A%3AUpstreamInstance%3A%3AList%22)
- [Template Source Code](./index.hbs)
---

View File

@ -11,7 +11,21 @@
</p> </p>
</div> </div>
<div class="detail"> <div class="detail">
{{#if (env 'CONSUL_NSPACES_ENABLED')}} {{#if (can 'use partitions')}}
{{#if (not-eq item.DestinationType 'prepared_query')}}
<dl class="partition">
<dt
{{tooltip}}
>
Admin Partition
</dt>
<dd>
{{or item.DestinationPartition 'default'}}
</dd>
</dl>
{{/if}}
{{/if}}
{{#if (can 'use nspaces')}}
{{#if (not-eq item.DestinationType 'prepared_query')}} {{#if (not-eq item.DestinationType 'prepared_query')}}
<dl class="nspace"> <dl class="nspace">
<dt <dt

View File

@ -8,6 +8,9 @@
dl.datacenter dt::before { dl.datacenter dt::before {
@extend %with-user-organization-mask, %as-pseudo; @extend %with-user-organization-mask, %as-pseudo;
} }
dl.partition dt::before {
@extend %with-user-team-mask, %as-pseudo;
}
dl.nspace dt::before { dl.nspace dt::before {
@extend %with-folder-outline-mask, %as-pseudo; @extend %with-folder-outline-mask, %as-pseudo;
} }

View File

@ -0,0 +1,40 @@
# Consul::Upstream::List
```hbs
<DataSource
@src={{uri '/partition/default/dc-1/gateways/for-service/origin-service-slug'}}
as |source|>
<Consul::Upstream::List
@items={{source.data}}
@dc={{'dc-1'}}
@nspace={{'nspace'}}
@partition={{'partition'}}
/>
</DataSource>
```
A presentational component for rendering Consul Upstreams (not upstream
instances). Upstreams are a Consul Service that is specifically have a
relationship with an origin Service. The Upstream 'groups' are usually only used
for showing relationships for gateways.
Currently you have to pass in the current dc, nspace and partition so that we
can figure out whether to show things that aren't in same 'bucket' that you are
currently in in the UI.
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `array` | | An array of Upstreams |
| `dc` | `string` | | The slug of the current dc |
| `nspace` | `string` | | The slug of the current nspace |
| `partition` | `string` | | The slug of the current partition |
## See
- [Possible Occurances](/hashicorp/consul/search?q=%22Consul%3A%3AUpstream%3A%3AList%22)
- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)
---

View File

@ -24,6 +24,18 @@ as |item index|>
{{/if}} {{/if}}
</dd> </dd>
</dl> </dl>
{{#if (and (can 'use partitions') (not-eq item.Partition @partition))}}
<dl class="partition">
<dt
{{tooltip}}
>
Admin Partition
</dt>
<dd>
{{item.Partition}}
</dd>
</dl>
{{/if}}
<a <a
data-test-service-name data-test-service-name
href={{if (and (can 'use nspaces') (not-eq item.Namespace @nspace)) href={{if (and (can 'use nspaces') (not-eq item.Namespace @nspace))

View File

@ -0,0 +1,8 @@
%consul-upstream-list {
dl.partition dt::before {
@extend %with-user-team-mask, %as-pseudo;
}
}
.consul-upstream-list {
@extend %consul-upstream-list;
}

View File

@ -76,6 +76,7 @@
@import 'consul-ui/components/consul/loader'; @import 'consul-ui/components/consul/loader';
@import 'consul-ui/components/consul/tomography/graph'; @import 'consul-ui/components/consul/tomography/graph';
@import 'consul-ui/components/consul/discovery-chain'; @import 'consul-ui/components/consul/discovery-chain';
@import 'consul-ui/components/consul/upstream/list';
@import 'consul-ui/components/consul/upstream-instance/list'; @import 'consul-ui/components/consul/upstream-instance/list';
@import 'consul-ui/components/consul/health-check/list'; @import 'consul-ui/components/consul/health-check/list';
@import 'consul-ui/components/consul/exposed-path/list'; @import 'consul-ui/components/consul/exposed-path/list';

View File

@ -74,6 +74,7 @@ as |route|>
@items={{collection.items}} @items={{collection.items}}
@dc={{dc}} @dc={{dc}}
@nspace={{nspace}} @nspace={{nspace}}
@partition={{partition}}
/> />
</collection.Collection> </collection.Collection>
<collection.Empty> <collection.Empty>