From b40b134e4c02a6edc0cafec2be67df6849fafd3b Mon Sep 17 00:00:00 2001 From: Oscar Kilhed Date: Wed, 20 Jan 2021 15:48:49 +0100 Subject: [PATCH] Dashboard: Remove template variables option from ShareModal (#30395) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../src/components/Modal/ModalTabContent.tsx | 8 +- .../components/ShareModal/ShareEmbed.tsx | 106 ++++++++---------- .../components/ShareModal/ShareExport.tsx | 8 +- .../components/ShareModal/ShareLink.test.tsx | 34 +----- .../components/ShareModal/ShareLink.tsx | 104 +++++++---------- .../components/ShareModal/ShareSnapshot.tsx | 55 +++------ .../dashboard/components/ShareModal/utils.ts | 45 ++------ public/sass/components/_modals.scss | 10 -- 8 files changed, 128 insertions(+), 242 deletions(-) diff --git a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx index 6f7a9074426..8b00f9c8f9a 100644 --- a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx +++ b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx @@ -1,18 +1,18 @@ import React from 'react'; -import { cx } from 'emotion'; import { IconName } from '../../types'; -import { Icon } from '../Icon/Icon'; interface Props { + /** @deprecated */ icon?: IconName; + /** @deprecated */ iconClass?: string; } -export const ModalTabContent: React.FC = ({ icon, iconClass, children }) => { +/** @internal */ +export const ModalTabContent: React.FC = ({ children }) => { return (
- {icon && }
{children}
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx index 15fee2c307a..2f3754ff4be 100644 --- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx +++ b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx @@ -1,13 +1,14 @@ -import React, { PureComponent } from 'react'; -import { Select, Switch, Icon, InlineField } from '@grafana/ui'; -import { SelectableValue } from '@grafana/data'; +import React, { FormEvent, PureComponent } from 'react'; +import { RadioButtonGroup, Switch, Field, TextArea, Icon, ClipboardButton } from '@grafana/ui'; +import { SelectableValue, AppEvents } from '@grafana/data'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; +import { appEvents } from 'app/core/core'; import { buildIframeHtml } from './utils'; const themeOptions: Array> = [ - { label: 'current', value: 'current' }, - { label: 'dark', value: 'dark' }, - { label: 'light', value: 'light' }, + { label: 'Current', value: 'current' }, + { label: 'Dark', value: 'dark' }, + { label: 'Light', value: 'light' }, ]; interface Props { @@ -17,8 +18,7 @@ interface Props { interface State { useCurrentTimeRange: boolean; - includeTemplateVars: boolean; - selectedTheme: SelectableValue; + selectedTheme: string; iframeHtml: string; } @@ -27,8 +27,7 @@ export class ShareEmbed extends PureComponent { super(props); this.state = { useCurrentTimeRange: true, - includeTemplateVars: true, - selectedTheme: themeOptions[0], + selectedTheme: 'current', iframeHtml: '', }; } @@ -39,12 +38,16 @@ export class ShareEmbed extends PureComponent { buildIframeHtml = () => { 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 }); }; + onIframeHtmlChange = (event: FormEvent) => { + this.setState({ iframeHtml: event.currentTarget.value }); + }; + onUseCurrentTimeRangeChange = () => { this.setState( { @@ -54,61 +57,50 @@ export class ShareEmbed extends PureComponent { ); }; - onIncludeTemplateVarsChange = () => { - this.setState( - { - includeTemplateVars: !this.state.includeTemplateVars, - }, - this.buildIframeHtml - ); + onThemeChange = (value: string) => { + this.setState({ selectedTheme: value }, this.buildIframeHtml); }; - onThemeChange = (value: SelectableValue) => { - this.setState( - { - selectedTheme: value, - }, - this.buildIframeHtml - ); + onIframeHtmlCopy = () => { + appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']); + }; + + getIframeHtml = () => { + return this.state.iframeHtml; }; 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 (
-
-
- - - - - - - - -
-
+

Generate HTML for embedding an iframe with this panel.

+ + + + + + + + + + + Copy +
diff --git a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx index d6c23f88b6e..0f4c14a585e 100644 --- a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx +++ b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; 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 { DashboardExporter } from 'app/features/dashboard/components/DashExportModal'; import { appEvents } from 'app/core/core'; @@ -90,11 +90,11 @@ export class ShareExport extends PureComponent { return (
-
- +

Export this dashboard.

+ - +
{externalEnabled && ( - )} @@ -309,17 +294,11 @@ export class ShareSnapshot extends PureComponent { return (
- {isLoading ? ( -
- -
- ) : ( - - )}
{step === 1 && this.renderStep1()} {step === 2 && this.renderStep2()} {step === 3 && this.renderStep3()} + {isLoading && }
diff --git a/public/app/features/dashboard/components/ShareModal/utils.ts b/public/app/features/dashboard/components/ShareModal/utils.ts index 33f2add2e58..86d14c8b7ca 100644 --- a/public/app/features/dashboard/components/ShareModal/utils.ts +++ b/public/app/features/dashboard/components/ShareModal/utils.ts @@ -2,14 +2,8 @@ import { config } from '@grafana/runtime'; import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { createShortLink } from 'app/core/utils/shortLinks'; import { PanelModel, dateTime, urlUtil } from '@grafana/data'; -import { getAllVariableValuesForUrl } from 'app/features/variables/getAllVariableValuesForUrl'; -export function buildParams( - useCurrentTimeRange: boolean, - includeTemplateVars: boolean, - selectedTheme?: string, - panel?: PanelModel -) { +export function buildParams(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) { let params = urlUtil.getUrlSearchParams(); const range = getTimeSrv().timeRange(); @@ -22,13 +16,6 @@ export function buildParams( delete params.to; } - if (includeTemplateVars) { - params = { - ...params, - ...getAllVariableValuesForUrl(), - }; - } - if (selectedTheme !== 'current') { params.theme = selectedTheme; } @@ -55,13 +42,12 @@ export function buildBaseUrl() { export async function buildShareUrl( useCurrentTimeRange: boolean, - includeTemplateVars: boolean, selectedTheme?: string, panel?: PanelModel, shortenUrl?: boolean ) { const baseUrl = buildBaseUrl(); - const params = buildParams(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); + const params = buildParams(useCurrentTimeRange, selectedTheme, panel); const shareUrl = urlUtil.appendQueryToUrl(baseUrl, urlUtil.toUrlParams(params)); if (shortenUrl) { return await createShortLink(shareUrl); @@ -69,14 +55,9 @@ export async function buildShareUrl( return shareUrl; } -export function buildSoloUrl( - useCurrentTimeRange: boolean, - includeTemplateVars: boolean, - selectedTheme?: string, - panel?: PanelModel -) { +export function buildSoloUrl(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) { 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/'); soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/'); @@ -88,13 +69,8 @@ export function buildSoloUrl( return urlUtil.appendQueryToUrl(soloUrl, urlUtil.toUrlParams(params)); } -export function buildImageUrl( - useCurrentTimeRange: boolean, - includeTemplateVars: boolean, - selectedTheme?: string, - panel?: PanelModel -) { - let soloUrl = buildSoloUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); +export function buildImageUrl(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) { + let soloUrl = buildSoloUrl(useCurrentTimeRange, selectedTheme, panel); 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/'); @@ -102,13 +78,8 @@ export function buildImageUrl( return imageUrl; } -export function buildIframeHtml( - useCurrentTimeRange: boolean, - includeTemplateVars: boolean, - selectedTheme?: string, - panel?: PanelModel -) { - let soloUrl = buildSoloUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); +export function buildIframeHtml(useCurrentTimeRange: boolean, selectedTheme?: string, panel?: PanelModel) { + let soloUrl = buildSoloUrl(useCurrentTimeRange, selectedTheme, panel); return ''; } diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 1c2aae7e9c1..9696b2d4a34 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -127,12 +127,6 @@ } .share-modal-body { - padding: 10px 0; - - .tight-form { - text-align: left; - } - .share-modal-options { margin: 11px 0px 33px 0px; display: inline-block; @@ -160,10 +154,6 @@ flex-grow: 1; } - .tight-form { - text-align: left; - } - .share-modal-link { max-width: 716px; white-space: nowrap;