open-consul/ui-v2/app/styles/components/healthchecked-resource.scss
John Cowen 5cf063fc8a ui: Leader icon for node listing view (#6265)
- yarn upgrade consul-api-double which includes `status/leader`
- add all the ember-data things required to call a new endpoint
- Pass the new leader variable through to the template
- use the new leader variable in the template to set a leader
- add acceptance testing to verify leaders are highlighted
- Change testing navigation/api requests to status/leader (on the node listing page, status/leader is now the last get request to
be called).
- Template whitespace commit (less indenting)
- adds a test to to assert no errors happen with an unelected leader
2019-09-04 08:35:16 +00:00

68 lines
1.3 KiB
SCSS

@import '../base/components/stats-card/index';
.healthchecked-resource > div {
@extend %stats-card;
}
%tooltip-below::after {
top: calc(100% - 8px);
bottom: auto;
border-top: none;
border-bottom: 18px solid $gray-500;
}
%tooltip-below::before {
top: calc(100% + 4px);
bottom: auto;
/*TODO: This should probably go into base*/
line-height: 1em;
}
%tooltip-left::before {
right: 0;
}
%tooltip-right::before {
left: -10px;
}
%stats-card-icon {
@extend %tooltip-below;
}
%stats-card-icon:first-child::before {
right: 0;
}
%stats-card-icon:last-child::before {
left: -10px;
}
%stats-card-icon:last-child {
@extend %with-star-icon;
}
%stats-card header > .zero {
@extend %with-minus-square-fill-color-icon;
color: $gray-400;
}
%stats-card header > .non-zero {
@extend %with-check-circle-fill-color-icon;
color: $green-500;
}
%stats-card li a > :first-child {
font-size: 0;
height: 16px;
min-width: 16px;
}
[data-tooltip] {
@extend %with-pseudo-tooltip;
}
%stats-card li a > :last-child {
margin-left: 10px;
}
%stats-card a > :first-child::before {
left: -10px;
}
%stats-card a.passing > :first-child {
@extend %with-check-circle-fill-color-icon;
}
%stats-card a.warning > :first-child {
@extend %with-alert-triangle-color-icon;
}
%stats-card a.critical > :first-child {
@extend %with-cancel-square-fill-color-icon;
}