add icons to summaries and improve spacing

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@proxmox.com>

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 0d0a75e013783f6cc60e7dfcc763d879f2f5876f..45b20c12fb78dfcff6da9e9d646e95c924a93189 100644 (file)
--- 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 327ab8749a0fa22590938b40aaf86d3257d23bd1..c9c8b909eefd64a9cba573e477e173ae6e91e573 100644 (file)
--- 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 250a93a76f46a78157f52d2d9c6b6a892d4050a6..3039a1d560a0135d49894606c554b01f2ac6d514 100644 (file)
--- a/www/manager6/panel/GuestStatusView.js
+++ b/www/manager6/panel/GuestStatusView.js
@@ -4,26 +4,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',
@@ -31,15 +35,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',
@@ -50,18 +56,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 522699606c1ac1344990f0ceaca93f1183f07e6a..c665af0fcd8b893b23b11ace6816d65f2dc9c750 100644 (file)
--- a/www/manager6/panel/TemplateStatusView.js
+++ b/www/manager6/panel/TemplateStatusView.js
@@ -2,51 +2,60 @@ 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: '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
        }
     ],