Loading dashboards with update function (#58)

* changed dashboard loading to use update fn

* removed extra package

Author: gurinder39

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

@@ -20,7 +20,7 @@ export type UpdateFNGlobalStateAction = PayloadAction<Partial<FnGlobalState>>;
 
 export type SetFnStateAction = PayloadAction<Omit<FnGlobalState, 'hiddenVariables'>>;
 
-export type FnPropMappedFromState = Extract<keyof FnGlobalState, 'FNDashboard' | 'hiddenVariables' | 'mode'>;
+export type FnPropMappedFromState = Extract<keyof FnGlobalState, 'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug'>;
 export type FnStateProp = keyof FnGlobalState;
 
 export type FnPropsMappedFromState = Pick<FnGlobalState, FnPropMappedFromState>;
@@ -40,6 +40,9 @@ export const fnPropsMappedFromState: readonly FnPropMappedFromState[] = [
   'FNDashboard',
   'hiddenVariables',
   'mode',
+  'uid',
+  'queryParams',
+  'slug',
 ] as const;
 
 const INITIAL_MODE = GrafanaThemeType.Light;

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -1,4 +1,5 @@
 import { cx } from '@emotion/css';
+import { isUndefined, isEmpty, noop } from 'lodash';
 import React, { PureComponent, } from 'react';
 import { connect, ConnectedProps, MapDispatchToProps, MapStateToProps } from 'react-redux';
 
@@ -22,6 +23,7 @@ import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { AngularDeprecationNotice } from 'app/features/plugins/angularDeprecation/AngularDeprecationNotice';
 import { AngularMigrationNotice } from 'app/features/plugins/angularDeprecation/AngularMigrationNotice';
 import { getPageNavFromSlug, getRootContentNavModel } from 'app/features/storage/StorageFolderPage';
+import { FNDashboardProps } from 'app/fn-app/types';
 import { RenderPortal } from 'app/fn-app/utils';
 import { DashboardRoutes, DashboardState, KioskMode, StoreState } from 'app/types';
 import { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';
@@ -44,8 +46,6 @@ import { getTimeSrv } from '../services/TimeSrv';
 import { explicitlyControlledMigrationPanels, autoMigrateAngular } from '../state/PanelModel';
 import { cleanUpDashboardAndVariables } from '../state/actions';
 import { initDashboard } from '../state/initDashboard';
-import { FNDashboardProps } from 'app/fn-app/types';
-import { isUndefined, isEmpty, noop } from 'lodash';
 
 import { DashboardPageRouteParams, DashboardPageRouteSearchParams } from './types';
 

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -34,6 +34,7 @@ const mapStateToProps = (state: StoreState, props: OwnProps) => {
   return {
     plugin: panelState.plugin,
     instanceState: panelState.instanceState,
+    fnGlobalState: state.fnGlobalState
   };
 };
 
@@ -45,8 +46,8 @@ const mapDispatchToProps = {
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
 export type Props = OwnProps & ConnectedProps<typeof connector>;
-
 export class DashboardPanelUnconnected extends PureComponent<Props> {
+
   static defaultProps: Partial<Props> = {
     lazy: true,
   };
@@ -72,19 +73,10 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
     }
   };
 
-  renderPanel = ({ isInView }: { isInView: boolean }) => {
-    const {
-      dashboard,
-      panel,
-      isViewing,
-      isEditing,
-      width,
-      height,
-      plugin,
-      timezone,
-      hideMenu,
-      isDraggable = true,
-    } = this.props;
+  renderPanel = (isInView: boolean) => {
+    const { dashboard, panel, isViewing, isEditing, width, height, plugin, timezone, fnGlobalState, isDraggable = true } = this.props;
+
+    // console.log(this.props, "on render panel")
 
     if (!plugin) {
       return null;
@@ -119,7 +111,8 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
         height={height}
         onInstanceStateChange={this.onInstanceStateChange}
         timezone={timezone}
-        hideMenu={hideMenu}
+        mode={fnGlobalState.mode}
+        FNDashboard={fnGlobalState.FNDashboard}
       />
     );
   };

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import React, { PureComponent, CSSProperties } from 'react';
-import { connect } from 'react-redux';
 import { Subscription } from 'rxjs';
 
 import {
@@ -41,7 +40,6 @@ import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { applyFilterFromTable } from 'app/features/variables/adhoc/actions';
 import { onUpdatePanelSnapshotData } from 'app/plugins/datasource/grafana/utils';
 import { changeSeriesColorConfigFactory } from 'app/plugins/panel/timeseries/overrides/colorSeriesConfigFactory';
-import { StoreState } from 'app/types';
 import { RenderEvent } from 'app/types/events';
 
 import { deleteAnnotation, saveAnnotation, updateAnnotation } from '../../annotations/api';
@@ -73,6 +71,7 @@ export interface Props {
   timezone?: string;
   hideMenu?: boolean;
   FNDashboard?: boolean;
+  mode?: "light" | "dark";
 }
 
 export interface State {
@@ -296,6 +295,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     if (width !== prevProps.width) {
       liveTimer.updateInterval(this);
     }
+    
   }
 
   // Updates the response with information from the stream
@@ -613,8 +613,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
           aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}
         >
           {FNDashboard ? (
-            // TODO: Avoid divology. Use HTML5, i.e. wrap texts with  p or h element instead of div.
-            <div style={FN_TITLE_STYLE}>{panel.title}</div>
+            <p style={FN_TITLE_STYLE}>{panel.title}</p>
           ) : (
             <PanelHeader
               panel={panel}
@@ -646,9 +645,3 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     }
   }
 }
-
-const mapStateToProps = (state: StoreState) => {
-  return { ...state.fnGlobalState };
-};
-const connector = connect(mapStateToProps);
-export const PanelChrome = connector(PanelStateWrapper);

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

@@ -264,14 +264,10 @@ class createMfe {
   }
 
   static updateFnApp() {
-    const lifeCycleFn: FrameworkLifeCycles['update'] = ({ mode, hiddenVariables }: FNDashboardProps) => {
+    const lifeCycleFn: FrameworkLifeCycles['update'] = ({ mode, ...other }: FNDashboardProps) => {
       if (mode) {
         createMfe.logger('Trying to update grafana with theme.', { mode });
-        /**
-         * NOTE
-         * We do not use the "mode" state right now,
-         * but I believe that as long as we store the "mode, we should update it
-         */
+
         dispatch(
           updatePartialFnStates({
             mode,
@@ -288,12 +284,15 @@ class createMfe {
         createMfe.loadFnTheme(mode);
       }
 
-      if (hiddenVariables) {
-        createMfe.logger('Trying to update grafana with hidden variables.', { hiddenVariables });
+      if (other.uid) {
+        createMfe.logger('Trying to update grafana with hidden variables.', { updatedProps: other });
 
         dispatch(
           updatePartialFnStates({
-            hiddenVariables,
+            uid: other.uid,
+            hiddenVariables: other.hiddenVariables,
+            slug: other.slug,
+            queryParams: other.queryParams,
           })
         );
       }

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

@@ -1,9 +1,7 @@
 import { pick } from 'lodash';
-import { parse as parseQueryParams } from 'query-string';
 import React, { FC, Suspense, useMemo } from 'react';
 import { lazily } from 'react-lazily';
 import { connect, MapStateToProps } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 
 import {
   FnGlobalState,
@@ -44,18 +42,14 @@ function mapStateToProps(): MapStateToProps<
 }
 
 export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMappedFromState> = (props) => {
-  const location = useLocation();
 
   const content = useMemo(() => {
     if (!props.FNDashboard) {
       // TODO Use no data
       return null;
     }
 
-    const { search } = location;
-    const queryParams = parseQueryParams(search);
-
-    const { dashboardUID: uid, slug } = queryParams as { dashboardUID?: string; slug?: string };
+    const { uid, slug, queryParams = {} } = props;
 
     if (!uid || !slug) {
       // TODO Use no data
@@ -72,7 +66,7 @@ export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMap
         }}
       />
     );
-  }, [location, props]);
+  }, [props]);
 
   return <RenderPortal ID="grafana-portal">{content}</RenderPortal>;
 };

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

@@ -69,7 +69,7 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
         fnLoader,
         isLoading
       }),
-    [controlsContainer, fnLoader, hiddenVariables, props, queryParams]
+    [controlsContainer, fnLoader, hiddenVariables, isLoading, props, queryParams]
   );
 
   return <DashboardPage {...dashboardPageProps} />;

public/app/fn-app/utils.tsx

@@ -5,10 +5,6 @@ export interface RenderPortalProps {
   ID: string;
 }
 
-export declare type PortalEffectReturn = {
-  portalDiv: HTMLElement | null;
-}
-
 export const getPortalContainer = (ID: string): HTMLElement | null => document.getElementById(ID);
 
 export const RenderPortal: FC<RenderPortalProps> = ({ ID, children }) => {