log and tooltip fix (#183)

Author: GurinderRawala

package.json

@@ -355,6 +355,7 @@
     "kbar": "0.1.0-beta.40",
     "lodash": "4.17.21",
     "logfmt": "^1.3.2",
+    "loglevel": "^1.9.1",
     "lru-cache": "10.0.0",
     "lru-memoize": "^1.1.0",
     "marked": "5.1.1",

public/app/features/visualization/data-hover/DataHoverView.tsx

@@ -138,7 +138,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     wrapper: css`
       background: ${bg};
       border: 1px solid ${headerBg};
-      border-radius: ${theme.shape.borderRadius(2)};
     `,
     header: css`
       background: ${headerBg};
@@ -158,14 +157,19 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: 8px;
       th {
         font-weight: ${theme.typography.fontWeightMedium};
-        padding: ${theme.spacing(0.25, 2)};
+        padding: ${theme.spacing(0.25)};
+        padding-left: ${theme.spacing(1)};
       }
       tr {
         background-color: ${theme.colors.background.primary};
         &:nth-child(even) {
           background-color: ${tableBgOdd};
         }
       }
+      td {
+        padding: ${theme.spacing(0.25)};
+        padding-right: ${theme.spacing(1)};
+      }
     `,
     highlight: css`
       /* !important is required to overwrite default table styles */

public/app/fn-app/create-mfe.ts

@@ -60,18 +60,14 @@ type DeepPartial<T> = {
 
 class createMfe {
   private static readonly containerSelector = '#grafanaRoot';
-
-  private static readonly logPrefix = '[FN Grafana]';
+  private static logger = FnLoggerService;
 
   mode: FNDashboardProps['mode'];
   static Component: ComponentType<Omit<FNDashboardProps, FnPropMappedFromState>>;
   constructor(readonly props: FNDashboardProps) {
     this.mode = props.mode;
   }
 
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  private static logger = (...args: any[]) => console.log(createMfe.logPrefix, ...args);
-
   static getLifeCycles(component: ComponentType<Omit<FNDashboardProps, FnPropMappedFromState>>) {
     const lifeCycles: FrameworkLifeCycles = {
       bootstrap: this.boot(),
@@ -168,7 +164,7 @@ class createMfe {
    * If isRuntimeOnly then the stylesheets of the turned off theme are not removed
    */
   private static loadFnTheme = (mode: FNDashboardProps['mode'] = GrafanaThemeType.Light, isRuntimeOnly = false) => {
-    createMfe.logger('Trying to load theme.', { mode });
+    createMfe.logger.info('Trying to load theme.', { mode });
 
     const grafanaTheme2 = createMfe.createGrafanaTheme2(mode);
 
@@ -179,7 +175,7 @@ class createMfe {
     createMfe.publishTheme(bootConfigWithTheme.theme2);
 
     if (isRuntimeOnly) {
-      createMfe.logger('Successfully loaded theme', { mode });
+      createMfe.logger.info('Successfully loaded theme', { mode });
 
       return;
     }
@@ -190,7 +186,7 @@ class createMfe {
     newCssLink.href = config.bootData.themePaths[mode];
     document.body.appendChild(newCssLink);
 
-    createMfe.logger('Successfully loaded theme.', { mode });
+    createMfe.logger.info('Successfully loaded theme.', { mode });
   };
 
   private static getContainer(props: FNDashboardProps) {
@@ -201,8 +197,6 @@ class createMfe {
 
   static mountFnApp(Component: ComponentType<Omit<FNDashboardProps, FnPropMappedFromState>>) {
     const lifeCycleFn: FrameworkLifeCycles['mount'] = (props: FNDashboardProps) => {
-      createMfe.logger('Trying to mount grafana...');
-
       return new Promise((res, rej) => {
         try {
           createMfe.loadFnTheme(props.mode);
@@ -214,19 +208,19 @@ class createMfe {
             ...pick(props, ...fnStateProps),
           };
 
-          FnLoggerService.log(null, '[FN Grafana] Dispatching initial state.', { initialState });
+          createMfe.logger.info('[FN Grafana] Dispatching initial state.', { initialState });
 
           dispatch(updateFnState(initialState));
 
           createMfe.renderMfeComponent(props, () => {
-            createMfe.logger('Mounted grafana.', { props });
+            createMfe.logger.info('Mounted grafana.', { props });
 
             return res(true);
           });
         } catch (err) {
           const message = `[FN Grafana]: Failed to mount grafana. ${err}`;
 
-          FnLoggerService.log(null, message);
+          FnLoggerService.info(null, message);
 
           const fnError = new Error(message);
 
@@ -246,13 +240,13 @@ class createMfe {
       const container = createMfe.getContainer(props);
 
       if (container) {
-        createMfe.logger('Trying to unmount grafana...');
+        createMfe.logger.info('Trying to unmount grafana...');
 
         ReactDOM.unmountComponentAtNode(container);
 
-        createMfe.logger('Successfully unmounted grafana.');
+        createMfe.logger.info('Successfully unmounted grafana.');
       } else {
-        createMfe.logger('Failed to unmount grafana. Container does not exist.');
+        createMfe.logger.error('Failed to unmount grafana. Container does not exist.');
       }
 
       backendSrv.cancelAllInFlightRequests();
@@ -266,26 +260,17 @@ class createMfe {
   static updateFnApp() {
     const lifeCycleFn: FrameworkLifeCycles['update'] = ({ mode, ...other }: FNDashboardProps) => {
       if (mode) {
-        createMfe.logger('Trying to update grafana with theme.', { mode });
-
         dispatch(
           updatePartialFnStates({
             mode,
           })
         );
-        /**
-         * NOTE:
-         * Here happens the theme change.
-         *
-         * TODO:
-         * We could probably made the theme change smoother
-         * if we use state to update the theme
-         */
+
         createMfe.loadFnTheme(mode);
       }
 
       if (other.uid) {
-        createMfe.logger('Trying to update grafana with hidden variables.', { updatedProps: other });
+        createMfe.logger.info('Trying to render dashboard using update: ', { updatedProps: other });
 
         dispatch(
           updatePartialFnStates({
@@ -310,7 +295,7 @@ class createMfe {
     const container = createMfe.getContainer(props);
 
     ReactDOM.render(React.createElement(createMfe.Component, props), container, () => {
-      createMfe.logger('Created mfe component.', { props, container });
+      createMfe.logger.info('Created mfe component.', { props, container });
       onSuccess();
     });
   }

public/app/fn_logger.ts

@@ -1,79 +1,9 @@
-import { isBoolean, noop } from 'lodash';
+import log from 'loglevel';
 
-const SHOULD_LOG = process.env.NODE_ENV !== 'production';
+const SHOULD_LOG = process.env.SHOULD_LOG === 'true';
 
-type Console = Pick<typeof console, 'info' | 'error' | 'debug' | 'warn' | 'log'>;
+const FnLoggerService = log.getLogger('[FN Grafana]');
 
-export class FnLoggerService {
-  private static readonly DEFAULT_SHOULD_LOG = false;
+FnLoggerService.setLevel(SHOULD_LOG ? log.levels.DEBUG : log.levels.ERROR);
 
-  private static logger(shouldLog: boolean | null) {
-    /* eslint-disable-next-line  */
-    const flag = isBoolean(shouldLog)
-      ? shouldLog
-      : isBoolean(SHOULD_LOG)
-      ? SHOULD_LOG
-      : FnLoggerService.DEFAULT_SHOULD_LOG;
-
-    if (flag) {
-      return console as Console;
-    }
-
-    const noopConsole: Console = {
-      info: noop,
-      error: noop,
-      debug: noop,
-      warn: noop,
-      log: noop,
-    };
-
-    return noopConsole;
-  }
-
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  static debug = (shouldLog: boolean | null, ...args: any[]) => {
-    FnLoggerService.logger(shouldLog).debug(FnLoggerService.valuesToString(...args));
-  };
-
-  static error = (shouldLog: boolean | null, ...args: any[]) => {
-    FnLoggerService.logger(shouldLog).error(FnLoggerService.valuesToString(...args));
-  };
-
-  static warn = (shouldLog: boolean | null, ...args: any[]) => {
-    FnLoggerService.logger(shouldLog).warn(FnLoggerService.valuesToString(...args));
-  };
-
-  static info = (shouldLog: boolean | null, ...args: any[]) => {
-    FnLoggerService.logger(shouldLog).info(FnLoggerService.valuesToString(...args));
-  };
-
-  static log = (shouldLog: boolean | null, ...args: any[]) => {
-    FnLoggerService.logger(shouldLog).log(FnLoggerService.valuesToString(...args));
-  };
-  /* eslint-enable @typescript-eslint/no-explicit-any */
-
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  private static readonly valuesToString = (...args: any[]): string =>
-    args.map(FnLoggerService.valueToString).join(' ');
-  /* eslint-enable @typescript-eslint/no-explicit-any */
-
-  private static readonly valueToString = <V>(value: V): string => {
-    if (typeof value === 'string') {
-      return value;
-    }
-
-    if (Array.isArray(value)) {
-      return value.map(FnLoggerService.valueToString).join(' ');
-    }
-
-    if (value instanceof Error) {
-      return value.message;
-    }
-
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(value);
-    }
-  };
-}
+export { FnLoggerService };

scripts/webpack/webpack.dev.js

@@ -125,6 +125,7 @@ module.exports = (env = {}) => {
       new DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify('development'),
+          SHOULD_LOG: JSON.stringify('true'),
         },
       }),
     ],

scripts/webpack/webpack.prod.js

@@ -96,6 +96,7 @@ module.exports = (env = {}) =>
       new DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify('development'),
+          SHOULD_LOG: JSON.stringify('false'),
         },
       }),
       new WebpackManifestPlugin({

yarn.lock

@@ -19954,6 +19954,7 @@ __metadata:
     lint-staged: 13.2.3
     lodash: 4.17.21
     logfmt: ^1.3.2
+    loglevel: ^1.9.1
     lru-cache: 10.0.0
     lru-memoize: ^1.1.0
     marked: 5.1.1
@@ -23523,6 +23524,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loglevel@npm:^1.9.1":
+  version: 1.9.1
+  resolution: "loglevel@npm:1.9.1"
+  checksum: e1c8586108c4d566122e91f8a79c8df728920e3a714875affa5120566761a24077ec8ec9e5fc388b022e39fc411ec6e090cde1b5775871241b045139771eeb06
+  languageName: node
+  linkType: hard
+
 "long@npm:^5.0.0":
   version: 5.2.3
   resolution: "long@npm:5.2.3"