From 7308c9159be6538b44996b87092cdac7e02b80d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fl=C3=A1vio=20Fernandes?= <flavio@heroiclabs.com>
Date: Thu, 14 Oct 2021 12:09:30 +0100
Subject: [PATCH] Add node status icons to the console dashboard. (#697)

---
 console/ui/src/app/status/status.component.html | 10 +++++++++-
 console/ui/src/static/blue-spinner.svg          |  7 +++++++
 console/ui/src/static/red-spinner.svg           |  7 +++++++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 console/ui/src/static/blue-spinner.svg
 create mode 100644 console/ui/src/static/red-spinner.svg

diff --git a/console/ui/src/app/status/status.component.html b/console/ui/src/app/status/status.component.html
index a161a1a0a..be6ba34a3 100644
--- a/console/ui/src/app/status/status.component.html
+++ b/console/ui/src/app/status/status.component.html
@@ -17,7 +17,15 @@
   </thead>
   <tbody *ngIf="statusData">
     <tr class="clickable" *ngFor="let nodeData of statusData.nodes">
-      <td>{{nodeData.name}}</td>
+      <td>
+        <ng-container [ngSwitch]="nodeData.health">
+          <img *ngSwitchCase="0" class="mr-2" src="/static/svg/green-tick.svg" alt="" width="15" height="" ngbTooltip="Ok">
+          <img *ngSwitchCase="1" class="mr-2" src="/static/svg/red-triangle.svg" alt="" width="15" height="" ngbTooltip="Error">
+          <img *ngSwitchCase="2" class="mr-2" src="/static/blue-spinner.svg" alt="" width="15" height="" ngbTooltip="Connecting">
+          <img *ngSwitchCase="3" class="mr-2" src="/static/red-spinner.svg" alt="" width="15" height="" ngbTooltip="Disconnecting">
+        </ng-container>
+        <span>{{nodeData.name}}</span>
+      </td>
       <td>{{nodeData.session_count}} <span [hidden]="!showDelta" class="text-muted small">({{getMaxSessionCount() - nodeData.session_count}} delta)</span></td>
       <td>{{nodeData.presence_count}} <span [hidden]="!showDelta" class="text-muted small">({{getMaxPresenceCount() - nodeData.presence_count}} delta)</span></td>
       <td>{{nodeData.match_count}} <span [hidden]="!showDelta" class="text-muted small">({{getMaxMatchCount() - nodeData.match_count}} delta)</span></td>
diff --git a/console/ui/src/static/blue-spinner.svg b/console/ui/src/static/blue-spinner.svg
new file mode 100644
index 000000000..aeca80d68
--- /dev/null
+++ b/console/ui/src/static/blue-spinner.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="128px" height="128px" viewBox="0 0 128 128" xml:space="preserve">
+  <g>
+    <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#31CAFF" fill-opacity="1" />
+    <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/console/ui/src/static/red-spinner.svg b/console/ui/src/static/red-spinner.svg
new file mode 100644
index 000000000..a1622cb14
--- /dev/null
+++ b/console/ui/src/static/red-spinner.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="128px" height="128px" viewBox="0 0 128 128" xml:space="preserve">
+  <g>
+    <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#FE756A" fill-opacity="1" />
+    <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform>
+  </g>
+</svg>
\ No newline at end of file
-- 
GitLab