From 7ccb238420f77552219a6dd3c9255a3103714e22 Mon Sep 17 00:00:00 2001 From: shentao Date: Mon, 13 Nov 2017 10:56:31 +0800 Subject: Fix monitor display bug Change-Id: I831bb8ec2197b1aa1acf99072edfa8c02cd22085 Issue-Id: USECASEUI-54 Signed-off-by: shentao --- .../src/main/webapp/app/uui/fusion/css/UUImain.css | 2 +- .../main/webapp/app/uui/fusion/scripts/appUUI.js | 2 +- .../webapp/app/uui/fusion/scripts/chartLoad.js | 33 +-- .../scripts/controller/alarm-chartController.js | 109 +++++++++ .../scripts/controller/alarm-detailsController.js | 50 +++++ .../fusion/scripts/controller/alarmController.js | 85 ++++--- .../controller/performance-chartController.js | 175 +++++++++++++++ .../controller/performance-detailsController.js | 202 ++--------------- .../scripts/controller/performanceController.js | 49 +++- .../fusion/scripts/view-models/alarm-chart.html | 102 +++++++++ .../fusion/scripts/view-models/alarm-details.html | 99 ++++++++ .../app/uui/fusion/scripts/view-models/alarm.html | 36 ++- .../scripts/view-models/performance-chart.html | 118 ++++++++++ .../scripts/view-models/performance-details.html | 248 +++++---------------- .../fusion/scripts/view-models/performance.html | 15 +- 15 files changed, 856 insertions(+), 469 deletions(-) create mode 100644 usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js create mode 100644 usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js create mode 100644 usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js create mode 100644 usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html create mode 100644 usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html create mode 100644 usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css b/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css index 34bb466e..99623316 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css @@ -254,7 +254,7 @@ div .ui-grid-header-cell{ } -/*input框 +/*input ----------------------------------------------*/ .list { list-style: none; diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js index 9412b433..737ddd77 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js @@ -34,4 +34,4 @@ app.config(function ($routeProvider) { }) .otherwise({redirectTo: '/common'}) }); -var global_url = "http://10.73.160.112:8082/api/usecaseui/server/v1"; +var global_url = "/api/usecaseui/server/v1"; diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js index c94a39c1..c3203aff 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js @@ -13,7 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -diskBarChart = [ +Chart = [ { "type":"bar", "key": "disk", "yAxis": "1", "values": [ { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12}, { "x":'60min' , "y":3.27} @@ -53,14 +53,13 @@ nv.addGraph(function() { .logScale(false) .axisLabel('') .tickFormat(d3.format(',.1f')); - d3.select('#CPUchart svg') - .datum(cpuBarChart) + d3.select('#chart svg') + .datum(Chart) .transition().duration(1000) .call(chart1); - nv.utils.windowResize(chart1.update); return chart1; }); -nv.addGraph(function() { +/*nv.addGraph(function() { chart2 = nv.models.multiBarChart() .showLegend(false) .reduceXTicks(false) @@ -131,7 +130,7 @@ nv.addGraph(function() { .call(chart4); nv.utils.windowResize(chart4.update); return chart4; -}); +});*/ function changeValue(s){ chart1.xAxis.tickValues(s); @@ -148,25 +147,9 @@ function changerotate(v){ } function redraw(c,s1) { - diskBarChart[0].values = s1[0]; - memoryBarChart[0].values = s1[1]; - cpuBarChart[0].values = s1[2]; - networkBarChart[0].values = s1[3]; - - d3.select('#CPUchart'+c+' svg') - .datum(cpuBarChart) + Chart[0].values = s1; + d3.select('#chart'+c+' svg') + .datum(Chart) .transition().duration(500) .call(chart1); - d3.select('#Memorychart'+c+' svg') - .datum(memoryBarChart) - .transition().duration(500) - .call(chart2); - d3.select('#Diskchart'+c+' svg') - .datum(diskBarChart) - .transition().duration(1000) - .call(chart3); - d3.select('#Networkchart'+c+' svg') - .datum(networkBarChart) - .transition().duration(1000) - .call(chart4); } diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js new file mode 100644 index 00000000..8096d702 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js @@ -0,0 +1,109 @@ +/* + Copyright (C) 2017 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with 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. + */ + +app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', + function ($scope, $http, $routeParams, $window) { + $scope.valuess = []; + $scope.today = function () { + $scope.startTime = new Date(); + $scope.endTime = new Date(); + $http({ + method: "GET", + url: global_url + "/alarm/sourceId", + headers: { + 'Access-Control-Allow-Origin': "*", + "Content-Type": "application/json", + "Authorization": "Basic " + btoa("usecase" + ':' + "usecase") + } + }).then(function successCallback(resp) { + console.info(resp); + $scope.sourceIds = resp.data; + }, function errorCallback(resp) { + + }); + }; + $scope.today(); + + $scope.genDiagram = function () { + $http({ + method: 'POST', + url: global_url + "/alarm/diagram", + data: { + "sourceId": $scope.sourceId, + "startTime": FormatDate($scope.startTime), + "endTime": FormatDate($scope.endTime) + }, + headers: {'Content-Type': 'application/x-www-form-urlencoded'}, + transformRequest: function (obj) { + var str = []; + for (var p in obj) { + str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); + } + return str.join("&"); + } + }).then(function successCallback(resp) { + //console.info(resp); + if (resp.data.length > 0) + for (var i = 0; i < resp.data.length; i++) { + $scope.valuess[i] = {}; + $scope.valuess[i].x = resp.data[i].Time; + $scope.valuess[i].y = resp.data[i].Count; + } + for (var d = 0; d < 5; d++) { + window.setTimeout(function () { + redraw("_alarm", $scope.valuess); + }, 1500); + }; + + }, function errorCallback(resp) { + + }); + } + + + $scope.startTimeChanged = function () { + if ($scope.startTime > $scope.endTime) + $scope.endTime = ""; + console.info($scope.startTime); + }; + $scope.endTimeChanged = function () { + if ($scope.endTime < $scope.startTime) + $scope.startTime = ""; + console.info($scope.endTime); + }; + + $scope.open1 = function () { + $scope.popup1.opened = true; + }; + + $scope.open2 = function () { + $scope.popup2.opened = true; + }; + + $scope.popup1 = { + opened: false + }; + + $scope.popup2 = { + opened: false + }; + + function FormatDate(strTime) { + var date = new Date(strTime); + return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); + } + + }]); diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js new file mode 100644 index 00000000..65d1fc3d --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js @@ -0,0 +1,50 @@ +/* + Copyright (C) 2017 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with 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. + */ +app.controller("alarmDetailsController",function ($scope,$http,$window) { + $scope.back = function () { + var obj = $("#lm"); + angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm.html"; + }; + $http({ + method : "GET", + url : global_url + "/alarm/1/1/null/"+alarmDetailId+"/null/null/null/null" + }).then(function successCallback(resp) { + $scope.alarmCondition = resp.data.alarms[0].alarmsHeader.alarmCondition; + $scope.alarmInterfaceA = resp.data.alarms[0].alarmsHeader.alarmInterfaceA; + $scope.eventCategory = resp.data.alarms[0].alarmsHeader.eventCategory; + $scope.eventId = resp.data.alarms[0].alarmsHeader.eventId; + $scope.eventName = resp.data.alarms[0].alarmsHeader.eventName; + $scope.eventServrity = resp.data.alarms[0].alarmsHeader.eventServrity; + $scope.eventSourceType = resp.data.alarms[0].alarmsHeader.eventSourceType; + $scope.eventType = resp.data.alarms[0].alarmsHeader.eventType; + $scope.faultFieldsVersion = resp.data.alarms[0].alarmsHeader.faultFieldsVersion; + $scope.lastEpochMicroSec = resp.data.alarms[0].alarmsHeader.lastEpochMicroSec; + $scope.nfNamingCode = resp.data.alarms[0].alarmsHeader.nfNamingCode; + $scope.nfcNamingCode = resp.data.alarms[0].alarmsHeader.nfcNamingCode; + $scope.priority = resp.data.alarms[0].alarmsHeader.priority; + $scope.reportingEntityId = resp.data.alarms[0].alarmsHeader.reportingEntityId; + $scope.reportingEntityName = resp.data.alarms[0].alarmsHeader.reportingEntityName; + $scope.sequence = resp.data.alarms[0].alarmsHeader.sequence; + $scope.sourceId = resp.data.alarms[0].alarmsHeader.sourceId; + $scope.sourceName = resp.data.alarms[0].alarmsHeader.sourceName; + $scope.specificProblem = resp.data.alarms[0].alarmsHeader.specificProblem; + $scope.startEpochMicrosec = resp.data.alarms[0].alarmsHeader.startEpochMicrosec; + $scope.startTIme = resp.data.alarms[0].alarmsHeader.createTime; + $scope.alarmInformation = resp.data.alarms[0].alarmsInformation; + },function errorCallback(resq) { + + }); +}); \ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js index 1118e732..fccecb66 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js @@ -13,15 +13,25 @@ See the License for the specific language governing permissions and limitations under the License. */ +var alarmDetailId = ""; app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interval' , '$window' ,'uiGridConstants', 'uiGridGroupingConstants', function ($scope, $log, $http, $timeout, $interval,$window) { + $scope.jump = function(value){ + alarmDetailId=value; + var obj = $("#lm"); + angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm-details.html"; + //angular.element(obj).scope().$apply(); + }; + $scope.toChart = function () { + var obj = $("#lm"); + angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm-chart.html"; + }; $scope.selectedRows = new Array(); $scope.condition1 = ""; $scope.condition2 = ""; $scope.condition3 = ""; $scope.condition4 = ""; $scope.condition5 = ""; - $scope.alarmStatus = "null"; $scope.vfstatus = "null"; $scope.toggled = function (open) { $log.log('Dropdown is now: ', open); @@ -40,10 +50,9 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv url += arguments[2] === "" ? "/null" : "/" + arguments[2]; url += arguments[3] === "" ? "/null" : "/" + arguments[3]; url += arguments[4] === "" ? "/null" : "/" + arguments[4]; - url += arguments[5] === "" ? "/null" : "/" + arguments[5]; - url += arguments[6] === "" ? "/null" : "/" + arguments[6]; + url += arguments[5] === "" ? "/null" : "/" + FormatDate(arguments[5]); + url += arguments[6] === "" ? "/null" : "/" + FormatDate(arguments[6]); url += arguments[7] === "" ? "/null" : "/" + arguments[7]; - url += arguments[8] === "" ? "/null" : "/" + arguments[8]; $http.get(url, { headers: { 'Access-Control-Allow-Origin': "*", @@ -58,21 +67,24 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv }; $scope.gridOptions = { columnDefs: [ - {field: "alarmsHeader.eventId", displayName: 'Id', enableCellEdit: false}, { field: 'alarmsHeader.eventName', displayName: 'eventName', - width: '8%', - enableColumnMenu: false, + cellTemplate: '{{row.entity.alarmsHeader.eventName}}', + width : 500, enableHiding: false, suppressRemoveSort: true, enableCellEdit: false }, - {field: "alarmsHeader.vfStatus", displayName: 'IsOpen', enableCellEdit: false}, - {field: "alarmsHeader.status", displayName: 'Status', cellFilter: 'mapGender', enableCellEdit: false}, - {field: "alarmsInformation[0].name", displayName: 'Name', enableCellEdit: false}, - {field: "alarmsInformation[0].value", displayName: 'Value', enableCellEdit: false}, - {field: "alarmsHeader.createTime", displayName: 'CreateTime', enableCellEdit: false}, + {field: "alarmsHeader.eventId", displayName: 'eventId', enableCellEdit: false}, + {field: "alarmsHeader.sourceId", displayName: 'Source Id', enableCellEdit: false}, + {field: "alarmsHeader.sourceName", displayName: 'Source Name', enableCellEdit: false}, + {field: "alarmsHeader.reportingEntityId", displayName: 'Reporting Entity Id', enableCellEdit: false}, + {field: "alarmsHeader.reportingEntityName", displayName: 'Reporting Entity Name', enableCellEdit: false}, + {field: "alarmsHeader.Priority", displayName: 'Priority', enableCellEdit: false}, + {field: "alarmsHeader.createTime", displayName: 'Start Time', enableCellEdit: false}, + {field: "alarmsHeader.status", displayName: 'Status', cellFilter: 'mapGender',enableCellEdit: false}, + {field: "option",displayName: 'option', enableCellEdit: false ,cellTemplate: ''}, ], enableSorting: true, useExternalSorting: false, @@ -129,12 +141,12 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1, $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3, $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5, - $scope.alarmStatus, $scope.vfstatus); + $scope.vfstatus); $interval(function () { getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1, $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3, $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5, - $scope.alarmStatus, $scope.vfstatus); + $scope.vfstatus); },10000) $scope.generateCsv = function () { @@ -152,21 +164,10 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv {id: 5, name: 'NORMAL', count: 7}, {id: undefined, name: 'All', count: 7} ]; - $scope.selectStatus = function (v) { - $scope.alarmStatus = typeof(v) == "undefined" ? "" : v; - getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1, - $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3, - $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5, - $scope.alarmStatus, $scope.vfstatus); - $scope.selectedStatus = v; - }; - $scope.activeStatus = function (status_id) { - return status_id == $scope.selectedStatus; - }; $scope.open = [ - {id: 1, name: 'open', count: 10}, - {id: 2, name: 'close', count: 8}, + {id: 1, name: 'Active', count: 10}, + {id: 2, name: 'Closed', count: 8}, {id: undefined, name: 'All', count: 7} ]; @@ -175,7 +176,7 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1, $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3, $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5, - $scope.alarmStatus, $scope.vfstatus); + $scope.vfstatus); $scope.selectedOpen = v; }; $scope.activeOpen = function (open_id) { @@ -216,15 +217,31 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1, $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3, $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5, - $scope.alarmStatus, $scope.vfstatus); + $scope.vfstatus); + }; + $scope.open1 = function () { + $scope.popup1.opened = true; }; + + $scope.open2 = function () { + $scope.popup2.opened = true; + }; + + $scope.popup1 = { + opened: false + }; + + $scope.popup2 = { + opened: false + }; + function FormatDate(strTime) { + var date = new Date(strTime); + return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); + } }]).filter('mapGender', function () { var genderHash = { - 1: 'CRITICAL', - 2: 'MAJOR', - 3: 'MINOR', - 4: 'WARNING', - 5: 'NORMAL' + 1: 'Active', + 2: 'Closed' }; return function (input) { if (!input) { diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js new file mode 100644 index 00000000..b96abb95 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js @@ -0,0 +1,175 @@ +/* + Copyright (C) 2017 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with 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. + */ + +app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , + function ($scope, $http, $routeParams, $window) { + $scope.sourceIds = ["112","119","101"]; + $scope.namePs = []; + $scope.valuess = []; + $scope.namesPIsShow = false; + $scope.namesCIsShow = false; + $scope.goIsShow = false; + $scope.today = function() { + $scope.startTime = new Date(); + $scope.endTime = new Date(); + $http({ + method : "GET", + url : global_url+"/performance/resourceIds", + headers: { + 'Access-Control-Allow-Origin': "*", + "Content-Type": "application/json", + "Authorization": "Basic " + btoa("usecase" + ':' + "usecase") + } + }).then(function successCallback(resp) { + $scope.sourceIds = resp.data; + },function errorCallback(reps) { + + }); + }; + $scope.today(); + + + $scope.startTimeChanged = function () { + if ($scope.startTime > $scope.endTime) + $scope.endTime = ""; + }; + $scope.endTimeChanged = function () { + if ($scope.endTime < $scope.startTime) + $scope.startTime = ""; + }; + + $scope.sourceIdChanged = function () { + if ($scope.sourceId != null){ + $scope.namesPIsShow = true; + $http({ + method : "POST", + url : global_url + "/performance/names", + data : { "sourceId":$scope.sourceId }, + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + transformRequest: function(obj) { + var str = []; + for (var p in obj) { + str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); + } + return str.join("&"); + } + + }).then(function successCallback(resp) { + $scope.namePs = resp.data; + },function errorCallback(resq) { + + }); + } + else{ + $scope.goIsShow = false; + $scope.namesPIsShow = false; + $scope.namesCIsShow = false; + } + + }; + + $scope.namePChanged = function () { + if ($scope.nameP != null){ + $http({ + method : "POST", + url : global_url + "/performance/names", + data : { "sourceId":$scope.nameP }, + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + transformRequest: function(obj) { + var str = []; + for (var p in obj) { + str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); + } + return str.join("&"); + } + }).then(function successCallback(resp) { + if (resp.data.length <= 0){ + $scope.namesCIsShow = false; + $scope.goIsShow = true; + }else{ + $scope.namesCIsShow = true; + $scope.goIsShow = false; + $scope.nameCs = resp.data; + } + },function errorCallback(resq) { + + }); + } + else{ + $scope.goIsShow = false; + $scope.namesCIsShow = false; + } + }; + + $scope.nameCChanged = function () { + if ($scope.nameC != null){ + $scope.goIsShow = true; + } + }; + + $scope.genDiagram = function () { + $http({ + method : 'POST', + url : global_url + "/performance/diagram", + data : { "sourceId":$scope.sourceId,"startTime":FormatDate($scope.startTime),"endTime":FormatDate($scope.endTime),"nameParent":$scope.nameP,"nameChild":$scope.nameC!=null?$scope.nameC:"" }, + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + transformRequest: function(obj) { + var str = []; + for (var p in obj) { + str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); + } + return str.join("&"); + } + }).then(function successCallback(resp) { + console.info(resp.data); + if (resp.data.length > 0) + for (var i = 0 ; i= 4) { - v++; - i = 0; - } - $scope.valuess[v][i].y = obj[j]; - } - }); - for (var d = 0; d < 5; d++) { - window.setTimeout(function () { - redraw("", $scope.valuess); - }, 1500); - }; - } - if (unit === "day") { - for(var d=0;d<4;d++){ - $scope.valuess[d] = [ - { "x":'1h' , "y":4}, { "x":'2h' , "y":4}, { "x":'3h' , "y":12}, - { "x":'4h' , "y":3.27}, { "x":'5h' , "y":34}, { "x":'6h' , "y":34}, { "x":'7h' , "y":34}, - { "x":'8h' , "y":34}, { "x":'9h' , "y":34}, { "x":'10h' , "y":34}, { "x":'11h' , "y":34}, - { "x":'12h' , "y":56}, { "x":'13h' , "y":34}, { "x":'14h' , "y":34}, { "x":'15h' , "y":34}, - { "x":'16h' , "y":12}, { "x":'17h' , "y":34}, { "x":'18h' , "y":50}, { "x":'19h' , "y":34}, - { "x":'20h' , "y":34}, { "x":'21h' , "y":54}, { "x":'22h' , "y":34}, { "x":'23h' , "y":34}, - { "x":'24h' , "y":36} - ]; - }; - angular.forEach(data, function (obj) { - for (var j = 0; j < obj.length; j++, i++) { - if (i >= 24) { - v++; - i = 0; - } - $scope.valuess[v][i].y = obj[j]; - } - }) - for (var d = 0; d < 5; d++) { - window.setTimeout(function () { - redraw("1", $scope.valuess); - }, 1500); - }; - } - if (unit === "month") { - for(var m=0;m<4;m++){ - $scope.valuess[m] = [ - { "x":'1d' , "y":4}, { "x":'2d' , "y":4}, { "x":'3d' , "y":12}, - { "x":'4d' , "y":3.27}, { "x":'5d' , "y":34},{ "x":'6d' , "y":4}, { "x":'7d' , "y":4}, { "x":'8d' , "y":12}, - { "x":'9d' , "y":3.27}, { "x":'10d' , "y":34}, { "x":'11d' , "y":34}, { "x":'12d' , "y":34}, { "x":'13d' , "y":4}, { "x":'14d' , "y":4}, { "x":'15' , "y":12}, - { "x":'16d' , "y":3.27}, { "x":'17d' , "y":34},{ "x":'18d' , "y":4}, { "x":'19d' , "y":4}, { "x":'20d' , "y":12}, - { "x":'21d' , "y":3.27}, { "x":'22d' , "y":34}, { "x":'23d' , "y":34}, { "x":'24d' , "y":34}, { "x":'25d' , "y":4}, { "x":'26d' , "y":12}, - { "x":'27d' , "y":3.27}, { "x":'28d' , "y":34}, { "x":'29d' , "y":34}, { "x":'30d' , "y":34}, { "x":'31d' , "y":34} - ]; - }; - angular.forEach(data, function (obj) { - for (var j = 0; j < obj.length; j++, i++) { - if (i >= 31) { - v++; - i = 0; - } - $scope.valuess[v][i].y = obj[j]; - } - }); - for (var d = 0; d < 5; d++) { - window.setTimeout(function () { - redraw("2", $scope.valuess); - }, 1500); - }; - } - if (unit === "year") { - for(var y=0;y<12;y++){ - $scope.valuess[y] = [ - {"x": 'Jan', "y": 4}, {"x": 'Feb', "y": 4}, {"x": 'Mar', "y": 12}, - {"x": 'Apr', "y": 3.27}, {"x": 'May', "y": 4}, {"x": 'June', "y": 4}, {"x": 'July', "y": 12}, - {"x": 'Aug', "y": 3.27}, {"x": 'Sept', "y": 4}, {"x": 'Oct', "y": 4}, {"x": 'Nov', "y": 12}, - {"x": 'Jan', "y": 3.27} - ]; - }; - angular.forEach(data, function (obj) { - for (var j = 0; j < obj.length; j++, i++) { - if (i >= 12) { - v++; - i = 0; - } - $scope.valuess[v][i].y = obj[j]; - } - }); - for (var d = 0; d < 5; d++) { - window.setTimeout(function () { - redraw("3", $scope.valuess); - }, 1500); - }; - } - }); +app.controller("performanceDetailsController",function ($scope,$http,$window) { + $scope.back = function () { + var obj = $("#lm"); + angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance.html"; }; - $scope.oneHour = function () { - changerotate(0); - $scope.barChart('hour'); + $http({ + method : "GET", + url : global_url + "/performance/1/1/"+permanceId+"/null/null/null/null" + }).then(function successCallback(resp) { + $scope.eventName = resp.data.performances[0].performanceHeader.eventName; + $scope.eventId = resp.data.performances[0].performanceHeader.eventId; + $scope.sourceId = resp.data.performances[0].performanceHeader.sourceId; + $scope.sourceName = resp.data.performances[0].performanceHeader.sourceName; + $scope.reportingEntityId = resp.data.performances[0].performanceHeader.reportingEntityId; + $scope.reportingEntityName = resp.data.performances[0].performanceHeader.reportingEntityName; + $scope.priority = resp.data.performances[0].performanceHeader.priority; + $scope.createTime = resp.data.performances[0].performanceHeader.createTime; + $scope.nfcNamingCode = resp.data.performances[0].performanceHeader.nfcNamingCode; + $scope.nfNamingCode = resp.data.performances[0].performanceHeader.nfNamingCode; + $scope.performanceInformation = resp.data.performances[0].performanceInformation; + },function errorCallback(resq) { - }; - $scope.oneHour(); - $scope.oneDay = function () { - changerotate(90); - $scope.barChart('day'); - }; - $scope.oneMonth = function () { - changerotate(80); - $scope.barChart('month'); - - }; - $scope.oneYear = function () { - changerotate(0); - $scope.barChart('year'); - }; - $scope.generateCsv = function (name) { - if (name == "cpu"){ - for (var i = 0;i < $scope.valuess[2].length;i++){ - $scope.csvData[i] = {}; - $scope.csvData[i]["eventId"] = permanceId; - $scope.csvData[i]["name"] = name; - $scope.csvData[i]["dateUnit"] = $scope.valuess[2][i].x; - $scope.csvData[i]["value"] = $scope.valuess[2][i].y; - } - } - if (name == "disk"){ - for (var i = 0;i < $scope.valuess[0].length;i++){ - $scope.csvData[i] = {}; - $scope.csvData[i]["eventId"] = permanceId; - $scope.csvData[i]["name"] = name; - $scope.csvData[i]["dateUnit"] = $scope.valuess[0][i].x; - $scope.csvData[i]["value"] = $scope.valuess[0][i].y; - } - } - if (name == "memory"){ - for (var i = 0;i < $scope.valuess[1].length;i++){ - $scope.csvData[i] = {}; - $scope.csvData[i]["eventId"] = permanceId; - $scope.csvData[i]["name"] = name; - $scope.csvData[i]["dateUnit"] = $scope.valuess[1][i].x; - $scope.csvData[i]["value"] = $scope.valuess[1][i].y; - } - } - if (name == "network"){ - for (var i = 0;i < $scope.valuess[3].length;i++){ - $scope.csvData[i] = {}; - $scope.csvData[i]["eventId"] = permanceId; - $scope.csvData[i]["name"] = name; - $scope.csvData[i]["dateUnit"] = $scope.valuess[3][i].x; - $scope.csvData[i]["value"] = $scope.valuess[3][i].y; - } - } - if($scope.csvData != null ){ - $window.location = global_url+"/performance/genDiaCsv/"+JSON.stringify($scope.csvData); - } - } -}]); + }); +}); \ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js index be2fd37f..80896c7c 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js @@ -18,7 +18,6 @@ var permanceId=""; app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', '$window' , function ($scope, $http , $window, $interval ) { $scope.jump = function(value){ - console.info(value); permanceId=value; var obj = $("#lm"); angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance-details.html"; @@ -35,10 +34,14 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid $scope.seek2===""?"null":$scope.seek2, $scope.seek3===""?"null":$scope.seek3, $scope.seek4===""?"null":$scope.seek4, $scope.seek5===""?"null":$scope.seek5); }; + $scope.toChart = function () { + var obj = $("#lm"); + angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance-chart.html"; + }; $scope.gridOptions = { columnDefs: [{ field: 'performanceHeader.eventName', - displayName: 'name', + displayName: 'Event Name', width: '10%', enableColumnMenu: false, enableHiding: false, @@ -47,14 +50,17 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid }, { field: "performanceHeader.eventId", enableCellEdit: false, - displayName: 'Id', - cellTemplate: '{{row.entity.performanceHeader.eventId}}', + displayName: 'Event Id', + cellTemplate: '{{row.entity.performanceHeader.sourceId}}', }, - {field: "performanceHeader.eventName", displayName: 'State',enableCellEdit: false}, - {field: "performanceHeader.eventName", displayName: 'Cpu',enableCellEdit: false}, - {field: "performanceHeader.eventName", displayName: 'Memory',enableCellEdit: false}, - {field: "performanceHeader.eventName", displayName: 'Disk',enableCellEdit: false}, - {field: "performanceHeader.eventName", displayName: 'Network',enableCellEdit: false} + {field: "performanceHeader.sourceId", displayName: 'Source Id',enableCellEdit: false}, + {field: "performanceHeader.sourceName", displayName: 'Source Name',enableCellEdit: false}, + {field: "performanceHeader.reportingEntityId", displayName: 'Reporting Entity Id',enableCellEdit: false}, + {field: "performanceHeader.reportingEntityName", displayName: 'Reporting Entity Name',enableCellEdit: false}, + {field: "performanceHeader.priority", displayName: 'Priority',enableCellEdit: false}, + {field: "performanceHeader.createTime", displayName: 'Start Time',enableCellEdit: false}, + {field: "option",displayName: 'option', enableCellEdit: false , + cellTemplate: ''} ], enableSorting: true, useExternalSorting: false, @@ -150,11 +156,11 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid var getPage = function (curPage, pageSize) { var firstRow = (curPage - 1) * pageSize; var url = global_url+'/performance/' + curPage + '/' + pageSize + ''; - url += arguments[2] === "" ? "/null" : "/" + arguments[2]; + url += arguments[2] === "" ? "/null" : "/" + arguments[2]; url += arguments[3] === "" ? "/null" : "/" + arguments[3]; url += arguments[4] === "" ? "/null" : "/" + arguments[4]; - url += arguments[5] === "" ? "/null" : "/" + arguments[5]; - url += arguments[6] === "" ? "/null" : "/" + arguments[6]; + url += arguments[5] === "null" ? "/null" : "/" + FormatDate(arguments[5]); + url += arguments[6] === "null" ? "/null" : "/" + FormatDate(arguments[6]); $http.get(url, { headers: { 'Access-Control-Allow-Origin': "*", @@ -187,6 +193,25 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid $scope.toggleMenu = function () { $scope.menuState.show = !$scope.menuState.show; } + $scope.open1 = function () { + $scope.popup1.opened = true; + }; + + $scope.open2 = function () { + $scope.popup2.opened = true; + }; + + $scope.popup1 = { + opened: false + }; + + $scope.popup2 = { + opened: false + }; + function FormatDate(strTime) { + var date = new Date(strTime); + return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); + }; }]); \ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html new file mode 100644 index 00000000..03579f60 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html @@ -0,0 +1,102 @@ + + + +
+
+

alarm Chart

+
+
+
+
+

+ +

+ +
+
+

+
+ +
+

+ +

+ +
+
+

+
+
+

+

+ +
+ +
+
+
+ +
+

+
+ +
+
+
Chart + +
+

+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html new file mode 100644 index 00000000..96cf8460 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html @@ -0,0 +1,99 @@ + +
+

VNF Alarm Details

+ + + + + +
+ Header Information + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event Name{{eventName}}Event Id{{eventId}}
Source Id{{sourceId}}Source Name{{sourceName}}
Reporting Entity Id{{reportingEntityId}}Reporting Entity Name{{reportingEntityName}}
Priority{{priority}}Start Time{{startTIme}}
NFC Naming Code{{nfcNamingCode}}NF Naming Code{{nfNamingCode}}
+
+
+ + Detail Information + + + + + + + + + + + + + + + + + + + + +
Event Servrity{{eventServrity}}Event Source Type{{eventSourceType}}
Event Category{{eventCategory}}Alarm InterfaceA{{alarmInterfaceA}}
Alarm Condition{{alarmCondition}}Specific Problem{{specificProblem}}
+
+
+ + Additional Information + + + + + + + + + + +
Item NameItem Value
{{info.name}}{{info.value}}
+
+ +
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html index dc18c380..fdae95b9 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html @@ -14,24 +14,11 @@ limitations under the License. -->
-

Alarm

+

VNF Alarm

-
- -
+
    -
  • cpu
    • -
  • state
    • -
  • memory
    • +
  • Source Id
    • +
  • Source Name
    • +
  • Priority
    -
  • disk
    • -
  • Network
    • +
  • Start Time + +
    +
    • +
  • + End Time +
    +
@@ -71,7 +64,8 @@
- + +
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html new file mode 100644 index 00000000..9f9ccbb3 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html @@ -0,0 +1,118 @@ + + + +
+
+

Performance Chart

+
+
+
+
+

+ +

+ +
+
+

+
+ +
+

+ +

+ +
+
+

+
+
+

+

+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+

+
+ +
+
+
Chart + +
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html index 054b5f5f..61c2bc57 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html @@ -13,192 +13,62 @@ See the License for the specific language governing permissions and limitations under the License. --> - - -
-
-

Performance Details

-
-
- - -
-
-
-
-
CPU - -
-

-
-
-
-
-
Memory -
-

-
-
-
-
-
-
-
Disk -
-

-
-
-
-
-
Network -
-

-
-
-
-
- - -
-
-
-
-
CPU -
-

-
-
-
-
-
Memory -
-

-
-
-
-
-
-
-
Disk -
-

-
-
-
-
-
Network -
-

-
-
-
-
- - -
-
-
-
-
CPU -
-

-
-
-
-
-
Memory -
-

-
-
-
-
-
-
-
Disk -
-

-
-
-
-
-
Network -
-

-
-
-
-
- - -
-
-
-
-
CPU -
-

-
-
-
-
-
Memory -
-

-
-
-
-
-
-
-
Disk -
-

-
-
-
-
-
Network -
-

-
-
-
-
- - -
-
-
-
-
-
-
-
\ No newline at end of file +
+

VNF Performance Data Details

+ + + + + +
+ Header Information + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event Name{{eventName}}Event Id{{eventId}}
Source Id{{sourceId}}Source Name{{sourceName}}
Reporting Entity Id{{reportingEntityId}}Reporting Entity Name{{reportingEntityName}}
Priority{{priority}}Start Time{{createTime}}
NFC Naming Code{{nfcNamingCode}}NF Naming Code{{nfNamingCode}}
+
+
+ + Additional Information + + + + + + + + + + +
Item NameItem Value
{{info.name}}{{info.value}}
+
+ +
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html index 426836c6..f2fc7320 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html @@ -18,14 +18,16 @@

Performance

    -
  • cpu
    • -
  • state
    • -
  • memory
    • +
  • Source Id
    • +
  • Source Name
    • +
  • Priority
    -
  • disk
    • -
  • Network
    • +
  • Start Time +
    • +
  • End Time +
@@ -44,7 +46,8 @@
- + +