List View
A List View displays data in rows. Each row displays the same set of attributes, although not necessarily displayed in columns, and the attributes may wrap. The List View omits column headers and other visual noise, making it a cleaner visualization than a data table.
Jump to Standard List View, List View with Expanding Rows or Row Variation Examples
Standard List View
List View with Expanding Rows
Use a List View with expanding rows when you want to display details in place without requiring drill-down to a new page. This is useful when you want to allow users to view details of an object without reloading the page or when the detail information is small and does not require its own page. Simple expansion and compound expansion are two variants of this pattern.
Simple Expansion
Simple expansion supports a single expansion state to expose more detail for a selected row.
Compound Expansion
Compound expansion supports multiple expansion panels to examine multiple attributes of the selected row.
List View with Draggable Rows
Provide customizable sorting capabilities to users by applying the Drag and Drop pattern to a standard list view. Drag and Drop allows users to dynamically reorder items in the list.
Row Variation Examples
The following row variations provide some examples of how you might visualize content within a row. You are not limited to these layouts. You may need to adjust the visualizations to best fit your application’s needs. Each row within a list view should have a consistent layout. Do not mix and match.
List View
Standard List View
-
Toolbar: The Toolbar pattern may include Filter, Sort, Actions, Find and Change View.
- Row:
- If drill down behavior is supported, clicking on an item will link to the appropriate page.
- Each item in List View should have the same layout
- When including titles, Make the title bold rather than appending a colon ( : )
- inks may be displayed within an item
- When the viewport size is decreased:
- Content should wrap, displaying multiple rows of data
- Content could be eliminated
-
Disabled Row (optional): Rows that are currently not available will be disabled. The cursor should appear visually disabled when user hovers over the row.
-
Multi-Selection via Checkboxes (optional): If multi-selection is supported, checkboxes appear on the left. Actions in the Data Toolbar apply to the selected items.
-
Item Hover: A hover state should be shown visually when a user hovers over an item.
- Inline Actions: Inline actions should be included if the user needs to be able to quickly perform an action on a single item.
List View with Simple Expansion
-
Icon: Placing the caret at the front of the row signifies that this row is expandable. The caret icon points to the right when it is closed and down when it is expanded.
- Interaction
- Hovering over a row highlights it. Single clicking anywhere in the row expands the row.
- If the list supports both expansion and drill-down to details, a button or link must be added to the row to support the drill-down action.
-
Expansion Panel: When the row is expanded, a panel is inserted between the bottom of the row and the top of the next row. All other content is pushed down the page. The panel should be sized to accommodate the content. Content can be anything that is required to convey details of a selected object. However, we do not recommend placing tables of log lists of items inside the expansion panel. This could result in nested scrolling (i.e. the master list and the detailed content require separate scroll bars).
- Close/Collapse: Clicking the Close icon will collapse the expansion panel and return the list to its original (collapsed) state. Alternatively, clicking anywhere on the row again will have the same effect.
List View with Compound Expansion
-
Icon: When the list supports compound expansion, the caret is placed in front of each attribute that is expandable.
- Expandable Attribute:
- Hovering over an expandable attribute highlights it. Note that in this case there is no action that applies to single clicking on the entire row. The user must explicitly click on the element they want to expand.
- Clicking on any expandable attribute opens the expansion panels with details for the selected attribute, only. The caret changes direction to point down, and the attribute remains highlighted.
- Hovering over another expandable attribute will highlight it. Clicking will close the current expansion panel and expand this attribute by opening its row expansion. This action is exactly equivalent to closing the first panel (by clicking close) and expanding the second panel.
- Close/Collapse: Click the Close icon to close/collapse the expansion panel.
Additional Notes about Behavior
-
Empty State: If no items exist, display an Empty State page. See the Empty State pattern for more details. If there are no items to display as the result of a null filter result, see the Filter pattern for more information about how to display this.
-
Vertical Scroll: Use a vertical scrollbar as needed. A horizontal scrollbar should NOT be used. Instead, the page containing the List View should be responsive.
-
Pagination: List view can also support pagination. See Pagination for more details.
Jump to Standard List View, Simple Expansion, Compound Expansion, Default Row, Row Variation #1, Row Variation #2, Row Variation #3, Row Variation #4, Row Variation #5 or Row Variation #6
Standard List View
<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="/patternfly-org/assets/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">
</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 "><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-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">
<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">
<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">
<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">
<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">
<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>
<script>
$(document).ready(function () {
// Row Checkbox Selection
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
// toggle dropdown menu
$('.list-view-pf-actions').on('show.bs.dropdown', function () {
var $this = $(this);
var $dropdown = $this.find('.dropdown');
var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
$dropdown.toggleClass('dropup', space < 10);
});
// allow users to select multiple list items with shift key
$('.list-group').on('click', '.list-view-pf-checkbox>input', function(event) {
var $list = $('.list-group');
var prevIndex = $list.data('preIndex');
var $listItems = $list.children('.list-group-item');
var $currentItem = $(this).closest('.list-group-item');
if(event.shiftKey && prevIndex > -1 && this.checked) {
var currentIndex = $listItems.index($currentItem);
var $selectScope = currentIndex - prevIndex > 0
? $currentItem.prevAll().not($listItems.eq(prevIndex).prevAll().addBack())
: $listItems.eq(prevIndex).prevAll().not($currentItem.prevAll().addBack());
$selectScope.addClass('active').find('.list-view-pf-checkbox').children('input').prop('checked', true);
}
$list.data('preIndex', this.checked ? $listItems.index($currentItem) : -1);
});
});
</script>
</div>
Simple Expansion
Event One
The following snippet of text is rendered as link text.
8 Hosts
6 Clusters
10 Nodes
8 Images
Event Two
The following snippet of text is rendered as link text.
4 Hosts
2 Clusters
11 Nodes
6 Images
Event Three
The following snippet of text is rendered as link text.
4 Hosts
2 Clusters
10 Nodes
6 Images
Event Four
The following snippet of text is rendered as link text.
4 Hosts
2 Clusters
10 Nodes
6 Images
Event Five
The following snippet of text is rendered as link text.
4 Hosts
2 Clusters
10 Nodes
6 Images
Event Six
The following snippet of text is rendered as link text.
4 Hosts
2 Clusters
10 Nodes
6 Images
<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>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
// Donut configuration 1
var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig1.bindto = '#utilizationDonutChart61';
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("#utilizationDonutChart61", "60", "MHz Used");
// Donut configuration 2
var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig2.bindto = '#utilizationDonutChart62';
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("#utilizationDonutChart62", "60", "MHz Used");
// Donut configuration 3
var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig3.bindto = '#utilizationDonutChart63';
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("#utilizationDonutChart63", "60", "MHz Used");
// Donut configuration 4
var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');
donutConfig4.bindto = '#utilizationDonutChart64';
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("#utilizationDonutChart64", "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>
<script>
$(document).ready(function () {
// Row Checkbox Selection
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
// toggle dropdown menu
$('.list-view-pf-actions').on('show.bs.dropdown', function () {
var $this = $(this);
var $dropdown = $this.find('.dropdown');
var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
$dropdown.toggleClass('dropup', space < 10);
});
// click the list-view heading then expand a row
$(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
.end().parent().toggleClass("list-view-pf-expand-active")
.find(".list-group-item-container").toggleClass("hidden");
} else {
}
})
// click the close button, hide the expand row and remove the active status
$(".list-group-item-container .close").on("click", function (){
$(this).parent().addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".fa-angle-right").removeClass("fa-angle-down");
})
});
</script>
Compound Expansion
<div class="list-group list-view-pf list-view-pf-view">
<div class="list-group-item">
<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="dropdownKebabRight1" 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="dropdownKebabRight1">
<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">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<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">
<ul>
<li>Host 1</li>
<li>Host 2</li>
<li>Host 3</li>
<li>Host 4</li>
<li>Host 5</li>
<li>Host 6</li>
<li>Host 7</li>
<li>Host 8</li>
<li>Host 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>file1.nay.redhat.com</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 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">
<ul>
<li>Cluster 1</li>
<li>Cluster 2</li>
<li>Cluster 3</li>
<li>Cluster 4</li>
<li>Cluster 5</li>
<li>Cluster 6</li>
<li>Cluster 7</li>
<li>Cluster 8</li>
<li>Cluster 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Cluster Name</dt>
<dd>file2.nay.redhat.com</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 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">
<ul>
<li>Nodes 1</li>
<li>Nodes 2</li>
<li>Nodes 3</li>
<li>Nodes 4</li>
<li>Nodes 5</li>
<li>Nodes 6</li>
<li>Nodes 7</li>
<li>Nodes 8</li>
<li>Nodes 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Node Name</dt>
<dd>file3.nay.redhat.com</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 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">
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
<li>Image 7</li>
<li>Image 8</li>
<li>Image 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Image Name</dt>
<dd>file4.nay.redhat.com</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-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="dropdownKebabRight2" 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="dropdownKebabRight2">
<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">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<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">
<ul>
<li>Host 1</li>
<li>Host 2</li>
<li>Host 3</li>
<li>Host 4</li>
<li>Host 5</li>
<li>Host 6</li>
<li>Host 7</li>
<li>Host 8</li>
<li>Host 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>file1.nay.redhat.com</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 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">
<ul>
<li>Cluster 1</li>
<li>Cluster 2</li>
<li>Cluster 3</li>
<li>Cluster 4</li>
<li>Cluster 5</li>
<li>Cluster 6</li>
<li>Cluster 7</li>
<li>Cluster 8</li>
<li>Cluster 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Cluster Name</dt>
<dd>file2.nay.redhat.com</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 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">
<ul>
<li>Nodes 1</li>
<li>Nodes 2</li>
<li>Nodes 3</li>
<li>Nodes 4</li>
<li>Nodes 5</li>
<li>Nodes 6</li>
<li>Nodes 7</li>
<li>Nodes 8</li>
<li>Nodes 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Node Name</dt>
<dd>file3.nay.redhat.com</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 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">
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
<li>Image 7</li>
<li>Image 8</li>
<li>Image 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Image Name</dt>
<dd>file4.nay.redhat.com</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-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="dropdownKebabRight3" 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="dropdownKebabRight3">
<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">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<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">
<ul>
<li>Host 1</li>
<li>Host 2</li>
<li>Host 3</li>
<li>Host 4</li>
<li>Host 5</li>
<li>Host 6</li>
<li>Host 7</li>
<li>Host 8</li>
<li>Host 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>file1.nay.redhat.com</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 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">
<ul>
<li>Cluster 1</li>
<li>Cluster 2</li>
<li>Cluster 3</li>
<li>Cluster 4</li>
<li>Cluster 5</li>
<li>Cluster 6</li>
<li>Cluster 7</li>
<li>Cluster 8</li>
<li>Cluster 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Cluster Name</dt>
<dd>file2.nay.redhat.com</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 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">
<ul>
<li>Nodes 1</li>
<li>Nodes 2</li>
<li>Nodes 3</li>
<li>Nodes 4</li>
<li>Nodes 5</li>
<li>Nodes 6</li>
<li>Nodes 7</li>
<li>Nodes 8</li>
<li>Nodes 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Node Name</dt>
<dd>file3.nay.redhat.com</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 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">
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
<li>Image 7</li>
<li>Image 8</li>
<li>Image 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Image Name</dt>
<dd>file4.nay.redhat.com</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-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="dropdownKebabRight4" 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="dropdownKebabRight4">
<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">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<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">
<ul>
<li>Host 1</li>
<li>Host 2</li>
<li>Host 3</li>
<li>Host 4</li>
<li>Host 5</li>
<li>Host 6</li>
<li>Host 7</li>
<li>Host 8</li>
<li>Host 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>file1.nay.redhat.com</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 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">
<ul>
<li>Cluster 1</li>
<li>Cluster 2</li>
<li>Cluster 3</li>
<li>Cluster 4</li>
<li>Cluster 5</li>
<li>Cluster 6</li>
<li>Cluster 7</li>
<li>Cluster 8</li>
<li>Cluster 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Cluster Name</dt>
<dd>file2.nay.redhat.com</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 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">
<ul>
<li>Nodes 1</li>
<li>Nodes 2</li>
<li>Nodes 3</li>
<li>Nodes 4</li>
<li>Nodes 5</li>
<li>Nodes 6</li>
<li>Nodes 7</li>
<li>Nodes 8</li>
<li>Nodes 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Node Name</dt>
<dd>file3.nay.redhat.com</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 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">
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
<li>Image 7</li>
<li>Image 8</li>
<li>Image 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Image Name</dt>
<dd>file4.nay.redhat.com</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-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="dropdownKebabRight5" 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="dropdownKebabRight5">
<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">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<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">
<ul>
<li>Host 1</li>
<li>Host 2</li>
<li>Host 3</li>
<li>Host 4</li>
<li>Host 5</li>
<li>Host 6</li>
<li>Host 7</li>
<li>Host 8</li>
<li>Host 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>file1.nay.redhat.com</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 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">
<ul>
<li>Cluster 1</li>
<li>Cluster 2</li>
<li>Cluster 3</li>
<li>Cluster 4</li>
<li>Cluster 5</li>
<li>Cluster 6</li>
<li>Cluster 7</li>
<li>Cluster 8</li>
<li>Cluster 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Cluster Name</dt>
<dd>file2.nay.redhat.com</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 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">
<ul>
<li>Nodes 1</li>
<li>Nodes 2</li>
<li>Nodes 3</li>
<li>Nodes 4</li>
<li>Nodes 5</li>
<li>Nodes 6</li>
<li>Nodes 7</li>
<li>Nodes 8</li>
<li>Nodes 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Node Name</dt>
<dd>file3.nay.redhat.com</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 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">
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
<li>Image 7</li>
<li>Image 8</li>
<li>Image 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Image Name</dt>
<dd>file4.nay.redhat.com</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-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="dropdownKebabRight6" 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="dropdownKebabRight6">
<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">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-cluster"></span>
<strong>6</strong> Clusters
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<span class="pficon pficon-container-node"></span>
<strong>10</strong> Nodes
</div>
</div>
<div class="list-view-pf-additional-info-item">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
<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">
<ul>
<li>Host 1</li>
<li>Host 2</li>
<li>Host 3</li>
<li>Host 4</li>
<li>Host 5</li>
<li>Host 6</li>
<li>Host 7</li>
<li>Host 8</li>
<li>Host 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host Name</dt>
<dd>file1.nay.redhat.com</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 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">
<ul>
<li>Cluster 1</li>
<li>Cluster 2</li>
<li>Cluster 3</li>
<li>Cluster 4</li>
<li>Cluster 5</li>
<li>Cluster 6</li>
<li>Cluster 7</li>
<li>Cluster 8</li>
<li>Cluster 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Cluster Name</dt>
<dd>file2.nay.redhat.com</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 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">
<ul>
<li>Nodes 1</li>
<li>Nodes 2</li>
<li>Nodes 3</li>
<li>Nodes 4</li>
<li>Nodes 5</li>
<li>Nodes 6</li>
<li>Nodes 7</li>
<li>Nodes 8</li>
<li>Nodes 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Node Name</dt>
<dd>file3.nay.redhat.com</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 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">
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
<li>Image 7</li>
<li>Image 8</li>
<li>Image 9</li>
</ul>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Image Name</dt>
<dd>file4.nay.redhat.com</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>
<script>
$(document).ready(function () {
// Row Checkbox Selection
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
// toggle dropdown menu
$(".list-view-pf-actions").on("show.bs.dropdown", function () {
var $this = $(this);
var $dropdown = $this.find(".dropdown");
var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find(".dropdown-menu").outerHeight(true);
$dropdown.toggleClass("dropup", space < 10);
});
// compound expansion
$(".list-view-pf-expand").on("click", function () {
var $this = $(this);
var $heading = $(this).parents(".list-group-item");
//var $row = $heading.parent();
var $subPanels = $heading.find(".list-group-item-container");
var index = $heading.find(".list-view-pf-expand").index(this);
//Remove all active status
$heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
.end().removeClass("active")
.end().removeClass("list-view-pf-expand-active");
// Add active to the clicked item
$(this).addClass("active")
.parents(".list-group-item").addClass("list-view-pf-expand-active")
.end().find(".fa-angle-right").addClass("fa-angle-down");
// check if it needs to hide
if($subPanels.eq(index).hasClass("hidden")){
$heading.find(".list-group-item-container:visible").addClass("hidden");
$subPanels.eq(index).removeClass("hidden");
} else {
$subPanels.eq(index).addClass("hidden");
$heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
.end().removeClass("active")
.end().removeClass("list-view-pf-expand-active");
}
});
// click close button to close the panel
$(".list-group-item-container .close").on("click", function (){
var $this = $(this);
var $panel = $this.parent();
// close the container and remove the active status
$panel.addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".list-view-pf-expand.active").removeClass("active")
.find(".fa-angle-right").removeClass("fa-angle-down")
});
});
</script>
Default Row
Event One
The following snippet of text is rendered as link text.
8 Hosts
8 Clusters
18 Nodes
4 Images
<div class="list-group list-view-pf">
<div class="list-group-item">
<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="dropdownKebabRight" 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="dropdownKebabRight">
<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>8</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>18</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>4</strong> Images
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
});
</script>
Row Variation #1
This is EVENT One that is with very LONG and should not overflow and push other elements out of the bounding box.
Feb 23, 2015 12:32 am
The following snippet of text is rendered as link text.
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked">
<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="dropdownKebabRight15" 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="dropdownKebabRight15">
<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-lg"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
This is EVENT One that is with very LONG and should not overflow and push other elements out of the bounding box.
<small>Feb 23, 2015 12:32 am</small>
</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 list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-5"></span>
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-6"></span>
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-7"></span>
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
<span id="donut-chart-8"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Donut Charts
var c3ChartDefaults = $().c3ChartDefaults();
var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-5';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 34],
["Available", 86]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
var donutChartTitle = d3.select("#donut-chart-5").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-6';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 21],
["Available", 79]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
donutChartTitle = d3.select("#donut-chart-6").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-7';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 14],
["Available", 86]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
donutChartTitle = d3.select("#donut-chart-7").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
customDonutChartConfig.size.height = 71;
customDonutChartConfig.size.width = 60;
customDonutChartConfig.donut.width = 5;
customDonutChartConfig.bindto = '#donut-chart-8';
customDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 25],
["Available", 75]
],
groups: [
["used", "available"]
],
order: null
};
c3.generate(customDonutChartConfig);
donutChartTitle = d3.select("#donut-chart-8").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
</script>
Row Variation #2
March
29
Event One
The following snippet of text is rendered as link text.
8 Clusters
8 Hosts
18
Nodes
4 Images
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked">
<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="dropdownKebabRight2" 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="dropdownKebabRight2">
<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">
<div class="list-view-pf-calendar">
March
<strong>29</strong>
</div>
</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> Clusters
</div>
<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-container-node"></span>
<strong>18</strong>
Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>4</strong> Images
</div>
</div>
</div>
</div>
</div>
</div>
Row Variation #3
Event Ones
The following snippet of text is rendered as link text.
113,735 Service One
35% Service Two
22.0% Service Three
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<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="dropdownKebabRight3" 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="dropdownKebabRight3">
<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-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Ones
</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 list-view-pf-additional-info-item-stacked">
<strong>113,735</strong> Service One
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>35%</strong> Service Two
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>22.0%</strong> Service Three
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
});
</script>
Row Variation #4
Event One
The following snippet of text is rendered as link text.
8 Hosts
8 Clusters
<div class="list-group list-view-pf">
<div class="list-group-item">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</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>8</strong> Clusters
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
});
</script>
Row Variation #5
Event One
The following snippet of text is rendered as link text.
108 Hosts
28 Clusters
Event One
The following snippet of text is rendered as link text.
8 Hosts
28 Clusters
Event One
The following snippet of text is rendered as link text.
108 Hosts
28 Clusters
Event One
The following snippet of text is rendered as link text.
8 Hosts
28 Clusters
<div class="list-group list-view-pf list-view-pf-equalized-column">
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-ok list-view-pf-icon-md list-view-pf-icon-success"></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>108</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-info list-view-pf-icon-md list-view-pf-icon-info"></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>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-warning-triangle-o list-view-pf-icon-md list-view-pf-icon-warning"></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>108</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-error-circle-o list-view-pf-icon-md list-view-pf-icon-danger"></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>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Equalize column width
$(document).ready(function () {
var widest = 0;
$('.list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
widest = $(this).width() > widest ? $(this).width() : widest;
}).width(widest);
});
</script>
Row Variation #6
Event One
The following snippet of text is rendered as link text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
8 Clusters
35% Service Two
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<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="dropdownKebabRight4" 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="dropdownKebabRight4">
<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>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<img src="http://placehold.it/60x60" alt="placeholder image">
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>8</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>35%</strong> Service Two
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
});
</script>