diff options
Diffstat (limited to 'usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts')
10 files changed, 789 insertions, 0 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 new file mode 100644 index 00000000..c5558eca --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js @@ -0,0 +1,56 @@ + + +//$(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', { + templateUrl: 'app/uui/fusion/scripts/view-models/alarm.html' + }) + .when('/pre', { + templateUrl: 'app/uui/fusion/scripts/view-models/performance.html' + }) + .when('/pre-details', { + templateUrl: 'app/uui/fusion/scripts/view-models/performance-details.html' + }) + .when('/common', { + templateUrl: 'app/uui/fusion/scripts/view-models/left-menu.html' + }) + .otherwise({redirectTo: '/common'}) +}); 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 new file mode 100644 index 00000000..44025e92 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js @@ -0,0 +1,158 @@ + +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}, { "x":1420088400000 , "y":9.62333333333333}, + { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":16.1166666666667} ] } ]; +var chart1,chart2,chart3,chart4; +nv.addGraph(function() { + chart1 = nv.models.multiBarChart() + .margin({top: 30, right: 60, bottom: 50, left: 100}) + .showLegend(true) + .reduceXTicks(false) + .forceY([0, 34.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,1420088400000,1422766800000]) + .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) + .transition().duration(1000) + .call(chart1); + nv.utils.windowResize(chart1.update); + return chart1; +}); +nv.addGraph(function() { + chart2 = nv.models.multiBarChart() + .margin({top: 30, right: 60, bottom: 50, left: 100}) + .showLegend(true) + .reduceXTicks(false) + .forceY([0, 34.0]) + .showControls(false) + .stacked(false) + .logScale(false) + .legendPos('top') + .color(d3.scale.category20b().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) + .transition().duration(1000) + .call(chart2); + nv.utils.windowResize(chart2.update); + return chart2; +}); +nv.addGraph(function() { + chart3 = nv.models.multiBarChart() + .margin({top: 30, right: 60, bottom: 50, left: 100}) + .showLegend(true) + .reduceXTicks(false) + .forceY([0, 34.0]) + .showControls(false) + .stacked(false) + .logScale(false) + .legendPos('top') + .color(d3.scale.category20c().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('#Diskchart svg') + .datum(historicalBarChart) + .transition().duration(1000) + .call(chart3); + nv.utils.windowResize(chart3.update); + return chart3; +}); +nv.addGraph(function() { + chart4 = nv.models.multiBarChart() + .margin({top: 30, right: 60, bottom: 50, left: 100}) + .showLegend(true) + .reduceXTicks(false) + .forceY([0, 34.0]) + .showControls(false) + .stacked(false) + .logScale(false) + .legendPos('top') + .color(d3.scale.category50().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) + .transition().duration(1000) + .call(chart4); + nv.utils.windowResize(chart4.update); + return chart4; +}); +function redraw() { + d3.select('#CPUchart svg') + .datum(historicalBarChart) + .transition().duration(500) + .call(chart1); + d3.select('#Memorychart svg') + .datum(historicalBarChart) + .transition().duration(500) + .call(chart2); + d3.select('#Diskchart svg') + .datum(historicalBarChart) + .transition().duration(1000) + .call(chart3); + d3.select('#Networkchart svg') + .datum(historicalBarChart) + .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 new file mode 100644 index 00000000..6ca18ac6 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js @@ -0,0 +1,233 @@ +app.controller('perCtrl', function ($scope) { + +}); + +app.controller('alarmGridCtrl', ['$scope','$log', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', + function ($scope,$log, $http, $timeout, $interval) { + $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.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="#">1</a></li><li role="menuitem"><a href="#">2</a></li><li role="menuitem"><a href="#">3</a></li></ul></div>' + , enableCellEdit:false}, + ], + enableSorting: true, //是否排序 + useExternalSorting: false, //是否使用自定义排序规则 + enableGridMenu: true, //是否显示grid 菜单 + showGridFooter: true, //是否显示grid footer + enableHorizontalScrollbar: 1, //grid水平滚动条是否显示, 0-不显示 1-显示 + enableVerticalScrollbar: 0, //grid垂直滚动条是否显示, 0-不显示 1-显示 + enableFiltering: true, + //-------- 分页属性 ---------------- + enablePagination: true, //是否分页，默认为true + enablePaginationControls: true, //使用默认的底部分页 + paginationPageSizes: [10, 15, 20], //每页显示个数可选项 + paginationCurrentPage: 1, //当前页码 + paginationPageSize: 10, //每页显示个数 + //paginationTemplate:"<div></div>", //自定义底部分页代码 + totalItems: 0, // 总数量 + useExternalPagination: true,//是否使用分页按钮 + + + //----------- 选中 ---------------------- + enableFooterTotalSelected: true, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true + enableFullRowSelection: true, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中 + enableRowHeaderSelection: true, //是否显示选中checkbox框 ,默认为true + enableRowSelection: false, // 行选择是否可用，默认为true; + enableSelectAll: true, // 选择所有checkbox是否可用，默认为true; + enableSelectionBatchEvent: true, //默认true + isRowSelectable: function (row) { //GridRow + /* if(row.entity.age > 45){ + row.grid.api.selection.selectRow(row.entity); // 选中行 + }*/ + }, + modifierKeysToMultiSelect: false,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true; + multiSelect: true,// 是否可以选择多个,默认为true; + noUnselect: false,//默认false,选中后是否可以取消选中 + selectionRowHeaderWidth: 20,//默认30 ，设置选择列的宽度； + + + //---------------api--------------------- + onRegisterApi: function (gridApi) { + $scope.gridApi = gridApi; + //分页按钮事件 + gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { + if (getPage) { + getPage(newPage, pageSize); + } + }); + //行选中事件 + $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row, event) { + if (row) { + var num = $.inArray(row.entity.Id, $scope.selectedRows); + if (num == -1) { + $scope.selectedRows.push(row.entity.Id); + } + else { + $scope.selectedRows.splice(num, 1); + } + } + }); + $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); + }; + + $scope.status = [ + {id: 1, name: 'danger', count: 10}, + {id: 2, name: 'alarm', count: 8}, + {id: 3, name: 'normal', count: 7}, + {id: undefined, name: 'All', count: 7} + ]; + + + + $scope.selectStatus = function (v) { + $scope.selectedStatus = v; + $scope.gridApi.grid.refresh(); + }; + $scope.activeStatus = function (status_id) { + + return status_id == $scope.selectedStatus; + }; + + $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; + } + }); + 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.$watchCollection('checkModel', function () { + $scope.checkResults = []; + angular.forEach($scope.checkModel, function (value, key) { + if (value) { + $scope.checkResults.push(key); + } + }); + }); + + }]).filter('mapGender', function () { + var genderHash = { + 1: 'danger', + 2: 'alarm' , + 3: 'normal' + }; + + return function (input) { + if (!input) { + return ''; + } else { + 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 new file mode 100644 index 00000000..0f776b03 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js @@ -0,0 +1,14 @@ +app.controller('cmCtrl',['$scope',function ($scope) { + $scope.routeData = [ + {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'}, + ]; + $scope.currentTab = 'app/uui/fusion/scripts/view-models/alarm.html'; + $scope.onClickTab = function (url) { + $scope.currentTab = url; + }; + $scope.isActiveTab = function (tabRoute) { + return tabRoute == $scope.currentTab; + } +}]);
\ No newline at end of file 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 new file mode 100644 index 00000000..4c38bf35 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js @@ -0,0 +1,9 @@ +app.controller('pertabCtrl',['$scope',function ($scope) { + + $scope.tabes = [ + { title:'one hour'}, + { title:'one day', content:'' }, + { title:'one month', content:'Dynamic content 2' }, + { title:'one year', content:'Dynamic content 2' } + ]; +}]); 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 new file mode 100644 index 00000000..e16673d0 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js @@ -0,0 +1,108 @@ +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.gridOptions = { + data: 'myData', + columnDefs: [{ field: 'name', + displayName: 'name', + width: '10%', + enableColumnMenu: false,// 是否显示列头部菜单按钮 + enableHiding: false, + suppressRemoveSort: true, + enableCellEdit: false ,// 是否可编辑 + cellTemplate:'<a href ng-repeat=" data in mydefalutData">{{data.name}}</a>', + }, + { field: "Id",}, + { field: "State"}, + { field: "Cpu"}, + { field: "Memory"}, + { field: "Disk"}, + { field: "Network"} + ], + + enableSorting: true, //是否排序 + useExternalSorting: false, //是否使用自定义排序规则 + enableGridMenu: true, //是否显示grid 菜单 + showGridFooter: true, //是否显示grid footer + enableHorizontalScrollbar : 1, //grid水平滚动条是否显示, 0-不显示 1-显示 + enableVerticalScrollbar : 0, //grid垂直滚动条是否显示, 0-不显示 1-显示 + enableFiltering: true, + //-------- 分页属性 ---------------- + enablePagination: true, //是否分页，默认为true + enablePaginationControls: true, //使用默认的底部分页 + paginationPageSizes: [10, 15, 20], //每页显示个数可选项 + paginationCurrentPage:1, //当前页码 + paginationPageSize: 10, //每页显示个数 + //paginationTemplate:"<div></div>", //自定义底部分页代码 + totalItems : 0, // 总数量 + useExternalPagination: true,//是否使用分页按钮 + + + //----------- 选中 ---------------------- + enableFooterTotalSelected: true, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true + enableFullRowSelection : true, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中 + enableRowHeaderSelection : true, //是否显示选中checkbox框 ,默认为true + enableRowSelection : true, // 行选择是否可用，默认为true; + enableSelectAll : true, // 选择所有checkbox是否可用，默认为true; + enableSelectionBatchEvent : true, //默认true + isRowSelectable: function(row){ //GridRow + if(row.entity.age > 45){ + row.grid.api.selection.selectRow(row.entity); // 选中行 + } + }, + modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true; + multiSelect: true ,// 是否可以选择多个,默认为true; + noUnselect: false,//默认false,选中后是否可以取消选中 + selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度； + + + + //---------------api--------------------- + onRegisterApi: function(gridApi) { + $scope.gridApi = gridApi; + //分页按钮事件 + 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; + } + }); + } + }; + + 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); + + //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 new file mode 100644 index 00000000..b40e8520 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html @@ -0,0 +1,62 @@ + +<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> + <div class="row margin-bottom-10"> + <div class="col-md-6"> + <ul class="nav nav-pills"> + <li ng-repeat="s in status" + ng-click="selectStatus(s.id)" + ng-class="{active:activeStatus(s.id)}" > + <a href=""> + {{s.name}} + <span class="badge">{{s.count}}</span> + </a> + </li> + <input type="hidden" ng-model="selectedStatus" /> + </ul> + </div> + </div> + <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> + </div> + <div class="row"> + <div class="col-md-4"> + <h4 class="margin-bottom-15">Another Table of Existing Users</h4> + </div> + <div class="col-md-7"> + </div> + <div class="col-md-1"> + <button ng-click="trashcan()" class="glyphicon glyphicon-trash btn btn-primary"></button> + </div> + </div> + <div> + <div ui-grid="gridOptions" style="width: 100%; height: 500px; 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 new file mode 100644 index 00000000..a67d8456 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html @@ -0,0 +1,29 @@ +<div ng-controller="cmCtrl"> + <div id="main-wrapper"> + <div id="navbar" role="navigation"> + <div class="navbar-header"> + <div class="logo"><h1>UUI</h1></div> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + </div> + <div class="template-page-wrapper"> + <div class="navbar-collapse collapse templatemo-sidebar"> + <ul class="templatemo-sidebar-menu" > + <li ng-repeat="x in routeData" + ng-class="{active:isActiveTab(x.url)}" ng-click="onClickTab(x.url)"> + <a href=""> + <i class="{{x.nclass}}"></i>{{x.name}} + </a> + </li> + </ul> + </div> + </div> + </div> + + <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 new file mode 100644 index 00000000..a5ecfd06 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html @@ -0,0 +1,79 @@ +<style> + body { + overflow-y:scroll; + } + text { + font: 12px sans-serif; + } + svg { + display: block; + } + #CPUchart,#Memorychart,#Diskchart,#Networkchart svg { + height: 200px; + width: 400px; + min-width: 100px; + min-height: 100px; + } + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } + .nodatadiv { + display: table-cell; + width: 600px; + height:300px; + text-align:center; + vertical-align: middle; + } + .nodatainner { + padding: 10px; + } + </style> + + <!--/.navbar-collapse --> + + <div class="templatemo-content-wrapper"> + <div class="templatemo-content"> + <h1>Performance Details</h1> + <div class="row" style="min-height: 500px" ng-controller="pertabCtrl"> + <div class="col-md-12 col-sm-12" ng-controller="pertabCtrl"> + <uib-tabset active="active" > + <uib-tab index="$index + 1" ng-repeat="tab in tabes" heading="{{tab.title}}" disable="tab.disabled"> + <div class="templatemo-charts"> + <div class="row"> + <div class="col-md-5 col-sm-6"> + <div class="panel panel-success"> + <div class="panel-heading">CPU</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="panel panel-success"> + <div class="panel-heading">Memory</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="panel panel-success"> + <div class="panel-heading">Disk</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 align="center"><H3></H3></div><div id="Networkchart"> <svg></svg> </div> + </div> + </div> + </div> + </div> + </uib-tab> + </uib-tabset> + </div> + <br /> + <br /> + <br /> + <br /> + </div> + + </div> + </div>
\ No newline at end of file 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 new file mode 100644 index 00000000..f2ae7b44 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html @@ -0,0 +1,41 @@ +<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> + + <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> + </div> + <div ui-grid="gridOptions" style="width: 100%;margin-top:10px; height: 500px; text-align: center;" ui-grid-edit ui-grid-pagination + ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize> + </div> + </div> + </div> + </div> + + + + |