Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

1)Merged the update charts functionality in initscatterchart functio... #178

Open
wants to merge 1 commit into
base: feature-dev
Choose a base branch
from
Open

1)Merged the update charts functionality in initscatterchart functio... #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 18 additions & 7 deletions webroot/monitor/infra/common/ui/js/monitor_infra_utils.js
View file
Open in desktop
Expand Up @@ -2,6 +2,12 @@
* Copyright (c) 2014 Juniper Networks, Inc. All rights reserved.
*/
var consoleTimer = [];
var chartsLegend = {
Working: d3Colors['green'],
Idle: d3Colors['blue'],
Warning: d3Colors['orange'],
Error: d3Colors['red']
};
var infraMonitorAlertUtils = {
/**
* Process-specific alerts
Expand Down Expand Up @@ -229,7 +235,7 @@ var infraMonitorUtils = {
var dValue = result[i]['value'];
obj['x'] = parseFloat(getValueByJsonPath(dValue,'VrouterStatsAgent;cpu_info;cpu_share','--'));
obj['y'] = parseInt(getValueByJsonPath(dValue,'VrouterStatsAgent;cpu_info;meminfo;virt','--'))/1024; //Convert to MB
obj['cpu'] = $.isNumeric(obj['x']) ? obj['x'].toFixed(2) : '-';
obj['cpu'] = parseFloat(getValueByJsonPath(dValue,'VrouterStatsAgent;cpu_info;cpu_share','--'));
obj['ip'] = getValueByJsonPath(dValue,'VrouterAgent;control_ip','-');
obj['uveIP'] = obj['ip'];
obj['summaryIps'] = getVrouterIpAddresses(dValue,"summary");
Expand All @@ -247,7 +253,8 @@ var infraMonitorUtils = {

obj['status'] = getOverallNodeStatus(d,'compute');
var processes = ['contrail-vrouter','contrail-vrouter-nodemgr','supervisor-vrouter'];
obj['memory'] = formatMemory(getValueByJsonPath(dValue,'VrouterStatsAgent;cpu_info;meminfo','--'));
obj['memory'] = getValueByJsonPath(dValue,'VrouterStatsAgent;cpu_info;meminfo','--');
obj['virtMemory'] = getValueByJsonPath(dValue,'VrouterStatsAgent;cpu_info;meminfo;virt','--');
obj['size'] = getValueByJsonPath(dValue,'VrouterStatsAgent;phy_if_1min_usage;0;out_bandwidth_usage',0) +
getValueByJsonPath(dValue,'VrouterStatsAgent;phy_if_1min_usage;0;in_bandwidth_usage',0) + 1;
obj['shape'] = 'circle';
Expand Down Expand Up @@ -1825,7 +1832,11 @@ function getAnalyticsMessagesCountAndSize(d,procList){
function formatMemory(memory) {
if(memory == null || memory['virt'] == null)
return noDataStr;
var usedMemory = parseInt(memory['virt']) * 1024;
var usedMemory = 0;
if($.isNumeric(memory))
usedMemory = parseInt(memory) * 1024;
else
usedMemory = parseInt(memory['virt']) * 1024;
//var totalMemory = parseInt(memory['total']) * 1024;
return contrail.format('{0}', formatBytes(usedMemory));
}
Expand Down Expand Up @@ -2058,8 +2069,8 @@ function getNodeTooltipContents(currObj) {
var tooltipContents = [
{lbl:'Host Name', value: currObj['name']},
{lbl:'Version', value:currObj['version']},
{lbl:'CPU', value:$.isNumeric(currObj['cpu']) ? currObj['cpu'] + '%' : currObj['cpu']},
{lbl:'Memory', value:currObj['memory']}
{lbl:'CPU', value:$.isNumeric(currObj['cpu']) ? currObj['cpu'].toFixed(2) + '%' : currObj['cpu']},
{lbl:'Memory', value:formatMemory(currObj['memory'])}
];
return tooltipContents;
}
Expand Down Expand Up @@ -2120,8 +2131,8 @@ var bgpMonitor = {
var tooltipContents = [
{lbl:'Host Name', value: e['point']['name']},
{lbl:'Version', value:e['point']['version']},
{lbl:'CPU', value:$.isNumeric(e['point']['cpu']) ? e['point']['cpu'] + '%' : e['point']['cpu']},
{lbl:'Memory', value:e['point']['memory']}
{lbl:'CPU', value:$.isNumeric(e['point']['cpu']) ? e['point']['cpu'].toFixed(2) + '%' : e['point']['cpu']},
{lbl:'Memory', value:formatMemory(e['point']['memory'])}
];
if (e['point']['type'] == 'vRouter') {
} else if (e['point']['type'] == 'controlNode') {
Expand Down
129 changes: 50 additions & 79 deletions webroot/monitor/infra/dashboard/ui/js/monitor_infra_dashboard.js
View file
Open in desktop
Expand Up @@ -36,33 +36,28 @@ function addTabs() {
* Takes vRouters data(array) as input and creates/updates chart
*/
var updateView = function(data) {
var chartObj = {};
var chartsData = {
title: 'vRouters',
d: splitNodesToSeriesByColor(data, {
Red: d3Colors['red'],
Orange: d3Colors['orange'],
Blue: d3Colors['blue'],
Green: d3Colors['green']
}),
d: splitNodesToSeriesByColor(data, chartsLegend),
chartOptions: {
tooltipFn: bgpMonitor.vRouterTooltipFn,
clickFn: bgpMonitor.onvRouterDrillDown,
xPositive: true,
addDomainBuffer: true
addDomainBuffer: true,
deferredObj:$.Deferred(),
showSettings:false,
//For Axis params if the data type is not provided default one is Integer and currently
//only two data types integer and float are supported
yAxisParams:[{lbl:'Memory (MB)',key:'virtMemory',formatFn:function(data){
return prettifyBytes({bytes:ifNull(data,0)*1024,stripUnit:true,prefix:'MB'})
}
},{lbl:'Virtual Networks',key:'vnCnt'}],
xAxisParams:[{lbl:'CPU (%)',key:'cpu',type:'float'},{lbl:'Instances',key:'instCnt'}]
}
};
var chartObj = {};
if(!isScatterChartInitialized('#vrouter-bubble')) {
$('#vrouterStats-header').initWidgetHeader({title:'vRouters',link:{hashParams:{p:'mon_infra_vrouter',q:{node:'vRouters'}}}});
$('#vrouter-bubble').initScatterChart(chartsData);
} else {
data = updateCharts.setUpdateParams(data);
chartObj['selector'] = $('#content-container').find('#vrouter-bubble > svg').first()[0];
chartObj['data'] = chartsData['d'];
chartObj['type'] = 'infrabubblechart';
updateCharts.updateView(chartObj);
}

$('#vrouterStats-header').initWidgetHeader({title:'vRouters',link:{hashParams:{p:'mon_infra_vrouter',q:{node:'vRouters'}}}});
$('#vrouter-bubble').initScatterChart(chartsData);
self.updatevRouterInfoBoxes();
}

Expand Down Expand Up @@ -141,26 +136,18 @@ function addTabs() {
})

