Skip to content

Commit 23404de

Browse files
author
Nick Christus
committed
added global alerts list stub and styles
1 parent 7e2f653 commit 23404de

File tree

8 files changed

+522
-66
lines changed

8 files changed

+522
-66
lines changed

‎public/app/core/routes/all.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,9 @@ define([
131131
templateUrl: 'app/partials/reset_password.html',
132132
controller : 'ResetPasswordCtrl',
133133
})
134+
.when('/global-alerts', {
135+
templateUrl: 'app/features/dashboard/partials/globalAlerts.html',
136+
})
134137
.otherwise({
135138
templateUrl: 'app/partials/error.html',
136139
controller: 'ErrorCtrl'

‎public/app/features/dashboard/partials/globalAlerts.html

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
<topnav title="Alerting" subnav="false">
2+
<ul class="nav">
3+
<li class="active" ><a href="global-alerts">Global Alerts</a></li>
4+
</ul>
5+
</topnav>
6+
7+
<div class="page-container" style="background: transparent; border: 0;">
8+
<div class="page-wide">
9+
<h2>Global alerts</h2>
10+
11+
<div class="filter-list-filters">
12+
<div class="tight-form last">
13+
<ul class="tight-form-list">
14+
<li class="tight-form-item">Filters:</li>
15+
<li class="tight-form-item">Alert State</li>
16+
<li><!-- <value-select-dropdown></value-select-dropdown> --></li>
17+
<li class="tight-form-item">Dashboards</li>
18+
<li><!-- <value-select-dropdown></value-select-dropdown> --></li>
19+
<li class="tight-form-item">
20+
<a class="pointer">
21+
<i class="fa fa-pencil"></i>
22+
</a>
23+
</li>
24+
</ul>
25+
<div class="clearfix"></div>
26+
</div>
27+
</div>
28+
<ul class="filter-list-actions">
29+
<li>
30+
<div class="dropdown">
31+
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
32+
<input class="cr1" id="state-enabled" type="checkbox">
33+
<label for="state-enabled" class="cr1"></label> <span class="caret"></span>
34+
</button>
35+
<ul class="dropdown-menu" role="menu">
36+
<li><a>All</a></li>
37+
</ul>
38+
</div>
39+
</li>
40+
<li>
41+
<div class="dropdown">
42+
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
43+
Bulk Actions &nbsp; <span class="caret"></span>
44+
</button>
45+
<ul class="dropdown-menu" role="menu">
46+
<li><a>Update notifications</a></li>
47+
</ul>
48+
</div>
49+
</li>
50+
<li>
51+
<button class="btn btn-inverse" data-toggle="dropdown">
52+
<i class="fa fa-fw fa-th-large"></i> New Dashboard from selected
53+
</button>
54+
</li>
55+
<li>
56+
<span class="filter-list-actions-selected">2 selected, showing 6 of 6 total</span>
57+
</li>
58+
</ul>
59+
<ul class="filter-list">
60+
<li>
61+
<ul class="filter-list-card">
62+
<li class="filter-list-card-select">
63+
<input class="cr1" id="alert1" type="checkbox">
64+
<label for="alert1" class="cr1"></label>
65+
</li>
66+
<li>
67+
<div class="filter-list-card-controls">
68+
<div class="filter-list-card-links">
69+
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Super Sekret</a></span>
70+
<span class="filter-list-card-link">Panel: <a href="">Prod CPU Data Writes</a></span>
71+
</div>
72+
<div class="filter-list-card-config">
73+
<a href="#"><i class="fa fa-cog"></i></a>
74+
</div>
75+
<div class="filter-list-card-expand" ng-click="alert1.expanded = !alert1.expanded">
76+
<i class="fa fa-angle-right" ng-show="!alert1.expanded"></i>
77+
<i class="fa fa-angle-down" ng-show="alert1.expanded"></i>
78+
</div>
79+
</div>
80+
<span class="filter-list-card-title">Prod CPU Data Writes</span>
81+
<span class="filter-list-card-status">
82+
<span class="filter-list-card-state online">Online</span> for 19 hours
83+
</span>
84+
</li>
85+
</ul>
86+
<div class="filter-list-card-details" ng-show="alert1.expanded">
87+
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
88+
<div class="tight-form last">
89+
<ul class="tight-form-list">
90+
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
91+
<li class="tight-form-item">apps</li>
92+
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
93+
<li class="tight-form-item">fakesite</li>
94+
<li class="tight-form-item">counters</li>
95+
<li class="tight-form-item">requests</li>
96+
<li class="tight-form-item">count</li>
97+
<li class="tight-form-item">scaleToSeconds(1)</li>
98+
<li class="tight-form-item">aliasByNode(2)</li>
99+
</ul>
100+
<div class="clearfix"></div>
101+
</div>
102+
</div>
103+
</li>
104+
<li>
105+
<ul class="filter-list-card">
106+
<li class="filter-list-card-select">
107+
<input class="cr1" id="alert2" type="checkbox" checked>
108+
<label for="alert2" class="cr1"></label>
109+
</li>
110+
<li>
111+
<div class="filter-list-card-controls">
112+
<div class="filter-list-card-links">
113+
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Insanely Super Duper Sekret</a></span>
114+
<span class="filter-list-card-link">Panel: <a href="">client side full page load</a></span>
115+
</div>
116+
<div class="filter-list-card-config">
117+
<a href="#"><i class="fa fa-cog"></i></a>
118+
</div>
119+
<div class="filter-list-card-expand" ng-click="alert2.expanded = !alert2.expanded">
120+
<i class="fa fa-angle-right" ng-show="!alert2.expanded"></i>
121+
<i class="fa fa-angle-down" ng-show="alert2.expanded"></i>
122+
</div>
123+
</div>
124+
<span class="filter-list-card-title">Prod DB Reads</span>
125+
<span class="filter-list-card-status">
126+
<span class="filter-list-card-state warn">Warn</span> for 1 hour
127+
</span>
128+
</li>
129+
</ul>
130+
<div class="filter-list-card-details" ng-show="alert2.expanded">
131+
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
132+
<div class="tight-form last">
133+
<ul class="tight-form-list">
134+
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
135+
<li class="tight-form-item">apps</li>
136+
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
137+
<li class="tight-form-item">fakesite</li>
138+
<li class="tight-form-item">counters</li>
139+
<li class="tight-form-item">requests</li>
140+
<li class="tight-form-item">count</li>
141+
<li class="tight-form-item">scaleToSeconds(1)</li>
142+
<li class="tight-form-item">aliasByNode(2)</li>
143+
</ul>
144+
<div class="clearfix"></div>
145+
</div>
146+
</div>
147+
</li>
148+
<li>
149+
<ul class="filter-list-card">
150+
<li class="filter-list-card-select">
151+
<input class="cr1" id="alert3" type="checkbox" checked>
152+
<label for="alert3" class="cr1"></label>
153+
</li>
154+
<li>
155+
<div class="filter-list-card-controls">
156+
<div class="filter-list-card-links">
157+
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Mildly Sekret</a></span>
158+
<span class="filter-list-card-link">Panel: <a href="">Memory/CPU</a></span>
159+
</div>
160+
<div class="filter-list-card-config">
161+
<a href="#"><i class="fa fa-cog"></i></a>
162+
</div>
163+
<div class="filter-list-card-expand" ng-click="alert3.expanded = !alert3.expanded">
164+
<i class="fa fa-angle-right" ng-show="!alert3.expanded"></i>
165+
<i class="fa fa-angle-down" ng-show="alert3.expanded"></i>
166+
</div>
167+
</div>
168+
<span class="filter-list-card-title">Prod CPU Data Writes</span>
169+
<span class="filter-list-card-status">
170+
<span class="filter-list-card-state critical">Online</span> for 10 minutes
171+
</span>
172+
</li>
173+
</ul>
174+
<div class="filter-list-card-details" ng-show="alert3.expanded">
175+
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
176+
<div class="tight-form last">
177+
<ul class="tight-form-list">
178+
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
179+
<li class="tight-form-item">apps</li>
180+
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
181+
<li class="tight-form-item">fakesite</li>
182+
<li class="tight-form-item">counters</li>
183+
<li class="tight-form-item">requests</li>
184+
<li class="tight-form-item">count</li>
185+
<li class="tight-form-item">scaleToSeconds(1)</li>
186+
<li class="tight-form-item">aliasByNode(2)</li>
187+
</ul>
188+
<div class="clearfix"></div>
189+
</div>
190+
</div>
191+
</li>
192+
<li>
193+
<ul class="filter-list-card">
194+
<li class="filter-list-card-select">
195+
<input class="cr1" id="alert4" type="checkbox">
196+
<label for="alert4" class="cr1"></label>
197+
</li>
198+
<li>
199+
<div class="filter-list-card-controls">
200+
<div class="filter-list-card-links">
201+
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Super Sekret</a></span>
202+
<span class="filter-list-card-link">Panel: <a href="">Stacked lines</a></span>
203+
</div>
204+
<div class="filter-list-card-config">
205+
<a href="#"><i class="fa fa-cog"></i></a>
206+
</div>
207+
<div class="filter-list-card-expand" ng-click="alert4.expanded = !alert4.expanded">
208+
<i class="fa fa-angle-right" ng-show="!alert4.expanded"></i>
209+
<i class="fa fa-angle-down" ng-show="alert4.expanded"></i>
210+
</div>
211+
</div>
212+
<span class="filter-list-card-title">Critical Thing</span>
213+
<span class="filter-list-card-status">
214+
<span class="filter-list-card-state online">Online</span> for 5 weeks
215+
</span>
216+
</li>
217+
</ul>
218+
<div class="filter-list-card-details" ng-show="alert4.expanded">
219+
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
220+
<div class="tight-form last">
221+
<ul class="tight-form-list">
222+
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
223+
<li class="tight-form-item">apps</li>
224+
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
225+
<li class="tight-form-item">fakesite</li>
226+
<li class="tight-form-item">counters</li>
227+
<li class="tight-form-item">requests</li>
228+
<li class="tight-form-item">count</li>
229+
<li class="tight-form-item">scaleToSeconds(1)</li>
230+
<li class="tight-form-item">aliasByNode(2)</li>
231+
</ul>
232+
<div class="clearfix"></div>
233+
</div>
234+
</div>
235+
</li>
236+
<li>
237+
<ul class="filter-list-card">
238+
<li class="filter-list-card-select">
239+
<input class="cr1" id="alert5" type="checkbox">
240+
<label for="alert5" class="cr1"></label>
241+
</li>
242+
<li>
243+
<div class="filter-list-card-controls">
244+
<div class="filter-list-card-links">
245+
<span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Public</a></span>
246+
<span class="filter-list-card-link">Panel: <a href="">More Critical Thing</a></span>
247+
</div>
248+
<div class="filter-list-card-config">
249+
<a href="#"><i class="fa fa-cog"></i></a>
250+
</div>
251+
<div class="filter-list-card-expand" ng-click="alert5.expanded = !alert5.expanded">
252+
<i class="fa fa-angle-right" ng-show="!alert5.expanded"></i>
253+
<i class="fa fa-angle-down" ng-show="alert5.expanded"></i>
254+
</div>
255+
</div>
256+
<span class="filter-list-card-title">More Critical Thing</span>
257+
<span class="filter-list-card-status">
258+
<span class="filter-list-card-state online">Online</span> for 2 months
259+
</span>
260+
</li>
261+
</ul>
262+
<div class="filter-list-card-details" ng-show="alert5.expanded">
263+
<h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
264+
<div class="tight-form last">
265+
<ul class="tight-form-list">
266+
<li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
267+
<li class="tight-form-item">apps</li>
268+
<li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
269+
<li class="tight-form-item">fakesite</li>
270+
<li class="tight-form-item">counters</li>
271+
<li class="tight-form-item">requests</li>
272+
<li class="tight-form-item">count</li>
273+
<li class="tight-form-item">scaleToSeconds(1)</li>
274+
<li class="tight-form-item">aliasByNode(2)</li>
275+
</ul>
276+
<div class="clearfix"></div>
277+
</div>
278+
</div>
279+
</li>
280+
</ul>
281+
</div>
282+
</div>

0 commit comments

Comments
 (0)