www/manager6/dc/Guests.js

   1 Ext.define('PVE.dc.Guests', {
   2     extend: 'Ext.panel.Panel',
   3     alias: 'widget.pveDcGuests',
   4
   5
   6     title: gettext('Guests'),
   7     height: 250,
   8     layout: {
   9         type: 'table',
  10         columns: 2,
  11         tableAttrs: {
  12             style: {
  13                 width: '100%',
  14             },
  15         },
  16     },
  17     bodyPadding: '0 20 20 20',
  18
  19     defaults: {
  20         xtype: 'box',
  21         padding: '0 50 0 50',
  22         style: {
  23             'text-align': 'center',
  24             'line-height': '1.5em',
  25             'font-size': '14px',
  26         },
  27     },
  28     items: [
  29         {
  30             itemId: 'qemu',
  31             data: {
  32                 running: 0,
  33                 paused: 0,
  34                 stopped: 0,
  35                 template: 0,
  36             },
  37             cls: 'centered-flex-column',
  38             tpl: [
  39                 '<h3>' + gettext("Virtual Machines") + '</h3>',
  40                 '<div>',
  41                     '<div class="left-aligned">',
  42                         '<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
  43                         gettext('Running'),
  44                     '</div>',
  45                     '<div class="right-aligned">{running}</div>',
  46                 '</div>',
  47                 '<tpl if="paused &gt; 0">',
  48                     '<div>',
  49                         '<div class="left-aligned">',
  50                             '<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
  51                             gettext('Paused'),
  52                         '</div>',
  53                         '<div class="right-aligned">{paused}</div>',
  54                     '</div>',
  55                 '</tpl>',
  56                 '<div>',
  57                     '<div class="left-aligned">',
  58                         '<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
  59                         gettext('Stopped'),
  60                     '</div>',
  61                     '<div class="right-aligned">{stopped}</div>',
  62                 '</div>',
  63                 '<tpl if="template &gt; 0">',
  64                     '<div>',
  65                         '<div class="left-aligned">',
  66                             '<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
  67                             gettext('Templates'),
  68                         '</div>',
  69                         '<div class="right-aligned">{template}</div>',
  70                     '</div>',
  71                 '</tpl>',
  72             ],
  73         },
  74         {
  75             itemId: 'lxc',
  76             data: {
  77                 running: 0,
  78                 paused: 0,
  79                 stopped: 0,
  80                 template: 0,
  81             },
  82             cls: 'centered-flex-column',
  83             tpl: [
  84                 '<h3>' + gettext("LXC Container") + '</h3>',
  85                 '<div>',
  86                     '<div class="left-aligned">',
  87                         '<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
  88                         gettext('Running'),
  89                     '</div>',
  90                     '<div class="right-aligned">{running}</div>',
  91                 '</div>',
  92                 '<tpl if="paused &gt; 0">',
  93                     '<div>',
  94                         '<div class="left-aligned">',
  95                             '<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
  96                             gettext('Paused'),
  97                         '</div>',
  98                         '<div class="right-aligned">{paused}</div>',
  99                     '</div>',
 100                 '</tpl>',
 101                 '<div>',
 102                     '<div class="left-aligned">',
 103                         '<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
 104                         gettext('Stopped'),
 105                     '</div>',
 106                     '<div class="right-aligned">{stopped}</div>',
 107                 '</div>',
 108                 '<tpl if="template &gt; 0">',
 109                     '<div>',
 110                         '<div class="left-aligned">',
 111                             '<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
 112                             gettext('Templates'),
 113                         '</div>',
 114                         '<div class="right-aligned">{template}</div>',
 115                     '</div>',
 116                 '</tpl>',
 117             ],
 118         },
 119         {
 120             itemId: 'error',
 121             colspan: 2,
 122             data: {
 123                 num: 0,
 124             },
 125             columnWidth: 1,
 126             padding: '10 250 0 250',
 127             tpl: [
 128                 '<tpl if="num &gt; 0">',
 129                     '<div class="left-aligned">',
 130                         '<i class="critical fa fa-fw fa-times-circle">&nbsp;</i>',
 131                         gettext('Error'),
 132                     '</div>',
 133                     '<div class="right-aligned">{num}</div>',
 134                 '</tpl>',
 135             ],
 136         },
 137     ],
 138
 139     updateValues: function(qemu, lxc, error) {
 140         let me = this;
 141
 142         let lazyUpdate = (query, newData) => {
 143             let el = me.getComponent(query);
 144             let currentData = el.data;
 145
 146             let keys = Object.keys(newData);
 147             if (keys.length === Object.keys(currentData).length) {
 148                 if (keys.every(k => newData[k] === currentData[k])) {
 149                     return; // all stayed the same here, return early to avoid bogus regeneration
 150                 }
 151             }
 152             el.update(newData);
 153         };
 154         lazyUpdate('qemu', qemu);
 155         lazyUpdate('lxc', lxc);
 156         lazyUpdate('error', { num: error });
 157     },
 158 });