Skip to content

N
nexpie-grafana-theme
Commit b40b134e by Oscar Kilhed Committed by GitHub
Options

Dashboard: Remove template variables option from ShareModal (#30395) 

* Dashboard: Remove template variables option and update style of ShareModal (#29191)

* Simplified design

* Changed to text area component for embed and replaced select with RadioButtonGroup

* Use primitive string instead of SelectableValue in the states

* Changed embed html TextArea to writable and added a copy to clipboard button

* Added some space between the buttons on the snapshot tab and removed unnessecary FieldSet elements

* Add descriptions to the tabs that were missing descriptions

* Capitalization of theme names

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
parent 3cf47b24
Showing with 109 additions and 223 deletions
packages/grafana-ui/src/components/Modal/ModalTabContent.tsx
import React from 'react'; import React from 'react';
import { cx } from 'emotion';
import { IconName } from '../../types'; import { IconName } from '../../types';
import { Icon } from '../Icon/Icon';
interface Props { interface Props {
/** @deprecated */
icon?: IconName; icon?: IconName;
/** @deprecated */
iconClass?: string; iconClass?: string;
} }
export const ModalTabContent: React.FC<Props> = ({ icon, iconClass, children }) => { /** @internal */
export const ModalTabContent: React.FC<Props> = ({ children }) => {
return ( return (
<div className="share-modal-body"> <div className="share-modal-body">
<div className="share-modal-header"> <div className="share-modal-header">
{icon && <Icon name={icon} size="xxl" className={cx(iconClass, 'share-modal-big-icon')} />}
<div className="share-modal-content">{children}</div> <div className="share-modal-content">{children}</div>
</div> </div>
</div> </div>
......
public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
import React, { PureComponent } from 'react'; import React, { FormEvent, PureComponent } from 'react';
import { Select, Switch, Icon, InlineField } from '@grafana/ui'; import { RadioButtonGroup, Switch, Field, TextArea, Icon, ClipboardButton } from '@grafana/ui';
import { SelectableValue } from '@grafana/data'; import { SelectableValue, AppEvents } from '@grafana/data';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { appEvents } from 'app/core/core';
import { buildIframeHtml } from './utils'; import { buildIframeHtml } from './utils';
const themeOptions: Array<SelectableValue<string>> = [ const themeOptions: Array<SelectableValue<string>> = [
{ label: 'current', value: 'current' }, { label: 'Current', value: 'current' },
{ label: 'dark', value: 'dark' }, { label: 'Dark', value: 'dark' },
{ label: 'light', value: 'light' }, { label: 'Light', value: 'light' },
]; ];
interface Props { interface Props {
...@@ -17,8 +18,7 @@ interface Props { ...@@ -17,8 +18,7 @@ interface Props {
interface State { interface State {
useCurrentTimeRange: boolean; useCurrentTimeRange: boolean;
includeTemplateVars: boolean; selectedTheme: string;
selectedTheme: SelectableValue<string>;
iframeHtml: string; iframeHtml: string;
} }
...@@ -27,8 +27,7 @@ export class ShareEmbed extends PureComponent<Props, State> { ...@@ -27,8 +27,7 @@ export class ShareEmbed extends PureComponent<Props, State> {
super(props); super(props);
this.state = { this.state = {
useCurrentTimeRange: true, useCurrentTimeRange: true,
includeTemplateVars: true, selectedTheme: 'current',
selectedTheme: themeOptions[0],
iframeHtml: '', iframeHtml: '',
}; };
} }
...@@ -39,12 +38,16 @@ export class ShareEmbed extends PureComponent<Props, State> { ...@@ -39,12 +38,16 @@ export class ShareEmbed extends PureComponent<Props, State> {
buildIframeHtml = () => { buildIframeHtml = () => {
const { panel } = this.props; const { panel } = this.props;
const { useCurrentTimeRange, includeTemplateVars, selectedTheme } = this.state; const { useCurrentTimeRange, selectedTheme } = this.state;
const iframeHtml = buildIframeHtml(useCurrentTimeRange, includeTemplateVars, selectedTheme.value, panel); const iframeHtml = buildIframeHtml(useCurrentTimeRange, selectedTheme, panel);
this.setState({ iframeHtml }); this.setState({ iframeHtml });
}; };
onIframeHtmlChange = (event: FormEvent<HTMLTextAreaElement>) => {
this.setState({ iframeHtml: event.currentTarget.value });
};
onUseCurrentTimeRangeChange = () => { onUseCurrentTimeRangeChange = () => {
this.setState( this.setState(
{ {
...@@ -54,61 +57,50 @@ export class ShareEmbed extends PureComponent<Props, State> { ...@@ -54,61 +57,50 @@ export class ShareEmbed extends PureComponent<Props, State> {
); );
}; };
onIncludeTemplateVarsChange = () => { onThemeChange = (value: string) => {
this.setState( this.setState({ selectedTheme: value }, this.buildIframeHtml);
{
includeTemplateVars: !this.state.includeTemplateVars,
},
this.buildIframeHtml
);
}; };
onThemeChange = (value: SelectableValue<string>) => { onIframeHtmlCopy = () => {
this.setState( appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']);
{ };
selectedTheme: value,
}, getIframeHtml = () => {
this.buildIframeHtml return this.state.iframeHtml;
);
}; };
render() { render() {
const { useCurrentTimeRange, includeTemplateVars, selectedTheme, iframeHtml } = this.state; const { useCurrentTimeRange, selectedTheme, iframeHtml } = this.state;
const isRelativeTime = this.props.dashboard ? this.props.dashboard.time.to === 'now' : false;
return ( return (
<div className="share-modal-body"> <div className="share-modal-body">
<div className="share-modal-header"> <div className="share-modal-header">
<Icon name="link" className="share-modal-big-icon" size="xxl" />
<div className="share-modal-content"> <div className="share-modal-content">
<div className="gf-form-group"> <p className="share-modal-info-text">Generate HTML for embedding an iframe with this panel.</p>
<InlineField labelWidth={24} label="Current time range"> <Field
label="Current time range"
description={isRelativeTime ? 'Transforms the current relative time range to an absolute time range' : ''}
>
<Switch <Switch
id="share-current-time-range" id="share-current-time-range"
value={useCurrentTimeRange} value={useCurrentTimeRange}
onChange={this.onUseCurrentTimeRangeChange} onChange={this.onUseCurrentTimeRangeChange}
/> />
</InlineField> </Field>
<InlineField labelWidth={24} label="Template variables"> <Field label="Theme">
<Switch <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
id="share-template-variables" </Field>
value={includeTemplateVars} <Field
onChange={this.onIncludeTemplateVarsChange} label="Embed html"
/> description="The html code below can be pasted and included in another web page. Unless anonymous access is enabled,
</InlineField> the user viewing that page need to be signed into grafana for the graph to load."
<InlineField labelWidth={24} label="Theme"> >
<Select width={20} options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} /> <TextArea rows={5} value={iframeHtml} onChange={this.onIframeHtmlChange}></TextArea>
</InlineField> </Field>
</div> <ClipboardButton variant="primary" getText={this.getIframeHtml} onClipboardCopy={this.onIframeHtmlCopy}>
<p className="share-modal-info-text"> <Icon name="copy" /> Copy
The html code below can be pasted and included in another web page. Unless anonymous access is enabled, </ClipboardButton>
the user viewing that page need to be signed into grafana for the graph to load.
</p>
<div className="gf-form-group gf-form--grow">
<div className="gf-form">
<textarea rows={5} data-share-panel-url className="gf-form-input" defaultValue={iframeHtml}></textarea>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
public/app/features/dashboard/components/ShareModal/ShareExport.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { Button, InlineField, Switch, Icon } from '@grafana/ui'; import { Button, Field, Switch } from '@grafana/ui';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { DashboardExporter } from 'app/features/dashboard/components/DashExportModal'; import { DashboardExporter } from 'app/features/dashboard/components/DashExportModal';
import { appEvents } from 'app/core/core'; import { appEvents } from 'app/core/core';
...@@ -90,11 +90,11 @@ export class ShareExport extends PureComponent<Props, State> { ...@@ -90,11 +90,11 @@ export class ShareExport extends PureComponent<Props, State> {
return ( return (
<div className="share-modal-body"> <div className="share-modal-body">
<div className="share-modal-header"> <div className="share-modal-header">
<Icon name="cloud-upload" size="xxl" className="share-modal-big-icon" />
<div className="share-modal-content"> <div className="share-modal-content">
<InlineField labelWidth={32} label="Export for sharing externally"> <p className="share-modal-info-text">Export this dashboard.</p>
<Field label="Export for sharing externally">
<Switch value={shareExternally} onChange={this.onShareExternallyChange} /> <Switch value={shareExternally} onChange={this.onShareExternallyChange} />
</InlineField> </Field>
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<Button variant="primary" onClick={this.onSaveAsFile}> <Button variant="primary" onClick={this.onSaveAsFile}>
Save to file Save to file
......
public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
...@@ -156,7 +156,7 @@ describe('ShareModal', () => { ...@@ -156,7 +156,7 @@ describe('ShareModal', () => {
it('should add theme when specified', async () => { it('should add theme when specified', async () => {
ctx.wrapper?.setProps({ panel: undefined }); ctx.wrapper?.setProps({ panel: undefined });
ctx.wrapper?.setState({ selectedTheme: { label: 'light', value: 'light' } }); ctx.wrapper?.setState({ selectedTheme: 'light' });
await ctx.wrapper?.instance().buildUrl(); await ctx.wrapper?.instance().buildUrl();
const state = ctx.wrapper?.state(); const state = ctx.wrapper?.state();
...@@ -175,36 +175,14 @@ describe('ShareModal', () => { ...@@ -175,36 +175,14 @@ describe('ShareModal', () => {
expect(state?.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC'); expect(state?.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
}); });
describe('template variables', () => {
beforeEach(() => {
templateSrv = initTemplateSrv([
{ type: 'query', name: 'app', current: { value: 'mupp' } },
{ type: 'query', name: 'server', current: { value: 'srv-01' } },
]);
setTemplateSrv(templateSrv);
});
it('should include template variables in url', async () => {
mockLocationHref('http://server/#!/test');
ctx.mount();
ctx.wrapper?.setState({ includeTemplateVars: true });
await ctx.wrapper?.instance().buildUrl();
const state = ctx.wrapper?.state();
expect(state?.shareUrl).toContain(
'http://server/#!/test?from=1000&to=2000&orgId=1&var-app=mupp&var-server=srv-01'
);
});
it('should shorten url', () => { it('should shorten url', () => {
mockLocationHref('http://server/#!/test'); mockLocationHref('http://server/#!/test');
ctx.mount(); ctx.mount();
ctx.wrapper?.setState({ includeTemplateVars: true, useShortUrl: true }, async () => { ctx.wrapper?.setState({ useShortUrl: true }, async () => {
await ctx.wrapper?.instance().buildUrl(); await ctx.wrapper?.instance().buildUrl();
const state = ctx.wrapper?.state(); const state = ctx.wrapper?.state();
expect(state?.shareUrl).toContain(`/goto/${mockUid}`); expect(state?.shareUrl).toContain(`/goto/${mockUid}`);
}); });
}); });
}); });
});
}); });
public/app/features/dashboard/components/ShareModal/ShareLink.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
import { InlineField, Select, Switch, ClipboardButton, Icon, InfoBox, Input } from '@grafana/ui'; import { Field, RadioButtonGroup, Switch, ClipboardButton, Icon, InfoBox, Input, FieldSet } from '@grafana/ui';
import { SelectableValue, PanelModel, AppEvents } from '@grafana/data'; import { SelectableValue, PanelModel, AppEvents } from '@grafana/data';
import { DashboardModel } from 'app/features/dashboard/state'; import { DashboardModel } from 'app/features/dashboard/state';
import { buildImageUrl, buildShareUrl } from './utils'; import { buildImageUrl, buildShareUrl } from './utils';
...@@ -8,9 +8,9 @@ import { appEvents } from 'app/core/core'; ...@@ -8,9 +8,9 @@ import { appEvents } from 'app/core/core';
import config from 'app/core/config'; import config from 'app/core/config';
const themeOptions: Array<SelectableValue<string>> = [ const themeOptions: Array<SelectableValue<string>> = [
{ label: 'current', value: 'current' }, { label: 'Current', value: 'current' },
{ label: 'dark', value: 'dark' }, { label: 'Dark', value: 'dark' },
{ label: 'light', value: 'light' }, { label: 'Light', value: 'light' },
]; ];
export interface Props { export interface Props {
...@@ -20,9 +20,8 @@ export interface Props { ...@@ -20,9 +20,8 @@ export interface Props {
export interface State { export interface State {
useCurrentTimeRange: boolean; useCurrentTimeRange: boolean;
includeTemplateVars: boolean;
useShortUrl: boolean; useShortUrl: boolean;
selectedTheme: SelectableValue<string>; selectedTheme: string;
shareUrl: string; shareUrl: string;
imageUrl: string; imageUrl: string;
} }
...@@ -32,9 +31,8 @@ export class ShareLink extends PureComponent<Props, State> { ...@@ -32,9 +31,8 @@ export class ShareLink extends PureComponent<Props, State> {
super(props); super(props);
this.state = { this.state = {
useCurrentTimeRange: true, useCurrentTimeRange: true,
includeTemplateVars: true,
useShortUrl: false, useShortUrl: false,
selectedTheme: themeOptions[0], selectedTheme: 'current',
shareUrl: '', shareUrl: '',
imageUrl: '', imageUrl: '',
}; };
...@@ -45,11 +43,10 @@ export class ShareLink extends PureComponent<Props, State> { ...@@ -45,11 +43,10 @@ export class ShareLink extends PureComponent<Props, State> {
} }
componentDidUpdate(prevProps: Props, prevState: State) { componentDidUpdate(prevProps: Props, prevState: State) {
const { useCurrentTimeRange, includeTemplateVars, useShortUrl, selectedTheme } = this.state; const { useCurrentTimeRange, useShortUrl, selectedTheme } = this.state;
if ( if (
prevState.useCurrentTimeRange !== useCurrentTimeRange || prevState.useCurrentTimeRange !== useCurrentTimeRange ||
prevState.includeTemplateVars !== includeTemplateVars || prevState.selectedTheme !== selectedTheme ||
prevState.selectedTheme.value !== selectedTheme.value ||
prevState.useShortUrl !== useShortUrl prevState.useShortUrl !== useShortUrl
) { ) {
this.buildUrl(); this.buildUrl();
...@@ -58,16 +55,10 @@ export class ShareLink extends PureComponent<Props, State> { ...@@ -58,16 +55,10 @@ export class ShareLink extends PureComponent<Props, State> {
buildUrl = async () => { buildUrl = async () => {
const { panel } = this.props; const { panel } = this.props;
const { useCurrentTimeRange, includeTemplateVars, useShortUrl, selectedTheme } = this.state; const { useCurrentTimeRange, useShortUrl, selectedTheme } = this.state;
const shareUrl = await buildShareUrl( const shareUrl = await buildShareUrl(useCurrentTimeRange, selectedTheme, panel, useShortUrl);
useCurrentTimeRange, const imageUrl = buildImageUrl(useCurrentTimeRange, selectedTheme, panel);
includeTemplateVars,
selectedTheme.value,
panel,
useShortUrl
);
const imageUrl = buildImageUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme.value, panel);
this.setState({ shareUrl, imageUrl }); this.setState({ shareUrl, imageUrl });
}; };
...@@ -76,15 +67,11 @@ export class ShareLink extends PureComponent<Props, State> { ...@@ -76,15 +67,11 @@ export class ShareLink extends PureComponent<Props, State> {
this.setState({ useCurrentTimeRange: !this.state.useCurrentTimeRange }); this.setState({ useCurrentTimeRange: !this.state.useCurrentTimeRange });
}; };
onIncludeTemplateVarsChange = () => {
this.setState({ includeTemplateVars: !this.state.includeTemplateVars });
};
onUrlShorten = () => { onUrlShorten = () => {
this.setState({ useShortUrl: !this.state.useShortUrl }); this.setState({ useShortUrl: !this.state.useShortUrl });
}; };
onThemeChange = (value: SelectableValue<string>) => { onThemeChange = (value: string) => {
this.setState({ selectedTheme: value }); this.setState({ selectedTheme: value });
}; };
...@@ -98,60 +85,49 @@ export class ShareLink extends PureComponent<Props, State> { ...@@ -98,60 +85,49 @@ export class ShareLink extends PureComponent<Props, State> {
render() { render() {
const { panel } = this.props; const { panel } = this.props;
const { useCurrentTimeRange, includeTemplateVars, useShortUrl, selectedTheme, shareUrl, imageUrl } = this.state; const isRelativeTime = this.props.dashboard ? this.props.dashboard.time.to === 'now' : false;
const { useCurrentTimeRange, useShortUrl, selectedTheme, shareUrl, imageUrl } = this.state;
const selectors = e2eSelectors.pages.SharePanelModal; const selectors = e2eSelectors.pages.SharePanelModal;
return ( return (
<div className="share-modal-body"> <div className="share-modal-body">
<div className="share-modal-header"> <div className="share-modal-header">
<Icon name="link" className="share-modal-big-icon" size="xxl" />
<div className="share-modal-content"> <div className="share-modal-content">
<p className="share-modal-info-text"> <p className="share-modal-info-text">
Create a direct link to this dashboard or panel, customized with the options below. Create a direct link to this dashboard or panel, customized with the options below.
</p> </p>
<div className="gf-form-group"> <FieldSet>
<InlineField labelWidth={24} label="Current time range"> <Field
label="Lock time range"
description={
isRelativeTime ? 'Transforms the current relative time range to an absolute time range' : ''
}
>
<Switch <Switch
id="share-current-time-range" id="share-current-time-range"
value={useCurrentTimeRange} value={useCurrentTimeRange}
onChange={this.onUseCurrentTimeRangeChange} onChange={this.onUseCurrentTimeRangeChange}
/> />
</InlineField> </Field>
<InlineField labelWidth={24} label="Template variables"> <Field label="Theme">
<Switch <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
id="share-template-vars" </Field>
value={includeTemplateVars} <Field label="Shorten URL">
onChange={this.onIncludeTemplateVarsChange}
/>
</InlineField>
<InlineField labelWidth={24} label="Theme">
<Select width={20} options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
</InlineField>
<InlineField labelWidth={24} label="Shorten URL">
<Switch id="share-shorten-url" value={useShortUrl} onChange={this.onUrlShorten} /> <Switch id="share-shorten-url" value={useShortUrl} onChange={this.onUrlShorten} />
</InlineField> </Field>
</div>
<div> <Field label="Link URL">
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<Input <Input
value={shareUrl} value={shareUrl}
readOnly readOnly
addonAfter={ addonAfter={
<ClipboardButton <ClipboardButton variant="primary" getText={this.getShareUrl} onClipboardCopy={this.onShareUrlCopy}>
variant="primary"
getText={this.getShareUrl}
onClipboardCopy={this.onShareUrlCopy}
>
<Icon name="copy" /> Copy <Icon name="copy" /> Copy
</ClipboardButton> </ClipboardButton>
} }
/> />
</div> </Field>
</div> </FieldSet>
</div>
</div>
{panel && config.rendererAvailable && ( {panel && config.rendererAvailable && (
<div className="gf-form"> <div className="gf-form">
<a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}> <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
......
public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { import { Button, ClipboardButton, Icon, Spinner, Select, Input, LinkButton, Field } from '@grafana/ui';
Button,
ClipboardButton,
Icon,
Spinner,
Select,
Input,
LinkButton,
InlineField,
InlineFieldRow,
} from '@grafana/ui';
import { AppEvents, SelectableValue } from '@grafana/data'; import { AppEvents, SelectableValue } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime'; import { getBackendSrv } from '@grafana/runtime';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
...@@ -229,31 +219,26 @@ export class ShareSnapshot extends PureComponent<Props, State> { ...@@ -229,31 +219,26 @@ export class ShareSnapshot extends PureComponent<Props, State> {
URL. Share wisely. URL. Share wisely.
</p> </p>
</div> </div>
<InlineFieldRow className="share-modal-options"> <Field label="Snapshot name">
<InlineField labelWidth={24} label="Snapshot name">
<Input width={30} value={snapshotName} onChange={this.onSnapshotNameChange} /> <Input width={30} value={snapshotName} onChange={this.onSnapshotNameChange} />
</InlineField> </Field>
<InlineField labelWidth={24} label="Expire"> <Field label="Expire">
<Select width={30} options={expireOptions} value={selectedExpireOption} onChange={this.onExpireChange} /> <Select width={30} options={expireOptions} value={selectedExpireOption} onChange={this.onExpireChange} />
</InlineField> </Field>
</InlineFieldRow> <Field
label="Timeout (seconds)"
<p className="share-modal-info-text"> description="You may need to configure the timeout value if it takes a long time to collect your dashboard's
You may need to configure the timeout value if it takes a long time to collect your dashboard&apos;s metrics. metrics."
</p> >
<InlineFieldRow className="share-modal-options">
<InlineField labelWidth={24} label="Timeout (seconds)">
<Input type="number" width={21} value={timeoutSeconds} onChange={this.onTimeoutChange} /> <Input type="number" width={21} value={timeoutSeconds} onChange={this.onTimeoutChange} />
</InlineField> </Field>
</InlineFieldRow>
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<Button className="width-10" variant="primary" disabled={isLoading} onClick={this.createSnapshot()}> <Button variant="primary" disabled={isLoading} onClick={this.createSnapshot()}>
Local Snapshot Local Snapshot
</Button> </Button>
{externalEnabled && ( {externalEnabled && (
<Button className="width-16" variant="secondary" disabled={isLoading} onClick={this.createSnapshot(true)}> <Button variant="secondary" disabled={isLoading} onClick={this.createSnapshot(true)}>
{sharingButtonText} {sharingButtonText}
</Button> </Button>
)} )}
...@@ -309,17 +294,11 @@ export class ShareSnapshot extends PureComponent<Props, State> { ...@@ -309,17 +294,11 @@ export class ShareSnapshot extends PureComponent<Props, State> {
return ( return (
<div className="share-modal-body"> <div className="share-modal-body">
<div className="share-modal-header"> <div className="share-modal-header">
{isLoading ? (
<div className="share-modal-big-icon">
<Spinner inline={true} />
</div>
) : (
<Icon name="camera" className="share-modal-big-icon" size="xxl" />
)}
<div className="share-modal-content"> <div className="share-modal-content">
{step === 1 && this.renderStep1()} {step === 1 && this.renderStep1()}
{step === 2 && this.renderStep2()} {step === 2 && this.renderStep2()}
{step === 3 && this.renderStep3()} {step === 3 && this.renderStep3()}
{isLoading && <Spinner inline={true} />}
</div> </div>
</div> </div>
</div> </div>
......
public/app/features/dashboard/components/ShareModal/utils.ts
...@@ -2,14 +2,8 @@ import { config } from '@grafana/runtime'; ...@@ -2,14 +2,8 @@ import { config } from '@grafana/runtime';
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
import { createShortLink } from 'app/core/utils/shortLinks'; import { createShortLink } from 'app/core/utils/shortLinks';
import { PanelModel, dateTime, urlUtil } from '@grafana/data'; import { PanelModel, dateTime, urlUtil } from '@grafana/data';
import { getAllVariableValuesForUrl } from 'app/features/variables/getAllVariableValuesForUrl';
export function buildParams( export function buildParams(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) {
useCurrentTimeRange: boolean,
includeTemplateVars: boolean,
selectedTheme?: string,
panel?: PanelModel
) {
let params = urlUtil.getUrlSearchParams(); let params = urlUtil.getUrlSearchParams();
const range = getTimeSrv().timeRange(); const range = getTimeSrv().timeRange();
...@@ -22,13 +16,6 @@ export function buildParams( ...@@ -22,13 +16,6 @@ export function buildParams(
delete params.to; delete params.to;
} }
if (includeTemplateVars) {
params = {
...params,
...getAllVariableValuesForUrl(),
};
}
if (selectedTheme !== 'current') { if (selectedTheme !== 'current') {
params.theme = selectedTheme; params.theme = selectedTheme;
} }
...@@ -55,13 +42,12 @@ export function buildBaseUrl() { ...@@ -55,13 +42,12 @@ export function buildBaseUrl() {
export async function buildShareUrl( export async function buildShareUrl(
useCurrentTimeRange: boolean, useCurrentTimeRange: boolean,
includeTemplateVars: boolean,
selectedTheme?: string, selectedTheme?: string,
panel?: PanelModel, panel?: PanelModel,
shortenUrl?: boolean shortenUrl?: boolean
) { ) {
const baseUrl = buildBaseUrl(); const baseUrl = buildBaseUrl();
const params = buildParams(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); const params = buildParams(useCurrentTimeRange, selectedTheme, panel);
const shareUrl = urlUtil.appendQueryToUrl(baseUrl, urlUtil.toUrlParams(params)); const shareUrl = urlUtil.appendQueryToUrl(baseUrl, urlUtil.toUrlParams(params));
if (shortenUrl) { if (shortenUrl) {
return await createShortLink(shareUrl); return await createShortLink(shareUrl);
...@@ -69,14 +55,9 @@ export async function buildShareUrl( ...@@ -69,14 +55,9 @@ export async function buildShareUrl(
return shareUrl; return shareUrl;
} }
export function buildSoloUrl( export function buildSoloUrl(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) {
useCurrentTimeRange: boolean,
includeTemplateVars: boolean,
selectedTheme?: string,
panel?: PanelModel
) {
const baseUrl = buildBaseUrl(); const baseUrl = buildBaseUrl();
const params = buildParams(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); const params = buildParams(useCurrentTimeRange, selectedTheme, panel);
let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/'); let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/');
soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/'); soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/');
...@@ -88,13 +69,8 @@ export function buildSoloUrl( ...@@ -88,13 +69,8 @@ export function buildSoloUrl(
return urlUtil.appendQueryToUrl(soloUrl, urlUtil.toUrlParams(params)); return urlUtil.appendQueryToUrl(soloUrl, urlUtil.toUrlParams(params));
} }
export function buildImageUrl( export function buildImageUrl(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) {
useCurrentTimeRange: boolean, let soloUrl = buildSoloUrl(useCurrentTimeRange, selectedTheme, panel);
includeTemplateVars: boolean,
selectedTheme?: string,
panel?: PanelModel
) {
let soloUrl = buildSoloUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel);
let imageUrl = soloUrl.replace(config.appSubUrl + '/dashboard-solo/', config.appSubUrl + '/render/dashboard-solo/'); let imageUrl = soloUrl.replace(config.appSubUrl + '/dashboard-solo/', config.appSubUrl + '/render/dashboard-solo/');
imageUrl = imageUrl.replace(config.appSubUrl + '/d-solo/', config.appSubUrl + '/render/d-solo/'); imageUrl = imageUrl.replace(config.appSubUrl + '/d-solo/', config.appSubUrl + '/render/d-solo/');
...@@ -102,13 +78,8 @@ export function buildImageUrl( ...@@ -102,13 +78,8 @@ export function buildImageUrl(
return imageUrl; return imageUrl;
} }
export function buildIframeHtml( export function buildIframeHtml(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) {
useCurrentTimeRange: boolean, let soloUrl = buildSoloUrl(useCurrentTimeRange, selectedTheme, panel);
includeTemplateVars: boolean,
selectedTheme?: string,
panel?: PanelModel
) {
let soloUrl = buildSoloUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel);
return '<iframe src="' + soloUrl + '" width="450" height="200" frameborder="0"></iframe>'; return '<iframe src="' + soloUrl + '" width="450" height="200" frameborder="0"></iframe>';
} }
......
public/sass/components/_modals.scss
...@@ -127,12 +127,6 @@ ...@@ -127,12 +127,6 @@
} }
.share-modal-body { .share-modal-body {
padding: 10px 0;
.tight-form {
text-align: left;
}
.share-modal-options { .share-modal-options {
margin: 11px 0px 33px 0px; margin: 11px 0px 33px 0px;
display: inline-block; display: inline-block;
...@@ -160,10 +154,6 @@ ...@@ -160,10 +154,6 @@
flex-grow: 1; flex-grow: 1;
} }
.tight-form {
text-align: left;
}
.share-modal-link { .share-modal-link {
max-width: 716px; max-width: 716px;
white-space: nowrap; white-space: nowrap;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment