]>
git.datanom.net - omvzfs.git/blob - gui/js/omv/module/admin/storage/zfs/TreePanel.js
320a6cd8faf175a652663f240163e5faab338643
2 * This file is part of OpenMediaVault.
4 * @license http://www.gnu.org/licenses/gpl.html GPL Version 3
5 * @author Volker Theile <volker.theile@openmediavault.org>
6 * @copyright Copyright (c) 2009-2014 Volker Theile
8 * OpenMediaVault is free software: you can redistribute it and/or modify
9 * it under the terms of the GNU General Public License as published by
10 * the Free Software Foundation, either version 3 of the License, or
13 * OpenMediaVault is distributed in the hope that it will be useful,
14 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16 * GNU General Public License for more details.
18 * You should have received a copy of the GNU General Public License
19 * along with OpenMediaVault. If not, see <http://www.gnu.org/licenses/>.
21 // require("js/omv/tree/Panel.js")
22 // require("js/omv/grid/Panel.js")
23 // require("js/omv/grid/column/BinaryUnit.js")
24 // require("js/omv/grid/column/BooleanIcon.js")
25 // require("js/omv/grid/column/BooleanText.js")
26 // require("js/omv/grid/column/Empty.js")
27 // require("js/omv/grid/column/Hyperlink.js")
28 // require("js/omv/grid/column/UnixTimestamp.js")
29 // require("js/omv/grid/column/WhiteSpace.js")
30 // require("js/omv/window/MessageBox.js")
34 * @class OMV.workspace.grid.Panel
35 * @derived OMV.grid.Panel
36 * An enhanced grid panel. This grid provides 'Add', 'Edit' and 'Delete'
37 * buttons in the toolbar by default. The basic delete functionality is also
38 * implemented, simply overwrite the 'doDeletion' and 'afterDeletion'
39 * functions to implement fit your requirements. To implement the 'Add' and
40 * 'Edit' functionality overwrite the 'onAdd' and 'onEdit' callback
41 * functions. A paging toolbar which is displayed at the bottom of the grid
42 * can be displayed also. It is also possible to reload the grid
43 * automatically in a given interval.
44 * @param hideTopToolbar TRUE to hide the whole toolbar. Defaults to FALSE.
45 * @param hidePagingToolbar TRUE to hide the paging toolbar at the bottom of
46 * the grid. Defaults to TRUE.
47 * @param hideAddButton Hide the 'Add' button in the top toolbar.
49 * @param hideEditButton Hide the 'Edit' button in the top toolbar.
51 * @param hideDeleteButton Hide the 'Delete' button in the top toolbar.
53 * @param hideUpButton Hide the 'Up' button in the top toolbar.
55 * @param hideDownButton Hide the 'Down' button in the top toolbar.
57 * @param hideApplyButton Hide the 'Apply' button in the top toolbar.
59 * @param hideRefreshButton Hide the 'Refresh' button in the top toolbar.
61 * @param addButtonText The button text. Defaults to 'Add'.
62 * @param editButtonText The button text. Defaults to 'Edit'.
63 * @param deleteButtonText The button text. Defaults to 'Delete'.
64 * @param upButtonText The button text. Defaults to 'Up'.
65 * @param downButtonText The button text. Defaults to 'Down'.
66 * @param applyButtonText The button text. Defaults to 'Save'.
67 * @param refreshButtonText The button text. Defaults to 'Refresh'.
68 * @param deletionConfirmRequired Set to TRUE to force the user to confirm
69 * the deletion request. Defaults to TRUE.
70 * @param deletionWaitMsg The message displayed during the deletion process.
71 * @param mode The mode how to retrieve the data displayed in the grid panel.
72 * This can be 'local' or 'remote' which means the data is requested via
73 * RPC. Defaults to 'remote'.
74 * @param rememberSelected TRUE to reselect the previous selected rows
75 * after the grid content has been reloaded/refreshed. Defaults to FALSE.
77 Ext
.define("OMV.module.admin.storage.zfs.TreePanel", {
78 extend
: "OMV.tree.Panel",
80 "OMV.window.MessageBox",
81 "OMV.grid.column.BinaryUnit",
82 "OMV.grid.column.BooleanIcon",
83 "OMV.grid.column.BooleanText",
84 "OMV.grid.column.Empty",
85 "OMV.grid.column.Hyperlink",
86 "OMV.grid.column.UnixTimestamp",
87 "OMV.grid.column.WhiteSpace"
98 hideTopToolbar
: false,
99 hidePagingToolbar
: true,
100 hideAddButton
: false,
101 hideAddObjButton
: true,
102 hideEditButton
: true,
103 hideDeleteButton
: true,
105 hideDownButton
: true,
106 hideApplyButton
: true,
107 hideRefreshButton
: true,
108 addButtonText
: _("Add Pool"),
109 addObjButtonText
: _("Add Object"),
110 editButtonText
: _("Edit"),
111 deleteButtonText
: _("Delete"),
112 upButtonText
: _("Up"),
113 downButtonText
: _("Down"),
114 applyButtonText
: _("Save"),
115 refreshButtonText
: _("Refresh"),
116 deletionConfirmRequired
: true,
117 deletionWaitMsg
: _("Deleting selected item(s)"),
119 rememberSelected
: false,
121 initComponent: function() {
123 // Initialize toolbars.
125 if(!me
.hideTopToolbar
) {
126 me
.dockedItems
.push(me
.topToolbar
= Ext
.widget({
129 items
: me
.getTopToolbarItems(me
)
132 if(!me
.hidePagingToolbar
) {
133 me
.dockedItems
.push({
136 items
: [ me
.pagingToolbar
= Ext
.widget({
137 xtype
: "pagingtoolbar",
140 displayMsg
: _("Displaying items {0} - {1} of {2}"),
141 emptyMsg
: _("No items to display")
145 me
.callParent(arguments
);
146 // Register event handler.
147 // Process double clicks in grid.
148 me
.on("itemdblclick", me
.onItemDblClick
, me
);
149 // Process selections in grid, e.g. to update the toolbar.
150 var selModel
= me
.getSelectionModel();
151 selModel
.on("selectionchange", me
.onSelectionChange
, me
);
152 // Remember selection to restore it after the grid has been
154 if(me
.rememberSelected
) {
155 me
.getStore().on("beforeload", function() {
156 if(!me
.rendered
|| Ext
.isEmpty(me
.getEl()))
158 if(!selModel
.hasSelection())
160 me
.previousSelected
= selModel
.getSelection();
162 me
.getView().on("refresh", function(view
) {
163 if(Ext
.isEmpty(me
.previousSelected
))
166 Ext
.Array
.each(me
.previousSelected
, function(r
) {
167 var record
= me
.getStore().getById(r
.getId());
168 if(!Ext
.isEmpty(record
))
171 delete me
.previousSelected
;
172 if(select
.length
> 0) {
173 selModel
.select(select
, false, false);
174 selModel
.view
.focusNode(select
[0]);
181 * Returns the items displayed in the top toolbar.
182 * @param c This component object.
183 * @return An array of buttons displayed in the top toolbar.
185 getTopToolbarItems: function(c
) {
188 id
: me
.getId() + "-add",
190 text
: me
.addButtonText
,
191 icon
: "images/add.png",
192 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
193 hidden
: me
.hideAddButton
,
194 handler
: Ext
.Function
.bind(me
.onAddButton
, me
, [ me
]),
197 id
: me
.getId() + "-edit",
199 text
: me
.editButtonText
,
200 icon
: "images/edit.png",
201 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
202 hidden
: me
.hideEditButton
,
203 handler
: Ext
.Function
.bind(me
.onEditButton
, me
, [ me
]),
207 id
: me
.getId() + "-addobj",
209 text
: me
.addObjButtonText
,
210 icon
: "images/add.png",
211 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
212 hidden
: me
.hideAddObjButton
,
213 handler
: Ext
.Function
.bind(me
.onAddObjButton
, me
, [ me
]),
217 id
: me
.getId() + "-delete",
219 text
: me
.deleteButtonText
,
220 icon
: "images/delete.png",
221 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
222 hidden
: me
.hideDeleteButton
,
223 handler
: Ext
.Function
.bind(me
.onDeleteButton
, me
, [ me
]),
227 id
: me
.getId() + "-up",
229 text
: me
.upButtonText
,
230 icon
: "images/arrow-up.png",
231 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
232 hidden
: me
.hideUpButton
,
233 handler
: Ext
.Function
.bind(me
.onUpButton
, me
, [ me
]),
237 id
: me
.getId() + "-down",
239 text
: me
.downButtonText
,
240 icon
: "images/arrow-down.png",
241 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
242 hidden
: me
.hideDownButton
,
243 handler
: Ext
.Function
.bind(me
.onDownButton
, me
, [ me
]),
247 id
: me
.getId() + "-apply",
249 text
: me
.applyButtonText
,
250 icon
: "images/checkmark.png",
251 hidden
: me
.hideApplyButton
,
252 handler
: Ext
.Function
.bind(me
.onApplyButton
, me
, [ me
]),
255 id
: me
.getId() + "-refresh",
257 text
: me
.refreshButtonText
,
258 icon
: "images/refresh.png",
259 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
260 hidden
: me
.hideRefreshButton
,
261 handler
: Ext
.Function
.bind(me
.onRefreshButton
, me
, [ me
]),
267 * Handler that is called whenever the selection in the grid has
268 * been changed. The top toolbar buttons will be enabled/disabled
269 * depending on how much rows has been selected.
270 * @param model The selection model
272 onSelectionChange: function(model
, records
) {
274 if(me
.hideTopToolbar
)
276 var tbarBtnName
= [ "addobj", "edit", "delete", "up", "down" ];
277 var tbarBtnDisabled
= {
284 var tbarBtnHidden
= {
291 // Enable/disable buttons depending on the number of selected rows.
292 if(records
.length
<= 0) {
293 tbarBtnDisabled
["addobj"] = true;
294 tbarBtnDisabled
["edit"] = true;
295 tbarBtnDisabled
["delete"] = true;
296 tbarBtnDisabled
["up"] = true;
297 tbarBtnDisabled
["down"] = true;
298 tbarBtnHidden
["addobj"] = true;
299 tbarBtnHidden
["edit"] = true;
300 tbarBtnHidden
["delete"] = true;
301 } else if(records
.length
== 1) {
302 tbarBtnDisabled
["addobj"] = false;
303 tbarBtnDisabled
["edit"] = false;
304 tbarBtnDisabled
["delete"] = false;
305 tbarBtnDisabled
["up"] = false;
306 tbarBtnDisabled
["down"] = false;
307 tbarBtnHidden
["addobj"] = false;
308 tbarBtnHidden
["edit"] = false;
309 tbarBtnHidden
["delete"] = false;
311 tbarBtnDisabled
["addobj"] = true;
312 tbarBtnDisabled
["edit"] = true;
313 tbarBtnDisabled
["delete"] = false;
314 tbarBtnDisabled
["up"] = false;
315 tbarBtnDisabled
["down"] = false;
316 tbarBtnHidden
["addobj"] = true;
317 tbarBtnHidden
["edit"] = true;
318 tbarBtnHidden
["delete"] = false;
320 //Disable 'AddObj' button if selected row is a Poool or a Snapshot
321 Ext
.Array
.each(records
, function(record
) {
322 if(("Pool" == record
.get("type")) ||
323 ("Snapshot" == record
.get("type"))) {
324 tbarBtnDisabled
["addobj"] = true;
325 tbarBtnHidden
["addobj"] = true;
330 // Disable 'Delete' button if a selected node is not a leaf
331 Ext
.Array
.each(records
, function(record
) {
332 if((false == record
.get("leaf"))) {
333 tbarBtnDisabled
["delete"] = true;
334 tbarBtnHidden
["delete"] = true;
339 // Update the button controls.
340 Ext
.Array
.each(tbarBtnName
, function(name
) {
341 var tbarBtnCtrl
= me
.queryById(me
.getId() + "-" + name
);
342 if(!Ext
.isEmpty(tbarBtnCtrl
)) {
343 if(true == tbarBtnDisabled
[name
]) {
344 tbarBtnCtrl
.disable();
346 tbarBtnCtrl
.enable();
348 if(true == tbarBtnHidden
[name
]) {
357 onItemDblClick: function() {
359 if(!me
.hideTopToolbar
&& !me
.hideEditButton
) {
365 * Load the grid content.
369 if(me
.mode
=== "remote") {
375 * Reload the grid content.
377 doReload: function() {
379 if(me
.mode
=== "remote") {
385 * Handler that is called when the 'Add' button in the top toolbar
386 * is pressed. Override this method to customize the default behaviour.
387 * @param this The grid itself.
389 onAddButton: function() {
390 // Nothing to do here
394 * * Handler that is called when the 'AddObj' button in the top toolbar
395 * is pressed. Override this method to customize the default behaviour.
396 * @param this The grid itself.
398 onAddObjButton: function() {
399 // Nothing to do here
404 * Handler that is called when the 'Edit' button in the top toolbar
405 * is pressed. Override this method to customize the default behaviour.
406 * @param this The grid itself.
408 onEditButton: function() {
409 // Nothing to do here
413 * Handler that is called when the 'Up' button in the top toolbar
414 * is pressed. Override this method to customize the default behaviour.
415 * @param this The grid itself.
417 onUpButton: function() {
419 var sm
= me
.getSelectionModel();
420 var records
= sm
.getSelection();
421 if(records
.length
> 0) {
422 // Find the smallest index of the selected rows.
423 var ltIndex
= me
.store
.indexOf(records
[0]);
424 Ext
.Array
.each(records
, function(record
) {
425 var index
= me
.store
.indexOf(record
);
429 // Calculate the index where to insert the rows.
430 var index
= ltIndex
- 1;
433 me
.doMoveRows(records
, index
);
438 * Handler that is called when the 'Down' button in the top toolbar
440 * @param this The grid itself.
442 onDownButton: function() {
444 var sm
= me
.getSelectionModel();
445 var records
= sm
.getSelection();
446 if(records
.length
> 0) {
447 // Find the smallest index of the selected rows.
448 var ltIndex
= me
.store
.indexOf(records
[0]);
449 Ext
.Array
.each(records
, function(record
) {
450 var index
= me
.store
.indexOf(record
);
454 // Calculate the index where to insert the rows.
455 var index
= ltIndex
+ records
.length
;
456 var count
= me
.store
.getCount() - 1;
459 me
.doMoveRows(records
, index
);
464 * Handler that is called when the 'Apply' button in the top toolbar
465 * is pressed. Override this method to customize the default behaviour.
466 * @param this The grid itself.
468 onApplyButton: function() {
469 // Nothing to do here
473 * Handler that is called when the 'Refresh' button in the top toolbar
474 * is pressed. Override this method to customize the default behaviour.
475 * @param this The grid itself.
477 onRefreshButton: function() {
482 * Move the given rows to the given index.
483 * @param records The records to move.
484 * @param index The index where to insert the rows to be moved.
486 doMoveRows: function(records
, index
) {
488 if(!Ext
.isNumber(index
))
490 records
= Ext
.Array
.from(records
);
491 me
.store
.suspendEvents();
492 Ext
.Array
.each(records
, function(record
) {
493 me
.store
.remove(record
);
494 me
.store
.insert(index
, record
);
496 me
.store
.resumeEvents();
497 me
.afterMoveRows(records
, index
);
498 me
.getView().refresh();
502 * Function that is called after the selected rows have been moved.
503 * Override this method to customize the default behaviour.
504 * @param records The records that have been move.
505 * @param index The index where the rows have been inserted.
507 afterMoveRows: function(records
, index
) {
508 var sm
= this.getSelectionModel();
513 * Handler that is called when the 'Delete' button in the top toolbar
516 onDeleteButton: function() {
518 var sm
= me
.getSelectionModel();
519 var records
= sm
.getSelection();
520 if(me
.deletionConfirmRequired
=== true) {
521 var msg
= _("Do you really want to delete the selected item(s)?");
522 OMV
.MessageBox
.show({
523 title
: _("Confirmation"),
525 buttons
: Ext
.Msg
.YESNO
,
526 fn: function(answer
) {
529 me
.startDeletion(records
);
532 icon
: Ext
.Msg
.QUESTION
535 me
.startDeletion(records
);
541 * Private method that is called when the deletion of the selected records
543 * @param records The records to delete.
545 startDeletion: function(records
) {
547 if(records
.length
<= 0)
549 // Store selected records in a local variable
552 count
: records
.length
554 // Get first record to be deleted
555 var record
= me
.delActionInfo
.records
.pop();
556 // Display progress dialog
557 OMV
.MessageBox
.progress("", me
.deletionWaitMsg
, "");
558 me
.updateDeletionProgress();
559 // Execute deletion function
560 me
.doDeletion(record
);
564 * The method that is called to delete a selected record. Override this
565 * method to customize the default behaviour. This is necessary in
568 doDeletion: function(record
) {
570 if(me
.mode
=== "local") {
571 // Remove record from store
572 me
.store
.remove(record
);
573 // Continue deletion process
574 me
.onDeletion(null, true, null);
579 * The method that is called by the 'doDeletion' method. The progress
580 * bar will be updated and the deletion progress will be continued if
581 * there are still records to delete.
583 onDeletion: function(id
, success
, response
) {
586 // Remove temporary local variables
587 delete me
.delActionInfo
;
588 // Hide progress dialog
589 OMV
.MessageBox
.hide();
590 // Display error message
591 OMV
.MessageBox
.error(null, response
);
593 if(me
.delActionInfo
.records
.length
> 0) {
594 var record
= me
.delActionInfo
.records
.pop();
595 // Update progress dialog
596 me
.updateDeletionProgress();
597 // Execute deletion function
598 me
.doDeletion(record
);
600 // Remove temporary local variables
601 delete me
.delActionInfo
;
602 // Update and hide progress dialog
603 OMV
.MessageBox
.updateProgress(1, _("100% completed ..."));
604 OMV
.MessageBox
.hide();
611 * Function that is called after the deletion has been successful finished.
613 afterDeletion: function() {
615 if(me
.mode
=== "remote") {
622 * Private helper function to update the progress dialog.
624 updateDeletionProgress: function() {
626 // Calculate percentage
627 var p
= (me
.delActionInfo
.count
- me
.delActionInfo
.records
.length
) /
628 me
.delActionInfo
.count
;
629 // Create message text
630 var text
= Math
.round(100 * p
) + _("% completed ...");
631 // Update progress dialog
632 OMV
.MessageBox
.updateProgress(p
, text
);
636 * Convenience function for setting the given toolbar button
638 * @param name The name of the toolbar button.
639 * @param disabled TRUE to disable the button, FALSE to enable.
640 * @return The button component, otherwise FALSE.
642 setToolbarButtonDisabled: function(name
, disabled
) {
645 var btnCtrl
= me
.queryById(me
.getId() + "-" + name
);
646 if(!Ext
.isEmpty(btnCtrl
) && btnCtrl
.isButton
)
647 result
= btnCtrl
.setDisabled(disabled
);
652 * Helper function to get the top toolbar object.
653 * @return The paging toolbar object or NULL.
655 getTopToolbar: function() {
656 return this.topToolbar
;
660 * Helper function to get the paging toolbar object.
661 * @return The paging toolbar object or NULL.
663 getPagingToolbar: function() {
664 return this.pagingToolbar
;
This page took 0.134319 seconds and 4 git commands to generate.