Skip to content

Commit 4a5b864

Browse files
kaydelaneydprokop
kaydelaney
and
dprokop
authored
ShareModal: Implement panel embed tab for scenes (grafana#77062)
* ShareModal: Implement panel embed tab for scenes * Fix url generation * Locale --------- Co-authored-by: Dominik Prokop <[email protected]>
1 parent 2598ff7 commit 4a5b864

File tree

10 files changed

+157
-94
lines changed

10 files changed

+157
-94
lines changed

‎public/app/features/dashboard-scene/sharing/ShareModal.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getDashboardSceneFor } from '../utils/utils';
1111

1212
import { ShareExportTab } from './ShareExportTab';
1313
import { ShareLinkTab } from './ShareLinkTab';
14+
import { SharePanelEmbedTab } from './SharePanelEmbedTab';
1415
import { ShareSnapshotTab } from './ShareSnapshotTab';
1516
import { ModalSceneObjectLike, SceneShareTab } from './types';
1617

@@ -49,6 +50,10 @@ export class ShareModal extends SceneObjectBase<ShareModalState> implements Moda
4950
tabs.push(new ShareSnapshotTab({ panelRef, dashboardRef, modalRef: this.getRef() }));
5051
}
5152

53+
if (panelRef) {
54+
tabs.push(new SharePanelEmbedTab({ panelRef, dashboardRef }));
55+
}
56+
5257
this.setState({ tabs });
5358

5459
// if (panel) {

‎public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
3+
import { TimeRange } from '@grafana/data';
4+
import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
5+
import { t } from 'app/core/internationalization';
6+
import { ShareEmbed } from 'app/features/dashboard/components/ShareModal/ShareEmbed';
7+
import { buildParams } from 'app/features/dashboard/components/ShareModal/utils';
8+
9+
import { DashboardScene } from '../scene/DashboardScene';
10+
import { getDashboardUrl } from '../utils/urlBuilders';
11+
import { getPanelIdForVizPanel } from '../utils/utils';
12+
13+
import { SceneShareTabState } from './types';
14+
15+
export interface SharePanelEmbedTabState extends SceneShareTabState {
16+
panelRef: SceneObjectRef<VizPanel>;
17+
dashboardRef: SceneObjectRef<DashboardScene>;
18+
}
19+
20+
export class SharePanelEmbedTab extends SceneObjectBase<SharePanelEmbedTabState> {
21+
static Component = SharePanelEmbedTabRenderer;
22+
23+
public constructor(state: SharePanelEmbedTabState) {
24+
super(state);
25+
}
26+
27+
public getTabLabel() {
28+
return t('share-modal.tab-title.panel-embed', 'Embed');
29+
}
30+
}
31+
32+
function SharePanelEmbedTabRenderer({ model }: SceneComponentProps<SharePanelEmbedTab>) {
33+
const { panelRef, dashboardRef } = model.useState();
34+
const p = panelRef.resolve();
35+
36+
const dash = dashboardRef.resolve();
37+
const { uid: dashUid } = dash.useState();
38+
const id = getPanelIdForVizPanel(p);
39+
const timeRangeState = sceneGraph.getTimeRange(p);
40+
41+
return (
42+
<ShareEmbed
43+
panel={{
44+
id,
45+
timeFrom:
46+
typeof timeRangeState.state.value.raw.from === 'string' ? timeRangeState.state.value.raw.from : undefined,
47+
}}
48+
range={timeRangeState.state.value}
49+
dashboard={{ uid: dashUid ?? '', time: timeRangeState.state.value }}
50+
buildIframe={buildIframe}
51+
/>
52+
);
53+
}
54+
55+
function buildIframe(
56+
useCurrentTimeRange: boolean,
57+
dashboardUid: string,
58+
selectedTheme?: string,
59+
panel?: { timeFrom?: string; id: number },
60+
range?: TimeRange
61+
) {
62+
const params = buildParams({ useCurrentTimeRange, selectedTheme, panel, range });
63+
const panelId = params.get('editPanel') ?? params.get('viewPanel') ?? '';
64+
params.set('panelId', panelId);
65+
params.delete('editPanel');
66+
params.delete('viewPanel');
67+
68+
const soloUrl = getDashboardUrl({
69+
absolute: true,
70+
soloRoute: true,
71+
uid: dashboardUid,
72+
currentQueryParams: params.toString(),
73+
});
74+
return `<iframe src="${soloUrl}" width="450" height="200" frameborder="0"></iframe>`;
75+
}

