diff --git a/webroot/monitor/infra/common/ui/js/monitor_infra_utils.js b/webroot/monitor/infra/common/ui/js/monitor_infra_utils.js index 4bc6d0009..babaf9605 100644 --- a/webroot/monitor/infra/common/ui/js/monitor_infra_utils.js +++ b/webroot/monitor/infra/common/ui/js/monitor_infra_utils.js @@ -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 @@ -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"); @@ -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'; @@ -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)); } @@ -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; } @@ -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') { diff --git a/webroot/monitor/infra/dashboard/ui/js/monitor_infra_dashboard.js b/webroot/monitor/infra/dashboard/ui/js/monitor_infra_dashboard.js index 0a33c23dd..b030b16fc 100644 --- a/webroot/monitor/infra/dashboard/ui/js/monitor_infra_dashboard.js +++ b/webroot/monitor/infra/dashboard/ui/js/monitor_infra_dashboard.js @@ -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(); } @@ -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({ @@ -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', @@ -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({ diff --git a/webroot/monitor/tenant-network/common/ui/js/tenant_monitor_utils.js b/webroot/monitor/tenant-network/common/ui/js/tenant_monitor_utils.js index 2829fd141..6a4b48536 100644 --- a/webroot/monitor/tenant-network/common/ui/js/tenant_monitor_utils.js +++ b/webroot/monitor/tenant-network/common/ui/js/tenant_monitor_utils.js @@ -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; } }]; diff --git a/webroot/monitor/tenant-network/dashboard/ui/js/tenant_monitor_dashboard.js b/webroot/monitor/tenant-network/dashboard/ui/js/tenant_monitor_dashboard.js index 73db2dc38..fad26edc5 100644 --- a/webroot/monitor/tenant-network/dashboard/ui/js/tenant_monitor_dashboard.js +++ b/webroot/monitor/tenant-network/dashboard/ui/js/tenant_monitor_dashboard.js @@ -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 { @@ -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) { @@ -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); @@ -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]}}; } } diff --git a/webroot/monitor/tenant-network/network/ui/js/tenant_monitor_network.js b/webroot/monitor/tenant-network/network/ui/js/tenant_monitor_network.js index beaea7de4..00f3e3995 100644 --- a/webroot/monitor/tenant-network/network/ui/js/tenant_monitor_network.js +++ b/webroot/monitor/tenant-network/network/ui/js/tenant_monitor_network.js @@ -48,11 +48,11 @@ function networkSummaryRenderer() { var retObj = {d:[{key:'Source Port',values:tenantNetworkMonitorUtils.parsePortDistribution(ifNull(response['sport'],[]),{startTime:response['startTime'], endTime:response['endTime'],bandwidthField:'outBytes',flowCntField:'outFlowCount',portField:'sport'})}, {key:'Destination Port',values:tenantNetworkMonitorUtils.parsePortDistribution(ifNull(response['dport'],[]),{startTime:response['startTime'], - endTime:response['endTime'],bandwidthField:'inBytes',flowCntField:'inFlowCount',portField:'dport'})}], - forceX:[0,1000],xPositive:true,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' - } + endTime:response['endTime'],bandwidthField:'inBytes',flowCntField:'inFlowCount',portField:'dport'})}],fqName:obj['fqName'], + link:{hashParams:{q:{view:'list',type:'project',fqName:obj['fqName'],context:'domain'}}}, + chartOptions:{tooltipFn:tenantNetworkMonitor.portTooltipFn,forceX:[0,1000],xPositive:true,xLblFormat:d3.format(''),yDataType:'bytes', + yLbl:'Bandwidth',xLbl:'Port'}, + title:'Port Distribution'} return retObj; } }]; diff --git a/webroot/monitor/tenant-network/project/ui/js/tenant_monitor_project.js b/webroot/monitor/tenant-network/project/ui/js/tenant_monitor_project.js index 066220b6c..f404d5f9c 100644 --- a/webroot/monitor/tenant-network/project/ui/js/tenant_monitor_project.js +++ b/webroot/monitor/tenant-network/project/ui/js/tenant_monitor_project.js @@ -50,11 +50,10 @@ function projSummaryRenderer() { var retObj = {d:[{key:'Source Port',values:tenantNetworkMonitorUtils.parsePortDistribution(ifNull(response['sport'],[]),{startTime:response['startTime'], endTime:response['endTime'],bandwidthField:'outBytes',flowCntField:'outFlowCount',portField:'sport'})}, {key:'Destination Port',values:tenantNetworkMonitorUtils.parsePortDistribution(ifNull(response['dport'],[]),{startTime:response['startTime'], - endTime:response['endTime'],bandwidthField:'inBytes',flowCntField:'inFlowCount',portField:'dport'})}], - forceX:[0,1000],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' - } + endTime:response['endTime'],bandwidthField:'inBytes',flowCntField:'inFlowCount',portField:'dport'})}],fqName:obj['fqName'], + link:{hashParams:{q:{view:'list',type:'project',fqName:obj['fqName'],context:'domain'}}}, + chartOptions:{tooltipFn:tenantNetworkMonitor.portTooltipFn,forceX:[0,1000],xLblFormat:d3.format(''),yDataType:'bytes',xLbl:'Port',yLbl:'Bandwidth'}, + title:'Port Distribution'} return retObj; } }];