From fdc95484da793f4bc66b36a2066ad3cebcb6246d Mon Sep 17 00:00:00 2001 From: shentao Date: Mon, 30 Oct 2017 17:59:37 +0800 Subject: Fix Monitor bug Change-Id: I7608578aa57feee97e0265b71ca97e285e2f89e0 Issue-Id: USECASEUI-50 Signed-off-by: shentao --- .../main/webapp/app/uui/fusion/scripts/appUUI.js | 35 +-- .../webapp/app/uui/fusion/scripts/chartLoad.js | 161 ++++++------ .../fusion/scripts/controller/alarmController.js | 270 ++++++++++----------- .../scripts/controller/left-menuController.js | 11 +- .../controller/performance-detailsController.js | 157 +++++++++++- .../scripts/controller/performanceController.js | 211 ++++++++++------ .../app/uui/fusion/scripts/view-models/alarm.html | 75 +++--- .../uui/fusion/scripts/view-models/left-menu.html | 4 +- .../scripts/view-models/performance-details.html | 112 +++++---- .../fusion/scripts/view-models/performance.html | 79 +++--- 10 files changed, 643 insertions(+), 472 deletions(-) (limited to 'usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts') 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 ee1533cf..9412b433 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 @@ -14,44 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -//$(document).ready( function() { -// -// // sidebar menu click -// $('.templatemo-sidebar-menu li.sub a').click(function(){ -// if($(this).parent().hasClass('open')) { -// $(this).parent().removeClass('open'); -// } else { -// $(this).parent().addClass('open'); -// } -// }); // sidebar menu click -// -// -// -// $("#list>li:gt(2)").hide(); -// -// $(".more").click( -// e=>{if($(e.target).html()=="more"){ -// $("#list>li:gt(2)") -// .siblings() -// .show(); -// $(e.target).html("close") -// }else{ -// $("#list>li:gt(2)") -// .hide(); -// $(e.target).html("more") -// }; -//}); -//$("#bb").click(function(){ -// //���ͼƬ������ת��ָ��ҳ����¼��� -// window.location.href="data-visualization.html" -//}) -//}); // document.ready - var app = angular.module('uui', ['ng', 'ngRoute','ui.bootstrap','ui.grid','ngTouch','ngAnimate', 'ui.grid.cellNav', 'ui.grid.edit', 'ui.grid.resizeColumns', 'ui.grid.pinning', 'ui.grid.selection', 'ui.grid.moveColumns', 'ui.grid.exporter', 'ui.grid.importer', 'ui.grid.grouping','ui.grid.pagination' ,'ui.grid.autoResize']); - app.config(function ($routeProvider) { $routeProvider .when('/alarm', { @@ -68,3 +34,4 @@ app.config(function ($routeProvider) { }) .otherwise({redirectTo: '/common'}) }); +var global_url = "http://10.73.160.112:8082/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 a402dd56..a52a2de8 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,42 +13,73 @@ See the License for the specific language governing permissions and limitations under the License. */ -historicalBarChart = [ - { "type":"bar", "key": "memory", "yAxis": "1", "values": [{ "x":1388552400000 , "y":10}, - { "x":1391230800000 , "y":4}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":12}, - { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.93}, - { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":19.04}, - { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":15.73} - ] } ]; +diskBarChart = [ + { "type":"bar", "key": "disk", "yAxis": "1", "values": [ + { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12}, + { "x":'60min' , "y":3.27} + ] } ]; +memoryBarChart = [ + { "type":"bar", "key": "memory", "yAxis": "1", "values": [ + { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12}, + { "x":'60min' , "y":3.27} + ] } ]; +cpuBarChart = [ + { "type":"bar", "key": "cpu", "yAxis": "1", "values": [ + { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12}, + { "x":'60min' , "y":3.27} + ] } ]; +networkBarChart = [ + { "type":"bar", "key": "network", "yAxis": "1", "values": [ + { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12}, + { "x":'60min' , "y":3.27} + ] } ]; + +historicalBarChart1 = [ + { "type":"bar", "key": "memory", "yAxis": "1", "values": [ + { "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} + ] } ]; +historicalBarChart2 = [ + { "type":"bar", "key": "memory", "yAxis": "1", "values": [ + { "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} + ] } ]; +historicalBarChart3 = [ + { "type":"bar", "key": "memory", "yAxis": "1", "values": [ + { "x":'Jan' , "y":4}, { "x":'Feb' , "y":4}, { "x":'Mar' , "y":12}, + { "x":'Apr' , "y":3.27}, { "x":'May' , "y":34},{ "x":'June' , "y":4}, { "x":'July' , "y":4}, { "x":'Aug' , "y":12}, + { "x":'Sept' , "y":3.27}, { "x":'Oct' , "y":34}, { "x":'Nov' , "y":34} + ] } ]; var chart1,chart2,chart3,chart4; nv.addGraph(function() { chart1 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) + .transitionDuration(350) + .showLegend(false) .reduceXTicks(false) - .forceY([0, 34.0]) + .forceY([0, 64.0]) .showControls(false) .stacked(false) .logScale(false) .legendPos('top') .color(d3.scale.category10().range()); chart1.xAxis - .tickValues([1388552400000, 1391230800000,1393650000000,1396324800000,1398916800000,1401595200000, - 1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000]) .staggerLabels(false) .showMaxMin(false) - .rotateLabels(90) - //.axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) - } - ); chart1.yAxis .logScale(false) .axisLabel('') .tickFormat(d3.format(',.1f')); d3.select('#CPUchart svg') - .datum(historicalBarChart) + .datum(cpuBarChart) .transition().duration(1000) .call(chart1); nv.utils.windowResize(chart1.update); @@ -56,29 +87,23 @@ nv.addGraph(function() { }); nv.addGraph(function() { chart2 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) + .showLegend(false) .reduceXTicks(false) - .forceY([0, 34.0]) + .forceY([0, 64.0]) .showControls(false) .stacked(false) .logScale(false) .legendPos('top') - .color(d3.scale.category20b().range()); + .color(d3.scale.category10().range()); chart2.xAxis - .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) .staggerLabels(false) .showMaxMin(false) - .rotateLabels(90) - .axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) }); chart2.yAxis .logScale(false) .axisLabel('') .tickFormat(d3.format(',.1f')); d3.select('#Memorychart svg') - .datum(historicalBarChart) + .datum(memoryBarChart) .transition().duration(1000) .call(chart2); nv.utils.windowResize(chart2.update); @@ -86,29 +111,23 @@ nv.addGraph(function() { }); nv.addGraph(function() { chart3 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) + .showLegend(false) .reduceXTicks(false) - .forceY([0, 34.0]) + .forceY([0, 64.0]) .showControls(false) .stacked(false) .logScale(false) .legendPos('top') - .color(d3.scale.category50().range()); + .color(d3.scale.category10().range()); chart3.xAxis - .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) .staggerLabels(false) .showMaxMin(false) - .rotateLabels(90) - .axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) }); chart3.yAxis .logScale(false) .axisLabel('') .tickFormat(d3.format(',.1f')); - d3.select('#Networkchart svg') - .datum(historicalBarChart) + d3.select('#Diskchart svg') + .datum(diskBarChart) .transition().duration(1000) .call(chart3); nv.utils.windowResize(chart3.update); @@ -116,61 +135,63 @@ nv.addGraph(function() { }); nv.addGraph(function() { chart4 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) + .showLegend(false) .reduceXTicks(false) - .forceY([0, 34.0]) + .forceY([0, 64.0]) .showControls(false) .stacked(false) .logScale(false) .legendPos('top') - .color(d3.scale.category50().range()); + .color(d3.scale.category10().range()); chart4.xAxis - .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) .staggerLabels(false) .showMaxMin(false) - .rotateLabels(90) - .axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) }); chart4.yAxis .logScale(false) .axisLabel('') .tickFormat(d3.format(',.1f')); d3.select('#Networkchart svg') - .datum(historicalBarChart) + .datum(networkBarChart) .transition().duration(1000) .call(chart4); nv.utils.windowResize(chart4.update); return chart4; }); -function redraw() { - d3.select('#CPUchart svg') - .datum(historicalBarChart) +function changeValue(s){ + chart1.xAxis.tickValues(s); + chart2.xAxis.tickValues(s); + chart3.xAxis.tickValues(s); + chart4.xAxis.tickValues(s); +} + +function changerotate(v){ + chart1.xAxis.rotateLabels(v); + chart2.xAxis.rotateLabels(v); + chart3.xAxis.rotateLabels(v); + chart4.xAxis.rotateLabels(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) .transition().duration(500) .call(chart1); - d3.select('#Memorychart svg') - .datum(historicalBarChart) + d3.select('#Memorychart'+c+' svg') + .datum(memoryBarChart) .transition().duration(500) .call(chart2); - d3.select('#Diskchart svg') - .datum(historicalBarChart) + d3.select('#Diskchart'+c+' svg') + .datum(diskBarChart) .transition().duration(1000) .call(chart3); - d3.select('#Networkchart svg') - .datum(historicalBarChart) + d3.select('#Networkchart'+c+' svg') + .datum(networkBarChart) .transition().duration(1000) .call(chart4); } - -setInterval(function () { - redraw(); -}, 1500); -//if(historicalBarChart.length <= 0 ) { -// document.getElementById("CPUchart").innerHTML = "
No Data Available
"; -// document.getElementById("CPUchart").className="nodatadiv"; -// document.getElementById("Memorychart").innerHTML = "
No Data Available
"; -// document.getElementById("Memorychart").className="nodatadiv"; -// document.getElementById("nodata").className="nodatainner"; -//} \ 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 b268ed31..a7fd1c7a 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,88 +13,68 @@ See the License for the specific language governing permissions and limitations under the License. */ -app.controller('perCtrl', function ($scope) { - -}); - -app.controller('alarmGridCtrl', ['$scope','$log', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', - function ($scope,$log, $http, $timeout, $interval) { +app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interval' , '$window' ,'uiGridConstants', 'uiGridGroupingConstants', + function ($scope, $log, $http, $timeout, $interval,$window) { $scope.selectedRows = new Array(); - var mydefalutData = [ - {name: "shebei1", Id: "22", State: '1', Cpu: "40%", Memory: "60,0", Disk: "60,000", Network: "60,000"}, - {name: "shebei1", Id: "226", State: '2', Cpu: "40%", Memory: "60", Disk: "60,", Network: "60,000"}, - { - name: "shebei1", - Id: "225", - State: '2', - Cpu: "40%", - Memory: "60,000", - Disk: "60,000", - Network: "60,000" - }, - {name: "shebei1", Id: "224", State: '3', Cpu: "40%", Memory: "600", Disk: "60,000", Network: "60,000"}, - - { - name: "shebei1", - Id: "223", - State: '2', - Cpu: "40%", - Memory: "60,000", - Disk: "60,000", - Network: "60,000" - }, - { - name: "shebei1", - Id: "221", - State: '3', - Cpu: "40%", - Memory: "60,000", - Disk: "60,000", - Network: "60,000" - } - - ]; - $scope.items = [ - 'The first choice!', - 'And another choice for you.', - 'but wait! A third!' - ]; - - $scope.toggled = function(open) { - $log.log('Dropdown is now: ', open); - }; - - $scope.status = { - isopen: false - }; - - $scope.toggleDropdown = function($event) { - $event.preventDefault(); - $event.stopPropagation(); - $scope.status.isopen = !$scope.status.isopen; - }; - - $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content')); + $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); + }; + $scope.status = { + isopen: false + }; + $scope.toggleDropdown = function ($event) { + $event.preventDefault(); + $event.stopPropagation(); + $scope.status.isopen = !$scope.status.isopen; + }; + var getPage = function (curPage, pageSize) { + var firstRow = (curPage - 1) * pageSize; + var url = global_url+'/alarm/' + curPage + '/' + pageSize + ''; + 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[7] === "" ? "/null" : "/" + arguments[7]; + url += arguments[8] === "" ? "/null" : "/" + arguments[8]; + console.info(url); + $http.get(url, { + headers: { + 'Access-Control-Allow-Origin': "*", + "Content-Type": "application/json", + "Authorization": "Basic " + btoa("usecase" + ':' + "usecase") + } + }) + .success(function (data) { + $scope.gridOptions.totalItems = data.totalRecords; + //console.info($scope.gridOptions.totalItems); + $scope.gridOptions.data = data.alarms; + }); + }; $scope.gridOptions = { - data: 'myData', - columnDefs: [{ - field: 'name', - displayName: 'name', - width: '8%', - enableColumnMenu: false, - enableHiding: false, - suppressRemoveSort: true, - enableCellEdit: false - }, - {field: "Id"}, - {field: "State",cellFilter:'mapGender'}, - {field: "Cpu"}, - {field: "Memory"}, - {field: "Disk"}, - {field: "Network"}, - {field: "Action", cellTemplate : - '
' - , enableCellEdit:false}, + columnDefs: [ + {field: "alarmsHeader.eventId", displayName: 'Id', enableCellEdit: false}, + { + field: 'alarmsHeader.eventName', + displayName: 'eventName', + width: '8%', + enableColumnMenu: false, + 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}, ], enableSorting: true, useExternalSorting: false, @@ -103,7 +83,6 @@ app.controller('alarmGridCtrl', ['$scope','$log', '$http', '$timeout', '$interva enableHorizontalScrollbar: 1, enableVerticalScrollbar: 0, enableFiltering: true, - enablePagination: true, enablePaginationControls: true, paginationPageSizes: [10, 15, 20], @@ -112,7 +91,6 @@ app.controller('alarmGridCtrl', ['$scope','$log', '$http', '$timeout', '$interva //paginationTemplate:"
", totalItems: 0, useExternalPagination: true, - enableFooterTotalSelected: true, enableFullRowSelection: true, enableRowHeaderSelection: true, @@ -127,9 +105,7 @@ app.controller('alarmGridCtrl', ['$scope','$log', '$http', '$timeout', '$interva modifierKeysToMultiSelect: false, multiSelect: true, noUnselect: false, - selectionRowHeaderWidth: 20, - - + selectionRowHeaderWidth: 28, //---------------api--------------------- onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; @@ -139,48 +115,50 @@ app.controller('alarmGridCtrl', ['$scope','$log', '$http', '$timeout', '$interva getPage(newPage, pageSize); } }); - $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row, event) { if (row) { - var num = $.inArray(row.entity.Id, $scope.selectedRows); + var num = $.inArray(row.entity.alarmsHeader.eventId, $scope.selectedRows); if (num == -1) { - $scope.selectedRows.push(row.entity.Id); + $scope.selectedRows.push(row.entity.alarmsHeader.eventId); } else { $scope.selectedRows.splice(num, 1); } } }); - $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 ); + $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); } }; - - var getPage = function (curPage, pageSize) { - var firstRow = (curPage - 1) * pageSize; - $scope.gridOptions.totalItems = mydefalutData.length; - $scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize); - - //$scope.myData = mydefalutData.slice(firstRow, firstRow + pageSize); - }; - getPage(1, $scope.gridOptions.paginationPageSize); - - $scope.trashcan = function () { - alert('delete ' + $scope.selectedRows); + 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.generateCsv = function () { + if ($scope.selectedRows.length == 0){ + alert("please select row!"); + }else{ + $window.location = global_url+"/alarm/genCsv/"+$scope.selectedRows; + } }; - $scope.status = [ - {id: 1, name: 'danger', count: 10}, - {id: 2, name: 'warming', count: 8}, - {id: 3, name: 'normal', count: 7}, + {id: 1, name: 'CRITICAL', count: 10}, + {id: 2, name: 'MALOR', count: 8}, + {id: 3, name: 'MINOR', count: 7}, + {id: 4, name: 'WARNING', count: 8}, + {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.gridApi.grid.refresh(); + }; $scope.activeStatus = function (status_id) { - return status_id == $scope.selectedStatus; }; $scope.open = [ @@ -190,63 +168,61 @@ app.controller('alarmGridCtrl', ['$scope','$log', '$http', '$timeout', '$interva ]; $scope.selectOpen = function (v) { + $scope.vfstatus = typeof(v) == "undefined" ? "null" : 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.selectedOpen = v; - $scope.gridApi.grid.refresh(); }; $scope.activeOpen = function (open_id) { - return open_id == $scope.selectedOpen; }; - $scope.singleFilter = function (renderableRows) { var matcher = new RegExp($scope.selectedStatus); renderableRows.forEach(function (row) { - var match = false; - ['State'].forEach(function (field) { - if (row.entity[field].match(matcher)) { - match = true; - } - }); + var match = true; if (!match) { row.visible = false; } }); return renderableRows; }; -//input -$scope.menuState={show: false} - $scope.toggleMenu=function() - { - $scope.menuState.show=!$scope.menuState.show; - } - - $scope.singleModel = 1; - - $scope.radioModel = 'Middle'; - - $scope.checkModel = { - open: false, - close: true - }; - - $scope.checkResults = []; + $scope.menuState = {show: false} + $scope.toggleMenu = function () { + $scope.menuState.show = !$scope.menuState.show; + } + $scope.singleModel = 1; + $scope.radioModel = 'Middle'; - $scope.$watchCollection('checkModel', function () { - $scope.checkResults = []; - angular.forEach($scope.checkModel, function (value, key) { - if (value) { - $scope.checkResults.push(key); - } - }); - }); + $scope.checkModel = { + open: false, + close: true + }; + $scope.checkResults = []; + $scope.$watchCollection('checkModel', function () { + $scope.checkResults = []; + angular.forEach($scope.checkModel, function (value, key) { + if (value) { + $scope.checkResults.push(key); + } + }); + }); + $scope.alarmSearch = 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); + }; }]).filter('mapGender', function () { var genderHash = { - 1: 'danger', - 2: 'alarm' , - 3: 'normal' + 1: 'CRITICAL', + 2: 'MAJOR', + 3: 'MINOR', + 4: 'WARNING', + 5: 'NORMAL' }; - return function (input) { if (!input) { return ''; @@ -254,5 +230,5 @@ $scope.menuState={show: false} return genderHash[input]; } } - + }); \ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js index abd58cef..985ec877 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js @@ -13,14 +13,19 @@ See the License for the specific language governing permissions and limitations under the License. */ +var currentTab = 'app/uui/fusion/scripts/view-models/alarm.html'; + app.controller('cmCtrl',['$scope',function ($scope) { $scope.routeData = [ {name : 'Services' , url : 'app/uui/fusion/scripts/view-models/lifecyclemanagement.html' , nclass : 'fa fa-users'}, {name : 'Alarm' , url : 'app/uui/fusion/scripts/view-models/alarm.html' , nclass : 'fa fa-users'}, - {name : 'Performance' , url : 'app/uui/fusion/scripts/view-models/performance.html', nclass : 'fa fa-cog'}, - {name : 'About Performance Froms' , url : 'app/uui/fusion/scripts/view-models/performance-details.html', nclass : 'fa fa-cubes'}, + {name : 'Performance' , url : 'app/uui/fusion/scripts/view-models/performance.html', nclass : 'fa fa-cog'} ]; - $scope.currentTab = 'app/uui/fusion/scripts/view-models/alarm.html'; + $scope.currentTab = currentTab; + $scope.$watch('currentTab', function(newValue, oldValue) { + if (newValue === oldValue) { return; } // AKA first run + // $scope.onClickTab(newValue); + }); $scope.onClickTab = function (url) { $scope.currentTab = url; }; 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 64ee382e..f74928c3 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,12 +13,155 @@ See the License for the specific language governing permissions and limitations under the License. */ -app.controller('pertabCtrl',['$scope',function ($scope) { +app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { + $scope.tabes = [ + {title: 'one hour'}, + {title: 'one day'}, + {title: 'one month'}, + {title: 'one year'} + ]; + $scope.barChart = function (unit) { + $http.get(global_url + '/performance/diagram/' + unit + '/' + permanceId, { + headers: { + 'Access-Control-Allow-Origin': "*", + "Content-Type": "application/json" + } + }) + .success(function (data) { + if (unit === "hour") { + $scope.valuess = []; + for(var i=0;i<4;i++){ + $scope.valuess[i] = [ + {"x": '15min', "y": 4}, {"x": '30min', "y": 4}, {"x": '45min', "y": 12}, + {"x": '60min', "y": 3.27} + ]; + }; + var v = 0; + var i = 0; + 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]; + } + }); + console.info($scope.valuess); + for (var i = 0; i < 5; i++) { + window.setTimeout(function () { + redraw("", $scope.valuess); + }, 1500); + }; + } + if (unit === "day") { + $scope.valuess = []; + for(var i=0;i<4;i++){ + $scope.valuess[i] = [ + { "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} + ]; + }; + var v = 0; + var i = 0; + 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]; + } + }); + console.info($scope.valuess); + for (var i = 0; i < 5; i++) { + window.setTimeout(function () { + redraw("1", $scope.valuess); + }, 1500); + }; + } + if (unit === "month") { + $scope.valuess = []; + for(var i=0;i<4;i++){ + $scope.valuess[i] = [ + { "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} + ]; + }; + var v = 0; + var i = 0; + 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]; + } + }); + console.info($scope.valuess); + for (var i = 0; i < 5; i++) { + window.setTimeout(function () { + redraw("2", $scope.valuess); + }, 1500); + }; + } + if (unit === "year") { + $scope.valuess = []; + for(var i=0;i<12;i++){ + $scope.valuess[i] = [ + {"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} + ]; + }; + var v = 0; + var i = 0; + 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]; + } + }); + console.info($scope.valuess); + for (var i = 0; i < 5; i++) { + window.setTimeout(function () { + redraw("3", $scope.valuess); + }, 1500); + }; + } + }); + }; + $scope.oneHour = function () { + changerotate(0); + $scope.barChart('hour'); - $scope.tabes = [ - { title:'one hour'}, - { title:'one day' }, - { title:'one month' }, - { title:'one year' } - ]; + }; + $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'); + }; }]); 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 02e74c98..3ff06582 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 @@ -13,117 +13,178 @@ See the License for the specific language governing permissions and limitations under the License. */ -app.controller('perCtrl',function ($scope) { - -}); -app.controller('perGridCtrl', ['$scope', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', - function ($scope, $http, $timeout, $interval) { - - var mydefalutData = [ - { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" }, - { name: "shebei1", Id: "22", State: 50, Cpu: "40%", Memory: "60,0", Disk: "60,000", Network: "60,000" }, - { name: "shebei1", State: 50, Cpu: "40%", Memory: "60", Disk: "60,", Network: "60,000" }, - { name: "shebei1", State: 50, Cpu: "40%", Memory: "60,000", Disk: "60,000", Network: "60,000" }, - { name: "shebei1", State: 50, Cpu: "40%", Memory: "600", Disk: "60,000", Network: "60,000" }, - { name: "shebei1", State: 50, Cpu: "40%", Memory: "60,000", Disk: "60,000", Network: "60,000" }, - { name: "shebei1", State: 50, Cpu: "40%", Memory: "60,000", Disk: "60,000", Network: "60,000" } - ]; - $scope.jump = function (){ - console.log(1); - $scope.currentTab = '#/pre-details'; - }; +// +var permanceId=""; +app.controller('perGridCtrl', ['$scope', '$http', '$timeout', '$interval', '$window', 'uiGridConstants', 'uiGridGroupingConstants', + function ($scope, $http, $timeout, $interval,$window) { + $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"; + //angular.element(obj).scope().$apply(); + }; + $scope.selectedRows = new Array(); + $scope.seek1 = ""; + $scope.seek2 = ""; + $scope.seek3 = ""; + $scope.seek4 = ""; + $scope.seek5 = ""; + $scope.getSearch = function (){ + getPage(1, $scope.gridOptions.paginationPageSize, $scope.seek1===""?"null":$scope.seek1, + $scope.seek2===""?"null":$scope.seek2, $scope.seek3===""?"null":$scope.seek3, + $scope.seek4===""?"null":$scope.seek4, $scope.seek5===""?"null":$scope.seek5); + }; $scope.gridOptions = { - data: 'myData', - columnDefs: [{ field: 'name', + columnDefs: [{ + field: 'performanceHeader.eventName', displayName: 'name', width: '10%', enableColumnMenu: false, enableHiding: false, suppressRemoveSort: true, - enableCellEdit: false , - cellTemplate:'shebei1' - }, - { field: "Id",}, - { field: "State"}, - { field: "Cpu"}, - { field: "Memory"}, - { field: "Disk"}, - { field: "Network"} + enableCellEdit: false + }, { + field: "performanceHeader.eventId", + enableCellEdit: false, + displayName: 'Id', + cellTemplate: '{{row.entity.performanceHeader.eventId}}', + }, + {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} ], - enableSorting: true, useExternalSorting: false, enableGridMenu: true, showGridFooter: true, - enableHorizontalScrollbar : 1, - enableVerticalScrollbar : 0, + enableHorizontalScrollbar: 1, + enableVerticalScrollbar: 0, enableFiltering: true, // enablePagination: true, enablePaginationControls: true, paginationPageSizes: [10, 15, 20], - paginationCurrentPage:1, + paginationCurrentPage: 1, paginationPageSize: 10, //paginationTemplate:"
", - totalItems : 0, + totalItems: 0, useExternalPagination: true, - - - //- enableFooterTotalSelected: true, - enableFullRowSelection : true, - enableRowHeaderSelection : true, - enableRowSelection : false, - enableSelectAll : true, - enableSelectionBatchEvent : true, - isRowSelectable: function(row){ - if(row.entity.age > 45){ + enableFullRowSelection: true, + enableRowHeaderSelection: true, + enableRowSelection: false, + enableSelectAll: true, + enableSelectionBatchEvent: true, + isRowSelectable: function (row) { + if (row.entity.age > 45) { row.grid.api.selection.selectRow(row.entity); } }, - modifierKeysToMultiSelect: false , - multiSelect: true , + modifierKeysToMultiSelect: false, + multiSelect: true, noUnselect: false, - selectionRowHeaderWidth:30 , - - + selectionRowHeaderWidth: 30, //---------------api--------------------- - onRegisterApi: function(gridApi) { + onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; - gridApi.pagination.on.paginationChanged($scope,function(newPage, pageSize) { - if(getPage) { + gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { + if (getPage) { getPage(newPage, pageSize); } }); - - /*$scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){ - if(row){ - $scope.testRow = row.entity; + $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row, event) { + if (row) { + var num = $.inArray(row.entity.performanceHeader.eventId, $scope.selectedRows); + if (num == -1) { + $scope.selectedRows.push(row.entity.performanceHeader.eventId); + } + else { + $scope.selectedRows.splice(num, 1); + } } - });*/ - } + }); + $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); + } }; + + $scope.singleFilter = function (renderableRows) { + var matcher = new RegExp($scope.selectedStatus); + renderableRows.forEach(function (row) { + var match = true; + /*['State'].forEach(function (field) { + if (row.entity[field].match(matcher)) { + match = true; + } + });*/ + if (!match) { + row.visible = false; + } + }); + return renderableRows; }; + $scope.menuState = {show: false} + $scope.toggleMenu = function () { + $scope.menuState.show = !$scope.menuState.show; + } + $scope.singleModel = 1; + $scope.radioModel = 'Middle'; + + $scope.checkModel = { + open: false, + close: true + }; + $scope.checkResults = []; - - var getPage = function(curPage, pageSize) { + $scope.$watchCollection('checkModel', function () { + $scope.checkResults = []; + angular.forEach($scope.checkModel, function (value, key) { + if (value) { + $scope.checkResults.push(key); + } + }); + }); + var getPage = function (curPage, pageSize) { var firstRow = (curPage - 1) * pageSize; - $scope.gridOptions.totalItems = mydefalutData.length; - $scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize); - - //$scope.myData = mydefalutData.slice(firstRow, firstRow + pageSize); + var url = global_url+'/performance/' + curPage + '/' + pageSize + ''; + 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]; + console.info(url); + $http.get(url, { + headers: { + 'Access-Control-Allow-Origin': "*", + "Content-Type": "application/json", + "Authorization": "Basic " + btoa("usecase" + ':' + "usecase") + } + }) + .success(function (data) { + $scope.gridOptions.totalItems = data.totalRecords; + //console.info($scope.gridOptions.totalItems); + $scope.gridOptions.data = data.performances; + }); }; - - getPage(1, $scope.gridOptions.paginationPageSize); - - //input -$scope.menuState={show: false} - $scope.toggleMenu=function() - { - $scope.menuState.show=!$scope.menuState.show; - } - + getPage(1, $scope.gridOptions.paginationPageSize, $scope.seek1===""?"null":$scope.seek1, + $scope.seek2===""?"null":$scope.seek2, $scope.seek3===""?"null":$scope.seek3, + $scope.seek4===""?"null":$scope.seek4, $scope.seek5===""?"null":$scope.seek5); + + $scope.generateCsv = function () { + if ($scope.selectedRows.length == 0){ + alert("please select row!"); + }else{ + $window.location =global_url+"/performance/genCsv/"+$scope.selectedRows; + } + }; + //input + $scope.menuState = {show: false} + $scope.toggleMenu = function () { + $scope.menuState.show = !$scope.menuState.show; + } }]); \ 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 9fc1e38c..dc18c380 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,84 +14,71 @@ limitations under the License. -->
-

Alarm

- - - - - +

Alarm

-
-
+
-
-
- - - -
-
    -
  • cpu
    • -
  • state
    • -
  • memory
    • - -
-
    -
  • disk
    • -
  • Network
    • -
-
-
+
    +
  • cpu
    • +
  • state
    • +
  • memory
    • + +
+
    +
  • disk
    • +
  • Network
    • +
+
+
- +
-
+
-
+

Another Table of Existing Users

-
-
+
+ +
-
- -
-
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html index 390b2015..cba16b59 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html @@ -13,7 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. --> -
+
- +
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 6dc12726..70112e0a 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 @@ -41,138 +41,152 @@ padding: 10px; } - -

Performance Details

-
+
- - +
-
-
+
+
-
CPU
+
CPU + +

-
+
-
Memory
+
Memory +

-
+
-
Disk
+
Disk +

-
-
-
Network
+
+
+
Network +

- +
-
-
+
+
-
CPU
+
CPU +

-
+
-
Memory
+
Memory +

-
+
-
Disk
+
Disk +

-
-
-
Network
+
+
+
Network +

- +
-
-
+
+
-
CPU
+
CPU +

-
+
-
Memory
+
Memory +

-
+
-
Disk
+
Disk +

-
-
-
Network
+
+
+
Network +

- +
-
-
+
+
-
CPU
+
CPU +

-
+
-
Memory
+
Memory +

-
+
-
Disk
+
Disk +

-
-
-
Network
+
+
+
Network +

@@ -180,13 +194,11 @@
-




-
\ 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 43e27022..426836c6 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 @@ -13,48 +13,47 @@ See the License for the specific language governing permissions and limitations under the License. --> -
-
-

Performance

-
-
-
-

Another Table of Existing Users

-
-
-
- - - -
-
- -
-
    -
  • cpu
    • -
  • state
    • -
  • memory
    • - -
-
    -
  • disk
    • -
  • Network
    • -
-
-
-
-
- -
-
+
+
+

Performance

+
+
    +
  • cpu
    • +
  • state
    • +
  • memory
    • + +
+
    +
  • disk
    • +
  • Network
    • +
+
+
+
+
+ +
+
+
+
+
+
+
+

Another Table of Existing Users

+
+
+
+ +
+
+
+
-
-
-
-
-
+
-- cgit 1.2.3-korg