Repository: incubator-eagle Updated Branches: refs/heads/master 162aac84f -> dd9cd7c51
[EAGLE-831] UI alert support time range select * alert list support time range * policy detail page display alert template Author: zombieJ <smith3...@gmail.com> Closes #723 from zombieJ/831. Project: http://git-wip-us.apache.org/repos/asf/incubator-eagle/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-eagle/commit/dd9cd7c5 Tree: http://git-wip-us.apache.org/repos/asf/incubator-eagle/tree/dd9cd7c5 Diff: http://git-wip-us.apache.org/repos/asf/incubator-eagle/diff/dd9cd7c5 Branch: refs/heads/master Commit: dd9cd7c51cd5454fd201cd27377f22eb2d60d9ec Parents: 162aac8 Author: zombieJ <smith3...@gmail.com> Authored: Thu Dec 8 17:35:38 2016 +0800 Committer: Hao Chen <h...@apache.org> Committed: Thu Dec 8 17:35:38 2016 +0800 ---------------------------------------------------------------------- eagle-server/src/main/webapp/app/dev/index.html | 9 +++- .../webapp/app/dev/partials/alert/list.html | 14 +----- .../app/dev/partials/alert/policyDetail.html | 47 +++++++++++++------ .../src/main/webapp/app/dev/public/js/app.js | 8 +++- .../webapp/app/dev/public/js/ctrls/alertCtrl.js | 48 +++++++++----------- .../app/dev/public/js/services/timeSrv.js | 37 ++++++++++++++- 6 files changed, 104 insertions(+), 59 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/dd9cd7c5/eagle-server/src/main/webapp/app/dev/index.html ---------------------------------------------------------------------- diff --git a/eagle-server/src/main/webapp/app/dev/index.html b/eagle-server/src/main/webapp/app/dev/index.html index 93018b4..47e1b76 100644 --- a/eagle-server/src/main/webapp/app/dev/index.html +++ b/eagle-server/src/main/webapp/app/dev/index.html @@ -66,7 +66,7 @@ <ul class="nav navbar-nav"> <li class="dropdown time-picker" ng-if="Time.pickerType === Time.TIME_RANGE_PICKER"> <a data-toggle="dropdown" aria-expanded="false"> - <i class="fa fa-calendar"></i> + <span class="fa fa-{{Time.autoRefresh ? 'refresh' : 'calendar'}}"></span> {{Time.format("startTime", Time.SHORT_FORMAT)}} ~ {{Time.format("endTime", Time.SHORT_FORMAT)}} </a> <ul class="dropdown-menu"> @@ -75,6 +75,13 @@ <li><a ng-click="setLastDuration(12)"><i class="fa fa-clock-o"></i>Last 12 Hours</a></li> <li><a ng-click="setLastDuration(24)"><i class="fa fa-clock-o"></i>Last 24 Hours</a></li> <li><a ng-click="customizeTimeRange()"><i class="fa fa-clock-o"></i>Customize</a></li> + <li role="separator" class="divider"></li> + <li uib-tooltip="Enable will keep fetching latest data. Interval: every minute" tooltip-placement="left" tooltip-append-to-body="true"> + <a ng-click="updateTimeAutoRefresh()"> + <span class="fa" ng-class="Time.autoRefresh ? 'fa-check-square-o' : 'fa-square-o'"></span> + Auto Refresh + </a> + </li> </ul> </li> <li class="hover-dropdown"> http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/dd9cd7c5/eagle-server/src/main/webapp/app/dev/partials/alert/list.html ---------------------------------------------------------------------- diff --git a/eagle-server/src/main/webapp/app/dev/partials/alert/list.html b/eagle-server/src/main/webapp/app/dev/partials/alert/list.html index 806234d..d06b41f 100644 --- a/eagle-server/src/main/webapp/app/dev/partials/alert/list.html +++ b/eagle-server/src/main/webapp/app/dev/partials/alert/list.html @@ -22,18 +22,6 @@ <h3 class="box-title"> Alert List </h3> - <div class="box-tools pull-right" > - <div class="btn-group"> - <button class="btn btn-default btn-sm" ng-class="{active: displayType === 'raw'}" - tooltip-append-to-body="true" uib-tooltip="raw data" ng-click="displayType = 'raw'"> - <i class="fa fa-keyboard-o"></i> - </button> - <button class="btn btn-default btn-sm" ng-class="{active: displayType === 'format'}" - tooltip-append-to-body="true" uib-tooltip="format data" ng-click="displayType = 'format'"> - <i class="fa fa-list"></i> - </button> - </div> - </div> </div> <div class="box-body"> <div sort-table="alertList" is-sorting="isSorting"> @@ -42,7 +30,7 @@ <tr> <th sortpath="alertTimestamp" width="135"> Time - <span class="fa fa-refresh fa-spin no-animate" ng-show="!alertList._done || isSorting"></span> + <span class="fa fa-refresh fa-spin no-animate" ng-show="loading || isSorting"></span> </th> <th sortpath="tags.severity" width="85">Severity</th> <th sortpath="tags.siteId" width="75">Site</th> http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/dd9cd7c5/eagle-server/src/main/webapp/app/dev/partials/alert/policyDetail.html ---------------------------------------------------------------------- diff --git a/eagle-server/src/main/webapp/app/dev/partials/alert/policyDetail.html b/eagle-server/src/main/webapp/app/dev/partials/alert/policyDetail.html index e21b91d..c0ff80a 100644 --- a/eagle-server/src/main/webapp/app/dev/partials/alert/policyDetail.html +++ b/eagle-server/src/main/webapp/app/dev/partials/alert/policyDetail.html @@ -57,26 +57,15 @@ <!--li><a href="#statistic" data-toggle="tab">Statistic</a></li--> <li class="active"><a href="#setting" data-toggle="tab" ng-click="setTab('setting')">Setting</a></li> <li><a href="#assignments" data-toggle="tab" ng-click="setTab('assignments')">Assignments</a></li> - <li><a href="#alerts" data-toggle="tab" ng-click="setTab('alerts')">Alerts</a></li> - <li class="pull-right box-tools" ng-show="tab === 'alerts'"> - <div class="btn-group"> - <button class="btn btn-default btn-sm" ng-class="{active: displayType === 'raw'}" - tooltip-append-to-body="true" uib-tooltip="raw data" ng-click="displayType = 'raw'"> - <i class="fa fa-keyboard-o"></i> - </button> - <button class="btn btn-default btn-sm" ng-class="{active: displayType === 'format'}" - tooltip-append-to-body="true" uib-tooltip="format data" ng-click="displayType = 'format'"> - <i class="fa fa-list"></i> - </button> - </div> - </li> + <li><a href="#definition" data-toggle="tab" ng-click="setTab('definition')">Alert Definition</a></li> + <li><a href="#alerts" data-toggle="tab" ng-click="setTab('alerts')">Alert List</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="setting"> <table class="table"> <tbody> <tr> - <th>Parallelism Hint</th> + <th class="text-no-break">Parallelism Hint</th> <td>{{policy.parallelismHint}}</td> </tr> <tr> @@ -146,8 +135,10 @@ </tbody> </table> </div> + <div class="tab-pane" id="statistic">statistic </div> + <div class="tab-pane" id="assignments"> <table class="table"> <tbody> @@ -175,6 +166,34 @@ </tbody> </table> </div> + + <div class="tab-pane" id="definition"> + <table class="table"> + <tbody> + <tr> + <th width="15%">Category</th> + <td>{{policy.alertDefinition.category}}</td> + </tr> + <tr> + <th>Severity</th> + <td> + <span class="label label-{{Policy.getSeverityClass(policy.alertDefinition.severity)}}"> + {{policy.alertDefinition.severity}} + </span> + </td> + </tr> + <tr> + <th>Alert Subject</th> + <td>{{policy.alertDefinition.subject}}</td> + </tr> + <tr> + <th>Alert Body</th> + <td><pre>{{policy.alertDefinition.body}}</pre></td> + </tr> + </tbody> + </table> + </div> + <div class="tab-pane" id="alerts"> <div sort-table="alertList"> <table class="table table-bordered"> http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/dd9cd7c5/eagle-server/src/main/webapp/app/dev/public/js/app.js ---------------------------------------------------------------------- diff --git a/eagle-server/src/main/webapp/app/dev/public/js/app.js b/eagle-server/src/main/webapp/app/dev/public/js/app.js index 1eb833f..87cae11 100644 --- a/eagle-server/src/main/webapp/app/dev/public/js/app.js +++ b/eagle-server/src/main/webapp/app/dev/public/js/app.js @@ -118,10 +118,10 @@ var app = {}; }) // ================================= Alerts ================================= .state('alertList', { - url: "/alerts", + url: "/alerts?startTime&endTime", templateUrl: "partials/alert/list.html?_=" + window._TRS(), controller: "alertListCtrl", - resolve: routeResolve() + resolve: routeResolve({ time: { autoRefresh: true } }) }) .state('policyList', { url: "/policies", @@ -328,6 +328,10 @@ var app = {}; $("#eagleTimeRangeMDL").modal(); }; + $scope.updateTimeAutoRefresh = function () { + Time.autoRefresh = !Time.autoRefresh; + }; + $scope.setLastDuration = function (hours) { var endTime = new Time(); var startTime = endTime.clone().subtract(hours, "hours"); http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/dd9cd7c5/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js ---------------------------------------------------------------------- diff --git a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js index 02852f4..4ddff52 100644 --- a/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js +++ b/eagle-server/src/main/webapp/app/dev/public/js/ctrls/alertCtrl.js @@ -24,23 +24,35 @@ // ====================================================================================== // = Alert = // ====================================================================================== - eagleControllers.controller('alertListCtrl', function ($scope, $wrapState, $interval, PageConfig, CompatibleEntity, Time) { + eagleControllers.controller('alertListCtrl', function ($scope, $wrapState, PageConfig, CompatibleEntity, Time) { PageConfig.title = "Alerts"; - $scope.displayType = "raw"; - $scope.alertList = CompatibleEntity.query("LIST", { - query: "AlertService", - startTime: new Time().subtract(7, 'day'), - endTime: new Time() - }); + $scope.alertList = []; + $scope.loading = false; + + function loadAlerts() { + $scope.loading = true; + var list = CompatibleEntity.query("LIST", { + query: "AlertService", + startTime: new Time('startTime'), + endTime: new Time('endTime') + }); + list._then(function () { + $scope.alertList = list; + $scope.loading = false; + }); + } + loadAlerts(); + + Time.onReload(loadAlerts, $scope); // ================================================================ // = Sync = // ================================================================ - var refreshInterval = $interval($scope.alertList._refresh, 1000 * 10); + /* var refreshInterval = $interval($scope.alertList._refresh, 1000 * 10); $scope.$on('$destroy', function() { $interval.cancel(refreshInterval); - }); + }); */ }); eagleControllers.controller('alertDetailCtrl', function ($sce, $scope, $wrapState, PageConfig, CompatibleEntity) { @@ -137,7 +149,6 @@ ]; $scope.tab = "setting"; - $scope.displayType = "raw"; $scope.setTab = function (tab) { $scope.tab = tab; @@ -180,23 +191,6 @@ } updatePolicy(); - /* - $scope.streamList = []; - Entity.queryMetadata("streams")._then(function (res) { - $scope.streamList = $.map(res.data, function (stream) { - var application = Application.findProvider(stream.dataSource); - return $.extend({application: application}, stream); - }); - }); - - $scope.dataSources = {}; - Entity.queryMetadata("datasources")._then(function(res) { - $.each(res.data, function (i, dataSource) { - $scope.dataSources[dataSource.name] = dataSource; - }); - }); - */ - var streams = {}; Entity.queryMetadata("datasources")._then(function(res) { var dataSources = {}; http://git-wip-us.apache.org/repos/asf/incubator-eagle/blob/dd9cd7c5/eagle-server/src/main/webapp/app/dev/public/js/services/timeSrv.js ---------------------------------------------------------------------- diff --git a/eagle-server/src/main/webapp/app/dev/public/js/services/timeSrv.js b/eagle-server/src/main/webapp/app/dev/public/js/services/timeSrv.js index c8f367d..2c8e168 100644 --- a/eagle-server/src/main/webapp/app/dev/public/js/services/timeSrv.js +++ b/eagle-server/src/main/webapp/app/dev/public/js/services/timeSrv.js @@ -26,6 +26,7 @@ ["seconds", "s", "s"] ]; + var autoGenerateTime = false; var keepTime = false; var serviceModule = angular.module('eagle.service'); @@ -96,6 +97,7 @@ $Time.TIME_RANGE_PICKER = "timeRange"; $Time.pickerType = null; + $Time.autoRefresh = false; $Time._reloadListenerList = reloadListenerList; // TODO: time zone @@ -236,12 +238,21 @@ $Time.getPromise = function (config, state, param) { var deferred = $q.defer(); + var timeConfig = typeof config.time === true ? {} : config.time; + + // Ignore time update if customise time set. if(keepTime) { + // Update auto refresh mark if time is generated from promise + if(autoGenerateTime && timeConfig) { + $Time.autoRefresh = timeConfig.autoRefresh; + } + + autoGenerateTime = false; keepTime = false; deferred.resolve($Time); } else { - if (config.time === true) { - $Time.pickerType = $Time.TIME_RANGE_PICKER; + if (timeConfig) { + $Time.pickerType = timeConfig.type || $Time.TIME_RANGE_PICKER; startTime = $Time.verifyTime(param.startTime); endTime = $Time.verifyTime(param.endTime); @@ -250,6 +261,7 @@ endTime = $Time(); startTime = endTime.clone().subtract(2, "hour"); + autoGenerateTime = true; keepTime = true; $Time._innerSearch = { startTime: $Time.format(startTime), @@ -259,6 +271,7 @@ } else { $Time._innerSearch = null; $Time.pickerType = null; + $Time.autoRefresh = false; } deferred.resolve($Time); } @@ -266,6 +279,26 @@ return deferred.promise; }; + // Interval update + setInterval(function () { + if(!$Time.autoRefresh) return; + + var interval = $Time.diff($Time('startTime'), $Time('endTime')); + var endTime = $Time(); + var startTime = endTime.clone().subtract(interval, "ms"); + $Time.timeRange(startTime, endTime); + }, 1000 * 60); + + if(window.sessionStorage) { + $Time.autoRefresh = sessionStorage.getItem("timeAutoRefresh") === "true"; + } + + $(window).unload(function(){ + if(window.sessionStorage) { + sessionStorage.setItem("timeAutoRefresh", $Time.autoRefresh); + } + }); + return $Time; }); })();
