From 2f1dec2924f06eb8581f1f565529c06d63a97ed4 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Thu, 23 Jan 2020 17:58:44 -0800 Subject: [PATCH 1/7] Allow for an icon within the node status light --- .../styles/components/node-status-light.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/ui/app/styles/components/node-status-light.scss b/ui/app/styles/components/node-status-light.scss index d7583a184..bb55398d6 100644 --- a/ui/app/styles/components/node-status-light.scss +++ b/ui/app/styles/components/node-status-light.scss @@ -1,13 +1,16 @@ $size: 1.3rem; .node-status-light { - display: inline-block; + display: inline-flex; height: $size; width: $size; border-radius: $size / 2; vertical-align: middle; + align-items: center; + justify-content: center; background: $black; + color: $white; &.ready { background: $primary; @@ -18,17 +21,16 @@ $size: 1.3rem; } &.initializing { - background: repeating-linear-gradient( - -45deg, - $grey-lighter, - $grey-lighter 3px, - darken($grey-lighter, 25%) 3px, - darken($grey-lighter, 25%) 6px - ); + background: $grey-lighter; } &.ineligible, &.draining { background: $warning; } + + .icon { + width: $size - 0.2rem; + height: $size - 0.2rem; + } } From 3d5193b8ded5d0ed09cb7644fc537f8721159883 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Thu, 23 Jan 2020 17:58:58 -0800 Subject: [PATCH 2/7] Add an icon inside the node status light --- ui/app/templates/clients/client.hbs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index db2abd338..e6a0d0f96 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -81,7 +81,9 @@
- + + {{x-icon model.compositeStatusIcon}} +
From ec01c0bdd7a242e9102e8015f70edf0d7dcfe35f Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Thu, 23 Jan 2020 17:59:21 -0800 Subject: [PATCH 3/7] Assign icons to node statuses --- ui/app/models/node.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/ui/app/models/node.js b/ui/app/models/node.js index e685d4e54..7d1612b47 100644 --- a/ui/app/models/node.js +++ b/ui/app/models/node.js @@ -91,6 +91,21 @@ export default Model.extend({ } }), + compositeStatusIcon: computed('isDraining', 'isEligible', 'status', function() { + // ineligible = exclamation point + // ready = checkmark + // down = x + // initializing = exclamation??? + if (this.isDraining || !this.isEligible) { + return 'alert-circle-fill'; + } else if (this.status === 'down') { + return 'cancel-plain'; + } else if (this.status === 'initializing') { + return 'run'; + } + return 'check-plain'; + }), + setEligible() { if (this.isEligible) return RSVP.resolve(); // Optimistically update schedulingEligibility for immediate feedback From 7f60198742e1661dc70481a9d43cfee5b02a89d8 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Fri, 31 Jan 2020 12:51:22 -0800 Subject: [PATCH 4/7] New node initializing icon --- ui/app/models/node.js | 10 +++------- ui/public/images/icons/node-init-circle-fill.svg | 7 +++++++ 2 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 ui/public/images/icons/node-init-circle-fill.svg diff --git a/ui/app/models/node.js b/ui/app/models/node.js index 7d1612b47..e8e30a8c4 100644 --- a/ui/app/models/node.js +++ b/ui/app/models/node.js @@ -92,18 +92,14 @@ export default Model.extend({ }), compositeStatusIcon: computed('isDraining', 'isEligible', 'status', function() { - // ineligible = exclamation point - // ready = checkmark - // down = x - // initializing = exclamation??? if (this.isDraining || !this.isEligible) { return 'alert-circle-fill'; } else if (this.status === 'down') { - return 'cancel-plain'; + return 'cancel-circle-fill'; } else if (this.status === 'initializing') { - return 'run'; + return 'node-init-circle-fill'; } - return 'check-plain'; + return 'check-circle-fill'; }), setEligible() { diff --git a/ui/public/images/icons/node-init-circle-fill.svg b/ui/public/images/icons/node-init-circle-fill.svg new file mode 100644 index 000000000..775a63f20 --- /dev/null +++ b/ui/public/images/icons/node-init-circle-fill.svg @@ -0,0 +1,7 @@ + + + + + + + From e95370464ad319616c6d246c312e619763fe46fe Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Fri, 31 Jan 2020 12:52:52 -0800 Subject: [PATCH 5/7] Redo the node-status-light CSS to be icon-based --- .../styles/components/node-status-light.scss | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/ui/app/styles/components/node-status-light.scss b/ui/app/styles/components/node-status-light.scss index bb55398d6..3a0f5aed7 100644 --- a/ui/app/styles/components/node-status-light.scss +++ b/ui/app/styles/components/node-status-light.scss @@ -1,4 +1,4 @@ -$size: 1.3rem; +$size: 1.6rem; .node-status-light { display: inline-flex; @@ -9,28 +9,30 @@ $size: 1.3rem; align-items: center; justify-content: center; - background: $black; - color: $white; + // Compensate for the padding within the SVG + // (between the circle paths and the viewBox) + margin-left: -1px; + margin-right: -1px; &.ready { - background: $primary; + color: $primary; } &.down { - background: $danger; + color: $danger; } &.initializing { - background: $grey-lighter; + color: $grey-light; } &.ineligible, &.draining { - background: $warning; + color: $warning; } .icon { - width: $size - 0.2rem; - height: $size - 0.2rem; + width: $size; + height: $size; } } From 2e2bcc50a7c20fe994820a6007ec4357028a0d72 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Fri, 31 Jan 2020 12:54:47 -0800 Subject: [PATCH 6/7] Add an animation for the initializing state --- ui/app/styles/components/node-status-light.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/ui/app/styles/components/node-status-light.scss b/ui/app/styles/components/node-status-light.scss index 3a0f5aed7..2608b771a 100644 --- a/ui/app/styles/components/node-status-light.scss +++ b/ui/app/styles/components/node-status-light.scss @@ -24,6 +24,10 @@ $size: 1.6rem; &.initializing { color: $grey-light; + + .blinking { + animation: node-status-light-initializing 0.7s infinite alternate ease-in-out; + } } &.ineligible, @@ -36,3 +40,13 @@ $size: 1.6rem; height: $size; } } + +@keyframes node-status-light-initializing { + 0% { + opacity: 0.2; + } + + 100% { + opacity: 0.7; + } +} From 44195106521b9b5b7941029fa1f08e9d07045377 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Fri, 31 Jan 2020 12:55:24 -0800 Subject: [PATCH 7/7] Call out the 'down' status too, since it's a pretty bad one --- ui/app/components/client-node-row.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/app/components/client-node-row.js b/ui/app/components/client-node-row.js index 075623588..4eaec00f8 100644 --- a/ui/app/components/client-node-row.js +++ b/ui/app/components/client-node-row.js @@ -54,6 +54,8 @@ export default Component.extend(WithVisibilityDetection, { return 'status-text is-info'; } else if (compositeStatus === 'ineligible') { return 'status-text is-warning'; + } else if (compositeStatus === 'down') { + return 'status-text is-danger'; } else { return ''; }