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
@@ -166,6 +166,7 @@
166
166
  var c3ChartDefaults = $().c3ChartDefaults();
167
167
  var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
168
168
  customDonutChartConfig.size.height = 71;
169
+ customDonutChartConfig.size.width = 60;
169
170
  customDonutChartConfig.donut.width = 5;
170
171
  customDonutChartConfig.bindto = '#donut-chart-1';
171
172
  customDonutChartConfig.data = {
@@ -186,6 +187,7 @@
186
187
 
187
188
  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
188
189
  customDonutChartConfig.size.height = 71;
190
+ customDonutChartConfig.size.width = 60;
189
191
  customDonutChartConfig.donut.width = 5;
190
192
  customDonutChartConfig.bindto = '#donut-chart-2';
191
193
  customDonutChartConfig.data = {
@@ -206,6 +208,7 @@
206
208
 
207
209
  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
208
210
  customDonutChartConfig.size.height = 71;
211
+ customDonutChartConfig.size.width = 60;
209
212
  customDonutChartConfig.donut.width = 5;
210
213
  customDonutChartConfig.bindto = '#donut-chart-3';
211
214
  customDonutChartConfig.data = {
@@ -226,6 +229,7 @@
226
229
 
227
230
  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
228
231
  customDonutChartConfig.size.height = 71;
232
+ customDonutChartConfig.size.width = 60;
229
233
  customDonutChartConfig.donut.width = 5;
230
234
  customDonutChartConfig.bindto = '#donut-chart-4';
231
235
  customDonutChartConfig.data = {
@@ -0,0 +1,999 @@
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 - Simple 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-group-item-header">
251
+ <div class="list-view-pf-expand">
252
+ <span class="fa fa-angle-right"></span>
253
+ </div>
254
+ <div class="list-view-pf-checkbox">
255
+ <input type="checkbox">
256
+ </div>
257
+ <div class="list-view-pf-actions">
258
+ <button class="btn btn-default">Action</button>
259
+ <div class="dropdown pull-right dropdown-kebab-pf">
260
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
261
+ <span class="fa fa-ellipsis-v"></span>
262
+ </button>
263
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
264
+ <li><a href="#">Action</a></li>
265
+ <li><a href="#">Another action</a></li>
266
+ <li><a href="#">Something else here</a></li>
267
+ <li role="separator" class="divider"></li>
268
+ <li><a href="#">Separated link</a></li>
269
+ </ul>
270
+ </div>
271
+
272
+ </div>
273
+ <div class="list-view-pf-main-info">
274
+ <div class="list-view-pf-left">
275
+ <span class="fa fa-plane list-view-pf-icon-sm"></span>
276
+ </div>
277
+ <div class="list-view-pf-body">
278
+ <div class="list-view-pf-description">
279
+ <div class="list-group-item-heading">
280
+ Event One
281
+ </div>
282
+ <div class="list-group-item-text">
283
+ The following snippet of text is <a href="#">rendered as link text</a>.
284
+ </div>
285
+ </div>
286
+ <div class="list-view-pf-additional-info">
287
+ <div class="list-view-pf-additional-info-item">
288
+ <span class="pficon pficon-screen"></span>
289
+ <strong>8</strong> Hosts
290
+ </div>
291
+ <div class="list-view-pf-additional-info-item">
292
+ <span class="pficon pficon-cluster"></span>
293
+ <strong>6</strong> Clusters
294
+ </div>
295
+ <div class="list-view-pf-additional-info-item">
296
+ <span class="pficon pficon-container-node"></span>
297
+ <strong>10</strong> Nodes
298
+ </div>
299
+ <div class="list-view-pf-additional-info-item">
300
+ <span class="pficon pficon-image"></span>
301
+ <strong>8</strong> Images
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ <div class="list-group-item-container container-fluid hidden">
308
+ <div class="close">
309
+ <span class="pficon pficon-close"></span>
310
+ </div>
311
+ <div class="row">
312
+ <div class="col-md-3">
313
+ <div id="utilizationDonutChart1" class="example-donut-chart-utilization"></div>
314
+ <script>
315
+ var c3ChartDefaults = $().c3ChartDefaults();
316
+ var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
317
+ utilizationDonutChartConfig.bindto = '#utilizationDonutChart1';
318
+ utilizationDonutChartConfig.data = {
319
+ type: "donut",
320
+ columns: [
321
+ ["Used", 60],
322
+ ["Available", 40]
323
+ ],
324
+ groups: [
325
+ ["used", "available"]
326
+ ],
327
+ order: null
328
+ };
329
+ utilizationDonutChartConfig.size = {
330
+ width: 200,
331
+ height: 171
332
+ };
333
+
334
+ utilizationDonutChartConfig.tooltip = {
335
+ contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
336
+ };
337
+ var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
338
+ $().pfSetDonutChartTitle("#utilizationDonutChart1", "60", "MHz Used");
339
+ </script>
340
+
341
+ </div>
342
+ <div class="col-md-9">
343
+ <dl class="dl-horizontal">
344
+ <dt>Host Name</dt>
345
+ <dd>Hostceph1</dd>
346
+ <dt>Device Path</dt>
347
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
348
+ <dt>Time</dt>
349
+ <dd>January 15, 2016 10:45:11 AM</dd>
350
+ <dt>Severity</dt>
351
+ <dd>Warning</dd>
352
+ <dt>Cluster</dt>
353
+ <dd>Cluster 1</dd>
354
+ </dl>
355
+ <p>
356
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
357
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
358
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
359
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
360
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
361
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
362
+ </p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ <div class="list-group-item">
368
+ <div class="list-group-item-header">
369
+ <div class="list-view-pf-expand">
370
+ <span class="fa fa-angle-right"></span>
371
+ </div>
372
+ <div class="list-view-pf-checkbox">
373
+ <input type="checkbox">
374
+ </div>
375
+ <div class="list-view-pf-actions">
376
+ <button class="btn btn-default">Action</button>
377
+ <div class="dropdown pull-right dropdown-kebab-pf">
378
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
379
+ <span class="fa fa-ellipsis-v"></span>
380
+ </button>
381
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight10">
382
+ <li><a href="#">Action</a></li>
383
+ <li><a href="#">Another action</a></li>
384
+ <li><a href="#">Something else here</a></li>
385
+ <li role="separator" class="divider"></li>
386
+ <li><a href="#">Separated link</a></li>
387
+ </ul>
388
+ </div>
389
+
390
+ </div>
391
+ <div class="list-view-pf-main-info">
392
+ <div class="list-view-pf-left">
393
+ <span class="fa fa-magic list-view-pf-icon-sm"></span>
394
+ </div>
395
+ <div class="list-view-pf-body">
396
+ <div class="list-view-pf-description">
397
+ <div class="list-group-item-heading">
398
+ Event Two
399
+ </div>
400
+ <div class="list-group-item-text">
401
+ The following snippet of text is <a href="#">rendered as link text</a>.
402
+ </div>
403
+ </div>
404
+ <div class="list-view-pf-additional-info">
405
+ <div class="list-view-pf-additional-info-item">
406
+ <span class="pficon pficon-screen"></span>
407
+ <strong>4</strong> Hosts
408
+ </div>
409
+ <div class="list-view-pf-additional-info-item">
410
+ <span class="pficon pficon-cluster"></span>
411
+ <strong>2</strong> Clusters
412
+ </div>
413
+ <div class="list-view-pf-additional-info-item">
414
+ <span class="pficon pficon-container-node"></span>
415
+ <strong>11</strong> Nodes
416
+ </div>
417
+ <div class="list-view-pf-additional-info-item">
418
+ <span class="pficon pficon-image"></span>
419
+ <strong>6</strong> Images
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ <div class="list-group-item-container container-fluid hidden">
426
+ <div class="close">
427
+ <span class="pficon pficon-close"></span>
428
+ </div>
429
+ <div class="row">
430
+ <div class="col-md-3">
431
+ <div id="utilizationDonutChart2" class="example-donut-chart-utilization"></div>
432
+ <script>
433
+ var c3ChartDefaults = $().c3ChartDefaults();
434
+ var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
435
+ utilizationDonutChartConfig.bindto = '#utilizationDonutChart2';
436
+ utilizationDonutChartConfig.data = {
437
+ type: "donut",
438
+ columns: [
439
+ ["Used", 60],
440
+ ["Available", 40]
441
+ ],
442
+ groups: [
443
+ ["used", "available"]
444
+ ],
445
+ order: null
446
+ };
447
+ utilizationDonutChartConfig.size = {
448
+ width: 200,
449
+ height: 171
450
+ };
451
+
452
+ utilizationDonutChartConfig.tooltip = {
453
+ contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
454
+ };
455
+ var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
456
+ $().pfSetDonutChartTitle("#utilizationDonutChart2", "60", "MHz Used");
457
+ </script>
458
+
459
+ </div>
460
+ <div class="col-md-9">
461
+ <dl class="dl-horizontal">
462
+ <dt>Host Name</dt>
463
+ <dd>Hostceph1</dd>
464
+ <dt>Device Path</dt>
465
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
466
+ <dt>Time</dt>
467
+ <dd>January 15, 2016 10:45:11 AM</dd>
468
+ <dt>Severity</dt>
469
+ <dd>Warning</dd>
470
+ <dt>Cluster</dt>
471
+ <dd>Cluster 1</dd>
472
+ </dl>
473
+ <p>
474
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
475
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
476
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
477
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
478
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
479
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
480
+ </p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ <div class="list-group-item">
486
+ <div class="list-group-item-header">
487
+ <div class="list-view-pf-expand">
488
+ <span class="fa fa-angle-right"></span>
489
+ </div>
490
+ <div class="list-view-pf-checkbox">
491
+ <input type="checkbox">
492
+ </div>
493
+ <div class="list-view-pf-actions">
494
+ <button class="btn btn-default">Action</button>
495
+ <div class="dropdown pull-right dropdown-kebab-pf">
496
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
497
+ <span class="fa fa-ellipsis-v"></span>
498
+ </button>
499
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight11">
500
+ <li><a href="#">Action</a></li>
501
+ <li><a href="#">Another action</a></li>
502
+ <li><a href="#">Something else here</a></li>
503
+ <li role="separator" class="divider"></li>
504
+ <li><a href="#">Separated link</a></li>
505
+ </ul>
506
+ </div>
507
+
508
+ </div>
509
+ <div class="list-view-pf-main-info">
510
+ <div class="list-view-pf-left">
511
+ <span class="fa fa-gamepad list-view-pf-icon-sm"></span>
512
+ </div>
513
+ <div class="list-view-pf-body">
514
+ <div class="list-view-pf-description">
515
+ <div class="list-group-item-heading">
516
+ Event Three
517
+ </div>
518
+ <div class="list-group-item-text">
519
+ The following snippet of text is <a href="#">rendered as link text</a>.
520
+ </div>
521
+ </div>
522
+ <div class="list-view-pf-additional-info">
523
+ <div class="list-view-pf-additional-info-item">
524
+ <span class="pficon pficon-screen"></span>
525
+ <strong>4</strong> Hosts
526
+ </div>
527
+ <div class="list-view-pf-additional-info-item">
528
+ <span class="pficon pficon-cluster"></span>
529
+ <strong>2</strong> Clusters
530
+ </div>
531
+ <div class="list-view-pf-additional-info-item">
532
+ <span class="pficon pficon-container-node"></span>
533
+ <strong>10</strong> Nodes
534
+ </div>
535
+ <div class="list-view-pf-additional-info-item">
536
+ <span class="pficon pficon-image"></span>
537
+ <strong>6</strong> Images
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ <div class="list-group-item-container container-fluid hidden">
544
+ <div class="close">
545
+ <span class="pficon pficon-close"></span>
546
+ </div>
547
+ <div class="row">
548
+ <div class="col-md-3">
549
+ <div id="utilizationDonutChart3" class="example-donut-chart-utilization"></div>
550
+ <script>
551
+ var c3ChartDefaults = $().c3ChartDefaults();
552
+ var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
553
+ utilizationDonutChartConfig.bindto = '#utilizationDonutChart3';
554
+ utilizationDonutChartConfig.data = {
555
+ type: "donut",
556
+ columns: [
557
+ ["Used", 60],
558
+ ["Available", 40]
559
+ ],
560
+ groups: [
561
+ ["used", "available"]
562
+ ],
563
+ order: null
564
+ };
565
+ utilizationDonutChartConfig.size = {
566
+ width: 200,
567
+ height: 171
568
+ };
569
+
570
+ utilizationDonutChartConfig.tooltip = {
571
+ contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
572
+ };
573
+ var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
574
+ $().pfSetDonutChartTitle("#utilizationDonutChart3", "60", "MHz Used");
575
+ </script>
576
+
577
+ </div>
578
+ <div class="col-md-9">
579
+ <dl class="dl-horizontal">
580
+ <dt>Host Name</dt>
581
+ <dd>Hostceph1</dd>
582
+ <dt>Device Path</dt>
583
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
584
+ <dt>Time</dt>
585
+ <dd>January 15, 2016 10:45:11 AM</dd>
586
+ <dt>Severity</dt>
587
+ <dd>Warning</dd>
588
+ <dt>Cluster</dt>
589
+ <dd>Cluster 1</dd>
590
+ </dl>
591
+ <p>
592
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
593
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
594
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
595
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
596
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
597
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
598
+ </p>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ <div class="list-group-item">
604
+ <div class="list-group-item-header">
605
+ <div class="list-view-pf-expand">
606
+ <span class="fa fa-angle-right"></span>
607
+ </div>
608
+ <div class="list-view-pf-checkbox">
609
+ <input type="checkbox">
610
+ </div>
611
+ <div class="list-view-pf-actions">
612
+ <button class="btn btn-default">Action</button>
613
+ <div class="dropdown pull-right dropdown-kebab-pf">
614
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
615
+ <span class="fa fa-ellipsis-v"></span>
616
+ </button>
617
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight12">
618
+ <li><a href="#">Action</a></li>
619
+ <li><a href="#">Another action</a></li>
620
+ <li><a href="#">Something else here</a></li>
621
+ <li role="separator" class="divider"></li>
622
+ <li><a href="#">Separated link</a></li>
623
+ </ul>
624
+ </div>
625
+
626
+ </div>
627
+ <div class="list-view-pf-main-info">
628
+ <div class="list-view-pf-left">
629
+ <span class="fa fa-linux list-view-pf-icon-sm"></span>
630
+ </div>
631
+ <div class="list-view-pf-body">
632
+ <div class="list-view-pf-description">
633
+ <div class="list-group-item-heading">
634
+ Event Four
635
+ </div>
636
+ <div class="list-group-item-text">
637
+ The following snippet of text is <a href="#">rendered as link text</a>.
638
+ </div>
639
+ </div>
640
+ <div class="list-view-pf-additional-info">
641
+ <div class="list-view-pf-additional-info-item">
642
+ <span class="pficon pficon-screen"></span>
643
+ <strong>4</strong> Hosts
644
+ </div>
645
+ <div class="list-view-pf-additional-info-item">
646
+ <span class="pficon pficon-cluster"></span>
647
+ <strong>2</strong> Clusters
648
+ </div>
649
+ <div class="list-view-pf-additional-info-item">
650
+ <span class="pficon pficon-container-node"></span>
651
+ <strong>10</strong> Nodes
652
+ </div>
653
+ <div class="list-view-pf-additional-info-item">
654
+ <span class="pficon pficon-image"></span>
655
+ <strong>6</strong> Images
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ <div class="list-group-item-container container-fluid hidden">
662
+ <div class="close">
663
+ <span class="pficon pficon-close"></span>
664
+ </div>
665
+ <div class="row">
666
+ <div class="col-md-3">
667
+ <div id="utilizationDonutChart4" class="example-donut-chart-utilization"></div>
668
+ <script>
669
+ var c3ChartDefaults = $().c3ChartDefaults();
670
+ var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
671
+ utilizationDonutChartConfig.bindto = '#utilizationDonutChart4';
672
+ utilizationDonutChartConfig.data = {
673
+ type: "donut",
674
+ columns: [
675
+ ["Used", 60],
676
+ ["Available", 40]
677
+ ],
678
+ groups: [
679
+ ["used", "available"]
680
+ ],
681
+ order: null
682
+ };
683
+ utilizationDonutChartConfig.size = {
684
+ width: 200,
685
+ height: 171
686
+ };
687
+
688
+ utilizationDonutChartConfig.tooltip = {
689
+ contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
690
+ };
691
+ var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
692
+ $().pfSetDonutChartTitle("#utilizationDonutChart4", "60", "MHz Used");
693
+ </script>
694
+
695
+ </div>
696
+ <div class="col-md-9">
697
+ <dl class="dl-horizontal">
698
+ <dt>Host Name</dt>
699
+ <dd>Hostceph1</dd>
700
+ <dt>Device Path</dt>
701
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
702
+ <dt>Time</dt>
703
+ <dd>January 15, 2016 10:45:11 AM</dd>
704
+ <dt>Severity</dt>
705
+ <dd>Warning</dd>
706
+ <dt>Cluster</dt>
707
+ <dd>Cluster 1</dd>
708
+ </dl>
709
+ <p>
710
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
711
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
712
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
713
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
714
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
715
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
716
+ </p>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ <div class="list-group-item">
722
+ <div class="list-group-item-header">
723
+ <div class="list-view-pf-expand">
724
+ <span class="fa fa-angle-right"></span>
725
+ </div>
726
+ <div class="list-view-pf-checkbox">
727
+ <input type="checkbox">
728
+ </div>
729
+ <div class="list-view-pf-actions">
730
+ <button class="btn btn-default">Action</button>
731
+ <div class="dropdown pull-right dropdown-kebab-pf">
732
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
733
+ <span class="fa fa-ellipsis-v"></span>
734
+ </button>
735
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight13">
736
+ <li><a href="#">Action</a></li>
737
+ <li><a href="#">Another action</a></li>
738
+ <li><a href="#">Something else here</a></li>
739
+ <li role="separator" class="divider"></li>
740
+ <li><a href="#">Separated link</a></li>
741
+ </ul>
742
+ </div>
743
+
744
+ </div>
745
+ <div class="list-view-pf-main-info">
746
+ <div class="list-view-pf-left">
747
+ <span class="fa fa-briefcase list-view-pf-icon-sm"></span>
748
+ </div>
749
+ <div class="list-view-pf-body">
750
+ <div class="list-view-pf-description">
751
+ <div class="list-group-item-heading">
752
+ Event Five
753
+ </div>
754
+ <div class="list-group-item-text">
755
+ The following snippet of text is <a href="#">rendered as link text</a>.
756
+ </div>
757
+ </div>
758
+ <div class="list-view-pf-additional-info">
759
+ <div class="list-view-pf-additional-info-item">
760
+ <span class="pficon pficon-screen"></span>
761
+ <strong>4</strong> Hosts
762
+ </div>
763
+ <div class="list-view-pf-additional-info-item">
764
+ <span class="pficon pficon-cluster"></span>
765
+ <strong>2</strong> Clusters
766
+ </div>
767
+ <div class="list-view-pf-additional-info-item">
768
+ <span class="pficon pficon-container-node"></span>
769
+ <strong>10</strong> Nodes
770
+ </div>
771
+ <div class="list-view-pf-additional-info-item">
772
+ <span class="pficon pficon-image"></span>
773
+ <strong>6</strong> Images
774
+ </div>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ <div class="list-group-item-container container-fluid hidden">
780
+ <div class="close">
781
+ <span class="pficon pficon-close"></span>
782
+ </div>
783
+ <div class="row">
784
+ <div class="col-md-3">
785
+ <div id="utilizationDonutChart5" class="example-donut-chart-utilization"></div>
786
+ <script>
787
+ var c3ChartDefaults = $().c3ChartDefaults();
788
+ var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
789
+ utilizationDonutChartConfig.bindto = '#utilizationDonutChart5';
790
+ utilizationDonutChartConfig.data = {
791
+ type: "donut",
792
+ columns: [
793
+ ["Used", 60],
794
+ ["Available", 40]
795
+ ],
796
+ groups: [
797
+ ["used", "available"]
798
+ ],
799
+ order: null
800
+ };
801
+ utilizationDonutChartConfig.size = {
802
+ width: 200,
803
+ height: 171
804
+ };
805
+
806
+ utilizationDonutChartConfig.tooltip = {
807
+ contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
808
+ };
809
+ var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
810
+ $().pfSetDonutChartTitle("#utilizationDonutChart5", "60", "MHz Used");
811
+ </script>
812
+
813
+ </div>
814
+ <div class="col-md-9">
815
+ <dl class="dl-horizontal">
816
+ <dt>Host Name</dt>
817
+ <dd>Hostceph1</dd>
818
+ <dt>Device Path</dt>
819
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
820
+ <dt>Time</dt>
821
+ <dd>January 15, 2016 10:45:11 AM</dd>
822
+ <dt>Severity</dt>
823
+ <dd>Warning</dd>
824
+ <dt>Cluster</dt>
825
+ <dd>Cluster 1</dd>
826
+ </dl>
827
+ <p>
828
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
829
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
830
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
831
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
832
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
833
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
834
+ </p>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ <div class="list-group-item">
840
+ <div class="list-group-item-header">
841
+ <div class="list-view-pf-expand">
842
+ <span class="fa fa-angle-right"></span>
843
+ </div>
844
+ <div class="list-view-pf-checkbox">
845
+ <input type="checkbox">
846
+ </div>
847
+ <div class="list-view-pf-actions">
848
+ <button class="btn btn-default">Action</button>
849
+ <div class="dropdown pull-right dropdown-kebab-pf">
850
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
851
+ <span class="fa fa-ellipsis-v"></span>
852
+ </button>
853
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight14">
854
+ <li><a href="#">Action</a></li>
855
+ <li><a href="#">Another action</a></li>
856
+ <li><a href="#">Something else here</a></li>
857
+ <li role="separator" class="divider"></li>
858
+ <li><a href="#">Separated link</a></li>
859
+ </ul>
860
+ </div>
861
+
862
+ </div>
863
+ <div class="list-view-pf-main-info">
864
+ <div class="list-view-pf-left">
865
+ <span class="fa fa-coffee list-view-pf-icon-sm"></span>
866
+ </div>
867
+ <div class="list-view-pf-body">
868
+ <div class="list-view-pf-description">
869
+ <div class="list-group-item-heading">
870
+ Event Six
871
+ </div>
872
+ <div class="list-group-item-text">
873
+ The following snippet of text is <a href="#">rendered as link text</a>.
874
+ </div>
875
+ </div>
876
+ <div class="list-view-pf-additional-info">
877
+ <div class="list-view-pf-additional-info-item">
878
+ <span class="pficon pficon-screen"></span>
879
+ <strong>4</strong> Hosts
880
+ </div>
881
+ <div class="list-view-pf-additional-info-item">
882
+ <span class="pficon pficon-cluster"></span>
883
+ <strong>2</strong> Clusters
884
+ </div>
885
+ <div class="list-view-pf-additional-info-item">
886
+ <span class="pficon pficon-container-node"></span>
887
+ <strong>10</strong> Nodes
888
+ </div>
889
+ <div class="list-view-pf-additional-info-item">
890
+ <span class="pficon pficon-image"></span>
891
+ <strong>6</strong> Images
892
+ </div>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+ <div class="list-group-item-container container-fluid hidden">
898
+ <div class="close">
899
+ <span class="pficon pficon-close"></span>
900
+ </div>
901
+ <div class="row">
902
+ <div class="col-md-3">
903
+ <div id="utilizationDonutChart6" class="example-donut-chart-utilization"></div>
904
+ <script>
905
+ var c3ChartDefaults = $().c3ChartDefaults();
906
+ var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
907
+ utilizationDonutChartConfig.bindto = '#utilizationDonutChart6';
908
+ utilizationDonutChartConfig.data = {
909
+ type: "donut",
910
+ columns: [
911
+ ["Used", 60],
912
+ ["Available", 40]
913
+ ],
914
+ groups: [
915
+ ["used", "available"]
916
+ ],
917
+ order: null
918
+ };
919
+ utilizationDonutChartConfig.size = {
920
+ width: 200,
921
+ height: 171
922
+ };
923
+
924
+ utilizationDonutChartConfig.tooltip = {
925
+ contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
926
+ };
927
+ var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
928
+ $().pfSetDonutChartTitle("#utilizationDonutChart6", "60", "MHz Used");
929
+ </script>
930
+
931
+ </div>
932
+ <div class="col-md-9">
933
+ <dl class="dl-horizontal">
934
+ <dt>Host Name</dt>
935
+ <dd>Hostceph1</dd>
936
+ <dt>Device Path</dt>
937
+ <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
938
+ <dt>Time</dt>
939
+ <dd>January 15, 2016 10:45:11 AM</dd>
940
+ <dt>Severity</dt>
941
+ <dd>Warning</dd>
942
+ <dt>Cluster</dt>
943
+ <dd>Cluster 1</dd>
944
+ </dl>
945
+ <p>
946
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
947
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
948
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
949
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
950
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
951
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
952
+ </p>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ </div>
957
+ </div>
958
+ <script>
959
+ $(document).ready(function () {
960
+ // Row Checkbox Selection
961
+ $("input[type='checkbox']").change(function (e) {
962
+ if ($(this).is(":checked")) {
963
+ $(this).closest('.list-group-item').addClass("active");
964
+ } else {
965
+ $(this).closest('.list-group-item').removeClass("active");
966
+ }
967
+ });
968
+ // toggle dropdown menu
969
+ $('.list-view-pf-actions').on('show.bs.dropdown', function () {
970
+ var $this = $(this);
971
+ var $dropdown = $this.find('.dropdown');
972
+ var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
973
+ $dropdown.toggleClass('dropup', space < 10);
974
+ });
975
+
976
+ // click the list-view heading then expand a row
977
+ $(".list-group-item-header").click(function(event){
978
+ if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
979
+ $(this).find(".fa-angle-right").toggleClass("fa-angle-down")
980
+ .end().parent().toggleClass("list-view-pf-expand-active")
981
+ .find(".list-group-item-container").toggleClass("hidden");
982
+ } else {
983
+ }
984
+ })
985
+
986
+ // click the close button, hide the expand row and remove the active status
987
+ $(".list-group-item-container .close").on("click", function (){
988
+ $(this).parent().addClass("hidden")
989
+ .parent().removeClass("list-view-pf-expand-active")
990
+ .find(".fa-angle-right").removeClass("fa-angle-down");
991
+ })
992
+
993
+ });
994
+ </script>
995
+
996
+ </div>
997
+
998
+ </body>
999
+ </html>