From db23ab7d16162b4ba1b667ccc632f18bc05f0e14 Mon Sep 17 00:00:00 2001 From: kenia Date: Thu, 8 Apr 2021 15:14:53 -0400 Subject: [PATCH] Refactor Topology Metrics Card component --- .../{card.hbs => card/index.hbs} | 5 +- .../topology-metrics/card/index.scss | 78 +++++++++++++++++++ .../app/components/topology-metrics/index.js | 6 +- .../components/topology-metrics/layout.scss | 38 --------- .../app/components/topology-metrics/skin.scss | 49 ------------ 5 files changed, 86 insertions(+), 90 deletions(-) rename ui/packages/consul-ui/app/components/topology-metrics/{card.hbs => card/index.hbs} (91%) create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/card/index.scss diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs similarity index 91% rename from ui/packages/consul-ui/app/components/topology-metrics/card.hbs rename to ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs index ed392e5f5..c65439e06 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs @@ -1,4 +1,4 @@ - {{@item.Name}}

+ {{#if (eq @item.Source 'proxy-registration')}} + + {{/if}}
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss new file mode 100644 index 000000000..8e61da3c3 --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss @@ -0,0 +1,78 @@ +#upstream-container .topology-metrics-card:not(:last-child), +#downstream-container .topology-metrics-card:not(:last-child) { + margin-bottom: 8px; +} +#upstream-container .topology-metrics-card, +#downstream-container .topology-metrics-card { + display: block; + color: $gray-700; + overflow: hidden; + background-color: $white; + border-radius: $decor-radius-100; + border: 1px solid $gray-200; + p { + padding: 12px 12px 0 12px; + font-size: $typo-size-500; + font-weight: $typo-weight-semibold; + margin-bottom: 0 !important; + } + div { + display: inline-flex; + dl { + display: inline-flex; + margin-right: 8px; + } + dd { + color: $gray-700; + } + span { + margin-right: 8px; + } + span::before, + dt::before { + margin-right: 4px; + } + .nspace dt::before, + .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; + } + .nspace dt::before { + @extend %with-folder-outline-mask, %as-pseudo; + } + .health dt::before { + @extend %with-help-circle-outline-mask, %as-pseudo; + } + .nspace dt::before, + .health dt::before { + background-color: $gray-500; + } + .passing::before { + @extend %with-check-circle-fill-color-mask, %as-pseudo; + background-color: $green-500; + } + .warning::before { + @extend %with-alert-triangle-color-mask, %as-pseudo; + background-color: $orange-500; + } + .critical::before { + @extend %with-cancel-square-fill-color-mask, %as-pseudo; + background-color: $red-500; + } + .empty::before { + @extend %with-minus-square-fill-mask, %as-pseudo; + color: $gray-500; + } + } + .details { + padding: 0 12px 12px 12px; + } + div.stats { + border-top: 1px solid $gray-200; + } +} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js index 3704342e5..31e6eae93 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/index.js @@ -92,9 +92,11 @@ export default class TopologyMetrics extends Component { this.upView = document.getElementById('upstream-lines').getBoundingClientRect(); // Get Card elements positions - const downCards = [...document.querySelectorAll('#downstream-container .card')]; + const downCards = [ + ...document.querySelectorAll('#downstream-container .topology-metrics-card'), + ]; const grafanaCard = document.querySelector('.metrics-header'); - const upCards = [...document.querySelectorAll('#upstream-column .card')]; + const upCards = [...document.querySelectorAll('#upstream-column .topology-metrics-card')]; // Set center positioning points this.centerDimensions = grafanaCard.getBoundingClientRect(); diff --git a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss index 1bd386dac..8a2064709 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss @@ -49,44 +49,6 @@ #upstream-column #upstream-container:not(:last-child) { margin-bottom: 8px; } -#upstream-container .card:not(:last-child), -#downstream-container .card:not(:last-child) { - margin-bottom: 8px; -} -#upstream-container .card, -#downstream-container .card { - display: block; - color: $gray-700; - overflow: hidden; - p { - padding: 12px 12px 0 12px; - font-size: 16px; - font-weight: 600; - margin-bottom: 0 !important; - } - div { - display: inline-flex; - dl { - display: inline-flex; - margin-right: 8px; - } - span { - margin-right: 8px; - } - span::before, - dt::before { - margin-right: 4px; - } - .nspace dt::before, - .health dt::before { - margin-top: 2px; - } - } - .details { - padding: 0 12px 12px 12px; - } - -} // Metrics Container #metrics-container { diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss index 12a1f144e..bdf3159b7 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss @@ -20,52 +20,6 @@ background-color: $gray-500; } } -#upstream-container .card, -#downstream-container .card { - background-color: $white; - border-radius: $decor-radius-100; - border: 1px solid $gray-200; - div { - dd { - color: $gray-700; - } - .nspace dt::before { - @extend %with-folder-outline-mask, %as-pseudo; - } - .health dt::before { - @extend %with-help-circle-outline-mask, %as-pseudo; - } - .nspace dt::before { - @extend %with-folder-outline-mask, %as-pseudo; - } - .health dt::before { - @extend %with-help-circle-outline-mask, %as-pseudo; - } - .nspace dt::before, - .health dt::before { - background-color: $gray-500; - } - .passing::before { - @extend %with-check-circle-fill-color-mask, %as-pseudo; - background-color: $green-500; - } - .warning::before { - @extend %with-alert-triangle-color-mask, %as-pseudo; - background-color: $orange-500; - } - .critical::before { - @extend %with-cancel-square-fill-color-mask, %as-pseudo; - background-color: $red-500; - } - .empty::before { - @extend %with-minus-square-fill-mask, %as-pseudo; - color: $gray-500; - } - } - div:nth-child(3) { - border-top: 1px solid $gray-200; - } -} // Metrics Container #metrics-container { @@ -90,9 +44,6 @@ @extend %with-docs-mask, %as-pseudo; } } - div:nth-child(3) { - border-top: 1px solid $gray-200; - } } // SVG Line styling