[pve-devel] [PATCH v2 manager 11/20] create and use TemplateView
Fabian Ebner
f.ebner at proxmox.com
Wed Sep 16 14:50:32 CEST 2020
Signed-off-by: Fabian Ebner <f.ebner at proxmox.com>
---
www/manager6/Makefile | 1 +
www/manager6/storage/Browser.js | 6 +-
www/manager6/storage/ContentView.js | 184 -----------------------
www/manager6/storage/TemplateView.js | 215 +++++++++++++++++++++++++++
4 files changed, 217 insertions(+), 189 deletions(-)
create mode 100644 www/manager6/storage/TemplateView.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 4288acdd..cece0aae 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -232,6 +232,7 @@ JSSRC= \
storage/RBDEdit.js \
storage/StatusView.js \
storage/Summary.js \
+ storage/TemplateView.js \
storage/ZFSEdit.js \
storage/ZFSPoolEdit.js \
tree/ResourceTree.js \
diff --git a/www/manager6/storage/Browser.js b/www/manager6/storage/Browser.js
index 6e455625..468adae1 100644
--- a/www/manager6/storage/Browser.js
+++ b/www/manager6/storage/Browser.js
@@ -107,14 +107,10 @@ Ext.define('PVE.storage.Browser', {
}
if (contents.includes('vztmpl')) {
items.push({
- xtype: 'pveStorageContentView',
+ xtype: 'pveStorageTemplateView',
title: gettext('Container Templates'),
iconCls: 'fa fa-file-o lxc',
itemId: 'contentVztmpl',
- content: 'vztmpl',
- stateful: true,
- stateId: 'grid-storage-content-vztmpl',
- useUploadButton: true,
});
}
me.insertNodes(items);
diff --git a/www/manager6/storage/ContentView.js b/www/manager6/storage/ContentView.js
index dfc98a05..5f84789e 100644
--- a/www/manager6/storage/ContentView.js
+++ b/www/manager6/storage/ContentView.js
@@ -1,170 +1,3 @@
-Ext.define('PVE.grid.TemplateSelector', {
- extend: 'Ext.grid.GridPanel',
-
- alias: 'widget.pveTemplateSelector',
-
- stateful: true,
- stateId: 'grid-template-selector',
- viewConfig: {
- trackOver: false
- },
- initComponent : function() {
- var me = this;
-
- if (!me.nodename) {
- throw "no node name specified";
- }
-
- var baseurl = "/nodes/" + me.nodename + "/aplinfo";
- var store = new Ext.data.Store({
- model: 'pve-aplinfo',
- groupField: 'section',
- proxy: {
- type: 'proxmox',
- url: '/api2/json' + baseurl
- }
- });
-
- var sm = Ext.create('Ext.selection.RowModel', {});
-
- var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
- groupHeaderTpl: '{[ "Section: " + values.name ]} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
- });
-
- var reload = function() {
- store.load();
- };
-
- Proxmox.Utils.monStoreErrors(me, store);
-
- Ext.apply(me, {
- store: store,
- selModel: sm,
- tbar: [
- '->',
- gettext('Search'),
- {
- xtype: 'textfield',
- width: 200,
- enableKeyEvents: true,
- listeners: {
- buffer: 500,
- keyup: function(field) {
- var value = field.getValue().toLowerCase();
- store.clearFilter(true);
- store.filterBy(function(rec) {
- return (rec.data['package'].toLowerCase().indexOf(value) !== -1)
- || (rec.data.headline.toLowerCase().indexOf(value) !== -1);
- });
- }
- }
- }
- ],
- features: [ groupingFeature ],
- columns: [
- {
- header: gettext('Type'),
- width: 80,
- dataIndex: 'type'
- },
- {
- header: gettext('Package'),
- flex: 1,
- dataIndex: 'package'
- },
- {
- header: gettext('Version'),
- width: 80,
- dataIndex: 'version'
- },
- {
- header: gettext('Description'),
- flex: 1.5,
- renderer: Ext.String.htmlEncode,
- dataIndex: 'headline'
- }
- ],
- listeners: {
- afterRender: reload
- }
- });
-
- me.callParent();
- }
-
-}, function() {
-
- Ext.define('pve-aplinfo', {
- extend: 'Ext.data.Model',
- fields: [
- 'template', 'type', 'package', 'version', 'headline', 'infopage',
- 'description', 'os', 'section'
- ],
- idProperty: 'template'
- });
-
-});
-
-Ext.define('PVE.storage.TemplateDownload', {
- extend: 'Ext.window.Window',
- alias: 'widget.pveTemplateDownload',
-
- modal: true,
- title: gettext('Templates'),
- layout: 'fit',
- width: 900,
- height: 600,
- initComponent : function() {
- var me = this;
-
- var grid = Ext.create('PVE.grid.TemplateSelector', {
- border: false,
- scrollable: true,
- nodename: me.nodename
- });
-
- var sm = grid.getSelectionModel();
-
- var submitBtn = Ext.create('Proxmox.button.Button', {
- text: gettext('Download'),
- disabled: true,
- selModel: sm,
- handler: function(button, event, rec) {
- Proxmox.Utils.API2Request({
- url: '/nodes/' + me.nodename + '/aplinfo',
- params: {
- storage: me.storage,
- template: rec.data.template
- },
- method: 'POST',
- failure: function (response, opts) {
- Ext.Msg.alert(gettext('Error'), response.htmlStatus);
- },
- success: function(response, options) {
- var upid = response.result.data;
-
- Ext.create('Proxmox.window.TaskViewer', {
- upid: upid,
- listeners: {
- destroy: me.reloadGrid
- }
- }).show();
-
- me.close();
- }
- });
- }
- });
-
- Ext.apply(me, {
- items: grid,
- buttons: [ submitBtn ]
- });
-
- me.callParent();
- }
-});
-
Ext.define('PVE.storage.Upload', {
extend: 'Ext.window.Window',
alias: 'widget.pveStorageUpload',
@@ -423,22 +256,6 @@ Ext.define('PVE.storage.ContentView', {
Proxmox.Utils.monStoreErrors(me, store);
- var templateButton = Ext.create('Proxmox.button.Button',{
- itemId: 'tmpl-btn',
- text: gettext('Templates'),
- handler: function() {
- var win = Ext.create('PVE.storage.TemplateDownload', {
- nodename: nodename,
- storage: storage,
- reloadGrid: reload
- });
- win.show();
- }
- });
- if (content !== 'vztmpl') {
- templateButton.setDisabled(true);
- }
-
var uploadButton = Ext.create('Proxmox.button.Button', {
text: gettext('Upload'),
handler: function() {
@@ -557,7 +374,6 @@ Ext.define('PVE.storage.ContentView', {
},
removeButton,
imageRemoveButton,
- templateButton,
{
xtype: 'proxmoxButton',
text: gettext('Show Configuration'),
diff --git a/www/manager6/storage/TemplateView.js b/www/manager6/storage/TemplateView.js
new file mode 100644
index 00000000..8500ca21
--- /dev/null
+++ b/www/manager6/storage/TemplateView.js
@@ -0,0 +1,215 @@
+Ext.define('PVE.grid.TemplateSelector', {
+ extend: 'Ext.grid.GridPanel',
+
+ alias: 'widget.pveTemplateSelector',
+
+ stateful: true,
+ stateId: 'grid-template-selector',
+ viewConfig: {
+ trackOver: false
+ },
+ initComponent : function() {
+ var me = this;
+
+ if (!me.nodename) {
+ throw "no node name specified";
+ }
+
+ var baseurl = "/nodes/" + me.nodename + "/aplinfo";
+ var store = new Ext.data.Store({
+ model: 'pve-aplinfo',
+ groupField: 'section',
+ proxy: {
+ type: 'proxmox',
+ url: '/api2/json' + baseurl
+ }
+ });
+
+ var sm = Ext.create('Ext.selection.RowModel', {});
+
+ var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
+ groupHeaderTpl: '{[ "Section: " + values.name ]} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
+ });
+
+ var reload = function() {
+ store.load();
+ };
+
+ Proxmox.Utils.monStoreErrors(me, store);
+
+ Ext.apply(me, {
+ store: store,
+ selModel: sm,
+ tbar: [
+ '->',
+ gettext('Search'),
+ {
+ xtype: 'textfield',
+ width: 200,
+ enableKeyEvents: true,
+ listeners: {
+ buffer: 500,
+ keyup: function(field) {
+ var value = field.getValue().toLowerCase();
+ store.clearFilter(true);
+ store.filterBy(function(rec) {
+ return (rec.data['package'].toLowerCase().indexOf(value) !== -1)
+ || (rec.data.headline.toLowerCase().indexOf(value) !== -1);
+ });
+ }
+ }
+ }
+ ],
+ features: [ groupingFeature ],
+ columns: [
+ {
+ header: gettext('Type'),
+ width: 80,
+ dataIndex: 'type'
+ },
+ {
+ header: gettext('Package'),
+ flex: 1,
+ dataIndex: 'package'
+ },
+ {
+ header: gettext('Version'),
+ width: 80,
+ dataIndex: 'version'
+ },
+ {
+ header: gettext('Description'),
+ flex: 1.5,
+ renderer: Ext.String.htmlEncode,
+ dataIndex: 'headline'
+ }
+ ],
+ listeners: {
+ afterRender: reload
+ }
+ });
+
+ me.callParent();
+ }
+
+}, function() {
+
+ Ext.define('pve-aplinfo', {
+ extend: 'Ext.data.Model',
+ fields: [
+ 'template', 'type', 'package', 'version', 'headline', 'infopage',
+ 'description', 'os', 'section'
+ ],
+ idProperty: 'template'
+ });
+
+});
+
+Ext.define('PVE.storage.TemplateDownload', {
+ extend: 'Ext.window.Window',
+ alias: 'widget.pveTemplateDownload',
+
+ modal: true,
+ title: gettext('Templates'),
+ layout: 'fit',
+ width: 900,
+ height: 600,
+ initComponent : function() {
+ var me = this;
+
+ var grid = Ext.create('PVE.grid.TemplateSelector', {
+ border: false,
+ scrollable: true,
+ nodename: me.nodename
+ });
+
+ var sm = grid.getSelectionModel();
+
+ var submitBtn = Ext.create('Proxmox.button.Button', {
+ text: gettext('Download'),
+ disabled: true,
+ selModel: sm,
+ handler: function(button, event, rec) {
+ Proxmox.Utils.API2Request({
+ url: '/nodes/' + me.nodename + '/aplinfo',
+ params: {
+ storage: me.storage,
+ template: rec.data.template
+ },
+ method: 'POST',
+ failure: function (response, opts) {
+ Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+ },
+ success: function(response, options) {
+ var upid = response.result.data;
+
+ Ext.create('Proxmox.window.TaskViewer', {
+ upid: upid,
+ listeners: {
+ destroy: me.reloadGrid
+ }
+ }).show();
+
+ me.close();
+ }
+ });
+ }
+ });
+
+ Ext.apply(me, {
+ items: grid,
+ buttons: [ submitBtn ]
+ });
+
+ me.callParent();
+ }
+});
+
+Ext.define('PVE.storage.TemplateView', {
+ extend: 'PVE.storage.ContentView',
+
+ alias: 'widget.pveStorageTemplateView',
+
+ stateful: true,
+ stateId: 'grid-storage-content-vztmpl',
+
+ initComponent: function() {
+ var me = this;
+
+ var nodename = me.nodename = me.pveSelNode.data.node;
+ if (!nodename) {
+ throw "no node name specified";
+ }
+
+ var storage = me.storage = me.pveSelNode.data.storage;
+ if (!storage) {
+ throw "no storage ID specified";
+ }
+
+ me.content = 'vztmpl';
+
+ var sm = me.sm = Ext.create('Ext.selection.RowModel', {});
+
+ var reload = function() {
+ me.store.load();
+ }
+
+ var templateButton = Ext.create('Proxmox.button.Button',{
+ itemId: 'tmpl-btn',
+ text: gettext('Templates'),
+ handler: function() {
+ var win = Ext.create('PVE.storage.TemplateDownload', {
+ nodename: nodename,
+ storage: storage,
+ reloadGrid: reload
+ });
+ win.show();
+ }
+ });
+
+ me.tbar = [ templateButton ];
+ me.useUploadButton = true;
+
+ me.callParent();
+ },
+});
--
2.20.1
More information about the pve-devel
mailing list