From 504c6ab81a51fae3eb840596555bd0ed4e879cc1 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <flamingcow@gmail.com>
Date: Wed, 11 May 2016 00:12:14 +0000
Subject: [PATCH] Column headers, allow volume ID length trimming.

---
 server/static/control.css | 14 ++++++++++++--
 server/static/control.js  | 13 +++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/server/static/control.css b/server/static/control.css
index ae3fef3..9ca4ce3 100644
--- a/server/static/control.css
+++ b/server/static/control.css
@@ -6,6 +6,7 @@ body {
 imageTypeSection {
   display: table;
   border-spacing: 3px;
+  margin: 10px;
 }
 
 imageTypeSection::before {
@@ -14,11 +15,11 @@ imageTypeSection::before {
   content: attr(data-key);
 }
 
-instanceSection {
+headers, instanceSection {
   display: table-row;
 }
 
-instanceSection:nth-child(2n+1) {
+instanceSection:nth-child(2n) {
   background-color: #e9e9e9;
 }
 
@@ -26,10 +27,19 @@ instanceSection:hover {
   background-color: #ff9900 !important;
 }
 
+header {
+  display: table-cell;
+  text-align: center;
+  color: #bcbcbc;
+  white-space: nowrap;
+  padding: 2px;
+}
+
 hostname, lastSeen, uptime, timestamp, volumeID {
   font-family: "droid-sans-mono";
   display: table-cell;
   padding: 2px;
+  text-align: right;
 }
 
 volumeID {
diff --git a/server/static/control.js b/server/static/control.js
index bac8139..bf88e54 100644
--- a/server/static/control.js
+++ b/server/static/control.js
@@ -39,6 +39,14 @@ ImageController.prototype.addImageType_ = function(type) {
     instances: new Map(),
   };
   this.insertSorted_(this.container_, value.section, type);
+  let headers = this.createNode_(value.section, 'headers');
+  this.createNode_(headers, 'header', 'Hostname');
+  this.createNode_(headers, 'header', 'Last seen');
+  this.createNode_(headers, 'header', 'Uptime');
+  this.createNode_(headers, 'header', 'Current image');
+  this.createNode_(headers, 'header', 'Current volume ID');
+  this.createNode_(headers, 'header', 'Next image');
+  this.createNode_(headers, 'header', 'Next volume ID');
   this.image_types_.set(type, value);
 };
 
@@ -57,9 +65,10 @@ ImageController.prototype.onReport_ = function(msg) {
   instance.last_seen.innerText = this.formatSeconds_(0);
   instance.uptime.innerText = this.formatSeconds_(msg['uptime_seconds']);
   instance.timestamp.innerText = msg['timestamp'];
-  instance.volume_id.innerText = msg['volume_id'];
+  let volume_id_len = localStorage.getItem('volume_id_len') || Number.POSITIVE_INFINITY;
+  instance.volume_id.innerText = msg['volume_id'].substring(0, volume_id_len);
   instance.next_timestamp.innerText = msg['next_timestamp'];
-  instance.next_volume_id.innerText = msg['next_volume_id'];
+  instance.next_volume_id.innerText = msg['next_volume_id'].substring(0, volume_id_len);
 };
 
 ImageController.prototype.addInstance_ = function(type, hostname) {