patternfly-sass 3.9.0 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +1 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
- data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
- data/assets/javascripts/patternfly.js +18 -19
- data/assets/javascripts/patternfly.min.js +2 -2
- data/assets/stylesheets/patternfly/_blank-slate.scss +4 -4
- data/assets/stylesheets/patternfly/_bootstrap-treeview.scss +20 -0
- data/assets/stylesheets/patternfly/_card-view.scss +2 -2
- data/assets/stylesheets/patternfly/_cards.scss +2 -4
- data/assets/stylesheets/patternfly/_charts.scss +1 -1
- data/assets/stylesheets/patternfly/_datatables.scss +1 -3
- data/assets/stylesheets/patternfly/_fonts.scss +30 -30
- data/assets/stylesheets/patternfly/_footer.scss +1 -1
- data/assets/stylesheets/patternfly/_forms.scss +1 -1
- data/assets/stylesheets/patternfly/_icons.scss +10 -7
- data/assets/stylesheets/patternfly/_infotip.scss +0 -4
- data/assets/stylesheets/patternfly/_layouts.scss +36 -11
- data/assets/stylesheets/patternfly/_list-group.scss +0 -16
- data/assets/stylesheets/patternfly/_list-view.scss +8 -13
- data/assets/stylesheets/patternfly/_login.scss +1 -1
- data/assets/stylesheets/patternfly/_mixin_overrides.scss +8 -6
- data/assets/stylesheets/patternfly/_mixins.scss +9 -7
- data/assets/stylesheets/patternfly/_nav-vertical-alt.scss +3 -3
- data/assets/stylesheets/patternfly/_navbar-alt.scss +4 -2
- data/assets/stylesheets/patternfly/_navbar-vertical.scss +2 -2
- data/assets/stylesheets/patternfly/_notifications-drawer.scss +1 -1
- data/assets/stylesheets/patternfly/_pager.scss +0 -4
- data/assets/stylesheets/patternfly/_progress-bars.scss +0 -7
- data/assets/stylesheets/patternfly/_search.scss +1 -2
- data/assets/stylesheets/patternfly/_sidebar.scss +1 -1
- data/assets/stylesheets/patternfly/_spinner.scss +1 -8
- data/assets/stylesheets/patternfly/_tables.scss +2 -2
- data/assets/stylesheets/patternfly/_time-picker.scss +1 -1
- data/assets/stylesheets/patternfly/_toast.scss +1 -1
- data/assets/stylesheets/patternfly/_toolbar.scss +30 -72
- data/assets/stylesheets/patternfly/_tooltip.scss +1 -1
- data/assets/stylesheets/patternfly/_variables.scss +9 -5
- data/assets/stylesheets/patternfly/_vertical-nav.scss +431 -269
- data/assets/stylesheets/patternfly/_wizard.scss +9 -11
- data/assets/stylesheets/patternfly/lib/bootstrap-touchspin.scss +1 -1
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/about-modal.html +0 -1
- data/spec/html/accordions.html +0 -1
- data/spec/html/alerts.html +0 -1
- data/spec/html/area-charts.html +0 -1
- data/spec/html/badges.html +0 -1
- data/spec/html/bar-charts.html +0 -1
- data/spec/html/blank-slate.html +0 -1
- data/spec/html/bootstrap-combobox.html +0 -1
- data/spec/html/bootstrap-datepicker.html +0 -1
- data/spec/html/bootstrap-select.html +0 -1
- data/spec/html/bootstrap-switch.html +0 -2
- data/spec/html/bootstrap-touchspin.html +0 -1
- data/spec/html/bootstrap-treeview.html +157 -25
- data/spec/html/breadcrumbs.html +0 -1
- data/spec/html/buttons.html +0 -1
- data/spec/html/card-view-card-variations.html +10 -11
- data/spec/html/card-view-multi-select.html +97 -91
- data/spec/html/card-view-single-select.html +97 -91
- data/spec/html/code.html +0 -1
- data/spec/html/datatables-columns.html +0 -1
- data/spec/html/datatables.html +0 -1
- data/spec/html/dist/css/patternfly-additions.css +555 -383
- data/spec/html/dist/css/patternfly-additions.css.map +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css +2 -3
- data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
- data/spec/html/dist/css/patternfly.css +27 -164
- data/spec/html/dist/css/patternfly.css.map +1 -1
- data/spec/html/dist/css/patternfly.min.css +3 -4
- data/spec/html/dist/css/patternfly.min.css.map +1 -1
- data/spec/html/donut-charts.html +0 -1
- data/spec/html/dropdowns.html +2 -3
- data/spec/html/forms.html +2 -3
- data/spec/html/icons.html +4 -1
- data/spec/html/index.html +3 -1
- data/spec/html/infotip.html +0 -1
- data/spec/html/labels.html +0 -1
- data/spec/html/line-charts.html +0 -1
- data/spec/html/list-group.html +0 -1
- data/spec/html/list-view-rows.html +2 -3
- data/spec/html/list-view.html +117 -104
- data/spec/html/modals.html +0 -1
- data/spec/html/navbar.html +0 -1
- data/spec/html/notification-drawer-horizontal-nav.html +84 -56
- data/spec/html/notification-drawer-vertical-nav.html +92 -58
- data/spec/html/pagination.html +0 -1
- data/spec/html/panels.html +0 -1
- data/spec/html/pie-charts.html +0 -1
- data/spec/html/popovers.html +0 -1
- data/spec/html/progress-bars.html +0 -1
- data/spec/html/search.html +10 -11
- data/spec/html/spinner.html +0 -1
- data/spec/html/tables.html +0 -1
- data/spec/html/tabs.html +0 -1
- data/spec/html/time-picker.html +0 -1
- data/spec/html/toast.html +0 -1
- data/spec/html/toolbar.html +98 -93
- data/spec/html/tooltip.html +0 -1
- data/spec/html/typography.html +0 -1
- data/spec/html/utilization-bar-charts.html +0 -1
- data/spec/html/vertical-navigation-primary-only.html +8 -2
- data/spec/html/vertical-navigation-with-badges.html +1128 -0
- data/spec/html/vertical-navigation-with-secondary.html +8 -2
- data/spec/html/vertical-navigation-with-tertiary-no-icons.html +9 -3
- data/spec/html/vertical-navigation-with-tertiary-pins.html +8 -2
- data/spec/html/wizard.html +1 -1
- data/tasks/converter.rb +22 -1
- metadata +4 -2
data/spec/html/pagination.html
CHANGED
data/spec/html/panels.html
CHANGED
data/spec/html/pie-charts.html
CHANGED
data/spec/html/popovers.html
CHANGED
data/spec/html/search.html
CHANGED
|
@@ -29,7 +29,6 @@
|
|
|
29
29
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
30
30
|
<script src="../../dist/js/patternfly.min.js"></script>
|
|
31
31
|
</head>
|
|
32
|
-
</div>
|
|
33
32
|
|
|
34
33
|
<body>
|
|
35
34
|
<div class="container">
|
|
@@ -57,8 +56,8 @@
|
|
|
57
56
|
<form role="form" class="search-pf has-button">
|
|
58
57
|
<div class="form-group has-clear">
|
|
59
58
|
<div class="search-pf-input-group">
|
|
60
|
-
<label for="
|
|
61
|
-
<input id="
|
|
59
|
+
<label for="search2" class="sr-only">Search</label>
|
|
60
|
+
<input id="search2" type="search" class="form-control" placeholder="Search" value="Search term">
|
|
62
61
|
<button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
|
|
63
62
|
</div>
|
|
64
63
|
</div>
|
|
@@ -70,8 +69,8 @@
|
|
|
70
69
|
<form role="form" class="search-pf">
|
|
71
70
|
<div class="form-group has-clear">
|
|
72
71
|
<div class="search-pf-input-group">
|
|
73
|
-
<label for="
|
|
74
|
-
<input id="
|
|
72
|
+
<label for="search3" class="sr-only">Search</label>
|
|
73
|
+
<input id="search3" type="search" class="form-control" placeholder="Search">
|
|
75
74
|
<button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
|
|
76
75
|
</div>
|
|
77
76
|
</div>
|
|
@@ -80,8 +79,8 @@
|
|
|
80
79
|
<form role="form" class="search-pf has-button">
|
|
81
80
|
<div class="form-group">
|
|
82
81
|
<div class="search-pf-input-group">
|
|
83
|
-
<label for="
|
|
84
|
-
<input id="
|
|
82
|
+
<label for="search4" class="sr-only">Search</label>
|
|
83
|
+
<input id="search4" type="search" class="form-control" placeholder="Search">
|
|
85
84
|
</div>
|
|
86
85
|
</div>
|
|
87
86
|
<div class="form-group">
|
|
@@ -105,8 +104,8 @@
|
|
|
105
104
|
<form role="form" class="search-pf has-button">
|
|
106
105
|
<div class="form-group has-clear">
|
|
107
106
|
<div class="search-pf-input-group">
|
|
108
|
-
<label for="
|
|
109
|
-
<input id="
|
|
107
|
+
<label for="search5" class="sr-only">Search</label>
|
|
108
|
+
<input id="search5" type="search" class="form-control" placeholder="Search">
|
|
110
109
|
<button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
|
|
111
110
|
</div>
|
|
112
111
|
</div>
|
|
@@ -133,8 +132,8 @@
|
|
|
133
132
|
<form role="form" class="search-pf has-button">
|
|
134
133
|
<div class="form-group has-clear">
|
|
135
134
|
<div class="search-pf-input-group">
|
|
136
|
-
<label for="
|
|
137
|
-
<input id="
|
|
135
|
+
<label for="search6" class="sr-only">Search</label>
|
|
136
|
+
<input id="search6" type="search" class="form-control" placeholder="Search">
|
|
138
137
|
<button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>
|
|
139
138
|
</div>
|
|
140
139
|
</div>
|
data/spec/html/spinner.html
CHANGED
data/spec/html/tables.html
CHANGED
data/spec/html/tabs.html
CHANGED
data/spec/html/time-picker.html
CHANGED
data/spec/html/toast.html
CHANGED
data/spec/html/toolbar.html
CHANGED
|
@@ -29,7 +29,6 @@
|
|
|
29
29
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
30
30
|
<script src="../../dist/js/patternfly.min.js"></script>
|
|
31
31
|
</head>
|
|
32
|
-
</div>
|
|
33
32
|
|
|
34
33
|
<body>
|
|
35
34
|
<div class="container">
|
|
@@ -41,92 +40,101 @@
|
|
|
41
40
|
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
|
|
42
41
|
</div>
|
|
43
42
|
<hr>
|
|
44
|
-
<h2>Toolbar</h2>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
43
|
+
<h2>Toolbar with Horizontal Navigation</h2>
|
|
44
|
+
<nav class="navbar navbar-default navbar-pf" role="navigation">
|
|
45
|
+
<div class="navbar-header">
|
|
46
|
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
|
|
47
|
+
<span class="sr-only">Toggle navigation</span>
|
|
48
|
+
<span class="icon-bar"></span>
|
|
49
|
+
<span class="icon-bar"></span>
|
|
50
|
+
<span class="icon-bar"></span>
|
|
51
|
+
</button>
|
|
52
|
+
<a class="navbar-brand" href="/">
|
|
53
|
+
<img src="../../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
|
|
54
|
+
</a>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="collapse navbar-collapse navbar-collapse-1">
|
|
57
|
+
<ul class="nav navbar-nav navbar-utility">
|
|
58
|
+
<li>
|
|
59
|
+
<a href="#">Status</a>
|
|
60
|
+
</li>
|
|
61
|
+
<li class="dropdown">
|
|
62
|
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
63
|
+
<span class="pficon pficon-user"></span>
|
|
64
|
+
Brian Johnson <b class="caret"></b>
|
|
65
|
+
</a>
|
|
66
|
+
<ul class="dropdown-menu">
|
|
67
|
+
<li>
|
|
68
|
+
<a href="#">Link</a>
|
|
69
|
+
</li>
|
|
70
|
+
<li>
|
|
71
|
+
<a href="#">Another link</a>
|
|
72
|
+
</li>
|
|
73
|
+
<li>
|
|
74
|
+
<a href="#">Something else here</a>
|
|
75
|
+
</li>
|
|
76
|
+
<li class="divider"></li>
|
|
77
|
+
<li class="dropdown-submenu">
|
|
78
|
+
<a tabindex="-1" href="#">More options</a>
|
|
79
|
+
<ul class="dropdown-menu">
|
|
80
|
+
<li>
|
|
81
|
+
<a href="#">Link</a>
|
|
82
|
+
</li>
|
|
83
|
+
<li>
|
|
84
|
+
<a href="#">Another link</a>
|
|
85
|
+
</li>
|
|
86
|
+
<li>
|
|
87
|
+
<a href="#">Something else here</a>
|
|
88
|
+
</li>
|
|
89
|
+
<li class="divider"></li>
|
|
90
|
+
<li class="dropdown-header">Nav header</li>
|
|
91
|
+
<li>
|
|
92
|
+
<a href="#">Separated link</a>
|
|
93
|
+
</li>
|
|
94
|
+
<li class="divider"></li>
|
|
95
|
+
<li>
|
|
96
|
+
<a href="#">One more separated link</a>
|
|
97
|
+
</li>
|
|
98
|
+
</ul>
|
|
99
|
+
</li>
|
|
100
|
+
<li class="divider"></li>
|
|
101
|
+
<li>
|
|
102
|
+
<a href="#">One more separated link</a>
|
|
103
|
+
</li>
|
|
104
|
+
</ul>
|
|
105
|
+
</li>
|
|
106
|
+
</ul>
|
|
107
|
+
<ul class="nav navbar-nav navbar-primary">
|
|
108
|
+
<li>
|
|
109
|
+
<a href="basic.html">Basic</a>
|
|
110
|
+
</li>
|
|
111
|
+
<li>
|
|
112
|
+
<a href="bootstrap-treeview-2.html">Tree View</a>
|
|
113
|
+
</li>
|
|
114
|
+
<li>
|
|
115
|
+
<a href="dashboard.html">Dashboard</a>
|
|
116
|
+
</li>
|
|
117
|
+
<li>
|
|
118
|
+
<a href="form.html">Form</a>
|
|
119
|
+
</li>
|
|
120
|
+
<li>
|
|
121
|
+
<a href="tab.html">Tab</a>
|
|
122
|
+
</li>
|
|
123
|
+
<li>
|
|
124
|
+
<a href="typography-2.html">Typography</a>
|
|
125
|
+
</li>
|
|
126
|
+
<li>
|
|
127
|
+
<a href="card-view-multi-select.html">Card View - Multi Select</a>
|
|
128
|
+
</li>
|
|
129
|
+
<li>
|
|
130
|
+
<a href="card-view-single-select.html">Card View - Single Select</a>
|
|
131
|
+
</li>
|
|
132
|
+
<li>
|
|
133
|
+
<a href="cards.html">Cards</a>
|
|
134
|
+
</li>
|
|
135
|
+
</ul>
|
|
136
|
+
</div>
|
|
137
|
+
</nav>
|
|
130
138
|
|
|
131
139
|
<div class="container-fluid">
|
|
132
140
|
<div class="row toolbar-pf">
|
|
@@ -202,11 +210,9 @@
|
|
|
202
210
|
</div>
|
|
203
211
|
</div>
|
|
204
212
|
<div class="form-group toolbar-pf-view-selector">
|
|
205
|
-
<
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
<li><a href="#"><i class="fa fa-th-list"></i></a></li>
|
|
209
|
-
</ul>
|
|
213
|
+
<button class="btn btn-link"><i class="fa fa-th"></i></button>
|
|
214
|
+
<button class="btn btn-link active"><i class="fa fa-th-large"></i></button>
|
|
215
|
+
<button class="btn btn-link"><i class="fa fa-th-list"></i></button>
|
|
210
216
|
</div>
|
|
211
217
|
</div>
|
|
212
218
|
</form>
|
|
@@ -255,7 +261,6 @@
|
|
|
255
261
|
});
|
|
256
262
|
})(jQuery);
|
|
257
263
|
</script>
|
|
258
|
-
|
|
259
264
|
</div><!-- /container -->
|
|
260
265
|
</body>
|
|
261
266
|
</html>
|
data/spec/html/tooltip.html
CHANGED
data/spec/html/typography.html
CHANGED
|
@@ -110,6 +110,7 @@
|
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
|
|
113
|
+
|
|
113
114
|
">
|
|
114
115
|
<ul class="list-group">
|
|
115
116
|
<li class="list-group-item">
|
|
@@ -122,6 +123,7 @@
|
|
|
122
123
|
<a>
|
|
123
124
|
<span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
|
|
124
125
|
<span class="list-group-item-value">Dolor</span>
|
|
126
|
+
|
|
125
127
|
</a>
|
|
126
128
|
</li>
|
|
127
129
|
<li class="list-group-item active " data-target="#ipsum-secondary">
|
|
@@ -152,8 +154,12 @@
|
|
|
152
154
|
</li>
|
|
153
155
|
</ul>
|
|
154
156
|
</div>
|
|
155
|
-
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
|
|
156
|
-
|
|
157
|
+
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
">
|
|
161
|
+
|
|
162
|
+
<div class="row row-cards-pf">
|
|
157
163
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
158
164
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
159
165
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
@@ -0,0 +1,1128 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf layout-pf-fixed"><![endif]-->
|
|
3
|
+
<!--[if gt IE 9]><!-->
|
|
4
|
+
<html lang="en-us" class="layout-pf layout-pf-fixed">
|
|
5
|
+
<!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<title>Vertical Navigation with Tertiary Navigation (badges) - PatternFly</title>
|
|
8
|
+
<meta charset="UTF-8">
|
|
9
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
+
<link rel="shortcut icon" href="../../dist/img/favicon.ico">
|
|
12
|
+
<!-- iPad retina icon -->
|
|
13
|
+
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
|
|
14
|
+
<!-- iPad retina icon (iOS < 7) -->
|
|
15
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
|
|
16
|
+
<!-- iPad non-retina icon -->
|
|
17
|
+
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
|
|
18
|
+
<!-- iPad non-retina icon (iOS < 7) -->
|
|
19
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
|
|
20
|
+
<!-- iPhone 6 Plus icon -->
|
|
21
|
+
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
|
|
22
|
+
<!-- iPhone retina icon (iOS < 7) -->
|
|
23
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
|
|
24
|
+
<!-- iPhone non-retina icon (iOS < 7) -->
|
|
25
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
|
|
26
|
+
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
|
|
27
|
+
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
|
|
28
|
+
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
29
|
+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
30
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
|
|
31
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
|
|
32
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
|
|
33
|
+
<script src="../../dist/js/patternfly.min.js"></script>
|
|
34
|
+
</head>
|
|
35
|
+
<div class="toast-notifications-list-pf">
|
|
36
|
+
<div class="toast-pf alert alert-warning alert-dismissable">
|
|
37
|
+
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
|
|
38
|
+
<span class="pficon pficon-close"></span>
|
|
39
|
+
</button>
|
|
40
|
+
<span class="pficon pficon-warning-triangle-o"></span>
|
|
41
|
+
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<body class="cards-pf">
|
|
46
|
+
|
|
47
|
+
<nav class="navbar navbar-pf-vertical">
|
|
48
|
+
<div class="navbar-header">
|
|
49
|
+
<button type="button" class="navbar-toggle">
|
|
50
|
+
<span class="sr-only">Toggle navigation</span>
|
|
51
|
+
<span class="icon-bar"></span>
|
|
52
|
+
<span class="icon-bar"></span>
|
|
53
|
+
<span class="icon-bar"></span>
|
|
54
|
+
</button>
|
|
55
|
+
<a href="/" class="navbar-brand">
|
|
56
|
+
<img class="navbar-brand-icon" src="../../dist/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="../../dist/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
|
|
57
|
+
</a>
|
|
58
|
+
</div>
|
|
59
|
+
<nav class="collapse navbar-collapse">
|
|
60
|
+
<ul class="nav navbar-nav">
|
|
61
|
+
<li><a href="#" target="_blank" class="nav-item-iconic nav-item-iconic-new-window"><span title="Launch" class="fa fa-external-link"></span></a></li>
|
|
62
|
+
</ul>
|
|
63
|
+
<ul class="nav navbar-nav navbar-right navbar-iconic">
|
|
64
|
+
<li class="dropdown">
|
|
65
|
+
<a class="dropdown-toggle nav-item-iconic" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
66
|
+
<span title="Notifications" class="fa pficon-flag"></span>
|
|
67
|
+
<span class="badge">2</span>
|
|
68
|
+
</a>
|
|
69
|
+
<div class="dropdown-menu infotip bottom-right">
|
|
70
|
+
<div class="arrow"></div>
|
|
71
|
+
<ul class="list-group">
|
|
72
|
+
<li class="list-group-item">
|
|
73
|
+
<span class="i pficon pficon-info"></span> Modified Datasources ExampleDS
|
|
74
|
+
</li>
|
|
75
|
+
<li class="list-group-item">
|
|
76
|
+
<span class="i pficon pficon-info"></span> Error: System Failure
|
|
77
|
+
</li>
|
|
78
|
+
</ul>
|
|
79
|
+
<div class="footer">
|
|
80
|
+
<a>Clear Messages</a>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</li>
|
|
84
|
+
<li class="dropdown">
|
|
85
|
+
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
86
|
+
<span title="Help" class="fa pficon-help"></span>
|
|
87
|
+
<span class="caret"></span>
|
|
88
|
+
</a>
|
|
89
|
+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
|
90
|
+
<li><a href="#">Help</a></li>
|
|
91
|
+
<li><a href="#">About</a></li>
|
|
92
|
+
</ul>
|
|
93
|
+
</li>
|
|
94
|
+
<li class="dropdown">
|
|
95
|
+
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
96
|
+
<span title="Username" class="fa pficon-user"></span>
|
|
97
|
+
<span class="caret"></span>
|
|
98
|
+
</a>
|
|
99
|
+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
|
100
|
+
<li><a href="#">Preferences</a></li>
|
|
101
|
+
<li><a href="#">Logout</a></li>
|
|
102
|
+
</ul>
|
|
103
|
+
</li>
|
|
104
|
+
</ul>
|
|
105
|
+
</nav>
|
|
106
|
+
</nav> <!--/.navbar-->
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
<div class="nav-pf-vertical
|
|
110
|
+
nav-pf-vertical-with-sub-menus hide-nav-pf
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
nav-pf-vertical-with-badges">
|
|
115
|
+
<ul class="list-group">
|
|
116
|
+
<li class="list-group-item">
|
|
117
|
+
<a>
|
|
118
|
+
<span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
|
|
119
|
+
<span class="list-group-item-value">Dashboard</span>
|
|
120
|
+
</a>
|
|
121
|
+
</li>
|
|
122
|
+
<li class="list-group-item">
|
|
123
|
+
<a>
|
|
124
|
+
<span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
|
|
125
|
+
<span class="list-group-item-value">Dolor</span>
|
|
126
|
+
|
|
127
|
+
<div class="badge-container-pf">
|
|
128
|
+
<span class="badge">1283</span>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
</a>
|
|
132
|
+
</li>
|
|
133
|
+
<li class="list-group-item active secondary-nav-item-pf" data-target="#ipsum-secondary">
|
|
134
|
+
<a>
|
|
135
|
+
<span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
|
|
136
|
+
<span class="list-group-item-value">Ipsum</span>
|
|
137
|
+
</a>
|
|
138
|
+
|
|
139
|
+
<div id="-secondary" class="nav-pf-secondary-nav">
|
|
140
|
+
<div class="nav-item-pf-header">
|
|
141
|
+
<a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
|
|
142
|
+
<span>Ipsum</span>
|
|
143
|
+
</div>
|
|
144
|
+
<ul class="list-group">
|
|
145
|
+
<li class="list-group-item active tertiary-nav-item-pf" data-target="#ipsum-intellegam-tertiary">
|
|
146
|
+
<a>
|
|
147
|
+
<span class="list-group-item-value">Intellegam</span>
|
|
148
|
+
</a>
|
|
149
|
+
|
|
150
|
+
<div id="compute-containers-tertiary" class="nav-pf-tertiary-nav">
|
|
151
|
+
<div class="nav-item-pf-header">
|
|
152
|
+
<a class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
|
|
153
|
+
<span>Intellegam</span>
|
|
154
|
+
</div>
|
|
155
|
+
<ul class="list-group">
|
|
156
|
+
<li class="list-group-item active">
|
|
157
|
+
<a>
|
|
158
|
+
<span id="compute-containers-users-nav-item" class="list-group-item-value">Recteque</span>
|
|
159
|
+
|
|
160
|
+
<div class="badge-container-pf">
|
|
161
|
+
<div class="badge">
|
|
162
|
+
<span class="pficon pficon-error-circle-o"></span>
|
|
163
|
+
<span>10</span>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="badge">
|
|
166
|
+
<span class="pficon pficon-warning-triangle-o"></span>
|
|
167
|
+
<span>4</span>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
</a>
|
|
172
|
+
</li>
|
|
173
|
+
<li class="list-group-item">
|
|
174
|
+
<a>
|
|
175
|
+
<span id="compute-containers-groups-nav-item" class="list-group-item-value">Suavitate</span>
|
|
176
|
+
|
|
177
|
+
<div class="badge-container-pf">
|
|
178
|
+
<div class="badge">
|
|
179
|
+
<span class="pficon pficon-error-circle-o"></span>
|
|
180
|
+
<span>1</span>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="badge">
|
|
183
|
+
<span class="pficon pficon-warning-triangle-o"></span>
|
|
184
|
+
<span>3</span>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
</a>
|
|
189
|
+
</li>
|
|
190
|
+
<li class="list-group-item">
|
|
191
|
+
<a>
|
|
192
|
+
<span id="compute-containers-roles-nav-item" class="list-group-item-value">Vituperatoribus</span>
|
|
193
|
+
|
|
194
|
+
<div class="badge-container-pf">
|
|
195
|
+
<div class="badge">
|
|
196
|
+
<span class="pficon pficon-error-circle-o"></span>
|
|
197
|
+
<span>3</span>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="badge">
|
|
200
|
+
<span class="pficon pficon-warning-triangle-o"></span>
|
|
201
|
+
<span>1</span>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
</a>
|
|
206
|
+
</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
</li>
|
|
212
|
+
<li class="list-group-item tertiary-nav-item-pf" data-target="#ipsum-copiosae-tertiary">
|
|
213
|
+
<a>
|
|
214
|
+
<span class="list-group-item-value">Copiosae</span>
|
|
215
|
+
</a>
|
|
216
|
+
|
|
217
|
+
<div id="compute-infrastructure-tertiary" class="nav-pf-tertiary-nav">
|
|
218
|
+
<div class="nav-item-pf-header">
|
|
219
|
+
<a class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
|
|
220
|
+
<span>Copiosae</span>
|
|
221
|
+
</div>
|
|
222
|
+
<ul class="list-group">
|
|
223
|
+
<li class="list-group-item">
|
|
224
|
+
<a>
|
|
225
|
+
<span class="list-group-item-value">Exerci</span>
|
|
226
|
+
|
|
227
|
+
<div class="badge-container-pf">
|
|
228
|
+
<span class="badge">10</span>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
</a>
|
|
232
|
+
</li>
|
|
233
|
+
<li class="list-group-item">
|
|
234
|
+
<a>
|
|
235
|
+
<span class="list-group-item-value">Quaeque</span>
|
|
236
|
+
|
|
237
|
+
<div class="badge-container-pf">
|
|
238
|
+
<span class="badge">3</span>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
</a>
|
|
242
|
+
</li>
|
|
243
|
+
<li class="list-group-item">
|
|
244
|
+
<a>
|
|
245
|
+
<span class="list-group-item-value">Utroque</span>
|
|
246
|
+
|
|
247
|
+
<div class="badge-container-pf">
|
|
248
|
+
<span class="badge">5</span>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
</a>
|
|
252
|
+
</li>
|
|
253
|
+
</ul>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
</li>
|
|
258
|
+
<li class="list-group-item tertiary-nav-item-pf" data-target="#ipsum-patrioque-tertiary">
|
|
259
|
+
<a>
|
|
260
|
+
<span class="list-group-item-value">Patrioque</span>
|
|
261
|
+
</a>
|
|
262
|
+
|
|
263
|
+
<div id="compute-clouds-tertiary" class="nav-pf-tertiary-nav">
|
|
264
|
+
<div class="nav-item-pf-header">
|
|
265
|
+
<a class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
|
|
266
|
+
<span>Patrioque</span>
|
|
267
|
+
</div>
|
|
268
|
+
<ul class="list-group">
|
|
269
|
+
<li class="list-group-item">
|
|
270
|
+
<a>
|
|
271
|
+
<span class="list-group-item-value">Novum</span>
|
|
272
|
+
|
|
273
|
+
<div class="badge-container-pf">
|
|
274
|
+
<span class="badge">10</span>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
</a>
|
|
278
|
+
</li>
|
|
279
|
+
<li class="list-group-item">
|
|
280
|
+
<a>
|
|
281
|
+
<span class="list-group-item-value">Pericula</span>
|
|
282
|
+
</a>
|
|
283
|
+
</li>
|
|
284
|
+
<li class="list-group-item">
|
|
285
|
+
<a>
|
|
286
|
+
<span class="list-group-item-value">Gubergren</span>
|
|
287
|
+
</a>
|
|
288
|
+
</li>
|
|
289
|
+
</ul>
|
|
290
|
+
</div>
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
</li>
|
|
294
|
+
|
|
295
|
+
<li class="list-group-item">
|
|
296
|
+
<a>
|
|
297
|
+
<span class="list-group-item-value">Accumsan</span>
|
|
298
|
+
|
|
299
|
+
<div class="badge-container-pf">
|
|
300
|
+
<span class="badge">5</span>
|
|
301
|
+
</div>
|
|
302
|
+
|
|
303
|
+
</a>
|
|
304
|
+
</li>
|
|
305
|
+
|
|
306
|
+
</ul>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
</li>
|
|
311
|
+
<li class="list-group-item secondary-nav-item-pf" data-target="#amet-secondary">
|
|
312
|
+
<a>
|
|
313
|
+
<span class="fa fa-paper-plane" data-toggle="tooltip" title="Amet"></span>
|
|
314
|
+
<span class="list-group-item-value">Amet</span>
|
|
315
|
+
</a>
|
|
316
|
+
|
|
317
|
+
<div id="amet-secondary" class="nav-pf-secondary-nav">
|
|
318
|
+
<div class="nav-item-pf-header">
|
|
319
|
+
<a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
|
|
320
|
+
<span>Amet</span>
|
|
321
|
+
</div>
|
|
322
|
+
<ul class="list-group">
|
|
323
|
+
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-detracto-tertiary">
|
|
324
|
+
<a>
|
|
325
|
+
<span class="list-group-item-value">Detracto</span>
|
|
326
|
+
|
|
327
|
+
</a>
|
|
328
|
+
|
|
329
|
+
<div id="amet-detracto-tertiary" class="nav-pf-tertiary-nav">
|
|
330
|
+
<div class="nav-item-pf-header">
|
|
331
|
+
<a class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
|
|
332
|
+
<span>Detracto</span>
|
|
333
|
+
</div>
|
|
334
|
+
<ul class="list-group">
|
|
335
|
+
<li class="list-group-item">
|
|
336
|
+
<a>
|
|
337
|
+
<span class="list-group-item-value">Delicatissimi</span>
|
|
338
|
+
|
|
339
|
+
<div class="badge-container-pf">
|
|
340
|
+
<span class="badge">10</span>
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
</a>
|
|
344
|
+
</li>
|
|
345
|
+
<li class="list-group-item">
|
|
346
|
+
<a>
|
|
347
|
+
<span class="list-group-item-value">Aliquam</span>
|
|
348
|
+
|
|
349
|
+
<div class="badge-container-pf">
|
|
350
|
+
<span class="badge">3</span>
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
</a>
|
|
354
|
+
</li>
|
|
355
|
+
<li class="list-group-item">
|
|
356
|
+
<a>
|
|
357
|
+
<span class="list-group-item-value">Principes</span>
|
|
358
|
+
|
|
359
|
+
<div class="badge-container-pf">
|
|
360
|
+
<span class="badge">5</span>
|
|
361
|
+
</div>
|
|
362
|
+
|
|
363
|
+
</a>
|
|
364
|
+
</li>
|
|
365
|
+
</ul>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
|
|
369
|
+
</li>
|
|
370
|
+
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-mediocrem-tertiary">
|
|
371
|
+
<a>
|
|
372
|
+
<span class="list-group-item-value">Mediocrem</span>
|
|
373
|
+
|
|
374
|
+
</a>
|
|
375
|
+
|
|
376
|
+
<div id="amet-mediocrem-tertiary" class="nav-pf-tertiary-nav">
|
|
377
|
+
<div class="nav-item-pf-header">
|
|
378
|
+
<a class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
|
|
379
|
+
<span>Mediocrem</span>
|
|
380
|
+
</div>
|
|
381
|
+
<ul class="list-group">
|
|
382
|
+
<li class="list-group-item">
|
|
383
|
+
<a>
|
|
384
|
+
<span class="list-group-item-value">Convenire</span>
|
|
385
|
+
|
|
386
|
+
<div class="badge-container-pf">
|
|
387
|
+
<span class="badge">10</span>
|
|
388
|
+
</div>
|
|
389
|
+
|
|
390
|
+
</a>
|
|
391
|
+
</li>
|
|
392
|
+
<li class="list-group-item">
|
|
393
|
+
<a>
|
|
394
|
+
<span class="list-group-item-value">Nonumy</span>
|
|
395
|
+
|
|
396
|
+
<div class="badge-container-pf">
|
|
397
|
+
<span class="badge">3</span>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
</a>
|
|
401
|
+
</li>
|
|
402
|
+
<li class="list-group-item">
|
|
403
|
+
<a>
|
|
404
|
+
<span class="list-group-item-value">Deserunt</span>
|
|
405
|
+
|
|
406
|
+
<div class="badge-container-pf">
|
|
407
|
+
<span class="badge">5</span>
|
|
408
|
+
</div>
|
|
409
|
+
|
|
410
|
+
</a>
|
|
411
|
+
</li>
|
|
412
|
+
</ul>
|
|
413
|
+
</div>
|
|
414
|
+
|
|
415
|
+
|
|
416
|
+
</li>
|
|
417
|
+
<li class="list-group-item tertiary-nav-item-pf" data-target="#amet-corrumpit-tertiary">
|
|
418
|
+
<a>
|
|
419
|
+
<span class="list-group-item-value">Corrumpit</span>
|
|
420
|
+
|
|
421
|
+
</a>
|
|
422
|
+
|
|
423
|
+
<div id="amet-corrumpit-tertiary" class="nav-pf-tertiary-nav">
|
|
424
|
+
<div class="nav-item-pf-header">
|
|
425
|
+
<a class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
|
|
426
|
+
<span>Corrumpit</span>
|
|
427
|
+
</div>
|
|
428
|
+
<ul class="list-group">
|
|
429
|
+
<li class="list-group-item">
|
|
430
|
+
<a>
|
|
431
|
+
<span class="list-group-item-value">Aeque</span>
|
|
432
|
+
|
|
433
|
+
<div class="badge-container-pf">
|
|
434
|
+
<span class="badge">10</span>
|
|
435
|
+
</div>
|
|
436
|
+
|
|
437
|
+
</a>
|
|
438
|
+
</li>
|
|
439
|
+
<li class="list-group-item">
|
|
440
|
+
<a>
|
|
441
|
+
<span class="list-group-item-value">Delenit</span>
|
|
442
|
+
|
|
443
|
+
<div class="badge-container-pf">
|
|
444
|
+
<span class="badge">3</span>
|
|
445
|
+
</div>
|
|
446
|
+
|
|
447
|
+
</a>
|
|
448
|
+
</li>
|
|
449
|
+
<li class="list-group-item">
|
|
450
|
+
<a>
|
|
451
|
+
<span class="list-group-item-value">Qualisque</span>
|
|
452
|
+
|
|
453
|
+
<div class="badge-container-pf">
|
|
454
|
+
<span class="badge">5</span>
|
|
455
|
+
</div>
|
|
456
|
+
|
|
457
|
+
</a>
|
|
458
|
+
</li>
|
|
459
|
+
</ul>
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
</li>
|
|
464
|
+
|
|
465
|
+
<li class="list-group-item">
|
|
466
|
+
<a>
|
|
467
|
+
<span class="list-group-item-value">urbanitas</span>
|
|
468
|
+
|
|
469
|
+
<div class="badge-container-pf">
|
|
470
|
+
<span class="badge">5</span>
|
|
471
|
+
</div>
|
|
472
|
+
|
|
473
|
+
</a>
|
|
474
|
+
</li>
|
|
475
|
+
|
|
476
|
+
</ul>
|
|
477
|
+
</div>
|
|
478
|
+
|
|
479
|
+
|
|
480
|
+
</li>
|
|
481
|
+
<li class="list-group-item">
|
|
482
|
+
<a>
|
|
483
|
+
<span class="fa fa-graduation-cap" data-toggle="tooltip" title="Adipscing"></span>
|
|
484
|
+
<span class="list-group-item-value">Adipscing</span>
|
|
485
|
+
</a>
|
|
486
|
+
</li>
|
|
487
|
+
<li class="list-group-item">
|
|
488
|
+
<a>
|
|
489
|
+
<span class="fa fa-gamepad" data-toggle="tooltip" title="Lorem"></span>
|
|
490
|
+
<span class="list-group-item-value">Lorem</span>
|
|
491
|
+
</a>
|
|
492
|
+
</li>
|
|
493
|
+
</ul>
|
|
494
|
+
</div>
|
|
495
|
+
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
|
|
496
|
+
|
|
497
|
+
nav-pf-vertical-with-badges
|
|
498
|
+
">
|
|
499
|
+
|
|
500
|
+
<div class="row row-cards-pf">
|
|
501
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
502
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
503
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
504
|
+
<h2 class="card-pf-title">
|
|
505
|
+
<span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
506
|
+
</h2>
|
|
507
|
+
<div class="card-pf-body">
|
|
508
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
509
|
+
<span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
|
|
510
|
+
</p>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
|
|
514
|
+
</div>
|
|
515
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
516
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
517
|
+
<h2 class="card-pf-title">
|
|
518
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
|
|
519
|
+
</h2>
|
|
520
|
+
<div class="card-pf-body">
|
|
521
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
522
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
523
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
|
|
524
|
+
</p>
|
|
525
|
+
</div>
|
|
526
|
+
</div>
|
|
527
|
+
|
|
528
|
+
</div>
|
|
529
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
530
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
531
|
+
<h2 class="card-pf-title">
|
|
532
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
|
|
533
|
+
</h2>
|
|
534
|
+
<div class="card-pf-body">
|
|
535
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
536
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
537
|
+
</p>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
|
|
541
|
+
</div>
|
|
542
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
543
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
544
|
+
<h2 class="card-pf-title">
|
|
545
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
|
|
546
|
+
</h2>
|
|
547
|
+
<div class="card-pf-body">
|
|
548
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
549
|
+
<a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
|
|
550
|
+
</p>
|
|
551
|
+
</div>
|
|
552
|
+
</div>
|
|
553
|
+
</div>
|
|
554
|
+
</div><!-- /row -->
|
|
555
|
+
<div class="row row-cards-pf">
|
|
556
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
557
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
558
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
559
|
+
<h2 class="card-pf-title">
|
|
560
|
+
<span class="fa fa-rebel"></span>
|
|
561
|
+
<span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
562
|
+
</h2>
|
|
563
|
+
<div class="card-pf-body">
|
|
564
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
565
|
+
<span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
|
|
566
|
+
</p>
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
569
|
+
|
|
570
|
+
</div>
|
|
571
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
572
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
573
|
+
<h2 class="card-pf-title">
|
|
574
|
+
<a href="#">
|
|
575
|
+
<span class="fa fa-paper-plane"></span>
|
|
576
|
+
<span class="card-pf-aggregate-status-count">20</span> Amet
|
|
577
|
+
</a>
|
|
578
|
+
</h2>
|
|
579
|
+
<div class="card-pf-body">
|
|
580
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
581
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
582
|
+
</p>
|
|
583
|
+
</div>
|
|
584
|
+
</div>
|
|
585
|
+
|
|
586
|
+
</div>
|
|
587
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
588
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
589
|
+
<h2 class="card-pf-title">
|
|
590
|
+
<a href="#">
|
|
591
|
+
<span class="pficon pficon-cluster"></span>
|
|
592
|
+
<span class="card-pf-aggregate-status-count">9</span> Adipiscing
|
|
593
|
+
</a>
|
|
594
|
+
</h2>
|
|
595
|
+
<div class="card-pf-body">
|
|
596
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
597
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
598
|
+
</p>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
|
|
602
|
+
</div>
|
|
603
|
+
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
604
|
+
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
605
|
+
<h2 class="card-pf-title">
|
|
606
|
+
<a href="#">
|
|
607
|
+
<span class="pficon pficon-image"></span>
|
|
608
|
+
<span class="card-pf-aggregate-status-count">12</span> Lorem
|
|
609
|
+
</a>
|
|
610
|
+
</h2>
|
|
611
|
+
<div class="card-pf-body">
|
|
612
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
613
|
+
<a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
|
|
614
|
+
</p>
|
|
615
|
+
</div>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
<div class="row row-cards-pf">
|
|
620
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
621
|
+
<div class="col-xs-12 col-sm-6">
|
|
622
|
+
<div class="card-pf">
|
|
623
|
+
<div class="card-pf-heading">
|
|
624
|
+
<h2 class="card-pf-title">
|
|
625
|
+
Top Utilized Clusters
|
|
626
|
+
</h2>
|
|
627
|
+
</div>
|
|
628
|
+
<div class="card-pf-body">
|
|
629
|
+
<div class="progress-description">
|
|
630
|
+
RHOS6-Controller
|
|
631
|
+
</div>
|
|
632
|
+
<div class="progress progress-label-top-right">
|
|
633
|
+
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;" data-toggle="tooltip" title="95% Used">
|
|
634
|
+
<span><strong>190.0 of 200.0 GB</strong> Used</span>
|
|
635
|
+
</div>
|
|
636
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;" data-toggle="tooltip" title="5% Available">
|
|
637
|
+
<span class="sr-only">5% Available</span>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
<div class="progress-description">
|
|
641
|
+
CFMEQE-Cluster
|
|
642
|
+
</div>
|
|
643
|
+
<div class="progress progress-label-top-right">
|
|
644
|
+
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Used">
|
|
645
|
+
<span><strong>100.0 of 200.0 GB</strong> Used</span>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Available">
|
|
648
|
+
<span class="sr-only">50% Available</span>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
<div class="progress-description">
|
|
652
|
+
RHOS-Undercloud
|
|
653
|
+
</div>
|
|
654
|
+
<div class="progress progress-label-top-right">
|
|
655
|
+
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;" data-toggle="tooltip" title="70% Used">
|
|
656
|
+
<span><strong>140.0 of 200.0 GB</strong> Used</span>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" data-toggle="tooltip" title="30% Available">
|
|
659
|
+
<span class="sr-only">30% Available</span>
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
<div class="progress-description">
|
|
663
|
+
RHEL6-Controller
|
|
664
|
+
</div>
|
|
665
|
+
<div class="progress progress-label-top-right">
|
|
666
|
+
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="76.5" aria-valuemin="0" aria-valuemax="100" style="width: 76.5%;" data-toggle="tooltip" title="76.5% Used">
|
|
667
|
+
<span><strong>153.0 of 200.0 GB</strong> Used</span>
|
|
668
|
+
</div>
|
|
669
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">
|
|
670
|
+
<span class="sr-only">23.5% Available</span>
|
|
671
|
+
</div>
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
|
|
676
|
+
</div>
|
|
677
|
+
<div class="col-xs-12 col-sm-6">
|
|
678
|
+
<div class="card-pf">
|
|
679
|
+
<div class="card-pf-heading">
|
|
680
|
+
<h2 class="card-pf-title">
|
|
681
|
+
Quotas
|
|
682
|
+
</h2>
|
|
683
|
+
</div>
|
|
684
|
+
<div class="card-pf-body">
|
|
685
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
686
|
+
<div class="progress-description">
|
|
687
|
+
CPU
|
|
688
|
+
</div>
|
|
689
|
+
<div class="progress">
|
|
690
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
|
|
691
|
+
<span><strong>115 of 460</strong> MHz</span>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
|
|
694
|
+
<span class="sr-only">75% Available</span>
|
|
695
|
+
</div>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
699
|
+
<div class="progress-description">
|
|
700
|
+
Memory
|
|
701
|
+
</div>
|
|
702
|
+
<div class="progress">
|
|
703
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
|
|
704
|
+
<span><strong>8 of 16</strong> GB</span>
|
|
705
|
+
</div>
|
|
706
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
|
|
707
|
+
<span class="sr-only">50% Available</span>
|
|
708
|
+
</div>
|
|
709
|
+
</div>
|
|
710
|
+
</div>
|
|
711
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
712
|
+
<div class="progress-description">
|
|
713
|
+
Pods
|
|
714
|
+
</div>
|
|
715
|
+
<div class="progress">
|
|
716
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
|
|
717
|
+
<span><strong>5 of 8</strong> Total</span>
|
|
718
|
+
</div>
|
|
719
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
|
|
720
|
+
<span class="sr-only">37.5% Available</span>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
</div>
|
|
724
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
725
|
+
<div class="progress-description">
|
|
726
|
+
Services
|
|
727
|
+
</div>
|
|
728
|
+
<div class="progress">
|
|
729
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
|
|
730
|
+
<span><strong>2 of 2</strong> Total</span>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
|
|
737
|
+
</div>
|
|
738
|
+
</div><!-- /row -->
|
|
739
|
+
<div class="row row-cards-pf">
|
|
740
|
+
<div class="col-md-12">
|
|
741
|
+
<div class="card-pf card-pf-utilization">
|
|
742
|
+
<div class="card-pf-heading">
|
|
743
|
+
<p class="card-pf-heading-details">Last 30 days</p>
|
|
744
|
+
<h2 class="card-pf-title">
|
|
745
|
+
Utilization
|
|
746
|
+
</h2>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="card-pf-body">
|
|
749
|
+
<div class="row">
|
|
750
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
751
|
+
<h3 class="card-pf-subtitle">CPU</h3>
|
|
752
|
+
<p class="card-pf-utilization-details">
|
|
753
|
+
<span class="card-pf-utilization-card-details-count">50</span>
|
|
754
|
+
<span class="card-pf-utilization-card-details-description">
|
|
755
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
756
|
+
<span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
|
|
757
|
+
</span>
|
|
758
|
+
</p>
|
|
759
|
+
<div id="chart-pf-donut-1"></div>
|
|
760
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
|
|
761
|
+
<script>
|
|
762
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
763
|
+
donutConfig.bindto = '#chart-pf-donut-1';
|
|
764
|
+
donutConfig.color = {
|
|
765
|
+
pattern: ["#cc0000","#D1D1D1"]
|
|
766
|
+
};
|
|
767
|
+
donutConfig.data = {
|
|
768
|
+
type: "donut",
|
|
769
|
+
columns: [
|
|
770
|
+
["Used", 95],
|
|
771
|
+
["Available", 5]
|
|
772
|
+
],
|
|
773
|
+
groups: [
|
|
774
|
+
["used", "available"]
|
|
775
|
+
],
|
|
776
|
+
order: null
|
|
777
|
+
};
|
|
778
|
+
donutConfig.tooltip = {
|
|
779
|
+
contents: function (d) {
|
|
780
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
781
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
782
|
+
'</span>';
|
|
783
|
+
}
|
|
784
|
+
};
|
|
785
|
+
|
|
786
|
+
var chart1 = c3.generate(donutConfig);
|
|
787
|
+
var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
|
|
788
|
+
donutChartTitle.text("");
|
|
789
|
+
donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
790
|
+
donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
791
|
+
|
|
792
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
793
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-1';
|
|
794
|
+
sparklineConfig.data = {
|
|
795
|
+
columns: [
|
|
796
|
+
['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
|
|
797
|
+
],
|
|
798
|
+
type: 'area'
|
|
799
|
+
};
|
|
800
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
801
|
+
</script>
|
|
802
|
+
</div>
|
|
803
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
804
|
+
<h3 class="card-pf-subtitle">Memory</h3>
|
|
805
|
+
<p class="card-pf-utilization-details">
|
|
806
|
+
<span class="card-pf-utilization-card-details-count">256</span>
|
|
807
|
+
<span class="card-pf-utilization-card-details-description">
|
|
808
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
809
|
+
<span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
|
|
810
|
+
</span>
|
|
811
|
+
</p>
|
|
812
|
+
<div id="chart-pf-donut-2"></div>
|
|
813
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
|
|
814
|
+
<script>
|
|
815
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
816
|
+
donutConfig.bindto = '#chart-pf-donut-2';
|
|
817
|
+
donutConfig.color = {
|
|
818
|
+
pattern: ["#3f9c35","#D1D1D1"]
|
|
819
|
+
};
|
|
820
|
+
donutConfig.data = {
|
|
821
|
+
type: "donut",
|
|
822
|
+
columns: [
|
|
823
|
+
["Used", 41],
|
|
824
|
+
["Available", 59]
|
|
825
|
+
],
|
|
826
|
+
groups: [
|
|
827
|
+
["used", "available"]
|
|
828
|
+
],
|
|
829
|
+
order: null
|
|
830
|
+
};
|
|
831
|
+
donutConfig.tooltip = {
|
|
832
|
+
contents: function (d) {
|
|
833
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
834
|
+
Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
|
|
835
|
+
'</span>';
|
|
836
|
+
}
|
|
837
|
+
};
|
|
838
|
+
|
|
839
|
+
var chart3 = c3.generate(donutConfig);
|
|
840
|
+
var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
|
|
841
|
+
donutChartTitle.text("");
|
|
842
|
+
donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
843
|
+
donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
844
|
+
|
|
845
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
846
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-2';
|
|
847
|
+
sparklineConfig.data = {
|
|
848
|
+
columns: [
|
|
849
|
+
['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
|
|
850
|
+
],
|
|
851
|
+
type: 'area'
|
|
852
|
+
};
|
|
853
|
+
var chart4 = c3.generate(sparklineConfig);
|
|
854
|
+
</script>
|
|
855
|
+
</div>
|
|
856
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
857
|
+
<h3 class="card-pf-subtitle">Network</h3>
|
|
858
|
+
<p class="card-pf-utilization-details">
|
|
859
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
860
|
+
<span class="card-pf-utilization-card-details-description">
|
|
861
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
862
|
+
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
863
|
+
</span>
|
|
864
|
+
</p>
|
|
865
|
+
<div id="chart-pf-donut-3"></div>
|
|
866
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
|
|
867
|
+
<script>
|
|
868
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
869
|
+
donutConfig.bindto = '#chart-pf-donut-3';
|
|
870
|
+
donutConfig.color = {
|
|
871
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
872
|
+
};
|
|
873
|
+
donutConfig.data = {
|
|
874
|
+
type: "donut",
|
|
875
|
+
columns: [
|
|
876
|
+
["Used", 85],
|
|
877
|
+
["Available", 15]
|
|
878
|
+
],
|
|
879
|
+
groups: [
|
|
880
|
+
["used", "available"]
|
|
881
|
+
],
|
|
882
|
+
order: null
|
|
883
|
+
};
|
|
884
|
+
donutConfig.tooltip = {
|
|
885
|
+
contents: function (d) {
|
|
886
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
887
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
888
|
+
'</span>';
|
|
889
|
+
}
|
|
890
|
+
};
|
|
891
|
+
|
|
892
|
+
var chart5 = c3.generate(donutConfig);
|
|
893
|
+
var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
|
|
894
|
+
donutChartTitle.text("");
|
|
895
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
896
|
+
donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
897
|
+
|
|
898
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
899
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-3';
|
|
900
|
+
sparklineConfig.data = {
|
|
901
|
+
columns: [
|
|
902
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
903
|
+
],
|
|
904
|
+
type: 'area'
|
|
905
|
+
};
|
|
906
|
+
var chart6 = c3.generate(sparklineConfig);
|
|
907
|
+
</script>
|
|
908
|
+
</div>
|
|
909
|
+
</div>
|
|
910
|
+
</div>
|
|
911
|
+
</div>
|
|
912
|
+
|
|
913
|
+
</div>
|
|
914
|
+
</div><!-- /row -->
|
|
915
|
+
<div class="row row-cards-pf">
|
|
916
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
917
|
+
<div class="card-pf card-pf-utilization">
|
|
918
|
+
<h2 class="card-pf-title">
|
|
919
|
+
Network
|
|
920
|
+
</h2>
|
|
921
|
+
<div class="card-pf-body">
|
|
922
|
+
<p class="card-pf-utilization-details">
|
|
923
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
924
|
+
<span class="card-pf-utilization-card-details-description">
|
|
925
|
+
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
926
|
+
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
927
|
+
</span>
|
|
928
|
+
</p>
|
|
929
|
+
<div id="chart-pf-donut-4"></div>
|
|
930
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
|
|
931
|
+
<script>
|
|
932
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
933
|
+
|
|
934
|
+
var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
|
|
935
|
+
donutConfig.bindto = '#chart-pf-donut-4';
|
|
936
|
+
donutConfig.color = {
|
|
937
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
938
|
+
};
|
|
939
|
+
donutConfig.data = {
|
|
940
|
+
type: "donut",
|
|
941
|
+
columns: [
|
|
942
|
+
["Used", 85],
|
|
943
|
+
["Available", 15]
|
|
944
|
+
],
|
|
945
|
+
groups: [
|
|
946
|
+
["used", "available"]
|
|
947
|
+
],
|
|
948
|
+
order: null
|
|
949
|
+
};
|
|
950
|
+
donutConfig.tooltip = {
|
|
951
|
+
contents: function (d) {
|
|
952
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
953
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
954
|
+
'</span>';
|
|
955
|
+
}
|
|
956
|
+
};
|
|
957
|
+
|
|
958
|
+
var chart1 = c3.generate(donutConfig);
|
|
959
|
+
var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
|
|
960
|
+
donutChartTitle.text("");
|
|
961
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
962
|
+
donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
963
|
+
|
|
964
|
+
var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
|
|
965
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-4';
|
|
966
|
+
sparklineConfig.data = {
|
|
967
|
+
columns: [
|
|
968
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
969
|
+
],
|
|
970
|
+
type: 'area'
|
|
971
|
+
};
|
|
972
|
+
|
|
973
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
974
|
+
</script>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
|
|
978
|
+
</div>
|
|
979
|
+
</div><!-- /row -->
|
|
980
|
+
<div class="row row-cards-pf">
|
|
981
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
982
|
+
<div class="col-xs-12 col-sm-6 col-md-5">
|
|
983
|
+
<div class="card-pf">
|
|
984
|
+
<div class="card-pf-heading">
|
|
985
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
986
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
987
|
+
Last 30 Days <span class="caret"></span>
|
|
988
|
+
</button>
|
|
989
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
990
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
991
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
992
|
+
</ul>
|
|
993
|
+
</div>
|
|
994
|
+
<h2 class="card-pf-title">
|
|
995
|
+
Card Title
|
|
996
|
+
</h2>
|
|
997
|
+
</div>
|
|
998
|
+
<div class="card-pf-body">
|
|
999
|
+
<p>[card contents]</p>
|
|
1000
|
+
</div>
|
|
1001
|
+
</div>
|
|
1002
|
+
|
|
1003
|
+
</div>
|
|
1004
|
+
<div class="col-xs-12 col-sm-6 col-md-7">
|
|
1005
|
+
<div class="card-pf">
|
|
1006
|
+
<h2 class="card-pf-title">
|
|
1007
|
+
Card Title
|
|
1008
|
+
</h2>
|
|
1009
|
+
<div class="card-pf-body">
|
|
1010
|
+
<p>[card contents]</p>
|
|
1011
|
+
</div>
|
|
1012
|
+
<div class="card-pf-footer">
|
|
1013
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
1014
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
1015
|
+
Last 30 Days <span class="caret"></span>
|
|
1016
|
+
</button>
|
|
1017
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
1018
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
1019
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
1020
|
+
</ul>
|
|
1021
|
+
</div>
|
|
1022
|
+
<p>
|
|
1023
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
1024
|
+
<span class="pficon pficon-add-circle-o"></span>Add New Cluster
|
|
1025
|
+
</a>
|
|
1026
|
+
</p>
|
|
1027
|
+
</div>
|
|
1028
|
+
</div>
|
|
1029
|
+
|
|
1030
|
+
</div>
|
|
1031
|
+
</div><!-- /row -->
|
|
1032
|
+
<div class="row row-cards-pf">
|
|
1033
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
1034
|
+
<div class="col-xs-12 col-sm-5 col-md-5">
|
|
1035
|
+
<div class="card-pf">
|
|
1036
|
+
<h2 class="card-pf-title">
|
|
1037
|
+
Card Title
|
|
1038
|
+
</h2>
|
|
1039
|
+
<div class="card-pf-body">
|
|
1040
|
+
<p>[card contents]</p>
|
|
1041
|
+
</div>
|
|
1042
|
+
<div class="card-pf-footer">
|
|
1043
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
1044
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
1045
|
+
Last 30 Days <span class="caret"></span>
|
|
1046
|
+
</button>
|
|
1047
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
1048
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
1049
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
1050
|
+
</ul>
|
|
1051
|
+
</div>
|
|
1052
|
+
<p>
|
|
1053
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
1054
|
+
<span class="pficon pficon-flag"></span>View CPU Events
|
|
1055
|
+
</a>
|
|
1056
|
+
</p>
|
|
1057
|
+
</div>
|
|
1058
|
+
</div>
|
|
1059
|
+
</div>
|
|
1060
|
+
<div class="col-xs-12 col-sm-7 col-md-7">
|
|
1061
|
+
<div class="card-pf">
|
|
1062
|
+
<h2 class="card-pf-title">
|
|
1063
|
+
Card Title
|
|
1064
|
+
</h2>
|
|
1065
|
+
<div class="card-pf-body">
|
|
1066
|
+
<p>[card contents]</p>
|
|
1067
|
+
</div>
|
|
1068
|
+
</div>
|
|
1069
|
+
</div>
|
|
1070
|
+
</div>
|
|
1071
|
+
<div class="row row-cards-pf">
|
|
1072
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
1073
|
+
<div class="col-xs-6 col-sm-8 col-md-8">
|
|
1074
|
+
<div class="card-pf">
|
|
1075
|
+
<div class="card-pf-body">
|
|
1076
|
+
<p>[card contents]</p>
|
|
1077
|
+
</div>
|
|
1078
|
+
<div class="card-pf-footer">
|
|
1079
|
+
<p><a href="#">Footer link</a></p>
|
|
1080
|
+
</div>
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
<div class="col-xs-6 col-sm-4 col-md-4">
|
|
1084
|
+
<div class="card-pf">
|
|
1085
|
+
<div class="card-pf-body">
|
|
1086
|
+
<p>[card contents]</p>
|
|
1087
|
+
</div>
|
|
1088
|
+
<div class="card-pf-footer">
|
|
1089
|
+
<p><a href="#">Footer link</a></p>
|
|
1090
|
+
</div>
|
|
1091
|
+
</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
</div><!-- /row -->
|
|
1094
|
+
<div class="row row-cards-pf">
|
|
1095
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
1096
|
+
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
1097
|
+
<div class="card-pf">
|
|
1098
|
+
<div class="card-pf-body">
|
|
1099
|
+
<p>[card contents]</p>
|
|
1100
|
+
</div>
|
|
1101
|
+
</div>
|
|
1102
|
+
</div>
|
|
1103
|
+
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
1104
|
+
<div class="card-pf">
|
|
1105
|
+
<div class="card-pf-body">
|
|
1106
|
+
<p>[card contents]</p>
|
|
1107
|
+
</div>
|
|
1108
|
+
</div>
|
|
1109
|
+
</div>
|
|
1110
|
+
</div><!-- /row -->
|
|
1111
|
+
|
|
1112
|
+
</div>
|
|
1113
|
+
<script>
|
|
1114
|
+
$(document).ready(function() {
|
|
1115
|
+
// matchHeight the contents of each .card-pf and then the .card-pf itself
|
|
1116
|
+
$(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
|
|
1117
|
+
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
|
|
1118
|
+
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
|
|
1119
|
+
$(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
|
|
1120
|
+
|
|
1121
|
+
// Initialize the vertical navigation
|
|
1122
|
+
$().setupVerticalNavigation(true);
|
|
1123
|
+
});
|
|
1124
|
+
</script>
|
|
1125
|
+
|
|
1126
|
+
|
|
1127
|
+
</body>
|
|
1128
|
+
</html>
|