www/manager6/tree/ResourceTree.js

   1 /*
   2  * Left Treepanel, containing all the ressources we manage in this datacenter: server nodes, server storages, VMs and Containers
   3  */
   4 Ext.define('PVE.tree.ResourceTree', {
   5     extend: 'Ext.tree.TreePanel',
   6     alias: ['widget.pveResourceTree'],
   7
   8     statics: {
   9         typeDefaults: {
  10             node: {
  11                 iconCls: 'fa fa-building  x-fa-tree',
  12                 text: gettext('Nodes')
  13             },
  14             pool: {
  15                 iconCls: 'fa fa-tags fa-dark  x-fa-tree',
  16                 text: gettext('Resource Pool')
  17             },
  18             storage: {
  19                 iconCls: 'fa fa-database fa-dark  x-fa-tree',
  20                 text: gettext('Storage')
  21             },
  22             qemu: {
  23                 iconCls: 'fa fa-desktop  x-fa-tree',
  24                 text: gettext('Virtual Machine')
  25             },
  26             lxc: {
  27                 //iconCls: 'x-tree-node-lxc',
  28                 iconCls: 'fa fa-cube  x-fa-tree',
  29                 text: gettext('LXC Container')
  30             },
  31             template: {
  32                 iconCls: 'fa fa-file-o fa-dark  x-fa-tree-template'
  33             },
  34             datacenter: {
  35                 iconCls: 'fa fa-server x-fa-tree-datacenter',
  36             }
  37         }
  38     },
  39
  40     useArrows: true,
  41
  42     // private
  43     nodeSortFn: function(node1, node2) {
  44         var n1 = node1.data;
  45         var n2 = node2.data;
  46
  47         if ((n1.groupbyid && n2.groupbyid) ||
  48             !(n1.groupbyid || n2.groupbyid)) {
  49
  50             var tcmp;
  51
  52             var v1 = n1.type;
  53             var v2 = n2.type;
  54
  55             if ((tcmp = v1 > v2 ? 1 : (v1 < v2 ? -1 : 0)) != 0) {
  56                 return tcmp;
  57             }
  58
  59             // numeric compare for VM IDs
  60             // sort templates after regular VMs
  61             if (v1 === 'qemu' || v1 === 'lxc') {
  62                 if (n1.template && !n2.template) {
  63                     return 1;
  64                 } else if (n2.template && !n1.template) {
  65                     return -1;
  66                 }
  67                 v1 = n1.vmid;
  68                 v2 = n2.vmid;
  69                 if ((tcmp = v1 > v2 ? 1 : (v1 < v2 ? -1 : 0)) != 0) {
  70                     return tcmp;
  71                 }
  72             }
  73
  74             return n1.text > n2.text ? 1 : (n1.text < n2.text ? -1 : 0);
  75         } else if (n1.groupbyid) {
  76             return -1;
  77         } else if (n2.groupbyid) {
  78             return 1;
  79         }
  80     },
  81
  82     // private: fast binary search
  83     findInsertIndex: function(node, child, start, end) {
  84         var me = this;
  85
  86         var diff = end - start;
  87
  88         var mid = start + (diff>>1);
  89
  90         if (diff <= 0) {
  91             return start;
  92         }
  93
  94         var res = me.nodeSortFn(child, node.childNodes[mid]);
  95         if (res <= 0) {
  96             return me.findInsertIndex(node, child, start, mid);
  97         } else {
  98             return me.findInsertIndex(node, child, mid + 1, end);
  99         }
 100     },
 101
 102     setIconCls: function(info) {
 103         var me = this;
 104
 105         var defaults = PVE.tree.ResourceTree.typeDefaults[info.type];
 106         if (info.id === 'root') {
 107             defaults = PVE.tree.ResourceTree.typeDefaults['datacenter'];
 108         } else if (info.type === 'type') {
 109             defaults = PVE.tree.ResourceTree.typeDefaults[info.groupbyid];
 110         }
 111         if (defaults && defaults.iconCls) {
 112             var iconClsAdd = '';
 113
 114             if (info.running && info.type === 'node') {
 115                 iconClsAdd = '-online';
 116             } else if (info.running) {
 117                 iconClsAdd = '-running';
 118                 if (info.status === 'paused') {
 119                     iconClsAdd = '-paused';
 120                 }
 121             } else if (info.type === 'lxc' || info.type === 'qemu') {
 122                 iconClsAdd = '-stopped';
 123             } else if (info.type === 'node') {
 124                 iconClsAdd = '-offline';
 125             }
 126
 127             info.iconCls = defaults.iconCls + iconClsAdd;
 128
 129             if (info.template) {
 130                 iconClsAdd = '-template';
 131                 info.iconCls = PVE.tree.ResourceTree.typeDefaults['template'].iconCls + '-' + info.type;
 132             }
 133
 134         }
 135     },
 136
 137     // private
 138     addChildSorted: function(node, info) {
 139         var me = this;
 140
 141         me.setIconCls(info);
 142
 143         var defaults;
 144         if (info.groupbyid) {
 145             info.text = info.groupbyid;
 146             if (info.type === 'type') {
 147                 defaults = PVE.tree.ResourceTree.typeDefaults[info.groupbyid];
 148                 if (defaults && defaults.text) {
 149                     info.text = defaults.text;
 150                 }
 151             }
 152         }
 153         var child = Ext.create('PVETree', info);
 154
 155         var cs = node.childNodes;
 156         var pos;
 157         if (cs) {
 158             pos = cs[me.findInsertIndex(node, child, 0, cs.length)];
 159         }
 160
 161         node.insertBefore(child, pos);
 162
 163         return child;
 164     },
 165
 166     // private
 167     groupChild: function(node, info, groups, level) {
 168         var me = this;
 169
 170         var groupby = groups[level];
 171         var v = info[groupby];
 172
 173         if (v) {
 174             var group = node.findChild('groupbyid', v);
 175             if (!group) {
 176                 var groupinfo;
 177                 if (info.type === groupby) {
 178                     groupinfo = info;
 179                 } else {
 180                     groupinfo = {
 181                         type: groupby,
 182                         id : groupby + "/" + v
 183                     };
 184                     if (groupby !== 'type') {
 185                         groupinfo[groupby] = v;
 186                     }
 187                 }
 188                 groupinfo.leaf = false;
 189                 groupinfo.groupbyid = v;
 190                 group = me.addChildSorted(node, groupinfo);
 191                 // fixme: remove when EXTJS has fixed those bugs?!
 192                 group.expand(); group.collapse();
 193             }
 194             if (info.type === groupby) {
 195                 return group;
 196             }
 197             if (group) {
 198                 return me.groupChild(group, info, groups, level + 1);
 199             }
 200         }
 201
 202         return me.addChildSorted(node, info);
 203     },
 204
 205     initComponent : function() {
 206         var me = this;
 207
 208         var rstore = PVE.data.ResourceStore;
 209         var sp = Ext.state.Manager.getProvider();
 210
 211         if (!me.viewFilter) {
 212             me.viewFilter = {};
 213         }
 214
 215         var pdata = {
 216             dataIndex: {},
 217             updateCount: 0
 218         };
 219
 220         var store = Ext.create('Ext.data.TreeStore', {
 221             model: 'PVETree',
 222             root: {
 223                 expanded: true,
 224                 id: 'root',
 225                 text: gettext('Datacenter')
 226             }
 227         });
 228
 229         var stateid = 'rid';
 230
 231         var updateTree = function() {
 232             var tmp;
 233
 234             // fixme: suspend events ?
 235
 236             var rootnode = me.store.getRootNode();
 237             me.setIconCls(rootnode.data);
 238             // remember selected node (and all parents)
 239             var sm = me.getSelectionModel();
 240
 241             var lastsel = sm.getSelection()[0];
 242             var parents = [];
 243             var p = lastsel;
 244             while (p && !!(p = p.parentNode)) {
 245                 parents.push(p);
 246             }
 247
 248             var index = pdata.dataIndex;
 249
 250             var groups = me.viewFilter.groups || [];
 251             var filterfn = me.viewFilter.filterfn;
 252
 253             // remove vanished or moved items
 254             // update in place changed items
 255             var key;
 256             for (key in index) {
 257                 if (index.hasOwnProperty(key)) {
 258                     var olditem = index[key];
 259
 260                     // getById() use find(), which is slow (ExtJS4 DP5)
 261                     //var item = rstore.getById(olditem.data.id);
 262                     var item = rstore.data.get(olditem.data.id);
 263
 264                     var changed = false;
 265                     var moved = false;
 266                     if (item) {
 267                         // test if any grouping attributes changed
 268                         // this will also catch migrated nodes
 269                         var i, len;
 270                         for (i = 0, len = groups.length; i < len; i++) {
 271                             var attr = groups[i];
 272                             if (item.data[attr] != olditem.data[attr]) {
 273                                 //console.log("changed " + attr);
 274                                 moved = true;
 275                                 break;
 276                             }
 277                         }
 278
 279                         // tree item has been updated
 280                         if ((item.data.text !== olditem.data.text) ||
 281                             (item.data.running !== olditem.data.running) ||
 282                             (item.data.template !== olditem.data.template)) {
 283                             //console.log("changed node/text/running " + olditem.data.id);
 284                             changed = true;
 285                         }
 286
 287                         // fixme: also test filterfn()?
 288                     }
 289
 290                     if (changed) {
 291                         olditem.beginEdit();
 292                         //console.log("REM UPDATE UID: " + key + " ITEM " + item.data.running);
 293                         var info = olditem.data;
 294                         Ext.apply(info, item.data);
 295                         me.setIconCls(info);
 296                         olditem.commit();
 297                     }
 298                     if ((!item || moved) && olditem.isLeaf()) {
 299                         //console.log("REM UID: " + key + " ITEM " + olditem.data.id);
 300                         delete index[key];
 301                         var parentNode = olditem.parentNode;
 302                         parentNode.removeChild(olditem, true);
 303                     }
 304                 }
 305             }
 306
 307             // add new items
 308             rstore.each(function(item) {
 309                 var olditem = index[item.data.id];
 310                 if (olditem) {
 311                     return;
 312                 }
 313
 314                 if (filterfn && !filterfn(item)) {
 315                     return;
 316                 }
 317
 318                 //console.log("ADD UID: " + item.data.id);
 319
 320                 var info = Ext.apply({ leaf: true }, item.data);
 321
 322                 var child = me.groupChild(rootnode, info, groups, 0);
 323                 if (child) {
 324                     index[item.data.id] = child;
 325                 }
 326             });
 327
 328             // select parent node is selection vanished
 329             if (lastsel && !rootnode.findChild('id', lastsel.data.id, true)) {
 330                 lastsel = rootnode;
 331                 while (!!(p = parents.shift())) {
 332                     if (!!(tmp = rootnode.findChild('id', p.data.id, true))) {
 333                         lastsel = tmp;
 334                         break;
 335                     }
 336                 }
 337                 me.selectById(lastsel.data.id);
 338             }
 339
 340             // on first tree load set the selection from the stateful provider
 341             if (!pdata.updateCount) {
 342                 rootnode.collapse();
 343                 rootnode.expand();
 344                 me.applyState(sp.get(stateid));
 345             }
 346
 347             pdata.updateCount++;
 348         };
 349
 350         var statechange = function(sp, key, value) {
 351             if (key === stateid) {
 352                 me.applyState(value);
 353             }
 354         };
 355
 356         sp.on('statechange', statechange);
 357
 358         Ext.apply(me, {
 359             store: store,
 360             viewConfig: {
 361                 // note: animate cause problems with applyState
 362                 animate: false
 363             },
 364             //useArrows: true,
 365             //rootVisible: false,
 366             //title: 'Resource Tree',
 367             listeners: {
 368                 itemcontextmenu: function(v, record, item, index, event) {
 369                     event.stopEvent();
 370                     //v.select(record);
 371                     var menu;
 372
 373                     if (record.data.type === 'qemu' && !record.data.template) {
 374                         menu = Ext.create('PVE.qemu.CmdMenu', {
 375                             pveSelNode: record
 376                         });
 377                     } else if (record.data.type === 'qemu' && record.data.template) {
 378                         menu = Ext.create('PVE.qemu.TemplateMenu', {
 379                             pveSelNode: record
 380                         });
 381                     } else if (record.data.type === 'lxc' && !record.data.template) {
 382                         menu = Ext.create('PVE.lxc.CmdMenu', {
 383                             pveSelNode: record
 384                         });
 385                     } else if (record.data.type === 'lxc' && record.data.template) {
 386                         /* since clone does not work reliably, disable for now
 387                         menu = Ext.create('PVE.lxc.TemplateMenu', {
 388                             pveSelNode: record
 389                         });
 390                         */
 391                         return;
 392                     } else {
 393                         return;
 394                     }
 395
 396                     menu.showAt(event.getXY());
 397                 },
 398                 destroy: function() {
 399                     rstore.un("load", updateTree);
 400                 }
 401             },
 402             setViewFilter: function(view) {
 403                 me.viewFilter = view;
 404                 me.clearTree();
 405                 updateTree();
 406             },
 407             clearTree: function() {
 408                 pdata.updateCount = 0;
 409                 var rootnode = me.store.getRootNode();
 410                 rootnode.collapse();
 411                 rootnode.removeAll();
 412                 pdata.dataIndex = {};
 413                 me.getSelectionModel().deselectAll();
 414             },
 415             selectExpand: function(node) {
 416                 var sm = me.getSelectionModel();
 417                 if (!sm.isSelected(node)) {
 418                     sm.select(node);
 419                     var cn = node;
 420                     while (!!(cn = cn.parentNode)) {
 421                         if (!cn.isExpanded()) {
 422                             cn.expand();
 423                         }
 424                     }
 425                 }
 426             },
 427             selectById: function(nodeid) {
 428                 var rootnode = me.store.getRootNode();
 429                 var sm = me.getSelectionModel();
 430                 var node;
 431                 if (nodeid === 'root') {
 432                     node = rootnode;
 433                 } else {
 434                     node = rootnode.findChild('id', nodeid, true);
 435                 }
 436                 if (node) {
 437                     me.selectExpand(node);
 438                 }
 439             },
 440             checkVmMigration: function(record) {
 441                 if (!(record.data.type === 'qemu' || record.data.type === 'lxc')) {
 442                     throw "not a vm type";
 443                 }
 444
 445                 var rootnode = me.store.getRootNode();
 446                 var node = rootnode.findChild('id', record.data.id, true);
 447
 448                 if (node && node.data.type === record.data.type &&
 449                     node.data.node !== record.data.node) {
 450                     // defer select (else we get strange errors)
 451                     Ext.defer(function() { me.selectExpand(node); }, 100, me);
 452                 }
 453             },
 454             applyState : function(state) {
 455                 var sm = me.getSelectionModel();
 456                 if (state && state.value) {
 457                     me.selectById(state.value);
 458                 } else {
 459                     sm.deselectAll();
 460                 }
 461             }
 462         });
 463
 464         me.callParent();
 465
 466         var sm = me.getSelectionModel();
 467         sm.on('select', function(sm, n) {
 468             sp.set(stateid, { value: n.data.id});
 469         });
 470
 471         rstore.on("load", updateTree);
 472         rstore.startUpdate();
 473         //rstore.stopUpdate();
 474     }
 475
 476 });