From 54efa8ddd5d078899e5a07c5d6593c22dc21f43c Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 13 Sep 2018 16:31:31 -0700
Subject: [PATCH] Full markup for time series metrics

---
 ui/app/templates/clients/client.hbs | 40 +++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs
index 885fd4989..4e251ff7f 100644
--- a/ui/app/templates/clients/client.hbs
+++ b/ui/app/templates/clients/client.hbs
@@ -85,11 +85,47 @@
       <div class="columns">
         <div class="column">
           CPU
-          {{stats-time-series data=stats.cpu chartClass="is-info"}}
+          <div style="height: 200px">
+            {{stats-time-series data=stats.cpu chartClass="is-info"}}
+          </div>
+          <div class="columns">
+            <div class="column">
+              <div class="inline-chart">
+                <progress
+                  class="progress is-info is-small"
+                  value="{{stats.cpu.lastObject.percent}}"
+                  max="1">
+                  {{stats.cpu.lastObject.percent}}
+                </progress>
+              </div>
+            </div>
+            <div class="column is-minimum">
+              {{format-percentage stats.cpu.lastObject.percent total=1}}
+            </div>
+          </div>
+          {{stats.cpu.lastObject.used}} Mhz / {{stats.reservedCPU}} Mhz reserved
         </div>
         <div class="column">
           Memory
-          {{stats-time-series data=stats.memory chartClass="is-danger"}}
+          <div style="height: 200px">
+            {{stats-time-series data=stats.memory chartClass="is-danger"}}
+          </div>
+          <div class="columns">
+            <div class="column">
+              <div class="inline-chart">
+                <progress
+                  class="progress is-danger is-small"
+                  value="{{stats.memory.lastObject.percent}}"
+                  max="1">
+                  {{stats.memory.lastObject.percent}}
+                </progress>
+              </div>
+            </div>
+            <div class="column is-minimum">
+              {{format-percentage stats.memory.lastObject.percent total=1}}
+            </div>
+          </div>
+          {{format-bytes stats.memory.lastObject.used}} MiB / {{stats.reservedMemory}} MiB reserved
         </div>
       </div>
     </div>