patternfly-sass 2.4.0 → 2.5.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.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/assets/stylesheets/patternfly/_alerts.scss +20 -9
- data/assets/stylesheets/patternfly/_cards.scss +80 -2
- data/assets/stylesheets/patternfly/_ext-bootstrap-datepicker.scss +1 -1
- data/assets/stylesheets/patternfly/_ext-bootstrap-select.scss +19 -10
- data/assets/stylesheets/patternfly/_progress-bars.scss +46 -10
- data/assets/stylesheets/patternfly/_spinner.scss +19 -0
- data/assets/stylesheets/patternfly/_variables.scss +12 -7
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/package.json +1 -1
- data/patternfly-sass.gemspec +1 -1
- data/spec/html/alerts.html +1 -0
- data/spec/html/cards.html +659 -22
- data/spec/html/charts.html +11 -10
- data/spec/html/dist/css/patternfly-additions.css +95 -8
- data/spec/html/dist/css/patternfly-additions.css.map +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
- data/spec/html/dist/css/patternfly.css +64 -19
- data/spec/html/dist/css/patternfly.css.map +1 -1
- data/spec/html/dist/css/patternfly.min.css +2 -2
- data/spec/html/dist/css/patternfly.min.css.map +1 -1
- data/spec/html/layout-alt-fixed-inner-scroll.html +659 -22
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +659 -22
- data/spec/html/layout-alt-fixed-with-footer.html +659 -22
- data/spec/html/layout-alt-fixed.html +659 -22
- data/spec/html/popovers.html +10 -9
- data/spec/html/progress-bars.html +61 -10
- data/spec/html/spinner.html +5 -0
- data/spec/html/tooltip.html +4 -3
- metadata +4 -4
data/bower.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "patternfly-sass",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"homepage": "https://www.patternfly.org",
|
|
6
6
|
"authors": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"bootstrap-touchspin": "~3.0.3",
|
|
38
38
|
"bootstrap-treeview": "~1.2.0",
|
|
39
39
|
"c3": "~0.4.10",
|
|
40
|
-
"datatables": "~1.10.
|
|
40
|
+
"datatables": "~1.10.9",
|
|
41
41
|
"datatables-colreorder": "~1.1.3",
|
|
42
42
|
"datatables-colvis": "~1.1.2",
|
|
43
43
|
"font-awesome": "~4.3.0",
|
data/package.json
CHANGED
data/patternfly-sass.gemspec
CHANGED
|
@@ -23,7 +23,7 @@ Gem::Specification.new do |s|
|
|
|
23
23
|
s.add_development_dependency 'rails-assets-bootstrap-touchspin', '~> 3.0.3'
|
|
24
24
|
s.add_development_dependency 'rails-assets-bootstrap-treeview', '~> 1.2.0'
|
|
25
25
|
s.add_development_dependency 'rails-assets-c3', '~> 0.4.10'
|
|
26
|
-
s.add_development_dependency 'rails-assets-datatables', '~> 1.10.
|
|
26
|
+
s.add_development_dependency 'rails-assets-datatables', '~> 1.10.9'
|
|
27
27
|
s.add_development_dependency 'rails-assets-datatables-colreorder', '~> 1.1.3'
|
|
28
28
|
s.add_development_dependency 'rails-assets-datatables-colvis', '~> 1.1.2'
|
|
29
29
|
s.add_development_dependency 'rails-assets-google-code-prettify', '~> 1.0.4'
|
data/spec/html/alerts.html
CHANGED
|
@@ -83,6 +83,7 @@
|
|
|
83
83
|
<span class="pficon pficon-info"></span>
|
|
84
84
|
<strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>.
|
|
85
85
|
</div>
|
|
86
|
+
<hr>
|
|
86
87
|
<div class="alert alert-success">
|
|
87
88
|
<button class="btn btn-default pull-right" type="submit">Button</button>
|
|
88
89
|
<span class="pficon pficon-ok"></span>
|
data/spec/html/cards.html
CHANGED
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
<script src="../components/jquery/dist/jquery.min.js"></script>
|
|
27
27
|
<script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
28
28
|
<script src="../components/matchHeight/jquery.matchHeight-min.js"></script>
|
|
29
|
+
<script src="../components/c3/c3.min.js"></script>
|
|
30
|
+
<script src="../components/d3/d3.min.js"></script>
|
|
29
31
|
<script src="../dist/js/patternfly.min.js"></script>
|
|
30
32
|
</head>
|
|
31
33
|
<body class="cards-pf">
|
|
@@ -267,7 +269,7 @@
|
|
|
267
269
|
<a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
|
|
268
270
|
</p>
|
|
269
271
|
</div>
|
|
270
|
-
|
|
272
|
+
</div>
|
|
271
273
|
</div>
|
|
272
274
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
273
275
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
@@ -284,53 +286,625 @@
|
|
|
284
286
|
</div>
|
|
285
287
|
</div>
|
|
286
288
|
</div>
|
|
287
|
-
</div
|
|
289
|
+
</div>
|
|
288
290
|
<div class="row row-cards-pf">
|
|
289
291
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
290
|
-
<div class="col-xs-
|
|
292
|
+
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
291
293
|
<div class="card-pf">
|
|
292
|
-
<
|
|
293
|
-
|
|
294
|
-
|
|
294
|
+
<div class="card-pf-heading">
|
|
295
|
+
<h2 class="card-pf-title">
|
|
296
|
+
Top Utilized Clusters
|
|
297
|
+
</h2>
|
|
298
|
+
</div>
|
|
295
299
|
<div class="card-pf-body">
|
|
296
|
-
<
|
|
300
|
+
<div class="progress-description">
|
|
301
|
+
RHOS6-Controller
|
|
302
|
+
</div>
|
|
303
|
+
<div class="progress progress-label-top-right">
|
|
304
|
+
<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">
|
|
305
|
+
<span><strong>190.0 of 200.0 GB</strong> Used</span>
|
|
306
|
+
</div>
|
|
307
|
+
<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">
|
|
308
|
+
<span class="sr-only">5% Available</span>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="progress-description">
|
|
312
|
+
CFMEQE-Cluster
|
|
313
|
+
</div>
|
|
314
|
+
<div class="progress progress-label-top-right">
|
|
315
|
+
<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">
|
|
316
|
+
<span><strong>100.0 of 200.0 GB</strong> Used</span>
|
|
317
|
+
</div>
|
|
318
|
+
<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">
|
|
319
|
+
<span class="sr-only">50% Available</span>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="progress-description">
|
|
323
|
+
RHOS-Undercloud
|
|
324
|
+
</div>
|
|
325
|
+
<div class="progress progress-label-top-right">
|
|
326
|
+
<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">
|
|
327
|
+
<span><strong>140.0 of 200.0 GB</strong> Used</span>
|
|
328
|
+
</div>
|
|
329
|
+
<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">
|
|
330
|
+
<span class="sr-only">30% Available</span>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="progress-description">
|
|
334
|
+
RHEL6-Controller
|
|
335
|
+
</div>
|
|
336
|
+
<div class="progress progress-label-top-right">
|
|
337
|
+
<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">
|
|
338
|
+
<span><strong>153.0 of 200.0 GB</strong> Used</span>
|
|
339
|
+
</div>
|
|
340
|
+
<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">
|
|
341
|
+
<span class="sr-only">23.5% Available</span>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
297
344
|
</div>
|
|
298
|
-
|
|
299
|
-
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
348
|
+
<div class="card-pf">
|
|
349
|
+
<div class="card-pf-heading">
|
|
350
|
+
<h2 class="card-pf-title">
|
|
351
|
+
Quotas
|
|
352
|
+
</h2>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="card-pf-body">
|
|
355
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
356
|
+
<div class="progress-description">
|
|
357
|
+
CPU
|
|
358
|
+
</div>
|
|
359
|
+
<div class="progress">
|
|
360
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
|
|
361
|
+
<span><strong>115 of 460</strong> MHz</span>
|
|
362
|
+
</div>
|
|
363
|
+
<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">
|
|
364
|
+
<span class="sr-only">75% Available</span>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
369
|
+
<div class="progress-description">
|
|
370
|
+
Memory
|
|
371
|
+
</div>
|
|
372
|
+
<div class="progress">
|
|
373
|
+
<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">
|
|
374
|
+
<span><strong>8 of 16</strong> GB</span>
|
|
375
|
+
</div>
|
|
376
|
+
<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">
|
|
377
|
+
<span class="sr-only">50% Available</span>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
382
|
+
<div class="progress-description">
|
|
383
|
+
Pods
|
|
384
|
+
</div>
|
|
385
|
+
<div class="progress">
|
|
386
|
+
<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">
|
|
387
|
+
<span><strong>5 of 8</strong> Total</span>
|
|
388
|
+
</div>
|
|
389
|
+
<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">
|
|
390
|
+
<span class="sr-only">37.5% Available</span>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
395
|
+
<div class="progress-description">
|
|
396
|
+
Services
|
|
397
|
+
</div>
|
|
398
|
+
<div class="progress">
|
|
399
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
|
|
400
|
+
<span><strong>2 of 2</strong> Total</span>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
300
404
|
</div>
|
|
301
405
|
</div>
|
|
302
406
|
</div>
|
|
303
|
-
<div class="col-xs-
|
|
407
|
+
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
304
408
|
<div class="card-pf">
|
|
305
|
-
<
|
|
306
|
-
|
|
307
|
-
|
|
409
|
+
<div class="card-pf-heading">
|
|
410
|
+
<h2 class="card-pf-title">
|
|
411
|
+
Quotas
|
|
412
|
+
</h2>
|
|
413
|
+
</div>
|
|
308
414
|
<div class="card-pf-body">
|
|
309
|
-
<
|
|
415
|
+
<div class="progress-container progress-description-left">
|
|
416
|
+
<div class="progress-description">
|
|
417
|
+
CPU
|
|
418
|
+
</div>
|
|
419
|
+
<div class="progress">
|
|
420
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
|
|
421
|
+
<span class="sr-only">25% Used</span>
|
|
422
|
+
</div>
|
|
423
|
+
<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">
|
|
424
|
+
<span class="sr-only">75% Available</span>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
</div>
|
|
428
|
+
<div class="progress-container progress-description-left">
|
|
429
|
+
<div class="progress-description">
|
|
430
|
+
Memory
|
|
431
|
+
</div>
|
|
432
|
+
<div class="progress">
|
|
433
|
+
<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">
|
|
434
|
+
<span class="sr-only">50% Used</span>
|
|
435
|
+
</div>
|
|
436
|
+
<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">
|
|
437
|
+
<span class="sr-only">50% Available</span>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
<div class="progress-container progress-description-left">
|
|
442
|
+
<div class="progress-description">
|
|
443
|
+
Pods
|
|
444
|
+
</div>
|
|
445
|
+
<div class="progress">
|
|
446
|
+
<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">
|
|
447
|
+
<span class="sr-only">62.5% Used</span>
|
|
448
|
+
</div>
|
|
449
|
+
<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">
|
|
450
|
+
<span class="sr-only">37.5% Available</span>
|
|
451
|
+
</div>
|
|
452
|
+
</div>
|
|
453
|
+
</div>
|
|
454
|
+
<div class="progress-container progress-description-left">
|
|
455
|
+
<div class="progress-description">
|
|
456
|
+
Services
|
|
457
|
+
</div>
|
|
458
|
+
<div class="progress">
|
|
459
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
|
|
460
|
+
<span class="sr-only">100% Used</span>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
310
464
|
</div>
|
|
311
465
|
</div>
|
|
312
466
|
</div>
|
|
313
467
|
</div><!-- /row -->
|
|
314
468
|
<div class="row row-cards-pf">
|
|
315
469
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
316
|
-
<div class="col-
|
|
317
|
-
<div class="card-pf">
|
|
470
|
+
<div class="col-md-12">
|
|
471
|
+
<div class="card-pf card-pf-utilization">
|
|
318
472
|
<div class="card-pf-heading">
|
|
473
|
+
<p class="card-pf-heading-details">Last 30 days</p>
|
|
319
474
|
<h2 class="card-pf-title">
|
|
320
|
-
|
|
475
|
+
Utilization
|
|
321
476
|
</h2>
|
|
322
477
|
</div>
|
|
323
478
|
<div class="card-pf-body">
|
|
324
|
-
<
|
|
479
|
+
<div class="row">
|
|
480
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
481
|
+
<h3 class="card-pf-subtitle">CPU</h3>
|
|
482
|
+
<p class="card-pf-utilization-details">
|
|
483
|
+
<span class="card-pf-utilization-card-details-count">50</span>
|
|
484
|
+
<span class="card-pf-utilization-card-details-description">
|
|
485
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
486
|
+
<span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
|
|
487
|
+
</span>
|
|
488
|
+
</p>
|
|
489
|
+
<div id="chart-pf-donut"></div>
|
|
490
|
+
<div id="chart-pf-sparkline"></div>
|
|
491
|
+
<script>
|
|
492
|
+
var chart1 = c3.generate({
|
|
493
|
+
bindto: '#chart-pf-donut',
|
|
494
|
+
type: "donut",
|
|
495
|
+
donut: {
|
|
496
|
+
title: "A",
|
|
497
|
+
label: {show: false},
|
|
498
|
+
width: 11
|
|
499
|
+
},
|
|
500
|
+
size: {
|
|
501
|
+
height: 171, // produces a diameter of 150 and a centered chart
|
|
502
|
+
},
|
|
503
|
+
legend: {
|
|
504
|
+
show: false
|
|
505
|
+
},
|
|
506
|
+
color: {
|
|
507
|
+
pattern: ["#cc0000","#D1D1D1"]
|
|
508
|
+
},
|
|
509
|
+
tooltip: {
|
|
510
|
+
contents: function (d) {
|
|
511
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
512
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
513
|
+
'</span>';
|
|
514
|
+
}
|
|
515
|
+
},
|
|
516
|
+
data: {
|
|
517
|
+
type: "donut",
|
|
518
|
+
columns: [
|
|
519
|
+
["Used", 95],
|
|
520
|
+
["Available", 5]
|
|
521
|
+
],
|
|
522
|
+
groups: [
|
|
523
|
+
["used", "available"]
|
|
524
|
+
],
|
|
525
|
+
order: null
|
|
526
|
+
},
|
|
527
|
+
});
|
|
528
|
+
$( "#chart-pf-donut .c3-chart-arcs-title" ).html(
|
|
529
|
+
'<tspan dy="0" x="0" class="donut-title-big-pf">' +
|
|
530
|
+
'950' +
|
|
531
|
+
'</tspan>' +
|
|
532
|
+
'<tspan dy="20" x="0" class="donut-title-small-pf">' +
|
|
533
|
+
'MHz Used' +
|
|
534
|
+
'</tspan>'
|
|
535
|
+
);
|
|
536
|
+
var chart2 = c3.generate({
|
|
537
|
+
axis: {
|
|
538
|
+
x: {
|
|
539
|
+
show: false
|
|
540
|
+
},
|
|
541
|
+
y: {
|
|
542
|
+
show: false
|
|
543
|
+
}
|
|
544
|
+
},
|
|
545
|
+
bindto: '#chart-pf-sparkline',
|
|
546
|
+
color: {
|
|
547
|
+
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
|
|
548
|
+
},
|
|
549
|
+
data: {
|
|
550
|
+
columns: [
|
|
551
|
+
['Less than one year remaining', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
|
|
552
|
+
],
|
|
553
|
+
type: 'area'
|
|
554
|
+
},
|
|
555
|
+
legend: {
|
|
556
|
+
show: false
|
|
557
|
+
},
|
|
558
|
+
point: {
|
|
559
|
+
r: 1,
|
|
560
|
+
focus: {
|
|
561
|
+
expand: {
|
|
562
|
+
r: 4
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
},
|
|
566
|
+
size: {
|
|
567
|
+
height: 40
|
|
568
|
+
},
|
|
569
|
+
tooltip: {
|
|
570
|
+
// because a sparkline should only contain a single data column, the tooltip will only work for a single data column
|
|
571
|
+
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
|
|
572
|
+
for (i = 0; i < d.length; i++) {
|
|
573
|
+
return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
});
|
|
578
|
+
</script>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
581
|
+
<h3 class="card-pf-subtitle">Memory</h3>
|
|
582
|
+
<p class="card-pf-utilization-details">
|
|
583
|
+
<span class="card-pf-utilization-card-details-count">256</span>
|
|
584
|
+
<span class="card-pf-utilization-card-details-description">
|
|
585
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
586
|
+
<span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
|
|
587
|
+
</span>
|
|
588
|
+
</p>
|
|
589
|
+
<div id="chart-pf-donut-2"></div>
|
|
590
|
+
<div id="chart-pf-sparkline-2"></div>
|
|
591
|
+
<script>
|
|
592
|
+
var chart3 = c3.generate({
|
|
593
|
+
bindto: '#chart-pf-donut-2',
|
|
594
|
+
type: "donut",
|
|
595
|
+
donut: {
|
|
596
|
+
title: "A",
|
|
597
|
+
label: {show: false},
|
|
598
|
+
width: 11
|
|
599
|
+
},
|
|
600
|
+
size: {
|
|
601
|
+
height: 171, // produces a diameter of 150 and a centered chart
|
|
602
|
+
},
|
|
603
|
+
legend: {
|
|
604
|
+
show: false
|
|
605
|
+
},
|
|
606
|
+
color: {
|
|
607
|
+
pattern: ["#3f9c35","#D1D1D1"]
|
|
608
|
+
},
|
|
609
|
+
tooltip: {
|
|
610
|
+
contents: function (d) {
|
|
611
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
612
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
613
|
+
'</span>';
|
|
614
|
+
}
|
|
615
|
+
},
|
|
616
|
+
data: {
|
|
617
|
+
type: "donut",
|
|
618
|
+
columns: [
|
|
619
|
+
["Used", 41],
|
|
620
|
+
["Available", 59]
|
|
621
|
+
],
|
|
622
|
+
groups: [
|
|
623
|
+
["used", "available"]
|
|
624
|
+
],
|
|
625
|
+
order: null
|
|
626
|
+
},
|
|
627
|
+
});
|
|
628
|
+
$( "#chart-pf-donut-2 .c3-chart-arcs-title" ).html(
|
|
629
|
+
'<tspan dy="0" x="0" class="donut-title-big-pf">' +
|
|
630
|
+
'176' +
|
|
631
|
+
'</tspan>' +
|
|
632
|
+
'<tspan dy="20" x="0" class="donut-title-small-pf">' +
|
|
633
|
+
'GB Used' +
|
|
634
|
+
'</tspan>'
|
|
635
|
+
);
|
|
636
|
+
var chart4 = c3.generate({
|
|
637
|
+
axis: {
|
|
638
|
+
x: {
|
|
639
|
+
show: false
|
|
640
|
+
},
|
|
641
|
+
y: {
|
|
642
|
+
show: false
|
|
643
|
+
}
|
|
644
|
+
},
|
|
645
|
+
bindto: '#chart-pf-sparkline-2',
|
|
646
|
+
color: {
|
|
647
|
+
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
|
|
648
|
+
},
|
|
649
|
+
data: {
|
|
650
|
+
columns: [
|
|
651
|
+
['Less than one year remaining', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
|
|
652
|
+
],
|
|
653
|
+
type: 'area'
|
|
654
|
+
},
|
|
655
|
+
legend: {
|
|
656
|
+
show: false
|
|
657
|
+
},
|
|
658
|
+
point: {
|
|
659
|
+
r: 1,
|
|
660
|
+
focus: {
|
|
661
|
+
expand: {
|
|
662
|
+
r: 4
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
},
|
|
666
|
+
size: {
|
|
667
|
+
height: 40
|
|
668
|
+
},
|
|
669
|
+
tooltip: {
|
|
670
|
+
// because a sparkline should only contain a single data column, the tooltip will only work for a single data column
|
|
671
|
+
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
|
|
672
|
+
for (i = 0; i < d.length; i++) {
|
|
673
|
+
return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
});
|
|
678
|
+
</script>
|
|
679
|
+
</div>
|
|
680
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
681
|
+
<h3 class="card-pf-subtitle">Network</h3>
|
|
682
|
+
<p class="card-pf-utilization-details">
|
|
683
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
684
|
+
<span class="card-pf-utilization-card-details-description">
|
|
685
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
686
|
+
<span class="card-pf-utilization-card-details-line-2">of 1300 Gpbs</span>
|
|
687
|
+
</span>
|
|
688
|
+
</p>
|
|
689
|
+
<div id="chart-pf-donut-3"></div>
|
|
690
|
+
<div id="chart-pf-sparkline-3"></div>
|
|
691
|
+
<script>
|
|
692
|
+
var chart5 = c3.generate({
|
|
693
|
+
bindto: '#chart-pf-donut-3',
|
|
694
|
+
type: "donut",
|
|
695
|
+
donut: {
|
|
696
|
+
title: "A",
|
|
697
|
+
label: {show: false},
|
|
698
|
+
width: 11
|
|
699
|
+
},
|
|
700
|
+
size: {
|
|
701
|
+
height: 171, // produces a diameter of 150 and a centered chart
|
|
702
|
+
},
|
|
703
|
+
legend: {
|
|
704
|
+
show: false
|
|
705
|
+
},
|
|
706
|
+
color: {
|
|
707
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
708
|
+
},
|
|
709
|
+
tooltip: {
|
|
710
|
+
contents: function (d) {
|
|
711
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
712
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
713
|
+
'</span>';
|
|
714
|
+
}
|
|
715
|
+
},
|
|
716
|
+
data: {
|
|
717
|
+
type: "donut",
|
|
718
|
+
columns: [
|
|
719
|
+
["Used", 85],
|
|
720
|
+
["Available", 15]
|
|
721
|
+
],
|
|
722
|
+
groups: [
|
|
723
|
+
["used", "available"]
|
|
724
|
+
],
|
|
725
|
+
order: null
|
|
726
|
+
},
|
|
727
|
+
});
|
|
728
|
+
$( "#chart-pf-donut-3 .c3-chart-arcs-title" ).html(
|
|
729
|
+
'<tspan dy="0" x="0" class="donut-title-big-pf">' +
|
|
730
|
+
'1100' +
|
|
731
|
+
'</tspan>' +
|
|
732
|
+
'<tspan dy="20" x="0" class="donut-title-small-pf">' +
|
|
733
|
+
'Gpbs Used' +
|
|
734
|
+
'</tspan>'
|
|
735
|
+
);
|
|
736
|
+
var chart6 = c3.generate({
|
|
737
|
+
axis: {
|
|
738
|
+
x: {
|
|
739
|
+
show: false
|
|
740
|
+
},
|
|
741
|
+
y: {
|
|
742
|
+
show: false
|
|
743
|
+
}
|
|
744
|
+
},
|
|
745
|
+
bindto: '#chart-pf-sparkline-3',
|
|
746
|
+
color: {
|
|
747
|
+
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
|
|
748
|
+
},
|
|
749
|
+
data: {
|
|
750
|
+
columns: [
|
|
751
|
+
['Less than one year remaining', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
752
|
+
],
|
|
753
|
+
type: 'area'
|
|
754
|
+
},
|
|
755
|
+
legend: {
|
|
756
|
+
show: false
|
|
757
|
+
},
|
|
758
|
+
point: {
|
|
759
|
+
r: 1,
|
|
760
|
+
focus: {
|
|
761
|
+
expand: {
|
|
762
|
+
r: 4
|
|
763
|
+
}
|
|
764
|
+
}
|
|
765
|
+
},
|
|
766
|
+
size: {
|
|
767
|
+
height: 40
|
|
768
|
+
},
|
|
769
|
+
tooltip: {
|
|
770
|
+
// because a sparkline should only contain a single data column, the tooltip will only work for a single data column
|
|
771
|
+
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
|
|
772
|
+
for (i = 0; i < d.length; i++) {
|
|
773
|
+
return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
|
|
774
|
+
}
|
|
775
|
+
}
|
|
776
|
+
}
|
|
777
|
+
});
|
|
778
|
+
</script>
|
|
779
|
+
</div>
|
|
780
|
+
</div>
|
|
325
781
|
</div>
|
|
326
|
-
|
|
327
|
-
|
|
782
|
+
</div>
|
|
783
|
+
</div>
|
|
784
|
+
</div><!-- /row -->
|
|
785
|
+
<div class="row row-cards-pf">
|
|
786
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
787
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
788
|
+
<div class="card-pf card-pf-utilization">
|
|
789
|
+
<h2 class="card-pf-title">
|
|
790
|
+
Network
|
|
791
|
+
</h2>
|
|
792
|
+
<div class="card-pf-body">
|
|
793
|
+
<p class="card-pf-utilization-details">
|
|
794
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
795
|
+
<span class="card-pf-utilization-card-details-description">
|
|
796
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
797
|
+
<span class="card-pf-utilization-card-details-line-2">of 1300 Gpbs</span>
|
|
798
|
+
</span>
|
|
799
|
+
</p>
|
|
800
|
+
<div id="chart-pf-donut-4"></div>
|
|
801
|
+
<div id="chart-pf-sparkline-4"></div>
|
|
802
|
+
<script>
|
|
803
|
+
var chart7 = c3.generate({
|
|
804
|
+
bindto: '#chart-pf-donut-4',
|
|
805
|
+
type: "donut",
|
|
806
|
+
donut: {
|
|
807
|
+
title: "A",
|
|
808
|
+
label: {show: false},
|
|
809
|
+
width: 11
|
|
810
|
+
},
|
|
811
|
+
size: {
|
|
812
|
+
height: 171, // produces a diameter of 150 and a centered chart
|
|
813
|
+
},
|
|
814
|
+
legend: {
|
|
815
|
+
show: false
|
|
816
|
+
},
|
|
817
|
+
color: {
|
|
818
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
819
|
+
},
|
|
820
|
+
tooltip: {
|
|
821
|
+
contents: function (d) {
|
|
822
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
823
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
824
|
+
'</span>';
|
|
825
|
+
}
|
|
826
|
+
},
|
|
827
|
+
data: {
|
|
828
|
+
type: "donut",
|
|
829
|
+
columns: [
|
|
830
|
+
["Used", 85],
|
|
831
|
+
["Available", 15]
|
|
832
|
+
],
|
|
833
|
+
groups: [
|
|
834
|
+
["used", "available"]
|
|
835
|
+
],
|
|
836
|
+
order: null
|
|
837
|
+
},
|
|
838
|
+
});
|
|
839
|
+
$( "#chart-pf-donut-4 .c3-chart-arcs-title" ).html(
|
|
840
|
+
'<tspan dy="0" x="0" class="donut-title-big-pf">' +
|
|
841
|
+
'1100' +
|
|
842
|
+
'</tspan>' +
|
|
843
|
+
'<tspan dy="20" x="0" class="donut-title-small-pf">' +
|
|
844
|
+
'Gpbs Used' +
|
|
845
|
+
'</tspan>'
|
|
846
|
+
);
|
|
847
|
+
var chart8 = c3.generate({
|
|
848
|
+
axis: {
|
|
849
|
+
x: {
|
|
850
|
+
show: false
|
|
851
|
+
},
|
|
852
|
+
y: {
|
|
853
|
+
show: false
|
|
854
|
+
}
|
|
855
|
+
},
|
|
856
|
+
bindto: '#chart-pf-sparkline-4',
|
|
857
|
+
color: {
|
|
858
|
+
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
|
|
859
|
+
},
|
|
860
|
+
data: {
|
|
861
|
+
columns: [
|
|
862
|
+
['Less than one year remaining', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
863
|
+
],
|
|
864
|
+
type: 'area'
|
|
865
|
+
},
|
|
866
|
+
legend: {
|
|
867
|
+
show: false
|
|
868
|
+
},
|
|
869
|
+
point: {
|
|
870
|
+
r: 1,
|
|
871
|
+
focus: {
|
|
872
|
+
expand: {
|
|
873
|
+
r: 4
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
},
|
|
877
|
+
size: {
|
|
878
|
+
height: 40
|
|
879
|
+
},
|
|
880
|
+
tooltip: {
|
|
881
|
+
// because a sparkline should only contain a single data column, the tooltip will only work for a single data column
|
|
882
|
+
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
|
|
883
|
+
for (i = 0; i < d.length; i++) {
|
|
884
|
+
return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
|
|
885
|
+
}
|
|
886
|
+
}
|
|
887
|
+
}
|
|
888
|
+
});
|
|
889
|
+
</script>
|
|
328
890
|
</div>
|
|
329
891
|
</div>
|
|
330
892
|
</div>
|
|
331
|
-
|
|
893
|
+
</div><!-- /row -->
|
|
894
|
+
<div class="row row-cards-pf">
|
|
895
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
896
|
+
<div class="col-xs-12 col-sm-6 col-md-5">
|
|
332
897
|
<div class="card-pf">
|
|
333
898
|
<div class="card-pf-heading">
|
|
899
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
900
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
901
|
+
Last 30 Days <span class="caret"></span>
|
|
902
|
+
</button>
|
|
903
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
904
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
905
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
906
|
+
</ul>
|
|
907
|
+
</div>
|
|
334
908
|
<h2 class="card-pf-title">
|
|
335
909
|
Card Title
|
|
336
910
|
</h2>
|
|
@@ -338,13 +912,75 @@
|
|
|
338
912
|
<div class="card-pf-body">
|
|
339
913
|
<p>[card contents]</p>
|
|
340
914
|
</div>
|
|
915
|
+
</div>
|
|
916
|
+
</div>
|
|
917
|
+
<div class="col-xs-12 col-sm-6 col-md-7">
|
|
918
|
+
<div class="card-pf">
|
|
919
|
+
<h2 class="card-pf-title">
|
|
920
|
+
Card Title
|
|
921
|
+
</h2>
|
|
922
|
+
<div class="card-pf-body">
|
|
923
|
+
<p>[card contents]</p>
|
|
924
|
+
</div>
|
|
341
925
|
<div class="card-pf-footer">
|
|
342
|
-
<
|
|
926
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
927
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
928
|
+
Last 30 Days <span class="caret"></span>
|
|
929
|
+
</button>
|
|
930
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
931
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
932
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
933
|
+
</ul>
|
|
934
|
+
</div>
|
|
935
|
+
<p>
|
|
936
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
937
|
+
<span class="pficon pficon-add-circle-o"></span>Add New Cluster
|
|
938
|
+
</a>
|
|
939
|
+
</p>
|
|
343
940
|
</div>
|
|
344
941
|
</div>
|
|
345
942
|
</div>
|
|
346
943
|
</div><!-- /row -->
|
|
347
944
|
<div class="row row-cards-pf">
|
|
945
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
946
|
+
<div class="col-xs-12 col-sm-5 col-md-5">
|
|
947
|
+
<div class="card-pf" style="height: 180px;">
|
|
948
|
+
<h2 class="card-pf-title" style="height: 17px;">
|
|
949
|
+
Card Title
|
|
950
|
+
</h2>
|
|
951
|
+
<div class="card-pf-body" style="height: 40px;">
|
|
952
|
+
<p>[card contents]</p>
|
|
953
|
+
</div>
|
|
954
|
+
<div class="card-pf-footer" style="">
|
|
955
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
956
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
957
|
+
Last 30 Days <span class="caret"></span>
|
|
958
|
+
</button>
|
|
959
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
960
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
961
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
962
|
+
</ul>
|
|
963
|
+
</div>
|
|
964
|
+
<p>
|
|
965
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
966
|
+
<span class="pficon pficon-flag"></span>View CPU Events
|
|
967
|
+
</a>
|
|
968
|
+
</p>
|
|
969
|
+
</div>
|
|
970
|
+
</div>
|
|
971
|
+
</div>
|
|
972
|
+
<div class="col-xs-12 col-sm-7 col-md-7">
|
|
973
|
+
<div class="card-pf" style="height: 180px;">
|
|
974
|
+
<h2 class="card-pf-title" style="height: 17px;">
|
|
975
|
+
Card Title
|
|
976
|
+
</h2>
|
|
977
|
+
<div class="card-pf-body" style="height: 40px;">
|
|
978
|
+
<p>[card contents]</p>
|
|
979
|
+
</div>
|
|
980
|
+
</div>
|
|
981
|
+
</div>
|
|
982
|
+
</div>
|
|
983
|
+
<div class="row row-cards-pf">
|
|
348
984
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
349
985
|
<div class="col-xs-6 col-sm-8 col-md-8">
|
|
350
986
|
<div class="card-pf">
|
|
@@ -397,5 +1033,6 @@
|
|
|
397
1033
|
$('[data-toggle="tooltip"]').tooltip();
|
|
398
1034
|
});
|
|
399
1035
|
</script>
|
|
1036
|
+
|
|
400
1037
|
</body>
|
|
401
1038
|
</html>
|