Utilization Bar Card
A Utilization Bar Card displays the utilization for metrics using the Utilization Bar Chart. The most common use case for this pattern is seen in a dashboard.
Jump to Top Left Description and Top Right Label or Left Description and Right Label
Top Left Description and Top Right Label
Left Description and Right Label
Utilization Bar Card
-
Title: Define a title for the card.
-
Utilization Bar Chart: See Utilization Bar Chart for more information about the chart’s appearance and behavior.
-
Used Value: Show a value for amount used.
-
Total Value: In addition to the used value, it is recommended to show the total value. Show this with the used value (i.e. x of y Used) or provide it in a tooltip.
-
Unit of Measurement: The label for unit of measurement is shown after the the value.
-
Tooltip: It is recommend that the percentage used is displayed in a tooltip.
Jump to Top Left Description and Top Right Label or Left Description and Right Label
Top Left Description and Top Right Label
Top Utilized Clusters
<script src="components/c3/c3.min.js"></script> <script src="components/d3/d3.min.js"></script> <body class="cards-pf"> ... <div class="container-fluid container-cards-pf"> <div class="row row-cards-pf"> <div class="col-xs-6 col-sm-4 col-md-4"> <div class="card-pf"> <div class="card-pf-heading"> <h2 class="card-pf-title"> Top Utilized Clusters </h2> </div> <div class="card-pf-body"> <div class="progress-description"> RHOS6-Controller </div> <div class="progress progress-label-top-right"> <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"> <span><strong>190.0 of 200.0 GB</strong> Used</span> </div> <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"> <span class="sr-only">5% Available</span> </div> </div> <div class="progress-description"> CFMEQE-Cluster </div> <div class="progress progress-label-top-right"> <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"> <span><strong>100.0 of 200.0 GB</strong> Used</span> </div> <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"> <span class="sr-only">50% Available</span> </div> </div> <div class="progress-description"> RHOS-Undercloud </div> <div class="progress progress-label-top-right"> <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"> <span><strong>140.0 of 200.0 GB</strong> Used</span> </div> <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"> <span class="sr-only">30% Available</span> </div> </div> <div class="progress-description"> RHEL6-Controller </div> <div class="progress progress-label-top-right"> <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"> <span><strong>153.0 of 200.0 GB</strong> Used</span> </div> <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"> <span class="sr-only">23.5% Available</span> </div> </div> </div> </div> </div> </div><!-- /row --> </div><!-- /container --> </body>
Left Description and Right Label
Quotas
<script src="components/c3/c3.min.js"></script> <script src="components/d3/d3.min.js"></script> <body class="cards-pf"> ... <div class="container-fluid container-cards-pf"> <div class="row row-cards-pf"> <div class="col-xs-6 col-sm-4 col-md-4"> <div class="card-pf"> <div class="card-pf-heading"> <h2 class="card-pf-title"> Quotas </h2> </div> <div class="card-pf-body"> <div class="progress-container progress-description-left progress-label-right"> <div class="progress-description"> CPU </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used"> <span><strong>115 of 460</strong> MHz</span> </div> <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"> <span class="sr-only">75% Available</span> </div> </div> </div> <div class="progress-container progress-description-left progress-label-right"> <div class="progress-description"> Memory </div> <div class="progress"> <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"> <span><strong>8 of 16</strong> GB</span> </div> <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"> <span class="sr-only">50% Available</span> </div> </div> </div> <div class="progress-container progress-description-left progress-label-right"> <div class="progress-description"> Pods </div> <div class="progress"> <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"> <span><strong>5 of 8</strong> Total</span> </div> <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"> <span class="sr-only">37.5% Available</span> </div> </div> </div> <div class="progress-container progress-description-left progress-label-right"> <div class="progress-description"> Services </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used"> <span><strong>2 of 2</strong> Total</span> </div> </div> </div> </div> </div> </div> </div><!-- /row --> </div><!-- /container --> </body>