diff options
Diffstat (limited to 'web/gui/dashboard/dashboard-react.js')
| -rw-r--r-- | web/gui/dashboard/dashboard-react.js | 675 |
1 files changed, 0 insertions, 675 deletions
diff --git a/web/gui/dashboard/dashboard-react.js b/web/gui/dashboard/dashboard-react.js deleted file mode 100644 index 8dbe6c3a..00000000 --- a/web/gui/dashboard/dashboard-react.js +++ /dev/null @@ -1,675 +0,0 @@ -/* eslint-disable */ - -/** - * after react-dashboard refractor, this file can be renamed to 'dashboard.js' - * and it will: - * - setup global objects, so any assignments like 'NETDATA.options.current.destroy_on_hide = true' - * will not break. we need to add it in places where 'dashboard.js' is - * - create react root DOM node - * - load react app - * - * Later, for performance improvement, the bundle can be added to dashboard-rect.js, - * but we need to run the react-app part after DOM is created and ready - */ - -// ---------------------------------------------------------------------------- -// global namespace - -// Should stay var! -var NETDATA = window.NETDATA || {}; -window.NETDATA = NETDATA // when imported as npm module - -/// A heuristic for detecting slow devices. -let isSlowDeviceResult; -const isSlowDevice = function () { - if (!isSlowDeviceResult) { - return isSlowDeviceResult; - } - - try { - let ua = navigator.userAgent.toLowerCase(); - - let iOS = /ipad|iphone|ipod/.test(ua) && !window.MSStream; - let android = /android/.test(ua) && !window.MSStream; - isSlowDeviceResult = (iOS || android); - } catch (e) { - isSlowDeviceResult = false; - } - - return isSlowDeviceResult; -}; - -if (typeof window.netdataSnapshotData === 'undefined') { - window.netdataSnapshotData = null; -} - -if (typeof window.netdataShowHelp === 'undefined') { - window.netdataShowHelp = true; -} - -if (typeof window.netdataShowAlarms === 'undefined') { - window.netdataShowAlarms = false; -} - -if (typeof window.netdataRegistryAfterMs !== 'number' || window.netdataRegistryAfterMs < 0) { - window.netdataRegistryAfterMs = 0; // 1500; -} - -if (typeof window.netdataRegistry === 'undefined') { - // backward compatibility - window.netdataRegistry = (typeof netdataNoRegistry !== 'undefined' && netdataNoRegistry === false); -} - -if (window.netdataRegistry === false && typeof netdataRegistryCallback === 'function') { - window.netdataRegistry = true; -} - -// ---------------------------------------------------------------------------------------------------------------- -// the defaults for all charts - -// if the user does not specify any of these, the following will be used - -NETDATA.chartDefaults = { - width: '100%', // the chart width - can be null - height: '100%', // the chart height - can be null - min_width: null, // the chart minimum width - can be null - library: 'dygraph', // the graphing library to use - method: 'average', // the grouping method - before: 0, // panning - after: -600, // panning - pixels_per_point: 1, // the detail of the chart - fill_luminance: 0.8 // luminance of colors in solid areas -}; - - - -// ---------------------------------------------------------------------------------------------------------------- -// global options - -NETDATA.options = { - pauseCallback: null, // a callback when we are really paused - - pause: false, // when enabled we don't auto-refresh the charts - - targets: [], // an array of all the state objects that are - // currently active (independently of their - // viewport visibility) - - updated_dom: true, // when true, the DOM has been updated with - // new elements we have to check. - - auto_refresher_fast_weight: 0, // this is the current time in ms, spent - // rendering charts continuously. - // used with .current.fast_render_timeframe - - page_is_visible: true, // when true, this page is visible - - auto_refresher_stop_until: 0, // timestamp in ms - used internally, to stop the - // auto-refresher for some time (when a chart is - // performing pan or zoom, we need to stop refreshing - // all other charts, to have the maximum speed for - // rendering the chart that is panned or zoomed). - // Used with .current.global_pan_sync_time - - on_scroll_refresher_stop_until: 0, // timestamp in ms - used to stop evaluating - // charts for some time, after a page scroll - - last_page_resize: Date.now(), // the timestamp of the last resize request - - last_page_scroll: 0, // the timestamp the last time the page was scrolled - - browser_timezone: (Intl && Intl.DateTimeFormat) - ? Intl.DateTimeFormat().resolvedOptions().timeZone // timezone detected by javascript - : "cannot-detect-it", - - server_timezone: 'unknown', // timezone reported by the server - - force_data_points: 0, // force the number of points to be returned for charts - fake_chart_rendering: false, // when set to true, the dashboard will download data but will not render the charts - - passive_events: null, // true if the browser supports passive events - - // the current profile - // we may have many... - current: { - units: 'auto', // can be 'auto' or 'original' - temperature: 'celsius', // can be 'celsius' or 'fahrenheit' - seconds_as_time: true, // show seconds as DDd:HH:MM:SS ? - timezone: 'default', // the timezone to use, or 'default' - user_set_server_timezone: 'default', // as set by the user on the dashboard - - legend_toolbox: true, // show the legend toolbox on charts - resize_charts: true, // show the resize handler on charts - - pixels_per_point: isSlowDevice() ? 5 : 1, // the minimum pixels per point for all charts - // increase this to speed javascript up - // each chart library has its own limit too - // the max of this and the chart library is used - // the final is calculated every time, so a change - // here will have immediate effect on the next chart - // update - - idle_between_charts: 100, // ms - how much time to wait between chart updates - - fast_render_timeframe: 200, // ms - render continuously until this time of continuous - // rendering has been reached - // this setting is used to make it render e.g. 10 - // charts at once, sleep idle_between_charts time - // and continue for another 10 charts. - - idle_between_loops: 500, // ms - if all charts have been updated, wait this - // time before starting again. - - idle_parallel_loops: 100, // ms - the time between parallel refresher updates - - idle_lost_focus: 500, // ms - when the window does not have focus, check - // if focus has been regained, every this time - - global_pan_sync_time: 300, // ms - when you pan or zoom a chart, the background - // auto-refreshing of charts is paused for this amount - // of time - - sync_selection_delay: 400, // ms - when you pan or zoom a chart, wait this amount - // of time before setting up synchronized selections - // on hover. - - sync_selection: true, // enable or disable selection sync - - pan_and_zoom_delay: 50, // when panning or zooming, how often to update the chart - - sync_pan_and_zoom: true, // enable or disable pan and zoom sync - - pan_and_zoom_data_padding: true, // fetch more data for the master chart when panning or zooming - - update_only_visible: true, // enable or disable visibility management / used for printing - - parallel_refresher: !isSlowDevice(), // enable parallel refresh of charts - - concurrent_refreshes: true, // when parallel_refresher is enabled, sync also the charts - - destroy_on_hide: isSlowDevice(), // destroy charts when they are not visible - - // when enabled the charts will show some help - // when there's no bootstrap, we can't show it - show_help: netdataShowHelp && !window.netdataNoBootstrap, - show_help_delay_show_ms: 500, - show_help_delay_hide_ms: 0, - - eliminate_zero_dimensions: true, // do not show dimensions with just zeros - - stop_updates_when_focus_is_lost: true, // boolean - shall we stop auto-refreshes when document does not have user focus - stop_updates_while_resizing: 1000, // ms - time to stop auto-refreshes while resizing the charts - - double_click_speed: 500, // ms - time between clicks / taps to detect double click/tap - - smooth_plot: !isSlowDevice(), // enable smooth plot, where possible - - color_fill_opacity_line: 1.0, - color_fill_opacity_area: 0.2, - color_fill_opacity_fake_stacked: 1, - color_fill_opacity_stacked: 0.8, - - pan_and_zoom_factor: 0.25, // the increment when panning and zooming with the toolbox - pan_and_zoom_factor_multiplier_control: 2.0, - pan_and_zoom_factor_multiplier_shift: 3.0, - pan_and_zoom_factor_multiplier_alt: 4.0, - - abort_ajax_on_scroll: false, // kill pending ajax page scroll - async_on_scroll: false, // sync/async onscroll handler - onscroll_worker_duration_threshold: 30, // time in ms, for async scroll handler - - retries_on_data_failures: 3, // how many retries to make if we can't fetch chart data from the server - - setOptionCallback: function () { - } - }, - - debug: { - show_boxes: false, - main_loop: false, - focus: false, - visibility: false, - chart_data_url: false, - chart_errors: true, // remember to set it to false before merging - chart_timing: false, - chart_calls: false, - libraries: false, - dygraph: false, - globalSelectionSync: false, - globalPanAndZoom: false - } -}; - - -NETDATA.statistics = { - refreshes_total: 0, - refreshes_active: 0, - refreshes_active_max: 0 -}; - -NETDATA.themes = { - white: { - bootstrap_css: "css/bootstrap-3.3.7.css", - dashboard_css: "css/dashboard.css?v20180210-1", - background: "#FFFFFF", - foreground: "#000000", - grid: "#F0F0F0", - axis: "#F0F0F0", - highlight: "#F5F5F5", - colors: ["#3366CC", "#DC3912", "#109618", "#FF9900", "#990099", "#DD4477", - "#3B3EAC", "#66AA00", "#0099C6", "#B82E2E", "#AAAA11", "#5574A6", - "#994499", "#22AA99", "#6633CC", "#E67300", "#316395", "#8B0707", - "#329262", "#3B3EAC"], - easypiechart_track: "#f0f0f0", - easypiechart_scale: "#dfe0e0", - gauge_pointer: "#C0C0C0", - gauge_stroke: "#F0F0F0", - gauge_gradient: false, - gauge_stop_color: "#FC8D5E", - gauge_start_color: "#B0E952", - d3pie: { - title: "#333333", - subtitle: "#666666", - footer: "#888888", - other: "#aaaaaa", - mainlabel: "#333333", - percentage: "#dddddd", - value: "#aaaa22", - tooltip_bg: "#000000", - tooltip_fg: "#efefef", - segment_stroke: "#ffffff", - gradient_color: "#000000", - }, - }, - slate: { - bootstrap_css: "css/bootstrap-slate-flat-3.3.7.css?v20161229-1", - dashboard_css: "css/dashboard.slate.css?v20180210-1", - background: "#272b30", - foreground: "#C8C8C8", - grid: "#283236", - axis: "#283236", - highlight: "#383838", - colors: ["#66AA00", "#FE3912", "#3366CC", "#D66300", "#0099C6", "#DDDD00", - "#5054e6", "#EE9911", "#BB44CC", "#e45757", "#ef0aef", "#CC7700", - "#22AA99", "#109618", "#905bfd", "#f54882", "#4381bf", "#ff3737", - "#329262", "#3B3EFF"], - easypiechart_track: "#373b40", - easypiechart_scale: "#373b40", - gauge_pointer: "#474b50", - gauge_stroke: "#373b40", - gauge_gradient: false, - gauge_stop_color: "#FC8D5E", - gauge_start_color: "#B0E952", - d3pie: { - title: "#C8C8C8", - subtitle: "#283236", - footer: "#283236", - other: "#283236", - mainlabel: "#C8C8C8", - percentage: "#dddddd", - value: "#cccc44", - tooltip_bg: "#272b30", - tooltip_fg: "#C8C8C8", - segment_stroke: "#283236", - gradient_color: "#000000", - }, - }, -} - -// Codacy declarations -/* global netdataTheme */ - -NETDATA.updateTheme = function () { - if (typeof window.netdataTheme !== 'undefined' - && typeof NETDATA.themes[netdataTheme] !== 'undefined' - ) { - NETDATA.themes.current = NETDATA.themes[window.netdataTheme]; - } else { - NETDATA.themes.current = NETDATA.themes.white; - } - - NETDATA.colors = NETDATA.themes.current.colors; -} - -NETDATA.updateTheme() - -// these are the colors Google Charts are using -// we have them here to attempt emulate their look and feel on the other chart libraries -// http://there4.io/2012/05/02/google-chart-color-list/ -//NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', -// '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', -// '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ]; - -// an alternative set -// http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/ -// (blue) (red) (orange) (green) (pink) (brown) (purple) (yellow) (gray) -//NETDATA.colors = [ '#5DA5DA', '#F15854', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#4D4D4D' ]; -// dygraph - -// local storage options - -NETDATA.localStorage = { - default: {}, - current: {}, - callback: {} // only used for resetting back to defaults -}; - - -// todo temporary stuff which was originally in dashboard.js -// but needs to be refactored -NETDATA.name2id = function (s) { - return s - .replace(/ /g, '_') - .replace(/:/g, '_') - .replace(/\(/g, '_') - .replace(/\)/g, '_') - .replace(/\./g, '_') - .replace(/\//g, '_'); -}; - -NETDATA.globalChartUnderlay = { - clear: () => {}, - init: () => {}, -} - -NETDATA.globalPanAndZoom = { - callback: () => {}, -} -NETDATA.unpause = () => {} - - -// ---------------------------------------------------------------------------------------------------------------- -// XSS checks - -NETDATA.xss = { - enabled: (typeof netdataCheckXSS === 'undefined') ? false : netdataCheckXSS, - enabled_for_data: (typeof netdataCheckXSS === 'undefined') ? false : netdataCheckXSS, - - string: function (s) { - return s.toString() - .replace(/</g, '<') - .replace(/>/g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); - }, - - object: function (name, obj, ignore_regex) { - if (typeof ignore_regex !== 'undefined' && ignore_regex.test(name)) { - // console.log('XSS: ignoring "' + name + '"'); - return obj; - } - - switch (typeof(obj)) { - case 'string': - const ret = this.string(obj); - if (ret !== obj) { - console.log('XSS protection changed string ' + name + ' from "' + obj + '" to "' + ret + '"'); - } - return ret; - - case 'object': - if (obj === null) { - return obj; - } - - if (Array.isArray(obj)) { - // console.log('checking array "' + name + '"'); - - let len = obj.length; - while (len--) { - obj[len] = this.object(name + '[' + len + ']', obj[len], ignore_regex); - } - } else { - // console.log('checking object "' + name + '"'); - - for (var i in obj) { - if (obj.hasOwnProperty(i) === false) { - continue; - } - if (this.string(i) !== i) { - console.log('XSS protection removed invalid object member "' + name + '.' + i + '"'); - delete obj[i]; - } else { - obj[i] = this.object(name + '.' + i, obj[i], ignore_regex); - } - } - } - return obj; - - default: - return obj; - } - }, - - checkOptional: function (name, obj, ignore_regex) { - if (this.enabled) { - //console.log('XSS: checking optional "' + name + '"...'); - return this.object(name, obj, ignore_regex); - } - return obj; - }, - - checkAlways: function (name, obj, ignore_regex) { - //console.log('XSS: checking always "' + name + '"...'); - return this.object(name, obj, ignore_regex); - }, - - checkData: function (name, obj, ignore_regex) { - if (this.enabled_for_data) { - //console.log('XSS: checking data "' + name + '"...'); - return this.object(name, obj, ignore_regex); - } - return obj; - } -}; - - - -const fixHost = (host) => { - while (host.slice(-1) === '/') { - host = host.substring(0, host.length - 1); - } - - return host; -} - -NETDATA.chartRegistry = { - charts: {}, - - globalReset: function () { - this.charts = {}; - }, - - add: function (host, id, data) { - if (typeof this.charts[host] === 'undefined') { - this.charts[host] = {}; - } - - //console.log('added ' + host + '/' + id); - this.charts[host][id] = data; - }, - - get: function (host, id) { - if (typeof this.charts[host] === 'undefined') { - return null; - } - - if (typeof this.charts[host][id] === 'undefined') { - return null; - } - - //console.log('cached ' + host + '/' + id); - return this.charts[host][id]; - }, - - downloadAll: function (host, callback) { - host = fixHost(host); - - let self = this; - - function got_data(h, data, callback) { - if (data !== null) { - self.charts[h] = data.charts; - window.charts = data.charts - - // update the server timezone in our options - if (typeof data.timezone === 'string') { - NETDATA.options.server_timezone = data.timezone; - } - } else { - NETDATA.error(406, h + '/api/v1/charts'); - } - - if (typeof callback === 'function') { - callback(data); - } - } - - if (window.netdataSnapshotData !== null) { - got_data(host, window.netdataSnapshotData.charts, callback); - } else { - $.ajax({ - url: host + '/api/v1/charts', - async: true, - cache: false, - xhrFields: {withCredentials: true} // required for the cookie - }) - .done(function (data) { - data = NETDATA.xss.checkOptional('/api/v1/charts', data); - got_data(host, data, callback); - }) - .fail(function () { - NETDATA.error(405, host + '/api/v1/charts'); - - if (typeof callback === 'function') { - callback(null); - } - }); - } - } -}; - - -NETDATA.fixHost = function (host) { - while (host.slice(-1) === '/') { - host = host.substring(0, host.length - 1); - } - - return host; -}; - - -NETDATA.registryHello = function (host, callback) { - host = NETDATA.fixHost(host); - - // send HELLO to a netdata server: - // 1. verifies the server is reachable - // 2. responds with the registry URL, the machine GUID of this netdata server and its hostname - $.ajax({ - url: host + '/api/v1/registry?action=hello', - async: true, - cache: false, - headers: { - 'Cache-Control': 'no-cache, no-store', - 'Pragma': 'no-cache' - }, - xhrFields: {withCredentials: true} // required for the cookie - }) - .done(function (data) { - data = NETDATA.xss.checkOptional('/api/v1/registry?action=hello', data); - - if (typeof data.status !== 'string' || data.status !== 'ok') { - // NETDATA.error(408, host + ' response: ' + JSON.stringify(data)); - data = null; - } - - if (typeof callback === 'function') { - return callback(data); - } - }) - .fail(function () { - // NETDATA.error(407, host); - - if (typeof callback === 'function') { - return callback(null); - } - }); -} - -NETDATA.registrySearch = function (machine_guid, getFromRegistry, serverDefault, callback) { - // SEARCH for the URLs of a machine: - $.ajax({ - url: getFromRegistry("registryServer") + '/api/v1/registry?action=search&machine=' - + getFromRegistry("machineGuid") + '&name=' + encodeURIComponent(getFromRegistry("hostname")) - + '&url=' + encodeURIComponent(serverDefault) + '&for=' + machine_guid, - async: true, - cache: false, - headers: { - 'Cache-Control': 'no-cache, no-store', - 'Pragma': 'no-cache' - }, - xhrFields: {withCredentials: true} // required for the cookie - }) - .done(function (data) { - data = NETDATA.xss.checkAlways('/api/v1/registry?action=search', data); - - if (typeof data.status !== 'string' || data.status !== 'ok') { - // NETDATA.error(417, getFromRegistry("registryServer") + ' responded with: ' + JSON.stringify(data)); - console.warn(getFromRegistry("registryServer") + ' responded with: ' + JSON.stringify(data)); - data = null; - } - - if (typeof callback === 'function') { - return callback(data); - } - }) - .fail(function () { - // NETDATA.error(418, getFromRegistry("registryServer")); - console.warn("registry search call failed", getFromRegistry("registryServer")) - - if (typeof callback === 'function') { - return callback(null); - } - }); -} - -NETDATA.registryDelete = function (getFromRegistry, serverDefault, delete_url, callback) { - // send DELETE to a netdata registry: - $.ajax({ - url: getFromRegistry("registryServer") + '/api/v1/registry?action=delete&machine=' - + getFromRegistry("machineGuid") + '&name=' + encodeURIComponent(getFromRegistry("hostname")) - + '&url=' + encodeURIComponent(serverDefault) + '&delete_url=' + encodeURIComponent(delete_url), - // + '&url=' + encodeURIComponent("http://n5.katsuna.com:19999/") + '&delete_url=' + encodeURIComponent(delete_url), - async: true, - cache: false, - headers: { - 'Cache-Control': 'no-cache, no-store', - 'Pragma': 'no-cache' - }, - xhrFields: {withCredentials: true} // required for the cookie - }) - .done(function (data) { - // data = NETDATA.xss.checkAlways('/api/v1/registry?action=delete', data); - - if (typeof data.status !== 'string' || data.status !== 'ok') { - // NETDATA.error(411, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data)); - console.warn(411, getFromRegistry("registryServer") + ' responded with: ' + JSON.stringify(data)); - data = null; - } - - if (typeof callback === 'function') { - return callback(data); - } - }) - .fail(function () { - // NETDATA.error(412, NETDATA.registry.server); - console.warn(412, getFromRegistry("registryServer")); - - if (typeof callback === 'function') { - return callback(null); - } - }); -} - - -// NETDATA.currentScript = document.currentScript |