status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Add `stats-card` component, integrate more `@hashicorp/structure-icons` (#6021) 

1. Rebuild the heathchecked-resource component now we can copy and paste
2. As the above rebuild came with new icons, we also swapped out 'most'
of the other areas where we were using these new icons, plus any icons
that were effected by the new icon placeholders
3. Begin to remove more and more of the project specific icons (now
replaced by the shared ones)
This commit is contained in:
John Cowen 2019-07-16 17:33:28 +01:00 committed by John Cowen
parent 86208b4a70
commit d01ef7225a
31 changed files with 380 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-v2/app/components/stats-card.js Normal file
View File

@ -0,0 +1,4 @@
import Component from '@ember/component';
import Slotted from 'block-slots';
export default Component.extend(Slotted, {});

10
ui-v2/app/styles/base/components/notice/layout.scss
View File

@ -1,11 +1,13 @@
%notice {
position: relative;
padding: 1em;
padding-left: 45px;
}
/* this is probably skin */
%notice {
padding-left: calc(1em + 32px);
}
%notice::before {
position: absolute;
left: 20px;
top: 18px;
margin-top: 0;
left: 16px;
top: 16px;
}

17
ui-v2/app/styles/base/components/notice/skin.scss
View File

@ -9,6 +9,9 @@
%notice-warning {
@extend %notice;
}
%notice::before {
@extend %as-pseudo;
}
%notice-success {
@extend %frame-green-500;
}
@ -24,17 +27,3 @@
%notice-error {
@extend %frame-red-500;
}
%notice-highlight::before {
/* %with-star, bigger */
width: 16px;
height: 16px;
}
%notice-success::before {
color: $color-success;
}
%notice-info::before {
color: $color-action; /* change to info */
}
%notice-error::before {
color: $color-failure;
}

0
ui-v2/app/styles/components/healthchecked-resource/index.scss → ui-v2/app/styles/base/components/stats-card/index.scss
View File

54
ui-v2/app/styles/base/components/stats-card/layout.scss Normal file
View File

@ -0,0 +1,54 @@
/*%stats-card li:not(:last-child) span {*/
%stats-card {
position: relative;
}
%stats-card header a,
%stats-card header a > * {
display: block;
}
%stats-card header a > *,
%stats-card li a > :last-child {
/* TODO: %truncate */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
%stats-card header a {
padding: 12px 15px;
}
%stats-card header > :not(a) {
@extend %stats-card-icon;
}
%stats-card-icon {
display: inline-flex;
align-items: center;
}
%stats-card-icon:last-child {
position: absolute;
background-size: 16px;
background-position: 5px 5px;
font-size: 1.5em;
width: 28px;
height: 28px;
top: calc(-28px / 2);
left: 15px;
font-size: 0;
}
%stats-card-icon:first-child {
float: right;
padding-left: 30px;
height: 16px;
margin-top: 15px;
margin-right: 15px;
}
%stats-card li {
height: 33px;
}
%stats-card li a {
display: flex;
vertical-align: text-top;
align-items: center;
padding: 0 15px 0 12px;
height: 100%;
}

31
ui-v2/app/styles/base/components/stats-card/skin.scss Normal file
View File

@ -0,0 +1,31 @@
%stats-card {
border: $decor-border-100;
border-radius: $decor-radius-100;
}
%stats-card li {
border-top: $decor-border-100;
}
%stats-card,
%stats-card li {
border-color: $gray-200;
}
%stats-card,
%stats-card header::before {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
}
%stats-card:hover,
%stats-card:focus {
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
}
%stats-card header > :not(a):last-child {
border: $decor-border-100;
border-radius: 100%;
border-color: $gray-200;
background-color: $white;
}
%stats-card ul {
/*TODO: %list-style-none?*/
list-style-type: none;
margin: 0;
padding: 0;
}

8
ui-v2/app/styles/base/icons/base-variables.scss
View File

@ -1,18 +1,22 @@
$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="%23000"/></svg>');
$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="%23000"/></svg>');
$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23fa8f37"/></svg>');
$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23000"/></svg>');
$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 3v14.2l-3.6-3.6L6 15l6 6 6-6-1.4-1.4-3.6 3.6V3h-2z" fill="%23000"/></svg>');
$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z" fill="%23000"/></svg>');
$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%232eb039"/></svg>');
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23000"/></svg>');
$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23c73445"/></svg>');
$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23000"/></svg>');
$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.41 5L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" fill="%23000"/></svg>');
$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="%23000"/></svg>');
$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14l5-5 5 5z" fill="%23000"/></svg>');
$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%232eb039"/></svg>');
$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%23000"/></svg>');
$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8zm3 0l1.41-1.41L11 13.17l5.59-5.59L18 9l-7 7-4-4z" fill="%23000"/></svg>');
$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%23000"/></svg>');
@ -28,6 +32,8 @@ $code-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns=
$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
$deny-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23000" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23000" stroke-width="1.5" x=".75" y=".75" width="12.5" height="12.5" rx="6.25"/><path d="M3.063 3.063l7.874 7.874" stroke="%23000" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
$disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
$docs-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 11H20v9.5c0 .786-.714 1.5-1.5 1.5h-14c-.786 0-1.5-.714-1.5-1.5v-17C3 2.714 3.714 2 4.5 2H13v1.5H4.5v17h14V11zM7 17.714h9v-1.428H7v1.428zm0-2.857h9V13.43H7v1.428zM7 12h9v-1.429H7V12zm0-4.286V6.286h5v1.428H7zM17 2.5V1h6v6h-1.5V3.429L18 7l-1-1 3.5-3.5H17z" fill="%23000"/></svg>');
$download-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
@ -49,6 +55,7 @@ $hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107
$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill-rule="evenodd" fill="%23000"/></svg>');
$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="%23000"/></svg>');
$history-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="%23000"/></svg>');
$info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%231563ff" fill-rule="evenodd"/></svg>');
$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000" fill-rule="evenodd"/></svg>');
$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm0 1.886c-4.486 0-8.143 3.628-8.143 8.114 0 4.486 3.657 8.143 8.143 8.143 4.486 0 8.143-3.643 8.143-8.143 0-4.5-3.657-8.129-8.143-8.129v.015zm1.429 8.128a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 8.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000"/></svg>');
$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="20" xmlns="http://www.w3.org/2000/svg"><g stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036L17.927 5.03a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>');
@ -62,6 +69,7 @@ $menu-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns=
$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill="%23000"/></svg>');
$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14z" fill="%23000"/></svg>');
$minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%238e96a3"/></svg>');
$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%23000"/></svg>');
$minus-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" d="M0 0h9v1.5H0z"/></svg>');
$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');

40
ui-v2/app/styles/base/icons/icon-placeholders.scss
View File

@ -8,6 +8,11 @@
background-image: $alert-circle-outline-svg;
}
%with-alert-triangle-color-icon {
@extend %with-icon;
background-image: $alert-triangle-color-svg;
}
%with-alert-triangle-icon {
@extend %with-icon;
background-image: $alert-triangle-svg;
@ -23,6 +28,11 @@
background-image: $arrow-left-svg;
}
%with-arrow-right-color-icon {
@extend %with-icon;
background-image: $arrow-right-color-svg;
}
%with-arrow-right-icon {
@extend %with-icon;
background-image: $arrow-right-svg;
@ -53,6 +63,11 @@
background-image: $cancel-plain-svg;
}
%with-cancel-square-fill-color-icon {
@extend %with-icon;
background-image: $cancel-square-fill-color-svg;
}
%with-cancel-square-fill-icon {
@extend %with-icon;
background-image: $cancel-square-fill-svg;
@ -73,6 +88,11 @@
background-image: $caret-up-svg;
}
%with-check-circle-fill-color-icon {
@extend %with-icon;
background-image: $check-circle-fill-color-svg;
}
%with-check-circle-fill-icon {
@extend %with-icon;
background-image: $check-circle-fill-svg;
@ -148,6 +168,16 @@
background-image: $copy-success-svg;
}
%with-deny-color-icon {
@extend %with-icon;
background-image: $deny-color-svg;
}
%with-deny-icon {
@extend %with-icon;
background-image: $deny-svg;
}
%with-disabled-icon {
@extend %with-icon;
background-image: $disabled-svg;
@ -253,6 +283,11 @@
background-image: $history-svg;
}
%with-info-circle-fill-color-icon {
@extend %with-icon;
background-image: $info-circle-fill-color-svg;
}
%with-info-circle-fill-icon {
@extend %with-icon;
background-image: $info-circle-fill-svg;
@ -318,6 +353,11 @@
background-image: $minus-plain-svg;
}
%with-minus-square-fill-color-icon {
@extend %with-icon;
background-image: $minus-square-fill-color-svg;
}
%with-minus-square-fill-icon {
@extend %with-icon;
background-image: $minus-square-fill-svg;

30
ui-v2/app/styles/components/filter-bar.scss
View File

@ -1,33 +1,29 @@
@import './filter-bar/index';
@import './expanded-single-select/index';
@import './icons/index';
.filter-bar {
@extend %filter-bar;
}
%filter-bar [role='radiogroup'] {
@extend %expanded-single-select;
}
%filter-bar .value-passing span {
@extend %with-passing;
%filter-bar span::before {
margin-right: 9px;
opacity: 0.4;
margin-left: -2px;
}
%filter-bar .value-warning span {
@extend %with-warning;
%filter-bar .value-passing span::before {
@extend %with-check-circle-fill-icon, %as-pseudo;
}
%filter-bar .value-warning span::before {
@extend %with-warning-icon-grey;
@extend %with-alert-triangle-icon, %as-pseudo;
}
%filter-bar .value-allow span {
@extend %with-allow;
}
%filter-bar .value-deny span {
@extend %with-deny;
}
%filter-bar .value-deny span::before {
@extend %with-deny-icon-grey;
%filter-bar .value-critical span::before {
@extend %with-cancel-square-fill-icon, %as-pseudo;
}
%filter-bar .value-allow span::before {
@extend %with-right-arrow-grey;
@extend %with-arrow-right-icon, %as-pseudo;
}
%filter-bar .value-critical span {
@extend %with-critical;
%filter-bar .value-deny span::before {
@extend %with-deny-icon, %as-pseudo;
}

19
ui-v2/app/styles/components/filter-bar/layout.scss
View File

@ -22,22 +22,3 @@
margin-bottom: 12px;
}
}
// icons
%filter-bar [role='radiogroup'] label span::before {
left: 11px;
top: 50%;
margin-top: -0.5em;
}
%filter-bar .value-allow span,
%filter-bar .value-deny span,
%filter-bar .value-passing span,
%filter-bar .value-warning span,
%filter-bar .value-critical span {
position: relative;
text-indent: 23px;
}
%filter-bar .value-warning span::after {
left: 0.7em;
top: 50%;
margin-top: -8px;
}

9
ui-v2/app/styles/components/flash-message/layout.scss
View File

@ -10,12 +10,3 @@
position: absolute;
padding: 9px 15px;
}
%flash-message p strong {
position: relative;
display: inline-block;
padding-left: 20px;
}
%flash-message p strong::before {
left: 0;
margin-top: -0.5em !important;
}

15
ui-v2/app/styles/components/flash-message/skin.scss
View File

@ -2,14 +2,17 @@
border-width: 1px;
border-radius: $decor-radius-100;
}
%flash-message p.success strong {
@extend %with-passing;
%flash-message p strong::before {
@extend %as-pseudo;
}
%flash-message p.warning strong {
@extend %with-warning;
%flash-message p.success strong::before {
@extend %with-check-circle-fill-color-icon;
}
%flash-message p.error strong {
@extend %with-critical;
%flash-message p.warning strong::before {
@extend %with-alert-triangle-color-icon;
}
%flash-message p.error strong::before {
@extend %with-cancel-square-fill-color-icon;
}
%flash-message p.success {
@extend %frame-green-500;

5
ui-v2/app/styles/components/healthcheck-info.scss
View File

@ -3,9 +3,10 @@
tr .healthcheck-info {
@extend %healthcheck-info;
}
// TODO: Look at why we can't have the zeros in the healthcheck-info
td span.zero {
@extend %with-no-healthchecks;
// TODO: Why isn't this in layout?
@extend %with-minus-square-fill-color-icon;
background-position: left center;
display: block;
text-indent: 20px;
color: $gray-400;

10
ui-v2/app/styles/components/healthcheck-info/layout.scss
View File

@ -4,22 +4,12 @@
%healthcheck-info > * {
display: block;
}
%healthcheck-info dt {
text-indent: -9000px;
}
%healthcheck-info dt.zero {
display: none;
}
%healthcheck-info dd.zero {
visibility: hidden;
}
%healthcheck-info dt.warning::before {
top: 7px;
}
%healthcheck-info dt.warning::after {
left: -2px;
top: -1px;
}
%healthcheck-info dd {
box-sizing: content-box;
margin-left: 22px;

21
ui-v2/app/styles/components/healthcheck-info/skin.scss
View File

@ -1,11 +1,20 @@
%healthcheck-info dt.passing {
@extend %with-passing;
%healthcheck-info dt {
font-size: 0;
}
%healthcheck-info dt.warning {
@extend %with-warning;
%healthcheck-info dt::before {
@extend %as-pseudo;
position: absolute;
width: 18px;
height: 18px;
}
%healthcheck-info dt.critical {
@extend %with-critical;
%healthcheck-info dt.passing::before {
@extend %with-check-circle-fill-color-icon;
}
%healthcheck-info dt.warning::before {
@extend %with-alert-triangle-color-icon;
}
%healthcheck-info dt.critical::before {
@extend %with-cancel-square-fill-color-icon;
}
%healthcheck-info dt.passing,
%healthcheck-info dt.passing + dd {

34
ui-v2/app/styles/components/healthcheck-output.scss
View File

@ -1,35 +1,41 @@
@import './healthcheck-output/index';
@import './icons/index';
.healthcheck-output {
@extend %healthcheck-output;
}
%healthcheck-output.passing {
@extend %with-passing;
%healthcheck-output::before {
@extend %as-pseudo;
position: absolute;
width: 32px;
height: 32px;
}
%healthcheck-output.warning {
@extend %with-warning;
%healthcheck-output.passing::before {
@extend %with-check-circle-fill-color-icon;
}
%healthcheck-output.critical {
@extend %with-critical;
%healthcheck-output.warning::before {
@extend %with-alert-triangle-color-icon;
}
%healthcheck-output.critical::before {
@extend %with-cancel-square-fill-color-icon;
}
@media #{$--lt-spacious-healthcheck-output} {
.healthcheck-output button.copy-btn {
margin-top: -11px;
margin-right: -18px;
margin-top: -2px;
margin-right: -10px;
padding: 0;
min-width: 20px !important;
width: 20px;
visibility: hidden;
}
%healthcheck-output {
padding-left: 30px;
padding-top: 10px;
padding-left: 40px;
padding-top: 12px;
padding-bottom: 15px;
padding-right: 13px;
}
%healthcheck-output::before {
width: 15px !important;
height: 15px !important;
left: 9px;
top: 13px !important;
top: 13px;
width: 24px;
height: 24px;
}
}

13
ui-v2/app/styles/components/healthcheck-output/layout.scss
View File

@ -1,20 +1,13 @@
%healthcheck-output::before {
background-size: 55%;
width: 25px !important;
height: 25px !important;
left: 17px;
top: 20px !important;
margin-top: 0 !important;
}
%healthcheck-output.warning::before {
background-size: 100%;
left: 14px;
top: 20px;
}
%healthcheck-output {
position: relative;
padding: 20px 24px;
padding-bottom: 26px;
padding-left: 57px;
margin-bottom: 24px;
position: relative;
}
%healthcheck-output pre {
padding: 12px;

6
ui-v2/app/styles/components/healthcheck-output/skin.scss
View File

@ -27,9 +27,3 @@
@extend %frame-red-500;
color: $gray-900;
}
%healthcheck-output.passing::before {
background-color: $color-success !important;
}
%healthcheck-output.critical::before {
background-color: $color-danger !important;
}

74
ui-v2/app/styles/components/healthchecked-resource.scss
View File

@ -1,14 +1,68 @@
@import './healthchecked-resource/index';
@import './icons/index';
.healthchecked-resource {
@extend %healthchecked-resource;
@import '../base/components/stats-card/index';
.healthchecked-resource > div {
@extend %stats-card;
}
%healthchecked-resource li.passing {
@extend %with-passing;
%tooltip-below::after {
top: calc(100% - 8px);
bottom: auto;
border-top: none;
border-bottom: 18px solid $gray-500;
}
%healthchecked-resource li.warning {
@extend %with-warning;
%tooltip-below::before {
top: calc(100% + 4px);
bottom: auto;
}
%healthchecked-resource li.critical {
@extend %with-critical;
%tooltip-left::before {
right: 0;
}
%tooltip-right::before {
left: -10px;
}
%stats-card-icon {
@extend %tooltip-below;
/*TODO: This should probably go into base*/
line-height: 1em;
}
%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;
}

82
ui-v2/app/styles/components/healthchecked-resource/layout.scss
View File

@ -1,82 +0,0 @@
%healthchecked-resource header strong,
%healthchecked-resource header span,
%healthchecked-resource header em,
%healthchecked-resource li:not(:last-child) span {
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
}
%healthchecked-resource li:last-child:not(:only-child) {
overflow: hidden;
white-space: nowrap;
}
%healthchecked-resource,
%healthchecked-resource header,
%healthchecked-resource li {
position: relative;
}
%healthchecked-resource header strong {
position: absolute;
}
%healthchecked-resource a,
%healthchecked-resource header a > * {
display: block;
}
%healthchecked-resource li::before {
left: 11px;
top: 50%;
margin-top: -0.49em !important;
}
.healthy .healthchecked-resource header span {
padding-right: 20px;
}
.healthy .healthchecked-resource li {
position: absolute;
top: 8px;
right: 16px;
border: none;
}
.healthy .healthchecked-resource li::before {
left: 0;
}
.healthy .healthchecked-resource li span {
display: none;
}
.healthy .healthchecked-resource li a {
padding-left: 0;
}
%healthchecked-resource header strong {
top: 2.8em;
padding: 0 15px;
}
%healthchecked-resource header span {
margin-bottom: 1.75em;
}
%healthchecked-resource header a {
padding: 12px 15px;
}
.unhealthy .healthchecked-resource header a {
padding-bottom: 15px;
}
.unhealthy .healthchecked-resource header.with-service a {
padding-bottom: 25px;
}
%healthchecked-resource li a {
padding: 3px 15px;
padding-top: 4px;
padding-left: 39px;
height: 31px;
}
%healthchecked-resource li:not(.passing) strong,
.healthy .healthchecked-resource li:only-child strong {
display: none;
}
%healthchecked-resource ul:empty {
position: absolute;
top: 18px;
right: 20px;
width: 1em;
height: 1em;
}

33
ui-v2/app/styles/components/healthchecked-resource/skin.scss
View File

@ -1,33 +0,0 @@
%healthchecked-resource {
border: $decor-border-100;
box-shadow: 0 4px 8px 0 rgba($black, 0.05);
}
%healthchecked-resource li {
border-top: $decor-border-100;
}
%healthchecked-resource,
%healthchecked-resource li {
border-color: $gray-200;
}
%healthchecked-resource li.passing {
color: $color-success;
}
%healthchecked-resource li.warning {
color: $color-alert;
}
%healthchecked-resource li.critical {
color: $color-failure;
}
%healthchecked-resource:hover,
%healthchecked-resource:focus {
box-shadow: 0 8px 10px 0 rgba($black, 0.1);
}
%healthchecked-resource {
border-radius: $radius-small;
}
%healthchecked-resource ul:empty {
@extend %with-no-healthchecks;
}
%healthchecked-resource ul:empty::before {
color: $gray-400;
}

42
ui-v2/app/styles/components/icons/index.scss
View File

@ -207,14 +207,6 @@
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" viewBox="0 0 9 2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" fill-rule="nonzero" d="M0 0h8v2H0z"/></svg>');
}
%with-warning-icon-orange {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23fa8f37"/></svg>');
}
%with-warning-icon-grey {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23949daa"/></svg>');
}
%with-right-arrow-green {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
@ -226,39 +218,7 @@
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="13" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23919FA8" d="M7.526.219l-.958.924L10.4 4.84H0v1.32h10.4L6.568 9.857l.958.924L13 5.5z"/></svg>');
}
%with-deny-icon {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
width: 16px;
height: 16px;
background-color: $color-transparent;
}
%with-deny-icon-grey {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23919FA8" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23919FA8" stroke-width="1.5" x=".75" y=".75" width="12.5" height="12.5" rx="6.25"/><path d="M3.063 3.063l7.874 7.874" stroke="%23919FA8" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
}
%with-deny::before {
@extend %with-deny-icon;
}
%with-allow::before {
@extend %with-right-arrow-green;
}
%with-passing::before {
@extend %with-tick;
border-radius: 100%;
}
%with-warning::before {
@extend %with-warning-icon-orange;
background-color: $color-transparent;
}
%with-critical::before {
@extend %with-cross;
border-radius: 20%;
}
%with-no-healthchecks::before {
@extend %with-minus;
border-radius: 20%;
}
// swap this out for new icons
%with-error {
position: relative;
padding-left: 18px;

4
ui-v2/app/styles/components/modal-dialog/skin.scss
View File

@ -20,10 +20,6 @@
%modal-window > header {
border-bottom-width: 1px;
}
%modal-window.warning > header {
@extend %with-warning;
text-indent: 20px;
}
%modal-window > header [for='modal_close'] {
@extend %bg-icon;

21
ui-v2/app/styles/components/notice.scss
View File

@ -2,21 +2,20 @@
%notice {
margin-bottom: 1em;
}
/* These need replacing with new icons */
%notice-success {
@extend %with-passing;
%notice-success::before {
@extend %with-check-circle-fill-color-icon;
}
%notice-info {
@extend %with-passing; /* needs a better info button*/
%notice-info::before {
@extend %with-info-circle-fill-color-icon;
}
%notice-highlight {
@extend %with-star;
%notice-highlight::before {
@extend %with-star-icon;
}
%notice-warning {
@extend %with-warning;
%notice-warning::before {
@extend %with-alert-triangle-color-icon;
}
%notice-error {
@extend %with-critical;
%notice-error::before {
@extend %with-cancel-square-fill-color-icon;
}
/**/
.notice.warning {

6
ui-v2/app/styles/core/typography.scss
View File

@ -40,7 +40,6 @@ h3,
fieldset > header,
caption,
%header-nav,
%healthchecked-resource header span,
%healthcheck-output dt,
%copy-button,
%app-content div > dl > dt,
@ -56,7 +55,6 @@ main label a[rel*='help'],
%pill,
%tbody-th em,
%form-element > strong,
%healthchecked-resource strong,
%app-view h1 em {
font-weight: $typo-weight-normal;
}
@ -72,7 +70,6 @@ td strong,
/* Styling */
%form-element > em,
%tbody-th em,
%healthchecked-resource header em,
%app-view h1 em {
font-style: normal;
}
@ -91,7 +88,6 @@ h2 {
h3 {
font-size: $typo-header-300;
}
%healthcheck-info dt,
%header-drop-nav .is-active,
%app-view h1 em {
font-size: $typo-size-500;
@ -110,7 +106,7 @@ caption,
.type-dialog,
%form-element > span,
%tooltip-bubble,
%healthchecked-resource strong,
%stats-card header a span,
%footer,
%app-view h1 span.kind-proxy {
font-size: $typo-size-700;

12
ui-v2/app/styles/routes/dc/intention/index.scss
View File

@ -1,10 +1,12 @@
html.template-intention.template-list td.intent-allow strong {
@extend %with-allow;
html.template-intention.template-list td strong {
visibility: hidden;
}
html.template-intention.template-list td.intent-deny strong {
@extend %with-deny;
visibility: hidden;
html.template-intention.template-list td.intent-allow strong::before {
@extend %with-arrow-right-color-icon, %as-pseudo;
background-size: 24px;
}
html.template-intention.template-list td.intent-deny strong::before {
@extend %with-deny-color-icon, %as-pseudo;
}
html.template-intention.template-list td.destination {
@extend %tbody-th;

7
ui-v2/app/styles/routes/dc/nodes/index.scss
View File

@ -4,10 +4,15 @@ html.template-node.template-show .sessions td:last-child {
html.template-node.template-show .sessions td:first-child {
@extend %tbody-th;
}
html.template-node.template-list .healthy h2,
html.template-node.template-list .unhealthy h2 {
margin-bottom: 0.7em;
}
html.template-node.template-show #meta-data table tr {
cursor: default;
}
.healthy > div > ul > li {
padding-top: 16px;
}
.healthy h2 {
margin-bottom: 0em !important;
}

68
ui-v2/app/templates/components/healthchecked-resource.hbs
View File

@ -1,32 +1,38 @@
<header class={{if service 'with-service' }}>
<strong>{{address}}</strong>
<a href={{href}}>
<span>{{name}}</span>
<em>{{service}}</em>
</a>
</header>
{{! its important to keep this <ul> with no whitespace so we can use :empty in css }}
<ul>{{#if status }}
<li class={{status}}>
<a href={{href}}>
<strong>{{status}}</strong>
</a>
</li>
{{ else }}
{{#each unhealthy as |check| }}
<li class={{check.Status}}>
<a href={{href}}>
<strong>{{ check.Status }}</strong>
<span>{{ check.Name }}</span>
</a>
</li>
{{/each}}
{{#if (gt healthy.length 0)}}
<li class="passing">
<a href={{href}}>
<strong>{{healthy.length}}</strong>
<span>other passing {{pluralize healthy.length 'check' without-count=true}}</span>
</a>
</li>
{{#stats-card}}
{{#block-slot 'icon'}}{{#if false}}<span data-tooltip="Leader">Leader</span>{{/if}}{{/block-slot}}
{{#block-slot 'mini-stat'}}
{{#if (eq checks.length 0)}}
<span class="zero" data-tooltip="This node has no registered healthchecks">{{checks.length}}</span>
{{else if (eq checks.length healthy.length)}}
<span class="non-zero" data-tooltip={{concat 'All ' healthy.length ' ' (pluralize healthy.length 'check' without-count=true) ' passing'}}>{{healthy.length}}</span>
{{/if}}
{{/if}}</ul>
{{/block-slot}}
{{#block-slot 'header'}}
<a href={{href}}>
<strong>{{name}}</strong>
<span>{{address}}</span>
</a>
{{/block-slot}}
{{#block-slot 'body'}}
{{#if (not-eq checks.length healthy.length)}}
<ul>
{{#each unhealthy as |item|}}
<li>
<a href={{href}} class={{item.Status}}>
<strong data-tooltip={{capitalize item.Status}}>{{capitalize item.Status}}</strong>
<span>{{item.Name}}</span>
</a>
</li>
{{/each}}
{{#if (gt healthy.length 0)}}
<li>
<a href={{href}} class="passing">
<strong data-tooltip={{concat healthy.length ' other passing ' (pluralize healthy.length 'check' without-count=true)}}></strong>
<span>{{healthy.length}} other passing {{pluralize healthy.length 'check' without-count=true}}</span>
</a>
</li>
{{/if}}
</ul>
{{/if}}
{{/block-slot}}
{{/stats-card}}

9
ui-v2/app/templates/components/stats-card.hbs Normal file
View File

@ -0,0 +1,9 @@
{{yield}}
<div class="stats-card">
<header>
{{#yield-slot 'mini-stat'}}{{yield}}{{/yield-slot}}
{{#yield-slot 'header'}}{{yield}}{{/yield-slot}}
{{#yield-slot 'icon'}}{{yield}}{{/yield-slot}}
</header>
{{#yield-slot 'body'}}{{yield}}{{/yield-slot}}
</div>

2
ui-v2/app/templates/dc/nodes/index.hbs
View File

@ -51,7 +51,7 @@
href=(href-to 'dc.nodes.show' item.Node)
name=item.Node
address=item.Address
status=item.Checks.[0].Status
checks=item.Checks
}}
{{/list-collection}}
{{/block-slot}}

35
ui-v2/tests/integration/components/stats-card-test.js Normal file
View File

@ -0,0 +1,35 @@
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('stats-card', 'Integration | Component | stats card', {
integration: true,
});
test('it renders', function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
// Template block usage:
this.render(hbs`
{{#stats-card}}
{{#block-slot 'icon'}}icon{{/block-slot}}
{{#block-slot 'mini-stat'}}mini-stat{{/block-slot}}
{{#block-slot 'header'}}header{{/block-slot}}
{{#block-slot 'body'}}body{{/block-slot}}
{{/stats-card}}
`);
['icon', 'mini-stat', 'header'].forEach(item => {
assert.ok(
this.$('header')
.text()
.trim()
.indexOf(item) !== -1
);
});
assert.ok(
this.$()
.text()
.trim()
.indexOf('body') !== -1
);
});