From 19916dc02882c70d0897377efeb38f22680f4143 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 18 May 2020 14:07:41 -0700
Subject: [PATCH] Handle node-only views

---
 ui/app/styles/core/columns.scss         |   9 ++
 ui/app/templates/csi/plugins/index.hbs  |   8 +-
 ui/app/templates/csi/plugins/plugin.hbs | 130 +++++++++++++-----------
 3 files changed, 83 insertions(+), 64 deletions(-)

diff --git a/ui/app/styles/core/columns.scss b/ui/app/styles/core/columns.scss
index d68425e9a..d912a37c3 100644
--- a/ui/app/styles/core/columns.scss
+++ b/ui/app/styles/core/columns.scss
@@ -14,4 +14,13 @@
   &.is-bottom-aligned {
     align-items: flex-end;
   }
+
+  &.is-max-half {
+    max-width: 50%;
+  }
+
+  &.is-centered {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
diff --git a/ui/app/templates/csi/plugins/index.hbs b/ui/app/templates/csi/plugins/index.hbs
index 7d4f5f1f1..2eab19291 100644
--- a/ui/app/templates/csi/plugins/index.hbs
+++ b/ui/app/templates/csi/plugins/index.hbs
@@ -42,8 +42,12 @@
                 {{#link-to "csi.plugins.plugin" row.model.plainId class="is-primary"}}{{row.model.plainId}}{{/link-to}}
               </td>
               <td data-test-plugin-controller-health>
-                {{if (gt row.model.controllersHealthy 0) "Healthy" "Unhealthy"}}
-                ({{row.model.controllersHealthy}}/{{row.model.controllersExpected}})
+                {{#if row.model.controllerRequired}}
+                  {{if (gt row.model.controllersHealthy 0) "Healthy" "Unhealthy"}}
+                  ({{row.model.controllersHealthy}}/{{row.model.controllersExpected}})
+                {{else}}
+                  <em class="is-faded">Node Only</em>
+                {{/if}}
               </td>
               <td data-test-plugin-node-health>
                 {{if (gt row.model.nodesHealthy 0) "Healthy" "Unhealthy"}}
diff --git a/ui/app/templates/csi/plugins/plugin.hbs b/ui/app/templates/csi/plugins/plugin.hbs
index bcd2c8873..62b76f792 100644
--- a/ui/app/templates/csi/plugins/plugin.hbs
+++ b/ui/app/templates/csi/plugins/plugin.hbs
@@ -5,11 +5,13 @@
   <div class="boxed-section is-small">
     <div class="boxed-section-body inline-definitions">
       <span class="label">Plugin Details</span>
-      <span class="pair" data-test-plugin-controller-health>
-        <span class="term">Controller Health</span>
-        {{format-percentage model.controllersHealthy total=model.controllersExpected}}
-        ({{model.controllersHealthy}}/{{model.controllersExpected}})
-      </span>
+      {{#if model.controllerRequired}}
+        <span class="pair" data-test-plugin-controller-health>
+          <span class="term">Controller Health</span>
+          {{format-percentage model.controllersHealthy total=model.controllersExpected}}
+          ({{model.controllersHealthy}}/{{model.controllersExpected}})
+        </span>
+      {{/if}}
       <span class="pair" data-test-plugin-node-health>
         <span class="term">Node Health</span>
         {{format-percentage model.nodesHealthy total=model.nodesExpected}}
@@ -23,38 +25,40 @@
   </div>
 
   <div class="columns">
-    <div class="column">
-      <div class="boxed-section">
-        <div class="boxed-section-head is-hollow">Controller Health</div>
-        <div class="boxed-section-body">
-          <div class="columns is-bottom-aligned">
-            <div class="column is-half">
-              {{gauge-chart
-                label="Availability"
-                value=model.controllersHealthy
-                total=model.controllersExpected}}
-            </div>
-            <div class="column">
-              <div class="metric">
-                <h3 class="label">Available</h3>
-                <p class="value">{{model.controllersHealthy}}</p>
+    {{#if model.controllerRequired}}
+      <div class="column">
+        <div class="boxed-section">
+          <div class="boxed-section-head is-hollow">Controller Health</div>
+          <div class="boxed-section-body">
+            <div class="columns is-centered is-max-half is-bottom-aligned">
+              <div class="column is-half">
+                {{gauge-chart
+                  label="Availability"
+                  value=model.controllersHealthy
+                  total=model.controllersExpected}}
               </div>
-            </div>
-            <div class="column">
-              <div class="metric">
-                <h3 class="label">Expected</h3>
-                <p class="value">{{model.controllersExpected}}</p>
+              <div class="column">
+                <div class="metric">
+                  <h3 class="label">Available</h3>
+                  <p class="value">{{model.controllersHealthy}}</p>
+                </div>
+              </div>
+              <div class="column">
+                <div class="metric">
+                  <h3 class="label">Expected</h3>
+                  <p class="value">{{model.controllersExpected}}</p>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    {{/if}}
     <div class="column">
       <div class="boxed-section">
         <div class="boxed-section-head is-hollow">Node Health</div>
         <div class="boxed-section-body">
-          <div class="columns is-bottom-aligned">
+          <div class="columns is-centered is-max-half is-bottom-aligned">
             <div class="column is-half">
               {{gauge-chart
                 label="Availability"
@@ -79,42 +83,44 @@
     </div>
   </div>
 
-  <div class="boxed-section">
-    <div class="boxed-section-head">
-      Controller Allocations
+  {{#if model.controllerRequired}}
+    <div class="boxed-section">
+      <div class="boxed-section-head">
+        Controller Allocations
+      </div>
+      <div class="boxed-section-body {{if model.controllers "is-full-bleed"}}">
+        {{#if model.controllers}}
+          {{#list-table
+            source=sortedControllers
+            class="with-foot" as |t|}}
+            {{#t.head}}
+              <th class="is-narrow"></th>
+              <td>ID</td>
+              <th>Created</th>
+              <th>Modified</th>
+              <th>Health</th>
+              <th>Client</th>
+              <th>Job</th>
+              <th>Version</th>
+              <th>Volumes</th>
+              <th>CPU</th>
+              <th>Memory</th>
+            {{/t.head}}
+            {{#t.body key="model.allocID" as |row|}}
+              {{plugin-allocation-row
+                data-test-controller-allocation=row.model.allocID
+                pluginAllocation=row.model}}
+            {{/t.body}}
+          {{/list-table}}
+        {{else}}
+          <div class="empty-message" data-test-empty-controller-allocations>
+            <h3 class="empty-message-headline" data-test-empty-controller-allocations-headline>No Controller Plugin Allocations</h3>
+            <p class="empty-message-body" data-test-empty-controller-allocations-message>No allocations are providing controller plugin service.</p>
+          </div>
+        {{/if}}
+      </div>
     </div>
-    <div class="boxed-section-body {{if model.controllers "is-full-bleed"}}">
-      {{#if model.controllers}}
-        {{#list-table
-          source=sortedControllers
-          class="with-foot" as |t|}}
-          {{#t.head}}
-            <th class="is-narrow"></th>
-            <td>ID</td>
-            <th>Created</th>
-            <th>Modified</th>
-            <th>Health</th>
-            <th>Client</th>
-            <th>Job</th>
-            <th>Version</th>
-            <th>Volumes</th>
-            <th>CPU</th>
-            <th>Memory</th>
-          {{/t.head}}
-          {{#t.body key="model.allocID" as |row|}}
-            {{plugin-allocation-row
-              data-test-controller-allocation=row.model.allocID
-              pluginAllocation=row.model}}
-          {{/t.body}}
-        {{/list-table}}
-      {{else}}
-        <div class="empty-message" data-test-empty-controller-allocations>
-          <h3 class="empty-message-headline" data-test-empty-controller-allocations-headline>No Controller Plugin Allocations</h3>
-          <p class="empty-message-body" data-test-empty-controller-allocations-message>No allocations are providing controller plugin service.</p>
-        </div>
-      {{/if}}
-    </div>
-  </div>
+  {{/if}}
 
   <div class="boxed-section">
     <div class="boxed-section-head">