Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
Merge pull request #220 from vrockai/alertsRefactor
Browse files Browse the repository at this point in the history
Console: Alerts refactoring
  • Loading branch information
mtho11 committed Jun 18, 2015
2 parents 594eda5 + 1367701 commit e4d6dc4
Show file tree
Hide file tree
Showing 13 changed files with 227 additions and 194 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<div>
<div class="panel panel-default alert alert-danger" ng-if="alert.type=='AVAILABILITY'">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
{{alert.start | date:'medium' }}
</div>
<div class="hk-event">
Server <strong>down</strong> for {{(alert.end - alert.start)/1000 | number: 0}} seconds (until
<span ng-if="alert.isThisYear && alert.isToday">{{alert.end | date:'shortTime' }}).</span>
<span ng-if="alert.isThisYear && !alert.isToday">{{alert.end | date:'MMM d, h:mm:ss a' }}).</span>
<span ng-if="!alert.isThisYear">{{alert.end | date:'medium' }}).</span>
</div>

<div class="alert-resolver">
<a ng-click="alertResolve(alert, $index)" tooltip="Mark as resolved"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-popup-delay="500">
<i class="fa" ng-class="{'fa-check-square-o': hover, 'fa-square-o': !hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
</i>
</a>
</div>
</div>

<div class="panel panel-default alert alert-danger" ng-if="alert.type=='THRESHOLD'">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
{{alert.start | date:'medium' }}
</div>
<div class="hk-event">
<strong>Response time</strong> was above the threshold ({{alert.threshold | number: 0}} ms) for {{(alert.end - alert.start) / 1000.0 | number: 0}} seconds (until
<span ng-if="alert.isThisYear && alert.isToday">{{alert.end | date:'shortTime' }}).</span>
<span ng-if="alert.isThisYear && !alert.isToday">{{alert.end | date:'MMM d, h:mm:ss a' }}).</span>
<span ng-if="!alert.isThisYear">{{alert.end | date:'medium' }}).</span>
The average response time was {{alert.avg | number: 0}} ms.
</div>

<div class="alert-resolver">
<a ng-click="alertResolve()" tooltip="Mark as resolved"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-popup-delay="500">
<i class="fa" ng-class="{'fa-check-square-o': hover, 'fa-square-o': !hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
</i>
</a>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div>
<hk-alert-panel ng-repeat="alert in alertList | orderBy: '-start' | limitTo: (limit ? limit : 1000) track by $index"
hk-alert="alert" hk-refresh="alertResolve(hkAlert)"></hk-alert-panel>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
///
/// Copyright 2015 Red Hat, Inc. and/or its affiliates
/// and other contributors as indicated by the @author tags.
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

/// <reference path="../../includes.ts"/>
/// <reference path="../../includes.ts"/>

module Alert {

export var _module = angular.module('hawkular-alerts');

class HkAlertPanel {

public link: (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
public replace = 'true';
public scope = {
alert: '=hkAlert',
refresh: '&hkRefresh'
};
public templateUrl = 'plugins/alert/html/alert.html';


constructor(private HawkularAlert) {
this.link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
scope.alertResolve = (): void => {
this.HawkularAlert.Alert.resolve({alertIds: scope.alert.id}, {}, () => {
scope.refresh({hkAlert: scope.alert});
});
};
};
}

public static Factory() {
var directive = (HawkularAlert: any) => {
return new HkAlertPanel(HawkularAlert);
};

directive['$inject'] = ['HawkularAlert'];

return directive;
}
}

_module.directive('hkAlertPanel', HkAlertPanel.Factory());

class HkAlertPanelList {

public link: (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
public replace = 'true';
public scope = {
alertList: '=hkAlertList',
limit: '=hkLimit'
};
public templateUrl = 'plugins/alert/html/alertList.html';

constructor() {
this.link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
scope.alertResolve = (alert): void => {
for (var i = 0; i< scope.alertList.length; i++) {
if (scope.alertList[i].id === alert.id) {
scope.alertList.splice(i, 1);
break;
}
}
};
};
}

public static Factory() {
var directive = () => {
return new HkAlertPanelList();
};

directive['$inject'] = [];

return directive;
}
}

_module.directive('hkAlertPanelList', HkAlertPanelList.Factory());
}
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ <h4 class="modal-title">Alert Settings</h4>
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="modal-footer alert-settings">
<button type="button" class="btn btn-primary" ng-click="mas.save()"
ng-disabled="!mas.alertsSetup.$valid || !mas.isSettingChange || mas.saveProgress">
<div ng-show="mas.saveProgress" class="spinner spinner-xs hk-modal-spinner"></div>Save</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,65 +30,8 @@ <h1>No alerts have been fired.</h1>
<p class="pull-right"><strong>{{(mac.alertList | filter:timeFilter).length}} alerts</strong> last week.</p>
</div>
-->
<div class="clearfix">
<div ng-repeat="alert in mac.alertList | filter:timeFilter | orderBy: '-start'">
<hk-alert-panel-list class="clearfix" hk-alert-list="mac.alertList"></hk-alert-panel-list>

