Skip to content

Commit db339b8

Browse files
SpikatrixSpikatrix
authored
Add fnLoader in grafana instead of prop from parent mfe (#83)
1 parent 58a3b05 commit db339b8

File tree

8 files changed

+84
-13
lines changed

8 files changed

+84
-13
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,7 @@
354354
"kbar": "0.1.0-beta.40",
355355
"lodash": "4.17.21",
356356
"logfmt": "^1.3.2",
357+
"lottie-react": "^2.4.0",
357358
"lru-cache": "7.17.0",
358359
"lru-memoize": "^1.1.0",
359360
"memoize-one": "6.0.0",

‎public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Box, Typography, type BoxProps } from '@mui/material';
2+
import Lottie, { type LottieComponentProps } from 'lottie-react';
3+
import React, { type ReactNode, type FC, type HTMLAttributes } from 'react';
4+
5+
import logoUrl from './fn-logo.svg';
6+
import logoLoader from './fn-lottie-loader.json';
7+
8+
export type FnLoaderProps = {
9+
outerContainerProps?: Omit<BoxProps, 'children'>;
10+
innerContainerProps?: Omit<BoxProps, 'children'>;
11+
lottieProps?: LottieComponentProps;
12+
imageProps?: HTMLAttributes<HTMLImageElement>;
13+
text?: ReactNode;
14+
};
15+
16+
export const FnLoader: FC<FnLoaderProps> = ({
17+
outerContainerProps,
18+
innerContainerProps,
19+
lottieProps,
20+
imageProps,
21+
text,
22+
}) => (
23+
<Box
24+
display="flex"
25+
justifyContent="center"
26+
alignItems="center"
27+
flexDirection="column"
28+
paddingTop="150px"
29+
{...outerContainerProps}
30+
>
31+
<img src={logoUrl} alt={'FluxNinja logo'} style={{ transform: 'scale(4)' }} {...imageProps} />
32+
<Box marginTop="100px" {...innerContainerProps}>
33+
<Lottie
34+
animationData={logoLoader}
35+
aria-label="Loading..."
36+
style={{ maxWidth: '150px', margin: '0 auto' }}
37+
{...lottieProps}
38+
/>
39+
</Box>
40+
{typeof text === 'string' ? <Typography>{text}</Typography> : text || null}
41+
</Box>
42+
);

‎public/app/features/dashboard/components/DashboardLoading/fn-logo.svg

+9
Loading

‎public/app/features/dashboard/components/DashboardLoading/fn-lottie-loader.json

+1
Large diffs are not rendered by default.

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css, cx } from '@emotion/css';
2-
import { isUndefined, isEmpty, noop } from 'lodash';
3-
import React, { PureComponent, } from 'react';
2+
import { isEmpty, noop } from 'lodash';
3+
import React, { PureComponent } from 'react';
44
import DropZone, { FileRejection, DropEvent, ErrorCode } from 'react-dropzone';
55
import { connect, ConnectedProps, MapDispatchToProps, MapStateToProps } from 'react-redux';
66

@@ -42,7 +42,7 @@ import { cancelVariables, templateVarsChangedInUrl } from '../../variables/state
4242
import { findTemplateVarChanges } from '../../variables/utils';
4343
import { DashNav } from '../components/DashNav';
4444
import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
45-
import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
45+
import { FnLoader } from '../components/DashboardLoading/FnLoader';
4646
import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
4747
import { DashboardSettings } from '../components/DashboardSettings';
4848
import { PanelInspector } from '../components/Inspector/PanelInspector';
@@ -118,8 +118,7 @@ type OwnProps = {
118118
isPublic?: boolean;
119119
controlsContainer?: string | null;
120120
version?: FNDashboardProps['version'];
121-
fnLoader?: FNDashboardProps['fnLoader'];
122-
isLoading?: FNDashboardProps['isLoading']
121+
isLoading?: FNDashboardProps['isLoading'];
123122
};
124123

125124
export type DashboardPageProps = OwnProps &
@@ -444,17 +443,18 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
444443
}
445444

