patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
1,532 lines (1,412 loc) • 54.9 kB
HTML
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<title>List View - Simple Expansion - PatternFly</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../css/patternfly.min.css" >
<link rel="stylesheet" href="../css/patternfly-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="../js/patternfly.min.js"></script>
</head>
<div class="toast-notifications-list-pf">
<div class="toast-pf alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
<span class="pficon pficon-close"></span>
</button>
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
</div>
<body>
<nav class="navbar navbar-default navbar-pf" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="..//img/brand.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse-1">
<ul class="nav navbar-nav navbar-utility">
<li class="dropdown">
<a href="#0" class="nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#0" class="dropdown-toggle" data-toggle="dropdown">
<span class="pficon pficon-user"></span>
Brian Johnson <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-primary">
<li>
<a href="basic.html">Basic</a>
</li>
<li>
<a href="bootstrap-treeview-2.html">Tree View</a>
</li>
<li>
<a href="dashboard.html">Dashboard</a>
</li>
<li>
<a href="form.html">Form</a>
</li>
<li>
<a href="tab.html">Tab</a>
</li>
<li>
<a href="typography-2.html">Typography</a>
</li>
<li>
<a href="card-view-multi-select.html">Card View - Multi Select</a>
</li>
<li>
<a href="card-view-single-select.html">Card View - Single Select</a>
</li>
<li>
<a href="cards.html">Cards</a>
</li>
<li>
<a href="pagination-card-view.html">Pagination - Card View</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row toolbar-pf">
<div class="col-sm-12">
<form class="toolbar-pf-actions">
<div class="form-group toolbar-pf-filter">
<label class="sr-only" for="filter">Name</label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="selected"><a href="#">Name</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Color</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
</div><!-- /input-group -->
</div>
<div class="form-group">
<div class="dropdown btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="selected"><a href="#">Name</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Last Modified</a></li>
</ul>
</div>
<button class="btn btn-link" type="button">
<span class="fa fa-sort-alpha-asc"></span>
</button>
</div>
<div class="form-group">
<button class="btn btn-default" type="button">Action</button>
<button class="btn btn-default" type="button">Action</button>
<div class="dropdown btn-group dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu " aria-labelledby="dropdownKebab">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="toolbar-pf-action-right">
<div class="form-group toolbar-pf-find">
<button class="btn btn-link btn-find" type="button">
<span class="fa fa-search"></span>
</button>
<div class="find-pf-dropdown-container">
<input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
<div class="find-pf-buttons">
<span class="find-pf-nums">1 of 3</span>
<button class="btn btn-link" type="button">
<span class="fa fa-angle-up"></span>
</button>
<button class="btn btn-link" type="button">
<span class="fa fa-angle-down"></span>
</button>
<button class="btn btn-link btn-find-close" type="button">
<span class="pficon pficon-close"></span>
</button>
</div>
</div>
</div>
<div class="form-group toolbar-pf-view-selector">
<button class="btn btn-link "><i class="fa fa-th"></i></button>
<button class="btn btn-link "><i class="fa fa-th-large"></i></button>
<button class="btn btn-link active"><i class="fa fa-th-list"></i></button>
</div>
</div>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-12">
<h5>40 Results</h5>
<p>Active filters:</p>
<ul class="list-inline">
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="pficon pficon-close"></span></a>
</span>
</li>
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="pficon pficon-close"></span></a>
</span>
</li>
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="pficon pficon-close"></span></a>
</span>
</li>
</ul>
<p><a href="#">Clear All Filters</a></p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
<div class="container-fluid">
<div class="list-group list-view-pf list-view-pf-view">
<div class="list-group-item">
<div class="list-group-item-header">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-plane list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event One
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>8</strong> Images
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-3">
<div id="utilizationDonutChart11" class="example-donut-chart-utilization"></div>
<div class="pct-donut-chart-pf example-donut-chart-utilization">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart12"></span>
</span>
<span class="pct-donut-chart-pf-label">
60 MHz of 100 MHz used
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-left">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart13"></span>
</span>
<span class="pct-donut-chart-pf-label text-right">
60 MHz of 100 MHz used
</span>
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-right">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart14"></span>
</span>
<span class="pct-donut-chart-pf-label text-left">
60 MHz of 100 MHz
</span>
</span>
</div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
// Donut configuration 1
var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig1.bindto = '#utilizationDonutChart11';
donutConfig1.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40],
],
groups: [
["used", "available"]
],
order: null
};
donutConfig1.size = {
width: 180,
height: 180
};
donutConfig1.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig1);
$().pfSetDonutChartTitle("#utilizationDonutChart11", "60", "MHz Used");
// Donut configuration 2
var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig2.bindto = '#utilizationDonutChart12';
donutConfig2.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig2.size = {
width: 180,
height: 180
};
donutConfig2.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig2);
$().pfSetDonutChartTitle("#utilizationDonutChart12", "60", "MHz Used");
// Donut configuration 3
var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig3.bindto = '#utilizationDonutChart13';
donutConfig3.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig3.size = {
width: 140,
height: 140
};
donutConfig3.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig3);
$().pfSetDonutChartTitle("#utilizationDonutChart13", "60", "MHz Used");
// Donut configuration 4
var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig4.bindto = '#utilizationDonutChart14';
donutConfig4.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig4.size = {
width: 140,
height: 140
};
donutConfig4.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig4);
$().pfSetDonutChartTitle("#utilizationDonutChart14", "60", "MHz Used");
</script>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>Hostceph1</dd>
<dt>Device Path</dt>
<dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
<dt>Time</dt>
<dd>January 15, 2016 10:45:11 AM</dd>
<dt>Severity</dt>
<dd>Warning</dd>
<dt>Cluster</dt>
<dd>Cluster 1</dd>
</dl>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-group-item-header">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight10">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-magic list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Two
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>4</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>2</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>11</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>6</strong> Images
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-3">
<div id="utilizationDonutChart21" class="example-donut-chart-utilization"></div>
<div class="pct-donut-chart-pf example-donut-chart-utilization">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart22"></span>
</span>
<span class="pct-donut-chart-pf-label">
60 MHz of 100 MHz used
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-left">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart23"></span>
</span>
<span class="pct-donut-chart-pf-label text-right">
60 MHz of 100 MHz used
</span>
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-right">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart24"></span>
</span>
<span class="pct-donut-chart-pf-label text-left">
60 MHz of 100 MHz
</span>
</span>
</div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
// Donut configuration 1
var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig1.bindto = '#utilizationDonutChart21';
donutConfig1.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40],
],
groups: [
["used", "available"]
],
order: null
};
donutConfig1.size = {
width: 180,
height: 180
};
donutConfig1.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig1);
$().pfSetDonutChartTitle("#utilizationDonutChart21", "60", "MHz Used");
// Donut configuration 2
var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig2.bindto = '#utilizationDonutChart22';
donutConfig2.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig2.size = {
width: 180,
height: 180
};
donutConfig2.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig2);
$().pfSetDonutChartTitle("#utilizationDonutChart22", "60", "MHz Used");
// Donut configuration 3
var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig3.bindto = '#utilizationDonutChart23';
donutConfig3.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig3.size = {
width: 140,
height: 140
};
donutConfig3.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig3);
$().pfSetDonutChartTitle("#utilizationDonutChart23", "60", "MHz Used");
// Donut configuration 4
var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig4.bindto = '#utilizationDonutChart24';
donutConfig4.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig4.size = {
width: 140,
height: 140
};
donutConfig4.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig4);
$().pfSetDonutChartTitle("#utilizationDonutChart24", "60", "MHz Used");
</script>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>Hostceph1</dd>
<dt>Device Path</dt>
<dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
<dt>Time</dt>
<dd>January 15, 2016 10:45:11 AM</dd>
<dt>Severity</dt>
<dd>Warning</dd>
<dt>Cluster</dt>
<dd>Cluster 1</dd>
</dl>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-group-item-header">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight11">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-gamepad list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Three
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>4</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>2</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>6</strong> Images
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-3">
<div id="utilizationDonutChart31" class="example-donut-chart-utilization"></div>
<div class="pct-donut-chart-pf example-donut-chart-utilization">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart32"></span>
</span>
<span class="pct-donut-chart-pf-label">
60 MHz of 100 MHz used
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-left">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart33"></span>
</span>
<span class="pct-donut-chart-pf-label text-right">
60 MHz of 100 MHz used
</span>
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-right">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart34"></span>
</span>
<span class="pct-donut-chart-pf-label text-left">
60 MHz of 100 MHz
</span>
</span>
</div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
// Donut configuration 1
var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig1.bindto = '#utilizationDonutChart31';
donutConfig1.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40],
],
groups: [
["used", "available"]
],
order: null
};
donutConfig1.size = {
width: 180,
height: 180
};
donutConfig1.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig1);
$().pfSetDonutChartTitle("#utilizationDonutChart31", "60", "MHz Used");
// Donut configuration 2
var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig2.bindto = '#utilizationDonutChart32';
donutConfig2.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig2.size = {
width: 180,
height: 180
};
donutConfig2.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig2);
$().pfSetDonutChartTitle("#utilizationDonutChart32", "60", "MHz Used");
// Donut configuration 3
var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig3.bindto = '#utilizationDonutChart33';
donutConfig3.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig3.size = {
width: 140,
height: 140
};
donutConfig3.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig3);
$().pfSetDonutChartTitle("#utilizationDonutChart33", "60", "MHz Used");
// Donut configuration 4
var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig4.bindto = '#utilizationDonutChart34';
donutConfig4.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig4.size = {
width: 140,
height: 140
};
donutConfig4.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig4);
$().pfSetDonutChartTitle("#utilizationDonutChart34", "60", "MHz Used");
</script>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>Hostceph1</dd>
<dt>Device Path</dt>
<dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
<dt>Time</dt>
<dd>January 15, 2016 10:45:11 AM</dd>
<dt>Severity</dt>
<dd>Warning</dd>
<dt>Cluster</dt>
<dd>Cluster 1</dd>
</dl>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-group-item-header">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight12">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-linux list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Four
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>4</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>2</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>6</strong> Images
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-3">
<div id="utilizationDonutChart41" class="example-donut-chart-utilization"></div>
<div class="pct-donut-chart-pf example-donut-chart-utilization">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart42"></span>
</span>
<span class="pct-donut-chart-pf-label">
60 MHz of 100 MHz used
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-left">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart43"></span>
</span>
<span class="pct-donut-chart-pf-label text-right">
60 MHz of 100 MHz used
</span>
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-right">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart44"></span>
</span>
<span class="pct-donut-chart-pf-label text-left">
60 MHz of 100 MHz
</span>
</span>
</div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
// Donut configuration 1
var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig1.bindto = '#utilizationDonutChart41';
donutConfig1.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40],
],
groups: [
["used", "available"]
],
order: null
};
donutConfig1.size = {
width: 180,
height: 180
};
donutConfig1.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig1);
$().pfSetDonutChartTitle("#utilizationDonutChart41", "60", "MHz Used");
// Donut configuration 2
var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig2.bindto = '#utilizationDonutChart42';
donutConfig2.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig2.size = {
width: 180,
height: 180
};
donutConfig2.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig2);
$().pfSetDonutChartTitle("#utilizationDonutChart42", "60", "MHz Used");
// Donut configuration 3
var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig3.bindto = '#utilizationDonutChart43';
donutConfig3.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig3.size = {
width: 140,
height: 140
};
donutConfig3.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig3);
$().pfSetDonutChartTitle("#utilizationDonutChart43", "60", "MHz Used");
// Donut configuration 4
var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig4.bindto = '#utilizationDonutChart44';
donutConfig4.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig4.size = {
width: 140,
height: 140
};
donutConfig4.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig4);
$().pfSetDonutChartTitle("#utilizationDonutChart44", "60", "MHz Used");
</script>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>Hostceph1</dd>
<dt>Device Path</dt>
<dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
<dt>Time</dt>
<dd>January 15, 2016 10:45:11 AM</dd>
<dt>Severity</dt>
<dd>Warning</dd>
<dt>Cluster</dt>
<dd>Cluster 1</dd>
</dl>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-group-item-header">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight13">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-briefcase list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Five
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>4</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>2</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>6</strong> Images
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-3">
<div id="utilizationDonutChart51" class="example-donut-chart-utilization"></div>
<div class="pct-donut-chart-pf example-donut-chart-utilization">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart52"></span>
</span>
<span class="pct-donut-chart-pf-label">
60 MHz of 100 MHz used
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-left">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart53"></span>
</span>
<span class="pct-donut-chart-pf-label text-right">
60 MHz of 100 MHz used
</span>
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-right">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart54"></span>
</span>
<span class="pct-donut-chart-pf-label text-left">
60 MHz of 100 MHz
</span>
</span>
</div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
// Donut configuration 1
var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig1.bindto = '#utilizationDonutChart51';
donutConfig1.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40],
],
groups: [
["used", "available"]
],
order: null
};
donutConfig1.size = {
width: 180,
height: 180
};
donutConfig1.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig1);
$().pfSetDonutChartTitle("#utilizationDonutChart51", "60", "MHz Used");
// Donut configuration 2
var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig2.bindto = '#utilizationDonutChart52';
donutConfig2.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig2.size = {
width: 180,
height: 180
};
donutConfig2.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig2);
$().pfSetDonutChartTitle("#utilizationDonutChart52", "60", "MHz Used");
// Donut configuration 3
var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig3.bindto = '#utilizationDonutChart53';
donutConfig3.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig3.size = {
width: 140,
height: 140
};
donutConfig3.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig3);
$().pfSetDonutChartTitle("#utilizationDonutChart53", "60", "MHz Used");
// Donut configuration 4
var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig4.bindto = '#utilizationDonutChart54';
donutConfig4.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig4.size = {
width: 140,
height: 140
};
donutConfig4.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
c3.generate(donutConfig4);
$().pfSetDonutChartTitle("#utilizationDonutChart54", "60", "MHz Used");
</script>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>Hostceph1</dd>
<dt>Device Path</dt>
<dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
<dt>Time</dt>
<dd>January 15, 2016 10:45:11 AM</dd>
<dt>Severity</dt>
<dd>Warning</dd>
<dt>Cluster</dt>
<dd>Cluster 1</dd>
</dl>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-group-item-header">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight14">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-coffee list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Six
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>4</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>2</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>6</strong> Images
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<div class="col-md-3">
<div id="utilizationDonutChart61" class="example-donut-chart-utilization"></div>
<div class="pct-donut-chart-pf example-donut-chart-utilization">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart62"></span>
</span>
<span class="pct-donut-chart-pf-label">
60 MHz of 100 MHz used
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-left">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart63"></span>
</span>
<span class="pct-donut-chart-pf-label text-right">
60 MHz of 100 MHz used
</span>
</span>
</div>
<div class="example-donut-chart-utilization">
<span class="pct-donut-chart-pf pct-donut-chart-pf-right">
<span class="pct-donut-chart-pf-chart">
<span id="utilizationDonutChart64"></span>
</span>
<span class="pct-donut-chart-pf-label text-left">
60 MHz of 100 MHz
</span>
</span>
</div>