Skip to content

N
nexpie-grafana-theme
Commit 0304493b by Dominik Prokop Committed by GitHub
Options

DashboardSave: Correctly overwrite dashboard when saving (#22650)

parent 5d8fc6a1
Showing with 41 additions and 10 deletions
public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx
import React from 'react'; import React, { useState } from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
import { Modal } from '@grafana/ui'; import { Modal } from '@grafana/ui';
import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm'; import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
...@@ -10,10 +10,17 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & { ...@@ -10,10 +10,17 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & {
isNew?: boolean; isNew?: boolean;
}> = ({ dashboard, onDismiss, isNew }) => { }> = ({ dashboard, onDismiss, isNew }) => {
const { state, onDashboardSave } = useDashboardSave(dashboard); const { state, onDashboardSave } = useDashboardSave(dashboard);
const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
return ( return (
<> <>
{state.error && <SaveDashboardErrorProxy error={state.error} dashboard={dashboard} onDismiss={onDismiss} />} {state.error && (
<SaveDashboardErrorProxy
error={state.error}
dashboard={dashboard}
dashboardSaveModel={dashboardSaveModelClone}
onDismiss={onDismiss}
/>
)}
{!state.error && ( {!state.error && (
<Modal <Modal
isOpen={true} isOpen={true}
...@@ -28,7 +35,10 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & { ...@@ -28,7 +35,10 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & {
dashboard={dashboard} dashboard={dashboard}
onCancel={onDismiss} onCancel={onDismiss}
onSuccess={onDismiss} onSuccess={onDismiss}
onSubmit={onDashboardSave} onSubmit={(clone, options, dashboard) => {
setDashboardSaveModelClone(clone);
return onDashboardSave(clone, options, dashboard);
}}
isNew={isNew} isNew={isNew}
/> />
</Modal> </Modal>
......
public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
...@@ -8,12 +8,20 @@ import { SaveDashboardModalProps } from './types'; ...@@ -8,12 +8,20 @@ import { SaveDashboardModalProps } from './types';
import { SaveDashboardAsButton } from './SaveDashboardButton'; import { SaveDashboardAsButton } from './SaveDashboardButton';
interface SaveDashboardErrorProxyProps { interface SaveDashboardErrorProxyProps {
/** original dashboard */
dashboard: DashboardModel; dashboard: DashboardModel;
/** dashboard save model with applied modifications, i.e. title */
dashboardSaveModel: any;
error: any; error: any;
onDismiss: () => void; onDismiss: () => void;
} }
export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({ dashboard, error, onDismiss }) => { export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({
dashboard,
dashboardSaveModel,
error,
onDismiss,
}) => {
const { onDashboardSave } = useDashboardSave(dashboard); const { onDashboardSave } = useDashboardSave(dashboard);
useEffect(() => { useEffect(() => {
...@@ -35,7 +43,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ( ...@@ -35,7 +43,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
} }
confirmText="Save & Overwrite" confirmText="Save & Overwrite"
onConfirm={async () => { onConfirm={async () => {
await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard); await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
onDismiss(); onDismiss();
}} }}
onDismiss={onDismiss} onDismiss={onDismiss}
...@@ -53,7 +61,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ( ...@@ -53,7 +61,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
} }
confirmText="Save & Overwrite" confirmText="Save & Overwrite"
onConfirm={async () => { onConfirm={async () => {
await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard); await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
onDismiss(); onDismiss();
}} }}
onDismiss={onDismiss} onDismiss={onDismiss}
......
public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx
import React from 'react'; import React, { useState } from 'react';
import { Modal } from '@grafana/ui'; import { Modal } from '@grafana/ui';
import { css } from 'emotion'; import { css } from 'emotion';
import { SaveDashboardForm } from './forms/SaveDashboardForm'; import { SaveDashboardForm } from './forms/SaveDashboardForm';
...@@ -8,9 +8,17 @@ import { SaveDashboardModalProps } from './types'; ...@@ -8,9 +8,17 @@ import { SaveDashboardModalProps } from './types';
export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss, onSaveSuccess }) => { export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss, onSaveSuccess }) => {
const { state, onDashboardSave } = useDashboardSave(dashboard); const { state, onDashboardSave } = useDashboardSave(dashboard);
const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
return ( return (
<> <>
{state.error && <SaveDashboardErrorProxy error={state.error} dashboard={dashboard} onDismiss={onDismiss} />} {state.error && (
<SaveDashboardErrorProxy
error={state.error}
dashboard={dashboard}
dashboardSaveModel={dashboardSaveModelClone}
onDismiss={onDismiss}
/>
)}
{!state.error && ( {!state.error && (
<Modal <Modal
isOpen={true} isOpen={true}
...@@ -30,7 +38,10 @@ export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboar ...@@ -30,7 +38,10 @@ export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboar
onSaveSuccess(); onSaveSuccess();
} }
}} }}
onSubmit={onDashboardSave} onSubmit={(clone, options, dashboard) => {
setDashboardSaveModelClone(clone);
return onDashboardSave(clone, options, dashboard);
}}
/> />
</Modal> </Modal>
)} )}
......
public/app/features/dashboard/components/SaveDashboard/useDashboardSave.tsx
...@@ -39,6 +39,8 @@ export const useDashboardSave = (dashboard: DashboardModel) => { ...@@ -39,6 +39,8 @@ export const useDashboardSave = (dashboard: DashboardModel) => {
dispatch( dispatch(
updateLocation({ updateLocation({
path: newUrl, path: newUrl,
replace: true,
query: {},
}) })
); );
} }
......
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