mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
added global alerts list stub and styles
This commit is contained in:
Nick Christus
parent
7e2f653bc7
commit
23404decea
@ -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'
|
||||||
|
|||||||
282
public/app/features/dashboard/partials/globalAlerts.html
Normal file
282
public/app/features/dashboard/partials/globalAlerts.html
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
<topnav title="Alerting" subnav="false">
|
||||||
|
<ul class="nav">
|
||||||
|
<li class="active" ><a href="global-alerts">Global Alerts</a></li>
|
||||||
|
</ul>
|
||||||
|
</topnav>
|
||||||
|
|
||||||
|
<div class="page-container" style="background: transparent; border: 0;">
|
||||||
|
<div class="page-wide">
|
||||||
|
<h2>Global alerts</h2>
|
||||||
|
|
||||||
|
<div class="filter-list-filters">
|
||||||
|
<div class="tight-form last">
|
||||||
|
<ul class="tight-form-list">
|
||||||
|
<li class="tight-form-item">Filters:</li>
|
||||||
|
<li class="tight-form-item">Alert State</li>
|
||||||
|
<li><!-- <value-select-dropdown></value-select-dropdown> --></li>
|
||||||
|
<li class="tight-form-item">Dashboards</li>
|
||||||
|
<li><!-- <value-select-dropdown></value-select-dropdown> --></li>
|
||||||
|
<li class="tight-form-item">
|
||||||
|
<a class="pointer">
|
||||||
|
<i class="fa fa-pencil"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="filter-list-actions">
|
||||||
|
<li>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<input class="cr1" id="state-enabled" type="checkbox">
|
||||||
|
<label for="state-enabled" class="cr1"></label> <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" role="menu">
|
||||||
|
<li><a>All</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
|
||||||
|
Bulk Actions <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" role="menu">
|
||||||
|
<li><a>Update notifications</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button class="btn btn-inverse" data-toggle="dropdown">
|
||||||
|
<i class="fa fa-fw fa-th-large"></i> New Dashboard from selected
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="filter-list-actions-selected">2 selected, showing 6 of 6 total</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="filter-list">
|
||||||
|
<li>
|
||||||
|
<ul class="filter-list-card">
|
||||||
|
<li class="filter-list-card-select">
|
||||||
|
<input class="cr1" id="alert1" type="checkbox">
|
||||||
|
<label for="alert1" class="cr1"></label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="filter-list-card-controls">
|
||||||
|
<div class="filter-list-card-links">
|
||||||
|
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Super Sekret</a></span>
|
||||||
|
<span class="filter-list-card-link">Panel: <a href="">Prod CPU Data Writes</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-config">
|
||||||
|
<a href="#"><i class="fa fa-cog"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-expand" ng-click="alert1.expanded = !alert1.expanded">
|
||||||
|
<i class="fa fa-angle-right" ng-show="!alert1.expanded"></i>
|
||||||
|
<i class="fa fa-angle-down" ng-show="alert1.expanded"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="filter-list-card-title">Prod CPU Data Writes</span>
|
||||||
|
<span class="filter-list-card-status">
|
||||||
|
<span class="filter-list-card-state online">Online</span> for 19 hours
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="filter-list-card-details" ng-show="alert1.expanded">
|
||||||
|
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
|
||||||
|
<div class="tight-form last">
|
||||||
|
<ul class="tight-form-list">
|
||||||
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
|
||||||
|
<li class="tight-form-item">apps</li>
|
||||||
|
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
|
||||||
|
<li class="tight-form-item">fakesite</li>
|
||||||
|
<li class="tight-form-item">counters</li>
|
||||||
|
<li class="tight-form-item">requests</li>
|
||||||
|
<li class="tight-form-item">count</li>
|
||||||
|
<li class="tight-form-item">scaleToSeconds(1)</li>
|
||||||
|
<li class="tight-form-item">aliasByNode(2)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<ul class="filter-list-card">
|
||||||
|
<li class="filter-list-card-select">
|
||||||
|
<input class="cr1" id="alert2" type="checkbox" checked>
|
||||||
|
<label for="alert2" class="cr1"></label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="filter-list-card-controls">
|
||||||
|
<div class="filter-list-card-links">
|
||||||
|
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Insanely Super Duper Sekret</a></span>
|
||||||
|
<span class="filter-list-card-link">Panel: <a href="">client side full page load</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-config">
|
||||||
|
<a href="#"><i class="fa fa-cog"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-expand" ng-click="alert2.expanded = !alert2.expanded">
|
||||||
|
<i class="fa fa-angle-right" ng-show="!alert2.expanded"></i>
|
||||||
|
<i class="fa fa-angle-down" ng-show="alert2.expanded"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="filter-list-card-title">Prod DB Reads</span>
|
||||||
|
<span class="filter-list-card-status">
|
||||||
|
<span class="filter-list-card-state warn">Warn</span> for 1 hour
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="filter-list-card-details" ng-show="alert2.expanded">
|
||||||
|
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
|
||||||
|
<div class="tight-form last">
|
||||||
|
<ul class="tight-form-list">
|
||||||
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
|
||||||
|
<li class="tight-form-item">apps</li>
|
||||||
|
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
|
||||||
|
<li class="tight-form-item">fakesite</li>
|
||||||
|
<li class="tight-form-item">counters</li>
|
||||||
|
<li class="tight-form-item">requests</li>
|
||||||
|
<li class="tight-form-item">count</li>
|
||||||
|
<li class="tight-form-item">scaleToSeconds(1)</li>
|
||||||
|
<li class="tight-form-item">aliasByNode(2)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<ul class="filter-list-card">
|
||||||
|
<li class="filter-list-card-select">
|
||||||
|
<input class="cr1" id="alert3" type="checkbox" checked>
|
||||||
|
<label for="alert3" class="cr1"></label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="filter-list-card-controls">
|
||||||
|
<div class="filter-list-card-links">
|
||||||
|
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Mildly Sekret</a></span>
|
||||||
|
<span class="filter-list-card-link">Panel: <a href="">Memory/CPU</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-config">
|
||||||
|
<a href="#"><i class="fa fa-cog"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-expand" ng-click="alert3.expanded = !alert3.expanded">
|
||||||
|
<i class="fa fa-angle-right" ng-show="!alert3.expanded"></i>
|
||||||
|
<i class="fa fa-angle-down" ng-show="alert3.expanded"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="filter-list-card-title">Prod CPU Data Writes</span>
|
||||||
|
<span class="filter-list-card-status">
|
||||||
|
<span class="filter-list-card-state critical">Online</span> for 10 minutes
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="filter-list-card-details" ng-show="alert3.expanded">
|
||||||
|
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
|
||||||
|
<div class="tight-form last">
|
||||||
|
<ul class="tight-form-list">
|
||||||
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
|
||||||
|
<li class="tight-form-item">apps</li>
|
||||||
|
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
|
||||||
|
<li class="tight-form-item">fakesite</li>
|
||||||
|
<li class="tight-form-item">counters</li>
|
||||||
|
<li class="tight-form-item">requests</li>
|
||||||
|
<li class="tight-form-item">count</li>
|
||||||
|
<li class="tight-form-item">scaleToSeconds(1)</li>
|
||||||
|
<li class="tight-form-item">aliasByNode(2)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<ul class="filter-list-card">
|
||||||
|
<li class="filter-list-card-select">
|
||||||
|
<input class="cr1" id="alert4" type="checkbox">
|
||||||
|
<label for="alert4" class="cr1"></label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="filter-list-card-controls">
|
||||||
|
<div class="filter-list-card-links">
|
||||||
|
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Super Sekret</a></span>
|
||||||
|
<span class="filter-list-card-link">Panel: <a href="">Stacked lines</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-config">
|
||||||
|
<a href="#"><i class="fa fa-cog"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-expand" ng-click="alert4.expanded = !alert4.expanded">
|
||||||
|
<i class="fa fa-angle-right" ng-show="!alert4.expanded"></i>
|
||||||
|
<i class="fa fa-angle-down" ng-show="alert4.expanded"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="filter-list-card-title">Critical Thing</span>
|
||||||
|
<span class="filter-list-card-status">
|
||||||
|
<span class="filter-list-card-state online">Online</span> for 5 weeks
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="filter-list-card-details" ng-show="alert4.expanded">
|
||||||
|
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
|
||||||
|
<div class="tight-form last">
|
||||||
|
<ul class="tight-form-list">
|
||||||
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
|
||||||
|
<li class="tight-form-item">apps</li>
|
||||||
|
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
|
||||||
|
<li class="tight-form-item">fakesite</li>
|
||||||
|
<li class="tight-form-item">counters</li>
|
||||||
|
<li class="tight-form-item">requests</li>
|
||||||
|
<li class="tight-form-item">count</li>
|
||||||
|
<li class="tight-form-item">scaleToSeconds(1)</li>
|
||||||
|
<li class="tight-form-item">aliasByNode(2)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<ul class="filter-list-card">
|
||||||
|
<li class="filter-list-card-select">
|
||||||
|
<input class="cr1" id="alert5" type="checkbox">
|
||||||
|
<label for="alert5" class="cr1"></label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="filter-list-card-controls">
|
||||||
|
<div class="filter-list-card-links">
|
||||||
|
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Public</a></span>
|
||||||
|
<span class="filter-list-card-link">Panel: <a href="">More Critical Thing</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-config">
|
||||||
|
<a href="#"><i class="fa fa-cog"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="filter-list-card-expand" ng-click="alert5.expanded = !alert5.expanded">
|
||||||
|
<i class="fa fa-angle-right" ng-show="!alert5.expanded"></i>
|
||||||
|
<i class="fa fa-angle-down" ng-show="alert5.expanded"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="filter-list-card-title">More Critical Thing</span>
|
||||||
|
<span class="filter-list-card-status">
|
||||||
|
<span class="filter-list-card-state online">Online</span> for 2 months
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="filter-list-card-details" ng-show="alert5.expanded">
|
||||||
|
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
|
||||||
|
<div class="tight-form last">
|
||||||
|
<ul class="tight-form-list">
|
||||||
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
|
||||||
|
<li class="tight-form-item">apps</li>
|
||||||
|
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
|
||||||
|
<li class="tight-form-item">fakesite</li>
|
||||||
|
<li class="tight-form-item">counters</li>
|
||||||
|
<li class="tight-form-item">requests</li>
|
||||||
|
<li class="tight-form-item">count</li>
|
||||||
|
<li class="tight-form-item">scaleToSeconds(1)</li>
|
||||||
|
<li class="tight-form-item">aliasByNode(2)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -31,77 +31,64 @@
|
|||||||
<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>
|
<li class="tight-form-item">None</li>
|
||||||
<li class="tight-form-item">None</li>
|
</ul>
|
||||||
</ul>
|
<div class="clearfix"></div>
|
||||||
<div class="clearfix"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfix"></div>
|
<div class="tight-form">
|
||||||
<div class="section">
|
<ul class="tight-form-list">
|
||||||
<div class="tight-form">
|
<li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
|
||||||
<ul class="tight-form-list">
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
|
||||||
<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">apps</li>
|
||||||
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
|
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
|
||||||
<li class="tight-form-item">apps</li>
|
<li class="tight-form-item">fakesite</li>
|
||||||
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
|
<li class="tight-form-item">counters</li>
|
||||||
<li class="tight-form-item">fakesite</li>
|
<li class="tight-form-item">requests</li>
|
||||||
<li class="tight-form-item">counters</li>
|
<li class="tight-form-item">count</li>
|
||||||
<li class="tight-form-item">requests</li>
|
<li class="tight-form-item">scaleToSeconds(1)</li>
|
||||||
<li class="tight-form-item">count</li>
|
<li class="tight-form-item last">aliasByNode(2)</li>
|
||||||
<li class="tight-form-item">scaleToSeconds(1)</li>
|
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
||||||
<li class="tight-form-item last">aliasByNode(2)</li>
|
</ul>
|
||||||
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
<div class="clearfix"></div>
|
||||||
</ul>
|
|
||||||
<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>
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">B</li>
|
||||||
<li class="tight-form-item" style="min-width: 15px; text-align: center">B</li>
|
<li class="tight-form-item last"><span class="query-keyword">Metric:</span> us-west-2 AWS/EC2 CPUUtilization <span class="query-keyword">Stats:</span> Minimum Maximum <span class="query-keyword">Dimensions</span> InstanceIS <span class="query-segment-operator">=</span> i-b0e8a447 <span class="query-keyword">Alias</span> {{stat}} <span class="query-keyword">Period</span> 60</li>
|
||||||
<li class="tight-form-item last"><span class="query-keyword">Metric:</span> us-west-2 AWS/EC2 CPUUtilization <span class="query-keyword">Stats:</span> Minimum Maximum <span class="query-keyword">Dimensions</span> InstanceIS <span class="query-segment-operator">=</span> i-b0e8a447 <span class="query-keyword">Alias</span> {{stat}} <span class="query-keyword">Period</span> 60</li>
|
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
||||||
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
</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>
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">C</li>
|
||||||
<li class="tight-form-item" style="min-width: 15px; text-align: center">C</li>
|
<li class="tight-form-item last"><span class="query-keyword">Query:</span> avg(counters_logins) by(server) <span class="query-keyword">Legend Format:</span> {{app}} - {{server}} <span class="query-keyword">Step:</span> 1s <span class="query-keyword">Resolution:</span> 1/2</li>
|
||||||
<li class="tight-form-item last"><span class="query-keyword">Query:</span> avg(counters_logins) by(server) <span class="query-keyword">Legend Format:</span> {{app}} - {{server}} <span class="query-keyword">Step:</span> 1s <span class="query-keyword">Resolution:</span> 1/2</li>
|
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
||||||
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
</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>
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">D</li>
|
||||||
<li class="tight-form-item" style="min-width: 15px; text-align: center">D</li>
|
<li class="tight-form-item last"><span class="query-keyword">SELECT</span> mean(value) <span class="query-keyword">FROM</span> logins.count <span class="query-keyword">WHERE</span> hostname <span class="query-segment-operator">=</span> /$Hostname$/ <span class="query-keyword">GROUP BY</span> time($internal) hostname</li>
|
||||||
<li class="tight-form-item last"><span class="query-keyword">SELECT</span> mean(value) <span class="query-keyword">FROM</span> logins.count <span class="query-keyword">WHERE</span> hostname <span class="query-segment-operator">=</span> /$Hostname$/ <span class="query-keyword">GROUP BY</span> time($internal) hostname</li>
|
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
||||||
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
</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>
|
<li class="tight-form-item" style="min-width: 15px; text-align: center">E</li>
|
||||||
<li class="tight-form-item" style="min-width: 15px; text-align: center">E</li>
|
<li class="tight-form-item last"><span class="query-keyword">Metric:</span> apps.backend.backend_01.counters.requests.count <span class="query-keyword">Alias:</span> Bristow <span class="query-keyword">Aggregator:</span> Sum <span class="query-keyword">Downsample:</span> 1m <span class="query-keyword">Aggregator</span> Sum <span class="query-keyword">Tags</span> host = test</li>
|
||||||
<li class="tight-form-item last"><span class="query-keyword">Metric:</span> apps.backend.backend_01.counters.requests.count <span class="query-keyword">Alias:</span> Bristow <span class="query-keyword">Aggregator:</span> Sum <span class="query-keyword">Downsample:</span> 1m <span class="query-keyword">Aggregator</span> Sum <span class="query-keyword">Tags</span> host = test</li>
|
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
||||||
<li><div class="copy-query" bs-tooltip="'Copy to custom query'" data-placement="top"></div></li>
|
</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;">
|
||||||
|
|||||||
167
public/less/filter-list.less
Normal file
167
public/less/filter-list.less
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user