Loading dashboards with update function (#58)

* changed dashboard loading to use update fn

* removed extra package

Author: gurinder39

package.json

@@ -361,7 +361,6 @@
     "prismjs": "1.29.0",
     "prop-types": "15.8.1",
     "pseudoizer": "^0.1.0",
-    "query-string": "^7.1.1",
     "rc-cascader": "3.7.0",
     "rc-drawer": "4.4.3",
     "rc-slider": "10.0.1",

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';
 
@@ -17,6 +18,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { PanelModel } from 'app/features/dashboard/state';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 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';
@@ -37,8 +39,6 @@ import { liveTimer } from '../dashgrid/liveTimer';
 import { getTimeSrv } from '../services/TimeSrv';
 import { cleanUpDashboardAndVariables } from '../state/actions';
 import { initDashboard } from '../state/initDashboard';
-import { FNDashboardProps } from 'app/fn-app/types';
-import { isUndefined, isEmpty, noop } from 'lodash';
 
 export interface DashboardPageRouteParams {
   uid?: string;

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

@@ -32,6 +32,7 @@ const mapStateToProps = (state: StoreState, props: OwnProps) => {
   return {
     plugin: panelState.plugin,
     instanceState: panelState.instanceState,
+    fnGlobalState: state.fnGlobalState
   };
 };
 
@@ -43,8 +44,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,
   };
@@ -71,8 +72,10 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
   };
 
   renderPanel = (isInView: boolean) => {
-    const { dashboard, panel, isViewing, isEditing, width, height, plugin, timezone } = this.props;
+    const { dashboard, panel, isViewing, isEditing, width, height, plugin, timezone, fnGlobalState } = this.props;
 
+    // console.log(this.props, "on render panel")
+    
     if (!plugin) {
       return null;
     }
@@ -104,6 +107,8 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
         height={height}
         onInstanceStateChange={this.onInstanceStateChange}
         timezone={timezone}
+        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 {
@@ -36,7 +35,6 @@ import { PANEL_BORDER } from 'app/core/constants';
 import { profiler } from 'app/core/profiler';
 import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
 import { changeSeriesColorConfigFactory } from 'app/plugins/panel/timeseries/overrides/colorSeriesConfigFactory';
-import { StoreState } from 'app/types';
 import { RenderEvent } from 'app/types/events';
 
 import { isSoloRoute } from '../../../routes/utils';
@@ -65,6 +63,7 @@ export interface Props {
   onInstanceStateChange: (value: any) => void;
   timezone?: string;
   FNDashboard?: boolean;
+  mode?: "light" | "dark";
 }
 
 export interface State {
@@ -271,6 +270,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     if (width !== prevProps.width) {
       liveTimer.updateInterval(this);
     }
+    
   }
 
   // Updates the response with information from the stream
@@ -626,8 +626,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}
@@ -659,9 +658,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 }) => {

yarn.lock

@@ -16258,7 +16258,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decode-uri-component@npm:^0.2.0, decode-uri-component@npm:^0.2.2":
+"decode-uri-component@npm:^0.2.0":
   version: 0.2.2
   resolution: "decode-uri-component@npm:0.2.2"
   checksum: 95476a7d28f267292ce745eac3524a9079058bbb35767b76e3ee87d42e34cd0275d2eb19d9d08c3e167f97556e8a2872747f5e65cbebcac8b0c98d83e285f139
@@ -18973,13 +18973,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filter-obj@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "filter-obj@npm:1.1.0"
-  checksum: cf2104a7c45ff48e7f505b78a3991c8f7f30f28bd8106ef582721f321f1c6277f7751aacd5d83026cb079d9d5091082f588d14a72e7c5d720ece79118fa61e10
-  languageName: node
-  linkType: hard
-
 "finalhandler@npm:1.2.0":
   version: 1.2.0
   resolution: "finalhandler@npm:1.2.0"
@@ -20292,7 +20285,6 @@ __metadata:
     prismjs: 1.29.0
     prop-types: 15.8.1
     pseudoizer: ^0.1.0
-    query-string: ^7.1.1
     rc-cascader: 3.7.0
     rc-drawer: 4.4.3
     rc-slider: 10.0.1
@@ -29562,18 +29554,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"query-string@npm:^7.1.1":
-  version: 7.1.3
-  resolution: "query-string@npm:7.1.3"
-  dependencies:
-    decode-uri-component: ^0.2.2
-    filter-obj: ^1.1.0
-    split-on-first: ^1.0.0
-    strict-uri-encode: ^2.0.0
-  checksum: 91af02dcd9cc9227a052841d5c2eecb80a0d6489d05625df506a097ef1c59037cfb5e907f39b84643cbfd535c955abec3e553d0130a7b510120c37d06e0f4346
-  languageName: node
-  linkType: hard
-
 "querystringify@npm:^2.1.1":
   version: 2.2.0
   resolution: "querystringify@npm:2.2.0"
@@ -33133,13 +33113,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"split-on-first@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "split-on-first@npm:1.1.0"
-  checksum: 16ff85b54ddcf17f9147210a4022529b343edbcbea4ce977c8f30e38408b8d6e0f25f92cd35b86a524d4797f455e29ab89eb8db787f3c10708e0b47ebf528d30
-  languageName: node
-  linkType: hard
-
 "split-string@npm:^3.0.1, split-string@npm:^3.0.2":
   version: 3.1.0
   resolution: "split-string@npm:3.1.0"
@@ -33453,13 +33426,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strict-uri-encode@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "strict-uri-encode@npm:2.0.0"
-  checksum: eaac4cf978b6fbd480f1092cab8b233c9b949bcabfc9b598dd79a758f7243c28765ef7639c876fa72940dac687181b35486ea01ff7df3e65ce3848c64822c581
-  languageName: node
-  linkType: hard
-
 "string-argv@npm:^0.3.1, string-argv@npm:~0.3.1":
   version: 0.3.1
   resolution: "string-argv@npm:0.3.1"