mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
Health-Check UI development
This commit is contained in:
Pranav Saxena
parent
2a337d5b01
commit
2094ee682e
@ -1645,6 +1645,7 @@ under the License.
|
||||
<script type="text/javascript" src="scripts/cloudStack.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/lbStickyPolicy.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/autoscaler.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/healthCheck.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/autoscaler.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/zoneChart.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/dashboard.js?t=<%=now%>"></script>
|
||||
|
||||
@ -2786,6 +2786,17 @@
|
||||
action: cloudStack.lbStickyPolicy.dialog()
|
||||
}
|
||||
},
|
||||
|
||||
'health-check':{
|
||||
label:'Health Check',
|
||||
custom:{
|
||||
requireValidation: true ,
|
||||
buttonLabel:'Configure',
|
||||
action:cloudStack.uiCustom.healthCheck()
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
'autoScale': {
|
||||
label: 'AutoScale',
|
||||
custom: {
|
||||
|
||||
318
ui/scripts/ui-custom/healthCheck.js
Normal file
318
ui/scripts/ui-custom/healthCheck.js
Normal file
@ -0,0 +1,318 @@
|
||||
// Copyright 2012 Citrix Systems, Inc. Licensed under the
|
||||
// Apache License, Version 2.0 (the "License"); you may not use this
|
||||
// file except in compliance with the License. Citrix Systems, Inc.
|
||||
// reserves all rights not expressly granted by 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.healthCheck = function(args) {
|
||||
|
||||
// Place outer args here as local variables
|
||||
// i.e, -- var dataProvider = args.dataProvider
|
||||
|
||||
return function(args){
|
||||
if(args.context.multiRules == undefined) { //LB rule is not created yet
|
||||
cloudStack.dialog.notice({ message: _l('Health Check can only be configured on a created LB rule') });
|
||||
return;
|
||||
}
|
||||
|
||||
var formData = args.formData;
|
||||
var forms = $.extend(true, {}, args.forms);
|
||||
var topFieldForm, bottomFieldForm , $topFieldForm , $bottomFieldForm;
|
||||
var topfields = forms.topFields;
|
||||
|
||||
var $healthCheckDesc = $('<div>Your load balancer will automatically perform health checks on your cloudstack instances and only route traffic to instances that pass the health check </div>').addClass('health-check-description');
|
||||
var $healthCheckConfigTitle = $('<div><br><br>Configuration Options :</div>').addClass('health-check-config-title');
|
||||
var $healthCheckAdvancedTitle = $('<div><br><br> Advanced Options : </div>').addClass('health-check-advanced-title');
|
||||
|
||||
var $healthCheckDialog = $('<div>').addClass('health-check');
|
||||
$healthCheckDialog.append($healthCheckDesc);
|
||||
$healthCheckDialog.append($healthCheckConfigTitle);
|
||||
var $loadingOnDialog = $('<div>').addClass('loading-overlay');
|
||||
|
||||
var policyObj = null;
|
||||
var pingpath1 = '/';
|
||||
var responsetimeout1 = '2';
|
||||
var healthinterval1 = '5';
|
||||
var healthythreshold1 = '2';
|
||||
var unhealthythreshold1 = '1';
|
||||
|
||||
$.ajax({
|
||||
url: createURL('listLBHealthCheckPolicies'),
|
||||
data: {
|
||||
lbruleid: args.context.multiRules[0].id
|
||||
},
|
||||
async: false,
|
||||
success: function(json) {
|
||||
if(json.listlbhealtcheckpoliciesresponse.healthcheckpolicies[0].healthcheckpolicy[0] != undefined) {
|
||||
policyObj = json.listlbhealtcheckpoliciesresponse.healthcheckpolicies[0].healthcheckpolicy[0];
|
||||
pingpath1 = policyObj.pingpath; //API bug: API doesn't return it
|
||||
responsetimeout1 = policyObj.responsetime;
|
||||
healthinterval1 = policyObj.healthcheckinterval;
|
||||
healthythreshold1 = policyObj.healthcheckthresshold;
|
||||
unhealthythreshold1 = policyObj.unhealthcheckthresshold;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
topFieldForm = cloudStack.dialog.createForm({
|
||||
context: args.context,
|
||||
noDialog: true, // Don't render a dialog, just return $formContainer
|
||||
form: {
|
||||
title: '',
|
||||
fields:{
|
||||
pingpath: {label: 'Ping Path', docID:'helpAccountUsername' , validation: {required: false}, defaultValue: pingpath1}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$topFieldForm = topFieldForm.$formContainer;
|
||||
$topFieldForm.appendTo($healthCheckDialog);
|
||||
|
||||
$healthCheckDialog.append($healthCheckAdvancedTitle);
|
||||
|
||||
bottomFieldForm = cloudStack.dialog.createForm ({
|
||||
context:args.context,
|
||||
noDialog:true,
|
||||
form:{
|
||||
title:'',
|
||||
fields:{
|
||||
responsetimeout: {label: 'Response Timeout (in sec)' , validation:{required:false}, defaultValue: responsetimeout1},
|
||||
healthinterval: {label: 'Health Check Interval (in sec)', validation:{required:false}, defaultValue: healthinterval1},
|
||||
healthythreshold: {label: 'Healthy Threshold', validation: {required:false}, defaultValue: healthythreshold1},
|
||||
unhealthythreshold: {label: 'Unhealthy Threshold' , validation: { required:false}, defaultValue: unhealthythreshold1}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$bottomFieldForm = bottomFieldForm.$formContainer;
|
||||
$bottomFieldForm.appendTo($healthCheckDialog);
|
||||
|
||||
|
||||
var buttons = [
|
||||
{
|
||||
text: _l('label.cancel'),
|
||||
'class': 'cancel',
|
||||
click: function() {
|
||||
$healthCheckDialog.dialog('destroy');
|
||||
$('.overlay').remove();
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
if(policyObj == null) { //policy is not created yet
|
||||
buttons.push(
|
||||
{
|
||||
text: _l('Create'),
|
||||
'class': 'ok',
|
||||
click: function() {
|
||||
$loadingOnDialog.appendTo($healthCheckDialog);
|
||||
var formData = cloudStack.serializeForm($healthCheckDialog.find('form'));
|
||||
var data = {
|
||||
lbruleid: args.context.multiRules[0].id,
|
||||
pingpath: formData.pingpath,
|
||||
responsetimeout: formData.responsetimeout,
|
||||
intervaltime: formData.healthinterval,
|
||||
healthythreshold: formData.healthythreshold,
|
||||
unhealthythreshold: formData.unhealthythreshold
|
||||
};
|
||||
|
||||
var lbRuleData = {
|
||||
|
||||
algorithm:args.context.multiRules[0].algorithm,
|
||||
name:args.context.multiRules[0].name,
|
||||
publicport:args.context.multiRules[0].publicport,
|
||||
privateport:args.context.multiRules[0].privateport
|
||||
|
||||
|
||||
}
|
||||
|
||||
if(args.context.multiRules[0] != null)
|
||||
$.extend(data , lbRuleData);
|
||||
|
||||
$.ajax({
|
||||
url: createURL('createLBHealthCheckPolicy'),
|
||||
data: data,
|
||||
success: function(json) {
|
||||
var jobId = json.createlbhealthcheckpolicyresponse.jobid;
|
||||
var createLBHealthCheckPolicyIntervalId = setInterval(function(){
|
||||
$.ajax({
|
||||
url: createURL('queryAsyncJobResult'),
|
||||
data: {
|
||||
jobid: jobId
|
||||
},
|
||||
success: function(json) {
|
||||
var result = json.queryasyncjobresultresponse;
|
||||
if (result.jobstatus == 0) {
|
||||
return; //Job has not completed
|
||||
}
|
||||
else {
|
||||
clearInterval(createLBHealthCheckPolicyIntervalId);
|
||||
|
||||
if (result.jobstatus == 1) {
|
||||
cloudStack.dialog.notice({ message: _l('Health Check Policy has been created') });
|
||||
$loadingOnDialog.remove();
|
||||
$healthCheckDialog.dialog('destroy');
|
||||
$('.overlay').remove();
|
||||
}
|
||||
else if (result.jobstatus == 2) {
|
||||
cloudStack.dialog.notice({ message: _s(result.jobresult.errortext) });
|
||||
$loadingOnDialog.remove();
|
||||
$healthCheckDialog.dialog('destroy');
|
||||
$('.overlay').remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}, g_queryAsyncJobResultInterval);
|
||||
},
|
||||
error:function(XMLHttpResponse){
|
||||
args.response.error(parseXMLHttpResponse(XMLHttpResponse));
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
else { //policy exists already
|
||||
buttons.push(
|
||||
//Update Button (begin) - call delete API first, then create API
|
||||
{
|
||||
text: _l('Update'),
|
||||
'class': 'ok',
|
||||
click: function() {
|
||||
$loadingOnDialog.appendTo($healthCheckDialog);
|
||||
|
||||
$.ajax({
|
||||
url: createURL('deleteLBHealthCheckPolicy'),
|
||||
data: {
|
||||
id : policyObj.id
|
||||
},
|
||||
success: function(json) {
|
||||
var jobId = json.deletelbhealthcheckpolicyresponse.jobid;
|
||||
var deleteLBHealthCheckPolicyIntervalId = setInterval(function(){
|
||||
$.ajax({
|
||||
url: createURL('queryAsyncJobResult'),
|
||||
data: {
|
||||
jobid: jobId
|
||||
},
|
||||
success: function(json) {
|
||||
var result = json.queryasyncjobresultresponse;
|
||||
if (result.jobstatus == 0) {
|
||||
return; //Job has not completed
|
||||
}
|
||||
else {
|
||||
clearInterval(deleteLBHealthCheckPolicyIntervalId);
|
||||
|
||||
if (result.jobstatus == 1) {
|
||||
var formData = cloudStack.serializeForm($healthCheckDialog.find('form'));
|
||||
var data = {
|
||||
lbruleid: args.context.multiRules[0].id,
|
||||
pingpath: formData.pingpath,
|
||||
responsetimeout: formData.responsetimeout,
|
||||
intervaltime: formData.healthinterval,
|
||||
healthythreshold: formData.healthythreshold,
|
||||
unhealthythreshold: formData.unhealthythreshold
|
||||
};
|
||||
|
||||
var lbRuleData = {
|
||||
|
||||
algorithm:args.context.multiRules[0].algorithm,
|
||||
name:args.context.multiRules[0].name,
|
||||
publicport:args.context.multiRules[0].publicport,
|
||||
privateport:args.context.multiRules[0].privateport
|
||||
|
||||
|
||||
}
|
||||
|
||||
if(args.context.multiRules[0] != null)
|
||||
$.extend(data , lbRuleData);
|
||||
|
||||
$.ajax({
|
||||
url: createURL('createLBHealthCheckPolicy'),
|
||||
data: data,
|
||||
success: function(json) {
|
||||
var jobId = json.createlbhealthcheckpolicyresponse.jobid;
|
||||
var createLBHealthCheckPolicyIntervalId = setInterval(function(){
|
||||
$.ajax({
|
||||
url: createURL('queryAsyncJobResult'),
|
||||
data: {
|
||||
jobid: jobId
|
||||
},
|
||||
success: function(json) {
|
||||
var result = json.queryasyncjobresultresponse;
|
||||
if (result.jobstatus == 0) {
|
||||
return; //Job has not completed
|
||||
}
|
||||
else {
|
||||
clearInterval(createLBHealthCheckPolicyIntervalId);
|
||||
|
||||
if (result.jobstatus == 1) {
|
||||
cloudStack.dialog.notice({ message: _l('Health Check Policy has been updated') });
|
||||
$loadingOnDialog.remove();
|
||||
$healthCheckDialog.dialog('destroy');
|
||||
$('.overlay').remove();
|
||||
}
|
||||
else if (result.jobstatus == 2) {
|
||||
cloudStack.dialog.notice({ message: _s(result.jobresult.errortext) });
|
||||
$loadingOnDialog.remove();
|
||||
$healthCheckDialog.dialog('destroy');
|
||||
$('.overlay').remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}, g_queryAsyncJobResultInterval);
|
||||
},
|
||||
error:function(json){
|
||||
args.response.error(parseXMLHttpResponse(json));
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (result.jobstatus == 2) {
|
||||
cloudStack.dialog.notice({ message: _s(result.jobresult.errortext) });
|
||||
$loadingOnDialog.remove();
|
||||
$healthCheckDialog.dialog('destroy');
|
||||
$('.overlay').remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}, g_queryAsyncJobResultInterval);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
//Update Button (end)
|
||||
);
|
||||
}
|
||||
|
||||
$healthCheckDialog.dialog({
|
||||
title: 'Health Check Wizard',
|
||||
width: 600,
|
||||
height: 600,
|
||||
draggable: true,
|
||||
closeonEscape: false,
|
||||
overflow:'auto',
|
||||
open:function() {
|
||||
$("button").each(function(){
|
||||
$(this).attr("style", "left: 400px; position: relative; margin-right: 5px; ");
|
||||
});
|
||||
},
|
||||
buttons: buttons
|
||||
}).closest('.ui-dialog').overlay();
|
||||
|
||||
}
|
||||
}
|
||||
}(jQuery, cloudStack));
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user