From 024b6b5779223b53841b6c0de72d271fc0b643d3 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 14 Apr 2021 12:58:56 +0200 Subject: [PATCH] Utils: Global debugger utils (#32951) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Global debugger utils * Update packages/grafana-ui/src/utils/debug.ts Co-authored-by: Hugo Häggmark * Update packages/grafana-ui/src/utils/debug.ts Co-authored-by: Hugo Häggmark * Update packages/grafana-ui/src/components/uPlot/utils.ts Co-authored-by: Torkel Ödegaard * Update packages/grafana-ui/src/utils/debug.ts Co-authored-by: Torkel Ödegaard * fix merge suggestion * Typos Co-authored-by: Hugo Häggmark Co-authored-by: Torkel Ödegaard --- .../src/services/LocationService.ts | 27 ++++------------ .../grafana-ui/src/components/uPlot/utils.ts | 7 ++-- packages/grafana-ui/src/utils/debug.ts | 22 +++++++++++++ packages/grafana-ui/src/utils/index.ts | 1 + packages/grafana-ui/src/utils/logger.ts | 32 +++++++++++++++---- 5 files changed, 60 insertions(+), 29 deletions(-) create mode 100644 packages/grafana-ui/src/utils/debug.ts diff --git a/packages/grafana-runtime/src/services/LocationService.ts b/packages/grafana-runtime/src/services/LocationService.ts index d113a9adbbe..4809d56216b 100644 --- a/packages/grafana-runtime/src/services/LocationService.ts +++ b/packages/grafana-runtime/src/services/LocationService.ts @@ -1,7 +1,7 @@ import { deprecationWarning, UrlQueryMap, urlUtil } from '@grafana/data'; import * as H from 'history'; import { LocationUpdate } from './LocationSrv'; -import { createLogger } from '@grafana/ui'; +import { attachDebugger, createLogger } from '@grafana/ui'; import { config } from '../config'; /** @@ -35,24 +35,6 @@ export class HistoryWrapper implements LocationService { ? H.createMemoryHistory({ initialEntries: ['/'] }) : H.createBrowserHistory({ basename: config.appSubUrl ?? '/' }); - // For debugging purposes the location service is attached to global _debug variable - if (process.env.NODE_ENV !== 'production') { - // @ts-ignore - let debugGlobal = window['_debug']; - if (debugGlobal) { - debugGlobal = { - ...debugGlobal, - location: this, - }; - } else { - debugGlobal = { - location: this, - }; - } - // @ts-ignore - window['_debug'] = debugGlobal; - } - this.partial = this.partial.bind(this); this.push = this.push.bind(this); this.replace = this.replace.bind(this); @@ -168,5 +150,10 @@ export const setLocationService = (location: LocationService) => { locationService = location; }; +const navigationLog = createLogger('Router'); + /** @internal */ -export const navigationLogger = createLogger('Router'); +export const navigationLogger = navigationLog.logger; + +// For debugging purposes the location service is attached to global _debug variable +attachDebugger('location', locationService, navigationLog); diff --git a/packages/grafana-ui/src/components/uPlot/utils.ts b/packages/grafana-ui/src/components/uPlot/utils.ts index d1da398997c..1a353414611 100755 --- a/packages/grafana-ui/src/components/uPlot/utils.ts +++ b/packages/grafana-ui/src/components/uPlot/utils.ts @@ -2,8 +2,8 @@ import { DataFrame, dateTime, FieldType } from '@grafana/data'; import { AlignedData, Options } from 'uplot'; import { PlotPlugin, PlotProps } from './types'; import { createLogger } from '../../utils/logger'; +import { attachDebugger } from '../../utils'; -const LOGGING_ENABLED = false; const ALLOWED_FORMAT_STRINGS_REGEX = /\b(YYYY|YY|MMMM|MMM|MM|M|DD|D|WWWW|WWW|HH|H|h|AA|aa|a|mm|m|ss|s|fff)\b/g; export function timeFormatToTemplate(f: string) { @@ -63,4 +63,7 @@ export function preparePlotData(frame: DataFrame, ignoreFieldTypes?: FieldType[] // Dev helpers /** @internal */ -export const pluginLog = createLogger('uPlot Plugin', LOGGING_ENABLED); +export const pluginLogger = createLogger('uPlot Plugin'); +export const pluginLog = pluginLogger.logger; + +attachDebugger('graphng', undefined, pluginLogger); diff --git a/packages/grafana-ui/src/utils/debug.ts b/packages/grafana-ui/src/utils/debug.ts new file mode 100644 index 00000000000..4b60bb998bf --- /dev/null +++ b/packages/grafana-ui/src/utils/debug.ts @@ -0,0 +1,22 @@ +import { Logger } from './logger'; + +/** + * Allows debug helpers attachement to the window object + * @internal + */ +export function attachDebugger(key: string, thebugger?: any, logger?: Logger) { + if (process.env.NODE_ENV === 'production') { + return; + } + let completeDebugger = thebugger || {}; + + if (logger !== undefined) { + completeDebugger = { ...completeDebugger, enable: () => logger.enable(), disable: () => logger.disable() }; + } + + // @ts-ignore + let debugGlobal = window['_debug'] ?? {}; + debugGlobal[key] = completeDebugger; + // @ts-ignore + window['_debug'] = debugGlobal; +} diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts index 40b00059b47..63a19b03ddb 100644 --- a/packages/grafana-ui/src/utils/index.ts +++ b/packages/grafana-ui/src/utils/index.ts @@ -12,3 +12,4 @@ import * as DOMUtil from './dom'; // includes Element.closest polyfill export { DOMUtil }; export { renderOrCallToRender } from './renderOrCallToRender'; export { createLogger } from './logger'; +export { attachDebugger } from './debug'; diff --git a/packages/grafana-ui/src/utils/logger.ts b/packages/grafana-ui/src/utils/logger.ts index e6ff7e86910..66aa0ca9ee6 100644 --- a/packages/grafana-ui/src/utils/logger.ts +++ b/packages/grafana-ui/src/utils/logger.ts @@ -1,15 +1,33 @@ import throttle from 'lodash/throttle'; -/** @internal */ +/** + * @internal + * */ const throttledLog = throttle((...t: any[]) => { console.log(...t); }, 500); +/** + * @internal + */ +export interface Logger { + logger: (...t: any[]) => void; + enable: () => void; + disable: () => void; +} + /** @internal */ -export const createLogger = (name: string, enable = true) => (id: string, throttle = false, ...t: any[]) => { - if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' || !enable) { - return; - } - const fn = throttle ? throttledLog : console.log; - fn(`[${name}: ${id}]: `, ...t); +export const createLogger = (name: string): Logger => { + let LOGGIN_ENABLED = false; + return { + logger: (id: string, throttle = false, ...t: any[]) => { + if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' || !LOGGIN_ENABLED) { + return; + } + const fn = throttle ? throttledLog : console.log; + fn(`[${name}: ${id}]: `, ...t); + }, + enable: () => (LOGGIN_ENABLED = true), + disable: () => (LOGGIN_ENABLED = false), + }; };