Skip to content

Commit ea40d07

Browse files
GurinderRawalaGurinderRawala
committed
mfe fix
1 parent d1bea19 commit ea40d07

File tree

13 files changed

+63
-26
lines changed

13 files changed

+63
-26
lines changed

‎.betterer.results

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// BETTERER RESULTS V2.
2-
//
2+
//
33
// If this file contains merge conflicts, use `betterer merge` to automatically resolve them:
44
// https://phenomnomnominal.github.io/betterer/docs/results-file/#merge
55
//
@@ -3099,9 +3099,6 @@ exports[`better eslint`] = {
30993099
[0, 0, 0, "Do not use any type assertions.", "7"],
31003100
[0, 0, 0, "Unexpected any. Specify a different type.", "8"]
31013101
],
3102-
"public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:5381": [
3103-
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
3104-
],
31053102
"public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx:5381": [
31063103
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
31073104
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],

‎packages/grafana-data/src/types/config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,10 @@ export interface BootData {
147147
light: string;
148148
dark: string;
149149
};
150+
themePaths: {
151+
dark: string;
152+
light: string;
153+
};
150154
}
151155

152156
/**

‎packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,17 @@ export const CustomScrollbar = ({
116116
passedProps.style['WebkitOverflowScrolling'] = 'auto';
117117
}
118118

119-
return <div {...passedProps} style={{ ...passedProps.style, overflow: 'auto' }} className="scrollbar-view" />;
120-
}, []);
119+
return (
120+
<div
121+
{...passedProps}
122+
style={{ ...passedProps.style, overflow: 'auto' }}
123+
className="scrollbar-view"
124+
id={divId}
125+
/>
126+
);
127+
},
128+
[divId]
129+
);
121130

122131
const onScrollStop = useCallback(() => {
123132
ref.current && setScrollTop && setScrollTop(ref.current.getValues());

‎packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { TitleItem } from './TitleItem';
2323
/**
2424
* @internal
2525
*/
26-
export type PanelChromeProps = (AutoSize | FixedDimensions) & (Collapsible | HoverHeader);
26+
export type PanelChromeProps = (AutoSize | FixedDimensions) & (Collapsible | HoverHeader) & { isFNPanel?: boolean };
2727

