mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-25 02:50:08 +03:00
F #4393: Add new resize dialog, remove labels for disk actions. Include
better handling of units and cost for disks
This commit is contained in:
parent
b3b949434f
commit
bc45654203
@ -336,6 +336,7 @@ tabs:
|
||||
VM.terminate: true
|
||||
VM.terminate_hard: true
|
||||
VM.resize: true
|
||||
VM.disk_resize: true
|
||||
VM.attachdisk: true
|
||||
VM.detachdisk: true
|
||||
VM.disk_saveas: true
|
||||
|
@ -493,6 +493,12 @@ define(function(require) {
|
||||
var action_obj = params.data.extra_param;
|
||||
OpenNebulaAction.simple_action(params, RESOURCE, "resize", action_obj);
|
||||
},
|
||||
"disk_resize" : function(params) {
|
||||
var action_obj = params.data.extra_param;
|
||||
console.log(action_obj);
|
||||
console.log(RESOURCE);
|
||||
OpenNebulaAction.simple_action(params, RESOURCE, "disk_resize", action_obj);
|
||||
},
|
||||
"attachdisk" : function(params) {
|
||||
var action_obj = {"disk_template": params.data.extra_param};
|
||||
OpenNebulaAction.simple_action(params, RESOURCE, "attachdisk", action_obj);
|
||||
|
@ -30,6 +30,7 @@ define(function(require) {
|
||||
require('./vms-tab/dialogs/attach-disk'),
|
||||
require('./vms-tab/dialogs/disk-snapshot'),
|
||||
require('./vms-tab/dialogs/disk-saveas'),
|
||||
require('./vms-tab/dialogs/disk-resize'),
|
||||
require('./vms-tab/dialogs/attach-nic'),
|
||||
require('./vms-tab/dialogs/snapshot'),
|
||||
require('./vms-tab/dialogs/vnc'),
|
||||
|
@ -88,6 +88,7 @@ define(function(require) {
|
||||
"VM.attachnic": _commonActions.singleAction('attachnic'),
|
||||
"VM.detachnic": _commonActions.singleAction('detachnic'),
|
||||
"VM.resize": _commonActions.singleAction('resize'),
|
||||
"VM.disk_resize": _commonActions.singleAction('disk_resize'),
|
||||
"VM.snapshot_create": _commonActions.singleAction('snapshot_create'),
|
||||
"VM.snapshot_revert": _commonActions.singleAction('snapshot_revert'),
|
||||
"VM.snapshot_delete": _commonActions.singleAction('snapshot_delete'),
|
||||
|
145
src/sunstone/public/app/tabs/vms-tab/dialogs/disk-resize.js
Normal file
145
src/sunstone/public/app/tabs/vms-tab/dialogs/disk-resize.js
Normal file
@ -0,0 +1,145 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
|
||||
/* */
|
||||
/* Licensed under the Apache License, Version 2.0 (the "License"); you may */
|
||||
/* not use this file except in compliance with the License. You may obtain */
|
||||
/* a copy of the License at */
|
||||
/* */
|
||||
/* http://www.apache.org/licenses/LICENSE-2.0 */
|
||||
/* */
|
||||
/* Unless required by applicable law or agreed to in writing, software */
|
||||
/* distributed under the License is distributed on an "AS IS" BASIS, */
|
||||
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
|
||||
/* See the License for the specific language governing permissions and */
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
define(function(require) {
|
||||
/*
|
||||
DEPENDENCIES
|
||||
*/
|
||||
var Locale = require('utils/locale');
|
||||
var BaseDialog = require('utils/dialogs/dialog');
|
||||
var TemplateHTML = require('hbs!./disk-resize/html');
|
||||
var Sunstone = require('sunstone');
|
||||
var Tips = require('utils/tips');
|
||||
var RangeSlider = require('utils/range-slider');
|
||||
var Humanize = require('utils/humanize');
|
||||
|
||||
/*
|
||||
CONSTANTS
|
||||
*/
|
||||
|
||||
var DIALOG_ID = require('./disk-resize/dialogId');
|
||||
var TAB_ID = require('../tabId');
|
||||
|
||||
/*
|
||||
CONSTRUCTOR
|
||||
*/
|
||||
|
||||
function Dialog() {
|
||||
this.dialogId = DIALOG_ID;
|
||||
|
||||
BaseDialog.call(this);
|
||||
}
|
||||
|
||||
Dialog.DIALOG_ID = DIALOG_ID;
|
||||
Dialog.prototype = Object.create(BaseDialog.prototype);
|
||||
Dialog.prototype.constructor = Dialog;
|
||||
Dialog.prototype.html = _html;
|
||||
Dialog.prototype.onShow = _onShow;
|
||||
Dialog.prototype.setup = _setup;
|
||||
Dialog.prototype.setParams = _setParams;
|
||||
|
||||
return Dialog;
|
||||
|
||||
/*
|
||||
FUNCTION DEFINITIONS
|
||||
*/
|
||||
|
||||
function _html() {
|
||||
return TemplateHTML({
|
||||
'dialogId': this.dialogId
|
||||
});
|
||||
|
||||
}function convertCostNumber(number){
|
||||
if(number >= 1000000){
|
||||
number = (number/1000000).toFixed(2)
|
||||
return number.toString()+"M";
|
||||
}
|
||||
else if(number >= 1000){
|
||||
number = (number/1000).toFixed(2)
|
||||
return number.toString()+"K";
|
||||
}
|
||||
else if (number >= 0 && number < 1000)
|
||||
return number.toFixed(2);
|
||||
else
|
||||
return number;
|
||||
}
|
||||
|
||||
function _setup(context) {
|
||||
var that = this;
|
||||
Tips.setup(context);
|
||||
$( ".diskSlider", context).html(RangeSlider.html({
|
||||
min: that.diskSize,
|
||||
max: Humanize.sizeToMB("500GB"),
|
||||
initial: that.diskSize,
|
||||
name: "resize"
|
||||
}));
|
||||
$( ".uinput-slider-val",context).prop('type', 'text');
|
||||
$( ".uinput-slider-val",context).val(Humanize.size($( ".uinput-slider",context).val()));
|
||||
|
||||
$( ".uinput-slider", context).on("change", function(){
|
||||
$( ".uinput-slider-val",context).val(Humanize.size($( ".uinput-slider",context).val()));
|
||||
var cost = Humanize.sizeToMB($( ".uinput-slider",context).val())*that.diskCost;
|
||||
document.getElementById("new_cost_resize").textContent = Locale.tr("Cost")+": "+ convertCostNumber(cost);
|
||||
});
|
||||
|
||||
$( ".uinput-slider-val", context).on("change", function(){
|
||||
$( ".uinput-slider",context).val(Humanize.sizeToMB($( ".uinput-slider-val",context).val()));
|
||||
var cost = Humanize.sizeToMB($( ".uinput-slider",context).val())*that.diskCost;
|
||||
document.getElementById("new_cost_resize").textContent = Locale.tr("Cost")+": "+ convertCostNumber(cost);
|
||||
});
|
||||
|
||||
var cost = Humanize.sizeToMB($( ".uinput-slider",context).val())*this.diskCost;
|
||||
document.getElementById("new_cost_resize").textContent = Locale.tr("Cost")+": "+ convertCostNumber(cost);
|
||||
|
||||
|
||||
$('#' + DIALOG_ID + 'Form', context).submit(function() {
|
||||
var new_size = $( ".uinput-slider",context).val();
|
||||
var obj = {
|
||||
"vm_id": that.element.ID,
|
||||
"disk_id" : that.diskId,
|
||||
"new_size": new_size
|
||||
};
|
||||
|
||||
Sunstone.runAction('VM.disk_resize', that.element.ID, obj);
|
||||
|
||||
Sunstone.getDialog(DIALOG_ID).hide();
|
||||
Sunstone.getDialog(DIALOG_ID).reset();
|
||||
return false;
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function _onShow(context) {
|
||||
this.setNames( {tabId: TAB_ID} );
|
||||
$("#disk_id", context).val(this.diskId);
|
||||
$("#resize_disk", context).focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} params
|
||||
* - params.element : VM element
|
||||
* - params.diskId : Disk ID to save as
|
||||
* - params.snapshotId : Disk snapshot ID to save as. Can be undefined
|
||||
*/
|
||||
function _setParams(params) {
|
||||
this.element = params.element;
|
||||
this.diskId = params.diskId;
|
||||
this.diskSize = params.diskSize;
|
||||
this.diskCost = params.diskCost;
|
||||
}
|
||||
});
|
@ -0,0 +1,19 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
|
||||
/* */
|
||||
/* Licensed under the Apache License, Version 2.0 (the "License"); you may */
|
||||
/* not use this file except in compliance with the License. You may obtain */
|
||||
/* a copy of the License at */
|
||||
/* */
|
||||
/* http://www.apache.org/licenses/LICENSE-2.0 */
|
||||
/* */
|
||||
/* Unless required by applicable law or agreed to in writing, software */
|
||||
/* distributed under the License is distributed on an "AS IS" BASIS, */
|
||||
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
|
||||
/* See the License for the specific language governing permissions and */
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
define(function(require) {
|
||||
return 'diskResizeVMDialog';
|
||||
});
|
@ -0,0 +1,54 @@
|
||||
{{! -------------------------------------------------------------------------- }}
|
||||
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems }}
|
||||
{{! }}
|
||||
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may }}
|
||||
{{! not use this file except in compliance with the License. You may obtain }}
|
||||
{{! a copy of the License at }}
|
||||
{{! }}
|
||||
{{! http://www.apache.org/licenses/LICENSE-2.0 }}
|
||||
{{! }}
|
||||
{{! Unless required by applicable law or agreed to in writing, software }}
|
||||
{{! distributed under the License is distributed on an "AS IS" BASIS, }}
|
||||
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. }}
|
||||
{{! See the License for the specific language governing permissions and }}
|
||||
{{! limitations under the License. }}
|
||||
{{! -------------------------------------------------------------------------- }}
|
||||
|
||||
<div id="{{dialogId}}" class="reveal small" data-reveal>
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<h3 class="subheader" id="">{{tr "Disk Resize"}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-resources-header"></div>
|
||||
<div class="reveal-body">
|
||||
<form id="{{dialogId}}Form" action="">
|
||||
<div class="row">
|
||||
<div class="large-6 columns">
|
||||
<label for="disk_id">{{tr "Disk ID"}}</label>
|
||||
<input style="border-style: inset; background-color: lightgrey" type="text" name="disk_id" id="disk_id" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row disksContext">
|
||||
<div class="large-12 columns">
|
||||
<label for="resize_disk">{{tr "New size"}}</label>
|
||||
<div class="large-12 columns diskSlider" id="diskSlider_resize"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="large-6 columns">
|
||||
<span>
|
||||
<span id="new_cost_resize">{{tr "Cost"}}:</span>
|
||||
<small>{{tr "COST"}} / {{tr "MONTH"}}</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_buttons">
|
||||
<button class="button radius right success" type="submit">{{tr "Resize"}}</button>
|
||||
</div>
|
||||
<button class="close-button" data-close aria-label="{{tr "Close modal"}}" type="button">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
@ -42,6 +42,7 @@ define(function(require) {
|
||||
var DISK_SNAPSHOT_DIALOG_ID = require('../dialogs/disk-snapshot/dialogId');
|
||||
var DISK_SAVEAS_DIALOG_ID = require('../dialogs/disk-saveas/dialogId');
|
||||
var CONFIRM_DIALOG_ID = require('utils/dialogs/generic-confirm/dialogId');
|
||||
var DISK_RESIZE_DIALOG_ID = require('../dialogs/disk-resize/dialogId');
|
||||
var RESOURCE = "VM"
|
||||
var XML_ROOT = "VM"
|
||||
|
||||
@ -287,7 +288,7 @@ define(function(require) {
|
||||
if (disk.IMAGE_ID &&
|
||||
StateActions.enabledStateAction("VM.disk_saveas", that.element.STATE, that.element.LCM_STATE)) {
|
||||
actions += '<a href="VM.disk_saveas" class="disk_saveas nowrap" >\
|
||||
<i class="fa fa-save fa-fw"></i>' + Locale.tr("Save as") + '</a>  ';
|
||||
<i class="fa fa-save fa-fw" title="Saveas"></i></a>  ';//+ Locale.tr("Save as") + ';'
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,16 +296,23 @@ define(function(require) {
|
||||
if (Config.isTabActionEnabled("vms-tab", "VM.detachdisk")) {
|
||||
if (StateActions.enabledStateAction("VM.detachdisk", that.element.STATE, that.element.LCM_STATE) && !disk.CONTEXT) {
|
||||
actions += ('<a href="VM.detachdisk" class="detachdisk nowrap" >\
|
||||
<i class="fa fa-times fa-fw"></i>' + Locale.tr("Detach") +
|
||||
'</a>  ');
|
||||
<i class="fa fa-times fa-fw" title="Detach"></i></a>  ');// + Locale.tr("Detach") +
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if (Config.isTabActionEnabled("vms-tab", "VM.disk_snapshot_create")) {
|
||||
if (StateActions.enabledStateAction("VM.disk_snapshot_create", that.element.STATE, that.element.LCM_STATE) && disk.IMAGE_ID) {
|
||||
actions += ('<a href="VM.disk_snapshot_create" class="disk_snapshot_create nowrap" >\
|
||||
<i class="fa fa-camera fa-fw"></i>' + Locale.tr("Snapshot") +
|
||||
'</a>');
|
||||
<i class="fa fa-camera fa-fw" title="Snapshot"></i></a>  ');//+ Locale.tr("Snapshot") +
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if (Config.isTabActionEnabled("vms-tab", "VM.resize")) {
|
||||
if (StateActions.enabledStateAction("VM.resize", that.element.STATE, that.element.LCM_STATE)) {
|
||||
actions += ('<a class="disk_resize nowrap" >\
|
||||
<i class="fa fa-expand fa-fw" title="Resize"></i></a>');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -471,9 +479,16 @@ define(function(require) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
context.off("change", ".snapshot_check_item");
|
||||
context.on("change", ".snapshot_check_item", function() {
|
||||
var snapshotsSection = $(this).closest('.snapshots');
|
||||
if(that.element.STATE == "3"){
|
||||
$(".disk_snapshot_revert", snapshotsSection).hide();
|
||||
}
|
||||
else{
|
||||
$(".disk_snapshot_revert", snapshotsSection).show();
|
||||
}
|
||||
|
||||
// Unselect other check inputs
|
||||
var checked = $(this).is(':checked');
|
||||
@ -561,6 +576,24 @@ define(function(require) {
|
||||
return false;
|
||||
});
|
||||
}
|
||||
if (Config.isTabActionEnabled("vms-tab", "VM.disk_snapshot_delete")) {
|
||||
context.off('click', '.disk_sresize');
|
||||
context.on('click', '.disk_resize', function() {
|
||||
var disk_id = $(this).parents('tr').attr('disk_id');
|
||||
var disk_size = that.element.TEMPLATE.DISK.SIZE*1024; //to MB
|
||||
var dialog = Sunstone.getDialog(DISK_RESIZE_DIALOG_ID);
|
||||
dialog.setParams(
|
||||
{ element: that.element,
|
||||
diskId: disk_id,
|
||||
diskSize: disk_size,
|
||||
diskCost: that.element.TEMPLATE.DISK_COST
|
||||
});
|
||||
|
||||
dialog.reset();
|
||||
dialog.show();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
Tree.setup(context);
|
||||
}
|
||||
|
@ -27,6 +27,7 @@ define(function(require) {
|
||||
'sizeFromB': _sizeFromB,
|
||||
'sizeFromKB': _sizeFromKB,
|
||||
'sizeFromMB': _sizeFromMB,
|
||||
'sizeToMB': _sizeToMB,
|
||||
'prettyDuration': _prettyDuration,
|
||||
'prettyTime': _prettyTime,
|
||||
'prettyTimeAxis': _prettyTimeAxis,
|
||||
@ -95,6 +96,19 @@ define(function(require) {
|
||||
return st;
|
||||
}
|
||||
|
||||
function _sizeToMB(value){
|
||||
var split = value.split("B");
|
||||
var factor = split[0].slice(-1);
|
||||
var number = parseFloat(split[0]);
|
||||
if(factor=="K")
|
||||
number = number * 1024;
|
||||
else if(factor=="G")
|
||||
number = number * 1024 * 1024;
|
||||
else if(factor=="T")
|
||||
number = number * 1024 * 1024 * 1024;
|
||||
return number;
|
||||
}
|
||||
|
||||
function _prettyDuration(duration) {
|
||||
var days = Math.floor(duration / 86400);
|
||||
duration -= days * 86400;
|
||||
|
Loading…
x
Reference in New Issue
Block a user