patternfly-sass 3.3.3 → 3.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/patternfly.js +5 -5
  3. data/assets/javascripts/patternfly.min.js +1 -1
  4. data/bower.json +2 -2
  5. data/lib/patternfly-sass/version.rb +2 -2
  6. data/spec/html/area-charts.html +50 -40
  7. data/spec/html/bar-charts.html +192 -131
  8. data/spec/html/cards.html +437 -418
  9. data/spec/html/donut-charts.html +165 -131
  10. data/spec/html/index.html +3 -0
  11. data/spec/html/layout-alt-fixed-inner-scroll.html +437 -418
  12. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +437 -418
  13. data/spec/html/layout-alt-fixed-with-footer.html +437 -418
  14. data/spec/html/layout-alt-fixed.html +437 -418
  15. data/spec/html/line-charts.html +120 -86
  16. data/spec/html/list-view.html +128 -95
  17. data/spec/html/pie-charts.html +107 -78
  18. data/spec/html/utilization-bar-charts.html +69 -0
  19. data/spec/html/vertical-navigation-without-icons.html +205 -205
  20. data/spec/html/vertical-navigation.html +205 -205
  21. 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
- <div style="width: 400px;">
47
- <h2>Donut Chart - Utilization</h2>
48
- <div>
49
- <div id="utilizationDonutChart"></div>
50
- </div>
51
- <h2>Donut Chart - Relationship to a Whole</h2>
52
- <div>
53
- <div id="donut-chart-no-legend"></div>
54
- <div id="donut-chart-right-legend"></div>
55
- <div id="donut-chart-bottom-legend"></div>
56
- </div>
57
- <h2>Donut Chart - Small</h2>
58
- <div>
59
- <div id="smallDonutChart" class="donut-chart-pf"></div>
60
- <div style="text-align: center; width: 160px;">Animals</div>
61
- </div>
62
- </div>
63
- <script>
64
-
65
- var c3ChartDefaults = $().c3ChartDefaults();
66
-
67
- var donutData = {
68
- type : 'donut',
69
- colors: {
70
- Cats: $.pfPaletteColors.blue,
71
- Hamsters: $.pfPaletteColors.green,
72
- Fish: $.pfPaletteColors.orange,
73
- Dogs: $.pfPaletteColors.red
74
- },
75
- columns: [
76
- ['Dogs', 2],
77
- ['Cats', 2],
78
- ['Fish', 3],
79
- ['Hamsters', 1]
80
- ],
81
- onclick: function (d, i) { console.log("onclick", d, i); },
82
- onmouseover: function (d, i) { console.log("onmouseover", d, i); },
83
- onmouseout: function (d, i) { console.log("onmouseout", d, i); }
84
- };
85
-
86
- // Donut Chart - Utilization
87
- var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
88
- utilizationDonutChartConfig.bindto = '#utilizationDonutChart';
89
- utilizationDonutChartConfig.data = {
90
- type: "donut",
91
- columns: [
92
- ["Used", 60],
93
- ["Available", 40]
94
- ],
95
- groups: [
96
- ["used", "available"]
97
- ],
98
- order: null
99
- };
100
- utilizationDonutChartConfig.tooltip = {
101
- contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
102
- };
103
- var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
104
- $().pfSetDonutChartTitle("#utilizationDonutChart", "60", "MHz Used");
105
-
106
- // Donut Chart without Legend
107
- var donutChartConfig = c3ChartDefaults.getDefaultDonutConfig();
108
- donutChartConfig.bindto = '#donut-chart-no-legend';
109
- donutChartConfig.tooltip = {show: true};
110
- donutChartConfig.data = donutData;
111
- donutChartConfig.tooltip = {
112
- contents: $().pfDonutTooltipContents
113
- };
114
-
115
- var donutChartNoLegend = c3.generate(donutChartConfig);
116
- $().pfSetDonutChartTitle("#donut-chart-no-legend", "8", "Animals");
117
-
118
- // Donut Chart Bottom Legend
119
- var donutChartBottomConfig = c3ChartDefaults.getDefaultDonutConfig();
120
- donutChartBottomConfig.bindto = '#donut-chart-bottom-legend';
121
- donutChartBottomConfig.tooltip = {show: true};
122
- donutChartBottomConfig.data = donutData;
123
- donutChartBottomConfig.legend = {
124
- show: true,
125
- position: 'bottom'
126
- };
127
- donutChartBottomConfig.size = {
128
- width: 271,
129
- height: 191
130
- };
131
- donutChartBottomConfig.tooltip = {
132
- contents: $().pfDonutTooltipContents
133
- };
134
-
135
- var donutChartBottomLegend = c3.generate(donutChartBottomConfig);
136
- $().pfSetDonutChartTitle("#donut-chart-bottom-legend", "8", "Animals");
137
-
138
- // Right Legend
139
- var donutChartRightConfig = c3ChartDefaults.getDefaultDonutConfig();
140
- donutChartRightConfig.bindto = '#donut-chart-right-legend';
141
- donutChartRightConfig.tooltip = {show: true};
142
- donutChartRightConfig.data = donutData;
143
- donutChartRightConfig.legend = {
144
- show: true,
145
- position: 'right'
146
- };
147
- donutChartRightConfig.size = {
148
- width: 251,
149
- height: 171
150
- };
151
- donutChartRightConfig.tooltip = {
152
- contents: $().pfDonutTooltipContents
153
- };
154
-
155
- var donutChartRightLegend = c3.generate(donutChartRightConfig);
156
- $().pfSetDonutChartTitle("#donut-chart-right-legend", "8", "Animals");
157
-
158
- // Small Donut Chart
159
- var donutChartSmallConfig = c3ChartDefaults.getDefaultDonutConfig('8');
160
- donutChartSmallConfig.bindto = '#smallDonutChart';
161
- donutChartSmallConfig.tooltip = {show: true};
162
- donutChartSmallConfig.data = donutData;
163
- donutChartSmallConfig.legend = {
164
- show: true,
165
- position: 'right'
166
- };
167
- donutChartSmallConfig.size = {
168
- width: 250,
169
- height: 95
170
- };
171
- donutChartSmallConfig.tooltip = {
172
- contents: $().pfDonutTooltipContents
173
- };
174
-
175
- var donutChartSmall = c3.generate(donutChartSmallConfig);
176
- </script>
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
@@ -176,6 +176,9 @@
176
176
  <li>