<div class="panel panel-default alert alert-danger" ng-if="alert.type=='AVAILABILITY'">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
{{alert.start | date:'medium' }}
</div>
<div class="hk-event">
Server <strong>down</strong> for {{(alert.end - alert.start)/1000 | number: 0}} seconds (until
<span ng-if="alert.isThisYear && alert.isToday">{{alert.end | date:'shortTime' }}).</span>
<span ng-if="alert.isThisYear && !alert.isToday">{{alert.end | date:'MMM d, h:mm:ss a' }}).</span>
<span ng-if="!alert.isThisYear">{{alert.end | date:'medium' }}).</span>
</div>

<div class="alert-resolver">
<a ng-click="mac.alertResolve(alert, $index)" tooltip="Mark as resolved"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-popup-delay="500">
<i class="fa" ng-class="{'fa-check-square-o': hover, 'fa-square-o': !hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
</i>
</a>
</div>
</div>

<div class="panel panel-default alert alert-danger" ng-if="alert.type=='THRESHOLD'">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
{{alert.start | date:'medium' }}
</div>
<div class="hk-event">
<strong>Response time</strong> was above the threshold ({{alert.threshold | number: 0}} ms) for {{(alert.end - alert.start) / 1000.0 | number: 0}} seconds (until
<span ng-if="alert.isThisYear && alert.isToday">{{alert.end | date:'shortTime' }}).</span>
<span ng-if="alert.isThisYear && !alert.isToday">{{alert.end | date:'MMM d, h:mm:ss a' }}).</span>
<span ng-if="!alert.isThisYear">{{alert.end | date:'medium' }}).</span>
The average response time was {{alert.avg | number: 0}} ms.
</div>

<div class="alert-resolver">
<a ng-click="mac.alertResolve(alert, $index)" tooltip="Mark as resolved"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-popup-delay="500">
<i class="fa" ng-class="{'fa-check-square-o': hover, 'fa-square-o': !hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
</i>
</a>
</div>
</div>
</div>
</div>
<div class="clearfix" ng-show="mac.alertList.length > 0">
<button class="btn btn-default pull-right" ng-click="mac.resolveAll()" ng-disabled="mac.isResolvingAll">
<i class="fa fa-check-square-o"></i> Resolve all
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<section id="hk-alerts" class="hk-tab-content">
<div class="hk-info-top clearfix">
<h3 class="pull-left">Alerts <span>({{(mac.alertList | filter:timeFilter).length}})</span></h3>
<h3 class="pull-left">Alerts <span>({{(mac.alertList).length}})</span></h3>
<span class="hk-settings pull-right"><a href="#" ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert Settings</a></span>
</div>
<div ng-include="'plugins/metrics/html/alerts-view.html'"></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,7 @@ <h3 class="pull-left" data-toggle="tooltip" data-placement="top" title="" data-o
<div class="hk-event">No Alerts have been fired in this category and time range.</div>
</div>
<!-- Alerts exist -->
<div class="panel panel-default alert alert-danger" ng-repeat="alert in vm.alertList | limitTo: (showAllAlerts ? 100000 : 3) track by $index">
<div class="hk-alert-icon"><i class="fa fa-flag"></i></div>
<div class="hk-date">{{alert.evalSets[0][0].evalTimestamp | date:'medium' }}</div>
<div>Server <strong>down</strong> for {{(alert.ctime - alert.evalSets[0][0].evalTimestamp) / 1000 | number:0}} seconds (until {{alert.ctime | date:'mediumTime'}}).</div>

<div class="alert-resolver">
<a ng-click="vm.alertResolve(alert, $index)" tooltip="Mark as resolved"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-popup-delay="500">
<i class="fa" ng-class="{'fa-check-square-o': hover, 'fa-square-o': !hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
</i>
</a>
</div>

