@cryptotaxi247 / netdata-1 / commits / d8e739aeb

fix selection sync for edge

Costa Tsaousis (ktsaou) committed Oct 29, 2017 at 00:27 UTC d8e739aeb957901e728c68ac3f284ebdafa5a855
1 file changed +110 -151
web/dashboard.js
+110 -151
@@ -1895,15 +1895,98 @@ var NETDATA = window.NETDATA || {};
1895 dont_sync_before: 0,
1896 last_t: 0,
1897 slaves: [],
1898 + timeout_id: null,
1899 +
1900 + // return true if global selection sync can be enabled now
1901 + enabled: function() {
1902 + console.log('enabled()');
1903 + // can we globally apply selection sync?
1904 + if(NETDATA.options.current.sync_selection === false)
1905 + return false;
1906 +
1907 + return (this.dont_sync_before <= Date.now());
1908 + },
1909 +
1910 + // set the global selection sync master
1911 + setMaster: function(state) {
1912 + console.log('setMaster()');
1913 + if(NETDATA.options.current.sync_selection === false || this.state === state)
1914 + return;
1915
1899 - stop: function() {
1916 if(this.state !== null)
1901 - this.state.globalSelectionSyncStop();
1917 + this.stop();
1918 +
1919 + state.selected = true;
1920 + this.state = state;
1921 + this.last_t = 0;
1922 +
1923 + // find all slaves
1924 + this.slaves = [];
1925 + var len = NETDATA.options.targets.length;
1926 + while(len--) {
1927 + var st = NETDATA.options.targets[len];
1928 + if (this.state !== st && st.globalSelectionSyncIsEligible() === true)
1929 + this.slaves.push(st);
1930 + }
1931 +
1932 + // this.delay(100);
1933 },
1934
1904 - delay: function() {
1935 + // stop global selection sync
1936 + stop: function() {
1937 + console.log('stop()');
1938 if(this.state !== null) {
1906 - this.state.globalSelectionSyncDelay();
1939 + var len = this.slaves.length;
1940 + while (len--)
1941 + this.slaves[len].clearSelection();
1942 +
1943 + this.state.clearSelection();
1944 +
1945 + this.last_t = 0;
1946 + this.slaves = [];
1947 + this.state = null;
1948 + }
1949 + },
1950 +
1951 + // delay global selection sync for some time
1952 + delay: function(ms) {
1953 + console.log('delay()');
1954 +
1955 + if(this.state !== null && NETDATA.options.current.sync_selection === true) {
1956 + if(typeof ms === 'number')
1957 + this.dont_sync_before = Date.now() + ms;
1958 + else
1959 + this.dont_sync_before = Date.now() + NETDATA.options.current.sync_selection_delay;
1960 + }
1961 + },
1962 +
1963 + __syncSlaves: function() {
1964 + var t = NETDATA.globalSelectionSync.last_t;
1965 + var len = NETDATA.globalSelectionSync.slaves.length;
1966 + while(len--)
1967 + NETDATA.globalSelectionSync.slaves[len].setSelection(t);
1968 +
1969 + this.timeout_id = null;
1970 + },
1971 +
1972 + // sync all the visible charts to the given time
1973 + // this is to be called from the chart libraries
1974 + sync: function(state, t) {
1975 + console.log('sync()');
1976 +
1977 + if(NETDATA.options.current.sync_selection === true) {
1978 + if(this.state !== state)
1979 + this.setMaster(state);
1980 +
1981 + if(t === this.last_t)
1982 + return;
1983 +
1984 + this.last_t = t;
1985 +
1986 + if (this.timeout_id !== null)
1987 + clearTimeout(this.timeout_id);
1988 +
1989 + this.timeout_id = setTimeout(this.__syncSlaves, 5);
1990 }
1991 }
1992 };
@@ -2644,74 +2727,6 @@ var NETDATA = window.NETDATA || {};
2727 // ----------------------------------------------------------------------------------------------------------------
2728 // global selection sync
2729
2647 - // prevent to global selection sync for some time
2648 - this.globalSelectionSyncDelay = function(ms) {
2649 - if(NETDATA.options.current.sync_selection === false)
2650 - return;
2651 -
2652 - if(typeof ms === 'number')
2653 - NETDATA.globalSelectionSync.dont_sync_before = Date.now() + ms;
2654 - else
2655 - NETDATA.globalSelectionSync.dont_sync_before = Date.now() + NETDATA.options.current.sync_selection_delay;
2656 - };
2657 -
2658 - // can we globally apply selection sync?
2659 - this.globalSelectionSyncAbility = function() {
2660 - if(NETDATA.options.current.sync_selection === false)
2661 - return false;
2662 -
2663 - return (NETDATA.globalSelectionSync.dont_sync_before <= Date.now());
2664 - };
2665 -
2666 - this.globalSelectionSyncIsMaster = function() {
2667 - return (NETDATA.globalSelectionSync.state === this);
2668 - };
2669 -
2670 - // this chart is the master of the global selection sync
2671 - this.globalSelectionSyncBeMaster = function() {
2672 - // am I the master?
2673 - if(this.globalSelectionSyncIsMaster()) {
2674 - if(this.debug === true)
2675 - this.log('sync: I am the master already.');
2676 -
2677 - return;
2678 - }
2679 -
2680 - if(NETDATA.globalSelectionSync.state) {
2681 - if(this.debug === true)
2682 - this.log('sync: I am not the sync master. Resetting global sync.');
2683 -
2684 - this.globalSelectionSyncStop();
2685 - }
2686 -
2687 - // become the master
2688 - if(this.debug === true)
2689 - this.log('sync: becoming sync master.');
2690 -
2691 - this.selected = true;
2692 - NETDATA.globalSelectionSync.state = this;
2693 -
2694 - // find the all slaves
2695 - var targets = NETDATA.options.targets;
2696 - var len = targets.length;
2697 - while(len--) {
2698 - var st = targets[len];
2699 -
2700 - if(st === this) {
2701 - if(this.debug === true)
2702 - st.log('sync: not adding me to sync');
2703 - }
2704 - else if(st.globalSelectionSyncIsEligible()) {
2705 - if(this.debug === true)
2706 - st.log('sync: adding to sync as slave');
2707 -
2708 - st.globalSelectionSyncBeSlave();
2709 - }
2710 - }
2711 -
2712 - // this.globalSelectionSyncDelay(100);
2713 - };
2714 -
2730 // can the chart participate to the global selection sync as a slave?
2731 this.globalSelectionSyncIsEligible = function() {
2732 return (this.enabled === true
@@ -2721,61 +2736,6 @@ var NETDATA = window.NETDATA || {};
2736 && this.chart_created === true);
2737 };
2738
2724 - // this chart becomes a slave of the global selection sync
2725 - this.globalSelectionSyncBeSlave = function() {
2726 - if(NETDATA.globalSelectionSync.state !== this)
2727 - NETDATA.globalSelectionSync.slaves.push(this);
2728 - };
2729 -
2730 - // sync all the visible charts to the given time
2731 - // this is to be called from the chart libraries
2732 - this.globalSelectionSync = function(t) {
2733 - if(this.globalSelectionSyncAbility() === false)
2734 - return;
2735 -
2736 - if(this.globalSelectionSyncIsMaster() === false) {
2737 - if(this.debug === true)
2738 - this.log('sync: trying to be sync master.');
2739 -
2740 - this.globalSelectionSyncBeMaster();
2741 -
2742 - if(this.globalSelectionSyncAbility() === false)
2743 - return;
2744 - }
2745 -
2746 - NETDATA.globalSelectionSync.last_t = t;
2747 - $.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
2748 - st.setSelection(t);
2749 - });
2750 - };
2751 -
2752 - // stop syncing all charts to the given time
2753 - this.globalSelectionSyncStop = function() {
2754 - if(NETDATA.globalSelectionSync.slaves.length) {
2755 - if(this.debug === true)
2756 - this.log('sync: cleaning up...');
2757 -
2758 - $.each(NETDATA.globalSelectionSync.slaves, function(i, st) {
2759 - if(st === that) {
2760 - if(that.debug === true)
2761 - st.log('sync: not adding me to sync stop');
2762 - }
2763 - else {
2764 - if(that.debug === true)
2765 - st.log('sync: removed slave from sync');
2766 -
2767 - st.clearSelection();
2768 - }
2769 - });
2770 -
2771 - NETDATA.globalSelectionSync.last_t = 0;
2772 - NETDATA.globalSelectionSync.slaves = [];
2773 - NETDATA.globalSelectionSync.state = null;
2774 - }
2775 -
2776 - this.clearSelection();
2777 - };
2778 -
2739 this.setSelection = function(t) {
2740 if(typeof this.library.setSelection === 'function')
2741 this.selected = (this.library.setSelection(this, t) === true);
@@ -2804,6 +2764,8 @@ var NETDATA = window.NETDATA || {};
2764 return this.selected;
2765 };
2766
2767 + // ----------------------------------------------------------------------------------------------------------------
2768 +
2769 // find if a timestamp (ms) is shown in the current chart
2770 this.timeIsVisible = function(t) {
2771 return (t >= this.data_after && t <= this.data_before);
@@ -4390,7 +4352,7 @@ var NETDATA = window.NETDATA || {};
4352 NETDATA.resetAllCharts = function(state) {
4353 // first clear the global selection sync
4354 // to make sure no chart is in selected state
4393 - state.globalSelectionSyncStop();
4355 + NETDATA.globalSelectionSync.stop();
4356
4357 // there are 2 possibilities here
4358 // a. state is the global Pan and Zoom master
@@ -5039,8 +5001,8 @@ var NETDATA = window.NETDATA || {};
5001 before = state.netdata_last;
5002
5003 state.setMode('zoom');
5042 - state.globalSelectionSyncStop();
5043 - state.globalSelectionSyncDelay();
5004 + NETDATA.globalSelectionSync.stop();
5005 + NETDATA.globalSelectionSync.delay();
5006 state.tmp.dygraph_user_action = true;
5007 state.tmp.dygraph_force_zoom = true;
5008 state.updateChartPanOrZoom(after, before);
@@ -5364,8 +5326,8 @@ var NETDATA = window.NETDATA || {};
5326 if(NETDATA.options.debug.dygraph === true)
5327 state.log('dygraphZoomCallback()');
5328
5367 - state.globalSelectionSyncStop();
5368 - state.globalSelectionSyncDelay();
5329 + NETDATA.globalSelectionSync.stop();
5330 + NETDATA.globalSelectionSync.delay();
5331 state.setMode('zoom');
5332
5333 // refresh it to the greatest possible zoom level
@@ -5376,9 +5338,6 @@ var NETDATA = window.NETDATA || {};
5338 highlightCallback: function(event, x, points, row, seriesName) {
5339 void(seriesName);
5340
5379 - if(NETDATA.options.debug.dygraph === true || state.debug === true)
5380 - state.log('dygraphHighlightCallback()');
5381 -
5341 state.pauseChart();
5342
5343 // there is a bug in dygraph when the chart is zoomed enough
@@ -5388,7 +5347,7 @@ var NETDATA = window.NETDATA || {};
5347 // var t = state.data_after + row * state.data_update_every;
5348 // console.log('row = ' + row + ', x = ' + x + ', t = ' + t + ' ' + ((t === x)?'SAME':(Math.abs(x-t)<=state.data_update_every)?'SIMILAR':'DIFFERENT') + ', rows in db: ' + state.data_points + ' visible(x) = ' + state.timeIsVisible(x) + ' visible(t) = ' + state.timeIsVisible(t) + ' r(x) = ' + state.calculateRowForTime(x) + ' r(t) = ' + state.calculateRowForTime(t) + ' range: ' + state.data_after + ' - ' + state.data_before + ' real: ' + state.data.after + ' - ' + state.data.before + ' every: ' + state.data_update_every);
5349
5391 - state.globalSelectionSync(x);
5350 + NETDATA.globalSelectionSync.sync(state, x);
5351
5352 // fix legend zIndex using the internal structures of dygraph legend module
5353 // this works, but it is a hack!
@@ -5401,7 +5360,7 @@ var NETDATA = window.NETDATA || {};
5360 state.log('dygraphUnhighlightCallback()');
5361
5362 state.unpauseChart();
5404 - state.globalSelectionSyncStop();
5363 + NETDATA.globalSelectionSync.stop();
5364 },
5365 interactionModel : {
5366 mousedown: function(event, dygraph, context) {
@@ -5409,7 +5368,7 @@ var NETDATA = window.NETDATA || {};
5368 state.log('interactionModel.mousedown()');
5369
5370 state.tmp.dygraph_user_action = true;
5412 - state.globalSelectionSyncStop();
5371 + NETDATA.globalSelectionSync.stop();
5372
5373 if(NETDATA.options.debug.dygraph === true)
5374 state.log('dygraphMouseDown()');
@@ -5422,24 +5381,24 @@ var NETDATA = window.NETDATA || {};
5381 if(event.button && event.button === 1) {
5382 if (event.altKey || event.shiftKey) {
5383 state.setMode('pan');
5425 - state.globalSelectionSyncDelay();
5384 + NETDATA.globalSelectionSync.delay();
5385 Dygraph.startPan(event, dygraph, context);
5386 }
5387 else {
5388 state.setMode('zoom');
5430 - state.globalSelectionSyncDelay();
5389 + NETDATA.globalSelectionSync.delay();
5390 Dygraph.startZoom(event, dygraph, context);
5391 }
5392 }
5393 else {
5394 if (event.altKey || event.shiftKey) {
5395 state.setMode('zoom');
5437 - state.globalSelectionSyncDelay();
5396 + NETDATA.globalSelectionSync.delay();
5397 Dygraph.startZoom(event, dygraph, context);
5398 }
5399 else {
5400 state.setMode('pan');
5442 - state.globalSelectionSyncDelay();
5401 + NETDATA.globalSelectionSync.delay();
5402 Dygraph.startPan(event, dygraph, context);
5403 }
5404 }
@@ -5450,16 +5409,16 @@ var NETDATA = window.NETDATA || {};
5409
5410 if(context.isPanning) {
5411 state.tmp.dygraph_user_action = true;
5453 - state.globalSelectionSyncStop();
5454 - state.globalSelectionSyncDelay();
5412 + NETDATA.globalSelectionSync.stop();
5413 + NETDATA.globalSelectionSync.delay();
5414 state.setMode('pan');
5415 context.is2DPan = false;
5416 Dygraph.movePan(event, dygraph, context);
5417 }
5418 else if(context.isZooming) {
5419 state.tmp.dygraph_user_action = true;
5461 - state.globalSelectionSyncStop();
5462 - state.globalSelectionSyncDelay();
5420 + NETDATA.globalSelectionSync.stop();
5421 + NETDATA.globalSelectionSync.delay();
5422 state.setMode('zoom');
5423 Dygraph.moveZoom(event, dygraph, context);
5424 }
@@ -5470,12 +5429,12 @@ var NETDATA = window.NETDATA || {};
5429
5430 if (context.isPanning) {
5431 state.tmp.dygraph_user_action = true;
5473 - state.globalSelectionSyncDelay();
5432 + NETDATA.globalSelectionSync.delay();
5433 Dygraph.endPan(event, dygraph, context);
5434 }
5435 else if (context.isZooming) {
5436 state.tmp.dygraph_user_action = true;
5478 - state.globalSelectionSyncDelay();
5437 + NETDATA.globalSelectionSync.delay();
5438 Dygraph.endZoom(event, dygraph, context);
5439 }
5440 },
@@ -5565,8 +5524,8 @@ var NETDATA = window.NETDATA || {};
5524 if(event.altKey || event.shiftKey) {
5525 state.tmp.dygraph_user_action = true;
5526
5568 - state.globalSelectionSyncStop();
5569 - state.globalSelectionSyncDelay();
5527 + NETDATA.globalSelectionSync.stop();
5528 + NETDATA.globalSelectionSync.delay();
5529
5530 // http://dygraphs.com/gallery/interaction-api.js
5531 var normal_def;
@@ -5655,7 +5614,7 @@ var NETDATA = window.NETDATA || {};
5614 var pct = (state.dygraph_last_touch_page_x - (dygraph.plotter_.area.x + state.element.getBoundingClientRect().left)) / dygraph.plotter_.area.w;
5615 var t = Math.round(state.data_after + (state.data_before - state.data_after) * pct);
5616 if(NETDATA.dygraphSetSelection(state, t) === true)
5658 - state.globalSelectionSync(t);
5617 + NETDATA.globalSelectionSync.sync(state, t);
5618 }
5619
5620 // if it was double tap within double click time, reset the charts