87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import { PropsWithChildren } from 'react';
|
|
|
|
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
|
|
import { SceneObjectRef, VizPanel } from '@grafana/scenes';
|
|
import { Alert, Button, Divider, Field, RadioButtonGroup, Stack, Text, useStyles2 } from '@grafana/ui';
|
|
import { Input } from '@grafana/ui/src/components/Input/Input';
|
|
import { t, Trans } from 'app/core/internationalization';
|
|
|
|
import { getExpireOptions } from '../../ShareSnapshotTab';
|
|
|
|
const DASHBOARD_SNAPSHOT_URL =
|
|
'https://grafana.com/docs/grafana/next/dashboards/share-dashboards-panels/#share-a-snapshot';
|
|
|
|
const PANEL_SNAPSHOT_URL = 'https://grafana.com/docs/grafana/next/dashboards/share-dashboards-panels/#panel-snapshot';
|
|
|
|
interface Props {
|
|
name: string;
|
|
selectedExpireOption: SelectableValue<number>;
|
|
onNameChange: (v: string) => void;
|
|
onExpireChange: (v: number) => void;
|
|
panelRef?: SceneObjectRef<VizPanel>;
|
|
disableInputs: boolean;
|
|
}
|
|
export function UpsertSnapshot({
|
|
name,
|
|
onNameChange,
|
|
onExpireChange,
|
|
selectedExpireOption,
|
|
panelRef,
|
|
disableInputs,
|
|
children,
|
|
}: Props & PropsWithChildren) {
|
|
const styles = useStyles2(getStyles);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Alert severity="info" title={''}>
|
|
<Stack justifyContent="space-between" gap={2} alignItems="center">
|
|
<Text>
|
|
{panelRef ? (
|
|
<Trans i18nKey="snapshot.share-panel.info-alert">
|
|
A Grafana panel snapshot publicly shares a panel while removing sensitive data such as queries and panel
|
|
links, leaving only visible metrics and series names. Anyone with the link can access the snapshot.
|
|
</Trans>
|
|
) : (
|
|
<Trans i18nKey="snapshot.share.info-alert">
|
|
A Grafana dashboard snapshot publicly shares a dashboard while removing sensitive data such as queries
|
|
and panel links, leaving only visible metrics and series names. Anyone with the link can access the
|
|
snapshot.
|
|
</Trans>
|
|
)}
|
|
</Text>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => window.open(panelRef ? PANEL_SNAPSHOT_URL : DASHBOARD_SNAPSHOT_URL, '_blank')}
|
|
type="button"
|
|
>
|
|
<Trans i18nKey="snapshot.share.learn-more-button">Learn more</Trans>
|
|
</Button>
|
|
</Stack>
|
|
</Alert>
|
|
<fieldset disabled={disableInputs}>
|
|
<Field label={t('snapshot.share.name-label', 'Snapshot name')}>
|
|
<Input id="snapshot-name-input" value={name} onChange={(e) => onNameChange(e.currentTarget.value)} />
|
|
</Field>
|
|
<Field label={t('snapshot.share.expiration-label', 'Expires in')}>
|
|
<RadioButtonGroup<number>
|
|
id="expire-select-input"
|
|
options={getExpireOptions()}
|
|
value={selectedExpireOption?.value}
|
|
onChange={onExpireChange}
|
|
/>
|
|
</Field>
|
|
</fieldset>
|
|
<Divider />
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => ({
|
|
container: css({
|
|
paddingBottom: theme.spacing(2),
|
|
}),
|
|
});
|