patternfly-sass 3.3.3 → 3.3.4
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.
- checksums.yaml +4 -4
- data/assets/javascripts/patternfly.js +5 -5
- data/assets/javascripts/patternfly.min.js +1 -1
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/area-charts.html +50 -40
- data/spec/html/bar-charts.html +192 -131
- data/spec/html/cards.html +437 -418
- data/spec/html/donut-charts.html +165 -131
- data/spec/html/index.html +3 -0
- data/spec/html/layout-alt-fixed-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer.html +437 -418
- data/spec/html/layout-alt-fixed.html +437 -418
- data/spec/html/line-charts.html +120 -86
- data/spec/html/list-view.html +128 -95
- data/spec/html/pie-charts.html +107 -78
- data/spec/html/utilization-bar-charts.html +69 -0
- data/spec/html/vertical-navigation-without-icons.html +205 -205
- data/spec/html/vertical-navigation.html +205 -205
- metadata +4 -2
data/spec/html/cards.html
CHANGED
|
@@ -142,41 +142,47 @@
|
|
|
142
142
|
<div class="row row-cards-pf">
|
|
143
143
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
144
144
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
145
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
145
146
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
147
|
+
<h2 class="card-pf-title">
|
|
148
|
+
<span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
149
|
+
</h2>
|
|
150
|
+
<div class="card-pf-body">
|
|
151
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
152
|
+
<span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
|
|
153
|
+
</p>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
155
157
|
</div>
|
|
156
158
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
159
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
157
160
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
161
|
+
<h2 class="card-pf-title">
|
|
162
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
|
|
163
|
+
</h2>
|
|
164
|
+
<div class="card-pf-body">
|
|
165
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
166
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
167
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
|
|
168
|
+
</p>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
168
172
|
</div>
|
|
169
173
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
174
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
170
175
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
176
|
+
<h2 class="card-pf-title">
|
|
177
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
|
|
178
|
+
</h2>
|
|
179
|
+
<div class="card-pf-body">
|
|
180
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
181
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
182
|
+
</p>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
180
186
|
</div>
|
|
181
187
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
182
188
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
@@ -218,47 +224,53 @@
|
|
|
218
224
|
<div class="row row-cards-pf">
|
|
219
225
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
220
226
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
227
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
221
228
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
229
|
+
<h2 class="card-pf-title">
|
|
230
|
+
<span class="fa fa-rebel"></span>
|
|
231
|
+
<span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
232
|
+
</h2>
|
|
233
|
+
<div class="card-pf-body">
|
|
234
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
235
|
+
<span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
|
|
236
|
+
</p>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
232
240
|
</div>
|
|
233
241
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
242
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
234
243
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
244
|
+
<h2 class="card-pf-title">
|
|
245
|
+
<span class="fa fa-paper-plane"></span>
|
|
246
|
+
<a href="#">
|
|
247
|
+
<span class="card-pf-aggregate-status-count">20</span> Amet
|
|
248
|
+
</a>
|
|
249
|
+
</h2>
|
|
250
|
+
<div class="card-pf-body">
|
|
251
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
252
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
253
|
+
</p>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
247
257
|
</div>
|
|
248
258
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
259
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
249
260
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
261
|
+
<h2 class="card-pf-title">
|
|
262
|
+
<span class="pficon pficon-cluster"></span>
|
|
263
|
+
<a href="#">
|
|
264
|
+
<span class="card-pf-aggregate-status-count">9</span> Adipiscing
|
|
265
|
+
</a>
|
|
266
|
+
</h2>
|
|
267
|
+
<div class="card-pf-body">
|
|
268
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
269
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
270
|
+
</p>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
262
274
|
</div>
|
|
263
275
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
264
276
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
@@ -307,121 +319,124 @@
|
|
|
307
319
|
</div>
|
|
308
320
|
</div>
|
|
309
321
|
<div class="row row-cards-pf">
|
|
310
|
-
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
311
322
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
323
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
312
324
|
<div class="card-pf">
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
325
|
+
<div class="card-pf-heading">
|
|
326
|
+
<h2 class="card-pf-title">
|
|
327
|
+
Top Utilized Clusters
|
|
328
|
+
</h2>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="card-pf-body">
|
|
331
|
+
<div class="progress-description">
|
|
332
|
+
RHOS6-Controller
|
|
333
|
+
</div>
|
|
334
|
+
<div class="progress progress-label-top-right">
|
|
335
|
+
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;" data-toggle="tooltip" title="95% Used">
|
|
336
|
+
<span><strong>190.0 of 200.0 GB</strong> Used</span>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;" data-toggle="tooltip" title="5% Available">
|
|
339
|
+
<span class="sr-only">5% Available</span>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="progress-description">
|
|
343
|
+
CFMEQE-Cluster
|
|
344
|
+
</div>
|
|
345
|
+
<div class="progress progress-label-top-right">
|
|
346
|
+
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Used">
|
|
347
|
+
<span><strong>100.0 of 200.0 GB</strong> Used</span>
|
|
348
|
+
</div>
|
|
349
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Available">
|
|
350
|
+
<span class="sr-only">50% Available</span>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
<div class="progress-description">
|
|
354
|
+
RHOS-Undercloud
|
|
355
|
+
</div>
|
|
356
|
+
<div class="progress progress-label-top-right">
|
|
357
|
+
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;" data-toggle="tooltip" title="70% Used">
|
|
358
|
+
<span><strong>140.0 of 200.0 GB</strong> Used</span>
|
|
359
|
+
</div>
|
|
360
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" data-toggle="tooltip" title="30% Available">
|
|
361
|
+
<span class="sr-only">30% Available</span>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
<div class="progress-description">
|
|
365
|
+
RHEL6-Controller
|
|
366
|
+
</div>
|
|
367
|
+
<div class="progress progress-label-top-right">
|
|
368
|
+
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="76.5" aria-valuemin="0" aria-valuemax="100" style="width: 76.5%;" data-toggle="tooltip" title="76.5% Used">
|
|
369
|
+
<span><strong>153.0 of 200.0 GB</strong> Used</span>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">
|
|
372
|
+
<span class="sr-only">23.5% Available</span>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
365
378
|
</div>
|
|
366
379
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
380
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
367
381
|
<div class="card-pf">
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
382
|
+
<div class="card-pf-heading">
|
|
383
|
+
<h2 class="card-pf-title">
|
|
384
|
+
Quotas
|
|
385
|
+
</h2>
|
|
386
|
+
</div>
|
|
387
|
+
<div class="card-pf-body">
|
|
388
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
389
|
+
<div class="progress-description">
|
|
390
|
+
CPU
|
|
391
|
+
</div>
|
|
392
|
+
<div class="progress">
|
|
393
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
|
|
394
|
+
<span><strong>115 of 460</strong> MHz</span>
|
|
395
|
+
</div>
|
|
396
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
|
|
397
|
+
<span class="sr-only">75% Available</span>
|
|
398
|
+
</div>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
402
|
+
<div class="progress-description">
|
|
403
|
+
Memory
|
|
404
|
+
</div>
|
|
405
|
+
<div class="progress">
|
|
406
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
|
|
407
|
+
<span><strong>8 of 16</strong> GB</span>
|
|
408
|
+
</div>
|
|
409
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
|
|
410
|
+
<span class="sr-only">50% Available</span>
|
|
411
|
+
</div>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
415
|
+
<div class="progress-description">
|
|
416
|
+
Pods
|
|
417
|
+
</div>
|
|
418
|
+
<div class="progress">
|
|
419
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
|
|
420
|
+
<span><strong>5 of 8</strong> Total</span>
|
|
421
|
+
</div>
|
|
422
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
|
|
423
|
+
<span class="sr-only">37.5% Available</span>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
428
|
+
<div class="progress-description">
|
|
429
|
+
Services
|
|
430
|
+
</div>
|
|
431
|
+
<div class="progress">
|
|
432
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
|
|
433
|
+
<span><strong>2 of 2</strong> Total</span>
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
425
440
|
</div>
|
|
426
441
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
427
442
|
<div class="card-pf">
|
|
@@ -485,296 +500,300 @@
|
|
|
485
500
|
</div>
|
|
486
501
|
</div><!-- /row -->
|
|
487
502
|
<div class="row row-cards-pf">
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
+
<div class="col-md-12">
|
|
504
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
505
|
+
<div class="card-pf card-pf-utilization">
|
|
506
|
+
<div class="card-pf-heading">
|
|
507
|
+
<p class="card-pf-heading-details">Last 30 days</p>
|
|
508
|
+
<h2 class="card-pf-title">
|
|
509
|
+
Utilization
|
|
510
|
+
</h2>
|
|
511
|
+
</div>
|
|
512
|
+
<div class="card-pf-body">
|
|
513
|
+
<div class="row">
|
|
514
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
515
|
+
<h3 class="card-pf-subtitle">CPU</h3>
|
|
516
|
+
<p class="card-pf-utilization-details">
|
|
517
|
+
<span class="card-pf-utilization-card-details-count">50</span>
|
|
503
518
|
<span class="card-pf-utilization-card-details-description">
|
|
504
519
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
505
520
|
<span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
|
|
506
521
|
</span>
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
522
|
+
</p>
|
|
523
|
+
<div id="chart-pf-donut-1"></div>
|
|
524
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
|
|
525
|
+
<script>
|
|
526
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
527
|
+
donutConfig.bindto = '#chart-pf-donut-1';
|
|
528
|
+
donutConfig.color = {
|
|
529
|
+
pattern: ["#cc0000","#D1D1D1"]
|
|
530
|
+
};
|
|
531
|
+
donutConfig.data = {
|
|
532
|
+
type: "donut",
|
|
533
|
+
columns: [
|
|
534
|
+
["Used", 95],
|
|
535
|
+
["Available", 5]
|
|
536
|
+
],
|
|
537
|
+
groups: [
|
|
538
|
+
["used", "available"]
|
|
539
|
+
],
|
|
540
|
+
order: null
|
|
541
|
+
};
|
|
542
|
+
donutConfig.tooltip = {
|
|
543
|
+
contents: function (d) {
|
|
544
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
545
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
546
|
+
'</span>';
|
|
547
|
+
}
|
|
548
|
+
};
|
|
534
549
|
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
550
|
+
var chart1 = c3.generate(donutConfig);
|
|
551
|
+
var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
|
|
552
|
+
donutChartTitle.text("");
|
|
553
|
+
donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
554
|
+
donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
540
555
|
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
557
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-1';
|
|
558
|
+
sparklineConfig.data = {
|
|
559
|
+
columns: [
|
|
560
|
+
['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
|
|
561
|
+
],
|
|
562
|
+
type: 'area'
|
|
563
|
+
};
|
|
564
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
565
|
+
</script>
|
|
566
|
+
</div>
|
|
567
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
568
|
+
<h3 class="card-pf-subtitle">Memory</h3>
|
|
569
|
+
<p class="card-pf-utilization-details">
|
|
570
|
+
<span class="card-pf-utilization-card-details-count">256</span>
|
|
556
571
|
<span class="card-pf-utilization-card-details-description">
|
|
557
572
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
558
573
|
<span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
|
|
559
574
|
</span>
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
575
|
+
</p>
|
|
576
|
+
<div id="chart-pf-donut-2"></div>
|
|
577
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
|
|
578
|
+
<script>
|
|
579
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
580
|
+
donutConfig.bindto = '#chart-pf-donut-2';
|
|
581
|
+
donutConfig.color = {
|
|
582
|
+
pattern: ["#3f9c35","#D1D1D1"]
|
|
583
|
+
};
|
|
584
|
+
donutConfig.data = {
|
|
585
|
+
type: "donut",
|
|
586
|
+
columns: [
|
|
587
|
+
["Used", 41],
|
|
588
|
+
["Available", 59]
|
|
589
|
+
],
|
|
590
|
+
groups: [
|
|
591
|
+
["used", "available"]
|
|
592
|
+
],
|
|
593
|
+
order: null
|
|
594
|
+
};
|
|
595
|
+
donutConfig.tooltip = {
|
|
596
|
+
contents: function (d) {
|
|
597
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
598
|
+
Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
|
|
599
|
+
'</span>';
|
|
600
|
+
}
|
|
601
|
+
};
|
|
587
602
|
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
603
|
+
var chart3 = c3.generate(donutConfig);
|
|
604
|
+
var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
|
|
605
|
+
donutChartTitle.text("");
|
|
606
|
+
donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
607
|
+
donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
593
608
|
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
610
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-2';
|
|
611
|
+
sparklineConfig.data = {
|
|
612
|
+
columns: [
|
|
613
|
+
['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
|
|
614
|
+
],
|
|
615
|
+
type: 'area'
|
|
616
|
+
};
|
|
617
|
+
var chart4 = c3.generate(sparklineConfig);
|
|
618
|
+
</script>
|
|
619
|
+
</div>
|
|
620
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
621
|
+
<h3 class="card-pf-subtitle">Network</h3>
|
|
622
|
+
<p class="card-pf-utilization-details">
|
|
623
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
609
624
|
<span class="card-pf-utilization-card-details-description">
|
|
610
625
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
611
626
|
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
612
627
|
</span>
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
628
|
+
</p>
|
|
629
|
+
<div id="chart-pf-donut-3"></div>
|
|
630
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
|
|
631
|
+
<script>
|
|
632
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
633
|
+
donutConfig.bindto = '#chart-pf-donut-3';
|
|
634
|
+
donutConfig.color = {
|
|
635
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
636
|
+
};
|
|
637
|
+
donutConfig.data = {
|
|
638
|
+
type: "donut",
|
|
639
|
+
columns: [
|
|
640
|
+
["Used", 85],
|
|
641
|
+
["Available", 15]
|
|
642
|
+
],
|
|
643
|
+
groups: [
|
|
644
|
+
["used", "available"]
|
|
645
|
+
],
|
|
646
|
+
order: null
|
|
647
|
+
};
|
|
648
|
+
donutConfig.tooltip = {
|
|
649
|
+
contents: function (d) {
|
|
650
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
651
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
652
|
+
'</span>';
|
|
653
|
+
}
|
|
654
|
+
};
|
|
640
655
|
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
656
|
+
var chart5 = c3.generate(donutConfig);
|
|
657
|
+
var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
|
|
658
|
+
donutChartTitle.text("");
|
|
659
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
660
|
+
donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
646
661
|
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
</div>
|
|
662
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
663
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-3';
|
|
664
|
+
sparklineConfig.data = {
|
|
665
|
+
columns: [
|
|
666
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
667
|
+
],
|
|
668
|
+
type: 'area'
|
|
669
|
+
};
|
|
670
|
+
var chart6 = c3.generate(sparklineConfig);
|
|
671
|
+
</script>
|
|
658
672
|
</div>
|
|
659
673
|
</div>
|
|
660
674
|
</div>
|
|
661
675
|
</div>
|
|
662
676
|
|
|
677
|
+
</div>
|
|
663
678
|
</div><!-- /row -->
|
|
664
679
|
<div class="row row-cards-pf">
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
680
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
681
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
682
|
+
<div class="card-pf card-pf-utilization">
|
|
683
|
+
<h2 class="card-pf-title">
|
|
684
|
+
Network
|
|
685
|
+
</h2>
|
|
686
|
+
<div class="card-pf-body">
|
|
687
|
+
<p class="card-pf-utilization-details">
|
|
688
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
674
689
|
<span class="card-pf-utilization-card-details-description">
|
|
675
690
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
676
691
|
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
677
692
|
</span>
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
693
|
+
</p>
|
|
694
|
+
<div id="chart-pf-donut-4"></div>
|
|
695
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
|
|
696
|
+
<script>
|
|
697
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
683
698
|
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
699
|
+
var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
|
|
700
|
+
donutConfig.bindto = '#chart-pf-donut-4';
|
|
701
|
+
donutConfig.color = {
|
|
702
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
703
|
+
};
|
|
704
|
+
donutConfig.data = {
|
|
705
|
+
type: "donut",
|
|
706
|
+
columns: [
|
|
707
|
+
["Used", 85],
|
|
708
|
+
["Available", 15]
|
|
709
|
+
],
|
|
710
|
+
groups: [
|
|
711
|
+
["used", "available"]
|
|
712
|
+
],
|
|
713
|
+
order: null
|
|
714
|
+
};
|
|
715
|
+
donutConfig.tooltip = {
|
|
716
|
+
contents: function (d) {
|
|
717
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
718
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
719
|
+
'</span>';
|
|
720
|
+
}
|
|
721
|
+
};
|
|
707
722
|
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
723
|
+
var chart1 = c3.generate(donutConfig);
|
|
724
|
+
var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
|
|
725
|
+
donutChartTitle.text("");
|
|
726
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
727
|
+
donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
713
728
|
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
729
|
+
var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
|
|
730
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-4';
|
|
731
|
+
sparklineConfig.data = {
|
|
732
|
+
columns: [
|
|
733
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
734
|
+
],
|
|
735
|
+
type: 'area'
|
|
736
|
+
};
|
|
722
737
|
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
</div>
|
|
738
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
739
|
+
</script>
|
|
726
740
|
</div>
|
|
727
741
|
</div>
|
|
728
742
|
|
|
743
|
+
</div>
|
|
729
744
|
</div><!-- /row -->
|
|
730
745
|
<div class="row row-cards-pf">
|
|
731
746
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
732
747
|
<div class="col-xs-12 col-sm-6 col-md-5">
|
|
748
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
733
749
|
<div class="card-pf">
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
750
|
+
<div class="card-pf-heading">
|
|
751
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
752
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
753
|
+
Last 30 Days <span class="caret"></span>
|
|
754
|
+
</button>
|
|
755
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
756
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
757
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
758
|
+
</ul>
|
|
759
|
+
</div>
|
|
760
|
+
<h2 class="card-pf-title">
|
|
761
|
+
Card Title
|
|
762
|
+
</h2>
|
|
763
|
+
</div>
|
|
764
|
+
<div class="card-pf-body">
|
|
765
|
+
<p>[card contents]</p>
|
|
766
|
+
</div>
|
|
767
|
+
</div>
|
|
768
|
+
|
|
752
769
|
</div>
|
|
753
770
|
<div class="col-xs-12 col-sm-6 col-md-7">
|
|
771
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
754
772
|
<div class="card-pf">
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
773
|
+
<h2 class="card-pf-title">
|
|
774
|
+
Card Title
|
|
775
|
+
</h2>
|
|
776
|
+
<div class="card-pf-body">
|
|
777
|
+
<p>[card contents]</p>
|
|
778
|
+
</div>
|
|
779
|
+
<div class="card-pf-footer">
|
|
780
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
781
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
782
|
+
Last 30 Days <span class="caret"></span>
|
|
783
|
+
</button>
|
|
784
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
785
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
786
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
787
|
+
</ul>
|
|
788
|
+
</div>
|
|
789
|
+
<p>
|
|
790
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
791
|
+
<span class="pficon pficon-add-circle-o"></span>Add New Cluster
|
|
792
|
+
</a>
|
|
793
|
+
</p>
|
|
794
|
+
</div>
|
|
795
|
+
</div>
|
|
796
|
+
|
|
778
797
|
</div>
|
|
779
798
|
</div><!-- /row -->
|
|
780
799
|
<div class="row row-cards-pf">
|