mirror of https://github.com/grafana/grafana
Explore: allow users to save Explore state to a new panel in a new dashboard (#45148)
* Add Button & Form * Save to new dashboard * minor adjustements * move modal to a separate component * handle dashboard name related errors * pick visualization based on query results * lift state * fix types * Add Open & Close tests * Add submit test * add navigation tests * add tests for API errors * remove console log * create wrapper component for AddToDashboardButton * remove unused mapped prop * add wrapper test * rename isActive to isVisible * invert control over save & redirect logic * remove leftover commented code * cleanup setup parameters * reorganize code & improve tests * Remove option to add to existing dashboard * UI tweaks * disable button if no queries * Fix tests * better accessible tests * handle submission errors * improve addToDashboard types * use dashboardSrv' saveDashboard * remove leftover test helper * fix typo Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> * Apply suggestions from code review Co-authored-by: Kristina <kristina.durivage@grafana.com> Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com> Co-authored-by: Kristina <kristina.durivage@grafana.com>pull/46149/head
Giordano Ricci
3 years ago
committed by
GitHub
parent
c4ccfc3bf7
commit
09f48173fe
@ -0,0 +1,137 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { act, render, screen, waitFor } from '@testing-library/react'; |
||||||
|
import userEvent from '@testing-library/user-event'; |
||||||
|
import { AddToDashboardModal } from './AddToDashboardModal'; |
||||||
|
import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types'; |
||||||
|
import * as dashboardApi from 'app/features/manage-dashboards/state/actions'; |
||||||
|
|
||||||
|
const createFolder = (title: string, id: number): DashboardSearchHit => ({ |
||||||
|
title, |
||||||
|
id, |
||||||
|
isStarred: false, |
||||||
|
type: DashboardSearchItemType.DashFolder, |
||||||
|
items: [], |
||||||
|
url: '', |
||||||
|
uri: '', |
||||||
|
tags: [], |
||||||
|
}); |
||||||
|
|
||||||
|
describe('Add to Dashboard Modal', () => { |
||||||
|
const searchFoldersResponse = Promise.resolve([createFolder('Folder 1', 1), createFolder('Folder 2', 2)]); |
||||||
|
|
||||||
|
const waitForSearchFolderResponse = async () => { |
||||||
|
return act(async () => { |
||||||
|
// FolderPicker asynchronously sets its internal state based on search results, causing warnings when testing.
|
||||||
|
// Given we are not aware of the component implementation to wait on certain element to appear or disappear (for example a loading indicator),
|
||||||
|
// we wait for the mocked promise we know it internally uses.
|
||||||
|
// This is less than ideal as we are relying on implementation details, but is a reasonable solution for this test's scope
|
||||||
|
await searchFoldersResponse; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
jest.spyOn(dashboardApi, 'searchFolders').mockReturnValue(searchFoldersResponse); |
||||||
|
}); |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
jest.restoreAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('Save to new dashboard', () => { |
||||||
|
it('Does not submit if the form is invalid', async () => { |
||||||
|
const saveMock = jest.fn(); |
||||||
|
|
||||||
|
render(<AddToDashboardModal queries={[]} visualization="table" onSave={saveMock} onClose={() => {}} />); |
||||||
|
|
||||||
|
// there shouldn't be any alert in the modal
|
||||||
|
expect(screen.queryByRole('alert')).not.toBeInTheDocument(); |
||||||
|
|
||||||
|
const dashboardNameInput = screen.getByRole<HTMLInputElement>('textbox', { name: /dashboard name/i }); |
||||||
|
|
||||||
|
// dashboard name is required
|
||||||
|
userEvent.clear(dashboardNameInput); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
// The error message should appear
|
||||||
|
await screen.findByRole('alert'); |
||||||
|
|
||||||
|
// Create dashboard API is not invoked
|
||||||
|
expect(saveMock).not.toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Correctly submits if the form is valid', async () => { |
||||||
|
const saveMock = jest.fn(); |
||||||
|
|
||||||
|
render(<AddToDashboardModal queries={[]} visualization="table" onSave={saveMock} onClose={() => {}} />); |
||||||
|
await waitForSearchFolderResponse(); |
||||||
|
|
||||||
|
const dashboardNameInput = screen.getByRole<HTMLInputElement>('textbox', { name: /dashboard name/i }); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitFor(() => { |
||||||
|
expect(screen.getByRole('button', { name: /save and keep exploring/i })).toBeEnabled(); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(saveMock).toHaveBeenCalledWith( |
||||||
|
{ |
||||||
|
dashboardName: dashboardNameInput.value, |
||||||
|
queries: [], |
||||||
|
visualization: 'table', |
||||||
|
folderId: 1, |
||||||
|
}, |
||||||
|
expect.anything() |
||||||
|
); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('Handling API errors', () => { |
||||||
|
it('Correctly handles name-exist API Error', async () => { |
||||||
|
// name-exists is triggered when trying to create a dashboard in a folder that already has a dashboard with the same name
|
||||||
|
const saveMock = jest.fn().mockResolvedValue({ status: 'name-exists', message: 'name exists' }); |
||||||
|
|
||||||
|
render(<AddToDashboardModal queries={[]} visualization="table" onSave={saveMock} onClose={() => {}} />); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
expect(await screen.findByRole('alert')).toHaveTextContent('name exists'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Correctly handles empty name API Error', async () => { |
||||||
|
// empty-name is triggered when trying to create a dashboard having an empty name.
|
||||||
|
// FE validation usually avoids this use case, but can be triggered by using only whitespaces in
|
||||||
|
// dashboard name field
|
||||||
|
const saveMock = jest.fn().mockResolvedValue({ status: 'empty-name', message: 'empty name' }); |
||||||
|
|
||||||
|
render(<AddToDashboardModal queries={[]} visualization="table" onSave={saveMock} onClose={() => {}} />); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
expect(await screen.findByRole('alert')).toHaveTextContent('empty name'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Correctly handles name match API Error', async () => { |
||||||
|
// name-match, triggered when trying to create a dashboard in a folder that has the same name.
|
||||||
|
// it doesn't seem to ever be triggered, but matches the error in
|
||||||
|
// https://github.com/grafana/grafana/blob/44f1e381cbc7a5e236b543bc6bd06b00e3152d7f/pkg/models/dashboards.go#L71
|
||||||
|
const saveMock = jest.fn().mockResolvedValue({ status: 'name-match', message: 'name match' }); |
||||||
|
|
||||||
|
render(<AddToDashboardModal queries={[]} visualization="table" onSave={saveMock} onClose={() => {}} />); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
expect(await screen.findByRole('alert')).toHaveTextContent('name match'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Correctly handles unknown API Errors', async () => { |
||||||
|
const saveMock = jest.fn().mockResolvedValue({ status: 'unknown-error', message: 'unknown error' }); |
||||||
|
|
||||||
|
render(<AddToDashboardModal queries={[]} visualization="table" onSave={saveMock} onClose={() => {}} />); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
expect(await screen.findByRole('alert')).toHaveTextContent('unknown error'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,132 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { DataQuery } from '@grafana/data'; |
||||||
|
import { Alert, Button, Field, Input, InputControl, Modal } from '@grafana/ui'; |
||||||
|
import { FolderPicker } from 'app/core/components/Select/FolderPicker'; |
||||||
|
import { useForm } from 'react-hook-form'; |
||||||
|
import { SaveToNewDashboardDTO } from './addToDashboard'; |
||||||
|
|
||||||
|
export interface ErrorResponse { |
||||||
|
status: string; |
||||||
|
message?: string; |
||||||
|
} |
||||||
|
|
||||||
|
type FormDTO = SaveToNewDashboardDTO; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
onClose: () => void; |
||||||
|
queries: DataQuery[]; |
||||||
|
visualization: string; |
||||||
|
onSave: (data: FormDTO, redirect: boolean) => Promise<void | ErrorResponse>; |
||||||
|
} |
||||||
|
|
||||||
|
function withRedirect<T extends any[]>(fn: (redirect: boolean, ...args: T) => {}, redirect: boolean) { |
||||||
|
return async (...args: T) => fn(redirect, ...args); |
||||||
|
} |
||||||
|
|
||||||
|
export const AddToDashboardModal = ({ onClose, queries, visualization, onSave }: Props) => { |
||||||
|
const [submissionError, setSubmissionError] = useState<string>(); |
||||||
|
const { |
||||||
|
register, |
||||||
|
handleSubmit, |
||||||
|
control, |
||||||
|
formState: { errors, isSubmitting }, |
||||||
|
setError, |
||||||
|
} = useForm<FormDTO>({ defaultValues: { queries, visualization } }); |
||||||
|
|
||||||
|
const onSubmit = async (withRedirect: boolean, data: FormDTO) => { |
||||||
|
setSubmissionError(undefined); |
||||||
|
const error = await onSave(data, withRedirect); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
switch (error.status) { |
||||||
|
case 'name-exists': |
||||||
|
case 'empty-name': |
||||||
|
case 'name-match': |
||||||
|
// error.message should always be defined here
|
||||||
|
setError('dashboardName', { message: error.message ?? 'This field is invalid' }); |
||||||
|
break; |
||||||
|
default: |
||||||
|
setSubmissionError( |
||||||
|
error.message ?? 'An unknown error occurred while saving the dashboard. Please try again.' |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal title="Add panel to dashboard" onDismiss={onClose} isOpen> |
||||||
|
<form> |
||||||
|
<input type="hidden" {...register('queries')} /> |
||||||
|
<input type="hidden" {...register('visualization')} /> |
||||||
|
|
||||||
|
<p>Create a new dashboard and add a panel with explored queries.</p> |
||||||
|
|
||||||
|
<Field |
||||||
|
label="Dashboard name" |
||||||
|
description="Choose the name of the new dashboard" |
||||||
|
error={errors.dashboardName?.message} |
||||||
|
invalid={!!errors.dashboardName} |
||||||
|
> |
||||||
|
<Input |
||||||
|
id="dashboard_name" |
||||||
|
{...register('dashboardName', { |
||||||
|
shouldUnregister: true, |
||||||
|
required: { value: true, message: 'This field is required' }, |
||||||
|
})} |
||||||
|
// we set default value here instead of in useForm because this input will be unregistered when switching
|
||||||
|
// to "Existing Dashboard" and default values are not populated with manually registered
|
||||||
|
// inputs (ie. when switching back to "New Dashboard")
|
||||||
|
defaultValue="New dashboard (Explore)" |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
|
||||||
|
<Field |
||||||
|
label="Folder" |
||||||
|
description="Select where the dashboard will be created" |
||||||
|
error={errors.folderId?.message} |
||||||
|
invalid={!!errors.folderId} |
||||||
|
> |
||||||
|
<InputControl |
||||||
|
render={({ field: { ref, onChange, ...field } }) => ( |
||||||
|
<FolderPicker onChange={(e) => onChange(e.id)} {...field} enableCreateNew inputId="folder" /> |
||||||
|
)} |
||||||
|
control={control} |
||||||
|
name="folderId" |
||||||
|
shouldUnregister |
||||||
|
rules={{ required: { value: true, message: 'Select a valid folder to save your dashboard in' } }} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
|
||||||
|
{submissionError && ( |
||||||
|
<Alert severity="error" title="Unknown error"> |
||||||
|
{submissionError} |
||||||
|
</Alert> |
||||||
|
)} |
||||||
|
|
||||||
|
<Modal.ButtonRow> |
||||||
|
<Button type="reset" onClick={onClose} fill="outline" variant="secondary" disabled={isSubmitting}> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
<Button |
||||||
|
type="submit" |
||||||
|
onClick={handleSubmit(withRedirect(onSubmit, false))} |
||||||
|
variant="secondary" |
||||||
|
icon="compass" |
||||||
|
disabled={isSubmitting} |
||||||
|
> |
||||||
|
Save and keep exploring |
||||||
|
</Button> |
||||||
|
<Button |
||||||
|
type="submit" |
||||||
|
onClick={handleSubmit(withRedirect(onSubmit, true))} |
||||||
|
variant="primary" |
||||||
|
icon="plus" |
||||||
|
disabled={isSubmitting} |
||||||
|
> |
||||||
|
Save and go to dashboard |
||||||
|
</Button> |
||||||
|
</Modal.ButtonRow> |
||||||
|
</form> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import { DataQuery } from '@grafana/data'; |
||||||
|
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; |
||||||
|
|
||||||
|
export interface SaveToNewDashboardDTO { |
||||||
|
dashboardName: string; |
||||||
|
folderId: number; |
||||||
|
queries: DataQuery[]; |
||||||
|
visualization: string; |
||||||
|
} |
||||||
|
|
||||||
|
const createDashboard = (dashboardName: string, folderId: number, queries: DataQuery[], visualization: string) => { |
||||||
|
const dashboard = getDashboardSrv().create({ title: dashboardName }, { folderId }); |
||||||
|
|
||||||
|
dashboard.addPanel({ targets: queries, type: visualization, title: 'New Panel' }); |
||||||
|
|
||||||
|
return getDashboardSrv().saveDashboard({ dashboard, folderId }, { showErrorAlert: false, showSuccessAlert: false }); |
||||||
|
}; |
||||||
|
|
||||||
|
export const addToDashboard = async (data: SaveToNewDashboardDTO): Promise<string> => { |
||||||
|
const res = await createDashboard(data.dashboardName, data.folderId, data.queries, data.visualization); |
||||||
|
return res.data.url; |
||||||
|
}; |
||||||
@ -0,0 +1,262 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { act, render, screen, waitForElementToBeRemoved } from '@testing-library/react'; |
||||||
|
import { ExploreId, ExplorePanelData, ExploreState } from 'app/types'; |
||||||
|
import { Provider } from 'react-redux'; |
||||||
|
import { configureStore } from 'app/store/configureStore'; |
||||||
|
import userEvent from '@testing-library/user-event'; |
||||||
|
import { DataQuery, MutableDataFrame } from '@grafana/data'; |
||||||
|
import { createEmptyQueryResponse } from '../state/utils'; |
||||||
|
import { locationService } from '@grafana/runtime'; |
||||||
|
import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types'; |
||||||
|
import * as api from './addToDashboard'; |
||||||
|
import * as dashboardApi from 'app/features/manage-dashboards/state/actions'; |
||||||
|
import { AddToDashboard } from '.'; |
||||||
|
|
||||||
|
const setup = ( |
||||||
|
children: JSX.Element, |
||||||
|
queries: DataQuery[] = [], |
||||||
|
queryResponse: ExplorePanelData = createEmptyQueryResponse() |
||||||
|
) => { |
||||||
|
const store = configureStore({ explore: { left: { queries, queryResponse } } as ExploreState }); |
||||||
|
|
||||||
|
return render(<Provider store={store}>{children}</Provider>); |
||||||
|
}; |
||||||
|
|
||||||
|
const createFolder = (title: string, id: number): DashboardSearchHit => ({ |
||||||
|
title, |
||||||
|
id, |
||||||
|
isStarred: false, |
||||||
|
type: DashboardSearchItemType.DashFolder, |
||||||
|
items: [], |
||||||
|
url: '', |
||||||
|
uri: '', |
||||||
|
tags: [], |
||||||
|
}); |
||||||
|
|
||||||
|
const openModal = async () => { |
||||||
|
userEvent.click(screen.getByRole('button', { name: /add to dashboard/i })); |
||||||
|
|
||||||
|
expect(await screen.findByRole('dialog', { name: 'Add panel to dashboard' })).toBeInTheDocument(); |
||||||
|
}; |
||||||
|
|
||||||
|
describe('Add to Dashboard Button', () => { |
||||||
|
const searchFoldersResponse = Promise.resolve([createFolder('Folder 1', 1), createFolder('Folder 2', 2)]); |
||||||
|
const redirectURL = '/some/redirect/url'; |
||||||
|
let addToDashboardMock: jest.SpyInstance< |
||||||
|
ReturnType<typeof api.addToDashboard>, |
||||||
|
Parameters<typeof api.addToDashboard> |
||||||
|
>; |
||||||
|
|
||||||
|
const waitForSearchFolderResponse = async () => { |
||||||
|
return act(async () => { |
||||||
|
await searchFoldersResponse; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
jest.spyOn(dashboardApi, 'searchFolders').mockReturnValue(searchFoldersResponse); |
||||||
|
addToDashboardMock = jest.spyOn(api, 'addToDashboard').mockResolvedValue('/some/redirect/url'); |
||||||
|
}); |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
jest.restoreAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Opens and closes the modal correctly', async () => { |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, [{ refId: 'A' }]); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /cancel/i })); |
||||||
|
|
||||||
|
expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('navigation', () => { |
||||||
|
it('Navigates to dashboard when clicking on "Save and go to dashboard"', async () => { |
||||||
|
locationService.push = jest.fn(); |
||||||
|
|
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, [{ refId: 'A' }]); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and go to dashboard/i })); |
||||||
|
|
||||||
|
await waitForSearchFolderResponse(); |
||||||
|
|
||||||
|
expect(locationService.push).toHaveBeenCalledWith(redirectURL); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Does NOT navigate to dashboard when clicking on "Save and keep exploring"', async () => { |
||||||
|
locationService.push = jest.fn(); |
||||||
|
|
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, [{ refId: 'A' }]); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForSearchFolderResponse(); |
||||||
|
|
||||||
|
expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); |
||||||
|
|
||||||
|
expect(locationService.push).not.toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('All queries are correctly passed through', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A' }, { refId: 'B', hide: true }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
queries: queries, |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Defaults to table if no response is available', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A' }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries, createEmptyQueryResponse()); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
visualization: 'table', |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Defaults to table if no query is active', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A', hide: true }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
visualization: 'table', |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Filters out hidden queries when selecting visualization', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A', hide: true }, { refId: 'B' }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries, { |
||||||
|
...createEmptyQueryResponse(), |
||||||
|
graphFrames: [new MutableDataFrame({ refId: 'B', fields: [] })], |
||||||
|
logsFrames: [new MutableDataFrame({ refId: 'A', fields: [] })], |
||||||
|
}); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
// Query A comes before B, but it's hidden. visualization will be picked according to frames generated by B
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
queries: queries, |
||||||
|
visualization: 'timeseries', |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Sets visualization to logs if there are log frames', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A' }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries, { |
||||||
|
...createEmptyQueryResponse(), |
||||||
|
logsFrames: [new MutableDataFrame({ refId: 'A', fields: [] })], |
||||||
|
}); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
// Query A comes before B, but it's hidden. visualization will be picked according to frames generated by B
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
visualization: 'logs', |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Sets visualization to timeseries if there are graph frames', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A' }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries, { |
||||||
|
...createEmptyQueryResponse(), |
||||||
|
graphFrames: [new MutableDataFrame({ refId: 'A', fields: [] })], |
||||||
|
}); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
visualization: 'timeseries', |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Sets visualization to nodeGraph if there are node graph frames', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A' }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries, { |
||||||
|
...createEmptyQueryResponse(), |
||||||
|
nodeGraphFrames: [new MutableDataFrame({ refId: 'A', fields: [] })], |
||||||
|
}); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
visualization: 'nodeGraph', |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
// trace view is not supported in dashboards, defaulting to table
|
||||||
|
it('Sets visualization to table if there are trace frames', async () => { |
||||||
|
const queries: DataQuery[] = [{ refId: 'A' }]; |
||||||
|
setup(<AddToDashboard exploreId={ExploreId.left} />, queries, { |
||||||
|
...createEmptyQueryResponse(), |
||||||
|
traceFrames: [new MutableDataFrame({ refId: 'A', fields: [] })], |
||||||
|
}); |
||||||
|
|
||||||
|
await openModal(); |
||||||
|
|
||||||
|
userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); |
||||||
|
|
||||||
|
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Add panel to dashboard' })); |
||||||
|
|
||||||
|
expect(addToDashboardMock).toHaveBeenCalledWith( |
||||||
|
expect.objectContaining({ |
||||||
|
visualization: 'table', |
||||||
|
}) |
||||||
|
); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { DataFrame, DataQuery } from '@grafana/data'; |
||||||
|
import { ExploreId, StoreState } from 'app/types'; |
||||||
|
import { useSelector, useDispatch } from 'react-redux'; |
||||||
|
import { getExploreItemSelector } from '../state/selectors'; |
||||||
|
import { addToDashboard, SaveToNewDashboardDTO } from './addToDashboard'; |
||||||
|
import { locationService } from '@grafana/runtime'; |
||||||
|
import { notifyApp } from 'app/core/actions'; |
||||||
|
import { createSuccessNotification } from 'app/core/copy/appNotification'; |
||||||
|
import { ToolbarButton } from '@grafana/ui'; |
||||||
|
import { AddToDashboardModal, ErrorResponse } from './AddToDashboardModal'; |
||||||
|
|
||||||
|
const isVisible = (query: DataQuery) => !query.hide; |
||||||
|
const hasRefId = (refId: DataFrame['refId']) => (frame: DataFrame) => frame.refId === refId; |
||||||
|
|
||||||
|
const getMainVisualization = ( |
||||||
|
queries: DataQuery[], |
||||||
|
graphFrames?: DataFrame[], |
||||||
|
logsFrames?: DataFrame[], |
||||||
|
nodeGraphFrames?: DataFrame[] |
||||||
|
) => { |
||||||
|
for (const { refId } of queries.filter(isVisible)) { |
||||||
|
// traceview is not supported in dashboards, skipping it for now.
|
||||||
|
const hasQueryRefId = hasRefId(refId); |
||||||
|
if (graphFrames?.some(hasQueryRefId)) { |
||||||
|
return 'timeseries'; |
||||||
|
} |
||||||
|
if (logsFrames?.some(hasQueryRefId)) { |
||||||
|
return 'logs'; |
||||||
|
} |
||||||
|
if (nodeGraphFrames?.some(hasQueryRefId)) { |
||||||
|
return 'nodeGraph'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// falling back to table
|
||||||
|
return 'table'; |
||||||
|
}; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
exploreId: ExploreId; |
||||||
|
} |
||||||
|
|
||||||
|
export const AddToDashboard = ({ exploreId }: Props) => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const selectExploreItem = getExploreItemSelector(exploreId); |
||||||
|
|
||||||
|
const { queries, mainVisualization } = useSelector((state: StoreState) => { |
||||||
|
const queries = selectExploreItem(state)?.queries || []; |
||||||
|
const { graphFrames, logsFrames, nodeGraphFrames } = selectExploreItem(state)?.queryResponse || {}; |
||||||
|
|
||||||
|
return { queries, mainVisualization: getMainVisualization(queries, graphFrames, logsFrames, nodeGraphFrames) }; |
||||||
|
}); |
||||||
|
|
||||||
|
const handleSave = async (data: SaveToNewDashboardDTO, redirect: boolean): Promise<void | ErrorResponse> => { |
||||||
|
try { |
||||||
|
const redirectURL = await addToDashboard(data); |
||||||
|
|
||||||
|
if (redirect) { |
||||||
|
locationService.push(redirectURL); |
||||||
|
} else { |
||||||
|
dispatch(notifyApp(createSuccessNotification(`Panel saved to ${data.dashboardName}`))); |
||||||
|
setIsOpen(false); |
||||||
|
} |
||||||
|
return; |
||||||
|
} catch (e) { |
||||||
|
return { message: e.data?.message, status: e.data?.status ?? 'unknown-error' }; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<ToolbarButton |
||||||
|
icon="apps" |
||||||
|
onClick={() => setIsOpen(true)} |
||||||
|
aria-label="Add to dashboard" |
||||||
|
disabled={queries.length === 0} |
||||||
|
> |
||||||
|
Add to Dashboard |
||||||
|
</ToolbarButton> |
||||||
|
|
||||||
|
{isOpen && ( |
||||||
|
<AddToDashboardModal |
||||||
|
onClose={() => setIsOpen(false)} |
||||||
|
queries={queries} |
||||||
|
visualization={mainVisualization} |
||||||
|
onSave={handleSave} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
Loading…
Reference in new issue