2828
interface BaseProps {
2929
padding?: PanelPadding;
@@ -134,9 +134,10 @@ export function PanelChrome({
134134
onFocus,
135135
onMouseMove,
136136
onMouseEnter,
137+
isFNPanel,
137138
}: PanelChromeProps) {
138139
const theme = useTheme2();
139-
const styles = useStyles2(getStyles);
140+
const styles = useStyles2(getStyles(isFNPanel));
140141
const panelContentId = useId();
141142
const panelTitleId = useId().replace(/:/g, '_');
142143

@@ -303,7 +304,7 @@ export function PanelChrome({
303304

304305
{headerContent}
305306

306-
{menu && (
307+
{menu && !isFNPanel && (
307308
<PanelMenu
308309
menu={menu}
309310
title={typeof title === 'string' ? title : undefined}
@@ -376,7 +377,7 @@ const getContentStyle = (
376377
return { contentStyle, innerWidth, innerHeight };
377378
};
378379

379-
const getStyles = (theme: GrafanaTheme2) => {
380+
const getStyles = (isFNPanel?: boolean) => (theme: GrafanaTheme2) => {
380381
const { background, borderColor, padding } = theme.components.panel;
381382

382383
return {
@@ -385,7 +386,7 @@ const getStyles = (theme: GrafanaTheme2) => {
385386
backgroundColor: background,
386387
border: `1px solid ${borderColor}`,
387388
position: 'relative',
388-
borderRadius: theme.shape.radius.default,
389+
borderRadius: theme.shape.borderRadius(),
389390
height: '100%',
390391
display: 'flex',
391392
flexDirection: 'column',
@@ -462,6 +463,11 @@ const getStyles = (theme: GrafanaTheme2) => {
462463
display: 'flex',
463464
padding: theme.spacing(0, padding),
464465
minWidth: 0,
466+
...(isFNPanel && {
467+
width: '100%',
468+
textAlign: 'center',
469+
justifyContent: 'center',
470+
}),
465471
'& > h2': {
466472
minWidth: 0,
467473
},

‎public/app/core/internationalization/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const t = (id: string, defaultMessage: string, values?: Record<string, un
7878
}
7979

8080
if (process.env.NODE_ENV === 'development') {
81-
throw new Error('t() was called before i18n was initialized');
81+
// throw new Error('t() was called before i18n was initialized');
8282
}
8383

8484
tFunc = i18n.t;

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

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { debounce } from 'lodash';
22
import { PureComponent } from 'react';
3+
import { connect } from 'react-redux';
34
import { Subscription } from 'rxjs';
45

56
import {
@@ -41,6 +42,7 @@ import { applyFilterFromTable } from 'app/features/variables/adhoc/actions';
4142
import { onUpdatePanelSnapshotData } from 'app/plugins/datasource/grafana/utils';
4243
import { changeSeriesColorConfigFactory } from 'app/plugins/panel/timeseries/overrides/colorSeriesConfigFactory';
4344
import { dispatch } from 'app/store/store';
45+
import { StoreState } from 'app/types';
4446
import { RenderEvent } from 'app/types/events';
4547

4648
import { deleteAnnotation, saveAnnotation, updateAnnotation } from '../../annotations/api';
@@ -71,6 +73,7 @@ export interface Props {
7173
onInstanceStateChange: (value: unknown) => void;
7274
timezone?: string;
7375
hideMenu?: boolean;
76+
isFnDashboard?: boolean;
7477
}
7578

7679
export interface State {
@@ -82,7 +85,7 @@ export interface State {
8285
liveTime?: TimeRange;
8386
}
8487

85-
export class PanelStateWrapper extends PureComponent<Props, State> {
88+
export class PanelStateWrapperDisConnected extends PureComponent<Props, State> {
8689
private readonly timeSrv: TimeSrv = getTimeSrv();
8790
private subs = new Subscription();
8891
private eventFilter: EventFilterOptions = { onlyLocal: true };
@@ -555,7 +558,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
555558
debouncedSetPanelAttention() {}
556559

557560
render() {
558-
const { dashboard, panel, width, height, plugin } = this.props;
561+
const { dashboard, panel, width, height, plugin, isFnDashboard } = this.props;
559562
const { errorMessage, data } = this.state;
560563
const { transparent } = panel;
561564
const panelChromeProps = getPanelChromeProps({ ...this.props, data });
@@ -590,6 +593,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
590593
onFocus={() => this.setPanelAttention()}
591594
onMouseEnter={() => this.setPanelAttention()}
592595
onMouseMove={() => this.debouncedSetPanelAttention()}
596+
isFNPanel={isFnDashboard}
593597
>
594598
{(innerWidth, innerHeight) => (
595599
<>
@@ -611,3 +615,11 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
611615
);
612616
}
613617
}
618+
619+
function mapStateToProps() {
620+
return (state: StoreState) => ({
621+
isFnDashboard: state.fnGlobalState.FNDashboard,
622+
});
623+
}
624+
625+
export const PanelStateWrapper = connect(mapStateToProps)(PanelStateWrapperDisConnected);

‎public/app/features/dashboard/dashgrid/liveTimer.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import { BehaviorSubject } from 'rxjs';
22

33
import { dateMath, dateTime, TimeRange } from '@grafana/data';
44

5-
import { PanelStateWrapper } from './PanelStateWrapper';
5+
import { PanelStateWrapperDisConnected as Wrapper } from './PanelStateWrapper';
6+
7+
type PanelStateWrapper = Wrapper;
8+
69
// target is 20hz (50ms), but we poll at 100ms to smooth out jitter
710
const interval = 100;
811

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ class createMfe {
183183
createMfe.removeThemeLinks(createMfe.toggleTheme(mode));
184184

185185
const newCssLink = createMfe.styleSheetLink;
186-
newCssLink.href = config.bootData.assets[mode];
186+
newCssLink.href = config.bootData.themePaths[mode];
187187
document.body.appendChild(newCssLink);
188188

189189
createMfe.logger.info('Successfully loaded theme.', { mode });

‎public/app/fn_app.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,14 @@ import {
3434
setAppEvents,
3535
setPluginExtensionsHook,
3636
setPluginComponentHook,
37+
setReturnToPreviousHook,
38+
setChromeHeaderHeightHook,
3739
} from '@grafana/runtime';
3840
import { setPanelDataErrorView } from '@grafana/runtime/src/components/PanelDataErrorView';
3941
import { setPanelRenderer } from '@grafana/runtime/src/components/PanelRenderer';
4042
import { setPluginPage } from '@grafana/runtime/src/components/PluginPage';
4143
import { getScrollbarWidth } from '@grafana/ui';
42-
import config, { Settings } from 'app/core/config';
44+
import config, { Settings, updateConfig } from 'app/core/config';
4345
import { arrayMove } from 'app/core/utils/arrayMove';
4446
import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
4547

@@ -49,7 +51,7 @@ import appEvents from './core/app_events';
4951
import { AppChromeService } from './core/components/AppChrome/AppChromeService';
5052
import { getAllOptionEditors, getAllStandardFieldConfigs } from './core/components/OptionsUI/registry';
5153
import { PluginPage } from './core/components/Page/PluginPage';
52-
import { GrafanaContextType } from './core/context/GrafanaContext';
54+
import { GrafanaContextType, useChromeHeaderHeight, useReturnToPreviousInternal } from './core/context/GrafanaContext';
5355
import { initializeI18n } from './core/internationalization';
5456
import { interceptLinkClicks } from './core/navigation/patch/interceptLinkClicks';
5557
import { NewFrontendAssetsChecker } from './core/services/NewFrontendAssetsChecker';
@@ -82,6 +84,7 @@ import { preloadPlugins } from './features/plugins/pluginPreloader';
8284
import { QueryRunner } from './features/query/state/QueryRunner';
8385
import { runRequest } from './features/query/state/runRequest';
8486
import { initWindowRuntime } from './features/runtime/init';
87+
import { initializeScopes } from './features/scopes';
8588
import { variableAdapters } from './features/variables/adapters';
8689
import { createAdHocVariableAdapter } from './features/variables/adhoc/adapter';
8790
import { createConstantVariableAdapter } from './features/variables/constant/adapter';
@@ -118,6 +121,7 @@ export class GrafanaApp {
118121
parent.postMessage('GrafanaAppInit', '*');
119122

120123
const initI18nPromise = initializeI18n(config.bootData.user.language);
124+
initI18nPromise.then(({ language }) => updateConfig({ language }));
121125

122126
backendSrv.setGrafanaPrefix(true);
123127
setBackendSrv(backendSrv);
@@ -242,6 +246,11 @@ export class GrafanaApp {
242246
config,
243247
newAssetsChecker,
244248
};
249+
250+
setReturnToPreviousHook(useReturnToPreviousInternal);
251+
setChromeHeaderHeightHook(useChromeHeaderHeight);
252+
253+
initializeScopes();
245254
} catch (error) {
246255
console.error('Failed to start Grafana', error);
247256
window.__grafana_load_failed();

‎public/app/fn_dashboard.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ declare global {
2020
}
2121

2222
// config.isPublicDashboardView = false;
23-
config.bootData.assets = window.fnData.assets;
23+
config.bootData.themePaths = window.fnData.assets;
2424

2525
export const { bootstrap, mount, unmount, update, afterMount, afterUnmount, beforeLoad, beforeMount, beforeUnmount } =
2626
createMfe.create(FNDashboard);

‎public/app/types/dashboard.ts

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export interface DashboardMeta {
6565
hasUnsavedFolderChange?: boolean;
6666
annotationsPermissions?: AnnotationsPermissions;
6767
publicDashboardEnabled?: boolean;
68+
publicDashboardAccessToken?: string;
6869
dashboardNotFound?: boolean;
6970
isEmbedded?: boolean;
7071
isNew?: boolean;

‎public/microfrontends/fn_dashboard/index.html

+2-6
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,9 @@
1717
</script>
1818

1919

20-
<script nonce="" src="../../../public/build/runtime~fn_dashboard.c83a06ddbc89c9abfa28.js" type="text/javascript"></script>
20+
<script nonce="" src="../../../public/build/runtime~fn_dashboard.2513260d3bb1ec1df89c.js" type="text/javascript"></script>
2121

22-
<script nonce="" src="../../../public/build/fn_dashboard.64bed42e59e41ca4843a.js" type="text/javascript"></script>
23-
24-
<script nonce="" src="../../../public/build/runtime~swagger.bc7e13f08c957c6b1db6.js" type="text/javascript"></script>
25-
26-
<script nonce="" src="../../../public/build/swagger.f3d428838e3cf78b5d79.js" type="text/javascript"></script>
22+
<script nonce="" src="../../../public/build/fn_dashboard.f2d6b81094397ad82233.js" type="text/javascript"></script>
2723

2824
</body>
2925
</html>

‎scripts/webpack/webpack.dev.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ module.exports = (env = {}) => {
125125
template: path.resolve(__dirname, '../../public/views/index-microfrontend-template.html'),
126126
inject: false,
127127
chunksSortMode: 'none',
128-
excludeChunks: ['dark', 'light', 'app'],
128+
excludeChunks: ['dark', 'light', 'app', 'swagger'],
129129
}),
130130
new HTMLWebpackCSSChunks(),
131131
new DefinePlugin({

0 commit comments

Comments
 (0)