diff options
Diffstat (limited to 'usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts')
10 files changed, 643 insertions, 472 deletions
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 = "<div id='noData'><b>No Data Available</b></div>"; -// document.getElementById("CPUchart").className="nodatadiv"; -// document.getElementById("Memorychart").innerHTML = "<div id='noData'><b>No Data Available</b></div>"; -// 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 : - '<div uib-dropdown style="position: absolute;padding-left: 4%;"><button id="btn-append-to-single-button" type="button" style="padding:0;" class="btn btn-primary" uib-dropdown-toggle>Action<span class="caret"></span></button><ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-single-button"><li role="menuitem"><a href="#">clear</a></li><li role="menuitem"><a href="#">2</a></li><li role="menuitem"><a href="#">3</a></li></ul></div>' - , 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:"<div></div>", 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:'<a ng-click="jump()">shebei1</a>' - }, - { field: "Id",}, - { field: "State"}, - { field: "Cpu"}, - { field: "Memory"}, - { field: "Disk"}, - { field: "Network"} + enableCellEdit: false + }, { + 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>', + }, + {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:"<div></div>", - 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. --> <div class="templatemo-content" ng-controller="alarmGridCtrl"> - <h1>Alarm</h1> - <!--<div class="btn-group" style="margin-top:10px;margin-bottom:10px;">--> - <!--<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'open'" uncheckable>OPEN</label>--> - <!--<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'close'" uncheckable>CLOSE</label>--> - <!--</div>--> - + <h1>Alarm</h1> <div class="row margin-bottom-20"> - </div> <div class="row margin-bottom-10"> - <div class="col-md-5"> + <div class="col-md-8"> <ul class="nav nav-pills"> - <li ng-repeat="s in status" + <li style="background-color: #ddd" + ng-repeat="s in status" ng-click="selectStatus(s.id)" - ng-class="{active:activeStatus(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" /> + <input type="hidden" ng-model="selectedStatus"/> </ul> </div> - <div class="col-md-4"> <ul class="nav nav-pills"> - <li ng-repeat="o in open" - ng-click="selectOpen(s.id)" - ng-class="{active:activeOpen(o.id)}" > + <li style="background-color: #ddd" ng-repeat="O in open" + ng-click="selectOpen(O.id)" + ng-class="{active:activeOpen(O.id)}"> <a href=""> - {{o.name}} - <span class="badge">{{o.count}}</span> + {{O.name}} + <span class="badge">{{O.count}}</span> </a> </li> - <input type="hidden" ng-model="selectedOpen" /> + <input type="hidden" ng-model="selectedOpen"/> </ul> </div> - <div class="col-md-3"> - <button ng-click="trashcan()" class="glyphicon glyphicon-trash btn btn-primary"></button> - <button ng-click="" class=" btn btn-primary">remove</button> - <button ng-click="" class="btn btn-primary">CSV</button> - </div> </div> - <ul id="list"> - <li>cpu <input type="text" /></li> - <li>state <input type="text" /></li> - <li>memory<input type="text" /></li> - <button>search</button> -</ul> -<ul id="list" ng-show='menuState.show'> - <li>disk <input type="text"/></li> - <li>Network <input type="text"/></li> -</ul> - <div class="row"> - <div class="col-md-5" style="border-top:1px dotted #ddd"> + <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> + <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> + </ul> + <div class="row"> + <div class="col-md-5" style="border-top:1px dotted #ddd"> </div> <div class="col-md-2" style="border:1px dotted #ddd;border-top:none;text-align:center" ng-click="toggleMenu()"> - <span class="caret"></span> + <span class="caret"></span> </div> - <div class="col-md-5" style="border-top:1px dotted #ddd"> + <div class="col-md-5" style="border-top:1px dotted #ddd" > </div> </div> <div class="row"> - <div class="col-md-4"> + <div class="col-md-11"> <h4 class="margin-bottom-15">Another Table of Existing Users</h4> </div> - <div class="col-md-5"> - </div> + <div class="col-md-1"> + <button ng-click="generateCsv()" class="btn btn-primary">CSV</button> + </div> </div> <div> - <div ui-grid="gridOptions" style="width: 100%; min-height: 320px; text-align: center;" ui-grid-edit + <div ui-grid="gridOptions" style="width: 100%;text-align: center;" ui-grid-edit ui-grid-pagination ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize> </div> - - </div> - </div> 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. --> -<div ng-controller="cmCtrl"> +<div id="lm" ng-controller="cmCtrl"> <div id="main-wrapper"> <div id="navbar" role="navigation"> <div class="navbar-header"> @@ -39,6 +39,6 @@ </div> </div> </div> - + <input type="hidden" ng-model="currentTab" /> <div ng-include="currentTab"></div> </div> 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; } </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" ng-controller="pertabCtrl"> + <div class="col-md-12 col-sm-12"> <uib-tabset active="active" > - <!--<uib-tab index="$index + 1" ng-repeat="tab in tabes" heading="{{tab.title}}" disable="tab.disabled">--> - <uib-tab heading="one hour"> + <uib-tab heading="one hour" ng-click="oneHour()" > <div class="templatemo-charts"> - <div class="row"> - <div class="col-md-5 col-sm-6"> + <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</div> + <div class="panel-heading">CPU + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Memory</div> + <div class="panel-heading">Memory + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Disk</div> + <div class="panel-heading">Disk + <button ng-click="" 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-5 col-sm-6"> - <div class="panel panel-primary"> - <div class="panel-heading">Network</div> + <div class="col-md-6 col-sm-12"> + <div class="panel panel-success"> + <div class="panel-heading">Network + <button ng-click="" 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"> + <uib-tab heading="one day" ng-click="oneDay()"> <div class="templatemo-charts"> - <div class="row"> - <div class="col-md-5 col-sm-6"> + <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</div> + <div class="panel-heading">CPU + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Memory</div> + <div class="panel-heading">Memory + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Disk</div> + <div class="panel-heading">Disk + <button ng-click="" 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-5 col-sm-6"> - <div class="panel panel-primary"> - <div class="panel-heading">Network</div> + <div class="col-md-6 col-sm-12"> + <div class="panel panel-success"> + <div class="panel-heading">Network + <button ng-click="" 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"> + <uib-tab heading="one month" ng-click="oneMonth()"> <div class="templatemo-charts"> - <div class="row"> - <div class="col-md-5 col-sm-6"> + <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</div> + <div class="panel-heading">CPU + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Memory</div> + <div class="panel-heading">Memory + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Disk</div> + <div class="panel-heading">Disk + <button ng-click="" 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-5 col-sm-6"> - <div class="panel panel-primary"> - <div class="panel-heading">Network</div> + <div class="col-md-6 col-sm-12"> + <div class="panel panel-success"> + <div class="panel-heading">Network + <button ng-click="" 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"> + <uib-tab heading="one year" ng-click="oneYear()"> <div class="templatemo-charts"> - <div class="row"> - <div class="col-md-5 col-sm-6"> + <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</div> + <div class="panel-heading">CPU + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Memory</div> + <div class="panel-heading">Memory + <button ng-click="" 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-5 col-sm-6"> + <div class="col-md-6 col-sm-12"> <div class="panel panel-success"> - <div class="panel-heading">Disk</div> + <div class="panel-heading">Disk + <button ng-click="" 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-5 col-sm-6"> - <div class="panel panel-primary"> - <div class="panel-heading">Network</div> + <div class="col-md-6 col-sm-12"> + <div class="panel panel-success"> + <div class="panel-heading">Network + <button ng-click="" 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> @@ -180,13 +194,11 @@ </div> </uib-tab> </uib-tabset> - </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.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. --> -<div class="templatemo-content-wrapper"> - <div class="templatemo-content"> - <h1>Performance</h1> - <div class="row"> - <div class="col-md-9" > - <div class="table-responsive"> - <h4 class="margin-bottom-15">Another Table of Existing Users</h4> - </div> - </div> - <div class="col-md-3"> - <button ng-click="trashcan()" class="glyphicon glyphicon-trash btn btn-primary"></button> - <button ng-click="" class=" btn btn-primary">remove</button> - <button ng-click="" class="btn btn-primary">CSV</button> - </div> - </div> - - <div ng-controller="perGridCtrl"> - <ul id="list"> - <li>cpu <input type="text" /></li> - <li>state <input type="text" /></li> - <li>memory<input type="text" /></li> - <button>search</button> -</ul> -<ul id="list" ng-show='menuState.show'> - <li>disk <input type="text"/></li> - <li>Network <input type="text"/></li> -</ul> - <div class="row"> - <div class="col-md-5" style="border-top:1px dotted #ddd"> - </div> - <div class="col-md-2" style="border:1px dotted #ddd;border-top:none;text-align:center" ng-click="toggleMenu()"> - <span class="caret"></span> - </div> - <div class="col-md-5" style="border-top:1px dotted #ddd"> +<div class="templatemo-content-wrapper" ng-controller="perGridCtrl"> + <div class="templatemo-content"> + <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> + <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> + </ul> + <div class="row"> + <div class="col-md-5" style="border-top:1px dotted #ddd"> + </div> + <div class="col-md-2" style="border:1px dotted #ddd;border-top:none;text-align:center" + ng-click="toggleMenu()"> + <span class="caret"></span> + </div> + <div class="col-md-5" style="border-top:1px dotted #ddd"> + </div> + </div> + <div class="row"> + <div class="col-md-11"> + <div class="table-responsive"> + <h4 class="margin-bottom-15">Another Table of Existing Users</h4> + </div> + </div> + <div class="col-md-1"> + <button ng-click="generateCsv()" class="btn btn-primary">CSV</button> + </div> + </div> + <div ui-grid="gridOptions" style="width: 100%;margin-top:10px; text-align: center;" ui-grid-edit + ui-grid-pagination + ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize> + </div> </div> </div> - <div ui-grid="gridOptions" style="width: 100%;margin-top:10px; min-height: 350px; text-align: center;" ui-grid-edit ui-grid-pagination - ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize> - </div> - </div> - </div> - </div> +</div> |