Merge branch 'panel-triggers' into grafana-3.0
This commit is contained in:
Alexander Zobnin
@@ -61,7 +61,7 @@
|
||||
placeholder="trigger name"
|
||||
class="input-large tight-form-input last"
|
||||
ng-style="panel.triggers.trigger.style"
|
||||
empty-to-null">
|
||||
empty-to-null>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@@ -130,7 +130,7 @@
|
||||
<strong>Show events</strong>
|
||||
</li>
|
||||
<li>
|
||||
<select class="tight-form-input input-medium last"
|
||||
<select class="tight-form-input input-medium"
|
||||
ng-model="panel.showEvents"
|
||||
ng-options="f.text for f in showEventsFields track by f.value"
|
||||
ng-change="get_data()">
|
||||
@@ -153,6 +153,15 @@
|
||||
ng-checked="panel.hostField">
|
||||
<label for="panel.hostField" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="panel.severityField">Status</label>
|
||||
<input class="cr1"
|
||||
id="panel.statusField"
|
||||
type="checkbox"
|
||||
ng-model="panel.statusField"
|
||||
ng-checked="panel.statusField">
|
||||
<label for="panel.statusField" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="panel.severityField">Severity</label>
|
||||
<input class="cr1"
|
||||
@@ -192,40 +201,60 @@
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
<strong>Custom Last change format</strong>
|
||||
<label class="checkbox-label" for="panel.customLastChangeFormat"> </label>
|
||||
<input class="cr1"
|
||||
id="panel.customLastChangeFormat"
|
||||
type="checkbox"
|
||||
ng-change="get_data()"
|
||||
ng-model="panel.customLastChangeFormat"
|
||||
ng-checked="panel.customLastChangeFormat">
|
||||
<label for="panel.customLastChangeFormat" class="cr1"></label>
|
||||
</li>
|
||||
<li ng-if="panel.customLastChangeFormat">
|
||||
<input type="text"
|
||||
ng-model="panel.lastChangeFormat"
|
||||
ng-blur="get_data()"
|
||||
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
|
||||
class="tight-form-input"
|
||||
style="width: 300px"
|
||||
empty-to-null>
|
||||
</li>
|
||||
<li class="tight-form-item last" ng-if="panel.customLastChangeFormat">
|
||||
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
|
||||
<i class="fa fa-question-circle"
|
||||
bs-tooltip="'See moment.js dosc for time format.'">
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5>Customize triggers severity and colors</h5>
|
||||
<div class="tight-form"
|
||||
ng-repeat="trigger in panel.triggerSeverity"
|
||||
ng-style="{background:trigger.color}">
|
||||
ng-repeat="trigger in panel.triggerSeverity">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 10px; color: #101010">
|
||||
<li class="tight-form-item" style="width: 10px">
|
||||
{{ trigger.priority }}
|
||||
</li>
|
||||
<li>
|
||||
<input class="tight-form-input input-medium"
|
||||
type="text"
|
||||
style="color: #101010"
|
||||
empty-to-null
|
||||
ng-model="trigger.severity"
|
||||
ng-style="{background:trigger.color}"
|
||||
style="color: white"
|
||||
ng-style="{background: trigger.color}"
|
||||
ng-model-onblur
|
||||
ng-change="get_data()">
|
||||
</li>
|
||||
<li data-trigger-index="{{trigger.priority}}">
|
||||
|
||||
<i class="pointer fa fa-eyedropper trigger-color"
|
||||
style="color: #101010"
|
||||
ng-click="openTriggerColorSelector($event)"> </i>
|
||||
<input type="text"
|
||||
class="tight-form-input input-small"
|
||||
style="color: #101010"
|
||||
empty-to-null
|
||||
ng-model="trigger.color"
|
||||
ng-style="{background:trigger.color}"
|
||||
ng-model-onblur
|
||||
ng-change="get_data()">
|
||||
<li class="tight-form-item">
|
||||
<spectrum-picker ng-model="trigger.color" ng-change="get_data()"></spectrum-picker>
|
||||
</li>
|
||||
<li class="tight-form-item last" style="width: 28px">
|
||||
<label class="checkbox-label" for="{{ 'trigger-show-' + $index }}"></label>
|
||||
@@ -240,25 +269,15 @@
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form last"
|
||||
ng-style="{background:panel.okEventColor}">
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 160px; color: #101010">
|
||||
<li class="tight-form-item"
|
||||
ng-style="{background:panel.okEventColor}"
|
||||
style="width: 160px; color: white">
|
||||
<span style="padding-left: 25px"> OK event color </span>
|
||||
</li>
|
||||
<li data-trigger-index="6">
|
||||
|
||||
<i class="pointer fa fa-eyedropper trigger-color"
|
||||
style="color: #101010"
|
||||
ng-click="openOkEventColorSelector($event)"> </i>
|
||||
<input type="text"
|
||||
class="tight-form-input input-small"
|
||||
style="color: #101010"
|
||||
empty-to-null
|
||||
ng-model="panel.okEventColor"
|
||||
ng-style="{background:panel.okEventColor}"
|
||||
ng-model-onblur
|
||||
ng-change="get_data()">
|
||||
<li class="tight-form-item">
|
||||
<spectrum-picker ng-model="panel.okEventColor" ng-change="get_data()"></spectrum-picker>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
Host
|
||||
</div>
|
||||
</th>
|
||||
<th ng-if="panel.statusField" style="width: 85px">
|
||||
<div class="table-panel-table-header-inner pointer">Status</div>
|
||||
</th>
|
||||
<th ng-if="panel.severityField" style="width: 120px">
|
||||
<div class="table-panel-table-header-inner pointer">Severity</div>
|
||||
</th>
|
||||
@@ -35,6 +38,11 @@
|
||||
<span><strong>{{trigger.host}}</strong></span>
|
||||
</div>
|
||||
</td>
|
||||
<td ng-if="panel.statusField" style="background-color: {{trigger.color}}; color: white">
|
||||
<div>
|
||||
{{triggerStatusMap[trigger.value]}}
|
||||
</div>
|
||||
</td>
|
||||
<td ng-if="panel.severityField" style="background-color: {{trigger.color}}; color: white">
|
||||
<div>
|
||||
{{trigger.severity}}
|
||||
|
||||
@@ -54,6 +54,11 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
{ text: 'Problem events', value: 1 }
|
||||
];
|
||||
|
||||
$scope.triggerStatusMap = {
|
||||
'0': 'OK',
|
||||
'1': 'Problem'
|
||||
};
|
||||
|
||||
var grafanaDefaultSeverity = [
|
||||
{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true },
|
||||
{ priority: 1, severity: 'Information', color: '#82B5D8', show: true },
|
||||
@@ -72,6 +77,7 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
trigger: {filter: ""}
|
||||
},
|
||||
hostField: true,
|
||||
statusField: false,
|
||||
severityField: false,
|
||||
lastChangeField: true,
|
||||
ageField: true,
|
||||
@@ -81,7 +87,7 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
sortTriggersBy: { text: 'last change', value: 'lastchange' },
|
||||
showEvents: { text: 'Problem events', value: '1' },
|
||||
triggerSeverity: grafanaDefaultSeverity,
|
||||
okEventColor: '#890F02'
|
||||
okEventColor: '#890F02',
|
||||
};
|
||||
|
||||
_.defaults($scope.panel, panelDefaults);
|
||||
@@ -97,7 +103,8 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
var scopeDefaults = {
|
||||
metric: {},
|
||||
inputStyles: {},
|
||||
oldTarget: _.cloneDeep($scope.panel.triggers)
|
||||
oldTarget: _.cloneDeep($scope.panel.triggers),
|
||||
defaultTimeFormat: "DD MMM YYYY HH:mm:ss"
|
||||
};
|
||||
_.defaults($scope, scopeDefaults);
|
||||
|
||||
@@ -141,7 +148,12 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
// Format last change and age
|
||||
trigger.lastchangeUnix = Number(trigger.lastchange);
|
||||
var timestamp = moment.unix(trigger.lastchangeUnix);
|
||||
triggerObj.lastchange = timestamp.format("DD MMM YYYY, HH:mm:ss");
|
||||
if ($scope.panel.customLastChangeFormat) {
|
||||
// User defined format
|
||||
triggerObj.lastchange = timestamp.format($scope.panel.lastChangeFormat);
|
||||
} else {
|
||||
triggerObj.lastchange = timestamp.format($scope.defaultTimeFormat);
|
||||
}
|
||||
triggerObj.age = timestamp.fromNow(true);
|
||||
|
||||
// Set color
|
||||
|
||||
Reference in New Issue
Block a user