www/manager6/storage/ContentView.js

   1 Ext.define('PVE.storage.ContentView', {
   2     extend: 'Ext.grid.GridPanel',
   3
   4     alias: 'widget.pveStorageContentView',
   5
   6     itemdblclick: Ext.emptyFn,
   7
   8     viewConfig: {
   9         trackOver: false,
  10         loadMask: false,
  11     },
  12     initComponent: function() {
  13         var me = this;
  14
  15         if (!me.nodename) {
  16             me.nodename = me.pveSelNode.data.node;
  17             if (!me.nodename) {
  18                 throw "no node name specified";
  19             }
  20         }
  21         const nodename = me.nodename;
  22
  23         if (!me.storage) {
  24             me.storage = me.pveSelNode.data.storage;
  25             if (!me.storage) {
  26                 throw "no storage ID specified";
  27             }
  28         }
  29         const storage = me.storage;
  30
  31         var content = me.content;
  32         if (!content) {
  33             throw "no content type specified";
  34         }
  35
  36         const baseurl = `/nodes/${nodename}/storage/${storage}/content`;
  37         let store = me.store = Ext.create('Ext.data.Store', {
  38             model: 'pve-storage-content',
  39             proxy: {
  40                 type: 'proxmox',
  41                 url: '/api2/json' + baseurl,
  42                 extraParams: {
  43                     content: content,
  44                 },
  45             },
  46             sorters: {
  47                 property: 'volid',
  48                 direction: 'ASC',
  49             },
  50         });
  51
  52         if (!me.sm) {
  53             me.sm = Ext.create('Ext.selection.RowModel', {});
  54         }
  55         let sm = me.sm;
  56
  57         let reload = () => store.load();
  58
  59         Proxmox.Utils.monStoreErrors(me, store);
  60
  61         let tbar = me.tbar ? [...me.tbar] : [];
  62         if (me.useUploadButton) {
  63             tbar.unshift(
  64                 {
  65                     xtype: 'button',
  66                     text: gettext('Upload'),
  67                     disabled: !me.enableUploadButton,
  68                     handler: function() {
  69                         Ext.create('PVE.window.UploadToStorage', {
  70                             nodename: nodename,
  71                             storage: storage,
  72                             content: content,
  73                             autoShow: true,
  74                             taskDone: () => reload(),
  75                         });
  76                     },
  77                 },
  78                 {
  79                     xtype: 'button',
  80                     text: gettext('Download from URL'),
  81                     disabled: !me.enableDownloadUrlButton,
  82                     handler: function() {
  83                         Ext.create('PVE.window.DownloadUrlToStorage', {
  84                             nodename: nodename,
  85                             storage: storage,
  86                             content: content,
  87                             autoShow: true,
  88                             taskDone: () => reload(),
  89                         });
  90                     },
  91                 },
  92                 '-',
  93             );
  94         }
  95         if (!me.useCustomRemoveButton) {
  96             tbar.push({
  97                 xtype: 'proxmoxStdRemoveButton',
  98                 selModel: sm,
  99                 enableFn: rec => !rec?.data?.protected,
 100                 delay: 5,
 101                 callback: () => reload(),
 102                 baseurl: baseurl + '/',
 103             });
 104         }
 105         tbar.push(
 106             '->',
 107             gettext('Search') + ':',
 108             ' ',
 109             {
 110                 xtype: 'textfield',
 111                 width: 200,
 112                 enableKeyEvents: true,
 113                 emptyText: content === 'backup' ? gettext('Name, Format, Notes') : gettext('Name, Format'),
 114                 listeners: {
 115                     keyup: {
 116                         buffer: 500,
 117                         fn: function(field) {
 118                             let needle = field.getValue().toLocaleLowerCase();
 119                             store.clearFilter(true);
 120                             store.filter([
 121                                 {
 122                                     filterFn: ({ data }) =>
 123                                         data.text?.toLocaleLowerCase().includes(needle) ||
 124                                         data.notes?.toLocaleLowerCase().includes(needle),
 125                                 },
 126                             ]);
 127                         },
 128                     },
 129                     change: function(field, newValue, oldValue) {
 130                         if (newValue !== this.originalValue) {
 131                             this.triggers.clear.setVisible(true);
 132                         }
 133                     },
 134                 },
 135                 triggers: {
 136                     clear: {
 137                         cls: 'pmx-clear-trigger',
 138                         weight: -1,
 139                         hidden: true,
 140                         handler: function() {
 141                             this.triggers.clear.setVisible(false);
 142                             this.setValue(this.originalValue);
 143                             store.clearFilter();
 144                         },
 145                     },
 146                 },
 147             },
 148         );
 149
 150         let availableColumns = {
 151             'name': {
 152                 header: gettext('Name'),
 153                 flex: 2,
 154                 sortable: true,
 155                 renderer: PVE.Utils.render_storage_content,
 156                 dataIndex: 'text',
 157             },
 158             'notes': {
 159                 header: gettext('Notes'),
 160                 flex: 1,
 161                 renderer: Ext.htmlEncode,
 162                 dataIndex: 'notes',
 163             },
 164             'protected': {
 165                 header: `<i class="fa fa-shield"></i>`,
 166                 tooltip: gettext('Protected'),
 167                 width: 30,
 168                 renderer: v => v ? `<i data-qtip="${gettext('Protected')}" class="fa fa-shield"></i>` : '',
 169                 sorter: (a, b) => (b.data.protected || 0) - (a.data.protected || 0),
 170                 dataIndex: 'protected',
 171             },
 172             'date': {
 173                 header: gettext('Date'),
 174                 width: 150,
 175                 dataIndex: 'vdate',
 176             },
 177             'format': {
 178                 header: gettext('Format'),
 179                 width: 100,
 180                 dataIndex: 'format',
 181             },
 182             'size': {
 183                 header: gettext('Size'),
 184                 width: 100,
 185                 renderer: Proxmox.Utils.format_size,
 186                 dataIndex: 'size',
 187             },
 188         };
 189
 190         let showColumns = me.showColumns || ['name', 'date', 'format', 'size'];
 191
 192         Object.keys(availableColumns).forEach(function(key) {
 193             if (!showColumns.includes(key)) {
 194                 delete availableColumns[key];
 195             }
 196         });
 197
 198         if (me.extraColumns && typeof me.extraColumns === 'object') {
 199             Object.assign(availableColumns, me.extraColumns);
 200         }
 201         const columns = Object.values(availableColumns);
 202
 203         Ext.apply(me, {
 204             store,
 205             selModel: sm,
 206             tbar,
 207             columns,
 208             listeners: {
 209                 activate: reload,
 210                 itemdblclick: (view, record) => me.itemdblclick(view, record),
 211             },
 212         });
 213
 214         me.callParent();
 215     },
 216 }, function() {
 217     Ext.define('pve-storage-content', {
 218         extend: 'Ext.data.Model',
 219         fields: [
 220             'volid', 'content', 'format', 'size', 'used', 'vmid',
 221             'channel', 'id', 'lun', 'notes', 'verification',
 222             {
 223                 name: 'text',
 224                 convert: function(value, record) {
 225                     // check for volid, because if you click on a grouping header,
 226                     // it calls convert (but with an empty volid)
 227                     if (value || record.data.volid === null) {
 228                         return value;
 229                     }
 230                     return PVE.Utils.render_storage_content(value, {}, record);
 231                 },
 232             },
 233             {
 234                 name: 'vdate',
 235                 convert: function(value, record) {
 236                     // check for volid, because if you click on a grouping header,
 237                     // it calls convert (but with an empty volid)
 238                     if (value || record.data.volid === null) {
 239                         return value;
 240                     }
 241                     let t = record.data.content;
 242                     if (t === "backup") {
 243                         let v = record.data.volid;
 244                         let match = v.match(/(\d{4}_\d{2}_\d{2})-(\d{2}_\d{2}_\d{2})/);
 245                         if (match) {
 246                             let date = match[1].replace(/_/g, '-');
 247                             let time = match[2].replace(/_/g, ':');
 248                             return date + " " + time;
 249                         }
 250                     }
 251                     if (record.data.ctime) {
 252                         let ctime = new Date(record.data.ctime * 1000);
 253                         return Ext.Date.format(ctime, 'Y-m-d H:i:s');
 254                     }
 255                     return '';
 256                 },
 257             },
 258         ],
 259         idProperty: 'volid',
 260     });
 261 });