IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DashboardSave: use a feature flag for drawer behavior (#46972)

Browse Source
This commit is contained in:
Ryan McKinley 2022-03-30 10:07:41 -07:00 committed by GitHub
parent f486b54b84
commit edf384c730
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 186 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/types/featureToggles.gen.ts
View File

@ -46,6 +46,7 @@ export interface FeatureToggles {
dashboardComments?: boolean;
annotationComments?: boolean;
migrationLocking?: boolean;
saveDashboardDrawer?: boolean;
storage?: boolean;
storageLocalUpload?: boolean;
azureMonitorResourcePickerForMetrics?: boolean;

5
pkg/services/featuremgmt/registry.go
View File

@ -162,6 +162,11 @@ var (
Description: "Lock database during migrations",
State: FeatureStateBeta,
},
{
Name: "saveDashboardDrawer",
Description: "Use a drawer to show save dashboard dialog",
State: FeatureStateBeta,
},
{
Name: "storage",
Description: "Configurable storage for dashboards, datasources, and resources",

4
pkg/services/featuremgmt/toggles_gen.go
View File

@ -123,6 +123,10 @@ const (
// Lock database during migrations
FlagMigrationLocking = "migrationLocking"
// FlagSaveDashboardDrawer
// Use a drawer to show save dashboard dialog
FlagSaveDashboardDrawer = "saveDashboardDrawer"
// FlagStorage
// Configurable storage for dashboards, datasources, and resources
FlagStorage = "storage"

4
public/app/core/services/keybindingSrv.ts
View File

@ -6,7 +6,7 @@ import appEvents from 'app/core/app_events';
import { getExploreUrl } from 'app/core/utils/explore';
import { DashboardModel } from 'app/features/dashboard/state';
import { ShareModal } from 'app/features/dashboard/components/ShareModal';
import { SaveDashboardDrawer } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer';
import { SaveDashboardProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardProxy';
import { locationService } from '@grafana/runtime';
import { exitKioskMode, toggleKioskMode } from '../navigation/kiosk';
import {
@ -201,7 +201,7 @@ export class KeybindingSrv {
if (dashboard.meta.canSave) {
appEvents.publish(
new ShowModalReactEvent({
component: SaveDashboardDrawer,
component: SaveDashboardProxy,
props: {
dashboard,
},

4
public/app/features/dashboard/components/DashNav/DashNav.tsx
View File

@ -15,7 +15,7 @@ import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
import { DashboardModel } from '../../state';
import { KioskMode } from 'app/types';
import { ShareModal } from 'app/features/dashboard/components/ShareModal';
import { SaveDashboardDrawer } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer';
import { SaveDashboardProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardProxy';
import { DashboardCommentsModal } from 'app/features/dashboard/components/DashboardComments/DashboardCommentsModal';
import { locationService } from '@grafana/runtime';
import { toggleKioskMode } from 'app/core/navigation/kiosk';
@ -227,7 +227,7 @@ export const DashNav = React.memo<Props>((props) => {
tooltip="Save dashboard"
icon="save"
onClick={() => {
showModal(SaveDashboardDrawer, {
showModal(SaveDashboardProxy, {
dashboard,
onDismiss: hideModal,
});

4
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@ -25,7 +25,7 @@ import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
import { OptionsPane } from './OptionsPane';
import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuItems';
import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
import { SaveDashboardDrawer } from '../SaveDashboard/SaveDashboardDrawer';
import { SaveDashboardProxy } from '../SaveDashboard/SaveDashboardProxy';
import { DashboardPanel } from '../../dashgrid/DashboardPanel';
import { discardPanelChanges, initPanelEditor, updatePanelEditorUIState } from './state/actions';
@ -145,7 +145,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
onSaveDashboard = () => {
appEvents.publish(
new ShowModalReactEvent({
component: SaveDashboardDrawer,
component: SaveDashboardProxy,
props: { dashboard: this.props.dashboard },
})
);

50
public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx Normal file
View File

@ -0,0 +1,50 @@
import React, { useState } from 'react';
import { css } from '@emotion/css';
import { Modal } from '@grafana/ui';
import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
import { useDashboardSave } from './useDashboardSave';
import { SaveDashboardModalProps } from './types';
export const SaveDashboardAsModal: React.FC<
SaveDashboardModalProps & {
isNew?: boolean;
}
> = ({ dashboard, onDismiss, isNew }) => {
const { state, onDashboardSave } = useDashboardSave(dashboard);
const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
return (
<>
{state.error && (
<SaveDashboardErrorProxy
error={state.error}
dashboard={dashboard}
dashboardSaveModel={dashboardSaveModelClone}
onDismiss={onDismiss}
/>
)}
{!state.error && (
<Modal
isOpen={true}
title="Save dashboard as..."
icon="copy"
onDismiss={onDismiss}
className={css`
width: 500px;
`}
>
<SaveDashboardAsForm
dashboard={dashboard}
onCancel={onDismiss}
onSuccess={onDismiss}
onSubmit={(clone, options, dashboard) => {
setDashboardSaveModelClone(clone);
return onDashboardSave(clone, options, dashboard);
}}
isNew={isNew}
/>
</Modal>
)}
</>
);
};

6
public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Button, ButtonVariant, ModalsController, FullWidthButtonContainer } from '@grafana/ui';
import { DashboardModel } from 'app/features/dashboard/state';
import { SaveDashboardDrawer } from './SaveDashboardDrawer';
import { SaveDashboardProxy } from './SaveDashboardProxy';
import { selectors } from '@grafana/e2e-selectors';
interface SaveDashboardButtonProps {
@ -16,7 +16,7 @@ export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashbo
return (
<Button
onClick={() => {
showModal(SaveDashboardDrawer, {
showModal(SaveDashboardProxy, {
dashboard,
onSaveSuccess,
onDismiss: hideModal,
@ -44,7 +44,7 @@ export const SaveDashboardAsButton: React.FC<SaveDashboardButtonProps & { varian
<FullWidthButtonContainer>
<Button
onClick={() => {
showModal(SaveDashboardDrawer, {
showModal(SaveDashboardProxy, {
dashboard,
onSaveSuccess,
onDismiss: hideModal,

64
public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx Normal file
View File

@ -0,0 +1,64 @@
import React, { useMemo, useState } from 'react';
import { Modal } from '@grafana/ui';
import { css } from '@emotion/css';
import { SaveDashboardForm } from './forms/SaveDashboardForm';
import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
import { useDashboardSave } from './useDashboardSave';
import { SaveDashboardModalProps, SaveDashboardOptions, SaveDashboardData } from './types';
export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss, onSaveSuccess }) => {
const { state, onDashboardSave } = useDashboardSave(dashboard);
const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
const [options, setOptions] = useState<SaveDashboardOptions>({});
const data = useMemo<SaveDashboardData>(() => {
const clone = dashboard.getSaveModelClone({
saveTimerange: Boolean(options.saveTimerange),
saveVariables: Boolean(options.saveVariables),
});
return { clone, diff: {}, diffCount: 0, hasChanges: true };
}, [dashboard, options]);
return (
<>
{state.error && (
<SaveDashboardErrorProxy
error={state.error}
dashboard={dashboard}
dashboardSaveModel={dashboardSaveModelClone}
onDismiss={onDismiss}
/>
)}
{!state.error && (
<Modal
isOpen={true}
title="Save dashboard"
icon="copy"
onDismiss={onDismiss}
className={css`
width: 500px;
`}
>
<SaveDashboardForm
dashboard={dashboard}
onCancel={onDismiss}
saveModel={data}
options={options}
onSuccess={() => {
onDismiss();
if (onSaveSuccess) {
onSaveSuccess();
}
}}
onSubmit={(clone, options, dashboard) => {
setDashboardSaveModelClone(clone);
return onDashboardSave(clone, options, dashboard);
}}
onOptionsChange={setOptions}
/>
</Modal>
)}
</>
);
};

41
public/app/features/dashboard/components/SaveDashboard/SaveDashboardProxy.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import { SaveProvisionedDashboard } from './SaveProvisionedDashboard';
import { SaveDashboardAsModal } from './SaveDashboardAsModal';
import { SaveDashboardModalProps } from './types';
import { SaveDashboardModal } from './SaveDashboardModal';
import { config } from '@grafana/runtime';
import { SaveDashboardDrawer } from './SaveDashboardDrawer';
export const SaveDashboardProxy: React.FC<SaveDashboardModalProps> = ({
dashboard,
onDismiss,
onSaveSuccess,
isCopy,
}) => {
if (config.featureToggles.saveDashboardDrawer) {
return (
<SaveDashboardDrawer dashboard={dashboard} onDismiss={onDismiss} onSaveSuccess={onSaveSuccess} isCopy={isCopy} />
);
}
const isProvisioned = dashboard.meta.provisioned;
const isNew = dashboard.version === 0;
const isChanged = dashboard.version > 0;
const modalProps = {
dashboard,
onDismiss,
onSaveSuccess,
isCopy,
};
if (isNew || isCopy) {
return <SaveDashboardAsModal {...modalProps} isNew />;
}
return (
<>
{isChanged && !isProvisioned && <SaveDashboardModal {...modalProps} />}
{isProvisioned && <SaveProvisionedDashboard {...modalProps} />}
</>
);
};

12
public/app/features/dashboard/components/SaveDashboard/SaveProvisionedDashboard.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { Modal } from '@grafana/ui';
import { SaveProvisionedDashboardForm } from './forms/SaveProvisionedDashboardForm';
import { SaveDashboardModalProps } from './types';
export const SaveProvisionedDashboard: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss }) => {
return (
<Modal isOpen={true} title="Cannot save provisioned dashboard" icon="copy" onDismiss={onDismiss}>
<SaveProvisionedDashboardForm dashboard={dashboard} onCancel={onDismiss} onSuccess={onDismiss} />
</Modal>
);
};