[pve-devel] [PATCH manager 2/2] add icons to summaries and improve spacing

[Dominik Csapak]

also add a helper css class to use the png icons like fontawesome icons
and add the ha state to template summary

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/css/ext6-pve.css                     |  7 +++++++
 www/manager6/node/StatusView.js          |  6 ++++++
 www/manager6/panel/GuestStatusView.js    | 21 +++++++++++++++------
 www/manager6/panel/TemplateStatusView.js | 27 ++++++++++++++++++++++-----
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 0d0a75e0..45b20c12 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -347,6 +347,13 @@
     background-image:url(../images/icon-serial.svg);
 }
 
+.pve-icon {
+    height: 16px;
+    background-position: bottom;
+    vertical-align: bottom;
+    padding: 0;
+}
+
 /* displayfield minheight is wrong */
 .x-form-display-field-default {
     min-height: 20px;
diff --git a/www/manager6/node/StatusView.js b/www/manager6/node/StatusView.js
index 327ab874..c9c8b909 100644
--- a/www/manager6/node/StatusView.js
+++ b/www/manager6/node/StatusView.js
@@ -23,6 +23,7 @@ Ext.define('PVE.node.StatusView', {
     items: [
 	{
 	    itemId: 'cpu',
+	    iconCls: 'fa fa-fw pve-itype-icon-processor pve-icon',
 	    title: gettext('CPU usage'),
 	    valueField: 'cpu',
 	    maxField: 'cpuinfo',
@@ -30,12 +31,14 @@ Ext.define('PVE.node.StatusView', {
 	},
 	{
 	    itemId: 'wait',
+	    iconCls: 'fa fa-fw fa-clock-o',
 	    title: gettext('IO delay'),
 	    valueField: 'wait',
 	    rowspan: 2
 	},
 	{
 	    itemId: 'load',
+	    iconCls: 'fa fa-fw fa-tasks',
 	    title: gettext('Load average'),
 	    printBar: false,
 	    textField: 'loadavg'
@@ -46,6 +49,7 @@ Ext.define('PVE.node.StatusView', {
 	    padding: '0 0 20 0'
 	},
 	{
+	    iconCls: 'fa fa-fw pve-itype-icon-memory pve-icon',
 	    itemId: 'memory',
 	    title: gettext('RAM usage'),
 	    valueField: 'memory',
@@ -63,6 +67,7 @@ Ext.define('PVE.node.StatusView', {
 	    padding: '0 15 10 15'
 	},
 	{
+	    iconCls: 'fa fa-fw fa-hdd-o',
 	    itemId: 'rootfs',
 	    title: gettext('HD space') + '(root)',
 	    valueField: 'rootfs',
@@ -70,6 +75,7 @@ Ext.define('PVE.node.StatusView', {
 	    renderer: PVE.Utils.render_node_size_usage
 	},
 	{
+	    iconCls: 'fa fa-fw fa-refresh',
 	    itemId: 'swap',
 	    printSize: true,
 	    title: gettext('SWAP usage'),
diff --git a/www/manager6/panel/GuestStatusView.js b/www/manager6/panel/GuestStatusView.js
index 340be21b..5f6360ae 100644
--- a/www/manager6/panel/GuestStatusView.js
+++ b/www/manager6/panel/GuestStatusView.js
@@ -5,26 +5,30 @@ Ext.define('PVE.panel.GuestStatusView', {
 
     height: 300,
 
+    layout: {
+	type: 'vbox',
+	align: 'stretch'
+    },
+
     defaults: {
 	xtype: 'pveInfoWidget',
-	padding: '0 30 5 30',
-	// parent panel is 400 wide
-	// minus 2 pixels for the border
-	width: 398
+	padding: '2 25'
     },
     items: [
 	{
 	    xtype: 'box',
-	    height: 30
+	    height: 20
 	},
 	{
 	    itemId: 'status',
 	    title: gettext('Status'),
+	    iconCls: 'fa fa-info fa-fw',
 	    printBar: false,
 	    textField: 'status'
 	},
 	{
 	    itemId: 'hamanaged',
+	    iconCls: 'fa fa-heartbeat fa-fw',
 	    title: gettext('HA State'),
 	    printBar: false,
 	    textField: 'ha',
@@ -32,15 +36,17 @@ Ext.define('PVE.panel.GuestStatusView', {
 	},
 	{
 	    itemId: 'node',
+	    iconCls: 'fa fa-building fa-fw',
 	    title: gettext('Node'),
 	    printBar: false
 	},
 	{
 	    xtype: 'box',
-	    height: 20
+	    height: 15
 	},
 	{
 	    itemId: 'cpu',
+	    iconCls: 'fa fa-fw pve-itype-icon-processor pve-icon',
 	    title: gettext('CPU usage'),
 	    valueField: 'cpu',
 	    maxField: 'cpus',
@@ -51,18 +57,21 @@ Ext.define('PVE.panel.GuestStatusView', {
 	},
 	{
 	    itemId: 'memory',
+	    iconCls: 'fa fa-fw pve-itype-icon-memory pve-icon',
 	    title: gettext('Memory usage'),
 	    valueField: 'mem',
 	    maxField: 'maxmem'
 	},
 	{
 	    itemId: 'swap',
+	    iconCls: 'fa fa-refresh fa-fw',
 	    title: gettext('SWAP usage'),
 	    valueField: 'swap',
 	    maxField: 'maxswap'
 	},
 	{
 	    itemId: 'rootfs',
+	    iconCls: 'fa fa-hdd-o fa-fw',
 	    title: gettext('Bootdisk size'),
 	    valueField: 'disk',
 	    maxField: 'maxdisk',
diff --git a/www/manager6/panel/TemplateStatusView.js b/www/manager6/panel/TemplateStatusView.js
index 52269960..6f456099 100644
--- a/www/manager6/panel/TemplateStatusView.js
+++ b/www/manager6/panel/TemplateStatusView.js
@@ -2,51 +2,68 @@ Ext.define('PVE.panel.TemplateStatusView',{
     extend: 'PVE.panel.StatusView',
     alias: 'widget.pveTemplateStatusView',
 
+    layout: {
+	type: 'vbox',
+	align: 'stretch'
+    },
+
     defaults: {
 	xtype: 'pveInfoWidget',
 	printBar: false,
-	padding: '5 0 0 20',
-	width: 400
+	padding: '2 25'
     },
     items: [
 	{
 	    xtype: 'box',
-	    padding: '20 0 0 0'
+	    height: 20
+	},
+	{
+	    itemId: 'hamanaged',
+	    iconCls: 'fa fa-heartbeat fa-fw',
+	    title: gettext('HA State'),
+	    printBar: false,
+	    textField: 'ha',
+	    renderer: PVE.Utils.format_ha
 	},
 	{
 	    itemId: 'node',
+	    iconCls: 'fa fa-fw fa-building',
 	    title: gettext('Node')
 	},
 	{
 	    xtype: 'box',
-	    padding: '20 0 0 0'
+	    height: 20
 	},
 	{
 	    itemId: 'cpus',
+	    iconCls: 'fa fa-fw pve-itype-icon-processor pve-icon',
 	    title: gettext('Processors'),
 	    textField: 'cpus'
 	},
 	{
 	    itemId: 'memory',
+	    iconCls: 'fa fa-fw pve-itype-icon-memory pve-icon',
 	    title: gettext('Memory'),
 	    textField: 'maxmem',
 	    renderer: PVE.Utils.render_size
 	},
 	{
 	    itemId: 'swap',
+	    iconCls: 'fa fa-refresh fa-fw',
 	    title: gettext('Swap'),
 	    textField: 'maxswap',
 	    renderer: PVE.Utils.render_size
 	},
 	{
 	    itemId: 'disk',
+	    iconCls: 'fa fa-hdd-o fa-fw',
 	    title: gettext('Bootdisk size'),
 	    textField: 'maxdisk',
 	    renderer: PVE.Utils.render_size
 	},
 	{
 	    xtype: 'box',
-	    padding: '25 0 0 0'
+	    height: 20
 	}
     ],
 
-- 
2.11.0