diff options
author | Costa Tsaousis (ktsaou) <costa@tsaousis.gr> | 2017-11-22 20:32:25 +0200 |
---|---|---|
committer | Costa Tsaousis (ktsaou) <costa@tsaousis.gr> | 2017-11-22 20:32:25 +0200 |
commit | 1186734d5555f2d845f28c244b6b71af7d705c5d (patch) | |
tree | 13cc41c9ce6f3bb21a555a25f16932221bbbf2af /web/index.html | |
parent | c1fbd003f2ca72f35ed686b06c2b27b1f88a376a (diff) |
snapshots and highlight improvements
Diffstat (limited to 'web/index.html')
-rw-r--r-- | web/index.html | 189 |
1 files changed, 135 insertions, 54 deletions
diff --git a/web/index.html b/web/index.html index b3b8906edc..71014397df 100644 --- a/web/index.html +++ b/web/index.html @@ -93,8 +93,13 @@ pointer-events: auto !important; } - .navbar-highlight-content-close { + .navbar-highlight-button-left { cursor: pointer; + padding-right: 10px; + } + .navbar-highlight-button-right { + cursor: pointer; + padding-left: 10px; } .modal-wide .modal-dialog { @@ -696,12 +701,30 @@ urlOptions.highlight_before = Math.round(before); urlOptions.hashUpdate(); + if(NETDATA.options.highlight_view_after === null || NETDATA.options.highlight_view_before === null || NETDATA.options.highlight_state === null) { + NETDATA.options.highlight_view_after = (urlOptions.after > 0) ? urlOptions.after : null ; + NETDATA.options.highlight_view_before = (urlOptions.before > 0) ? urlOptions.before : null ; + NETDATA.options.highlight_state = NETDATA.options.targets[0]; + } + var show_eye = (!(NETDATA.options.highlight_view_after === null || NETDATA.options.highlight_view_before === null || NETDATA.options.highlight_state === null)); + if(status === true && after > 0 && before > 0 && after < before) { var d1 = NETDATA.dateTime.localeDateString(after); var d2 = NETDATA.dateTime.localeDateString(before); if(d1 === d2) d2 = ''; - 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>'; + document.getElementById('navbar-highlight-content').innerHTML = + ((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() + + 'highlighted time-frame' + + ' <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-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>'; + $('.navbar-highlight').show(); + + $('.highlight-tooltip').tooltip({ + container: 'body' + }); } else $('.navbar-highlight').hide(); @@ -710,13 +733,24 @@ clearHighlight: function() { NETDATA.options.highlight_after = null; NETDATA.options.highlight_before = null; + NETDATA.options.highlight_view_after = null; + NETDATA.options.highlight_vew_before = null; + NETDATA.options.highlight_state = null; if(NETDATA.globalPanAndZoom.isActive() === true) NETDATA.globalPanAndZoom.clearMaster(); urlOptions.netdataHighlightCallback(false, 0, 0); - } + }, + + showHighlight: function() { + if(NETDATA.options.highlight_view_after !== null && NETDATA.options.highlight_view_before !== null && NETDATA.options.highlight_state !== null) { + if(NETDATA.globalPanAndZoom.isMaster(NETDATA.options.highlight_state) === true) + NETDATA.globalPanAndZoom.clearMaster(); + NETDATA.globalPanAndZoom.setMaster(NETDATA.options.highlight_state, NETDATA.options.highlight_view_after, NETDATA.options.highlight_view_before, true); + } + } }; urlOptions.parseHash(); @@ -2250,7 +2284,7 @@ all += "</div>"; if(!count_active) - active += "<h4>Everything is normal. No raised alarms.</h4>"; + 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>'; else active += footer; @@ -3163,34 +3197,17 @@ urlOptions.netdataHighlightCallback(false, 0, 0); } - initializeDynamicDashboard(netdataSnapshotData.url); + initializeDynamicDashboard(); $('#loadSnapshotModal').modal('hide'); }); }); - } - - function loadSnapshotPreflight() { - var files = document.getElementById('loadSnapshotSelectFiles').files; - if (files.length <= 0) { - document.getElementById('loadSnapshotFilename').innerHTML = ''; - document.getElementById('loadSnapshotHostname').innerHTML = ''; - document.getElementById('loadSnapshotURL').innerHTML = ''; - document.getElementById('loadSnapshotCharts').innerHTML = ''; - document.getElementById('loadSnapshotInfo').innerHTML = ''; - document.getElementById('loadSnapshotTimeRange').innerHTML = ''; - document.getElementById('loadSnapshotComments').innerHTML = ''; - $('#loadSnapshotImport').addClass('disabled'); - loadSnapshotModalLog('danger', 'No file selected'); - return; - } + }; - loadSnapshotModalLog('info', 'Loading file...'); + function loadSnapshotPreflightFile(file) { var fr = new FileReader(); fr.onload = function(e) { - // console.log(e); - - document.getElementById('loadSnapshotFilename').innerHTML = files.item(0).name; + document.getElementById('loadSnapshotFilename').innerHTML = file.name; var result = null; try { result = JSON.parse(e.target.result); @@ -3198,31 +3215,31 @@ var date_after = new Date(result.after_ms); var date_before = new Date(result.before_ms); - if(typeof result.charts_ok === 'undefined') + if (typeof result.charts_ok === 'undefined') result.charts_ok = 'unknown'; - if(typeof result.charts_failed === 'undefined') + if (typeof result.charts_failed === 'undefined') result.charts_failed = 0; - if(typeof result.compression === 'undefined') + if (typeof result.compression === 'undefined') result.compression = 'none'; - if(typeof result.data_size === 'undefined') + if (typeof result.data_size === 'undefined') result.data_size = 0; - document.getElementById('loadSnapshotFilename').innerHTML = '<code>' + files.item(0).name + '</code>'; + document.getElementById('loadSnapshotFilename').innerHTML = '<code>' + file.name + '</code>'; document.getElementById('loadSnapshotHostname').innerHTML = '<b>' + result.hostname + '</b>, netdata version: <b>' + result.netdata_version.toString() + '</b>'; document.getElementById('loadSnapshotURL').innerHTML = result.url; 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'; - 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'; + 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'; 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>'; - document.getElementById('loadSnapshotComments').innerHTML = ((result.comments)?result.comments:'').toString(); + document.getElementById('loadSnapshotComments').innerHTML = ((result.comments) ? result.comments : '').toString(); loadSnapshotModalLog('success', 'File loaded, click <b>Import</b> to render it!'); $('#loadSnapshotImport').removeClass('disabled'); tmpSnapshotData = result; } - catch(e) { + catch (e) { console.log(e); document.getElementById('loadSnapshotStatus').className = "alert alert-danger"; document.getElementById('loadSnapshotStatus').innerHTML = "Failed to parse this file!"; @@ -3230,8 +3247,54 @@ } } - //console.log(files.item(0)); - fr.readAsText(files.item(0)); + //console.log(file); + fr.readAsText(file); + }; + + function loadSnapshotPreflightEmpty() { + document.getElementById('loadSnapshotFilename').innerHTML = ''; + document.getElementById('loadSnapshotHostname').innerHTML = ''; + document.getElementById('loadSnapshotURL').innerHTML = ''; + document.getElementById('loadSnapshotCharts').innerHTML = ''; + document.getElementById('loadSnapshotInfo').innerHTML = ''; + document.getElementById('loadSnapshotTimeRange').innerHTML = ''; + document.getElementById('loadSnapshotComments').innerHTML = ''; + $('#loadSnapshotImport').addClass('disabled'); + }; + + var loadSnapshotDragAndDropInitialized = false; + function loadSnapshotDragAndDropInit() { + if(loadSnapshotDragAndDropInitialized === false) { + loadSnapshotDragAndDropInitialized = true; + $('#loadSnapshotDragAndDrop') + .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) { + e.preventDefault(); + e.stopPropagation(); + }) + .on('drop', function (e) { + console.log(e); + if(e.originalEvent.dataTransfer.files.length) { + loadSnapshotPreflightFile(e.originalEvent.dataTransfer.files.item(0)); + } + else { + loadSnapshotPreflightEmpty(); + loadSnapshotModalLog('danger', 'No file selected'); + } + }); + } + }; + + function loadSnapshotPreflight() { + var files = document.getElementById('loadSnapshotSelectFiles').files; + if (files.length <= 0) { + loadSnapshotPreflightEmpty(); + loadSnapshotModalLog('danger', 'No file selected'); + return; + } + + loadSnapshotModalLog('info', 'Loading file...'); + + loadSnapshotPreflightFile(files.item(0)); } // -------------------------------------------------------------------- @@ -3242,6 +3305,20 @@ saveSnapshotStop = true; } + var saveSnapshotModalInitialized = false; + function saveSnapshotModalInit() { + if(saveSnapshotModalInitialized === false) { + saveSnapshotModalInitialized = true; + $('#saveSnapshotModal') + .on('hide.bs.modal', saveSnapshotCancel) + .on('show.bs.modal', saveSnapshotModalInit) + .on('shown.bs.modal', function() { + $('#saveSnapshotResolutionSlider').find(".slider-handle:first").attr("tabindex", 1); + document.getElementById('saveSnapshotComments').focus(); + }); + } + }; + function saveSnapshotModalLog(priority, msg) { document.getElementById('saveSnapshotStatus').className = "alert alert-" + priority; document.getElementById('saveSnapshotStatus').innerHTML = msg; @@ -3771,13 +3848,17 @@ //else console.log('el.find(): not found'); }); - $('#saveSnapshotModal').on('show.bs.modal', saveSnapshotModalInit); - $('#saveSnapshotModal').on('shown.bs.modal', function() { - $('#saveSnapshotResolutionSlider').find(".slider-handle:first").attr("tabindex", 1); - document.getElementById('saveSnapshotComments').focus(); + $('[data-toggle="tooltip"]').tooltip({ + animated: 'fade', + trigger: 'hover', + html: true, + delay: {show: 500, hide: 0}, + container: 'body' }); - $('#saveSnapshotModal').on('hide.bs.modal', saveSnapshotCancel); + $('[data-toggle="popover"]').popover(); + loadSnapshotDragAndDropInit(); + saveSnapshotModalInit(); showPageFooter(); var update_options_modal = function() { @@ -4131,7 +4212,7 @@ <div class="container"> <nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;"> <ul class="nav navbar-nav"> - <li class="dropdown" id="myNetdataDropdownParent"> + <li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a> <ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu" id="myNetdataDropdownUL"> <div class="row"> @@ -4157,20 +4238,20 @@ <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <a href="/" class="navbar-brand" id="hostname" title="reload the dashboard">netdata</a> + <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> </div> <nav class="collapse navbar-collapse navbar-right" role="navigation"> <ul class="nav navbar-nav"> - <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> - <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> - <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> - <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> - <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> - <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> - <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> - <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> - <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> - <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> <li class="dropdown hidden-sm hidden-md hidden-lg"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a> <ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu"> @@ -4334,7 +4415,7 @@ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="loadSnapshotModalLabel">Import a netdata snapshot</h4> </div> - <div class="modal-body"> + <div id="loadSnapshotDragAndDrop" class="modal-body"> <p> netdata can export and import dashboard snapshots. Any netdata can import the snapshot of any other netdata. @@ -5326,6 +5407,6 @@ </div> </div> <div id="hiddenDownloadLinks" style="display: none;" hidden></div> - <script type="text/javascript" src="dashboard.js?v20171120-1"></script> + <script type="text/javascript" src="dashboard.js?v20171122-2"></script> </body> </html> |