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