From a680a13ddd876f80d23fd58484fc02b1c6c648b1 Mon Sep 17 00:00:00 2001
From: Levi Harrison <git@leviharrison.dev>
Date: Mon, 28 Jun 2021 08:44:36 -0400
Subject: [PATCH 1/3] Rearranged components

Signed-off-by: Levi Harrison <git@leviharrison.dev>
---
 consoles/node-overview.html | 112 ++++++++++++++++++------------------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/consoles/node-overview.html b/consoles/node-overview.html
index 092028d33..50aa46fa3 100644
--- a/consoles/node-overview.html
+++ b/consoles/node-overview.html
@@ -1,60 +1,5 @@
 {{ template "head" . }}
 
-{{ template "prom_content_head" . }}
-  <h1>Node Overview - {{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</h1>
-
-  <h3>CPU Usage</h3>
-  <div id="cpuGraph"></div>
-  <script>
-  new PromConsole.Graph({
-    node: document.querySelector("#cpuGraph"),
-    expr: "sum by (mode)(irate(node_cpu_seconds_total{job='node',instance='{{ .Params.instance }}',mode!='idle'}[5m]))",
-    renderer: 'area',
-    max: {{ with printf "count(count by (cpu)(node_cpu_seconds_total{job='node',instance='%s'}))" .Params.instance | query }}{{ . | first | value }}{{ else}}undefined{{end}},
-    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yTitle: 'Cores'
-  })
-  </script>
-
-  <h3>Disk I/O Utilization</h3>
-  <div id="diskioGraph"></div>
-  <script>
-  new PromConsole.Graph({
-    node: document.querySelector("#diskioGraph"),
-    expr: [
-      "irate(node_disk_io_time_seconds_total{job='node',instance='{{ .Params.instance }}',device!~'^(md\\\\d+$|dm-)'}[5m]) * 100",
-    ],
-    min: 0,
-    name: '[[ device ]]',
-    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yUnits: "%",
-    yTitle: 'Disk I/O Utilization'
-  })
-  </script>
-
-  <h3>Memory</h3>
-  <div id="memoryGraph"></div>
-  <script>
-  new PromConsole.Graph({
-    node: document.querySelector("#memoryGraph"),
-    renderer: 'area',
-    expr: [
-      "node_memory_Cached_bytes{job='node',instance='{{ .Params.instance }}'}",
-      "node_memory_Buffers_bytes{job='node',instance='{{ .Params.instance }}'}",
-      "node_memory_MemTotal_bytes{job='node',instance='{{ .Params.instance }}'} - node_memory_MemFree_bytes{job='node',instance='{{.Params.instance}}'} - node_memory_Buffers_bytes{job='node',instance='{{.Params.instance}}'} - node_memory_Cached_bytes{job='node',instance='{{.Params.instance}}'}",
-      "node_memory_MemFree{job='node',instance='{{ .Params.instance }}'}",
-    ],
-    name: ["Cached", "Buffers", "Used", "Free"],
-    min: 0,
-    yUnits: "B",
-    yAxisFormatter: PromConsole.NumberFormatter.humanize1024,
-    yHoverFormatter: PromConsole.NumberFormatter.humanize1024,
-    yTitle: 'Memory'
-  })
-  </script>
-
 {{ template "prom_right_table_head" }}
   <tr><th colspan="2">Overview</th></tr>
   <tr>
@@ -114,9 +59,64 @@
     <td>{{ template "prom_query_drilldown" (args (printf "100 - node_filesystem_avail_bytes{job='node',instance='%s',mountpoint='%s'} / node_filesystem_size_bytes{job='node'} * 100" .Labels.instance .Labels.mountpoint) "%" "roughlyNearZero") }}</td>
   </tr>
 {{ end }}
-</tr>
+
 {{ template "prom_right_table_tail" }}
 
+{{ template "prom_content_head" . }}
+  <h1>Node Overview - {{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</h1>
+
+  <h3>CPU Usage</h3>
+  <div id="cpuGraph"></div>
+  <script>
+  new PromConsole.Graph({
+    node: document.querySelector("#cpuGraph"),
+    expr: "sum by (mode)(irate(node_cpu_seconds_total{job='node',instance='{{ .Params.instance }}',mode!='idle'}[5m]))",
+    renderer: 'area',
+    max: {{ with printf "count(count by (cpu)(node_cpu_seconds_total{job='node',instance='%s'}))" .Params.instance | query }}{{ . | first | value }}{{ else}}undefined{{end}},
+    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yTitle: 'Cores'
+  })
+  </script>
+
+  <h3>Disk I/O Utilization</h3>
+  <div id="diskioGraph"></div>
+  <script>
+  new PromConsole.Graph({
+    node: document.querySelector("#diskioGraph"),
+    expr: [
+      "irate(node_disk_io_time_seconds_total{job='node',instance='{{ .Params.instance }}',device!~'^(md\\\\d+$|dm-)'}[5m]) * 100",
+    ],
+    min: 0,
+    name: '[[ device ]]',
+    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yUnits: "%",
+    yTitle: 'Disk I/O Utilization'
+  })
+  </script>
+
+  <h3>Memory</h3>
+  <div id="memoryGraph"></div>
+  <script>
+  new PromConsole.Graph({
+    node: document.querySelector("#memoryGraph"),
+    renderer: 'area',
+    expr: [
+      "node_memory_Cached_bytes{job='node',instance='{{ .Params.instance }}'}",
+      "node_memory_Buffers_bytes{job='node',instance='{{ .Params.instance }}'}",
+      "node_memory_MemTotal_bytes{job='node',instance='{{ .Params.instance }}'} - node_memory_MemFree_bytes{job='node',instance='{{.Params.instance}}'} - node_memory_Buffers_bytes{job='node',instance='{{.Params.instance}}'} - node_memory_Cached_bytes{job='node',instance='{{.Params.instance}}'}",
+      "node_memory_MemFree{job='node',instance='{{ .Params.instance }}'}",
+    ],
+    name: ["Cached", "Buffers", "Used", "Free"],
+    min: 0,
+    yUnits: "B",
+    yAxisFormatter: PromConsole.NumberFormatter.humanize1024,
+    yHoverFormatter: PromConsole.NumberFormatter.humanize1024,
+    yTitle: 'Memory'
+  })
+  </script>
+
 {{ template "prom_content_tail" . }}
 
 {{ template "tail" }}

From 2314a2116938225533a97df5d7c8db4dd9418357 Mon Sep 17 00:00:00 2001
From: Levi Harrison <git@leviharrison.dev>
Date: Tue, 29 Jun 2021 20:06:20 -0400
Subject: [PATCH 2/3] Rearranged components - this time on node-disk.html

Signed-off-by: Levi Harrison <git@leviharrison.dev>
---
 consoles/node-disk.html | 69 ++++++++++++++++++++---------------------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/consoles/node-disk.html b/consoles/node-disk.html
index 6d0dcc05c..3634a1959 100644
--- a/consoles/node-disk.html
+++ b/consoles/node-disk.html
@@ -1,40 +1,5 @@
 {{ template "head" . }}
 
-{{ template "prom_content_head" . }}
-  <h1>Node Disk - {{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</h1>
-
-  <h3>Disk I/O Utilization</h3>
-  <div id="diskioGraph"></div>
-  <script>
-  new PromConsole.Graph({
-    node: document.querySelector("#diskioGraph"),
-    expr: [
-      "irate(node_disk_io_time_seconds_total{job='node',instance='{{ .Params.instance }}',device!~'^(md\\\\d+$|dm-)'}[5m]) * 100",
-    ],
-    min: 0,
-    name: '[[ device ]]',
-    yUnits: "%",
-    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yTitle: 'Disk I/O Utilization'
-  })
-  </script>
-  <h3>Filesystem Usage</h3>
-  <div id="fsGraph"></div>
-  <script>
-  new PromConsole.Graph({
-    node: document.querySelector("#fsGraph"),
-    expr: "100 - node_filesystem_avail_bytes{job='node',instance='{{ .Params.instance }}'} / node_filesystem_size_bytes{job='node'} * 100",
-    min: 0,
-    max: 100,
-    name: '[[ mountpoint ]]',
-    yUnits: "%",
-    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
-    yTitle: 'Filesystem Fullness'
-  })
-  </script>
-
 {{ template "prom_right_table_head" }}
   <th colspan="2">Disks</th>
 </tr>
@@ -72,6 +37,40 @@
 </tr>
 {{ template "prom_right_table_tail" }}
 
+{{ template "prom_content_head" . }}
+  <h1>Node Disk - {{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</h1>
+
+  <h3>Disk I/O Utilization</h3>
+  <div id="diskioGraph"></div>
+  <script>
+  new PromConsole.Graph({
+    node: document.querySelector("#diskioGraph"),
+    expr: [
+      "irate(node_disk_io_time_seconds_total{job='node',instance='{{ .Params.instance }}',device!~'^(md\\\\d+$|dm-)'}[5m]) * 100",
+    ],
+    min: 0,
+    name: '[[ device ]]',
+    yUnits: "%",
+    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yTitle: 'Disk I/O Utilization'
+  })
+  </script>
+  <h3>Filesystem Usage</h3>
+  <div id="fsGraph"></div>
+  <script>
+  new PromConsole.Graph({
+    node: document.querySelector("#fsGraph"),
+    expr: "100 - node_filesystem_avail_bytes{job='node',instance='{{ .Params.instance }}'} / node_filesystem_size_bytes{job='node'} * 100",
+    min: 0,
+    max: 100,
+    name: '[[ mountpoint ]]',
+    yUnits: "%",
+    yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
+    yTitle: 'Filesystem Fullness'
+  })
+  </script>
 {{ template "prom_content_tail" . }}
 
 {{ template "tail" }}

From 8baaceab77debae6435ebb6fc2cf6d172ad154d9 Mon Sep 17 00:00:00 2001
From: Levi Harrison <git@leviharrison.dev>
Date: Wed, 28 Jul 2021 20:12:06 -0400
Subject: [PATCH 3/3] Cleaned up a little bit of HTML

Signed-off-by: Levi Harrison <git@leviharrison.dev>
---
 consoles/node-disk.html     | 2 ++
 consoles/node-overview.html | 1 -
 consoles/node.html          | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/consoles/node-disk.html b/consoles/node-disk.html
index 3634a1959..ffff41b79 100644
--- a/consoles/node-disk.html
+++ b/consoles/node-disk.html
@@ -1,6 +1,7 @@
 {{ template "head" . }}
 
 {{ template "prom_right_table_head" }}
+<tr>
   <th colspan="2">Disks</th>
 </tr>
 {{ range printf "node_disk_io_time_seconds_total{job='node',instance='%s'}" .Params.instance | query | sortByLabel "device" }}
@@ -22,6 +23,7 @@
     <td>{{ template "prom_query_drilldown" (args (printf "irate(node_disk_write_time_seconds_total{job='node',instance='%s',device='%s'}[5m]) / irate(node_disk_writes_completed_total{job='node',instance='%s',device='%s'}[5m])" .Labels.instance .Labels.device .Labels.instance .Labels.device) "s" "humanize") }}</td>
   </tr>
 {{ end }}
+<tr>
   <th colspan="2">Filesystem Fullness</th>
 </tr>
 {{ define "roughlyNearZero" }}
diff --git a/consoles/node-overview.html b/consoles/node-overview.html
index 50aa46fa3..92f53ba87 100644
--- a/consoles/node-overview.html
+++ b/consoles/node-overview.html
@@ -31,7 +31,6 @@
     <td>{{ template "prom_query_drilldown" (args (printf "irate(node_network_transmit_bytes_total{job='node',instance='%s',device='%s'}[5m])" .Labels.instance .Labels.device) "B/s" "humanize") }}</td>
   </tr>
 {{ end }}
-</tr>
 <tr>
   <th colspan="2">Disks</th>
 </tr>
diff --git a/consoles/node.html b/consoles/node.html
index bf2b7672d..9a37544ee 100644
--- a/consoles/node.html
+++ b/consoles/node.html
@@ -27,6 +27,7 @@
 {{ else }}
 <tr><td colspan=4>No nodes found.</td></tr>
 {{ end }}
+</table>
 
 
 {{ template "prom_content_tail" . }}