patternfly-sass 3.11.0 → 3.12.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/assets/stylesheets/patternfly/_bootstrap-treeview.scss +28 -6
  3. data/assets/stylesheets/patternfly/_dropdowns.scss +11 -0
  4. data/assets/stylesheets/patternfly/_forms.scss +14 -0
  5. data/assets/stylesheets/patternfly/_list-view.scss +63 -0
  6. data/assets/stylesheets/patternfly/_toolbar.scss +11 -3
  7. data/assets/stylesheets/patternfly/_wizard.scss +44 -8
  8. data/assets/stylesheets/patternfly/lib/bootstrap-datetimepicker.scss +4 -4
  9. data/bower.json +2 -2
  10. data/lib/patternfly-sass/version.rb +2 -2
  11. data/spec/html/bootstrap-treeview-2.html +1 -1
  12. data/spec/html/bootstrap-treeview.html +16 -3
  13. data/spec/html/card-view-multi-select.html +6 -24
  14. data/spec/html/card-view-single-select.html +6 -24
  15. data/spec/html/cards.html +3 -0
  16. data/spec/html/dist/css/patternfly-additions.css +194 -118
  17. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  18. data/spec/html/dist/css/patternfly-additions.min.css +2 -2
  19. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  20. data/spec/html/dist/css/patternfly.css +20 -38
  21. data/spec/html/dist/css/patternfly.css.map +1 -1
  22. data/spec/html/dist/css/patternfly.min.css +2 -2
  23. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  24. data/spec/html/forms.html +365 -226
  25. data/spec/html/horizontal-navigation.html +3 -0
  26. data/spec/html/index.html +6 -0
  27. data/spec/html/list-view-compound-expansion.html +1716 -0
  28. data/spec/html/list-view-rows.html +4 -0
  29. data/spec/html/list-view-simple-expansion.html +999 -0
  30. data/spec/html/list-view.html +6 -24
  31. data/spec/html/notification-drawer-horizontal-nav.html +3 -0
  32. data/spec/html/notification-drawer-vertical-nav.html +3 -0
  33. data/spec/html/toolbar.html +8 -11
  34. data/spec/html/vertical-navigation-primary-only.html +3 -0
  35. data/spec/html/vertical-navigation-with-badges.html +3 -0
  36. data/spec/html/vertical-navigation-with-secondary.html +3 -0
  37. data/spec/html/vertical-navigation-with-tertiary-no-icons.html +3 -0
  38. data/spec/html/vertical-navigation-with-tertiary-pins.html +3 -0
  39. data/spec/html/wizard.html +574 -318
  40. metadata +6 -2
data/spec/html/horizontal-navigation.html CHANGED
@@ -621,6 +621,7 @@
621
621
  Last 30 Days <span class="caret"></span>
622
622
  </button>
623
623
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
624
+ <li class="selected"><a href="#">Last 30 Days</a></li>
624
625
  <li><a href="#">Last 60 Days</a></li>
625
626
  <li><a href="#">Last 90 Days</a></li>
626
627
  </ul>
@@ -649,6 +650,7 @@
649
650
  Last 30 Days <span class="caret"></span>
650
651
  </button>
651
652
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
653
+ <li class="selected"><a href="#">Last 30 Days</a></li>
652
654
  <li><a href="#">Last 60 Days</a></li>
653
655
  <li><a href="#">Last 90 Days</a></li>
654
656
  </ul>
@@ -679,6 +681,7 @@
679
681
  Last 30 Days <span class="caret"></span>
680
682
  </button>
681
683
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
684
+ <li class="selected"><a href="#">Last 30 Days</a></li>
682
685
  <li><a href="#">Last 60 Days</a></li>
683
686
  <li><a href="#">Last 90 Days</a></li>
684
687
  </ul>
data/spec/html/index.html CHANGED
@@ -213,6 +213,12 @@
213
213
  <li>
214
214
  <a href="form.html">Form</a>
215
215
  </li>
216
+ <li>
217
+ <a href="list-view-compound-expansion.html">List View - Compound Expansion</a>
218
+ </li>
219
+ <li>
220
+ <a href="list-view-simple-expansion.html">List View - Simple Expansion</a>
221
+ </li>
216
222
  <li>
217
223
  <a href="list-view.html">List View</a>
218
224
  </li>
