Implement better table view for services

extension.js

@@ -53,6 +53,15 @@ const Preferences = Me.imports.prefs;
 let settings = Convenience.getSettings(SETTINGS_SCHEMA);
 let account_settings = [ ];
 
+const column_definitions = [
+    { name: 'status', width: 50, expand: false, },
+    { name: 'host_name', width: 300, expand: false, },
+    { name: 'service_display_name', width: 300, expand: false, },
+    { name: 'last_check', width: 200, expand: false, },
+    { name: 'attempts', width: 50, expand: false, },
+    { name: 'status_information', width: 600, expand: true, },
+];
+
 
 const Indicator = GObject.registerClass(
 class Indicator extends PanelMenu.Button {
@@ -212,29 +221,29 @@ class Indicator extends PanelMenu.Button {
 	let _widths = [ 300, 300, 200, 50, 600 ];
 	let _bin = new St.Bin({
 	    style_class: 'monito-service-' + status,
-	    width: _widths[col],
-	    x_expand: ( col == 4 ? true : false ),
+	    width: col.width,
+	    x_expand: col.expand,
 	    child: new St.Button ( {
-	        x_align: Clutter.ActorAlign.FILL,
+	        x_align: Clutter.ActorAlign.START,
                 y_align: Clutter.ActorAlign.CENTER,
+                width: col.width,
                 reactive: true,
                 can_focus: true,
                 track_hover: true,
                 accessible_name: text,
                 style_class: 'button',
-                label: 'Foo',
+                label: col.name,
             })
 	});
 	return _bin;
     }
 
     createBin ( status, text, col ) {
-	let _widths = [ 300, 300, 200, 50, 600 ];
 	let _bin = new St.Bin({
 	    style_class: 'monito-service-' + status,
             track_hover: true,
-	    width: _widths[col],
-	    x_expand: ( col == 4 ? true : false ),
+	    width: col.width,
+	    x_expand: col.expand,
 	    child: new St.Label({ style_class: 'monito-label', text: text })
 	});
 	return _bin;
@@ -252,17 +261,23 @@ class Indicator extends PanelMenu.Button {
         }
 	
 	let headerBox = new St.BoxLayout({
-	    style_class: 'monito-service-line',
 	    hover: true,
 	    x_expand: true
 	});
 	this._box.add_child(headerBox);
+        for ( let col of column_definitions )
+	    headerBox.add_child ( this.createHeaderBin ( '', col.name, col ) );
 
-	headerBox.add_child ( this.createHeaderBin ( '', 'Foo', 0 ) );
-	headerBox.add_child ( this.createHeaderBin ( '', 'Foo', 1 ) );
-	headerBox.add_child ( this.createHeaderBin ( '', 'Foo', 2 ) );
-	headerBox.add_child ( this.createHeaderBin ( '', 'Foo', 3 ) );
-	headerBox.add_child ( this.createHeaderBin ( '', 'Foo', 4 ) );
+        let scrollBox = new St.ScrollView ( { hscrollbar_policy: St.PolicyType.NEVER,
+                                              enable_mouse_scrolling: true, } );
+	this._box.add_child(scrollBox);
+
+	let tableBox = new St.BoxLayout({
+	    hover: true,
+            vertical: true,
+	    x_expand: true,
+	});
+	scrollBox.add_actor(tableBox);
 
         for ( let i = 0 ; i < serverLogic.status.service_status.length ; i ++ )
 	{
@@ -271,26 +286,17 @@ class Indicator extends PanelMenu.Button {
 	    {
 		let infoBox = new St.BoxLayout({
 		    style_class: 'monito-service-line monito-service-line-' + serverLogic.status.service_status[i].status,
-		    hover: true,
-		    x_expand: true
+		    track_hover: true,
+		    x_expand: true,
 		});
-		this._box.add_child(infoBox);
+		tableBox.add_child(infoBox);
 
-		infoBox.add_child ( this.createBin ( serverLogic.status.service_status[i].status,
-						     serverLogic.status.service_status[i].host_name,
-						     0 ) );
-		infoBox.add_child ( this.createBin ( serverLogic.status.service_status[i].status,
-						     serverLogic.status.service_status[i].service_display_name,
-						     1 ) );
-		infoBox.add_child ( this.createBin ( serverLogic.status.service_status[i].status,
-						     serverLogic.status.service_status[i].last_check,
-						     2) );
-		infoBox.add_child ( this.createBin ( serverLogic.status.service_status[i].status,
-						     serverLogic.status.service_status[i].attempts,
-						     3 ) );
-		infoBox.add_child ( this.createBin ( serverLogic.status.service_status[i].status,
-						     serverLogic.status.service_status[i].status_information,
-						     4 ) );
+                for ( let col of column_definitions )
+                {
+		    infoBox.add_child ( this.createBin ( serverLogic.status.service_status[i].status,
+						         serverLogic.status.service_status[i][col.name],
+						         col ) );
+                }
 	    }
 	}
         

schemas/org.gnome.shell.extensions.monito@drieu.org.gschema.xml

@@ -92,6 +92,13 @@
       <default>'#e496f5'</default>
     </key>
 
+    <key name="columns" type="as">
+      <default>['service_description']</default>
+    </key>
+
+    <key name="columns-order" type="ai">
+      <default>[0]</default>
+    </key>
 
   </schema>
 </schemalist>

servers/icinga.js

@@ -83,7 +83,7 @@ class Icinga {
                                         }
                                        )
                                       );
-            return this.status != null;
+            return this.status !== null;
         }
         catch (e) {
 	    Main.notify(_('Zbeu!')); 

stylesheet.css

@@ -30,7 +30,7 @@
 }
 
 .monito-serverbox {
-    padding-left: 1em;
+
 }
 
 .monito-box {
@@ -43,10 +43,8 @@
 }
 
 .monito-namebox {
-    line-height: 20px;
-    vertical-align: baseline;
-    height: 100%;
     margin-right: .5em;
+    vertical-align: middle;
 }
 
 .monito-critical-box, .monito-service-CRITICAL, .monito-service-line-CRITICAL {