</div>
<hk-alert-panel-list class="clearfix" hk-alert-list="vm.alertList" hk-limit="(showAllAlerts ? 100000 : 3)"></hk-alert-panel-list>
</div>

<!-- Availability Chart -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,7 @@ <h3 class="pull-left" data-toggle="tooltip" data-placement="top" title="" data-o
<div>No alerts have been fired in this category and time range.</div>
</div>
<!-- Alerts exist -->
<div class="panel panel-default alert alert-danger" ng-repeat="alert in vm.alertList | limitTo: (showAllAlerts ? 100000 : 3) track by $index">
<div class="hk-alert-icon"><i class="fa fa-flag"></i></div>
<div class="hk-date">{{alert.evalSets[0][0].evalTimestamp | date:'medium' }}</div>
<div class="hk-event"><strong>Response time</strong> was above the threshold ({{alert.evalSets[0][0].condition.threshold}}ms) for {{(alert.ctime - alert.evalSets[0][0].evalTimestamp) / 1000 | number:0}} seconds (until {{alert.ctime | date:'mediumTime'}}).</div>

<div class="alert-resolver">
<a ng-click="vm.alertResolve(alert, $index)" tooltip="Mark as resolved"
tooltip-placement="top"
tooltip-trigger="mouseenter"
tooltip-popup-delay="500">
<i class="fa" ng-class="{'fa-check-square-o': hover, 'fa-square-o': !hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
</i>
</a>
</div>

</div>
<hk-alert-panel-list class="clearfix" hk-alert-list="vm.alertList" hk-limit="(showAllAlerts ? 100000 : 3)"></hk-alert-panel-list>
</div>

<!-- Response Time Graph -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -633,6 +633,13 @@ a:hover .fa-spinner {
margin-top: @grid-gutter-width/2;
}

.alert-settings.modal-footer {
.spinner {
display: inline-block;
margin-right: 5px;
}
}

.form-horizontal {

fieldset {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@

module HawkularMetrics {

export enum AlertType {
AVAILABILITY,
THRESHOLD,
}

export interface IHawkularAlertsManager {
addEmailAction(email: string): ng.IPromise<void>;
createAction(email: string): ng.IPromise<void>;
Expand All @@ -36,7 +41,7 @@ module HawkularMetrics {
setEmail(triggerId: string, email: string): ng.IPromise<void>;
setResponseTime(triggerId: string, treshold: number, duration: number, enabled: boolean): ng.IPromise<void>;
setDowntime(triggerId: string, duration: number, enabled: boolean): ng.IPromise<void>;
queryConsoleAlerts(metricId: string): ng.IPromise<void>;
queryConsoleAlerts(metricId: string, startTime?:TimestampInMillis, endTime?:TimestampInMillis, type?:AlertType): ng.IPromise<void>;
}

export class HawkularAlertsManager implements IHawkularAlertsManager{
Expand Down Expand Up @@ -197,7 +202,7 @@ module HawkularMetrics {
return undefined;
}

queryConsoleAlerts(metricId: string): ng.IPromise<void> {
queryConsoleAlerts(metricId: string, startTime?:TimestampInMillis, endTime?:TimestampInMillis, alertType?:AlertType): ng.IPromise<void> {

var alertList = [];

Expand All @@ -213,10 +218,27 @@ module HawkularMetrics {
*/

return this.HawkularAlert.Alert.query({
triggerIds:metricId+'_trigger_avail,' + metricId+'_trigger_thres',
statuses:'OPEN'
}).$promise.then((serverAlerts: any) => {
var queryParams = {
statuses:'OPEN'
};

if (alertType === AlertType.AVAILABILITY) {
queryParams['triggerIds'] = metricId+'_trigger_avail';
} else if (alertType === AlertType.THRESHOLD) {
queryParams['triggerIds'] = metricId+'_trigger_thres';
} else {
queryParams['triggerIds'] = metricId+'_trigger_avail,' + metricId+'_trigger_thres';
}

if (startTime) {
queryParams[startTime] = startTime;
}

if (endTime) {
queryParams[endTime] = endTime;
}

return this.HawkularAlert.Alert.query(queryParams).$promise.then((serverAlerts: any) => {

var momentNow = this.$moment();

Expand Down

0 comments on commit e4d6dc4

Please sign in to comment.