Skip to content

N
nexpie-grafana-theme
Commit a22dded6 by Torkel Ödegaard
Options

Merge branch 'update-alert-lists' of https://github.com/Ijin08/grafana into… 

Merge branch 'update-alert-lists' of https://github.com/Ijin08/grafana into Ijin08-update-alert-lists
parents 6bc69112 0d5540ca
Showing with 109 additions and 62 deletions
public/app/features/alerting/partials/alert_tab.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<li ng-class="{active: ctrl.subTabIndex === 2}"> <li ng-class="{active: ctrl.subTabIndex === 2}">
<a ng-click="ctrl.changeTabIndex(2)">State history</a> <a ng-click="ctrl.changeTabIndex(2)">State history</a>
</li> </li>
<li> <li>
<a ng-click="ctrl.delete()">Delete</a> <a ng-click="ctrl.delete()">Delete</a>
</li> </li>
</ul> </ul>
...@@ -41,10 +41,10 @@ ...@@ -41,10 +41,10 @@
<metric-segment-model css-class="query-keyword width-5" ng-if="$index" property="conditionModel.operator.type" options="ctrl.evalOperators" custom="false"></metric-segment-model> <metric-segment-model css-class="query-keyword width-5" ng-if="$index" property="conditionModel.operator.type" options="ctrl.evalOperators" custom="false"></metric-segment-model>
<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span> <span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<query-part-editor class="gf-form-label query-part width-6" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)"> <query-part-editor class="gf-form-label query-part width-6" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
</query-part-editor> </query-part-editor>
<span class="gf-form-label query-keyword">OF</span> <span class="gf-form-label query-keyword">OF</span>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)"> <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
<div class="gf-form"> <div class="gf-form">
<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model> <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
<input class="gf-form-input max-width-9" type="number" step="any" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()"></input> <input class="gf-form-input max-width-9" type="number" step="any" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()"></input>
<label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label> <label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
<input class="gf-form-input max-width-9" type="number" step="any" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()"></input> <input class="gf-form-input max-width-9" type="number" step="any" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()"></input>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label"> <label class="gf-form-label">
...@@ -77,13 +77,12 @@ ...@@ -77,13 +77,12 @@
</ul> </ul>
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-18">If no data or all values are null</span> <span class="gf-form-label width-18">If no data or all values are null</span>
<span class="gf-form-label query-keyword">SET STATE TO</span> <span class="gf-form-label query-keyword">SET STATE TO</span>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.alert.noDataState" ng-options="f.value as f.text for f in ctrl.noDataModes"> <select class="gf-form-input" ng-model="ctrl.alert.noDataState" ng-options="f.value as f.text for f in ctrl.noDataModes">
</select> </select>
...@@ -91,8 +90,8 @@ ...@@ -91,8 +90,8 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-18">If execution error or timeout</span> <span class="gf-form-label width-18">If execution error or timeout</span>
<span class="gf-form-label query-keyword">SET STATE TO</span> <span class="gf-form-label query-keyword">SET STATE TO</span>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" ng-options="f.value as f.text for f in ctrl.executionErrorModes"> <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" ng-options="f.value as f.text for f in ctrl.executionErrorModes">
</select> </select>
...@@ -135,36 +134,32 @@ ...@@ -135,36 +134,32 @@
<div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2"> <div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2">
<button class="btn btn-mini btn-danger pull-right" ng-click="ctrl.clearHistory()"><i class="fa fa-trash"></i>&nbsp;Clear history</button> <button class="btn btn-mini btn-danger pull-right" ng-click="ctrl.clearHistory()"><i class="fa fa-trash"></i>&nbsp;Clear history</button>
<h5 class="section-heading" style="whitespace: nowrap"> <h5 class="section-heading" style="whitespace: nowrap">
State history <span class="muted small">(last 50 state changes)</span> State history <span class="muted small">(last 50 state changes)</span>
</h5> </h5>
<div ng-show="ctrl.alertHistory.length === 0"> <div ng-show="ctrl.alertHistory.length === 0">
<br> <br>
<i>No state changes recorded</i> <i>No state changes recorded</i>
</div> </div>
<section class="card-section card-list-layout-list"> <section class="card-section card-list-layout-list">
<ol class="card-list" > <ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory"> <li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">
<div class="card-item card-item--alert"> <div class="alert-list card-item card-item--alert">
<div class="card-item-header"> <div class="alert-list-body">
<div class="card-item-type"> <div class="alert-list-icon alert-list-item-state {{ah.stateModel.stateClass}}">
</div> <i class="{{ah.stateModel.iconClass}}"></i>
</div> </div>
<div class="card-item-body"> <div class="alert-list-main alert-list-text">
<div class="card-item-details"> <span class="alert-list-state {{ah.stateModel.stateClass}}">{{ah.stateModel.text}}</span>
<div class="card-item-sub-name"> <span class="alert-list-info">{{ah.info}}</span>
<span class="alert-list-item-state {{ah.stateModel.stateClass}}">
<i class="{{ah.stateModel.iconClass}}"></i>
{{ah.stateModel.text}}
</span> {{ah.time}}
</div>
<div class="card-item-sub-name">
{{ah.info}}
</div>
</div> </div>
</div> </div>
<div class="alert-list-footer alert-list-text">
<span>{{ah.time}}</span>
<span><!--Img Link--></span>
</div>
</div> </div>
</li> </li>
</ol> </ol>
......
public/app/plugins/panel/alertlist/module.html
...@@ -2,24 +2,22 @@ ...@@ -2,24 +2,22 @@
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'"> <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
<ol class="card-list"> <ol class="card-list">
<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts"> <li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
<div class="card-item card-item--alert"> <div class="alert-list card-item card-item--alert">
<div class="card-item-body"> <div class="alert-list-body">
<div class="card-item-details"> <div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
<div class="card-item-notice">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
</div>
<div class="card-item-sub-name">
<span class="alert-list-item-state {{alert.stateModel.stateClass}}">
<i class="{{alert.stateModel.iconClass}}"></i> <i class="{{alert.stateModel.iconClass}}"></i>
{{alert.stateModel.text}}
</span> for {{alert.newStateDateAgo}}
</div>
<div class="small muted" ng-show="alert.executionError">
{{alert.executionError}}
</div> </div>
</div> <div class="alert-list-main">
<p class="alert-list-title">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
</p>
<p class="alert-list-text">
<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
for {{alert.newStateDateAgo}}
</p>
</div>
</div> </div>
</div> </div>
</li> </li>
...@@ -27,23 +25,25 @@ ...@@ -27,23 +25,25 @@
</section> </section>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'"> <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
<ol class="card-list"> <ol class ="card-list">
<li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory"> <li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
<div class="card-item card-item--alert"> <div class="alert-list card-item card-item--alert">
<div class="card-item-header"> <div class="alert-list-body">
<div class="card-item-sub-name">{{al.time}}</div> <div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
</div> <i class="{{al.stateModel.iconClass}}"></i>
<div class="card-item-body"> </div>
<div class="card-item-details"> <div class="alert-list-main">
<div class="card-item-notice">{{al.title}}</div> <p class="alert-list-title">{{al.title}}</p>
<div class="card-item-sub-name"> <div class="alert-list-text">
<span class="alert-list-item-state {{al.stateModel.stateClass}}"> <span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
<i class="{{al.stateModel.iconClass}}"></i> <span class="alert-list-info alert-list-info-left">{{al.info}}</span>
{{al.stateModel.text}}
</span> {{al.info}}
</div> </div>
</div> </div>
</div> </div>
<div class="alert-list-footer">
<span class="alert-list-text">{{al.time}}</span>
<span class="alert-list-text"><!--Img Link--></span>
</div>
</div> </div>
</li> </li>
</ol> </ol>
......
public/sass/pages/_alerting.scss
...@@ -30,15 +30,67 @@ ...@@ -30,15 +30,67 @@
// Alert List // Alert List
.alert-list-item-state { .alert-list {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.alert-list-icon {
font-weight: bold; font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
.icon-gf, .fa { .icon-gf, .fa {
font-size: 120%; font-size: 200%;
position: relative; position: relative;
top: 2px; top: 2px;
} }
} }
.alert-list-body {
display: flex;
}
.alert-list-main {
padding: 0 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.alert-list-title {
font-size: $font-size-base;
margin: 0;
font-weight: 600;
}
.alert-list-state {
font-weight: bold;
}
.alert-list-text {
font-size: $font-size-sm;
margin: 0;
line-height: 1.5rem;
color: $text-color-weak;
}
.alert-list-info {
color: $text-color;
}
.alert-list-info-left {
padding-left: 2rem;
}
.alert-list-footer {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: flex-end;
}
.panel-has-alert { .panel-has-alert {
.panel-alert-icon:before { .panel-alert-icon:before {
content: "\e611"; content: "\e611";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment