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

Refactor Topology Metrics Card component

This commit is contained in:
kenia 2021-04-08 15:14:53 -04:00
parent 44df7a5cd4
commit db23ab7d16
5 changed files with 86 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<a class="card"
<a class="topology-metrics-card"
href={{if
(and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))
(href-to "nspace.dc.services.show.index" (concat '~' @item.Namespace) @item.Datacenter @item.Name)
@ -10,6 +10,9 @@
<p>
{{@item.Name}}
</p>
{{#if (eq @item.Source 'proxy-registration')}}
<TopologyMetrics::SourceType />
{{/if}}
<div class="details">
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
<dl class="nspace">

78
ui/packages/consul-ui/app/components/topology-metrics/card/index.scss Normal file
View File

@ -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;
}
}

6
ui/packages/consul-ui/app/components/topology-metrics/index.js
View File

@ -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();

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

@ -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 {

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

@ -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