177
177
  <a href="pie-charts.html">Pie Charts</a>
178
178
  </li>
179
+ <li>
180
+ <a href="utilization-bar-charts.html">Utilization Bar Charts</a>
181
+ </li>
179
182
  </ul>
180
183
  </div>
181
184
  <div class="col-sm-6">
data/spec/html/layout-alt-fixed-inner-scroll.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
- <h2 class="card-pf-title">
179
- <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
180
- </h2>
181
- <div class="card-pf-body">
182
- <p class="card-pf-aggregate-status-notifications">
183
- <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>
184
- </p>
185
- </div>
186
- </div>
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
- <h2 class="card-pf-title">
191
- <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
192
- </h2>
193
- <div class="card-pf-body">
194
- <p class="card-pf-aggregate-status-notifications">
195
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
196
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
197
- </p>
198
- </div>
199
- </div>
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
- <h2 class="card-pf-title">
204
- <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
205
- </h2>
206
- <div class="card-pf-body">
207
- <p class="card-pf-aggregate-status-notifications">
208
- <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
209
- </p>
210
- </div>
211
- </div>
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
- <h2 class="card-pf-title">
255
- <span class="fa fa-rebel"></span>
256
- <span class="card-pf-aggregate-status-count">0</span> Ipsum
257
- </h2>
258
- <div class="card-pf-body">
259
- <p class="card-pf-aggregate-status-notifications">
260
- <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>
261
- </p>
262
- </div>
263
- </div>
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
- <h2 class="card-pf-title">
268
- <span class="fa fa-paper-plane"></span>
269
- <a href="#">
270
- <span class="card-pf-aggregate-status-count">20</span> Amet
271
- </a>
272
- </h2>
273
- <div class="card-pf-body">
274
- <p class="card-pf-aggregate-status-notifications">
275
- <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
276
- </p>
277
- </div>
278
- </div>
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
- <h2 class="card-pf-title">
283
- <span class="pficon pficon-cluster"></span>
284
- <a href="#">
285
- <span class="card-pf-aggregate-status-count">9</span> Adipiscing
286
- </a>
287
- </h2>
288
- <div class="card-pf-body">
289
- <p class="card-pf-aggregate-status-notifications">
290
- <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
291
- </p>
292
- </div>
293
- </div>
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
- <div class="card-pf-heading">
346
- <h2 class="card-pf-title">
347
- Top Utilized Clusters
348
- </h2>
349
- </div>
350
- <div class="card-pf-body">
351
- <div class="progress-description">
352
- RHOS6-Controller
353
- </div>
354
- <div class="progress progress-label-top-right">
355
- <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">
356
- <span><strong>190.0 of 200.0 GB</strong> Used</span>
357
- </div>
358
- <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">
359
- <span class="sr-only">5% Available</span>
360
- </div>
361
- </div>
362
- <div class="progress-description">
363
- CFMEQE-Cluster
364
- </div>
365
- <div class="progress progress-label-top-right">
366
- <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">
367
- <span><strong>100.0 of 200.0 GB</strong> Used</span>
368
- </div>
369
- <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">
370
- <span class="sr-only">50% Available</span>
371
- </div>
372
- </div>
373
- <div class="progress-description">
374
- RHOS-Undercloud
375
- </div>
376
- <div class="progress progress-label-top-right">
377
- <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">
378
- <span><strong>140.0 of 200.0 GB</strong> Used</span>
379
- </div>
380
- <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">
381
- <span class="sr-only">30% Available</span>
382
- </div>
383
- </div>
384
- <div class="progress-description">
385
- RHEL6-Controller
386
- </div>
387
- <div class="progress progress-label-top-right">
388
- <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">
389
- <span><strong>153.0 of 200.0 GB</strong> Used</span>
390
- </div>
391
- <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">
392
- <span class="sr-only">23.5% Available</span>
393
- </div>
394
- </div>
395
- </div>
396
- </div>
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
- <div class="card-pf-heading">
401
- <h2 class="card-pf-title">
402
- Quotas
403
- </h2>
404
- </div>
405
- <div class="card-pf-body">
406
- <div class="progress-container progress-description-left progress-label-right">
407
- <div class="progress-description">
408
- CPU
409
- </div>
410
- <div class="progress">
411
- <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
412
- <span><strong>115 of 460</strong> MHz</span>
413
- </div>
414
- <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">
415
- <span class="sr-only">75% Available</span>
416
- </div>
417
- </div>
418
- </div>
419
- <div class="progress-container progress-description-left progress-label-right">
420
- <div class="progress-description">
421
- Memory
422
- </div>
423
- <div class="progress">
424
- <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">
425
- <span><strong>8 of 16</strong> GB</span>
426
- </div>
427
- <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">
428
- <span class="sr-only">50% Available</span>
429
- </div>
430
- </div>
431
- </div>
432
- <div class="progress-container progress-description-left progress-label-right">
433
- <div class="progress-description">
434
- Pods
435
- </div>
436
- <div class="progress">
437
- <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">
438
- <span><strong>5 of 8</strong> Total</span>
439
- </div>
440
- <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">
441
- <span class="sr-only">37.5% Available</span>
442
- </div>
443
- </div>
444
- </div>
445
- <div class="progress-container progress-description-left progress-label-right">
446
- <div class="progress-description">
447
- Services
448
- </div>
449
- <div class="progress">
450
- <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
451
- <span><strong>2 of 2</strong> Total</span>
452
- </div>
453
- </div>
454
- </div>
455
- </div>
456
- </div>
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
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
521
- <div class="col-md-12">
522
- <div class="card-pf card-pf-utilization">
523
- <div class="card-pf-heading">
524
- <p class="card-pf-heading-details">Last 30 days</p>
525
- <h2 class="card-pf-title">
526
- Utilization
527
- </h2>
528
- </div>
529
- <div class="card-pf-body">
530
- <div class="row">
531
- <div class="col-xs-12 col-sm-4 col-md-4">
532
- <h3 class="card-pf-subtitle">CPU</h3>
533
- <p class="card-pf-utilization-details">
534
- <span class="card-pf-utilization-card-details-count">50</span>
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
- </p>
540
- <div id="chart-pf-donut-1"></div>
541
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
542
- <script>
543
- var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
544
- donutConfig.bindto = '#chart-pf-donut-1';
545
- donutConfig.color = {
546
- pattern: ["#cc0000","#D1D1D1"]
547
- };
548
- donutConfig.data = {
549
- type: "donut",
550
- columns: [
551
- ["Used", 95],
552
- ["Available", 5]
553
- ],
554
- groups: [
555
- ["used", "available"]
556
- ],
557
- order: null
558
- };
559
- donutConfig.tooltip = {
560
- contents: function (d) {
561
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
562
- Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
563
- '</span>';
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
- var chart1 = c3.generate(donutConfig);
568
- var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
569
- donutChartTitle.text("");
570
- donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
571
- donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
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
- var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
574
- sparklineConfig.bindto = '#chart-pf-sparkline-1';
575
- sparklineConfig.data = {
576
- columns: [
577
- ['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
578
- ],
579
- type: 'area'
580
- };
581
- var chart2 = c3.generate(sparklineConfig);
582
- </script>
583
- </div>
584
- <div class="col-xs-12 col-sm-4 col-md-4">
585
- <h3 class="card-pf-subtitle">Memory</h3>
586
- <p class="card-pf-utilization-details">
587
- <span class="card-pf-utilization-card-details-count">256</span>
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
- </p>
593
- <div id="chart-pf-donut-2"></div>
594
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
595
- <script>
596
- var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
597
- donutConfig.bindto = '#chart-pf-donut-2';
598
- donutConfig.color = {
599
- pattern: ["#3f9c35","#D1D1D1"]
600
- };
601
- donutConfig.data = {
602
- type: "donut",
603
- columns: [
604
- ["Used", 41],
605
- ["Available", 59]
606
- ],
607
- groups: [
608
- ["used", "available"]
609
- ],
610
- order: null
611
- };
612
- donutConfig.tooltip = {
613
- contents: function (d) {
614
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
615
- Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
616
- '</span>';
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
- var chart3 = c3.generate(donutConfig);
621
- var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
622
- donutChartTitle.text("");
623
- donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
624
- donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
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
- var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
627
- sparklineConfig.bindto = '#chart-pf-sparkline-2';
628
- sparklineConfig.data = {
629
- columns: [
630
- ['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
631
- ],
632
- type: 'area'
633
- };
634
- var chart4 = c3.generate(sparklineConfig);
635
- </script>
636
- </div>
637
- <div class="col-xs-12 col-sm-4 col-md-4">
638
- <h3 class="card-pf-subtitle">Network</h3>
639
- <p class="card-pf-utilization-details">
640
- <span class="card-pf-utilization-card-details-count">200</span>
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
- </p>
646
- <div id="chart-pf-donut-3"></div>
647
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
648
- <script>
649
- var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
650
- donutConfig.bindto = '#chart-pf-donut-3';
651
- donutConfig.color = {
652
- pattern: ["#EC7A08","#D1D1D1"]
653
- };
654
- donutConfig.data = {
655
- type: "donut",
656
- columns: [
657
- ["Used", 85],
658
- ["Available", 15]
659
- ],
660
- groups: [
661
- ["used", "available"]
662
- ],
663
- order: null
664
- };
665
- donutConfig.tooltip = {
666
- contents: function (d) {
667
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
668
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
669
- '</span>';
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
- var chart5 = c3.generate(donutConfig);
674
- var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
675
- donutChartTitle.text("");
676
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
677
- donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
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
- var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
680
- sparklineConfig.bindto = '#chart-pf-sparkline-3';
681
- sparklineConfig.data = {
682
- columns: [
683
- ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
684
- ],
685
- type: 'area'
686
- };
687
- var chart6 = c3.generate(sparklineConfig);
688
- </script>
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
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
698
- <div class="col-xs-12 col-sm-4 col-md-4">
699
- <div class="card-pf card-pf-utilization">
700
- <h2 class="card-pf-title">
701
- Network
702
- </h2>
703
- <div class="card-pf-body">
704
- <p class="card-pf-utilization-details">
705
- <span class="card-pf-utilization-card-details-count">200</span>
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
- </p>
711
- <div id="chart-pf-donut-4"></div>
712
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
713
- <script>
714
- var c3ChartDefaults = $().c3ChartDefaults();
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
- var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
717
- donutConfig.bindto = '#chart-pf-donut-4';
718
- donutConfig.color = {
719
- pattern: ["#EC7A08","#D1D1D1"]
720
- };
721
- donutConfig.data = {
722
- type: "donut",
723
- columns: [
724
- ["Used", 85],
725
- ["Available", 15]
726
- ],
727
- groups: [
728
- ["used", "available"]
729
- ],
730
- order: null
731
- };
732
- donutConfig.tooltip = {
733
- contents: function (d) {
734
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
735
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
736
- '</span>';
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
- var chart1 = c3.generate(donutConfig);
741
- var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
742
- donutChartTitle.text("");
743
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
744
- donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
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
- var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
747
- sparklineConfig.bindto = '#chart-pf-sparkline-4';
748
- sparklineConfig.data = {
749
- columns: [
750
- ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
751
- ],
752
- type: 'area'
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
- var chart2 = c3.generate(sparklineConfig);
756
- </script>
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
- <div class="card-pf-heading">
767
- <div class="dropdown card-pf-time-frame-filter">
768
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
769
- Last 30 Days <span class="caret"></span>
770
- </button>
771
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
772
- <li><a href="#">Last 60 Days</a></li>
773
- <li><a href="#">Last 90 Days</a></li>
774
- </ul>
775
- </div>
776
- <h2 class="card-pf-title">
777
- Card Title
778
- </h2>
779
- </div>
780
- <div class="card-pf-body">
781
- <p>[card contents]</p>
782
- </div>
783
- </div>
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
- <h2 class="card-pf-title">
788
- Card Title
789
- </h2>
790
- <div class="card-pf-body">
791
- <p>[card contents]</p>
792
- </div>
793
- <div class="card-pf-footer">
794
- <div class="dropdown card-pf-time-frame-filter">
795
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
796
- Last 30 Days <span class="caret"></span>
797
- </button>
798
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
799
- <li><a href="#">Last 60 Days</a></li>
800
- <li><a href="#">Last 90 Days</a></li>
801
- </ul>
802
- </div>
803
- <p>
804
- <a href="#" class="card-pf-link-with-icon">
805
- <span class="pficon pficon-add-circle-o"></span>Add New Cluster
806
- </a>
807
- </p>
808
- </div>
809
- </div>
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">