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

Top Utilized Clusters

RHOS6-Controller
190.0 of 200.0 GB Used
5% Available
CFMEQE-Cluster
100.0 of 200.0 GB Used
50% Available
RHOS-Undercloud
140.0 of 200.0 GB Used
30% Available
RHEL6-Controller
153.0 of 200.0 GB Used
23.5% Available

Left Description and Right Label

Quotas

CPU
115 of 460 MHz
75% Available
Memory
8 of 16 GB
50% Available
Pods
5 of 8 Total
37.5% Available
Services
2 of 2 Total

Description

utilization-bar-card3
  1. Title: Define a title for the card. See Dashboard Cards for more information.
  2. Utilization Bar Chart: See Utilization Bar Chart for more information about the chart’s appearance and behavior.
  3. Used Value: Show a value for amount used.
  4. 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.
  5. Unit of Measurement: The label for unit of measurement is shown after the the value.
  6. 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

RHOS6-Controller
190.0 of 200.0 GB Used
5% Available
CFMEQE-Cluster
100.0 of 200.0 GB Used
50% Available
RHOS-Undercloud
140.0 of 200.0 GB Used
30% Available
RHEL6-Controller
153.0 of 200.0 GB Used
23.5% Available

Reference Markup

<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

CPU
115 of 460 MHz
75% Available
Memory
8 of 16 GB
50% Available
Pods
5 of 8 Total
37.5% Available
Services
2 of 2 Total

Reference Markup

<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>