mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
397 lines
16 KiB
JavaScript
397 lines
16 KiB
JavaScript
// Licensed to the Apache Software Foundation (ASF) under one
|
|
// or more contributor license agreements. See the NOTICE file
|
|
// distributed with this work for additional information
|
|
// regarding copyright ownership. The ASF licenses this file
|
|
// to you 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.
|
|
|
|
(function($, cloudStack) {
|
|
cloudStack.uiCustom.autoscaler = function(args) {
|
|
// Place outer args here as local variables
|
|
// i.e, -- var dataProvider = args.dataProvider
|
|
var forms = $.extend(true, {}, args.forms);
|
|
var topfields = forms.topFields;
|
|
var bottomfields = forms.bottomFields;
|
|
var scaleuppolicy = forms.scaleUpPolicy;
|
|
var scaledownpolicy = forms.scaleDownPolicy;
|
|
var dataProvider = cloudStack.autoscaler.dataProvider;
|
|
var actions = cloudStack.autoscaler.autoscaleActions;
|
|
var actionFilter = cloudStack.autoscaler.actionFilter;
|
|
|
|
return function(args) {
|
|
var context = args.data ?
|
|
$.extend(true, {}, args.context, {
|
|
lbRules: [args.data]
|
|
}) : args.context;
|
|
var formData = args.formData;
|
|
var $autoscalerDialog = $('<div>').addClass('autoscaler');
|
|
var $topFields = $('<div>').addClass('field-group top-fields');
|
|
var $bottomFields = $('<div>').addClass('field-group bottom-fields');
|
|
var $scaleUpPolicy = $('<div>').addClass('scale-up-policy');
|
|
var $slideScaleUp = $('<div></div>').addClass('expand');
|
|
var $hideScaleUp = $('<div></div>').addClass('hide');
|
|
var $scaleUpLabel= $('<div>Show</div>').addClass('slide-label');
|
|
var $scaleUpHideLabel=$('<div>Hide</div>').addClass('slide-label');
|
|
var $scaleDownHideLabel=$('<div>Hide</div>').addClass('slide-label');
|
|
var $scaleDownLabel=$('<div>Show</div>').addClass('slide-label');
|
|
var $slideScaleDown = $('<div></div>').addClass('expand');
|
|
var $hideScaleDown = $('<div></div>').addClass('hide');
|
|
var $scaleUpDivider = $('<hr></hr>').addClass('policy-divider');
|
|
var $scaleDownDivider = $('<hr></hr>').addClass('policy-divider');
|
|
var $bottomFieldDivider = $('<hr></hr>').addClass('policy-divider');
|
|
var $scaleDownPolicy = $('<div>').addClass('scale-down-policy');
|
|
var $scaleUpPolicyTitle = $('<div>').addClass('scale-up-policy-title')
|
|
.html("Scale Up Policy");
|
|
var $scaleDownPolicyTitle = $('<div>').addClass('scale-down-policy-title')
|
|
.html("Scale Down Policy");
|
|
var topFieldForm, $topFieldForm,
|
|
bottomFieldForm, $bottomFieldForm,
|
|
scaleUpPolicyTitleForm, $scaleUpPolicyTitleForm,
|
|
scaleDownPolicyTitleForm, $scaleDownPolicyTitleForm,
|
|
scaleUpPolicyForm, scaleDownPolicyForm;
|
|
|
|
var renderActions = function(args) {
|
|
var targetActionFilter = args.actionFilter ? args.actionFilter : actionFilter;
|
|
var data = args.data;
|
|
var context = args.context;
|
|
var $actions = $('<div>').addClass('detail-group');
|
|
var $actionsTable = $('<table>').append('<tr>');
|
|
var $detailActions = $('<td>').addClass('detail-actions');
|
|
var $buttons = $('<div>').addClass('buttons');
|
|
var visibleActions = targetActionFilter ?
|
|
targetActionFilter({
|
|
context: $.extend(true, {}, context, {
|
|
originalAutoscaleData: data ? [data] : null
|
|
})
|
|
}) :
|
|
$.map(actions, function(value, key) { return key; });
|
|
|
|
$detailActions.append($buttons);
|
|
$actionsTable.find('tr').append($detailActions);
|
|
$actions.append($actionsTable);
|
|
|
|
$(visibleActions).map(function(index, actionID) {
|
|
var action = actions[actionID];
|
|
var label = _l(action.label);
|
|
var $action = $('<div>').addClass('action').addClass(actionID);
|
|
var $icon = $('<a>')
|
|
.attr({ href: '#', title: label })
|
|
.append($('<span>').addClass('icon'));
|
|
|
|
if (visibleActions.length == 1) $action.addClass('single');
|
|
else if (!index) $action.addClass('first');
|
|
else if (index == visibleActions.length - 1) $action.addClass('last');
|
|
|
|
// Perform action event
|
|
$action.click(function() {
|
|
var $loading = $('<div>').addClass('loading-overlay').appendTo($autoscalerDialog);
|
|
var success = function(args) {
|
|
$loading.remove();
|
|
cloudStack.dialog.notice({
|
|
message: _l('label.task.completed') + ': ' + label
|
|
});
|
|
|
|
// Reload actions
|
|
if(data != null) { //data is originalAutoscaleData in \ui\scripts\autoscaler.js
|
|
data['afterActionIsComplete'] = args.data;
|
|
}
|
|
|
|
var $newActions = renderActions({
|
|
data: data ? $.extend(data, args.data) : args.data,
|
|
actionFilter: args.actionFilter,
|
|
context: context
|
|
});
|
|
|
|
$actions.after($newActions);
|
|
$actions.remove();
|
|
};
|
|
var error = function(message) {
|
|
$loading.remove();
|
|
cloudStack.dialog.notice({ message: message });
|
|
};
|
|
|
|
action.action({
|
|
context: {
|
|
originalAutoscaleData: args.data
|
|
},
|
|
response: {
|
|
success: function(args) {
|
|
var notification = $.extend(args.notification, {
|
|
_custom: args._custom,
|
|
desc: label
|
|
});
|
|
|
|
cloudStack.ui.notifications.add(
|
|
notification,
|
|
success, {},
|
|
error, {}
|
|
);
|
|
},
|
|
error: error
|
|
}
|
|
});
|
|
});
|
|
|
|
$action.append($icon);
|
|
$action.appendTo($buttons);
|
|
});
|
|
|
|
if (!visibleActions || !visibleActions.length) $actions.hide();
|
|
|
|
return $actions;
|
|
};
|
|
|
|
var renderDialogContent = function(args) {
|
|
var data = args.data ? args.data : {};
|
|
|
|
// Setup default values, in case where existing data is present
|
|
var setDefaultFields = function(fieldID, field) {
|
|
var fieldData = data[fieldID];
|
|
|
|
if (fieldData && !field.isBoolean) {
|
|
field.defaultValue = fieldData;
|
|
} else {
|
|
field.isChecked = fieldData;
|
|
}
|
|
};
|
|
$.each(topfields, setDefaultFields);
|
|
$.each(bottomfields, setDefaultFields);
|
|
|
|
$.extend(context, {
|
|
originalAutoscaleData: args.data
|
|
});
|
|
|
|
// Create and append top fields
|
|
// -- uses create form to generate fields
|
|
topFieldForm = cloudStack.dialog.createForm({
|
|
context: context,
|
|
noDialog: true, // Don't render a dialog, just return $formContainer
|
|
form: {
|
|
title: '',
|
|
fields: topfields
|
|
}
|
|
});
|
|
$topFieldForm = topFieldForm.$formContainer;
|
|
$topFieldForm.appendTo($topFields);
|
|
|
|
scaleUpPolicyTitleForm = cloudStack.dialog.createForm({
|
|
context: context,
|
|
noDialog: true,
|
|
form: {
|
|
title: '',
|
|
fields: {
|
|
scaleUpDuration: { label: 'Duration(in sec)', validation: { required: true } }
|
|
}
|
|
}
|
|
});
|
|
$scaleUpPolicyTitleForm = scaleUpPolicyTitleForm.$formContainer;
|
|
$scaleUpPolicyTitleForm.appendTo($scaleUpPolicyTitle);
|
|
|
|
|
|
scaleDownPolicyTitleForm = cloudStack.dialog.createForm({
|
|
context: context,
|
|
noDialog: true,
|
|
form: {
|
|
title: '',
|
|
fields: {
|
|
scaleDownDuration: { label: 'Duration(in sec)', validation: { required: true } }
|
|
}
|
|
}
|
|
});
|
|
$scaleDownPolicyTitleForm = scaleDownPolicyTitleForm.$formContainer;
|
|
$scaleDownPolicyTitleForm.appendTo($scaleDownPolicyTitle);
|
|
|
|
// Make multi-edits
|
|
//
|
|
// Scale up policy
|
|
if (data.scaleUpPolicy && $.isArray(data.scaleUpPolicy.conditions)) {
|
|
$autoscalerDialog.data('autoscaler-scale-up-data',
|
|
data.scaleUpPolicy.conditions);
|
|
}
|
|
|
|
if (data.scaleUpPolicy && data.scaleUpPolicy.duration) {
|
|
$scaleUpPolicyTitleForm.find('input[name=scaleUpDuration]').val(
|
|
data.scaleUpPolicy.duration
|
|
);
|
|
}
|
|
|
|
scaleuppolicy.context = context;
|
|
scaleUpPolicyForm = $scaleUpPolicy.multiEdit(scaleuppolicy);
|
|
|
|
// Scale down policy
|
|
if (data.scaleDownPolicy && $.isArray(data.scaleDownPolicy.conditions)) {
|
|
$autoscalerDialog.data('autoscaler-scale-down-data',
|
|
data.scaleDownPolicy.conditions);
|
|
}
|
|
|
|
if (data.scaleDownPolicy && data.scaleDownPolicy.duration) {
|
|
$scaleDownPolicyTitleForm.find('input[name=scaleDownDuration]').val(
|
|
data.scaleDownPolicy.duration
|
|
);
|
|
}
|
|
|
|
scaledownpolicy.context = context;
|
|
scaleDownPolicyForm = $scaleDownPolicy.multiEdit(scaledownpolicy);
|
|
|
|
// Create and append bottom fields
|
|
bottomFieldForm = cloudStack.dialog.createForm({
|
|
context: context,
|
|
noDialog: true, // Don't render a dialog, just return $formContainer
|
|
form: {
|
|
title: '',
|
|
fields: bottomfields
|
|
}
|
|
});
|
|
$bottomFieldForm = bottomFieldForm.$formContainer;
|
|
$bottomFieldForm.appendTo($bottomFields);
|
|
|
|
// Append main div elements
|
|
$autoscalerDialog.append(
|
|
$topFields,
|
|
$scaleUpPolicyTitle,
|
|
$scaleUpPolicy,
|
|
$scaleDownPolicyTitle,
|
|
$scaleDownPolicy,
|
|
$bottomFields
|
|
);
|
|
|
|
// Render dialog
|
|
//$autoscalerDialog.find('.form-item[rel=templateNames] label').hide();
|
|
/* Duration Fields*/
|
|
//$('div.ui-dialog div.autoscaler').find('div.scale-up-policy-title').append("<br></br>").append($inputLabel = $('<label>').html('Duration').attr({left:'200'})).append($('<input>').attr({ name: 'username' }));
|
|
//$('div.ui-dialog div.autoscaler').find('div.scale-down-policy-title').append("<br></br>").append($inputLabel = $('<label>').html('Duration').attr({left:'200'})).append($('<input>').attr({ name: 'username' }));
|
|
|
|
/*Dividers*/
|
|
$autoscalerDialog.find('div.scale-up-policy-title').prepend($scaleUpDivider);
|
|
$autoscalerDialog.find('div.scale-down-policy-title').prepend($scaleDownDivider);
|
|
$autoscalerDialog.find('div.field-group.bottom-fields').prepend($bottomFieldDivider);
|
|
|
|
/* Hide effects for multi-edit table*/
|
|
$autoscalerDialog.find('div.scale-up-policy').prepend($hideScaleUp);
|
|
$autoscalerDialog.find('div.scale-down-policy ').prepend($hideScaleDown);
|
|
$autoscalerDialog.find('div.scale-up-policy').prepend($scaleUpHideLabel);
|
|
$autoscalerDialog.find('div.scale-down-policy').prepend($scaleDownHideLabel);
|
|
|
|
/*Toggling the labels and data-item table - SCALE UP POLICY*/
|
|
$autoscalerDialog.find('div.scale-up-policy div.hide').click(function() {
|
|
$autoscalerDialog.find('div.scale-up-policy div.multi-edit div.data-item').slideToggle();
|
|
$scaleUpLabel = $autoscalerDialog.find('div.scale-up-policy div.slide-label').replaceWith($scaleUpLabel);
|
|
});
|
|
|
|
/*Toggling the images */
|
|
$('div.ui-dialog div.autoscaler div.scale-up-policy div.hide').click(function() {
|
|
$(this).toggleClass('expand hide');
|
|
});
|
|
|
|
$('div.ui-dialog div.autoscaler div.scale-down-policy div.hide').click(function() {
|
|
$(this).toggleClass('expand hide');
|
|
});
|
|
|
|
/*Toggling the labels and data-item table - SCALE DOWN POLICY*/
|
|
$('div.ui-dialog div.autoscaler div.scale-down-policy div.hide').click(function() {
|
|
$('div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-item').slideToggle();
|
|
$scaleDownLabel = $('div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label').replaceWith($scaleDownLabel);
|
|
});
|
|
|
|
$('div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.expand').click(function() { $('div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-item').slideToggle(); });
|
|
|
|
$autoscalerDialog.dialog('option', 'position', 'center');
|
|
$autoscalerDialog.dialog('option', 'height', 'auto');
|
|
|
|
// Setup actions
|
|
renderActions(args).prependTo($autoscalerDialog);
|
|
};
|
|
|
|
var $loading = $('<div>').addClass('loading-overlay').appendTo($autoscalerDialog);
|
|
$autoscalerDialog.dialog({
|
|
title: 'AutoScale Configuration Wizard',
|
|
width: 825,
|
|
height: 600,
|
|
draggable: true,
|
|
closeonEscape: false,
|
|
overflow:'auto',
|
|
open:function() {
|
|
$("button").each(function(){
|
|
$(this).attr("style", "left: 600px; position: relative; margin-right: 5px; ");
|
|
});
|
|
},
|
|
buttons: [
|
|
{
|
|
text: _l('label.cancel'),
|
|
'class': 'cancel',
|
|
click: function() {
|
|
$autoscalerDialog.dialog('destroy');
|
|
$('.overlay').remove();
|
|
}
|
|
},
|
|
{
|
|
text: _l('Apply'),
|
|
'class': 'ok',
|
|
click: function() {
|
|
var data = cloudStack.serializeForm($('.ui-dialog .autoscaler form'));
|
|
|
|
$loading.appendTo($autoscalerDialog);
|
|
cloudStack.autoscaler.actions.apply({
|
|
formData: formData,
|
|
context: context,
|
|
data: data,
|
|
response: {
|
|
success: function() {
|
|
$loading.remove();
|
|
$autoscalerDialog.dialog('destroy');
|
|
$autoscalerDialog.closest(':ui-dialog').remove();
|
|
$('.overlay').remove();
|
|
cloudStack.dialog.notice({
|
|
message: 'Autoscale configured successfully.'
|
|
});
|
|
},
|
|
error: function(message) {
|
|
cloudStack.dialog.notice({ message: message });
|
|
$loading.remove();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
]
|
|
}).closest('.ui-dialog').overlay();
|
|
|
|
dataProvider({
|
|
context: context,
|
|
response: {
|
|
success: function(args) {
|
|
$loading.remove();
|
|
renderDialogContent(args);
|
|
|
|
if (args.data == null) { //from a new LB rule
|
|
$autoscalerDialog.find('select[name=serviceOfferingId]').removeAttr('disabled');
|
|
$autoscalerDialog.find('select[name=securityGroups]').removeAttr('disabled');
|
|
$autoscalerDialog.find('select[name=diskOfferingId]').removeAttr('disabled');
|
|
}
|
|
else { //from an existing LB rule
|
|
$autoscalerDialog.find('select[name=serviceOfferingId]').attr('disabled', true);
|
|
$autoscalerDialog.find('select[name=securityGroups]').attr('disabled', true);
|
|
$autoscalerDialog.find('select[name=diskOfferingId]').attr('disabled', true);
|
|
|
|
if(args.data.isAdvanced != null) {
|
|
$autoscalerDialog.find('input[type=checkbox]').trigger('click');
|
|
$autoscalerDialog.find('input[type=checkbox]').attr('checked', 'checked');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
};
|
|
}(jQuery, cloudStack));
|