render time range selector any where, removed dead code (#103)

* removed graphql data source, updated local test info in fn readme

* portal for time range selector

Author: gurinder39

FN_README.md

@@ -1,6 +1,4 @@
-# Sankey plugin
-
-## How to work with it?
+## Sankey Plugin
 
 We created our fork of [snakey-panel](https://github.com/IsmaelMasharo/sankey-panel) ---> [our fork](https://github.com/fluxninja/sankey-panel) and if we want to add some changes to it we need to:
 
@@ -10,19 +8,34 @@ We created our fork of [snakey-panel](https://github.com/IsmaelMasharo/sankey-pa
 - copy-paste builded version of plugin into grafana `public/app/plugins/panel/sankey-panel-0.5.0`
 - refresh grafana
 
-# [Grafadruid-druid datasource plugin](./public/app/plugins/datasource//grafadruid-druid-datasource/)
+## [Grafadruid-druid datasource plugin](./public/app/plugins/datasource//grafadruid-druid-datasource/)
 
 https://github.com/grafadruid/druid-grafana/tree/master/src
 
-# [Graphql datasource plugin](./public/app/plugins//datasource//fifemon-graphql-datasource/)
+## Local Testing
+
+Run Grafana locally using:
+
+```shell
+make run
+
+yarn start
+```
+
+Port forward local prometheus and druid from [cloud](https://github.com/fluxninja/cloud) repo using fn:
+
+```shell
+cd cloud
+
+LOGURU_LEVEL=TRACE fn dev service-proxy --cluster <cluster-name> prometheus-cloud druid-router
 
-https://github.com/fifemon/graphql-datasource/tree/v1.3.0/src
+```
 
-Release: v1.3.0
+Connect to druid and prometheus on locally running Grafana UI. For this go to connection tab and select Data Source. Add new data source and make a connection. To test micro frontend make a connection with UI follow this [MFE Grafana](https://github.com/fluxninja/cloud/tree/main/services/cloud/ui#running-grafana-locally-for-development).
 
-# Troubleshooting
+## Troubleshooting
 
-## "Cannot find module" typescript errors (ts2307)
+### "Cannot find module" typescript errors (ts2307)
 
 Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeScript to work when using Plug'n'Play installs.
 A collection of settings for each editor can be found under the (link)[https://yarnpkg.com/getting-started/editor-sdks#vscode]

public/app/core/reducers/fn-slice.ts

@@ -21,7 +21,10 @@ export type UpdateFNGlobalStateAction = PayloadAction<Partial<FnGlobalState>>;
 
 export type SetFnStateAction = PayloadAction<Omit<FnGlobalState, 'hiddenVariables'>>;
 
-export type FnPropMappedFromState = Extract<keyof FnGlobalState, 'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug' | 'version'>;
+export type FnPropMappedFromState = Extract<
+  keyof FnGlobalState,
+  'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug' | 'version' | 'controlsContainer'
+>;
 export type FnStateProp = keyof FnGlobalState;
 
 export type FnPropsMappedFromState = Pick<FnGlobalState, FnPropMappedFromState>;

public/app/features/plugins/built_in_plugins.ts

@@ -21,8 +21,6 @@ const postgresPlugin = async () =>
   await import(/* webpackChunkName: "postgresPlugin" */ 'app/plugins/datasource/postgres/module');
 const grafadruidDruidDatasourcePlugin = async () =>
   await import(/* webpackChunkName: "druidPlugin" */ 'app/plugins/datasource/grafadruid-druid-datasource/module');
-const fifemonGraphqlDatasourcePlugin = async () =>
-  await import(/* webpackChunkName: "graphqlPlugin" */ 'app/plugins/datasource/fifemon-graphql-datasource/module');
 const prometheusPlugin = async () =>
   await import(/* webpackChunkName: "prometheusPlugin" */ 'app/plugins/datasource/prometheus/module');
 const mssqlPlugin = async () =>
@@ -93,8 +91,8 @@ const builtInPlugins: any = {
   'app/plugins/datasource/mysql/module': mysqlPlugin,
   'app/plugins/datasource/postgres/module': postgresPlugin,
   'app/plugins/datasource/mssql/module': mssqlPlugin,
+  // Default FluxNinja Druid datasource
   'app/plugins/datasource/grafadruid-druid-datasource/module': grafadruidDruidDatasourcePlugin,
-  'app/plugins/datasource/fifemon-graphql-datasource/module': fifemonGraphqlDatasourcePlugin,
   'app/plugins/datasource/prometheus/module': prometheusPlugin,
   'app/plugins/datasource/testdata/module': testDataDSPlugin,
   'app/plugins/datasource/cloud-monitoring/module': cloudMonitoringPlugin,

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

@@ -4,12 +4,12 @@ declare let __webpack_public_path__: string;
 window.__grafana_public_path__ =
   __webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) || __webpack_public_path__;
 
-import { isNull, merge, noop, omit, pick } from 'lodash';
+import { isNull, merge, noop, pick } from 'lodash';
 import React, { ComponentType } from 'react';
 import ReactDOM from 'react-dom';
 
 import { createTheme, GrafanaThemeType } from '@grafana/data';
-import { createFnColors } from '@grafana/data/src/themes/fnCreateColors';
+import { createColors } from '@grafana/data/src/themes/createColors';
 import { GrafanaTheme2 } from '@grafana/data/src/themes/types';
 import { ThemeChangedEvent } from '@grafana/runtime';
 import { GrafanaBootConfig } from '@grafana/runtime/src/config';
@@ -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(),
@@ -113,7 +109,7 @@ class createMfe {
       },
     });
 
-    config.theme2.colors = createFnColors({ mode });
+    config.theme2.colors = createColors({ mode });
 
     config.theme2.v1 = getTheme(mode);
 
@@ -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({
@@ -294,6 +279,7 @@ class createMfe {
             slug: other.slug,
             version: other.version,
             queryParams: other.queryParams,
+            controlsContainer: other.controlsContainer,
           })
         );
       }
@@ -308,14 +294,10 @@ class createMfe {
   static renderMfeComponent(props: FNDashboardProps, onSuccess = noop) {
     const container = createMfe.getContainer(props);
 
-    ReactDOM.render(
-      React.createElement(createMfe.Component, omit(props, 'hiddenVariables', 'FNDashboard')),
-      container,
-      () => {
-        createMfe.logger('Created mfe component.', { props, container });
-        onSuccess();
-      }
-    );
+    ReactDOM.render(React.createElement(createMfe.Component, props), container, () => {
+      createMfe.logger.info('Created mfe component.', { props, container });
+      onSuccess();
+    });
   }
 }
 

public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx

@@ -1,16 +1,9 @@
 import { pick } from 'lodash';
 import React, { FC, useMemo } from 'react';
-import { connect, MapStateToProps } from 'react-redux';
 
-import {
-  FnGlobalState,
-  FN_STATE_KEY,
-  FnPropMappedFromState,
-  fnPropsMappedFromState,
-  FnPropsMappedFromState,
-} from 'app/core/reducers/fn-slice';
+import { FnPropMappedFromState, fnPropsMappedFromState } from 'app/core/reducers/fn-slice';
+import { StoreState, useSelector } from 'app/types';
 
-import { AngularRoot } from '../../angular/AngularRoot';
 import { FnAppProvider } from '../fn-app-provider';
 import { FNDashboardProps } from '../types';
 import { RenderPortal } from '../utils';
@@ -22,33 +15,34 @@ type FNDashboardComponentProps = Omit<FNDashboardProps, FnPropMappedFromState>;
 export const FNDashboard: FC<FNDashboardComponentProps> = (props) => {
   return (
     <FnAppProvider fnError={props.fnError}>
-      <div className="page-dashboard">
-        <AngularRoot />
-        <DashboardPortal {...props} />
-      </div>
+      <DashboardPortal {...props} />
     </FnAppProvider>
   );
 };
 
-function mapStateToProps(): MapStateToProps<
-  FnPropsMappedFromState,
-  Omit<FNDashboardProps, FnPropMappedFromState>,
-  { [K in typeof FN_STATE_KEY]: FnGlobalState }
-> {
-  return ({ fnGlobalState }) => pick(fnGlobalState, ...fnPropsMappedFromState);
+function mapStateToProps() {
+  return ({ fnGlobalState }: StoreState) => pick(fnGlobalState, ...fnPropsMappedFromState);
 }
 
-export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMappedFromState> = (props) => {
+export const DashboardPortal: FC<FNDashboardComponentProps> = (p) => {
+  const globalFnProps = useSelector(mapStateToProps());
+
+  const props = useMemo(
+    () => ({
+      ...p,
+      ...globalFnProps,
+    }),
+    [p, globalFnProps]
+  );
+
   const content = useMemo(() => {
     if (!props.FNDashboard) {
-      // TODO Use no data
       return null;
     }
 
-    const { uid, slug, queryParams = {} } = props;
+    const { uid, queryParams = {} } = props;
 
-    if (!uid || !slug) {
-      // TODO Use no data
+    if (!uid) {
       return null;
     }
 
@@ -57,14 +51,15 @@ export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMap
         {...{
           ...props,
           uid,
-          slug,
           queryParams,
         }}
       />
     );
   }, [props]);
 
-  return <RenderPortal ID="grafana-portal">{content}</RenderPortal>;
+  return (
+    <RenderPortal ID="grafana-portal">
+      <div className="page-dashboard">{content}</div>
+    </RenderPortal>
+  );
 };
-
-export const DashboardPortal = connect(mapStateToProps())(DashboardPortalComponent);

public/app/fn-app/types.ts

@@ -27,7 +27,7 @@ export interface FNDashboardProps {
   queryParams: ParsedQuery<string>;
   fnError?: ReactNode;
   pageTitle?: string;
-  controlsContainer: string;
+  controlsContainer: string | null;
   isLoading: (isLoading: boolean) => void;
   setErrors: (errors?: { [K: number | string]: string }) => void;
   hiddenVariables: readonly string[];

public/app/fn-app/utils.tsx

@@ -1,18 +1,16 @@
-import { FC, PropsWithChildren } from 'react';
-import ReactDOM from 'react-dom';
+import { Portal } from '@mui/material';
+import React, { FC, PropsWithChildren } from 'react';
 
 export interface RenderPortalProps {
   ID: string;
 }
 
-export const getPortalContainer = (ID: string): HTMLElement | null => document.getElementById(ID);
-
 export const RenderPortal: FC<PropsWithChildren<RenderPortalProps>> = ({ ID, children }) => {
-  const portalDiv = getPortalContainer(ID);
+  const container = document.getElementById(ID);
 
-  if (!portalDiv) {
+  if (!container) {
     return null;
   }
 
-  return ReactDOM.createPortal(children, portalDiv);
+  return <Portal container={container}>{children}</Portal>;
 };