Index: /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.controller.js =================================================================== --- /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.controller.js (revision 2467) +++ /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.controller.js (working copy) @@ -12,7 +12,8 @@ 'dashboardService', 'localStorageService', 'roleMgmtService', - function ($scope, $rootScope, $state, $stateParams, $location, $uibModal, $filter, monitoringService, monitorResourceService, dashboardService, localStorageService, roleMgmtService) { + 'storageService', + function ($scope, $rootScope, $state, $stateParams, $location, $uibModal, $filter, monitoringService, monitorResourceService, dashboardService, localStorageService, roleMgmtService, storageService) { $rootScope.title = 'LLB Statistics'; $scope.role_info = localStorageService.getWebStorage('role_info'); var serviceViewModel = this; @@ -136,6 +137,9 @@ serviceViewModel.concurrentConnections = 0; serviceViewModel.totalHits = 0; + serviceViewModel.totalSent = 0; + serviceViewModel.totalReceived = 0; + serviceViewModel.throughput = 0; serviceViewModel.refresh = function () { serviceViewModel.loading = true; @@ -180,18 +184,23 @@ "linkStatus": series.tags.linkStatus, "linkThresh": thresholdValue, "linkUsage": data[3], - "linkBandwidIn": data[4], - "linkBandwidOut": data[5], + "received": storageService.ValueFormat1024(data[4] == null ? 0 : data[4]) + 'bps', + "sent": storageService.ValueFormat1024(data[5] == null ? 0 : data[5]) + 'bps', "linkConn": data[6], "linkHits": data[7], }) serviceViewModel.concurrentConnections += data[6]; serviceViewModel.totalHits += data[7]; + serviceViewModel.totalReceived += data[4] == null ? 0 : data[4]; + serviceViewModel.totalSent += data[5] == null ? 0 : data[5]; }) } }) } serviceViewModel.llbList = llbList; + serviceViewModel.throughput = storageService.ValueFormat1024(serviceViewModel.totalReceived + serviceViewModel.totalSent) + 'bps'; + serviceViewModel.totalReceived = storageService.ValueFormat1024(serviceViewModel.totalReceived) + 'bps'; + serviceViewModel.totalSent = storageService.ValueFormat1024(serviceViewModel.totalSent) + 'bps'; } }); } else { @@ -214,3 +223,4 @@ ]) + Index: /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.html =================================================================== --- /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.html (revision 2467) +++ /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.html (working copy) @@ -2,30 +2,51 @@
-
+
+
+
+
{{'Throughput'|T}}
+

{{monitorLLB.throughput}} + + + {{monitorLLB.totalReceived}} +    + + {{monitorLLB.totalSent}} + +

+
+
- +
+
+
{{'Concurrent Connections'|T}}
-
{{monitorLLB.concurrentConnections}}
+

{{monitorLLB.concurrentConnections}}

-
-
- +
+
+
{{'Total Hits'|T}}
-
{{monitorLLB.totalHits}}
+

{{monitorLLB.totalHits}}

