mirror of https://github.com/grafana/grafana
Provisioning: Add dashboard saving functionality (#102269)
* Move dashboard-scene, provisioned dashboard features, and dashboard services/types from grafana-git-ui-sync branch * Merge * Update props order * Fix imports * Fix imports * Update dashboard page * Update imports * Update test * Tweaks * Remove extra mocks * Split out utils * Translate * Revert * Add translations * Add comment * Prettier * Add comment * Use AnnoKeyManagerIdentity * Add manager kindpull/102303/head
Alex Khomenko
9 months ago
committed by
GitHub
parent
b11daf57bb
commit
71cee10cb6
@ -0,0 +1,59 @@ |
|||||||
|
import { Button, Modal } from '@grafana/ui'; |
||||||
|
import { t, Trans } from 'app/core/internationalization'; |
||||||
|
|
||||||
|
import { FolderDTO, FolderListItemDTO } from '../../../../types'; |
||||||
|
import { NestedFolderDTO } from '../../../search/service/types'; |
||||||
|
import { DashboardScene } from '../../scene/DashboardScene'; |
||||||
|
|
||||||
|
export type FolderDataType = FolderListItemDTO | NestedFolderDTO | FolderDTO; |
||||||
|
|
||||||
|
export interface Props { |
||||||
|
onDismiss: () => void; |
||||||
|
resource: DashboardScene | FolderDataType; |
||||||
|
} |
||||||
|
|
||||||
|
export function ProvisionedResourceDeleteModal({ onDismiss, resource }: Props) { |
||||||
|
const type = isDashboard(resource) ? 'dashboard' : 'folder'; |
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
isOpen={true} |
||||||
|
title={t( |
||||||
|
'dashboard-scene.provisioned-resource-delete-modal.title-cannot-delete-provisioned-resource', |
||||||
|
'Cannot delete provisioned resource' |
||||||
|
)} |
||||||
|
onDismiss={onDismiss} |
||||||
|
> |
||||||
|
<> |
||||||
|
<p> |
||||||
|
<Trans |
||||||
|
i18nKey="dashboard-scene.provisioned-resource-delete-modal.managed-by-version-control" |
||||||
|
values={{ type }} |
||||||
|
> |
||||||
|
This {type} is managed by version control and cannot be deleted. To remove it, delete it from the repository |
||||||
|
and synchronise to apply the changes. |
||||||
|
</Trans> |
||||||
|
</p> |
||||||
|
{isDashboard(resource) && ( |
||||||
|
<p> |
||||||
|
<Trans i18nKey="dashboard-scene.provisioned-resource-delete-modal.file-path">File path:</Trans>{' '} |
||||||
|
{resource.getPath()} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</> |
||||||
|
|
||||||
|
<Modal.ButtonRow> |
||||||
|
<Button variant="primary" onClick={onDismiss}> |
||||||
|
<Trans i18nKey="dashboard-scene.provisioned-resource-delete-modal.ok">OK</Trans> |
||||||
|
</Button> |
||||||
|
</Modal.ButtonRow> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function isDashboard(resource: DashboardScene | FolderDataType): resource is DashboardScene { |
||||||
|
return resource instanceof DashboardScene; |
||||||
|
} |
||||||
|
|
||||||
|
export function isFolder(resource: DashboardScene | FolderDataType): resource is FolderDataType { |
||||||
|
return !isDashboard(resource); |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import { useUrlParams } from 'app/core/navigation/hooks'; |
||||||
|
|
||||||
|
import { DashboardScene } from '../../scene/DashboardScene'; |
||||||
|
import { SaveDashboardDrawer } from '../SaveDashboardDrawer'; |
||||||
|
import { DashboardChangeInfo } from '../shared'; |
||||||
|
|
||||||
|
import { SaveProvisionedDashboardForm } from './SaveProvisionedDashboardForm'; |
||||||
|
import { useDefaultValues } from './hooks'; |
||||||
|
|
||||||
|
export interface SaveProvisionedDashboardProps { |
||||||
|
dashboard: DashboardScene; |
||||||
|
drawer: SaveDashboardDrawer; |
||||||
|
changeInfo: DashboardChangeInfo; |
||||||
|
} |
||||||
|
|
||||||
|
export function SaveProvisionedDashboard({ drawer, changeInfo, dashboard }: SaveProvisionedDashboardProps) { |
||||||
|
const { meta, title: defaultTitle, description: defaultDescription } = dashboard.useState(); |
||||||
|
|
||||||
|
const [params] = useUrlParams(); |
||||||
|
const loadedFromRef = params.get('ref') ?? undefined; |
||||||
|
|
||||||
|
const defaultValues = useDefaultValues({ meta, defaultTitle, defaultDescription }); |
||||||
|
|
||||||
|
if (!defaultValues) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
const { values, isNew, isGitHub, repositoryConfig } = defaultValues; |
||||||
|
|
||||||
|
return ( |
||||||
|
<SaveProvisionedDashboardForm |
||||||
|
dashboard={dashboard} |
||||||
|
drawer={drawer} |
||||||
|
changeInfo={changeInfo} |
||||||
|
isNew={isNew} |
||||||
|
defaultValues={values} |
||||||
|
loadedFromRef={loadedFromRef} |
||||||
|
isGitHub={isGitHub} |
||||||
|
repositoryConfig={repositoryConfig} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,381 @@ |
|||||||
|
import { render, screen, waitFor } from '@testing-library/react'; |
||||||
|
import userEvent from '@testing-library/user-event'; |
||||||
|
|
||||||
|
import { AppEvents } from '@grafana/data'; |
||||||
|
import { getAppEvents, locationService } from '@grafana/runtime'; |
||||||
|
import { Dashboard } from '@grafana/schema'; |
||||||
|
import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv'; |
||||||
|
import { useCreateOrUpdateRepositoryFile } from 'app/features/provisioning/hooks/useCreateOrUpdateRepositoryFile'; |
||||||
|
|
||||||
|
import { DashboardScene } from '../../scene/DashboardScene'; |
||||||
|
import { SaveDashboardDrawer } from '../SaveDashboardDrawer'; |
||||||
|
|
||||||
|
import { SaveProvisionedDashboardForm, Props } from './SaveProvisionedDashboardForm'; |
||||||
|
|
||||||
|
jest.mock('@grafana/runtime', () => { |
||||||
|
const actual = jest.requireActual('@grafana/runtime'); |
||||||
|
return { |
||||||
|
...actual, |
||||||
|
getAppEvents: jest.fn(), |
||||||
|
locationService: { |
||||||
|
partial: jest.fn(), |
||||||
|
}, |
||||||
|
config: { |
||||||
|
...actual.config, |
||||||
|
panels: { |
||||||
|
debug: { |
||||||
|
state: 'alpha', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
jest.mock('app/core/components/Select/FolderPicker', () => { |
||||||
|
const actual = jest.requireActual('app/core/components/Select/FolderPicker'); |
||||||
|
return { |
||||||
|
...actual, |
||||||
|
FolderPicker: function MockFolderPicker() { |
||||||
|
return <div data-testid="folder-picker">Folder Picker</div>; |
||||||
|
}, |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
jest.mock('app/features/provisioning/hooks/useCreateOrUpdateRepositoryFile', () => { |
||||||
|
return { |
||||||
|
useCreateOrUpdateRepositoryFile: jest.fn(), |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
jest.mock('app/features/provisioning/hooks/useGetResourceRepository', () => { |
||||||
|
return { |
||||||
|
useGetResourceRepository: jest.fn(), |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
jest.mock('app/features/provisioning/hooks/useRepositoryList', () => { |
||||||
|
return { |
||||||
|
useRepositoryList: jest.fn(), |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
jest.mock('app/features/manage-dashboards/services/ValidationSrv', () => { |
||||||
|
const actual = jest.requireActual('app/features/manage-dashboards/services/ValidationSrv'); |
||||||
|
return { |
||||||
|
...actual, |
||||||
|
validationSrv: { |
||||||
|
validateNewDashboardName: jest.fn(), |
||||||
|
}, |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
jest.mock('react-router-dom-v5-compat', () => { |
||||||
|
const actual = jest.requireActual('react-router-dom-v5-compat'); |
||||||
|
return { |
||||||
|
...actual, |
||||||
|
useNavigate: () => jest.fn(), |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
jest.mock('../SaveDashboardForm', () => { |
||||||
|
const actual = jest.requireActual('../SaveDashboardForm'); |
||||||
|
return { |
||||||
|
...actual, |
||||||
|
SaveDashboardFormCommonOptions: () => <div data-testid="common-options">Common Options</div>, |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
function setup(props: Partial<Props> = {}) { |
||||||
|
const user = userEvent.setup(); |
||||||
|
|
||||||
|
const mockDashboard: Dashboard = { |
||||||
|
title: 'Test Dashboard', |
||||||
|
panels: [], |
||||||
|
schemaVersion: 36, |
||||||
|
}; |
||||||
|
|
||||||
|
const defaultProps: Props = { |
||||||
|
dashboard: { |
||||||
|
useState: () => ({ |
||||||
|
meta: { folderUid: 'folder-uid', slug: 'test-dashboard' }, |
||||||
|
title: 'Test Dashboard', |
||||||
|
description: 'Test Description', |
||||||
|
isDirty: true, |
||||||
|
}), |
||||||
|
setState: jest.fn(), |
||||||
|
closeModal: jest.fn(), |
||||||
|
getSaveAsModel: jest.fn().mockReturnValue(mockDashboard), |
||||||
|
setManager: jest.fn(), |
||||||
|
} as unknown as DashboardScene, |
||||||
|
drawer: { |
||||||
|
onClose: jest.fn(), |
||||||
|
} as unknown as SaveDashboardDrawer, |
||||||
|
changeInfo: { |
||||||
|
changedSaveModel: mockDashboard, |
||||||
|
initialSaveModel: mockDashboard, |
||||||
|
diffCount: 0, |
||||||
|
hasChanges: true, |
||||||
|
hasTimeChanges: false, |
||||||
|
hasVariableValueChanges: false, |
||||||
|
hasRefreshChange: false, |
||||||
|
diffs: {}, |
||||||
|
}, |
||||||
|
isNew: true, |
||||||
|
isGitHub: true, |
||||||
|
defaultValues: { |
||||||
|
ref: 'dashboard/2023-01-01-abcde', |
||||||
|
path: 'test-dashboard.json', |
||||||
|
repo: 'test-repo', |
||||||
|
comment: '', |
||||||
|
folder: { uid: 'folder-uid', title: '' }, |
||||||
|
title: 'Test Dashboard', |
||||||
|
description: 'Test Description', |
||||||
|
workflow: 'write', |
||||||
|
}, |
||||||
|
repositoryConfig: { |
||||||
|
type: 'github', |
||||||
|
workflows: ['write', 'branch'], |
||||||
|
sync: { enabled: false, target: 'folder' }, |
||||||
|
title: 'Test Repository', |
||||||
|
github: { |
||||||
|
branch: 'main', |
||||||
|
}, |
||||||
|
}, |
||||||
|
...props, |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
user, |
||||||
|
props: defaultProps, |
||||||
|
...render(<SaveProvisionedDashboardForm {...defaultProps} />), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
const mockRequestBase = { |
||||||
|
isSuccess: true, |
||||||
|
isError: false, |
||||||
|
isLoading: false, |
||||||
|
error: null, |
||||||
|
data: { resource: { upsert: {} } }, |
||||||
|
}; |
||||||
|
|
||||||
|
describe('SaveProvisionedDashboardForm', () => { |
||||||
|
beforeEach(() => { |
||||||
|
jest.clearAllMocks(); |
||||||
|
(getAppEvents as jest.Mock).mockReturnValue({ publish: jest.fn() }); |
||||||
|
(validationSrv.validateNewDashboardName as jest.Mock).mockResolvedValue(true); |
||||||
|
const mockRequest = { ...mockRequestBase, isSuccess: false }; |
||||||
|
(useCreateOrUpdateRepositoryFile as jest.Mock).mockReturnValue([jest.fn(), mockRequest]); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render the form with correct fields for a new dashboard', () => { |
||||||
|
setup(); |
||||||
|
expect(screen.getByRole('form')).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('textbox', { name: /title/i })).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('textbox', { name: /description/i })).toBeInTheDocument(); |
||||||
|
expect(screen.getByTestId('folder-picker')).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('textbox', { name: /path/i })).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('textbox', { name: /comment/i })).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('radiogroup')).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render the form with correct fields for an existing dashboard', () => { |
||||||
|
// existing dashboards show "Common Options" instead of the title/desc fields
|
||||||
|
setup({ isNew: false }); |
||||||
|
expect(screen.getByTestId('common-options')).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('textbox', { name: /path/i })).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('textbox', { name: /comment/i })).toBeInTheDocument(); |
||||||
|
expect(screen.getByRole('radiogroup')).toBeInTheDocument(); |
||||||
|
expect(screen.queryByRole('textbox', { name: /title/i })).not.toBeInTheDocument(); |
||||||
|
expect(screen.queryByRole('textbox', { name: /description/i })).not.toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should save a new dashboard successfully', async () => { |
||||||
|
const { user, props } = setup(); |
||||||
|
const newDashboard = { |
||||||
|
title: 'New Dashboard', |
||||||
|
description: 'New Description', |
||||||
|
panels: [], |
||||||
|
schemaVersion: 36, |
||||||
|
}; |
||||||
|
props.dashboard.getSaveAsModel = jest.fn().mockReturnValue(newDashboard); |
||||||
|
const mockAction = jest.fn(); |
||||||
|
const mockRequest = { ...mockRequestBase, isSuccess: true }; |
||||||
|
(useCreateOrUpdateRepositoryFile as jest.Mock).mockReturnValue([mockAction, mockRequest]); |
||||||
|
const titleInput = screen.getByRole('textbox', { name: /title/i }); |
||||||
|
const descriptionInput = screen.getByRole('textbox', { name: /description/i }); |
||||||
|
const pathInput = screen.getByRole('textbox', { name: /path/i }); |
||||||
|
const commentInput = screen.getByRole('textbox', { name: /comment/i }); |
||||||
|
|
||||||
|
await user.clear(titleInput); |
||||||
|
await user.clear(descriptionInput); |
||||||
|
await user.clear(pathInput); |
||||||
|
await user.clear(commentInput); |
||||||
|
|
||||||
|
await user.type(titleInput, 'New Dashboard'); |
||||||
|
await user.type(descriptionInput, 'New Description'); |
||||||
|
await user.type(pathInput, 'test-dashboard.json'); |
||||||
|
await user.type(commentInput, 'Initial commit'); |
||||||
|
|
||||||
|
const submitButton = screen.getByRole('button', { name: /save/i }); |
||||||
|
await user.click(submitButton); |
||||||
|
|
||||||
|
await waitFor(() => { |
||||||
|
expect(props.dashboard.setState).toHaveBeenCalledWith({ isDirty: false }); |
||||||
|
}); |
||||||
|
await waitFor(() => { |
||||||
|
expect(mockAction).toHaveBeenCalledWith({ |
||||||
|
ref: undefined, |
||||||
|
name: 'test-repo', |
||||||
|
path: 'test-dashboard.json', |
||||||
|
message: 'Initial commit', |
||||||
|
body: newDashboard, |
||||||
|
}); |
||||||
|
}); |
||||||
|
const appEvents = getAppEvents(); |
||||||
|
expect(appEvents.publish).toHaveBeenCalledWith({ |
||||||
|
type: AppEvents.alertSuccess.name, |
||||||
|
payload: ['Dashboard changes saved'], |
||||||
|
}); |
||||||
|
expect(props.dashboard.closeModal).toHaveBeenCalled(); |
||||||
|
expect(locationService.partial).toHaveBeenCalledWith({ viewPanel: null, editPanel: null }); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should update an existing dashboard successfully', async () => { |
||||||
|
const { user, props } = setup({ |
||||||
|
isNew: false, |
||||||
|
dashboard: { |
||||||
|
useState: () => ({ |
||||||
|
meta: { |
||||||
|
folderUid: 'folder-uid', |
||||||
|
slug: 'test-dashboard', |
||||||
|
k8s: { name: 'test-dashboard' }, |
||||||
|
}, |
||||||
|
title: 'Test Dashboard', |
||||||
|
description: 'Test Description', |
||||||
|
isDirty: true, |
||||||
|
}), |
||||||
|
setState: jest.fn(), |
||||||
|
closeModal: jest.fn(), |
||||||
|
getSaveAsModel: jest.fn().mockReturnValue({ title: 'Test Dashboard', description: 'Test Description' }), |
||||||
|
setManager: jest.fn(), |
||||||
|
} as unknown as DashboardScene, |
||||||
|
}); |
||||||
|
const mockAction = jest.fn(); |
||||||
|
const mockRequest = { ...mockRequestBase, isSuccess: true }; |
||||||
|
(useCreateOrUpdateRepositoryFile as jest.Mock).mockReturnValue([mockAction, mockRequest]); |
||||||
|
const pathInput = screen.getByRole('textbox', { name: /path/i }); |
||||||
|
const commentInput = screen.getByRole('textbox', { name: /comment/i }); |
||||||
|
await user.clear(pathInput); |
||||||
|
await user.clear(commentInput); |
||||||
|
await user.type(pathInput, 'test-dashboard.json'); |
||||||
|
await user.type(commentInput, 'Update dashboard'); |
||||||
|
const submitButton = screen.getByRole('button', { name: /save/i }); |
||||||
|
await user.click(submitButton); |
||||||
|
await waitFor(() => { |
||||||
|
expect(props.dashboard.setState).toHaveBeenCalledWith({ isDirty: false }); |
||||||
|
}); |
||||||
|
await waitFor(() => { |
||||||
|
expect(mockAction).toHaveBeenCalledWith({ |
||||||
|
ref: undefined, |
||||||
|
name: 'test-repo', |
||||||
|
path: 'test-dashboard.json', |
||||||
|
message: 'Update dashboard', |
||||||
|
body: expect.any(Object), |
||||||
|
}); |
||||||
|
}); |
||||||
|
expect(props.dashboard.closeModal).toHaveBeenCalled(); |
||||||
|
expect(locationService.partial).toHaveBeenCalledWith({ viewPanel: null, editPanel: null }); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show error when save fails', async () => { |
||||||
|
const { user, props } = setup(); |
||||||
|
const newDashboard = { |
||||||
|
title: 'New Dashboard', |
||||||
|
description: 'New Description', |
||||||
|
panels: [], |
||||||
|
schemaVersion: 36, |
||||||
|
}; |
||||||
|
props.dashboard.getSaveAsModel = jest.fn().mockReturnValue(newDashboard); |
||||||
|
const mockAction = jest.fn(); |
||||||
|
const mockRequest = { |
||||||
|
...mockRequestBase, |
||||||
|
isSuccess: false, |
||||||
|
isError: true, |
||||||
|
error: 'Failed to save dashboard', |
||||||
|
}; |
||||||
|
(useCreateOrUpdateRepositoryFile as jest.Mock).mockReturnValue([mockAction, mockRequest]); |
||||||
|
const titleInput = screen.getByRole('textbox', { name: /title/i }); |
||||||
|
const descriptionInput = screen.getByRole('textbox', { name: /description/i }); |
||||||
|
const pathInput = screen.getByRole('textbox', { name: /path/i }); |
||||||
|
const commentInput = screen.getByRole('textbox', { name: /comment/i }); |
||||||
|
|
||||||
|
await user.clear(titleInput); |
||||||
|
await user.clear(descriptionInput); |
||||||
|
await user.clear(pathInput); |
||||||
|
await user.clear(commentInput); |
||||||
|
|
||||||
|
await user.type(titleInput, 'New Dashboard'); |
||||||
|
await user.type(descriptionInput, 'New Description'); |
||||||
|
await user.type(pathInput, 'error-dashboard.json'); |
||||||
|
await user.type(commentInput, 'Error commit'); |
||||||
|
|
||||||
|
const submitButton = screen.getByRole('button', { name: /save/i }); |
||||||
|
await user.click(submitButton); |
||||||
|
|
||||||
|
await waitFor(() => { |
||||||
|
expect(mockAction).toHaveBeenCalledWith({ |
||||||
|
ref: undefined, |
||||||
|
name: 'test-repo', |
||||||
|
path: 'error-dashboard.json', |
||||||
|
message: 'Error commit', |
||||||
|
body: newDashboard, |
||||||
|
}); |
||||||
|
}); |
||||||
|
await waitFor(() => { |
||||||
|
const appEvents = getAppEvents(); |
||||||
|
expect(appEvents.publish).toHaveBeenCalledWith({ |
||||||
|
type: AppEvents.alertError.name, |
||||||
|
payload: ['Error saving dashboard', 'Failed to save dashboard'], |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should disable save button when dashboard is not dirty', () => { |
||||||
|
setup({ |
||||||
|
dashboard: { |
||||||
|
useState: () => ({ |
||||||
|
meta: { |
||||||
|
folderUid: 'folder-uid', |
||||||
|
slug: 'test-dashboard', |
||||||
|
k8s: { name: 'test-dashboard' }, |
||||||
|
}, |
||||||
|
title: 'Test Dashboard', |
||||||
|
description: 'Test Description', |
||||||
|
isDirty: false, |
||||||
|
}), |
||||||
|
setState: jest.fn(), |
||||||
|
closeModal: jest.fn(), |
||||||
|
getSaveAsModel: jest.fn().mockReturnValue({}), |
||||||
|
setManager: jest.fn(), |
||||||
|
} as unknown as DashboardScene, |
||||||
|
}); |
||||||
|
|
||||||
|
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show read-only alert when repository has no workflows', () => { |
||||||
|
setup({ |
||||||
|
repositoryConfig: { |
||||||
|
type: 'github', |
||||||
|
workflows: [], |
||||||
|
sync: { enabled: false, target: 'folder' }, |
||||||
|
title: 'Read-only Repository', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
expect(screen.getByText('This repository is read only')).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,347 @@ |
|||||||
|
import { useEffect } from 'react'; |
||||||
|
import { Controller, useForm } from 'react-hook-form'; |
||||||
|
import { useNavigate } from 'react-router-dom-v5-compat'; |
||||||
|
|
||||||
|
import { AppEvents, locationUtil } from '@grafana/data'; |
||||||
|
import { getAppEvents, locationService } from '@grafana/runtime'; |
||||||
|
import { Dashboard } from '@grafana/schema'; |
||||||
|
import { Alert, Button, Field, Input, RadioButtonGroup, Stack, TextArea } from '@grafana/ui'; |
||||||
|
import { RepositorySpec, RepositoryView } from 'app/api/clients/provisioning'; |
||||||
|
import { FolderPicker } from 'app/core/components/Select/FolderPicker'; |
||||||
|
import { t, Trans } from 'app/core/internationalization'; |
||||||
|
import kbn from 'app/core/utils/kbn'; |
||||||
|
import { AnnoKeyManagerIdentity, AnnoKeyManagerKind, ManagerKind, Resource } from 'app/features/apiserver/types'; |
||||||
|
import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv'; |
||||||
|
import { PROVISIONING_URL } from 'app/features/provisioning/constants'; |
||||||
|
import { useCreateOrUpdateRepositoryFile } from 'app/features/provisioning/hooks/useCreateOrUpdateRepositoryFile'; |
||||||
|
import { WorkflowOption } from 'app/features/provisioning/types'; |
||||||
|
import { validateBranchName } from 'app/features/provisioning/utils/git'; |
||||||
|
|
||||||
|
import { getDashboardUrl } from '../../utils/getDashboardUrl'; |
||||||
|
import { SaveDashboardFormCommonOptions } from '../SaveDashboardForm'; |
||||||
|
|
||||||
|
import { SaveProvisionedDashboardProps } from './SaveProvisionedDashboard'; |
||||||
|
import { getWorkflowOptions } from './defaults'; |
||||||
|
|
||||||
|
type FormData = { |
||||||
|
ref?: string; |
||||||
|
path: string; |
||||||
|
comment?: string; |
||||||
|
repo: string; |
||||||
|
workflow?: WorkflowOption; |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
folder: { |
||||||
|
uid?: string; |
||||||
|
title?: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
export interface Props extends SaveProvisionedDashboardProps { |
||||||
|
isNew: boolean; |
||||||
|
defaultValues: FormData; |
||||||
|
isGitHub: boolean; |
||||||
|
repositoryConfig?: RepositorySpec; |
||||||
|
loadedFromRef?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export function SaveProvisionedDashboardForm({ |
||||||
|
defaultValues, |
||||||
|
dashboard, |
||||||
|
drawer, |
||||||
|
changeInfo, |
||||||
|
isNew, |
||||||
|
loadedFromRef, |
||||||
|
repositoryConfig, |
||||||
|
isGitHub, |
||||||
|
}: Props) { |
||||||
|
const navigate = useNavigate(); |
||||||
|
const appEvents = getAppEvents(); |
||||||
|
const { meta, isDirty } = dashboard.useState(); |
||||||
|
|
||||||
|
const [createOrUpdateFile, request] = useCreateOrUpdateRepositoryFile(isNew ? undefined : defaultValues.path); |
||||||
|
|
||||||
|
const { |
||||||
|
register, |
||||||
|
handleSubmit, |
||||||
|
watch, |
||||||
|
formState: { errors }, |
||||||
|
control, |
||||||
|
setValue, |
||||||
|
} = useForm<FormData>({ defaultValues }); |
||||||
|
|
||||||
|
const [ref, workflow, path] = watch(['ref', 'workflow', 'path']); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (request.isSuccess) { |
||||||
|
dashboard.setState({ isDirty: false }); |
||||||
|
if (workflow === 'branch' && ref !== '' && path !== '') { |
||||||
|
// Redirect to the provisioning preview pages
|
||||||
|
navigate(`${PROVISIONING_URL}/${defaultValues.repo}/dashboard/preview/${path}?ref=${ref}`); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
appEvents.publish({ |
||||||
|
type: AppEvents.alertSuccess.name, |
||||||
|
payload: [t('dashboard-scene.save-provisioned-dashboard-form.api-success', 'Dashboard changes saved')], |
||||||
|
}); |
||||||
|
|
||||||
|
// Load the new URL
|
||||||
|
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||||
|
const upsert = request.data.resource.upsert as Resource<Dashboard>; |
||||||
|
if (isNew && upsert?.metadata?.name) { |
||||||
|
const url = locationUtil.assureBaseUrl( |
||||||
|
getDashboardUrl({ |
||||||
|
uid: upsert.metadata.name, |
||||||
|
slug: kbn.slugifyForUrl(upsert.spec.title ?? ''), |
||||||
|
currentQueryParams: window.location.search, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
navigate(url); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// Keep the same URL
|
||||||
|
dashboard.closeModal(); |
||||||
|
locationService.partial({ |
||||||
|
viewPanel: null, |
||||||
|
editPanel: null, |
||||||
|
}); |
||||||
|
} else if (request.isError) { |
||||||
|
appEvents.publish({ |
||||||
|
type: AppEvents.alertError.name, |
||||||
|
payload: [ |
||||||
|
t('dashboard-scene.save-provisioned-dashboard-form.api-error', 'Error saving dashboard'), |
||||||
|
request.error, |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
}, [appEvents, dashboard, defaultValues.repo, isNew, navigate, path, ref, request, workflow]); |
||||||
|
|
||||||
|
// Submit handler for saving the form data
|
||||||
|
const handleFormSubmit = async ({ title, description, repo, path, comment, ref }: FormData) => { |
||||||
|
if (!repo || !path) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// The dashboard spec
|
||||||
|
const saveModel = dashboard.getSaveAsModel({ |
||||||
|
isNew, |
||||||
|
title, |
||||||
|
description, |
||||||
|
}); |
||||||
|
|
||||||
|
// If user is writing to the original branch, override ref with whatever we loaded from
|
||||||
|
if (workflow === 'write') { |
||||||
|
ref = loadedFromRef; |
||||||
|
} |
||||||
|
|
||||||
|
createOrUpdateFile({ |
||||||
|
ref, |
||||||
|
name: repo, |
||||||
|
path, |
||||||
|
message: comment, |
||||||
|
body: { ...saveModel, uid: meta.uid }, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const workflowOptions = getWorkflowOptions(repositoryConfig, loadedFromRef); |
||||||
|
|
||||||
|
return ( |
||||||
|
<form onSubmit={handleSubmit(handleFormSubmit)} name="save-provisioned-form"> |
||||||
|
<Stack direction="column" gap={2}> |
||||||
|
{!repositoryConfig?.workflows.length && ( |
||||||
|
<Alert |
||||||
|
title={t( |
||||||
|
'dashboard-scene.save-provisioned-dashboard-form.title-this-repository-is-read-only', |
||||||
|
'This repository is read only' |
||||||
|
)} |
||||||
|
> |
||||||
|
<Trans i18nKey="dashboard-scene.save-provisioned-dashboard-form.copy-json-message"> |
||||||
|
If you have direct access to the target, copy the JSON and paste it there. |
||||||
|
</Trans> |
||||||
|
</Alert> |
||||||
|
)} |
||||||
|
|
||||||
|
{isNew && ( |
||||||
|
<> |
||||||
|
<Field |
||||||
|
label={t('dashboard-scene.save-provisioned-dashboard-form.label-title', 'Title')} |
||||||
|
invalid={!!errors.title} |
||||||
|
error={errors.title?.message} |
||||||
|
> |
||||||
|
<Input |
||||||
|
id="dashboard-title" |
||||||
|
{...register('title', { |
||||||
|
required: t( |
||||||
|
'dashboard-scene.save-provisioned-dashboard-form.title-required', |
||||||
|
'Dashboard title is required' |
||||||
|
), |
||||||
|
validate: validateTitle, |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
<Field |
||||||
|
label={t('dashboard-scene.save-provisioned-dashboard-form.label-description', 'Description')} |
||||||
|
invalid={!!errors.description} |
||||||
|
error={errors.description?.message} |
||||||
|
> |
||||||
|
<TextArea id="dashboard-description" {...register('description')} /> |
||||||
|
</Field> |
||||||
|
|
||||||
|
<Field label={t('dashboard-scene.save-provisioned-dashboard-form.label-target-folder', 'Target folder')}> |
||||||
|
<Controller |
||||||
|
control={control} |
||||||
|
name={'folder'} |
||||||
|
render={({ field: { ref, value, onChange, ...field } }) => { |
||||||
|
return ( |
||||||
|
<FolderPicker |
||||||
|
inputId="dashboard-folder" |
||||||
|
onChange={(uid?: string, title?: string, repository?: RepositoryView) => { |
||||||
|
onChange({ uid, title }); |
||||||
|
const name = repository?.name; |
||||||
|
if (name) { |
||||||
|
setValue('repo', name); |
||||||
|
} |
||||||
|
dashboard.setState({ |
||||||
|
meta: { |
||||||
|
k8s: name |
||||||
|
? { |
||||||
|
annotations: { |
||||||
|
[AnnoKeyManagerIdentity]: name, |
||||||
|
[AnnoKeyManagerKind]: ManagerKind.Repo, |
||||||
|
}, |
||||||
|
} |
||||||
|
: undefined, |
||||||
|
folderUid: uid, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}} |
||||||
|
value={value.uid} |
||||||
|
{...field} |
||||||
|
/> |
||||||
|
); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{!isNew && <SaveDashboardFormCommonOptions drawer={drawer} changeInfo={changeInfo} />} |
||||||
|
|
||||||
|
<Field |
||||||
|
label={t('dashboard-scene.save-provisioned-dashboard-form.label-path', 'Path')} |
||||||
|
description={t( |
||||||
|
'dashboard-scene.save-provisioned-dashboard-form.description-inside-repository', |
||||||
|
'File path inside the repository (.json or .yaml)' |
||||||
|
)} |
||||||
|
> |
||||||
|
<Input id="dashboard-path" {...register('path')} /> |
||||||
|
</Field> |
||||||
|
|
||||||
|
<Field label={t('dashboard-scene.save-provisioned-dashboard-form.label-comment', 'Comment')}> |
||||||
|
<TextArea |
||||||
|
id="dashboard-comment" |
||||||
|
{...register('comment')} |
||||||
|
placeholder={t( |
||||||
|
'dashboard-scene.save-provisioned-dashboard-form.dashboard-comment-placeholder-describe-changes-optional', |
||||||
|
'Add a note to describe your changes (optional)' |
||||||
|
)} |
||||||
|
rows={5} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
|
||||||
|
{isGitHub && ( |
||||||
|
<> |
||||||
|
<Field label={t('dashboard-scene.save-provisioned-dashboard-form.label-workflow', 'Workflow')}> |
||||||
|
<Controller |
||||||
|
control={control} |
||||||
|
name="workflow" |
||||||
|
render={({ field: { ref: _, ...field } }) => ( |
||||||
|
<RadioButtonGroup id="dashboard-workflow" {...field} options={workflowOptions} /> |
||||||
|
)} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
{workflow === 'branch' && ( |
||||||
|
<Field |
||||||
|
label={t('dashboard-scene.save-provisioned-dashboard-form.label-branch', 'Branch')} |
||||||
|
description={t( |
||||||
|
'dashboard-scene.save-provisioned-dashboard-form.description-branch-name-in-git-hub', |
||||||
|
'Branch name in GitHub' |
||||||
|
)} |
||||||
|
invalid={!!errors.ref} |
||||||
|
error={errors.ref && <BranchValidationError />} |
||||||
|
> |
||||||
|
<Input id="dashboard-branch" {...register('ref', { validate: validateBranchName })} /> |
||||||
|
</Field> |
||||||
|
)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
<Stack gap={2}> |
||||||
|
<Button variant="primary" type="submit" disabled={request.isLoading || !isDirty}> |
||||||
|
{request.isLoading |
||||||
|
? t('dashboard-scene.save-provisioned-dashboard-form.saving', 'Saving...') |
||||||
|
: t('dashboard-scene.save-provisioned-dashboard-form.save', 'Save')} |
||||||
|
</Button> |
||||||
|
<Button variant="secondary" onClick={drawer.onClose} fill="outline"> |
||||||
|
<Trans i18nKey="dashboard-scene.save-provisioned-dashboard-form.cancel">Cancel</Trans> |
||||||
|
</Button> |
||||||
|
</Stack> |
||||||
|
</Stack> |
||||||
|
</form> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const BranchValidationError = () => ( |
||||||
|
<> |
||||||
|
<Trans i18nKey="dashboard-scene.branch-validation-error.invalid-branch-name">Invalid branch name.</Trans> |
||||||
|
<ul style={{ padding: '0 20px' }}> |
||||||
|
<li> |
||||||
|
<Trans i18nKey="dashboard-scene.branch-validation-error.cannot-start-with"> |
||||||
|
It cannot start with '/' or end with '/', '.', or whitespace. |
||||||
|
</Trans> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<Trans i18nKey="dashboard-scene.branch-validation-error.it-cannot-contain-or"> |
||||||
|
It cannot contain '//' or '..'. |
||||||
|
</Trans> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<Trans i18nKey="dashboard-scene.branch-validation-error.cannot-contain-invalid-characters"> |
||||||
|
It cannot contain invalid characters: '~', '^', ':', '?', '*', '[', '\\', or ']'. |
||||||
|
</Trans> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<Trans i18nKey="dashboard-scene.branch-validation-error.least-valid-character"> |
||||||
|
It must have at least one valid character. |
||||||
|
</Trans> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</> |
||||||
|
); |
||||||
|
|
||||||
|
/** |
||||||
|
* Dashboard title validation to ensure it's not the same as the folder name |
||||||
|
* and meets other naming requirements. |
||||||
|
*/ |
||||||
|
async function validateTitle(title: string, formValues: FormData) { |
||||||
|
if (title === formValues.folder.title?.trim()) { |
||||||
|
return t( |
||||||
|
'dashboard-scene.save-provisioned-dashboard-form.title-same-as-folder', |
||||||
|
'Dashboard name cannot be the same as the folder name' |
||||||
|
); |
||||||
|
} |
||||||
|
try { |
||||||
|
await validationSrv.validateNewDashboardName(formValues.folder.uid ?? 'general', title); |
||||||
|
return true; |
||||||
|
} catch (error) { |
||||||
|
return error instanceof Error |
||||||
|
? error.message |
||||||
|
: t( |
||||||
|
'dashboard-scene.save-provisioned-dashboard-form.title-validation-failed', |
||||||
|
'Dashboard title validation failed.' |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { RepositorySpec } from 'app/api/clients/provisioning'; |
||||||
|
import { WorkflowOption } from 'app/features/provisioning/types'; |
||||||
|
|
||||||
|
export function getDefaultWorkflow(config?: RepositorySpec) { |
||||||
|
return config?.workflows?.[0]; |
||||||
|
} |
||||||
|
|
||||||
|
export function getWorkflowOptions(config?: RepositorySpec, ref?: string) { |
||||||
|
if (!config) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
if (config.local?.path) { |
||||||
|
return [{ label: `Write to ${config.local.path}`, value: 'write' }]; |
||||||
|
} |
||||||
|
|
||||||
|
let branch = ref ?? config.github?.branch; |
||||||
|
const availableOptions: Array<{ label: string; value: WorkflowOption }> = [ |
||||||
|
{ label: `Push to ${branch ?? 'main'}`, value: 'write' }, |
||||||
|
{ label: 'Push to different branch', value: 'branch' }, |
||||||
|
]; |
||||||
|
|
||||||
|
// Filter options based on the workflows in the config
|
||||||
|
return availableOptions.filter((option) => config.workflows?.includes(option.value)); |
||||||
|
} |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
import { skipToken } from '@reduxjs/toolkit/query/react'; |
||||||
|
|
||||||
|
import { useGetFolderQuery } from 'app/api/clients/folder'; |
||||||
|
import { AnnoKeyManagerIdentity, AnnoKeyManagerKind, AnnoKeySourcePath } from 'app/features/apiserver/types'; |
||||||
|
import { useGetResourceRepository } from 'app/features/provisioning/hooks/useGetResourceRepository'; |
||||||
|
import { useRepositoryList } from 'app/features/provisioning/hooks/useRepositoryList'; |
||||||
|
import { DashboardMeta } from 'app/types'; |
||||||
|
|
||||||
|
import { getDefaultWorkflow } from './defaults'; |
||||||
|
import { generatePath } from './utils/path'; |
||||||
|
import { generateTimestamp } from './utils/timestamp'; |
||||||
|
|
||||||
|
interface UseDefaultValuesParams { |
||||||
|
meta: DashboardMeta; |
||||||
|
defaultTitle: string; |
||||||
|
defaultDescription?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export function useDefaultValues({ meta, defaultTitle, defaultDescription }: UseDefaultValuesParams) { |
||||||
|
const annotations = meta.k8s?.annotations; |
||||||
|
const managerKind = annotations?.[AnnoKeyManagerKind]; |
||||||
|
const managerIdentity = annotations?.[AnnoKeyManagerIdentity]; |
||||||
|
const sourcePath = annotations?.[AnnoKeySourcePath]; |
||||||
|
const repositoryConfig = useConfig({ folderUid: meta.folderUid, managerKind, managerIdentity }); |
||||||
|
const repository = repositoryConfig?.spec; |
||||||
|
const timestamp = generateTimestamp(); |
||||||
|
|
||||||
|
// Get folder data to retrieve the folder path
|
||||||
|
const folderQuery = useGetFolderQuery(meta.folderUid ? { name: meta.folderUid } : skipToken); |
||||||
|
|
||||||
|
const folderPath = meta.folderUid ? (folderQuery.data?.metadata?.annotations?.[AnnoKeySourcePath] ?? '') : ''; |
||||||
|
|
||||||
|
const dashboardPath = generatePath({ |
||||||
|
timestamp, |
||||||
|
pathFromAnnotation: sourcePath, |
||||||
|
slug: meta.slug, |
||||||
|
folderPath, |
||||||
|
}); |
||||||
|
|
||||||
|
if (folderQuery.isLoading || !repositoryConfig) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
values: { |
||||||
|
ref: `dashboard/${timestamp}`, |
||||||
|
path: dashboardPath, |
||||||
|
repo: managerIdentity || repositoryConfig?.metadata?.name || '', |
||||||
|
comment: '', |
||||||
|
folder: { |
||||||
|
uid: meta.folderUid, |
||||||
|
title: '', |
||||||
|
}, |
||||||
|
title: defaultTitle, |
||||||
|
description: defaultDescription ?? '', |
||||||
|
workflow: getDefaultWorkflow(repository), |
||||||
|
}, |
||||||
|
isNew: !meta.k8s?.name, |
||||||
|
repositoryConfig: repository, |
||||||
|
isGitHub: repository?.type === 'github', |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
type UseConfigArgs = { |
||||||
|
folderUid?: string; |
||||||
|
managerKind?: string; |
||||||
|
managerIdentity?: string; |
||||||
|
}; |
||||||
|
const useConfig = ({ folderUid, managerKind, managerIdentity }: UseConfigArgs) => { |
||||||
|
const repositoryConfig = useGetResourceRepository({ |
||||||
|
name: managerKind === 'repo' ? managerIdentity : undefined, |
||||||
|
folderUid, |
||||||
|
}); |
||||||
|
|
||||||
|
const [items, isLoading] = useRepositoryList(repositoryConfig ? skipToken : undefined); |
||||||
|
|
||||||
|
if (repositoryConfig) { |
||||||
|
return repositoryConfig; |
||||||
|
} |
||||||
|
|
||||||
|
if (isLoading) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
const instanceConfig = items?.find((repo) => repo.spec?.sync.target === 'instance'); |
||||||
|
if (instanceConfig) { |
||||||
|
return instanceConfig; |
||||||
|
} |
||||||
|
|
||||||
|
// Return the config, which targets the folder
|
||||||
|
return items?.find((repo) => repo?.metadata?.name === folderUid); |
||||||
|
}; |
||||||
@ -0,0 +1,71 @@ |
|||||||
|
import { generatePath } from './path'; |
||||||
|
|
||||||
|
describe('generatePath', () => { |
||||||
|
const timestamp = '2023-05-15-abcde'; |
||||||
|
|
||||||
|
it('should generate path using slug when pathFromAnnotation is not provided', () => { |
||||||
|
const result = generatePath({ |
||||||
|
timestamp, |
||||||
|
slug: 'my-dashboard', |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result).toBe('my-dashboard.json'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should use default slug with timestamp when neither pathFromAnnotation nor slug is provided', () => { |
||||||
|
const result = generatePath({ |
||||||
|
timestamp, |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result).toBe('new-dashboard-2023-05-15-abcde.json'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should use pathFromAnnotation when provided', () => { |
||||||
|
const result = generatePath({ |
||||||
|
timestamp, |
||||||
|
pathFromAnnotation: 'dashboards/my-custom-path.json', |
||||||
|
slug: 'my-dashboard', // This should be ignored when pathFromAnnotation is provided
|
||||||
|
}); |
||||||
|
|
||||||
|
expect(result).toBe('dashboards/my-custom-path.json'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should remove hash from pathFromAnnotation', () => { |
||||||
|
const result = generatePath({ |
||||||
|
timestamp, |
||||||
|
pathFromAnnotation: 'dashboards/my-custom-path.json#some-hash', |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result).toBe('dashboards/my-custom-path.json'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should prepend folderPath when provided', () => { |
||||||
|
const result = generatePath({ |
||||||
|
timestamp, |
||||||
|
slug: 'my-dashboard', |
||||||
|
folderPath: 'folder/path', |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result).toBe('folder/path/my-dashboard.json'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should prepend folderPath to pathFromAnnotation when both are provided', () => { |
||||||
|
const result = generatePath({ |
||||||
|
timestamp, |
||||||
|
pathFromAnnotation: 'my-custom-path.json', |
||||||
|
folderPath: 'folder/path', |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result).toBe('folder/path/my-custom-path.json'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should handle empty folderPath', () => { |
||||||
|
const result = generatePath({ |
||||||
|
timestamp, |
||||||
|
slug: 'my-dashboard', |
||||||
|
folderPath: '', |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result).toBe('my-dashboard.json'); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
/** |
||||||
|
* Parameters for generating a dashboard path |
||||||
|
*/ |
||||||
|
export interface GeneratePathParams { |
||||||
|
timestamp: string; |
||||||
|
pathFromAnnotation?: string; |
||||||
|
slug?: string; |
||||||
|
folderPath?: string; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Generates a path for a dashboard based on provided parameters |
||||||
|
* If pathFromAnnotation is provided, it will be used as the base path |
||||||
|
* Otherwise, a path will be generated using the slug or a default name with timestamp |
||||||
|
* If folderPath is provided, it will be prepended to the path |
||||||
|
*/ |
||||||
|
export function generatePath({ timestamp, pathFromAnnotation, slug, folderPath = '' }: GeneratePathParams): string { |
||||||
|
let path = ''; |
||||||
|
|
||||||
|
if (pathFromAnnotation) { |
||||||
|
const hashIndex = pathFromAnnotation.indexOf('#'); |
||||||
|
path = hashIndex > 0 ? pathFromAnnotation.substring(0, hashIndex) : pathFromAnnotation; |
||||||
|
} else { |
||||||
|
const pathSlug = slug || `new-dashboard-${timestamp}`; |
||||||
|
path = `${pathSlug}.json`; |
||||||
|
} |
||||||
|
|
||||||
|
// Add folder path if it exists
|
||||||
|
if (folderPath) { |
||||||
|
return `${folderPath}/${path}`; |
||||||
|
} |
||||||
|
|
||||||
|
return path; |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import { generateTimestamp } from './timestamp'; |
||||||
|
|
||||||
|
describe('generateTimestamp', () => { |
||||||
|
it('should generate a timestamp in the expected format', () => { |
||||||
|
const timestamp = generateTimestamp(); |
||||||
|
|
||||||
|
// Check that the timestamp is a string
|
||||||
|
expect(typeof timestamp).toBe('string'); |
||||||
|
|
||||||
|
// Check that the timestamp follows the format YYYY-MM-DD-xxxxx
|
||||||
|
// where xxxxx is a random string of 5 alphabetic characters
|
||||||
|
expect(timestamp).toMatch(/^\d{4}-\d{2}-\d{2}-[a-zA-Z]{5}$/); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should generate unique timestamps', () => { |
||||||
|
// Generate multiple timestamps and check that they're different
|
||||||
|
const timestamp1 = generateTimestamp(); |
||||||
|
const timestamp2 = generateTimestamp(); |
||||||
|
const timestamp3 = generateTimestamp(); |
||||||
|
|
||||||
|
// The date part might be the same, but the random part should make them different
|
||||||
|
expect(timestamp1).not.toBe(timestamp2); |
||||||
|
expect(timestamp1).not.toBe(timestamp3); |
||||||
|
expect(timestamp2).not.toBe(timestamp3); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import { Chance } from 'chance'; |
||||||
|
|
||||||
|
import { dateTime } from '@grafana/data'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Generates a timestamp string in the format YYYY-MM-DD-xxxxx where xxxxx is a random string |
||||||
|
*/ |
||||||
|
export function generateTimestamp(): string { |
||||||
|
const random = new Chance(); |
||||||
|
return `${dateTime().format('YYYY-MM-DD')}-${random.string({ length: 5, alpha: true })}`; |
||||||
|
} |
||||||
Loading…
Reference in new issue