support for new dashboard.js
Costa Tsaousis (ktsaou) committed
Jan 15, 2016 at 00:44 UTC
d7cab06cac7efd7424dc76b67cacdecf817b8489
1 file changed
+144
-79
web/index.html
+144
-79
@@ -109,6 +109,16 @@
109
* sections of docs content.
110
*/
111
112
+ .affix {
113
+ position: static;
114
+ top: 70px !important;
115
+ /*width: 220px;*/
116
+ }
117
+
118
+ .affix-top {
119
+ /*width: 220px;*/
120
+ }
121
+
122
.dashboard-sidebar {
123
max-height: calc(100% - 70px) !important;
124
overflow-y: auto;
@@ -119,21 +129,13 @@
129
.dashboard-sidebar.affix {
130
position: static;
131
}
132
+
133
@media (min-width: 768px) {
134
.dashboard-sidebar {
135
padding-left: 20px;
136
}
137
}
138
128
- .affix {
129
- position: static;
130
- top: 70px !important;
131
- /*width: 220px;*/
132
- }
133
- .affix-top {
134
- /*width: 220px;*/
135
- }
136
-
139
/* First level of nav */
140
.dashboard-sidenav {
141
margin-top: 20px;
@@ -214,6 +216,28 @@
216
.dashboard-theme-toggle {
217
display: block;
218
}
219
+
220
+ /* Widen the fixed sidebar */
221
+ .dashboard-sidebar.affix,
222
+ .dashboard-sidebar.affix-top,
223
+ .dashboard-sidebar.affix-bottom {
224
+ width: 200px !important;
225
+ }
226
+
227
+ .dashboard-sidebar.affix {
228
+ position: fixed; /* Undo the static from mobile first approach */
229
+ top: 20px;
230
+ }
231
+
232
+ .dashboard-sidebar.affix-bottom {
233
+ position: absolute; /* Undo the static from mobile first approach */
234
+ }
235
+
236
+ .dashboard-sidebar.affix-bottom .dashboard-sidenav,
237
+ .dashboard-sidebar.affix .dashboard-sidenav {
238
+ margin-top: 0;
239
+ margin-bottom: 0;
240
+ }
241
}
242
243
/* Show and affix the side nav when space allows it */
@@ -221,10 +245,12 @@
245
.dashboard-sidebar .nav > .active > ul {
246
display: block;
247
}
248
+
249
/* Widen the fixed sidebar */
250
.dashboard-sidebar.affix,
251
+ .dashboard-sidebar.affix-top,
252
.dashboard-sidebar.affix-bottom {
227
- width: 213px;
253
+ width: 200px !important;
254
}
255
.dashboard-sidebar.affix {
256
position: fixed; /* Undo the static from mobile first approach */
@@ -239,9 +265,11 @@
265
margin-bottom: 0;
266
}
267
}
268
+
269
@media (min-width: 1200px) {
270
/* Widen the fixed sidebar again */
271
.dashboard-sidebar.affix-bottom,
272
+ .dashboard-sidebar.affix-top,
273
.dashboard-sidebar.affix {
274
width: 263px;
275
}
@@ -253,7 +281,7 @@
281
<!-- <script> netdataServer = "http://box:19999"; </script> -->
282
283
<!-- load the dashboard manager - it will do the rest -->
256
- <script type="text/javascript" src="dashboard.js?v19"></script>
284
+ <script type="text/javascript" src="dashboard.js?v20"></script>
285
</head>
286
287
<body data-spy="scroll" data-target="#sidebar">
@@ -426,78 +454,113 @@
454
<h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
455
</div>
456
<div class="modal-body">
429
- <form id="optionsForm" method="get" class="form-horizontal">
430
- <div class="form-group">
431
- <center>
432
- <small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
433
- <br/>
434
- To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
435
- </center>
436
-
437
- <table>
438
- <tr class="option-row">
439
- <td class="option-control"><input id="stop_updates_when_focus_is_lost" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="On Focus" data-off="Always" data-width="110px"></td>
440
- <td class="option-info"><strong>When to refresh the charts?</strong><br/>
441
- <small>When set to <b>On Focus</b>, the charts will stop being updated if the page / tab does not have the focus of the user. When set to <b>Always</b>, the charts will always be refreshed. Set it to <b>On Focus</b> it to lower the CPU requirements of the browser (and extend the battery of laptops and tablets) when this page does not have your focus. Set to <b>Always</b> to work on another window (i.e. change the settings of something) and have the charts auto-refresh in this window.</small>
442
- </td>
443
- </tr>
444
- <tr class="option-row">
445
- <td class="option-control">
446
- <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
447
- </td>
448
- <td class="option-info"><strong>Which dimensions to show?</strong><br/>
449
- <small>When set to <b>Non Zero</b>, dimensions that have all their values (within the current view) set to zero will not be transfered from the netdata server (except if all dimensions of the chart are zero, in which case this setting does nothing - all dimensions are transfered and shown). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transfered between netdata and your browser, lower the CPU requirements of your browser (fewer lines to draw) and increase the focus on the legends (fewer entries at the legends).</small>
450
- </td>
451
- </tr>
452
- <tr class="option-row">
453
- <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
454
- <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
455
- <small>When set to <b>Destroy</b>, charts that are not in the current viewport of the browser (are above, or below the visible area of the page), will be destroyed and re-created if and when they become visible again. When set to <b>Hide</b>, the not-visible charts will be just hidden, to simplify the DOM and speed up your browser. Set it to <b>Destroy</b>, to lower the memory requirements of your browser. Set it to <b>Hide</b> for smoother page scrolling.</small>
456
- </td>
457
- </tr>
458
- <tr class="option-row">
459
- <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
460
- <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
461
- <small>When set to <b>parallel</b>, visible charts are refreshed in parallel (all queries are sent to netdata server in parallel) and are rendered asynchronously. When set to <b>sequencial</b> charts are refreshed one after another. Set it to parallel if your browser can cope with it (most modern browsers do), set it to sequencial if you work on an older/slower computer.</small>
462
- </td>
463
- </tr>
464
- <tr class="option-row" id="concurrent_refreshes_row">
465
- <td class="option-control"></td>
466
- <td class="option-info">
457
+ <center>
458
+ <small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
459
+ <br/>
460
+ To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
461
+ </center>
462
+ <div style="padding: 10px;"></div>
463
+
464
+ <!-- Nav tabs -->
465
+ <ul class="nav nav-tabs" role="tablist">
466
+ <li role="presentation" class="active"><a href="#settings_performance" aria-controls="settings_performance" role="tab" data-toggle="tab">Performance</a></li>
467
+ <li role="presentation"><a href="#settings_sync" aria-controls="settings_sync" role="tab" data-toggle="tab">Synchronization</a></li>
468
+ <li role="presentation"><a href="#settings_visual" aria-controls="settings_visual" role="tab" data-toggle="tab">Visual</a></li>
469
+ </ul>
470
+
471
+ <!-- Tab panes -->
472
+ <div class="tab-content">
473
+ <div role="tabpanel" class="tab-pane active" id="settings_performance">
474
+ <form id="optionsForm" method="get" class="form-horizontal">
475
+ <div class="form-group">
476
<table>
477
<tr class="option-row">
469
- <td class="option-control">
470
- <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
471
- </td>
472
- <td class="option-info">
473
- <strong>Shall we re-sync chart refreshes?</strong><br/>
474
- <small>When set to <b>Resync</b>, the dashboard will attempt to re-synchronize all the charts so that they are refreshed concurrently. When set to <b>Best Effort</b>, each chart may be refreshed with a little time difference to the others. Normally, the dashboard starts refreshing them in parallel, but depending on the speed of your computer and the network latencies, charts start having a slight time difference. Setting this to <b>Resync</b> will attempt to re-synchronize the charts on every update. Setting it to <b>Best Effort</b> may lower the pressure on your browser and the network.</small>
475
- </td>
476
- </tr>
478
+ <td class="option-control"><input id="stop_updates_when_focus_is_lost" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="On Focus" data-off="Always" data-width="110px"></td>
479
+ <td class="option-info"><strong>When to refresh the charts?</strong><br/>
480
+ <small>When set to <b>On Focus</b>, the charts will stop being updated if the page / tab does not have the focus of the user. When set to <b>Always</b>, the charts will always be refreshed. Set it to <b>On Focus</b> it to lower the CPU requirements of the browser (and extend the battery of laptops and tablets) when this page does not have your focus. Set to <b>Always</b> to work on another window (i.e. change the settings of something) and have the charts auto-refresh in this window.</small>
481
+ </td>
482
+ </tr>
483
+ <tr class="option-row">
484
+ <td class="option-control">
485
+ <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
486
+ </td>
487
+ <td class="option-info"><strong>Which dimensions to show?</strong><br/>
488
+ <small>When set to <b>Non Zero</b>, dimensions that have all their values (within the current view) set to zero will not be transfered from the netdata server (except if all dimensions of the chart are zero, in which case this setting does nothing - all dimensions are transfered and shown). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transfered between netdata and your browser, lower the CPU requirements of your browser (fewer lines to draw) and increase the focus on the legends (fewer entries at the legends).</small>
489
+ </td>
490
+ </tr>
491
+ <tr class="option-row">
492
+ <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
493
+ <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
494
+ <small>When set to <b>Destroy</b>, charts that are not in the current viewport of the browser (are above, or below the visible area of the page), will be destroyed and re-created if and when they become visible again. When set to <b>Hide</b>, the not-visible charts will be just hidden, to simplify the DOM and speed up your browser. Set it to <b>Destroy</b>, to lower the memory requirements of your browser. Set it to <b>Hide</b> for smoother page scrolling.</small>
495
+ </td>
496
+ </tr>
497
+ </table>
498
+ </div>
499
+ </form>
500
+ </div>
501
+ <div role="tabpanel" class="tab-pane" id="settings_sync">
502
+ <form id="optionsForm" method="get" class="form-horizontal">
503
+ <div class="form-group">
504
+ <table>
505
+ <tr class="option-row">
506
+ <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
507
+ <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
508
+ <small>When set to <b>parallel</b>, visible charts are refreshed in parallel (all queries are sent to netdata server in parallel) and are rendered asynchronously. When set to <b>sequencial</b> charts are refreshed one after another. Set it to parallel if your browser can cope with it (most modern browsers do), set it to sequencial if you work on an older/slower computer.</small>
509
+ </td>
510
+ </tr>
511
+ <tr class="option-row" id="concurrent_refreshes_row">
512
+ <td class="option-control"></td>
513
+ <td class="option-info">
514
+ <table>
515
+ <tr class="option-row">
516
+ <td class="option-control">
517
+ <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
518
+ </td>
519
+ <td class="option-info">
520
+ <strong>Shall we re-sync chart refreshes?</strong><br/>
521
+ <small>When set to <b>Resync</b>, the dashboard will attempt to re-synchronize all the charts so that they are refreshed concurrently. When set to <b>Best Effort</b>, each chart may be refreshed with a little time difference to the others. Normally, the dashboard starts refreshing them in parallel, but depending on the speed of your computer and the network latencies, charts start having a slight time difference. Setting this to <b>Resync</b> will attempt to re-synchronize the charts on every update. Setting it to <b>Best Effort</b> may lower the pressure on your browser and the network.</small>
522
+ </td>
523
+ </tr>
524
+ </table>
525
+ </td>
526
+ </tr>
527
+ <tr class="option-row">
528
+ <td class="option-control"><input id="sync_selection" type="checkbox" checked data-toggle="toggle" data-on="Sync" data-off="Don't Sync" data-onstyle="success" data-offstyle="danger" data-width="110px"></td>
529
+ <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
530
+ <small>When enabled, a selection on one chart will automatically select the same time on all other visible charts and the legends of all visible charts will be updated to show the selected values. When disabled, only the chart getting the user's attention will be selected. Enable it to get better insights of the data. Disable it if you are on a very slow computer that cannot actually do it.</small>
531
+ </td>
532
+ </tr>
533
+ <tr class="option-row">
534
+ <td class="option-control"><input id="sync_pan_and_zoom" type="checkbox" checked data-toggle="toggle" data-on="Sync" data-off="Don't Sync" data-onstyle="success" data-offstyle="danger" data-width="110px"></td>
535
+ <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
536
+ <small>When enabled, pan and zoom operations on a chart will be replicated to all charts (even the ones that are not currently visible - of course only when they will become visible). When disabled, pan and zoom operations will not be propagated to other charts.</small>
537
+ </td>
538
+ </tr>
539
</table>
478
- </td>
479
- </tr>
480
- <tr class="option-row">
481
- <td class="option-control"><input id="sync_selection" type="checkbox" checked data-toggle="toggle" data-on="Sync" data-off="Don't Sync" data-width="110px"></td>
482
- <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
483
- <small>When enabled, a selection on one chart will automatically select the same time on all other visible charts and the legends of all visible charts will be updated to show the selected values. When disabled, only the chart getting the user's attention will be selected. Enable it to get better insights of the data. Disable it if you are on a very slow computer that cannot actually do it.</small>
484
- </td>
485
- </tr>
486
- <tr class="option-row">
487
- <td class="option-control"><input id="sync_pan_and_zoom" type="checkbox" checked data-toggle="toggle" data-on="Sync" data-off="Don't Sync" data-width="110px"></td>
488
- <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
489
- <small>When enabled, pan and zoom operations on a chart will be replicated to all charts (even the ones that are not currently visible - of course only when they will become visible). When disabled, pan and zoom operations will not be propagated to other charts.</small>
490
- </td>
491
- </tr>
492
- <tr class="option-row">
493
- <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle" data-on="Smooth" data-off="Rough" data-width="110px"></td>
494
- <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
495
- <small>When set to <b>Smooth</b> the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points.</small>
496
- </td>
497
- </tr>
498
- </table>
540
+ </div>
541
+ </form>
542
</div>
500
- </form>
543
+ <div role="tabpanel" class="tab-pane" id="settings_visual">
544
+ <form id="optionsForm" method="get" class="form-horizontal">
545
+ <div class="form-group">
546
+ <table>
547
+ <tr class="option-row">
548
+ <td class="option-control"><input id="pan_and_zoom_data_padding" type="checkbox" checked data-toggle="toggle" data-on="Pad" data-off="Don't Pad" data-width="110px"></td>
549
+ <td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
550
+ <small>When set to <b>Pad</b> the charts will be padded with more data, both before and after the visible area, thus giving the impression the whole database is loaded. This padding will happen only after the first pan or zoom operation on the chart (initially all charts have only the visible data). When set to <b>Don't Pad</b> only the visible data will be transfered from the netdata server, even after the first pan and zoom operation.</small>
551
+ </td>
552
+ </tr>
553
+ <tr class="option-row">
554
+ <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle" data-on="Smooth" data-off="Rough" data-width="110px"></td>
555
+ <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
556
+ <small>When set to <b>Smooth</b> the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points.</small>
557
+ </td>
558
+ </tr>
559
+ </table>
560
+ </div>
561
+ </form>
562
+ </div>
563
+ </div>
564
</div>
565
<div class="modal-footer">
566
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@@ -1435,6 +1498,7 @@ function prepareScreen(data) {
1498
sync_option('sync_pan_and_zoom');
1499
sync_option('stop_updates_when_focus_is_lost');
1500
sync_option('smooth_plot');
1501
+ sync_option('pan_and_zoom_data_padding');
1502
1503
if(NETDATA.getOption('parallel_refresher') === false) {
1504
$('#concurrent_refreshes_row').hide();
@@ -1454,6 +1518,7 @@ function prepareScreen(data) {
1518
$('#sync_pan_and_zoom').change(function() { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
1519
$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
1520
$('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1521
+ $('#pan_and_zoom_data_padding').change(function() { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
1522
1523
if(document.location.hostname === demo_hostname)
1524
setTimeout(function() {