var updateView = function(data) {
if(!isScatterChartInitialized('#ctrlNode-bubble')) {
$('#ctrlNodeStats-header').initWidgetHeader({title:'Control Nodes',link:{hashParams:{p:'mon_infra_control',q:{node:'Control Nodes'}}}});
var chartsData = {
title: 'Control Nodes',
chartOptions: {
tooltipFn: bgpMonitor.controlNodetooltipFn,
clickFn: bgpMonitor.onControlNodeDrillDown,
xPositive: true,
addDomainBuffer: true
},
d: splitNodesToSeriesByColor(data,{
Red: d3Colors['red'],
Orange: d3Colors['orange'],
Blue: d3Colors['blue'],
Green: d3Colors['green']
})
};
$('#ctrlNode-bubble').initScatterChart(chartsData);
} else {
}
var chartsData = {
title: 'Control Nodes',
chartOptions: {
tooltipFn: bgpMonitor.controlNodetooltipFn,
clickFn: bgpMonitor.onControlNodeDrillDown,
xPositive: true,
addDomainBuffer: true
},
d: splitNodesToSeriesByColor(data,chartsLegend)
};
$('#ctrlNodeStats-header').initWidgetHeader({title:'Control Nodes',link:{hashParams:{p:'mon_infra_control',q:{node:'Control Nodes'}}}});
$('#ctrlNode-bubble').initScatterChart(chartsData);
}

