luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Adding Partition to topology card (#11805)

This commit is contained in:
Kenia 2022-01-11 10:04:06 -05:00 committed by GitHub
parent 217e2dc656
commit fbb9f5cdf5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 1116 additions and 2092 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs
View File

@ -29,18 +29,35 @@
<TopologyMetrics::SourceType @source='routing-config' />
{{/if}}
<div class="details">
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
<dl class="nspace">
<dt>
<Tooltip>
Namespace
</Tooltip>
</dt>
<dd>
{{@item.Namespace}}
</dd>
</dl>
{{/if}}
{{#if (and (can 'use partitions') (can 'use nspaces'))}}
<div class={{if (not-eq @item.Partition @service.Partition) 'group'}}>
{{#if (not-eq @item.Partition @service.Partition)}}
<dl class="partition">
<dt>
<Tooltip>
Admin Partition
</Tooltip>
</dt>
<dd>
{{@item.Partition}}
</dd>
</dl>
{{/if}}
<span></span>
{{#if (or (not-eq @item.Partition @service.Partition) (not-eq @item.Namespace @service.Namespace))}}
<dl class="nspace">
<dt>
<Tooltip>
Namespace
</Tooltip>
</dt>
<dd>
{{@item.Namespace}}
</dd>
</dl>
{{/if}}
</div>
{{/if}}
{{#if (not-eq @item.Source 'routing-config')}}

41
ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
View File

@ -23,7 +23,6 @@
padding: 12px !important;
}
div {
display: inline-flex;
dl {
display: inline-flex;
margin-right: 8px;
@ -42,11 +41,8 @@
.health dt::before {
margin-top: 2px;
}
.nspace dt::before {
@extend %with-folder-outline-mask, %as-pseudo;
}
.health dt::before {
@extend %with-help-circle-outline-mask, %as-pseudo;
.partition dt::before {
@extend %with-user-team-mask, %as-pseudo;
}
.nspace dt::before {
@extend %with-folder-outline-mask, %as-pseudo;
@ -54,6 +50,10 @@
.health dt::before {
@extend %with-help-circle-outline-mask, %as-pseudo;
}
.health dt::before {
@extend %with-help-circle-outline-mask, %as-pseudo;
}
.partition dt::before,
.nspace dt::before,
.health dt::before {
background-color: rgb(var(--tone-gray-500));
@ -77,5 +77,34 @@
}
.details {
padding: 0 12px 12px 12px;
> *:not(:last-child) {
padding-bottom: 6px;
}
.group {
display: grid;
grid-template-columns: 20px 1fr;
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
'partition partition'
'union namespace';
span {
display: inline-block;
grid-area: union;
padding-left: 7px;
margin-right: 0px;
}
span::before {
margin-right: 0px;
@extend %with-union-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
}
dl:first-child {
grid-area: partition;
padding-bottom: 6px;
}
dl:nth-child(2) {
grid-area: namespace;
}
}
}
}

7
ui/packages/consul-ui/app/components/topology-metrics/layout.scss
View File

@ -39,13 +39,6 @@
#upstream-container {
padding: 12px;
}
#downstream-container div:first-child {
display: inline-flex;
span::before {
@extend %with-info-circle-outline-mask, %as-pseudo;
margin-left: 4px;
}
}
#upstream-column #upstream-container:not(:last-child) {
margin-bottom: 8px;
}

2
ui/packages/consul-ui/app/components/topology-metrics/skin.scss
View File

@ -16,7 +16,7 @@
#upstream-container {
background-color: rgb(var(--tone-gray-100));
}
#downstream-container div:first-child {
#downstream-container > div:first-child {
display: inline-flex;
span::before {
@extend %with-info-circle-outline-mask, %as-pseudo;

3101
ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
View File

File diff suppressed because one or more lines are too long

10
ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
View File

@ -9448,6 +9448,16 @@
mask-image: var(--unfold-open-24-svg);
}
%with-union-icon {
@extend %with-icon, %union-svg;
background-image: var(--union-svg);
}
%with-union-mask {
@extend %with-mask, %union-svg;
-webkit-mask-image: var(--union-svg);
mask-image: var(--union-svg);
}
%with-unlock-16-icon {
@extend %with-icon, %unlock-16-svg-prop;
background-image: var(--unlock-16-svg);

6
ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_
View File

@ -7,10 +7,12 @@ ${
fake.seed(num);
return range(num).map(i => {
const nspace = i === 0 ? `default` : `${fake.hacker.noun()}-ns-${i}`;
const partition = i === 0 ? `default` : `${fake.hacker.noun()}-partition`;
return {
Name: `service-${fake.random.number({min:0, max:99})}`,
Datacenter: `${dc}`,
Namespace: `${nspace}`
Namespace: `${nspace}`,
Partition: `${partition}`
}
})
};
@ -72,6 +74,7 @@ ${(Math.random(1) > 0.3) ? `
"Name": "${item.Name}",
"Datacenter": "${item.Datacenter}",
"Namespace": "${item.Namespace}",
"Partition": "${item.Partition}",
"ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
"ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
"ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
@ -101,6 +104,7 @@ ${(Math.random(1) > 0.3) ? `
"Name": "${item.Name}",
"Datacenter": "${item.Datacenter}",
"Namespace": "${item.Namespace}",
"Partition": "${item.Partition}",
"ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
"ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
"ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},