Utils: Global debugger utils (#32951)

* Global debugger utils

* Update packages/grafana-ui/src/utils/debug.ts

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

* Update packages/grafana-ui/src/utils/debug.ts

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

* Update packages/grafana-ui/src/components/uPlot/utils.ts

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Update packages/grafana-ui/src/utils/debug.ts

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* fix merge suggestion

* Typos

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

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);

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);

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;
+}

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';

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[]) => {
+export const createLogger = (name: string): Logger => {
-  if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' || !enable) {
+  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),
+  };
 };