infraDashboardView.addInfoBox({
Expand Down Expand Up @@ -189,26 +176,18 @@ function addTabs() {
updateView(newValue);
})
this.updateView = function(data) {
if(!isScatterChartInitialized('#analyticNode-bubble')) {
$('#analyticNodeStats-header').initWidgetHeader({title:'Analytics Nodes',link:{hashParams:{p:'mon_infra_analytics',q:{node:'Analytics Nodes'}}}});
var chartsData = {
title: 'Analytic Nodes',
chartOptions: {
tooltipFn: bgpMonitor.analyticNodeTooltipFn,
clickFn: bgpMonitor.onAnalyticNodeDrillDown,
xPositive: true,
addDomainBuffer: true
},
d: splitNodesToSeriesByColor(data, {
Red: d3Colors['red'],
Orange: d3Colors['orange'],
Blue: d3Colors['blue'],
Green: d3Colors['green']
})
};
$('#analyticNode-bubble').initScatterChart(chartsData);
} else {
}
var chartsData = {
title: 'Analytic Nodes',
chartOptions: {
tooltipFn: bgpMonitor.analyticNodeTooltipFn,
clickFn: bgpMonitor.onAnalyticNodeDrillDown,
xPositive: true,
addDomainBuffer: true
},
d: splitNodesToSeriesByColor(data, chartsLegend)
};
$('#analyticNodeStats-header').initWidgetHeader({title:'Analytics Nodes',link:{hashParams:{p:'mon_infra_analytics',q:{node:'Analytics Nodes'}}}});
$('#analyticNode-bubble').initScatterChart(chartsData);
}
infraDashboardView.addInfoBox({
title:'Analytics Nodes',
Expand Down Expand Up @@ -237,26 +216,18 @@ function addTabs() {
})

var updateView = function(data) {
if(!isScatterChartInitialized('#configNode-bubble')) {
$('#configNodeStats-header').initWidgetHeader({title:'Config Nodes',link:{hashParams:{p:'mon_infra_config',q:{node:'Config Nodes'}}}});
var chartsData = {
title: 'Config Nodes',
chartOptions: {
tooltipFn: bgpMonitor.configNodeTooltipFn,
clickFn: bgpMonitor.onConfigNodeDrillDown,
xPositive: true,
addDomainBuffer: true
},
d: splitNodesToSeriesByColor(data, {
Red: d3Colors['red'],
Orange: d3Colors['orange'],
Blue: d3Colors['blue'],
Green: d3Colors['green']
})
};
$('#configNode-bubble').initScatterChart(chartsData);
} else {
}
var chartsData = {
title: 'Config Nodes',
chartOptions: {
tooltipFn: bgpMonitor.configNodeTooltipFn,
clickFn: bgpMonitor.onConfigNodeDrillDown,
xPositive: true,
addDomainBuffer: true
},
d: splitNodesToSeriesByColor(data, chartsLegend)
};
$('#configNodeStats-header').initWidgetHeader({title:'Config Nodes',link:{hashParams:{p:'mon_infra_config',q:{node:'Config Nodes'}}}});
$('#configNode-bubble').initScatterChart(chartsData);
}

infraDashboardView.addInfoBox({
Expand Down
9 changes: 4 additions & 5 deletions webroot/monitor/tenant-network/common/ui/js/tenant_monitor_utils.js
View file
Open in desktop
Expand Up @@ -1212,11 +1212,10 @@ function portSummaryRenderer() {
portData = tenantNetworkMonitorUtils.parsePortDistribution(portData,$.extend({startTime:portDistributionParams['startTime'],endTime:portDistributionParams['endTime'],
bandwidthField:'bytes',flowCntField:'flowCnt',portField:'port',startPort:startPort,endPort:endPort},{portType:obj['portType']}));

var retObj = {d:[{key:'Source Port',values:portData}],
forceX:[startPort,endPort],xLblFormat:d3.format(''),yDataType:'bytes',fqName:obj['fqName'],
yLbl:'Bandwidth',link:{hashParams:{q:{view:'list',type:'project',fqName:obj['fqName'],context:'domain'}}},
chartOptions:{tooltipFn:tenantNetworkMonitor.portTooltipFn},title:'Port Distribution',xLbl:'Port'
}
var retObj = {d:[{key:'Source Port',values:portData}],fqName:obj['fqName'],
link:{hashParams:{q:{view:'list',type:'project',fqName:obj['fqName'],context:'domain'}}},
chartOptions:{tooltipFn:tenantNetworkMonitor.portTooltipFn,forceX:[startPort,endPort],xLblFormat:d3.format(''),
yDataType:'bytes',yLbl:'Bandwidth',xLbl:'Port'},title:'Port Distribution'};
return retObj;
}
}];
Expand Down
73 changes: 30 additions & 43 deletions webroot/monitor/tenant-network/dashboard/ui/js/tenant_monitor_dashboard.js
View file
Open in desktop
Expand Up @@ -21,18 +21,15 @@ function domainSummaryRenderer() {
var result = networkDS.getDataSourceObj();
var dashboardData,callUpdateDashboard = false;
cfg['loadedDeferredObj'] = result['deferredObj'];
//Info: Create a renderDeferredObj (which will be resolved on getting first set of results) and pass it to initTemplates,
if(result['lastUpdated'] != null) {
dashboardData = getProjectData(result['dataSource'].getItems(),globalObj['dataSources']['projectDS']);
domainSummaryView.renderNetworkMonitoringDashboard(renderDeferredObj,cfg,dashboardData);
} else {
domainSummaryView.renderNetworkMonitoringDashboard(renderDeferredObj,cfg,dashboardData);
}
//result['dataSource'].unbind("change");
$(networkDS).on("change",function(){
var dashboardData = getProjectData(result['dataSource'].getItems(),globalObj['dataSources']['projectDS']);
if(callUpdateDashboard == false) {
//Info: Need to resolve renderDeferredObj
renderDeferredObj.resolve(dashboardData);
callUpdateDashboard = true;
} else {
Expand Down Expand Up @@ -64,19 +61,11 @@ function domainSummaryRenderer() {
domainStatsViewModel.outBytes(formatBytes(dashboardData['aggData']['outBytes']));
data['charts']['d'] = [
{deferredObj:renderDeferredObj,title:'Projects',parseFn:function() {
return {
d:[{key:'Projects',values:dashboardData['projectsData']}],xLbl:'Interfaces',yLbl:'Networks',forceX:[0,5],forceY:[0,10],
link:{hashParams:{q:{view:'list',type:'project',fqName:fqName,context:'domain',source:'uve'}},
conf:{p:'mon_net_projects',merge:false}},
chartOptions:{tooltipFn:tenantNetworkMonitor.projectTooltipFn},hideLoadingIcon:false
}}},
{deferredObj:renderDeferredObj,title:'Networks',forceX:[0,5],forceY:[0,10],parseFn:function() {
return {
d:[{key:'Networks',values:dashboardData['networksData']}],xLbl:'Interfaces',yLbl:'Connected Networks',forceX:[0,5],forceY:[0,10],
link:{hashParams:{q:{view:'list',type:'network',fqName:fqName,source:'uve',context:'domain'}},
conf:{p:'mon_net_networks',merge:false}},
chartOptions:{tooltipFn:tenantNetworkMonitor.networkTooltipFn},hideLoadingIcon:false
}}}
return getChartSettings(dashboardData['projectsData'],'project',cfg);
}},
{deferredObj:renderDeferredObj,title:'Networks',parseFn:function() {
return getChartSettings(dashboardData['networksData'],'network',cfg);
}}
];
} else {
renderDeferredObj.done(function(data) {
Expand All @@ -86,19 +75,11 @@ function domainSummaryRenderer() {
});
data['charts']['d'] = [
{deferredObj:renderDeferredObj,title:'Projects',parseFn:function(response) {
return {
d:[{key:'Projects',values:response['projectsData']}],xLbl:'Interfaces',yLbl:'Networks',forceX:[0,5],forceY:[0,10],
link:{hashParams:{q:{view:'list',type:'project',fqName:fqName,context:'domain',source:'uve'}},
conf:{p:'mon_net_projects',merge:false}},
chartOptions:{tooltipFn:tenantNetworkMonitor.projectTooltipFn},hideLoadingIcon:false,loadedDeferredObj:cfg['loadedDeferredObj']
}}},
{deferredObj:renderDeferredObj,title:'Networks',forceX:[0,5],forceY:[0,10],parseFn:function(response) {
return {
d:[{key:'Networks',values:response['networksData']}],xLbl:'Interfaces',yLbl:'Connected Networks',forceX:[0,5],forceY:[0,10],
link:{hashParams:{q:{view:'list',type:'network',fqName:fqName,source:'uve',context:'domain'}},
conf:{p:'mon_net_networks',merge:false}},
chartOptions:{tooltipFn:tenantNetworkMonitor.networkTooltipFn},hideLoadingIcon:false,loadedDeferredObj:cfg['loadedDeferredObj']
}}}
return getChartSettings(response['projectsData'],'project',cfg);
}},
{deferredObj:renderDeferredObj,title:'Networks',parseFn:function(response) {
return getChartSettings(response['networksData'],'network',cfg);
}}
];
}
var summaryTemplate = contrail.getTemplate4Id(template);
Expand All @@ -121,20 +102,26 @@ function domainSummaryRenderer() {
domainStatsViewModel.inBytes(formatBytes(dashboardData['aggData']['inBytes']));
domainStatsViewModel.outBytes(formatBytes(dashboardData['aggData']['outBytes']));
var container = cfg['container'];
var projectChart = $(container).find('div.stack-chart').first().data('chart');
var networkChart = $(container).find('div.stack-chart').last().data('chart');
var container = cfg['container'];
dashboardData['projectsData'] = updateCharts.setUpdateParams(dashboardData['projectsData']);
dashboardData['networksData'] = updateCharts.setUpdateParams(dashboardData['networksData']);
var projObj = {},nwObj = {};
projObj['selector'] = $(container).find('div.stack-chart > svg').first()[0];
projObj['data'] = [{key:'Projects',values:dashboardData['projectsData']}];
projObj['type'] = 'bubblechart';
nwObj['selector'] = $(container).find('div.stack-chart > svg').last()[0];
nwObj['data'] = [{key:'Networks',values:dashboardData['networksData']}];
nwObj['type'] = 'bubblechart';
updateCharts.updateView(projObj);
updateCharts.updateView(nwObj);
$($(container).find('div.stack-chart').first()).initScatterChart(getChartSettings(dashboardData['projectsData'],'project',cfg));
$($(container).find('div.stack-chart').last()).initScatterChart(getChartSettings(dashboardData['networksData'],'network',cfg))
}

function getChartSettings(data,type,cfg){
var key,p,yLbl,tooltipFn;
if (type == 'network') {
key = 'Networks';
p = 'mon_net_networks';
yLbl = 'Connected Networks';
tooltipFn = tenantNetworkMonitor.networkTooltipFn;
} else if(type == 'project') {
key = 'Projects';
p = 'mon_net_projects';
yLbl = 'Networks';
tooltipFn = tenantNetworkMonitor.projectTooltipFn;
}
return {d:[{key:key,values:data}],hideLoadingIcon:false,loadedDeferredObj:cfg['loadedDeferredObj'],
link:{hashParams:{q:{view:'list',type:type,fqName:cfg['fqName'],source:'uve',context:'domain'}},
conf:{p:p,merge:false}},chartOptions:{tooltipFn:tooltipFn,xLbl:'Interfaces',yLbl:yLbl,forceX:[0,5],forceY:[0,10]}};
}
}