From 9ab5736eb9779176e3a8af0e6257a80b071fe10e Mon Sep 17 00:00:00 2001 From: Gurinder Singh Date: Thu, 23 Feb 2023 17:04:39 -0500 Subject: [PATCH 1/2] changed dashboard loading to use update fn --- public/app/core/reducers/fn-slice.ts | 5 ++++- .../dashboard/containers/DashboardPage.tsx | 4 ++-- .../dashboard/dashgrid/DashboardPanel.tsx | 9 +++++++-- .../dashboard/dashgrid/PanelStateWrapper.tsx | 13 +++---------- public/app/fn-app/create-mfe.ts | 17 ++++++++--------- .../fn-app/fn-dashboard-page/fn-dashboard.tsx | 10 ++-------- .../fn-dashboard-page/render-fn-dashboard.tsx | 2 +- public/app/fn-app/utils.tsx | 4 ---- 8 files changed, 27 insertions(+), 37 deletions(-) diff --git a/public/app/core/reducers/fn-slice.ts b/public/app/core/reducers/fn-slice.ts index d977b2b3635d..d6d6c0949d06 100644 --- a/public/app/core/reducers/fn-slice.ts +++ b/public/app/core/reducers/fn-slice.ts @@ -20,7 +20,7 @@ export type UpdateFNGlobalStateAction = PayloadAction>; export type SetFnStateAction = PayloadAction>; -export type FnPropMappedFromState = Extract; +export type FnPropMappedFromState = Extract; export type FnStateProp = keyof FnGlobalState; export type FnPropsMappedFromState = Pick; @@ -40,6 +40,9 @@ export const fnPropsMappedFromState: readonly FnPropMappedFromState[] = [ 'FNDashboard', 'hiddenVariables', 'mode', + 'uid', + 'queryParams', + 'slug', ] as const; const INITIAL_MODE = GrafanaThemeType.Light; diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index b4b7f36060d1..d8d6bd8707a0 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/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; diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index 4f76e07a792c..1135548caaf2 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/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; - export class DashboardPanelUnconnected extends PureComponent { + static defaultProps: Partial = { lazy: true, }; @@ -71,8 +72,10 @@ export class DashboardPanelUnconnected extends PureComponent { }; 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 { height={height} onInstanceStateChange={this.onInstanceStateChange} timezone={timezone} + mode={fnGlobalState.mode} + FNDashboard={fnGlobalState.FNDashboard} /> ); }; diff --git a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx b/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx index bdb7d55a839d..d1d1a7b7fa51 100644 --- a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx +++ b/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 { if (width !== prevProps.width) { liveTimer.updateInterval(this); } + } // Updates the response with information from the stream @@ -626,8 +626,7 @@ export class PanelStateWrapper extends PureComponent { 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. -
{panel.title}
+

{panel.title}

) : ( { } } } - -const mapStateToProps = (state: StoreState) => { - return { ...state.fnGlobalState }; -}; -const connector = connect(mapStateToProps); -export const PanelChrome = connector(PanelStateWrapper); diff --git a/public/app/fn-app/create-mfe.ts b/public/app/fn-app/create-mfe.ts index 09c1084dba38..365b12cdd922 100644 --- a/public/app/fn-app/create-mfe.ts +++ b/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, }) ); } diff --git a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx index e861fe9ae154..24f9051077ad 100644 --- a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx +++ b/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,7 +42,6 @@ function mapStateToProps(): MapStateToProps< } export const DashboardPortalComponent: FC = (props) => { - const location = useLocation(); const content = useMemo(() => { if (!props.FNDashboard) { @@ -52,10 +49,7 @@ export const DashboardPortalComponent: FC ); - }, [location, props]); + }, [props]); return {content}; }; diff --git a/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx index 7959f70d54de..26c47528905d 100644 --- a/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx +++ b/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx @@ -69,7 +69,7 @@ export const RenderFNDashboard: FC = (props) => { fnLoader, isLoading }), - [controlsContainer, fnLoader, hiddenVariables, props, queryParams] + [controlsContainer, fnLoader, hiddenVariables, isLoading, props, queryParams] ); return ; diff --git a/public/app/fn-app/utils.tsx b/public/app/fn-app/utils.tsx index 8ad2a580fb66..c7599d2d4916 100644 --- a/public/app/fn-app/utils.tsx +++ b/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 = ({ ID, children }) => { From 1ef994814d83602cca09bfd9fab3de33c5305585 Mon Sep 17 00:00:00 2001 From: Gurinder Singh Date: Thu, 23 Feb 2023 17:05:44 -0500 Subject: [PATCH 2/2] removed extra package --- package.json | 1 - yarn.lock | 36 +----------------------------------- 2 files changed, 1 insertion(+), 36 deletions(-) diff --git a/package.json b/package.json index 26c4f587b9d8..905783b10e3d 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 014b9c58b2c4..35d6b7df3870 100644 --- a/yarn.lock +++ b/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"