patternfly-sass 3.3.3 → 3.3.4
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/javascripts/patternfly.js +5 -5
- data/assets/javascripts/patternfly.min.js +1 -1
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/area-charts.html +50 -40
- data/spec/html/bar-charts.html +192 -131
- data/spec/html/cards.html +437 -418
- data/spec/html/donut-charts.html +165 -131
- data/spec/html/index.html +3 -0
- data/spec/html/layout-alt-fixed-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer.html +437 -418
- data/spec/html/layout-alt-fixed.html +437 -418
- data/spec/html/line-charts.html +120 -86
- data/spec/html/list-view.html +128 -95
- data/spec/html/pie-charts.html +107 -78
- data/spec/html/utilization-bar-charts.html +69 -0
- data/spec/html/vertical-navigation-without-icons.html +205 -205
- data/spec/html/vertical-navigation.html +205 -205
- metadata +4 -2
data/spec/html/donut-charts.html
CHANGED
|
@@ -43,137 +43,171 @@
|
|
|
43
43
|
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>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
|
|
44
44
|
</div>
|
|
45
45
|
<hr>
|
|
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
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
46
|
+
<div>
|
|
47
|
+
<h2>Donut Chart - Utilization</h2>
|
|
48
|
+
<div style="width: 220px;">
|
|
49
|
+
<div id="utilizationDonutChart"></div>
|
|
50
|
+
<script>
|
|
51
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
52
|
+
var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
|
|
53
|
+
utilizationDonutChartConfig.bindto = '#utilizationDonutChart';
|
|
54
|
+
utilizationDonutChartConfig.data = {
|
|
55
|
+
type: "donut",
|
|
56
|
+
columns: [
|
|
57
|
+
["Used", 60],
|
|
58
|
+
["Available", 40]
|
|
59
|
+
],
|
|
60
|
+
groups: [
|
|
61
|
+
["used", "available"]
|
|
62
|
+
],
|
|
63
|
+
order: null
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
utilizationDonutChartConfig.tooltip = {
|
|
67
|
+
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
|
|
68
|
+
};
|
|
69
|
+
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
|
|
70
|
+
$().pfSetDonutChartTitle("#utilizationDonutChart", "60", "MHz Used");
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
</div>
|
|
74
|
+
<h2>Donut Chart - Relationship to a Whole</h2>
|
|
75
|
+
<div style="width: 700px;">
|
|
76
|
+
<div class="row">
|
|
77
|
+
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
78
|
+
<div id="donut-chart-no-legend"></div>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
81
|
+
<div id="donut-chart-right-legend"></div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
84
|
+
<div id="donut-chart-bottom-legend"></div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<script>
|
|
88
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
89
|
+
|
|
90
|
+
var donutData = {
|
|
91
|
+
type : 'donut',
|
|
92
|
+
colors: {
|
|
93
|
+
Cats: $.pfPaletteColors.blue,
|
|
94
|
+
Hamsters: $.pfPaletteColors.green,
|
|
95
|
+
Fish: $.pfPaletteColors.orange,
|
|
96
|
+
Dogs: $.pfPaletteColors.red
|
|
97
|
+
},
|
|
98
|
+
columns: [
|
|
99
|
+
['Dogs', 2],
|
|
100
|
+
['Cats', 2],
|
|
101
|
+
['Fish', 3],
|
|
102
|
+
['Hamsters', 1]
|
|
103
|
+
],
|
|
104
|
+
onclick: function (d, i) { console.log("onclick", d, i); },
|
|
105
|
+
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
|
106
|
+
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
// Donut Chart without Legend
|
|
110
|
+
var donutChartConfig = c3ChartDefaults.getDefaultDonutConfig();
|
|
111
|
+
donutChartConfig.bindto = '#donut-chart-no-legend';
|
|
112
|
+
donutChartConfig.tooltip = {show: true};
|
|
113
|
+
donutChartConfig.data = donutData;
|
|
114
|
+
donutChartConfig.tooltip = {
|
|
115
|
+
contents: $().pfDonutTooltipContents
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
var donutChartNoLegend = c3.generate(donutChartConfig);
|
|
119
|
+
$().pfSetDonutChartTitle("#donut-chart-no-legend", "8", "Animals");
|
|
120
|
+
|
|
121
|
+
// Right Legend
|
|
122
|
+
var donutChartRightConfig = c3ChartDefaults.getDefaultDonutConfig();
|
|
123
|
+
donutChartRightConfig.bindto = '#donut-chart-right-legend';
|
|
124
|
+
donutChartRightConfig.tooltip = {show: true};
|
|
125
|
+
donutChartRightConfig.data = donutData;
|
|
126
|
+
donutChartRightConfig.legend = {
|
|
127
|
+
show: true,
|
|
128
|
+
position: 'right'
|
|
129
|
+
};
|
|
130
|
+
donutChartRightConfig.size = {
|
|
131
|
+
width: 251,
|
|
132
|
+
height: 161
|
|
133
|
+
};
|
|
134
|
+
donutChartRightConfig.tooltip = {
|
|
135
|
+
contents: $().pfDonutTooltipContents
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
var donutChartRightLegend = c3.generate(donutChartRightConfig);
|
|
139
|
+
$().pfSetDonutChartTitle("#donut-chart-right-legend", "8", "Animals");
|
|
140
|
+
|
|
141
|
+
// Donut Chart Bottom Legend
|
|
142
|
+
var donutChartBottomConfig = c3ChartDefaults.getDefaultDonutConfig();
|
|
143
|
+
donutChartBottomConfig.bindto = '#donut-chart-bottom-legend';
|
|
144
|
+
donutChartBottomConfig.tooltip = {show: true};
|
|
145
|
+
donutChartBottomConfig.data = donutData;
|
|
146
|
+
donutChartBottomConfig.legend = {
|
|
147
|
+
show: true,
|
|
148
|
+
position: 'bottom'
|
|
149
|
+
};
|
|
150
|
+
donutChartBottomConfig.size = {
|
|
151
|
+
width: 271,
|
|
152
|
+
height: 191
|
|
153
|
+
};
|
|
154
|
+
donutChartBottomConfig.tooltip = {
|
|
155
|
+
contents: $().pfDonutTooltipContents
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
var donutChartBottomLegend = c3.generate(donutChartBottomConfig);
|
|
159
|
+
$().pfSetDonutChartTitle("#donut-chart-bottom-legend", "8", "Animals");
|
|
160
|
+
</script>
|
|
161
|
+
|
|
162
|
+
</div>
|
|
163
|
+
<h2>Donut Chart - Small</h2>
|
|
164
|
+
<div>
|
|
165
|
+
<div id="smallDonutChart" class="donut-chart-pf"></div>
|
|
166
|
+
<div style="text-align: center; width: 160px;">Animals</div>
|
|
167
|
+
<script>
|
|
168
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
169
|
+
|
|
170
|
+
var donutData = {
|
|
171
|
+
type : 'donut',
|
|
172
|
+
colors: {
|
|
173
|
+
Cats: $.pfPaletteColors.blue,
|
|
174
|
+
Hamsters: $.pfPaletteColors.green,
|
|
175
|
+
Fish: $.pfPaletteColors.orange,
|
|
176
|
+
Dogs: $.pfPaletteColors.red
|
|
177
|
+
},
|
|
178
|
+
columns: [
|
|
179
|
+
['Dogs', 2],
|
|
180
|
+
['Cats', 2],
|
|
181
|
+
['Fish', 3],
|
|
182
|
+
['Hamsters', 1]
|
|
183
|
+
],
|
|
184
|
+
onclick: function (d, i) { console.log("onclick", d, i); },
|
|
185
|
+
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
|
186
|
+
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
// Small Donut Chart
|
|
190
|
+
var donutChartSmallConfig = c3ChartDefaults.getDefaultDonutConfig('8');
|
|
191
|
+
donutChartSmallConfig.bindto = '#smallDonutChart';
|
|
192
|
+
donutChartSmallConfig.tooltip = {show: true};
|
|
193
|
+
donutChartSmallConfig.data = donutData;
|
|
194
|
+
donutChartSmallConfig.legend = {
|
|
195
|
+
show: true,
|
|
196
|
+
position: 'right'
|
|
197
|
+
};
|
|
198
|
+
donutChartSmallConfig.size = {
|
|
199
|
+
width: 250,
|
|
200
|
+
height: 100
|
|
201
|
+
};
|
|
202
|
+
donutChartSmallConfig.tooltip = {
|
|
203
|
+
contents: $().pfDonutTooltipContents
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
var donutChartSmall = c3.generate(donutChartSmallConfig);
|
|
207
|
+
</script>
|
|
208
|
+
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
177
211
|
|
|
178
212
|
</div><!-- /container -->
|
|
179
213
|
</body>
|
data/spec/html/index.html
CHANGED
|
@@ -174,41 +174,47 @@
|
|
|
174
174
|
<div class="row row-cards-pf">
|
|
175
175
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
176
176
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
177
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
177
178
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
179
|
+
<h2 class="card-pf-title">
|
|
180
|
+
<span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
181
|
+
</h2>
|
|
182
|
+
<div class="card-pf-body">
|
|
183
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
184
|
+
<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>
|
|
185
|
+
</p>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
187
189
|
</div>
|
|
188
190
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
191
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
189
192
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
193
|
+
<h2 class="card-pf-title">
|
|
194
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
|
|
195
|
+
</h2>
|
|
196
|
+
<div class="card-pf-body">
|
|
197
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
198
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
199
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
|
|
200
|
+
</p>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
200
204
|
</div>
|
|
201
205
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
206
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
202
207
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
208
|
+
<h2 class="card-pf-title">
|
|
209
|
+
<a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
|
|
210
|
+
</h2>
|
|
211
|
+
<div class="card-pf-body">
|
|
212
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
213
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
214
|
+
</p>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
212
218
|
</div>
|
|
213
219
|
<div class="col-xs-6 col-sm-4 col-md-2">
|
|
214
220
|
<div class="card-pf card-pf-accented card-pf-aggregate-status">
|
|
@@ -250,47 +256,53 @@
|
|
|
250
256
|
<div class="row row-cards-pf">
|
|
251
257
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
252
258
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
259
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
253
260
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
261
|
+
<h2 class="card-pf-title">
|
|
262
|
+
<span class="fa fa-rebel"></span>
|
|
263
|
+
<span class="card-pf-aggregate-status-count">0</span> Ipsum
|
|
264
|
+
</h2>
|
|
265
|
+
<div class="card-pf-body">
|
|
266
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
267
|
+
<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>
|
|
268
|
+
</p>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
264
272
|
</div>
|
|
265
273
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
274
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
266
275
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
276
|
+
<h2 class="card-pf-title">
|
|
277
|
+
<span class="fa fa-paper-plane"></span>
|
|
278
|
+
<a href="#">
|
|
279
|
+
<span class="card-pf-aggregate-status-count">20</span> Amet
|
|
280
|
+
</a>
|
|
281
|
+
</h2>
|
|
282
|
+
<div class="card-pf-body">
|
|
283
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
284
|
+
<span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
|
|
285
|
+
</p>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
279
289
|
</div>
|
|
280
290
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
291
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
281
292
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
293
|
+
<h2 class="card-pf-title">
|
|
294
|
+
<span class="pficon pficon-cluster"></span>
|
|
295
|
+
<a href="#">
|
|
296
|
+
<span class="card-pf-aggregate-status-count">9</span> Adipiscing
|
|
297
|
+
</a>
|
|
298
|
+
</h2>
|
|
299
|
+
<div class="card-pf-body">
|
|
300
|
+
<p class="card-pf-aggregate-status-notifications">
|
|
301
|
+
<span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
|
|
302
|
+
</p>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
294
306
|
</div>
|
|
295
307
|
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
|
|
296
308
|
<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
|
|
@@ -339,121 +351,124 @@
|
|
|
339
351
|
</div>
|
|
340
352
|
</div>
|
|
341
353
|
<div class="row row-cards-pf">
|
|
342
|
-
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
343
354
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
355
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
344
356
|
<div class="card-pf">
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
357
|
+
<div class="card-pf-heading">
|
|
358
|
+
<h2 class="card-pf-title">
|
|
359
|
+
Top Utilized Clusters
|
|
360
|
+
</h2>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="card-pf-body">
|
|
363
|
+
<div class="progress-description">
|
|
364
|
+
RHOS6-Controller
|
|
365
|
+
</div>
|
|
366
|
+
<div class="progress progress-label-top-right">
|
|
367
|
+
<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">
|
|
368
|
+
<span><strong>190.0 of 200.0 GB</strong> Used</span>
|
|
369
|
+
</div>
|
|
370
|
+
<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">
|
|
371
|
+
<span class="sr-only">5% Available</span>
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="progress-description">
|
|
375
|
+
CFMEQE-Cluster
|
|
376
|
+
</div>
|
|
377
|
+
<div class="progress progress-label-top-right">
|
|
378
|
+
<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">
|
|
379
|
+
<span><strong>100.0 of 200.0 GB</strong> Used</span>
|
|
380
|
+
</div>
|
|
381
|
+
<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">
|
|
382
|
+
<span class="sr-only">50% Available</span>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="progress-description">
|
|
386
|
+
RHOS-Undercloud
|
|
387
|
+
</div>
|
|
388
|
+
<div class="progress progress-label-top-right">
|
|
389
|
+
<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">
|
|
390
|
+
<span><strong>140.0 of 200.0 GB</strong> Used</span>
|
|
391
|
+
</div>
|
|
392
|
+
<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">
|
|
393
|
+
<span class="sr-only">30% Available</span>
|
|
394
|
+
</div>
|
|
395
|
+
</div>
|
|
396
|
+
<div class="progress-description">
|
|
397
|
+
RHEL6-Controller
|
|
398
|
+
</div>
|
|
399
|
+
<div class="progress progress-label-top-right">
|
|
400
|
+
<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">
|
|
401
|
+
<span><strong>153.0 of 200.0 GB</strong> Used</span>
|
|
402
|
+
</div>
|
|
403
|
+
<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">
|
|
404
|
+
<span class="sr-only">23.5% Available</span>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
|
|
397
410
|
</div>
|
|
398
411
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
412
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
399
413
|
<div class="card-pf">
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
414
|
+
<div class="card-pf-heading">
|
|
415
|
+
<h2 class="card-pf-title">
|
|
416
|
+
Quotas
|
|
417
|
+
</h2>
|
|
418
|
+
</div>
|
|
419
|
+
<div class="card-pf-body">
|
|
420
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
421
|
+
<div class="progress-description">
|
|
422
|
+
CPU
|
|
423
|
+
</div>
|
|
424
|
+
<div class="progress">
|
|
425
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
|
|
426
|
+
<span><strong>115 of 460</strong> MHz</span>
|
|
427
|
+
</div>
|
|
428
|
+
<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">
|
|
429
|
+
<span class="sr-only">75% Available</span>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
434
|
+
<div class="progress-description">
|
|
435
|
+
Memory
|
|
436
|
+
</div>
|
|
437
|
+
<div class="progress">
|
|
438
|
+
<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">
|
|
439
|
+
<span><strong>8 of 16</strong> GB</span>
|
|
440
|
+
</div>
|
|
441
|
+
<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">
|
|
442
|
+
<span class="sr-only">50% Available</span>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
447
|
+
<div class="progress-description">
|
|
448
|
+
Pods
|
|
449
|
+
</div>
|
|
450
|
+
<div class="progress">
|
|
451
|
+
<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">
|
|
452
|
+
<span><strong>5 of 8</strong> Total</span>
|
|
453
|
+
</div>
|
|
454
|
+
<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">
|
|
455
|
+
<span class="sr-only">37.5% Available</span>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="progress-container progress-description-left progress-label-right">
|
|
460
|
+
<div class="progress-description">
|
|
461
|
+
Services
|
|
462
|
+
</div>
|
|
463
|
+
<div class="progress">
|
|
464
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
|
|
465
|
+
<span><strong>2 of 2</strong> Total</span>
|
|
466
|
+
</div>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
</div>
|
|
471
|
+
|
|
457
472
|
</div>
|
|
458
473
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
459
474
|
<div class="card-pf">
|
|
@@ -517,296 +532,300 @@
|
|
|
517
532
|
</div>
|
|
518
533
|
</div><!-- /row -->
|
|
519
534
|
<div class="row row-cards-pf">
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
+
<div class="col-md-12">
|
|
536
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
537
|
+
<div class="card-pf card-pf-utilization">
|
|
538
|
+
<div class="card-pf-heading">
|
|
539
|
+
<p class="card-pf-heading-details">Last 30 days</p>
|
|
540
|
+
<h2 class="card-pf-title">
|
|
541
|
+
Utilization
|
|
542
|
+
</h2>
|
|
543
|
+
</div>
|
|
544
|
+
<div class="card-pf-body">
|
|
545
|
+
<div class="row">
|
|
546
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
547
|
+
<h3 class="card-pf-subtitle">CPU</h3>
|
|
548
|
+
<p class="card-pf-utilization-details">
|
|
549
|
+
<span class="card-pf-utilization-card-details-count">50</span>
|
|
535
550
|
<span class="card-pf-utilization-card-details-description">
|
|
536
551
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
537
552
|
<span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
|
|
538
553
|
</span>
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
554
|
+
</p>
|
|
555
|
+
<div id="chart-pf-donut-1"></div>
|
|
556
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
|
|
557
|
+
<script>
|
|
558
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
559
|
+
donutConfig.bindto = '#chart-pf-donut-1';
|
|
560
|
+
donutConfig.color = {
|
|
561
|
+
pattern: ["#cc0000","#D1D1D1"]
|
|
562
|
+
};
|
|
563
|
+
donutConfig.data = {
|
|
564
|
+
type: "donut",
|
|
565
|
+
columns: [
|
|
566
|
+
["Used", 95],
|
|
567
|
+
["Available", 5]
|
|
568
|
+
],
|
|
569
|
+
groups: [
|
|
570
|
+
["used", "available"]
|
|
571
|
+
],
|
|
572
|
+
order: null
|
|
573
|
+
};
|
|
574
|
+
donutConfig.tooltip = {
|
|
575
|
+
contents: function (d) {
|
|
576
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
577
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
578
|
+
'</span>';
|
|
579
|
+
}
|
|
580
|
+
};
|
|
566
581
|
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
582
|
+
var chart1 = c3.generate(donutConfig);
|
|
583
|
+
var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
|
|
584
|
+
donutChartTitle.text("");
|
|
585
|
+
donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
586
|
+
donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
572
587
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
589
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-1';
|
|
590
|
+
sparklineConfig.data = {
|
|
591
|
+
columns: [
|
|
592
|
+
['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
|
|
593
|
+
],
|
|
594
|
+
type: 'area'
|
|
595
|
+
};
|
|
596
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
597
|
+
</script>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
600
|
+
<h3 class="card-pf-subtitle">Memory</h3>
|
|
601
|
+
<p class="card-pf-utilization-details">
|
|
602
|
+
<span class="card-pf-utilization-card-details-count">256</span>
|
|
588
603
|
<span class="card-pf-utilization-card-details-description">
|
|
589
604
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
590
605
|
<span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
|
|
591
606
|
</span>
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
607
|
+
</p>
|
|
608
|
+
<div id="chart-pf-donut-2"></div>
|
|
609
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
|
|
610
|
+
<script>
|
|
611
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
612
|
+
donutConfig.bindto = '#chart-pf-donut-2';
|
|
613
|
+
donutConfig.color = {
|
|
614
|
+
pattern: ["#3f9c35","#D1D1D1"]
|
|
615
|
+
};
|
|
616
|
+
donutConfig.data = {
|
|
617
|
+
type: "donut",
|
|
618
|
+
columns: [
|
|
619
|
+
["Used", 41],
|
|
620
|
+
["Available", 59]
|
|
621
|
+
],
|
|
622
|
+
groups: [
|
|
623
|
+
["used", "available"]
|
|
624
|
+
],
|
|
625
|
+
order: null
|
|
626
|
+
};
|
|
627
|
+
donutConfig.tooltip = {
|
|
628
|
+
contents: function (d) {
|
|
629
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
630
|
+
Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
|
|
631
|
+
'</span>';
|
|
632
|
+
}
|
|
633
|
+
};
|
|
619
634
|
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
635
|
+
var chart3 = c3.generate(donutConfig);
|
|
636
|
+
var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
|
|
637
|
+
donutChartTitle.text("");
|
|
638
|
+
donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
639
|
+
donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
625
640
|
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
642
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-2';
|
|
643
|
+
sparklineConfig.data = {
|
|
644
|
+
columns: [
|
|
645
|
+
['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
|
|
646
|
+
],
|
|
647
|
+
type: 'area'
|
|
648
|
+
};
|
|
649
|
+
var chart4 = c3.generate(sparklineConfig);
|
|
650
|
+
</script>
|
|
651
|
+
</div>
|
|
652
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
653
|
+
<h3 class="card-pf-subtitle">Network</h3>
|
|
654
|
+
<p class="card-pf-utilization-details">
|
|
655
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
641
656
|
<span class="card-pf-utilization-card-details-description">
|
|
642
657
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
643
658
|
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
644
659
|
</span>
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
660
|
+
</p>
|
|
661
|
+
<div id="chart-pf-donut-3"></div>
|
|
662
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
|
|
663
|
+
<script>
|
|
664
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
665
|
+
donutConfig.bindto = '#chart-pf-donut-3';
|
|
666
|
+
donutConfig.color = {
|
|
667
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
668
|
+
};
|
|
669
|
+
donutConfig.data = {
|
|
670
|
+
type: "donut",
|
|
671
|
+
columns: [
|
|
672
|
+
["Used", 85],
|
|
673
|
+
["Available", 15]
|
|
674
|
+
],
|
|
675
|
+
groups: [
|
|
676
|
+
["used", "available"]
|
|
677
|
+
],
|
|
678
|
+
order: null
|
|
679
|
+
};
|
|
680
|
+
donutConfig.tooltip = {
|
|
681
|
+
contents: function (d) {
|
|
682
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
683
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
684
|
+
'</span>';
|
|
685
|
+
}
|
|
686
|
+
};
|
|
672
687
|
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
688
|
+
var chart5 = c3.generate(donutConfig);
|
|
689
|
+
var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
|
|
690
|
+
donutChartTitle.text("");
|
|
691
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
692
|
+
donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
678
693
|
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
</div>
|
|
694
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
695
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-3';
|
|
696
|
+
sparklineConfig.data = {
|
|
697
|
+
columns: [
|
|
698
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
699
|
+
],
|
|
700
|
+
type: 'area'
|
|
701
|
+
};
|
|
702
|
+
var chart6 = c3.generate(sparklineConfig);
|
|
703
|
+
</script>
|
|
690
704
|
</div>
|
|
691
705
|
</div>
|
|
692
706
|
</div>
|
|
693
707
|
</div>
|
|
694
708
|
|
|
709
|
+
</div>
|
|
695
710
|
</div><!-- /row -->
|
|
696
711
|
<div class="row row-cards-pf">
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
712
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
713
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
714
|
+
<div class="card-pf card-pf-utilization">
|
|
715
|
+
<h2 class="card-pf-title">
|
|
716
|
+
Network
|
|
717
|
+
</h2>
|
|
718
|
+
<div class="card-pf-body">
|
|
719
|
+
<p class="card-pf-utilization-details">
|
|
720
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
706
721
|
<span class="card-pf-utilization-card-details-description">
|
|
707
722
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
708
723
|
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
709
724
|
</span>
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
725
|
+
</p>
|
|
726
|
+
<div id="chart-pf-donut-4"></div>
|
|
727
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
|
|
728
|
+
<script>
|
|
729
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
715
730
|
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
731
|
+
var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
|
|
732
|
+
donutConfig.bindto = '#chart-pf-donut-4';
|
|
733
|
+
donutConfig.color = {
|
|
734
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
735
|
+
};
|
|
736
|
+
donutConfig.data = {
|
|
737
|
+
type: "donut",
|
|
738
|
+
columns: [
|
|
739
|
+
["Used", 85],
|
|
740
|
+
["Available", 15]
|
|
741
|
+
],
|
|
742
|
+
groups: [
|
|
743
|
+
["used", "available"]
|
|
744
|
+
],
|
|
745
|
+
order: null
|
|
746
|
+
};
|
|
747
|
+
donutConfig.tooltip = {
|
|
748
|
+
contents: function (d) {
|
|
749
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
750
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
751
|
+
'</span>';
|
|
752
|
+
}
|
|
753
|
+
};
|
|
739
754
|
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
755
|
+
var chart1 = c3.generate(donutConfig);
|
|
756
|
+
var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
|
|
757
|
+
donutChartTitle.text("");
|
|
758
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
759
|
+
donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
745
760
|
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
761
|
+
var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
|
|
762
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-4';
|
|
763
|
+
sparklineConfig.data = {
|
|
764
|
+
columns: [
|
|
765
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
766
|
+
],
|
|
767
|
+
type: 'area'
|
|
768
|
+
};
|
|
754
769
|
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
</div>
|
|
770
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
771
|
+
</script>
|
|
758
772
|
</div>
|
|
759
773
|
</div>
|
|
760
774
|
|
|
775
|
+
</div>
|
|
761
776
|
</div><!-- /row -->
|
|
762
777
|
<div class="row row-cards-pf">
|
|
763
778
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
764
779
|
<div class="col-xs-12 col-sm-6 col-md-5">
|
|
780
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
765
781
|
<div class="card-pf">
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
782
|
+
<div class="card-pf-heading">
|
|
783
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
784
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
785
|
+
Last 30 Days <span class="caret"></span>
|
|
786
|
+
</button>
|
|
787
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
788
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
789
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
790
|
+
</ul>
|
|
791
|
+
</div>
|
|
792
|
+
<h2 class="card-pf-title">
|
|
793
|
+
Card Title
|
|
794
|
+
</h2>
|
|
795
|
+
</div>
|
|
796
|
+
<div class="card-pf-body">
|
|
797
|
+
<p>[card contents]</p>
|
|
798
|
+
</div>
|
|
799
|
+
</div>
|
|
800
|
+
|
|
784
801
|
</div>
|
|
785
802
|
<div class="col-xs-12 col-sm-6 col-md-7">
|
|
803
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
786
804
|
<div class="card-pf">
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
805
|
+
<h2 class="card-pf-title">
|
|
806
|
+
Card Title
|
|
807
|
+
</h2>
|
|
808
|
+
<div class="card-pf-body">
|
|
809
|
+
<p>[card contents]</p>
|
|
810
|
+
</div>
|
|
811
|
+
<div class="card-pf-footer">
|
|
812
|
+
<div class="dropdown card-pf-time-frame-filter">
|
|
813
|
+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
814
|
+
Last 30 Days <span class="caret"></span>
|
|
815
|
+
</button>
|
|
816
|
+
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
817
|
+
<li><a href="#">Last 60 Days</a></li>
|
|
818
|
+
<li><a href="#">Last 90 Days</a></li>
|
|
819
|
+
</ul>
|
|
820
|
+
</div>
|
|
821
|
+
<p>
|
|
822
|
+
<a href="#" class="card-pf-link-with-icon">
|
|
823
|
+
<span class="pficon pficon-add-circle-o"></span>Add New Cluster
|
|
824
|
+
</a>
|
|
825
|
+
</p>
|
|
826
|
+
</div>
|
|
827
|
+
</div>
|
|
828
|
+
|
|
810
829
|
</div>
|
|
811
830
|
</div><!-- /row -->
|
|
812
831
|
<div class="row row-cards-pf">
|