mirror of https://github.com/grafana/grafana
Migration: Share dashboard/panel modal (#22436)
* ShareModal: refactor dashboard export modal * Modal: show react modals with appEvents * ShareModal: embed panel tab * ShareModal: bind to shortcut (p s) * grafana-ui: ClipboardButton component * ShareModal: use ClipboardButton component * ClipboardButton: add to storybook * ShareModal: use event-based approach for dashboard share * ShareModal: remove unused * ModalReact: pass theme to the component * ShareModal: styles clean up * DashboardExporter: fix tests * fixed whitespace betwen icon and link * ShareModal: use theme from config * Modal: tab header refactor * ShareModal: tests * ShareModal: fix share url rendering * ShareModal: remove unused angular files * Chore: fix strictNullChecks errors * Modal: provide theme for event-based modal usage * ShareModal: use ModalsController for opening modal Co-authored-by: Torkel Ödegaard <torkel@grafana.com>pull/22543/head
Alexander Zobnin
5 years ago
committed by
GitHub
parent
87da6a293b
commit
d66e72fa67
@ -0,0 +1,40 @@ |
||||
import React, { useState } from 'react'; |
||||
|
||||
import { storiesOf } from '@storybook/react'; |
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; |
||||
import { ClipboardButton } from './ClipboardButton'; |
||||
import { Input } from '../Input/Input'; |
||||
import { text } from '@storybook/addon-knobs'; |
||||
|
||||
const getKnobs = () => { |
||||
return { |
||||
buttonText: text('Button text', 'Copy to clipboard'), |
||||
inputText: text('Input', 'go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only'), |
||||
clipboardCopyMessage: text('Copy message', 'Value copied to clipboard'), |
||||
}; |
||||
}; |
||||
|
||||
const Wrapper = () => { |
||||
const { inputText, buttonText } = getKnobs(); |
||||
const [copyMessage, setCopyMessage] = useState(''); |
||||
|
||||
return ( |
||||
<div style={{ width: '100%' }}> |
||||
<div style={{ display: 'flex', width: '100%', marginBottom: '1em' }}> |
||||
<ClipboardButton |
||||
variant="secondary" |
||||
getText={() => getKnobs().inputText} |
||||
onClipboardCopy={() => setCopyMessage(getKnobs().clipboardCopyMessage)} |
||||
> |
||||
{buttonText} |
||||
</ClipboardButton> |
||||
<Input value={inputText} onChange={() => {}} /> |
||||
</div> |
||||
<span>{copyMessage}</span> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const story = storiesOf('General/ClipboardButton', module); |
||||
story.addDecorator(withCenteredStory); |
||||
story.add('copy to clipboard', () => <Wrapper />); |
||||
@ -0,0 +1,50 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import Clipboard from 'clipboard'; |
||||
import { Button, ButtonProps } from '../Button/Button'; |
||||
|
||||
interface Props extends ButtonProps { |
||||
getText(): string; |
||||
onClipboardCopy?(e: Clipboard.Event): void; |
||||
onClipboardError?(e: Clipboard.Event): void; |
||||
} |
||||
|
||||
export class ClipboardButton extends PureComponent<Props> { |
||||
// @ts-ignore
|
||||
private clipboard: Clipboard; |
||||
// @ts-ignore
|
||||
private elem: HTMLButtonElement; |
||||
|
||||
setRef = (elem: HTMLButtonElement) => { |
||||
this.elem = elem; |
||||
}; |
||||
|
||||
componentDidMount() { |
||||
const { getText, onClipboardCopy, onClipboardError } = this.props; |
||||
|
||||
this.clipboard = new Clipboard(this.elem, { |
||||
text: () => getText(), |
||||
}); |
||||
|
||||
this.clipboard.on('success', (e: Clipboard.Event) => { |
||||
onClipboardCopy && onClipboardCopy(e); |
||||
}); |
||||
|
||||
this.clipboard.on('error', (e: Clipboard.Event) => { |
||||
onClipboardError && onClipboardError(e); |
||||
}); |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
this.clipboard.destroy(); |
||||
} |
||||
|
||||
render() { |
||||
const { getText, onClipboardCopy, onClipboardError, children, ...buttonProps } = this.props; |
||||
|
||||
return ( |
||||
<Button {...buttonProps} ref={this.setRef}> |
||||
{children} |
||||
</Button> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import React, { useContext } from 'react'; |
||||
import { getModalStyles } from './getModalStyles'; |
||||
import { IconType } from '../Icon/types'; |
||||
import { ThemeContext } from '../../themes'; |
||||
import { Icon } from '../Icon/Icon'; |
||||
|
||||
interface Props { |
||||
title: string; |
||||
icon?: IconType; |
||||
} |
||||
|
||||
export const ModalHeader: React.FC<Props> = ({ icon, title, children }) => { |
||||
const theme = useContext(ThemeContext); |
||||
const styles = getModalStyles(theme); |
||||
|
||||
return ( |
||||
<> |
||||
<h2 className={styles.modalHeaderTitle}> |
||||
{icon && <Icon name={icon} className={styles.modalHeaderIcon} />} |
||||
{title} |
||||
</h2> |
||||
{children} |
||||
</> |
||||
); |
||||
}; |
||||
@ -0,0 +1,39 @@ |
||||
import React from 'react'; |
||||
import { IconType } from '../Icon/types'; |
||||
import { TabsBar } from '../Tabs/TabsBar'; |
||||
import { Tab } from '../Tabs/Tab'; |
||||
import { ModalHeader } from './ModalHeader'; |
||||
|
||||
interface ModalTab { |
||||
value: string; |
||||
label: string; |
||||
icon?: string; |
||||
} |
||||
|
||||
interface Props { |
||||
icon: IconType; |
||||
title: string; |
||||
tabs: ModalTab[]; |
||||
activeTab: string; |
||||
onChangeTab(tab: ModalTab): void; |
||||
} |
||||
|
||||
export const ModalTabsHeader: React.FC<Props> = ({ icon, title, tabs, activeTab, onChangeTab }) => { |
||||
return ( |
||||
<ModalHeader icon={icon} title={title}> |
||||
<TabsBar hideBorder={true}> |
||||
{tabs.map((t, index) => { |
||||
return ( |
||||
<Tab |
||||
key={`${t.value}-${index}`} |
||||
label={t.label} |
||||
icon={t.icon} |
||||
active={t.value === activeTab} |
||||
onChangeTab={() => onChangeTab(t)} |
||||
/> |
||||
); |
||||
})} |
||||
</TabsBar> |
||||
</ModalHeader> |
||||
); |
||||
}; |
||||
@ -0,0 +1,60 @@ |
||||
import { css } from 'emotion'; |
||||
import { GrafanaTheme } from '@grafana/data'; |
||||
import { stylesFactory } from '../../themes'; |
||||
|
||||
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => ({ |
||||
modal: css` |
||||
position: fixed; |
||||
z-index: ${theme.zIndex.modal}; |
||||
background: ${theme.colors.pageBg}; |
||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); |
||||
background-clip: padding-box; |
||||
outline: none; |
||||
width: 750px; |
||||
max-width: 100%; |
||||
left: 0; |
||||
right: 0; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
top: 10%; |
||||
`,
|
||||
modalBackdrop: css` |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
z-index: ${theme.zIndex.modalBackdrop}; |
||||
background-color: ${theme.colors.blueFaint}; |
||||
opacity: 0.8; |
||||
backdrop-filter: blur(4px); |
||||
`,
|
||||
modalHeader: css` |
||||
background: ${theme.background.pageHeader}; |
||||
box-shadow: ${theme.shadow.pageHeader}; |
||||
border-bottom: 1px solid ${theme.colors.pageHeaderBorder}; |
||||
display: flex; |
||||
`,
|
||||
modalHeaderTitle: css` |
||||
font-size: ${theme.typography.heading.h3}; |
||||
padding-top: ${theme.spacing.sm}; |
||||
margin: 0 ${theme.spacing.md}; |
||||
`,
|
||||
modalHeaderIcon: css` |
||||
margin-right: ${theme.spacing.md}; |
||||
font-size: inherit; |
||||
&:before { |
||||
vertical-align: baseline; |
||||
} |
||||
`,
|
||||
modalHeaderClose: css` |
||||
margin-left: auto; |
||||
padding: 9px ${theme.spacing.d}; |
||||
`,
|
||||
modalContent: css` |
||||
padding: calc(${theme.spacing.d} * 2); |
||||
overflow: auto; |
||||
width: 100%; |
||||
max-height: calc(90vh - ${theme.spacing.d} * 2); |
||||
`,
|
||||
})); |
||||
@ -1,86 +0,0 @@ |
||||
import angular from 'angular'; |
||||
import { saveAs } from 'file-saver'; |
||||
|
||||
import coreModule from 'app/core/core_module'; |
||||
import { DashboardExporter } from './DashboardExporter'; |
||||
import { DashboardSrv } from '../../services/DashboardSrv'; |
||||
import DatasourceSrv from 'app/features/plugins/datasource_srv'; |
||||
import { GrafanaRootScope } from 'app/routes/GrafanaCtrl'; |
||||
import { CoreEvents } from 'app/types'; |
||||
|
||||
export class DashExportCtrl { |
||||
dash: any; |
||||
exporter: DashboardExporter; |
||||
dismiss: () => void; |
||||
shareExternally: boolean; |
||||
|
||||
/** @ngInject */ |
||||
constructor( |
||||
private dashboardSrv: DashboardSrv, |
||||
datasourceSrv: DatasourceSrv, |
||||
private $scope: any, |
||||
private $rootScope: GrafanaRootScope |
||||
) { |
||||
this.exporter = new DashboardExporter(datasourceSrv); |
||||
|
||||
this.dash = this.dashboardSrv.getCurrent(); |
||||
} |
||||
|
||||
saveDashboardAsFile() { |
||||
if (this.shareExternally) { |
||||
this.exporter.makeExportable(this.dash).then((dashboardJson: any) => { |
||||
this.$scope.$apply(() => { |
||||
this.openSaveAsDialog(dashboardJson); |
||||
}); |
||||
}); |
||||
} else { |
||||
this.openSaveAsDialog(this.dash.getSaveModelClone()); |
||||
} |
||||
} |
||||
|
||||
viewJson() { |
||||
if (this.shareExternally) { |
||||
this.exporter.makeExportable(this.dash).then((dashboardJson: any) => { |
||||
this.$scope.$apply(() => { |
||||
this.openJsonModal(dashboardJson); |
||||
}); |
||||
}); |
||||
} else { |
||||
this.openJsonModal(this.dash.getSaveModelClone()); |
||||
} |
||||
} |
||||
|
||||
private openSaveAsDialog(dash: any) { |
||||
const blob = new Blob([angular.toJson(dash, true)], { |
||||
type: 'application/json;charset=utf-8', |
||||
}); |
||||
saveAs(blob, dash.title + '-' + new Date().getTime() + '.json'); |
||||
} |
||||
|
||||
private openJsonModal(clone: object) { |
||||
const model = { |
||||
object: clone, |
||||
enableCopy: true, |
||||
}; |
||||
|
||||
this.$rootScope.appEvent(CoreEvents.showModal, { |
||||
src: 'public/app/partials/edit_json.html', |
||||
model: model, |
||||
}); |
||||
|
||||
this.dismiss(); |
||||
} |
||||
} |
||||
|
||||
export function dashExportDirective() { |
||||
return { |
||||
restrict: 'E', |
||||
templateUrl: 'public/app/features/dashboard/components/DashExportModal/template.html', |
||||
controller: DashExportCtrl, |
||||
bindToController: true, |
||||
controllerAs: 'ctrl', |
||||
scope: { dismiss: '&' }, |
||||
}; |
||||
} |
||||
|
||||
coreModule.directive('dashExportModal', dashExportDirective); |
||||
@ -1,25 +0,0 @@ |
||||
<div class="share-modal-header"> |
||||
<div class="share-modal-big-icon"> |
||||
<i class="fa fa-cloud-upload"></i> |
||||
</div> |
||||
<div> |
||||
<gf-form-switch |
||||
class="gf-form" |
||||
label="Export for sharing externally" |
||||
label-class="width-16" |
||||
checked="ctrl.shareExternally" |
||||
tooltip="Useful for sharing dashboard publicly on grafana.com. Will templatize data source names. Can then only be used with the specific dashboard import API."> |
||||
</gf-form-switch> |
||||
|
||||
<div class="gf-form-button-row"> |
||||
<button type="button" class="btn gf-form-btn width-10 btn-primary" ng-click="ctrl.saveDashboardAsFile()"> |
||||
Save to file |
||||
</button> |
||||
<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.viewJson()"> |
||||
View JSON |
||||
</button> |
||||
<a class="btn btn-link" ng-click="ctrl.dismiss()">Cancel</a> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,119 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { Switch, Select } from '@grafana/ui'; |
||||
import { SelectableValue } from '@grafana/data'; |
||||
import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; |
||||
import { buildIframeHtml } from './utils'; |
||||
|
||||
const themeOptions: Array<SelectableValue<string>> = [ |
||||
{ label: 'current', value: 'current' }, |
||||
{ label: 'dark', value: 'dark' }, |
||||
{ label: 'light', value: 'light' }, |
||||
]; |
||||
|
||||
interface Props { |
||||
dashboard: DashboardModel; |
||||
panel?: PanelModel; |
||||
} |
||||
|
||||
interface State { |
||||
useCurrentTimeRange: boolean; |
||||
includeTemplateVars: boolean; |
||||
selectedTheme: SelectableValue<string>; |
||||
iframeHtml: string; |
||||
} |
||||
|
||||
export class ShareEmbed extends PureComponent<Props, State> { |
||||
constructor(props: Props) { |
||||
super(props); |
||||
this.state = { |
||||
useCurrentTimeRange: true, |
||||
includeTemplateVars: true, |
||||
selectedTheme: themeOptions[0], |
||||
iframeHtml: '', |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.buildIframeHtml(); |
||||
} |
||||
|
||||
buildIframeHtml = () => { |
||||
const { panel } = this.props; |
||||
const { useCurrentTimeRange, includeTemplateVars, selectedTheme } = this.state; |
||||
|
||||
const iframeHtml = buildIframeHtml(useCurrentTimeRange, includeTemplateVars, selectedTheme.value, panel); |
||||
this.setState({ iframeHtml }); |
||||
}; |
||||
|
||||
onUseCurrentTimeRangeChange = () => { |
||||
this.setState( |
||||
{ |
||||
useCurrentTimeRange: !this.state.useCurrentTimeRange, |
||||
}, |
||||
this.buildIframeHtml |
||||
); |
||||
}; |
||||
|
||||
onIncludeTemplateVarsChange = () => { |
||||
this.setState( |
||||
{ |
||||
includeTemplateVars: !this.state.includeTemplateVars, |
||||
}, |
||||
this.buildIframeHtml |
||||
); |
||||
}; |
||||
|
||||
onThemeChange = (value: SelectableValue<string>) => { |
||||
this.setState( |
||||
{ |
||||
selectedTheme: value, |
||||
}, |
||||
this.buildIframeHtml |
||||
); |
||||
}; |
||||
|
||||
render() { |
||||
const { useCurrentTimeRange, includeTemplateVars, selectedTheme, iframeHtml } = this.state; |
||||
|
||||
return ( |
||||
<div className="share-modal-body"> |
||||
<div className="share-modal-header"> |
||||
<div className="share-modal-big-icon"> |
||||
<i className="gicon gicon-link"></i> |
||||
</div> |
||||
<div className="share-modal-content"> |
||||
<div className="gf-form-group"> |
||||
<Switch |
||||
labelClass="width-12" |
||||
label="Current time range" |
||||
checked={useCurrentTimeRange} |
||||
onChange={this.onUseCurrentTimeRangeChange} |
||||
/> |
||||
<Switch |
||||
labelClass="width-12" |
||||
label="Template variables" |
||||
checked={includeTemplateVars} |
||||
onChange={this.onIncludeTemplateVarsChange} |
||||
/> |
||||
<div className="gf-form"> |
||||
<label className="gf-form-label width-12">Theme</label> |
||||
<Select width={10} options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} /> |
||||
</div> |
||||
</div> |
||||
|
||||
<p className="share-modal-info-text"> |
||||
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. |
||||
</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> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,120 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { saveAs } from 'file-saver'; |
||||
import { Button, 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'; |
||||
import { CoreEvents } from 'app/types'; |
||||
|
||||
interface Props { |
||||
dashboard: DashboardModel; |
||||
panel?: PanelModel; |
||||
onDismiss(): void; |
||||
} |
||||
|
||||
interface State { |
||||
shareExternally: boolean; |
||||
} |
||||
|
||||
export class ShareExport extends PureComponent<Props, State> { |
||||
private exporter: DashboardExporter; |
||||
|
||||
constructor(props: Props) { |
||||
super(props); |
||||
this.state = { |
||||
shareExternally: false, |
||||
}; |
||||
|
||||
this.exporter = new DashboardExporter(); |
||||
} |
||||
|
||||
onShareExternallyChange = () => { |
||||
this.setState({ |
||||
shareExternally: !this.state.shareExternally, |
||||
}); |
||||
}; |
||||
|
||||
onSaveAsFile = () => { |
||||
const { dashboard } = this.props; |
||||
const { shareExternally } = this.state; |
||||
|
||||
if (shareExternally) { |
||||
this.exporter.makeExportable(dashboard).then((dashboardJson: any) => { |
||||
this.openSaveAsDialog(dashboardJson); |
||||
}); |
||||
} else { |
||||
this.openSaveAsDialog(dashboard.getSaveModelClone()); |
||||
} |
||||
}; |
||||
|
||||
onViewJson = () => { |
||||
const { dashboard } = this.props; |
||||
const { shareExternally } = this.state; |
||||
|
||||
if (shareExternally) { |
||||
this.exporter.makeExportable(dashboard).then((dashboardJson: any) => { |
||||
this.openJsonModal(dashboardJson); |
||||
}); |
||||
} else { |
||||
this.openJsonModal(dashboard.getSaveModelClone()); |
||||
} |
||||
}; |
||||
|
||||
openSaveAsDialog = (dash: any) => { |
||||
const dashboardJsonPretty = JSON.stringify(dash, null, 2); |
||||
const blob = new Blob([dashboardJsonPretty], { |
||||
type: 'application/json;charset=utf-8', |
||||
}); |
||||
const time = new Date().getTime(); |
||||
saveAs(blob, `${dash.title}-${time}.json`); |
||||
}; |
||||
|
||||
openJsonModal = (clone: object) => { |
||||
const model = { |
||||
object: clone, |
||||
enableCopy: true, |
||||
}; |
||||
|
||||
appEvents.emit(CoreEvents.showModal, { |
||||
src: 'public/app/partials/edit_json.html', |
||||
model, |
||||
}); |
||||
|
||||
this.props.onDismiss(); |
||||
}; |
||||
|
||||
render() { |
||||
const { onDismiss } = this.props; |
||||
const { shareExternally } = this.state; |
||||
|
||||
return ( |
||||
<div className="share-modal-body"> |
||||
<div className="share-modal-header"> |
||||
<div className="share-modal-big-icon"> |
||||
<i className="fa fa-cloud-upload"></i> |
||||
</div> |
||||
<div className="share-modal-content"> |
||||
<Switch |
||||
labelClass="width-16" |
||||
label="Export for sharing externally" |
||||
checked={shareExternally} |
||||
onChange={this.onShareExternallyChange} |
||||
/> |
||||
|
||||
<div className="gf-form-button-row"> |
||||
<Button variant="primary" onClick={this.onSaveAsFile}> |
||||
Save to file |
||||
</Button> |
||||
<Button variant="secondary" onClick={this.onViewJson}> |
||||
View JSON |
||||
</Button> |
||||
<Button variant="inverse" onClick={onDismiss}> |
||||
Cancel |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,179 @@ |
||||
import React from 'react'; |
||||
import { shallow, ShallowWrapper } from 'enzyme'; |
||||
import config from 'app/core/config'; |
||||
import { ShareLink, Props, State } from './ShareLink'; |
||||
|
||||
jest.mock('app/features/dashboard/services/TimeSrv', () => ({ |
||||
getTimeSrv: () => ({ |
||||
timeRange: () => { |
||||
return { from: new Date(1000), to: new Date(2000) }; |
||||
}, |
||||
}), |
||||
})); |
||||
|
||||
let fillVariableValuesForUrlMock = (params: any) => {}; |
||||
|
||||
jest.mock('app/features/templating/template_srv', () => ({ |
||||
fillVariableValuesForUrl: (params: any) => { |
||||
fillVariableValuesForUrlMock(params); |
||||
}, |
||||
})); |
||||
|
||||
function mockLocationHref(href: string) { |
||||
const location = window.location; |
||||
|
||||
let search = ''; |
||||
const searchPos = href.indexOf('?'); |
||||
if (searchPos >= 0) { |
||||
search = href.substring(searchPos); |
||||
} |
||||
|
||||
delete window.location; |
||||
(window as any).location = { |
||||
...location, |
||||
href, |
||||
search, |
||||
}; |
||||
} |
||||
|
||||
function setUTCTimeZone() { |
||||
(window as any).Intl.DateTimeFormat = () => { |
||||
return { |
||||
resolvedOptions: () => { |
||||
return { timeZone: 'UTC' }; |
||||
}, |
||||
}; |
||||
}; |
||||
} |
||||
|
||||
interface ScenarioContext { |
||||
wrapper?: ShallowWrapper<Props, State, ShareLink>; |
||||
mount: (propOverrides?: Partial<Props>) => void; |
||||
setup: (fn: () => void) => void; |
||||
} |
||||
|
||||
function shareLinkScenario(description: string, scenarioFn: (ctx: ScenarioContext) => void) { |
||||
describe(description, () => { |
||||
let setupFn: () => void; |
||||
|
||||
const ctx: any = { |
||||
setup: (fn: any) => { |
||||
setupFn = fn; |
||||
}, |
||||
mount: (propOverrides?: any) => { |
||||
const props: any = { |
||||
panel: undefined, |
||||
}; |
||||
|
||||
Object.assign(props, propOverrides); |
||||
ctx.wrapper = shallow(<ShareLink {...props} />); |
||||
}, |
||||
}; |
||||
|
||||
beforeEach(() => { |
||||
setUTCTimeZone(); |
||||
setupFn(); |
||||
}); |
||||
|
||||
scenarioFn(ctx); |
||||
}); |
||||
} |
||||
|
||||
describe('ShareModal', () => { |
||||
shareLinkScenario('shareUrl with current time range and panel', ctx => { |
||||
ctx.setup(() => { |
||||
mockLocationHref('http://server/#!/test'); |
||||
config.bootData = { |
||||
user: { |
||||
orgId: 1, |
||||
}, |
||||
}; |
||||
ctx.mount({ |
||||
panel: { id: 22, options: {} }, |
||||
}); |
||||
}); |
||||
|
||||
it('should generate share url absolute time', () => { |
||||
const state = ctx.wrapper?.state(); |
||||
expect(state?.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1&panelId=22&fullscreen'); |
||||
}); |
||||
|
||||
it('should generate render url', () => { |
||||
mockLocationHref('http://dashboards.grafana.com/d/abcdefghi/my-dash'); |
||||
ctx.mount({ |
||||
panel: { id: 22, options: {} }, |
||||
}); |
||||
|
||||
const state = ctx.wrapper?.state(); |
||||
const base = 'http://dashboards.grafana.com/render/d-solo/abcdefghi/my-dash'; |
||||
const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC'; |
||||
expect(state?.imageUrl).toContain(base + params); |
||||
}); |
||||
|
||||
it('should generate render url for scripted dashboard', () => { |
||||
mockLocationHref('http://dashboards.grafana.com/dashboard/script/my-dash.js'); |
||||
ctx.mount({ |
||||
panel: { id: 22, options: {} }, |
||||
}); |
||||
|
||||
const state = ctx.wrapper?.state(); |
||||
const base = 'http://dashboards.grafana.com/render/dashboard-solo/script/my-dash.js'; |
||||
const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC'; |
||||
expect(state?.imageUrl).toContain(base + params); |
||||
}); |
||||
|
||||
it('should remove panel id when no panel in scope', () => { |
||||
ctx.mount({ |
||||
panel: undefined, |
||||
}); |
||||
|
||||
const state = ctx.wrapper?.state(); |
||||
expect(state?.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1'); |
||||
}); |
||||
|
||||
it('should add theme when specified', () => { |
||||
ctx.wrapper?.setProps({ panel: undefined }); |
||||
ctx.wrapper?.setState({ selectedTheme: { label: 'light', value: 'light' } }); |
||||
|
||||
const state = ctx.wrapper?.state(); |
||||
expect(state?.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1&theme=light'); |
||||
}); |
||||
|
||||
it('should remove fullscreen from image url when is first param in querystring and modeSharePanel is true', () => { |
||||
mockLocationHref('http://server/#!/test?fullscreen&edit'); |
||||
ctx.mount({ |
||||
panel: { id: 1, options: {} }, |
||||
}); |
||||
|
||||
const state = ctx.wrapper?.state(); |
||||
expect(state?.shareUrl).toContain('?fullscreen&edit&from=1000&to=2000&orgId=1&panelId=1'); |
||||
expect(state?.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC'); |
||||
}); |
||||
|
||||
it('should remove edit from image url when is first param in querystring and modeSharePanel is true', () => { |
||||
mockLocationHref('http://server/#!/test?edit&fullscreen'); |
||||
ctx.mount({ |
||||
panel: { id: 1, options: {} }, |
||||
}); |
||||
|
||||
const state = ctx.wrapper?.state(); |
||||
expect(state?.shareUrl).toContain('?edit&fullscreen&from=1000&to=2000&orgId=1&panelId=1'); |
||||
expect(state?.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC'); |
||||
}); |
||||
|
||||
it('should include template variables in url', () => { |
||||
mockLocationHref('http://server/#!/test'); |
||||
fillVariableValuesForUrlMock = (params: any) => { |
||||
params['var-app'] = 'mupp'; |
||||
params['var-server'] = 'srv-01'; |
||||
}; |
||||
ctx.mount(); |
||||
ctx.wrapper?.setState({ includeTemplateVars: true }); |
||||
|
||||
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' |
||||
); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,142 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { Switch, Select, ClipboardButton } from '@grafana/ui'; |
||||
import { SelectableValue, PanelModel, AppEvents } from '@grafana/data'; |
||||
import { DashboardModel } from 'app/features/dashboard/state'; |
||||
import { buildImageUrl, buildShareUrl } from './utils'; |
||||
import { appEvents } from 'app/core/core'; |
||||
|
||||
const themeOptions: Array<SelectableValue<string>> = [ |
||||
{ label: 'current', value: 'current' }, |
||||
{ label: 'dark', value: 'dark' }, |
||||
{ label: 'light', value: 'light' }, |
||||
]; |
||||
|
||||
export interface Props { |
||||
dashboard?: DashboardModel; |
||||
panel?: PanelModel; |
||||
} |
||||
|
||||
export interface State { |
||||
useCurrentTimeRange: boolean; |
||||
includeTemplateVars: boolean; |
||||
selectedTheme: SelectableValue<string>; |
||||
shareUrl: string; |
||||
imageUrl: string; |
||||
} |
||||
|
||||
export class ShareLink extends PureComponent<Props, State> { |
||||
constructor(props: Props) { |
||||
super(props); |
||||
this.state = { |
||||
useCurrentTimeRange: true, |
||||
includeTemplateVars: true, |
||||
selectedTheme: themeOptions[0], |
||||
shareUrl: '', |
||||
imageUrl: '', |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.buildUrl(); |
||||
} |
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State) { |
||||
const { useCurrentTimeRange, includeTemplateVars, selectedTheme } = this.state; |
||||
if ( |
||||
prevState.useCurrentTimeRange !== useCurrentTimeRange || |
||||
prevState.includeTemplateVars !== includeTemplateVars || |
||||
prevState.selectedTheme.value !== selectedTheme.value |
||||
) { |
||||
this.buildUrl(); |
||||
} |
||||
} |
||||
|
||||
buildUrl = () => { |
||||
const { panel } = this.props; |
||||
const { useCurrentTimeRange, includeTemplateVars, selectedTheme } = this.state; |
||||
|
||||
const shareUrl = buildShareUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme.value, panel); |
||||
const imageUrl = buildImageUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme.value, panel); |
||||
this.setState({ shareUrl, imageUrl }); |
||||
}; |
||||
|
||||
onUseCurrentTimeRangeChange = () => { |
||||
this.setState({ useCurrentTimeRange: !this.state.useCurrentTimeRange }); |
||||
}; |
||||
|
||||
onIncludeTemplateVarsChange = () => { |
||||
this.setState({ includeTemplateVars: !this.state.includeTemplateVars }); |
||||
}; |
||||
|
||||
onThemeChange = (value: SelectableValue<string>) => { |
||||
this.setState({ selectedTheme: value }); |
||||
}; |
||||
|
||||
onShareUrlCopy = () => { |
||||
appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']); |
||||
}; |
||||
|
||||
getShareUrl = () => { |
||||
return this.state.shareUrl; |
||||
}; |
||||
|
||||
render() { |
||||
const { panel } = this.props; |
||||
const { useCurrentTimeRange, includeTemplateVars, selectedTheme, shareUrl, imageUrl } = this.state; |
||||
|
||||
return ( |
||||
<div className="share-modal-body"> |
||||
<div className="share-modal-header"> |
||||
<div className="share-modal-big-icon"> |
||||
<i className="gicon gicon-link"></i> |
||||
</div> |
||||
<div className="share-modal-content"> |
||||
<p className="share-modal-info-text"> |
||||
Create a direct link to this dashboard or panel, customized with the options below. |
||||
</p> |
||||
<div className="gf-form-group"> |
||||
<Switch |
||||
labelClass="width-12" |
||||
label="Current time range" |
||||
checked={useCurrentTimeRange} |
||||
onChange={this.onUseCurrentTimeRangeChange} |
||||
/> |
||||
<Switch |
||||
labelClass="width-12" |
||||
label="Template variables" |
||||
checked={includeTemplateVars} |
||||
onChange={this.onIncludeTemplateVarsChange} |
||||
/> |
||||
<div className="gf-form"> |
||||
<label className="gf-form-label width-12">Theme</label> |
||||
<Select width={10} options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} /> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<div className="gf-form-group"> |
||||
<div className="gf-form-inline"> |
||||
<div className="gf-form gf-form--grow"> |
||||
<input type="text" className="gf-form-input" defaultValue={shareUrl} /> |
||||
</div> |
||||
<div className="gf-form"> |
||||
<ClipboardButton variant="inverse" getText={this.getShareUrl} onClipboardCopy={this.onShareUrlCopy}> |
||||
Copy |
||||
</ClipboardButton> |
||||
{/* <button className="btn btn-inverse" clipboard-button="getShareUrl()">Copy</button> */} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{panel && ( |
||||
<div className="gf-form"> |
||||
<a href={imageUrl} target="_blank"> |
||||
<i className="fa fa-camera"></i> Direct link rendered image |
||||
</a> |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,86 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { Modal, ModalTabsHeader, TabContent } from '@grafana/ui'; |
||||
import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; |
||||
import { ShareLink } from './ShareLink'; |
||||
import { ShareSnapshot } from './ShareSnapshot'; |
||||
import { ShareExport } from './ShareExport'; |
||||
import { ShareEmbed } from './ShareEmbed'; |
||||
|
||||
const shareModalTabs = [ |
||||
{ label: 'Link', value: 'link' }, |
||||
{ label: 'Embed', value: 'embed' }, |
||||
{ label: 'Snapshot', value: 'snapshot' }, |
||||
{ label: 'Export', value: 'export' }, |
||||
]; |
||||
|
||||
interface Props { |
||||
dashboard: DashboardModel; |
||||
panel?: PanelModel; |
||||
|
||||
onDismiss(): void; |
||||
} |
||||
|
||||
interface State { |
||||
tab: string; |
||||
} |
||||
|
||||
function getInitialState(): State { |
||||
return { |
||||
tab: shareModalTabs[0].value, |
||||
}; |
||||
} |
||||
|
||||
export class ShareModal extends PureComponent<Props, State> { |
||||
constructor(props: Props) { |
||||
super(props); |
||||
this.state = getInitialState(); |
||||
} |
||||
|
||||
onDismiss = () => { |
||||
this.setState(getInitialState()); |
||||
this.props.onDismiss(); |
||||
}; |
||||
|
||||
onSelectTab = (t: any) => { |
||||
this.setState({ tab: t.value }); |
||||
}; |
||||
|
||||
getTabs() { |
||||
const { panel } = this.props; |
||||
|
||||
// Filter tabs for dashboard/panel share modal
|
||||
return shareModalTabs.filter(t => { |
||||
if (panel) { |
||||
return t.value !== 'export'; |
||||
} |
||||
return t.value !== 'embed'; |
||||
}); |
||||
} |
||||
|
||||
renderTitle() { |
||||
const { panel } = this.props; |
||||
const { tab } = this.state; |
||||
const title = panel ? 'Share Panel' : 'Share'; |
||||
const tabs = this.getTabs(); |
||||
|
||||
return ( |
||||
<ModalTabsHeader title={title} icon="share-square-o" tabs={tabs} activeTab={tab} onChangeTab={this.onSelectTab} /> |
||||
); |
||||
} |
||||
|
||||
render() { |
||||
const { dashboard, panel } = this.props; |
||||
const { tab } = this.state; |
||||
|
||||
return ( |
||||
<Modal isOpen={true} title={this.renderTitle()} onDismiss={this.onDismiss}> |
||||
<TabContent> |
||||
{tab === 'link' && <ShareLink dashboard={dashboard} panel={panel} />} |
||||
{tab === 'embed' && panel && <ShareEmbed dashboard={dashboard} panel={panel} />} |
||||
{tab === 'snapshot' && <ShareSnapshot dashboard={dashboard} panel={panel} onDismiss={this.onDismiss} />} |
||||
{tab === 'export' && !panel && <ShareExport dashboard={dashboard} panel={panel} onDismiss={this.onDismiss} />} |
||||
</TabContent> |
||||
</Modal> |
||||
); |
||||
} |
||||
} |
||||
@ -1,150 +0,0 @@ |
||||
import config from 'app/core/config'; |
||||
import { LinkSrv } from 'app/features/panel/panellinks/link_srv'; |
||||
import { ShareModalCtrl } from './ShareModalCtrl'; |
||||
import { TemplateSrv } from 'app/features/templating/template_srv'; |
||||
|
||||
describe('ShareModalCtrl', () => { |
||||
const ctx = { |
||||
timeSrv: { |
||||
timeRange: () => { |
||||
return { from: new Date(1000), to: new Date(2000) }; |
||||
}, |
||||
}, |
||||
$location: { |
||||
absUrl: () => 'http://server/#!/test', |
||||
search: () => { |
||||
return { from: '', to: '' }; |
||||
}, |
||||
}, |
||||
scope: { |
||||
dashboard: { |
||||
meta: { |
||||
isSnapshot: true, |
||||
}, |
||||
}, |
||||
}, |
||||
templateSrv: { |
||||
fillVariableValuesForUrl: () => {}, |
||||
}, |
||||
} as any; |
||||
|
||||
(window as any).Intl.DateTimeFormat = () => { |
||||
return { |
||||
resolvedOptions: () => { |
||||
return { timeZone: 'UTC' }; |
||||
}, |
||||
}; |
||||
}; |
||||
|
||||
beforeEach(() => { |
||||
config.bootData = { |
||||
user: { |
||||
orgId: 1, |
||||
}, |
||||
}; |
||||
// @ts-ignore
|
||||
ctx.ctrl = new ShareModalCtrl( |
||||
ctx.scope, |
||||
{} as any, |
||||
ctx.$location, |
||||
{}, |
||||
ctx.timeSrv, |
||||
ctx.templateSrv, |
||||
new LinkSrv({} as TemplateSrv, ctx.stimeSrv) |
||||
); |
||||
}); |
||||
|
||||
describe('shareUrl with current time range and panel', () => { |
||||
it('should generate share url absolute time', () => { |
||||
ctx.scope.panel = { id: 22 }; |
||||
|
||||
ctx.scope.init(); |
||||
expect(ctx.scope.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1&panelId=22&fullscreen'); |
||||
}); |
||||
|
||||
it('should generate render url', () => { |
||||
ctx.$location.absUrl = () => 'http://dashboards.grafana.com/d/abcdefghi/my-dash'; |
||||
|
||||
ctx.scope.panel = { id: 22 }; |
||||
|
||||
ctx.scope.init(); |
||||
const base = 'http://dashboards.grafana.com/render/d-solo/abcdefghi/my-dash'; |
||||
const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC'; |
||||
expect(ctx.scope.imageUrl).toContain(base + params); |
||||
}); |
||||
|
||||
it('should generate render url for scripted dashboard', () => { |
||||
ctx.$location.absUrl = () => 'http://dashboards.grafana.com/dashboard/script/my-dash.js'; |
||||
|
||||
ctx.scope.panel = { id: 22 }; |
||||
|
||||
ctx.scope.init(); |
||||
const base = 'http://dashboards.grafana.com/render/dashboard-solo/script/my-dash.js'; |
||||
const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC'; |
||||
expect(ctx.scope.imageUrl).toContain(base + params); |
||||
}); |
||||
|
||||
it('should remove panel id when no panel in scope', () => { |
||||
ctx.$location.absUrl = () => 'http://server/#!/test'; |
||||
ctx.scope.options.forCurrent = true; |
||||
ctx.scope.panel = null; |
||||
|
||||
ctx.scope.init(); |
||||
expect(ctx.scope.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1'); |
||||
}); |
||||
|
||||
it('should add theme when specified', () => { |
||||
ctx.scope.options.theme = 'light'; |
||||
ctx.scope.panel = null; |
||||
|
||||
ctx.scope.init(); |
||||
expect(ctx.scope.shareUrl).toBe('http://server/#!/test?from=1000&to=2000&orgId=1&theme=light'); |
||||
}); |
||||
|
||||
it('should remove fullscreen from image url when is first param in querystring and modeSharePanel is true', () => { |
||||
ctx.$location.search = () => { |
||||
return { fullscreen: true, edit: true }; |
||||
}; |
||||
ctx.$location.absUrl = () => 'http://server/#!/test?fullscreen&edit'; |
||||
ctx.scope.modeSharePanel = true; |
||||
ctx.scope.panel = { id: 1 }; |
||||
|
||||
ctx.scope.buildUrl(); |
||||
|
||||
expect(ctx.scope.shareUrl).toContain('?fullscreen&edit&from=1000&to=2000&orgId=1&panelId=1'); |
||||
expect(ctx.scope.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC'); |
||||
}); |
||||
|
||||
it('should remove edit from image url when is first param in querystring and modeSharePanel is true', () => { |
||||
ctx.$location.search = () => { |
||||
return { edit: true, fullscreen: true }; |
||||
}; |
||||
ctx.$location.absUrl = () => 'http://server/#!/test?edit&fullscreen'; |
||||
ctx.scope.modeSharePanel = true; |
||||
ctx.scope.panel = { id: 1 }; |
||||
|
||||
ctx.scope.buildUrl(); |
||||
|
||||
expect(ctx.scope.shareUrl).toContain('?edit&fullscreen&from=1000&to=2000&orgId=1&panelId=1'); |
||||
expect(ctx.scope.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC'); |
||||
}); |
||||
|
||||
it('should include template variables in url', () => { |
||||
ctx.$location.search = () => { |
||||
return {}; |
||||
}; |
||||
ctx.$location.absUrl = () => 'http://server/#!/test'; |
||||
ctx.scope.options.includeTemplateVars = true; |
||||
|
||||
ctx.templateSrv.fillVariableValuesForUrl = (params: any) => { |
||||
params['var-app'] = 'mupp'; |
||||
params['var-server'] = 'srv-01'; |
||||
}; |
||||
|
||||
ctx.scope.buildUrl(); |
||||
expect(ctx.scope.shareUrl).toContain( |
||||
'http://server/#!/test?from=1000&to=2000&orgId=1&var-app=mupp&var-server=srv-01' |
||||
); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,137 +0,0 @@ |
||||
import angular, { ILocationService } from 'angular'; |
||||
import { dateTime } from '@grafana/data'; |
||||
import { e2e } from '@grafana/e2e'; |
||||
|
||||
import config from 'app/core/config'; |
||||
import { appendQueryToUrl, toUrlParams } from 'app/core/utils/url'; |
||||
import { TimeSrv } from '../../services/TimeSrv'; |
||||
import { TemplateSrv } from 'app/features/templating/template_srv'; |
||||
import { LinkSrv } from 'app/features/panel/panellinks/link_srv'; |
||||
import { GrafanaRootScope } from 'app/routes/GrafanaCtrl'; |
||||
|
||||
/** @ngInject */ |
||||
export function ShareModalCtrl( |
||||
$scope: any, |
||||
$rootScope: GrafanaRootScope, |
||||
$location: ILocationService, |
||||
$timeout: any, |
||||
timeSrv: TimeSrv, |
||||
templateSrv: TemplateSrv, |
||||
linkSrv: LinkSrv |
||||
) { |
||||
$scope.options = { |
||||
forCurrent: true, |
||||
includeTemplateVars: true, |
||||
theme: 'current', |
||||
}; |
||||
$scope.editor = { index: $scope.tabIndex || 0 }; |
||||
$scope.selectors = e2e.pages.SharePanelModal.selectors; |
||||
|
||||
$scope.init = () => { |
||||
$scope.panel = $scope.model && $scope.model.panel ? $scope.model.panel : $scope.panel; // React pass panel and dashboard in the "model" property
|
||||
$scope.dashboard = $scope.model && $scope.model.dashboard ? $scope.model.dashboard : $scope.dashboard; // ^
|
||||
$scope.modeSharePanel = $scope.panel ? true : false; |
||||
|
||||
$scope.tabs = [{ title: 'Link', src: 'shareLink.html' }]; |
||||
|
||||
if ($scope.modeSharePanel) { |
||||
$scope.modalTitle = 'Share Panel'; |
||||
$scope.tabs.push({ title: 'Embed', src: 'shareEmbed.html' }); |
||||
} else { |
||||
$scope.modalTitle = 'Share'; |
||||
} |
||||
|
||||
if (!$scope.dashboard.meta.isSnapshot) { |
||||
$scope.tabs.push({ title: 'Snapshot', src: 'shareSnapshot.html' }); |
||||
} |
||||
|
||||
if (!$scope.dashboard.meta.isSnapshot && !$scope.modeSharePanel) { |
||||
$scope.tabs.push({ title: 'Export', src: 'shareExport.html' }); |
||||
} |
||||
|
||||
$scope.buildUrl(); |
||||
}; |
||||
|
||||
$scope.buildUrl = () => { |
||||
let baseUrl = $location.absUrl(); |
||||
const queryStart = baseUrl.indexOf('?'); |
||||
|
||||
if (queryStart !== -1) { |
||||
baseUrl = baseUrl.substring(0, queryStart); |
||||
} |
||||
|
||||
const params = angular.copy($location.search()); |
||||
|
||||
const range = timeSrv.timeRange(); |
||||
params.from = range.from.valueOf(); |
||||
params.to = range.to.valueOf(); |
||||
params.orgId = config.bootData.user.orgId; |
||||
|
||||
if ($scope.options.includeTemplateVars) { |
||||
templateSrv.fillVariableValuesForUrl(params); |
||||
} |
||||
|
||||
if (!$scope.options.forCurrent) { |
||||
delete params.from; |
||||
delete params.to; |
||||
} |
||||
|
||||
if ($scope.options.theme !== 'current') { |
||||
params.theme = $scope.options.theme; |
||||
} |
||||
|
||||
if ($scope.modeSharePanel) { |
||||
params.panelId = $scope.panel.id; |
||||
params.fullscreen = true; |
||||
} else { |
||||
delete params.panelId; |
||||
delete params.fullscreen; |
||||
} |
||||
|
||||
$scope.shareUrl = appendQueryToUrl(baseUrl, toUrlParams(params)); |
||||
|
||||
let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/'); |
||||
soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/'); |
||||
delete params.fullscreen; |
||||
delete params.edit; |
||||
soloUrl = appendQueryToUrl(soloUrl, toUrlParams(params)); |
||||
|
||||
$scope.iframeHtml = '<iframe src="' + soloUrl + '" width="450" height="200" frameborder="0"></iframe>'; |
||||
|
||||
$scope.imageUrl = soloUrl.replace( |
||||
config.appSubUrl + '/dashboard-solo/', |
||||
config.appSubUrl + '/render/dashboard-solo/' |
||||
); |
||||
$scope.imageUrl = $scope.imageUrl.replace(config.appSubUrl + '/d-solo/', config.appSubUrl + '/render/d-solo/'); |
||||
$scope.imageUrl += '&width=1000&height=500' + $scope.getLocalTimeZone(); |
||||
}; |
||||
|
||||
// This function will try to return the proper full name of the local timezone
|
||||
// Chrome does not handle the timezone offset (but phantomjs does)
|
||||
$scope.getLocalTimeZone = () => { |
||||
const utcOffset = '&tz=UTC' + encodeURIComponent(dateTime().format('Z')); |
||||
|
||||
// Older browser does not the internationalization API
|
||||
if (!(window as any).Intl) { |
||||
return utcOffset; |
||||
} |
||||
|
||||
const dateFormat = (window as any).Intl.DateTimeFormat(); |
||||
if (!dateFormat.resolvedOptions) { |
||||
return utcOffset; |
||||
} |
||||
|
||||
const options = dateFormat.resolvedOptions(); |
||||
if (!options.timeZone) { |
||||
return utcOffset; |
||||
} |
||||
|
||||
return '&tz=' + encodeURIComponent(options.timeZone); |
||||
}; |
||||
|
||||
$scope.getShareUrl = () => { |
||||
return $scope.shareUrl; |
||||
}; |
||||
} |
||||
|
||||
angular.module('grafana.controllers').controller('ShareModalCtrl', ShareModalCtrl); |
||||
@ -0,0 +1,316 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { Button, Select, LinkButton, Input, ClipboardButton } from '@grafana/ui'; |
||||
import { SelectableValue, AppEvents } from '@grafana/data'; |
||||
import { getBackendSrv } from '@grafana/runtime'; |
||||
import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; |
||||
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv'; |
||||
import { appEvents } from 'app/core/core'; |
||||
|
||||
const snapshotApiUrl = '/api/snapshots'; |
||||
|
||||
const expireOptions: Array<SelectableValue<number>> = [ |
||||
{ label: 'Never', value: 0 }, |
||||
{ label: '1 Hour', value: 60 * 60 }, |
||||
{ label: '1 Day', value: 60 * 60 * 24 }, |
||||
{ label: '7 Days', value: 60 * 60 * 24 * 7 }, |
||||
]; |
||||
|
||||
interface Props { |
||||
dashboard: DashboardModel; |
||||
panel?: PanelModel; |
||||
onDismiss(): void; |
||||
} |
||||
|
||||
interface State { |
||||
isLoading: boolean; |
||||
step: number; |
||||
snapshotName: string; |
||||
selectedExpireOption: SelectableValue<number>; |
||||
snapshotExpires?: number; |
||||
snapshotUrl: string; |
||||
deleteUrl: string; |
||||
timeoutSeconds: number; |
||||
externalEnabled: boolean; |
||||
sharingButtonText: string; |
||||
} |
||||
|
||||
export class ShareSnapshot extends PureComponent<Props, State> { |
||||
private dashboard: DashboardModel; |
||||
|
||||
constructor(props: Props) { |
||||
super(props); |
||||
this.dashboard = props.dashboard; |
||||
this.state = { |
||||
isLoading: false, |
||||
step: 1, |
||||
selectedExpireOption: expireOptions[0], |
||||
snapshotExpires: expireOptions[0].value, |
||||
snapshotName: props.dashboard.title, |
||||
timeoutSeconds: 4, |
||||
snapshotUrl: '', |
||||
deleteUrl: '', |
||||
externalEnabled: false, |
||||
sharingButtonText: '', |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.getSnaphotShareOptions(); |
||||
} |
||||
|
||||
async getSnaphotShareOptions() { |
||||
const shareOptions = await getBackendSrv().get('/api/snapshot/shared-options'); |
||||
this.setState({ |
||||
sharingButtonText: shareOptions['externalSnapshotName'], |
||||
externalEnabled: shareOptions['externalEnabled'], |
||||
}); |
||||
} |
||||
|
||||
createSnapshot = (external?: boolean) => () => { |
||||
const { timeoutSeconds } = this.state; |
||||
this.dashboard.snapshot = { |
||||
timestamp: new Date(), |
||||
}; |
||||
|
||||
if (!external) { |
||||
this.dashboard.snapshot.originalUrl = window.location.href; |
||||
} |
||||
|
||||
this.setState({ isLoading: true }); |
||||
this.dashboard.startRefresh(); |
||||
|
||||
setTimeout(() => { |
||||
this.saveSnapshot(this.dashboard, external); |
||||
}, timeoutSeconds * 1000); |
||||
}; |
||||
|
||||
saveSnapshot = async (dashboard: DashboardModel, external?: boolean) => { |
||||
const { snapshotExpires } = this.state; |
||||
const dash = this.dashboard.getSaveModelClone(); |
||||
this.scrubDashboard(dash); |
||||
|
||||
const cmdData = { |
||||
dashboard: dash, |
||||
name: dash.title, |
||||
expires: snapshotExpires, |
||||
external: external, |
||||
}; |
||||
|
||||
try { |
||||
const results: { deleteUrl: any; url: any } = await getBackendSrv().post(snapshotApiUrl, cmdData); |
||||
this.setState({ |
||||
deleteUrl: results.deleteUrl, |
||||
snapshotUrl: results.url, |
||||
step: 2, |
||||
}); |
||||
} finally { |
||||
this.setState({ isLoading: false }); |
||||
} |
||||
}; |
||||
|
||||
scrubDashboard = (dash: DashboardModel) => { |
||||
const { panel } = this.props; |
||||
const { snapshotName } = this.state; |
||||
// change title
|
||||
dash.title = snapshotName; |
||||
|
||||
// make relative times absolute
|
||||
dash.time = getTimeSrv().timeRange(); |
||||
|
||||
// remove panel queries & links
|
||||
dash.panels.forEach(panel => { |
||||
panel.targets = []; |
||||
panel.links = []; |
||||
panel.datasource = null; |
||||
}); |
||||
|
||||
// remove annotation queries
|
||||
const annotations = dash.annotations.list.filter(annotation => annotation.enable); |
||||
dash.annotations.list = annotations.map((annotation: any) => { |
||||
return { |
||||
name: annotation.name, |
||||
enable: annotation.enable, |
||||
iconColor: annotation.iconColor, |
||||
snapshotData: annotation.snapshotData, |
||||
type: annotation.type, |
||||
builtIn: annotation.builtIn, |
||||
hide: annotation.hide, |
||||
}; |
||||
}); |
||||
|
||||
// remove template queries
|
||||
dash.templating.list.forEach(variable => { |
||||
variable.query = ''; |
||||
variable.options = variable.current; |
||||
variable.refresh = false; |
||||
}); |
||||
|
||||
// snapshot single panel
|
||||
if (panel) { |
||||
const singlePanel = panel.getSaveModel(); |
||||
singlePanel.gridPos.w = 24; |
||||
singlePanel.gridPos.x = 0; |
||||
singlePanel.gridPos.y = 0; |
||||
singlePanel.gridPos.h = 20; |
||||
dash.panels = [singlePanel]; |
||||
} |
||||
|
||||
// cleanup snapshotData
|
||||
delete this.dashboard.snapshot; |
||||
this.dashboard.forEachPanel((panel: PanelModel) => { |
||||
delete panel.snapshotData; |
||||
}); |
||||
this.dashboard.annotations.list.forEach(annotation => { |
||||
delete annotation.snapshotData; |
||||
}); |
||||
}; |
||||
|
||||
deleteSnapshot = async () => { |
||||
const { deleteUrl } = this.state; |
||||
await getBackendSrv().get(deleteUrl); |
||||
this.setState({ step: 3 }); |
||||
}; |
||||
|
||||
getSnapshotUrl = () => { |
||||
return this.state.snapshotUrl; |
||||
}; |
||||
|
||||
onSnapshotNameChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
||||
this.setState({ snapshotName: event.target.value }); |
||||
}; |
||||
|
||||
onTimeoutChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
||||
this.setState({ timeoutSeconds: Number(event.target.value) }); |
||||
}; |
||||
|
||||
onExpireChange = (option: SelectableValue<number>) => { |
||||
this.setState({ |
||||
selectedExpireOption: option, |
||||
snapshotExpires: option.value, |
||||
}); |
||||
}; |
||||
|
||||
onSnapshotUrlCopy = () => { |
||||
appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']); |
||||
}; |
||||
|
||||
renderStep1() { |
||||
const { onDismiss } = this.props; |
||||
const { |
||||
snapshotName, |
||||
selectedExpireOption, |
||||
timeoutSeconds, |
||||
isLoading, |
||||
sharingButtonText, |
||||
externalEnabled, |
||||
} = this.state; |
||||
|
||||
return ( |
||||
<> |
||||
<div> |
||||
<p className="share-modal-info-text"> |
||||
A snapshot is an instant way to share an interactive dashboard publicly. When created, we{' '} |
||||
<strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links, |
||||
leaving only the visible metric data and series names embedded into your dashboard. |
||||
</p> |
||||
<p className="share-modal-info-text"> |
||||
Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the |
||||
URL. Share wisely. |
||||
</p> |
||||
</div> |
||||
<div className="gf-form-group share-modal-options"> |
||||
<div className="gf-form" ng-if="step === 1"> |
||||
<label className="gf-form-label width-12">Snapshot name</label> |
||||
<Input width={15} value={snapshotName} onChange={this.onSnapshotNameChange} /> |
||||
</div> |
||||
<div className="gf-form" ng-if="step === 1"> |
||||
<label className="gf-form-label width-12">Expire</label> |
||||
<Select width={15} options={expireOptions} value={selectedExpireOption} onChange={this.onExpireChange} /> |
||||
</div> |
||||
</div> |
||||
|
||||
<p className="share-modal-info-text"> |
||||
You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics. |
||||
</p> |
||||
|
||||
<div className="gf-form-group share-modal-options"> |
||||
<div className="gf-form"> |
||||
<span className="gf-form-label width-12">Timeout (seconds)</span> |
||||
<Input type="number" width={15} value={timeoutSeconds} onChange={this.onTimeoutChange} /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="gf-form-button-row"> |
||||
<Button className="width-10" variant="primary" disabled={isLoading} onClick={this.createSnapshot()}> |
||||
Local Snapshot |
||||
</Button> |
||||
{externalEnabled && ( |
||||
<Button className="width-16" variant="secondary" disabled={isLoading} onClick={this.createSnapshot(true)}> |
||||
{sharingButtonText} |
||||
</Button> |
||||
)} |
||||
<Button variant="inverse" onClick={onDismiss}> |
||||
Cancel |
||||
</Button> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
renderStep2() { |
||||
const { snapshotUrl } = this.state; |
||||
|
||||
return ( |
||||
<> |
||||
<div className="gf-form" style={{ marginTop: '40px' }}> |
||||
<div className="gf-form-row"> |
||||
<a href={snapshotUrl} className="large share-modal-link" target="_blank"> |
||||
<i className="fa fa-external-link-square"></i> {snapshotUrl} |
||||
</a> |
||||
<br /> |
||||
<ClipboardButton variant="inverse" getText={this.getSnapshotUrl} onClipboardCopy={this.onSnapshotUrlCopy}> |
||||
Copy Link |
||||
</ClipboardButton> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="pull-right" ng-if="step === 2" style={{ padding: '5px' }}> |
||||
Did you make a mistake?{' '} |
||||
<LinkButton variant="link" target="_blank" onClick={this.deleteSnapshot}> |
||||
delete snapshot. |
||||
</LinkButton> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
renderStep3() { |
||||
return ( |
||||
<div className="share-modal-header"> |
||||
<p className="share-modal-info-text"> |
||||
The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before |
||||
it is removed from browser caches or CDN caches. |
||||
</p> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
render() { |
||||
const { isLoading, step } = this.state; |
||||
|
||||
return ( |
||||
<div className="share-modal-body"> |
||||
<div className="share-modal-header"> |
||||
<div className="share-modal-big-icon"> |
||||
{isLoading ? <i className="fa fa-spinner fa-spin"></i> : <i className="gicon gicon-snapshots"></i>} |
||||
</div> |
||||
<div className="share-modal-content"> |
||||
{step === 1 && this.renderStep1()} |
||||
{step === 2 && this.renderStep2()} |
||||
{step === 3 && this.renderStep3()} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -1,175 +0,0 @@ |
||||
import angular, { ILocationService, IScope } from 'angular'; |
||||
import _ from 'lodash'; |
||||
import { getBackendSrv } from '@grafana/runtime'; |
||||
|
||||
import { TimeSrv } from '../../services/TimeSrv'; |
||||
import { DashboardModel } from '../../state/DashboardModel'; |
||||
import { PanelModel } from '../../state/PanelModel'; |
||||
import { GrafanaRootScope } from 'app/routes/GrafanaCtrl'; |
||||
import { promiseToDigest } from '../../../../core/utils/promiseToDigest'; |
||||
|
||||
export class ShareSnapshotCtrl { |
||||
/** @ngInject */ |
||||
constructor( |
||||
$scope: IScope & Record<string, any>, |
||||
$rootScope: GrafanaRootScope, |
||||
$location: ILocationService, |
||||
$timeout: any, |
||||
timeSrv: TimeSrv |
||||
) { |
||||
$scope.snapshot = { |
||||
name: $scope.dashboard.title, |
||||
expires: 0, |
||||
timeoutSeconds: 4, |
||||
}; |
||||
|
||||
$scope.step = 1; |
||||
|
||||
$scope.expireOptions = [ |
||||
{ text: '1 Hour', value: 60 * 60 }, |
||||
{ text: '1 Day', value: 60 * 60 * 24 }, |
||||
{ text: '7 Days', value: 60 * 60 * 24 * 7 }, |
||||
{ text: 'Never', value: 0 }, |
||||
]; |
||||
|
||||
$scope.accessOptions = [ |
||||
{ text: 'Anyone with the link', value: 1 }, |
||||
{ text: 'Organization users', value: 2 }, |
||||
{ text: 'Public on the web', value: 3 }, |
||||
]; |
||||
|
||||
$scope.init = () => { |
||||
promiseToDigest($scope)( |
||||
getBackendSrv() |
||||
.get('/api/snapshot/shared-options') |
||||
.then((options: { [x: string]: any }) => { |
||||
$scope.sharingButtonText = options['externalSnapshotName']; |
||||
$scope.externalEnabled = options['externalEnabled']; |
||||
}) |
||||
); |
||||
}; |
||||
|
||||
$scope.apiUrl = '/api/snapshots'; |
||||
|
||||
$scope.createSnapshot = (external: any) => { |
||||
$scope.dashboard.snapshot = { |
||||
timestamp: new Date(), |
||||
}; |
||||
|
||||
if (!external) { |
||||
$scope.dashboard.snapshot.originalUrl = $location.absUrl(); |
||||
} |
||||
|
||||
$scope.loading = true; |
||||
$scope.snapshot.external = external; |
||||
$scope.dashboard.startRefresh(); |
||||
|
||||
$timeout(() => { |
||||
$scope.saveSnapshot(external); |
||||
}, $scope.snapshot.timeoutSeconds * 1000); |
||||
}; |
||||
|
||||
$scope.saveSnapshot = (external: any) => { |
||||
const dash = $scope.dashboard.getSaveModelClone(); |
||||
$scope.scrubDashboard(dash); |
||||
|
||||
const cmdData = { |
||||
dashboard: dash, |
||||
name: dash.title, |
||||
expires: $scope.snapshot.expires, |
||||
external: external, |
||||
}; |
||||
|
||||
promiseToDigest($scope)( |
||||
getBackendSrv() |
||||
.post($scope.apiUrl, cmdData) |
||||
.then( |
||||
(results: { deleteUrl: any; url: any }) => { |
||||
$scope.loading = false; |
||||
$scope.deleteUrl = results.deleteUrl; |
||||
$scope.snapshotUrl = results.url; |
||||
$scope.step = 2; |
||||
}, |
||||
() => { |
||||
$scope.loading = false; |
||||
} |
||||
) |
||||
); |
||||
}; |
||||
|
||||
$scope.getSnapshotUrl = () => { |
||||
return $scope.snapshotUrl; |
||||
}; |
||||
|
||||
$scope.scrubDashboard = (dash: DashboardModel) => { |
||||
// change title
|
||||
dash.title = $scope.snapshot.name; |
||||
|
||||
// make relative times absolute
|
||||
dash.time = timeSrv.timeRange(); |
||||
|
||||
// remove panel queries & links
|
||||
_.each(dash.panels, panel => { |
||||
panel.targets = []; |
||||
panel.links = []; |
||||
panel.datasource = null; |
||||
}); |
||||
|
||||
// remove annotation queries
|
||||
dash.annotations.list = _.chain(dash.annotations.list) |
||||
.filter(annotation => { |
||||
return annotation.enable; |
||||
}) |
||||
.map((annotation: any) => { |
||||
return { |
||||
name: annotation.name, |
||||
enable: annotation.enable, |
||||
iconColor: annotation.iconColor, |
||||
snapshotData: annotation.snapshotData, |
||||
type: annotation.type, |
||||
builtIn: annotation.builtIn, |
||||
hide: annotation.hide, |
||||
}; |
||||
}) |
||||
.value(); |
||||
|
||||
// remove template queries
|
||||
_.each(dash.templating.list, variable => { |
||||
variable.query = ''; |
||||
variable.options = variable.current; |
||||
variable.refresh = false; |
||||
}); |
||||
|
||||
// snapshot single panel
|
||||
if ($scope.modeSharePanel) { |
||||
const singlePanel = $scope.panel.getSaveModel(); |
||||
singlePanel.gridPos.w = 24; |
||||
singlePanel.gridPos.x = 0; |
||||
singlePanel.gridPos.y = 0; |
||||
singlePanel.gridPos.h = 20; |
||||
dash.panels = [singlePanel]; |
||||
} |
||||
|
||||
// cleanup snapshotData
|
||||
delete $scope.dashboard.snapshot; |
||||
$scope.dashboard.forEachPanel((panel: PanelModel) => { |
||||
delete panel.snapshotData; |
||||
}); |
||||
_.each($scope.dashboard.annotations.list, annotation => { |
||||
delete annotation.snapshotData; |
||||
}); |
||||
}; |
||||
|
||||
$scope.deleteSnapshot = () => { |
||||
promiseToDigest($scope)( |
||||
getBackendSrv() |
||||
.get($scope.deleteUrl) |
||||
.then(() => { |
||||
$scope.step = 3; |
||||
}) |
||||
); |
||||
}; |
||||
} |
||||
} |
||||
|
||||
angular.module('grafana.controllers').controller('ShareSnapshotCtrl', ShareSnapshotCtrl); |
||||
@ -1,2 +0,0 @@ |
||||
export { ShareModalCtrl } from './ShareModalCtrl'; |
||||
export { ShareSnapshotCtrl } from './ShareSnapshotCtrl'; |
||||
@ -1,182 +0,0 @@ |
||||
<div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()"> |
||||
<div class="modal-header"> |
||||
<h2 class="modal-header-title"> |
||||
<i class="fa fa-share-square-o"></i> |
||||
<span class="p-l-1">{{ modalTitle }}</span> |
||||
</h2> |
||||
|
||||
<ul class="gf-tabs"> |
||||
<li class="gf-tabs-item" ng-repeat="tab in tabs"> |
||||
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}"> |
||||
{{::tab.title}} |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<a class="modal-header-close" ng-click="dismiss();"> |
||||
<i class="fa fa-remove"></i> |
||||
</a> |
||||
</div> |
||||
|
||||
<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index"> |
||||
<div ng-include src="tab.src" class="share-modal-body"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<script type="text/ng-template" id="shareEmbed.html"> |
||||
<div class="share-modal-header"> |
||||
<div class="share-modal-big-icon"> |
||||
<i class="fa fa-code"></i> |
||||
</div> |
||||
<div class="share-modal-content"> |
||||
<div ng-include src="'shareLinkOptions.html'"></div> |
||||
|
||||
<p class="share-modal-info-text"> |
||||
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. |
||||
</p> |
||||
|
||||
<div class="gf-form-group gf-form--grow"> |
||||
<div class="gf-form"> |
||||
<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</script> |
||||
|
||||
<script type="text/ng-template" id="shareExport.html"> |
||||
<dash-export-modal dismiss="dismiss()"></dash-export-modal> |
||||
</script> |
||||
|
||||
<script type="text/ng-template" id="shareLinkOptions.html"> |
||||
<div class="gf-form-group"> |
||||
<gf-form-switch class="gf-form" |
||||
label="Current time range" label-class="width-12" switch-class="max-width-6" |
||||
checked="options.forCurrent" on-change="buildUrl()"> |
||||
</gf-form-switch> |
||||
<gf-form-switch class="gf-form" |
||||
label="Template variables" label-class="width-12" switch-class="max-width-6" |
||||
checked="options.includeTemplateVars" on-change="buildUrl()"> |
||||
</gf-form-switch> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-12">Theme</span> |
||||
<div class="gf-form-select-wrapper width-10"> |
||||
<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</script> |
||||
|
||||
<script type="text/ng-template" id="shareLink.html"> |
||||
<div class="share-modal-header"> |
||||
<div class="share-modal-big-icon"> |
||||
<i class="gicon gicon-link"></i> |
||||
</div> |
||||
<div class="share-modal-content"> |
||||
<p class="share-modal-info-text"> |
||||
Create a direct link to this dashboard or panel, customized with the options below. |
||||
</p> |
||||
<div ng-include src="'shareLinkOptions.html'"></div> |
||||
<div> |
||||
<div class="gf-form-group"> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form gf-form--grow"> |
||||
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"> |
||||
</div> |
||||
<div class="gf-form"> |
||||
<button class="btn btn-inverse" clipboard-button="getShareUrl()">Copy</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="gf-form" ng-show="modeSharePanel"> |
||||
<a href="{{imageUrl}}" target="_blank" aria-label={{selectors.linkToRenderedImage}}><i class="fa fa-camera"></i> Direct link rendered image</a> |
||||
</div> |
||||
</div> |
||||
</script> |
||||
|
||||
<script type="text/ng-template" id="shareSnapshot.html"> |
||||
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()"> |
||||
<div class="share-modal-header"> |
||||
<div class="share-modal-big-icon"> |
||||
<i ng-if="loading" class="fa fa-spinner fa-spin"></i> |
||||
<i ng-if="!loading" class="gicon gicon-snapshots"></i> |
||||
</div> |
||||
<div class="share-modal-content"> |
||||
<div ng-if="step === 1"> |
||||
<p class="share-modal-info-text"> |
||||
A snapshot is an instant way to share an interactive dashboard publicly. |
||||
When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links, |
||||
leaving only the visible metric data and series names embedded into your dashboard. |
||||
</p> |
||||
<p class="share-modal-info-text"> |
||||
Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL. |
||||
Share wisely. |
||||
</p> |
||||
</div> |
||||
|
||||
<div class="share-modal-header" ng-if="step === 3"> |
||||
<p class="share-modal-info-text"> |
||||
The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from |
||||
browser caches or CDN caches. |
||||
</p> |
||||
</div> |
||||
|
||||
<div class="gf-form-group share-modal-options"> |
||||
<div class="gf-form" ng-if="step === 1"> |
||||
<span class="gf-form-label width-12">Snapshot name</span> |
||||
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15"> |
||||
</div> |
||||
<div class="gf-form" ng-if="step === 1"> |
||||
<span class="gf-form-label width-12">Expire</span> |
||||
<div class="gf-form-select-wrapper max-width-15"> |
||||
<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px"> |
||||
<div class="gf-form-row"> |
||||
<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank"> |
||||
<i class="fa fa-external-link-square"></i> |
||||
{{snapshotUrl}} |
||||
</a> |
||||
<br> |
||||
<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()">Copy Link</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div ng-if="step === 1"> |
||||
<p class="share-modal-info-text"> |
||||
You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics. |
||||
</p> |
||||
</div> |
||||
|
||||
<div class="gf-form-group share-modal-options"> |
||||
<div class="gf-form" ng-if="step === 1"> |
||||
<span class="gf-form-label width-12">Timeout (seconds)</span> |
||||
<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div ng-if="step === 1" class="gf-form-button-row"> |
||||
<button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading"> |
||||
Local Snapshot |
||||
</button> |
||||
<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading"> |
||||
{{sharingButtonText}} |
||||
</button> |
||||
<a class="btn btn-link" ng-click="dismiss()">Cancel</a> |
||||
</div> |
||||
|
||||
<div class="pull-right" ng-if="step === 2" style="padding: 5px"> |
||||
Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</script> |
||||
@ -0,0 +1,126 @@ |
||||
import { config } from '@grafana/runtime'; |
||||
import { appendQueryToUrl, toUrlParams, getUrlSearchParams } from 'app/core/utils/url'; |
||||
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv'; |
||||
import templateSrv from 'app/features/templating/template_srv'; |
||||
import { PanelModel, dateTime } from '@grafana/data'; |
||||
|
||||
export function buildParams( |
||||
useCurrentTimeRange: boolean, |
||||
includeTemplateVars: boolean, |
||||
selectedTheme?: string, |
||||
panel?: PanelModel |
||||
) { |
||||
const params = getUrlSearchParams(); |
||||
|
||||
const range = getTimeSrv().timeRange(); |
||||
params.from = range.from.valueOf(); |
||||
params.to = range.to.valueOf(); |
||||
params.orgId = config.bootData.user.orgId; |
||||
|
||||
if (!useCurrentTimeRange) { |
||||
delete params.from; |
||||
delete params.to; |
||||
} |
||||
|
||||
if (includeTemplateVars) { |
||||
templateSrv.fillVariableValuesForUrl(params); |
||||
} |
||||
|
||||
if (selectedTheme !== 'current') { |
||||
params.theme = selectedTheme; |
||||
} |
||||
|
||||
if (panel) { |
||||
params.panelId = panel.id; |
||||
params.fullscreen = true; |
||||
} else { |
||||
delete params.panelId; |
||||
delete params.fullscreen; |
||||
} |
||||
|
||||
return params; |
||||
} |
||||
|
||||
export function buildBaseUrl() { |
||||
let baseUrl = window.location.href; |
||||
const queryStart = baseUrl.indexOf('?'); |
||||
|
||||
if (queryStart !== -1) { |
||||
baseUrl = baseUrl.substring(0, queryStart); |
||||
} |
||||
|
||||
return baseUrl; |
||||
} |
||||
|
||||
export function buildShareUrl( |
||||
useCurrentTimeRange: boolean, |
||||
includeTemplateVars: boolean, |
||||
selectedTheme?: string, |
||||
panel?: PanelModel |
||||
) { |
||||
const baseUrl = buildBaseUrl(); |
||||
const params = buildParams(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); |
||||
|
||||
return appendQueryToUrl(baseUrl, toUrlParams(params)); |
||||
} |
||||
|
||||
export function buildSoloUrl( |
||||
useCurrentTimeRange: boolean, |
||||
includeTemplateVars: boolean, |
||||
selectedTheme?: string, |
||||
panel?: PanelModel |
||||
) { |
||||
const baseUrl = buildBaseUrl(); |
||||
const params = buildParams(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); |
||||
|
||||
let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/'); |
||||
soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/'); |
||||
delete params.fullscreen; |
||||
delete params.edit; |
||||
return appendQueryToUrl(soloUrl, toUrlParams(params)); |
||||
} |
||||
|
||||
export function buildImageUrl( |
||||
useCurrentTimeRange: boolean, |
||||
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/'); |
||||
imageUrl = imageUrl.replace(config.appSubUrl + '/d-solo/', config.appSubUrl + '/render/d-solo/'); |
||||
imageUrl += '&width=1000&height=500' + getLocalTimeZone(); |
||||
return imageUrl; |
||||
} |
||||
|
||||
export function buildIframeHtml( |
||||
useCurrentTimeRange: boolean, |
||||
includeTemplateVars: boolean, |
||||
selectedTheme?: string, |
||||
panel?: PanelModel |
||||
) { |
||||
let soloUrl = buildSoloUrl(useCurrentTimeRange, includeTemplateVars, selectedTheme, panel); |
||||
return '<iframe src="' + soloUrl + '" width="450" height="200" frameborder="0"></iframe>'; |
||||
} |
||||
|
||||
export function getLocalTimeZone() { |
||||
const utcOffset = '&tz=UTC' + encodeURIComponent(dateTime().format('Z')); |
||||
|
||||
// Older browser does not the internationalization API
|
||||
if (!(window as any).Intl) { |
||||
return utcOffset; |
||||
} |
||||
|
||||
const dateFormat = (window as any).Intl.DateTimeFormat(); |
||||
if (!dateFormat.resolvedOptions) { |
||||
return utcOffset; |
||||
} |
||||
|
||||
const options = dateFormat.resolvedOptions(); |
||||
if (!options.timeZone) { |
||||
return utcOffset; |
||||
} |
||||
|
||||
return '&tz=' + encodeURIComponent(options.timeZone); |
||||
} |
||||
Loading…
Reference in new issue