You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@eagle.apache.org by ha...@apache.org on 2016/12/08 09:35:46 UTC
incubator-eagle git commit: [EAGLE-831] UI alert support time range
select
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 <sm...@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 <sm...@gmail.com>
Authored: Thu Dec 8 17:35:38 2016 +0800
Committer: Hao Chen <ha...@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;
});
})();