446445
render() {
447-
const { dashboard, initError, queryParams, isPublic, FNDashboard, fnLoader, isLoading = noop } = this.props;
446+
const { dashboard, initError, queryParams, isPublic, FNDashboard, isLoading = noop } = this.props;
448447
const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state;
449448
const kioskMode = FNDashboard ? KioskMode.FN : !isPublic ? getKioskMode(this.props.queryParams) : KioskMode.Full;
450449

451450
if (!dashboard || isEmpty(queryParams)) {
452-
isLoading(true)
451+
isLoading(true);
453452

454-
return isUndefined(fnLoader) ? <DashboardLoading initPhase={this.props.initPhase} />: <>{fnLoader}</>;
453+
// return isUndefined(fnLoader) ? <DashboardLoading initPhase={this.props.initPhase} />: <>{fnLoader}</>;
454+
return <FnLoader />;
455455
}
456456

457-
isLoading(false)
457+
isLoading(false);
458458

459459
const inspectPanel = this.getInspectPanel();
460460
const showSubMenu = !editPanel && !this.props.queryParams.editview;

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const DEFAULT_DASHBOARD_PAGE_PROPS: Pick<DashboardPageProps, 'history' | 'route'
2727
};
2828

2929
export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
30-
const { queryParams, controlsContainer, setErrors, fnLoader, hiddenVariables, isLoading } = props;
30+
const { queryParams, controlsContainer, setErrors, hiddenVariables, isLoading } = props;
3131

3232
const firstError = useSelector((state: StoreState) => {
3333
const { appNotifications } = state;
@@ -66,10 +66,9 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
6666
queryParams,
6767
hiddenVariables,
6868
controlsContainer,
69-
fnLoader,
7069
isLoading
7170
}),
72-
[controlsContainer, fnLoader, hiddenVariables, isLoading, props, queryParams]
71+
[controlsContainer, hiddenVariables, isLoading, props, queryParams]
7372
);
7473

7574
return <DashboardPage {...dashboardPageProps} />;

‎public/app/fn-app/types.ts

-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export interface FNDashboardProps {
2626
mode: GrafanaThemeType.Dark | GrafanaThemeType.Light;
2727
queryParams: ParsedQuery<string>;
2828
fnError?: ReactNode;
29-
fnLoader?: ReactNode;
3029
pageTitle?: string;
3130
controlsContainer: string;
3231
isLoading: (isLoading: boolean) => void;

‎yarn.lock

+20
Original file line numberDiff line numberDiff line change
@@ -20226,6 +20226,7 @@ __metadata:
2022620226
lint-staged: 13.1.2
2022720227
lodash: 4.17.21
2022820228
logfmt: ^1.3.2
20229+
lottie-react: ^2.4.0
2022920230
lru-cache: 7.17.0
2023020231
lru-memoize: ^1.1.0
2023120232
memoize-one: 6.0.0
@@ -24825,6 +24826,25 @@ __metadata:
2482524826
languageName: node
2482624827
linkType: hard
2482724828

24829+
"lottie-react@npm:^2.4.0":
24830+
version: 2.4.0
24831+
resolution: "lottie-react@npm:2.4.0"
24832+
dependencies:
24833+
lottie-web: ^5.10.2
24834+
peerDependencies:
24835+
react: ^16.8.0 || ^17.0.0 || ^18.0.0
24836+
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
24837+
checksum: e9ea4a89be90a29bde4a83956f76a80d1f8031882f18ea38ef5271d2aafd8e68348ae6297f185ed85b149ca4896fe33aee7faf9780b88a1b289b8e146f477448
24838+
languageName: node
24839+
linkType: hard
24840+
24841+
"lottie-web@npm:^5.10.2":
24842+
version: 5.12.2
24843+
resolution: "lottie-web@npm:5.12.2"
24844+
checksum: af5bc3bc405fd760de8b17a36158d5a8c3e8c586c711d0c63681ddf056b65bc6b54ea36b1fcad782fb02dbe12e696a40e0ba72daf41b8f10ab5b5d1113793636
24845+
languageName: node
24846+
linkType: hard
24847+
2482824848
"loud-rejection@npm:^1.0.0":
2482924849
version: 1.6.0
2483024850
resolution: "loud-rejection@npm:1.6.0"

0 commit comments

Comments
 (0)