data/spec/html/list-view-compound-expansion.html ADDED
@@ -0,0 +1,1716 @@
1
+ <!DOCTYPE html>
2
+ <!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
3
+ <!--[if gt IE 9]><!-->
4
+ <html lang="en-us">
5
+ <!--<![endif]-->
6
+ <head>
7
+ <title>List View - Compound Expansion - PatternFly</title>
8
+ <meta charset="UTF-8">
9
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <link rel="shortcut icon" href="../../dist/img/favicon.ico">
12
+ <!-- iPad retina icon -->
13
+ <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
14
+ <!-- iPad retina icon (iOS < 7) -->
15
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
16
+ <!-- iPad non-retina icon -->
17
+ <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
18
+ <!-- iPad non-retina icon (iOS < 7) -->
19
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
20
+ <!-- iPhone 6 Plus icon -->
21
+ <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
22
+ <!-- iPhone retina icon (iOS < 7) -->
23
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
24
+ <!-- iPhone non-retina icon (iOS < 7) -->
25
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
26
+ <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
27
+ <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
28
+ <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
29
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30
+ <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
31
+ <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
32
+ <script src="../../dist/js/patternfly.min.js"></script>
33
+ </head>
34
+ <div class="toast-notifications-list-pf">
35
+ <div class="toast-pf alert alert-warning alert-dismissable">
36
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
37
+ <span class="pficon pficon-close"></span>
38
+ </button>
39
+ <span class="pficon pficon-warning-triangle-o"></span>
40
+ These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
41
+ </div>
42
+ </div>
43
+
44
+ <body>
45
+ <nav class="navbar navbar-default navbar-pf" role="navigation">
46
+ <div class="navbar-header">
47
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
48
+ <span class="sr-only">Toggle navigation</span>
49
+ <span class="icon-bar"></span>
50
+ <span class="icon-bar"></span>
51
+ <span class="icon-bar"></span>
52
+ </button>
53
+ <a class="navbar-brand" href="/">
54
+ <img src="../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
55
+ </a>
56
+ </div>
57
+ <div class="collapse navbar-collapse navbar-collapse-1">
58
+ <ul class="nav navbar-nav navbar-utility">
59
+ <li>
60
+ <a href="#">Status</a>
61
+ </li>
62
+ <li class="dropdown">
63
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
64
+ <span class="pficon pficon-user"></span>
65
+ Brian Johnson <b class="caret"></b>
66
+ </a>
67
+ <ul class="dropdown-menu">
68
+ <li>
69
+ <a href="#">Link</a>
70
+ </li>
71
+ <li>
72
+ <a href="#">Another link</a>
73
+ </li>
74
+ <li>
75
+ <a href="#">Something else here</a>
76
+ </li>
77
+ <li class="divider"></li>
78
+ <li class="dropdown-submenu">
79
+ <a tabindex="-1" href="#">More options</a>
80
+ <ul class="dropdown-menu">
81
+ <li>
82
+ <a href="#">Link</a>
83
+ </li>
84
+ <li>
85
+ <a href="#">Another link</a>
86
+ </li>
87
+ <li>
88
+ <a href="#">Something else here</a>
89
+ </li>
90
+ <li class="divider"></li>
91
+ <li class="dropdown-header">Nav header</li>
92
+ <li>
93
+ <a href="#">Separated link</a>
94
+ </li>
95
+ <li class="divider"></li>
96
+ <li>
97
+ <a href="#">One more separated link</a>
98
+ </li>
99
+ </ul>
100
+ </li>
101
+ <li class="divider"></li>
102
+ <li>
103
+ <a href="#">One more separated link</a>
104
+ </li>
105
+ </ul>
106
+ </li>
107
+ </ul>
108
+ <ul class="nav navbar-nav navbar-primary">
109
+ <li>
110
+ <a href="basic.html">Basic</a>
111
+ </li>
112
+ <li>
113
+ <a href="bootstrap-treeview-2.html">Tree View</a>
114
+ </li>
115
+ <li>
116
+ <a href="dashboard.html">Dashboard</a>
117
+ </li>
118
+ <li>
119
+ <a href="form.html">Form</a>
120
+ </li>
121
+ <li>
122
+ <a href="tab.html">Tab</a>
123
+ </li>
124
+ <li>
125
+ <a href="typography-2.html">Typography</a>
126
+ </li>
127
+ <li>
128
+ <a href="card-view-multi-select.html">Card View - Multi Select</a>
129
+ </li>
130
+ <li>
131
+ <a href="card-view-single-select.html">Card View - Single Select</a>
132
+ </li>
133
+ <li>
134
+ <a href="cards.html">Cards</a>
135
+ </li>
136
+ </ul>
137
+ </div>
138
+ </nav>
139
+
140
+ <div class="container-fluid">
141
+ <div class="row toolbar-pf">
142
+ <div class="col-sm-12">
143
+ <form class="toolbar-pf-actions">
144
+ <div class="form-group toolbar-pf-filter">
145
+ <label class="sr-only" for="filter">Name</label>
146
+ <div class="input-group">
147
+ <div class="input-group-btn">
148
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
149
+ <ul class="dropdown-menu">
150
+ <li class="selected"><a href="#">Name</a></li>
151
+ <li><a href="#">Type</a></li>
152
+ <li><a href="#">Color</a></li>
153
+ </ul>
154
+ </div><!-- /btn-group -->
155
+ <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
156
+ </div><!-- /input-group -->
157
+ </div>
158
+ <div class="form-group">
159
+ <div class="dropdown btn-group">
160
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
161
+ <ul class="dropdown-menu">
162
+ <li class="selected"><a href="#">Name</a></li>
163
+ <li><a href="#">Type</a></li>
164
+ <li><a href="#">Last Modified</a></li>
165
+ </ul>
166
+ </div>
167
+ <button class="btn btn-link" type="button">
168
+ <span class="fa fa-sort-alpha-asc"></span>
169
+ </button>
170
+ </div>
171
+ <div class="form-group">
172
+ <button class="btn btn-default" type="button">Action</button>
173
+ <button class="btn btn-default" type="button">Action</button>
174
+ <div class="dropdown btn-group dropdown-kebab-pf">
175
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
176
+ <span class="fa fa-ellipsis-v"></span>
177
+ </button>
178
+ <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
179
+ <li><a href="#">Action</a></li>
180
+ <li><a href="#">Another action</a></li>
181
+ <li><a href="#">Something else here</a></li>
182
+ <li role="separator" class="divider"></li>
183
+ <li><a href="#">Separated link</a></li>
184
+ </ul>
185
+ </div>
186
+
187
+ </div>
188
+ <div class="toolbar-pf-action-right">
189
+ <div class="form-group toolbar-pf-find">
190
+ <button class="btn btn-link btn-find" type="button">
191
+ <span class="fa fa-search"></span>
192
+ </button>
193
+ <div class="find-pf-dropdown-container">
194
+ <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
195
+ <div class="find-pf-buttons">
196
+ <span class="find-pf-nums">1 of 3</span>
197
+ <button class="btn btn-link" type="button">
198
+ <span class="fa fa-angle-up"></span>
199
+ </button>
200
+ <button class="btn btn-link" type="button">
201
+ <span class="fa fa-angle-down"></span>
202
+ </button>
203
+ <button class="btn btn-link btn-find-close" type="button">
204
+ <span class="pficon pficon-close"></span>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="form-group toolbar-pf-view-selector">
210
+ <button class="btn btn-link"><i class="fa fa-th"></i></button>
211
+ <button class="btn btn-link active"><i class="fa fa-th-large"></i></button>
212
+ <button class="btn btn-link"><i class="fa fa-th-list"></i></button>
213
+ </div>
214
+ </div>
215
+ </form>
216
+ <div class="row toolbar-pf-results">
217
+ <div class="col-sm-12">
218
+ <h5>40 Results</h5>
219
+ <p>Active filters:</p>
220
+ <ul class="list-inline">
221
+ <li>
222
+ <span class="label label-info">
223
+ Name: nameofthething
224
+ <a href="#"><span class="pficon pficon-close"></span></a>
225
+ </span>
226
+ </li>
227
+ <li>
228
+ <span class="label label-info">
229
+ Name: nameofthething
230
+ <a href="#"><span class="pficon pficon-close"></span></a>
231
+ </span>
232
+ </li>
233
+ <li>
234
+ <span class="label label-info">
235
+ Name: nameofthething
236
+ <a href="#"><span class="pficon pficon-close"></span></a>
237
+ </span>
238
+ </li>
239
+ </ul>
240
+ <p><a href="#">Clear All Filters</a></p>
241
+ </div><!-- /col -->
242
+ </div><!-- /row -->
243
+ </div><!-- /col -->
244
+ </div><!-- /row -->
245
+ </div><!-- /container -->
246
+
247
+ <div class="container-fluid">
248
+ <div class="list-group list-view-pf list-view-pf-view">
249
+ <div class="list-group-item">
250
+ <div class="list-view-pf-checkbox">
251
+ <input type="checkbox">
252
+ </div>
253
+ <div class="list-view-pf-actions">
254
+ <button class="btn btn-default">Action</button>
255
+ <div class="dropdown pull-right dropdown-kebab-pf">
256
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
257
+ <span class="fa fa-ellipsis-v"></span>
258
+ </button>
259
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight1">
260
+ <li><a href="#">Action</a></li>
261
+ <li><a href="#">Another action</a></li>
262
+ <li><a href="#">Something else here</a></li>
263
+ <li role="separator" class="divider"></li>
264
+ <li><a href="#">Separated link</a></li>
265
+ </ul>
266
+ </div>
267
+
268
+ </div>
269
+ <div class="list-view-pf-main-info">
270
+ <div class="list-view-pf-left">
271
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
272
+ </div>
273
+ <div class="list-view-pf-body">
274
+ <div class="list-view-pf-description">
275
+ <div class="list-group-item-heading">
276
+ Event One
277
+ </div>
278
+ <div class="list-group-item-text">
279
+ The following snippet of text is <a href="#">rendered as link text</a>.
280
+ </div>
281
+ </div>
282
+ <div class="list-view-pf-additional-info">
283
+ <div class="list-view-pf-additional-info-item">
284
+ <div class="list-view-pf-expand">
285
+ <span class="fa fa-angle-right"></span>
286
+ <span class="pficon pficon-screen"></span>
287
+ <strong>8</strong> Hosts
288
+ </div>
289
+ </div>
290
+ <div class="list-view-pf-additional-info-item">
291
+ <div class="list-view-pf-expand">
292
+ <span class="fa fa-angle-right"></span>
293
+ <span class="pficon pficon-cluster"></span>
294
+ <strong>6</strong> Clusters
295
+ </div>
296
+ </div>
297
+ <div class="list-view-pf-additional-info-item">
298
+ <div class="list-view-pf-expand">
299
+ <span class="fa fa-angle-right"></span>
300
+ <span class="pficon pficon-container-node"></span>
301
+ <strong>10</strong> Nodes
302
+ </div>
303
+ </div>
304
+ <div class="list-view-pf-additional-info-item">
305
+ <div class="list-view-pf-expand">
306
+ <span class="fa fa-angle-right"></span>
307
+ <span class="pficon pficon-image"></span>
308
+ <strong>8</strong> Images
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="list-group-item-container container-fluid hidden">
315
+ <div class="close">
316
+ <span class="pficon pficon-close"></span>
317
+ </div>
318
+ <div class="row">
319
+ <div class="col-md-3">
320
+ <ul>
321
+ <li>Host 1</li>
322
+ <li>Host 2</li>
323
+ <li>Host 3</li>
324
+ <li>Host 4</li>
325
+ <li>Host 5</li>
326
+ <li>Host 6</li>
327
+ <li>Host 7</li>
328
+ <li>Host 8</li>
329
+ <li>Host 9</li>
330
+ </ul>
331
+ </div>
332
+ <div class="col-md-9">
333
+ <dl class="dl-horizontal">
334
+ <dt>Host Name</dt>
335
+ <dd>file1.nay.redhat.com</dd>
336
+ <dt>Device Path</dt>
337
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
338
+ <dt>Time</dt>
339
+ <dd>January 15, 2016 10:45:11 AM</dd>
340
+ <dt>Severity</dt>
341
+ <dd>Warning</dd>
342
+ <dt>Cluster</dt>
343
+ <dd>Cluster 1</dd>
344
+ </dl>
345
+ <p>
346
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
347
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
348
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
349
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
350
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
351
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
352
+ </p>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ <div class="list-group-item-container container-fluid hidden">
357
+ <div class="close">
358
+ <span class="pficon pficon-close"></span>
359
+ </div>
360
+ <div class="row">
361
+ <div class="col-md-3">
362
+ <ul>
363
+ <li>Cluster 1</li>
364
+ <li>Cluster 2</li>
365
+ <li>Cluster 3</li>
366
+ <li>Cluster 4</li>
367
+ <li>Cluster 5</li>
368
+ <li>Cluster 6</li>
369
+ <li>Cluster 7</li>
370
+ <li>Cluster 8</li>
371
+ <li>Cluster 9</li>
372
+ </ul>
373
+ </div>
374
+ <div class="col-md-9">
375
+ <dl class="dl-horizontal">
376
+ <dt>Cluster Name</dt>
377
+ <dd>file2.nay.redhat.com</dd>
378
+ <dt>Device Path</dt>
379
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
380
+ <dt>Time</dt>
381
+ <dd>January 15, 2016 10:45:11 AM</dd>
382
+ <dt>Severity</dt>
383
+ <dd>Warning</dd>
384
+ <dt>Cluster</dt>
385
+ <dd>Cluster 1</dd>
386
+ </dl>
387
+ <p>
388
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
389
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
390
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
391
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
392
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
393
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
394
+ </p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ <div class="list-group-item-container container-fluid hidden">
399
+ <div class="close">
400
+ <span class="pficon pficon-close"></span>
401
+ </div>
402
+ <div class="row">
403
+ <div class="col-md-3">
404
+ <ul>
405
+ <li>Nodes 1</li>
406
+ <li>Nodes 2</li>
407
+ <li>Nodes 3</li>
408
+ <li>Nodes 4</li>
409
+ <li>Nodes 5</li>
410
+ <li>Nodes 6</li>
411
+ <li>Nodes 7</li>
412
+ <li>Nodes 8</li>
413
+ <li>Nodes 9</li>
414
+ </ul>
415
+ </div>
416
+ <div class="col-md-9">
417
+ <dl class="dl-horizontal">
418
+ <dt>Node Name</dt>
419
+ <dd>file3.nay.redhat.com</dd>
420
+ <dt>Device Path</dt>
421
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
422
+ <dt>Time</dt>
423
+ <dd>January 15, 2016 10:45:11 AM</dd>
424
+ <dt>Severity</dt>
425
+ <dd>Warning</dd>
426
+ <dt>Cluster</dt>
427
+ <dd>Cluster 1</dd>
428
+ </dl>
429
+ <p>
430
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
431
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
432
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
433
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
434
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
435
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
436
+ </p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ <div class="list-group-item-container container-fluid hidden">
441
+ <div class="close">
442
+ <span class="pficon pficon-close"></span>
443
+ </div>
444
+ <div class="row">
445
+ <div class="col-md-3">
446
+ <ul>
447
+ <li>Image 1</li>
448
+ <li>Image 2</li>
449
+ <li>Image 3</li>
450
+ <li>Image 4</li>
451
+ <li>Image 5</li>
452
+ <li>Image 6</li>
453
+ <li>Image 7</li>
454
+ <li>Image 8</li>
455
+ <li>Image 9</li>
456
+ </ul>
457
+ </div>
458
+ <div class="col-md-9">
459
+ <dl class="dl-horizontal">
460
+ <dt>Image Name</dt>
461
+ <dd>file4.nay.redhat.com</dd>
462
+ <dt>Device Path</dt>
463
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
464
+ <dt>Time</dt>
465
+ <dd>January 15, 2016 10:45:11 AM</dd>
466
+ <dt>Severity</dt>
467
+ <dd>Warning</dd>
468
+ <dt>Cluster</dt>
469
+ <dd>Cluster 1</dd>
470
+ </dl>
471
+ <p>
472
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
473
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
474
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
475
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
476
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
477
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
478
+ </p>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ <div class="list-group-item">
484
+ <div class="list-view-pf-checkbox">
485
+ <input type="checkbox">
486
+ </div>
487
+ <div class="list-view-pf-actions">
488
+ <button class="btn btn-default">Action</button>
489
+ <div class="dropdown pull-right dropdown-kebab-pf">
490
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
491
+ <span class="fa fa-ellipsis-v"></span>
492
+ </button>
493
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
494
+ <li><a href="#">Action</a></li>
495
+ <li><a href="#">Another action</a></li>
496
+ <li><a href="#">Something else here</a></li>
497
+ <li role="separator" class="divider"></li>
498
+ <li><a href="#">Separated link</a></li>
499
+ </ul>
500
+ </div>
501
+
502
+ </div>
503
+ <div class="list-view-pf-main-info">
504
+ <div class="list-view-pf-left">
505
+ <span class="fa fa-magic list-view-pf-icon-sm"></span>
506
+ </div>
507
+ <div class="list-view-pf-body">
508
+ <div class="list-view-pf-description">
509
+ <div class="list-group-item-heading">
510
+ Event Two
511
+ </div>
512
+ <div class="list-group-item-text">
513
+ The following snippet of text is <a href="#">rendered as link text</a>.
514
+ </div>
515
+ </div>
516
+ <div class="list-view-pf-additional-info">
517
+ <div class="list-view-pf-additional-info-item">
518
+ <div class="list-view-pf-expand">
519
+ <span class="fa fa-angle-right"></span>
520
+ <span class="pficon pficon-screen"></span>
521
+ <strong>8</strong> Hosts
522
+ </div>
523
+ </div>
524
+ <div class="list-view-pf-additional-info-item">
525
+ <div class="list-view-pf-expand">
526
+ <span class="fa fa-angle-right"></span>
527
+ <span class="pficon pficon-cluster"></span>
528
+ <strong>6</strong> Clusters
529
+ </div>
530
+ </div>
531
+ <div class="list-view-pf-additional-info-item">
532
+ <div class="list-view-pf-expand">
533
+ <span class="fa fa-angle-right"></span>
534
+ <span class="pficon pficon-container-node"></span>
535
+ <strong>10</strong> Nodes
536
+ </div>
537
+ </div>
538
+ <div class="list-view-pf-additional-info-item">
539
+ <div class="list-view-pf-expand">
540
+ <span class="fa fa-angle-right"></span>
541
+ <span class="pficon pficon-image"></span>
542
+ <strong>8</strong> Images
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ <div class="list-group-item-container container-fluid hidden">
549
+ <div class="close">
550
+ <span class="pficon pficon-close"></span>
551
+ </div>
552
+ <div class="row">
553
+ <div class="col-md-3">
554
+ <ul>
555
+ <li>Host 1</li>
556
+ <li>Host 2</li>
557
+ <li>Host 3</li>
558
+ <li>Host 4</li>
559
+ <li>Host 5</li>
560
+ <li>Host 6</li>
561
+ <li>Host 7</li>
562
+ <li>Host 8</li>
563
+ <li>Host 9</li>
564
+ </ul>
565
+ </div>
566
+ <div class="col-md-9">
567
+ <dl class="dl-horizontal">
568
+ <dt>Host Name</dt>
569
+ <dd>file1.nay.redhat.com</dd>
570
+ <dt>Device Path</dt>
571
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
572
+ <dt>Time</dt>
573
+ <dd>January 15, 2016 10:45:11 AM</dd>
574
+ <dt>Severity</dt>
575
+ <dd>Warning</dd>
576
+ <dt>Cluster</dt>
577
+ <dd>Cluster 1</dd>
578
+ </dl>
579
+ <p>
580
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
581
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
582
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
583
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
584
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
585
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
586
+ </p>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ <div class="list-group-item-container container-fluid hidden">
591
+ <div class="close">
592
+ <span class="pficon pficon-close"></span>
593
+ </div>
594
+ <div class="row">
595
+ <div class="col-md-3">
596
+ <ul>
597
+ <li>Cluster 1</li>
598
+ <li>Cluster 2</li>
599
+ <li>Cluster 3</li>
600
+ <li>Cluster 4</li>
601
+ <li>Cluster 5</li>
602
+ <li>Cluster 6</li>
603
+ <li>Cluster 7</li>
604
+ <li>Cluster 8</li>
605
+ <li>Cluster 9</li>
606
+ </ul>
607
+ </div>
608
+ <div class="col-md-9">
609
+ <dl class="dl-horizontal">
610
+ <dt>Cluster Name</dt>
611
+ <dd>file2.nay.redhat.com</dd>
612
+ <dt>Device Path</dt>
613
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
614
+ <dt>Time</dt>
615
+ <dd>January 15, 2016 10:45:11 AM</dd>
616
+ <dt>Severity</dt>
617
+ <dd>Warning</dd>
618
+ <dt>Cluster</dt>
619
+ <dd>Cluster 1</dd>
620
+ </dl>
621
+ <p>
622
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
623
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
624
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
625
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
626
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
627
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
628
+ </p>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ <div class="list-group-item-container container-fluid hidden">
633
+ <div class="close">
634
+ <span class="pficon pficon-close"></span>
635
+ </div>
636
+ <div class="row">
637
+ <div class="col-md-3">
638
+ <ul>
639
+ <li>Nodes 1</li>
640
+ <li>Nodes 2</li>
641
+ <li>Nodes 3</li>
642
+ <li>Nodes 4</li>
643
+ <li>Nodes 5</li>
644
+ <li>Nodes 6</li>
645
+ <li>Nodes 7</li>
646
+ <li>Nodes 8</li>
647
+ <li>Nodes 9</li>
648
+ </ul>
649
+ </div>
650
+ <div class="col-md-9">
651
+ <dl class="dl-horizontal">
652
+ <dt>Node Name</dt>
653
+ <dd>file3.nay.redhat.com</dd>
654
+ <dt>Device Path</dt>
655
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
656
+ <dt>Time</dt>
657
+ <dd>January 15, 2016 10:45:11 AM</dd>
658
+ <dt>Severity</dt>
659
+ <dd>Warning</dd>
660
+ <dt>Cluster</dt>
661
+ <dd>Cluster 1</dd>
662
+ </dl>
663
+ <p>
664
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
665
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
666
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
667
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
668
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
669
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
670
+ </p>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ <div class="list-group-item-container container-fluid hidden">
675
+ <div class="close">
676
+ <span class="pficon pficon-close"></span>
677
+ </div>
678
+ <div class="row">
679
+ <div class="col-md-3">
680
+ <ul>
681
+ <li>Image 1</li>
682
+ <li>Image 2</li>
683
+ <li>Image 3</li>
684
+ <li>Image 4</li>
685
+ <li>Image 5</li>
686
+ <li>Image 6</li>
687
+ <li>Image 7</li>
688
+ <li>Image 8</li>
689
+ <li>Image 9</li>
690
+ </ul>
691
+ </div>
692
+ <div class="col-md-9">
693
+ <dl class="dl-horizontal">
694
+ <dt>Image Name</dt>
695
+ <dd>file4.nay.redhat.com</dd>
696
+ <dt>Device Path</dt>
697
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
698
+ <dt>Time</dt>
699
+ <dd>January 15, 2016 10:45:11 AM</dd>
700
+ <dt>Severity</dt>
701
+ <dd>Warning</dd>
702
+ <dt>Cluster</dt>
703
+ <dd>Cluster 1</dd>
704
+ </dl>
705
+ <p>
706
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
707
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
708
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
709
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
710
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
711
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
712
+ </p>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ <div class="list-group-item">
718
+ <div class="list-view-pf-checkbox">
719
+ <input type="checkbox">
720
+ </div>
721
+ <div class="list-view-pf-actions">
722
+ <button class="btn btn-default">Action</button>
723
+ <div class="dropdown pull-right dropdown-kebab-pf">
724
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
725
+ <span class="fa fa-ellipsis-v"></span>
726
+ </button>
727
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
728
+ <li><a href="#">Action</a></li>
729
+ <li><a href="#">Another action</a></li>
730
+ <li><a href="#">Something else here</a></li>
731
+ <li role="separator" class="divider"></li>
732
+ <li><a href="#">Separated link</a></li>
733
+ </ul>
734
+ </div>
735
+
736
+ </div>
737
+ <div class="list-view-pf-main-info">
738
+ <div class="list-view-pf-left">
739
+ <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
740
+ </div>
741
+ <div class="list-view-pf-body">
742
+ <div class="list-view-pf-description">
743
+ <div class="list-group-item-heading">
744
+ Event Three
745
+ </div>
746
+ <div class="list-group-item-text">
747
+ The following snippet of text is <a href="#">rendered as link text</a>.
748
+ </div>
749
+ </div>
750
+ <div class="list-view-pf-additional-info">
751
+ <div class="list-view-pf-additional-info-item">
752
+ <div class="list-view-pf-expand">
753
+ <span class="fa fa-angle-right"></span>
754
+ <span class="pficon pficon-screen"></span>
755
+ <strong>8</strong> Hosts
756
+ </div>
757
+ </div>
758
+ <div class="list-view-pf-additional-info-item">
759
+ <div class="list-view-pf-expand">
760
+ <span class="fa fa-angle-right"></span>
761
+ <span class="pficon pficon-cluster"></span>
762
+ <strong>6</strong> Clusters
763
+ </div>
764
+ </div>
765
+ <div class="list-view-pf-additional-info-item">
766
+ <div class="list-view-pf-expand">
767
+ <span class="fa fa-angle-right"></span>
768
+ <span class="pficon pficon-container-node"></span>
769
+ <strong>10</strong> Nodes
770
+ </div>
771
+ </div>
772
+ <div class="list-view-pf-additional-info-item">
773
+ <div class="list-view-pf-expand">
774
+ <span class="fa fa-angle-right"></span>
775
+ <span class="pficon pficon-image"></span>
776
+ <strong>8</strong> Images
777
+ </div>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ <div class="list-group-item-container container-fluid hidden">
783
+ <div class="close">
784
+ <span class="pficon pficon-close"></span>
785
+ </div>
786
+ <div class="row">
787
+ <div class="col-md-3">
788
+ <ul>
789
+ <li>Host 1</li>
790
+ <li>Host 2</li>
791
+ <li>Host 3</li>
792
+ <li>Host 4</li>
793
+ <li>Host 5</li>
794
+ <li>Host 6</li>
795
+ <li>Host 7</li>
796
+ <li>Host 8</li>
797
+ <li>Host 9</li>
798
+ </ul>
799
+ </div>
800
+ <div class="col-md-9">
801
+ <dl class="dl-horizontal">
802
+ <dt>Host Name</dt>
803
+ <dd>file1.nay.redhat.com</dd>
804
+ <dt>Device Path</dt>
805
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
806
+ <dt>Time</dt>
807
+ <dd>January 15, 2016 10:45:11 AM</dd>
808
+ <dt>Severity</dt>
809
+ <dd>Warning</dd>
810
+ <dt>Cluster</dt>
811
+ <dd>Cluster 1</dd>
812
+ </dl>
813
+ <p>
814
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
815
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
816
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
817
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
818
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
819
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
820
+ </p>
821
+ </div>
822
+ </div>
823
+ </div>
824
+ <div class="list-group-item-container container-fluid hidden">
825
+ <div class="close">
826
+ <span class="pficon pficon-close"></span>
827
+ </div>
828
+ <div class="row">
829
+ <div class="col-md-3">
830
+ <ul>
831
+ <li>Cluster 1</li>
832
+ <li>Cluster 2</li>
833
+ <li>Cluster 3</li>
834
+ <li>Cluster 4</li>
835
+ <li>Cluster 5</li>
836
+ <li>Cluster 6</li>
837
+ <li>Cluster 7</li>
838
+ <li>Cluster 8</li>
839
+ <li>Cluster 9</li>
840
+ </ul>
841
+ </div>
842
+ <div class="col-md-9">
843
+ <dl class="dl-horizontal">
844
+ <dt>Cluster Name</dt>
845
+ <dd>file2.nay.redhat.com</dd>
846
+ <dt>Device Path</dt>
847
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
848
+ <dt>Time</dt>
849
+ <dd>January 15, 2016 10:45:11 AM</dd>
850
+ <dt>Severity</dt>
851
+ <dd>Warning</dd>
852
+ <dt>Cluster</dt>
853
+ <dd>Cluster 1</dd>
854
+ </dl>
855
+ <p>
856
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
857
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
858
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
859
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
860
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
861
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
862
+ </p>
863
+ </div>
864
+ </div>
865
+ </div>
866
+ <div class="list-group-item-container container-fluid hidden">
867
+ <div class="close">
868
+ <span class="pficon pficon-close"></span>
869
+ </div>
870
+ <div class="row">
871
+ <div class="col-md-3">
872
+ <ul>
873
+ <li>Nodes 1</li>
874
+ <li>Nodes 2</li>
875
+ <li>Nodes 3</li>
876
+ <li>Nodes 4</li>
877
+ <li>Nodes 5</li>
878
+ <li>Nodes 6</li>
879
+ <li>Nodes 7</li>
880
+ <li>Nodes 8</li>
881
+ <li>Nodes 9</li>
882
+ </ul>
883
+ </div>
884
+ <div class="col-md-9">
885
+ <dl class="dl-horizontal">
886
+ <dt>Node Name</dt>
887
+ <dd>file3.nay.redhat.com</dd>
888
+ <dt>Device Path</dt>
889
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
890
+ <dt>Time</dt>
891
+ <dd>January 15, 2016 10:45:11 AM</dd>
892
+ <dt>Severity</dt>
893
+ <dd>Warning</dd>
894
+ <dt>Cluster</dt>
895
+ <dd>Cluster 1</dd>
896
+ </dl>
897
+ <p>
898
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
899
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
900
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
901
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
902
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
903
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
904
+ </p>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ <div class="list-group-item-container container-fluid hidden">
909
+ <div class="close">
910
+ <span class="pficon pficon-close"></span>
911
+ </div>
912
+ <div class="row">
913
+ <div class="col-md-3">
914
+ <ul>
915
+ <li>Image 1</li>
916
+ <li>Image 2</li>
917
+ <li>Image 3</li>
918
+ <li>Image 4</li>
919
+ <li>Image 5</li>
920
+ <li>Image 6</li>
921
+ <li>Image 7</li>
922
+ <li>Image 8</li>
923
+ <li>Image 9</li>
924
+ </ul>
925
+ </div>
926
+ <div class="col-md-9">
927
+ <dl class="dl-horizontal">
928
+ <dt>Image Name</dt>
929
+ <dd>file4.nay.redhat.com</dd>
930
+ <dt>Device Path</dt>
931
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
932
+ <dt>Time</dt>
933
+ <dd>January 15, 2016 10:45:11 AM</dd>
934
+ <dt>Severity</dt>
935
+ <dd>Warning</dd>
936
+ <dt>Cluster</dt>
937
+ <dd>Cluster 1</dd>
938
+ </dl>
939
+ <p>
940
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
941
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
942
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
943
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
944
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
945
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
946
+ </p>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </div>
951
+ <div class="list-group-item">
952
+ <div class="list-view-pf-checkbox">
953
+ <input type="checkbox">
954
+ </div>
955
+ <div class="list-view-pf-actions">
956
+ <button class="btn btn-default">Action</button>
957
+ <div class="dropdown pull-right dropdown-kebab-pf">
958
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
959
+ <span class="fa fa-ellipsis-v"></span>
960
+ </button>
961
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight4">
962
+ <li><a href="#">Action</a></li>
963
+ <li><a href="#">Another action</a></li>
964
+ <li><a href="#">Something else here</a></li>
965
+ <li role="separator" class="divider"></li>
966
+ <li><a href="#">Separated link</a></li>
967
+ </ul>
968
+ </div>
969
+
970
+ </div>
971
+ <div class="list-view-pf-main-info">
972
+ <div class="list-view-pf-left">
973
+ <span class="fa fa-linux list-view-pf-icon-sm"></span>
974
+ </div>
975
+ <div class="list-view-pf-body">
976
+ <div class="list-view-pf-description">
977
+ <div class="list-group-item-heading">
978
+ Event Four
979
+ </div>
980
+ <div class="list-group-item-text">
981
+ The following snippet of text is <a href="#">rendered as link text</a>.
982
+ </div>
983
+ </div>
984
+ <div class="list-view-pf-additional-info">
985
+ <div class="list-view-pf-additional-info-item">
986
+ <div class="list-view-pf-expand">
987
+ <span class="fa fa-angle-right"></span>
988
+ <span class="pficon pficon-screen"></span>
989
+ <strong>8</strong> Hosts
990
+ </div>
991
+ </div>
992
+ <div class="list-view-pf-additional-info-item">
993
+ <div class="list-view-pf-expand">
994
+ <span class="fa fa-angle-right"></span>
995
+ <span class="pficon pficon-cluster"></span>
996
+ <strong>6</strong> Clusters
997
+ </div>
998
+ </div>
999
+ <div class="list-view-pf-additional-info-item">
1000
+ <div class="list-view-pf-expand">
1001
+ <span class="fa fa-angle-right"></span>
1002
+ <span class="pficon pficon-container-node"></span>
1003
+ <strong>10</strong> Nodes
1004
+ </div>
1005
+ </div>
1006
+ <div class="list-view-pf-additional-info-item">
1007
+ <div class="list-view-pf-expand">
1008
+ <span class="fa fa-angle-right"></span>
1009
+ <span class="pficon pficon-image"></span>
1010
+ <strong>8</strong> Images
1011
+ </div>
1012
+ </div>
1013
+ </div>
1014
+ </div>
1015
+ </div>
1016
+ <div class="list-group-item-container container-fluid hidden">
1017
+ <div class="close">
1018
+ <span class="pficon pficon-close"></span>
1019
+ </div>
1020
+ <div class="row">
1021
+ <div class="col-md-3">
1022
+ <ul>
1023
+ <li>Host 1</li>
1024
+ <li>Host 2</li>
1025
+ <li>Host 3</li>
1026
+ <li>Host 4</li>
1027
+ <li>Host 5</li>
1028
+ <li>Host 6</li>
1029
+ <li>Host 7</li>
1030
+ <li>Host 8</li>
1031
+ <li>Host 9</li>
1032
+ </ul>
1033
+ </div>
1034
+ <div class="col-md-9">
1035
+ <dl class="dl-horizontal">
1036
+ <dt>Host Name</dt>
1037
+ <dd>file1.nay.redhat.com</dd>
1038
+ <dt>Device Path</dt>
1039
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1040
+ <dt>Time</dt>
1041
+ <dd>January 15, 2016 10:45:11 AM</dd>
1042
+ <dt>Severity</dt>
1043
+ <dd>Warning</dd>
1044
+ <dt>Cluster</dt>
1045
+ <dd>Cluster 1</dd>
1046
+ </dl>
1047
+ <p>
1048
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1049
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1050
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1051
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1052
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1053
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1054
+ </p>
1055
+ </div>
1056
+ </div>
1057
+ </div>
1058
+ <div class="list-group-item-container container-fluid hidden">
1059
+ <div class="close">
1060
+ <span class="pficon pficon-close"></span>
1061
+ </div>
1062
+ <div class="row">
1063
+ <div class="col-md-3">
1064
+ <ul>
1065
+ <li>Cluster 1</li>
1066
+ <li>Cluster 2</li>
1067
+ <li>Cluster 3</li>
1068
+ <li>Cluster 4</li>
1069
+ <li>Cluster 5</li>
1070
+ <li>Cluster 6</li>
1071
+ <li>Cluster 7</li>
1072
+ <li>Cluster 8</li>
1073
+ <li>Cluster 9</li>
1074
+ </ul>
1075
+ </div>
1076
+ <div class="col-md-9">
1077
+ <dl class="dl-horizontal">
1078
+ <dt>Cluster Name</dt>
1079
+ <dd>file2.nay.redhat.com</dd>
1080
+ <dt>Device Path</dt>
1081
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1082
+ <dt>Time</dt>
1083
+ <dd>January 15, 2016 10:45:11 AM</dd>
1084
+ <dt>Severity</dt>
1085
+ <dd>Warning</dd>
1086
+ <dt>Cluster</dt>
1087
+ <dd>Cluster 1</dd>
1088
+ </dl>
1089
+ <p>
1090
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1091
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1092
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1093
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1094
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1095
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1096
+ </p>
1097
+ </div>
1098
+ </div>
1099
+ </div>
1100
+ <div class="list-group-item-container container-fluid hidden">
1101
+ <div class="close">
1102
+ <span class="pficon pficon-close"></span>
1103
+ </div>
1104
+ <div class="row">
1105
+ <div class="col-md-3">
1106
+ <ul>
1107
+ <li>Nodes 1</li>
1108
+ <li>Nodes 2</li>
1109
+ <li>Nodes 3</li>
1110
+ <li>Nodes 4</li>
1111
+ <li>Nodes 5</li>
1112
+ <li>Nodes 6</li>
1113
+ <li>Nodes 7</li>
1114
+ <li>Nodes 8</li>
1115
+ <li>Nodes 9</li>
1116
+ </ul>
1117
+ </div>
1118
+ <div class="col-md-9">
1119
+ <dl class="dl-horizontal">
1120
+ <dt>Node Name</dt>
1121
+ <dd>file3.nay.redhat.com</dd>
1122
+ <dt>Device Path</dt>
1123
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1124
+ <dt>Time</dt>
1125
+ <dd>January 15, 2016 10:45:11 AM</dd>
1126
+ <dt>Severity</dt>
1127
+ <dd>Warning</dd>
1128
+ <dt>Cluster</dt>
1129
+ <dd>Cluster 1</dd>
1130
+ </dl>
1131
+ <p>
1132
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1133
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1134
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1135
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1136
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1137
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1138
+ </p>
1139
+ </div>
1140
+ </div>
1141
+ </div>
1142
+ <div class="list-group-item-container container-fluid hidden">
1143
+ <div class="close">
1144
+ <span class="pficon pficon-close"></span>
1145
+ </div>
1146
+ <div class="row">
1147
+ <div class="col-md-3">
1148
+ <ul>
1149
+ <li>Image 1</li>
1150
+ <li>Image 2</li>
1151
+ <li>Image 3</li>
1152
+ <li>Image 4</li>
1153
+ <li>Image 5</li>
1154
+ <li>Image 6</li>
1155
+ <li>Image 7</li>
1156
+ <li>Image 8</li>
1157
+ <li>Image 9</li>
1158
+ </ul>
1159
+ </div>
1160
+ <div class="col-md-9">
1161
+ <dl class="dl-horizontal">
1162
+ <dt>Image Name</dt>
1163
+ <dd>file4.nay.redhat.com</dd>
1164
+ <dt>Device Path</dt>
1165
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1166
+ <dt>Time</dt>
1167
+ <dd>January 15, 2016 10:45:11 AM</dd>
1168
+ <dt>Severity</dt>
1169
+ <dd>Warning</dd>
1170
+ <dt>Cluster</dt>
1171
+ <dd>Cluster 1</dd>
1172
+ </dl>
1173
+ <p>
1174
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1175
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1176
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1177
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1178
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1179
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1180
+ </p>
1181
+ </div>
1182
+ </div>
1183
+ </div>
1184
+ </div>
1185
+ <div class="list-group-item">
1186
+ <div class="list-view-pf-checkbox">
1187
+ <input type="checkbox">
1188
+ </div>
1189
+ <div class="list-view-pf-actions">
1190
+ <button class="btn btn-default">Action</button>
1191
+ <div class="dropdown pull-right dropdown-kebab-pf">
1192
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
1193
+ <span class="fa fa-ellipsis-v"></span>
1194
+ </button>
1195
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight5">
1196
+ <li><a href="#">Action</a></li>
1197
+ <li><a href="#">Another action</a></li>
1198
+ <li><a href="#">Something else here</a></li>
1199
+ <li role="separator" class="divider"></li>
1200
+ <li><a href="#">Separated link</a></li>
1201
+ </ul>
1202
+ </div>
1203
+
1204
+ </div>
1205
+ <div class="list-view-pf-main-info">
1206
+ <div class="list-view-pf-left">
1207
+ <span class="fa fa-briefcase list-view-pf-icon-sm"></span>
1208
+ </div>
1209
+ <div class="list-view-pf-body">
1210
+ <div class="list-view-pf-description">
1211
+ <div class="list-group-item-heading">
1212
+ Event Five
1213
+ </div>
1214
+ <div class="list-group-item-text">
1215
+ The following snippet of text is <a href="#">rendered as link text</a>.
1216
+ </div>
1217
+ </div>
1218
+ <div class="list-view-pf-additional-info">
1219
+ <div class="list-view-pf-additional-info-item">
1220
+ <div class="list-view-pf-expand">
1221
+ <span class="fa fa-angle-right"></span>
1222
+ <span class="pficon pficon-screen"></span>
1223
+ <strong>8</strong> Hosts
1224
+ </div>
1225
+ </div>
1226
+ <div class="list-view-pf-additional-info-item">
1227
+ <div class="list-view-pf-expand">
1228
+ <span class="fa fa-angle-right"></span>
1229
+ <span class="pficon pficon-cluster"></span>
1230
+ <strong>6</strong> Clusters
1231
+ </div>
1232
+ </div>
1233
+ <div class="list-view-pf-additional-info-item">
1234
+ <div class="list-view-pf-expand">
1235
+ <span class="fa fa-angle-right"></span>
1236
+ <span class="pficon pficon-container-node"></span>
1237
+ <strong>10</strong> Nodes
1238
+ </div>
1239
+ </div>
1240
+ <div class="list-view-pf-additional-info-item">
1241
+ <div class="list-view-pf-expand">
1242
+ <span class="fa fa-angle-right"></span>
1243
+ <span class="pficon pficon-image"></span>
1244
+ <strong>8</strong> Images
1245
+ </div>
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+ </div>
1250
+ <div class="list-group-item-container container-fluid hidden">
1251
+ <div class="close">
1252
+ <span class="pficon pficon-close"></span>
1253
+ </div>
1254
+ <div class="row">
1255
+ <div class="col-md-3">
1256
+ <ul>
1257
+ <li>Host 1</li>
1258
+ <li>Host 2</li>
1259
+ <li>Host 3</li>
1260
+ <li>Host 4</li>
1261
+ <li>Host 5</li>
1262
+ <li>Host 6</li>
1263
+ <li>Host 7</li>
1264
+ <li>Host 8</li>
1265
+ <li>Host 9</li>
1266
+ </ul>
1267
+ </div>
1268
+ <div class="col-md-9">
1269
+ <dl class="dl-horizontal">
1270
+ <dt>Host Name</dt>
1271
+ <dd>file1.nay.redhat.com</dd>
1272
+ <dt>Device Path</dt>
1273
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1274
+ <dt>Time</dt>
1275
+ <dd>January 15, 2016 10:45:11 AM</dd>
1276
+ <dt>Severity</dt>
1277
+ <dd>Warning</dd>
1278
+ <dt>Cluster</dt>
1279
+ <dd>Cluster 1</dd>
1280
+ </dl>
1281
+ <p>
1282
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1283
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1284
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1285
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1286
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1287
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1288
+ </p>
1289
+ </div>
1290
+ </div>
1291
+ </div>
1292
+ <div class="list-group-item-container container-fluid hidden">
1293
+ <div class="close">
1294
+ <span class="pficon pficon-close"></span>
1295
+ </div>
1296
+ <div class="row">
1297
+ <div class="col-md-3">
1298
+ <ul>
1299
+ <li>Cluster 1</li>
1300
+ <li>Cluster 2</li>
1301
+ <li>Cluster 3</li>
1302
+ <li>Cluster 4</li>
1303
+ <li>Cluster 5</li>
1304
+ <li>Cluster 6</li>
1305
+ <li>Cluster 7</li>
1306
+ <li>Cluster 8</li>
1307
+ <li>Cluster 9</li>
1308
+ </ul>
1309
+ </div>
1310
+ <div class="col-md-9">
1311
+ <dl class="dl-horizontal">
1312
+ <dt>Cluster Name</dt>
1313
+ <dd>file2.nay.redhat.com</dd>
1314
+ <dt>Device Path</dt>
1315
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1316
+ <dt>Time</dt>
1317
+ <dd>January 15, 2016 10:45:11 AM</dd>
1318
+ <dt>Severity</dt>
1319
+ <dd>Warning</dd>
1320
+ <dt>Cluster</dt>
1321
+ <dd>Cluster 1</dd>
1322
+ </dl>
1323
+ <p>
1324
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1325
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1326
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1327
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1328
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1329
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1330
+ </p>
1331
+ </div>
1332
+ </div>
1333
+ </div>
1334
+ <div class="list-group-item-container container-fluid hidden">
1335
+ <div class="close">
1336
+ <span class="pficon pficon-close"></span>
1337
+ </div>
1338
+ <div class="row">
1339
+ <div class="col-md-3">
1340
+ <ul>
1341
+ <li>Nodes 1</li>
1342
+ <li>Nodes 2</li>
1343
+ <li>Nodes 3</li>
1344
+ <li>Nodes 4</li>
1345
+ <li>Nodes 5</li>
1346
+ <li>Nodes 6</li>
1347
+ <li>Nodes 7</li>
1348
+ <li>Nodes 8</li>
1349
+ <li>Nodes 9</li>
1350
+ </ul>
1351
+ </div>
1352
+ <div class="col-md-9">
1353
+ <dl class="dl-horizontal">
1354
+ <dt>Node Name</dt>
1355
+ <dd>file3.nay.redhat.com</dd>
1356
+ <dt>Device Path</dt>
1357
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1358
+ <dt>Time</dt>
1359
+ <dd>January 15, 2016 10:45:11 AM</dd>
1360
+ <dt>Severity</dt>
1361
+ <dd>Warning</dd>
1362
+ <dt>Cluster</dt>
1363
+ <dd>Cluster 1</dd>
1364
+ </dl>
1365
+ <p>
1366
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1367
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1368
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1369
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1370
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1371
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1372
+ </p>
1373
+ </div>
1374
+ </div>
1375
+ </div>
1376
+ <div class="list-group-item-container container-fluid hidden">
1377
+ <div class="close">
1378
+ <span class="pficon pficon-close"></span>
1379
+ </div>
1380
+ <div class="row">
1381
+ <div class="col-md-3">
1382
+ <ul>
1383
+ <li>Image 1</li>
1384
+ <li>Image 2</li>
1385
+ <li>Image 3</li>
1386
+ <li>Image 4</li>
1387
+ <li>Image 5</li>
1388
+ <li>Image 6</li>
1389
+ <li>Image 7</li>
1390
+ <li>Image 8</li>
1391
+ <li>Image 9</li>
1392
+ </ul>
1393
+ </div>
1394
+ <div class="col-md-9">
1395
+ <dl class="dl-horizontal">
1396
+ <dt>Image Name</dt>
1397
+ <dd>file4.nay.redhat.com</dd>
1398
+ <dt>Device Path</dt>
1399
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1400
+ <dt>Time</dt>
1401
+ <dd>January 15, 2016 10:45:11 AM</dd>
1402
+ <dt>Severity</dt>
1403
+ <dd>Warning</dd>
1404
+ <dt>Cluster</dt>
1405
+ <dd>Cluster 1</dd>
1406
+ </dl>
1407
+ <p>
1408
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1409
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1410
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1411
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1412
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1413
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1414
+ </p>
1415
+ </div>
1416
+ </div>
1417
+ </div>
1418
+ </div>
1419
+ <div class="list-group-item">
1420
+ <div class="list-view-pf-checkbox">
1421
+ <input type="checkbox">
1422
+ </div>
1423
+ <div class="list-view-pf-actions">
1424
+ <button class="btn btn-default">Action</button>
1425
+ <div class="dropdown pull-right dropdown-kebab-pf">
1426
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
1427
+ <span class="fa fa-ellipsis-v"></span>
1428
+ </button>
1429
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight6">
1430
+ <li><a href="#">Action</a></li>
1431
+ <li><a href="#">Another action</a></li>
1432
+ <li><a href="#">Something else here</a></li>
1433
+ <li role="separator" class="divider"></li>
1434
+ <li><a href="#">Separated link</a></li>
1435
+ </ul>
1436
+ </div>
1437
+
1438
+ </div>
1439
+ <div class="list-view-pf-main-info">
1440
+ <div class="list-view-pf-left">
1441
+ <span class="fa fa-coffee list-view-pf-icon-sm"></span>
1442
+ </div>
1443
+ <div class="list-view-pf-body">
1444
+ <div class="list-view-pf-description">
1445
+ <div class="list-group-item-heading">
1446
+ Event Six
1447
+ </div>
1448
+ <div class="list-group-item-text">
1449
+ The following snippet of text is <a href="#">rendered as link text</a>.
1450
+ </div>
1451
+ </div>
1452
+ <div class="list-view-pf-additional-info">
1453
+ <div class="list-view-pf-additional-info-item">
1454
+ <div class="list-view-pf-expand">
1455
+ <span class="fa fa-angle-right"></span>
1456
+ <span class="pficon pficon-screen"></span>
1457
+ <strong>8</strong> Hosts
1458
+ </div>
1459
+ </div>
1460
+ <div class="list-view-pf-additional-info-item">
1461
+ <div class="list-view-pf-expand">
1462
+ <span class="fa fa-angle-right"></span>
1463
+ <span class="pficon pficon-cluster"></span>
1464
+ <strong>6</strong> Clusters
1465
+ </div>
1466
+ </div>
1467
+ <div class="list-view-pf-additional-info-item">
1468
+ <div class="list-view-pf-expand">
1469
+ <span class="fa fa-angle-right"></span>
1470
+ <span class="pficon pficon-container-node"></span>
1471
+ <strong>10</strong> Nodes
1472
+ </div>
1473
+ </div>
1474
+ <div class="list-view-pf-additional-info-item">
1475
+ <div class="list-view-pf-expand">
1476
+ <span class="fa fa-angle-right"></span>
1477
+ <span class="pficon pficon-image"></span>
1478
+ <strong>8</strong> Images
1479
+ </div>
1480
+ </div>
1481
+ </div>
1482
+ </div>
1483
+ </div>
1484
+ <div class="list-group-item-container container-fluid hidden">
1485
+ <div class="close">
1486
+ <span class="pficon pficon-close"></span>
1487
+ </div>
1488
+ <div class="row">
1489
+ <div class="col-md-3">
1490
+ <ul>
1491
+ <li>Host 1</li>
1492
+ <li>Host 2</li>
1493
+ <li>Host 3</li>
1494
+ <li>Host 4</li>
1495
+ <li>Host 5</li>
1496
+ <li>Host 6</li>
1497
+ <li>Host 7</li>
1498
+ <li>Host 8</li>
1499
+ <li>Host 9</li>
1500
+ </ul>
1501
+ </div>
1502
+ <div class="col-md-9">
1503
+ <dl class="dl-horizontal">
1504
+ <dt>Host Name</dt>
1505
+ <dd>file1.nay.redhat.com</dd>
1506
+ <dt>Device Path</dt>
1507
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1508
+ <dt>Time</dt>
1509
+ <dd>January 15, 2016 10:45:11 AM</dd>
1510
+ <dt>Severity</dt>
1511
+ <dd>Warning</dd>
1512
+ <dt>Cluster</dt>
1513
+ <dd>Cluster 1</dd>
1514
+ </dl>
1515
+ <p>
1516
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1517
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1518
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1519
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1520
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1521
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1522
+ </p>
1523
+ </div>
1524
+ </div>
1525
+ </div>
1526
+ <div class="list-group-item-container container-fluid hidden">
1527
+ <div class="close">
1528
+ <span class="pficon pficon-close"></span>
1529
+ </div>
1530
+ <div class="row">
1531
+ <div class="col-md-3">
1532
+ <ul>
1533
+ <li>Cluster 1</li>
1534
+ <li>Cluster 2</li>
1535
+ <li>Cluster 3</li>
1536
+ <li>Cluster 4</li>
1537
+ <li>Cluster 5</li>
1538
+ <li>Cluster 6</li>
1539
+ <li>Cluster 7</li>
1540
+ <li>Cluster 8</li>
1541
+ <li>Cluster 9</li>
1542
+ </ul>
1543
+ </div>
1544
+ <div class="col-md-9">
1545
+ <dl class="dl-horizontal">
1546
+ <dt>Cluster Name</dt>
1547
+ <dd>file2.nay.redhat.com</dd>
1548
+ <dt>Device Path</dt>
1549
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1550
+ <dt>Time</dt>
1551
+ <dd>January 15, 2016 10:45:11 AM</dd>
1552
+ <dt>Severity</dt>
1553
+ <dd>Warning</dd>
1554
+ <dt>Cluster</dt>
1555
+ <dd>Cluster 1</dd>
1556
+ </dl>
1557
+ <p>
1558
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1559
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1560
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1561
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1562
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1563
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1564
+ </p>
1565
+ </div>
1566
+ </div>
1567
+ </div>
1568
+ <div class="list-group-item-container container-fluid hidden">
1569
+ <div class="close">
1570
+ <span class="pficon pficon-close"></span>
1571
+ </div>
1572
+ <div class="row">
1573
+ <div class="col-md-3">
1574
+ <ul>
1575
+ <li>Nodes 1</li>
1576
+ <li>Nodes 2</li>
1577
+ <li>Nodes 3</li>
1578
+ <li>Nodes 4</li>
1579
+ <li>Nodes 5</li>
1580
+ <li>Nodes 6</li>
1581
+ <li>Nodes 7</li>
1582
+ <li>Nodes 8</li>
1583
+ <li>Nodes 9</li>
1584
+ </ul>
1585
+ </div>
1586
+ <div class="col-md-9">
1587
+ <dl class="dl-horizontal">
1588
+ <dt>Node Name</dt>
1589
+ <dd>file3.nay.redhat.com</dd>
1590
+ <dt>Device Path</dt>
1591
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1592
+ <dt>Time</dt>
1593
+ <dd>January 15, 2016 10:45:11 AM</dd>
1594
+ <dt>Severity</dt>
1595
+ <dd>Warning</dd>
1596
+ <dt>Cluster</dt>
1597
+ <dd>Cluster 1</dd>
1598
+ </dl>
1599
+ <p>
1600
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1601
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1602
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1603
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1604
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1605
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1606
+ </p>
1607
+ </div>
1608
+ </div>
1609
+ </div>
1610
+ <div class="list-group-item-container container-fluid hidden">
1611
+ <div class="close">
1612
+ <span class="pficon pficon-close"></span>
1613
+ </div>
1614
+ <div class="row">
1615
+ <div class="col-md-3">
1616
+ <ul>
1617
+ <li>Image 1</li>
1618
+ <li>Image 2</li>
1619
+ <li>Image 3</li>
1620
+ <li>Image 4</li>
1621
+ <li>Image 5</li>
1622
+ <li>Image 6</li>
1623
+ <li>Image 7</li>
1624
+ <li>Image 8</li>
1625
+ <li>Image 9</li>
1626
+ </ul>
1627
+ </div>
1628
+ <div class="col-md-9">
1629
+ <dl class="dl-horizontal">
1630
+ <dt>Image Name</dt>
1631
+ <dd>file4.nay.redhat.com</dd>
1632
+ <dt>Device Path</dt>
1633
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
1634
+ <dt>Time</dt>
1635
+ <dd>January 15, 2016 10:45:11 AM</dd>
1636
+ <dt>Severity</dt>
1637
+ <dd>Warning</dd>
1638
+ <dt>Cluster</dt>
1639
+ <dd>Cluster 1</dd>
1640
+ </dl>
1641
+ <p>
1642
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
1643
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
1644
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
1645
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
1646
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
1647
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1648
+ </p>
1649
+ </div>
1650
+ </div>
1651
+ </div>
1652
+ </div>
1653
+ </div>
1654
+ <script>
1655
+ $(document).ready(function () {
1656
+ // Row Checkbox Selection
1657
+ $("input[type='checkbox']").change(function (e) {
1658
+ if ($(this).is(":checked")) {
1659
+ $(this).closest('.list-group-item').addClass("active");
1660
+ } else {
1661
+ $(this).closest('.list-group-item').removeClass("active");
1662
+ }
1663
+ });
1664
+ // toggle dropdown menu
1665
+ $(".list-view-pf-actions").on("show.bs.dropdown", function () {
1666
+ var $this = $(this);
1667
+ var $dropdown = $this.find(".dropdown");
1668
+ var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find(".dropdown-menu").outerHeight(true);
1669
+ $dropdown.toggleClass("dropup", space < 10);
1670
+ });
1671
+ // compound expansion
1672
+ $(".list-view-pf-expand").on("click", function () {
1673
+ var $this = $(this);
1674
+ var $heading = $(this).parents(".list-group-item");
1675
+ //var $row = $heading.parent();
1676
+ var $subPanels = $heading.find(".list-group-item-container");
1677
+ var index = $heading.find(".list-view-pf-expand").index(this);
1678
+
1679
+ //Remove all active status
1680
+ $heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
1681
+ .end().removeClass("active")
1682
+ .end().removeClass("list-view-pf-expand-active");
1683
+ // Add active to the clicked item
1684
+ $(this).addClass("active")
1685
+ .parents(".list-group-item").addClass("list-view-pf-expand-active")
1686
+ .end().find(".fa-angle-right").addClass("fa-angle-down");
1687
+ // check if it needs to hide
1688
+ if($subPanels.eq(index).hasClass("hidden")){
1689
+ $heading.find(".list-group-item-container:visible").addClass("hidden");
1690
+ $subPanels.eq(index).removeClass("hidden");
1691
+ } else {
1692
+ $subPanels.eq(index).addClass("hidden");
1693
+ $heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
1694
+ .end().removeClass("active")
1695
+ .end().removeClass("list-view-pf-expand-active");
1696
+ }
1697
+ });
1698
+
1699
+ // click close button to close the panel
1700
+ $(".list-group-item-container .close").on("click", function (){
1701
+ var $this = $(this);
1702
+ var $panel = $this.parent();
1703
+
1704
+ // close the container and remove the active status
1705
+ $panel.addClass("hidden")
1706
+ .parent().removeClass("list-view-pf-expand-active")
1707
+ .find(".list-view-pf-expand.active").removeClass("active")
1708
+ .find(".fa-angle-right").removeClass("fa-angle-down")
1709
+ });
1710
+ });
1711
+ </script>
1712
+
1713
+ </div>
1714
+
1715
+ </body>
1716
+ </html>