Add alert

lib/shared/addon/components/cluster-dashboard/component.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { formatSi } from 'shared/utils/util';
 import layout from './template';
@@ -51,6 +52,10 @@ export default Component.extend({
     };
   },
 
+  inactiveNodes: computed('nodes.@each.{name,state}', function() {
+    return this.get('nodes').filterBy('state', 'active');
+  }),
+
   getTicks(nodes) {
     let filtered = [];
     if (nodes.length > 0) {

lib/shared/addon/components/cluster-dashboard/template.hbs

@@ -1,5 +1,26 @@
 <div class="row pl-20 pr-20">
   {{#each gauges as |gauge|}}
-    <div class="col span-3">{{percent-gauge value=gauge.value title=gauge.title subtitle=gauge.subtitle ticks=gauge.ticks}}</div>
+  <div class="col span-3">{{percent-gauge value=gauge.value title=gauge.title subtitle=gauge.subtitle ticks=gauge.ticks}}</div>
   {{/each}}
-</div>
+  <div class="col span-3">
+    <div class="banner bg-error">
+      <div class="banner-icon">
+        <i class="icon icon-alert"></i>
+      </div>
+      <div class="banner-message text-left">
+        <p>{{t 'clusterDashboard.alert.node' node=node.name}}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+{{#each inactiveNodes as |node|}}
+<div class="banner bg-error mt-30">
+  <div class="banner-icon">
+    <i class="icon icon-alert"></i>
+  </div>
+  <div class="banner-message text-left">
+    <p>{{t 'clusterDashboard.alert.node' node=node.name}}</p>
+  </div>
+</div>
+{{/each}}

lib/shared/addon/utils/percent-gauge.js

@@ -174,7 +174,7 @@ function addTicks(svg, triangleSize, tooltip, width, height, margin, ticks) {
         tooltip.html(`<table>
                         <tbody>
                           <tr>
-                            <th>${window.l('service:intl').t('clusterDashboard.host')}</th>
+                            <th>${window.l('service:intl').t('clusterDashboard.node')}</th>
                             <th>${window.l('service:intl').t('clusterDashboard.value')}</th>
                           </tr>
                           ${tr}
@@ -260,7 +260,7 @@ function getConfig(options) {
   return {
     el: options.el,
     fontSize: width / 10,
-    margin: width / 20,
+    margin: width / 22,
     width,
     height: width / 2,
     thickness: width / 20,

translations/en-us.yaml

@@ -701,8 +701,10 @@ clusterDashboard:
   memory: MEMORY
   pods: PODS
   subtitle: "{used} of {total} used"
-  host: Host
+  node: Node
   value: Value
+  alert:
+    node: "Alert: Node {node} is not active."
 
 dnsPage:
   noMatch: No records match the current search