+
+
+
+
+
@@ -54,6 +75,7 @@ {{ 'Device IP' | T }} {{ 'Status' | T }} {{ 'Bandwidth Usage' | T }} + {{ 'Throughput' | T }} {{ 'Connections & Hits' | T }} @@ -80,23 +102,28 @@ + {{ ((currentPageIndex - 1) * pageSize) + $index + 1 }} - {{ item.linkName }} + {{ item.linkName }} {{ item.linkGateway }} {{ item.deviceIp }} {{ item.linkStatus }} Threshold: {{item.linkThresh}}
Usage: {{ item.linkUsage }} % + + {{item.received}}
+ + {{ item.sent }} Connections: {{ item.linkConn }}
Hits: {{ item.linkHits }} - {{ 'You - do not have any LLB information.' | T }} + {{ 'You do not have any LLB information.' | T }} Index: /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.controller.js =================================================================== --- /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.controller.js (revision 0) +++ /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.controller.js (working copy) @@ -0,0 +1,316 @@ +angular.module('cm.resource') + .controller('monitorLLBDetailController', [ + '$scope', + '$rootScope', + '$state', + '$stateParams', + '$filter', + '$location', + '$uibModal', + 'dashboardService', + 'monitorResourceService', + 'reportingService', + '$document', + 'storageService', + '$aside', + 'timeService', + '$interval', + function ($scope, $rootScope, $state, $stateParams, $filter, $location, $uibModal, dashboardService, monitorResourceService, reportingService, $document, storageService, $aside, timeService, $interval) { + $scope.allow_config = true; + $scope.current_service_name = $stateParams.linkName; + $state.current.ncyBreadcrumb.label = $stateParams.linkName; + + let modalViewModel = this; + modalViewModel.tab = "Basic Monitoring"; + modalViewModel.tabs = [ + {name: "Basic Monitoring"}, + ] + + modalViewModel.selTab = function (name) { + return name === modalViewModel.tab + } + + let lastTab = ""; + $scope.changeTab = function (name) { + if (lastTab !== name) { + modalViewModel.tab = name; + modalViewModel.refresh(); + lastTab = name + } + } + + modalViewModel.llbStatistics = {}; + + let textLabelFormatter = function (len) { + return function (value) { + return value.length > len ? value.substr(0, len - 3) + '...' : value + } + } + + modalViewModel.time = { + from: 'now-15m', + to: 'now', + flush: '10s' + } + + let throughputElement = document.getElementById('llbThroughput') + let usageElement = document.getElementById('llbBandwidthUsage') + let connectionsElement = document.getElementById('llbConnections') + let hitsElement = document.getElementById('llbHits') + + let theme = "dark"; + if (window.localStorage.theme && (window.localStorage.theme !== "dark")) { + theme = "default"; + } + + let throughputChart = echarts.init(throughputElement, theme, { + renderer: 'canvas', + useDirtyRect: false + }); + let usageChart = echarts.init(usageElement, theme, { + renderer: 'canvas', + useDirtyRect: false + }); + let connectionsChart = echarts.init(connectionsElement, theme, { + renderer: 'canvas', + useDirtyRect: false + }); + let hitsChart = echarts.init(hitsElement, theme, { + renderer: 'canvas', + useDirtyRect: false + }); + + let throughputChartOptions = { + title: { text: " " }, + tooltip: { + "trigger": "axis", + "formatter": function (params) { + let tipText = ""; + for (let x = 0; x < params.length; x++) { + if (x === 0) { + tipText += params[x].axisValueLabel; + } + let value = params[x].value[1]; + if (value != null) { + value = storageService.ValueFormat1024(value) + "bps"; + } + tipText += "
" + params[x].marker + params[x].seriesName + '' + value + ''; + } + return tipText; + } + }, + legend: { "formatter": textLabelFormatter(15) }, + grid: { "left": "6%", "top": "50px", "bottom": "5%", "containLabel": true }, + xAxis: [{ "name": 'Time', "type": "time", "axisLabel": {}, "splitNumber": 5, "minInterval": 60000, "splitLine": { "show": false } }], + yAxis: [{ "name": 'Throughput', "nameTextStyle": { "padding": [0, 0, 0, 30] }, "axisLabel": {}}], + dataZoom: { type: 'inside' }, + backgroundColor: this.backgroundColor, + series: [ + { + name: 'Inbound', + unit: 'bps', + data: [], + type: 'line', + smooth: true + }, + { + name: 'Outbound', + unit: 'bps', + data: [], + type: 'line', + smooth: true + } + ] + }; + let usageChartOptions = { + title: { text: " " }, + tooltip: { + "trigger": "axis", + "formatter": function (params) { + let tipText = ""; + for (let x = 0; x < params.length; x++) { + if (x === 0) { tipText += params[x].axisValueLabel; } + let value = params[x].value[1]; + if (value != null) { + value += "%"; + } + tipText += "
" + params[x].marker + params[x].seriesName + '' + value + ''; + } + return tipText; + } + }, + legend: { "formatter": textLabelFormatter(15) }, + grid: { "left": "6%", "top": "50px", "bottom": "5%", "containLabel": true }, + xAxis: [{ "name": 'Time', "type": "time", "axisLabel": {}, "splitNumber": 5, "minInterval": 60000, "splitLine": { "show": false } }], + yAxis: [{ "name": 'Usage', "nameTextStyle": { "padding": [0, 0, 0, 30] }, "axisLabel": {}, "splitLine": { "show": false, } }], + dataZoom: { type: 'inside' }, + backgroundColor: this.backgroundColor, + series: [ + { + name: 'Bandwidth Usage:', + data: [], + type: 'line', + smooth: true, + } + ] + }; + let connectionsChartOptions = { + title: { text: " " }, + tooltip: { "trigger": "axis" }, + legend: { "formatter": textLabelFormatter(15) }, + grid: { "left": "6%", "top": "50px", "bottom": "5%", "containLabel": true }, + xAxis: [{ "name": 'Time', "type": "time", "axisLabel": {}, "splitNumber": 5, "minInterval": 60000, "splitLine": { "show": false } }], + yAxis: [{ "name": 'Connections', "nameTextStyle": { "padding": [0, 0, 0, 30] }, "axisLabel": {}, "splitLine": { "show": false, } }], + dataZoom: { type: 'inside' }, + backgroundColor: this.backgroundColor, + series: [ + { + name: 'Concurrent Connections', + data: [], + type: 'line', + smooth: true + } + ] + }; + let hitsChartOptions = { + title: { text: " " }, + tooltip: { "trigger": "axis" }, + legend: { "formatter": textLabelFormatter(15) }, + grid: { "left": "6%", "top": "50px", "bottom": "5%", "containLabel": true }, + xAxis: [{ "name": 'Time', "type": "time", "axisLabel": {}, "splitNumber": 5, "minInterval": 60000, "splitLine": { "show": false } }], + yAxis: [{ "name": 'Total Hits', "nameTextStyle": { "padding": [0, 0, 0, 30] }, "axisLabel": {}, "splitLine": { "show": false, } }], + dataZoom: { type: 'inside' }, + backgroundColor: this.backgroundColor, + series: [ + { + name: 'Total Hits', + data: [], + type: 'line', + smooth: true + } + ] + }; + + modalViewModel.interval = ''; + + modalViewModel.refresh = function () { + clearInterval(modalViewModel.interval); + + if (modalViewModel.tab === "Basic Monitoring") { + getLLBMonitoringStatistics(); + if (modalViewModel.time.flush !== 'off') { + modalViewModel.interval = setInterval(getLLBMonitoringStatistics, parseInt(modalViewModel.time.flush) * 1000); + } + } + } + + $scope.showProgressBar = function () { + let modalInstance = $uibModal.open({ + templateUrl: 'app/modules/common/templates/progress.html', + controller: 'showProgressCtrl', + controllerAs: 'progress', + backdrop: false + }); + }; + + modalViewModel.refresh(); + + modalViewModel.changeTimeSelection = function () { + let asideInstance = $aside.open({ + templateUrl: 'app/modules/common/templates/time_selector.html', + controller: 'timeSelectorCtrl', + controllerAs: 'timeSelector', + placement: 'right', + size: 'md', + resolve: { + modalData: { + time: { + "from": "now-15m", + "to": "now", + "flush": "10s" + } + } + } + }); + asideInstance.result.then(function (result) { + document.getElementById('timeSelectorTitle').textContent = getTimeTitle(result); + modalViewModel.time.from = result.from; + modalViewModel.time.to = result.to; + modalViewModel.time.flush = result.flush; + modalViewModel.refresh(); + }); + } + + function getTimeTitle(time) { + let title = ''; + if (time.to === 'now') { + if (time.from.indexOf("now") !== -1) { + title = timeService.formatTimeCondition(time.from) + } else { + title = $filter('T')('{0} to now', [timeService.formatTimeCondition(time.from)]); + } + } else { + title = $filter('T')('{0} to {1}', [timeService.formatTimeCondition(time.from), timeService.formatTimeCondition(time.to)]); + } + if (time.flush && time.flush !== 'off') { + title += $filter('T')(', Refresh every {0}', [timeService.formatDuration(time.flush)]); + } + return title; + } + + function getLLBMonitoringStatistics() { + throughputChartOptions.series[0].data = []; + throughputChartOptions.series[1].data = []; + usageChartOptions.series[0].data = []; + connectionsChartOptions.series[0].data = []; + hitsChartOptions.series[0].data = []; + + monitorResourceService.getLLBMonitoringStatistics({ + link_name: $stateParams.linkName, + from: modalViewModel.time.from, + to: modalViewModel.time.to, + }).then(function (res) { + if (res && res.status === 200) { + modalViewModel.llbStatistics = res.data.results[0].series[0]; + modalViewModel.llbStatistics = modalViewModel.llbStatistics['values']; + } + modalViewModel.llbStatistics.forEach(function (stats) { + throughputChartOptions.series[0].data.push([stats[0], stats[1]]); + throughputChartOptions.series[1].data.push([stats[0], stats[2]]); + usageChartOptions.series[0].data.push([stats[0], stats[3]]); + connectionsChartOptions.series[0].data.push([stats[0], stats[4]]); + hitsChartOptions.series[0].data.push([stats[0], stats[5]]); + }); + if (throughputChartOptions && typeof throughputChartOptions === 'object') { + throughputChart.setOption(throughputChartOptions); + } + if (usageChartOptions && typeof usageChartOptions === 'object') { + usageChart.setOption(usageChartOptions); + } + if (connectionsChartOptions && typeof connectionsChartOptions === 'object') { + connectionsChart.setOption(connectionsChartOptions); + } + if (hitsChartOptions && typeof hitsChartOptions === 'object') { + hitsChart.setOption(hitsChartOptions); + } + + document.getElementById('timeSelectorTitle').textContent = getTimeTitle(modalViewModel.time); + + window.addEventListener('resize', throughputChart.resize); + window.addEventListener('resize', usageChart.resize); + window.addEventListener('resize', connectionsChart.resize); + window.addEventListener('resize', hitsChart.resize); + }) + } + + $scope.stop = function() { + clearInterval(modalViewModel.interval); + }; + + $scope.$on('$destroy', function() { + $scope.stop(); + }); + + } + ]) + Index: /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.html =================================================================== --- /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.html (revision 0) +++ /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.html (working copy) @@ -0,0 +1,66 @@ +
+
+
+
+
+
+
+
+
+
  • + + + {{"Time selection" | T}} + +
    • +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + + {{'Throughput' | T}} +
    +
    +
    +
    +
    + + {{'Bandwidth Usage' | T}} +
    +
    +
    +
    +
    + + {{'Connections' | T}} +
    +
    +
    +
    +
    + + {{'Hits Number' | T}} +
    +
    +
    +
    +
    +
    +
    + By installing the plugins, you can check these monitoring charts. +
    +
    +
    +
    + Index: /branches/amp_3_7/extensions/monitoring/webui/resource/resource.module.js =================================================================== --- /branches/amp_3_7/extensions/monitoring/webui/resource/resource.module.js (revision 2467) +++ /branches/amp_3_7/extensions/monitoring/webui/resource/resource.module.js (working copy) @@ -161,7 +161,22 @@ label: '{{ "LLB Statistics" | T }}' } }) + .state('index.monitoring.resource.llb.detail', { + url: '^/monitoring/resource/llb/{deviceIp}/{linkName}', + views: { + 'main@index': { + templateUrl: 'app/modules/extensions/monitoring/resource/llb/llb_details.html', + controller: 'monitorLLBDetailController', + controllerAs: 'monitorLLBDetail' + } + }, + ncyBreadcrumb: { + parent: 'index.monitoring.resource.llb', + label: '{{linkName}}' + } + }); }]); angular.module("cmApp").requires.push('cm.resource'); + Index: /branches/amp_3_7/extensions/monitoring/webui/resource/resource.service.js =================================================================== --- /branches/amp_3_7/extensions/monitoring/webui/resource/resource.service.js (revision 2467) +++ /branches/amp_3_7/extensions/monitoring/webui/resource/resource.service.js (working copy) @@ -18,6 +18,7 @@ getServiceUrlConfig: getServiceUrlConfig, addServiceUrlConfig: addServiceUrlConfig, delServiceUrlConfig: delServiceUrlConfig, + getLLBMonitoringStatistics: getLLBMonitoringStatistics }; function compareVersion(version1, version2) { @@ -2173,5 +2174,18 @@ }; return apiService.post(url, post_data); }; + + function getLLBMonitoringStatistics(payload) { + let url = '/llb/graph_data'; + let post_data = { + query: { + "from_time": payload.from, + "to_time": payload.to, + "link_name": payload.link_name + } + }; + return apiService.post2(url, JSON.stringify(post_data), { headers: { 'Content-Type': 'application/json' } }); + } } ]); + Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/images/icon-c.png =================================================================== Cannot display: file marked as a binary type. svn:mime-type = image/png Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/images/icon-c.png =================================================================== --- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/images/icon-c.png (revision 2467) +++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/images/icon-c.png (working copy) Property changes on: src/webui/webui/htdocs/new/src/client/app/images/icon-c.png ___________________________________________________________________ Added: svn:mime-type ## -0,0 +1 ## +image/png \ No newline at end of property Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.controller.js =================================================================== --- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.controller.js (revision 2467) +++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.controller.js (working copy) @@ -1,4 +1,4 @@ -angular +ngular .module('cm.dashboard') .controller('monitorOverviewCtrl', [ '$scope', @@ -256,7 +256,7 @@ overviewModel.llbLists = { hitsList: [], connectionsList: [], - LLBThroughputList: [] + throughputList: [] } let getLLBMonitoringData = function () { @@ -270,7 +270,7 @@ dashboardService.getLLBMonitoringStatistics(payload).then(function (res) { overviewModel.llbLoading = false; if (res && res.status === 200) { - var hitsList = [] + let hitsList = [] if (res.data.results[0].series) { _.each(res.data.results[0].series[0].values, function (value) { hitsList.push({ @@ -282,7 +282,7 @@ } overviewModel.llbLists.hitsList = hitsList; - var connectionsList = [] + let connectionsList = []; if (res.data.results[1].series) { _.each(res.data.results[1].series[0].values, function (value) { connectionsList.push({ @@ -292,7 +292,19 @@ }) }) } - overviewModel.llbLists.connectionsList = connectionsList + overviewModel.llbLists.connectionsList = connectionsList; + let throughputList = []; + if (res.data.results[1].series) { + _.each(res.data.results[2].series[0].values, function (value) { + throughputList.push({ + 'received': storageService.ValueFormat1024(value[2]) + 'bps', + 'sent': storageService.ValueFormat1024(value[3]) + 'bps', + 'name': value[4], + 'device_ip': value[5], + }) + }) + } + overviewModel.llbLists.throughputList = throughputList } }); } @@ -908,3 +920,4 @@ }]) + Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.html =================================================================== --- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.html (revision 2467) +++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.html (working copy) @@ -457,7 +457,7 @@
    -
    +
     {{'Hits Number'|T}} {{'Top 5' | T}} @@ -485,7 +485,7 @@
    -
    +
     {{'Open Connections'|T}} {{'Top 5' | T}} @@ -513,6 +513,36 @@
    +
    +
    +
    +  {{'Network Throughput'|T}} {{'Top 5' | T}} +
    +
    + + + + + + + + + + + + + + + + + + + + +
    No.{{'Link Name' | T}}{{'Sent' | T}}{{'Received' | T}}
    {{$index + 1}}{{ item.name }}{{item.sent}}{{item.received}}
    +
    +
    +
    @@ -600,3 +630,4 @@ } +