Web Components

Patternfly web components require patternfly.css, patternfly-additions.css, and patternfly-webcomponents.css.

<link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.css">
<link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly-additions.css">
<link rel="stylesheet" href="node_modules/patternfly-webcomponents/dist/css/patternfly-webcomponents.css">

Components can be installed individually (using individual *.js files) or all at once (using patternfly.js). You will also likely want to include the web component polyfill for better browser support.

<script src="node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
<script src="node_modules/patternfly-webcomponents/dist/js/patternfly.js"></script>

<pf-alert type="success">Well done! You successfully read this important alert message.</pf-alert>
<pf-alert type="info">Heads up! This alert needs your attention, but it's not super important. </pf-alert>
<pf-alert type="warning" persistent="true">Warning! Better check yourself, you're not looking too good. </pf-alert>
<pf-alert type="danger" persistent="true" persistent-callback-fn="alert('Danger alert closed');">Danger! Something is really bad man.</pf-alert>

Utilization Bar Chart

The Utilization Bar Chart depicts the percentage utilization ratio between used and available.

<pf-utilization-bar-chart chart-title="RAM Usage" used="8" total="24" units="MB"></pf-utilization-bar-chart>

Thresholds can be set to indicate when warnings and errors have occurred.

<pf-utilization-bar-chart id="thresholdExample1" chart-title="RAM Usage" used="10" total="100" units="MB" threshold-warning="60" threshold-error="85"></pf-utilization-bar-chart>
<div>Listening for Threshold Change Events: <span class="" id="thresholdChangedText"></span></div>

const thresholdExample1 = document.querySelector('#thresholdExample1');
const thresholdChangedText = document.querySelector('#thresholdChangedText');

//increment the threshold 
setInterval(() => {
    incrementThreshold(thresholdExample1, 10);
}, 500);

function incrementThreshold(thresholdExample, increment) {
    let newThreshold = parseInt(thresholdExample.getAttribute("used")) + increment;
    const maxThreshold = parseInt(thresholdExample.getAttribute("total"));
    if (newThreshold > maxThreshold) {
        newThreshold = 5;
    }
    thresholdExample.setAttribute("used", newThreshold);
}

//pf-utilization-bar-chart fires 'thresholdSet' event when thresholds are met
thresholdExample1.addEventListener('thresholdSet', e => {
    const threshold = e.detail.threshold;
    let msg = threshold.substr(threshold.lastIndexOf('-') + 1);
    if (msg === 'warning') {
        msg = "Warning! You should look at this.";
        thresholdChangedText.setAttribute("class", 'text-warning');
    } else if (msg === 'danger') {
        msg = "Danger!!  Seriously, something's wrong!";
        thresholdChangedText.setAttribute("class", 'text-danger');
    } else if (msg === 'success') {
        msg = "Whew...Everythings normal :-)";
        thresholdChangedText.setAttribute("class", 'text-success');
    }
    thresholdChangedText.innerText = msg;
});

The inline layout displays a chart title and utilization titles inline.

<pf-utilization-bar-chart chart-title="Disk I/O" layout="inline" used="450" total="500" units="I/Ops" threshold-warning="60" threshold-error="85"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-title="CPU Usage" layout="inline" used="350" total="500" units="MHz" threshold-warning="60" threshold-error="85"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-title="Memory" layout="inline" used="150" total="500" units="GB" threshold-warning="60" threshold-error="85"></pf-utilization-bar-chart>

<pf-tabs>
    <pf-tab tabTitle="Cupcakes">
        <p>Cupcake ipsum dolor. Sit amet topping. Jelly-o cake ice cream jujubes marshmallow cotton candy.</p>
    </pf-tab>
    <pf-tab tabTitle="Caramels">
        <p>Candy caramels sweet roll macaroon pastry cupcake liquorice. Cookie I love topping I love cookie toffee chocolate bar. Jelly-o sweet roll I love dessert powder.</p>
    </pf-tab>
</pf-tabs>

<pf-tooltip id="tooltip-left" placement="left" target-selector="#btn-left">Tooltip text on Left</pf-tooltip>
<button id="btn-left" type="button" class="btn btn-primary btn-lg" aria-describedby="tooltip-left">Left</button>

<pf-tooltip id="tooltip-top" placement="top" target-selector="#btn-top">Tooltip on top</pf-tooltip>
<button id="btn-top" type="button" class="btn btn-default btn-lg" aria-describedby="tooltip-top">Top</button>

<pf-tooltip id="tooltip-bottom" placement="bottom" target-selector="#btn-bottom">Tooltip on bottom</pf-tooltip>
<button id="btn-bottom" type="button" class="btn btn-warning btn-lg" aria-describedby="tooltip-bottom">Bottom</button>

<pf-tooltip id="tooltip-right" placement="right" target-selector="#btn-right">Tooltip on right</pf-tooltip>
<button id="btn-right" type="button" class="btn btn-danger btn-lg" aria-describedby="tooltip-right">Right</button>