ui: reuse BucketList for intention view pages (#11765)
This commit is contained in:
John Cowen
GitHub
parent
b9e1dcde1c
commit
4734d0989c
|
|
@ -11,22 +11,41 @@ the namespace will be displayed, whereas if the partition is different it will
|
|||
show both the partition and namespace (as a namespace called 'team-1' in
|
||||
`partition-1` is different to a namespace called 'team-1' in `partition-2`)
|
||||
|
||||
If you don't need the nspace only support for the view you are building then
|
||||
omit the `@nspace` argument.
|
||||
Showing the service name is a tiny bit awkward (different boolean type,
|
||||
doesn't care about difference) and could be improved but we only use it for
|
||||
the read only view of intentions.
|
||||
|
||||
At the time of writing, this is not currently used across the entire UI
|
||||
(specifically in intentions and maybe other areas) but eventually should be.
|
||||
|
||||
|
||||
```hbs preview-template
|
||||
<DataSource
|
||||
@src={{uri "/partition/default/dc-1/gateways/for-service/service-name"}} as |source|>
|
||||
<figure>
|
||||
<figcaption>Show everything</figcaption>
|
||||
<Consul::Bucket::List
|
||||
@item={{object-at 0 source.data}}
|
||||
@item={{hash
|
||||
Namespace="different-nspace"
|
||||
Partition="different-partition"
|
||||
Service="service-name"
|
||||
}}
|
||||
@nspace={{'nspace'}}
|
||||
@partition={{'partition'}}
|
||||
@service={{true}}
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<figcaption>Show just the top-level buckets</figcaption>
|
||||
<Consul::Bucket::List
|
||||
@item={{hash
|
||||
Namespace="different-nspace"
|
||||
Partition="different-partition"
|
||||
}}
|
||||
@nspace={{'nspace'}}
|
||||
@partition={{'partition'}}
|
||||
/>
|
||||
</DataSource>
|
||||
</figure>
|
||||
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
|
@ -36,6 +55,7 @@ At the time of writing, this is not currently used across the entire UI
|
|||
| `item` | `array` | | A Consul object that could have both a `Partition` and a `Namespace` property |
|
||||
| `nspace` | `string` | | The name of the current namespace |
|
||||
| `partition` | `string` | | The name of the current partition |
|
||||
| `service` | `boolean` | | Whether to show the service name on the end or not. Please note you must also pass a item.Service for it to show. We flag this incase an API request has a Service property but you don't want to show it |
|
||||
|
||||
## See
|
||||
|
||||
|
|
|
|||
|
|
@ -19,11 +19,23 @@
|
|||
<dd>
|
||||
{{@item.Namespace}}
|
||||
</dd>
|
||||
|
||||
{{#if (and @service @item.Service)}}
|
||||
<dt
|
||||
class="service"
|
||||
>
|
||||
Service
|
||||
</dt>
|
||||
<dd>
|
||||
{{@item.Service}}
|
||||
</dd>
|
||||
{{/if}}
|
||||
|
||||
</dl>
|
||||
{{/if}}
|
||||
{{else if (and @nspace (can 'use nspace'))}}
|
||||
{{#if (not-eq @item.Namespace @nspace)}}
|
||||
<dl>
|
||||
<dl class="consul-bucket-list">
|
||||
<dt
|
||||
class="nspace"
|
||||
{{tooltip}}
|
||||
|
|
@ -33,7 +45,16 @@
|
|||
<dd>
|
||||
{{@item.Namespace}}
|
||||
</dd>
|
||||
{{#if (and @service @item.Service)}}
|
||||
<dt
|
||||
class="service"
|
||||
>
|
||||
Service
|
||||
</dt>
|
||||
<dd>
|
||||
{{@item.Service}}
|
||||
</dd>
|
||||
{{/if}}
|
||||
</dl>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,15 +8,22 @@
|
|||
.nspace::before {
|
||||
@extend %with-folder-outline-mask, %as-pseudo;
|
||||
}
|
||||
.service {
|
||||
@extend %visually-hidden;
|
||||
}
|
||||
.service + dd {
|
||||
font-weight: var(--typo-weight-semibold);
|
||||
}
|
||||
/* potential for some sort of %composite-kv thing here */
|
||||
.partition + dd::after {
|
||||
dd:not(:last-child)::after {
|
||||
display: inline-block;
|
||||
content: '/';
|
||||
margin: 0 3px;
|
||||
/*TODO: In isolation this is not needed */
|
||||
margin-right: 6px;
|
||||
}
|
||||
.partition + dd + .nspace {
|
||||
.service + dd,
|
||||
dd + dt {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
/**/
|
||||
|
|
|
|||
|
|
@ -4,11 +4,29 @@
|
|||
<dl>
|
||||
<dt>Destination</dt>
|
||||
<dd>
|
||||
{{item.DestinationName}}{{#if (can "use partitions")}} / {{item.DestinationPartition}}{{/if}}{{#if (can "use nspaces")}} / {{item.DestinationNS}}{{/if}}
|
||||
<Consul::Bucket::List
|
||||
@item={{hash
|
||||
Namespace=item.DestinationNS
|
||||
Partition=item.DestinationPartition
|
||||
Service=item.DestinationName
|
||||
}}
|
||||
@nspace="-"
|
||||
@partition="-"
|
||||
@service={{true}}
|
||||
/>
|
||||
</dd>
|
||||
<dt>Source</dt>
|
||||
<dd>
|
||||
{{item.SourceName}}{{#if (can "use partitions")}} / {{item.SourcePartition}}{{/if}}{{#if (can "use nspaces")}} / {{item.SourceNS}}{{/if}}
|
||||
<Consul::Bucket::List
|
||||
@item={{hash
|
||||
Namespace=item.SourceNS
|
||||
Partition=item.SourcePartition
|
||||
Service=item.SourceName
|
||||
}}
|
||||
@nspace="-"
|
||||
@partition="-"
|
||||
@service={{true}}
|
||||
/>
|
||||
</dd>
|
||||
{{#if item.Action}}
|
||||
<dt>Action</dt>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
%definition-table > dl {
|
||||
margin-bottom: 1.4em;
|
||||
}
|
||||
%definition-table dd > * {
|
||||
/* TODO: We currently have one instance of nested dls */
|
||||
/* and that is for nesting a bucket list */
|
||||
/* we should probably think about changing this to possibly inline flex */
|
||||
/* or individually styling the contents */
|
||||
%definition-table > dl > dd > *:not(dl) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue