root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 243 Packages Projects Releases Wiki Activity

feat(alerting): minor progress on alert list, #5784

This commit is contained in:
Torkel Ödegaard 2016-08-16 16:50:36 +02:00
parent 6b90587d27
commit 0b7fa3c19d
13 changed files with 71 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/api/index.go
View File

@ -99,7 +99,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
Text: "Alerting",
Icon: "icon-gf icon-gf-monitoring",
Icon: "icon-gf icon-gf-alert",
Url: setting.AppSubUrl + "/alerting/list",
Children: alertChildNavs,
})

1
pkg/services/sqlstore/alert.go
View File

@ -161,6 +161,7 @@ func upsertAlerts(existingAlerts []*m.Alert, cmd *m.SaveAlertsCommand, sess *xor
alert.Updated = time.Now()
alert.Created = time.Now()
alert.State = m.AlertStatePending
alert.NewStateDate = time.Now()
_, err := sess.Insert(alert)
if err != nil {

9
public/app/core/routes/routes.ts
View File

@ -194,6 +194,9 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
controllerAs: 'ctrl',
templateUrl: 'public/app/features/styleguide/styleguide.html',
})
.when('/alerting', {
redirectTo: '/alerting/list'
})
.when('/alerting/list', {
templateUrl: 'public/app/features/alerting/partials/alert_list.html',
controller: 'AlertListCtrl',
@ -218,12 +221,6 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
controllerAs: 'ctrl',
resolve: loadAlertingBundle,
})
.when('/alerting/:alertId/states', {
templateUrl: 'public/app/features/alerting/partials/alert_log.html',
controller: 'AlertLogCtrl',
controllerAs: 'ctrl',
resolve: loadAlertingBundle,
})
.otherwise({
templateUrl: 'public/app/partials/error.html',
controller: 'ErrorCtrl'

16
public/app/features/alerting/alert_def.ts
View File

@ -42,19 +42,29 @@ function createReducerPart(model) {
}
var severityLevels = {
'critical': {text: 'Critical', iconClass: 'icon-gf-critical alert-icon-critical'},
'warning': {text: 'Warning', iconClass: 'icon-gf-warn alert-icon-warn'},
'critical': {text: 'CRITICAL', iconClass: 'icon-gf icon-gf-critical', stateClass: 'alert-state-critical'},
'warning': {text: 'WARNING', iconClass: 'icon-gf icon-gf-warning', stateClass: 'alert-state-warning'},
};
function getStateDisplayModel(state, severity) {
var model = {
text: 'OK',
iconClass: 'icon-gf-online alert-icon-online'
iconClass: 'icon-gf icon-gf-online',
stateClass: 'alert-state-ok'
};
if (state === 'firing') {
model.text = severityLevels[severity].text;
model.iconClass = severityLevels[severity].iconClass;
model.stateClass = severityLevels[severity].stateClass;
} else if (state === 'pending') {
model.text = "PENDING";
model.iconClass = "fa fa-question";
model.stateClass = "alert-state-pending";
} else if (state === 'paused') {
model.text = "PAUSED";
model.iconClass = "fa fa-pause";
model.stateClass = "alert-state-paused";
}
return model;

27
public/app/features/alerting/partials/alert_list.html
View File

@ -1,9 +1,9 @@
<navbar icon="icon-gf icon-gf-monitoring" title="Alerting" title-url="alerting">
<navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
</navbar>
<div class="page-container" >
<div class="page-header">
<h1>Alerting</h1>
<h1>Alert List</h1>
</div>
<div class="gf-form-group">
@ -22,27 +22,34 @@
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="alert in ctrl.alerts">
<a class="card-item" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
<div class="card-item card-item--alert">
<div class="card-item-header">
<div class="card-item-type">ACTIVE</div>
<div class="card-item-type">
<a href="dashboard/{{alert.dashboardUri}}" bs-tooltip="'Open dashboard'">
<i class="icon-gf icon-gf-dashboard"></i>
</a>
</div>
<div class="card-item-notice" ng-show="alert.executionError">
<span>Execution Error</span>
</div>
</div>
<div class="card-item-body">
<div class="card-item-details">
<div class="card-item-name">{{alert.name}}</div>
<div class="card-item-name">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
</div>
<div class="card-item-sub-name">
<div class="alert-list-state-line">
<i class="icon-gf {{alert.stateModel.iconClass}}"></i>
<span class="alert-list-item-state {{alert.stateModel.stateClass}}">
<i class="{{alert.stateModel.iconClass}}"></i>
{{alert.stateModel.text}}
for
{{alert.newStateDateAgo}}
</span> for {{alert.newStateDateAgo}}
</div>
</div>
</div>
</div>
</a>
</div>
</li>
</ol>
</section>

2
public/app/features/alerting/partials/notification_edit.html
View File

@ -1,4 +1,4 @@
<navbar icon="icon-gf icon-gf-monitoring" title="Alerting" title-url="alerting">
<navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
<a href="alerting/notifications" class="navbar-page-btn">
<i class="fa fa-fw fa-envelope-o"></i>
Notifications

6
public/app/features/alerting/partials/notifications_list.html
View File

@ -1,8 +1,4 @@
<navbar icon="icon-gf icon-gf-monitoring" title="Alerting" title-url="alerting">
<a href="alerting/notifications" class="navbar-page-btn">
<i class="fa fa-fw fa-envelope-o"></i>
Notifications
</a>
<navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
</navbar>
<div class="page-container" >

10
public/app/plugins/panel/graph/threshold_manager.ts
View File

@ -15,17 +15,17 @@ export class ThresholdManager {
constructor(private panelCtrl) {}
getHandleHtml(handleIndex, model, valueStr) {
var colorClass = 'crit';
if (model.colorMode === 'warning') {
colorClass = 'warn';
var stateClass = model.colorMode;
if (model.colorMode === 'custom') {
stateClass = 'critical';
}
return `
<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}">
<div class="alert-handle-line alert-handle-line--${colorClass}">
<div class="alert-handle-line alert-handle-line--${stateClass}">
</div>
<div class="alert-handle" data-handle-index="${handleIndex}">
<i class="icon-gf icon-gf-${colorClass} alert-icon-${colorClass}"></i>
<i class="icon-gf icon-gf-${stateClass} alert-state-${stateClass}"></i>
<span class="alert-handle-value">${valueStr}<i class="alert-handle-grip"></i></span>
</div>
</div>`;

4
public/app/plugins/panel/singlestat/editor.html
View File

@ -182,9 +182,9 @@
<li>
<input type="number" class="input-small tight-form-input last" ng-model="ctrl.panel.gauge.maxValue" ng-blur="ctrl.render()" placeholder="100"></input>
<span class="alert-state-critical" ng-show="ctrl.invalidGaugeRange">
&nbsp;
<i class="fa fa-warning"></i>
&nbsp; <i class="fa fa-warning"></i>
Min value is bigger than max.
&nbsp;
</span>
</li>
</ul>

3
public/sass/base/_grafana_icons.scss
View File

@ -79,7 +79,8 @@
.icon-gf-jump-to-dashboard:before {
content: "\e60d";
}
.icon-gf-warn:before {
.icon-gf-warn,
.icon-gf-warning:before {
content: "\e60e";
}
.icon-gf-nodata:before {

12
public/sass/components/_alerts.scss
View File

@ -7,18 +7,6 @@
// -------------------------
.alert-icon-online {
color: $online;
}
.alert-icon-warn {
color: $warn;
}
.alert-icon-crit,
.alert-icon-critical {
color: $critical;
}
.alert {
padding: 8px 35px 13px 14px;

7
public/sass/components/_cards.scss
View File

@ -64,6 +64,13 @@
font-size: 11px;
padding: 2px 6px;
}
&--alert {
padding: 0.5rem 1rem;
.card-item-name {
font-size: $font-size-h5;
}
}
}
.card-item-body {

38
public/sass/pages/_alerting.scss
View File

@ -1,31 +1,18 @@
.copy-query {
display: block;
width: 30px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat;
cursor: pointer;
.alert-state-paused,
.alert-state-pending {
color: $text-muted;
}
.alert-state {
display: inline-block;
padding-left: 30px;
background: 0 50% no-repeat;
background-size: 20px auto;
}
.alert-state-online {
background-image: url('/img/online.svg');
.alert-state-ok {
color: $online;
}
.alert-state-warning {
background-image: url('/img/warn-tiny.svg');
color: $warn;
}
.alert-state-critical {
background-image: url('/img/critical.svg');
color: $critical;
}
.alert-notify-emails {
@ -40,3 +27,14 @@
.alert-notify-emails .bootstrap-tagsinput input {
border: 0;
}
// Alert List
.alert-list-item-state {
font-weight: bold;
.icon-gf, .fa {
font-size: 120%;
position: relative;
top: 2px;
}
}