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
John Cowen
parent
39860ae995
commit
5d2e1ce19b
4
ui-v2/app/components/stats-card.js
Normal file
4
ui-v2/app/components/stats-card.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import Component from '@ember/component';
|
||||
import Slotted from 'block-slots';
|
||||
|
||||
export default Component.extend(Slotted, {});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
54
ui-v2/app/styles/base/components/stats-card/layout.scss
Normal file
54
ui-v2/app/styles/base/components/stats-card/layout.scss
Normal 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
31
ui-v2/app/styles/base/components/stats-card/skin.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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>');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
<header class={{if service 'with-service' }}>
|
||||
<strong>{{address}}</strong>
|
||||
{{#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}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'header'}}
|
||||
<a href={{href}}>
|
||||
<span>{{name}}</span>
|
||||
<em>{{service}}</em>
|
||||
<strong>{{name}}</strong>
|
||||
<span>{{address}}</span>
|
||||
</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>
|
||||
{{/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 class="passing">
|
||||
<a href={{href}}>
|
||||
<strong>{{healthy.length}}</strong>
|
||||
<span>other passing {{pluralize healthy.length 'check' without-count=true}}</span>
|
||||
<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}}
|
||||
{{/if}}</ul>
|
||||
</ul>
|
||||
{{/if}}
|
||||
{{/block-slot}}
|
||||
{{/stats-card}}
|
||||
|
|
|
|||
9
ui-v2/app/templates/components/stats-card.hbs
Normal file
9
ui-v2/app/templates/components/stats-card.hbs
Normal 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>
|
||||
|
|
@ -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
35
ui-v2/tests/integration/components/stats-card-test.js
Normal 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
|
||||
);
|
||||
});
|
||||
Loading…
Reference in a new issue