diff --git a/webroot/common/ui/js/controller.app.js b/webroot/common/ui/js/controller.app.js index a4840ac84..b1fe280ba 100644 --- a/webroot/common/ui/js/controller.app.js +++ b/webroot/common/ui/js/controller.app.js @@ -61,12 +61,13 @@ function getControllerAppPaths (ctBaseDir, ctBuildDir) { 'traceflow-model': ctWebDir + '/monitor/infrastructure/underlay/ui/js/models/TraceFlowTabModel', 'underlay-graph-model' : ctWebDir + '/monitor/infrastructure/underlay/ui/js/models/UnderlayGraphModel', 'monitor-infra-confignode-model' : ctWebDir + '/monitor/infrastructure/common/ui/js/models/ConfigNodeListModel', + 'monitor-infra-confignode-charts-model': ctWebDir + '/monitor/infrastructure/common/ui/js/models/ConfigNodeChartsModel', 'monitor-infra-analyticsnode-model' : ctWebDir + '/monitor/infrastructure/common/ui/js/models/AnalyticsNodeListModel', 'monitor-infra-databasenode-model' : ctWebDir + '/monitor/infrastructure/common/ui/js/models/DatabaseNodeListModel', 'monitor-infra-controlnode-model' : ctWebDir + '/monitor/infrastructure/common/ui/js/models/ControlNodeListModel', 'monitor-infra-vrouter-model' : ctWebDir + '/monitor/infrastructure/common/ui/js/models/VRouterListModel', 'monitor-infra-utils' : ctWebDir + '/monitor/infrastructure/common/ui/js/utils/monitor.infra.utils', - 'confignode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/ConfigNodeScatterChartView', + 'confignode-chart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView', 'controlnode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/ControlNodeScatterChartView', 'dbnode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/DatabaseNodeScatterChartView', 'analyticsnode-scatterchart-view': ctWebDir + '/monitor/infrastructure/common/ui/js/views/AnalyticsNodeScatterChartView', diff --git a/webroot/common/ui/js/controller.constants.js b/webroot/common/ui/js/controller.constants.js index b6bbb0d60..cab27652e 100644 --- a/webroot/common/ui/js/controller.constants.js +++ b/webroot/common/ui/js/controller.constants.js @@ -229,6 +229,12 @@ define([ this.TRACEFLOW_INTERVAL = 5; this.UNDERLAY_FLOW_INFO_TEMPLATE = "flow-info-template"; + //Config Summary page Constants + this.CONFIGNODESTATS_BUCKET_DURATION = 240000000; + this.CONFIGNODE_COLORS = ['#b0c8c3', '#bf94e0', '#5d6e7e', '#b2a198', '#eccc9b']; + this.CONFIGNODE_FAILEDREQUESTS_TITLE = 'Failed Requests'; + this.CONFIGNODE_FAILEDREQUESTS_COLOR = '#d95436'; + this.getProjectsURL = function (domainObj, dropdownOptions) { /* Default: get projects from keystone or API Server as specified in * config.global.js, getDomainProjectsFromApiServer is true, then diff --git a/webroot/common/ui/js/controller.labels.js b/webroot/common/ui/js/controller.labels.js index a38974a50..4095fafd5 100644 --- a/webroot/common/ui/js/controller.labels.js +++ b/webroot/common/ui/js/controller.labels.js @@ -302,6 +302,8 @@ define([ this.TITLE_CPU = "CPU Share (%)"; this.TITLE_CPU_LOAD = "CPU Load"; this.TITLE_MEMORY = "Memory"; + this.RESPONSE_SIZE = 'Response size'; + this.RESPONSE_TIME = 'Response time'; /** Titles used in node details chart widget **/ this.TITLE_CONTROLNODE_CPU_MEM_UTILIZATION = 'Control Node CPU/Memory Utilization'; @@ -363,17 +365,22 @@ define([ this.CONFIGNODE_SUMMARY_URL = '/api/admin/monitor/infrastructure/confignodes/summary'; this.CONFIGNODE_SUMMARY_TITLE = 'Config Nodes'; this.CONFIGNODE_SUMMARY_GRID_ID = 'config-nodes-grid'; - this.CONFIGNODE_SUMMARY_SCATTERCHART_ID = 'config-nodes-scatterchart'; + this.CONFIGNODE_SUMMARY_STACKEDCHART_ID = 'config-nodes-stackedchart'; + this.CONFIGNODE_SUMMARY_DONUTCHART_SECTION_ID = 'config-nodes-donutchart-section'; + this.CONFIGNODE_SUMMARY_DONUTCHART_ONE_ID = 'config-nodes-donutchart-one'; + this.CONFIGNODE_SUMMARY_DONUTCHART_TWO_ID = 'config-nodes-donutchart-two'; + this.CONFIGNODE_SUMMARY_LINEBARCHART_ID = 'config-nodes-linebarchart'; this.CONFIGNODE_SUMMARY_GRID_SECTION_ID = "config-nodes-grid-section"; this.CONFIGNODE_SUMMARY_CHART_ID = 'config-nodes-chart'; this.CONFIGNODE_SUMMARY_LIST_SECTION_ID = 'config-nodes-list-section'; - this.CONFIGNODE_SUMMARY_SCATTERCHART_SECTION_ID = 'config-nodes-scatterchart-section'; + this.CONFIGNODE_SUMMARY_CHART_SECTION_ID = 'config-nodes-chart-section'; this.CONFIGNODE_DETAILS_PAGE_ID = 'config_nodes_details_pages'; this.CONFIGNODE_TAB_SECTION_ID = 'config_node_tab_section'; this.CONFIGNODE_TAB_VIEW_ID = 'config_node_tab'; this.CONFIGNODE_DETAILS_SECTION_ID = 'config_node_details_section'; this.CONFIGNODE_TABS_ID = 'config_node_tab' this.CACHE_CONFIGNODE = 'cache-config-nodes'; + this.CACHE_CONFIGNODE_CHARTS = 'cache-config-nodes-charts'; this.CONFIGNODE_DETAILS_APISERVER_CHART_SECTION_ID = 'config_node_details_apiserver_agent_chart_section'; this.CONFIGNODE_DETAILS_APISERVER_LINE_CHART_ID = 'config_node_details_apiserver_line_chart'; this.CONFIGNODE_DETAILS_SERVICE_MONITOR_CHART_SECTION_ID = 'config_node_details_service_monitor_chart_section'; diff --git a/webroot/monitor/infrastructure/common/ui/js/models/ConfigNodeChartsModel.js b/webroot/monitor/infrastructure/common/ui/js/models/ConfigNodeChartsModel.js new file mode 100644 index 000000000..b0dc9e5ac --- /dev/null +++ b/webroot/monitor/infrastructure/common/ui/js/models/ConfigNodeChartsModel.js @@ -0,0 +1,55 @@ +/* + * Copyright (c) 2015 Juniper Networks, Inc. All rights reserved. + */ + +define([ + 'contrail-list-model' +], function (ContrailListModel) { + var ConfigNodeChartsModel = function () { + var queryPostData = { + "autoSort": true, + "async": false, + "formModelAttrs": { + "table_name": "StatTable.VncApiStatsLog.api_stats", + "table_type": "STAT", + "query_prefix": "stat", + "time_range": "3600", + "from_time": Date.now() - (2 * 60 * 60 * 1000), + "from_time_utc": Date.now() - (2 * 60 * 60 * 1000), + "to_time": Date.now(), + "to_time_utc": Date.now(), + "select": "Source, T, UUID, api_stats.operation_type," + + " api_stats.user, api_stats.useragent, api_stats.remote_ip," + + " api_stats.domain_name, api_stats.project_name, api_stats.object_type," + + " api_stats.response_time_in_usec, api_stats.response_size," + + " api_stats.resp_code, name", + "time_granularity_unit": "secs", + "where": "", + "where_json": null, + "filter_json": null, + "direction": "1", + "filters": "", + "limit": "150000" + }, + }; + var listModelConfig = { + remote : { + ajaxConfig : { + url : "/api/qe/query", + type: 'POST', + data: JSON.stringify(queryPostData) + }, + dataParser : function (response) { + return response['data']; + } + }, + cacheConfig : { + ucid: ctwl.CACHE_CONFIGNODE_CHARTS + } + }; + + return ContrailListModel(listModelConfig); + }; + return ConfigNodeChartsModel; + } +); diff --git a/webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.parsers.js b/webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.parsers.js index 910823d0c..080c65d46 100644 --- a/webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.parsers.js +++ b/webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.parsers.js @@ -1,7 +1,6 @@ /* * Copyright (c) 2015 Juniper Networks, Inc. All rights reserved. */ - define( [ 'underscore' ], function(_) { @@ -495,7 +494,6 @@ define( }; this.parseConfigNodesDashboardData = function (result) { - var retArr = []; $.each(result,function(idx,d) { var obj = {}; @@ -700,8 +698,222 @@ define( retArr.sort(dashboardUtils.sortNodesByColor); return retArr; - } + }; + + this.bucketizeConfigNodeStats = function (apiStats, bucketDuration) { + bucketDuration = ifNull(bucketDuration, ctwc.CONFIGNODESTATS_BUCKET_DURATION); + var minMaxTS = d3.extent(apiStats,function(obj){ + return obj['T']; + }); + //If only 1 value extend the range by 10 mins on both sides + if(minMaxTS[0] == minMaxTS[1]) { + minMaxTS[0] -= ctwc.CONFIGNODESTATS_BUCKET_DURATION; + minMaxTS[1] += ctwc.CONFIGNODESTATS_BUCKET_DURATION; + } + /* Bucketizes timestamp every 10 minutes */ + var xBucketScale = d3.scale.quantize().domain(minMaxTS).range(d3.range(minMaxTS[0],minMaxTS[1], bucketDuration)); + var buckets = {}; + //Group nodes into buckets + $.each(apiStats,function(idx,obj) { + var xBucket = xBucketScale(obj['T']); + if(buckets[xBucket] == null) { + var timestampExtent = xBucketScale.invertExtent(xBucket); + buckets[xBucket] = {timestampExtent:timestampExtent, + data:[]}; + } + buckets[xBucket]['data'].push(obj); + }); + return buckets; + }; + + this.parseConfigNodeRequestsStackChartData = function (apiStats) { + var cf =crossfilter(apiStats); + var parsedData = []; + var timeStampField = 'T'; + var groupDim = cf.dimension(function(d) { return d["Source"];}); + var tsDim = cf.dimension(function(d) { return d[timeStampField];}); + var buckets = this.bucketizeConfigNodeStats(apiStats); + var colorCodes = ctwc.CONFIGNODE_COLORS; + colorCodes = colorCodes.slice(0, groupDim.group().all().length); + //Now parse this data to be usable in the chart + var parsedData = []; + for(var i in buckets) { + var y0 = 0, counts = [], totalFailedReqs = 0; + var timestampExtent = buckets[i]['timestampExtent']; + tsDim.filter(timestampExtent); + var reqCntData = groupDim.group().all(); + //Getting nodes group with failed requests as value + var reqFailedData = groupDim.group().reduceSum( + function (d) { + if (parseInt(d['api_stats.resp_code']) != 200) { + return 1; + } else { + return 0; + } + }); + //Getting nodes group with response time as value + var totalResTimeData = groupDim.group().reduceSum( + function (d) { + return d['api_stats.response_time_in_usec']; + }); + var reqFailedArr = reqFailedData.top(Infinity); + var resTimeArr = totalResTimeData.top(Infinity); + var reqFailedArrLen = reqFailedArr.length; + var resTimeArrLen = resTimeArr.length; + var reqFailedNodeMap = {}, resTimeNodeMap = {}; + //Constructing the node - responsetime map + for (var j = 0; j < resTimeArrLen; j++) { + resTimeNodeMap[resTimeArr[j]['key']] = + resTimeArr[j]['value']; + } + //Constructing the node - failedRequestCnt map + for (var j = 0; j < reqFailedArrLen; j++) { + totalFailedReqs += reqFailedArr[j]['value'] + reqFailedNodeMap[reqFailedArr[j]['key']] = + reqFailedArr[j]['value']; + } + var totalReqs = 0; + for (var j = 0, len = reqCntData.length; j < len; j++) { + totalReqs += reqCntData[j]['value'] + } + counts.push({ + name: ctwc.CONFIGNODE_FAILEDREQUESTS_TITLE, + totalReqs: totalReqs, + totalFailedReq: totalFailedReqs, + color: ctwc.CONFIGNODE_FAILEDREQUESTS_COLOR, + y0: y0, + y1: y0 += totalFailedReqs + }); + parsedData.push({ + colorCodes: colorCodes, + counts: counts, + total: totalFailedReqs, + timestampExtent: timestampExtent, + date: new Date(i / 1000) + }); + for(var j=0,len=reqCntData.length;j -1) { + return 1; + } else { + return 0; + } + }); + var sourceGrpData = sourceGrpDim.all(); + $.each(sourceGrpData, function (key, value){ + parsedData.push({ + label: value['key'], + value: value['value'] + }); + }); + return parsedData; + }; this.getNodeVersion = function (buildStr) { var verStr = ''; if(buildStr != null) { diff --git a/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView.js b/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView.js new file mode 100644 index 000000000..dee0e1099 --- /dev/null +++ b/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView.js @@ -0,0 +1,308 @@ +/* + * Copyright (c) 2015 Juniper Networks, Inc. All rights reserved. + */ + +define(['underscore', 'contrail-view', + 'monitor-infra-confignode-charts-model'],function(_, ContrailView, ConfigNodeChartsModel){ + var ConfigNodeChartView = ContrailView.extend({ + render : function (){ + this.model = new ConfigNodeChartsModel(); + this.renderView4Config(this.$el, this.model, + getConfigNodeChartViewConfig()); + } + }); + + function getConfigNodeChartViewConfig() { + return { + elementId : ctwl.CONFIGNODE_SUMMARY_CHART_SECTION_ID, + view : "SectionView", + viewConfig : { + rows : [ { + columns : [ { + elementId : ctwl.CONFIGNODE_SUMMARY_STACKEDCHART_ID, + view : "StackedBarChartWithFocusView", + viewConfig : { + widgetConfig: { + elementId: ctwl.CONFIGNODE_SUMMARY_STACKEDCHART_ID + '-widget', + view: "WidgetView", + viewConfig: { + header: { + title: 'Request Served', + }, + controls: { + top: { + default: { + collapseable: false + } + } + } + } + }, + class: 'span7 confignode-chart', + chartOptions:{ + brush: false, + height: 380, + xAxisLabel: 'Time (hrs)', + yAxisLabel: 'Request Served', + yAxisOffset: 25, + axisLabelFontSize: 11, + tickPadding: 8, + margin: { + left: 45, + top: 25, + right: 0, + bottom: 40 + }, + bucketSize: ctwc.CONFIGNODESTATS_BUCKET_DURATION/(1000 * 1000 * 60),//converting to minutes + sliceTooltipFn: function (data) { + var tooltipConfig = {}; + if (data['name'] != ctwc.CONFIGNODE_FAILEDREQUESTS_TITLE) { + tooltipConfig['title'] = { + name : data['name'], + type : 'Config Node' + }; + tooltipConfig['content'] = { + iconClass : false, + info : [{ + label: 'Failed Requests (%)', + value: ifNull(data['reqFailPercent'], '-') + }, { + label: 'Avg Response Time', + value: ifNull(data['avgResTime'], '-') + }] + }; + } else { + tooltipConfig['title'] = { + name : data['name'], + type: 'Across Config Nodes' + }; + tooltipConfig['content'] = { + iconClass : false, + info : [{ + label: 'Total Requests', + value: ifNull(data['totalReqs'], '-') + }, { + label: 'Failed Requests', + value: ifNull(data['totalFailedReq'], '-') + }] + }; + } + var tooltipElementTemplate = contrail.getTemplate4Id(cowc.TMPL_ELEMENT_TOOLTIP), + tooltipElementTitleTemplate = contrail.getTemplate4Id(cowc.TMPL_ELEMENT_TOOLTIP_TITLE), + tooltipElementContentTemplate = contrail.getTemplate4Id(cowc.TMPL_ELEMENT_TOOLTIP_CONTENT), + tooltipElementObj, tooltipElementTitleObj, tooltipElementContentObj; + + tooltipConfig = $.extend(true, {}, cowc.DEFAULT_CONFIG_ELEMENT_TOOLTIP, tooltipConfig); + + tooltipElementObj = $(tooltipElementTemplate(tooltipConfig)); + tooltipElementTitleObj = $(tooltipElementTitleTemplate(tooltipConfig.title)); + tooltipElementContentObj = $(tooltipElementContentTemplate(tooltipConfig.content)); + + tooltipElementObj.find('.popover-title').append(tooltipElementTitleObj); + tooltipElementObj.find('.popover-content').append(tooltipElementContentObj); + return $(tooltipElementObj).wrapAll('
').parent().html(); + }, + showLegend: true, + legendFn: function (data, container, chart) { + if (container != null && $(container).find('svg') != null + && data != null && data.length > 0) { + var colorCodes = data[0]['colorCodes']; + var svg = $(container).find('svg'); + var width = parseInt($(svg).css('width') || svg.getBBox()['width']); + var legendWrap = d3.select($(svg)[0]).append('g') + .attr('class','legend-wrap') + .attr('transform','translate('+width+',0)') + //legend for failure requests + legendWrap.selectAll('.contrail-legend') + .data([data]) + .enter() + .append('g') + .attr('transform','translate('+(-10)+',0)') + .attr('class', 'contrail-legend') + .append('rect') + .style('fill', ctwc.CONFIGNODE_FAILEDREQUESTS_COLOR); + legendWrap.append('g') + .attr('class', 'contrail-legend') + .attr('transform','translate('+(- 20)+',0)') + .append('text') + .attr('dy', 8) + .attr('text-anchor', 'end') + .text('Failure'); + var legend = legendWrap.selectAll('.contrail-slegend') + .data(colorCodes) + .enter() + .append('g') + .attr('class','contrail-legend') + .attr('transform',function (d, i) { return 'translate('+ - (( colorCodes.length - i) * 20 + 70)+',0)';}) + legend.append('rect') + .style('fill', function (d, i) { + return colorCodes[i]; + }).on('click', function () { + //need to write the click handler + }); + legendWrap.append('g') + .attr('class','contrail-legend') + .attr('transform','translate('+ (-((colorCodes.length * 20) + 10 + 70)) +',0)') + .append('text') + .attr('dy', 8) + .attr('text-anchor', 'end') + .text('Config Nodes'); + } + } + }, + parseFn: function (response) { + return monitorInfraParsers.parseConfigNodeRequestsStackChartData(response); + } + } + }, { + elementId: ctwl.CONFIGNODE_SUMMARY_LINEBARCHART_ID, + view: 'LineBarWithFocusChartView', + viewConfig: { + widgetConfig: { + elementId: ctwl.CONFIGNODE_SUMMARY_LINEBARCHART_ID + '-widget', + view: "WidgetView", + viewConfig: { + header: { + title: 'Response Parameters', + }, + controls: { + top: { + default: { + collapseable: false + } + } + } + } + }, + class: 'span5 confignode-chart', + parseFn: function (response) { + return monitorInfraParsers.parseConfigNodeResponseStackedChartData(response); + }, + chartOptions: { + y1AxisLabel:ctwl.RESPONSE_TIME, + y2AxisLabel:ctwl.RESPONSE_SIZE, + xAxisTicksCnt: 8, //(for every 15 mins, total duration is 2 hrs) + margin: {top: 20, right: 70, bottom: 40, left: 60}, + axisLabelDistance: -10, + //forceY1: [0, 1], + focusEnable: false, + height: 190, + showLegend: true, + xAxisLabel: 'Time (hrs)', + xFormatter: function (xValue) { + return d3.time.format('%H:%M')(new Date(xValue)); + }, + y1Formatter: function (y1Value) { + var formattedValue = Math.round(y1Value) + ' ms'; + if (y1Value > 1000){ + // seconds block + formattedValue = Math.round(y1Value/1000); + formattedValue = formattedValue + ' secs' + } else if (y1Value > 60000) { + // minutes block + formattedValue = Math.round(y1Value/(60 * 1000)) + formattedValue = formattedValue + ' mins' + } + return formattedValue; + }, + y2Formatter: function (y2Value) { + var formattedValue = formatBytes(y2Value, true); + return formattedValue; + }, + legendFn: function (data, svg, chart) { + if (data != null && svg != null && chart != null) { + //Remove any existing legend + $(svg).find('g.contrail-legendWrap').remove(); + var width = parseInt($(svg).css('width') || svg.getBBox()['width']); + var barsCnt = 0, + lineCnt = 0, + barsData = [], + lineData = []; + $.each(data, function (idx, obj) { + if (obj['bar'] == true) { + barsCnt ++; + barsData.push(obj); + } else { + lineCnt ++; + lineData.push(obj); + } + }); + var legendWrap = d3.select(svg) + .append('g') + .attr('transform', 'translate('+width+', 0)') + .attr('class', 'contrail-legendWrap'); + //Appending the line chart legend + legendWrap.selectAll('g') + .data(lineData) + .enter() + .append('g') + .attr('transform', function (d, i) { + return 'translate('+ (- (i + 1) * 20) +', 0)'; + }).attr('class','contrail-legend') + .append('rect') + .attr('fill', function (d, i) { + return d['color']; + }) + legendWrap.append('g') + .attr('transform', 'translate('+ (- ((lineCnt * 20 ) + 10))+', 0)') + .attr('class', 'contrail-legend') + .append('text') + .attr('dy', 8) + .attr('text-anchor', 'end') + .text(ctwl.RESPONSE_SIZE); + //Appending the bar chart legend + var legend = legendWrap.selectAll('g.contrail-legend-bar') + .data(barsData) + .enter() + .append('g') + .attr('transform', function (d, i) { + return 'translate('+ (- (((barsData.length - i) + lineCnt + 1) * 20 + 80) )+', 0)'; + }) + .attr('class', 'contrail-legend') + .append('rect') + .attr('fill', function (d, i) { + return d['color']; + }); + legendWrap.append('g') + .attr('transform', 'translate('+(- ((lineCnt + barsCnt + 1) * 20 + 90))+', 0)') + .attr('class', 'contrail-legend') + .append('text') + .attr('text-anchor', 'end') + .attr('dy', 8) + .text('Config Nodes'); + } + } + }, + } + }, { + elementId: ctwl.CONFIGNODE_SUMMARY_DONUTCHART_SECTION_ID, + view: 'ConfigNodeDonutChartView', + viewPathPrefix: ctwl.MONITOR_INFRA_VIEW_PATH, + app : cowc.APP_CONTRAIL_CONTROLLER, + viewConfig: { + widgetConfig: { + elementId: ctwl.CONFIGNODE_SUMMARY_DONUTCHART_SECTION_ID + '-widget', + view: "WidgetView", + viewConfig: { + header: { + title: 'Config Node', + }, + controls: { + top: { + default: { + collapseable: false + } + } + } + } + }, + class: 'span5 confignode-chart' + } + }] + }] + } + } + + } + return ConfigNodeChartView; +}); diff --git a/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeDonutChartView.js b/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeDonutChartView.js new file mode 100644 index 000000000..29bec560a --- /dev/null +++ b/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeDonutChartView.js @@ -0,0 +1,103 @@ +/* + * Copyright (c) 2015 Juniper Networks, Inc. All rights reserved. + */ + +define(['underscore', 'contrail-view'],function(_, ContrailView){ + var ConfigNodeDonutChartView = ContrailView.extend({ + render : function (){ + var self = this, + viewConfig = self.attributes.viewConfig; + this.renderView4Config(this.$el, this.model, + getConfigNodeDonutChartViewConfig(), null, null, null, function () { + if (viewConfig['widgetConfig'] !== null) { + self.renderView4Config($(self.$el).find('.section-content'), self.model, viewConfig['widgetConfig'], null, null, null); + } + }); + } + }); + + function getConfigNodeDonutChartViewConfig () { + return { + elementId: ctwl.CONFIGNODE_SUMMARY_DONUTCHART_SECTION_ID, + view: 'SectionView', + viewConfig: { + rows:[{ + columns: [{ + elementId: ctwl.CONFIGNODE_SUMMARY_DONUTCHART_ONE_ID, + view: 'DonutChartView', + viewConfig: { + class: 'span6', + parseFn: function (response) { + return monitorInfraParsers.parseConfigNodeRequestForDonutChart(response, 'GET'); + }, + chartOptions: { + height: 160, + color: ctwc.CONFIGNODE_COLORS, + margin: { + bottom: 10, + top: 10 + }, + showLabels: false, + title: 'Put Request', + }, + } + }, { + elementId: ctwl.CONFIGNODE_SUMMARY_DONUTCHART_TWO_ID, + view: 'DonutChartView', + viewConfig: { + class: 'span6', + parseFn: function (response) { + return monitorInfraParsers.parseConfigNodeRequestForDonutChart(response, 'GET'); + }, + chartOptions: { + height: 160, + color: ctwc.CONFIGNODE_COLORS, + margin: { + top: 10, + bottom: 10 + }, + showLabels: false, + showLegend: true, + title: 'Get Request', + legendFn: function (data, svg, chart) { + if (data != null && svg != null && chart != null) { + $(svg).find('g.contrail-legendWrap').remove(); + var width = parseInt($(svg).css('width') || svg.getBBox()['width']); + // adding 20 px to the width, so that + // the legends of top line plus bar chart + // and the current chart will be in + // same vertical line. + width += 20; + var legendWrap = d3.select(svg) + .append('g') + .attr('transform', 'translate('+width+', 0)') + .attr('class', 'contrail-legendWrap'); + legendWrap.selectAll('g') + .data(data) + .enter() + .append('g') + .attr('transform', function (d, i) { + return 'translate('+ (- (data.length - i + 1) * 20) +', 0)'; + }).attr('class','contrail-legend') + .append('rect') + .attr('fill', function (d, i) { + return ctwc.CONFIGNODE_COLORS[i]; + }) + legendWrap.append('g') + .attr('transform', 'translate('+ (- ((data.length + 1) * 20 + 10))+',0)') + .attr('class', 'contrail-legend') + .append('text') + .attr('dy', 8) + .attr('text-anchor', 'end') + .text('Config Nodes'); + } + } + }, + } + }] + }] + } + } + } + return ConfigNodeDonutChartView; +}); \ No newline at end of file diff --git a/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeScatterChartView.js b/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeScatterChartView.js deleted file mode 100644 index 51a69d6b8..000000000 --- a/webroot/monitor/infrastructure/common/ui/js/views/ConfigNodeScatterChartView.js +++ /dev/null @@ -1,154 +0,0 @@ -/* - * Copyright (c) 2015 Juniper Networks, Inc. All rights reserved. - */ - -define(['underscore', 'contrail-view'],function(_, ContrailView){ - var ConfigNodeScatterChartView = ContrailView.extend({ - render : function (){ - var widgetConfig = getValueByJsonPath(this,'attributes;viewConfig;widgetConfig'); - if(widgetConfig != null) { - this.renderView4Config(this.$el, - this.model, - widgetConfig - ); - } - this.renderView4Config(this.$el, - this.model, - getConfigNodeScatterChartViewConfig() - ); - } - }); - - function getConfigNodeScatterChartViewConfig() { - return { - elementId : ctwl.CONFIGNODE_SUMMARY_SCATTERCHART_SECTION_ID, - view : "SectionView", - viewConfig : { - rows : [ { - columns : [ { - elementId : ctwl.CONFIGNODE_SUMMARY_SCATTERCHART_ID, - title : ctwl.CONFIGNODE_SUMMARY_TITLE, - view : "ZoomScatterChartView", - viewConfig : { - loadChartInChunks : true, - chartOptions : { - xLabel : ctwl.TITLE_CPU, - yLabel : 'Memory (MB)', - margin: {top:10}, - forceX : [ 0, 1 ], - forceY : [ 0, 20 ], - dataParser : function( - response) { - var chartDataValues = [ ]; - for ( var i = 0; i < response.length; i++) { - var configNode = response[i]; - - chartDataValues - .push({ - name : configNode['name'], - y : configNode['y'], - x : contrail.handleIfNull( - configNode['x'], - 0), - color : configNode['color'], - size : contrail.handleIfNull( - configNode['size'], - 0), - rawData : configNode - }); - } - return chartDataValues; - }, - tooltipConfigCB : getConfigNodeTooltipConfig, - controlPanelConfig: { - // legend: { - // enable: true, - // viewConfig: getControlPanelLegendConfig() - // } - }, - clickCB : onScatterChartClick - } - } - } ] - } ] - } - }; - - function onScatterChartClick( - chartConfig) { - var configNodeName = chartConfig.name, hashObj = { - type: "configNode", - view: "details", - focusedElement: { - node: configNodeName, - tab: 'details' - } - }; - - layoutHandler.setURLHashParams(hashObj, { - p : "mon_infra_config", - merge : false, - triggerHashChange : true - }); - }; - - function getConfigNodeTooltipConfig( - data) { - var configNode = data.rawData; - var tooltipData = [ - { - label : 'Version', - value : configNode.version - }, - { - label : ctwl.TITLE_CPU, - value : configNode.cpu, - }, - { - label : 'Memory', - value : configNode.memory, - }]; - var tooltipAlerts = monitorInfraUtils.getTooltipAlerts(configNode); - tooltipData = tooltipData.concat(tooltipAlerts); - var tooltipConfig = { - title : { - name : data.name, - type : 'Config Node' - }, - content : { - iconClass : false, - info : tooltipData, - actions : [{ - type : 'link', - text : 'View', - iconClass : 'icon-external-link', - callback : onScatterChartClick - }] - }, - delay : cowc.TOOLTIP_DELAY - }; - - return tooltipConfig; - }; - - function getControlPanelLegendConfig() { - return { - groups : [{ - id : 'by-node-color', - title : 'Node Color', - items : [{ - text : infraAlertMsgs['UVE_MISSING']+ ' or ' + - infraAlertMsgs['NTP_UNSYNCED_ERROR'], - labelCssClass : 'icon-circle error', - events : { - click : function( - event) { - } - } - }] - }] - }; - }; - } - return ConfigNodeScatterChartView; -}); diff --git a/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeListView.js b/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeListView.js index 1b74e0a6e..f3c97fb0b 100644 --- a/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeListView.js +++ b/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeListView.js @@ -8,9 +8,7 @@ define( _, ContrailView, ConfigNodeListModel) { var ConfigNodeListView = ContrailView.extend({ render : function() { - var configNodeListModel = new ConfigNodeListModel(); - - this.renderView4Config(this.$el, configNodeListModel, + this.renderView4Config(this.$el, null, getConfigNodeListViewConfig()); } }); @@ -24,28 +22,12 @@ define( elementId : ctwl.CONFIGNODE_SUMMARY_CHART_ID, title : ctwl.CONFIGNODE_SUMMARY_TITLE, - view : "ConfigNodeScatterChartView", + view : "ConfigNodeChartsView", viewPathPrefix: ctwl.MONITOR_INFRA_VIEW_PATH, app : cowc.APP_CONTRAIL_CONTROLLER, viewConfig: { - widgetConfig: { - elementId: ctwc.CONFIGNODE_SUMMARY_CHART_ID + '-widget', - view: "WidgetView", - viewConfig: { - header: { - title: ctwl.CONFIGNODE_SUMMARY_TITLE, - // iconClass: "icon-search" - }, - controls: { - top: { - default: { - collapseable: true - } - } - } - } - } + } } ] },{ diff --git a/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeSummaryGridView.js b/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeSummaryGridView.js index 0284ef97e..ecae03f12 100644 --- a/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeSummaryGridView.js +++ b/webroot/monitor/infrastructure/confignode/ui/js/views/ConfigNodeSummaryGridView.js @@ -3,15 +3,16 @@ */ define( - [ 'underscore', 'contrail-view' ], + [ 'underscore', 'contrail-view','monitor-infra-confignode-model' ], function( - _, ContrailView) { + _, ContrailView, ConfigNodeListModel) { var ConfigNodeGridView = ContrailView .extend({ render : function() { var self = this, viewConfig = this.attributes.viewConfig, pagerOptions = viewConfig['pagerOptions']; + self.model = new ConfigNodeListModel(); this.renderView4Config(self.$el, self.model, getConfigNodeSummaryGridViewConfig(pagerOptions), diff --git a/webroot/monitor/infrastructure/dashboard/ui/js/views/ControllerDashboardView.js b/webroot/monitor/infrastructure/dashboard/ui/js/views/ControllerDashboardView.js index e2587eb06..f2a835621 100644 --- a/webroot/monitor/infrastructure/dashboard/ui/js/views/ControllerDashboardView.js +++ b/webroot/monitor/infrastructure/dashboard/ui/js/views/ControllerDashboardView.js @@ -6,7 +6,7 @@ define([ 'underscore', 'backbone', // 'confignode-scatterchart-view', - 'controller-basedir/monitor/infrastructure/common/ui/js/views/ConfigNodeScatterChartView', + 'controller-basedir/monitor/infrastructure/common/ui/js/views/ConfigNodeChartsView', // 'controlnode-scatterchart-view', 'controller-basedir/monitor/infrastructure/common/ui/js/views/ControlNodeScatterChartView', // 'dbnode-scatterchart-view',