Web Components

Overview

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>

Alerts

Well done! You successfully read this important alert message. Heads up! This alert needs your attention, but it's not super important. Warning! Better check yourself, you're not looking too good. Danger! Something is really bad man.
<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>

Charts

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.

Listening for Threshold Change Events:
<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>

Tabs

Cupcake ipsum dolor. Sit amet topping. Jelly-o cake ice cream jujubes marshmallow cotton candy.

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.

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

Tooltips

Tooltip text on Left Tooltip on top Tooltip on bottom Tooltip on right
<pf-tooltip id="tooltip-left" placement="left" targetSelector="#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" targetSelector="#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" targetSelector="#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" targetSelector="#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>