patternfly-sass 3.11.0 → 3.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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>