‎public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx‎

Lines changed: 63 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,85 @@
1-
import React, { FormEvent, PureComponent } from 'react';
1+
import React, { FormEvent, useEffect, useState } from 'react';
2+
import { useEffectOnce } from 'react-use';
23

3-
import { reportInteraction } from '@grafana/runtime/src';
4+
import { RawTimeRange, TimeRange } from '@grafana/data';
5+
import { reportInteraction } from '@grafana/runtime';
46
import { ClipboardButton, Field, Modal, Switch, TextArea } from '@grafana/ui';
57
import { t, Trans } from 'app/core/internationalization';
68

79
import { ThemePicker } from './ThemePicker';
810
import { ShareModalTabProps } from './types';
911
import { buildIframeHtml } from './utils';
1012

11-
interface Props extends ShareModalTabProps {}
12-
13-
interface State {
14-
useCurrentTimeRange: boolean;
15-
selectedTheme: string;
16-
iframeHtml: string;
13+
interface Props extends Omit<ShareModalTabProps, 'panel' | 'dashboard'> {
14+
panel?: { timeFrom?: string; id: number };
15+
dashboard: { uid: string; time: RawTimeRange };
16+
range?: TimeRange;
17+
buildIframe?: typeof buildIframeHtml;
1718
}
1819

19-
export class ShareEmbed extends PureComponent<Props, State> {
20-
constructor(props: Props) {
21-
super(props);
22-
this.state = {
23-
useCurrentTimeRange: true,
24-
selectedTheme: 'current',
25-
iframeHtml: '',
26-
};
27-
}
20+
export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeHtml }: Props) {
21+
const [useCurrentTimeRange, setUseCurrentTimeRange] = useState(true);
22+
const [selectedTheme, setSelectedTheme] = useState('current');
23+
const [iframeHtml, setIframeHtml] = useState('');
2824

29-
componentDidMount() {
25+
useEffectOnce(() => {
3026
reportInteraction('grafana_dashboards_embed_share_viewed');
31-
this.buildIframeHtml();
32-
}
33-
34-
buildIframeHtml = () => {
35-
const { panel, dashboard } = this.props;
36-
const { useCurrentTimeRange, selectedTheme } = this.state;
37-
38-
const iframeHtml = buildIframeHtml(useCurrentTimeRange, dashboard.uid, selectedTheme, panel);
39-
this.setState({ iframeHtml });
40-
};
27+
});
4128

42-
onIframeHtmlChange = (event: FormEvent<HTMLTextAreaElement>) => {
43-
this.setState({ iframeHtml: event.currentTarget.value });
44-
};
29+
useEffect(() => {
30+
const newIframeHtml = buildIframe(useCurrentTimeRange, dashboard.uid, selectedTheme, panel, range);
31+
setIframeHtml(newIframeHtml);
32+
}, [selectedTheme, useCurrentTimeRange, dashboard, panel, range, buildIframe]);
4533

46-
onUseCurrentTimeRangeChange = () => {
47-
this.setState(
48-
{
49-
useCurrentTimeRange: !this.state.useCurrentTimeRange,
50-
},
51-
this.buildIframeHtml
52-
);
34+
const onIframeHtmlChange = (event: FormEvent<HTMLTextAreaElement>) => {
35+
setIframeHtml(event.currentTarget.value);
5336
};
5437

55-
onThemeChange = (value: string) => {
56-
this.setState({ selectedTheme: value }, this.buildIframeHtml);
38+
const onUseCurrentTimeRangeChange = () => {
39+
setUseCurrentTimeRange((useCurTimeRange) => !useCurTimeRange);
5740
};
5841

59-
getIframeHtml = () => {
60-
return this.state.iframeHtml;
42+
const onThemeChange = (value: string) => {
43+
setSelectedTheme(value);
6144
};
6245

63-
render() {
64-
const { useCurrentTimeRange, selectedTheme, iframeHtml } = this.state;
65-
const isRelativeTime = this.props.dashboard ? this.props.dashboard.time.to === 'now' : false;
66-
67-
const timeRangeDescription = isRelativeTime
68-
? t(
69-
'share-modal.embed.time-range-description',
70-
'Transforms the current relative time range to an absolute time range'
71-
)
72-
: '';
46+
const isRelativeTime = dashboard.time.to === 'now';
47+
const timeRangeDescription = isRelativeTime
48+
? t(
49+
'share-modal.embed.time-range-description',
50+
'Transforms the current relative time range to an absolute time range'
51+
)
52+
: '';
7353

74-
return (
75-
<>
76-
<p className="share-modal-info-text">
77-
<Trans i18nKey="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
78-
</p>
79-
<Field label={t('share-modal.embed.time-range', 'Current time range')} description={timeRangeDescription}>
80-
<Switch
81-
id="share-current-time-range"
82-
value={useCurrentTimeRange}
83-
onChange={this.onUseCurrentTimeRangeChange}
84-
/>
85-
</Field>
86-
<ThemePicker selectedTheme={selectedTheme} onChange={this.onThemeChange} />
87-
<Field
88-
label={t('share-modal.embed.html', 'Embed HTML')}
89-
description={t(
90-
'share-modal.embed.html-description',
91-
'The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled, the user viewing that page need to be signed into Grafana for the graph to load.'
92-
)}
93-
>
94-
<TextArea
95-
data-testid="share-embed-html"
96-
id="share-panel-embed-embed-html-textarea"
97-
rows={5}
98-
value={iframeHtml}
99-
onChange={this.onIframeHtmlChange}
100-
/>
101-
</Field>
102-
<Modal.ButtonRow>
103-
<ClipboardButton icon="copy" variant="primary" getText={this.getIframeHtml}>
104-
<Trans i18nKey="share-modal.embed.copy">Copy to clipboard</Trans>
105-
</ClipboardButton>
106-
</Modal.ButtonRow>
107-
</>
108-
);
109-
}
54+
return (
55+
<>
56+
<p className="share-modal-info-text">
57+
<Trans i18nKey="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
58+
</p>
59+
<Field label={t('share-modal.embed.time-range', 'Current time range')} description={timeRangeDescription}>
60+
<Switch id="share-current-time-range" value={useCurrentTimeRange} onChange={onUseCurrentTimeRangeChange} />
61+
</Field>
62+
<ThemePicker selectedTheme={selectedTheme} onChange={onThemeChange} />
63+
<Field
64+
label={t('share-modal.embed.html', 'Embed HTML')}
65+
description={t(
66+
'share-modal.embed.html-description',
67+
'The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled, the user viewing that page need to be signed into Grafana for the graph to load.'
68+
)}
69+
>
70+
<TextArea
71+
data-testid="share-embed-html"
72+
id="share-panel-embed-embed-html-textarea"
73+
rows={5}
74+
value={iframeHtml}
75+
onChange={onIframeHtmlChange}
76+
/>
77+
</Field>
78+
<Modal.ButtonRow>
79+
<ClipboardButton icon="copy" variant="primary" getText={() => iframeHtml}>
80+
<Trans i18nKey="share-modal.embed.copy">Copy to clipboard</Trans>
81+
</ClipboardButton>
82+
</Modal.ButtonRow>
83+
</>
84+
);
11085
}

‎public/app/features/dashboard/components/ShareModal/utils.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { PanelModel } from '../../state';
88
export interface BuildParamsArgs {
99
useCurrentTimeRange: boolean;
1010
selectedTheme?: string;
11-
panel?: PanelModel;
11+
panel?: { timeFrom?: string; id: number };
1212
search?: string;
1313
range?: TimeRange;
1414
orgId?: number;
@@ -82,10 +82,11 @@ export function buildSoloUrl(
8282
useCurrentTimeRange: boolean,
8383
dashboardUid: string,
8484
selectedTheme?: string,
85-
panel?: PanelModel
85+
panel?: { timeFrom?: string; id: number },
86+
range?: TimeRange
8687
) {
8788
const baseUrl = buildBaseUrl();
88-
const params = buildParams({ useCurrentTimeRange, selectedTheme, panel });
89+
const params = buildParams({ useCurrentTimeRange, selectedTheme, panel, range });
8990

9091
let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/');
9192
soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/');
@@ -121,10 +122,11 @@ export function buildIframeHtml(
121122
useCurrentTimeRange: boolean,
122123
dashboardUid: string,
123124
selectedTheme?: string,
124-
panel?: PanelModel
125+
panel?: { timeFrom?: string; id: number },
126+
range?: TimeRange
125127
) {
126-
let soloUrl = buildSoloUrl(useCurrentTimeRange, dashboardUid, selectedTheme, panel);
127-
return '<iframe src="' + soloUrl + '" width="450" height="200" frameborder="0"></iframe>';
128+
let soloUrl = buildSoloUrl(useCurrentTimeRange, dashboardUid, selectedTheme, panel, range);
129+
return `<iframe src="${soloUrl}" width="450" height="200" frameborder="0"></iframe>`;
128130
}
129131

130132
export function getLocalTimeZone() {

‎public/locales/de-DE/grafana.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1090,6 +1090,7 @@
10901090
"export": "Exportieren",
10911091
"library-panel": "Bibliotheks-Panel",
10921092
"link": "Link",
1093+
"panel-embed": "",
10931094
"snapshot": "Schnappschuss"
10941095
},
10951096
"theme-picker": {

‎public/locales/en-US/grafana.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1090,6 +1090,7 @@
10901090
"export": "Export",
10911091
"library-panel": "Library panel",
10921092
"link": "Link",
1093+
"panel-embed": "Embed",
10931094
"snapshot": "Snapshot"
10941095
},
10951096
"theme-picker": {

‎public/locales/es-ES/grafana.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1096,6 +1096,7 @@
10961096
"export": "Exportar",
10971097
"library-panel": "Panel de librería",
10981098
"link": "Enlace",
1099+
"panel-embed": "",
10991100
"snapshot": "Instantánea"
11001101
},
11011102
"theme-picker": {

‎public/locales/fr-FR/grafana.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1096,6 +1096,7 @@
10961096
"export": "Exporter",
10971097
"library-panel": "Panneau de bibliothèque",
10981098
"link": "Lien",
1099+
"panel-embed": "",
10991100
"snapshot": "Instantané"
11001101
},
11011102
"theme-picker": {

‎public/locales/pseudo-LOCALE/grafana.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1090,6 +1090,7 @@
10901090
"export": "Ēχpőřŧ",
10911091
"library-panel": "Ŀįþřäřy päʼnęľ",
10921092
"link": "Ŀįʼnĸ",
1093+
"panel-embed": "Ēmþęđ",
10931094
"snapshot": "Ŝʼnäpşĥőŧ"
10941095
},
10951096
"theme-picker": {

‎public/locales/zh-Hans/grafana.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,6 +1084,7 @@
10841084
"export": "导出",
10851085
"library-panel": "库面板",
10861086
"link": "链接",
1087+
"panel-embed": "",
10871088
"snapshot": "快照"
10881089
},
10891090
"theme-picker": {

0 commit comments

Comments
 (0)