snapshots and highlight improvements
Costa Tsaousis (ktsaou) committed
Nov 22, 2017 at 20:32 UTC
1186734d5555f2d845f28c244b6b71af7d705c5d
2 files changed
+146
-56
web/dashboard.js
+11
-2
@@ -309,6 +309,9 @@ var NETDATA = window.NETDATA || {};
309
highlightCallback: null, // what to call when a highlighted range is setup
310
highlight_after: null, // highlight after this time
311
highlight_before: null, // highlight before this time
312
+ highlight_view_after: null, // the charts after_ms viewport when the highlight was setup
313
+ highlight_view_before: null, // the charts before_ms viewport, when the highlight was setup
314
+ highlight_state: null, // the chart the highlight was setup
315
316
passive_events: null, // true if the browser supports passive events
317
@@ -4612,8 +4615,10 @@ var NETDATA = window.NETDATA || {};
4615
if(typeof callback === 'function')
4616
return callback();
4617
}
4615
- else if(netdataSnapshotData !== null ) {
4616
- NETDATA.error(404, that.chart_url);
4618
+ else if(netdataSnapshotData !== null) {
4619
+ // console.log(this);
4620
+ // console.log(NETDATA.chartRegistry);
4621
+ NETDATA.error(404, 'host: ' + this.host + ', chart: ' + this.id);
4622
error('chart not found in snapshot');
4623
4624
if(typeof callback === 'function')
@@ -5937,6 +5942,10 @@ var NETDATA = window.NETDATA || {};
5942
dygraph.drawGraph_(false);
5943
NETDATA.globalPanAndZoom.setMaster(state, state.view_after, state.view_before);
5944
5945
+ NETDATA.options.highlight_state = state;
5946
+ NETDATA.options.highlight_view_after = state.view_after;
5947
+ NETDATA.options.highlight_view_before = state.view_before;
5948
+
5949
if(typeof NETDATA.options.highlightCallback === 'function')
5950
NETDATA.options.highlightCallback(true, NETDATA.options.highlight_after, NETDATA.options.highlight_before);
5951
}
web/index.html
+135
-54
@@ -93,8 +93,13 @@
93
pointer-events: auto !important;
94
}
95
96
- .navbar-highlight-content-close {
96
+ .navbar-highlight-button-left {
97
cursor: pointer;
98
+ padding-right: 10px;
99
+ }
100
+ .navbar-highlight-button-right {
101
+ cursor: pointer;
102
+ padding-left: 10px;
103
}
104
105
.modal-wide .modal-dialog {
@@ -696,12 +701,30 @@
701
urlOptions.highlight_before = Math.round(before);
702
urlOptions.hashUpdate();
703
704
+ if(NETDATA.options.highlight_view_after === null || NETDATA.options.highlight_view_before === null || NETDATA.options.highlight_state === null) {
705
+ NETDATA.options.highlight_view_after = (urlOptions.after > 0) ? urlOptions.after : null ;
706
+ NETDATA.options.highlight_view_before = (urlOptions.before > 0) ? urlOptions.before : null ;
707
+ NETDATA.options.highlight_state = NETDATA.options.targets[0];
708
+ }
709
+ var show_eye = (!(NETDATA.options.highlight_view_after === null || NETDATA.options.highlight_view_before === null || NETDATA.options.highlight_state === null));
710
+
711
if(status === true && after > 0 && before > 0 && after < before) {
712
var d1 = NETDATA.dateTime.localeDateString(after);
713
var d2 = NETDATA.dateTime.localeDateString(before);
714
if(d1 === d2) d2 = '';
703
- document.getElementById('navbar-highlight-content').innerHTML = 'Highlighted timeframe <b>' + d1 + ' <code>' + NETDATA.dateTime.localeTimeString(after) + '</code></b> to <b>' + d2 + ' <code>' + NETDATA.dateTime.localeTimeString(before) + '</code></b>, duration <b>' + NETDATA.seconds4human(Math.round((before - after) / 1000)) + '</b> <span class="navbar-highlight-content-close" onclick="urlOptions.clearHighlight();" style="padding-left: 10px;"><i class="fa fa-times" aria-hidden="true"></i></span>';
715
+ document.getElementById('navbar-highlight-content').innerHTML =
716
+ ((show_eye === true)?'<span class="navbar-highlight-button-left highlight-tooltip" onclick="urlOptions.showHighlight();" title="view the highlighted time-frame" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-eye" aria-hidden="true"></i></span>':'').toString()
717
+ + 'highlighted time-frame'
718
+ + ' <b>' + d1 + ' <code>' + NETDATA.dateTime.localeTimeString(after) + '</code></b> to '
719
+ + ' <b>' + d2 + ' <code>' + NETDATA.dateTime.localeTimeString(before) + '</code></b>, '
720
+ + 'duration <b>' + NETDATA.seconds4human(Math.round((before - after) / 1000)) + '</b>'
721
+ + '<span class="navbar-highlight-button-right highlight-tooltip" onclick="urlOptions.clearHighlight();" title="clear the highlighted time-frame" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-times" aria-hidden="true"></i></span>';
722
+
723
$('.navbar-highlight').show();
724
+
725
+ $('.highlight-tooltip').tooltip({
726
+ container: 'body'
727
+ });
728
}
729
else
730
$('.navbar-highlight').hide();
@@ -710,13 +733,24 @@
733
clearHighlight: function() {
734
NETDATA.options.highlight_after = null;
735
NETDATA.options.highlight_before = null;
736
+ NETDATA.options.highlight_view_after = null;
737
+ NETDATA.options.highlight_vew_before = null;
738
+ NETDATA.options.highlight_state = null;
739
740
if(NETDATA.globalPanAndZoom.isActive() === true)
741
NETDATA.globalPanAndZoom.clearMaster();
742
743
urlOptions.netdataHighlightCallback(false, 0, 0);
718
- }
744
+ },
745
+
746
+ showHighlight: function() {
747
+ if(NETDATA.options.highlight_view_after !== null && NETDATA.options.highlight_view_before !== null && NETDATA.options.highlight_state !== null) {
748
+ if(NETDATA.globalPanAndZoom.isMaster(NETDATA.options.highlight_state) === true)
749
+ NETDATA.globalPanAndZoom.clearMaster();
750
751
+ NETDATA.globalPanAndZoom.setMaster(NETDATA.options.highlight_state, NETDATA.options.highlight_view_after, NETDATA.options.highlight_view_before, true);
752
+ }
753
+ }
754
};
755
756
urlOptions.parseHash();
@@ -2250,7 +2284,7 @@
2284
all += "</div>";
2285
2286
if(!count_active)
2253
- active += "<h4>Everything is normal. No raised alarms.</h4>";
2287
+ active += '<div style="width:100%; height: 100px; text-align: center;"><span style="font-size: 50px;"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span><br/>Everything is normal. No raised alarms.</div>';
2288
else
2289
active += footer;
2290
@@ -3163,34 +3197,17 @@
3197
urlOptions.netdataHighlightCallback(false, 0, 0);
3198
}
3199
3166
- initializeDynamicDashboard(netdataSnapshotData.url);
3200
+ initializeDynamicDashboard();
3201
$('#loadSnapshotModal').modal('hide');
3202
});
3203
});
3170
- }
3171
-
3172
- function loadSnapshotPreflight() {
3173
- var files = document.getElementById('loadSnapshotSelectFiles').files;
3174
- if (files.length <= 0) {
3175
- document.getElementById('loadSnapshotFilename').innerHTML = '';
3176
- document.getElementById('loadSnapshotHostname').innerHTML = '';
3177
- document.getElementById('loadSnapshotURL').innerHTML = '';
3178
- document.getElementById('loadSnapshotCharts').innerHTML = '';
3179
- document.getElementById('loadSnapshotInfo').innerHTML = '';
3180
- document.getElementById('loadSnapshotTimeRange').innerHTML = '';
3181
- document.getElementById('loadSnapshotComments').innerHTML = '';
3182
- $('#loadSnapshotImport').addClass('disabled');
3183
- loadSnapshotModalLog('danger', 'No file selected');
3184
- return;
3185
- }
3204
+ };
3205
3187
- loadSnapshotModalLog('info', 'Loading file...');
3206
3207
+ function loadSnapshotPreflightFile(file) {
3208
var fr = new FileReader();
3209
fr.onload = function(e) {
3191
- // console.log(e);
3192
-
3193
- document.getElementById('loadSnapshotFilename').innerHTML = files.item(0).name;
3210
+ document.getElementById('loadSnapshotFilename').innerHTML = file.name;
3211
var result = null;
3212
try {
3213
result = JSON.parse(e.target.result);
@@ -3198,31 +3215,31 @@
3215
var date_after = new Date(result.after_ms);
3216
var date_before = new Date(result.before_ms);
3217
3201
- if(typeof result.charts_ok === 'undefined')
3218
+ if (typeof result.charts_ok === 'undefined')
3219
result.charts_ok = 'unknown';
3220
3204
- if(typeof result.charts_failed === 'undefined')
3221
+ if (typeof result.charts_failed === 'undefined')
3222
result.charts_failed = 0;
3223
3207
- if(typeof result.compression === 'undefined')
3224
+ if (typeof result.compression === 'undefined')
3225
result.compression = 'none';
3226
3210
- if(typeof result.data_size === 'undefined')
3227
+ if (typeof result.data_size === 'undefined')
3228
result.data_size = 0;
3229
3213
- document.getElementById('loadSnapshotFilename').innerHTML = '<code>' + files.item(0).name + '</code>';
3230
+ document.getElementById('loadSnapshotFilename').innerHTML = '<code>' + file.name + '</code>';
3231
document.getElementById('loadSnapshotHostname').innerHTML = '<b>' + result.hostname + '</b>, netdata version: <b>' + result.netdata_version.toString() + '</b>';
3232
document.getElementById('loadSnapshotURL').innerHTML = result.url;
3233
document.getElementById('loadSnapshotCharts').innerHTML = result.charts.charts_count.toString() + ' charts, ' + result.charts.dimensions_count.toString() + ' dimensions, ' + result.data_points.toString() + ' points per dimension, ' + Math.round(result.duration_ms / result.data_points).toString() + ' ms per point';
3217
- document.getElementById('loadSnapshotInfo').innerHTML = 'version: <b>' + result.snapshot_version.toString() + '</b>, includes <b>' + result.charts_ok.toString() + '</b> unique chart data queries ' + ((result.charts_failed > 0)?('<b>' + result.charts_failed.toString() + '</b> failed'):'').toString() + ', compressed with <code>' + result.compression.toString() + '</code>, data size ' + (Math.round(result.data_size * 100 / 1024 / 1024) / 100).toString() + ' MB';
3234
+ document.getElementById('loadSnapshotInfo').innerHTML = 'version: <b>' + result.snapshot_version.toString() + '</b>, includes <b>' + result.charts_ok.toString() + '</b> unique chart data queries ' + ((result.charts_failed > 0) ? ('<b>' + result.charts_failed.toString() + '</b> failed') : '').toString() + ', compressed with <code>' + result.compression.toString() + '</code>, data size ' + (Math.round(result.data_size * 100 / 1024 / 1024) / 100).toString() + ' MB';
3235
document.getElementById('loadSnapshotTimeRange').innerHTML = '<b>' + NETDATA.dateTime.localeDateString(date_after) + ' ' + NETDATA.dateTime.localeTimeString(date_after) + '</b> to <b>' + NETDATA.dateTime.localeDateString(date_before) + ' ' + NETDATA.dateTime.localeTimeString(date_before) + '</b>';
3219
- document.getElementById('loadSnapshotComments').innerHTML = ((result.comments)?result.comments:'').toString();
3236
+ document.getElementById('loadSnapshotComments').innerHTML = ((result.comments) ? result.comments : '').toString();
3237
loadSnapshotModalLog('success', 'File loaded, click <b>Import</b> to render it!');
3238
$('#loadSnapshotImport').removeClass('disabled');
3239
3240
tmpSnapshotData = result;
3241
}
3225
- catch(e) {
3242
+ catch (e) {
3243
console.log(e);
3244
document.getElementById('loadSnapshotStatus').className = "alert alert-danger";
3245
document.getElementById('loadSnapshotStatus').innerHTML = "Failed to parse this file!";
@@ -3230,8 +3247,54 @@
3247
}
3248
}
3249
3233
- //console.log(files.item(0));
3234
- fr.readAsText(files.item(0));
3250
+ //console.log(file);
3251
+ fr.readAsText(file);
3252
+ };
3253
+
3254
+ function loadSnapshotPreflightEmpty() {
3255
+ document.getElementById('loadSnapshotFilename').innerHTML = '';
3256
+ document.getElementById('loadSnapshotHostname').innerHTML = '';
3257
+ document.getElementById('loadSnapshotURL').innerHTML = '';
3258
+ document.getElementById('loadSnapshotCharts').innerHTML = '';
3259
+ document.getElementById('loadSnapshotInfo').innerHTML = '';
3260
+ document.getElementById('loadSnapshotTimeRange').innerHTML = '';
3261
+ document.getElementById('loadSnapshotComments').innerHTML = '';
3262
+ $('#loadSnapshotImport').addClass('disabled');
3263
+ };
3264
+
3265
+ var loadSnapshotDragAndDropInitialized = false;
3266
+ function loadSnapshotDragAndDropInit() {
3267
+ if(loadSnapshotDragAndDropInitialized === false) {
3268
+ loadSnapshotDragAndDropInitialized = true;
3269
+ $('#loadSnapshotDragAndDrop')
3270
+ .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
3271
+ e.preventDefault();
3272
+ e.stopPropagation();
3273
+ })
3274
+ .on('drop', function (e) {
3275
+ console.log(e);
3276
+ if(e.originalEvent.dataTransfer.files.length) {
3277
+ loadSnapshotPreflightFile(e.originalEvent.dataTransfer.files.item(0));
3278
+ }
3279
+ else {
3280
+ loadSnapshotPreflightEmpty();
3281
+ loadSnapshotModalLog('danger', 'No file selected');
3282
+ }
3283
+ });
3284
+ }
3285
+ };
3286
+
3287
+ function loadSnapshotPreflight() {
3288
+ var files = document.getElementById('loadSnapshotSelectFiles').files;
3289
+ if (files.length <= 0) {
3290
+ loadSnapshotPreflightEmpty();
3291
+ loadSnapshotModalLog('danger', 'No file selected');
3292
+ return;
3293
+ }
3294
+
3295
+ loadSnapshotModalLog('info', 'Loading file...');
3296
+
3297
+ loadSnapshotPreflightFile(files.item(0));
3298
}
3299
3300
// --------------------------------------------------------------------
@@ -3242,6 +3305,20 @@
3305
saveSnapshotStop = true;
3306
}
3307
3308
+ var saveSnapshotModalInitialized = false;
3309
+ function saveSnapshotModalInit() {
3310
+ if(saveSnapshotModalInitialized === false) {
3311
+ saveSnapshotModalInitialized = true;
3312
+ $('#saveSnapshotModal')
3313
+ .on('hide.bs.modal', saveSnapshotCancel)
3314
+ .on('show.bs.modal', saveSnapshotModalInit)
3315
+ .on('shown.bs.modal', function() {
3316
+ $('#saveSnapshotResolutionSlider').find(".slider-handle:first").attr("tabindex", 1);
3317
+ document.getElementById('saveSnapshotComments').focus();
3318
+ });
3319
+ }
3320
+ };
3321
+
3322
function saveSnapshotModalLog(priority, msg) {
3323
document.getElementById('saveSnapshotStatus').className = "alert alert-" + priority;
3324
document.getElementById('saveSnapshotStatus').innerHTML = msg;
@@ -3771,13 +3848,17 @@
3848
//else console.log('el.find(): not found');
3849
});
3850
3774
- $('#saveSnapshotModal').on('show.bs.modal', saveSnapshotModalInit);
3775
- $('#saveSnapshotModal').on('shown.bs.modal', function() {
3776
- $('#saveSnapshotResolutionSlider').find(".slider-handle:first").attr("tabindex", 1);
3777
- document.getElementById('saveSnapshotComments').focus();
3851
+ $('[data-toggle="tooltip"]').tooltip({
3852
+ animated: 'fade',
3853
+ trigger: 'hover',
3854
+ html: true,
3855
+ delay: {show: 500, hide: 0},
3856
+ container: 'body'
3857
});
3779
- $('#saveSnapshotModal').on('hide.bs.modal', saveSnapshotCancel);
3858
+ $('[data-toggle="popover"]').popover();
3859
3860
+ loadSnapshotDragAndDropInit();
3861
+ saveSnapshotModalInit();
3862
showPageFooter();
3863
3864
var update_options_modal = function() {
@@ -4131,7 +4212,7 @@
4212
<div class="container">
4213
<nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;">
4214
<ul class="nav navbar-nav">
4134
- <li class="dropdown" id="myNetdataDropdownParent">
4215
+ <li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
4216
<a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
4217
<ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu" id="myNetdataDropdownUL">
4218
<div class="row">
@@ -4157,20 +4238,20 @@
4238
<span class="icon-bar"></span>
4239
<span class="icon-bar"></span>
4240
</button>
4160
- <a href="/" class="navbar-brand" id="hostname" title="reload the dashboard">netdata</a>
4241
+ <a href="/" class="navbar-brand" id="hostname" title="server hostname<br/>click it to reload the dashboard" data-toggle="tooltip" data-placement="bottom">netdata</a>
4242
</div>
4243
<nav class="collapse navbar-collapse navbar-right" role="navigation">
4244
<ul class="nav navbar-nav">
4164
- <li id="alarmsButton"><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal" title="alarms"><i class="fa fa-bell"></i> <span class="hidden-sm hidden-md">Alarms </span><span id="alarms_count_badge" class="badge"></span></a></li>
4165
- <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal" title="dashboard settings"><i class="fa fa-sliders"></i> <span class="hidden-sm hidden-md">Settings</span></a></li>
4166
- <li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal" title="check for update"><i class="fa fa-cloud-download"></i> <span class="hidden-sm hidden-md">Update </span><span id="update_badge" class="badge"></span></a></li>
4167
- <li class="hidden-sm hidden-md"><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank" title="netdata on github"><i class="fa fa-github"></i></a></li>
4168
- <li class="hidden-sm hidden-md"><a href="https://twitter.com/linuxnetdata" class="btn" target="_blank" title="netdata on twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
4169
- <li class="hidden-sm hidden-md"><a href="https://www.facebook.com/linuxnetdata/" class="btn" target="_blank" title="netdata on facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
4170
- <li id="loadButton"><a href="#" class="btn" data-toggle="modal" data-target="#loadSnapshotModal" title="import a dashboard snapshot"><i class="fa fa-download"></i> <span class="hidden-sm hidden-md hidden-lg">Import</span></a></li>
4171
- <li id="saveButton"><a href="#" class="btn" data-toggle="modal" data-target="#saveSnapshotModal" title="export a snapshot of this dashboard"><i class="fa fa-upload"></i> <span class="hidden-sm hidden-md hidden-lg">Export</span></a></li>
4172
- <li id="printButton"><a href="#" class="btn" data-toggle="modal" data-target="#printPreflightModal" title="print this dashboard"><i class="fa fa-print"></i> <span class="hidden-sm hidden-md hidden-lg">Print</span></a></li>
4173
- <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal" title="dashboard help"><i class="fa fa-question-circle"></i> <span class="hidden-sm hidden-md">Help</span></a></li>
4245
+ <li id="alarmsButton" title="check the health monitoring alarms and their log" data-toggle="tooltip" data-placement="bottom"><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal"><i class="fa fa-bell"></i> <span class="hidden-sm hidden-md">Alarms </span><span id="alarms_count_badge" class="badge"></span></a></li>
4246
+ <li title="change dashboard settings" data-toggle="tooltip" data-placement="bottom"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-sliders"></i> <span class="hidden-sm hidden-md">Settings</span></a></li>
4247
+ <li title="check for netdata updates<br/>you should keep your netdata updated" data-toggle="tooltip" data-placement="bottom" class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fa fa-cloud-download"></i> <span class="hidden-sm hidden-md">Update </span><span id="update_badge" class="badge"></span></a></li>
4248
+ <li title="the netdata wiki home at github<br/>remember to <b>give netdata a <i class="fa fa-star"></i></b> !" data-toggle="tooltip" data-placement="bottom" class="hidden-sm hidden-md"><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i></a></li>
4249
+ <li title="follow netdata on twitter" data-toggle="tooltip" data-placement="bottom" class="hidden-sm hidden-md"><a href="https://twitter.com/linuxnetdata" class="btn" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
4250
+ <li title="like netdata on facebook" data-toggle="tooltip" data-placement="bottom" class="hidden-sm hidden-md"><a href="https://www.facebook.com/linuxnetdata/" class="btn" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
4251
+ <li title="import / load a netdata snapshot" data-toggle="tooltip" data-placement="bottom" id="loadButton"><a href="#" class="btn" data-toggle="modal" data-target="#loadSnapshotModal"><i class="fa fa-download"></i> <span class="hidden-sm hidden-md hidden-lg">Import</span></a></li>
4252
+ <li title="export / save a netdata snapshot" data-toggle="tooltip" data-placement="bottom" id="saveButton"><a href="#" class="btn" data-toggle="modal" data-target="#saveSnapshotModal"><i class="fa fa-upload"></i> <span class="hidden-sm hidden-md hidden-lg">Export</span></a></li>
4253
+ <li title="print this dashboard to PDF" data-toggle="tooltip" data-placement="bottom" id="printButton"><a href="#" class="btn" data-toggle="modal" data-target="#printPreflightModal"><i class="fa fa-print"></i> <span class="hidden-sm hidden-md hidden-lg">Print</span></a></li>
4254
+ <li title="get help on using the charts" data-toggle="tooltip" data-placement="bottom" class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> <span class="hidden-sm hidden-md">Help</span></a></li>
4255
<li class="dropdown hidden-sm hidden-md hidden-lg">
4256
<a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
4257
<ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
@@ -4334,7 +4415,7 @@
4415
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
4416
<h4 class="modal-title" id="loadSnapshotModalLabel">Import a netdata snapshot</h4>
4417
</div>
4337
- <div class="modal-body">
4418
+ <div id="loadSnapshotDragAndDrop" class="modal-body">
4419
<p>
4420
netdata can export and import dashboard snapshots.
4421
Any netdata can import the snapshot of any other netdata.
@@ -5326,6 +5407,6 @@
5407
</div>
5408
</div>
5409
<div id="hiddenDownloadLinks" style="display: none;" hidden></div>
5329
- <script type="text/javascript" src="dashboard.js?v20171120-1"></script>
5410
+ <script type="text/javascript" src="dashboard.js?v20171122-2"></script>
5411
</body>
5412
</html>