diff options
| author |   shentao <shentao@chinamobile.com> | 2017-11-13 10:56:31 +0800 |
|---|---|---|
| committer | shentao <shentao@chinamobile.com> | 2017-11-13 10:56:38 +0800 |
| commit | 7ccb238420f77552219a6dd3c9255a3103714e22 (patch) | |
| tree | 39b60fc7492dbe19e1d35710cdefb0b56cad1539 | |
| parent | 9208eb1e0f4b44e7e9ddaf05642c3cfadd61e95b (diff) | |
Fix monitor display bug
Change-Id: I831bb8ec2197b1aa1acf99072edfa8c02cd22085
Issue-Id: USECASEUI-54
Signed-off-by: shentao <shentao@chinamobile.com>
15 files changed, 856 insertions, 469 deletions
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: '<a ng-click="grid.appScope.jump(row.entity.alarmsHeader.eventName)"; style="cursor:pointer" href="">{{row.entity.alarmsHeader.eventName}}</a>', + 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: '<button ng-click="grid.appScope.jump(row.entity.alarmsHeader.eventName)" class="btn btn-primary" >Details</button>'}, ], 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<resp.data.length ; i++){ + $scope.valuess[i] = {}; + $scope.valuess[i].x = i+1; + $scope.valuess[i].y = resp.data[i]; + $scope.valuess[i].x.length = i; + } + for (var d = 0; d < 5; d++) { + window.setTimeout(function () { + redraw("_performance", $scope.valuess); + }, 1500); + }; + },function errorCallback(resp) { + + }); + } + + $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/performance-detailsController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js index 44bf8b29..ca87a4af 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js @@ -13,185 +13,27 @@ 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.tabes = [ - {title: 'one hour'}, - {title: 'one day'}, - {title: 'one month'}, - {title: 'one year'} - ]; - $scope.valuess = []; - $scope.csvData = []; - $scope.barChart = function (unit) { - $http.get(global_url + '/performance/diagram/' + unit + '/' + permanceId, { - headers: { - 'Access-Control-Allow-Origin': "*", - "Content-Type": "application/json" - } - }) - .success(function (data) { - var v = 0; - var i = 0; - if (unit === "hour") { - for(var h=0;h<4;h++){ - $scope.valuess[h] = [ - {"x": '15min', "y": 4}, {"x": '30min', "y": 4}, {"x": '45min', "y": 12}, - {"x": '60min', "y": 3.27} - ]; - }; - angular.forEach(data, function (obj) { - for (var j = 0; j < obj.length; j++, i++) { - if (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: '<a ng-click="grid.appScope.jump(row.entity.performanceHeader.eventId)"; style="cursor:pointer" href="">{{row.entity.performanceHeader.eventId}}</a>', + displayName: 'Event Id', + cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.performanceHeader.sourceId)"; style="cursor:pointer" href="">{{row.entity.performanceHeader.sourceId}}</a>', }, - {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: '<button ng-click="grid.appScope.jump(row.entity.performanceHeader.sourceId)" class="btn btn-primary" >Details</button>'} ], 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 @@ +<!-- + 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. +--> +<style> + body { + overflow-y:scroll; + } + text { + font: 12px sans-serif; + } + svg { + display: block; + } + #chart svg { + height: 200px; + width: 400px; + min-width: 100px; + min-height: 100px; + } + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } + .nodatadiv { + display: table-cell; + width: 600px; + height:300px; + text-align:center; + vertical-align: middle; + } + .nodatainner { + padding: 10px; + } + </style> + <!--/.navbar-collapse --> + <div class="templatemo-content-wrapper"> + <div class="templatemo-content"> + <h1>alarm Chart</h1> + <div class="row" style="min-height: 500px" ng-controller="alarmchartCtrl"> + <div class="col-md-12 col-sm-12"> + <div class="row"> + <div class="col-md-6"> + <p class="input-group" style="float:left"> + <label style="float:left;width:80px;line-height:100px">startTime:</label> + <div style="float:left;width:100px;padding-top:33px"> + <input type="text" class="form-control" readonly ng-change="startTimeChanged()" uib-datepicker-popup ng-click="open1()" ng-model="startTime" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /> + </div> + <div style="display:block;float:left" uib-timepicker ng-model="startTime" ng-change="startTimeChanged()" hour-step minute-step show-meridian></div> + </p> + </div> + + <div class="col-md-6" style="float:left"> + <p class="input-group" style="float:left"> + <label style="float:left;width:80px;line-height:100px">endTime:</label> + <div style="float:left;width:100px;padding-top:33px;"> + <input type="text" class="form-control" readonly ng-change="endTimeChanged()" ng-click="open2()" uib-datepicker-popup ng-model="endTime" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /> + </div> + <div style="display:block;float:left" uib-timepicker ng-model="endTime" ng-change="endTimeChanged()" hour-step minute-step show-meridian></div> + </p> + </div> + <div class="col-md-6" style="width:100%;padding-bottom:20px;"> + <p> + <div style="float:left;padding-right:30px;"> + <label style="float:left;width:80px;line-height:30px;">sourceId:</label> + <div style="float:left;width:130px;"> + <select class="form-control" ng-change="sourceIdChanged()" ng-model="sourceId" ng-options="s for s in sourceIds" > + <option value="">--- chose ---</option> + </select> + </div> + </div> + <div style="float:left"> + <button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit</button> + </div> + </p> + </div> + + <div class="col-md-6 col-sm-12" style="width:100%"> + <div class="panel panel-success"> + <div class="panel-heading">Chart + <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px;display: none ">CSV</button> + </div> + <div align="center"><H3></H3></div><div id="chart_alarm"> <svg></svg> </div> + </div> + </div> + </div> + </div> + <br /> + <br /> + <br /> + <br /> + </div> + </div> + </div>
\ 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 @@ +<!-- + 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. +--> +<div class="templatemo-content" ng-controller="alarmDetailsController"> + <h1>VNF Alarm Details</h1> + + + + <button style="position:relative;left:75%;" ng-click="back()" class="btn btn-primary">back</button> + + <div> + <span>Header Information</span> + <table width="80%" border="1" cellspacing="50%" cellpadding="10"> + <tr> + <th style="background-color:lightblue;">Event Name</th> + <td>{{eventName}}</td> + <th style="background-color:lightblue;">Event Id</th> + <td>{{eventId}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Source Id</th> + <td>{{sourceId}}</td> + <th style="background-color:lightblue;">Source Name</th> + <td>{{sourceName}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Reporting Entity Id</th> + <td>{{reportingEntityId}}</td> + <th style="background-color:lightblue;">Reporting Entity Name</th> + <td>{{reportingEntityName}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Priority</th> + <td>{{priority}}</td> + <th style="background-color:lightblue;">Start Time</th> + <td>{{startTIme}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">NFC Naming Code</th> + <td>{{nfcNamingCode}}</td> + <th style="background-color:lightblue;">NF Naming Code</th> + <td>{{nfNamingCode}}</td> + </tr> + </table> + </div> + <div style="padding-top:10px;"> + <span> + Detail Information + </span> + <table width="80%" border="1" cellspacing="50%" cellpadding="10"> + <tr> + <th style="background-color:lightblue;">Event Servrity</th> + <td>{{eventServrity}}</td> + <th style="background-color:lightblue;">Event Source Type</th> + <td>{{eventSourceType}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Event Category</th> + <td>{{eventCategory}}</td> + <th style="background-color:lightblue;">Alarm InterfaceA</th> + <td>{{alarmInterfaceA}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Alarm Condition</th> + <td>{{alarmCondition}}</td> + <th style="background-color:lightblue;">Specific Problem</th> + <td>{{specificProblem}}</td> + </tr> + </table> + </div> + <div style="padding-top:10px;"> + <span> + Additional Information + </span> + <table width="80%" border="1" cellspacing="50%" cellpadding="10"> + <tr> + <th style="background-color:lightblue;">Item Name</th> + <th style="background-color:lightblue;">Item Value</th> + </tr> + <tbody ng-repeat="info in alarmInformation"> + <td>{{info.name}}</td> + <td>{{info.value}}</td> + </tbody> + </table> + </div> + +</div>
\ 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. --> <div class="templatemo-content" ng-controller="alarmGridCtrl"> - <h1>Alarm</h1> + <h1>VNF Alarm</h1> <div class="row margin-bottom-20"> </div> <div class="row margin-bottom-10"> - <div class="col-md-8"> - <ul class="nav nav-pills"> - <li style="background-color: #ddd" - ng-repeat="s in status" - ng-click="selectStatus(s.id)" - ng-class="{active:activeStatus(s.id)}"> - <a href=""> - {{s.name}} - <span class="badge">{{s.count}}</span> - </a> - </li> - <input type="hidden" ng-model="selectedStatus"/> - </ul> - </div> + <div class="col-md-4"> <ul class="nav nav-pills"> <li style="background-color: #ddd" ng-repeat="O in open" @@ -47,14 +34,20 @@ </div> </div> <ul class="list"> - <li>cpu <input ng-model="condition1" type="text"/></li> - <li>state <input ng-model="condition2" type="text"/></li> - <li>memory <input ng-model="condition3" type="text"/></li> + <li>Source Id <input ng-model="condition1" type="text"/></li> + <li>Source Name <input ng-model="condition2" type="text"/></li> + <li>Priority <input ng-model="condition3" type="text"/></li> <button ng-click="alarmSearch()">search</button> </ul> <ul class="list" ng-show='menuState.show'> - <li>disk <input ng-model="condition4" type="text"/></li> - <li>Network <input ng-model="condition5" type="text"/></li> + <li>Start Time + <input type="text" class="form-control" readonly ng-click="open1()" uib-datepicker-popup ng-model="condition4" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /> + <div style="display:block;float:left" uib-timepicker ng-model="condition4" hour-step minute-step show-meridian></div> + </li> + <li> + End Time <input type="text" class="form-control" ng-click="open2()" readonly uib-datepicker-popup ng-model="condition5" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /> + <div style="display:block;float:left" uib-timepicker ng-model="condition5" hour-step minute-step show-meridian></div> + </li> </ul> <div class="row"> <div class="col-md-5" style="border-top:1px dotted #ddd"> @@ -71,7 +64,8 @@ </div> <div class="col-md-1"> - <button ng-click="generateCsv()" class="btn btn-primary">CSV</button> + <!--<button ng-click="generateCsv()" class="btn btn-primary">CSV</button>--> + <button ng-click="toChart()" class="btn btn-primary">Chart</button> </div> </div> <div> 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 @@ +<!-- + 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. +--> +<style> + body { + overflow-y:scroll; + } + text { + font: 12px sans-serif; + } + svg { + display: block; + } + #chart svg { + height: 200px; + width: 400px; + min-width: 100px; + min-height: 100px; + } + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } + .nodatadiv { + display: table-cell; + width: 600px; + height:300px; + text-align:center; + vertical-align: middle; + } + .nodatainner { + padding: 10px; + } + </style> + <!--/.navbar-collapse --> + <div class="templatemo-content-wrapper"> + <div class="templatemo-content"> + <h1>Performance Chart</h1> + <div class="row" style="min-height: 500px" ng-controller="pertabCtrl"> + <div class="col-md-12 col-sm-12"> + <div class="row"> + <div class="col-md-6"> + <p class="input-group" style="float:left"> + <label style="float:left;width:80px;line-height:100px">startTime:</label> + <div style="float:left;width:100px;padding-top:33px"> + <input type="text" class="form-control" readonly ng-change="startTimeChanged()" uib-datepicker-popup ng-click="open1()" ng-model="startTime" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /> + </div> + <div style="display:block;float:left" uib-timepicker ng-model="startTime" ng-change="startTimeChanged()" hour-step minute-step show-meridian></div> + </p> + </div> + + <div class="col-md-6" style="float:left"> + <p class="input-group" style="float:left"> + <label style="float:left;width:80px;line-height:100px">endTime:</label> + <div style="float:left;width:100px;padding-top:33px;"> + <input type="text" class="form-control" readonly ng-change="endTimeChanged()" ng-click="open2()" uib-datepicker-popup ng-model="endTime" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /> + </div> + <div style="display:block;float:left" uib-timepicker ng-model="endTime" ng-change="endTimeChanged()" hour-step minute-step show-meridian></div> + </p> + </div> + <div class="col-md-6" style="width:100%;padding-bottom:20px;"> + <p> + <div style="float:left;padding-right:30px;"> + <label style="float:left;width:80px;line-height:30px;">sourceId:</label> + <div style="float:left;width:130px;"> + <select class="form-control" ng-change="sourceIdChanged()" ng-model="sourceId" ng-options="s for s in sourceIds" > + <option value="">--- chose ---</option> + </select> + </div> + </div> + <div style="float:left;padding-right:30px" ng-show="namesPIsShow"> + <label style="float:left;width:50px;line-height:30px;">name:</label> + <div style="float:left;width:130px;"> + <select class="form-control" ng-change="namePChanged()" ng-model="nameP" ng-options="np for np in namePs" > + <option value="">--- chose ---</option> + </select> + </div> + </div> + <div style="float:left;padding-right:30px" ng-show="namesCIsShow" style="float:left"> + <label style="float:left;width:50px;line-height:30px;">name:</label> + <div style="float:left;width:130px;"> + <select class="form-control" ng-model="nameC" ng-change="nameCChanged()" ng-options="nc for nc in nameCs" > + <option value="">--- chose ---</option> + </select> + </div> + </div> + <div ng-show="goIsShow" style="float:left"> + <button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">Go</button> + </div> + </p> + </div> + + <div class="col-md-12 col-sm-12" > + <div class="panel panel-success"> + <div class="panel-heading">Chart + <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px;display: none ">CSV</button> + </div> + <div id="chart_performance"> <svg></svg> </div> + </div> + </div> + </div> + </div> + <br /> + <br /> + <br /> + <br /> + </div> + </div> + </div>
\ 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. --> -<style> - body { - overflow-y:scroll; - } - text { - font: 12px sans-serif; - } - svg { - display: block; - } - #CPUchart,#Memorychart,#Diskchart,#Networkchart svg { - height: 200px; - width: 400px; - min-width: 100px; - min-height: 100px; - } - tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } - .nodatadiv { - display: table-cell; - width: 600px; - height:300px; - text-align:center; - vertical-align: middle; - } - .nodatainner { - padding: 10px; - } - </style> - <!--/.navbar-collapse --> - <div class="templatemo-content-wrapper"> - <div class="templatemo-content"> - <h1>Performance Details</h1> - <div class="row" style="min-height: 500px" ng-controller="pertabCtrl"> - <div class="col-md-12 col-sm-12"> - <uib-tabset active="active" > - <uib-tab heading="one hour" ng-click="oneHour()" > - <div class="templatemo-charts"> - <div class="row" style="margin-top: 10px"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">CPU - <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button> - </div> - <div align="center"><H3></H3></div><div id="CPUchart"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Memory - <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Memorychart"> <svg></svg> </div> - </div> - </div> - </div> - <div class="row"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Disk - <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Diskchart"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Network - <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Networkchart"> <svg></svg> </div> - </div> - </div> - </div> - </div> - </uib-tab> - <uib-tab heading="one day" ng-click="oneDay()"> - <div class="templatemo-charts"> - <div class="row" style="margin-top: 10px"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">CPU - <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="CPUchart1"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Memory - <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Memorychart1"> <svg></svg> </div> - </div> - </div> - </div> - <div class="row"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Disk - <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Diskchart1"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Network - <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Networkchart1"> <svg></svg> </div> - </div> - </div> - </div> - </div> - </uib-tab> - <uib-tab heading="one month" ng-click="oneMonth()"> - <div class="templatemo-charts"> - <div class="row" style="margin-top: 10px"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">CPU - <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="CPUchart2"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Memory - <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Memorychart2"> <svg></svg> </div> - </div> - </div> - </div> - <div class="row"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Disk - <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Diskchart2"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Network - <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Networkchart2"> <svg></svg> </div> - </div> - </div> - </div> - </div> - </uib-tab> - <uib-tab heading="one year" ng-click="oneYear()"> - <div class="templatemo-charts"> - <div class="row" style="margin-top: 10px"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">CPU - <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="CPUchart3"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Memory - <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Memorychart3"> <svg></svg> </div> - </div> - </div> - </div> - <div class="row"> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Disk - <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Diskchart3"> <svg></svg> </div> - </div> - </div> - <div class="col-md-6 col-sm-12"> - <div class="panel panel-success"> - <div class="panel-heading">Network - <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div> - <div align="center"><H3></H3></div><div id="Networkchart3"> <svg></svg> </div> - </div> - </div> - </div> - </div> - </uib-tab> - </uib-tabset> - </div> - <br /> - <br /> - <br /> - <br /> - </div> - </div> - </div>
\ No newline at end of file +<div class="templatemo-content" ng-controller="performanceDetailsController"> + <h1>VNF Performance Data Details</h1> + + + + <button style="position:relative;left:75%;" ng-click="back()" class="btn btn-primary">back</button> + + <div> + <span>Header Information</span> + <table width="80%" border="1" cellspacing="50%" cellpadding="10"> + <tr> + <th style="background-color:lightblue;">Event Name</th> + <td>{{eventName}}</td> + <th style="background-color:lightblue;">Event Id</th> + <td>{{eventId}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Source Id</th> + <td>{{sourceId}}</td> + <th style="background-color:lightblue;">Source Name</th> + <td>{{sourceName}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Reporting Entity Id</th> + <td>{{reportingEntityId}}</td> + <th style="background-color:lightblue;">Reporting Entity Name</th> + <td>{{reportingEntityName}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">Priority</th> + <td>{{priority}}</td> + <th style="background-color:lightblue;">Start Time</th> + <td>{{createTime}}</td> + </tr> + <tr> + <th style="background-color:lightblue;">NFC Naming Code</th> + <td>{{nfcNamingCode}}</td> + <th style="background-color:lightblue;">NF Naming Code</th> + <td>{{nfNamingCode}}</td> + </tr> + </table> + </div> + <div style="padding-top:10px;"> + <span> + Additional Information + </span> + <table width="80%" border="1" cellspacing="50%" cellpadding="10"> + <tr> + <th style="background-color:lightblue;">Item Name</th> + <th style="background-color:lightblue;">Item Value</th> + </tr> + <tbody ng-repeat="info in performanceInformation"> + <td>{{info.name}}</td> + <td>{{info.value}}</td> + </tbody> + </table> + </div> + +</div>
\ 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 @@ <h1>Performance</h1> <div> <ul class="list"> - <li>cpu <input type="text" ng-model="seek1"/></li> - <li>state <input type="text" ng-model="seek2"/></li> - <li>memory <input type="text" ng-model="seek3"/></li> + <li>Source Id <input type="text" ng-model="seek1"/></li> + <li>Source Name <input type="text" ng-model="seek2"/></li> + <li>Priority <input type="text" ng-model="seek3"/></li> <button ng-click="getSearch()">search</button> </ul> <ul class="list" ng-show='menuState.show'> - <li>disk <input type="text" ng-model="seek4"/></li> - <li>Network <input type="text" ng-model="seek5"/></li> + <li>Start Time <input type="text" class="form-control" readonly ng-click="open1()" uib-datepicker-popup ng-model="seek4" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /> + <div style="display:block;float:left" uib-timepicker ng-model="seek4" hour-step minute-step show-meridian></div></li> + <li>End Time <input type="text" class="form-control" readonly ng-click="open2()" uib-datepicker-popup ng-model="seek5" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /> + <div style="display:block;float:left" uib-timepicker ng-model="seek5" hour-step minute-step show-meridian></div></li> </ul> <div class="row"> <div class="col-md-5" style="border-top:1px dotted #ddd"> @@ -44,7 +46,8 @@ </div> </div> <div class="col-md-1"> - <button ng-click="generateCsv()" class="btn btn-primary">CSV</button> + <!-- <button ng-click="generateCsv()" class="btn btn-primary">CSV</button>--> + <button ng-click="toChart()" class="btn btn-primary">Chart</button> </div> </div> <div ui-grid="gridOptions" style="width: 100%;margin-top:10px; text-align: center;" ui-grid-edit |