diff options
Diffstat (limited to 'usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts')
15 files changed, 1895 insertions, 602 deletions
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/angular-nvd3.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/angular-nvd3.js new file mode 100644 index 00000000..c1c101ce --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/angular-nvd3.js @@ -0,0 +1,595 @@ +/************************************************************************** + * AngularJS-nvD3, v1.0.7-dev; MIT License + * http://krispo.github.io/angular-nvd3 + **************************************************************************/ +(function(){ + + 'use strict'; + + angular.module('nvd3', []) + + .directive('nvd3', ['nvd3Utils', function(nvd3Utils){ + return { + restrict: 'AE', + scope: { + data: '=', //chart data, [required] + options: '=', //chart options, according to nvd3 core api, [required] + api: '=?', //directive global api, [optional] + events: '=?', //global events that directive would subscribe to, [optional] + config: '=?', //global directive configuration, [optional] + onReady: '&?' //callback function that is called with internal scope when directive is created [optional] + }, + link: function(scope, element, attrs){ + var defaultConfig = { + extended: false, + visible: true, + disabled: false, + refreshDataOnly: true, + deepWatchOptions: true, + deepWatchData: true, + deepWatchDataDepth: 2, // 0 - by reference (cheap), 1 - by collection item (the middle), 2 - by value (expensive) + debounce: 10, // default 10ms, time silence to prevent refresh while multiple options changes at a time + debounceImmediate: true // immediate flag for debounce function + }; + + //flag indicates if directive and chart is ready + scope.isReady = false; + + //basic directive configuration + scope._config = angular.extend(defaultConfig, scope.config); + + //directive global api + scope.api = { + // Fully refresh directive + refresh: function(){ + scope.api.updateWithOptions(scope.options); + scope.isReady = true; + }, + + // Fully refresh directive with specified timeout + refreshWithTimeout: function(t){ + setTimeout(function(){ + scope.api.refresh(); + }, t); + }, + + // Update chart layout (for example if container is resized) + update: function() { + if (scope.chart && scope.svg) { + scope.svg.datum(scope.data).call(scope.chart); + // scope.chart.update(); + } else { + scope.api.refresh(); + } + }, + + // Update chart layout with specified timeout + updateWithTimeout: function(t){ + setTimeout(function(){ + scope.api.update(); + }, t); + }, + + // Update chart with new options + updateWithOptions: function(options){ + // Clearing + scope.api.clearElement(); + + // Exit if options are not yet bound + if (angular.isDefined(options) === false) return; + + // Exit if chart is hidden + if (!scope._config.visible) return; + + // Initialize chart with specific type + scope.chart = nv.models[options.chart.type](); + + // Generate random chart ID + scope.chart.id = Math.random().toString(36).substr(2, 15); + + angular.forEach(scope.chart, function(value, key){ + if (key[0] === '_'); + else if ([ + 'clearHighlights', + 'highlightPoint', + 'id', + 'options', + 'resizeHandler', + 'state', + 'open', + 'close', + 'tooltipContent' + ].indexOf(key) >= 0); + + else if (key === 'dispatch') { + if (options.chart[key] === undefined || options.chart[key] === null) { + if (scope._config.extended) options.chart[key] = {}; + } + configureEvents(scope.chart[key], options.chart[key]); + } + + else if ([ + 'bars', + 'bars1', + 'bars2', + 'boxplot', + 'bullet', + 'controls', + 'discretebar', + 'distX', + 'distY', + 'interactiveLayer', + 'legend', + 'lines', + 'lines1', + 'lines2', + 'multibar', + 'pie', + 'scatter', + 'scatters1', + 'scatters2', + 'sparkline', + 'stack1', + 'stack2', + 'sunburst', + 'tooltip', + 'x2Axis', + 'xAxis', + 'y1Axis', + 'y2Axis', + 'y3Axis', + 'y4Axis', + 'yAxis', + 'yAxis1', + 'yAxis2' + ].indexOf(key) >= 0 || + // stacked is a component for stackedAreaChart, but a boolean for multiBarChart and multiBarHorizontalChart + (key === 'stacked' && options.chart.type === 'stackedAreaChart')) { + if (options.chart[key] === undefined || options.chart[key] === null) { + if (scope._config.extended) options.chart[key] = {}; + } + configure(scope.chart[key], options.chart[key], options.chart.type); + } + + //TODO: need to fix bug in nvd3 + else if ((key === 'focusHeight') && options.chart.type === 'lineChart'); + else if ((key === 'focusHeight') && options.chart.type === 'lineWithFocusChart'); + else if ((key === 'xTickFormat' || key === 'yTickFormat') && options.chart.type === 'lineWithFocusChart'); + else if ((key === 'tooltips') && options.chart.type === 'boxPlotChart'); + else if ((key === 'tooltipXContent' || key === 'tooltipYContent') && options.chart.type === 'scatterChart'); + else if ((key === 'x' || key === 'y') && options.chart.type === 'forceDirectedGraph'); + + else if (options.chart[key] === undefined || options.chart[key] === null){ + if (scope._config.extended) { + if (key==='barColor') + options.chart[key] = value()(); + else + options.chart[key] = value(); + } + } + + else scope.chart[key](options.chart[key]); + }); + + // Update with data + if (options.chart.type === 'sunburstChart') { + scope.api.updateWithData(angular.copy(scope.data)); + } else { + scope.api.updateWithData(scope.data); + } + + // Configure wrappers + if (options['title'] || scope._config.extended) configureWrapper('title'); + if (options['subtitle'] || scope._config.extended) configureWrapper('subtitle'); + if (options['caption'] || scope._config.extended) configureWrapper('caption'); + + + // Configure styles + if (options['styles'] || scope._config.extended) configureStyles(); + + nv.addGraph(function() { + if (!scope.chart) return; + + // Remove resize handler. Due to async execution should be placed here, not in the clearElement + if (scope.chart.resizeHandler) scope.chart.resizeHandler.clear(); + + // Update the chart when window resizes + scope.chart.resizeHandler = nv.utils.windowResize(function() { + scope.chart && scope.chart.update && scope.chart.update(); + }); + + /// Zoom feature + if (options.chart.zoom !== undefined && [ + 'scatterChart', + 'lineChart', + 'candlestickBarChart', + 'cumulativeLineChart', + 'historicalBarChart', + 'ohlcBarChart', + 'stackedAreaChart' + ].indexOf(options.chart.type) > -1) { + nvd3Utils.zoom(scope, options); + } + + return scope.chart; + }, options.chart['callback']); + }, + + // Update chart with new data + updateWithData: function (data){ + if (data) { + // remove whole svg element with old data + d3.select(element[0]).select('svg').remove(); + + var h, w; + + // Select the current element to add <svg> element and to render the chart in + scope.svg = d3.select(element[0]).append('svg'); + if (h = scope.options.chart.height) { + if (!isNaN(+h)) h += 'px'; //check if height is number + scope.svg.attr('height', h).style({height: h}); + } + if (w = scope.options.chart.width) { + if (!isNaN(+w)) w += 'px'; //check if width is number + scope.svg.attr('width', w).style({width: w}); + } else { + scope.svg.attr('width', '100%').style({width: '100%'}); + } + + scope.svg.datum(data).call(scope.chart); + } + }, + + // Fully clear directive element + clearElement: function (){ + element.find('.title').remove(); + element.find('.subtitle').remove(); + element.find('.caption').remove(); + element.empty(); + + // remove tooltip if exists + if (scope.chart && scope.chart.tooltip && scope.chart.tooltip.id) { + d3.select('#' + scope.chart.tooltip.id()).remove(); + } + + // To be compatible with old nvd3 (v1.7.1) + if (nv.graphs && scope.chart) { + for (var i = nv.graphs.length - 1; i >= 0; i--) { + if (nv.graphs[i] && (nv.graphs[i].id === scope.chart.id)) { + nv.graphs.splice(i, 1); + } + } + } + if (nv.tooltip && nv.tooltip.cleanup) { + nv.tooltip.cleanup(); + } + if (scope.chart && scope.chart.resizeHandler) scope.chart.resizeHandler.clear(); + scope.chart = null; + }, + + // Get full directive scope + getScope: function(){ return scope; }, + + // Get directive element + getElement: function(){ return element; } + }; + + // Configure the chart model with the passed options + function configure(chart, options, chartType){ + if (chart && options){ + angular.forEach(chart, function(value, key){ + if (key[0] === '_'); + else if (key === 'dispatch') { + if (options[key] === undefined || options[key] === null) { + if (scope._config.extended) options[key] = {}; + } + configureEvents(value, options[key]); + } + else if (key === 'tooltip') { + if (options[key] === undefined || options[key] === null) { + if (scope._config.extended) options[key] = {}; + } + configure(chart[key], options[key], chartType); + } + else if (key === 'contentGenerator') { + if (options[key]) chart[key](options[key]); + } + else if ([ + 'axis', + 'clearHighlights', + 'defined', + 'highlightPoint', + 'nvPointerEventsClass', + 'options', + 'rangeBand', + 'rangeBands', + 'scatter', + 'open', + 'close', + 'node' + ].indexOf(key) === -1) { + if (options[key] === undefined || options[key] === null){ + if (scope._config.extended) options[key] = value(); + } + else chart[key](options[key]); + } + }); + } + } + + // Subscribe to the chart events (contained in 'dispatch') + // and pass eventHandler functions in the 'options' parameter + function configureEvents(dispatch, options){ + if (dispatch && options){ + angular.forEach(dispatch, function(value, key){ + if (options[key] === undefined || options[key] === null){ + if (scope._config.extended) options[key] = value.on; + } + else dispatch.on(key + '._', options[key]); + }); + } + } + + // Configure 'title', 'subtitle', 'caption'. + // nvd3 has no sufficient models for it yet. + function configureWrapper(name){ + var _ = nvd3Utils.deepExtend(defaultWrapper(name), scope.options[name] || {}); + + if (scope._config.extended) scope.options[name] = _; + + var wrapElement = angular.element('<div></div>').html(_['html'] || '') + .addClass(name).addClass(_.className) + .removeAttr('style') + .css(_.css); + + if (!_['html']) wrapElement.text(_.text); + + if (_.enable) { + if (name === 'title') element.prepend(wrapElement); + else if (name === 'subtitle') angular.element(element[0].querySelector('.title')).after(wrapElement); + else if (name === 'caption') element.append(wrapElement); + } + } + + // Add some styles to the whole directive element + function configureStyles(){ + var _ = nvd3Utils.deepExtend(defaultStyles(), scope.options['styles'] || {}); + + if (scope._config.extended) scope.options['styles'] = _; + + angular.forEach(_.classes, function(value, key){ + value ? element.addClass(key) : element.removeClass(key); + }); + + element.removeAttr('style').css(_.css); + } + + // Default values for 'title', 'subtitle', 'caption' + function defaultWrapper(_){ + switch (_){ + case 'title': return { + enable: false, + text: 'Write Your Title', + className: 'h4', + css: { + width: scope.options.chart.width + 'px', + textAlign: 'center' + } + }; + case 'subtitle': return { + enable: false, + text: 'Write Your Subtitle', + css: { + width: scope.options.chart.width + 'px', + textAlign: 'center' + } + }; + case 'caption': return { + enable: false, + text: 'Figure 1. Write Your Caption text.', + css: { + width: scope.options.chart.width + 'px', + textAlign: 'center' + } + }; + } + } + + // Default values for styles + function defaultStyles(){ + return { + classes: { + 'with-3d-shadow': true, + 'with-transitions': true, + 'gallery': false + }, + css: {} + }; + } + + /* Event Handling */ + // Watching on options changing + if (scope._config.deepWatchOptions) { + scope.$watch('options', nvd3Utils.debounce(function(newOptions){ + if (!scope._config.disabled) scope.api.refresh(); + }, scope._config.debounce, scope._config.debounceImmediate), true); + } + + // Watching on data changing + function dataWatchFn(newData, oldData) { + if (newData !== oldData){ + if (!scope._config.disabled) { + scope._config.refreshDataOnly ? scope.api.update() : scope.api.refresh(); // if wanted to refresh data only, use update method, otherwise use full refresh. + } + } + } + if (scope._config.deepWatchData) { + if (scope._config.deepWatchDataDepth === 1) { + scope.$watchCollection('data', dataWatchFn); + } else { + scope.$watch('data', dataWatchFn, scope._config.deepWatchDataDepth === 2); + } + } + + // Watching on config changing + scope.$watch('config', function(newConfig, oldConfig){ + if (newConfig !== oldConfig){ + scope._config = angular.extend(defaultConfig, newConfig); + scope.api.refresh(); + } + }, true); + + // Refresh chart first time if deepWatchOptions and deepWatchData are false + if (!scope._config.deepWatchOptions && !scope._config.deepWatchData) { + scope.api.refresh(); + } + + //subscribe on global events + angular.forEach(scope.events, function(eventHandler, event){ + scope.$on(event, function(e, args){ + return eventHandler(e, scope, args); + }); + }); + + // remove completely when directive is destroyed + element.on('$destroy', function () { + scope.api.clearElement(); + }); + + // trigger onReady callback if directive is ready + scope.$watch('isReady', function(isReady){ + if (isReady) { + if (scope.onReady && typeof scope.onReady() === 'function') scope.onReady()(scope, element); + } + }); + } + }; + }]) + + .factory('nvd3Utils', function(){ + return { + debounce: function(func, wait, immediate) { + var timeout; + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + if (!immediate) func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); + }; + }, + deepExtend: function(dst){ + var me = this; + angular.forEach(arguments, function(obj) { + if (obj !== dst) { + angular.forEach(obj, function(value, key) { + if (dst[key] && dst[key].constructor && dst[key].constructor === Object) { + me.deepExtend(dst[key], value); + } else { + dst[key] = value; + } + }); + } + }); + return dst; + }, + zoom: function(scope, options) { + var zoom = options.chart.zoom; + + // check if zoom enabled + var enabled = (typeof zoom.enabled === 'undefined' || zoom.enabled === null) ? true : zoom.enabled; + if (!enabled) return; + + var xScale = scope.chart.xAxis.scale() + , yScale = scope.chart.yAxis.scale() + , xDomain = scope.chart.xDomain || xScale.domain + , yDomain = scope.chart.yDomain || yScale.domain + , x_boundary = xScale.domain().slice() + , y_boundary = yScale.domain().slice() + + // initialize zoom options + , scale = zoom.scale || 1 + , translate = zoom.translate || [0, 0] + , scaleExtent = zoom.scaleExtent || [1, 10] + , useFixedDomain = zoom.useFixedDomain || false + , useNiceScale = zoom.useNiceScale || false + , horizontalOff = zoom.horizontalOff || false + , verticalOff = zoom.verticalOff || false + , unzoomEventType = zoom.unzoomEventType || 'dblclick.zoom' + + // auxiliary functions + , fixDomain + , d3zoom + , zoomed + , unzoomed + , zoomend + ; + + // ensure nice axis + if (useNiceScale) { + xScale.nice(); + yScale.nice(); + } + + // fix domain + fixDomain = function (domain, boundary) { + domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1] / scaleExtent[1]); + domain[1] = Math.max(boundary[0] + boundary[1] / scaleExtent[1], Math.min(domain[1], boundary[1])); + return domain; + }; + + // zoom event handler + zoomed = function () { + if (zoom.zoomed !== undefined) { + var domains = zoom.zoomed(xScale.domain(), yScale.domain()); + if (!horizontalOff) xDomain([domains.x1, domains.x2]); + if (!verticalOff) yDomain([domains.y1, domains.y2]); + } else { + if (!horizontalOff) xDomain(useFixedDomain ? fixDomain(xScale.domain(), x_boundary) : xScale.domain()); + if (!verticalOff) yDomain(useFixedDomain ? fixDomain(yScale.domain(), y_boundary) : yScale.domain()); + } + scope.chart.update(); + }; + + // unzoomed event handler + unzoomed = function () { + if (zoom.unzoomed !== undefined) { + var domains = zoom.unzoomed(xScale.domain(), yScale.domain()); + if (!horizontalOff) xDomain([domains.x1, domains.x2]); + if (!verticalOff) yDomain([domains.y1, domains.y2]); + } else { + if (!horizontalOff) xDomain(x_boundary); + if (!verticalOff) yDomain(y_boundary); + } + d3zoom.scale(scale).translate(translate); + scope.chart.update(); + }; + + // zoomend event handler + zoomend = function () { + if (zoom.zoomend !== undefined) { + zoom.zoomend(); + } + }; + + // create d3 zoom handler + d3zoom = d3.behavior.zoom() + .x(xScale) + .y(yScale) + .scaleExtent(scaleExtent) + .on('zoom', zoomed) + .on('zoomend', zoomend); + + scope.svg.call(d3zoom); + + d3zoom.scale(scale).translate(translate).event(scope.svg); + + if (unzoomEventType !== 'none') scope.svg.on(unzoomEventType, unzoomed); + } + }; + }); +})();
\ No newline at end of file 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 4fe896d6..5d73ba97 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 @@ -17,7 +17,7 @@ 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']); + ,'ui.grid.autoResize','nvd3','smart-table']); app.config(function ($routeProvider) { $routeProvider .when('/alarm', { 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 b56355af..ab4bf991 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 @@ -51,9 +51,8 @@ nv.addGraph(function() { .showMaxMin(false) chart1.yAxis .logScale(false) - .axisLabel('') - .tickFormat(d3.format(',.1f')); - d3.select('#chart svg') + .axisLabel(''); + d3.select('#chart_alarm svg') .datum(Chart) .transition().duration(1000) .call(chart1); diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js index 5906c42c..9153cc40 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js @@ -16,9 +16,11 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', function ($scope, $http, $routeParams, $window) { - $scope.goIsShow = false; - $scope.chartShow = false; + $scope.chartShow = false; $scope.valuess = []; + $scope.ndaShow = false; + $scope.hdaShow = false; + $scope.sourceId = ""; $scope.today = function () { $scope.startTime = new Date(); $scope.endTime = new Date(); @@ -27,11 +29,9 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', url: global_url + "/alarm/sourceId", headers: { 'Access-Control-Allow-Origin': "*", - "Content-Type": "application/json", - "Authorization": "Basic " + btoa("usecase" + ':' + "usecase") + "Content-Type": "application/json" } }).then(function successCallback(resp) { - //console.info(resp); $scope.sourceIds = resp.data; }, function errorCallback(resp) { @@ -39,6 +39,64 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', }; $scope.today(); + $scope.options = { + chart: { + type: 'historicalBarChart', + height: 300, + margin : { + top: 20, + right: 20, + bottom: 65, + left: 50 + }, + x: function(d){return d[0];}, + y: function(d){return d[1];}, + showValues: true, + valueFormat: function(d){ + return d3.format(',.1f')(d); + }, + duration: 100, + xAxis: { + //axisLabel: 'X Axis', + tickFormat: function(d) { + return d3.time.format('%x %H:%M')(new Date(d)) + }, + rotateLabels: 30, + showMaxMin: true + }, + yAxis: { + //axisLabel: 'Y Axis', + axisLabelDistance: -10, + tickFormat: function(d){ + return d3.format(',.1f')(d); + } + }, + tooltip: { + keyFormatter: function(d) { + return d3.time.format('%x %H:%M')(new Date(d)); + } + }, + zoom: { + enabled: true, + scaleExtent: [1, 10], + useFixedDomain: false, + useNiceScale: false, + horizontalOff: false, + verticalOff: true, + unzoomEventType: 'dblclick.zoom' + } + } + }; + + + $scope.data = [ + { + "key" : "Quantity" , + "bar": true, + "values" : [] + }]; + + $scope.genDiagram = function () { $http({ method: 'POST', @@ -46,7 +104,8 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', data: { "sourceId": $scope.sourceId, "startTime": FormatDate($scope.startTime), - "endTime": FormatDate($scope.endTime) + "endTime": FormatDate($scope.endTime), + "showMode" : ($scope.showModeId==undefined?"auto":$scope.showModeId) }, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: function (obj) { @@ -57,42 +116,43 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', return str.join("&"); } }).then(function successCallback(resp) { - console.info(resp); $scope.chartShow = true; - if (resp.data.length > 0) - for (var i = 0; i < resp.data.length; i++) { - $scope.valuess[i] = {}; - $scope.valuess[i].x = resp.data[i].Time; - $scope.valuess[i].y = resp.data[i].Count; - } - else - $scope.valuess = []; - for (var d = 0; d < 5; d++) { - window.setTimeout(function () { - redraw("_alarm", $scope.valuess); - }, 1500); - }; + if (resp.data.length > 0){ + $scope.ndaShow = false; + $scope.hdaShow = true; + $scope.data = [ + { + "key" : "Max" , + "bar": true, + "values" : resp.data + }]; + $scope.api.refresh(); + } + else{ + $scope.ndaShow = true; + $scope.hdaShow = false; + $scope.data = [ + { + "key" : "Max" , + "bar": true, + "values" : [] + }]; + $scope.api.refresh(); + } + }, function errorCallback(resp) { }); } - $scope.sourceIdChanged = function(){ - if ($scope.sourceId != null) - $scope.goIsShow = true; - else - $scope.goIsShow = false; - }; $scope.startTimeChanged = function () { if ($scope.startTime > $scope.endTime) $scope.endTime = ""; - // console.info($scope.startTime); }; $scope.endTimeChanged = function () { if ($scope.endTime < $scope.startTime) $scope.startTime = ""; - // console.info($scope.endTime); }; $scope.open1 = function () { @@ -111,6 +171,8 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', opened: false }; + $scope.showModeIds = ["minute","hour","day","month","year"]; + function FormatDate(strTime) { var date = new Date(strTime); return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js index f73785a6..6a2daf65 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 @@ -14,7 +14,7 @@ limitations under the License. */ var alarmDetailId = ""; -app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interval' , '$window' ,'uiGridConstants', 'uiGridGroupingConstants', +app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interval' , '$window', function ($scope, $log, $http, $timeout, $interval,$window) { $scope.jump = function(value){ alarmDetailId=value; @@ -26,197 +26,42 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv var obj = $("#lm"); angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm-chart.html"; }; - $scope.selectedRows = new Array(); - $scope.condition1 = ""; - $scope.condition2 = ""; - $scope.condition3 = ""; - $scope.condition4 = ""; - $scope.condition5 = ""; $scope.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" : "/" + FormatDate(arguments[5]); - url += arguments[6] === "" ? "/null" : "/" + FormatDate(arguments[6]); - url += arguments[7] === "" ? "/null" : "/" + arguments[7]; - $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; - $scope.gridOptions.data = data.alarms; - }); - }; - $scope.gridOptions = { - columnDefs: [ - { - field: 'alarmsHeader.eventName', - displayName: 'eventName', - width : '10%', - enableHiding: false, - suppressRemoveSort: true, - enableCellEdit: false - }, - {field: "alarmsHeader.eventId", displayName: 'eventId', enableCellEdit: false}, - {field: "alarmsHeader.sourceId", displayName: 'Source Id', enableCellEdit: false,cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.alarmsHeader.sourceId)"; style="cursor:pointer" href="">{{row.entity.alarmsHeader.sourceId}}</a>'}, - {field: "alarmsHeader.sourceName", displayName: 'Source Name', enableCellEdit: false}, - {field: "alarmsHeader.reportingEntityId", displayName: 'Reporting Entity Id', enableCellEdit: false}, - {field: "alarmsHeader.reportingEntityName", displayName: 'Reporting Entity Name', enableCellEdit: false}, - {field: "alarmsHeader.createTime", displayName: 'Start Time', enableCellEdit: false}, - {field: "alarmsHeader.status", displayName: 'Status', cellFilter: 'mapGender',enableCellEdit: false}, - {field: "option",displayName: 'option', enableCellEdit: false ,cellTemplate: '<button ng-click="grid.appScope.jump(row.entity.alarmsHeader.sourceId)" class="btn btn-primary" >Details</button>'}, - ], - enableSorting: true, - useExternalSorting: false, - enableGridMenu: true, - showGridFooter: true, - enableHorizontalScrollbar: 1, - enableVerticalScrollbar: 0, - enableFiltering: true, - enablePagination: true, - enablePaginationControls: true, - paginationPageSizes: [10, 15, 20], - paginationCurrentPage: 1, - paginationPageSize: 10, - totalItems: 0, - useExternalPagination: true, - enableFooterTotalSelected: true, - 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, - noUnselect: false, - selectionRowHeaderWidth: 28, - //---------------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.alarmsHeader.eventId, $scope.selectedRows); - if (num == -1) { - $scope.selectedRows.push(row.entity.alarmsHeader.eventId); - } - else { - $scope.selectedRows.splice(num, 1); - } - } - }); - $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); - } - }; - 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.vfstatus); - $interval(function () { - getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1, - $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3, - $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5, - $scope.vfstatus); - },10000) - - $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: '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.open = [ - {id: 1, name: 'Active', count: 10}, - {id: 2, name: 'Closed', count: 8}, - {id: undefined, name: 'All', count: 7} - ]; $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.vfstatus); $scope.selectedOpen = v; }; + $scope.itemsByPage = 15; + + + $http({ + url : global_url + "/alarm/statusCount", + method : "GET" + }).then(function successCallback(resp) { + $scope.open[0].count = resp.data[1]; + $scope.open[1].count = resp.data[2]; + $scope.open[2].count = resp.data[0]; + + }); + + $scope.open = [ + {id: 1, name: 'Active', count: 0}, + {id: 2, name: 'Closed', count: 0}, + {id: undefined, name: 'All', count: 0} + ]; + + $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 = true; - if (!match) { - row.visible = false; - } - }); - return renderableRows; - }; - $scope.menuState = {show: false} + + $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); - } - }); - }); - $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.vfstatus); }; + $scope.open1 = function () { $scope.popup1.opened = true; }; @@ -232,21 +77,83 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv $scope.popup2 = { opened: false }; - function FormatDate(strTime) { - var date = new Date(strTime); - return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); - } - }]).filter('mapGender', function () { - var genderHash = { - 1: 'Active', - 2: 'Closed' + + }]); +app.controller('pipeAlarmCtrl', ['$scope','ResourceAlarm', function ($scope,service) { + $scope.condition1 = ""; + $scope.condition2 = ""; + $scope.condition3 = ""; + $scope.condition4 = ""; + $scope.condition5 = ""; + + + var ctrl = this; + + this.displayed = []; + + this.callServer = function callServer(tableState) { + ctrl.isLoading = true; + $scope.tableState = tableState; + var pagination = tableState.pagination; + + var start = pagination.start/pagination.number+1 || 0; + var number = pagination.number || 10; + + service.getPage(start, number,$scope.condition1===""?"":$scope.condition1, + $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3, + $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5, + $scope.vfstatus).then(function (result) { + ctrl.displayed = result.data; + tableState.pagination.numberOfPages = result.numberOfPages; + ctrl.isLoading = false; + }); }; - return function (input) { - if (!input) { - return ''; - } else { - return genderHash[input]; - } + +}]).factory('ResourceAlarm', ['$q', '$filter', '$timeout','$http', function ($q, $filter, $timeout,$http) { + var randomsItems = []; + var totalCount = 0; + function getPage(start, number) { + var url = global_url+'/alarm/' + start + '/' + number + ''; + url += arguments[2] === "" ? "/null" : "/" + arguments[2]; + url += arguments[3] === "" ? "/null" : "/" + arguments[3]; + url += arguments[4] === "" ? "/null" : "/" + arguments[4]; + url += arguments[5] === "" ? "/null" : "/" + FormatDate(arguments[5]); + url += arguments[6] === "" ? "/null" : "/" + FormatDate(arguments[6]); + url += arguments[7] === "" ? "/null" : "/" + arguments[7]; + $http({ + url : url, + method : "GET" + }).then(function SuccessCallback(resp) { + console.info(resp); + if (resp.data.alarms.length > 0){ + randomsItems = resp.data.alarms; + totalCount = resp.data.totalRecords; + }else{ + randomsItems = []; + totalCount = 0; + } + }); + + var deferred = $q.defer(); + + $timeout(function () { + deferred.resolve({ + data: randomsItems, + numberOfPages: Math.ceil(totalCount / number) + }); + }, 1500); + + return deferred.promise; } -});
\ No newline at end of file + function FormatDate(strTime) { + var date = new Date(strTime); + return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); + }; + + return { + getPage: getPage + }; + + +}]);
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js index 39845e87..1e9c0e1b 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js @@ -15,12 +15,13 @@ */ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , - function ($scope, $http, $routeParams, $window) { + function ($scope, $http,$routeParams,$window) { $scope.chartShow = false; + $scope.ndaShow = false; + $scope.hdaShow = false; $scope.valuess = []; $scope.namesPIsShow = false; - $scope.namesCIsShow = false; - $scope.goIsShow = false; + $scope.goIsShow = true; $scope.today = function() { $scope.startTime = new Date(); $scope.endTime = new Date(); @@ -73,9 +74,8 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , }); } else{ - $scope.goIsShow = false; + $scope.goIsShow = true; $scope.namesPIsShow = false; - $scope.namesCIsShow = false; } }; @@ -95,29 +95,86 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , return str.join("&"); } }).then(function successCallback(resp) { - $scope.goIsShow = true; - $scope.chartShow = true; + $scope.goIsShow = false; },function errorCallback(resq) { }); } else{ - $scope.goIsShow = false; + $scope.goIsShow = true; $scope.namesCIsShow = false; } }; - $scope.nameCChanged = function () { - if ($scope.nameC != null){ - $scope.goIsShow = true; - } + $scope.options = { + chart: { + type: 'historicalBarChart', + height: 300, + margin : { + top: 20, + right: 20, + bottom: 65, + left: 50 + }, + x: function(d){return d[0];}, + y: function(d){return d[1];}, + showValues: true, + valueFormat: function(d){ + return d3.format(',.1f')(d); + }, + duration: 100, + xAxis: { + //axisLabel: 'X Axis', + tickFormat: function(d) { + return d3.time.format('%x %H:%M')(new Date(d)) + }, + rotateLabels: 30, + showMaxMin: true + }, + yAxis: { + //axisLabel: 'Y Axis', + axisLabelDistance: -10, + tickFormat: function(d){ + return d3.format(',.1f')(d); + } + }, + tooltip: { + keyFormatter: function(d) { + return d3.time.format('%x %H:%M')(new Date(d)); + } + }, + zoom: { + enabled: false, + scaleExtent: [1, 10], + useFixedDomain: false, + useNiceScale: false, + horizontalOff: false, + verticalOff: false, + unzoomEventType: 'dblclick.zoom' + } + } }; + + $scope.data = [ + { + "key" : "Quantity" , + "bar": true, + "values" : [] + }]; + $scope.genDiagram = function () { + $scope.chartShow = true; $http({ method : 'POST', url : global_url + "/performance/diagram", - data : { "sourceId":$scope.sourceId,"startTime":FormatDate($scope.startTime),"endTime":FormatDate($scope.endTime),"nameParent":$scope.nameP,"nameChild":$scope.nameC!=null?$scope.nameC:"" }, + data : { + "sourceId":$scope.sourceId, + "startTime":FormatDate($scope.startTime), + "endTime":FormatDate($scope.endTime), + "nameParent":$scope.nameP, + "format":$scope.showModeId==undefined?"auto":$scope.showModeId + }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequest: function(obj) { var str = []; @@ -127,26 +184,34 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , return str.join("&"); } }).then(function successCallback(resp) { - console.info(resp.data); - chartShow = true; - if (resp.data.length > 0) - for (var i = 0 ; i<resp.data.length ; i++){ - $scope.valuess[i] = {}; - $scope.valuess[i].x = i+1; - $scope.valuess[i].y = resp.data[i]; - $scope.valuess[i].x.length = i; - } - else - $scope.valuess = []; - for (var d = 0; d < 5; d++) { - window.setTimeout(function () { - redraw("_performance", $scope.valuess); - }, 1500); - }; + console.info(resp); + if (resp.data.length > 0){ + $scope.ndaShow = false; + $scope.hdaShow = true; + $scope.data = [ + { + "key" : "Count" , + "bar": true, + "values" : resp.data + }]; + $scope.api.refresh(); + } + else{ + $scope.ndaShow = true; + $scope.hdaShow = false; + $scope.data = [ + { + "key" : "Count" , + "bar": true, + "values" : [] + }]; + $scope.api.refresh(); + } + },function errorCallback(resp) { }); - } + }; $scope.open1 = function() { $scope.popup1.opened = true; @@ -164,8 +229,14 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , opened: false }; + $scope.modeShow = false; + + $scope.showModeIds = ["minute","hour","day","month","year"]; + function FormatDate (strTime) { var date = new Date(strTime); return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes(); } -}]); + + + }]); diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js index 80896c7c..b944a7ed 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 @@ -15,180 +15,30 @@ */ // var permanceId=""; -app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', '$window' , - function ($scope, $http , $window, $interval ) { +app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', '$window', + function ($scope, $http , $window, $interval) { $scope.jump = function(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.itemsByPage = 15; + $scope.toChart = function () { var obj = $("#lm"); angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance-chart.html"; }; - $scope.gridOptions = { - columnDefs: [{ - field: 'performanceHeader.eventName', - displayName: 'Event Name', - width: '10%', - enableColumnMenu: false, - enableHiding: false, - suppressRemoveSort: true, - enableCellEdit: false - }, { - field: "performanceHeader.eventId", - enableCellEdit: false, - displayName: 'Event Id', - cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.performanceHeader.sourceId)"; style="cursor:pointer" href="">{{row.entity.performanceHeader.sourceId}}</a>', - }, - {field: "performanceHeader.sourceId", displayName: 'Source Id',enableCellEdit: false}, - {field: "performanceHeader.sourceName", displayName: 'Source Name',enableCellEdit: false}, - {field: "performanceHeader.reportingEntityId", displayName: 'Reporting Entity Id',enableCellEdit: false}, - {field: "performanceHeader.reportingEntityName", displayName: 'Reporting Entity Name',enableCellEdit: false}, - {field: "performanceHeader.priority", displayName: 'Priority',enableCellEdit: false}, - {field: "performanceHeader.createTime", displayName: 'Start Time',enableCellEdit: false}, - {field: "option",displayName: 'option', enableCellEdit: false , - cellTemplate: '<button ng-click="grid.appScope.jump(row.entity.performanceHeader.sourceId)" class="btn btn-primary" >Details</button>'} - ], - enableSorting: true, - useExternalSorting: false, - enableGridMenu: true, - showGridFooter: true, - enableHorizontalScrollbar: 1, - enableVerticalScrollbar: 0, - enableFiltering: true, - // - enablePagination: true, - enablePaginationControls: true, - paginationPageSizes: [10, 15, 20], - paginationCurrentPage: 1, - paginationPageSize: 10, - //paginationTemplate:"<div></div>", - totalItems: 0, - useExternalPagination: true, - enableFooterTotalSelected: true, - 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, - noUnselect: false, - selectionRowHeaderWidth: 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.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 = []; - $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; - 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" ? "/null" : "/" + FormatDate(arguments[5]); - url += arguments[6] === "null" ? "/null" : "/" + FormatDate(arguments[6]); - $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; - $scope.gridOptions.data = data.performances; - }); - }; - 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); - $interval(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); - },10000) - $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; @@ -208,10 +58,102 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid $scope.popup2 = { opened: false }; + + }]); +app.controller('pipeCtrl', ['$scope','Resource', function ($scope,service) { + $scope.seek1 = ""; + $scope.seek2 = ""; + $scope.seek3 = ""; + $scope.seek4 = ""; + $scope.seek5 = ""; + + + var ctrl = this; + + this.displayed = []; + + this.callServer = function callServer(tableState) { + ctrl.isLoading = true; + $scope.tableState = tableState; + var pagination = tableState.pagination; + + var start = pagination.start/pagination.number+1 || 0; + var number = pagination.number || 10; + + service.getPage(start, number,$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).then(function (result) { + ctrl.displayed = result.data; + tableState.pagination.numberOfPages = result.numberOfPages; + ctrl.isLoading = false; + }); + }; + +}]) + .factory('Resource', ['$q', '$filter', '$timeout','$http', function ($q, $filter, $timeout,$http) { + var randomsItems = []; + var totalCount = 0; + function getPage(start, number) { + var url = global_url+'/performance/' + start + '/' + number + ''; + url += arguments[2] === "" ? "/null" : "/" + arguments[2]; + url += arguments[3] === "" ? "/null" : "/" + arguments[3]; + url += arguments[4] === "" ? "/null" : "/" + arguments[4]; + url += arguments[5] === "null" ? "/null" : "/" + FormatDate(arguments[5]); + url += arguments[6] === "null" ? "/null" : "/" + FormatDate(arguments[6]); + $http({ + url : url, + method : "GET" + }).then(function SuccessCallback(resp) { + if (resp.data.performances.length > 0){ + randomsItems = resp.data.performances; + totalCount = resp.data.totalRecords; + }else{ + randomsItems = []; + totalCount = 0; + } + }); + + var deferred = $q.defer(); + + $timeout(function () { + deferred.resolve({ + data: randomsItems, + numberOfPages: Math.ceil(totalCount / number) + }); + }, 1500); + + + return deferred.promise; + } + function FormatDate(strTime) { var date = new Date(strTime); return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); }; - }]); - -
\ No newline at end of file + + return { + getPage: getPage + }; + + + }]).directive('stRatio',function(){ + return { + link:function(scope, element, attr){ + var ratio=+(attr.stRatio); + + element.css('width',ratio+'%'); + + } + }; +}).directive('pageSelect', function() { + return { + restrict: 'E', + template: '<input type="text" class="select-page" ng-model="inputPage" ng-change="selectPage(inputPage)">', + link: function(scope, element, attrs) { + scope.$watch('currentPage', function(c) { + scope.inputPage = c; + }); + } + } +}); + diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/smart-table.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/smart-table.js new file mode 100644 index 00000000..76067e8a --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/smart-table.js @@ -0,0 +1,559 @@ +/** + * @version 2.1.9 + * @license MIT + */ +(function (ng, undefined){ + 'use strict'; + + ng.module('smart-table', []).run(['$templateCache', function ($templateCache) { + $templateCache.put('template/smart-table/pagination.html', + '<nav ng-if="numPages && pages.length >= 2"><ul class="pagination">' + + '<li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a href="#" ng-click="selectPage(page); $event.preventDefault(); $event.stopPropagation();">{{page}}</a></li>' + + '</ul></nav>'); + }]); + + + ng.module('smart-table') + .constant('stConfig', { + pagination: { + template: 'template/smart-table/pagination.html', + itemsByPage: 10, + displayedPages: 5 + }, + search: { + delay: 400, // ms + inputEvent: 'input' + }, + select: { + mode: 'single', + selectedClass: 'st-selected' + }, + sort: { + ascentClass: 'st-sort-ascent', + descentClass: 'st-sort-descent', + descendingFirst: false, + skipNatural: false, + delay:300 + }, + pipe: { + delay: 100 //ms + } + }); + ng.module('smart-table').controller('stTableController', [ + '$scope', + '$parse', + '$filter', + '$attrs', + function StTableController($scope, $parse, $filter, $attrs) { + var propertyName = $attrs.stTable; + var displayGetter = $parse(propertyName); + var displaySetter = displayGetter.assign; + var safeGetter; + var orderBy = $filter('orderBy'); + var filter = $filter('filter'); + var safeCopy = copyRefs(displayGetter($scope)); + var tableState = { + sort: {}, + search: {}, + pagination: { start: 0, totalItemCount: 0 } + }; + var filtered; + var pipeAfterSafeCopy = true; + var ctrl = this; + var lastSelected; + + function copyRefs(src) { + return src ? [].concat(src) : []; + } + + function updateSafeCopy() { + safeCopy = copyRefs(safeGetter($scope)); + if (pipeAfterSafeCopy === true) { + ctrl.pipe(); + } + } + + function deepDelete(object, path) { + if (path.indexOf('.') != -1) { + var partials = path.split('.'); + var key = partials.pop(); + var parentPath = partials.join('.'); + var parentObject = $parse(parentPath)(object); + delete parentObject[key]; + if (Object.keys(parentObject).length == 0) { + deepDelete(object, parentPath); + } + } else { + delete object[path]; + } + } + + if ($attrs.stSafeSrc) { + safeGetter = $parse($attrs.stSafeSrc); + $scope.$watch( + function() { + var safeSrc = safeGetter($scope); + return safeSrc && safeSrc.length ? safeSrc[0] : undefined; + }, + function(newValue, oldValue) { + if (newValue !== oldValue) { + updateSafeCopy(); + } + } + ); + $scope.$watch( + function() { + var safeSrc = safeGetter($scope); + return safeSrc ? safeSrc.length : 0; + }, + function(newValue, oldValue) { + if (newValue !== safeCopy.length) { + updateSafeCopy(); + } + } + ); + $scope.$watch( + function() { + return safeGetter($scope); + }, + function(newValue, oldValue) { + if (newValue !== oldValue) { + tableState.pagination.start = 0; + updateSafeCopy(); + } + } + ); + } + + /** + * sort the rows + * @param {Function | String} predicate - function or string which will be used as predicate for the sorting + * @param [reverse] - if you want to reverse the order + */ + this.sortBy = function sortBy(predicate, reverse) { + tableState.sort.predicate = predicate; + tableState.sort.reverse = reverse === true; + + if (ng.isFunction(predicate)) { + tableState.sort.functionName = predicate.name; + } else { + delete tableState.sort.functionName; + } + + tableState.pagination.start = 0; + return this.pipe(); + }; + + /** + * search matching rows + * @param {String} input - the input string + * @param {String} [predicate] - the property name against you want to check the match, otherwise it will search on all properties + * @param {String | Function } [comparator] - a comparator to pass to the filter for the (pass true for stric mode) + */ + this.search = function search(input, predicate, comparator) { + var predicateObject = tableState.search.predicateObject || {}; + var prop = predicate ? predicate : '$'; + + input = ng.isString(input) ? input.trim() : input; + $parse(prop).assign(predicateObject, input); + // to avoid to filter out null value + if (!input) { + deepDelete(predicateObject, prop); + } + tableState.search.predicateObject = predicateObject; + tableState.pagination.start = 0; + return this.pipe(); + }; + + /** + * this will chain the operations of sorting and filtering based on the current table state (sort options, filtering, ect) + */ + this.pipe = function pipe() { + var pagination = tableState.pagination; + var output; + filtered = tableState.search.predicateObject + ? filter(safeCopy, tableState.search.predicateObject) + : safeCopy; + if (tableState.sort.predicate) { + filtered = orderBy( + filtered, + tableState.sort.predicate, + tableState.sort.reverse + ); + } + pagination.totalItemCount = filtered.length; + if (pagination.number !== undefined) { + pagination.numberOfPages = filtered.length > 0 + ? Math.ceil(filtered.length / pagination.number) + : 1; + pagination.start = pagination.start >= filtered.length + ? (pagination.numberOfPages - 1) * pagination.number + : pagination.start; + output = filtered.slice( + pagination.start, + pagination.start + parseInt(pagination.number) + ); + } + displaySetter($scope, output || filtered); + }; + + /** + * select a dataRow (it will add the attribute isSelected to the row object) + * @param {Object} row - the row to select + * @param {String} [mode] - "single" or "multiple" (multiple by default) + */ + this.select = function select(row, mode) { + var rows = copyRefs(displayGetter($scope)); + var index = rows.indexOf(row); + if (index !== -1) { + if (mode === 'single') { + row.isSelected = row.isSelected !== true; + if (lastSelected) { + lastSelected.isSelected = false; + } + lastSelected = row.isSelected === true ? row : undefined; + } else { + rows[index].isSelected = !rows[index].isSelected; + } + } + }; + + /** + * take a slice of the current sorted/filtered collection (pagination) + * + * @param {Number} start - start index of the slice + * @param {Number} number - the number of item in the slice + */ + this.slice = function splice(start, number) { + tableState.pagination.start = start; + tableState.pagination.number = number; + return this.pipe(); + }; + + /** + * return the current state of the table + * @returns {{sort: {}, search: {}, pagination: {start: number}}} + */ + this.tableState = function getTableState() { + return tableState; + }; + + this.getFilteredCollection = function getFilteredCollection() { + return filtered || safeCopy; + }; + + /** + * Use a different filter function than the angular FilterFilter + * @param filterName the name under which the custom filter is registered + */ + this.setFilterFunction = function setFilterFunction(filterName) { + filter = $filter(filterName); + }; + + /** + * Use a different function than the angular orderBy + * @param sortFunctionName the name under which the custom order function is registered + */ + this.setSortFunction = function setSortFunction(sortFunctionName) { + orderBy = $filter(sortFunctionName); + }; + + /** + * Usually when the safe copy is updated the pipe function is called. + * Calling this method will prevent it, which is something required when using a custom pipe function + */ + this.preventPipeOnWatch = function preventPipe() { + pipeAfterSafeCopy = false; + }; + } + ]).directive('stTable', function() { + return { + restrict: 'A', + controller: 'stTableController', + link: function(scope, element, attr, ctrl) { + if (attr.stSetFilter) { + ctrl.setFilterFunction(attr.stSetFilter); + } + + if (attr.stSetSort) { + ctrl.setSortFunction(attr.stSetSort); + } + } + }; + }); + + ng.module('smart-table') + .directive('stSearch', ['stConfig', '$timeout','$parse', function (stConfig, $timeout, $parse) { + return { + require: '^stTable', + link: function (scope, element, attr, ctrl) { + var tableCtrl = ctrl; + var promise = null; + var throttle = attr.stDelay || stConfig.search.delay; + var event = attr.stInputEvent || stConfig.search.inputEvent; + + attr.$observe('stSearch', function (newValue, oldValue) { + var input = element[0].value; + if (newValue !== oldValue && input) { + ctrl.tableState().search = {}; + tableCtrl.search(input, newValue); + } + }); + + //table state -> view + scope.$watch(function () { + return ctrl.tableState().search; + }, function (newValue, oldValue) { + var predicateExpression = attr.stSearch || '$'; + if (newValue.predicateObject && $parse(predicateExpression)(newValue.predicateObject) !== element[0].value) { + element[0].value = $parse(predicateExpression)(newValue.predicateObject) || ''; + } + }, true); + + // view -> table state + element.bind(event, function (evt) { + evt = evt.originalEvent || evt; + if (promise !== null) { + $timeout.cancel(promise); + } + + promise = $timeout(function () { + tableCtrl.search(evt.target.value, attr.stSearch || ''); + promise = null; + }, throttle); + }); + } + }; + }]); + + ng.module('smart-table') + .directive('stSelectRow', ['stConfig', function (stConfig) { + return { + restrict: 'A', + require: '^stTable', + scope: { + row: '=stSelectRow' + }, + link: function (scope, element, attr, ctrl) { + var mode = attr.stSelectMode || stConfig.select.mode; + element.bind('click', function () { + scope.$apply(function () { + ctrl.select(scope.row, mode); + }); + }); + + scope.$watch('row.isSelected', function (newValue) { + if (newValue === true) { + element.addClass(stConfig.select.selectedClass); + } else { + element.removeClass(stConfig.select.selectedClass); + } + }); + } + }; + }]); + + ng.module('smart-table') + .directive('stSort', ['stConfig', '$parse', '$timeout', function (stConfig, $parse, $timeout) { + return { + restrict: 'A', + require: '^stTable', + link: function (scope, element, attr, ctrl) { + + var predicate = attr.stSort; + var getter = $parse(predicate); + var index = 0; + var classAscent = attr.stClassAscent || stConfig.sort.ascentClass; + var classDescent = attr.stClassDescent || stConfig.sort.descentClass; + var stateClasses = [classAscent, classDescent]; + var sortDefault; + var skipNatural = attr.stSkipNatural !== undefined ? attr.stSkipNatural : stConfig.sort.skipNatural; + var descendingFirst = attr.stDescendingFirst !== undefined ? attr.stDescendingFirst : stConfig.sort.descendingFirst; + var promise = null; + var throttle = attr.stDelay || stConfig.sort.delay; + + if (attr.stSortDefault) { + sortDefault = scope.$eval(attr.stSortDefault) !== undefined ? scope.$eval(attr.stSortDefault) : attr.stSortDefault; + } + + //view --> table state + function sort () { + if (descendingFirst) { + index = index === 0 ? 2 : index - 1; + } else { + index++; + } + + var func; + predicate = ng.isFunction(getter(scope)) || ng.isArray(getter(scope)) ? getter(scope) : attr.stSort; + if (index % 3 === 0 && !!skipNatural !== true) { + //manual reset + index = 0; + ctrl.tableState().sort = {}; + ctrl.tableState().pagination.start = 0; + func = ctrl.pipe.bind(ctrl); + } else { + func = ctrl.sortBy.bind(ctrl, predicate, index % 2 === 0); + } + if (promise !== null) { + $timeout.cancel(promise); + } + if (throttle < 0) { + func(); + } else { + promise = $timeout(function(){ + func(); + }, throttle); + } + } + + element.bind('click', function sortClick () { + if (predicate) { + scope.$apply(sort); + } + }); + + if (sortDefault) { + index = sortDefault === 'reverse' ? 1 : 0; + sort(); + } + + //table state --> view + scope.$watch(function () { + return ctrl.tableState().sort; + }, function (newValue) { + if (newValue.predicate !== predicate) { + index = 0; + element + .removeClass(classAscent) + .removeClass(classDescent); + } else { + index = newValue.reverse === true ? 2 : 1; + element + .removeClass(stateClasses[index % 2]) + .addClass(stateClasses[index - 1]); + } + }, true); + } + }; + }]); + + ng.module('smart-table') + .directive('stPagination', ['stConfig', function (stConfig) { + return { + restrict: 'EA', + require: '^stTable', + scope: { + stItemsByPage: '=?', + stDisplayedPages: '=?', + stPageChange: '&' + }, + templateUrl: function (element, attrs) { + if (attrs.stTemplate) { + return attrs.stTemplate; + } + return stConfig.pagination.template; + }, + link: function (scope, element, attrs, ctrl) { + + scope.stItemsByPage = scope.stItemsByPage ? +(scope.stItemsByPage) : stConfig.pagination.itemsByPage; + scope.stDisplayedPages = scope.stDisplayedPages ? +(scope.stDisplayedPages) : stConfig.pagination.displayedPages; + + scope.currentPage = 1; + scope.pages = []; + + function redraw () { + var paginationState = ctrl.tableState().pagination; + var start = 1; + var end; + var i; + var prevPage = scope.currentPage; + scope.totalItemCount = paginationState.totalItemCount; + scope.currentPage = Math.floor(paginationState.start / paginationState.number) + 1; + + start = Math.max(start, scope.currentPage - Math.abs(Math.floor(scope.stDisplayedPages / 2))); + end = start + scope.stDisplayedPages; + + if (end > paginationState.numberOfPages) { + end = paginationState.numberOfPages + 1; + start = Math.max(1, end - scope.stDisplayedPages); + } + + scope.pages = []; + scope.numPages = paginationState.numberOfPages; + + for (i = start; i < end; i++) { + scope.pages.push(i); + } + + if (prevPage !== scope.currentPage) { + scope.stPageChange({newPage: scope.currentPage}); + } + } + + //table state --> view + scope.$watch(function () { + return ctrl.tableState().pagination; + }, redraw, true); + + //scope --> table state (--> view) + scope.$watch('stItemsByPage', function (newValue, oldValue) { + if (newValue !== oldValue) { + scope.selectPage(1); + } + }); + + scope.$watch('stDisplayedPages', redraw); + + //view -> table state + scope.selectPage = function (page) { + if (page > 0 && page <= scope.numPages) { + ctrl.slice((page - 1) * scope.stItemsByPage, scope.stItemsByPage); + } + }; + + if (!ctrl.tableState().pagination.number) { + ctrl.slice(0, scope.stItemsByPage); + } + } + }; + }]); + + ng.module('smart-table') + .directive('stPipe', ['stConfig', '$timeout', function (config, $timeout) { + return { + require: 'stTable', + scope: { + stPipe: '=' + }, + link: { + + pre: function (scope, element, attrs, ctrl) { + + var pipePromise = null; + + if (ng.isFunction(scope.stPipe)) { + ctrl.preventPipeOnWatch(); + ctrl.pipe = function () { + + if (pipePromise !== null) { + $timeout.cancel(pipePromise) + } + + pipePromise = $timeout(function () { + scope.stPipe(ctrl.tableState(), ctrl); + }, config.pipe.delay); + + return pipePromise; + } + } + }, + + post: function (scope, element, attrs, ctrl) { + ctrl.pipe(); + } + } + }; + }]); + +})(angular);
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html index c04f1cff..55b8bce5 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html @@ -14,89 +14,117 @@ limitations under the License. --> <style> - body { - overflow-y:scroll; - } - text { - font: 12px sans-serif; - } - svg { - display: block; - } - #chart svg { - height: 200px; - width: 400px; - min-width: 100px; - min-height: 100px; - } - tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } - .nodatadiv { - display: table-cell; - width: 600px; - height:300px; - text-align:center; - vertical-align: middle; - } - .nodatainner { - padding: 10px; - } - </style> - <!--/.navbar-collapse --> - <div class="templatemo-content-wrapper"> - <div class="templatemo-content"> - <h1>alarm Chart</h1> - <div class="row" style="min-height: 500px" ng-controller="alarmchartCtrl"> - <div class="col-md-12 col-sm-12"> - <div class="row"> - <div class="col-md-6"> - <p class="input-group" style="float:left"> - <label style="float:left;width:80px;line-height:100px">startTime:</label> - <div style="float:left;width:100px;padding-top:33px"> - <input type="text" class="form-control" readonly ng-change="startTimeChanged()" uib-datepicker-popup ng-click="open1()" ng-model="startTime" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /> - </div> - <div style="display:block;float:left" uib-timepicker ng-model="startTime" ng-change="startTimeChanged()" hour-step minute-step show-meridian></div> - </p> + body { + overflow-y: scroll; + } + + text { + font: 12px sans-serif; + } + + svg { + display: block; + } + + #chart svg { + height: 200px; + width: 400px; + min-width: 100px; + min-height: 100px; + } + + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { + background-color: rgb(255, 255, 255); + } + + .nodatadiv { + display: table-cell; + width: 600px; + height: 300px; + text-align: center; + vertical-align: middle; + } + + .nodatainner { + padding: 10px; + } +</style> +<!--/.navbar-collapse --> +<div class="templatemo-content-wrapper"> + <div class="templatemo-content"> + <h1>alarm Chart</h1> + <div class="row" style="min-height: 500px" ng-controller="alarmchartCtrl"> + <div class="col-md-12 col-sm-12"> + <div class="row"> + <div class="col-md-6"> + <p class="input-group" style="float:left"> + <label style="float:left;width:80px;line-height:100px">startTime:</label> + <div style="float:left;width:100px;padding-top:33px"> + <input type="text" class="form-control" readonly ng-change="startTimeChanged()" + uib-datepicker-popup ng-click="open1()" ng-model="startTime" is-open="popup1.opened" + datepicker-options ng-required="true" close-text="Close"/> + </div> + <div style="display:block;float:left" uib-timepicker ng-model="startTime" + ng-change="startTimeChanged()" hour-step minute-step show-meridian></div> + </p> + </div> + + <div class="col-md-6" style="float:left"> + <p class="input-group" style="float:left"> + <label style="float:left;width:80px;line-height:100px">endTime:</label> + <div style="float:left;width:100px;padding-top:33px;"> + <input type="text" class="form-control" readonly ng-change="endTimeChanged()" + ng-click="open2()" uib-datepicker-popup ng-model="endTime" is-open="popup2.opened" + datepicker-options ng-required="true" close-text="Close"/> + </div> + <div style="display:block;float:left" uib-timepicker ng-model="endTime" + ng-change="endTimeChanged()" hour-step minute-step show-meridian></div> + </p> + </div> + <div class="col-md-6" style="width:100%;padding-bottom:20px;"> + <p> + <div style="float:left;padding-right:30px;"> + <label style="float:left;width:80px;line-height:30px;">sourceId:</label> + <div style="float:left;width:130px;"> + <select class="form-control" ng-change="sourceIdChanged()" ng-model="sourceId" + ng-options="s for s in sourceIds"> + <option value="">--- All ---</option> + </select> </div> + </div> + <div style="float:left"> + <button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit + </button> + </div> + </p> + </div> + <div style="float:left;padding-left:15px;"> + <label style="float:left;width:50px;line-height:30px;">mode:</label> + <div style="float:left;width:100px;"> + <select class="form-control" ng-change="showModeIdChanged()" ng-model="showModeId" + ng-options="sm for sm in showModeIds"> + <option value="">-- Auto --</option> + </select> + </div> + </div> - <div class="col-md-6" style="float:left"> - <p class="input-group" style="float:left"> - <label style="float:left;width:80px;line-height:100px">endTime:</label> - <div style="float:left;width:100px;padding-top:33px;"> - <input type="text" class="form-control" readonly ng-change="endTimeChanged()" ng-click="open2()" uib-datepicker-popup ng-model="endTime" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /> - </div> - <div style="display:block;float:left" uib-timepicker ng-model="endTime" ng-change="endTimeChanged()" hour-step minute-step show-meridian></div> - </p> + <div class="col-md-6 col-sm-12" style="width:100%"> + <div class="panel panel-success" ng-show="chartShow"> + <div class="panel-heading">Chart + <button ng-click="generateCsv('cpu');" class="btn btn-primary" + style="float: right;margin-top:-7px;display: none ">CSV + </button> </div> - <div class="col-md-6" style="width:100%;padding-bottom:20px;"> - <p> - <div style="float:left;padding-right:30px;"> - <label style="float:left;width:80px;line-height:30px;">sourceId:</label> - <div style="float:left;width:130px;"> - <select class="form-control" ng-change="sourceIdChanged()" ng-model="sourceId" ng-options="s for s in sourceIds" > - <option value="">--- chose ---</option> - </select> - </div> - </div> - <div style="float:left" ng-show="goIsShow"> - <button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit</button> - </div> - </p> - </div> - - <div class="col-md-6 col-sm-12" style="width:100%"> - <div class="panel panel-success" ng-show="chartShow"> - <div class="panel-heading">Chart - <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px;display: none ">CSV</button> - </div> - <div align="center"><H3></H3></div><div id="chart_alarm"> <svg></svg> </div> - </div> - </div> - </div> + <div ng-show="ndaShow" style="text-align: center"><h2>No Data Available</h2></div> + <nvd3 ng-show="hdaShow" options="options" data="data" api="api" ></nvd3> + </div> </div> - <br /> - <br /> - <br /> - <br /> </div> </div> - </div>
\ No newline at end of file + <br/> + <br/> + <br/> + <br/> + </div> + </div> +</div>
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html index 15cebe57..f0c91660 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html @@ -95,5 +95,6 @@ </tbody> </table> </div> - <br><br> + <br /> + <br /> </div>
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html index 612631d6..1f0611ed 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 @@ -17,63 +17,124 @@ <h3>VNF Alarm</h3> <div class="row margin-bottom-20"> </div> - <!--div class="row margin-bottom-10"> - <div class="col-md-4"> - <ul class="nav nav-pills"> - <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> - </a> - </li> - <input type="hidden" ng-model="selectedOpen"/> - </ul> + <div class="table-container" ng-controller="pipeAlarmCtrl as amc"> + <div class="row margin-bottom-10"> + <div class="col-md-4"> + <ul class="nav nav-pills"> + <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> + </a> + </li> + <input type="hidden" ng-model="selectedOpen"/> + </ul> + </div> </div> - </div--> - <ul class="list"> - <li>Source Id <input ng-model="condition1" type="text"/></li> - <li>Source Name <input ng-model="condition2" type="text"/></li> - <li>Priority <input ng-model="condition3" type="text"/></li> - <button ng-click="alarmSearch()">search</button> - </ul> - <ul class="list" ng-show='menuState.show'> - <li><p class="input-group" style="float:left"> - <div style="float:left;line-height:100px;padding-right:4px;">Start Time</div> - <div style="float:left;padding-top:33px"><input type="text" class="form-control" readonly ng-click="open1()" uib-datepicker-popup ng-model="condition4" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /></div> - <div style="display:block;float:left" uib-timepicker ng-model="condition4" hour-step minute-step show-meridian></div> - </p></li> - <li><p class="input-group" style="float:left"> - <div style="float:left;line-height:100px;padding-right:4px;">End Time</div> - <div style="float:left;padding-top:33px"><input type="text" class="form-control" ng-click="open2()" readonly uib-datepicker-popup ng-model="condition5" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /></div> - <div style="display:block;float:left" uib-timepicker ng-model="condition5" hour-step minute-step show-meridian></div> - </p></li> - </ul> - <div class="row"> - <div class="col-md-5" style="border-top:1px dotted #ddd"> + <ul class="list" style="padding-left:0;"> + <li>Source Id <input ng-model="condition1" type="text"/></li> + <li>Source Name <input ng-model="condition2" type="text"/></li> + <li>Priority <input ng-model="condition3" type="text"/></li> + <button class="btn btn-primary" ng-click="amc.callServer(tableState)">search</button> + </ul> + <ul class="list" style="padding-left:0;" ng-show='menuState.show'> + <li><p class="input-group" style="float:left"> + <div style="float:left;line-height:100px;padding-right:4px;">Start Time</div> + <div style="float:left;padding-top:33px"><input type="text" class="form-control" readonly + ng-click="open1()" uib-datepicker-popup + ng-model="condition4" is-open="popup1.opened" + datepicker-options ng-required="true" + close-text="Close"/></div> + <div style="display:block;float:left" uib-timepicker ng-model="condition4" hour-step minute-step + show-meridian></div> + </p></li> + <li><p class="input-group" style="float:left"> + <div style="float:left;line-height:100px;padding-right:4px;">End Time</div> + <div style="float:left;padding-top:33px"><input type="text" class="form-control" ng-click="open2()" + readonly uib-datepicker-popup ng-model="condition5" + is-open="popup2.opened" datepicker-options + ng-required="true" close-text="Close"/></div> + <div style="display:block;float:left" uib-timepicker ng-model="condition5" hour-step minute-step + show-meridian></div> + </p></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="col-md-2" style="border:1px dotted #ddd;border-top:none;text-align:center" ng-click="toggleMenu()"> - <span class="caret"></span> + <div class="row"> + <div class="col-md-11"> + <h4 class="margin-bottom-15">Query Result</h4> + </div> + <div class="col-md-1"> + <!--<button ng-click="generateCsv()" class="btn btn-primary">CSV</button>--> + <button ng-click="toChart()" class="btn btn-primary">Chart</button> + </div> </div> - <div class="col-md-5" style="border-top:1px dotted #ddd" > - </div> - </div> - <div class="row"> - <div class="col-md-11"> - <h4 class="margin-bottom-15">Query Result</h4> - </div> - <div class="col-md-1"> - <!--<button ng-click="generateCsv()" class="btn btn-primary">CSV</button>--> - <button ng-click="toChart()" class="btn btn-primary">Chart</button> + <label for="items" style="float:left;width:100px;line-height:30px;">items by page</label> + <div style="float:left;width:130px;"> + <input class="input-sm form-control" name="items" id="items" type="number" ng-model="itemsByPage" /> </div> - </div> - <div> - <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> + <table class="table" st-pipe="amc.callServer" st-table="amc.displayed"> + <thead> + <tr> + <th>Id</th> + <th>Event Id</th> + <th>Event Name</th> + <th>Source Id</th> + <th>Source Name</th> + <th>Reporting Entity Id</th> + <th>Reporting Entity Name</th> + <th>Priority</th> + <th>Start Time</th> + <th>Status</th> + <th>Option</th> + </tr> + </thead> + <tbody ng-show="!amc.isLoading"> + <tr ng-repeat="row in amc.displayed"> + <td>{{row.alarmsHeader.id}}</td> + <td>{{row.alarmsHeader.eventId}}</td> + <td>{{row.alarmsHeader.eventName}}</td> + <td>{{row.alarmsHeader.sourceId}}</td> + <td>{{row.alarmsHeader.sourceName}}</td> + <td>{{row.alarmsHeader.reportingEntityId}}</td> + <td>{{row.alarmsHeader.reportingEntityName}}</td> + <td>{{row.alarmsHeader.priority}}</td> + <td>{{row.alarmsHeader.createTime}}</td> + <td>{{row.alarmsHeader.status == 1?"Active":"Closed"}}</td> + <td> + <button ng-click="jump(row.alarmsHeader.sourceId)" class="btn btn-primary">Details</button> + </td> + </tr> + </tbody> + <tbody ng-show="amc.isLoading"> + <tr> + <td colspan="4" class="text-center"> + <div class="loading-indicator"></div> + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="text-center" st-pagination="" st-items-by-page="itemsByPage" + st-template="app/uui/fusion/scripts/view-models/pagination.html" colspan="9"> + </td> + </tr> + </tfoot> + </table> </div> </div> + </div> diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/pagination.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/pagination.html new file mode 100644 index 00000000..7b9ff077 --- /dev/null +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/pagination.html @@ -0,0 +1,9 @@ +<nav ng-if="pages.length >= 2"> + <ul class="pagination"> + <li><a ng-click="selectPage(1)">First</a> + </li><li><a ng-click="selectPage(currentPage - 1)"><</a> + </li><li><a><page-select></page-select> of {{numPages}}</a> + </li><li><a ng-click="selectPage(currentPage + 1)">></a> + </li><li><a ng-click="selectPage(numPages)">Last</a></li> + </ul> +</nav>
\ No newline at end of file diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html index eb6c50fb..67acab0f 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html @@ -70,7 +70,7 @@ <div class="col-md-6" style="width:100%;padding-bottom:20px;"> <p> <div style="float:left;padding-right:30px;"> - <label style="float:left;width:80px;line-height:30px;">sourceId:</label> + <label style="float:left;width:80px;line-height:30px;">*sourceId:</label> <div style="float:left;width:130px;"> <select class="form-control" ng-change="sourceIdChanged()" ng-model="sourceId" ng-options="s for s in sourceIds" > <option value="">--- chose ---</option> @@ -78,35 +78,46 @@ </div> </div> <div style="float:left;padding-right:30px" ng-show="namesPIsShow"> - <label style="float:left;width:50px;line-height:30px;">name:</label> + <label style="float:left;width:50px;line-height:30px;">*name:</label> <div style="float:left;width:130px;"> <select class="form-control" ng-change="namePChanged()" ng-model="nameP" ng-options="np for np in namePs" > <option value="">--- chose ---</option> </select> </div> </div> - <div style="float:left;padding-right:30px" ng-show="namesCIsShow" style="float:left"> + <!--<div style="float:left;padding-right:30px" ng-show="namesCIsShow" style="float:left"> <label style="float:left;width:50px;line-height:30px;">name:</label> <div style="float:left;width:130px;"> <select class="form-control" ng-model="nameC" ng-change="nameCChanged()" ng-options="nc for nc in nameCs" > - <option value="">--- chose ---</option> + <option value="">--- chose ---</option> </select> </div> - </div> - <div ng-show="goIsShow" style="float:left"> - <button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit</button> + </div>--> + <div style="float:left"> + <button ng-disabled="goIsShow" style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit</button> </div> </p> </div> - + <div style="float:left;padding-left:15px;"> + <label style="float:left;width:90px;line-height:30px;">show mode:</label> + <div style="float:left;width:100px;"> + <select class="form-control" ng-change="showModeIdChanged()" ng-model="showModeId" + ng-options="sm for sm in showModeIds"> + <option value="">-- auto --</option> + </select> + </div> + </div> + <div class="col-md-12 col-sm-12" > - <div class="panel panel-success" ng-show="chartShow"> - <div class="panel-heading">Chart + <div class="panel panel-success" ng-show="chartShow" > + <!--<div class="panel-heading">Chart <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px;display: none ">CSV</button> - </div> - <div id="chart_performance"> <svg></svg> </div> - </div> - </div> + </div>--> + <div ng-show="ndaShow" style="text-align: center"><h2>No Data Available</h2></div> + <nvd3 ng-show="hdaShow" options="options" data="data" api="api" ></nvd3> + </div> + + </div> </div> </div> <br /> 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 f70bba06..6ed800aa 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 @@ -70,5 +70,7 @@ </tbody> </table> </div> - <br><br> + + <br /> + <br /> </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 83f4385e..9187a838 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 @@ -17,47 +17,93 @@ <div class="templatemo-content"> <h3>Performance</h3> <div> - <ul class="list"> - <li>Source Id <input type="text" ng-model="seek1"/></li> - <li>Source Name <input type="text" ng-model="seek2"/></li> - <li>Priority <input type="text" ng-model="seek3"/></li> - <button ng-click="getSearch()">search</button> - </ul> - <ul class="list" ng-show='menuState.show'> - <li> <p class="input-group" style="float:left"> - <div style="float:left;line-height:100px;padding-right:4px;">StartTime</div><div style="float:left;padding-top:33px"><input type="text" class="form-control" readonly ng-click="open1()" uib-datepicker-popup ng-model="seek4" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /></div> - <div style="display:block;float:left;" uib-timepicker ng-model="seek4" hour-step minute-step show-meridian></div> - </p></li> - <li><p class="input-group" style="float:left"> - <div style="float:left;line-height:100px;padding-right:4px;">End Time</div><div style="float:left;padding-top:33px"><input type="text" class="form-control" readonly ng-click="open2()" uib-datepicker-popup ng-model="seek5" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /></div> - <div style="display:block;float:left" uib-timepicker ng-model="seek5" hour-step minute-step show-meridian></div> - </p></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">Query Result</h4> + <div class="table-container" ng-controller="pipeCtrl as mc"> + <ul class="list" style="padding-left:0;"> + <li>Source Id <input type="text" ng-model="seek1"/></li> + <li>Source Name <input type="text" ng-model="seek2"/></li> + <li>Priority <input type="text" ng-model="seek3"/></li> + <button class="btn btn-primary" ng-click="mc.callServer(tableState)">search</button> + </ul> + <ul class="list" style="padding-left:0;" ng-show='menuState.show'> + <li> <p class="input-group" style="float:left"> + <div style="float:left;line-height:100px;padding-right:4px;">StartTime</div><div style="float:left;padding-top:33px"><input type="text" class="form-control" readonly ng-click="open1()" uib-datepicker-popup ng-model="seek4" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" /></div> + <div style="display:block;float:left;" uib-timepicker ng-model="seek4" hour-step minute-step show-meridian></div> + </p></li> + <li><p class="input-group" style="float:left"> + <div style="float:left;line-height:100px;padding-right:4px;">End Time</div><div style="float:left;padding-top:33px"><input type="text" class="form-control" readonly ng-click="open2()" uib-datepicker-popup ng-model="seek5" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" /></div> + <div style="display:block;float:left" uib-timepicker ng-model="seek5" hour-step minute-step show-meridian></div> + </p></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="col-md-1"> - <!-- <button ng-click="generateCsv()" class="btn btn-primary">CSV</button>--> - <button ng-click="toChart()" class="btn btn-primary">Chart</button> + <div class="row"> + <div class="col-md-11"> + <div class="table-responsive"> + <h4 class="margin-bottom-15">Query Result</h4> + </div> + </div> + <div class="col-md-1"> + <!-- <button ng-click="generateCsv()" class="btn btn-primary">CSV</button>--> + <button ng-click="toChart()" class="btn btn-primary">Chart</button> + </div> </div> + + <label for="items" style="float:left;width:100px;line-height:30px;">items by page</label> + <div style="float:left;width:130px;"> + <input class="input-sm form-control" name="items" id="items" type="number" ng-model="itemsByPage" /> + </div> + <table class="table" st-pipe="mc.callServer" st-table="mc.displayed"> + <thead> + <tr> + <th >Id</th> + <th >Event Id</th> + <th >Event Name</th> + <th >Source Id</th> + <th >Source Name</th> + <th >Reporting Entity Id</th> + <th >Reporting Entity Name</th> + <th >Priority</th> + <th >Start Time</th> + <th >Option</th> + </tr> + </thead> + <tbody ng-show="!mc.isLoading"> + <tr ng-repeat="row in mc.displayed"> + <td>{{row.performanceHeader.id}}</td> + <td>{{row.performanceHeader.eventId}}</td> + <td>{{row.performanceHeader.eventName}}</td> + <td>{{row.performanceHeader.sourceId}}</td> + <td>{{row.performanceHeader.sourceName}}</td> + <td>{{row.performanceHeader.reportingEntityId}}</td> + <td>{{row.performanceHeader.reportingEntityName}}</td> + <td>{{row.performanceHeader.priority}}</td> + <td>{{row.performanceHeader.createTime}}</td> + <td><button ng-click="jump(row.performanceHeader.sourceId)" class="btn btn-primary" >Details</button></td> + </tr> + </tbody> + <tbody ng-show="mc.isLoading"> + <tr> + <td colspan="4" class="text-center"><div class="loading-indicator"></div> + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td class="text-center" st-pagination="" st-items-by-page="itemsByPage" st-template="app/uui/fusion/scripts/view-models/pagination.html" colspan="9"> + </td> + </tr> + </tfoot> + </table> </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> |