www/manager6/storage/ContentView.js

   1 Ext.define('PVE.grid.TemplateSelector', {
   2     extend: 'Ext.grid.GridPanel',
   3
   4     alias: 'widget.pveTemplateSelector',
   5
   6     stateful: true,
   7     stateId: 'grid-template-selector',
   8     viewConfig: {
   9         trackOver: false
  10     },
  11     initComponent : function() {
  12         var me = this;
  13
  14         if (!me.nodename) {
  15             throw "no node name specified";
  16         }
  17
  18         var baseurl = "/nodes/" + me.nodename + "/aplinfo";
  19         var store = new Ext.data.Store({
  20             model: 'pve-aplinfo',
  21             groupField: 'section',
  22             proxy: {
  23                 type: 'proxmox',
  24                 url: '/api2/json' + baseurl
  25             }
  26         });
  27
  28         var sm = Ext.create('Ext.selection.RowModel', {});
  29
  30         var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
  31             groupHeaderTpl: '{[ "Section: " + values.name ]} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
  32         });
  33
  34         var reload = function() {
  35             store.load();
  36         };
  37
  38         Proxmox.Utils.monStoreErrors(me, store);
  39
  40         Ext.apply(me, {
  41             store: store,
  42             selModel: sm,
  43             tbar: [
  44                 '->',
  45                 gettext('Search'),
  46                 {
  47                     xtype: 'textfield',
  48                     width: 200,
  49                     enableKeyEvents: true,
  50                     listeners: {
  51                         buffer: 500,
  52                         keyup: function(field) {
  53                             var value = field.getValue().toLowerCase();
  54                             store.clearFilter(true);
  55                             store.filterBy(function(rec) {
  56                                 return (rec.data['package'].toLowerCase().indexOf(value) !== -1)
  57                                 || (rec.data.headline.toLowerCase().indexOf(value) !== -1);
  58                             });
  59                         }
  60                     }
  61                 }
  62             ],
  63             features: [ groupingFeature ],
  64             columns: [
  65                 {
  66                     header: gettext('Type'),
  67                     width: 80,
  68                     dataIndex: 'type'
  69                 },
  70                 {
  71                     header: gettext('Package'),
  72                     flex: 1,
  73                     dataIndex: 'package'
  74                 },
  75                 {
  76                     header: gettext('Version'),
  77                     width: 80,
  78                     dataIndex: 'version'
  79                 },
  80                 {
  81                     header: gettext('Description'),
  82                     flex: 1.5,
  83                     renderer: Ext.String.htmlEncode,
  84                     dataIndex: 'headline'
  85                 }
  86             ],
  87             listeners: {
  88                 afterRender: reload
  89             }
  90         });
  91
  92         me.callParent();
  93     }
  94
  95 }, function() {
  96
  97     Ext.define('pve-aplinfo', {
  98         extend: 'Ext.data.Model',
  99         fields: [
 100             'template', 'type', 'package', 'version', 'headline', 'infopage',
 101             'description', 'os', 'section'
 102         ],
 103         idProperty: 'template'
 104     });
 105
 106 });
 107
 108 Ext.define('PVE.storage.TemplateDownload', {
 109     extend: 'Ext.window.Window',
 110     alias: 'widget.pveTemplateDownload',
 111
 112     modal: true,
 113     title: gettext('Templates'),
 114     layout: 'fit',
 115     width: 900,
 116     height: 600,
 117     initComponent : function() {
 118         /*jslint confusion: true */
 119         var me = this;
 120
 121         var grid = Ext.create('PVE.grid.TemplateSelector', {
 122             border: false,
 123             scrollable: true,
 124             nodename: me.nodename
 125         });
 126
 127         var sm = grid.getSelectionModel();
 128
 129         var submitBtn = Ext.create('Proxmox.button.Button', {
 130             text: gettext('Download'),
 131             disabled: true,
 132             selModel: sm,
 133             handler: function(button, event, rec) {
 134                 Proxmox.Utils.API2Request({
 135                     url: '/nodes/' + me.nodename + '/aplinfo',
 136                     params: {
 137                         storage: me.storage,
 138                         template: rec.data.template
 139                     },
 140                     method: 'POST',
 141                     failure: function (response, opts) {
 142                         Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 143                     },
 144                     success: function(response, options) {
 145                         var upid = response.result.data;
 146
 147                         Ext.create('Proxmox.window.TaskViewer', {
 148                             upid: upid,
 149                             listeners: {
 150                                 destroy: me.reloadGrid
 151                             }
 152                         }).show();
 153
 154                         me.close();
 155                     }
 156                 });
 157             }
 158         });
 159
 160         Ext.apply(me, {
 161             items: grid,
 162             buttons: [ submitBtn ]
 163         });
 164
 165         me.callParent();
 166     }
 167 });
 168
 169 Ext.define('PVE.storage.Upload', {
 170     extend: 'Ext.window.Window',
 171     alias: 'widget.pveStorageUpload',
 172
 173     resizable: false,
 174
 175     modal: true,
 176
 177     initComponent : function() {
 178         /*jslint confusion: true */
 179         var me = this;
 180
 181         var xhr;
 182
 183         if (!me.nodename) {
 184             throw "no node name specified";
 185         }
 186
 187         if (!me.storage) {
 188             throw "no storage ID specified";
 189         }
 190
 191         var baseurl = "/nodes/" + me.nodename + "/storage/" + me.storage + "/upload";
 192
 193         var pbar = Ext.create('Ext.ProgressBar', {
 194             text: 'Ready',
 195             hidden: true
 196         });
 197
 198         me.formPanel = Ext.create('Ext.form.Panel', {
 199             method: 'POST',
 200             waitMsgTarget: true,
 201             bodyPadding: 10,
 202             border: false,
 203             width: 300,
 204             fieldDefaults: {
 205                 labelWidth: 100,
 206                 anchor: '100%'
 207             },
 208             items: [
 209                 {
 210                     xtype: 'pveContentTypeSelector',
 211                     cts: me.contents,
 212                     fieldLabel: gettext('Content'),
 213                     name: 'content',
 214                     value: me.contents[0] || '',
 215                     allowBlank: false
 216                 },
 217                 {
 218                     xtype: 'filefield',
 219                     name: 'filename',
 220                     buttonText: gettext('Select File...'),
 221                     allowBlank: false,
 222                     listeners: {
 223                         afterrender: function(cmp) {
 224                             cmp.fileInputEl.set({
 225                                 accept: '.img, .iso'
 226                             });
 227                         }
 228                     }
 229                 },
 230                 pbar
 231             ]
 232         });
 233
 234         var form = me.formPanel.getForm();
 235
 236         var doStandardSubmit = function() {
 237             form.submit({
 238                 url: "/api2/htmljs" + baseurl,
 239                 waitMsg: gettext('Uploading file...'),
 240                 success: function(f, action) {
 241                     me.close();
 242                 },
 243                 failure: function(f, action) {
 244                     var msg = PVE.Utils.extractFormActionError(action);
 245                     Ext.Msg.alert(gettext('Error'), msg);
 246                 }
 247             });
 248         };
 249
 250         var updateProgress = function(per, bytes) {
 251             var text = (per * 100).toFixed(2) + '%';
 252             if (bytes) {
 253                 text += " (" + Proxmox.Utils.format_size(bytes) + ')';
 254             }
 255             pbar.updateProgress(per, text);
 256         };
 257
 258         var abortBtn = Ext.create('Ext.Button', {
 259             text: gettext('Abort'),
 260             disabled: true,
 261             handler: function() {
 262                 me.close();
 263             }
 264         });
 265
 266         var submitBtn = Ext.create('Ext.Button', {
 267             text: gettext('Upload'),
 268             disabled: true,
 269             handler: function(button) {
 270                 var fd;
 271                 try {
 272                     fd = new FormData();
 273                 } catch (err) {
 274                     doStandardSubmit();
 275                     return;
 276                 }
 277
 278                 button.setDisabled(true);
 279                 abortBtn.setDisabled(false);
 280
 281                 var field = form.findField('content');
 282                 fd.append("content", field.getValue());
 283                 field.setDisabled(true);
 284
 285                 field = form.findField('filename');
 286                 var file = field.fileInputEl.dom;
 287                 fd.append("filename", file.files[0]);
 288                 field.setDisabled(true);
 289
 290                 pbar.setVisible(true);
 291                 updateProgress(0);
 292
 293                 xhr = new XMLHttpRequest();
 294
 295                 xhr.addEventListener("load", function(e) {
 296                     if (xhr.status == 200) {
 297                         me.close();
 298                     } else {
 299                         var msg = gettext('Error') + " " + xhr.status.toString() + ": " + Ext.htmlEncode(xhr.statusText);
 300                         if (xhr.responseText !== "") {
 301                             var result = Ext.decode(xhr.responseText);
 302                             result.message = msg;
 303                             msg = Proxmox.Utils.extractRequestError(result, true);
 304                         }
 305                         Ext.Msg.alert(gettext('Error'), msg, function(btn) {
 306                             me.close();
 307                         });
 308                     }
 309                 }, false);
 310
 311                 xhr.addEventListener("error", function(e) {
 312                     var msg = "Error " + e.target.status.toString() + " occurred while receiving the document.";
 313                     Ext.Msg.alert(gettext('Error'), msg, function(btn) {
 314                         me.close();
 315                     });
 316                 });
 317
 318                 xhr.upload.addEventListener("progress", function(evt) {
 319                     if (evt.lengthComputable) {
 320                         var percentComplete = evt.loaded / evt.total;
 321                         updateProgress(percentComplete, evt.loaded);
 322                     }
 323                 }, false);
 324
 325                 xhr.open("POST", "/api2/json" + baseurl, true);
 326                 xhr.send(fd);
 327             }
 328         });
 329
 330         form.on('validitychange', function(f, valid) {
 331             submitBtn.setDisabled(!valid);
 332         });
 333
 334         Ext.apply(me, {
 335             title: gettext('Upload'),
 336             items: me.formPanel,
 337             buttons: [ abortBtn, submitBtn ],
 338             listeners: {
 339                 close: function() {
 340                     if (xhr) {
 341                         xhr.abort();
 342                     }
 343                 }
 344             }
 345         });
 346
 347         me.callParent();
 348     }
 349 });
 350
 351 Ext.define('PVE.storage.ContentView', {
 352     extend: 'Ext.grid.GridPanel',
 353
 354     alias: 'widget.pveStorageContentView',
 355
 356     stateful: true,
 357     stateId: 'grid-storage-content',
 358     viewConfig: {
 359         trackOver: false,
 360         loadMask: false
 361     },
 362     features: [
 363         {
 364             ftype: 'grouping',
 365             groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
 366         }
 367     ],
 368     initComponent : function() {
 369         var me = this;
 370
 371         var nodename = me.pveSelNode.data.node;
 372         if (!nodename) {
 373             throw "no node name specified";
 374         }
 375
 376         var storage = me.pveSelNode.data.storage;
 377         if (!storage) {
 378             throw "no storage ID specified";
 379         }
 380
 381         var baseurl = "/nodes/" + nodename + "/storage/" + storage + "/content";
 382         var store = Ext.create('Ext.data.Store',{
 383             model: 'pve-storage-content',
 384             groupField: 'content',
 385             proxy: {
 386                 type: 'proxmox',
 387                 url: '/api2/json' + baseurl
 388             },
 389             sorters: {
 390                 property: 'volid',
 391                 order: 'DESC'
 392             }
 393         });
 394
 395         var sm = Ext.create('Ext.selection.RowModel', {});
 396
 397         var reload = function() {
 398             store.load();
 399             me.statusStore.load();
 400         };
 401
 402         Proxmox.Utils.monStoreErrors(me, store);
 403
 404         var templateButton = Ext.create('Proxmox.button.Button',{
 405             itemId: 'tmpl-btn',
 406             text: gettext('Templates'),
 407             handler: function() {
 408                 var win = Ext.create('PVE.storage.TemplateDownload', {
 409                     nodename: nodename,
 410                     storage: storage,
 411                     reloadGrid: reload
 412                 });
 413                 win.show();
 414             }
 415         });
 416
 417         var uploadButton = Ext.create('Proxmox.button.Button', {
 418             contents : ['iso','vztmpl'],
 419             text: gettext('Upload'),
 420             handler: function() {
 421                 var me = this;
 422                 var win = Ext.create('PVE.storage.Upload', {
 423                     nodename: nodename,
 424                     storage: storage,
 425                     contents: me.contents
 426                 });
 427                 win.show();
 428                 win.on('destroy', reload);
 429             }
 430         });
 431
 432         var imageRemoveButton;
 433         var removeButton = Ext.create('Proxmox.button.StdRemoveButton',{
 434             selModel: sm,
 435             delay: 5,
 436             enableFn: function(rec) {
 437                 if (rec && rec.data.content !== 'images') {
 438                     imageRemoveButton.setVisible(false);
 439                     removeButton.setVisible(true);
 440                     return true;
 441                 }
 442                 return false;
 443             },
 444             callback: function() {
 445                 reload();
 446             },
 447             baseurl: baseurl + '/'
 448         });
 449
 450         imageRemoveButton = Ext.create('Proxmox.button.Button',{
 451             selModel: sm,
 452             hidden: true,
 453             text: gettext('Remove'),
 454             enableFn: function(rec) {
 455                 if (rec && rec.data.content === 'images') {
 456                     removeButton.setVisible(false);
 457                     imageRemoveButton.setVisible(true);
 458                     return true;
 459                 }
 460                 return false;
 461             },
 462             handler: function(btn, event, rec) {
 463                 me = this;
 464
 465                 var url = baseurl + '/' + rec.data.volid;
 466                 var vmid = rec.data.vmid;
 467
 468                 var store = PVE.data.ResourceStore;
 469
 470                 if (vmid && store.findVMID(vmid)) {
 471                     var guest_node = store.guestNode(vmid);
 472                     var storage_path = 'storage/' + nodename + '/' + storage;
 473
 474                     // allow to delete local backed images if a VMID exists on another node.
 475                     if (store.storageIsShared(storage_path) || guest_node == nodename) {
 476                         var msg = Ext.String.format(
 477                             gettext("Cannot remove image, a guest with VMID '{0}' exists!"), vmid);
 478                         msg += '<br />' + gettext("You can delete the image from the guest's hardware pane");
 479
 480                         Ext.Msg.show({
 481                             title: gettext('Cannot remove disk image.'),
 482                             icon: Ext.Msg.ERROR,
 483                             msg: msg
 484                         });
 485                         return;
 486                     }
 487                 }
 488                 var win = Ext.create('PVE.window.SafeDestroy', {
 489                     title: Ext.String.format(gettext("Destroy '{0}'"), rec.data.volid),
 490                     showProgress: true,
 491                     url: url,
 492                     item: { type: 'Image', id: vmid }
 493                 }).show();
 494                 win.on('destroy', function() {
 495                     me.statusStore = Ext.create('Proxmox.data.ObjectStore', {
 496                         url: '/api2/json/nodes/' + nodename + '/storage/' + storage + '/status'
 497                     });
 498                     reload();
 499
 500                 });
 501             }
 502         });
 503
 504         me.statusStore = Ext.create('Proxmox.data.ObjectStore', {
 505             url: '/api2/json/nodes/' + nodename + '/storage/' + storage + '/status'
 506         });
 507
 508         Ext.apply(me, {
 509             store: store,
 510             selModel: sm,
 511             tbar: [
 512                 {
 513                     xtype: 'proxmoxButton',
 514                     text: gettext('Restore'),
 515                     selModel: sm,
 516                     disabled: true,
 517                     enableFn: function(rec) {
 518                         return rec && rec.data.content === 'backup';
 519                     },
 520                     handler: function(b, e, rec) {
 521                         var vmtype;
 522                         if (PVE.Utils.volume_is_qemu_backup(rec.data.volid, rec.data.format)) {
 523                             vmtype = 'qemu';
 524                         } else if (PVE.Utils.volume_is_lxc_backup(rec.data.volid, rec.data.format)) {
 525                             vmtype = 'lxc';
 526                         } else {
 527                             return;
 528                         }
 529
 530                         var win = Ext.create('PVE.window.Restore', {
 531                             nodename: nodename,
 532                             volid: rec.data.volid,
 533                             volidText: PVE.Utils.render_storage_content(rec.data.volid, {}, rec),
 534                             vmtype: vmtype
 535                         });
 536                         win.show();
 537                         win.on('destroy', reload);
 538                     }
 539                 },
 540                 removeButton,
 541                 imageRemoveButton,
 542                 templateButton,
 543                 uploadButton,
 544                 {
 545                     xtype: 'proxmoxButton',
 546                     text: gettext('Show Configuration'),
 547                     disabled: true,
 548                     selModel: sm,
 549                     enableFn: function(rec) {
 550                         return rec && rec.data.content === 'backup';
 551                     },
 552                     handler: function(b,e,rec) {
 553                         var win = Ext.create('PVE.window.BackupConfig', {
 554                             volume: rec.data.volid,
 555                             pveSelNode: me.pveSelNode
 556                         });
 557
 558                         win.show();
 559                     }
 560                 },
 561                 '->',
 562                 gettext('Search') + ':', ' ',
 563                 {
 564                     xtype: 'textfield',
 565                     width: 200,
 566                     enableKeyEvents: true,
 567                     listeners: {
 568                         buffer: 500,
 569                         keyup: function(field) {
 570                             store.clearFilter(true);
 571                             store.filter([
 572                                 {
 573                                     property: 'text',
 574                                     value: field.getValue(),
 575                                     anyMatch: true,
 576                                     caseSensitive: false
 577                                 }
 578                             ]);
 579                         }
 580                     }
 581                 }
 582             ],
 583             columns: [
 584                 {
 585                     header: gettext('Name'),
 586                     flex: 1,
 587                     sortable: true,
 588                     renderer: PVE.Utils.render_storage_content,
 589                     dataIndex: 'text'
 590                 },
 591                 {
 592                     header: gettext('Date'),
 593                     width: 150,
 594                     dataIndex: 'vdate'
 595                 },
 596                 {
 597                     header: gettext('Format'),
 598                     width: 100,
 599                     dataIndex: 'format'
 600                 },
 601                 {
 602                     header: gettext('Type'),
 603                     width: 100,
 604                     dataIndex: 'content',
 605                     renderer: PVE.Utils.format_content_types
 606                 },
 607                 {
 608                     header: gettext('Size'),
 609                     width: 100,
 610                     renderer: Proxmox.Utils.format_size,
 611                     dataIndex: 'size'
 612                 }
 613             ],
 614             listeners: {
 615                 activate: reload
 616             }
 617         });
 618
 619         me.callParent();
 620
 621         // disable the buttons/restrict the upload window
 622         // if templates or uploads are not allowed
 623         me.mon(me.statusStore, 'load', function(s, records, success) {
 624             var availcontent = [];
 625             Ext.Array.each(records, function(item){
 626                 if (item.id === 'content') {
 627                     availcontent = item.data.value.split(',');
 628                 }
 629             });
 630             var templ = false;
 631             var upload = false;
 632             var cts = [];
 633
 634             Ext.Array.each(availcontent, function(content) {
 635                 if (content === 'vztmpl') {
 636                     templ = true;
 637                     cts.push('vztmpl');
 638                 } else if (content === 'iso') {
 639                     upload = true;
 640                     cts.push('iso');
 641                 }
 642             });
 643
 644             if (templ !== upload) {
 645                 uploadButton.contents = cts;
 646             }
 647
 648             templateButton.setDisabled(!templ);
 649             uploadButton.setDisabled(!upload && !templ);
 650         });
 651     }
 652 }, function() {
 653
 654     Ext.define('pve-storage-content', {
 655         extend: 'Ext.data.Model',
 656         fields: [
 657             'volid', 'content', 'format', 'size', 'used', 'vmid',
 658             'channel', 'id', 'lun',
 659             {
 660                 name: 'text',
 661                 convert: function(value, record) {
 662                     // check for volid, because if you click on a grouping header,
 663                     // it calls convert (but with an empty volid)
 664                     if (value || record.data.volid === null) {
 665                         return value;
 666                     }
 667                     return PVE.Utils.render_storage_content(value, {}, record);
 668                 }
 669             },
 670             {
 671                 name: 'vdate',
 672                 convert: function(value, record) {
 673                     // check for volid, because if you click on a grouping header,
 674                     // it calls convert (but with an empty volid)
 675                     if (value || record.data.volid === null) {
 676                         return value;
 677                     }
 678                     let t = record.data.content;
 679                     if (t === "backup") {
 680                         let v = record.data.volid;
 681                         let match = v.match(/(\d{4}_\d{2}_\d{2})-(\d{2}_\d{2}_\d{2})/);
 682                         if (match) {
 683                             let date = match[1].replace(/_/g, '.');
 684                             let time = match[2].replace(/_/g, ':');
 685                             return date + " " + time;
 686                         }
 687                     }
 688                     return '';
 689                 }
 690             },
 691         ],
 692         idProperty: 'volid'
 693     });
 694
 695 });