Skip to content

N
nexpie-grafana-theme
Commit 23404dec by Nick Christus
Options

added global alerts list stub and styles

parent 7e2f653b
Showing with 187 additions and 13 deletions
public/app/core/routes/all.js
...@@ -131,6 +131,9 @@ define([ ...@@ -131,6 +131,9 @@ define([
templateUrl: 'app/partials/reset_password.html', templateUrl: 'app/partials/reset_password.html',
controller : 'ResetPasswordCtrl', controller : 'ResetPasswordCtrl',
}) })
.when('/global-alerts', {
templateUrl: 'app/features/dashboard/partials/globalAlerts.html',
})
.otherwise({ .otherwise({
templateUrl: 'app/partials/error.html', templateUrl: 'app/partials/error.html',
controller: 'ErrorCtrl' controller: 'ErrorCtrl'
......
public/app/panels/graph/alerting.html
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
<div class="editor-row" style="margin-bottom: 20px;"> <div class="editor-row" style="margin-bottom: 20px;">
<h5>Choose your query:</h5> <h5>Choose your query:</h5>
<p>Select an exising query to alert on:</p> <p>Select an exising query to alert on:</p>
<div class="section">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li> <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
...@@ -39,9 +38,6 @@ ...@@ -39,9 +38,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
<div class="clearfix"></div>
<div class="section">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li> <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
...@@ -58,8 +54,6 @@ ...@@ -58,8 +54,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
<div class="section">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li> <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
...@@ -69,8 +63,6 @@ ...@@ -69,8 +63,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
<div class="section">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li> <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
...@@ -80,8 +72,6 @@ ...@@ -80,8 +72,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
<div class="section">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li> <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
...@@ -91,8 +81,6 @@ ...@@ -91,8 +81,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
<div class="section">
<div class="tight-form last"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" checked /></li> <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" checked /></li>
...@@ -102,7 +90,6 @@ ...@@ -102,7 +90,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
</div> </div>
<div class="editor-row" style="margin-bottom: 20px;"> <div class="editor-row" style="margin-bottom: 20px;">
<p>Or write a new custom alerting query:</p> <p>Or write a new custom alerting query:</p>
......
public/less/filter-list.less 0 → 100644
// ==========================================================================
// FILTER LIST
// ==========================================================================
// List
// --------------------------------------------------------------------------
.filter-list {
max-width: 1000px;
margin: 0;
padding: 0;
list-style: none;
}
.filter-list > li {
padding: 10px;
margin-bottom: 2px;
background: @grafanaPanelBackground;
&:last-child {
margin: 0;
}
}
// Card
// --------------------------------------------------------------------------
.filter-list-card {
display: table;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.filter-list-card > li {
display: table-cell;
vertical-align: top;
}
.filter-list-card-select {
width: 23px;
padding-right: 5px;
}
.filter-list-card-title {
display: block;
font-size: 16px;
font-weight: normal;
}
.filter-list-card-status {
color: #777;
font-size: 12px;
}
.filter-list-card-state {
display: inline-block;
padding: 5px 0 0 28px;
background: 0 bottom no-repeat;
background-size: 24px auto;
font-size: 14px;
text-transform: uppercase;
&.online {
background-image: url('/img/online.svg');
color: @online;
}
&.warn {
background-image: url('/img/warn-tiny.svg');
color: @warn;
}
&.critical {
background-image: url('/img/critical.svg');
color: @critical;
}
}
.filter-list-card-controls {
float: right;
}
.filter-list-card-links,
.filter-list-card-config,
.filter-list-card-expand {
display: inline-block;
vertical-align: middle;
}
.filter-list-card-link {
display: block;
color: #777;
text-align: right;
> a {
color: #777;
}
}
.filter-list-card-config {
padding: 8px 8px 8px 16px;
color: #777;
font-size: 25px;
> a {
color: #777;
}
}
.filter-list-card-expand {
width: 20px;
padding: 8px 0 8px 8px;
color: #aaa;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.filter-list-card-details {
padding: 20px 0 0 30px;
}
.filter-list-card-details-heading {
font-weight: normal;
> a {
float: right;
color: @blue;
font-size: 12px;
}
}
// Filters
// --------------------------------------------------------------------------
.filter-list-filters {
display: inline-block;
margin-bottom: 40px;
}
// Actions
// --------------------------------------------------------------------------
.filter-list-actions {
margin: 0 0 10px;
padding: 0;
list-style: none;
}
.filter-list-actions > li {
display: inline-block;
margin-right: 10px;
}
.filter-list-actions-selected {
text-transform: uppercase;
}
public/less/gfbox.less
...@@ -80,6 +80,10 @@ ...@@ -80,6 +80,10 @@
max-width: 653px; max-width: 653px;
} }
.page-wide {
max-width: none;
}
.admin-page { .admin-page {
max-width: 800px; max-width: 800px;
margin-left: 10px; margin-left: 10px;
......
public/less/grafana.less
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
@import "tabs.less"; @import "tabs.less";
@import "timepicker.less"; @import "timepicker.less";
@import "alerting.less"; @import "alerting.less";
@import "filter-list.less";
.row-control-inner { .row-control-inner {
padding:0px; padding:0px;
......
public/less/variables.dark.less
...@@ -25,6 +25,12 @@ ...@@ -25,6 +25,12 @@
@purple: #9933CC; @purple: #9933CC;
@variable: #32D1DF; @variable: #32D1DF;
// Status colors
// -------------------------
@online: #10a345;
@warn: #ffc03c;
@critical: #ed2e18;
// grafana Variables // grafana Variables
// ------------------------- // -------------------------
@grafanaPanelBackground: @grayDarker; @grafanaPanelBackground: @grayDarker;
......
public/less/variables.light.less
...@@ -31,6 +31,12 @@ ...@@ -31,6 +31,12 @@
@purple: #9954BB; @purple: #9954BB;
@variable: #2AB2E4; @variable: #2AB2E4;
// Status colors
// -------------------------
@online: #10a345;
@warn: #ffc03c;
@critical: #ed2e18;
// grafana Variables // grafana Variables
// ------------------------- // -------------------------
@grafanaPanelBackground: @grayLighter; @grafanaPanelBackground: @grayLighter;
......
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