eagle-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From h..@apache.org
Subject incubator-eagle git commit: [EAGLE-831] UI alert support time range select
Date Thu, 08 Dec 2016 09:35:46 GMT
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 <smith3816@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 <smith3816@gmail.com>
Authored: Thu Dec 8 17:35:38 2016 +0800
Committer: Hao Chen <hao@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;
 	});
 })();


Mime
View raw message