+
+ {ready && <>{newNavigationEnabled ?
+ {pageBanners.map((Banner, index) => (
+
-
-
-
+ {element}
+
+ ));
// Join meta data elements by separator
- if (Array.isArray(children) && separator) {
- const filtered = React.Children.toArray(children).filter(Boolean);
- if (!filtered.length) {
- return null;
- }
+ if (filtered.length > 1 && separator) {
meta = filtered.reduce((prev, curr, i) => [
prev,
@@ -261,6 +269,9 @@ const getMetaStyles = (theme: GrafanaTheme2) => ({
margin: theme.spacing(0.5, 0, 0),
lineHeight: theme.typography.bodySmall.lineHeight,
overflowWrap: 'anywhere',
+ }),
+ metadataItem: css({
+ // Needed to allow for clickable children in metadata
zIndex: 0,
}),
separator: css({
diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx
index 64bfe047e9c..3f81e998dc2 100644
--- a/packages/grafana-ui/src/components/Card/CardContainer.tsx
+++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx
@@ -1,6 +1,8 @@
-import React, { HTMLAttributes } from 'react';
import { css, cx } from '@emotion/css';
+import React, { HTMLAttributes } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
+
import { styleMixins, stylesFactory, useStyles2, useTheme2 } from '../../themes';
/**
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx
index a3ea1f80dc7..537f64a44b7 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx
@@ -1,9 +1,12 @@
import { Story, Meta } from '@storybook/react';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import React from 'react';
+
import { Cascader } from '@grafana/ui';
+
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
import { CascaderOption, CascaderProps } from './Cascader';
import mdx from './Cascader.mdx';
-import React from 'react';
const onSelect = (val: string) => console.log(val);
const options = [
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
index 048756a565f..e2dafc03041 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.test.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import { Cascader, CascaderOption, CascaderProps } from './Cascader';
import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
+import React from 'react';
+
+import { Cascader, CascaderOption, CascaderProps } from './Cascader';
const options = [
{
@@ -45,78 +47,86 @@ describe('Cascader', () => {
const placeholder = 'cascader-placeholder';
describe('options from state change', () => {
+ let user: UserEvent;
+
beforeEach(() => {
jest.useFakeTimers('modern');
+ // Need to use delay: null here to work with fakeTimers
+ // see https://github.com/testing-library/user-event/issues/833
+ user = userEvent.setup({ delay: null });
});
- it('displays updated options', () => {
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('displays updated options', async () => {
render(
-
- {newNavigationEnabled ?
- {pageBanners.map((Banner, index) => (
-
+
+
+
+
+
+
+ {appNotification.component || appNotification.text}
+ {appNotification.traceId && Trace ID: {appNotification.traceId}}
+
+
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2, severity: AlertVariant) => {
+ const color = theme.colors[severity];
+ const borderRadius = theme.shape.borderRadius();
+
+ return {
+ wrapper: css({
+ display: 'grid',
+ gridTemplateColumns: 'auto 1fr auto',
+ gridTemplateRows: 'auto 1fr auto',
+ gridTemplateAreas: `
+ 'icon title close'
+ 'icon body body'
+ 'icon trace timestamp'`,
+ gap: `0 ${theme.spacing(2)}`,
+ background: theme.colors.background.secondary,
+ borderRadius: borderRadius,
+ }),
+ icon: css({
+ gridArea: 'icon',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: theme.spacing(2, 3),
+ background: color.main,
+ color: color.contrastText,
+ borderRadius: `${borderRadius} 0 0 ${borderRadius}`,
+ }),
+ title: css({
+ gridArea: 'title',
+ alignSelf: 'center',
+ fontWeight: theme.typography.fontWeightMedium,
+ color: theme.colors.text.primary,
+ }),
+ body: css({
+ gridArea: 'body',
+ maxHeight: '50vh',
+ marginRight: theme.spacing(1),
+ overflowY: 'auto',
+ overflowWrap: 'break-word',
+ wordBreak: 'break-word',
+ color: theme.colors.text.secondary,
+ }),
+ trace: css({
+ gridArea: 'trace',
+ justifySelf: 'start',
+ alignSelf: 'end',
+ paddingBottom: theme.spacing(1),
+ fontSize: theme.typography.pxToRem(10),
+ color: theme.colors.text.secondary,
+ }),
+ close: css({
+ gridArea: 'close',
+ display: 'flex',
+ justifySelf: 'end',
+ padding: theme.spacing(1, 0.5),
+ background: 'none',
+ }),
+ timestamp: css({
+ gridArea: 'timestamp',
+ alignSelf: 'end',
+ padding: theme.spacing(1),
+ fontSize: theme.typography.pxToRem(10),
+ color: theme.colors.text.secondary,
+ }),
+ };
+};
diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx
index 15035264f15..4968330dd59 100644
--- a/public/app/core/components/Branding/Branding.tsx
+++ b/public/app/core/components/Branding/Branding.tsx
@@ -1,7 +1,8 @@
-import React, { FC } from 'react';
import { css, cx } from '@emotion/css';
-import { useTheme2, styleMixins } from '@grafana/ui';
+import React, { FC } from 'react';
+
import { colorManipulator } from '@grafana/data';
+import { useTheme2, styleMixins } from '@grafana/ui';
export interface BrandComponentProps {
className?: string;
diff --git a/public/app/core/components/CardButton.tsx b/public/app/core/components/CardButton.tsx
index 45d87b600c4..d8a73799e12 100644
--- a/public/app/core/components/CardButton.tsx
+++ b/public/app/core/components/CardButton.tsx
@@ -1,5 +1,6 @@
-import React, { HTMLAttributes } from 'react';
import { css } from '@emotion/css';
+import React, { HTMLAttributes } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, IconName, useStyles2 } from '@grafana/ui';
diff --git a/public/app/core/components/CloseButton/CloseButton.tsx b/public/app/core/components/CloseButton/CloseButton.tsx
index d9cd78f1783..1a6d000a12b 100644
--- a/public/app/core/components/CloseButton/CloseButton.tsx
+++ b/public/app/core/components/CloseButton/CloseButton.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
import { css } from '@emotion/css';
-import { IconButton, useStyles2 } from '@grafana/ui';
+import React from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
+import { IconButton, useStyles2 } from '@grafana/ui';
type Props = {
onClick: () => void;
diff --git a/public/app/core/components/ColorScale/ColorScale.tsx b/public/app/core/components/ColorScale/ColorScale.tsx
index 31080de26bd..ba9ece2581d 100644
--- a/public/app/core/components/ColorScale/ColorScale.tsx
+++ b/public/app/core/components/ColorScale/ColorScale.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css';
+import React, { useState, useEffect } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { useTheme2 } from '@grafana/ui';
diff --git a/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx b/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx
index a235c9a415d..927ce787251 100644
--- a/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx
+++ b/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx
@@ -1,6 +1,7 @@
-import React, { FunctionComponent } from 'react';
-import { Button, stylesFactory } from '@grafana/ui';
import { css } from '@emotion/css';
+import React, { FunctionComponent } from 'react';
+
+import { Button, stylesFactory } from '@grafana/ui';
import { useUrlParams } from 'app/core/navigation/hooks';
const getStyles = stylesFactory(() => {
diff --git a/public/app/core/components/DynamicImports/LoadingChunkPlaceHolder.tsx b/public/app/core/components/DynamicImports/LoadingChunkPlaceHolder.tsx
index a5813a03252..220310882a2 100644
--- a/public/app/core/components/DynamicImports/LoadingChunkPlaceHolder.tsx
+++ b/public/app/core/components/DynamicImports/LoadingChunkPlaceHolder.tsx
@@ -1,4 +1,5 @@
import React, { FunctionComponent } from 'react';
+
import { LoadingPlaceholder } from '@grafana/ui';
export const LoadingChunkPlaceHolder: FunctionComponent = React.memo(() => (
diff --git a/public/app/core/components/DynamicImports/SafeDynamicImport.test.tsx b/public/app/core/components/DynamicImports/SafeDynamicImport.test.tsx
index 2b4a99d0f2e..6cd3ffd23ad 100644
--- a/public/app/core/components/DynamicImports/SafeDynamicImport.test.tsx
+++ b/public/app/core/components/DynamicImports/SafeDynamicImport.test.tsx
@@ -1,7 +1,8 @@
import React from 'react';
-import { loadComponentHandler } from './SafeDynamicImport';
+
import { ErrorLoadingChunk } from './ErrorLoadingChunk';
import { LoadingChunkPlaceHolder } from './LoadingChunkPlaceHolder';
+import { loadComponentHandler } from './SafeDynamicImport';
describe('loadComponentHandler', () => {
describe('when there is no error and pastDelay is false', () => {
diff --git a/public/app/core/components/DynamicImports/SafeDynamicImport.tsx b/public/app/core/components/DynamicImports/SafeDynamicImport.tsx
index 4544d88a5f1..193ed6712c4 100644
--- a/public/app/core/components/DynamicImports/SafeDynamicImport.tsx
+++ b/public/app/core/components/DynamicImports/SafeDynamicImport.tsx
@@ -1,9 +1,11 @@
import React from 'react';
import Loadable from 'react-loadable';
-import { LoadingChunkPlaceHolder } from './LoadingChunkPlaceHolder';
-import { ErrorLoadingChunk } from './ErrorLoadingChunk';
+
import { GrafanaRouteComponent } from 'app/core/navigation/types';
+import { ErrorLoadingChunk } from './ErrorLoadingChunk';
+import { LoadingChunkPlaceHolder } from './LoadingChunkPlaceHolder';
+
export const loadComponentHandler = (props: { error: Error; pastDelay: boolean }) => {
const { error, pastDelay } = props;
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index 9dd81f6c69d..40ca25574b7 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -1,7 +1,8 @@
import { css } from '@emotion/css';
+import React, { MouseEvent } from 'react';
+
import { selectors } from '@grafana/e2e-selectors';
import { Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
-import React, { MouseEvent } from 'react';
export interface Props {
title: string;
diff --git a/public/app/core/components/ErrorPage/ErrorPage.tsx b/public/app/core/components/ErrorPage/ErrorPage.tsx
index d12637698de..8fe3e4c645e 100644
--- a/public/app/core/components/ErrorPage/ErrorPage.tsx
+++ b/public/app/core/components/ErrorPage/ErrorPage.tsx
@@ -1,12 +1,14 @@
import React, { PureComponent } from 'react';
import { connect, MapStateToProps } from 'react-redux';
+
import { NavModel } from '@grafana/data';
import { config } from '@grafana/runtime';
import { Icon } from '@grafana/ui';
-import Page from '../Page/Page';
import { getNavModel } from 'app/core/selectors/navModel';
import { StoreState } from 'app/types';
+import Page from '../Page/Page';
+
interface ConnectedProps {
navModel: NavModel;
}
diff --git a/public/app/core/components/FolderFilter/FolderFilter.tsx b/public/app/core/components/FolderFilter/FolderFilter.tsx
index 8d149451713..795b3af7990 100644
--- a/public/app/core/components/FolderFilter/FolderFilter.tsx
+++ b/public/app/core/components/FolderFilter/FolderFilter.tsx
@@ -1,11 +1,11 @@
-import React, { useCallback, useMemo, useState } from 'react';
import { css } from '@emotion/css';
import debounce from 'debounce-promise';
-import { AsyncMultiSelect, Icon, Button, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import React, { useCallback, useMemo, useState } from 'react';
-import { FolderInfo, PermissionLevelString } from 'app/types';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { AsyncMultiSelect, Icon, Button, useStyles2 } from '@grafana/ui';
import { getBackendSrv } from 'app/core/services/backend_srv';
+import { FolderInfo, PermissionLevelString } from 'app/types';
export interface FolderFilterProps {
onChange: (folder: FolderInfo[]) => void;
diff --git a/public/app/core/components/Footer/Footer.tsx b/public/app/core/components/Footer/Footer.tsx
index b3c045e2a37..4fa437b7913 100644
--- a/public/app/core/components/Footer/Footer.tsx
+++ b/public/app/core/components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
import React, { FC } from 'react';
+
import { config } from '@grafana/runtime';
import { Icon, IconName } from '@grafana/ui';
diff --git a/public/app/core/components/ForgottenPassword/ChangePassword.tsx b/public/app/core/components/ForgottenPassword/ChangePassword.tsx
index 69c813b4a50..3a014973cb4 100644
--- a/public/app/core/components/ForgottenPassword/ChangePassword.tsx
+++ b/public/app/core/components/ForgottenPassword/ChangePassword.tsx
@@ -1,6 +1,8 @@
import React, { FC, SyntheticEvent } from 'react';
-import { Tooltip, Form, Field, VerticalGroup, Button } from '@grafana/ui';
+
import { selectors } from '@grafana/e2e-selectors';
+import { Tooltip, Form, Field, VerticalGroup, Button } from '@grafana/ui';
+
import { submitButton } from '../Login/LoginForm';
import { PasswordField } from '../PasswordField/PasswordField';
interface Props {
diff --git a/public/app/core/components/ForgottenPassword/ChangePasswordPage.test.tsx b/public/app/core/components/ForgottenPassword/ChangePasswordPage.test.tsx
index 5021e7cf081..6df0b66cefb 100644
--- a/public/app/core/components/ForgottenPassword/ChangePasswordPage.test.tsx
+++ b/public/app/core/components/ForgottenPassword/ChangePasswordPage.test.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import React from 'react';
+
import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
import { ChangePasswordPage, Props } from './ChangePasswordPage';
@@ -48,11 +49,11 @@ describe('ChangePassword Page', () => {
expect(await screen.findByText('New Password is required')).toBeInTheDocument();
expect(screen.getByText('Confirmed Password is required')).toBeInTheDocument();
- userEvent.type(screen.getByLabelText('New password'), 'admin');
- userEvent.type(screen.getByLabelText('Confirm new password'), 'a');
+ await userEvent.type(screen.getByLabelText('New password'), 'admin');
+ await userEvent.type(screen.getByLabelText('Confirm new password'), 'a');
await waitFor(() => expect(screen.getByText('Passwords must match!')).toBeInTheDocument());
- userEvent.type(screen.getByLabelText('Confirm new password'), 'dmin');
+ await userEvent.type(screen.getByLabelText('Confirm new password'), 'dmin');
await waitFor(() => expect(screen.queryByText('Passwords must match!')).not.toBeInTheDocument());
});
it('should navigate to default url if change password is successful', async () => {
@@ -64,8 +65,8 @@ describe('ChangePassword Page', () => {
postMock.mockResolvedValueOnce({ message: 'Logged in' });
render(
+
+ {title}
+ {children}
+ {traceId && `Trace ID: ${traceId}`}
+
+
+ {timestamp && {formatDistanceToNow(timestamp, { addSuffix: true })}}
+
+
{element}
{state.isOpen && (
-
+
- )}
- {link.icon && ({
position: 'relative',
display: 'grid',
gridAutoFlow: 'column',
- gridTemplateColumns: '56px auto',
+ gridTemplateColumns: `${theme.spacing(7)} auto`,
}),
collapsibleMenuItem: css({
height: theme.spacing(6),
@@ -444,3 +440,15 @@ const getCollapsibleStyles = (theme: GrafanaTheme2) => ({
function linkHasChildren(link: NavModelItem): link is NavModelItem & { children: NavModelItem[] } {
return Boolean(link.children && link.children.length > 0);
}
+
+function getLinkIcon(link: NavModelItem) {
+ if (link.id === 'home') {
+ return
diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx
index e7adf743e62..e4869316130 100644
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
@@ -1,15 +1,18 @@
-import React from 'react';
import { render, screen, within } from '@testing-library/react';
-import { ApiKeysPageUnconnected, Props } from './ApiKeysPage';
-import { ApiKey, OrgRole } from 'app/types';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
+import React from 'react';
+
import { NavModel } from '@grafana/data';
-import { setSearchQuery } from './state/reducers';
-import { mockToolkitActionCreator } from '../../../test/core/redux/mocks';
-import { getMultipleMockKeys } from './__mocks__/apiKeysMock';
import { selectors } from '@grafana/e2e-selectors';
-import userEvent from '@testing-library/user-event';
+import { ApiKey, OrgRole } from 'app/types';
+
+import { mockToolkitActionCreator } from '../../../test/core/redux/mocks';
import { silenceConsoleOutput } from '../../../test/core/utils/silenceConsoleOutput';
+import { ApiKeysPageUnconnected, Props } from './ApiKeysPage';
+import { getMultipleMockKeys } from './__mocks__/apiKeysMock';
+import { setSearchQuery } from './state/reducers';
+
const setup = (propOverrides: Partial) => {
const loadApiKeysMock = jest.fn();
const deleteApiKeyMock = jest.fn();
@@ -37,6 +40,9 @@ const setup = (propOverrides: Partial) => {
includeExpired: false,
includeExpiredDisabled: false,
toggleIncludeExpired: toggleIncludeExpiredMock,
+ canRead: true,
+ canCreate: true,
+ canDelete: true,
};
Object.assign(props, propOverrides);
@@ -97,7 +103,7 @@ describe('ApiKeysPage', () => {
const apiKeys = getMultipleMockKeys(3);
const { toggleIncludeExpiredMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
- toggleShowExpired();
+ await toggleShowExpired();
expect(toggleIncludeExpiredMock).toHaveBeenCalledTimes(1);
});
});
@@ -109,7 +115,7 @@ describe('ApiKeysPage', () => {
setSearchQueryMock.mockClear();
expect(screen.getByPlaceholderText(/search keys/i)).toBeInTheDocument();
- userEvent.type(screen.getByPlaceholderText(/search keys/i), 'First');
+ await userEvent.type(screen.getByPlaceholderText(/search keys/i), 'First');
expect(setSearchQueryMock).toHaveBeenCalledTimes(5);
});
});
@@ -127,21 +133,21 @@ describe('ApiKeysPage', () => {
deleteApiKeyMock.mockClear();
expect(within(firstRow).getByLabelText('Delete API key')).toBeInTheDocument();
- userEvent.click(within(firstRow).getByLabelText('Delete API key'));
+ await userEvent.click(within(firstRow).getByLabelText('Delete API key'));
expect(within(firstRow).getByRole('button', { name: /delete$/i })).toBeInTheDocument();
- userEvent.click(within(firstRow).getByRole('button', { name: /delete$/i }));
+ await userEvent.click(within(firstRow).getByRole('button', { name: /delete$/i }));
expect(deleteApiKeyMock).toHaveBeenCalledTimes(1);
expect(deleteApiKeyMock).toHaveBeenCalledWith(1);
- toggleShowExpired();
+ await toggleShowExpired();
deleteApiKeyMock.mockClear();
expect(within(secondRow).getByLabelText('Delete API key')).toBeInTheDocument();
- userEvent.click(within(secondRow).getByLabelText('Delete API key'));
+ await userEvent.click(within(secondRow).getByLabelText('Delete API key'));
expect(within(secondRow).getByRole('button', { name: /delete$/i })).toBeInTheDocument();
- userEvent.click(within(secondRow).getByRole('button', { name: /delete$/i }), undefined, {
- skipPointerEventsCheck: true,
+ await userEvent.click(within(secondRow).getByRole('button', { name: /delete$/i }), {
+ pointerEventsCheck: PointerEventsCheckLevel.Never,
});
expect(deleteApiKeyMock).toHaveBeenCalledTimes(1);
expect(deleteApiKeyMock).toHaveBeenCalledWith(2);
@@ -154,7 +160,7 @@ describe('ApiKeysPage', () => {
const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
addApiKeyMock.mockClear();
- userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('New API key')));
+ await userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('New API key')));
await addAndVerifyApiKey(addApiKeyMock);
});
});
@@ -165,13 +171,13 @@ describe('ApiKeysPage', () => {
const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
addApiKeyMock.mockClear();
- userEvent.click(screen.getByRole('button', { name: /add api key/i }));
+ await userEvent.click(screen.getByRole('button', { name: /add api key/i }));
await addAndVerifyApiKey(addApiKeyMock);
- toggleShowExpired();
+ await toggleShowExpired();
addApiKeyMock.mockClear();
- userEvent.click(screen.getByRole('button', { name: /add api key/i }));
+ await userEvent.click(screen.getByRole('button', { name: /add api key/i }));
await addAndVerifyApiKey(addApiKeyMock);
});
});
@@ -182,20 +188,20 @@ describe('ApiKeysPage', () => {
const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
addApiKeyMock.mockClear();
- userEvent.click(screen.getByRole('button', { name: /add api key/i }));
- userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
- userEvent.type(screen.getByPlaceholderText(/1d/i), '60x');
+ await userEvent.click(screen.getByRole('button', { name: /add api key/i }));
+ await userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
+ await userEvent.type(screen.getByPlaceholderText(/1d/i), '60x');
expect(screen.queryByText(/not a valid duration/i)).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('button', { name: /^add$/i }));
+ await userEvent.click(screen.getByRole('button', { name: /^add$/i }));
expect(screen.getByText(/not a valid duration/i)).toBeInTheDocument();
expect(addApiKeyMock).toHaveBeenCalledTimes(0);
});
});
});
-function toggleShowExpired() {
+async function toggleShowExpired() {
expect(screen.queryByLabelText(/include expired keys/i)).toBeInTheDocument();
- userEvent.click(screen.getByLabelText(/include expired keys/i));
+ await userEvent.click(screen.getByLabelText(/include expired keys/i));
}
async function addAndVerifyApiKey(addApiKeyMock: jest.Mock) {
@@ -204,9 +210,9 @@ async function addAndVerifyApiKey(addApiKeyMock: jest.Mock) {
expect(screen.getByPlaceholderText(/1d/i)).toBeInTheDocument();
expect(screen.getByRole('button', { name: /^add$/i })).toBeInTheDocument();
- userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
- userEvent.type(screen.getByPlaceholderText(/1d/i), '60s');
- userEvent.click(screen.getByRole('button', { name: /^add$/i }));
+ await userEvent.type(screen.getByPlaceholderText(/name/i), 'Test');
+ await userEvent.type(screen.getByPlaceholderText(/1d/i), '60s');
+ await userEvent.click(screen.getByRole('button', { name: /^add$/i }));
expect(addApiKeyMock).toHaveBeenCalledTimes(1);
expect(addApiKeyMock).toHaveBeenCalledWith({ name: 'Test', role: 'Viewer', secondsToLive: 60 }, expect.anything());
}
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 6e3d8273275..4c95ac5db98 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -1,26 +1,33 @@
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
+
// Utils
-import { ApiKey, NewApiKey, StoreState } from 'app/types';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { getApiKeys, getApiKeysCount, getIncludeExpired, getIncludeExpiredDisabled } from './state/selectors';
-import { addApiKey, deleteApiKey, loadApiKeys, toggleIncludeExpired } from './state/actions';
-import Page from 'app/core/components/Page/Page';
-import { ApiKeysAddedModal } from './ApiKeysAddedModal';
-import config from 'app/core/config';
+import { rangeUtil } from '@grafana/data';
+import { InlineField, InlineSwitch, VerticalGroup } from '@grafana/ui';
import appEvents from 'app/core/app_events';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { InlineField, InlineSwitch, VerticalGroup } from '@grafana/ui';
-import { rangeUtil } from '@grafana/data';
+import Page from 'app/core/components/Page/Page';
+import config from 'app/core/config';
+import { contextSrv } from 'app/core/core';
+import { getNavModel } from 'app/core/selectors/navModel';
import { getTimeZone } from 'app/features/profile/state/selectors';
-import { setSearchQuery } from './state/reducers';
-import { ApiKeysForm } from './ApiKeysForm';
-import { ApiKeysActionBar } from './ApiKeysActionBar';
-import { ApiKeysTable } from './ApiKeysTable';
-import { ApiKeysController } from './ApiKeysController';
+import { AccessControlAction, ApiKey, NewApiKey, StoreState } from 'app/types';
import { ShowModalReactEvent } from 'app/types/events';
+import { ApiKeysActionBar } from './ApiKeysActionBar';
+import { ApiKeysAddedModal } from './ApiKeysAddedModal';
+import { ApiKeysController } from './ApiKeysController';
+import { ApiKeysForm } from './ApiKeysForm';
+import { ApiKeysTable } from './ApiKeysTable';
+import { addApiKey, deleteApiKey, loadApiKeys, toggleIncludeExpired } from './state/actions';
+import { setSearchQuery } from './state/reducers';
+import { getApiKeys, getApiKeysCount, getIncludeExpired, getIncludeExpiredDisabled } from './state/selectors';
+
function mapStateToProps(state: StoreState) {
+ const canRead = contextSrv.hasAccess(AccessControlAction.ActionAPIKeysRead, true);
+ const canCreate = contextSrv.hasAccess(AccessControlAction.ActionAPIKeysCreate, true);
+ const canDelete = contextSrv.hasAccess(AccessControlAction.ActionAPIKeysDelete, true);
+
return {
navModel: getNavModel(state.navIndex, 'apikeys'),
apiKeys: getApiKeys(state.apiKeys),
@@ -30,6 +37,9 @@ function mapStateToProps(state: StoreState) {
timeZone: getTimeZone(state.user),
includeExpired: getIncludeExpired(state.apiKeys),
includeExpiredDisabled: getIncludeExpiredDisabled(state.apiKeys),
+ canRead: canRead,
+ canCreate: canCreate,
+ canDelete: canDelete,
};
}
@@ -120,6 +130,9 @@ export class ApiKeysPageUnconnected extends PureComponent {
timeZone,
includeExpired,
includeExpiredDisabled,
+ canRead,
+ canCreate,
+ canDelete,
} = this.props;
if (!hasFetched) {
@@ -146,23 +159,35 @@ export class ApiKeysPageUnconnected extends PureComponent {
onClick={toggleIsAdding}
buttonTitle="New API key"
proTip="Remember, you can provide view-only API access to other applications."
+ buttonDisabled={!canCreate}
/>
) : null}
{showTable ? (
-
) : null}
diff --git a/public/app/features/api-keys/ApiKeysTable.tsx b/public/app/features/api-keys/ApiKeysTable.tsx
index 06445bf09e1..b04f1e82a62 100644
--- a/public/app/features/api-keys/ApiKeysTable.tsx
+++ b/public/app/features/api-keys/ApiKeysTable.tsx
@@ -1,17 +1,20 @@
+import { css } from '@emotion/css';
import React, { FC } from 'react';
-import { DeleteButton, Icon, IconName, Tooltip, useTheme2 } from '@grafana/ui';
+
import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';
+import { DeleteButton, Icon, IconName, Tooltip, useTheme2 } from '@grafana/ui';
import { ApiKey } from '../../types';
-import { css } from '@emotion/css';
interface Props {
apiKeys: ApiKey[];
timeZone: TimeZone;
onDelete: (apiKey: ApiKey) => void;
+ canRead: boolean;
+ canDelete: boolean;
}
-export const ApiKeysTable: FC = ({ apiKeys, timeZone, onDelete }) => {
+export const ApiKeysTable: FC = ({ apiKeys, timeZone, onDelete, canRead, canDelete }) => {
const theme = useTheme2();
const styles = getStyles(theme);
@@ -25,7 +28,7 @@ export const ApiKeysTable: FC = ({ apiKeys, timeZone, onDelete }) => {
= ({ apiKeys, timeZone, onDelete }) => {
)}
- onDelete(key)} />
+ onDelete(key)}
+ disabled={!canDelete}
+ />
);
diff --git a/public/app/features/api-keys/state/actions.ts b/public/app/features/api-keys/state/actions.ts
index 22fc829866a..467f45c6f77 100644
--- a/public/app/features/api-keys/state/actions.ts
+++ b/public/app/features/api-keys/state/actions.ts
@@ -1,5 +1,6 @@
import { getBackendSrv } from 'app/core/services/backend_srv';
import { ApiKey, ThunkResult } from 'app/types';
+
import { apiKeysLoaded, includeExpiredToggled, isFetching, setSearchQuery } from './reducers';
export function addApiKey(apiKey: ApiKey, openModal: (key: string) => void): ThunkResult {
diff --git a/public/app/features/api-keys/state/reducers.test.ts b/public/app/features/api-keys/state/reducers.test.ts
index 655a3d98c5b..b4048dd194f 100644
--- a/public/app/features/api-keys/state/reducers.test.ts
+++ b/public/app/features/api-keys/state/reducers.test.ts
@@ -1,4 +1,8 @@
-import {
+import { reducerTester } from '../../../../test/core/redux/reducerTester';
+import { ApiKeysState } from '../../../types';
+import { getMultipleMockKeys } from '../__mocks__/apiKeysMock';
+
+import {
apiKeysLoaded,
apiKeysReducer,
includeExpiredToggled,
@@ -6,9 +10,6 @@
isFetching,
setSearchQuery,
} from './reducers';
-import { getMultipleMockKeys } from '../__mocks__/apiKeysMock';
-import { reducerTester } from '../../../../test/core/redux/reducerTester';
-import { ApiKeysState } from '../../../types';
describe('API Keys reducer', () => {
it('should set keys', () => {
diff --git a/public/app/features/api-keys/state/selectors.test.ts b/public/app/features/api-keys/state/selectors.test.ts
index 307dadeba69..e1ba2f4d0f9 100644
--- a/public/app/features/api-keys/state/selectors.test.ts
+++ b/public/app/features/api-keys/state/selectors.test.ts
@@ -1,6 +1,8 @@
-import { getApiKeys, getApiKeysCount, getIncludeExpired, getIncludeExpiredDisabled } from './selectors';
+import { ApiKeysState } from 'app/types';
+
import { getMultipleMockKeys } from '../__mocks__/apiKeysMock';
-import { ApiKeysState } from 'app/types';
+
+import { getApiKeys, getApiKeysCount, getIncludeExpired, getIncludeExpiredDisabled } from './selectors';
describe('API Keys selectors', () => {
const mockKeys = getMultipleMockKeys(5);
diff --git a/public/app/features/canvas/element.ts b/public/app/features/canvas/element.ts
index 90c6d4b650b..16c018e023b 100644
--- a/public/app/features/canvas/element.ts
+++ b/public/app/features/canvas/element.ts
@@ -1,9 +1,12 @@
import { ComponentType } from 'react';
+
import { RegistryItem } from '@grafana/data';
-import { Anchor, BackgroundConfig, LineConfig, Placement } from './types';
-import { DimensionContext } from '../dimensions/context';
import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
+import { DimensionContext } from '../dimensions/context';
+
+import { BackgroundConfig, Constraint, LineConfig, Placement } from './types';
+
/**
* This gets saved in panel json
*
@@ -19,7 +22,7 @@ export interface CanvasElementOptions {
config?: TConfig;
// Standard options available for all elements
- anchor?: Anchor; // defaults top, left, width and height
+ constraint?: Constraint; // defaults vertical - top, horizontal - left
placement?: Placement;
background?: BackgroundConfig;
border?: LineConfig;
@@ -29,10 +32,6 @@ export interface CanvasElementProps {
// Saved config
config: TConfig;
- // Calculated position info
- width: number;
- height: number;
-
// Raw data
data?: TData;
}
@@ -53,6 +52,6 @@ export interface CanvasElementItem extends RegistryI
getNewOptions: (options?: CanvasElementOptions) => Omit, 'type' | 'name'>;
- /** Build the configuraiton UI */
+ /** Build the configuration UI */
registerOptionsUI?: PanelOptionsSupplier>;
}
diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx
index 482a432b2b8..03f413012c4 100644
--- a/public/app/features/canvas/elements/button.tsx
+++ b/public/app/features/canvas/elements/button.tsx
@@ -1,12 +1,13 @@
import React, { PureComponent } from 'react';
-import { Button } from '@grafana/ui';
+import { Button } from '@grafana/ui';
import { DimensionContext } from 'app/features/dimensions/context';
import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
import { TextDimensionConfig } from 'app/features/dimensions/types';
-import { CanvasElementItem, CanvasElementProps } from '../element';
import { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor';
+import { CanvasElementItem, CanvasElementProps } from '../element';
+
interface ButtonData {
text?: string;
api?: APIEditorConfig;
diff --git a/public/app/features/canvas/elements/droneFront.tsx b/public/app/features/canvas/elements/droneFront.tsx
index bd5a1ef9348..8de1e1b7ae9 100644
--- a/public/app/features/canvas/elements/droneFront.tsx
+++ b/public/app/features/canvas/elements/droneFront.tsx
@@ -1,11 +1,12 @@
-import React, { FC } from 'react';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
-
-import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
-import { CanvasElementItem, CanvasElementProps } from '../element';
import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions';
+import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
+
+import { CanvasElementItem, CanvasElementProps } from '../element';
interface DroneFrontData {
rollAngle?: number;
diff --git a/public/app/features/canvas/elements/droneSide.tsx b/public/app/features/canvas/elements/droneSide.tsx
index a08577830bd..309f3673a55 100644
--- a/public/app/features/canvas/elements/droneSide.tsx
+++ b/public/app/features/canvas/elements/droneSide.tsx
@@ -1,11 +1,12 @@
-import React, { FC } from 'react';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
-
-import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
-import { CanvasElementItem, CanvasElementProps } from '../element';
import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions';
+import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
+
+import { CanvasElementItem, CanvasElementProps } from '../element';
interface DroneSideData {
pitchAngle?: number;
diff --git a/public/app/features/canvas/elements/droneTop.tsx b/public/app/features/canvas/elements/droneTop.tsx
index 5d8eb7f6214..abac83dee8c 100644
--- a/public/app/features/canvas/elements/droneTop.tsx
+++ b/public/app/features/canvas/elements/droneTop.tsx
@@ -1,11 +1,12 @@
-import React, { FC } from 'react';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
-
-import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
-import { CanvasElementItem, CanvasElementProps } from '../element';
import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions';
+import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
+
+import { CanvasElementItem, CanvasElementProps } from '../element';
interface DroneTopData {
bRightRotorRPM?: number;
diff --git a/public/app/features/canvas/elements/icon.tsx b/public/app/features/canvas/elements/icon.tsx
index 53652474c1e..fcce5a89429 100644
--- a/public/app/features/canvas/elements/icon.tsx
+++ b/public/app/features/canvas/elements/icon.tsx
@@ -1,20 +1,21 @@
+import { css } from '@emotion/css';
+import { isString } from 'lodash';
import React, { CSSProperties } from 'react';
+import SVG from 'react-inlinesvg';
-import { CanvasElementItem, CanvasElementProps } from '../element';
import {
ColorDimensionConfig,
ResourceDimensionConfig,
ResourceDimensionMode,
getPublicOrAbsoluteUrl,
} from 'app/features/dimensions';
-import { ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors';
-import SVG from 'react-inlinesvg';
-import { css } from '@emotion/css';
-import { isString } from 'lodash';
-import { LineConfig } from '../types';
import { DimensionContext } from 'app/features/dimensions/context';
+import { ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors';
import { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor';
+import { CanvasElementItem, CanvasElementProps } from '../element';
+import { LineConfig } from '../types';
+
export interface IconConfig {
path?: ResourceDimensionConfig;
fill?: ColorDimensionConfig;
@@ -38,7 +39,7 @@ const svgStrokePathClass = css`
`;
export function IconDisplay(props: CanvasElementProps) {
- const { width, height, data } = props;
+ const { data } = props;
if (!data?.path) {
return null;
}
@@ -59,8 +60,6 @@ export function IconDisplay(props: CanvasElementProps) {
@@ -78,6 +77,8 @@ export const iconItem: CanvasElementItem = {
placement: {
width: 50,
height: 50,
+ top: 0,
+ left: 0,
},
...options,
config: {
diff --git a/public/app/features/canvas/elements/textBox.tsx b/public/app/features/canvas/elements/textBox.tsx
index 477cebca0e7..e8f237a8183 100644
--- a/public/app/features/canvas/elements/textBox.tsx
+++ b/public/app/features/canvas/elements/textBox.tsx
@@ -1,14 +1,15 @@
+import { css } from '@emotion/css';
import React, { PureComponent } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { stylesFactory } from '@grafana/ui';
+import { config } from 'app/core/config';
+import { DimensionContext } from 'app/features/dimensions/context';
import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
import { ColorDimensionConfig, TextDimensionConfig } from 'app/features/dimensions/types';
import { CanvasElementItem, CanvasElementProps } from '../element';
-import { css } from '@emotion/css';
-import { stylesFactory } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
-import { config } from 'app/core/config';
-import { DimensionContext } from 'app/features/dimensions/context';
export enum Align {
Left = 'left',
diff --git a/public/app/features/canvas/elements/windTurbine.tsx b/public/app/features/canvas/elements/windTurbine.tsx
index e0b636ab41f..afcf65b39f8 100644
--- a/public/app/features/canvas/elements/windTurbine.tsx
+++ b/public/app/features/canvas/elements/windTurbine.tsx
@@ -1,11 +1,12 @@
-import React, { FC } from 'react';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
-
-import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
-import { CanvasElementItem, CanvasElementProps } from '../element';
import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions';
+import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
+
+import { CanvasElementItem, CanvasElementProps } from '../element';
interface WindTurbineData {
rpm?: number;
diff --git a/public/app/features/canvas/registry.ts b/public/app/features/canvas/registry.ts
index 6bbf24f53c7..450d0cc480f 100644
--- a/public/app/features/canvas/registry.ts
+++ b/public/app/features/canvas/registry.ts
@@ -1,4 +1,5 @@
import { Registry } from '@grafana/data';
+
import { CanvasElementItem, CanvasElementOptions } from './element';
import { buttonItem } from './elements/button';
import { droneFrontItem } from './elements/droneFront';
diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index 51e06c08b0d..37000ed02bd 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -1,18 +1,19 @@
import React, { CSSProperties } from 'react';
import { OnDrag, OnResize } from 'react-moveable/declaration/types';
+import { LayerElement } from 'app/core/components/Layers/types';
import {
BackgroundImageSize,
CanvasElementItem,
CanvasElementOptions,
canvasElementRegistry,
- Placement,
- Anchor,
} from 'app/features/canvas';
-import { DimensionContext } from 'app/features/dimensions';
import { notFoundItem } from 'app/features/canvas/elements/notFound';
+import { DimensionContext } from 'app/features/dimensions';
+
+import { HorizontalConstraint, Placement, VerticalConstraint } from '../types';
+
import { GroupState } from './group';
-import { LayerElement } from 'app/core/components/Layers/types';
import { Scene } from './scene';
let counter = 0;
@@ -28,24 +29,19 @@ export class ElementState implements LayerElement {
div?: HTMLDivElement;
// Calculated
- width = 100;
- height = 100;
data?: any; // depends on the type
- // From options, but always set and always valid
- anchor: Anchor;
- placement: Placement;
-
constructor(public item: CanvasElementItem, public options: CanvasElementOptions, public parent?: GroupState) {
const fallbackName = `Element ${Date.now()}`;
if (!options) {
this.options = { type: item.id, name: fallbackName };
}
- this.anchor = options.anchor ?? {};
- this.placement = options.placement ?? {};
- options.anchor = this.anchor;
- options.placement = this.placement;
+ options.constraint = options.constraint ?? {
+ vertical: VerticalConstraint.Top,
+ horizontal: HorizontalConstraint.Left,
+ };
+ options.placement = options.placement ?? { width: 100, height: 100, top: 0, left: 0 };
const scene = this.getScene();
if (!options.name) {
const newName = scene?.getNextElementName();
@@ -59,7 +55,6 @@ export class ElementState implements LayerElement {
while (trav) {
if (trav.isRoot()) {
return trav.scene;
- break;
}
trav = trav.parent;
}
@@ -71,72 +66,187 @@ export class ElementState implements LayerElement {
return this.options.name;
}
- validatePlacement() {
- const { anchor, placement } = this;
- if (!(anchor.left || anchor.right)) {
- anchor.left = true;
- }
- if (!(anchor.top || anchor.bottom)) {
- anchor.top = true;
- }
+ /** Use the configured options to update CSS style properties directly on the wrapper div **/
+ applyLayoutStylesToDiv() {
+ const { constraint } = this.options;
+ const { vertical, horizontal } = constraint ?? {};
+ const placement = this.options.placement ?? ({} as Placement);
- const w = placement.width ?? 100; // this.div ? this.div.clientWidth : this.width;
- const h = placement.height ?? 100; // this.div ? this.div.clientHeight : this.height;
-
- if (anchor.top) {
- if (!placement.top) {
- placement.top = 0;
- }
- if (anchor.bottom) {
- delete placement.height;
- } else {
- placement.height = h;
- delete placement.bottom;
- }
- } else if (anchor.bottom) {
- if (!placement.bottom) {
- placement.bottom = 0;
- }
- placement.height = h;
- delete placement.top;
- }
-
- if (anchor.left) {
- if (!placement.left) {
- placement.left = 0;
- }
- if (anchor.right) {
- delete placement.width;
- } else {
- placement.width = w;
- delete placement.right;
- }
- } else if (anchor.right) {
- if (!placement.right) {
- placement.right = 0;
- }
- placement.width = w;
- delete placement.left;
- }
-
- this.width = w;
- this.height = h;
-
- this.options.anchor = this.anchor;
- this.options.placement = this.placement;
- }
-
- // The parent size, need to set our own size based on offsets
- updateSize(width: number, height: number) {
- this.width = width;
- this.height = height;
- this.validatePlacement();
-
- // Update the CSS position
- this.sizeStyle = {
- ...this.options.placement,
+ const style: React.CSSProperties = {
position: 'absolute',
};
+
+ const translate = ['0px', '0px'];
+
+ switch (vertical) {
+ case VerticalConstraint.Top:
+ placement.top = placement.top ?? 0;
+ placement.height = placement.height ?? 100;
+ style.top = `${placement.top}px`;
+ style.height = `${placement.height}px`;
+ delete placement.bottom;
+ break;
+ case VerticalConstraint.Bottom:
+ placement.bottom = placement.bottom ?? 0;
+ placement.height = placement.height ?? 100;
+ style.bottom = `${placement.bottom}px`;
+ style.height = `${placement.height}px`;
+ delete placement.top;
+ break;
+ case VerticalConstraint.TopBottom:
+ placement.top = placement.top ?? 0;
+ placement.bottom = placement.bottom ?? 0;
+ style.top = `${placement.top}px`;
+ style.bottom = `${placement.bottom}px`;
+ delete placement.height;
+ break;
+ case VerticalConstraint.Center:
+ placement.top = placement.top ?? 0;
+ placement.height = placement.height ?? 100;
+ translate[1] = '-50%';
+ style.top = `calc(50% - ${placement.top}px)`;
+ style.height = `${placement.height}px`;
+ delete placement.bottom;
+ break;
+ case VerticalConstraint.Scale:
+ placement.top = placement.top ?? 0;
+ placement.bottom = placement.bottom ?? 0;
+ style.top = `${placement.top}%`;
+ style.bottom = `${placement.bottom}%`;
+ delete placement.height;
+ break;
+ }
+
+ switch (horizontal) {
+ case HorizontalConstraint.Left:
+ placement.left = placement.left ?? 0;
+ placement.width = placement.width ?? 100;
+ style.left = `${placement.left}px`;
+ style.width = `${placement.width}px`;
+ delete placement.right;
+ break;
+ case HorizontalConstraint.Right:
+ placement.right = placement.right ?? 0;
+ placement.width = placement.width ?? 100;
+ style.right = `${placement.right}px`;
+ style.width = `${placement.width}px`;
+ delete placement.left;
+ break;
+ case HorizontalConstraint.LeftRight:
+ placement.left = placement.left ?? 0;
+ placement.right = placement.right ?? 0;
+ style.left = `${placement.left}px`;
+ style.right = `${placement.right}px`;
+ delete placement.width;
+ break;
+ case HorizontalConstraint.Center:
+ placement.left = placement.left ?? 0;
+ placement.width = placement.width ?? 100;
+ translate[0] = '-50%';
+ style.left = `calc(50% - ${placement.left}px)`;
+ style.width = `${placement.width}px`;
+ delete placement.right;
+ break;
+ case HorizontalConstraint.Scale:
+ placement.left = placement.left ?? 0;
+ placement.right = placement.right ?? 0;
+ style.left = `${placement.left}%`;
+ style.right = `${placement.right}%`;
+ delete placement.width;
+ break;
+ }
+
+ style.transform = `translate(${translate[0]}, ${translate[1]})`;
+ this.options.placement = placement;
+ this.sizeStyle = style;
+ if (this.div) {
+ for (const key in this.sizeStyle) {
+ this.div.style[key as any] = (this.sizeStyle as any)[key];
+ }
+
+ for (const key in this.dataStyle) {
+ this.div.style[key as any] = (this.dataStyle as any)[key];
+ }
+ }
+ }
+
+ setPlacementFromConstraint() {
+ const { constraint } = this.options;
+ const { vertical, horizontal } = constraint ?? {};
+
+ const elementContainer = this.div && this.div.getBoundingClientRect();
+ const parentContainer = this.div && this.div.parentElement?.getBoundingClientRect();
+
+ const relativeTop =
+ elementContainer && parentContainer ? Math.abs(Math.round(elementContainer.top - parentContainer.top)) : 0;
+ const relativeBottom =
+ elementContainer && parentContainer ? Math.abs(Math.round(elementContainer.bottom - parentContainer.bottom)) : 0;
+ const relativeLeft =
+ elementContainer && parentContainer ? Math.abs(Math.round(elementContainer.left - parentContainer.left)) : 0;
+ const relativeRight =
+ elementContainer && parentContainer ? Math.abs(Math.round(elementContainer.right - parentContainer.right)) : 0;
+
+ const placement = {} as Placement;
+
+ const width = elementContainer?.width ?? 100;
+ const height = elementContainer?.height ?? 100;
+
+ switch (vertical) {
+ case VerticalConstraint.Top:
+ placement.top = relativeTop;
+ placement.height = height;
+ break;
+ case VerticalConstraint.Bottom:
+ placement.bottom = relativeBottom;
+ placement.height = height;
+ break;
+ case VerticalConstraint.TopBottom:
+ placement.top = relativeTop;
+ placement.bottom = relativeBottom;
+ break;
+ case VerticalConstraint.Center:
+ const elementCenter = elementContainer ? relativeTop + height / 2 : 0;
+ const parentCenter = parentContainer ? parentContainer.height / 2 : 0;
+ const distanceFromCenter = parentCenter - elementCenter;
+ placement.top = distanceFromCenter;
+ placement.height = height;
+ break;
+ case VerticalConstraint.Scale:
+ placement.top = (relativeTop / (parentContainer?.height ?? height)) * 100;
+ placement.bottom = (relativeBottom / (parentContainer?.height ?? height)) * 100;
+ break;
+ }
+
+ switch (horizontal) {
+ case HorizontalConstraint.Left:
+ placement.left = relativeLeft;
+ placement.width = width;
+ break;
+ case HorizontalConstraint.Right:
+ placement.right = relativeRight;
+ placement.width = width;
+ break;
+ case HorizontalConstraint.LeftRight:
+ placement.left = relativeLeft;
+ placement.right = relativeRight;
+ break;
+ case HorizontalConstraint.Center:
+ const elementCenter = elementContainer ? relativeLeft + width / 2 : 0;
+ const parentCenter = parentContainer ? parentContainer.width / 2 : 0;
+ const distanceFromCenter = parentCenter - elementCenter;
+ placement.left = distanceFromCenter;
+ placement.width = width;
+ break;
+ case HorizontalConstraint.Scale:
+ placement.left = (relativeLeft / (parentContainer?.width ?? width)) * 100;
+ placement.right = (relativeRight / (parentContainer?.width ?? width)) * 100;
+ break;
+ }
+
+ this.options.placement = placement;
+
+ this.applyLayoutStylesToDiv();
+ this.revId++;
}
updateData(ctx: DimensionContext) {
@@ -236,37 +346,24 @@ export class ElementState implements LayerElement {
initElement = (target: HTMLDivElement) => {
this.div = target;
+ this.applyLayoutStylesToDiv();
};
applyDrag = (event: OnDrag) => {
- const { placement, anchor } = this;
-
- const deltaX = event.delta[0];
- const deltaY = event.delta[1];
-
- const style = event.target.style;
- if (anchor.top) {
- placement.top! += deltaY;
- style.top = `${placement.top}px`;
- }
- if (anchor.bottom) {
- placement.bottom! -= deltaY;
- style.bottom = `${placement.bottom}px`;
- }
- if (anchor.left) {
- placement.left! += deltaX;
- style.left = `${placement.left}px`;
- }
- if (anchor.right) {
- placement.right! -= deltaX;
- style.right = `${placement.right}px`;
- }
+ event.target.style.transform = event.transform;
};
// kinda like:
// https://github.com/grafana/grafana-edge-app/blob/main/src/panels/draw/WrapItem.tsx#L44
applyResize = (event: OnResize) => {
- const { placement, anchor } = this;
+ const { options } = this;
+ const { placement, constraint } = options;
+ const { vertical, horizontal } = constraint ?? {};
+
+ const top = vertical === VerticalConstraint.Top || vertical === VerticalConstraint.TopBottom;
+ const bottom = vertical === VerticalConstraint.Bottom || vertical === VerticalConstraint.TopBottom;
+ const left = horizontal === HorizontalConstraint.Left || horizontal === HorizontalConstraint.LeftRight;
+ const right = horizontal === HorizontalConstraint.Right || horizontal === HorizontalConstraint.LeftRight;
const style = event.target.style;
const deltaX = event.delta[0];
@@ -275,69 +372,60 @@ export class ElementState implements LayerElement {
const dirTB = event.direction[1];
if (dirLR === 1) {
// RIGHT
- if (anchor.right) {
- placement.right! -= deltaX;
- style.right = `${placement.right}px`;
- if (!anchor.left) {
- placement.width = event.width;
- style.width = `${placement.width}px`;
+ if (right) {
+ placement!.right! -= deltaX;
+ style.right = `${placement!.right}px`;
+ if (!left) {
+ placement!.width = event.width;
+ style.width = `${placement!.width}px`;
}
} else {
- placement.width! = event.width;
- style.width = `${placement.width}px`;
+ placement!.width! = event.width;
+ style.width = `${placement!.width}px`;
}
} else if (dirLR === -1) {
// LEFT
- if (anchor.left) {
- placement.left! -= deltaX;
- placement.width! = event.width;
- style.left = `${placement.left}px`;
- style.width = `${placement.width}px`;
+ if (left) {
+ placement!.left! -= deltaX;
+ placement!.width! = event.width;
+ style.left = `${placement!.left}px`;
+ style.width = `${placement!.width}px`;
} else {
- placement.width! += deltaX;
- style.width = `${placement.width}px`;
+ placement!.width! += deltaX;
+ style.width = `${placement!.width}px`;
}
}
if (dirTB === -1) {
// TOP
- if (anchor.top) {
- placement.top! -= deltaY;
- placement.height = event.height;
- style.top = `${placement.top}px`;
- style.height = `${placement.height}px`;
+ if (top) {
+ placement!.top! -= deltaY;
+ placement!.height = event.height;
+ style.top = `${placement!.top}px`;
+ style.height = `${placement!.height}px`;
} else {
- placement.height = event.height;
- style.height = `${placement.height}px`;
+ placement!.height = event.height;
+ style.height = `${placement!.height}px`;
}
} else if (dirTB === 1) {
// BOTTOM
- if (anchor.bottom) {
- placement.bottom! -= deltaY;
- placement.height! = event.height;
- style.bottom = `${placement.bottom}px`;
- style.height = `${placement.height}px`;
+ if (bottom) {
+ placement!.bottom! -= deltaY;
+ placement!.height! = event.height;
+ style.bottom = `${placement!.bottom}px`;
+ style.height = `${placement!.height}px`;
} else {
- placement.height! = event.height;
- style.height = `${placement.height}px`;
+ placement!.height! = event.height;
+ style.height = `${placement!.height}px`;
}
}
-
- this.width = event.width;
- this.height = event.height;
};
render() {
const { item } = this;
return (
-
-
@@ -362,10 +361,7 @@ function CollapsibleNavItem({
className={styles.collapsibleMenuItem}
elClassName={styles.collapsibleIcon}
>
- {link.img && (
-
- {link.icon &&
+ {getLinkIcon(link)}
{link.text}
+
+
+
+ {children}
+
+
+
+
+ - You’ve discovered a Pro feature! Get the Grafana Pro plan to access {featureName}. + You’ve discovered a Pro feature! {text || `Get the Grafana Pro plan to access ${featureName}.`}
@@ -26,7 +36,7 @@ export const GrafanaRules: FC = ({ namespaces, expandAll }) => {
{loading ?
- {namespaces?.map((namespace) =>
+ {namespacesFormat?.map((namespace) =>
namespace.groups.map((group) => (
No rules found.
} + {namespacesFormat?.length === 0 &&No rules found.
}
diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
index 221d238b91d..e6423e96dc1 100644
--- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
@@ -1,16 +1,19 @@
+import { css, cx } from '@emotion/css';
+import React, { FC, useMemo } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
-import React, { FC, useMemo } from 'react';
-import { css, cx } from '@emotion/css';
-import { RuleDetails } from './RuleDetails';
-import { isCloudRulesSource } from '../../utils/datasource';
-import { useHasRuler } from '../../hooks/useHasRuler';
import { CombinedRule } from 'app/types/unified-alerting';
+
+import { useHasRuler } from '../../hooks/useHasRuler';
import { Annotation } from '../../utils/constants';
-import { RuleState } from './RuleState';
-import { RuleHealth } from './RuleHealth';
import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
import { DynamicTableWithGuidelines } from '../DynamicTableWithGuidelines';
+import { RuleLocation } from '../RuleLocation';
+
+import { RuleDetails } from './RuleDetails';
+import { RuleHealth } from './RuleHealth';
+import { RuleState } from './RuleState';
type RuleTableColumnProps = DynamicTableColumnProps;
type RuleTableItemProps = DynamicTableItemProps;
@@ -137,8 +140,15 @@ function useColumns(showSummaryColumn: boolean, showGroupColumn: boolean) {
// eslint-disable-next-line react/display-name
renderCell: ({ data: rule }) => {
const { namespace, group } = rule;
- const { rulesSource } = namespace;
- return isCloudRulesSource(rulesSource) ? `${namespace.name} > ${group.name}` : namespace.name;
+ // ungrouped rules are rules that are in the "default" group name
+ const isUngrouped = group.name === 'default';
+ const groupName = isUngrouped ? (
+ = {
diff --git a/public/app/features/alerting/unified/components/silences/MatchedSilencedRules.tsx b/public/app/features/alerting/unified/components/silences/MatchedSilencedRules.tsx
index d464202f3a4..d28d9ece726 100644
--- a/public/app/features/alerting/unified/components/silences/MatchedSilencedRules.tsx
+++ b/public/app/features/alerting/unified/components/silences/MatchedSilencedRules.tsx
@@ -1,19 +1,21 @@
+import { css } from '@emotion/css';
import React, { useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';
-import { useDebounce } from 'react-use';
import { useDispatch } from 'react-redux';
-import { css } from '@emotion/css';
+import { useDebounce } from 'react-use';
+
import { dateTime, GrafanaTheme2 } from '@grafana/data';
import { Badge, useStyles2 } from '@grafana/ui';
-import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
-import { useCombinedRuleNamespaces } from '../../hooks/useCombinedRuleNamespaces';
-import { findAlertInstancesWithMatchers } from '../../utils/matchers';
-import { fetchAllPromAndRulerRulesAction } from '../../state/actions';
import { Alert, AlertingRule } from 'app/types/unified-alerting';
+
+import { useCombinedRuleNamespaces } from '../../hooks/useCombinedRuleNamespaces';
+import { fetchAllPromAndRulerRulesAction } from '../../state/actions';
import { MatcherFieldValue, SilenceFormFields } from '../../types/silence-form';
+import { findAlertInstancesWithMatchers } from '../../utils/matchers';
import { isAlertingRule } from '../../utils/rules';
-import { AlertStateTag } from '../rules/AlertStateTag';
import { AlertLabels } from '../AlertLabels';
+import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
+import { AlertStateTag } from '../rules/AlertStateTag';
type MatchedRulesTableItemProps = DynamicTableItemProps<{
matchedInstance: Alert;
diff --git a/public/app/features/alerting/unified/components/silences/Matchers.tsx b/public/app/features/alerting/unified/components/silences/Matchers.tsx
index 0d686d7027f..f5b9674817e 100644
--- a/public/app/features/alerting/unified/components/silences/Matchers.tsx
+++ b/public/app/features/alerting/unified/components/silences/Matchers.tsx
@@ -1,7 +1,9 @@
-import React, { FC } from 'react';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+
import { TagList, useStyles2 } from '@grafana/ui';
import { Matcher } from 'app/plugins/datasource/alertmanager/types';
+
import { matcherToOperator } from '../../utils/alertmanager';
type MatchersProps = { matchers: Matcher[] };
diff --git a/public/app/features/alerting/unified/components/silences/MatchersField.tsx b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
index 7464af9ef2f..4ccf213132e 100644
--- a/public/app/features/alerting/unified/components/silences/MatchersField.tsx
+++ b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
@@ -1,10 +1,12 @@
-import React, { FC } from 'react';
-import { Button, Field, Input, IconButton, InputControl, useStyles2, Select } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
import { css, cx } from '@emotion/css';
+import React, { FC } from 'react';
import { useFormContext, useFieldArray } from 'react-hook-form';
-import { SilenceFormFields } from '../../types/silence-form';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, Field, Input, IconButton, InputControl, useStyles2, Select } from '@grafana/ui';
import { MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
+
+import { SilenceFormFields } from '../../types/silence-form';
import { matcherFieldOptions } from '../../utils/alertmanager';
interface Props {
diff --git a/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx b/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
index 95a298338c1..4c142c092a9 100644
--- a/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
+++ b/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
@@ -1,7 +1,10 @@
+import React, { FC } from 'react';
+
import { CallToActionCard } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { contextSrv } from 'app/core/services/context_srv';
-import React, { FC } from 'react';
+
+import { getInstancesPermissions } from '../../utils/access-control';
import { makeAMLink } from '../../utils/misc';
type Props = {
@@ -9,7 +12,9 @@ type Props = {
};
export const NoSilencesSplash: FC = ({ alertManagerSourceName }) => {
- if (contextSrv.isEditor) {
+ const permissions = getInstancesPermissions(alertManagerSourceName);
+
+ if (contextSrv.hasAccess(permissions.create, contextSrv.isEditor)) {
return (
{
diff --git a/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx b/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
index 4b212d3c1a1..fc36282db8c 100644
--- a/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
@@ -1,5 +1,7 @@
-import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
import React, { FC } from 'react';
+
+import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
+
import { State, StateTag } from '../StateTag';
const silenceStateToState: Record = {
diff --git a/public/app/features/alerting/unified/components/silences/SilenceTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilenceTableRow.tsx
index 7f76d3c4a03..1897361de84 100644
--- a/public/app/features/alerting/unified/components/silences/SilenceTableRow.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilenceTableRow.tsx
@@ -1,18 +1,22 @@
-import React, { FC, Fragment, useState } from 'react';
-import { dateMath, GrafanaTheme, intervalToAbbreviatedDurationString } from '@grafana/data';
import { css, cx } from '@emotion/css';
+import React, { FC, Fragment, useState } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { dateMath, GrafanaTheme, intervalToAbbreviatedDurationString } from '@grafana/data';
+import { useStyles, Link } from '@grafana/ui';
+import { contextSrv } from 'app/core/services/context_srv';
import { Silence, AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
+
+import { expireSilenceAction } from '../../state/actions';
+import { makeAMLink } from '../../utils/misc';
import { CollapseToggle } from '../CollapseToggle';
import { ActionButton } from '../rules/ActionButton';
import { ActionIcon } from '../rules/ActionIcon';
-import { useStyles, Link } from '@grafana/ui';
-import SilencedAlertsTable from './SilencedAlertsTable';
-import { expireSilenceAction } from '../../state/actions';
-import { useDispatch } from 'react-redux';
+
import { Matchers } from './Matchers';
import { SilenceStateTag } from './SilenceStateTag';
-import { makeAMLink } from '../../utils/misc';
-import { contextSrv } from 'app/core/services/context_srv';
+import SilencedAlertsTable from './SilencedAlertsTable';
+
interface Props {
className?: string;
silence: Silence;
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
index 14b08b8dc8f..94b0d802d3b 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
@@ -1,10 +1,13 @@
-import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
-import React, { FC } from 'react';
-import { getAlertTableStyles } from '../../styles/table';
-import { useStyles2 } from '@grafana/ui';
-import { SilencedAlertsTableRow } from './SilencedAlertsTableRow';
-import { GrafanaTheme2 } from '@grafana/data';
import { css, cx } from '@emotion/css';
+import React, { FC } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
+
+import { getAlertTableStyles } from '../../styles/table';
+
+import { SilencedAlertsTableRow } from './SilencedAlertsTableRow';
interface Props {
silencedAlerts: AlertmanagerAlert[];
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
index 3b14a25436b..8396e48c3f9 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
@@ -1,8 +1,11 @@
-import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
import React, { FC, useState } from 'react';
-import { CollapseToggle } from '../CollapseToggle';
+
import { intervalToAbbreviatedDurationString } from '@grafana/data';
+import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
+
import { AlertLabels } from '../AlertLabels';
+import { CollapseToggle } from '../CollapseToggle';
+
import { AmAlertStateTag } from './AmAlertStateTag';
interface Props {
diff --git a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
index dd2bcdadf64..75aac08edf2 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
@@ -1,6 +1,10 @@
-import { MatcherOperator, Silence, SilenceCreatePayload } from 'app/plugins/datasource/alertmanager/types';
+import { css, cx } from '@emotion/css';
+import { pickBy } from 'lodash';
import React, { FC, useMemo, useState } from 'react';
-import { Button, Field, FieldSet, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
+import { useForm, FormProvider } from 'react-hook-form';
+import { useDispatch } from 'react-redux';
+import { useDebounce } from 'react-use';
+
import {
DefaultTimeZone,
parseDuration,
@@ -10,23 +14,22 @@ import {
isValidDate,
GrafanaTheme2,
} from '@grafana/data';
-import { useDebounce } from 'react-use';
import { config } from '@grafana/runtime';
-import { pickBy } from 'lodash';
-import MatchersField from './MatchersField';
-import { MatchedSilencedRules } from './MatchedSilencedRules';
-import { useForm, FormProvider } from 'react-hook-form';
-import { SilenceFormFields } from '../../types/silence-form';
-import { useDispatch } from 'react-redux';
-import { createOrUpdateSilenceAction } from '../../state/actions';
-import { SilencePeriod } from './SilencePeriod';
-import { css, cx } from '@emotion/css';
-import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
-import { makeAMLink } from '../../utils/misc';
+import { Button, Field, FieldSet, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
import { useCleanup } from 'app/core/hooks/useCleanup';
-import { parseQueryParamMatchers } from '../../utils/matchers';
-import { matcherToMatcherField, matcherFieldToMatcher } from '../../utils/alertmanager';
+import { MatcherOperator, Silence, SilenceCreatePayload } from 'app/plugins/datasource/alertmanager/types';
+
import { useURLSearchParams } from '../../hooks/useURLSearchParams';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { createOrUpdateSilenceAction } from '../../state/actions';
+import { SilenceFormFields } from '../../types/silence-form';
+import { matcherToMatcherField, matcherFieldToMatcher } from '../../utils/alertmanager';
+import { parseQueryParamMatchers } from '../../utils/matchers';
+import { makeAMLink } from '../../utils/misc';
+
+import { MatchedSilencedRules } from './MatchedSilencedRules';
+import MatchersField from './MatchersField';
+import { SilencePeriod } from './SilencePeriod';
interface Props {
silence?: Silence;
diff --git a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
index 377a06bc63d..2d926a9fe41 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
@@ -1,13 +1,15 @@
-import React, { FormEvent, useState } from 'react';
import { css } from '@emotion/css';
-import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field } from '@grafana/ui';
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
-import { getSilenceFiltersFromUrlParams } from '../../utils/misc';
-import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
-import { parseMatchers } from '../../utils/alertmanager';
import { debounce, uniqueId } from 'lodash';
+import React, { FormEvent, useState } from 'react';
+
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Stack } from '@grafana/experimental';
+import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field } from '@grafana/ui';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
+
+import { parseMatchers } from '../../utils/alertmanager';
+import { getSilenceFiltersFromUrlParams } from '../../utils/misc';
const stateOptions: SelectableValue[] = Object.entries(SilenceState).map(([key, value]) => ({
label: key,
diff --git a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
index b70fd472166..9e7d5b44ac3 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
@@ -1,25 +1,28 @@
-import React, { FC, useMemo } from 'react';
-import { GrafanaTheme2, dateMath } from '@grafana/data';
-import { Icon, useStyles2, Link, Button } from '@grafana/ui';
import { css } from '@emotion/css';
-import { AlertmanagerAlert, Silence, SilenceState } from 'app/plugins/datasource/alertmanager/types';
-import { NoSilencesSplash } from './NoSilencesCTA';
-import { getSilenceFiltersFromUrlParams, makeAMLink } from '../../utils/misc';
-import { contextSrv } from 'app/core/services/context_srv';
+import React, { FC, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { GrafanaTheme2, dateMath } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
+import { Icon, useStyles2, Link, Button } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
-import { SilencesFilter } from './SilencesFilter';
+import { contextSrv } from 'app/core/services/context_srv';
+import { AlertmanagerAlert, Silence, SilenceState } from 'app/plugins/datasource/alertmanager/types';
+
+import { expireSilenceAction } from '../../state/actions';
+import { getInstancesPermissions } from '../../utils/access-control';
import { parseMatchers } from '../../utils/alertmanager';
+import { getSilenceFiltersFromUrlParams, makeAMLink } from '../../utils/misc';
+import { Authorize } from '../Authorize';
import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
-import { SilenceStateTag } from './SilenceStateTag';
-import { Matchers } from './Matchers';
import { ActionButton } from '../rules/ActionButton';
import { ActionIcon } from '../rules/ActionIcon';
-import { useDispatch } from 'react-redux';
-import { expireSilenceAction } from '../../state/actions';
+
+import { Matchers } from './Matchers';
+import { NoSilencesSplash } from './NoSilencesCTA';
import { SilenceDetails } from './SilenceDetails';
-import { Stack } from '@grafana/experimental';
-import { Authorize } from '../Authorize';
-import { getInstancesPermissions } from '../../utils/access-control';
+import { SilenceStateTag } from './SilenceStateTag';
+import { SilencesFilter } from './SilencesFilter';
export interface SilenceTableItem extends Silence {
silencedAlerts: AlertmanagerAlert[];
diff --git a/public/app/features/alerting/unified/hooks/useAlertManagerSourceName.ts b/public/app/features/alerting/unified/hooks/useAlertManagerSourceName.ts
index 9ffbcd069f4..8fe2c34a600 100644
--- a/public/app/features/alerting/unified/hooks/useAlertManagerSourceName.ts
+++ b/public/app/features/alerting/unified/hooks/useAlertManagerSourceName.ts
@@ -1,6 +1,8 @@
+import { useCallback } from 'react';
+
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import store from 'app/core/store';
-import { useCallback } from 'react';
+
import { ALERTMANAGER_NAME_LOCAL_STORAGE_KEY, ALERTMANAGER_NAME_QUERY_KEY } from '../utils/constants';
import { getAlertManagerDataSources, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
diff --git a/public/app/features/alerting/unified/hooks/useAlertQueriesStatus.ts b/public/app/features/alerting/unified/hooks/useAlertQueriesStatus.ts
index b5e3c61eb05..4a7b3386a92 100644
--- a/public/app/features/alerting/unified/hooks/useAlertQueriesStatus.ts
+++ b/public/app/features/alerting/unified/hooks/useAlertQueriesStatus.ts
@@ -1,6 +1,7 @@
+import { useMemo } from 'react';
+
import { getDataSourceSrv } from '@grafana/runtime';
import { AlertQuery } from 'app/types/unified-alerting-dto';
-import { useMemo } from 'react';
export function useAlertQueriesStatus(queries: AlertQuery[]) {
const allDataSourcesAvailable = useMemo(
diff --git a/public/app/features/alerting/unified/hooks/useCombinedRule.ts b/public/app/features/alerting/unified/hooks/useCombinedRule.ts
index 79c517592dc..55d853abcc2 100644
--- a/public/app/features/alerting/unified/hooks/useCombinedRule.ts
+++ b/public/app/features/alerting/unified/hooks/useCombinedRule.ts
@@ -1,12 +1,15 @@
-import { CombinedRule, RuleIdentifier, RuleNamespace } from 'app/types/unified-alerting';
-import { RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
import { useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { useAsync } from 'react-use';
+
+import { CombinedRule, RuleIdentifier, RuleNamespace } from 'app/types/unified-alerting';
+import { RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
+
import { fetchPromAndRulerRulesAction } from '../state/actions';
import { AsyncRequestMapSlice, AsyncRequestState, initialAsyncRequestState } from '../utils/redux';
import * as ruleId from '../utils/rule-id';
import { isRulerNotSupportedResponse } from '../utils/rules';
+
import { useCombinedRuleNamespaces } from './useCombinedRuleNamespaces';
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
diff --git a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.test.ts b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.test.ts
new file mode 100644
index 00000000000..544b2837855
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.test.ts
@@ -0,0 +1,58 @@
+import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting';
+
+import { sortRulesByName, flattenGrafanaManagedRules } from './useCombinedRuleNamespaces';
+
+describe('flattenGrafanaManagedRules', () => {
+ it('should properly transform grafana managed namespaces', () => {
+ // the rules from both ungrouped groups should go in the default group
+ const ungroupedGroup1 = {
+ name: 'my-rule',
+ rules: [{ name: 'my-rule' }],
+ } as CombinedRuleGroup;
+
+ const ungroupedGroup2 = {
+ name: 'another-rule',
+ rules: [{ name: 'another-rule' }],
+ } as CombinedRuleGroup;
+
+ // the rules from both these groups should go in their own group name
+ const group1 = {
+ name: 'group1',
+ rules: [{ name: 'rule-1' }, { name: 'rule-2' }],
+ } as CombinedRuleGroup;
+
+ const group2 = {
+ name: 'group2',
+ rules: [{ name: 'rule-1' }, { name: 'rule-2' }],
+ } as CombinedRuleGroup;
+
+ const namespace1 = {
+ rulesSource: 'grafana',
+ name: 'ns1',
+ groups: [ungroupedGroup1, ungroupedGroup2, group1, group2],
+ };
+
+ const namespace2 = {
+ rulesSource: 'grafana',
+ name: 'ns2',
+ groups: [ungroupedGroup1],
+ };
+
+ const input = [namespace1, namespace2] as CombinedRuleNamespace[];
+ const [ns1, ns2] = flattenGrafanaManagedRules(input);
+
+ expect(ns1.groups).toEqual([
+ {
+ name: 'default',
+ rules: sortRulesByName([...ungroupedGroup1.rules, ...ungroupedGroup2.rules, ...group1.rules, ...group2.rules]),
+ },
+ ]);
+
+ expect(ns2.groups).toEqual([
+ {
+ name: 'default',
+ rules: ungroupedGroup1.rules,
+ },
+ ]);
+ });
+});
diff --git a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
index 259ff2af8c3..127569f59de 100644
--- a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
+++ b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
@@ -1,3 +1,5 @@
+import { useMemo, useRef } from 'react';
+
import {
CombinedRule,
CombinedRuleGroup,
@@ -8,7 +10,7 @@ import {
RulesSource,
} from 'app/types/unified-alerting';
import { RulerRuleDTO, RulerRuleGroupDTO, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
-import { useMemo, useRef } from 'react';
+
import {
getAllRulesSources,
getRulesSourceByName,
@@ -16,6 +18,7 @@ import {
isGrafanaRulesSource,
} from '../utils/datasource';
import { isAlertingRule, isAlertingRulerRule, isRecordingRulerRule } from '../utils/rules';
+
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
interface CacheValue {
@@ -81,17 +84,7 @@ export function useCombinedRuleNamespaces(rulesSourceName?: string): CombinedRul
});
const result = Object.values(namespaces);
- if (isGrafanaRulesSource(rulesSource)) {
- // merge all groups in case of grafana managed, essentially treating namespaces (folders) as gorups
- result.forEach((namespace) => {
- namespace.groups = [
- {
- name: 'default',
- rules: namespace.groups.flatMap((g) => g.rules).sort((a, b) => a.name.localeCompare(b.name)),
- },
- ];
- });
- }
+
cache.current[rulesSourceName] = { promRules, rulerRules, result };
return result;
})
@@ -100,6 +93,28 @@ export function useCombinedRuleNamespaces(rulesSourceName?: string): CombinedRul
);
}
+// merge all groups in case of grafana managed, essentially treating namespaces (folders) as groups
+export function flattenGrafanaManagedRules(namespaces: CombinedRuleNamespace[]) {
+ return namespaces.map((namespace) => {
+ const newNamespace: CombinedRuleNamespace = {
+ ...namespace,
+ groups: [],
+ };
+
+ // add default group with ungrouped rules
+ newNamespace.groups.push({
+ name: 'default',
+ rules: sortRulesByName(namespace.groups.flatMap((group) => group.rules)),
+ });
+
+ return newNamespace;
+ });
+}
+
+export function sortRulesByName(rules: CombinedRule[]) {
+ return rules.sort((a, b) => a.name.localeCompare(b.name));
+}
+
function addRulerGroupsToCombinedNamespace(namespace: CombinedRuleNamespace, groups: RulerRuleGroupDTO[]): void {
namespace.groups = groups.map((group) => {
const combinedGroup: CombinedRuleGroup = {
diff --git a/public/app/features/alerting/unified/hooks/useControlledFieldArray.ts b/public/app/features/alerting/unified/hooks/useControlledFieldArray.ts
index b42831c0c36..3853c99140f 100644
--- a/public/app/features/alerting/unified/hooks/useControlledFieldArray.ts
+++ b/public/app/features/alerting/unified/hooks/useControlledFieldArray.ts
@@ -1,8 +1,7 @@
+import { set } from 'lodash';
import { useCallback } from 'react';
import { UseFormReturn } from 'react-hook-form';
-import { set } from 'lodash';
-
interface Options {
name: string;
formAPI: UseFormReturn;
diff --git a/public/app/features/alerting/unified/hooks/useExternalAMSelector.test.ts b/public/app/features/alerting/unified/hooks/useExternalAMSelector.test.ts
index 823141fec9d..bf613686bf1 100644
--- a/public/app/features/alerting/unified/hooks/useExternalAMSelector.test.ts
+++ b/public/app/features/alerting/unified/hooks/useExternalAMSelector.test.ts
@@ -1,4 +1,5 @@
import * as reactRedux from 'react-redux';
+
import { useExternalAmSelector } from './useExternalAmSelector';
const createMockStoreState = (
diff --git a/public/app/features/alerting/unified/hooks/useExternalAmSelector.ts b/public/app/features/alerting/unified/hooks/useExternalAmSelector.ts
index 9bc63239fcb..0a87417fefc 100644
--- a/public/app/features/alerting/unified/hooks/useExternalAmSelector.ts
+++ b/public/app/features/alerting/unified/hooks/useExternalAmSelector.ts
@@ -1,4 +1,5 @@
import { useSelector } from 'react-redux';
+
import { StoreState } from '../../../../types';
const SUFFIX_REGEX = /\/api\/v[1|2]\/alerts/i;
diff --git a/public/app/features/alerting/unified/hooks/useFilteredAmGroups.ts b/public/app/features/alerting/unified/hooks/useFilteredAmGroups.ts
index a47e9685979..3aa49042d93 100644
--- a/public/app/features/alerting/unified/hooks/useFilteredAmGroups.ts
+++ b/public/app/features/alerting/unified/hooks/useFilteredAmGroups.ts
@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
+
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types';
-import { useMemo } from 'react';
+
import { labelsMatchMatchers, parseMatchers } from '../utils/alertmanager';
import { getFiltersFromUrlParams } from '../utils/misc';
diff --git a/public/app/features/alerting/unified/hooks/useFilteredRules.ts b/public/app/features/alerting/unified/hooks/useFilteredRules.ts
index b8be1dd1edb..20cf18caf17 100644
--- a/public/app/features/alerting/unified/hooks/useFilteredRules.ts
+++ b/public/app/features/alerting/unified/hooks/useFilteredRules.ts
@@ -1,13 +1,14 @@
import { useMemo } from 'react';
-import { CombinedRuleGroup, CombinedRuleNamespace, FilterState } from 'app/types/unified-alerting';
-import { isCloudRulesSource } from '../utils/datasource';
-import { isAlertingRule, isGrafanaRulerRule } from '../utils/rules';
-import { getFiltersFromUrlParams } from '../utils/misc';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
-import { PromRuleType, RulerGrafanaRuleDTO } from 'app/types/unified-alerting-dto';
import { getDataSourceSrv } from '@grafana/runtime';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { CombinedRuleGroup, CombinedRuleNamespace, FilterState } from 'app/types/unified-alerting';
+import { PromRuleType, RulerGrafanaRuleDTO } from 'app/types/unified-alerting-dto';
+
import { labelsMatchMatchers, parseMatchers } from '../utils/alertmanager';
+import { isCloudRulesSource } from '../utils/datasource';
+import { getFiltersFromUrlParams } from '../utils/misc';
+import { isAlertingRule, isGrafanaRulerRule } from '../utils/rules';
export const useFilteredRules = (namespaces: CombinedRuleNamespace[]) => {
const [queryParams] = useQueryParams();
diff --git a/public/app/features/alerting/unified/hooks/useFolder.ts b/public/app/features/alerting/unified/hooks/useFolder.ts
index 196c0406456..a02710b026b 100644
--- a/public/app/features/alerting/unified/hooks/useFolder.ts
+++ b/public/app/features/alerting/unified/hooks/useFolder.ts
@@ -1,10 +1,13 @@
-import { FolderDTO } from 'app/types';
-import { useDispatch } from 'react-redux';
-import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { FolderDTO } from 'app/types';
+
import { fetchFolderIfNotFetchedAction } from '../state/actions';
import { initialAsyncRequestState } from '../utils/redux';
+import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+
interface ReturnBag {
folder?: FolderDTO;
loading: boolean;
diff --git a/public/app/features/alerting/unified/hooks/useGroupedAlerts.ts b/public/app/features/alerting/unified/hooks/useGroupedAlerts.ts
index 72932587d2a..1390f21b523 100644
--- a/public/app/features/alerting/unified/hooks/useGroupedAlerts.ts
+++ b/public/app/features/alerting/unified/hooks/useGroupedAlerts.ts
@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
-import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types';
-import { Labels } from '@grafana/data';
import { uniqBy } from 'lodash';
+import { useMemo } from 'react';
+
+import { Labels } from '@grafana/data';
+import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types';
export const useGroupedAlerts = (groups: AlertmanagerGroup[], groupBy: string[]): AlertmanagerGroup[] => {
return useMemo(() => {
diff --git a/public/app/features/alerting/unified/hooks/useHasRuler.ts b/public/app/features/alerting/unified/hooks/useHasRuler.ts
index eb326280c64..fb4d2e5960c 100644
--- a/public/app/features/alerting/unified/hooks/useHasRuler.ts
+++ b/public/app/features/alerting/unified/hooks/useHasRuler.ts
@@ -1,6 +1,9 @@
-import { RulesSource } from 'app/types/unified-alerting';
import { useCallback } from 'react';
+
+import { RulesSource } from 'app/types/unified-alerting';
+
import { GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
+
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
// datasource has ruler if it's grafana managed or if we're able to load rules from it
diff --git a/public/app/features/alerting/unified/hooks/useIsRuleEditable.test.tsx b/public/app/features/alerting/unified/hooks/useIsRuleEditable.test.tsx
index 7925df6f9d6..8c2e2868787 100644
--- a/public/app/features/alerting/unified/hooks/useIsRuleEditable.test.tsx
+++ b/public/app/features/alerting/unified/hooks/useIsRuleEditable.test.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { Provider } from 'react-redux';
+
import { contextSrv } from 'app/core/services/context_srv';
import { configureStore } from 'app/store/configureStore';
import { AccessControlAction, FolderDTO, StoreState } from 'app/types';
-import { Provider } from 'react-redux';
+
import { mockFolder, mockRulerAlertingRule, mockRulerGrafanaRule } from '../mocks';
+
import { useFolder } from './useFolder';
import { useIsRuleEditable } from './useIsRuleEditable';
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
@@ -17,7 +20,7 @@ const mocks = {
};
describe('useIsRuleEditable', () => {
- describe('FGAC enabled', () => {
+ describe('RBAC enabled', () => {
jest.spyOn(contextSrv, 'accessControlEnabled').mockReturnValue(true);
describe('Grafana rules', () => {
it('Should allow editing when the user has the alert rule update permission and folder permissions', () => {
diff --git a/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts b/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts
index 5d42819b433..84ba418c685 100644
--- a/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts
+++ b/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts
@@ -1,7 +1,9 @@
import { contextSrv } from 'app/core/services/context_srv';
import { RulerRuleDTO } from 'app/types/unified-alerting-dto';
+
import { getRulesPermissions } from '../utils/access-control';
import { isGrafanaRulerRule } from '../utils/rules';
+
import { useFolder } from './useFolder';
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
diff --git a/public/app/features/alerting/unified/hooks/useManagedAlertStateHistory.ts b/public/app/features/alerting/unified/hooks/useManagedAlertStateHistory.ts
index 8fcb6a2201e..115c623a881 100644
--- a/public/app/features/alerting/unified/hooks/useManagedAlertStateHistory.ts
+++ b/public/app/features/alerting/unified/hooks/useManagedAlertStateHistory.ts
@@ -1,8 +1,11 @@
-import { StateHistoryItem } from 'app/types/unified-alerting';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
+
+import { StateHistoryItem } from 'app/types/unified-alerting';
+
import { fetchGrafanaAnnotationsAction } from '../state/actions';
import { AsyncRequestState } from '../utils/redux';
+
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
export function useManagedAlertStateHistory(alertId: string) {
diff --git a/public/app/features/alerting/unified/hooks/useMuteTimingOptions.ts b/public/app/features/alerting/unified/hooks/useMuteTimingOptions.ts
index 650ee65ef72..843a7ec3197 100644
--- a/public/app/features/alerting/unified/hooks/useMuteTimingOptions.ts
+++ b/public/app/features/alerting/unified/hooks/useMuteTimingOptions.ts
@@ -1,8 +1,11 @@
+import { useMemo } from 'react';
+
import { SelectableValue } from '@grafana/data';
import { AlertmanagerConfig } from 'app/plugins/datasource/alertmanager/types';
-import { useMemo } from 'react';
+
import { timeIntervalToString } from '../utils/alertmanager';
import { initialAsyncRequestState } from '../utils/redux';
+
import { useAlertManagerSourceName } from './useAlertManagerSourceName';
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
diff --git a/public/app/features/alerting/unified/hooks/usePanelCombinedRules.ts b/public/app/features/alerting/unified/hooks/usePanelCombinedRules.ts
index 7bdb4b30a72..f7d562bd647 100644
--- a/public/app/features/alerting/unified/hooks/usePanelCombinedRules.ts
+++ b/public/app/features/alerting/unified/hooks/usePanelCombinedRules.ts
@@ -1,14 +1,18 @@
import { SerializedError } from '@reduxjs/toolkit';
+import { useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { CombinedRule } from 'app/types/unified-alerting';
-import { useDispatch } from 'react-redux';
+
import { fetchPromRulesAction, fetchRulerRulesAction } from '../state/actions';
import { Annotation, RULE_LIST_POLL_INTERVAL_MS } from '../utils/constants';
import { GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
import { initialAsyncRequestState } from '../utils/redux';
+
import { useCombinedRuleNamespaces } from './useCombinedRuleNamespaces';
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
-import { useEffect, useMemo } from 'react';
+
interface Options {
dashboard: DashboardModel;
panel: PanelModel;
diff --git a/public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts b/public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts
index e5d49d680ac..da9baf2d197 100644
--- a/public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts
+++ b/public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts
@@ -1,6 +1,8 @@
import { DataSourceInstanceSettings } from '@grafana/data';
import { PromBasedDataSource } from 'app/types/unified-alerting';
+
import { getDataSourceByName } from '../utils/datasource';
+
import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
export function useRulesSourcesWithRuler(): DataSourceInstanceSettings[] {
diff --git a/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx b/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx
index 980977e60e5..1e0a5a425f9 100644
--- a/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx
+++ b/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx
@@ -1,5 +1,7 @@
import React, { useMemo, useState } from 'react';
+
import { Modal } from '@grafana/ui';
+
import { StateHistory } from '../components/rules/StateHistory';
function useStateHistoryModal(alertId: string) {
diff --git a/public/app/features/alerting/unified/hooks/useURLSearchParams.ts b/public/app/features/alerting/unified/hooks/useURLSearchParams.ts
index 9ede7b89937..f67cecda4bb 100644
--- a/public/app/features/alerting/unified/hooks/useURLSearchParams.ts
+++ b/public/app/features/alerting/unified/hooks/useURLSearchParams.ts
@@ -1,5 +1,6 @@
import { useCallback, useMemo } from 'react';
import { useLocation } from 'react-router-dom';
+
import { locationService } from '@grafana/runtime';
export function useURLSearchParams(): [
diff --git a/public/app/features/alerting/unified/hooks/useUnifiedAlertingSelector.ts b/public/app/features/alerting/unified/hooks/useUnifiedAlertingSelector.ts
index 8593feebf97..57b335ebb47 100644
--- a/public/app/features/alerting/unified/hooks/useUnifiedAlertingSelector.ts
+++ b/public/app/features/alerting/unified/hooks/useUnifiedAlertingSelector.ts
@@ -1,5 +1,7 @@
-import { StoreState } from 'app/types';
import { useSelector } from 'react-redux';
+
+import { StoreState } from 'app/types';
+
import { UnifiedAlertingState } from '../state/reducers';
export function useUnifiedAlertingSelector(
diff --git a/public/app/features/alerting/unified/hooks/useVizHeight.ts b/public/app/features/alerting/unified/hooks/useVizHeight.ts
index bd3b525e735..74a6f510011 100644
--- a/public/app/features/alerting/unified/hooks/useVizHeight.ts
+++ b/public/app/features/alerting/unified/hooks/useVizHeight.ts
@@ -1,5 +1,6 @@
import { PanelData } from '@grafana/data';
import { useTheme2 } from '@grafana/ui';
+
import { STAT, TIMESERIES } from '../utils/constants';
export function useVizHeight(data: PanelData, pluginId: string, frameIndex: number) {
diff --git a/public/app/features/alerting/unified/mocks.ts b/public/app/features/alerting/unified/mocks.ts
index 952037e6f44..0dcb67cca28 100644
--- a/public/app/features/alerting/unified/mocks.ts
+++ b/public/app/features/alerting/unified/mocks.ts
@@ -6,19 +6,8 @@ import {
DataSourceRef,
ScopedVars,
} from '@grafana/data';
-import {
- GrafanaAlertStateDecision,
- GrafanaRuleDefinition,
- PromAlertingRuleState,
- PromRuleType,
- RulerAlertingRuleDTO,
- RulerGrafanaRuleDTO,
- RulerRuleGroupDTO,
- RulerRulesConfigDTO,
-} from 'app/types/unified-alerting-dto';
-import { AlertingRule, Alert, RecordingRule, RuleGroup, RuleNamespace, CombinedRule } from 'app/types/unified-alerting';
-import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
import { DataSourceSrv, GetDataSourceListFilters, config } from '@grafana/runtime';
+import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
import {
AlertmanagerAlert,
AlertManagerCortexConfig,
@@ -30,6 +19,17 @@ import {
SilenceState,
} from 'app/plugins/datasource/alertmanager/types';
import { FolderDTO } from 'app/types';
+import { AlertingRule, Alert, RecordingRule, RuleGroup, RuleNamespace, CombinedRule } from 'app/types/unified-alerting';
+import {
+ GrafanaAlertStateDecision,
+ GrafanaRuleDefinition,
+ PromAlertingRuleState,
+ PromRuleType,
+ RulerAlertingRuleDTO,
+ RulerGrafanaRuleDTO,
+ RulerRuleGroupDTO,
+ RulerRulesConfigDTO,
+} from 'app/types/unified-alerting-dto';
let nextDataSourceId = 1;
diff --git a/public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts b/public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts
index ce5c6580251..8e716bd4153 100644
--- a/public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts
+++ b/public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts
@@ -1,3 +1,7 @@
+import { Observable, of, throwError } from 'rxjs';
+import { delay, take } from 'rxjs/operators';
+import { createFetchResponse } from 'test/helpers/createFetchResponse';
+
import {
ArrayVector,
DataFrame,
@@ -12,9 +16,7 @@ import {
import { DataSourceSrv, FetchResponse } from '@grafana/runtime';
import { BackendSrv } from 'app/core/services/backend_srv';
import { AlertQuery } from 'app/types/unified-alerting-dto';
-import { Observable, of, throwError } from 'rxjs';
-import { delay, take } from 'rxjs/operators';
-import { createFetchResponse } from 'test/helpers/createFetchResponse';
+
import { AlertingQueryResponse, AlertingQueryRunner } from './AlertingQueryRunner';
describe('AlertingQueryRunner', () => {
diff --git a/public/app/features/alerting/unified/state/AlertingQueryRunner.ts b/public/app/features/alerting/unified/state/AlertingQueryRunner.ts
index 4822898c950..7ba736c15f8 100644
--- a/public/app/features/alerting/unified/state/AlertingQueryRunner.ts
+++ b/public/app/features/alerting/unified/state/AlertingQueryRunner.ts
@@ -1,6 +1,7 @@
import { Observable, of, OperatorFunction, ReplaySubject, Unsubscribable } from 'rxjs';
import { catchError, map, share } from 'rxjs/operators';
import { v4 as uuidv4 } from 'uuid';
+
import {
dataFrameFromJSON,
DataFrameJSON,
@@ -13,12 +14,13 @@ import {
} from '@grafana/data';
import { FetchResponse, getDataSourceSrv, toDataQueryError } from '@grafana/runtime';
import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
+import { isExpressionQuery } from 'app/features/expressions/guards';
+import { cancelNetworkRequestsOnUnsubscribe } from 'app/features/query/state/processing/canceler';
+import { setStructureRevision } from 'app/features/query/state/processing/revision';
import { preProcessPanelData } from 'app/features/query/state/runRequest';
import { AlertQuery } from 'app/types/unified-alerting-dto';
+
import { getTimeRangeForExpression } from '../utils/timeRange';
-import { isExpressionQuery } from 'app/features/expressions/guards';
-import { setStructureRevision } from 'app/features/query/state/processing/revision';
-import { cancelNetworkRequestsOnUnsubscribe } from 'app/features/query/state/processing/canceler';
export interface AlertingQueryResult {
frames: DataFrameJSON[];
diff --git a/public/app/features/alerting/unified/state/actions.ts b/public/app/features/alerting/unified/state/actions.ts
index 92df3168f92..071aefa3377 100644
--- a/public/app/features/alerting/unified/state/actions.ts
+++ b/public/app/features/alerting/unified/state/actions.ts
@@ -1,5 +1,7 @@
-import { getBackendSrv, locationService } from '@grafana/runtime';
import { createAsyncThunk } from '@reduxjs/toolkit';
+import { isEmpty } from 'lodash';
+
+import { getBackendSrv, locationService } from '@grafana/runtime';
import {
AlertmanagerAlert,
AlertManagerCortexConfig,
@@ -24,7 +26,7 @@ import {
StateHistoryItem,
} from 'app/types/unified-alerting';
import { PromApplication, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
-import { isEmpty } from 'lodash';
+
import {
addAlertManagers,
createOrUpdateSilence,
@@ -390,8 +392,14 @@ export const saveRuleFormAction = createAsyncThunk(
if (redirectOnSave) {
locationService.push(redirectOnSave);
} else {
+ // if the identifier comes up empty (this happens when Grafana managed rule moves to another namespace or group)
+ const stringifiedIdentifier = ruleId.stringifyIdentifier(identifier);
+ if (!stringifiedIdentifier) {
+ locationService.push('/alerting/list');
+ return;
+ }
// redirect to edit page
- const newLocation = `/alerting/${encodeURIComponent(ruleId.stringifyIdentifier(identifier))}/edit`;
+ const newLocation = `/alerting/${encodeURIComponent(stringifiedIdentifier)}/edit`;
if (locationService.getLocation().pathname !== newLocation) {
locationService.replace(newLocation);
}
diff --git a/public/app/features/alerting/unified/state/reducers.ts b/public/app/features/alerting/unified/state/reducers.ts
index 30d2ff1d445..41d81124d22 100644
--- a/public/app/features/alerting/unified/state/reducers.ts
+++ b/public/app/features/alerting/unified/state/reducers.ts
@@ -1,5 +1,7 @@
import { combineReducers } from 'redux';
+
import { createAsyncMapSlice, createAsyncSlice } from '../utils/redux';
+
import {
createOrUpdateSilenceAction,
deleteAlertManagerConfigAction,
diff --git a/public/app/features/alerting/unified/styles/notifications.ts b/public/app/features/alerting/unified/styles/notifications.ts
index 2d5966eb4fc..162d81196f4 100644
--- a/public/app/features/alerting/unified/styles/notifications.ts
+++ b/public/app/features/alerting/unified/styles/notifications.ts
@@ -1,5 +1,6 @@
-import { GrafanaTheme2 } from '@grafana/data';
import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
import { AlertState } from 'app/plugins/datasource/alertmanager/types';
export const getNotificationsTextColors = (theme: GrafanaTheme2) => ({
diff --git a/public/app/features/alerting/unified/styles/table.ts b/public/app/features/alerting/unified/styles/table.ts
index 8994219683e..422dd4de9a6 100644
--- a/public/app/features/alerting/unified/styles/table.ts
+++ b/public/app/features/alerting/unified/styles/table.ts
@@ -1,6 +1,7 @@
-import { GrafanaTheme2 } from '@grafana/data';
import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
export const getAlertTableStyles = (theme: GrafanaTheme2) => ({
table: css`
width: 100%;
diff --git a/public/app/features/alerting/unified/types/preview.ts b/public/app/features/alerting/unified/types/preview.ts
index e94891a656c..13e6315cb92 100644
--- a/public/app/features/alerting/unified/types/preview.ts
+++ b/public/app/features/alerting/unified/types/preview.ts
@@ -1,5 +1,6 @@
import { PanelData } from '@grafana/data';
import { AlertQuery } from 'app/types/unified-alerting-dto';
+
import { RuleFormType } from './rule-form';
export type PreviewRuleRequest = GrafanaPreviewRuleRequest | CloudPreviewRuleRequest;
diff --git a/public/app/features/alerting/unified/types/receiver-form.ts b/public/app/features/alerting/unified/types/receiver-form.ts
index 126dd194806..121bf6f1559 100644
--- a/public/app/features/alerting/unified/types/receiver-form.ts
+++ b/public/app/features/alerting/unified/types/receiver-form.ts
@@ -1,6 +1,8 @@
+import React from 'react';
+
import { GrafanaManagedReceiverConfig } from 'app/plugins/datasource/alertmanager/types';
import { CloudNotifierType, NotifierType } from 'app/types';
-import React from 'react';
+
import { ControlledField } from '../hooks/useControlledFieldArray';
export interface ChannelValues {
diff --git a/public/app/features/alerting/unified/types/rule-form.ts b/public/app/features/alerting/unified/types/rule-form.ts
index 0ae36bb00b0..068dd2d3e2c 100644
--- a/public/app/features/alerting/unified/types/rule-form.ts
+++ b/public/app/features/alerting/unified/types/rule-form.ts
@@ -11,6 +11,7 @@ export interface RuleFormValues {
name: string;
type?: RuleFormType;
dataSourceName: string | null;
+ group: string;
labels: Array<{ key: string; value: string }>;
annotations: Array<{ key: string; value: string }>;
@@ -26,7 +27,6 @@ export interface RuleFormValues {
// cortex / loki rules
namespace: string;
- group: string;
forTime: number;
forTimeUnit: string;
expression: string;
diff --git a/public/app/features/alerting/unified/utils/access-control.ts b/public/app/features/alerting/unified/utils/access-control.ts
index fa884513679..0f03e12af10 100644
--- a/public/app/features/alerting/unified/utils/access-control.ts
+++ b/public/app/features/alerting/unified/utils/access-control.ts
@@ -1,6 +1,7 @@
-import { AccessControlAction } from 'app/types';
-import { isGrafanaRulesSource } from './datasource';
import { contextSrv } from 'app/core/services/context_srv';
+import { AccessControlAction } from 'app/types';
+
+import { isGrafanaRulesSource } from './datasource';
type RulesSourceType = 'grafana' | 'external';
@@ -8,93 +9,93 @@ function getRulesSourceType(alertManagerSourceName: string): RulesSourceType {
return isGrafanaRulesSource(alertManagerSourceName) ? 'grafana' : 'external';
}
+const instancesPermissions = {
+ read: {
+ grafana: AccessControlAction.AlertingInstanceRead,
+ external: AccessControlAction.AlertingInstancesExternalRead,
+ },
+ create: {
+ grafana: AccessControlAction.AlertingInstanceCreate,
+ external: AccessControlAction.AlertingInstancesExternalWrite,
+ },
+ update: {
+ grafana: AccessControlAction.AlertingInstanceUpdate,
+ external: AccessControlAction.AlertingInstancesExternalWrite,
+ },
+ delete: {
+ grafana: AccessControlAction.AlertingInstanceUpdate,
+ external: AccessControlAction.AlertingInstancesExternalWrite,
+ },
+};
+
+const notificationsPermissions = {
+ read: {
+ grafana: AccessControlAction.AlertingNotificationsRead,
+ external: AccessControlAction.AlertingNotificationsExternalRead,
+ },
+ create: {
+ grafana: AccessControlAction.AlertingNotificationsCreate,
+ external: AccessControlAction.AlertingNotificationsExternalWrite,
+ },
+ update: {
+ grafana: AccessControlAction.AlertingNotificationsUpdate,
+ external: AccessControlAction.AlertingNotificationsExternalWrite,
+ },
+ delete: {
+ grafana: AccessControlAction.AlertingNotificationsDelete,
+ external: AccessControlAction.AlertingNotificationsExternalWrite,
+ },
+};
+
+const rulesPermissions = {
+ read: {
+ grafana: AccessControlAction.AlertingRuleRead,
+ external: AccessControlAction.AlertingRuleExternalRead,
+ },
+ create: {
+ grafana: AccessControlAction.AlertingRuleCreate,
+ external: AccessControlAction.AlertingRuleExternalWrite,
+ },
+ update: {
+ grafana: AccessControlAction.AlertingRuleUpdate,
+ external: AccessControlAction.AlertingRuleExternalWrite,
+ },
+ delete: {
+ grafana: AccessControlAction.AlertingRuleDelete,
+ external: AccessControlAction.AlertingRuleExternalWrite,
+ },
+};
+
export function getInstancesPermissions(rulesSourceName: string) {
const sourceType = getRulesSourceType(rulesSourceName);
- const permissions = {
- read: {
- grafana: AccessControlAction.AlertingInstanceRead,
- external: AccessControlAction.AlertingInstancesExternalRead,
- },
- create: {
- grafana: AccessControlAction.AlertingInstanceCreate,
- external: AccessControlAction.AlertingInstancesExternalWrite,
- },
- update: {
- grafana: AccessControlAction.AlertingInstanceUpdate,
- external: AccessControlAction.AlertingInstancesExternalWrite,
- },
- delete: {
- grafana: AccessControlAction.AlertingInstanceUpdate,
- external: AccessControlAction.AlertingInstancesExternalWrite,
- },
- };
-
return {
- read: permissions.read[sourceType],
- create: permissions.create[sourceType],
- update: permissions.update[sourceType],
- delete: permissions.delete[sourceType],
+ read: instancesPermissions.read[sourceType],
+ create: instancesPermissions.create[sourceType],
+ update: instancesPermissions.update[sourceType],
+ delete: instancesPermissions.delete[sourceType],
};
}
export function getNotificationsPermissions(rulesSourceName: string) {
const sourceType = getRulesSourceType(rulesSourceName);
- const permissions = {
- read: {
- grafana: AccessControlAction.AlertingNotificationsRead,
- external: AccessControlAction.AlertingNotificationsExternalRead,
- },
- create: {
- grafana: AccessControlAction.AlertingNotificationsCreate,
- external: AccessControlAction.AlertingNotificationsExternalWrite,
- },
- update: {
- grafana: AccessControlAction.AlertingNotificationsUpdate,
- external: AccessControlAction.AlertingNotificationsExternalWrite,
- },
- delete: {
- grafana: AccessControlAction.AlertingNotificationsDelete,
- external: AccessControlAction.AlertingNotificationsExternalWrite,
- },
- };
-
return {
- read: permissions.read[sourceType],
- create: permissions.create[sourceType],
- update: permissions.update[sourceType],
- delete: permissions.delete[sourceType],
+ read: notificationsPermissions.read[sourceType],
+ create: notificationsPermissions.create[sourceType],
+ update: notificationsPermissions.update[sourceType],
+ delete: notificationsPermissions.delete[sourceType],
};
}
export function getRulesPermissions(rulesSourceName: string) {
const sourceType = getRulesSourceType(rulesSourceName);
- const permissions = {
- read: {
- grafana: AccessControlAction.AlertingRuleRead,
- external: AccessControlAction.AlertingRuleExternalRead,
- },
- create: {
- grafana: AccessControlAction.AlertingRuleCreate,
- external: AccessControlAction.AlertingRuleExternalWrite,
- },
- update: {
- grafana: AccessControlAction.AlertingRuleUpdate,
- external: AccessControlAction.AlertingRuleExternalWrite,
- },
- delete: {
- grafana: AccessControlAction.AlertingRuleDelete,
- external: AccessControlAction.AlertingRuleExternalWrite,
- },
- };
-
return {
- read: permissions.read[sourceType],
- create: permissions.create[sourceType],
- update: permissions.update[sourceType],
- delete: permissions.delete[sourceType],
+ read: rulesPermissions.read[sourceType],
+ create: rulesPermissions.create[sourceType],
+ update: rulesPermissions.update[sourceType],
+ delete: rulesPermissions.delete[sourceType],
};
}
@@ -103,3 +104,14 @@ export function evaluateAccess(actions: AccessControlAction[], fallBackUserRoles
return contextSrv.evaluatePermission(() => fallBackUserRoles, actions);
};
}
+
+export function getRulesAccess() {
+ return {
+ canCreateGrafanaRules:
+ contextSrv.hasEditPermissionInFolders &&
+ contextSrv.hasAccess(rulesPermissions.create.grafana, contextSrv.isEditor),
+ canCreateCloudRules: contextSrv.hasAccess(rulesPermissions.create.external, contextSrv.isEditor),
+ canEditRules: (rulesSourceName: string) =>
+ contextSrv.hasAccess(getRulesPermissions(rulesSourceName).update, contextSrv.isEditor),
+ };
+}
diff --git a/public/app/features/alerting/unified/utils/accessControlHooks.ts b/public/app/features/alerting/unified/utils/accessControlHooks.ts
new file mode 100644
index 00000000000..59a9b666bc6
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/accessControlHooks.ts
@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+
+import { getRulesAccess } from './access-control';
+
+export function useRulesAccess() {
+ return useMemo(() => getRulesAccess(), []);
+}
diff --git a/public/app/features/alerting/unified/utils/alertmanager.test.ts b/public/app/features/alerting/unified/utils/alertmanager.test.ts
index b45212275a7..bcef091a5ac 100644
--- a/public/app/features/alerting/unified/utils/alertmanager.test.ts
+++ b/public/app/features/alerting/unified/utils/alertmanager.test.ts
@@ -1,5 +1,6 @@
import { Matcher, MatcherOperator, Route } from 'app/plugins/datasource/alertmanager/types';
import { Labels } from 'app/types/unified-alerting-dto';
+
import {
parseMatcher,
parseMatchers,
diff --git a/public/app/features/alerting/unified/utils/alertmanager.ts b/public/app/features/alerting/unified/utils/alertmanager.ts
index cf904d2dc54..d569c32442a 100644
--- a/public/app/features/alerting/unified/utils/alertmanager.ts
+++ b/public/app/features/alerting/unified/utils/alertmanager.ts
@@ -1,3 +1,5 @@
+import { SelectableValue } from '@grafana/data';
+import { FetchError } from '@grafana/runtime';
import {
AlertManagerCortexConfig,
MatcherOperator,
@@ -7,11 +9,11 @@ import {
TimeRange,
} from 'app/plugins/datasource/alertmanager/types';
import { Labels } from 'app/types/unified-alerting-dto';
+
import { MatcherFieldValue } from '../types/silence-form';
-import { SelectableValue } from '@grafana/data';
+
import { getAllDataSources } from './config';
import { DataSourceType } from './datasource';
-import { FetchError } from '@grafana/runtime';
export function addDefaultsToAlertmanagerConfig(config: AlertManagerCortexConfig): AlertManagerCortexConfig {
// add default receiver if it does not exist
diff --git a/public/app/features/alerting/unified/utils/amroutes.ts b/public/app/features/alerting/unified/utils/amroutes.ts
index 8609d24c906..39f0a31089a 100644
--- a/public/app/features/alerting/unified/utils/amroutes.ts
+++ b/public/app/features/alerting/unified/utils/amroutes.ts
@@ -1,12 +1,15 @@
-import { SelectableValue } from '@grafana/data';
-import { Validate } from 'react-hook-form';
-import { MatcherOperator, Route } from 'app/plugins/datasource/alertmanager/types';
-import { FormAmRoute } from '../types/amroutes';
-import { parseInterval, timeOptions } from './time';
import { isUndefined, omitBy } from 'lodash';
+import { Validate } from 'react-hook-form';
+
+import { SelectableValue } from '@grafana/data';
+import { MatcherOperator, Route } from 'app/plugins/datasource/alertmanager/types';
+
+import { FormAmRoute } from '../types/amroutes';
import { MatcherFieldValue } from '../types/silence-form';
+
import { matcherToMatcherField, parseMatcher } from './alertmanager';
import { GRAFANA_RULES_SOURCE_NAME } from './datasource';
+import { parseInterval, timeOptions } from './time';
const defaultValueAndType: [string, string] = ['', timeOptions[0].value];
diff --git a/public/app/features/alerting/unified/utils/datasource.ts b/public/app/features/alerting/unified/utils/datasource.ts
index e494c62dda3..4a17af4c216 100644
--- a/public/app/features/alerting/unified/utils/datasource.ts
+++ b/public/app/features/alerting/unified/utils/datasource.ts
@@ -1,6 +1,9 @@
import { DataSourceJsonData, DataSourceInstanceSettings } from '@grafana/data';
+import { contextSrv } from 'app/core/services/context_srv';
import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from 'app/plugins/datasource/alertmanager/types';
+import { AccessControlAction } from 'app/types';
import { RulesSource } from 'app/types/unified-alerting';
+
import { getAllDataSources } from './config';
export const GRAFANA_RULES_SOURCE_NAME = 'grafana';
@@ -15,13 +18,17 @@ export enum DataSourceType {
export const RulesDataSourceTypes: string[] = [DataSourceType.Loki, DataSourceType.Prometheus];
export function getRulesDataSources() {
+ if (!contextSrv.hasPermission(AccessControlAction.AlertingRuleExternalRead)) {
+ return [];
+ }
+
return getAllDataSources()
.filter((ds) => RulesDataSourceTypes.includes(ds.type) && ds.jsonData.manageAlerts !== false)
.sort((a, b) => a.name.localeCompare(b.name));
}
export function getRulesDataSource(rulesSourceName: string) {
- return getAllDataSources().find((x) => x.name === rulesSourceName);
+ return getRulesDataSources().find((x) => x.name === rulesSourceName);
}
export function getAlertManagerDataSources() {
@@ -42,11 +49,23 @@ export function getLotexDataSourceByName(dataSourceName: string): DataSourceInst
}
export function getAllRulesSourceNames(): string[] {
- return [...getRulesDataSources().map((r) => r.name), GRAFANA_RULES_SOURCE_NAME];
+ const availableRulesSources: string[] = getRulesDataSources().map((r) => r.name);
+
+ if (contextSrv.hasPermission(AccessControlAction.AlertingRuleRead)) {
+ availableRulesSources.push(GRAFANA_RULES_SOURCE_NAME);
+ }
+
+ return availableRulesSources;
}
export function getAllRulesSources(): RulesSource[] {
- return [...getRulesDataSources(), GRAFANA_RULES_SOURCE_NAME];
+ const availableRulesSources: RulesSource[] = getRulesDataSources();
+
+ if (contextSrv.hasPermission(AccessControlAction.AlertingRuleRead)) {
+ availableRulesSources.push(GRAFANA_RULES_SOURCE_NAME);
+ }
+
+ return availableRulesSources;
}
export function getRulesSourceName(rulesSource: RulesSource): string {
diff --git a/public/app/features/alerting/unified/utils/matchers.test.ts b/public/app/features/alerting/unified/utils/matchers.test.ts
index cedddfe5e55..0a073dde7c4 100644
--- a/public/app/features/alerting/unified/utils/matchers.test.ts
+++ b/public/app/features/alerting/unified/utils/matchers.test.ts
@@ -1,7 +1,9 @@
import { MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
-import { getMatcherQueryParams, findAlertInstancesWithMatchers, parseQueryParamMatchers } from './matchers';
+
import { mockPromAlert } from '../mocks';
+import { getMatcherQueryParams, findAlertInstancesWithMatchers, parseQueryParamMatchers } from './matchers';
+
describe('Unified Alerting matchers', () => {
describe('getMatcherQueryParams tests', () => {
it('Should create an entry for each label', () => {
diff --git a/public/app/features/alerting/unified/utils/matchers.ts b/public/app/features/alerting/unified/utils/matchers.ts
index 619a370b40d..66fe014b2bc 100644
--- a/public/app/features/alerting/unified/utils/matchers.ts
+++ b/public/app/features/alerting/unified/utils/matchers.ts
@@ -1,10 +1,13 @@
-import { Matcher, MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
-import { Labels } from '@grafana/data';
-import { parseMatcher } from './alertmanager';
import { uniqBy } from 'lodash';
-import { MatcherFieldValue } from '../types/silence-form';
+
+import { Labels } from '@grafana/data';
+import { Matcher, MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
import { Alert } from 'app/types/unified-alerting';
+import { MatcherFieldValue } from '../types/silence-form';
+
+import { parseMatcher } from './alertmanager';
+
// Parses a list of entries like like "['foo=bar', 'baz=~bad*']" into SilenceMatcher[]
export function parseQueryParamMatchers(matcherPairs: string[]): Matcher[] {
const parsedMatchers = matcherPairs.filter((x) => !!x.trim()).map((x) => parseMatcher(x.trim()));
diff --git a/public/app/features/alerting/unified/utils/misc.test.ts b/public/app/features/alerting/unified/utils/misc.test.ts
index c69888b374f..e07d8699771 100644
--- a/public/app/features/alerting/unified/utils/misc.test.ts
+++ b/public/app/features/alerting/unified/utils/misc.test.ts
@@ -1,7 +1,7 @@
import { sortAlerts } from 'app/features/alerting/unified/utils/misc';
-import { GrafanaAlertState } from 'app/types/unified-alerting-dto';
-import { Alert } from 'app/types/unified-alerting';
import { SortOrder } from 'app/plugins/panel/alertlist/types';
+import { Alert } from 'app/types/unified-alerting';
+import { GrafanaAlertState } from 'app/types/unified-alerting-dto';
function withState(state: GrafanaAlertState, labels?: {}): Alert {
return { activeAt: '', annotations: {}, labels: labels || {}, state: state, value: '' };
diff --git a/public/app/features/alerting/unified/utils/misc.ts b/public/app/features/alerting/unified/utils/misc.ts
index 0b61bef8ad5..71ada51cded 100644
--- a/public/app/features/alerting/unified/utils/misc.ts
+++ b/public/app/features/alerting/unified/utils/misc.ts
@@ -1,14 +1,16 @@
+import { sortBy } from 'lodash';
+
import { urlUtil, UrlQueryMap, Labels } from '@grafana/data';
import { config } from '@grafana/runtime';
+import { alertInstanceKey } from 'app/features/alerting/unified/utils/rules';
+import { SortOrder } from 'app/plugins/panel/alertlist/types';
import { Alert, CombinedRule, FilterState, RulesSource, SilenceFilterState } from 'app/types/unified-alerting';
+import { GrafanaAlertState, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
+
import { ALERTMANAGER_NAME_QUERY_KEY } from './constants';
import { getRulesSourceName } from './datasource';
-import * as ruleId from './rule-id';
-import { SortOrder } from 'app/plugins/panel/alertlist/types';
-import { alertInstanceKey } from 'app/features/alerting/unified/utils/rules';
-import { sortBy } from 'lodash';
-import { GrafanaAlertState, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
import { getMatcherQueryParams } from './matchers';
+import * as ruleId from './rule-id';
export function createViewLink(ruleSource: RulesSource, rule: CombinedRule, returnTo: string): string {
const sourceName = getRulesSourceName(ruleSource);
diff --git a/public/app/features/alerting/unified/utils/mute-timings.ts b/public/app/features/alerting/unified/utils/mute-timings.ts
index c5afe46d326..47e51df4935 100644
--- a/public/app/features/alerting/unified/utils/mute-timings.ts
+++ b/public/app/features/alerting/unified/utils/mute-timings.ts
@@ -1,5 +1,7 @@
-import { MuteTimeInterval, TimeInterval } from 'app/plugins/datasource/alertmanager/types';
import { omitBy, isUndefined } from 'lodash';
+
+import { MuteTimeInterval, TimeInterval } from 'app/plugins/datasource/alertmanager/types';
+
import { MuteTimingFields, MuteTimingIntervalFields } from '../types/mute-timing-form';
export const DAYS_OF_THE_WEEK = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
diff --git a/public/app/features/alerting/unified/utils/query.test.ts b/public/app/features/alerting/unified/utils/query.test.ts
index 185efb26870..5a593a088de 100644
--- a/public/app/features/alerting/unified/utils/query.test.ts
+++ b/public/app/features/alerting/unified/utils/query.test.ts
@@ -1,9 +1,10 @@
import { DataSourceJsonData, PluginMeta } from '@grafana/data';
-import { alertRuleToQueries } from './query';
-import { GRAFANA_RULES_SOURCE_NAME } from './datasource';
+import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
import { CombinedRule } from 'app/types/unified-alerting';
import { GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto';
-import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
+
+import { GRAFANA_RULES_SOURCE_NAME } from './datasource';
+import { alertRuleToQueries } from './query';
describe('alertRuleToQueries', () => {
it('it should convert grafana alert', () => {
diff --git a/public/app/features/alerting/unified/utils/query.ts b/public/app/features/alerting/unified/utils/query.ts
index 835c5f33f24..7fd17d02703 100644
--- a/public/app/features/alerting/unified/utils/query.ts
+++ b/public/app/features/alerting/unified/utils/query.ts
@@ -3,6 +3,7 @@ import { LokiQuery } from 'app/plugins/datasource/loki/types';
import { PromQuery } from 'app/plugins/datasource/prometheus/types';
import { CombinedRule } from 'app/types/unified-alerting';
import { AlertQuery } from 'app/types/unified-alerting-dto';
+
import { isCloudRulesSource, isGrafanaRulesSource } from './datasource';
import { isGrafanaRulerRule } from './rules';
diff --git a/public/app/features/alerting/unified/utils/receiver-form.ts b/public/app/features/alerting/unified/utils/receiver-form.ts
index f4aa3886fa6..7c0c33dc101 100644
--- a/public/app/features/alerting/unified/utils/receiver-form.ts
+++ b/public/app/features/alerting/unified/utils/receiver-form.ts
@@ -1,3 +1,5 @@
+import { isArray } from 'lodash';
+
import {
AlertManagerCortexConfig,
GrafanaManagedReceiverConfig,
@@ -5,7 +7,7 @@ import {
Route,
} from 'app/plugins/datasource/alertmanager/types';
import { CloudNotifierType, NotifierDTO, NotifierType } from 'app/types';
-import { isArray } from 'lodash';
+
import {
CloudChannelConfig,
CloudChannelMap,
diff --git a/public/app/features/alerting/unified/utils/receivers.ts b/public/app/features/alerting/unified/utils/receivers.ts
index fbde0d532ea..c599e45514b 100644
--- a/public/app/features/alerting/unified/utils/receivers.ts
+++ b/public/app/features/alerting/unified/utils/receivers.ts
@@ -1,7 +1,8 @@
+import { capitalize } from 'lodash';
+
import { receiverTypeNames } from 'app/plugins/datasource/alertmanager/consts';
import { GrafanaManagedReceiverConfig, Receiver } from 'app/plugins/datasource/alertmanager/types';
import { NotifierDTO } from 'app/types';
-import { capitalize } from 'lodash';
// extract notifier type name to count map, eg { Slack: 1, Email: 2 }
diff --git a/public/app/features/alerting/unified/utils/redux.ts b/public/app/features/alerting/unified/utils/redux.ts
index 9320077dab7..d1eba541758 100644
--- a/public/app/features/alerting/unified/utils/redux.ts
+++ b/public/app/features/alerting/unified/utils/redux.ts
@@ -1,8 +1,9 @@
import { AsyncThunk, createSlice, Draft, isAsyncThunkAction, PayloadAction, SerializedError } from '@reduxjs/toolkit';
-import { FetchError } from '@grafana/runtime';
-import { AppEvents } from '@grafana/data';
+import { AppEvents } from '@grafana/data';
+import { FetchError } from '@grafana/runtime';
import { appEvents } from 'app/core/core';
+
import { isFetchError } from './alertmanager';
export interface AsyncRequestState {
diff --git a/public/app/features/alerting/unified/utils/rule-form.ts b/public/app/features/alerting/unified/utils/rule-form.ts
index bf9326f252e..e2fe65c394c 100644
--- a/public/app/features/alerting/unified/utils/rule-form.ts
+++ b/public/app/features/alerting/unified/utils/rule-form.ts
@@ -1,39 +1,43 @@
import {
DataQuery,
+ DataSourceRef,
+ getDefaultRelativeTimeRange,
+ IntervalValues,
rangeUtil,
RelativeTimeRange,
ScopedVars,
- getDefaultRelativeTimeRange,
TimeRange,
- IntervalValues,
- DataSourceRef,
} from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';
-import { contextSrv } from 'app/core/services/context_srv';
+import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend';
import { getNextRefIdChar } from 'app/core/utils/query';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
import { ExpressionQuery, ExpressionQueryType } from 'app/features/expressions/types';
import { RuleWithLocation } from 'app/types/unified-alerting';
import {
+ AlertQuery,
Annotations,
GrafanaAlertStateDecision,
- AlertQuery,
Labels,
PostableRuleGrafanaRuleDTO,
RulerRuleDTO,
} from 'app/types/unified-alerting-dto';
+
import { EvalFunction } from '../../state/alertDef';
import { RuleFormType, RuleFormValues } from '../types/rule-form';
+
+import { getRulesAccess } from './access-control';
import { Annotation } from './constants';
import { isGrafanaRulesSource } from './datasource';
import { arrayToRecord, recordToArray } from './misc';
import { isAlertingRulerRule, isGrafanaRulerRule, isRecordingRulerRule } from './rules';
import { parseInterval } from './time';
-import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend';
-export const getDefaultFormValues = (): RuleFormValues =>
- Object.freeze({
+export const getDefaultFormValues = (): RuleFormValues => {
+ const { canCreateGrafanaRules, canCreateCloudRules } = getRulesAccess();
+
+ return Object.freeze({
name: '',
labels: [{ key: '', value: '' }],
annotations: [
@@ -42,7 +46,8 @@ export const getDefaultFormValues = (): RuleFormValues =>
{ key: Annotation.runbookURL, value: '' },
],
dataSourceName: null,
- type: !contextSrv.isEditor ? RuleFormType.grafana : undefined, // viewers can't create prom alerts
+ type: canCreateGrafanaRules ? RuleFormType.grafana : canCreateCloudRules ? RuleFormType.cloudAlerting : undefined, // viewers can't create prom alerts
+ group: '',
// grafana
folder: null,
@@ -54,12 +59,12 @@ export const getDefaultFormValues = (): RuleFormValues =>
evaluateFor: '5m',
// cortex / loki
- group: '',
namespace: '',
expression: '',
forTime: 1,
forTimeUnit: 'm',
});
+};
export function formValuesToRulerRuleDTO(values: RuleFormValues): RulerRuleDTO {
const { name, expression, forTime, forTimeUnit, type } = values;
@@ -115,6 +120,7 @@ export function rulerRuleToFormValues(ruleWithLocation: RuleWithLocation): RuleF
...defaultFormValues,
name: ga.title,
type: RuleFormType.grafana,
+ group: group.name,
evaluateFor: rule.for || '0',
evaluateEvery: group.interval || defaultFormValues.evaluateEvery,
noDataState: ga.no_data_state,
diff --git a/public/app/features/alerting/unified/utils/rule-id.ts b/public/app/features/alerting/unified/utils/rule-id.ts
index 08454d58f12..1b580cb82d6 100644
--- a/public/app/features/alerting/unified/utils/rule-id.ts
+++ b/public/app/features/alerting/unified/utils/rule-id.ts
@@ -1,5 +1,6 @@
import { CombinedRule, Rule, RuleIdentifier, RuleWithLocation } from 'app/types/unified-alerting';
import { Annotations, Labels, RulerRuleDTO } from 'app/types/unified-alerting-dto';
+
import { GRAFANA_RULES_SOURCE_NAME } from './datasource';
import {
isAlertingRule,
diff --git a/public/app/features/alerting/unified/utils/rulerClient.test.ts b/public/app/features/alerting/unified/utils/rulerClient.test.ts
deleted file mode 100644
index ec5771833cf..00000000000
--- a/public/app/features/alerting/unified/utils/rulerClient.test.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { RulerRuleGroupDTO } from 'app/types/unified-alerting-dto';
-import { getUniqueGroupName } from './rulerClient';
-
-describe('getUniqueGroupName', () => {
- it('Should return the original value when there are no duplicates', () => {
- // Arrange
- const originalGroupName = 'file-system-out-of-space';
- const existingGroups: RulerRuleGroupDTO[] = [];
-
- // Act
- const groupName = getUniqueGroupName(originalGroupName, existingGroups);
-
- // Assert
- expect(groupName).toBe(originalGroupName);
- });
-
- it('Should increment suffix counter until a unique name created', () => {
- // Arrange
- const originalGroupName = 'file-system-out-of-space';
- const existingGroups: RulerRuleGroupDTO[] = [
- { name: 'file-system-out-of-space', rules: [] },
- { name: 'file-system-out-of-space-2', rules: [] },
- ];
-
- // Act
- const groupName = getUniqueGroupName(originalGroupName, existingGroups);
-
- // Assert
- expect(groupName).toBe('file-system-out-of-space-3');
- });
-});
diff --git a/public/app/features/alerting/unified/utils/rulerClient.ts b/public/app/features/alerting/unified/utils/rulerClient.ts
index 89eb8e6c286..f8fd8ffab05 100644
--- a/public/app/features/alerting/unified/utils/rulerClient.ts
+++ b/public/app/features/alerting/unified/utils/rulerClient.ts
@@ -1,15 +1,16 @@
import { RuleIdentifier, RulerDataSourceConfig, RuleWithLocation } from 'app/types/unified-alerting';
-import { PostableRulerRuleGroupDTO, RulerGrafanaRuleDTO, RulerRuleGroupDTO } from 'app/types/unified-alerting-dto';
import {
- deleteRulerRulesGroup,
- fetchRulerRulesGroup,
- fetchRulerRulesNamespace,
- fetchRulerRules,
- setRulerRuleGroup,
-} from '../api/ruler';
+ PostableRuleGrafanaRuleDTO,
+ PostableRulerRuleGroupDTO,
+ RulerGrafanaRuleDTO,
+ RulerRuleGroupDTO,
+} from 'app/types/unified-alerting-dto';
+
+import { deleteRulerRulesGroup, fetchRulerRulesGroup, fetchRulerRules, setRulerRuleGroup } from '../api/ruler';
import { RuleFormValues } from '../types/rule-form';
import * as ruleId from '../utils/rule-id';
-import { GRAFANA_RULES_SOURCE_NAME, isGrafanaRulesSource } from './datasource';
+
+import { GRAFANA_RULES_SOURCE_NAME } from './datasource';
import { formValuesToRulerGrafanaRuleDTO, formValuesToRulerRuleDTO } from './rule-form';
import {
isCloudRuleIdentifier,
@@ -25,16 +26,6 @@ export interface RulerClient {
saveGrafanaRule(values: RuleFormValues, existing?: RuleWithLocation): Promise;
}
-export function getUniqueGroupName(currentGroupName: string, existingGroups: RulerRuleGroupDTO[]) {
- let newGroupName = currentGroupName;
- let idx = 1;
- while (!!existingGroups.find((g) => g.name === newGroupName)) {
- newGroupName = `${currentGroupName}-${++idx}`;
- }
-
- return newGroupName;
-}
-
export function getRulerClient(rulerConfig: RulerDataSourceConfig): RulerClient {
const findEditableRule = async (ruleIdentifier: RuleIdentifier): Promise => {
if (isGrafanaRuleIdentifier(ruleIdentifier)) {
@@ -90,13 +81,8 @@ export function getRulerClient(rulerConfig: RulerDataSourceConfig): RulerClient
};
const deleteRule = async (ruleWithLocation: RuleWithLocation): Promise => {
- const { ruleSourceName, namespace, group, rule } = ruleWithLocation;
- // in case of GRAFANA, each group implicitly only has one rule. delete the group.
- if (isGrafanaRulesSource(ruleSourceName)) {
- await deleteRulerRulesGroup(rulerConfig, namespace, group.name);
- return;
- }
- // in case of CLOUD
+ const { namespace, group, rule } = ruleWithLocation;
+
// it was the last rule, delete the entire group
if (group.rules.length === 1) {
await deleteRulerRulesGroup(rulerConfig, namespace, group.name);
@@ -157,65 +143,104 @@ export function getRulerClient(rulerConfig: RulerDataSourceConfig): RulerClient
}
};
- const saveGrafanaRule = async (values: RuleFormValues, existing?: RuleWithLocation): Promise => {
- const { folder, evaluateEvery } = values;
- const formRule = formValuesToRulerGrafanaRuleDTO(values);
-
+ const saveGrafanaRule = async (values: RuleFormValues, existingRule?: RuleWithLocation): Promise => {
+ const { folder, group, evaluateEvery } = values;
if (!folder) {
throw new Error('Folder must be specified');
}
- // updating an existing rule...
- if (existing) {
- // refetch it to be sure we have the latest
- const freshExisting = await findEditableRule(ruleId.fromRuleWithLocation(existing));
- if (!freshExisting) {
- throw new Error('Rule not found.');
- }
+ const newRule = formValuesToRulerGrafanaRuleDTO(values);
+ const namespace = folder.title;
+ const groupSpec = { name: group, interval: evaluateEvery };
- // if same folder, repost the group with updated rule
- if (freshExisting.namespace === folder.title) {
- const uid = (freshExisting.rule as RulerGrafanaRuleDTO).grafana_alert.uid!;
- formRule.grafana_alert.uid = uid;
- await setRulerRuleGroup(rulerConfig, freshExisting.namespace, {
- name: freshExisting.group.name,
- interval: evaluateEvery,
- rules: [formRule],
- });
- return { uid, ruleSourceName: 'grafana' };
- }
+ if (!existingRule) {
+ return addRuleToNamespaceAndGroup(namespace, groupSpec, newRule);
}
- // if creating new rule or folder was changed, create rule in a new group
- const targetFolderGroups = await fetchRulerRulesNamespace(rulerConfig, folder.title);
+ const sameNamespace = existingRule.namespace === namespace;
+ const sameGroup = existingRule.group.name === values.group;
+ const sameLocation = sameNamespace && sameGroup;
- // set group name to rule name, but be super paranoid and check that this group does not already exist
- const groupName = getUniqueGroupName(values.name, targetFolderGroups);
- formRule.grafana_alert.title = groupName;
+ if (sameLocation) {
+ // we're update a rule in the same namespace and group
+ return updateGrafanaRule(existingRule, newRule, evaluateEvery);
+ } else {
+ // we're moving a rule to either a different group or namespace
+ return moveGrafanaRule(namespace, groupSpec, existingRule, newRule);
+ }
+ };
+
+ const addRuleToNamespaceAndGroup = async (
+ namespace: string,
+ group: { name: string; interval: string },
+ newRule: PostableRuleGrafanaRuleDTO
+ ): Promise => {
+ const existingGroup = await fetchRulerRulesGroup(rulerConfig, namespace, group.name);
+ if (!existingGroup) {
+ throw new Error(`No group found with name "${group.name}"`);
+ }
const payload: PostableRulerRuleGroupDTO = {
- name: groupName,
- interval: evaluateEvery,
- rules: [formRule],
+ name: group.name,
+ interval: group.interval,
+ rules: (existingGroup.rules ?? []).concat(newRule as RulerGrafanaRuleDTO),
};
- await setRulerRuleGroup(rulerConfig, folder.title, payload);
- // now refetch this group to get the uid, hah
- const result = await fetchRulerRulesGroup(rulerConfig, folder.title, groupName);
- const newUid = (result?.rules[0] as RulerGrafanaRuleDTO)?.grafana_alert?.uid;
- if (newUid) {
- // if folder has changed, delete the old one
- if (existing) {
- const freshExisting = await findEditableRule(ruleId.fromRuleWithLocation(existing));
- if (freshExisting && freshExisting.namespace !== folder.title) {
- await deleteRule(freshExisting);
- }
- }
+ await setRulerRuleGroup(rulerConfig, namespace, payload);
- return { uid: newUid, ruleSourceName: 'grafana' };
- } else {
- throw new Error('Failed to fetch created rule.');
+ return { uid: '', ruleSourceName: GRAFANA_RULES_SOURCE_NAME };
+ };
+
+ // we can't move the rule in a single atomic operation so we have to
+ // 1. add the rule to the new group
+ // 2. remove the rule from the old one
+ const moveGrafanaRule = async (
+ namespace: string,
+ group: { name: string; interval: string },
+ existingRule: RuleWithLocation,
+ newRule: PostableRuleGrafanaRuleDTO
+ ): Promise => {
+ // add the new rule to the requested namespace and group
+ const identifier = await addRuleToNamespaceAndGroup(namespace, group, newRule);
+
+ // remove the rule from the previous namespace and group
+ await deleteRule({
+ ruleSourceName: existingRule.ruleSourceName,
+ namespace: existingRule.namespace,
+ group: existingRule.group,
+ rule: newRule as RulerGrafanaRuleDTO,
+ });
+
+ return identifier;
+ };
+
+ const updateGrafanaRule = async (
+ existingRule: RuleWithLocation,
+ newRule: PostableRuleGrafanaRuleDTO,
+ interval: string
+ ): Promise => {
+ // type guard to make sure we're working with a Grafana managed rule
+ if (!isGrafanaRulerRule(existingRule.rule)) {
+ throw new Error('The rule is not a Grafana managed rule');
}
+
+ // make sure our updated alert has the same UID as before
+ const uid = existingRule.rule.grafana_alert.uid;
+ newRule.grafana_alert.uid = uid;
+
+ // create the new array of rules we want to send to the group
+ const newRules = existingRule.group.rules
+ .filter((rule): rule is RulerGrafanaRuleDTO => isGrafanaRulerRule(rule))
+ .filter((rule) => rule.grafana_alert.uid !== uid)
+ .concat(newRule as RulerGrafanaRuleDTO);
+
+ await setRulerRuleGroup(rulerConfig, existingRule.namespace, {
+ name: existingRule.group.name,
+ interval: interval,
+ rules: newRules,
+ });
+
+ return { uid: '', ruleSourceName: GRAFANA_RULES_SOURCE_NAME };
};
// Would be nice to somehow align checking of ruler type between different methods
diff --git a/public/app/features/alerting/unified/utils/rules.ts b/public/app/features/alerting/unified/utils/rules.ts
index 1e4b31a31ed..d9457c61831 100644
--- a/public/app/features/alerting/unified/utils/rules.ts
+++ b/public/app/features/alerting/unified/utils/rules.ts
@@ -1,13 +1,6 @@
+import { capitalize } from 'lodash';
+
import { AlertState } from '@grafana/data';
-import {
- GrafanaAlertState,
- PromAlertingRuleState,
- PromRuleType,
- RulerAlertingRuleDTO,
- RulerGrafanaRuleDTO,
- RulerRecordingRuleDTO,
- RulerRuleDTO,
-} from 'app/types/unified-alerting-dto';
import {
Alert,
AlertingRule,
@@ -21,11 +14,21 @@ import {
RuleIdentifier,
RuleNamespace,
} from 'app/types/unified-alerting';
-import { AsyncRequestState } from './redux';
-import { RULER_NOT_SUPPORTED_MSG } from './constants';
-import { capitalize } from 'lodash';
+import {
+ GrafanaAlertState,
+ PromAlertingRuleState,
+ PromRuleType,
+ RulerAlertingRuleDTO,
+ RulerGrafanaRuleDTO,
+ RulerRecordingRuleDTO,
+ RulerRuleDTO,
+} from 'app/types/unified-alerting-dto';
+
import { State } from '../components/StateTag';
+import { RULER_NOT_SUPPORTED_MSG } from './constants';
+import { AsyncRequestState } from './redux';
+
export function isAlertingRule(rule: Rule | undefined): rule is AlertingRule {
return typeof rule === 'object' && rule.type === PromRuleType.Alerting;
}
diff --git a/public/app/features/alerting/unified/utils/time.ts b/public/app/features/alerting/unified/utils/time.ts
index 7d2919bcc27..d6a18f9c634 100644
--- a/public/app/features/alerting/unified/utils/time.ts
+++ b/public/app/features/alerting/unified/utils/time.ts
@@ -1,4 +1,5 @@
import { describeInterval } from '@grafana/data/src/datetime/rangeutil';
+
import { TimeOptions } from '../types/time';
export function parseInterval(value: string): [number, string] {
diff --git a/public/app/features/alerting/unified/utils/timeRange.test.ts b/public/app/features/alerting/unified/utils/timeRange.test.ts
index b3d80a3b2a0..c10535abe45 100644
--- a/public/app/features/alerting/unified/utils/timeRange.test.ts
+++ b/public/app/features/alerting/unified/utils/timeRange.test.ts
@@ -1,9 +1,10 @@
import { ReducerID } from '@grafana/data';
-import { getTimeRangeForExpression } from './timeRange';
-import { defaultCondition } from 'app/features/expressions/utils/expressionTypes';
import { ExpressionQuery, ExpressionQueryType } from 'app/features/expressions/types';
+import { defaultCondition } from 'app/features/expressions/utils/expressionTypes';
import { AlertQuery } from 'app/types/unified-alerting-dto';
+import { getTimeRangeForExpression } from './timeRange';
+
describe('timeRange', () => {
describe('getTimeRangeForExpression', () => {
describe('classic condition', () => {
diff --git a/public/app/features/alerting/unified/utils/timeRange.ts b/public/app/features/alerting/unified/utils/timeRange.ts
index 1e335b4ebcd..10091b2c987 100644
--- a/public/app/features/alerting/unified/utils/timeRange.ts
+++ b/public/app/features/alerting/unified/utils/timeRange.ts
@@ -1,5 +1,6 @@
import { RelativeTimeRange } from '@grafana/data';
import { AlertQuery } from 'app/types/unified-alerting-dto';
+
import { ExpressionQuery, ExpressionQueryType } from '../../../expressions/types';
const FALL_BACK_TIME_RANGE = { from: 21600, to: 0 };
diff --git a/public/app/features/alerting/utils/notificationChannel.test.ts b/public/app/features/alerting/utils/notificationChannel.test.ts
index 1ef704217e0..757c9f3477f 100644
--- a/public/app/features/alerting/utils/notificationChannel.test.ts
+++ b/public/app/features/alerting/utils/notificationChannel.test.ts
@@ -1,6 +1,7 @@
-import { transformSubmitData } from './notificationChannels';
import { NotificationChannelDTO } from '../../../types';
+import { transformSubmitData } from './notificationChannels';
+
const basicFormData: NotificationChannelDTO = {
id: 1,
uid: 'pX7fbbHGk',
diff --git a/public/app/features/alerting/utils/notificationChannels.ts b/public/app/features/alerting/utils/notificationChannels.ts
index 1aa3e36c697..7c9419ba39f 100644
--- a/public/app/features/alerting/utils/notificationChannels.ts
+++ b/public/app/features/alerting/utils/notificationChannels.ts
@@ -1,4 +1,5 @@
import memoizeOne from 'memoize-one';
+
import { SelectableValue } from '@grafana/data';
import { config } from '@grafana/runtime';
import { NotificationChannelDTO, NotificationChannelType } from 'app/types';
diff --git a/public/app/features/annotations/api.ts b/public/app/features/annotations/api.ts
index cdbaab32faf..ebb8e683650 100644
--- a/public/app/features/annotations/api.ts
+++ b/public/app/features/annotations/api.ts
@@ -1,5 +1,6 @@
import { AnnotationEvent } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
+
import { AnnotationTagsResponse } from './types';
export function saveAnnotation(annotation: AnnotationEvent) {
diff --git a/public/app/features/annotations/components/AnnotationResultMapper.tsx b/public/app/features/annotations/components/AnnotationResultMapper.tsx
index 60fa5ad0f5d..4d7de4c4588 100644
--- a/public/app/features/annotations/components/AnnotationResultMapper.tsx
+++ b/public/app/features/annotations/components/AnnotationResultMapper.tsx
@@ -10,9 +10,9 @@ import {
AnnotationEventFieldSource,
getValueFormat,
} from '@grafana/data';
+import { Select, Tooltip, Icon } from '@grafana/ui';
import { annotationEventNames, AnnotationFieldInfo } from '../standardAnnotationSupport';
-import { Select, Tooltip, Icon } from '@grafana/ui';
import { AnnotationQueryResponse } from '../types';
// const valueOptions: Array> = [
diff --git a/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx b/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
index f0937dbdac3..3cf223b504c 100644
--- a/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
+++ b/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
@@ -1,15 +1,17 @@
+import { css, cx } from '@emotion/css';
import React, { PureComponent } from 'react';
import { lastValueFrom } from 'rxjs';
-import { css, cx } from '@emotion/css';
+
import { AnnotationEventMappings, AnnotationQuery, DataQuery, DataSourceApi, LoadingState } from '@grafana/data';
import { Button, Icon, IconName, Spinner } from '@grafana/ui';
-
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import { standardAnnotationSupport } from '../standardAnnotationSupport';
-import { executeAnnotationQuery } from '../executeAnnotationQuery';
import { PanelModel } from 'app/features/dashboard/state';
+
+import { executeAnnotationQuery } from '../executeAnnotationQuery';
+import { standardAnnotationSupport } from '../standardAnnotationSupport';
import { AnnotationQueryResponse } from '../types';
+
import { AnnotationFieldMapper } from './AnnotationResultMapper';
interface Props {
diff --git a/public/app/features/annotations/executeAnnotationQuery.ts b/public/app/features/annotations/executeAnnotationQuery.ts
index 3fe88217ad3..7eab14c8cb5 100644
--- a/public/app/features/annotations/executeAnnotationQuery.ts
+++ b/public/app/features/annotations/executeAnnotationQuery.ts
@@ -1,11 +1,13 @@
import { Observable, of } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
+
import { CoreApp, DataQueryRequest, DataSourceApi, rangeUtil, ScopedVars } from '@grafana/data';
-import { AnnotationQueryOptions, AnnotationQueryResponse } from './types';
-import { standardAnnotationSupport } from './standardAnnotationSupport';
import { runRequest } from '../query/state/runRequest';
+import { standardAnnotationSupport } from './standardAnnotationSupport';
+import { AnnotationQueryOptions, AnnotationQueryResponse } from './types';
+
let counter = 100;
function getNextRequestId() {
return 'AQ' + counter++;
diff --git a/public/app/features/annotations/standardAnnotationSupport.test.ts b/public/app/features/annotations/standardAnnotationSupport.test.ts
index 9af8c457b4e..ac57a692814 100644
--- a/public/app/features/annotations/standardAnnotationSupport.test.ts
+++ b/public/app/features/annotations/standardAnnotationSupport.test.ts
@@ -1,4 +1,5 @@
import { FieldType, toDataFrame } from '@grafana/data';
+
import { getAnnotationsFromData } from './standardAnnotationSupport';
describe('DataFrame to annotations', () => {
diff --git a/public/app/features/annotations/standardAnnotationSupport.ts b/public/app/features/annotations/standardAnnotationSupport.ts
index edc6ac668ca..079a506a94b 100644
--- a/public/app/features/annotations/standardAnnotationSupport.ts
+++ b/public/app/features/annotations/standardAnnotationSupport.ts
@@ -1,5 +1,7 @@
+import { isString } from 'lodash';
import { Observable, of, OperatorFunction } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
+
import {
AnnotationEvent,
AnnotationEventFieldSource,
@@ -14,8 +16,6 @@ import {
standardTransformers,
} from '@grafana/data';
-import { isString } from 'lodash';
-
export const standardAnnotationSupport: AnnotationSupport = {
/**
* Assume the stored value is standard model.
diff --git a/public/app/features/annotations/types.ts b/public/app/features/annotations/types.ts
index 6722de3d49e..c3ee8e6d359 100644
--- a/public/app/features/annotations/types.ts
+++ b/public/app/features/annotations/types.ts
@@ -1,4 +1,5 @@
import { AnnotationEvent, PanelData, TimeRange } from '@grafana/data';
+
import { DashboardModel, PanelModel } from '../dashboard/state';
export interface AnnotationQueryOptions {
diff --git a/public/app/features/api-keys/ApiKeysActionBar.tsx b/public/app/features/api-keys/ApiKeysActionBar.tsx
index ef000521a4e..ef182d1c799 100644
--- a/public/app/features/api-keys/ApiKeysActionBar.tsx
+++ b/public/app/features/api-keys/ApiKeysActionBar.tsx
@@ -1,4 +1,5 @@
import React, { FC } from 'react';
+
import { Button, FilterInput } from '@grafana/ui';
interface Props {
diff --git a/public/app/features/api-keys/ApiKeysAddedModal.test.tsx b/public/app/features/api-keys/ApiKeysAddedModal.test.tsx
index 82a3d7de087..35e0a556e76 100644
--- a/public/app/features/api-keys/ApiKeysAddedModal.test.tsx
+++ b/public/app/features/api-keys/ApiKeysAddedModal.test.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from 'enzyme';
+import React from 'react';
+
import { ApiKeysAddedModal, Props } from './ApiKeysAddedModal';
const setup = (propOverrides?: object) => {
diff --git a/public/app/features/api-keys/ApiKeysAddedModal.tsx b/public/app/features/api-keys/ApiKeysAddedModal.tsx
index b345416b588..26bfe2b8e26 100644
--- a/public/app/features/api-keys/ApiKeysAddedModal.tsx
+++ b/public/app/features/api-keys/ApiKeysAddedModal.tsx
@@ -1,10 +1,12 @@
-import React, { useCallback } from 'react';
-import { css } from '@emotion/css';
-import { Alert, Field, Modal, useStyles2, Input, Icon, ClipboardButton } from '@grafana/ui';
+import { css } from '@emotion/css';
+import React, { useCallback } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, Field, Modal, useStyles2, Input, Icon, ClipboardButton } from '@grafana/ui';
+
import { notifyApp } from '../../core/actions';
-import { dispatch } from '../../store/store';
import { createSuccessNotification } from '../../core/copy/appNotification';
+import { dispatch } from '../../store/store';
export interface Props {
onDismiss: () => void;
diff --git a/public/app/features/api-keys/ApiKeysForm.tsx b/public/app/features/api-keys/ApiKeysForm.tsx
index 9ad93b70f2a..df68660ab41 100644
--- a/public/app/features/api-keys/ApiKeysForm.tsx
+++ b/public/app/features/api-keys/ApiKeysForm.tsx
@@ -1,10 +1,12 @@
import React, { ChangeEvent, FC, FormEvent, useEffect, useState } from 'react';
-import { EventsWithValidation, LegacyForms, ValidationEvents, Button, Select, InlineField } from '@grafana/ui';
-import { NewApiKey, OrgRole } from '../../types';
+
import { rangeUtil, SelectableValue } from '@grafana/data';
-import { SlideDown } from '../../core/components/Animations/SlideDown';
+import { EventsWithValidation, LegacyForms, ValidationEvents, Button, Select, InlineField } from '@grafana/ui';
import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
+import { SlideDown } from '../../core/components/Animations/SlideDown';
+import { NewApiKey, OrgRole } from '../../types';
+
const { Input } = LegacyForms;
const ROLE_OPTIONS: Array> = Object.keys(OrgRole).map((role) => ({
label: role,
@@ -15,6 +17,7 @@ interface Props {
show: boolean;
onClose: () => void;
onKeyAdded: (apiKey: NewApiKey) => void;
+ disabled: boolean;
}
function isValidInterval(value: string): boolean {
@@ -40,7 +43,7 @@ const timeRangeValidationEvents: ValidationEvents = {
const tooltipText =
'The API key life duration. For example, 1d if your key is going to last for one day. Supported units are: s,m,h,d,w,M,y';
-export const ApiKeysForm: FC = ({ show, onClose, onKeyAdded }) => {
+export const ApiKeysForm: FC = ({ show, onClose, onKeyAdded, disabled }) => {
const [name, setName] = useState('');
const [role, setRole] = useState(OrgRole.Viewer);
const [secondsToLive, setSecondsToLive] = useState('');
@@ -102,7 +105,7 @@ export const ApiKeysForm: FC = ({ show, onClose, onKeyAdded }) => {
-
+
- ;
group?: GroupState;
@@ -112,7 +113,6 @@ export class Scene {
this.width = width;
this.height = height;
this.style = { width, height };
- this.root.updateSize(width, height);
if (this.selecto?.getSelectedTargets().length) {
this.clearCurrentSelection();
@@ -157,44 +157,16 @@ export class Scene {
this.save();
}
- toggleAnchor(element: ElementState, k: keyof Anchor) {
- const { div } = element;
- if (!div) {
- console.log('Not ready');
- return;
- }
-
- const w = element.parent?.width ?? 100;
- const h = element.parent?.height ?? 100;
-
- // Get computed position....
- const info = div.getBoundingClientRect(); // getElementInfo(div, element.parent?.div);
- console.log('DIV info', div);
-
- const placement: Placement = {
- top: info.top,
- left: info.left,
- width: info.width,
- height: info.height,
- bottom: h - info.bottom,
- right: w - info.right,
- };
-
- console.log('PPP', placement);
-
- // // TODO: needs to recalculate placement based on absolute values...
- // element.anchor[k] = !Boolean(element.anchor[k]);
- // element.placement = placement;
- // element.validatePlacement();
- // element.revId++;
- // this.revId++;
- // this.save();
-
- this.moved.next(Date.now());
- }
-
- save = () => {
+ save = (updateMoveable = false) => {
this.onSave(this.root.getSaveModel());
+
+ if (updateMoveable) {
+ setTimeout(() => {
+ if (this.div) {
+ this.initMoveable(true);
+ }
+ }, 100);
+ }
};
private findElementByTarget = (target: HTMLElement | SVGElement): ElementState | undefined => {
@@ -262,8 +234,8 @@ export class Scene {
initMoveable = (destroySelecto = false, allowChanges = true) => {
const targetElements = this.generateTargetElements(this.root.elements);
- if (destroySelecto) {
- this.selecto?.destroy();
+ if (destroySelecto && this.selecto) {
+ this.selecto.destroy();
}
this.selecto = new Selecto({
@@ -283,22 +255,20 @@ export class Scene {
.on('drag', (event) => {
const targetedElement = this.findElementByTarget(event.target);
targetedElement!.applyDrag(event);
- this.moved.next(Date.now()); // TODO only on end
})
.on('dragGroup', (e) => {
e.events.forEach((event) => {
const targetedElement = this.findElementByTarget(event.target);
targetedElement!.applyDrag(event);
});
- this.moved.next(Date.now()); // TODO only on end
})
.on('dragEnd', (event) => {
const targetedElement = this.findElementByTarget(event.target);
-
- if (targetedElement && targetedElement.parent) {
- const parent = targetedElement.parent;
- targetedElement.updateSize(parent.width, parent.height);
+ if (targetedElement) {
+ targetedElement?.setPlacementFromConstraint();
}
+
+ this.moved.next(Date.now());
})
.on('resize', (event) => {
const targetedElement = this.findElementByTarget(event.target);
@@ -311,6 +281,13 @@ export class Scene {
targetedElement!.applyResize(event);
});
this.moved.next(Date.now()); // TODO only on end
+ })
+ .on('resizeEnd', (event) => {
+ const targetedElement = this.findElementByTarget(event.target);
+
+ if (targetedElement) {
+ targetedElement?.setPlacementFromConstraint();
+ }
});
let targets: Array = [];
diff --git a/public/app/features/canvas/types.ts b/public/app/features/canvas/types.ts
index 872e149cf6b..54055e1be1f 100644
--- a/public/app/features/canvas/types.ts
+++ b/public/app/features/canvas/types.ts
@@ -10,11 +10,25 @@ export interface Placement {
height?: number;
}
-export interface Anchor {
- top?: boolean;
- left?: boolean;
- right?: boolean;
- bottom?: boolean;
+export interface Constraint {
+ horizontal?: HorizontalConstraint;
+ vertical?: VerticalConstraint;
+}
+
+export enum HorizontalConstraint {
+ Left = 'left',
+ Right = 'right',
+ LeftRight = 'leftright',
+ Center = 'center',
+ Scale = 'scale',
+}
+
+export enum VerticalConstraint {
+ Top = 'top',
+ Bottom = 'bottom',
+ TopBottom = 'topbottom',
+ Center = 'center',
+ Scale = 'scale',
}
export enum BackgroundImageSize {
diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
new file mode 100644
index 00000000000..db0e978be14
--- /dev/null
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -0,0 +1,149 @@
+import { css } from '@emotion/css';
+import {
+ KBarAnimator,
+ KBarPortal,
+ KBarPositioner,
+ KBarResults,
+ KBarSearch,
+ useMatches,
+ Action,
+ VisualState,
+ useRegisterActions,
+ useKBar,
+} from 'kbar';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { reportInteraction, locationService } from '@grafana/runtime';
+import { useStyles2 } from '@grafana/ui';
+import { StoreState } from 'app/types';
+
+import { keybindingSrv } from '../../core/services/keybindingSrv';
+
+import { ResultItem } from './ResultItem';
+import getDashboardNavActions from './actions/dashboard.nav.actions';
+import getGlobalActions from './actions/global.static.actions';
+
+/**
+ * Wrap all the components from KBar here.
+ * @constructor
+ */
+
+export const CommandPalette = () => {
+ const styles = useStyles2(getSearchStyles);
+ const [actions, setActions] = useState([]);
+ const { notHidden, query, showing } = useKBar((state) => ({
+ notHidden: state.visualState !== VisualState.hidden,
+ showing: state.visualState === VisualState.showing,
+ }));
+ const isNotLogin = locationService.getLocation().pathname !== '/login';
+
+ const { navBarTree } = useSelector((state: StoreState) => {
+ return {
+ navBarTree: state.navBarTree,
+ };
+ });
+
+ keybindingSrv.bind('esc', () => {
+ if (notHidden) {
+ query.setVisualState(VisualState.animatingOut);
+ }
+ });
+
+ useEffect(() => {
+ (async () => {
+ if (isNotLogin) {
+ const staticActions = getGlobalActions(navBarTree);
+ const dashAct = await getDashboardNavActions('go/dashboard');
+ setActions([...staticActions, ...dashAct]);
+ }
+ })();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isNotLogin]);
+
+ useEffect(() => {
+ if (showing) {
+ reportInteraction('commandPalette_opened');
+ }
+ }, [showing]);
+
+ useRegisterActions(actions, [actions]);
+
+ return actions.length > 0 ? (
+
+
+
+
+
+
+ ) : null;
+};
+
+const RenderResults = () => {
+ const { results, rootActionId } = useMatches();
+ const styles = useStyles2(getSearchStyles);
+
+ return (
+
+ ) => {
+ const ancestors = React.useMemo(() => {
+ if (!currentRootActionId) {
+ return action.ancestors;
+ }
+
+ const index = action.ancestors.findIndex((ancestor) => ancestor.id === currentRootActionId);
+ // +1 removes the currentRootAction; e.g.
+ // if we are on the "Set theme" parent action,
+ // the UI should not display "Set theme… > Dark"
+ // but rather just "Dark"
+ return action.ancestors.slice(index + 1);
+ }, [action.ancestors, currentRootActionId]);
+
+ const theme = useTheme2();
+ const styles = getResultItemStyles(theme, active);
+
+ return (
+ {
+ const data: Array<{ type: string; title: string; url: string }> = await getBackendSrv().get('/api/search');
+
+ const goToDashboardActions: Action[] = data
+ .filter((item) => item.type === 'dash-db')
+ .map((item) => ({
+ parent: parentId,
+ id: `go/dashboard/${item.url}`,
+ name: `Go to dashboard ${item.title}`,
+ perform: () => {
+ locationService.push(item.url);
+ },
+ }));
+
+ return goToDashboardActions;
+}
+
+export default async (parentId: string) => {
+ const dashboardNav = await getDashboardNav(parentId);
+ return dashboardNav;
+};
diff --git a/public/app/features/commandPalette/actions/global.static.actions.ts b/public/app/features/commandPalette/actions/global.static.actions.ts
new file mode 100644
index 00000000000..ba4e745b039
--- /dev/null
+++ b/public/app/features/commandPalette/actions/global.static.actions.ts
@@ -0,0 +1,153 @@
+import { Action, Priority } from 'kbar';
+
+import { NavModelItem } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+
+export default (navBarTree: NavModelItem[]) => {
+ const globalActions: Action[] = [
+ {
+ id: 'go/search',
+ name: 'Go to dashboard search',
+ keywords: 'navigate',
+ perform: () => locationService.push('?search=open'),
+ section: 'Navigation',
+ shortcut: ['s', 'o'],
+ },
+ {
+ id: 'go/dashboard',
+ name: 'Go to dashboard...',
+ keywords: 'navigate',
+ section: 'Navigation',
+ priority: Priority.NORMAL,
+ },
+ {
+ id: 'preferences/theme',
+ name: 'Change theme...',
+ keywords: 'interface color dark light',
+ section: 'Preferences',
+ },
+ {
+ id: 'preferences/dark-theme',
+ name: 'Dark',
+ keywords: 'dark theme',
+ section: '',
+ perform: () => {
+ locationService.push({ search: '?theme=dark' });
+ location.reload();
+ },
+ parent: 'preferences/theme',
+ },
+ {
+ id: 'preferences/light-theme',
+ name: 'Light',
+ keywords: 'light theme',
+ section: '',
+ perform: () => {
+ locationService.push({ search: '?theme=light' });
+ location.reload();
+ },
+ parent: 'preferences/theme',
+ },
+ ];
+
+ // this maps actions to navbar by URL items for showing/hiding
+ // actions is an array for multiple child actions that would be under one navbar item
+ const navBarActionMap = [
+ {
+ url: '/dashboard/new',
+ actions: [
+ {
+ id: 'management/create-folder',
+ name: 'Create folder',
+ keywords: 'new add',
+ perform: () => locationService.push('/dashboards/folder/new'),
+ section: 'Management',
+ },
+ {
+ id: 'management/create-dashboard',
+ name: 'Create dashboard',
+ keywords: 'new add',
+ perform: () => locationService.push('/dashboard/new'),
+ section: 'Management',
+ },
+ ],
+ },
+ {
+ url: '/',
+ actions: [
+ {
+ id: 'go/home',
+ name: 'Go to home',
+ keywords: 'navigate',
+ perform: () => locationService.push('/'),
+ section: 'Navigation',
+ shortcut: ['g', 'h'],
+ priority: Priority.HIGH,
+ },
+ ],
+ },
+ {
+ url: '/explore',
+ actions: [
+ {
+ id: 'go/explore',
+ name: 'Go to explore',
+ keywords: 'navigate',
+ perform: () => locationService.push('/explore'),
+ section: 'Navigation',
+ priority: Priority.NORMAL,
+ },
+ ],
+ },
+ {
+ url: '/alerting',
+ actions: [
+ {
+ id: 'go/alerting',
+ name: 'Go to alerting',
+ keywords: 'navigate notification',
+ perform: () => locationService.push('/alerting'),
+ section: 'Navigation',
+ priority: Priority.NORMAL,
+ },
+ ],
+ },
+ {
+ url: '/profile',
+ actions: [
+ {
+ id: 'go/profile',
+ name: 'Go to profile',
+ keywords: 'navigate preferences',
+ perform: () => locationService.push('/profile'),
+ section: 'Navigation',
+ shortcut: ['g', 'p'],
+ priority: Priority.LOW,
+ },
+ ],
+ },
+ {
+ url: '/datasources',
+ actions: [
+ {
+ id: 'go/configuration',
+ name: 'Go to data sources configuration',
+ keywords: 'navigate settings ds',
+ perform: () => locationService.push('/datasources'),
+ section: 'Navigation',
+ },
+ ],
+ },
+ ];
+
+ const navBarActions: Action[] = [];
+
+ navBarActionMap.forEach((navBarAction) => {
+ const navBarItem = navBarTree.find((navBarItem) => navBarItem.url === navBarAction.url);
+ if (navBarItem && !navBarItem.hideFromNavbar) {
+ navBarActions.push(...navBarAction.actions);
+ }
+ });
+
+ return [...globalActions, ...navBarActions];
+};
diff --git a/public/app/features/comments/Comment.tsx b/public/app/features/comments/Comment.tsx
index 7f78a65e4b3..6731fe3a656 100644
--- a/public/app/features/comments/Comment.tsx
+++ b/public/app/features/comments/Comment.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import { GrafanaTheme2, renderMarkdown } from '@grafana/data';
import { css } from '@emotion/css';
-import { useStyles2 } from '@grafana/ui';
import DangerouslySetHtmlContent from 'dangerously-set-html-content';
+import React from 'react';
+
+import { GrafanaTheme2, renderMarkdown } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
import { Message } from './types';
diff --git a/public/app/features/comments/CommentManager.tsx b/public/app/features/comments/CommentManager.tsx
index 3c9fce75fdb..c8d987d4885 100644
--- a/public/app/features/comments/CommentManager.tsx
+++ b/public/app/features/comments/CommentManager.tsx
@@ -1,7 +1,8 @@
import React, { PureComponent } from 'react';
+import { Unsubscribable } from 'rxjs';
+
import { isLiveChannelMessageEvent, LiveChannelScope } from '@grafana/data';
import { getBackendSrv, getGrafanaLiveSrv } from '@grafana/runtime';
-import { Unsubscribable } from 'rxjs';
import { CommentView } from './CommentView';
import { Message, MessagePacket } from './types';
diff --git a/public/app/features/comments/CommentView.tsx b/public/app/features/comments/CommentView.tsx
index 630a1621d05..a041050ae1b 100644
--- a/public/app/features/comments/CommentView.tsx
+++ b/public/app/features/comments/CommentView.tsx
@@ -1,5 +1,6 @@
-import React, { FormEvent, useLayoutEffect, useRef, useState } from 'react';
import { css } from '@emotion/css';
+import React, { FormEvent, useLayoutEffect, useRef, useState } from 'react';
+
import { GrafanaTheme2 } from '@grafana/data';
import { CustomScrollbar, TextArea, useStyles2 } from '@grafana/ui';
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx
index 4ce64244bd9..c52534ca3b0 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
-import { AddPanelWidgetUnconnected as AddPanelWidget, Props } from './AddPanelWidget';
+import React from 'react';
+
import { DashboardModel, PanelModel } from '../../state';
+import { AddPanelWidgetUnconnected as AddPanelWidget, Props } from './AddPanelWidget';
+
const getTestContext = (propOverrides?: object) => {
const props: Props = {
dashboard: {} as DashboardModel,
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index a059a67818d..b3cc87dd168 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -1,25 +1,26 @@
-import React, { useMemo, useState } from 'react';
-import { connect, MapDispatchToProps } from 'react-redux';
import { css, cx, keyframes } from '@emotion/css';
import { chain, cloneDeep, defaults, find, sortBy } from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { connect, MapDispatchToProps } from 'react-redux';
import tinycolor from 'tinycolor2';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { locationService, reportInteraction } from '@grafana/runtime';
import { Icon, IconButton, useStyles2 } from '@grafana/ui';
-import { selectors } from '@grafana/e2e-selectors';
-import { GrafanaTheme2 } from '@grafana/data';
-
+import { CardButton } from 'app/core/components/CardButton';
import config from 'app/core/config';
+import { LS_PANEL_COPY_KEY } from 'app/core/constants';
import store from 'app/core/store';
import { addPanel } from 'app/features/dashboard/state/reducers';
-import { DashboardModel, PanelModel } from '../../state';
-import { LS_PANEL_COPY_KEY } from 'app/core/constants';
-import { LibraryElementDTO } from '../../../library-panels/types';
-import { toPanelModelLibraryPanel } from '../../../library-panels/utils';
+
import {
LibraryPanelsSearch,
LibraryPanelsSearchVariant,
} from '../../../library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch';
-import { CardButton } from 'app/core/components/CardButton';
+import { LibraryElementDTO } from '../../../library-panels/types';
+import { toPanelModelLibraryPanel } from '../../../library-panels/utils';
+import { DashboardModel, PanelModel } from '../../state';
export type PanelPluginInfo = { id: any; defaults: { gridPos: { w: any; h: any }; title: any } };
diff --git a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
index 0ef7279c43c..bf04402ccbb 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+
import { AnnotationQuery, DataSourceApi } from '@grafana/data';
import { AngularComponent, getAngularLoader } from '@grafana/runtime';
diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
index 01b9c873d30..9b78743f9d2 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
@@ -1,12 +1,15 @@
import React, { useState } from 'react';
-import { Checkbox, CollapsableSection, ColorValueEditor, Field, HorizontalGroup, Input } from '@grafana/ui';
-import { DashboardModel } from '../../state/DashboardModel';
-import { AnnotationQuery, DataSourceInstanceSettings, getDataSourceRef } from '@grafana/data';
-import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
import { useAsync } from 'react-use';
-import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor';
-import { AngularEditorLoader } from './AngularEditorLoader';
+
+import { AnnotationQuery, DataSourceInstanceSettings, getDataSourceRef } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
+import { Checkbox, CollapsableSection, ColorValueEditor, Field, HorizontalGroup, Input } from '@grafana/ui';
+import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor';
+
+import { DashboardModel } from '../../state/DashboardModel';
+
+import { AngularEditorLoader } from './AngularEditorLoader';
type Props = {
editIdx: number;
diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
index 60fd6d34614..0e59efeb395 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
@@ -1,9 +1,12 @@
import React, { useState } from 'react';
+
+import { arrayUtils } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
import { DeleteButton, Icon, IconButton, VerticalGroup } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+
import { DashboardModel } from '../../state/DashboardModel';
import { ListNewButton } from '../DashboardSettings/ListNewButton';
-import { arrayUtils } from '@grafana/data';
type Props = {
dashboard: DashboardModel;
@@ -26,6 +29,7 @@ export const AnnotationSettingsList: React.FC = ({ dashboard, onNew, onEd
const showEmptyListCTA = annotations.length === 0 || (annotations.length === 1 && annotations[0].builtIn);
+ const dataSourceSrv = getDataSourceSrv();
return (
{annotations.length > 0 && (
@@ -50,7 +54,7 @@ export const AnnotationSettingsList: React.FC = ({ dashboard, onNew, onEd
)}
onEdit(idx)}>
- {annotation.datasource?.uid}
+ {dataSourceSrv.getInstanceSettings(annotation.datasource)?.name || annotation.datasource?.uid}
{idx !== 0 && (
diff --git a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts
index 83482884b08..038812d89c6 100644
--- a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts
+++ b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts
@@ -1,13 +1,16 @@
import { find } from 'lodash';
-import config from 'app/core/config';
-import { DashboardExporter, LibraryElementExport } from './DashboardExporter';
-import { DashboardModel } from '../../state/DashboardModel';
+
import { DataSourceInstanceSettings, DataSourceRef, PanelPluginMeta } from '@grafana/data';
+import config from 'app/core/config';
+
+import { LibraryElementKind } from '../../../library-panels/types';
import { variableAdapters } from '../../../variables/adapters';
import { createConstantVariableAdapter } from '../../../variables/constant/adapter';
-import { createQueryVariableAdapter } from '../../../variables/query/adapter';
import { createDataSourceVariableAdapter } from '../../../variables/datasource/adapter';
-import { LibraryElementKind } from '../../../library-panels/types';
+import { createQueryVariableAdapter } from '../../../variables/query/adapter';
+import { DashboardModel } from '../../state/DashboardModel';
+
+import { DashboardExporter, LibraryElementExport } from './DashboardExporter';
jest.mock('app/core/store', () => {
return {
@@ -276,6 +279,10 @@ describe('given dashboard with repeated panels', () => {
},
],
},
+ {
+ id: 5,
+ targets: [{ scenarioId: 'random_walk', refId: 'A' }],
+ },
],
};
@@ -312,6 +319,23 @@ describe('given dashboard with repeated panels', () => {
expect(panel.datasource.uid).toBe('${DS_GFDB}');
});
+ it('should explicitly specify default datasources', () => {
+ const panel = exported.panels[7];
+ expect(exported.__inputs.some((ds: Record) => ds.name === 'DS_GFDB')).toBeTruthy();
+ expect(panel.datasource.uid).toBe('${DS_GFDB}');
+ expect(panel.targets[0].datasource).toBe('${DS_GFDB}');
+ });
+
+ it('should not include default datasource in __inputs unnecessarily', async () => {
+ const testJson: any = {
+ panels: [{ id: 1, datasource: { uid: 'other', type: 'other' }, type: 'graph' }],
+ };
+ const testDash = new DashboardModel(testJson);
+ const exporter = new DashboardExporter();
+ const exportedJson: any = await exporter.makeExportable(testDash);
+ expect(exportedJson.__inputs.some((ds: Record) => ds.name === 'DS_GFDB')).toBeFalsy();
+ });
+
it('should replace datasource refs in collapsed row', () => {
const panel = exported.panels[6].panels[0];
expect(panel.datasource.uid).toBe('${DS_GFDB}');
@@ -453,7 +477,7 @@ stubs['other2'] = {
meta: { id: 'other2', info: { version: '1.2.1' }, name: 'OtherDB_2' },
};
-stubs['-- Mixed --'] = {
+stubs['mixed'] = {
name: 'mixed',
meta: {
id: 'mixed',
@@ -463,7 +487,7 @@ stubs['-- Mixed --'] = {
},
};
-stubs['-- Grafana --'] = {
+stubs['grafana'] = {
name: '-- Grafana --',
meta: {
id: 'grafana',
diff --git a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts
index 3e7886e4c1c..6fea11bd39f 100644
--- a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts
+++ b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts
@@ -1,14 +1,15 @@
import { defaults, each, sortBy } from 'lodash';
-import config from 'app/core/config';
-import { DashboardModel } from '../../state/DashboardModel';
-import { PanelModel } from 'app/features/dashboard/state';
import { PanelPluginMeta } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';
-import { VariableOption, VariableRefresh } from '../../../variables/types';
-import { isConstant, isQuery } from '../../../variables/guard';
-import { LibraryElementKind } from '../../../library-panels/types';
+import config from 'app/core/config';
+import { PanelModel } from 'app/features/dashboard/state';
+
import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
+import { LibraryElementKind } from '../../../library-panels/types';
+import { isConstant, isQuery } from '../../../variables/guard';
+import { VariableOption, VariableRefresh } from '../../../variables/types';
+import { DashboardModel } from '../../state/DashboardModel';
interface Input {
name: string;
@@ -126,15 +127,18 @@ export class DashboardExporter {
};
const processPanel = (panel: PanelModel) => {
- if (panel.datasource !== undefined && panel.datasource !== null) {
+ const isRegularPanel =
+ (panel.repeatPanelId === undefined || panel.repeatPanelId === null) &&
+ !('collapsed' in panel) &&
+ !('panels' in panel);
+
+ if (isRegularPanel) {
templateizeDatasourceUsage(panel);
}
if (panel.targets) {
for (const target of panel.targets) {
- if (target.datasource !== undefined) {
- templateizeDatasourceUsage(target);
- }
+ templateizeDatasourceUsage(target);
}
}
diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx
index 084e52ed1b3..558f9dacd2a 100644
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@@ -1,26 +1,24 @@
-// Libaries
import React, { FC, ReactNode } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { useLocation } from 'react-router-dom';
-// Utils & Services
+
+import { locationUtil, textUtil } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+import { ButtonGroup, ModalsController, ToolbarButton, PageToolbar, useForceUpdate } from '@grafana/ui';
+import config from 'app/core/config';
+import { toggleKioskMode } from 'app/core/navigation/kiosk';
+import { DashboardCommentsModal } from 'app/features/dashboard/components/DashboardComments/DashboardCommentsModal';
+import { SaveDashboardProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardProxy';
+import { ShareModal } from 'app/features/dashboard/components/ShareModal';
import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
-// Components
+import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
+import { KioskMode } from 'app/types';
+
+import { getDashboardSrv } from '../../services/DashboardSrv';
+import { DashboardModel } from '../../state';
+
import { DashNavButton } from './DashNavButton';
import { DashNavTimeControls } from './DashNavTimeControls';
-import { ButtonGroup, ModalsController, ToolbarButton, PageToolbar, useForceUpdate } from '@grafana/ui';
-import { locationUtil, textUtil } from '@grafana/data';
-// State
-import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
-// Types
-import { DashboardModel } from '../../state';
-import { KioskMode } from 'app/types';
-import { ShareModal } from 'app/features/dashboard/components/ShareModal';
-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';
-import { getDashboardSrv } from '../../services/DashboardSrv';
-import config from 'app/core/config';
const mapDispatchToProps = {
updateTimeZoneForSession,
diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
index 5f8e3e6a2d8..48db37402ca 100644
--- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
@@ -1,9 +1,10 @@
// Libraries
-import React, { FunctionComponent, MouseEvent } from 'react';
import { css } from '@emotion/css';
+import React, { FunctionComponent, MouseEvent } from 'react';
+
// Components
-import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
+import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
interface Props {
icon?: IconName;
diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx
index 29593cac102..b855f9633bb 100644
--- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { render } from '@testing-library/react';
-import { DashNavTimeControls } from './DashNavTimeControls';
-import { DashboardModel } from '../../state/DashboardModel';
+import React from 'react';
+
import { getDashboardModel } from '../../../../../test/helpers/getDashboardModel';
+import { DashboardModel } from '../../state/DashboardModel';
+
+import { DashNavTimeControls } from './DashNavTimeControls';
describe('DashNavTimeControls', () => {
let dashboardModel: DashboardModel;
diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
index 640efa92c3a..d3f3c29a3cb 100644
--- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
@@ -1,20 +1,15 @@
-// Libraries
import React, { Component } from 'react';
+import { Unsubscribable } from 'rxjs';
+
import { dateMath, TimeRange, TimeZone } from '@grafana/data';
import { TimeRangeUpdatedEvent } from '@grafana/runtime';
-
-// Types
-import { DashboardModel } from '../../state';
-
-// Components
import { defaultIntervals, RefreshPicker, ToolbarButtonRow } from '@grafana/ui';
import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
-
-// Utils & Services
-import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
import { appEvents } from 'app/core/core';
+import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
+
import { ShiftTimeEvent, ShiftTimeEventDirection, ZoomOutEvent } from '../../../../types/events';
-import { Unsubscribable } from 'rxjs';
+import { DashboardModel } from '../../state';
export interface Props {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/DashboardComments/DashboardCommentsModal.tsx b/public/app/features/dashboard/components/DashboardComments/DashboardCommentsModal.tsx
index 5f77608749c..fff48e1b531 100644
--- a/public/app/features/dashboard/components/DashboardComments/DashboardCommentsModal.tsx
+++ b/public/app/features/dashboard/components/DashboardComments/DashboardCommentsModal.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
import { css } from '@emotion/css';
-import { Modal, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
+import React from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Modal, useStyles2 } from '@grafana/ui';
import { CommentManager } from 'app/features/comments/CommentManager';
+
import { DashboardModel } from '../../state/DashboardModel';
type Props = {
diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
index 4da79364423..ab6bb41f072 100644
--- a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
import { css } from '@emotion/css';
-import { Alert, useStyles } from '@grafana/ui';
+import React from 'react';
+
import { GrafanaTheme } from '@grafana/data';
-import { DashboardInitError, AppNotificationSeverity } from 'app/types';
+import { Alert, useStyles } from '@grafana/ui';
import { getMessageFromError } from 'app/core/utils/errors';
+import { DashboardInitError, AppNotificationSeverity } from 'app/types';
export interface Props {
initError?: DashboardInitError;
diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
index 97ee5b5d417..0ab5f58f308 100644
--- a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
import { css, keyframes } from '@emotion/css';
-import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui';
-import { locationService } from '@grafana/runtime';
+import React from 'react';
+
import { GrafanaTheme } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui';
import { DashboardInitPhase } from 'app/types';
export interface Props {
diff --git a/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx b/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx
index b43fdf49642..989786dec44 100644
--- a/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx
+++ b/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx
@@ -1,8 +1,10 @@
import React from 'react';
-import { contextSrv } from 'app/core/core';
-import { DashboardModel } from '../../state';
-import { AccessControlAction } from 'app/types';
+
import { Permissions } from 'app/core/components/AccessControl';
+import { contextSrv } from 'app/core/core';
+import { AccessControlAction } from 'app/types';
+
+import { DashboardModel } from '../../state';
interface Props {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
index 9d9488f5758..b417791bbb4 100644
--- a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
+++ b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
@@ -1,20 +1,22 @@
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
+
import { Tooltip, Icon, Button } from '@grafana/ui';
import { SlideDown } from 'app/core/components/Animations/SlideDown';
+import AddPermission from 'app/core/components/PermissionList/AddPermission';
+import PermissionList from 'app/core/components/PermissionList/PermissionList';
+import PermissionsInfo from 'app/core/components/PermissionList/PermissionsInfo';
import { StoreState } from 'app/types';
import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
+
+import { checkFolderPermissions } from '../../../folders/state/actions';
+import { DashboardModel } from '../../state/DashboardModel';
import {
getDashboardPermissions,
addDashboardPermission,
removeDashboardPermission,
updateDashboardPermission,
} from '../../state/actions';
-import { checkFolderPermissions } from '../../../folders/state/actions';
-import { DashboardModel } from '../../state/DashboardModel';
-import PermissionList from 'app/core/components/PermissionList/PermissionList';
-import AddPermission from 'app/core/components/PermissionList/AddPermission';
-import PermissionsInfo from 'app/core/components/PermissionList/PermissionsInfo';
const mapStateToProps = (state: StoreState) => ({
permissions: state.dashboard.permissions,
diff --git a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx
index 6622d81152c..fc19f772d4f 100644
--- a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx
+++ b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx
@@ -1,6 +1,7 @@
+import { setContextSrv } from '../../../../core/services/context_srv';
import { DashboardModel } from '../../state/DashboardModel';
import { PanelModel } from '../../state/PanelModel';
-import { setContextSrv } from '../../../../core/services/context_srv';
+
import { hasChanges, ignoreChanges } from './DashboardPrompt';
function getDefaultDashboardModel(): DashboardModel {
diff --git a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx
index b6823e765e3..f694e245afe 100644
--- a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx
+++ b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx
@@ -1,19 +1,21 @@
-import { locationService } from '@grafana/runtime';
-import { contextSrv } from 'app/core/services/context_srv';
-import React, { useContext, useEffect, useState } from 'react';
-import { Prompt } from 'react-router-dom';
-import { DashboardModel } from '../../state/DashboardModel';
-import { each, filter, find } from 'lodash';
-import { UnsavedChangesModal } from '../SaveDashboard/UnsavedChangesModal';
import * as H from 'history';
-import { SaveLibraryPanelModal } from 'app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal';
-import { PanelModelWithLibraryPanel } from 'app/features/library-panels/types';
+import { each, filter, find } from 'lodash';
+import React, { useContext, useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
-import { discardPanelChanges, exitPanelEditor } from '../PanelEditor/state/actions';
+import { Prompt } from 'react-router-dom';
+
+import { locationService } from '@grafana/runtime';
import { ModalsContext } from '@grafana/ui';
import { appEvents } from 'app/core/app_events';
+import { contextSrv } from 'app/core/services/context_srv';
+import { SaveLibraryPanelModal } from 'app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal';
+import { PanelModelWithLibraryPanel } from 'app/features/library-panels/types';
import { DashboardSavedEvent } from 'app/types/events';
+import { DashboardModel } from '../../state/DashboardModel';
+import { discardPanelChanges, exitPanelEditor } from '../PanelEditor/state/actions';
+import { UnsavedChangesModal } from '../SaveDashboard/UnsavedChangesModal';
+
export interface Props {
dashboard: DashboardModel;
}
diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
index 9da5aa3b5b7..e35d6d1487e 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { mount } from 'enzyme';
-import { DashboardRow } from './DashboardRow';
+import React from 'react';
+
import { PanelModel } from '../../state/PanelModel';
+import { DashboardRow } from './DashboardRow';
+
describe('DashboardRow', () => {
let wrapper: any, panel: PanelModel, dashboardMock: any;
diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
index 6848ba1b13e..c2fbc41dbd1 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
import classNames from 'classnames';
-import { Icon } from '@grafana/ui';
-import { PanelModel } from '../../state/PanelModel';
-import { DashboardModel } from '../../state/DashboardModel';
-import appEvents from 'app/core/app_events';
-import { RowOptionsButton } from '../RowOptions/RowOptionsButton';
-import { getTemplateSrv, RefreshEvent } from '@grafana/runtime';
-import { ShowConfirmModalEvent } from '../../../../types/events';
+import React from 'react';
import { Unsubscribable } from 'rxjs';
+
import { selectors } from '@grafana/e2e-selectors';
+import { getTemplateSrv, RefreshEvent } from '@grafana/runtime';
+import { Icon } from '@grafana/ui';
+import appEvents from 'app/core/app_events';
+
+import { ShowConfirmModalEvent } from '../../../../types/events';
+import { DashboardModel } from '../../state/DashboardModel';
+import { PanelModel } from '../../state/PanelModel';
+import { RowOptionsButton } from '../RowOptions/RowOptionsButton';
export interface DashboardRowProps {
panel: PanelModel;
diff --git a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx
index 07c3d3d2b76..b838b8dd479 100644
--- a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
import { within } from '@testing-library/dom';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import React from 'react';
+
import { selectors } from '@grafana/e2e-selectors';
import { setAngularLoader, setDataSourceSrv } from '@grafana/runtime';
-import { AnnotationsSettings } from './AnnotationsSettings';
import { mockDataSource, MockDataSourceSrv } from 'app/features/alerting/unified/mocks';
+import { AnnotationsSettings } from './AnnotationsSettings';
+
describe('AnnotationsSettings', () => {
let dashboard: any;
@@ -15,7 +16,7 @@ describe('AnnotationsSettings', () => {
grafana: mockDataSource(
{
name: 'Grafana',
- uid: 'Grafana',
+ uid: 'uid1',
type: 'grafana',
isDefault: true,
},
@@ -24,7 +25,7 @@ describe('AnnotationsSettings', () => {
Testdata: mockDataSource(
{
name: 'Testdata',
- uid: 'Testdata',
+ uid: 'uid2',
type: 'testdata',
isDefault: true,
},
@@ -33,7 +34,7 @@ describe('AnnotationsSettings', () => {
Prometheus: mockDataSource(
{
name: 'Prometheus',
- uid: 'Prometheus',
+ uid: 'uid3',
type: 'prometheus',
},
{ annotations: true }
@@ -63,7 +64,7 @@ describe('AnnotationsSettings', () => {
list: [
{
builtIn: 1,
- datasource: { uid: 'Grafana', type: 'grafana' },
+ datasource: { uid: 'uid1', type: 'grafana' },
enable: true,
hide: true,
iconColor: 'rgba(0, 211, 255, 1)',
@@ -76,7 +77,7 @@ describe('AnnotationsSettings', () => {
};
});
- test('it renders a header and cta if no annotations or only builtIn annotation', () => {
+ test('it renders a header and cta if no annotations or only builtIn annotation', async () => {
render() => {
const defaults: Props = {
refreshIntervals: ['1s', '5s', '10s'],
@@ -49,11 +51,11 @@ describe('AutoRefreshIntervals', () => {
});
describe('when input loses focus and intervals are valid', () => {
- it('then onRefreshIntervalChange should be called', () => {
+ it('then onRefreshIntervalChange should be called', async () => {
const { props } = setupTestContext({ validateIntervalsFunc: () => null });
- userEvent.type(screen.getByRole('textbox'), ',30s');
- userEvent.tab();
+ await userEvent.type(screen.getByRole('textbox'), ',30s');
+ await userEvent.tab();
expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30s');
expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(1);
@@ -62,11 +64,11 @@ describe('AutoRefreshIntervals', () => {
});
describe('when input loses focus and intervals are invalid', () => {
- it('then onRefreshIntervalChange should not be called', () => {
+ it('then onRefreshIntervalChange should not be called', async () => {
const { props } = setupTestContext({ validateIntervalsFunc: () => 'Not valid' });
- userEvent.type(screen.getByRole('textbox'), ',30q');
- userEvent.tab();
+ await userEvent.type(screen.getByRole('textbox'), ',30q');
+ await userEvent.tab();
expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30q');
expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(0);
@@ -74,14 +76,14 @@ describe('AutoRefreshIntervals', () => {
});
describe('when input loses focus and previous intervals were invalid', () => {
- it('then onRefreshIntervalChange should be called', () => {
+ it('then onRefreshIntervalChange should be called', async () => {
const validateIntervalsFunc = jest.fn().mockReturnValueOnce('Not valid').mockReturnValue(null);
const { props } = setupTestContext({ validateIntervalsFunc });
- userEvent.type(screen.getByRole('textbox'), ',30q');
- userEvent.tab();
- userEvent.type(screen.getByRole('textbox'), '{backspace}s');
- userEvent.tab();
+ await userEvent.type(screen.getByRole('textbox'), ',30q');
+ await userEvent.tab();
+ await userEvent.type(screen.getByRole('textbox'), '{backspace}s');
+ await userEvent.tab();
expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30s');
expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(1);
diff --git a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
index 5554971c657..fa9ec12888b 100644
--- a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
@@ -1,4 +1,5 @@
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+
import { Input, defaultIntervals, Field } from '@grafana/ui';
import { getTimeSrv } from '../../services/TimeSrv';
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 1a0acb63656..886716a6af1 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -1,25 +1,28 @@
+import { css, cx } from '@emotion/css';
+import { useDialog } from '@react-aria/dialog';
+import { FocusScope } from '@react-aria/focus';
+import { useOverlay } from '@react-aria/overlays';
import React, { useCallback, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom';
-import { FocusScope } from '@react-aria/focus';
-import { useDialog } from '@react-aria/dialog';
-import { useOverlay } from '@react-aria/overlays';
-import { css, cx } from '@emotion/css';
+
+import { GrafanaTheme2, locationUtil } from '@grafana/data';
+import { locationService, reportInteraction } from '@grafana/runtime';
import { Button, CustomScrollbar, Icon, IconName, PageToolbar, stylesFactory, useForceUpdate } from '@grafana/ui';
import config from 'app/core/config';
import { contextSrv } from 'app/core/services/context_srv';
-import { DashboardModel } from '../../state/DashboardModel';
-import { SaveDashboardAsButton, SaveDashboardButton } from '../SaveDashboard/SaveDashboardButton';
+import { AccessControlAction } from 'app/types';
+
import { VariableEditorContainer } from '../../../variables/editor/VariableEditorContainer';
-import { DashboardPermissions } from '../DashboardPermissions/DashboardPermissions';
+import { DashboardModel } from '../../state/DashboardModel';
import { AccessControlDashboardPermissions } from '../DashboardPermissions/AccessControlDashboardPermissions';
-import { GeneralSettings } from './GeneralSettings';
+import { DashboardPermissions } from '../DashboardPermissions/DashboardPermissions';
+import { SaveDashboardAsButton, SaveDashboardButton } from '../SaveDashboard/SaveDashboardButton';
+
import { AnnotationsSettings } from './AnnotationsSettings';
+import { GeneralSettings } from './GeneralSettings';
+import { JsonEditorSettings } from './JsonEditorSettings';
import { LinksSettings } from './LinksSettings';
import { VersionsSettings } from './VersionsSettings';
-import { JsonEditorSettings } from './JsonEditorSettings';
-import { GrafanaTheme2, locationUtil } from '@grafana/data';
-import { locationService, reportInteraction } from '@grafana/runtime';
-import { AccessControlAction } from 'app/types';
export interface Props {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettingsHeader.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettingsHeader.tsx
index e17ee1daa3c..4e1485f9239 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettingsHeader.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettingsHeader.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+
import { Icon, HorizontalGroup } from '@grafana/ui';
type Props = {
diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx
index dbec19a2961..c7f17b17dc0 100644
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { byRole } from 'testing-library-selector';
+
+import { selectors } from '@grafana/e2e-selectors';
import { selectOptionInTest } from '@grafana/ui';
-import { byRole } from 'testing-library-selector';
-import { GeneralSettingsUnconnected as GeneralSettings, Props } from './GeneralSettings';
import { DashboardModel } from '../../state';
-import { selectors } from '@grafana/e2e-selectors';
+
+import { GeneralSettingsUnconnected as GeneralSettings, Props } from './GeneralSettings';
const setupTestContext = (options: Partial) => {
const defaults: Props = {
@@ -48,9 +50,9 @@ describe('General Settings', () => {
describe('when timezone is changed', () => {
it('should call update function', async () => {
const { props } = setupTestContext({});
- userEvent.click(screen.getByTestId(selectors.components.TimeZonePicker.containerV2));
+ await userEvent.click(screen.getByTestId(selectors.components.TimeZonePicker.containerV2));
const timeZonePicker = screen.getByTestId(selectors.components.TimeZonePicker.containerV2);
- userEvent.click(byRole('combobox').get(timeZonePicker));
+ await userEvent.click(byRole('combobox').get(timeZonePicker));
await selectOptionInTest(timeZonePicker, 'Browser Time');
expect(props.updateTimeZone).toHaveBeenCalledWith('browser');
expect(props.dashboard.timezone).toBe('browser');
diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
index 9b2d3e77c8f..1ddfc1a4cef 100644
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
@@ -1,16 +1,18 @@
import React, { useState } from 'react';
import { connect, ConnectedProps } from 'react-redux';
+
import { TimeZone } from '@grafana/data';
-import { CollapsableSection, Field, Input, RadioButtonGroup, TagsInput } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
+import { config } from '@grafana/runtime';
+import { CollapsableSection, Field, Input, RadioButtonGroup, TagsInput } from '@grafana/ui';
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
+import { updateTimeZoneDashboard, updateWeekStartDashboard } from 'app/features/dashboard/state/actions';
+
import { DashboardModel } from '../../state/DashboardModel';
import { DeleteDashboardButton } from '../DeleteDashboard/DeleteDashboardButton';
-import { TimePickerSettings } from './TimePickerSettings';
-import { updateTimeZoneDashboard, updateWeekStartDashboard } from 'app/features/dashboard/state/actions';
import { PreviewSettings } from './PreviewSettings';
-import { config } from '@grafana/runtime';
+import { TimePickerSettings } from './TimePickerSettings';
interface OwnProps {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
index e5da865a634..55e9317942e 100644
--- a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
import { css } from '@emotion/css';
+import React, { useState } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
+
+import { GrafanaTheme2 } from '@grafana/data';
import { Button, CodeEditor, HorizontalGroup, useStyles2 } from '@grafana/ui';
import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
+
import { getDashboardSrv } from '../../services/DashboardSrv';
import { DashboardModel } from '../../state/DashboardModel';
-import { GrafanaTheme2 } from '@grafana/data';
interface Props {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx
index a2646974940..f0156b67067 100644
--- a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
import { within } from '@testing-library/dom';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import React from 'react';
+
import { selectors } from '@grafana/e2e-selectors';
import { LinksSettings } from './LinksSettings';
@@ -84,7 +84,7 @@ describe('LinksSettings', () => {
).not.toBeInTheDocument();
});
- test('it rearranges the order of dashboard links', () => {
+ test('it rearranges the order of dashboard links', async () => {
// @ts-ignore
render( {}
diff --git a/public/app/features/dashboard/components/DashboardSettings/PreviewSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/PreviewSettings.tsx
index 0e7202b0a74..407c2f96783 100644
--- a/public/app/features/dashboard/components/DashboardSettings/PreviewSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/PreviewSettings.tsx
@@ -1,7 +1,8 @@
import React, { PureComponent } from 'react';
+
import { Button, CollapsableSection, FileUpload } from '@grafana/ui';
-import { getThumbnailURL } from 'app/features/search/components/SearchCard';
import { getBackendSrv } from 'app/core/services/backend_srv';
+import { getThumbnailURL } from 'app/features/search/components/SearchCard';
interface Props {
uid: string;
diff --git a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
index d4374ca35eb..e52c92cd2e3 100644
--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
@@ -1,8 +1,10 @@
-import React, { PureComponent } from 'react';
-import { CollapsableSection, Field, Input, Switch, TimeZonePicker, WeekStartPicker } from '@grafana/ui';
-import { rangeUtil, TimeZone } from '@grafana/data';
import { isEmpty } from 'lodash';
+import React, { PureComponent } from 'react';
+
+import { rangeUtil, TimeZone } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { CollapsableSection, Field, Input, Switch, TimeZonePicker, WeekStartPicker } from '@grafana/ui';
+
import { AutoRefreshIntervals } from './AutoRefreshIntervals';
interface Props {
diff --git a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx
index 00788bbe65d..75baf12aa16 100644
--- a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen, waitFor } from '@testing-library/react';
import { within } from '@testing-library/dom';
+import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
+import React from 'react';
+
import { historySrv } from '../VersionHistory/HistorySrv';
+
import { VersionsSettings, VERSIONS_FETCH_LIMIT } from './VersionsSettings';
import { versions, diffs } from './__mocks__/versions';
@@ -28,8 +30,18 @@ describe('VersionSettings', () => {
getRelativeTime: jest.fn(() => 'time ago'),
};
+ let user: UserEvent;
+
beforeEach(() => {
+ // Need to use delay: null here to work with fakeTimers
+ // see https://github.com/testing-library/user-event/issues/833
+ user = userEvent.setup({ delay: null });
jest.resetAllMocks();
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
});
test('renders a header and a loading indicator followed by results in a table', async () => {
@@ -102,7 +114,9 @@ describe('VersionSettings', () => {
historySrv.getHistoryList
// @ts-ignore
.mockImplementationOnce(() => Promise.resolve(versions.slice(0, VERSIONS_FETCH_LIMIT)))
- .mockImplementationOnce(() => Promise.resolve(versions.slice(VERSIONS_FETCH_LIMIT, versions.length)));
+ .mockImplementationOnce(
+ () => new Promise((resolve) => setTimeout(() => resolve(versions.slice(VERSIONS_FETCH_LIMIT)), 1000))
+ );
render( = ({
plugin,
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index 4c57d945ef4..8cfa6969013 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -1,13 +1,15 @@
-import React, { FC, ReactNode, useCallback, useEffect, useState, useRef } from 'react';
import { css, cx } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
-import { Counter, useStyles2 } from '@grafana/ui';
-import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
+import React, { FC, ReactNode, useCallback, useEffect, useState, useRef } from 'react';
import { useLocalStorage } from 'react-use';
+
+import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { Counter, useStyles2 } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { CollapseToggle } from 'app/features/alerting/unified/components/CollapseToggle';
+import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
+
export interface OptionsPaneCategoryProps {
id: string;
title?: string;
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
index 5715aec6c47..ef887c9256e 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+
import { OptionsPaneCategory } from './OptionsPaneCategory';
import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
index a8f2ef53233..97906d5d2bb 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -1,7 +1,10 @@
+import React, { ReactNode } from 'react';
+// @ts-ignore
+import Highlighter from 'react-highlight-words';
+
import { selectors } from '@grafana/e2e-selectors';
import { Field, Label } from '@grafana/ui';
-import React, { ReactNode } from 'react';
-import Highlighter from 'react-highlight-words';
+
import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
import { OptionsPaneItemOverrides } from './OptionsPaneItemOverrides';
import { OptionPaneItemOverrideInfo } from './types';
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx
index 7e086908788..769029e32f0 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import { Tooltip, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
import { css, CSSObject } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Tooltip, useStyles2 } from '@grafana/ui';
+
import { OptionPaneItemOverrideInfo } from './types';
export interface Props {
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx
index f7f3e910936..c539c11acc3 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx
@@ -1,5 +1,8 @@
-import React from 'react';
import { fireEvent, render, screen, within } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+
import {
FieldConfigSource,
FieldType,
@@ -9,15 +12,14 @@ import {
standardFieldConfigEditorRegistry,
toDataFrame,
} from '@grafana/data';
-
import { selectors } from '@grafana/e2e-selectors';
-import { OptionsPaneOptions } from './OptionsPaneOptions';
-import { DashboardModel, PanelModel } from '../../state';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
-import { dataOverrideTooltipDescription, overrideRuleTooltipDescription } from './state/getOptionOverrides';
import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry';
+import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
+
+import { DashboardModel, PanelModel } from '../../state';
+
+import { OptionsPaneOptions } from './OptionsPaneOptions';
+import { dataOverrideTooltipDescription, overrideRuleTooltipDescription } from './state/getOptionOverrides';
standardEditorsRegistry.setInit(getAllOptionEditors);
standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs);
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index 203c2095fc2..ac0bb0579fe 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
@@ -1,17 +1,20 @@
+import { css } from '@emotion/css';
import React, { useMemo, useState } from 'react';
+
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { CustomScrollbar, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+
+import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
+
+import { AngularPanelOptions } from './AngularPanelOptions';
+import { OptionsPaneCategory } from './OptionsPaneCategory';
+import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
+import { getFieldOverrideCategories } from './getFieldOverrideElements';
+import { getLibraryPanelOptionsCategory } from './getLibraryPanelOptions';
import { getPanelFrameCategory } from './getPanelFrameOptions';
import { getVisualizationOptions } from './getVisualizationOptions';
-import { css } from '@emotion/css';
-import { OptionsPaneCategory } from './OptionsPaneCategory';
-import { getFieldOverrideCategories } from './getFieldOverrideElements';
-import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
import { OptionSearchEngine } from './state/OptionSearchEngine';
-import { AngularPanelOptions } from './AngularPanelOptions';
import { getRecentOptions } from './state/getRecentOptions';
-import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
-import { getLibraryPanelOptionsCategory } from './getLibraryPanelOptions';
import { OptionPaneRenderProps } from './types';
export const OptionsPaneOptions: React.FC = (props) => {
diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
index 3fef9023966..961868cedf6 100644
--- a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
@@ -1,8 +1,9 @@
+import { css } from '@emotion/css';
import React, { FC } from 'react';
+
import { FieldConfigOptionsRegistry, GrafanaTheme, ConfigOverrideRule } from '@grafana/data';
import { HorizontalGroup, Icon, IconButton, useStyles } from '@grafana/ui';
import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';
-import { css } from '@emotion/css';
interface OverrideCategoryTitleProps {
isExpanded: boolean;
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index 51d91021993..59c92814742 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -1,11 +1,12 @@
+import { css } from '@emotion/css';
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
-import { css } from '@emotion/css';
import { Subscription } from 'rxjs';
import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { locationService } from '@grafana/runtime';
import {
HorizontalGroup,
InlineSwitch,
@@ -15,34 +16,19 @@ import {
stylesFactory,
ToolbarButton,
} from '@grafana/ui';
-
+import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
import config from 'app/core/config';
import { appEvents } from 'app/core/core';
-import { calculatePanelSize } from './utils';
-
-import { PanelEditorTabs } from './PanelEditorTabs';
-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 { SaveDashboardProxy } from '../SaveDashboard/SaveDashboardProxy';
-import { DashboardPanel } from '../../dashgrid/DashboardPanel';
-
-import { discardPanelChanges, initPanelEditor, updatePanelEditorUIState } from './state/actions';
-
-import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
-import { toggleTableView } from './state/reducers';
-
-import { getPanelEditorTabs } from './state/selectors';
-
-import { StoreState } from 'app/types';
-import { DisplayMode, displayModes, PanelEditorTab } from './types';
-import { DashboardModel, PanelModel } from '../../state';
-import { VisualizationButton } from './VisualizationButton';
-import { PanelOptionsChangedEvent, ShowModalReactEvent } from 'app/types/events';
-import { locationService } from '@grafana/runtime';
-import { UnlinkModal } from '../../../library-panels/components/UnlinkModal/UnlinkModal';
import { SaveLibraryPanelModal } from 'app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal';
+import { PanelModelWithLibraryPanel } from 'app/features/library-panels/types';
+import { getPanelStateForModel } from 'app/features/panel/state/selectors';
+import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
+import { StoreState } from 'app/types';
+import { PanelOptionsChangedEvent, ShowModalReactEvent } from 'app/types/events';
+
+import { notifyApp } from '../../../../core/actions';
+import { UnlinkModal } from '../../../library-panels/components/UnlinkModal/UnlinkModal';
import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
import { getLibraryPanelConnectedDashboards } from '../../../library-panels/state/api';
import {
@@ -50,11 +36,21 @@ import {
createPanelLibrarySuccessNotification,
saveAndRefreshLibraryPanel,
} from '../../../library-panels/utils';
-import { notifyApp } from '../../../../core/actions';
-import { PanelEditorTableView } from './PanelEditorTableView';
-import { PanelModelWithLibraryPanel } from 'app/features/library-panels/types';
-import { getPanelStateForModel } from 'app/features/panel/state/selectors';
import { getVariablesByKey } from '../../../variables/state/selectors';
+import { DashboardPanel } from '../../dashgrid/DashboardPanel';
+import { DashboardModel, PanelModel } from '../../state';
+import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
+import { SaveDashboardProxy } from '../SaveDashboard/SaveDashboardProxy';
+
+import { OptionsPane } from './OptionsPane';
+import { PanelEditorTableView } from './PanelEditorTableView';
+import { PanelEditorTabs } from './PanelEditorTabs';
+import { VisualizationButton } from './VisualizationButton';
+import { discardPanelChanges, initPanelEditor, updatePanelEditorUIState } from './state/actions';
+import { toggleTableView } from './state/reducers';
+import { getPanelEditorTabs } from './state/selectors';
+import { DisplayMode, displayModes, PanelEditorTab } from './types';
+import { calculatePanelSize } from './utils';
interface OwnProps {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorQueries.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorQueries.tsx
index 36cc2d32b88..ca3ce045036 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorQueries.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorQueries.tsx
@@ -1,10 +1,12 @@
import React, { PureComponent } from 'react';
-import { QueryGroup } from 'app/features/query/components/QueryGroup';
-import { PanelModel } from '../../state';
-import { locationService } from '@grafana/runtime';
-import { QueryGroupDataSource, QueryGroupOptions } from 'app/types';
+
import { DataQuery, getDataSourceRef } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { QueryGroup } from 'app/features/query/components/QueryGroup';
+import { QueryGroupDataSource, QueryGroupOptions } from 'app/types';
+
+import { PanelModel } from '../../state';
interface Props {
/** Current panel */
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.tsx
index 826f419ac5c..fd4958d10b4 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.tsx
@@ -1,13 +1,16 @@
-import { PanelChrome } from '@grafana/ui';
-import { PanelRenderer } from 'app/features/panel/components/PanelRenderer';
import React, { useEffect, useState } from 'react';
-import { DashboardModel, PanelModel } from '../../state';
-import { usePanelLatestData } from './usePanelLatestData';
-import { PanelOptions } from 'app/plugins/panel/table/models.gen';
+
import { RefreshEvent } from '@grafana/runtime';
+import { PanelChrome } from '@grafana/ui';
import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
-import { getTimeSrv } from '../../services/TimeSrv';
+import { PanelRenderer } from 'app/features/panel/components/PanelRenderer';
+import { PanelOptions } from 'app/plugins/panel/table/models.gen';
+
import PanelHeaderCorner from '../../dashgrid/PanelHeader/PanelHeaderCorner';
+import { getTimeSrv } from '../../services/TimeSrv';
+import { DashboardModel, PanelModel } from '../../state';
+
+import { usePanelLatestData } from './usePanelLatestData';
interface Props {
width: number;
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index 8c903e3fbfa..e9c4ed1a4dc 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -1,16 +1,19 @@
-import React, { FC, useEffect } from 'react';
import { css } from '@emotion/css';
-import { IconName, Tab, TabContent, TabsBar, useForceUpdate, useStyles2 } from '@grafana/ui';
-import { TransformationsEditor } from '../TransformationsEditor/TransformationsEditor';
-import { DashboardModel, PanelModel } from '../../state';
-import { PanelEditorTab, PanelEditorTabId } from './types';
+import React, { FC, useEffect } from 'react';
import { Subscription } from 'rxjs';
-import { PanelQueriesChangedEvent, PanelTransformationsChangedEvent } from 'app/types/events';
-import { PanelEditorQueries } from './PanelEditorQueries';
+
import { GrafanaTheme2 } from '@grafana/data';
import { config } from '@grafana/runtime';
+import { IconName, Tab, TabContent, TabsBar, useForceUpdate, useStyles2 } from '@grafana/ui';
import AlertTabIndex from 'app/features/alerting/AlertTabIndex';
import { PanelAlertTab } from 'app/features/alerting/unified/PanelAlertTab';
+import { PanelQueriesChangedEvent, PanelTransformationsChangedEvent } from 'app/types/events';
+
+import { DashboardModel, PanelModel } from '../../state';
+import { TransformationsEditor } from '../TransformationsEditor/TransformationsEditor';
+
+import { PanelEditorQueries } from './PanelEditorQueries';
+import { PanelEditorTab, PanelEditorTabId } from './types';
interface PanelEditorTabsProps {
panel: PanelModel;
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx
index 3140999328a..b5e6f9ed926 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx
@@ -1,7 +1,9 @@
-import { locationService } from '@grafana/runtime';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
+
+import { locationService } from '@grafana/runtime';
+
import { PanelNotSupported, Props } from './PanelNotSupported';
import { PanelEditorTabId } from './types';
@@ -28,9 +30,9 @@ describe('PanelNotSupported', () => {
});
describe('when the back to queries button is clicked', () => {
- it('then correct action should be dispatched', () => {
+ it('then correct action should be dispatched', async () => {
setupTestContext({});
- userEvent.click(screen.getByRole('button', { name: /go back to queries/i }));
+ await userEvent.click(screen.getByRole('button', { name: /go back to queries/i }));
expect(locationService.getSearchObject().tab).toBe(PanelEditorTabId.Query);
});
});
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx
index 3c0bcdcc0a6..ea60c728c8f 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx
@@ -1,9 +1,10 @@
import React, { useCallback } from 'react';
-import { Button, VerticalGroup } from '@grafana/ui';
-import { Layout } from '@grafana/ui/src/components/Layout/Layout';
-import { PanelEditorTabId } from './types';
import { locationService } from '@grafana/runtime';
+import { Button, VerticalGroup } from '@grafana/ui';
+import { Layout } from '@grafana/ui/src/components/Layout/Layout';
+
+import { PanelEditorTabId } from './types';
export interface Props {
message: string;
diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
index 8e705bbd8f2..476f77a3f3f 100644
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
@@ -1,14 +1,17 @@
-import React, { FC } from 'react';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
import { GrafanaTheme } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { ToolbarButton, ButtonGroup, useStyles } from '@grafana/ui';
import { StoreState } from 'app/types';
-import { useDispatch, useSelector } from 'react-redux';
-import { setPanelEditorUIState, toggleVizPicker } from './state/reducers';
-import { selectors } from '@grafana/e2e-selectors';
+
import { PanelModel } from '../../state';
import { getPanelPluginWithFallback } from '../../state/selectors';
+import { setPanelEditorUIState, toggleVizPicker } from './state/reducers';
+
type Props = {
panel: PanelModel;
};
diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
index ca2e2e18f40..db9a56901c9 100644
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
@@ -1,21 +1,24 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import { css } from '@emotion/css';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocalStorage } from 'react-use';
+
import { GrafanaTheme, PanelData, SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { Button, CustomScrollbar, FilterInput, RadioButtonGroup, useStyles } from '@grafana/ui';
+import { Field } from '@grafana/ui/src/components/Forms/Field';
+import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
+import { PanelLibraryOptionsGroup } from 'app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup';
+import { VisualizationSuggestions } from 'app/features/panel/components/VizTypePicker/VisualizationSuggestions';
+import { VizTypeChangeDetails } from 'app/features/panel/components/VizTypePicker/types';
+
+import { VizTypePicker } from '../../../panel/components/VizTypePicker/VizTypePicker';
import { changePanelPlugin } from '../../../panel/state/actions';
import { PanelModel } from '../../state/PanelModel';
-import { useDispatch, useSelector } from 'react-redux';
-import { VizTypePicker } from '../../../panel/components/VizTypePicker/VizTypePicker';
-import { Field } from '@grafana/ui/src/components/Forms/Field';
-import { PanelLibraryOptionsGroup } from 'app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup';
-import { toggleVizPicker } from './state/reducers';
-import { selectors } from '@grafana/e2e-selectors';
import { getPanelPluginWithFallback } from '../../state/selectors';
-import { VizTypeChangeDetails } from 'app/features/panel/components/VizTypePicker/types';
-import { VisualizationSuggestions } from 'app/features/panel/components/VizTypePicker/VisualizationSuggestions';
-import { useLocalStorage } from 'react-use';
+
+import { toggleVizPicker } from './state/reducers';
import { VisualizationSelectPaneTab } from './types';
-import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
interface Props {
panel: PanelModel;
diff --git a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
index 43af045b55e..9ca84fdf48a 100644
--- a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import { css } from '@emotion/css';
import { cloneDeep } from 'lodash';
+import React from 'react';
+
import {
FieldConfigOptionsRegistry,
SelectableValue,
@@ -10,13 +12,13 @@ import {
GrafanaTheme2,
} from '@grafana/data';
import { fieldMatchersUI, useStyles2, ValuePicker } from '@grafana/ui';
-import { OptionPaneRenderProps } from './types';
-import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
-import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
-import { DynamicConfigValueEditor } from './DynamicConfigValueEditor';
import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
+
+import { DynamicConfigValueEditor } from './DynamicConfigValueEditor';
+import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
+import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { OverrideCategoryTitle } from './OverrideCategoryTitle';
-import { css } from '@emotion/css';
+import { OptionPaneRenderProps } from './types';
export function getFieldOverrideCategories(
props: OptionPaneRenderProps,
diff --git a/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx
index d92669f3f72..8f1036efcb4 100644
--- a/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx
@@ -1,11 +1,14 @@
-import { Input } from '@grafana/ui';
import React from 'react';
-import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
-import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
-import { OptionPaneRenderProps } from './types';
-import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
+
+import { Input } from '@grafana/ui';
import { LibraryPanelInformation } from 'app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo';
+import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
+
+import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
+import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
+import { OptionPaneRenderProps } from './types';
+
export function getLibraryPanelOptionsCategory(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor {
const { panel, onPanelConfigChange, dashboard } = props;
const descriptor = new OptionsPaneCategoryDescriptor({
diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
index 5cd1e34348b..20e4a7a69b7 100644
--- a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
@@ -1,9 +1,12 @@
+import React from 'react';
+
import { DataLinksInlineEditor, Input, RadioButtonGroup, Select, Switch, TextArea } from '@grafana/ui';
import { getPanelLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
-import React from 'react';
+
import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
-import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
+
import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
+import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { OptionPaneRenderProps } from './types';
export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor {
diff --git a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.test.ts b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.test.ts
index 3d3c461f6f8..01f12b81f1c 100644
--- a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.test.ts
@@ -1,4 +1,5 @@
import { EventBusSrv, FieldType, getDefaultTimeRange, LoadingState, toDataFrame } from '@grafana/data';
+
import { getStandardEditorContext } from './getVisualizationOptions';
describe('getStandardEditorContext', () => {
diff --git a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx
index be266ae7e9b..a3fa3263e73 100644
--- a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx
@@ -1,4 +1,6 @@
+import { get as lodashGet } from 'lodash';
import React from 'react';
+
import {
EventBus,
InterpolateFunction,
@@ -6,19 +8,19 @@ import {
StandardEditorContext,
VariableSuggestionsScope,
} from '@grafana/data';
-import { get as lodashGet } from 'lodash';
-import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
-import { OptionPaneRenderProps } from './types';
-import { setOptionImmutably, updateDefaultFieldConfigValue } from './utils';
-import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
-import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
+import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
import {
isNestedPanelOptions,
NestedValueAccess,
PanelOptionsEditorBuilder,
} from '@grafana/data/src/utils/OptionsUIBuilders';
-import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
+import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
+
+import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
+import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { getOptionOverrides } from './state/getOptionOverrides';
+import { OptionPaneRenderProps } from './types';
+import { setOptionImmutably, updateDefaultFieldConfigValue } from './utils';
type categoryGetter = (categoryNames?: string[]) => OptionsPaneCategoryDescriptor;
diff --git a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
index bb9d42bc0d7..43787af8f58 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
@@ -1,5 +1,6 @@
import { OptionsPaneCategoryDescriptor } from '../OptionsPaneCategoryDescriptor';
import { OptionsPaneItemDescriptor } from '../OptionsPaneItemDescriptor';
+
import { OptionSearchEngine } from './OptionSearchEngine';
describe('OptionSearchEngine', () => {
diff --git a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts
index c29f8399949..c861806702d 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.ts
@@ -1,5 +1,5 @@
-import { OptionsPaneItemDescriptor } from '../OptionsPaneItemDescriptor';
import { OptionsPaneCategoryDescriptor } from '../OptionsPaneCategoryDescriptor';
+import { OptionsPaneItemDescriptor } from '../OptionsPaneItemDescriptor';
export interface OptionSearchResults {
optionHits: OptionsPaneItemDescriptor[];
diff --git a/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts b/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
index 1e864f160ac..b52df7d3ae9 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/actions.test.ts
@@ -1,10 +1,12 @@
-import { thunkTester } from '../../../../../../test/core/thunk/thunkTester';
-import { closeEditor, initialState, PanelEditorState } from './reducers';
-import { exitPanelEditor, initPanelEditor, skipPanelUpdate } from './actions';
import { panelModelAndPluginReady, removePanel } from 'app/features/panel/state/reducers';
-import { DashboardModel, PanelModel } from '../../../state';
import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
+import { thunkTester } from '../../../../../../test/core/thunk/thunkTester';
+import { DashboardModel, PanelModel } from '../../../state';
+
+import { exitPanelEditor, initPanelEditor, skipPanelUpdate } from './actions';
+import { closeEditor, initialState, PanelEditorState } from './reducers';
+
describe('panelEditor actions', () => {
describe('initPanelEditor', () => {
it('initPanelEditor should create edit panel model as clone', async () => {
diff --git a/public/app/features/dashboard/components/PanelEditor/state/actions.ts b/public/app/features/dashboard/components/PanelEditor/state/actions.ts
index 7093dd47cdc..a2c037843eb 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/actions.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/actions.ts
@@ -1,8 +1,12 @@
import { pick } from 'lodash';
-import { ThunkResult } from 'app/types';
+
import store from 'app/core/store';
-import { panelModelAndPluginReady } from 'app/features/panel/state/reducers';
import { cleanUpPanelState, initPanelState } from 'app/features/panel/state/actions';
+import { panelModelAndPluginReady } from 'app/features/panel/state/reducers';
+import { ThunkResult } from 'app/types';
+
+import { DashboardModel, PanelModel } from '../../../state';
+
import {
closeEditor,
PANEL_EDITOR_UI_STATE_STORAGE_KEY,
@@ -11,7 +15,6 @@ import {
setPanelEditorUIState,
updateEditorInitState,
} from './reducers';
-import { DashboardModel, PanelModel } from '../../../state';
export function initPanelEditor(sourcePanel: PanelModel, dashboard: DashboardModel): ThunkResult {
return async (dispatch) => {
diff --git a/public/app/features/dashboard/components/PanelEditor/state/getOptionOverrides.ts b/public/app/features/dashboard/components/PanelEditor/state/getOptionOverrides.ts
index 7160401a861..0ce4e9ce71b 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/getOptionOverrides.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/getOptionOverrides.ts
@@ -1,5 +1,7 @@
-import { DataFrame, FieldConfigPropertyItem, FieldConfigSource } from '@grafana/data';
import { get as lodashGet } from 'lodash';
+
+import { DataFrame, FieldConfigPropertyItem, FieldConfigSource } from '@grafana/data';
+
import { OptionPaneItemOverrideInfo } from '../types';
export const dataOverrideTooltipDescription =
diff --git a/public/app/features/dashboard/components/PanelEditor/state/reducers.ts b/public/app/features/dashboard/components/PanelEditor/state/reducers.ts
index b8e77139e78..9a366235f2f 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/reducers.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/reducers.ts
@@ -1,8 +1,10 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { PanelModel } from '../../../state/PanelModel';
+
import { getDefaultTimeRange, LoadingState, PanelData } from '@grafana/data';
-import { DisplayMode } from '../types';
+
import store from '../../../../../core/store';
+import { PanelModel } from '../../../state/PanelModel';
+import { DisplayMode } from '../types';
export const PANEL_EDITOR_UI_STATE_STORAGE_KEY = 'grafana.dashboard.editor.ui';
diff --git a/public/app/features/dashboard/components/PanelEditor/state/selectors.test.ts b/public/app/features/dashboard/components/PanelEditor/state/selectors.test.ts
index 0bab17d32f9..86f37cb761a 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/selectors.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/selectors.test.ts
@@ -1,9 +1,11 @@
-import { getPanelEditorTabs } from './selectors';
import { PanelPlugin } from '@grafana/data';
-import { PanelEditorTabId } from '../types';
-import { updateConfig } from '../../../../../core/config';
import { contextSrv } from 'app/core/services/context_srv';
+import { updateConfig } from '../../../../../core/config';
+import { PanelEditorTabId } from '../types';
+
+import { getPanelEditorTabs } from './selectors';
+
jest.mock('app/core/services/context_srv');
const mocks = {
diff --git a/public/app/features/dashboard/components/PanelEditor/state/selectors.ts b/public/app/features/dashboard/components/PanelEditor/state/selectors.ts
index 007945700da..7627bcbcf07 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/selectors.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/selectors.ts
@@ -1,11 +1,13 @@
import memoizeOne from 'memoize-one';
+
import { PanelPlugin } from '@grafana/data';
-import { PanelEditorTab, PanelEditorTabId } from '../types';
import { getConfig } from 'app/core/config';
-import { getRulesPermissions } from 'app/features/alerting/unified/utils/access-control';
import { contextSrv } from 'app/core/services/context_srv';
+import { getRulesPermissions } from 'app/features/alerting/unified/utils/access-control';
import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource';
+import { PanelEditorTab, PanelEditorTabId } from '../types';
+
export const getPanelEditorTabs = memoizeOne((tab?: string, plugin?: PanelPlugin) => {
const tabs: PanelEditorTab[] = [];
diff --git a/public/app/features/dashboard/components/PanelEditor/types.ts b/public/app/features/dashboard/components/PanelEditor/types.ts
index 6e4b2306637..39d8f6409bd 100644
--- a/public/app/features/dashboard/components/PanelEditor/types.ts
+++ b/public/app/features/dashboard/components/PanelEditor/types.ts
@@ -1,4 +1,5 @@
import { DataFrame, FieldConfigSource, PanelData, PanelPlugin } from '@grafana/data';
+
import { DashboardModel, PanelModel } from '../../state';
export interface PanelEditorTab {
diff --git a/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts b/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts
index 625642f43a5..f3e2aa5f2d2 100644
--- a/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts
+++ b/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts
@@ -1,8 +1,10 @@
-import { DataQueryError, LoadingState, PanelData } from '@grafana/data';
import { useEffect, useRef, useState } from 'react';
-import { PanelModel } from '../../state';
import { Unsubscribable } from 'rxjs';
+
+import { DataQueryError, LoadingState, PanelData } from '@grafana/data';
+
import { GetDataOptions } from '../../../query/state/PanelQueryRunner';
+import { PanelModel } from '../../state';
interface UsePanelLatestData {
data?: PanelData;
diff --git a/public/app/features/dashboard/components/PanelEditor/utils.test.ts b/public/app/features/dashboard/components/PanelEditor/utils.test.ts
index ba19f093308..b2efaa7aa7f 100644
--- a/public/app/features/dashboard/components/PanelEditor/utils.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/utils.test.ts
@@ -1,4 +1,5 @@
import { FieldConfig, FieldConfigSource, PanelPlugin, standardFieldConfigEditorRegistry } from '@grafana/data';
+
import { setOptionImmutably, supportsDataQuery, updateDefaultFieldConfigValue } from './utils';
describe('standardFieldConfigEditorRegistry', () => {
diff --git a/public/app/features/dashboard/components/PanelEditor/utils.ts b/public/app/features/dashboard/components/PanelEditor/utils.ts
index 868476b6241..d5a3342e668 100644
--- a/public/app/features/dashboard/components/PanelEditor/utils.ts
+++ b/public/app/features/dashboard/components/PanelEditor/utils.ts
@@ -1,9 +1,12 @@
import { omit } from 'lodash';
+
import { FieldConfigSource, PanelPlugin } from '@grafana/data';
-import { PanelModel } from '../../state/PanelModel';
-import { DisplayMode } from './types';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
+import { PanelModel } from '../../state/PanelModel';
+
+import { DisplayMode } from './types';
+
export function calculatePanelSize(mode: DisplayMode, width: number, height: number, panel: PanelModel) {
if (mode === DisplayMode.Fill) {
return { width, height };
diff --git a/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx b/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
index 0ad229d26df..596dd425654 100644
--- a/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
+++ b/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
@@ -1,10 +1,11 @@
import React, { FC, useCallback, useMemo } from 'react';
import { useSelector } from 'react-redux';
-import { Select } from '@grafana/ui';
-import { SelectableValue } from '@grafana/data';
-import { getLastKey, getVariablesByKey } from '../../../variables/state/selectors';
+import { SelectableValue } from '@grafana/data';
+import { Select } from '@grafana/ui';
+
import { StoreState } from '../../../../types';
+import { getLastKey, getVariablesByKey } from '../../../variables/state/selectors';
export interface Props {
id?: string;
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
index 417eeb3a795..fa49740bc0e 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
@@ -1,8 +1,9 @@
import React, { FC } from 'react';
+
import { Icon, ModalsController } from '@grafana/ui';
-import { RowOptionsModal } from './RowOptionsModal';
import { OnRowOptionsUpdate } from './RowOptionsForm';
+import { RowOptionsModal } from './RowOptionsModal';
export interface RowOptionsButtonProps {
title: string;
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
index 1f841528a90..40b9aafaabb 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
@@ -1,4 +1,5 @@
import React, { FC, useCallback, useState } from 'react';
+
import { Button, Field, Form, Modal, Input } from '@grafana/ui';
import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
index 7e0555b3744..785d10f89f2 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
@@ -1,6 +1,7 @@
-import React, { FC } from 'react';
-import { Modal, stylesFactory } from '@grafana/ui';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+
+import { Modal, stylesFactory } from '@grafana/ui';
import { OnRowOptionsUpdate, RowOptionsForm } from './RowOptionsForm';
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx
index ca9c0364b7c..785ee7b45ed 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
import { css } from '@emotion/css';
+import React, { useState } from 'react';
+
import { Modal } from '@grafana/ui';
-import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
+
import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
-import { useDashboardSave } from './useDashboardSave';
+import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
import { SaveDashboardModalProps } from './types';
+import { useDashboardSave } from './useDashboardSave';
export const SaveDashboardAsModal: React.FC<
SaveDashboardModalProps & {
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
index d754fe352a4..75d09010f9a 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
@@ -1,8 +1,10 @@
import React from 'react';
+
+import { selectors } from '@grafana/e2e-selectors';
import { Button, ButtonVariant, ModalsController, FullWidthButtonContainer } from '@grafana/ui';
import { DashboardModel } from 'app/features/dashboard/state';
+
import { SaveDashboardProxy } from './SaveDashboardProxy';
-import { selectors } from '@grafana/e2e-selectors';
interface SaveDashboardButtonProps {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx
index ba26e0ba1b2..6deb43117f4 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
import { css } from '@emotion/css';
+import React from 'react';
+import { useAsync } from 'react-use';
+
+import { GrafanaTheme2 } from '@grafana/data';
import { Spinner, useStyles2 } from '@grafana/ui';
-import { Diffs } from '../VersionHistory/utils';
+
import { DiffGroup } from '../VersionHistory/DiffGroup';
import { DiffViewer } from '../VersionHistory/DiffViewer';
-import { GrafanaTheme2 } from '@grafana/data';
-import { useAsync } from 'react-use';
+import { Diffs } from '../VersionHistory/utils';
interface SaveDashboardDiffProps {
oldValue?: any;
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx
index 798dd6a333e..5c37e6389d6 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx
@@ -1,15 +1,18 @@
import React, { useMemo, useState } from 'react';
-import { Drawer, Tab, TabsBar } from '@grafana/ui';
-import { SaveDashboardData, SaveDashboardModalProps, SaveDashboardOptions } from './types';
-import { jsonDiff } from '../VersionHistory/utils';
import { useAsync } from 'react-use';
+
+import { Drawer, Tab, TabsBar } from '@grafana/ui';
import { backendSrv } from 'app/core/services/backend_srv';
-import { useDashboardSave } from './useDashboardSave';
-import { SaveProvisionedDashboardForm } from './forms/SaveProvisionedDashboardForm';
+
+import { jsonDiff } from '../VersionHistory/utils';
+
+import { SaveDashboardDiff } from './SaveDashboardDiff';
import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
import { SaveDashboardForm } from './forms/SaveDashboardForm';
-import { SaveDashboardDiff } from './SaveDashboardDiff';
+import { SaveProvisionedDashboardForm } from './forms/SaveProvisionedDashboardForm';
+import { SaveDashboardData, SaveDashboardModalProps, SaveDashboardOptions } from './types';
+import { useDashboardSave } from './useDashboardSave';
export const SaveDashboardDrawer = ({ dashboard, onDismiss, onSaveSuccess, isCopy }: SaveDashboardModalProps) => {
const [options, setOptions] = useState({});
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
index a1c1df7425f..cde2d55f1a1 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
@@ -1,11 +1,13 @@
-import React, { useEffect } from 'react';
-import { Button, ConfirmModal, Modal, stylesFactory, useTheme } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
import { css } from '@emotion/css';
+import React, { useEffect } from 'react';
+
+import { GrafanaTheme } from '@grafana/data';
+import { Button, ConfirmModal, Modal, stylesFactory, useTheme } from '@grafana/ui';
import { DashboardModel } from 'app/features/dashboard/state';
-import { useDashboardSave } from './useDashboardSave';
-import { SaveDashboardModalProps } from './types';
+
import { SaveDashboardAsButton } from './SaveDashboardButton';
+import { SaveDashboardModalProps } from './types';
+import { useDashboardSave } from './useDashboardSave';
interface SaveDashboardErrorProxyProps {
/** original dashboard */
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx
index 42d4ac53a99..231d1d5021a 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx
@@ -1,10 +1,12 @@
-import React, { useMemo, useState } from 'react';
-import { Modal } from '@grafana/ui';
import { css } from '@emotion/css';
-import { SaveDashboardForm } from './forms/SaveDashboardForm';
+import React, { useMemo, useState } from 'react';
+
+import { Modal } from '@grafana/ui';
+
import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
-import { useDashboardSave } from './useDashboardSave';
+import { SaveDashboardForm } from './forms/SaveDashboardForm';
import { SaveDashboardModalProps, SaveDashboardOptions, SaveDashboardData } from './types';
+import { useDashboardSave } from './useDashboardSave';
export const SaveDashboardModal: React.FC = ({ dashboard, onDismiss, onSaveSuccess }) => {
const { state, onDashboardSave } = useDashboardSave(dashboard);
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardProxy.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardProxy.tsx
index ba9288672b4..50d149bfce3 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardProxy.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardProxy.tsx
@@ -1,10 +1,12 @@
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 { SaveDashboardAsModal } from './SaveDashboardAsModal';
import { SaveDashboardDrawer } from './SaveDashboardDrawer';
+import { SaveDashboardModal } from './SaveDashboardModal';
+import { SaveProvisionedDashboard } from './SaveProvisionedDashboard';
+import { SaveDashboardModalProps } from './types';
export const SaveDashboardProxy: React.FC = ({
dashboard,
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveProvisionedDashboard.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveProvisionedDashboard.tsx
index 135825fe910..cedb83c9948 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveProvisionedDashboard.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveProvisionedDashboard.tsx
@@ -1,5 +1,7 @@
import React from 'react';
+
import { Modal } from '@grafana/ui';
+
import { SaveProvisionedDashboardForm } from './forms/SaveProvisionedDashboardForm';
import { SaveDashboardModalProps } from './types';
diff --git a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
index fa0eaa4cf19..e7b63939af9 100644
--- a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
-import { Button, Modal } from '@grafana/ui';
-import { SaveDashboardButton } from './SaveDashboardButton';
-import { DashboardModel } from '../../state';
import { css } from '@emotion/css';
+import React from 'react';
+
+import { Button, Modal } from '@grafana/ui';
+
+import { DashboardModel } from '../../state';
+
+import { SaveDashboardButton } from './SaveDashboardButton';
interface UnsavedChangesModalProps {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx
index d58801a2c68..4a36443114c 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
import { mount } from 'enzyme';
-import { SaveDashboardAsForm, SaveDashboardAsFormProps } from './SaveDashboardAsForm';
-import { DashboardModel } from 'app/features/dashboard/state';
+import React from 'react';
import { act } from 'react-dom/test-utils';
+
+import { DashboardModel } from 'app/features/dashboard/state';
import * as api from 'app/features/manage-dashboards/state/actions';
+import { SaveDashboardAsForm, SaveDashboardAsFormProps } from './SaveDashboardAsForm';
+
jest.mock('app/features/plugins/datasource_srv', () => ({}));
jest.mock('app/features/expressions/ExpressionDatasource', () => ({}));
jest.mock('app/features/manage-dashboards/services/ValidationSrv', () => ({
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
index a17b651089a..b1176a0808e 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
@@ -1,10 +1,12 @@
import React from 'react';
+
import { Button, Input, Switch, Form, Field, InputControl, HorizontalGroup } from '@grafana/ui';
-import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
-import { SaveDashboardFormProps } from '../types';
+import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv';
+import { SaveDashboardFormProps } from '../types';
+
interface SaveDashboardAsFormDTO {
title: string;
$folder: { id?: number; title?: string };
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.test.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.test.tsx
index ff7a020d637..8a5b60159d9 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.test.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.test.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
import { mount } from 'enzyme';
+import React from 'react';
import { act } from 'react-dom/test-utils';
+
import { DashboardModel } from 'app/features/dashboard/state';
-import { SaveDashboardForm } from './SaveDashboardForm';
+
import { SaveDashboardOptions } from '../types';
+import { SaveDashboardForm } from './SaveDashboardForm';
+
const prepareDashboardMock = (
timeChanged: boolean,
variableValuesChanged: boolean,
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
index 37463b0c85e..1bae42d0dab 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -1,11 +1,11 @@
import React, { useMemo, useState } from 'react';
-import { Button, Checkbox, Form, TextArea } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
-
-import { DashboardModel } from 'app/features/dashboard/state';
-import { SaveDashboardData, SaveDashboardOptions } from '../types';
import { Stack } from '@grafana/experimental';
+import { Button, Checkbox, Form, TextArea } from '@grafana/ui';
+import { DashboardModel } from 'app/features/dashboard/state';
+
+import { SaveDashboardData, SaveDashboardOptions } from '../types';
interface FormDTO {
message: string;
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index da03cbf3ce2..8fc0075998e 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -1,11 +1,13 @@
-import React, { useCallback, useState } from 'react';
import { css } from '@emotion/css';
import { saveAs } from 'file-saver';
-import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
-import { SaveDashboardFormProps } from '../types';
+import React, { useCallback, useState } from 'react';
+
import { GrafanaTheme } from '@grafana/data';
-import { useAppNotification } from 'app/core/copy/appNotification';
import { Stack } from '@grafana/experimental';
+import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
+import { useAppNotification } from 'app/core/copy/appNotification';
+
+import { SaveDashboardFormProps } from '../types';
export const SaveProvisionedDashboardForm: React.FC = ({ dashboard, onCancel }) => {
const theme = useTheme();
diff --git a/public/app/features/dashboard/components/SaveDashboard/types.ts b/public/app/features/dashboard/components/SaveDashboard/types.ts
index a8783ff6b69..e0ab7e9c8c5 100644
--- a/public/app/features/dashboard/components/SaveDashboard/types.ts
+++ b/public/app/features/dashboard/components/SaveDashboard/types.ts
@@ -1,4 +1,5 @@
import { CloneOptions, DashboardModel } from 'app/features/dashboard/state/DashboardModel';
+
import { Diffs } from '../VersionHistory/utils';
export interface SaveDashboardData {
diff --git a/public/app/features/dashboard/components/SaveDashboard/useDashboardSave.tsx b/public/app/features/dashboard/components/SaveDashboard/useDashboardSave.tsx
index d6675c9dd97..6c4237f855f 100644
--- a/public/app/features/dashboard/components/SaveDashboard/useDashboardSave.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/useDashboardSave.tsx
@@ -1,15 +1,17 @@
import { useEffect } from 'react';
import useAsyncFn from 'react-use/lib/useAsyncFn';
+
import { locationUtil } from '@grafana/data';
-import { SaveDashboardOptions } from './types';
+import { locationService, reportInteraction } from '@grafana/runtime';
import appEvents from 'app/core/app_events';
-import { contextSrv } from 'app/core/core';
import { useAppNotification } from 'app/core/copy/appNotification';
+import { contextSrv } from 'app/core/core';
import { DashboardModel } from 'app/features/dashboard/state';
import { saveDashboard as saveDashboardApiCall } from 'app/features/manage-dashboards/state/actions';
-import { locationService, reportInteraction } from '@grafana/runtime';
import { DashboardSavedEvent } from 'app/types/events';
+import { SaveDashboardOptions } from './types';
+
const saveDashboard = async (saveModel: any, options: SaveDashboardOptions, dashboard: DashboardModel) => {
let folderId = options.folderId;
if (folderId === undefined) {
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.test.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.test.tsx
index 22d9e22ad75..ac1293a487c 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.test.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareEmbed.test.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
-import { ShareEmbed } from './ShareEmbed';
import { render, screen } from '@testing-library/react';
+import React from 'react';
+
import config from 'app/core/config';
+
import { DashboardModel, PanelModel } from '../../state';
+import { ShareEmbed } from './ShareEmbed';
+
jest.mock('app/features/dashboard/services/TimeSrv', () => ({
getTimeSrv: () => ({
timeRange: () => {
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
index f1c97a727a8..1262ee2dfde 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
@@ -1,9 +1,11 @@
import React, { FormEvent, PureComponent } from 'react';
-import { ClipboardButton, Field, Modal, RadioButtonGroup, Switch, TextArea } from '@grafana/ui';
+
import { AppEvents, SelectableValue } from '@grafana/data';
+import { ClipboardButton, Field, Modal, RadioButtonGroup, Switch, TextArea } from '@grafana/ui';
import { appEvents } from 'app/core/core';
-import { buildIframeHtml } from './utils';
+
import { ShareModalTabProps } from './types';
+import { buildIframeHtml } from './utils';
const themeOptions: Array> = [
{ label: 'Current', value: 'current' },
diff --git a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
index c687a86f89a..934b233eda1 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
@@ -1,12 +1,14 @@
-import React, { PureComponent } from 'react';
import { saveAs } from 'file-saver';
-import { getBackendSrv } from 'app/core/services/backend_srv';
-import { Button, Field, Modal, Switch } from '@grafana/ui';
-import { DashboardExporter } from 'app/features/dashboard/components/DashExportModal';
-import { appEvents } from 'app/core/core';
-import { ShowModalReactEvent } from 'app/types/events';
-import { ViewJsonModal } from './ViewJsonModal';
+import React, { PureComponent } from 'react';
+
import { config } from '@grafana/runtime';
+import { Button, Field, Modal, Switch } from '@grafana/ui';
+import { appEvents } from 'app/core/core';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { DashboardExporter } from 'app/features/dashboard/components/DashExportModal';
+import { ShowModalReactEvent } from 'app/types/events';
+
+import { ViewJsonModal } from './ViewJsonModal';
import { ShareModalTabProps } from './types';
interface Props extends ShareModalTabProps {}
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx b/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx
index a9b5ace06c9..db91c703b43 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx
@@ -1,5 +1,7 @@
import React from 'react';
+
import { AddLibraryPanelContents } from 'app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal';
+
import { ShareModalTabProps } from './types';
interface Props extends ShareModalTabProps {
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
index b8ec81aa3d3..a8c1ac5ea84 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
@@ -1,13 +1,16 @@
-import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
+import React from 'react';
+
+import { getDefaultTimeRange } from '@grafana/data';
import { setTemplateSrv } from '@grafana/runtime';
import config from 'app/core/config';
-import { Props, ShareLink, State } from './ShareLink';
+
import { initTemplateSrv } from '../../../../../test/helpers/initTemplateSrv';
import { variableAdapters } from '../../../variables/adapters';
import { createQueryVariableAdapter } from '../../../variables/query/adapter';
import { DashboardModel, PanelModel } from '../../state';
-import { getDefaultTimeRange } from '@grafana/data';
+
+import { Props, ShareLink, State } from './ShareLink';
jest.mock('app/features/dashboard/services/TimeSrv', () => ({
getTimeSrv: () => ({
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
index b14b485a0cc..0b937f4cf6b 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -1,11 +1,13 @@
import React, { PureComponent } from 'react';
+
+import { AppEvents, SelectableValue } from '@grafana/data';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
import { Alert, ClipboardButton, Field, FieldSet, Icon, Input, RadioButtonGroup, Switch } from '@grafana/ui';
-import { AppEvents, SelectableValue } from '@grafana/data';
-import { buildImageUrl, buildShareUrl } from './utils';
-import { appEvents } from 'app/core/core';
import config from 'app/core/config';
+import { appEvents } from 'app/core/core';
+
import { ShareModalTabProps } from './types';
+import { buildImageUrl, buildShareUrl } from './utils';
const themeOptions: Array> = [
{ label: 'Current', value: 'current' },
diff --git a/public/app/features/dashboard/components/ShareModal/ShareModal.tsx b/public/app/features/dashboard/components/ShareModal/ShareModal.tsx
index 984d77ce8bf..bc4945f416a 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareModal.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareModal.tsx
@@ -1,14 +1,16 @@
import React from 'react';
+
import { Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
+import { contextSrv } from 'app/core/core';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { isPanelModelLibraryPanel } from 'app/features/library-panels/guard';
+
+import { ShareEmbed } from './ShareEmbed';
+import { ShareExport } from './ShareExport';
+import { ShareLibraryPanel } from './ShareLibraryPanel';
import { ShareLink } from './ShareLink';
import { ShareSnapshot } from './ShareSnapshot';
-import { ShareExport } from './ShareExport';
-import { ShareEmbed } from './ShareEmbed';
import { ShareModalTabModel } from './types';
-import { contextSrv } from 'app/core/core';
-import { ShareLibraryPanel } from './ShareLibraryPanel';
const customDashboardTabs: ShareModalTabModel[] = [];
const customPanelTabs: ShareModalTabModel[] = [];
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
index 1ac5b0d4d19..91d552a0195 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@@ -1,11 +1,14 @@
import React, { PureComponent } from 'react';
-import { Button, ClipboardButton, Field, Icon, Input, LinkButton, Modal, Select, Spinner } from '@grafana/ui';
+
import { AppEvents, SelectableValue } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
-import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
-import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { Button, ClipboardButton, Field, Icon, Input, LinkButton, Modal, Select, Spinner } from '@grafana/ui';
import { appEvents } from 'app/core/core';
+import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+
import { VariableRefresh } from '../../../variables/types';
+
import { ShareModalTabProps } from './types';
const snapshotApiUrl = '/api/snapshots';
diff --git a/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx b/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx
index 272d60057e1..fc5f35cb7fe 100644
--- a/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx
@@ -1,10 +1,11 @@
import React, { useCallback } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
import { ClipboardButton, CodeEditor, Modal } from '@grafana/ui';
-import AutoSizer from 'react-virtualized-auto-sizer';
import { notifyApp } from '../../../../core/actions';
-import { dispatch } from '../../../../store/store';
import { createSuccessNotification } from '../../../../core/copy/appNotification';
+import { dispatch } from '../../../../store/store';
export interface ViewJsonModalProps {
json: string;
diff --git a/public/app/features/dashboard/components/ShareModal/types.ts b/public/app/features/dashboard/components/ShareModal/types.ts
index 42d45c9ea89..558bd0fa8a9 100644
--- a/public/app/features/dashboard/components/ShareModal/types.ts
+++ b/public/app/features/dashboard/components/ShareModal/types.ts
@@ -1,4 +1,5 @@
import React from 'react';
+
import { NavModelItem } from '@grafana/data';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
diff --git a/public/app/features/dashboard/components/ShareModal/utils.test.ts b/public/app/features/dashboard/components/ShareModal/utils.test.ts
index 5b359e1ea2a..8e2a42d553a 100644
--- a/public/app/features/dashboard/components/ShareModal/utils.test.ts
+++ b/public/app/features/dashboard/components/ShareModal/utils.test.ts
@@ -1,6 +1,7 @@
-import { buildParams } from './utils';
import { TimeRange } from '@grafana/data';
+import { buildParams } from './utils';
+
describe('buildParams', () => {
it.each`
search | useCurrentTimeRange | selectedTheme | panel | expected
diff --git a/public/app/features/dashboard/components/ShareModal/utils.ts b/public/app/features/dashboard/components/ShareModal/utils.ts
index 4667ec23ae1..fb350ce464a 100644
--- a/public/app/features/dashboard/components/ShareModal/utils.ts
+++ b/public/app/features/dashboard/components/ShareModal/utils.ts
@@ -1,7 +1,7 @@
-import { config } from '@grafana/runtime';
-import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import { createShortLink } from 'app/core/utils/shortLinks';
import { dateTime, locationUtil, PanelModel, TimeRange, urlUtil } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { createShortLink } from 'app/core/utils/shortLinks';
+import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
export interface BuildParamsArgs {
useCurrentTimeRange: boolean;
diff --git a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
index dda2461e908..ed9a0b3f38c 100644
--- a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
+++ b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
@@ -1,10 +1,12 @@
-import { AnnotationQuery, EventBus, GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
import React, { useEffect, useState } from 'react';
-import { getDashboardQueryRunner } from '../../../query/state/DashboardQueryRunner/DashboardQueryRunner';
-import { AnnotationQueryFinished, AnnotationQueryStarted } from '../../../../types/events';
+
+import { AnnotationQuery, EventBus, GrafanaTheme2 } from '@grafana/data';
import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
-import { css } from '@emotion/css';
+
+import { AnnotationQueryFinished, AnnotationQueryStarted } from '../../../../types/events';
+import { getDashboardQueryRunner } from '../../../query/state/DashboardQueryRunner/DashboardQueryRunner';
export interface AnnotationPickerProps {
events: EventBus;
diff --git a/public/app/features/dashboard/components/SubMenu/Annotations.tsx b/public/app/features/dashboard/components/SubMenu/Annotations.tsx
index 8f0d30afe5d..a08f235341a 100644
--- a/public/app/features/dashboard/components/SubMenu/Annotations.tsx
+++ b/public/app/features/dashboard/components/SubMenu/Annotations.tsx
@@ -1,5 +1,7 @@
import React, { FunctionComponent, useEffect, useState } from 'react';
+
import { AnnotationQuery, EventBus } from '@grafana/data';
+
import { AnnotationPicker } from './AnnotationPicker';
interface Props {
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
index 2cc9bd5b752..b86b66651c8 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
@@ -1,15 +1,17 @@
import React, { FC } from 'react';
-import { Icon, IconName, Tooltip, useForceUpdate } from '@grafana/ui';
-import { sanitizeUrl } from '@grafana/data/src/text/sanitize';
-import { DashboardLinksDashboard } from './DashboardLinksDashboard';
-import { getLinkSrv } from '../../../panel/panellinks/link_srv';
+import { useEffectOnce } from 'react-use';
+import { sanitizeUrl } from '@grafana/data/src/text/sanitize';
+import { selectors } from '@grafana/e2e-selectors';
+import { TimeRangeUpdatedEvent } from '@grafana/runtime';
+import { Icon, IconName, Tooltip, useForceUpdate } from '@grafana/ui';
+
+import { getLinkSrv } from '../../../panel/panellinks/link_srv';
import { DashboardModel } from '../../state';
import { DashboardLink } from '../../state/DashboardModel';
import { linkIconMap } from '../LinksSettings/LinkSettingsEdit';
-import { useEffectOnce } from 'react-use';
-import { selectors } from '@grafana/e2e-selectors';
-import { TimeRangeUpdatedEvent } from '@grafana/runtime';
+
+import { DashboardLinksDashboard } from './DashboardLinksDashboard';
export interface Props {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.test.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.test.tsx
index 23d17ef61da..8586b726640 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.test.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.test.tsx
@@ -1,7 +1,8 @@
-import { DashboardLink } from '../../state/DashboardModel';
-import { DashboardSearchHit, DashboardSearchItemType } from '../../../search/types';
-import { resolveLinks, searchForTags } from './DashboardLinksDashboard';
import { describe, expect } from '../../../../../test/lib/common';
+import { DashboardSearchHit, DashboardSearchItemType } from '../../../search/types';
+import { DashboardLink } from '../../state/DashboardModel';
+
+import { resolveLinks, searchForTags } from './DashboardLinksDashboard';
describe('searchForTags', () => {
const setupTestContext = () => {
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
index 203af35cf60..53ccd630a0b 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
@@ -1,13 +1,15 @@
+import { css, cx } from '@emotion/css';
import React, { useRef, useState, useLayoutEffect } from 'react';
-import { Icon, ToolbarButton, Tooltip, useStyles2 } from '@grafana/ui';
+import { useAsync } from 'react-use';
+
import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
+import { selectors } from '@grafana/e2e-selectors';
+import { Icon, ToolbarButton, Tooltip, useStyles2 } from '@grafana/ui';
import { getBackendSrv } from 'app/core/services/backend_srv';
+import { DashboardSearchHit } from 'app/features/search/types';
+
import { getLinkSrv } from '../../../panel/panellinks/link_srv';
import { DashboardLink } from '../../state/DashboardModel';
-import { DashboardSearchHit } from 'app/features/search/types';
-import { selectors } from '@grafana/e2e-selectors';
-import { useAsync } from 'react-use';
-import { css, cx } from '@emotion/css';
interface Props {
link: DashboardLink;
diff --git a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx
index 14839796da0..a22a3e4a280 100644
--- a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx
+++ b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx
@@ -1,15 +1,18 @@
+import { css } from '@emotion/css';
import React, { PureComponent } from 'react';
import { connect, MapStateToProps } from 'react-redux';
+
+import { AnnotationQuery } from '@grafana/data';
+
import { StoreState } from '../../../../types';
import { getSubMenuVariables, getVariablesState } from '../../../variables/state/selectors';
import { VariableModel } from '../../../variables/types';
import { DashboardModel } from '../../state';
-import { DashboardLinks } from './DashboardLinks';
-import { Annotations } from './Annotations';
-import { SubMenuItems } from './SubMenuItems';
import { DashboardLink } from '../../state/DashboardModel';
-import { AnnotationQuery } from '@grafana/data';
-import { css } from '@emotion/css';
+
+import { Annotations } from './Annotations';
+import { DashboardLinks } from './DashboardLinks';
+import { SubMenuItems } from './SubMenuItems';
interface OwnProps {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
index 72f15ba4db8..7bc29f1721a 100644
--- a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
+++ b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
@@ -1,7 +1,9 @@
import React, { FunctionComponent, useEffect, useState } from 'react';
-import { VariableHide, VariableModel } from '../../../variables/types';
+
import { selectors } from '@grafana/e2e-selectors';
+
import { PickerRenderer } from '../../../variables/pickers/PickerRenderer';
+import { VariableHide, VariableModel } from '../../../variables/types';
interface Props {
variables: VariableModel[];
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
index 64b626a5a1b..f1d99bd708c 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
@@ -1,7 +1,7 @@
+import { css } from '@emotion/css';
import React, { useEffect, useMemo, useState } from 'react';
import { mergeMap } from 'rxjs/operators';
-import { css } from '@emotion/css';
-import { Icon, JSONFormatter, useStyles } from '@grafana/ui';
+
import {
DataFrame,
DataTransformerConfig,
@@ -10,6 +10,7 @@ import {
TransformerRegistryItem,
} from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { Icon, JSONFormatter, useStyles } from '@grafana/ui';
import { TransformationsEditorTransformation } from './types';
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
index c2d82b330d7..71eeb0200e1 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
@@ -1,17 +1,18 @@
import React, { useCallback } from 'react';
+import { useToggle } from 'react-use';
+
import { DataFrame, DataTransformerConfig, TransformerRegistryItem } from '@grafana/data';
import { HorizontalGroup } from '@grafana/ui';
-
-import { TransformationEditor } from './TransformationEditor';
+import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
+import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
import {
QueryOperationRow,
QueryOperationRowRenderProps,
} from 'app/core/components/QueryOperationRow/QueryOperationRow';
-import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
-import { TransformationsEditorTransformation } from './types';
import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
-import { useToggle } from 'react-use';
-import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
+
+import { TransformationEditor } from './TransformationEditor';
+import { TransformationsEditorTransformation } from './types';
interface TransformationOperationRowProps {
id: string;
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx
index 6477e0ee920..c9849c755d5 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+
import { DataFrame, DataTransformerConfig, standardTransformersRegistry } from '@grafana/data';
import { TransformationOperationRow } from './TransformationOperationRow';
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx
index da6ff1462fd..83586953eb1 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
-import { DataTransformerConfig, standardTransformersRegistry } from '@grafana/data';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { TransformationsEditor } from './TransformationsEditor';
-import { PanelModel } from '../../state';
-import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
+import React from 'react';
+
+import { DataTransformerConfig, standardTransformersRegistry } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
+
+import { PanelModel } from '../../state';
+
+import { TransformationsEditor } from './TransformationsEditor';
const setup = (transformations: DataTransformerConfig[] = []) => {
const panel = new PanelModel({});
@@ -33,13 +36,13 @@ describe('TransformationsEditor', () => {
options: {},
},
]);
- const editors = screen.getAllByLabelText(/^Transformation editor/g);
+ const editors = screen.getAllByLabelText(/^Transformation editor/);
expect(editors).toHaveLength(1);
});
});
describe('when Add transformation clicked', () => {
- it('renders transformations picker', () => {
+ it('renders transformations picker', async () => {
const buttonLabel = 'Add transformation';
setup([
{
@@ -49,7 +52,7 @@ describe('TransformationsEditor', () => {
]);
const addTransformationButton = screen.getByText(buttonLabel);
- userEvent.click(addTransformationButton);
+ await userEvent.click(addTransformationButton);
const search = screen.getByLabelText(selectors.components.Transforms.searchInput);
expect(search).toBeDefined();
@@ -58,7 +61,7 @@ describe('TransformationsEditor', () => {
describe('actions', () => {
describe('debug', () => {
- it('should show/hide debugger', () => {
+ it('should show/hide debugger', async () => {
setup([
{
id: 'reduce',
@@ -70,7 +73,7 @@ describe('TransformationsEditor', () => {
expect(screen.queryByLabelText(debuggerSelector)).toBeNull();
const debugButton = screen.getByLabelText(selectors.components.QueryEditorRow.actionButton('Debug'));
- userEvent.click(debugButton);
+ await userEvent.click(debugButton);
expect(screen.getByLabelText(debuggerSelector)).toBeInTheDocument();
});
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 5450522ce61..8e9c99230ed 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -1,4 +1,19 @@
+import { css } from '@emotion/css';
import React, { ChangeEvent } from 'react';
+import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { Unsubscribable } from 'rxjs';
+
+import {
+ DataFrame,
+ DataTransformerConfig,
+ DocsId,
+ GrafanaTheme2,
+ PanelData,
+ SelectableValue,
+ standardTransformersRegistry,
+ TransformerRegistryItem,
+} from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import {
Alert,
Button,
@@ -12,28 +27,16 @@ import {
useStyles2,
Card,
} from '@grafana/ui';
-import {
- DataFrame,
- DataTransformerConfig,
- DocsId,
- GrafanaTheme2,
- PanelData,
- SelectableValue,
- standardTransformersRegistry,
- TransformerRegistryItem,
-} from '@grafana/data';
-import { css } from '@emotion/css';
-import { selectors } from '@grafana/e2e-selectors';
-import { Unsubscribable } from 'rxjs';
-import { PanelModel } from '../../state';
+import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
import { getDocsLink } from 'app/core/utils/docsLinks';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
+
+import { AppNotificationSeverity } from '../../../../types';
+import { PanelModel } from '../../state';
+import { PanelNotSupported } from '../PanelEditor/PanelNotSupported';
+
import { TransformationOperationRows } from './TransformationOperationRows';
import { TransformationsEditorTransformation } from './types';
-import { PanelNotSupported } from '../PanelEditor/PanelNotSupported';
-import { AppNotificationSeverity } from '../../../../types';
-import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
-import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
const LOCAL_STORAGE_KEY = 'dashboard.components.TransformationEditor.featureInfoBox.isDismissed';
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx b/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
index cfe61de8e7f..487d43c8d37 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import { last } from 'lodash';
-import { useStyles } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
import { css } from '@emotion/css';
+import { last } from 'lodash';
+import React from 'react';
+
+import { GrafanaTheme } from '@grafana/data';
+import { useStyles } from '@grafana/ui';
+
import { DiffTitle } from './DiffTitle';
import { DiffValues } from './DiffValues';
import { Diff, getDiffText } from './utils';
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx b/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
index 1637b4b76b0..e62157343d9 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
-import { useStyles, Icon } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
import { css } from '@emotion/css';
-import { Diff, getDiffText } from './utils';
+import React from 'react';
+
+import { GrafanaTheme } from '@grafana/data';
+import { useStyles, Icon } from '@grafana/ui';
+
import { DiffValues } from './DiffValues';
+import { Diff, getDiffText } from './utils';
type DiffTitleProps = {
diff?: Diff;
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
index f7e901213f9..c59207bf466 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import { isArray, isObject, isUndefined } from 'lodash';
-import { useStyles2, Icon } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
import { css } from '@emotion/css';
+import { isArray, isObject, isUndefined } from 'lodash';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, Icon } from '@grafana/ui';
+
import { Diff } from './utils';
type DiffProps = {
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
index fcf0cfc7ca4..52490961500 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
import { css } from '@emotion/css';
+import React from 'react';
import ReactDiffViewer, { ReactDiffViewerProps, DiffMethod } from 'react-diff-viewer';
-import { useTheme } from '@grafana/ui';
import tinycolor from 'tinycolor2';
+import { useTheme } from '@grafana/ui';
+
export const DiffViewer: React.FC = ({ oldValue, newValue }) => {
const theme = useTheme();
diff --git a/public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts b/public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts
index fd36f7b2a37..8502085fad7 100644
--- a/public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts
+++ b/public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts
@@ -1,7 +1,8 @@
-import { restore, versions } from './__mocks__/dashboardHistoryMocks';
-import { HistorySrv } from './HistorySrv';
import { DashboardModel } from '../../state/DashboardModel';
+import { HistorySrv } from './HistorySrv';
+import { restore, versions } from './__mocks__/dashboardHistoryMocks';
+
const getMock = jest.fn().mockResolvedValue({});
const postMock = jest.fn().mockResolvedValue({});
diff --git a/public/app/features/dashboard/components/VersionHistory/HistorySrv.ts b/public/app/features/dashboard/components/VersionHistory/HistorySrv.ts
index 5bcd302ffac..0c9db504b01 100644
--- a/public/app/features/dashboard/components/VersionHistory/HistorySrv.ts
+++ b/public/app/features/dashboard/components/VersionHistory/HistorySrv.ts
@@ -1,7 +1,9 @@
import { isNumber } from 'lodash';
-import { DashboardModel } from '../../state/DashboardModel';
+
import { getBackendSrv } from '@grafana/runtime';
+import { DashboardModel } from '../../state/DashboardModel';
+
export interface HistoryListOpts {
limit: number;
start: number;
diff --git a/public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx b/public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx
index f4f2641d5e0..0420131e03a 100644
--- a/public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx
@@ -1,5 +1,7 @@
import React, { useEffect } from 'react';
+
import { ConfirmModal } from '@grafana/ui';
+
import { useDashboardRestore } from './useDashboardRestore';
export interface RevertDashboardModalProps {
hideModal: () => void;
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
index b720d72822b..c8d0d1ad083 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+
import { HorizontalGroup, Tooltip, Button } from '@grafana/ui';
type VersionsButtonsType = {
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
index e132b20a647..8af4e929f90 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
import { css, cx } from '@emotion/css';
+import React from 'react';
+import { GrafanaTheme } from '@grafana/data';
import { Button, ModalsController, CollapsableSection, HorizontalGroup, useStyles } from '@grafana/ui';
+
import { DecoratedRevisionModel } from '../DashboardSettings/VersionsSettings';
-import { RevertDashboardModal } from './RevertDashboardModal';
+
import { DiffGroup } from './DiffGroup';
import { DiffViewer } from './DiffViewer';
+import { RevertDashboardModal } from './RevertDashboardModal';
import { jsonDiff } from './utils';
-import { GrafanaTheme } from '@grafana/data';
type DiffViewProps = {
isNewLatest: boolean;
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
index 8ad1cd2ccee..c1109172d62 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
import { css } from '@emotion/css';
import { noop } from 'lodash';
+import React from 'react';
+
import { GrafanaTheme } from '@grafana/data';
import { Icon, useStyles } from '@grafana/ui';
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
index c0b12528f3c..b1809b4502e 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
@@ -1,7 +1,10 @@
-import React from 'react';
import { css } from '@emotion/css';
+import React from 'react';
+
import { Checkbox, Button, Tag, ModalsController } from '@grafana/ui';
+
import { DecoratedRevisionModel } from '../DashboardSettings/VersionsSettings';
+
import { RevertDashboardModal } from './RevertDashboardModal';
type VersionsTableProps = {
diff --git a/public/app/features/dashboard/components/VersionHistory/useDashboardRestore.tsx b/public/app/features/dashboard/components/VersionHistory/useDashboardRestore.tsx
index f2422cc850d..b54c2d017fb 100644
--- a/public/app/features/dashboard/components/VersionHistory/useDashboardRestore.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/useDashboardRestore.tsx
@@ -1,12 +1,15 @@
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useAsyncFn } from 'react-use';
+
import { locationUtil } from '@grafana/data';
-import { StoreState } from 'app/types';
-import { useAppNotification } from 'app/core/copy/appNotification';
-import { historySrv } from './HistorySrv';
-import { DashboardModel } from '../../state';
import { locationService } from '@grafana/runtime';
+import { useAppNotification } from 'app/core/copy/appNotification';
+import { StoreState } from 'app/types';
+
+import { DashboardModel } from '../../state';
+
+import { historySrv } from './HistorySrv';
const restoreDashboard = async (version: number, dashboard: DashboardModel) => {
return await historySrv.restoreDashboard(dashboard, version);
diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx
index 4c68581de51..c81a9980224 100644
--- a/public/app/features/dashboard/containers/DashboardPage.test.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx
@@ -1,23 +1,30 @@
+import { render, screen } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
-import { Props, UnthemedDashboardPage } from './DashboardPage';
-import { Props as LazyLoaderProps } from '../dashgrid/LazyLoader';
import { Router } from 'react-router-dom';
-import { locationService, setDataSourceSrv } from '@grafana/runtime';
-import { DashboardModel } from '../state';
-import { configureStore } from '../../../store/configureStore';
-import { mockToolkitActionCreator } from 'test/core/redux/mocks';
-import { DashboardInitPhase, DashboardRoutes } from 'app/types';
-import { notifyApp } from 'app/core/actions';
-import { selectors } from '@grafana/e2e-selectors';
-import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
-import { createTheme } from '@grafana/data';
+import { useEffectOnce } from 'react-use';
import { AutoSizerProps } from 'react-virtualized-auto-sizer';
+import { mockToolkitActionCreator } from 'test/core/redux/mocks';
+
+import { createTheme } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { locationService, setDataSourceSrv } from '@grafana/runtime';
+import { notifyApp } from 'app/core/actions';
+import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
+import { DashboardInitPhase, DashboardRoutes } from 'app/types';
+
+import { configureStore } from '../../../store/configureStore';
+import { Props as LazyLoaderProps } from '../dashgrid/LazyLoader';
import { setDashboardSrv } from '../services/DashboardSrv';
+import { DashboardModel } from '../state';
+
+import { Props, UnthemedDashboardPage } from './DashboardPage';
jest.mock('app/features/dashboard/dashgrid/LazyLoader', () => {
- const LazyLoader = ({ children }: Pick) => {
+ const LazyLoader = ({ children, onLoad }: Pick) => {
+ useEffectOnce(() => {
+ onLoad?.();
+ });
return <>{typeof children === 'function' ? children({ isInView: true }) : children};
};
return { LazyLoader };
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index c73c0c6fb16..32904dd6042 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -1,35 +1,37 @@
-import React, { PureComponent } from 'react';
import { css } from '@emotion/css';
+import classnames from 'classnames';
+import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
-import { locationService } from '@grafana/runtime';
+
+import { GrafanaTheme2, TimeRange } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { locationService } from '@grafana/runtime';
import { CustomScrollbar, stylesFactory, Themeable2, withTheme2 } from '@grafana/ui';
-import { createErrorNotification } from 'app/core/copy/appNotification';
-import { Branding } from 'app/core/components/Branding/Branding';
-import { DashboardGrid } from '../dashgrid/DashboardGrid';
-import { DashNav } from '../components/DashNav';
-import { DashboardSettings } from '../components/DashboardSettings';
-import { PanelEditor } from '../components/PanelEditor/PanelEditor';
-import { initDashboard } from '../state/initDashboard';
import { notifyApp } from 'app/core/actions';
-import { KioskMode, StoreState } from 'app/types';
+import { Branding } from 'app/core/components/Branding/Branding';
+import { createErrorNotification } from 'app/core/copy/appNotification';
+import { getKioskMode } from 'app/core/navigation/kiosk';
+import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { PanelModel } from 'app/features/dashboard/state';
-import { PanelInspector } from '../components/Inspector/PanelInspector';
-import { SubMenu } from '../components/SubMenu/SubMenu';
-import { cleanUpDashboardAndVariables } from '../state/actions';
+import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
+import { KioskMode, StoreState } from 'app/types';
+import { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';
+
import { cancelVariables, templateVarsChangedInUrl } from '../../variables/state/actions';
import { findTemplateVarChanges } from '../../variables/utils';
-import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
-import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-import { getTimeSrv } from '../services/TimeSrv';
-import { getKioskMode } from 'app/core/navigation/kiosk';
-import { GrafanaTheme2, TimeRange } from '@grafana/data';
-import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
+import { DashNav } from '../components/DashNav';
import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
+import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
-import classnames from 'classnames';
-import { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';
+import { DashboardSettings } from '../components/DashboardSettings';
+import { PanelInspector } from '../components/Inspector/PanelInspector';
+import { PanelEditor } from '../components/PanelEditor/PanelEditor';
+import { SubMenu } from '../components/SubMenu/SubMenu';
+import { DashboardGrid } from '../dashgrid/DashboardGrid';
import { liveTimer } from '../dashgrid/liveTimer';
+import { getTimeSrv } from '../services/TimeSrv';
+import { cleanUpDashboardAndVariables } from '../state/actions';
+import { initDashboard } from '../state/initDashboard';
export interface DashboardPageRouteParams {
uid?: string;
diff --git a/public/app/features/dashboard/containers/SoloPanelPage.test.tsx b/public/app/features/dashboard/containers/SoloPanelPage.test.tsx
index 9ae03c233cb..c292c978f37 100644
--- a/public/app/features/dashboard/containers/SoloPanelPage.test.tsx
+++ b/public/app/features/dashboard/containers/SoloPanelPage.test.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
-import { Props, SoloPanelPage } from './SoloPanelPage';
+import React from 'react';
+
+import { DashboardRoutes } from 'app/types';
+
+import { getRouteComponentProps } from '../../../core/navigation/__mocks__/routeProps';
import { Props as DashboardPanelProps } from '../dashgrid/DashboardPanel';
import { DashboardModel } from '../state';
-import { DashboardRoutes } from 'app/types';
-import { getRouteComponentProps } from '../../../core/navigation/__mocks__/routeProps';
+
+import { Props, SoloPanelPage } from './SoloPanelPage';
jest.mock('app/features/dashboard/components/DashboardSettings/GeneralSettings', () => ({}));
jest.mock('app/features/dashboard/dashgrid/DashboardPanel', () => {
diff --git a/public/app/features/dashboard/containers/SoloPanelPage.tsx b/public/app/features/dashboard/containers/SoloPanelPage.tsx
index b03acf813bd..2d7360f2cdb 100644
--- a/public/app/features/dashboard/containers/SoloPanelPage.tsx
+++ b/public/app/features/dashboard/containers/SoloPanelPage.tsx
@@ -1,11 +1,13 @@
import React, { Component } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
+
+import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+import { StoreState } from 'app/types';
+
import { DashboardPanel } from '../dashgrid/DashboardPanel';
import { initDashboard } from '../state/initDashboard';
-import { StoreState } from 'app/types';
-import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
-import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
export interface DashboardPageRouteParams {
uid?: string;
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
index e12caba291c..95963ad97d5 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
-import { DashboardGridUnconnected as DashboardGrid, Props } from './DashboardGrid';
+import React from 'react';
+
import { DashboardModel } from '../state';
+import { DashboardGridUnconnected as DashboardGrid, Props } from './DashboardGrid';
+
jest.mock('app/features/dashboard/dashgrid/LazyLoader', () => {
const LazyLoader: React.FC = ({ children }) => {
return <>{children};
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 29d6578dc9a..e5d8e613f20 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -1,23 +1,21 @@
-// Libraries
+import classNames from 'classnames';
import React, { PureComponent, CSSProperties } from 'react';
import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
-import classNames from 'classnames';
+import { connect, ConnectedProps } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
+import { Subscription } from 'rxjs';
+
+import { config } from '@grafana/runtime';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
+import { cleanAndRemoveMany } from 'app/features/panel/state/actions';
+import { DashboardPanelsChangedEvent } from 'app/types/events';
-// Components
import { AddPanelWidget } from '../components/AddPanelWidget';
import { DashboardRow } from '../components/DashboardRow';
-
-// Types
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
-import { DashboardPanel } from './DashboardPanel';
import { DashboardModel, PanelModel } from '../state';
-import { Subscription } from 'rxjs';
-import { connect, ConnectedProps } from 'react-redux';
-import { DashboardPanelsChangedEvent } from 'app/types/events';
-import { cleanAndRemoveMany } from 'app/features/panel/state/actions';
import { GridPos } from '../state/PanelModel';
-import { config } from '@grafana/runtime';
+
+import { DashboardPanel } from './DashboardPanel';
export interface OwnProps {
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index 0401ecf9397..773e6de1709 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -1,13 +1,15 @@
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
+
+import { StoreState } from 'app/types';
+
+import { initPanelState } from '../../panel/state/actions';
+import { setPanelInstanceState } from '../../panel/state/reducers';
+import { DashboardModel, PanelModel } from '../state';
+
+import { LazyLoader } from './LazyLoader';
import { PanelChrome } from './PanelChrome';
import { PanelChromeAngular } from './PanelChromeAngular';
-import { DashboardModel, PanelModel } from '../state';
-import { StoreState } from 'app/types';
-import { PanelPlugin } from '@grafana/data';
-import { setPanelInstanceState } from '../../panel/state/reducers';
-import { initPanelState } from '../../panel/state/actions';
-import { LazyLoader } from './LazyLoader';
export interface OwnProps {
panel: PanelModel;
@@ -48,8 +50,8 @@ export class DashboardPanelUnconnected extends PureComponent {
componentDidMount() {
this.props.panel.isInView = !this.props.lazy;
- if (!this.props.plugin) {
- this.props.initPanelState(this.props.panel);
+ if (!this.props.lazy) {
+ this.onPanelLoad();
}
}
@@ -61,11 +63,18 @@ export class DashboardPanelUnconnected extends PureComponent {
this.props.panel.isInView = v;
};
- renderPanel(plugin: PanelPlugin) {
- const { dashboard, panel, isViewing, isEditing, width, height, lazy } = this.props;
+ onPanelLoad = () => {
+ if (!this.props.plugin) {
+ this.props.initPanelState(this.props.panel);
+ }
+ };
+
+ render() {
+ const { dashboard, panel, isViewing, isEditing, width, height, lazy, plugin } = this.props;
const renderPanelChrome = (isInView: boolean) =>
- plugin.angularPanelCtrl ? (
+ plugin &&
+ (plugin.angularPanelCtrl ? (
{
height={height}
onInstanceStateChange={this.onInstanceStateChange}
/>
- );
+ ));
return lazy ? (
-
+
{({ isInView }) => renderPanelChrome(isInView)}
) : (
renderPanelChrome(true)
);
}
-
- render() {
- const { plugin } = this.props;
-
- // If we have not loaded plugin exports yet, wait
- if (!plugin) {
- return null;
- }
-
- return this.renderPanel(plugin);
- }
}
export const DashboardPanel = connector(DashboardPanelUnconnected);
diff --git a/public/app/features/dashboard/dashgrid/LazyLoader.tsx b/public/app/features/dashboard/dashgrid/LazyLoader.tsx
index 30f9034a125..da9339e5459 100644
--- a/public/app/features/dashboard/dashgrid/LazyLoader.tsx
+++ b/public/app/features/dashboard/dashgrid/LazyLoader.tsx
@@ -1,7 +1,8 @@
import React, { useRef, useState } from 'react';
-import { useUniqueId } from 'app/plugins/datasource/influxdb/components/useUniqueId';
import { useEffectOnce } from 'react-use';
+import { useUniqueId } from 'app/plugins/datasource/influxdb/components/useUniqueId';
+
export interface Props {
children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);
width?: number;
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
index 148c3628c8a..a883596bac4 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
@@ -1,14 +1,16 @@
+import { act, render, screen } from '@testing-library/react';
import React, { FC } from 'react';
-import { ReplaySubject } from 'rxjs';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
-import { act, render, screen } from '@testing-library/react';
+import { ReplaySubject } from 'rxjs';
+
import { EventBusSrv, getDefaultTimeRange, LoadingState, PanelData, PanelPlugin, PanelProps } from '@grafana/data';
-import { PanelChrome, Props } from './PanelChrome';
-import { DashboardModel, PanelModel } from '../state';
import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
import { setTimeSrv, TimeSrv } from '../services/TimeSrv';
+import { DashboardModel, PanelModel } from '../state';
+
+import { PanelChrome, Props } from './PanelChrome';
jest.mock('app/core/profiler', () => ({
profiler: {
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 890c6c86075..7ace1ab35fa 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -1,7 +1,7 @@
-import React, { PureComponent } from 'react';
import classNames from 'classnames';
+import React, { PureComponent } from 'react';
import { Subscription } from 'rxjs';
-import { locationService, RefreshEvent } from '@grafana/runtime';
+
import {
AbsoluteTimeRange,
AnnotationChangeEvent,
@@ -19,26 +19,28 @@ import {
toDataFrameDTO,
toUtc,
} from '@grafana/data';
-import { ErrorBoundary, PanelContext, PanelContextProvider, SeriesVisibilityChangeMode } from '@grafana/ui';
-import { VizLegendOptions } from '@grafana/schema';
import { selectors } from '@grafana/e2e-selectors';
-
-import { PanelHeader } from './PanelHeader/PanelHeader';
-import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
-import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
-import { profiler } from 'app/core/profiler';
+import { locationService, RefreshEvent } from '@grafana/runtime';
+import { VizLegendOptions } from '@grafana/schema';
+import { ErrorBoundary, PanelContext, PanelContextProvider, SeriesVisibilityChangeMode } from '@grafana/ui';
import config from 'app/core/config';
-import { DashboardModel, PanelModel } from '../state';
import { PANEL_BORDER } from 'app/core/constants';
-import { loadSnapshotData } from '../utils/loadSnapshotData';
-import { RenderEvent } from 'app/types/events';
+import { profiler } from 'app/core/profiler';
+import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
import { changeSeriesColorConfigFactory } from 'app/plugins/panel/timeseries/overrides/colorSeriesConfigFactory';
-import { seriesVisibilityConfigFactory } from './SeriesVisibilityConfigFactory';
+import { RenderEvent } from 'app/types/events';
+
+import { contextSrv } from '../../../core/services/context_srv';
+import { isSoloRoute } from '../../../routes/utils';
import { deleteAnnotation, saveAnnotation, updateAnnotation } from '../../annotations/api';
import { getDashboardQueryRunner } from '../../query/state/DashboardQueryRunner/DashboardQueryRunner';
+import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
+import { DashboardModel, PanelModel } from '../state';
+import { loadSnapshotData } from '../utils/loadSnapshotData';
+
+import { PanelHeader } from './PanelHeader/PanelHeader';
+import { seriesVisibilityConfigFactory } from './SeriesVisibilityConfigFactory';
import { liveTimer } from './liveTimer';
-import { isSoloRoute } from '../../../routes/utils';
-import { contextSrv } from '../../../core/services/context_srv';
const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
index 3d82607222b..7f967d603b1 100644
--- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
@@ -1,20 +1,22 @@
-import React, { PureComponent } from 'react';
import classNames from 'classnames';
-import { Subscription } from 'rxjs';
+import React, { PureComponent } from 'react';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
-import { AngularComponent, getAngularLoader, locationService } from '@grafana/runtime';
+import { Subscription } from 'rxjs';
+
import { getDefaultTimeRange, LoadingState, PanelData, PanelPlugin } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
+import { AngularComponent, getAngularLoader, locationService } from '@grafana/runtime';
+import config from 'app/core/config';
+import { PANEL_BORDER } from 'app/core/constants';
+import { setPanelAngularComponent } from 'app/features/panel/state/reducers';
+import { getPanelStateForModel } from 'app/features/panel/state/selectors';
+import { StoreState } from 'app/types';
+
+import { isSoloRoute } from '../../../routes/utils';
+import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
+import { DashboardModel, PanelModel } from '../state';
import { PanelHeader } from './PanelHeader/PanelHeader';
-import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
-import { setPanelAngularComponent } from 'app/features/panel/state/reducers';
-import config from 'app/core/config';
-import { DashboardModel, PanelModel } from '../state';
-import { StoreState } from 'app/types';
-import { PANEL_BORDER } from 'app/core/constants';
-import { isSoloRoute } from '../../../routes/utils';
-import { getPanelStateForModel } from 'app/features/panel/state/selectors';
interface OwnProps {
panel: PanelModel;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index a5f020a89a6..36c377f0d37 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -1,17 +1,18 @@
-import React, { FC } from 'react';
import { css, cx } from '@emotion/css';
-import { DataLink, GrafanaTheme2, PanelData } from '@grafana/data';
-import { Icon, useStyles2 } from '@grafana/ui';
-import { selectors } from '@grafana/e2e-selectors';
+import React, { FC } from 'react';
-import PanelHeaderCorner from './PanelHeaderCorner';
+import { DataLink, GrafanaTheme2, PanelData } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { Icon, useStyles2 } from '@grafana/ui';
import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
import { getPanelLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
-import { PanelHeaderNotices } from './PanelHeaderNotices';
-import { PanelHeaderMenuTrigger } from './PanelHeaderMenuTrigger';
+
+import PanelHeaderCorner from './PanelHeaderCorner';
import { PanelHeaderLoadingIndicator } from './PanelHeaderLoadingIndicator';
+import { PanelHeaderMenuTrigger } from './PanelHeaderMenuTrigger';
import { PanelHeaderMenuWrapper } from './PanelHeaderMenuWrapper';
+import { PanelHeaderNotices } from './PanelHeaderNotices';
export interface Props {
panel: PanelModel;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.test.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.test.tsx
index 9d2095e2572..20a88cff82d 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.test.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { shallow } from 'enzyme';
-import { PanelHeaderCorner } from './PanelHeaderCorner';
+import React from 'react';
+
import { PanelModel } from '../../state';
+import { PanelHeaderCorner } from './PanelHeaderCorner';
+
describe('Render', () => {
it('should render component', () => {
const panel = new PanelModel({});
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 0448a550a08..09b5b83cfd1 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -1,13 +1,12 @@
import React, { Component } from 'react';
import { renderMarkdown, LinkModelSupplier, ScopedVars } from '@grafana/data';
-import { Tooltip, PopoverContent } from '@grafana/ui';
-import { locationService, getTemplateSrv } from '@grafana/runtime';
-
-import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import { InspectTab } from 'app/features/inspector/types';
import { selectors } from '@grafana/e2e-selectors';
+import { locationService, getTemplateSrv } from '@grafana/runtime';
+import { Tooltip, PopoverContent } from '@grafana/ui';
+import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { PanelModel } from 'app/features/dashboard/state/PanelModel';
+import { InspectTab } from 'app/features/inspector/types';
enum InfoMode {
Error = 'Error',
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
index fb1d42a596a..14151ba1417 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
import { css } from '@emotion/css';
+import React, { FC } from 'react';
+
import { GrafanaTheme, LoadingState } from '@grafana/data';
import { Icon, Tooltip, useStyles } from '@grafana/ui';
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
index c180359922a..af37c1b6dbc 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
@@ -1,7 +1,9 @@
import React, { PureComponent } from 'react';
-import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
+
import { PanelMenuItem } from '@grafana/data';
+import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
+
export interface Props {
items: PanelMenuItem[];
}
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
index ab1a5395583..2e25ccab6e9 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
@@ -1,8 +1,9 @@
-import React, { FC, useState } from 'react';
import { css } from '@emotion/css';
+import React, { FC, useState } from 'react';
+
import { PanelMenuItem } from '@grafana/data';
-import { Icon, IconName, useTheme } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
+import { Icon, IconName, useTheme } from '@grafana/ui';
interface Props {
children?: any;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuProvider.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuProvider.tsx
index b3b2afe1ab2..54088922bf1 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuProvider.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuProvider.tsx
@@ -1,12 +1,13 @@
import { FC, ReactElement, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
-import { PanelMenuItem } from '@grafana/data';
-import { DashboardModel, PanelModel } from '../../state';
-import { StoreState } from '../../../../types';
-import { getPanelMenu } from '../../utils/getPanelMenu';
+import { PanelMenuItem } from '@grafana/data';
import { getPanelStateForModel } from 'app/features/panel/state/selectors';
+import { StoreState } from '../../../../types';
+import { DashboardModel, PanelModel } from '../../state';
+import { getPanelMenu } from '../../utils/getPanelMenu';
+
interface PanelHeaderMenuProviderApi {
items: PanelMenuItem[];
}
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
index 509dd0e0c1e..174c07a2d49 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx
@@ -1,4 +1,5 @@
import React, { FC, HTMLAttributes, MouseEvent, ReactElement, useCallback, useState } from 'react';
+
import { CartesianCoords2D } from '@grafana/data';
interface PanelHeaderMenuTriggerApi {
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuWrapper.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuWrapper.tsx
index 596dc96fa65..40d69a5efe7 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuWrapper.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuWrapper.tsx
@@ -1,9 +1,12 @@
import React, { FC } from 'react';
+
import { ClickOutsideWrapper } from '@grafana/ui';
-import { PanelHeaderMenuProvider } from './PanelHeaderMenuProvider';
-import { PanelHeaderMenu } from './PanelHeaderMenu';
+
import { DashboardModel, PanelModel } from '../../state';
+import { PanelHeaderMenu } from './PanelHeaderMenu';
+import { PanelHeaderMenuProvider } from './PanelHeaderMenuProvider';
+
interface Props {
panel: PanelModel;
dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
index 16e9670523a..18e13ca1ccc 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
@@ -1,4 +1,5 @@
import React, { FC } from 'react';
+
import { QueryResultMetaNotice } from '@grafana/data';
import { Icon, Tooltip } from '@grafana/ui';
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx
index 4e70fdad7e9..76b98043de7 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx
@@ -1,8 +1,10 @@
import React, { FC, useCallback } from 'react';
+
import { DataFrame, QueryResultMetaNotice } from '@grafana/data';
-import { PanelHeaderNotice } from './PanelHeaderNotice';
import { locationService } from '@grafana/runtime';
+import { PanelHeaderNotice } from './PanelHeaderNotice';
+
interface Props {
panelId: number;
frames: DataFrame[];
diff --git a/public/app/features/dashboard/dashgrid/PanelResizer.tsx b/public/app/features/dashboard/dashgrid/PanelResizer.tsx
index 3bd191300ff..f7dd6757dac 100644
--- a/public/app/features/dashboard/dashgrid/PanelResizer.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelResizer.tsx
@@ -1,5 +1,5 @@
-import React, { PureComponent } from 'react';
import { throttle } from 'lodash';
+import React, { PureComponent } from 'react';
import Draggable, { DraggableEventHandler } from 'react-draggable';
import { PanelModel } from '../state/PanelModel';
diff --git a/public/app/features/dashboard/dashgrid/liveTimer.ts b/public/app/features/dashboard/dashgrid/liveTimer.ts
index 0631c3ca4db..65b37811ea3 100644
--- a/public/app/features/dashboard/dashgrid/liveTimer.ts
+++ b/public/app/features/dashboard/dashgrid/liveTimer.ts
@@ -1,5 +1,7 @@
-import { dateMath, dateTime, TimeRange } from '@grafana/data';
import { BehaviorSubject } from 'rxjs';
+
+import { dateMath, dateTime, TimeRange } from '@grafana/data';
+
import { PanelChrome } from './PanelChrome';
// target is 20hz (50ms), but we poll at 100ms to smooth out jitter
diff --git a/public/app/features/dashboard/services/DashboardLoaderSrv.ts b/public/app/features/dashboard/services/DashboardLoaderSrv.ts
index dc06ab6e1d2..68a4ec18e6f 100644
--- a/public/app/features/dashboard/services/DashboardLoaderSrv.ts
+++ b/public/app/features/dashboard/services/DashboardLoaderSrv.ts
@@ -1,16 +1,18 @@
-import moment from 'moment'; // eslint-disable-line no-restricted-imports
-// eslint-disable-next-line lodash/import-scope
-import _, { isFunction } from 'lodash';
import $ from 'jquery';
-import kbn from 'app/core/utils/kbn';
+import _, { isFunction } from 'lodash'; // eslint-disable-line lodash/import-scope
+import moment from 'moment'; // eslint-disable-line no-restricted-imports
+
import { AppEvents, dateMath, UrlQueryValue } from '@grafana/data';
-import impressionSrv from 'app/core/services/impression_srv';
-import { backendSrv } from 'app/core/services/backend_srv';
-import { getDashboardSrv } from './DashboardSrv';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import { getBackendSrv, locationService } from '@grafana/runtime';
+import { backendSrv } from 'app/core/services/backend_srv';
+import impressionSrv from 'app/core/services/impression_srv';
+import kbn from 'app/core/utils/kbn';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+
import { appEvents } from '../../../core/core';
+import { getDashboardSrv } from './DashboardSrv';
+
export class DashboardLoaderSrv {
constructor() {}
_dashboardLoadFailed(title: string, snapshot?: boolean) {
diff --git a/public/app/features/dashboard/services/DashboardSrv.ts b/public/app/features/dashboard/services/DashboardSrv.ts
index 7fa5084d850..0a0ae013172 100644
--- a/public/app/features/dashboard/services/DashboardSrv.ts
+++ b/public/app/features/dashboard/services/DashboardSrv.ts
@@ -1,12 +1,14 @@
+import { lastValueFrom } from 'rxjs';
+
+import { BackendSrvRequest } from '@grafana/runtime';
import { appEvents } from 'app/core/app_events';
-import { DashboardModel } from '../state/DashboardModel';
-import { removePanel } from '../utils/panel';
-import { DashboardMeta } from 'app/types';
import { getBackendSrv } from 'app/core/services/backend_srv';
import { saveDashboard } from 'app/features/manage-dashboards/state/actions';
+import { DashboardMeta } from 'app/types';
+
import { RemovePanelEvent } from '../../../types/events';
-import { BackendSrvRequest } from '@grafana/runtime';
-import { lastValueFrom } from 'rxjs';
+import { DashboardModel } from '../state/DashboardModel';
+import { removePanel } from '../utils/panel';
export interface SaveDashboardOptions {
/** The complete dashboard model. If `dashboard.id` is not set a new dashboard will be created. */
diff --git a/public/app/features/dashboard/services/TimeSrv.test.ts b/public/app/features/dashboard/services/TimeSrv.test.ts
index 90220dd63c1..26124b7b299 100644
--- a/public/app/features/dashboard/services/TimeSrv.test.ts
+++ b/public/app/features/dashboard/services/TimeSrv.test.ts
@@ -1,10 +1,13 @@
-import { TimeSrv } from './TimeSrv';
-import { ContextSrvStub } from 'test/specs/helpers';
-import { dateTime, isDateTime } from '@grafana/data';
import * as H from 'history';
+import { ContextSrvStub } from 'test/specs/helpers';
+
+import { dateTime, isDateTime } from '@grafana/data';
import { HistoryWrapper, locationService, setLocationService } from '@grafana/runtime';
+
import { beforeEach } from '../../../../test/lib/common';
+import { TimeSrv } from './TimeSrv';
+
jest.mock('app/core/core', () => ({
appEvents: {
subscribe: () => {},
diff --git a/public/app/features/dashboard/services/TimeSrv.ts b/public/app/features/dashboard/services/TimeSrv.ts
index 490f480ce55..7966a83387b 100644
--- a/public/app/features/dashboard/services/TimeSrv.ts
+++ b/public/app/features/dashboard/services/TimeSrv.ts
@@ -1,4 +1,5 @@
import { cloneDeep, extend, isString } from 'lodash';
+
import {
dateMath,
dateTime,
@@ -9,14 +10,15 @@ import {
TimeRange,
toUtc,
} from '@grafana/data';
-import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';
-import { config } from 'app/core/config';
-import { getRefreshFromUrl } from '../utils/getRefreshFromUrl';
import { locationService } from '@grafana/runtime';
-import { AbsoluteTimeEvent, ShiftTimeEvent, ShiftTimeEventDirection, ZoomOutEvent } from '../../../types/events';
-import { contextSrv, ContextSrv } from 'app/core/services/context_srv';
import appEvents from 'app/core/app_events';
+import { config } from 'app/core/config';
+import { contextSrv, ContextSrv } from 'app/core/services/context_srv';
+import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';
+
+import { AbsoluteTimeEvent, ShiftTimeEvent, ShiftTimeEventDirection, ZoomOutEvent } from '../../../types/events';
import { TimeModel } from '../state/TimeModel';
+import { getRefreshFromUrl } from '../utils/getRefreshFromUrl';
export class TimeSrv {
time: any;
diff --git a/public/app/features/dashboard/state/DashboardMigrator.test.ts b/public/app/features/dashboard/state/DashboardMigrator.test.ts
index 201ba1ce202..b53a4088208 100644
--- a/public/app/features/dashboard/state/DashboardMigrator.test.ts
+++ b/public/app/features/dashboard/state/DashboardMigrator.test.ts
@@ -1,15 +1,17 @@
import { each, map } from 'lodash';
+import { expect } from 'test/lib/common';
+
+import { DataLinkBuiltInVars, MappingType } from '@grafana/data';
+import { setDataSourceSrv } from '@grafana/runtime';
+import { config } from 'app/core/config';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
+import { mockDataSource, MockDataSourceSrv } from 'app/features/alerting/unified/mocks';
+import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
+import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
+
+import { VariableHide } from '../../variables/types';
import { DashboardModel } from '../state/DashboardModel';
import { PanelModel } from '../state/PanelModel';
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
-import { expect } from 'test/lib/common';
-import { DataLinkBuiltInVars, MappingType } from '@grafana/data';
-import { VariableHide } from '../../variables/types';
-import { config } from 'app/core/config';
-import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
-import { setDataSourceSrv } from '@grafana/runtime';
-import { mockDataSource, MockDataSourceSrv } from 'app/features/alerting/unified/mocks';
-import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
jest.mock('app/core/services/context_srv', () => ({}));
diff --git a/public/app/features/dashboard/state/DashboardMigrator.ts b/public/app/features/dashboard/state/DashboardMigrator.ts
index 7ee735ff5d4..f9e5be516c0 100644
--- a/public/app/features/dashboard/state/DashboardMigrator.ts
+++ b/public/app/features/dashboard/state/DashboardMigrator.ts
@@ -1,11 +1,5 @@
-// Libraries
import { each, find, findIndex, flattenDeep, isArray, isBoolean, isNumber, isString, map, max, some } from 'lodash';
-// Utils
-import getFactors from 'app/core/utils/factors';
-import kbn from 'app/core/utils/kbn';
-// Types
-import { PanelModel } from './PanelModel';
-import { DashboardModel } from './DashboardModel';
+
import {
AnnotationQuery,
DataLink,
@@ -29,7 +23,10 @@ import {
ValueMap,
ValueMapping,
} from '@grafana/data';
-// Constants
+import { getDataSourceSrv, setDataSourceSrv } from '@grafana/runtime';
+import { AxisPlacement, GraphFieldConfig } from '@grafana/ui';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry';
+import { config } from 'app/core/config';
import {
DEFAULT_PANEL_SPAN,
DEFAULT_ROW_HEIGHT,
@@ -38,24 +35,26 @@ import {
GRID_COLUMN_COUNT,
MIN_PANEL_HEIGHT,
} from 'app/core/constants';
+import getFactors from 'app/core/utils/factors';
+import kbn from 'app/core/utils/kbn';
+import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
import { isConstant, isMulti } from 'app/features/variables/guard';
import { alignCurrentWithMulti } from 'app/features/variables/shared/multiOptions';
-import { VariableHide } from '../../variables/types';
-import { config } from 'app/core/config';
-import { plugin as statPanelPlugin } from 'app/plugins/panel/stat/module';
-import { plugin as gaugePanelPlugin } from 'app/plugins/panel/gauge/module';
-import { AxisPlacement, GraphFieldConfig } from '@grafana/ui';
-import { getDataSourceSrv, setDataSourceSrv } from '@grafana/runtime';
-import { labelsToFieldsTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/labelsToFields';
-import { mergeTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/merge';
import {
migrateCloudWatchQuery,
migrateMultipleStatsAnnotationQuery,
migrateMultipleStatsMetricsQuery,
} from 'app/plugins/datasource/cloudwatch/migrations';
import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from 'app/plugins/datasource/cloudwatch/types';
-import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry';
-import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { plugin as gaugePanelPlugin } from 'app/plugins/panel/gauge/module';
+import { plugin as statPanelPlugin } from 'app/plugins/panel/stat/module';
+
+import { labelsToFieldsTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/labelsToFields';
+import { mergeTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/merge';
+import { VariableHide } from '../../variables/types';
+
+import { DashboardModel } from './DashboardModel';
+import { PanelModel } from './PanelModel';
standardEditorsRegistry.setInit(getAllOptionEditors);
standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs);
diff --git a/public/app/features/dashboard/state/DashboardModel.refresh.test.ts b/public/app/features/dashboard/state/DashboardModel.refresh.test.ts
index 338540becdc..8eed7928506 100644
--- a/public/app/features/dashboard/state/DashboardModel.refresh.test.ts
+++ b/public/app/features/dashboard/state/DashboardModel.refresh.test.ts
@@ -1,9 +1,10 @@
-import { DashboardModel } from './DashboardModel';
+import { afterEach, beforeEach } from '../../../../test/lib/common';
import { appEvents } from '../../../core/core';
import { VariablesChanged } from '../../variables/types';
-import { PanelModel } from './PanelModel';
import { getTimeSrv, setTimeSrv } from '../services/TimeSrv';
-import { afterEach, beforeEach } from '../../../../test/lib/common';
+
+import { DashboardModel } from './DashboardModel';
+import { PanelModel } from './PanelModel';
function getTestContext({
usePanelInEdit,
diff --git a/public/app/features/dashboard/state/DashboardModel.repeat.test.ts b/public/app/features/dashboard/state/DashboardModel.repeat.test.ts
index e393b98d8eb..b333eb878a4 100644
--- a/public/app/features/dashboard/state/DashboardModel.repeat.test.ts
+++ b/public/app/features/dashboard/state/DashboardModel.repeat.test.ts
@@ -1,10 +1,13 @@
import { compact, flattenDeep, map, uniq } from 'lodash';
-import { DashboardModel } from '../state/DashboardModel';
import { expect } from 'test/lib/common';
-import { getDashboardModel } from '../../../../test/helpers/getDashboardModel';
-import { PanelModel } from './PanelModel';
+
import { DashboardPanelsChangedEvent } from 'app/types/events';
+import { getDashboardModel } from '../../../../test/helpers/getDashboardModel';
+import { DashboardModel } from '../state/DashboardModel';
+
+import { PanelModel } from './PanelModel';
+
jest.mock('app/core/services/context_srv', () => ({}));
describe('given dashboard with panel repeat', () => {
diff --git a/public/app/features/dashboard/state/DashboardModel.test.ts b/public/app/features/dashboard/state/DashboardModel.test.ts
index 764cccd8fcd..f5d494a780c 100644
--- a/public/app/features/dashboard/state/DashboardModel.test.ts
+++ b/public/app/features/dashboard/state/DashboardModel.test.ts
@@ -1,13 +1,14 @@
import { keys as _keys } from 'lodash';
-import { DashboardModel } from '../state/DashboardModel';
-import { PanelModel } from '../state/PanelModel';
+
import { getDashboardModel } from '../../../../test/helpers/getDashboardModel';
+import { expect } from '../../../../test/lib/common';
import { variableAdapters } from '../../variables/adapters';
import { createAdHocVariableAdapter } from '../../variables/adhoc/adapter';
-import { createQueryVariableAdapter } from '../../variables/query/adapter';
import { createCustomVariableAdapter } from '../../variables/custom/adapter';
-import { expect } from '../../../../test/lib/common';
+import { createQueryVariableAdapter } from '../../variables/query/adapter';
import { setTimeSrv, TimeSrv } from '../services/TimeSrv';
+import { DashboardModel } from '../state/DashboardModel';
+import { PanelModel } from '../state/PanelModel';
jest.mock('app/core/services/context_srv', () => ({}));
diff --git a/public/app/features/dashboard/state/DashboardModel.ts b/public/app/features/dashboard/state/DashboardModel.ts
index 874127c04d0..1c99bb5a33a 100644
--- a/public/app/features/dashboard/state/DashboardModel.ts
+++ b/public/app/features/dashboard/state/DashboardModel.ts
@@ -1,4 +1,3 @@
-// Libaries
import {
cloneDeep,
defaults as _defaults,
@@ -13,15 +12,8 @@ import {
pull,
some,
} from 'lodash';
-// Constants
-import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL } from 'app/core/constants';
-// Utils & Services
-import { contextSrv } from 'app/core/services/context_srv';
-// Types
-import { GridPos, PanelModel } from './PanelModel';
-import { TimeModel } from './TimeModel';
-import { DashboardMigrator } from './DashboardMigrator';
+import { Subscription } from 'rxjs';
+
import {
AnnotationQuery,
AppEvent,
@@ -37,26 +29,33 @@ import {
TimeZone,
UrlQueryValue,
} from '@grafana/data';
-import { CoreEvents, DashboardMeta, KioskMode } from 'app/types';
-import { GetVariables, getVariablesByKey } from 'app/features/variables/state/selectors';
+import { RefreshEvent, TimeRangeUpdatedEvent } from '@grafana/runtime';
+import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL } from 'app/core/constants';
+import { contextSrv } from 'app/core/services/context_srv';
+import { sortedDeepCloneWithoutNulls } from 'app/core/utils/object';
import { variableAdapters } from 'app/features/variables/adapters';
import { onTimeRangeUpdated } from 'app/features/variables/state/actions';
-import { dispatch } from '../../../store/store';
-import { isAllVariable } from '../../variables/utils';
+import { GetVariables, getVariablesByKey } from 'app/features/variables/state/selectors';
+import { CoreEvents, DashboardMeta, KioskMode } from 'app/types';
import { DashboardPanelsChangedEvent, RenderEvent } from 'app/types/events';
-import { getTimeSrv } from '../services/TimeSrv';
-import { mergePanels, PanelMergeInfo } from '../utils/panelMerge';
-import { deleteScopeVars, isOnTheSameGridRow } from './utils';
-import { RefreshEvent, TimeRangeUpdatedEvent } from '@grafana/runtime';
-import { sortedDeepCloneWithoutNulls } from 'app/core/utils/object';
-import { Subscription } from 'rxjs';
+
import { appEvents } from '../../../core/core';
+import { dispatch } from '../../../store/store';
import {
VariablesChanged,
VariablesChangedEvent,
VariablesChangedInUrl,
VariablesTimeRangeProcessDone,
} from '../../variables/types';
+import { isAllVariable } from '../../variables/utils';
+import { getTimeSrv } from '../services/TimeSrv';
+import { mergePanels, PanelMergeInfo } from '../utils/panelMerge';
+
+import { DashboardMigrator } from './DashboardMigrator';
+import { GridPos, PanelModel } from './PanelModel';
+import { TimeModel } from './TimeModel';
+import { deleteScopeVars, isOnTheSameGridRow } from './utils';
export interface CloneOptions {
saveVariables?: boolean;
@@ -1198,7 +1197,7 @@ export class DashboardModel implements TimeModel {
canEditAnnotations(dashboardId: number) {
let canEdit = true;
- // if FGAC is enabled there are additional conditions to check
+ // if RBAC is enabled there are additional conditions to check
if (contextSrv.accessControlEnabled()) {
if (dashboardId === 0) {
canEdit = !!this.meta.annotationsPermissions?.organization.canEdit;
@@ -1212,7 +1211,7 @@ export class DashboardModel implements TimeModel {
canAddAnnotations() {
let canAdd = true;
- // if FGAC is enabled there are additional conditions to check
+ // if RBAC is enabled there are additional conditions to check
if (contextSrv.accessControlEnabled()) {
canAdd = !!this.meta.annotationsPermissions?.dashboard.canAdd;
}
diff --git a/public/app/features/dashboard/state/PanelModel.test.ts b/public/app/features/dashboard/state/PanelModel.test.ts
index 1af302c5538..df5459411aa 100644
--- a/public/app/features/dashboard/state/PanelModel.test.ts
+++ b/public/app/features/dashboard/state/PanelModel.test.ts
@@ -1,5 +1,5 @@
-import { PanelModel } from './PanelModel';
-import { getPanelPlugin } from '../../plugins/__mocks__/pluginMocks';
+import { ComponentClass } from 'react';
+
import {
DataLinkBuiltInVars,
FieldConfigProperty,
@@ -10,17 +10,20 @@ import {
dateTime,
TimeRange,
} from '@grafana/data';
-import { ComponentClass } from 'react';
-import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
-import { setTimeSrv } from '../services/TimeSrv';
-import { TemplateSrv } from '../../templating/template_srv';
import { setTemplateSrv } from '@grafana/runtime';
+import { queryBuilder } from 'app/features/variables/shared/testing/builders';
+
+import { mockStandardFieldConfigOptions } from '../../../../test/helpers/fieldConfig';
+import { getPanelPlugin } from '../../plugins/__mocks__/pluginMocks';
+import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
+import { TemplateSrv } from '../../templating/template_srv';
import { variableAdapters } from '../../variables/adapters';
import { createQueryVariableAdapter } from '../../variables/query/adapter';
-import { mockStandardFieldConfigOptions } from '../../../../test/helpers/fieldConfig';
-import { queryBuilder } from 'app/features/variables/shared/testing/builders';
+import { setTimeSrv } from '../services/TimeSrv';
import { TimeOverrideResult } from '../utils/panel';
+import { PanelModel } from './PanelModel';
+
standardFieldConfigEditorRegistry.setInit(() => mockStandardFieldConfigOptions());
standardEditorsRegistry.setInit(() => mockStandardFieldConfigOptions());
diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts
index 115c7ed8502..81723a24d62 100644
--- a/public/app/features/dashboard/state/PanelModel.ts
+++ b/public/app/features/dashboard/state/PanelModel.ts
@@ -1,10 +1,6 @@
-// Libraries
import { cloneDeep, defaultsDeep, isArray, isEqual, keys } from 'lodash';
import { v4 as uuidv4 } from 'uuid';
-// Utils
-import { getTemplateSrv, RefreshEvent } from '@grafana/runtime';
-import { getNextRefIdChar } from 'app/core/utils/query';
-// Types
+
import {
DataConfigSource,
DataFrameDTO,
@@ -21,24 +17,29 @@ import {
PanelModel as IPanelModel,
DataSourceRef,
} from '@grafana/data';
+import { getTemplateSrv, RefreshEvent } from '@grafana/runtime';
import config from 'app/core/config';
-import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
+import { getNextRefIdChar } from 'app/core/utils/query';
+import { QueryGroupOptions } from 'app/types';
import {
PanelOptionsChangedEvent,
PanelQueriesChangedEvent,
PanelTransformationsChangedEvent,
RenderEvent,
} from 'app/types/events';
-import { getTimeSrv } from '../services/TimeSrv';
+
+import { PanelModelLibraryPanel } from '../../library-panels/types';
+import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
import { getVariablesUrlParams } from '../../variables/getAllVariableValuesForUrl';
+import { getTimeSrv } from '../services/TimeSrv';
+import { TimeOverrideResult } from '../utils/panel';
+
import {
filterFieldConfigOverrides,
getPanelOptionsWithDefaults,
isStandardFieldProp,
restoreCustomOverrideRules,
} from './getPanelOptionsWithDefaults';
-import { QueryGroupOptions } from 'app/types';
-import { PanelModelLibraryPanel } from '../../library-panels/types';
export interface GridPos {
x: number;
@@ -48,8 +49,6 @@ export interface GridPos {
static?: boolean;
}
-import { TimeOverrideResult } from '../utils/panel';
-
const notPersistedProperties: { [str: string]: boolean } = {
events: true,
isViewing: true,
diff --git a/public/app/features/dashboard/state/actions.ts b/public/app/features/dashboard/state/actions.ts
index e6c070c2c1b..d31b6e168cc 100644
--- a/public/app/features/dashboard/state/actions.ts
+++ b/public/app/features/dashboard/state/actions.ts
@@ -1,16 +1,15 @@
-// Services & Utils
+import { TimeZone } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
-import { createSuccessNotification } from 'app/core/copy/appNotification';
-// Actions
-import { loadPluginDashboards } from '../../plugins/admin/state/actions';
-import { cleanUpDashboard, loadDashboardPermissions } from './reducers';
import { notifyApp } from 'app/core/actions';
+import { createSuccessNotification } from 'app/core/copy/appNotification';
import { updateTimeZoneForSession, updateWeekStartForSession } from 'app/features/profile/state/reducers';
-// Types
import { DashboardAcl, DashboardAclUpdateDTO, NewDashboardAclItem, PermissionLevel, ThunkResult } from 'app/types';
+
+import { loadPluginDashboards } from '../../plugins/admin/state/actions';
import { cancelVariables } from '../../variables/state/actions';
import { getTimeSrv } from '../services/TimeSrv';
-import { TimeZone } from '@grafana/data';
+
+import { cleanUpDashboard, loadDashboardPermissions } from './reducers';
export function getDashboardPermissions(id: number): ThunkResult {
return async (dispatch) => {
diff --git a/public/app/features/dashboard/state/analyticsProcessor.ts b/public/app/features/dashboard/state/analyticsProcessor.ts
index 9834d86f149..258cf71ee45 100644
--- a/public/app/features/dashboard/state/analyticsProcessor.ts
+++ b/public/app/features/dashboard/state/analyticsProcessor.ts
@@ -1,6 +1,7 @@
-import { DashboardModel } from './DashboardModel';
import { reportMetaAnalytics, MetaAnalyticsEventName, DashboardViewEventPayload } from '@grafana/runtime';
+import { DashboardModel } from './DashboardModel';
+
export function emitDashboardViewEvent(dashboard: DashboardModel) {
const eventData: DashboardViewEventPayload = {
dashboardId: dashboard.id,
diff --git a/public/app/features/dashboard/state/getPanelOptionsWithDefaults.test.ts b/public/app/features/dashboard/state/getPanelOptionsWithDefaults.test.ts
index 6b61bdcaf60..a56c2669238 100644
--- a/public/app/features/dashboard/state/getPanelOptionsWithDefaults.test.ts
+++ b/public/app/features/dashboard/state/getPanelOptionsWithDefaults.test.ts
@@ -1,3 +1,5 @@
+import { mockStandardFieldConfigOptions } from 'test/helpers/fieldConfig';
+
import {
ConfigOverrideRule,
FieldColorModeId,
@@ -11,7 +13,7 @@ import {
ThresholdsMode,
} from '@grafana/data';
import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
-import { mockStandardFieldConfigOptions } from 'test/helpers/fieldConfig';
+
import { getPanelOptionsWithDefaults, restoreCustomOverrideRules } from './getPanelOptionsWithDefaults';
standardFieldConfigEditorRegistry.setInit(() => mockStandardFieldConfigOptions());
diff --git a/public/app/features/dashboard/state/getPanelOptionsWithDefaults.ts b/public/app/features/dashboard/state/getPanelOptionsWithDefaults.ts
index 2eb30b6d951..fadb6071164 100644
--- a/public/app/features/dashboard/state/getPanelOptionsWithDefaults.ts
+++ b/public/app/features/dashboard/state/getPanelOptionsWithDefaults.ts
@@ -1,3 +1,5 @@
+import { mergeWith, isArray, isObject, unset, isEqual } from 'lodash';
+
import {
ConfigOverrideRule,
DynamicConfigValue,
@@ -11,7 +13,6 @@ import {
ThresholdsConfig,
ThresholdsMode,
} from '@grafana/data';
-import { mergeWith, isArray, isObject, unset, isEqual } from 'lodash';
export interface Props {
plugin: PanelPlugin;
diff --git a/public/app/features/dashboard/state/initDashboard.test.ts b/public/app/features/dashboard/state/initDashboard.test.ts
index 0bcb74ef8d2..eae72482c81 100644
--- a/public/app/features/dashboard/state/initDashboard.test.ts
+++ b/public/app/features/dashboard/state/initDashboard.test.ts
@@ -1,28 +1,30 @@
-import { Subject } from 'rxjs';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
-import { locationService, setEchoSrv } from '@grafana/runtime';
+import { Subject } from 'rxjs';
-import { initDashboard, InitDashboardArgs } from './initDashboard';
-import { DashboardInitPhase, DashboardRoutes } from 'app/types';
+import { locationService, setEchoSrv } from '@grafana/runtime';
import { getBackendSrv } from 'app/core/services/backend_srv';
-import { dashboardInitCompleted, dashboardInitFetching, dashboardInitServices } from './reducers';
-import { Echo } from '../../../core/services/echo/Echo';
+import { keybindingSrv } from 'app/core/services/keybindingSrv';
import { variableAdapters } from 'app/features/variables/adapters';
import { createConstantVariableAdapter } from 'app/features/variables/constant/adapter';
import { constantBuilder } from 'app/features/variables/shared/testing/builders';
-import { initialTransactionState, variablesInitTransaction } from '../../variables/state/transactionReducer';
-import { keybindingSrv } from 'app/core/services/keybindingSrv';
-import { getTimeSrv, setTimeSrv } from '../services/TimeSrv';
-import { DashboardLoaderSrv, setDashboardLoaderSrv } from '../services/DashboardLoaderSrv';
-import { getDashboardSrv, setDashboardSrv } from '../services/DashboardSrv';
+import { DashboardInitPhase, DashboardRoutes } from 'app/types';
+
+import { Echo } from '../../../core/services/echo/Echo';
import {
getDashboardQueryRunner,
setDashboardQueryRunnerFactory,
} from '../../query/state/DashboardQueryRunner/DashboardQueryRunner';
import { emptyResult } from '../../query/state/DashboardQueryRunner/utils';
-import { TransactionStatus } from '../../variables/types';
import { getPreloadedState } from '../../variables/state/helpers';
+import { initialTransactionState, variablesInitTransaction } from '../../variables/state/transactionReducer';
+import { TransactionStatus } from '../../variables/types';
+import { DashboardLoaderSrv, setDashboardLoaderSrv } from '../services/DashboardLoaderSrv';
+import { getDashboardSrv, setDashboardSrv } from '../services/DashboardSrv';
+import { getTimeSrv, setTimeSrv } from '../services/TimeSrv';
+
+import { initDashboard, InitDashboardArgs } from './initDashboard';
+import { dashboardInitCompleted, dashboardInitFetching, dashboardInitServices } from './reducers';
jest.mock('app/core/services/backend_srv');
jest.mock('app/features/dashboard/services/TimeSrv', () => {
diff --git a/public/app/features/dashboard/state/initDashboard.ts b/public/app/features/dashboard/state/initDashboard.ts
index 654bf8cdab1..c49b5f95628 100644
--- a/public/app/features/dashboard/state/initDashboard.ts
+++ b/public/app/features/dashboard/state/initDashboard.ts
@@ -1,25 +1,24 @@
-// Services & Utils
+import { locationUtil, setWeekStart } from '@grafana/data';
+import { config, locationService } from '@grafana/runtime';
+import { notifyApp } from 'app/core/actions';
import { createErrorNotification } from 'app/core/copy/appNotification';
import { backendSrv } from 'app/core/services/backend_srv';
-import { DashboardSrv, getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
-import { dashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
-import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
import { keybindingSrv } from 'app/core/services/keybindingSrv';
-// Actions
-import { notifyApp } from 'app/core/actions';
-import { dashboardInitCompleted, dashboardInitFailed, dashboardInitFetching, dashboardInitServices } from './reducers';
-// Types
-import { DashboardDTO, DashboardInitPhase, DashboardRoutes, StoreState, ThunkDispatch, ThunkResult } from 'app/types';
-import { DashboardModel } from './DashboardModel';
-import { locationUtil, setWeekStart } from '@grafana/data';
-import { initVariablesTransaction } from '../../variables/state/actions';
-import { emitDashboardViewEvent } from './analyticsProcessor';
-import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
-import { config, locationService } from '@grafana/runtime';
-import { createDashboardQueryRunner } from '../../query/state/DashboardQueryRunner/DashboardQueryRunner';
-import { getIfExistsLastKey } from '../../variables/state/selectors';
-import { toStateKey } from 'app/features/variables/utils';
import store from 'app/core/store';
+import { dashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
+import { DashboardSrv, getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
+import { toStateKey } from 'app/features/variables/utils';
+import { DashboardDTO, DashboardInitPhase, DashboardRoutes, StoreState, ThunkDispatch, ThunkResult } from 'app/types';
+
+import { createDashboardQueryRunner } from '../../query/state/DashboardQueryRunner/DashboardQueryRunner';
+import { initVariablesTransaction } from '../../variables/state/actions';
+import { getIfExistsLastKey } from '../../variables/state/selectors';
+
+import { DashboardModel } from './DashboardModel';
+import { emitDashboardViewEvent } from './analyticsProcessor';
+import { dashboardInitCompleted, dashboardInitFailed, dashboardInitFetching, dashboardInitServices } from './reducers';
export interface InitDashboardArgs {
urlUid?: string;
diff --git a/public/app/features/dashboard/state/reducers.test.ts b/public/app/features/dashboard/state/reducers.test.ts
index f98a4fa6dec..ab2fa4a8c9e 100644
--- a/public/app/features/dashboard/state/reducers.test.ts
+++ b/public/app/features/dashboard/state/reducers.test.ts
@@ -1,3 +1,6 @@
+import { DashboardInitPhase, DashboardState, OrgRole, PermissionLevel } from 'app/types';
+
+import { DashboardModel } from './DashboardModel';
import {
dashboardInitCompleted,
dashboardInitFailed,
@@ -6,8 +9,6 @@ import {
dashboardReducer,
initialState,
} from './reducers';
-import { DashboardInitPhase, DashboardState, OrgRole, PermissionLevel } from 'app/types';
-import { DashboardModel } from './DashboardModel';
describe('dashboard reducer', () => {
describe('loadDashboardPermissions', () => {
diff --git a/public/app/features/dashboard/state/reducers.ts b/public/app/features/dashboard/state/reducers.ts
index 59cc5eadad2..4e57923e7c4 100644
--- a/public/app/features/dashboard/state/reducers.ts
+++ b/public/app/features/dashboard/state/reducers.ts
@@ -1,10 +1,12 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { DashboardAclDTO, DashboardInitError, DashboardInitPhase, DashboardState } from 'app/types';
+
+import { PanelPlugin } from '@grafana/data';
import { AngularComponent } from '@grafana/runtime';
import { processAclItems } from 'app/core/utils/acl';
+import { DashboardAclDTO, DashboardInitError, DashboardInitPhase, DashboardState } from 'app/types';
+
import { DashboardModel } from './DashboardModel';
import { PanelModel } from './PanelModel';
-import { PanelPlugin } from '@grafana/data';
export const initialState: DashboardState = {
initPhase: DashboardInitPhase.NotStarted,
diff --git a/public/app/features/dashboard/state/selectors.ts b/public/app/features/dashboard/state/selectors.ts
index b0bf7529bbe..59d486d3a73 100644
--- a/public/app/features/dashboard/state/selectors.ts
+++ b/public/app/features/dashboard/state/selectors.ts
@@ -1,5 +1,6 @@
-import { StoreState } from 'app/types';
import { PanelPlugin } from '@grafana/data';
+import { StoreState } from 'app/types';
+
import { getPanelPluginNotFound } from '../../panel/components/PanelPluginError';
export const getPanelPluginWithFallback =
diff --git a/public/app/features/dashboard/state/utils.test.ts b/public/app/features/dashboard/state/utils.test.ts
index fcaee378186..5c63afdf2ee 100644
--- a/public/app/features/dashboard/state/utils.test.ts
+++ b/public/app/features/dashboard/state/utils.test.ts
@@ -1,6 +1,7 @@
+import { REPEAT_DIR_HORIZONTAL } from '../../../core/constants';
+
import { PanelModel } from './PanelModel';
import { deleteScopeVars, isOnTheSameGridRow } from './utils';
-import { REPEAT_DIR_HORIZONTAL } from '../../../core/constants';
describe('isOnTheSameGridRow', () => {
describe('when source panel is next to a panel', () => {
diff --git a/public/app/features/dashboard/state/utils.ts b/public/app/features/dashboard/state/utils.ts
index 7a726900aeb..13ca54d302c 100644
--- a/public/app/features/dashboard/state/utils.ts
+++ b/public/app/features/dashboard/state/utils.ts
@@ -1,6 +1,7 @@
-import { PanelModel } from './PanelModel';
import { REPEAT_DIR_HORIZONTAL } from '../../../core/constants';
+import { PanelModel } from './PanelModel';
+
export function isOnTheSameGridRow(sourcePanel: PanelModel, otherPanel: PanelModel): boolean {
if (sourcePanel.repeatDirection === REPEAT_DIR_HORIZONTAL) {
return false;
diff --git a/public/app/features/dashboard/utils/getPanelMenu.test.ts b/public/app/features/dashboard/utils/getPanelMenu.test.ts
index 9b2746f5141..6ca07eb7998 100644
--- a/public/app/features/dashboard/utils/getPanelMenu.test.ts
+++ b/public/app/features/dashboard/utils/getPanelMenu.test.ts
@@ -1,10 +1,12 @@
import { PanelMenuItem } from '@grafana/data';
-import { DashboardModel, PanelModel } from '../state';
-import { getPanelMenu } from './getPanelMenu';
-import { describe } from '../../../../test/lib/common';
-import { setStore } from 'app/store/store';
import config from 'app/core/config';
import * as actions from 'app/features/explore/state/main';
+import { setStore } from 'app/store/store';
+
+import { describe } from '../../../../test/lib/common';
+import { DashboardModel, PanelModel } from '../state';
+
+import { getPanelMenu } from './getPanelMenu';
jest.mock('app/core/services/context_srv', () => ({
contextSrv: {
diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts
index 16c18b8501e..f5921d734b3 100644
--- a/public/app/features/dashboard/utils/getPanelMenu.ts
+++ b/public/app/features/dashboard/utils/getPanelMenu.ts
@@ -1,6 +1,9 @@
-import { store } from 'app/store/store';
-import { AngularComponent, getDataSourceSrv, locationService } from '@grafana/runtime';
import { PanelMenuItem } from '@grafana/data';
+import { AngularComponent, getDataSourceSrv, locationService } from '@grafana/runtime';
+import { PanelCtrl } from 'app/angular/panel/panel_ctrl';
+import config from 'app/core/config';
+import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
+import { PanelModel } from 'app/features/dashboard/state/PanelModel';
import {
addLibraryPanel,
copyPanel,
@@ -10,14 +13,12 @@ import {
unlinkLibraryPanel,
} from 'app/features/dashboard/utils/panel';
import { isPanelModelLibraryPanel } from 'app/features/library-panels/guard';
-import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
+import { store } from 'app/store/store';
+
import { contextSrv } from '../../../core/services/context_srv';
-import { navigateToExplore } from '../../explore/state/main';
import { getExploreUrl } from '../../../core/utils/explore';
+import { navigateToExplore } from '../../explore/state/main';
import { getTimeSrv } from '../services/TimeSrv';
-import { PanelCtrl } from 'app/angular/panel/panel_ctrl';
-import config from 'app/core/config';
export function getPanelMenu(
dashboard: DashboardModel,
diff --git a/public/app/features/dashboard/utils/loadSnapshotData.ts b/public/app/features/dashboard/utils/loadSnapshotData.ts
index 2a451cef341..40ae85cc49a 100644
--- a/public/app/features/dashboard/utils/loadSnapshotData.ts
+++ b/public/app/features/dashboard/utils/loadSnapshotData.ts
@@ -1,10 +1,12 @@
import { applyFieldOverrides, ArrayDataFrame, getDefaultTimeRange, LoadingState, PanelData } from '@grafana/data';
import { config } from 'app/core/config';
-import { DashboardModel, PanelModel } from '../state';
-import { getProcessedDataFrames } from '../../query/state/runRequest';
+
import { SnapshotWorker } from '../../query/state/DashboardQueryRunner/SnapshotWorker';
-import { applyPanelTimeOverrides } from './panel';
+import { getProcessedDataFrames } from '../../query/state/runRequest';
import { getTimeSrv } from '../services/TimeSrv';
+import { DashboardModel, PanelModel } from '../state';
+
+import { applyPanelTimeOverrides } from './panel';
export function loadSnapshotData(panel: PanelModel, dashboard: DashboardModel): PanelData {
const data = getProcessedDataFrames(panel.snapshotData);
diff --git a/public/app/features/dashboard/utils/panel.test.ts b/public/app/features/dashboard/utils/panel.test.ts
index f1431af92a1..a979c7ab1cc 100644
--- a/public/app/features/dashboard/utils/panel.test.ts
+++ b/public/app/features/dashboard/utils/panel.test.ts
@@ -1,9 +1,11 @@
+import { advanceTo, clear } from 'jest-date-mock';
+import { ComponentClass } from 'react';
+
import { dateTime, DateTime, PanelProps, TimeRange } from '@grafana/data';
import { applyPanelTimeOverrides, calculateInnerPanelHeight } from 'app/features/dashboard/utils/panel';
-import { advanceTo, clear } from 'jest-date-mock';
-import { PanelModel } from '../state';
+
import { getPanelPlugin } from '../../plugins/__mocks__/pluginMocks';
-import { ComponentClass } from 'react';
+import { PanelModel } from '../state';
const dashboardTimeRange: TimeRange = {
from: dateTime([2019, 1, 11, 12, 0]),
diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index d92497a43f0..202de4be4f4 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -1,28 +1,20 @@
-// Store
-import store from 'app/core/store';
-import { dispatch } from 'app/store/store';
-
-// Models
-import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
-import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import { TimeRange, AppEvents, rangeUtil, dateMath, PanelModel as IPanelModel } from '@grafana/data';
-
-// Utils
import { isString as _isString } from 'lodash';
+
+import { TimeRange, AppEvents, rangeUtil, dateMath, PanelModel as IPanelModel } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
import appEvents from 'app/core/app_events';
import config from 'app/core/config';
-
-// Services
-import { getTemplateSrv } from '@grafana/runtime';
-
-// Constants
import { LS_PANEL_COPY_KEY, PANEL_BORDER } from 'app/core/constants';
-
+import store from 'app/core/store';
import { ShareModal } from 'app/features/dashboard/components/ShareModal';
-import { ShowConfirmModalEvent, ShowModalReactEvent } from '../../../types/events';
+import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
+import { PanelModel } from 'app/features/dashboard/state/PanelModel';
import { AddLibraryPanelModal } from 'app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal';
import { UnlinkModal } from 'app/features/library-panels/components/UnlinkModal/UnlinkModal';
import { cleanUpPanelState } from 'app/features/panel/state/actions';
+import { dispatch } from 'app/store/store';
+
+import { ShowConfirmModalEvent, ShowModalReactEvent } from '../../../types/events';
export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => {
// confirm deletion
diff --git a/public/app/features/dashboard/utils/panelMerge.test.ts b/public/app/features/dashboard/utils/panelMerge.test.ts
index d0117f532ad..9882379d3a2 100644
--- a/public/app/features/dashboard/utils/panelMerge.test.ts
+++ b/public/app/features/dashboard/utils/panelMerge.test.ts
@@ -1,4 +1,5 @@
import { PanelModel } from '@grafana/data';
+
import { DashboardModel } from '../state/DashboardModel';
describe('Merge dashbaord panels', () => {
diff --git a/public/app/features/dashboard/utils/panelMerge.ts b/public/app/features/dashboard/utils/panelMerge.ts
index a0de905acbd..946d3177cf0 100644
--- a/public/app/features/dashboard/utils/panelMerge.ts
+++ b/public/app/features/dashboard/utils/panelMerge.ts
@@ -1,5 +1,7 @@
-import { PanelModel as IPanelModel } from '@grafana/data';
import { isEqualWith } from 'lodash';
+
+import { PanelModel as IPanelModel } from '@grafana/data';
+
import { PanelModel } from '../state';
export interface PanelMergeInfo {
diff --git a/public/app/features/datasources/DashboardsTable.test.tsx b/public/app/features/datasources/DashboardsTable.test.tsx
index 10a14f464e4..4e6fafe722f 100644
--- a/public/app/features/datasources/DashboardsTable.test.tsx
+++ b/public/app/features/datasources/DashboardsTable.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { shallow } from 'enzyme';
-import DashboardsTable, { Props } from './DashboardsTable';
+import React from 'react';
+
import { PluginDashboard } from '../../types';
+import DashboardsTable, { Props } from './DashboardsTable';
+
const setup = (propOverrides?: object) => {
const props: Props = {
dashboards: [] as PluginDashboard[],
diff --git a/public/app/features/datasources/DashboardsTable.tsx b/public/app/features/datasources/DashboardsTable.tsx
index da71c9de227..3e45624871c 100644
--- a/public/app/features/datasources/DashboardsTable.tsx
+++ b/public/app/features/datasources/DashboardsTable.tsx
@@ -1,7 +1,9 @@
import React, { FC } from 'react';
-import { PluginDashboard } from '../../types';
+
import { Button, Icon } from '@grafana/ui';
+import { PluginDashboard } from '../../types';
+
export interface Props {
dashboards: PluginDashboard[];
onImport: (dashboard: PluginDashboard, overwrite: boolean) => void;
diff --git a/public/app/features/datasources/DataSourceDashboards.test.tsx b/public/app/features/datasources/DataSourceDashboards.test.tsx
index b90133586fa..516b90f6570 100644
--- a/public/app/features/datasources/DataSourceDashboards.test.tsx
+++ b/public/app/features/datasources/DataSourceDashboards.test.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
import { shallow } from 'enzyme';
-import { DataSourceDashboards, Props } from './DataSourceDashboards';
+import React from 'react';
+
import { DataSourceSettings, NavModel } from '@grafana/data';
-import { PluginDashboard } from 'app/types';
import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
+import { PluginDashboard } from 'app/types';
+
+import { DataSourceDashboards, Props } from './DataSourceDashboards';
const setup = (propOverrides?: object) => {
const props: Props = {
diff --git a/public/app/features/datasources/DataSourceDashboards.tsx b/public/app/features/datasources/DataSourceDashboards.tsx
index f035776ddae..9673716ddc3 100644
--- a/public/app/features/datasources/DataSourceDashboards.tsx
+++ b/public/app/features/datasources/DataSourceDashboards.tsx
@@ -1,21 +1,17 @@
-// Libraries
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
-// Components
import Page from 'app/core/components/Page/Page';
-import DashboardTable from './DashboardsTable';
-
-// Actions & Selectors
-import { getNavModel } from 'app/core/selectors/navModel';
-import { loadDataSource } from './state/actions';
-import { loadPluginDashboards } from '../plugins/admin/state/actions';
-import { importDashboard, removeDashboard } from '../dashboard/state/actions';
-import { getDataSource } from './state/selectors';
-
-// Types
-import { PluginDashboard, StoreState } from 'app/types';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { PluginDashboard, StoreState } from 'app/types';
+
+import { importDashboard, removeDashboard } from '../dashboard/state/actions';
+import { loadPluginDashboards } from '../plugins/admin/state/actions';
+
+import DashboardTable from './DashboardsTable';
+import { loadDataSource } from './state/actions';
+import { getDataSource } from './state/selectors';
export interface OwnProps extends GrafanaRouteComponentProps<{ uid: string }> {}
diff --git a/public/app/features/datasources/DataSourceList.test.tsx b/public/app/features/datasources/DataSourceList.test.tsx
index 55c24291bce..3110b35a6e8 100644
--- a/public/app/features/datasources/DataSourceList.test.tsx
+++ b/public/app/features/datasources/DataSourceList.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { LayoutModes } from '@grafana/data';
+
import DataSourcesList from './DataSourcesList';
import { getMockDataSources } from './__mocks__/dataSourcesMocks';
-import { LayoutModes } from '@grafana/data';
const setup = () => {
const props = {
diff --git a/public/app/features/datasources/DataSourcesList.tsx b/public/app/features/datasources/DataSourcesList.tsx
index 3566177d7c0..9bcca5d543c 100644
--- a/public/app/features/datasources/DataSourcesList.tsx
+++ b/public/app/features/datasources/DataSourcesList.tsx
@@ -1,10 +1,10 @@
// Libraries
+import { css } from '@emotion/css';
import React, { FC } from 'react';
// Types
import { DataSourceSettings, LayoutMode } from '@grafana/data';
import { Card, Tag, useStyles } from '@grafana/ui';
-import { css } from '@emotion/css';
export interface Props {
dataSources: DataSourceSettings[];
diff --git a/public/app/features/datasources/DataSourcesListPage.test.tsx b/public/app/features/datasources/DataSourcesListPage.test.tsx
index 975f925c8b3..c26bd1af413 100644
--- a/public/app/features/datasources/DataSourcesListPage.test.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.test.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
import { shallow } from 'enzyme';
+import React from 'react';
+
import { DataSourceSettings, NavModel, LayoutModes } from '@grafana/data';
import { DataSourcesListPage, Props } from './DataSourcesListPage';
diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx
index 4b1a5101f96..ca8c5d3ec20 100644
--- a/public/app/features/datasources/DataSourcesListPage.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.tsx
@@ -1,27 +1,23 @@
-// Libraries
import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
-// Services & Utils
-import { contextSrv } from 'app/core/core';
-// Components
+
+import { IconName } from '@grafana/ui';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import Page from 'app/core/components/Page/Page';
import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
-import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import DataSourcesList from './DataSourcesList';
-// Types
-import { IconName } from '@grafana/ui';
-import { StoreState, AccessControlAction } from 'app/types';
-// Actions
-import { loadDataSources } from './state/actions';
+import { contextSrv } from 'app/core/core';
import { getNavModel } from 'app/core/selectors/navModel';
+import { StoreState, AccessControlAction } from 'app/types';
+import DataSourcesList from './DataSourcesList';
+import { loadDataSources } from './state/actions';
+import { setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/reducers';
import {
getDataSources,
getDataSourcesCount,
getDataSourcesLayoutMode,
getDataSourcesSearchQuery,
} from './state/selectors';
-import { setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/reducers';
function mapStateToProps(state: StoreState) {
return {
diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx
index 21b68754131..b7943e8af90 100644
--- a/public/app/features/datasources/NewDataSourcePage.tsx
+++ b/public/app/features/datasources/NewDataSourcePage.tsx
@@ -1,17 +1,19 @@
+import { css, cx } from '@emotion/css';
import React, { FC, PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux';
-import { DataSourcePluginMeta, GrafanaTheme2, NavModel } from '@grafana/data';
-import { Card, LinkButton, List, PluginSignatureBadge, FilterInput, useStyles2 } from '@grafana/ui';
-import { css, cx } from '@emotion/css';
-import { selectors } from '@grafana/e2e-selectors';
+import { DataSourcePluginMeta, GrafanaTheme2, NavModel } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { Card, LinkButton, List, PluginSignatureBadge, FilterInput, useStyles2 } from '@grafana/ui';
import Page from 'app/core/components/Page/Page';
import { StoreState } from 'app/types';
-import { addDataSource, loadDataSourcePlugins } from './state/actions';
-import { getDataSourcePlugins } from './state/selectors';
-import { setDataSourceTypeSearchQuery } from './state/reducers';
+
import { PluginsErrorsInfo } from '../plugins/components/PluginsErrorsInfo';
+import { addDataSource, loadDataSourcePlugins } from './state/actions';
+import { setDataSourceTypeSearchQuery } from './state/reducers';
+import { getDataSourcePlugins } from './state/selectors';
+
function mapStateToProps(state: StoreState) {
return {
navModel: getNavModel(),
diff --git a/public/app/features/datasources/settings/BasicSettings.test.tsx b/public/app/features/datasources/settings/BasicSettings.test.tsx
index 0194adc9007..389c6618fcc 100644
--- a/public/app/features/datasources/settings/BasicSettings.test.tsx
+++ b/public/app/features/datasources/settings/BasicSettings.test.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
import { shallow } from 'enzyme';
+import React from 'react';
+
import BasicSettings, { Props } from './BasicSettings';
const setup = () => {
diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx
index 1271672e6e6..ad9d7d49f72 100644
--- a/public/app/features/datasources/settings/BasicSettings.tsx
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -1,6 +1,7 @@
import React, { FC } from 'react';
-import { InlineFormLabel, LegacyForms } from '@grafana/ui';
+
import { selectors } from '@grafana/e2e-selectors';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
const { Input, Switch } = LegacyForms;
diff --git a/public/app/features/datasources/settings/ButtonRow.test.tsx b/public/app/features/datasources/settings/ButtonRow.test.tsx
index aa713dd557d..9508cfd8e97 100644
--- a/public/app/features/datasources/settings/ButtonRow.test.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.test.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
import { shallow } from 'enzyme';
+import React from 'react';
+
import ButtonRow, { Props } from './ButtonRow';
jest.mock('app/core/core', () => {
diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx
index e2907d72889..473043ac451 100644
--- a/public/app/features/datasources/settings/ButtonRow.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@@ -1,10 +1,9 @@
import React, { FC } from 'react';
+
import { selectors } from '@grafana/e2e-selectors';
-
import { Button, LinkButton } from '@grafana/ui';
-
-import { AccessControlAction } from 'app/types/';
import { contextSrv } from 'app/core/core';
+import { AccessControlAction } from 'app/types/';
export interface Props {
exploreUrl: string;
diff --git a/public/app/features/datasources/settings/CloudInfoBox.tsx b/public/app/features/datasources/settings/CloudInfoBox.tsx
index 96990bf434f..ce087cd6148 100644
--- a/public/app/features/datasources/settings/CloudInfoBox.tsx
+++ b/public/app/features/datasources/settings/CloudInfoBox.tsx
@@ -1,9 +1,10 @@
-import { DataSourceSettings } from '@grafana/data';
-import { Alert } from '@grafana/ui';
import React, { FC } from 'react';
-import { config } from 'app/core/config';
+
+import { DataSourceSettings } from '@grafana/data';
import { GrafanaEdition } from '@grafana/data/src/types/config';
+import { Alert } from '@grafana/ui';
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
+import { config } from 'app/core/config';
const LOCAL_STORAGE_KEY = 'datasources.settings.cloudInfoBox.isDismissed';
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
index 12f7226151b..57e0d50c8a6 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
@@ -1,13 +1,16 @@
-import React from 'react';
-import { DataSourceSettingsPage, Props } from './DataSourceSettingsPage';
-import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
-import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
-import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
-import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
-import { cleanUpAction } from 'app/core/actions/cleanUp';
import { screen, render } from '@testing-library/react';
-import { selectors } from '@grafana/e2e-selectors';
+import React from 'react';
+
import { PluginState } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { cleanUpAction } from 'app/core/actions/cleanUp';
+import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
+
+import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
+import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
+import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
+
+import { DataSourceSettingsPage, Props } from './DataSourceSettingsPage';
jest.mock('app/core/core', () => {
return {
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index f4d12900901..68e2a4f2384 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -1,15 +1,19 @@
import React, { PureComponent } from 'react';
-// Components
-import Page from 'app/core/components/Page/Page';
-import { PluginSettings } from './PluginSettings';
-import BasicSettings from './BasicSettings';
-import ButtonRow from './ButtonRow';
-// Services & Utils
-import appEvents from 'app/core/app_events';
-import { contextSrv } from 'app/core/core';
+import { connect, ConnectedProps } from 'react-redux';
-// Actions & selectors
-import { getDataSource, getDataSourceMeta } from '../state/selectors';
+import { DataSourceSettings, urlUtil } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { Alert, Button } from '@grafana/ui';
+import { cleanUpAction } from 'app/core/actions/cleanUp';
+import appEvents from 'app/core/app_events';
+import Page from 'app/core/components/Page/Page';
+import { contextSrv } from 'app/core/core';
+import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
+import { StoreState, AccessControlAction } from 'app/types/';
+
+import { ShowConfirmModalEvent } from '../../../types/events';
import {
deleteDataSource,
initDataSourceSettings,
@@ -17,21 +21,14 @@ import {
testDataSource,
updateDataSource,
} from '../state/actions';
-import { getNavModel } from 'app/core/selectors/navModel';
-
-// Types
-import { StoreState, AccessControlAction } from 'app/types/';
-import { DataSourceSettings, urlUtil } from '@grafana/data';
-import { Alert, Button } from '@grafana/ui';
import { getDataSourceLoadingNav, buildNavModel, getDataSourceNav } from '../state/navModel';
-import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
-import { selectors } from '@grafana/e2e-selectors';
+import { getDataSource, getDataSourceMeta } from '../state/selectors';
+
+import BasicSettings from './BasicSettings';
+import ButtonRow from './ButtonRow';
import { CloudInfoBox } from './CloudInfoBox';
-import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-import { connect, ConnectedProps } from 'react-redux';
-import { cleanUpAction } from 'app/core/actions/cleanUp';
-import { ShowConfirmModalEvent } from '../../../types/events';
+import { PluginSettings } from './PluginSettings';
export interface OwnProps extends GrafanaRouteComponentProps<{ uid: string }> {}
diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
index 429f3de6e98..ca322ff2cc5 100644
--- a/public/app/features/datasources/settings/PluginSettings.tsx
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react';
import { cloneDeep } from 'lodash';
+import React, { PureComponent } from 'react';
+
import {
DataQuery,
DataSourceApi,
diff --git a/public/app/features/datasources/state/actions.test.ts b/public/app/features/datasources/state/actions.test.ts
index 8d652cdcd72..84e6ca9c108 100644
--- a/public/app/features/datasources/state/actions.test.ts
+++ b/public/app/features/datasources/state/actions.test.ts
@@ -1,3 +1,14 @@
+import { of } from 'rxjs';
+import { thunkTester } from 'test/core/thunk/thunkTester';
+
+import { BackendSrvRequest, FetchResponse } from '@grafana/runtime';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { ThunkResult, ThunkDispatch } from 'app/types';
+
+import { getMockPlugin, getMockPlugins } from '../../plugins/__mocks__/pluginMocks';
+import { GenericDataSourcePlugin } from '../settings/PluginSettings';
+import { initDataSourceSettings } from '../state/actions';
+
import {
findNewName,
nameExits,
@@ -6,8 +17,6 @@ import {
TestDataSourceDependencies,
getDataSourceUsingUidOrId,
} from './actions';
-import { getMockPlugin, getMockPlugins } from '../../plugins/__mocks__/pluginMocks';
-import { thunkTester } from 'test/core/thunk/thunkTester';
import {
initDataSourceSettingsSucceeded,
initDataSourceSettingsFailed,
@@ -15,12 +24,6 @@ import {
testDataSourceSucceeded,
testDataSourceFailed,
} from './reducers';
-import { initDataSourceSettings } from '../state/actions';
-import { ThunkResult, ThunkDispatch } from 'app/types';
-import { GenericDataSourcePlugin } from '../settings/PluginSettings';
-import { getBackendSrv } from 'app/core/services/backend_srv';
-import { BackendSrvRequest, FetchResponse } from '@grafana/runtime';
-import { of } from 'rxjs';
jest.mock('app/core/services/backend_srv');
jest.mock('@grafana/runtime', () => ({
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index 54fa40cc03d..9dd8d5d26e9 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -1,13 +1,17 @@
import { lastValueFrom } from 'rxjs';
+
import { DataSourcePluginMeta, DataSourceSettings, locationUtil } from '@grafana/data';
import { DataSourceWithBackend, getDataSourceSrv, locationService } from '@grafana/runtime';
import { updateNavIndex } from 'app/core/actions';
import { getBackendSrv } from 'app/core/services/backend_srv';
+import { accessControlQueryParam } from 'app/core/utils/accessControl';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';
import { getPluginSettings } from 'app/features/plugins/pluginSettings';
+import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';
import { DataSourcePluginCategory, ThunkDispatch, ThunkResult } from 'app/types';
+import { contextSrv } from '../../../core/services/context_srv';
+
import { buildCategories } from './buildCategories';
import { buildNavModel } from './navModel';
import {
@@ -23,8 +27,6 @@ import {
testDataSourceSucceeded,
} from './reducers';
import { getDataSource, getDataSourceMeta } from './selectors';
-import { accessControlQueryParam } from 'app/core/utils/accessControl';
-import { contextSrv } from '../../../core/services/context_srv';
export interface DataSourceTypesLoadedPayload {
plugins: DataSourcePluginMeta[];
diff --git a/public/app/features/datasources/state/buildCategories.test.ts b/public/app/features/datasources/state/buildCategories.test.ts
index 04076b74e13..5bea2aa63d1 100644
--- a/public/app/features/datasources/state/buildCategories.test.ts
+++ b/public/app/features/datasources/state/buildCategories.test.ts
@@ -1,7 +1,9 @@
-import { buildCategories } from './buildCategories';
-import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
import { DataSourcePluginMeta } from '@grafana/data';
+import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
+
+import { buildCategories } from './buildCategories';
+
const plugins: DataSourcePluginMeta[] = [
{
...getMockPlugin({ id: 'graphite' }),
diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts
index 24c82d75074..4e0b1ed593d 100644
--- a/public/app/features/datasources/state/navModel.ts
+++ b/public/app/features/datasources/state/navModel.ts
@@ -1,9 +1,11 @@
import { DataSourceSettings, PluginType, PluginInclude, NavModel, NavModelItem } from '@grafana/data';
import { featureEnabled } from '@grafana/runtime';
+import { ProBadge } from 'app/core/components/Upgrade/ProBadge';
import config from 'app/core/config';
import { contextSrv } from 'app/core/core';
import { AccessControlAction } from 'app/types';
-import { ProBadge } from 'app/core/components/Upgrade/ProBadge';
+
+import { highlightTrial } from '../../admin/utils';
import { GenericDataSourcePlugin } from '../settings/PluginSettings';
const loadingDSType = 'Loading';
@@ -53,7 +55,8 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
const isLoadingNav = dataSource.type === loadingDSType;
- const dsPermissions = {
+ const permissionsExperimentId = 'feature-highlights-data-source-permissions-badge';
+ const dsPermissions: NavModelItem = {
active: false,
icon: 'lock',
id: `datasource-permissions-${dataSource.uid}`,
@@ -61,6 +64,10 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
url: `datasources/edit/${dataSource.uid}/permissions`,
};
+ if (highlightTrial() && !isLoadingNav) {
+ dsPermissions.tabSuffix = () => ProBadge({ experimentId: permissionsExperimentId, eventVariant: 'trial' });
+ }
+
if (featureEnabled('dspermissions')) {
if (contextSrv.hasPermission(AccessControlAction.DataSourcesPermissionsRead)) {
navModel.children!.push(dsPermissions);
@@ -69,11 +76,12 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
navModel.children!.push({
...dsPermissions,
url: dsPermissions.url + '/upgrade',
- tabSuffix: () => ProBadge({ experimentId: 'feature-highlights-data-source-permissions-badge' }),
+ tabSuffix: () => ProBadge({ experimentId: permissionsExperimentId }),
});
}
- const analytics = {
+ const analyticsExperimentId = 'feature-highlights-data-source-insights-badge';
+ const analytics: NavModelItem = {
active: false,
icon: 'info-circle',
id: `datasource-insights-${dataSource.uid}`,
@@ -81,17 +89,23 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
url: `datasources/edit/${dataSource.uid}/insights`,
};
+ if (highlightTrial() && !isLoadingNav) {
+ analytics.tabSuffix = () => ProBadge({ experimentId: analyticsExperimentId, eventVariant: 'trial' });
+ }
+
if (featureEnabled('analytics')) {
navModel.children!.push(analytics);
} else if (highlightsEnabled && !isLoadingNav) {
navModel.children!.push({
...analytics,
url: analytics.url + '/upgrade',
- tabSuffix: () => ProBadge({ experimentId: 'feature-highlights-data-source-insights-badge' }),
+ tabSuffix: () => ProBadge({ experimentId: analyticsExperimentId }),
});
}
- const caching = {
+ const cachingExperimentId = 'feature-highlights-query-caching-badge';
+
+ const caching: NavModelItem = {
active: false,
icon: 'database',
id: `datasource-cache-${dataSource.uid}`,
@@ -100,13 +114,17 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
hideFromTabs: !pluginMeta.isBackend || !config.caching.enabled,
};
+ if (highlightTrial() && !isLoadingNav) {
+ caching.tabSuffix = () => ProBadge({ experimentId: cachingExperimentId, eventVariant: 'trial' });
+ }
+
if (featureEnabled('caching')) {
navModel.children!.push(caching);
} else if (highlightsEnabled && !isLoadingNav) {
navModel.children!.push({
...caching,
url: caching.url + '/upgrade',
- tabSuffix: () => ProBadge({ experimentId: 'feature-highlights-query-caching-badge' }),
+ tabSuffix: () => ProBadge({ experimentId: cachingExperimentId }),
});
}
diff --git a/public/app/features/datasources/state/reducers.test.ts b/public/app/features/datasources/state/reducers.test.ts
index cb5e6afed54..f6d409fd5a6 100644
--- a/public/app/features/datasources/state/reducers.test.ts
+++ b/public/app/features/datasources/state/reducers.test.ts
@@ -1,4 +1,11 @@
import { reducerTester } from 'test/core/redux/reducerTester';
+
+import { PluginMeta, PluginMetaInfo, PluginType, LayoutModes } from '@grafana/data';
+import { DataSourceSettingsState, DataSourcesState } from 'app/types';
+
+import { getMockDataSource, getMockDataSources } from '../__mocks__/dataSourcesMocks';
+import { GenericDataSourcePlugin } from '../settings/PluginSettings';
+
import {
dataSourceLoaded,
dataSourceMetaLoaded,
@@ -17,10 +24,6 @@ import {
setDataSourceTypeSearchQuery,
setIsDefault,
} from './reducers';
-import { getMockDataSource, getMockDataSources } from '../__mocks__/dataSourcesMocks';
-import { DataSourceSettingsState, DataSourcesState } from 'app/types';
-import { PluginMeta, PluginMetaInfo, PluginType, LayoutModes } from '@grafana/data';
-import { GenericDataSourcePlugin } from '../settings/PluginSettings';
const mockPlugin = () =>
({
diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index 1af1f762d6b..8410ec5aab6 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -1,10 +1,12 @@
import { AnyAction, createAction } from '@reduxjs/toolkit';
-import { DataSourcePluginMeta, DataSourceSettings, LayoutMode, LayoutModes } from '@grafana/data';
+import { DataSourcePluginMeta, DataSourceSettings, LayoutMode, LayoutModes } from '@grafana/data';
import { DataSourcesState, DataSourceSettingsState, TestingStatus } from 'app/types';
-import { DataSourceTypesLoadedPayload } from './actions';
+
import { GenericDataSourcePlugin } from '../settings/PluginSettings';
+import { DataSourceTypesLoadedPayload } from './actions';
+
export const initialState: DataSourcesState = {
dataSources: [],
plugins: [],
diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts
index b09e79698f4..558dfa88a4e 100644
--- a/public/app/features/datasources/state/selectors.ts
+++ b/public/app/features/datasources/state/selectors.ts
@@ -1,4 +1,5 @@
import { DataSourcePluginMeta, DataSourceSettings, UrlQueryValue } from '@grafana/data';
+
import { DataSourcesState } from '../../../types/datasources';
export const getDataSources = (state: DataSourcesState) => {
diff --git a/public/app/features/dimensions/color.ts b/public/app/features/dimensions/color.ts
index d38a3fc34be..5e6646db95c 100644
--- a/public/app/features/dimensions/color.ts
+++ b/public/app/features/dimensions/color.ts
@@ -1,4 +1,5 @@
import { DataFrame, Field, getDisplayProcessor, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
+
import { ColorDimensionConfig, DimensionSupplier } from './types';
import { findField, getLastNotNullFieldValue } from './utils';
diff --git a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
index 823fa1989c5..1b18ddedc60 100644
--- a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
@@ -1,12 +1,14 @@
+import { css } from '@emotion/css';
import React, { FC, useCallback } from 'react';
+
import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
-import { ColorDimensionConfig } from '../types';
import { Select, ColorPicker, useStyles2 } from '@grafana/ui';
+
import {
useFieldDisplayNames,
useSelectOptions,
} from '../../../../../packages/grafana-ui/src/components/MatchersUI/utils';
-import { css } from '@emotion/css';
+import { ColorDimensionConfig } from '../types';
const fixedColorOption: SelectableValue = {
label: 'Fixed color',
diff --git a/public/app/features/dimensions/editors/FolderPickerTab.tsx b/public/app/features/dimensions/editors/FolderPickerTab.tsx
index 13fa478d577..005566852c6 100644
--- a/public/app/features/dimensions/editors/FolderPickerTab.tsx
+++ b/public/app/features/dimensions/editors/FolderPickerTab.tsx
@@ -1,11 +1,13 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { css } from '@emotion/css';
-import { Field, FilterInput, Select, useStyles2 } from '@grafana/ui';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { Field, FilterInput, Select, useStyles2 } from '@grafana/ui';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { FileElement, GrafanaDatasource } from 'app/plugins/datasource/grafana/datasource';
import { MediaType, ResourceFolderName } from '../types';
-import { FileElement, GrafanaDatasource } from 'app/plugins/datasource/grafana/datasource';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+
import { ResourceCards } from './ResourceCards';
const getFolders = (mediaType: MediaType) => {
diff --git a/public/app/features/dimensions/editors/IconSelector.tsx b/public/app/features/dimensions/editors/IconSelector.tsx
index 3a2d977c9a7..58188cc383e 100644
--- a/public/app/features/dimensions/editors/IconSelector.tsx
+++ b/public/app/features/dimensions/editors/IconSelector.tsx
@@ -1,7 +1,8 @@
import React, { useState, useEffect } from 'react';
-import { Select } from '@grafana/ui';
+
import { SelectableValue } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
+import { Select } from '@grafana/ui';
interface Props {
value: string;
diff --git a/public/app/features/dimensions/editors/NumberInput.tsx b/public/app/features/dimensions/editors/NumberInput.tsx
index da21132a776..24e8b281c13 100644
--- a/public/app/features/dimensions/editors/NumberInput.tsx
+++ b/public/app/features/dimensions/editors/NumberInput.tsx
@@ -1,4 +1,5 @@
import React, { PureComponent } from 'react';
+
import { Field, Input } from '@grafana/ui';
interface Props {
diff --git a/public/app/features/dimensions/editors/ResourceCards.tsx b/public/app/features/dimensions/editors/ResourceCards.tsx
index aeaa1fc6758..afd7e0d6bd1 100644
--- a/public/app/features/dimensions/editors/ResourceCards.tsx
+++ b/public/app/features/dimensions/editors/ResourceCards.tsx
@@ -1,10 +1,12 @@
+import { css, cx } from '@emotion/css';
import React, { memo, CSSProperties } from 'react';
-import { areEqual, FixedSizeGrid as Grid } from 'react-window';
+import SVG from 'react-inlinesvg';
import AutoSizer from 'react-virtualized-auto-sizer';
+import { areEqual, FixedSizeGrid as Grid } from 'react-window';
+
import { GrafanaTheme2 } from '@grafana/data';
import { useTheme2, stylesFactory } from '@grafana/ui';
-import SVG from 'react-inlinesvg';
-import { css, cx } from '@emotion/css';
+
import { ResourceItem } from './FolderPickerTab';
interface CellProps {
diff --git a/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx b/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx
index 6818ab6ee37..a9020f991c2 100644
--- a/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx
@@ -1,8 +1,10 @@
import React, { FC, useCallback } from 'react';
+
import { FieldNamePickerConfigSettings, StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data';
import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui';
import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { getPublicOrAbsoluteUrl, ResourceFolderName } from '..';
import {
MediaType,
ResourceDimensionConfig,
@@ -10,7 +12,7 @@ import {
ResourceDimensionOptions,
ResourcePickerSize,
} from '../types';
-import { getPublicOrAbsoluteUrl, ResourceFolderName } from '..';
+
import { ResourcePicker } from './ResourcePicker';
const resourceOptions = [
diff --git a/public/app/features/dimensions/editors/ResourcePicker.tsx b/public/app/features/dimensions/editors/ResourcePicker.tsx
index 938792bc14d..7bc55df26b7 100644
--- a/public/app/features/dimensions/editors/ResourcePicker.tsx
+++ b/public/app/features/dimensions/editors/ResourcePicker.tsx
@@ -1,5 +1,8 @@
-import React, { createRef } from 'react';
import { css } from '@emotion/css';
+import React, { createRef } from 'react';
+import SVG from 'react-inlinesvg';
+
+import { GrafanaTheme2 } from '@grafana/data';
import {
Button,
InlineField,
@@ -11,13 +14,12 @@ import {
useStyles2,
useTheme2,
} from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
-import SVG from 'react-inlinesvg';
-
-import { MediaType, ResourceFolderName, ResourcePickerSize } from '../types';
import { closePopover } from '@grafana/ui/src/utils/closePopover';
-import { ResourcePickerPopover } from './ResourcePickerPopover';
+
import { getPublicOrAbsoluteUrl } from '../resource';
+import { MediaType, ResourceFolderName, ResourcePickerSize } from '../types';
+
+import { ResourcePickerPopover } from './ResourcePickerPopover';
interface Props {
onChange: (value?: string) => void;
diff --git a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
index c38df5788f3..66baddbbcbd 100644
--- a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
+++ b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
@@ -1,12 +1,14 @@
-import React, { createRef, useState } from 'react';
import { css } from '@emotion/css';
-import { Button, ButtonGroup, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
-import { FocusScope } from '@react-aria/focus';
import { useDialog } from '@react-aria/dialog';
+import { FocusScope } from '@react-aria/focus';
import { useOverlay } from '@react-aria/overlays';
+import React, { createRef, useState } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ButtonGroup, useStyles2 } from '@grafana/ui';
import { MediaType, PickerTabType, ResourceFolderName } from '../types';
+
import { FolderPickerTab } from './FolderPickerTab';
import { URLPickerTab } from './URLPickerTab';
diff --git a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
index 4efef4cb0ec..dc6bc6c4de7 100644
--- a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
@@ -1,10 +1,13 @@
+import { css } from '@emotion/css';
import React, { FC, useCallback } from 'react';
+
import { FieldType, GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
-import { ScalarDimensionConfig, ScalarDimensionMode, ScalarDimensionOptions } from '../types';
import { InlineField, InlineFieldRow, RadioButtonGroup, Select, useStyles2 } from '@grafana/ui';
import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/src/components/MatchersUI/utils';
+
+import { ScalarDimensionConfig, ScalarDimensionMode, ScalarDimensionOptions } from '../types';
+
import { NumberInput } from './NumberInput';
-import { css } from '@emotion/css';
const fixedValueOption: SelectableValue = {
label: 'Fixed value',
diff --git a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
index 7162a82e86e..f57bd2f0fbe 100644
--- a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
@@ -1,14 +1,17 @@
+import { css } from '@emotion/css';
import React, { FC, useCallback, useMemo } from 'react';
+
import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
-import { ScaleDimensionConfig, ScaleDimensionOptions } from '../types';
import { InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
+
import {
useFieldDisplayNames,
useSelectOptions,
} from '../../../../../packages/grafana-ui/src/components/MatchersUI/utils';
-import { NumberInput } from './NumberInput';
-import { css } from '@emotion/css';
import { validateScaleOptions, validateScaleConfig } from '../scale';
+import { ScaleDimensionConfig, ScaleDimensionOptions } from '../types';
+
+import { NumberInput } from './NumberInput';
const fixedValueOption: SelectableValue = {
label: 'Fixed value',
diff --git a/public/app/features/dimensions/editors/TextDimensionEditor.tsx b/public/app/features/dimensions/editors/TextDimensionEditor.tsx
index 0c452fd58b8..6688bbf23ee 100644
--- a/public/app/features/dimensions/editors/TextDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/TextDimensionEditor.tsx
@@ -1,4 +1,5 @@
import React, { FC, useCallback } from 'react';
+
import {
FieldNamePickerConfigSettings,
StandardEditorProps,
@@ -7,8 +8,8 @@ import {
} from '@grafana/data';
import { Button, InlineField, InlineFieldRow, RadioButtonGroup, StringValueEditor } from '@grafana/ui';
-import { TextDimensionConfig, TextDimensionMode, TextDimensionOptions } from '../types';
import { FieldNamePicker } from '../../../../../packages/grafana-ui/src/components/MatchersUI/FieldNamePicker';
+import { TextDimensionConfig, TextDimensionMode, TextDimensionOptions } from '../types';
const textOptions = [
{ label: 'Fixed', value: TextDimensionMode.Fixed, description: 'Fixed value' },
diff --git a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx
index f7213e925fa..c680e51c66f 100644
--- a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx
+++ b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx
@@ -1,9 +1,11 @@
-import React, { ChangeEvent } from 'react';
import { mount } from 'enzyme';
+import React, { ChangeEvent } from 'react';
+
import { createTheme, ThresholdsMode } from '@grafana/data';
-import { ThresholdsEditor, Props, thresholdsWithoutKey } from './ThresholdsEditor';
import { mockThemeContext, colors } from '@grafana/ui';
+import { ThresholdsEditor, Props, thresholdsWithoutKey } from './ThresholdsEditor';
+
const setup = (propOverrides?: Partial) => {
const props: Props = {
onChange: jest.fn(),
diff --git a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
index e79c84a0084..2e1c44a78eb 100644
--- a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
@@ -1,5 +1,7 @@
-import React, { PureComponent, ChangeEvent } from 'react';
import { css } from '@emotion/css';
+import { isNumber } from 'lodash';
+import React, { PureComponent, ChangeEvent } from 'react';
+
import {
Threshold,
sortThresholds,
@@ -8,7 +10,6 @@ import {
SelectableValue,
GrafanaTheme,
} from '@grafana/data';
-import { isNumber } from 'lodash';
import {
Input,
colors,
diff --git a/public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx
index 9900698a6f9..1642c083fe1 100644
--- a/public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx
+++ b/public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx
@@ -1,5 +1,7 @@
import React from 'react';
+
import { FieldConfigEditorProps, ThresholdsConfig, ThresholdsMode, ThresholdsFieldConfigSettings } from '@grafana/data';
+
import { ThresholdsEditor } from './ThresholdsEditor';
export class ThresholdsValueEditor extends React.PureComponent<
diff --git a/public/app/features/dimensions/editors/URLPickerTab.tsx b/public/app/features/dimensions/editors/URLPickerTab.tsx
index ff2638fbd9e..5402d2e6112 100644
--- a/public/app/features/dimensions/editors/URLPickerTab.tsx
+++ b/public/app/features/dimensions/editors/URLPickerTab.tsx
@@ -1,11 +1,12 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { Field, Input, Label, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
import { css } from '@emotion/css';
+import React, { Dispatch, SetStateAction } from 'react';
import SVG from 'react-inlinesvg';
-import { MediaType } from '../types';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Field, Input, Label, useStyles2 } from '@grafana/ui';
+
import { getPublicOrAbsoluteUrl } from '../resource';
+import { MediaType } from '../types';
interface Props {
newValue: string;
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
index f30c5364cfd..4298ee0d84d 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
@@ -1,10 +1,12 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data';
-import { Draggable } from 'react-beautiful-dnd';
import { css } from '@emotion/css';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Draggable } from 'react-beautiful-dnd';
+
+import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data';
import { useStyles2, Icon, Select, HorizontalGroup, ColorPicker, IconButton, Input, Button } from '@grafana/ui';
-import { ResourcePicker } from '../ResourcePicker';
+
import { ResourcePickerSize, ResourceFolderName, MediaType } from '../../types';
+import { ResourcePicker } from '../ResourcePicker';
export interface ValueMappingEditRowModel {
type: MappingType;
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.test.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.test.tsx
index 74426b5b5a4..af45eee4069 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.test.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.test.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
-import { ValueMappingsEditor, Props } from './ValueMappingsEditor';
+import React from 'react';
+
import { MappingType } from '@grafana/data';
+import { ValueMappingsEditor, Props } from './ValueMappingsEditor';
+
const setup = (spy?: any, propOverrides?: object) => {
const props: Props = {
onChange: (mappings: any) => {
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx
index 0081440dfc6..46020d3f21d 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx
@@ -1,11 +1,14 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { GrafanaTheme2, MappingType, StandardEditorProps, ValueMapping } from '@grafana/data';
import { css } from '@emotion/css';
-import { buildEditRowModels, editModelToSaveModel, ValueMappingsEditorModal } from './ValueMappingsEditorModal';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { GrafanaTheme2, MappingType, StandardEditorProps, ValueMapping } from '@grafana/data';
import { useStyles2, VerticalGroup, Icon, ColorPicker, Button, Modal } from '@grafana/ui';
+
import { MediaType, ResourceFolderName, ResourcePickerSize } from '../../types';
import { ResourcePicker } from '../ResourcePicker';
+import { buildEditRowModels, editModelToSaveModel, ValueMappingsEditorModal } from './ValueMappingsEditorModal';
+
export interface Props extends StandardEditorProps {
showIcon?: boolean;
}
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx
index e5185c4da07..370e24f7f6b 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
-import { ValueMappingsEditorModal, Props } from './ValueMappingsEditorModal';
+import React from 'react';
+
import { MappingType } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { selectOptionInTest } from '@grafana/ui';
+import { ValueMappingsEditorModal, Props } from './ValueMappingsEditorModal';
+
const setup = (spy?: any, propOverrides?: object) => {
const props: Props = {
onClose: jest.fn(),
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
index a8ff61d7c30..aacb26e065a 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { GrafanaTheme2, MappingType, SelectableValue, SpecialValueMatch, ValueMapping } from '@grafana/data';
-import { ValueMappingEditRow, ValueMappingEditRowModel } from './ValueMappingEditRow';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
import { css } from '@emotion/css';
+import React, { useEffect, useState } from 'react';
+import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+
+import { GrafanaTheme2, MappingType, SelectableValue, SpecialValueMatch, ValueMapping } from '@grafana/data';
import { useStyles2, Modal, ValuePicker, Button } from '@grafana/ui';
+import { ValueMappingEditRow, ValueMappingEditRowModel } from './ValueMappingEditRow';
+
export interface Props {
value: ValueMapping[];
onChange: (valueMappings: ValueMapping[]) => void;
diff --git a/public/app/features/dimensions/resource.ts b/public/app/features/dimensions/resource.ts
index f7e0d87a1ea..d48873a5740 100644
--- a/public/app/features/dimensions/resource.ts
+++ b/public/app/features/dimensions/resource.ts
@@ -1,4 +1,5 @@
import { DataFrame } from '@grafana/data';
+
import { DimensionSupplier, ResourceDimensionConfig, ResourceDimensionMode } from './types';
import { findField, getLastNotNullFieldValue } from './utils';
diff --git a/public/app/features/dimensions/scalar.test.ts b/public/app/features/dimensions/scalar.test.ts
index 3055b2cbc59..7643d090f1f 100644
--- a/public/app/features/dimensions/scalar.test.ts
+++ b/public/app/features/dimensions/scalar.test.ts
@@ -1,7 +1,9 @@
import { ArrayVector, DataFrame, FieldType } from '@grafana/data';
-import { ScalarDimensionMode } from '.';
+
import { getScalarDimension } from './scalar';
+import { ScalarDimensionMode } from '.';
+
describe('scalar dimensions', () => {
it('handles string field', () => {
const values = ['-720', '10', '540', '90', '-210'];
diff --git a/public/app/features/dimensions/scalar.ts b/public/app/features/dimensions/scalar.ts
index f5388b61c5e..377b412e5a1 100644
--- a/public/app/features/dimensions/scalar.ts
+++ b/public/app/features/dimensions/scalar.ts
@@ -1,4 +1,5 @@
import { DataFrame, Field } from '@grafana/data';
+
import { DimensionSupplier, ScalarDimensionConfig, ScalarDimensionMode } from './types';
import { findField, getLastNotNullFieldValue } from './utils';
diff --git a/public/app/features/dimensions/scale.test.ts b/public/app/features/dimensions/scale.test.ts
index 096171babee..d10d65e5875 100644
--- a/public/app/features/dimensions/scale.test.ts
+++ b/public/app/features/dimensions/scale.test.ts
@@ -1,4 +1,5 @@
import { ArrayVector, DataFrame, FieldType } from '@grafana/data';
+
import { getScaledDimension, validateScaleConfig } from './scale';
describe('scale dimensions', () => {
diff --git a/public/app/features/dimensions/scale.ts b/public/app/features/dimensions/scale.ts
index 45c82c027a1..d3b06fec454 100644
--- a/public/app/features/dimensions/scale.ts
+++ b/public/app/features/dimensions/scale.ts
@@ -1,9 +1,12 @@
import { DataFrame, Field } from '@grafana/data';
-import { ScaleDimensionMode } from '.';
+
import { getMinMaxAndDelta } from '../../../../packages/grafana-data/src/field/scale';
+
import { ScaleDimensionConfig, DimensionSupplier, ScaleDimensionOptions } from './types';
import { findField, getLastNotNullFieldValue } from './utils';
+import { ScaleDimensionMode } from '.';
+
//---------------------------------------------------------
// Scale dimension
//---------------------------------------------------------
diff --git a/public/app/features/dimensions/text.ts b/public/app/features/dimensions/text.ts
index c77d0c3e21e..5a7db09529d 100644
--- a/public/app/features/dimensions/text.ts
+++ b/public/app/features/dimensions/text.ts
@@ -1,4 +1,5 @@
import { DataFrame, Field, FieldType, formattedValueToString } from '@grafana/data';
+
import { DimensionSupplier, TextDimensionConfig, TextDimensionMode } from './types';
import { findField, getLastNotNullFieldValue } from './utils';
diff --git a/public/app/features/dimensions/utils.ts b/public/app/features/dimensions/utils.ts
index 19bc7342d64..983356ab430 100644
--- a/public/app/features/dimensions/utils.ts
+++ b/public/app/features/dimensions/utils.ts
@@ -1,4 +1,5 @@
import { DataFrame, PanelData, Field, getFieldDisplayName, ReducerID } from '@grafana/data';
+import { config } from '@grafana/runtime';
import {
getColorDimension,
getScaledDimension,
@@ -11,7 +12,7 @@ import {
TextDimensionConfig,
ScalarDimensionConfig,
} from 'app/features/dimensions';
-import { config } from '@grafana/runtime';
+
import { getScalarDimension } from './scalar';
export function getColorDimensionFromData(
diff --git a/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx b/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx
index 161f6b57443..4d2366ce2b2 100644
--- a/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx
+++ b/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx
@@ -1,15 +1,18 @@
-import React, { useEffect, useState } from 'react';
-import { Alert, Button, Field, InputControl, Modal, RadioButtonGroup } from '@grafana/ui';
-import { locationUtil, SelectableValue } from '@grafana/data';
-import { setDashboardInLocalStorage, AddToDashboardError } from './addToDashboard';
-import { useSelector } from 'react-redux';
-import { ExploreId } from 'app/types';
-import { DashboardPicker } from 'app/core/components/Select/DashboardPicker';
-import { DeepMap, FieldError, useForm } from 'react-hook-form';
-import { config, locationService, reportInteraction } from '@grafana/runtime';
-import { getExploreItemSelector } from '../state/selectors';
import { partial } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { DeepMap, FieldError, useForm } from 'react-hook-form';
+import { useSelector } from 'react-redux';
+
+import { locationUtil, SelectableValue } from '@grafana/data';
+import { config, locationService, reportInteraction } from '@grafana/runtime';
+import { Alert, Button, Field, InputControl, Modal, RadioButtonGroup } from '@grafana/ui';
+import { DashboardPicker } from 'app/core/components/Select/DashboardPicker';
import { removeDashboardToFetchFromLocalStorage } from 'app/features/dashboard/state/initDashboard';
+import { ExploreId } from 'app/types';
+
+import { getExploreItemSelector } from '../state/selectors';
+
+import { setDashboardInLocalStorage, AddToDashboardError } from './addToDashboard';
enum SaveTarget {
NewDashboard = 'new-dashboard',
@@ -18,11 +21,11 @@ enum SaveTarget {
const SAVE_TARGETS: Array> = [
{
- label: 'New Dashboard',
+ label: 'New dashboard',
value: SaveTarget.NewDashboard,
},
{
- label: 'Existing Dashboard',
+ label: 'Existing dashboard',
value: SaveTarget.ExistingDashboard,
},
];
@@ -141,7 +144,7 @@ export const AddToDashboardModal = ({ onClose, exploreId }: Props) => {
(
-
+
)}
@@ -195,7 +198,7 @@ export const AddToDashboardModal = ({ onClose, exploreId }: Props) => {
Open in new tab
diff --git a/public/app/features/explore/AddToDashboard/addToDashboard.test.ts b/public/app/features/explore/AddToDashboard/addToDashboard.test.ts
index b81c7c9ca48..cc6f3c054b2 100644
--- a/public/app/features/explore/AddToDashboard/addToDashboard.test.ts
+++ b/public/app/features/explore/AddToDashboard/addToDashboard.test.ts
@@ -1,9 +1,11 @@
import { DataQuery, MutableDataFrame } from '@grafana/data';
-import { ExplorePanelData } from 'app/types';
-import { createEmptyQueryResponse } from '../state/utils';
-import { setDashboardInLocalStorage } from './addToDashboard';
-import * as api from 'app/features/dashboard/state/initDashboard';
import { backendSrv } from 'app/core/services/backend_srv';
+import * as api from 'app/features/dashboard/state/initDashboard';
+import { ExplorePanelData } from 'app/types';
+
+import { createEmptyQueryResponse } from '../state/utils';
+
+import { setDashboardInLocalStorage } from './addToDashboard';
describe('addPanelToDashboard', () => {
let spy: jest.SpyInstance;
diff --git a/public/app/features/explore/AddToDashboard/index.test.tsx b/public/app/features/explore/AddToDashboard/index.test.tsx
index 62db02ba6b4..a4f4275ceb3 100644
--- a/public/app/features/explore/AddToDashboard/index.test.tsx
+++ b/public/app/features/explore/AddToDashboard/index.test.tsx
@@ -1,18 +1,22 @@
-import React, { ReactNode } from 'react';
import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import React, { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+
+import { DataQuery } from '@grafana/data';
+import { locationService, setEchoSrv } from '@grafana/runtime';
+import { backendSrv } from 'app/core/services/backend_srv';
+import { Echo } from 'app/core/services/echo/Echo';
+import * as initDashboard from 'app/features/dashboard/state/initDashboard';
+import { DashboardSearchItemType } from 'app/features/search/types';
import { configureStore } from 'app/store/configureStore';
import { ExploreId, ExploreState } from 'app/types';
-import { Provider } from 'react-redux';
-import { AddToDashboard } from '.';
-import * as api from './addToDashboard';
-import { locationService, setEchoSrv } from '@grafana/runtime';
-import * as initDashboard from 'app/features/dashboard/state/initDashboard';
-import { DataQuery } from '@grafana/data';
+
import { createEmptyQueryResponse } from '../state/utils';
-import { backendSrv } from 'app/core/services/backend_srv';
-import { DashboardSearchItemType } from 'app/features/search/types';
-import { Echo } from 'app/core/services/echo/Echo';
+
+import * as api from './addToDashboard';
+
+import { AddToDashboard } from '.';
const setup = (children: ReactNode, queries: DataQuery[] = [{ refId: 'A' }]) => {
const store = configureStore({
@@ -28,7 +32,7 @@ const setup = (children: ReactNode, queries: DataQuery[] = [{ refId: 'A' }]) =>
};
const openModal = async () => {
- userEvent.click(screen.getByRole('button', { name: /add to dashboard/i }));
+ await userEvent.click(screen.getByRole('button', { name: /add to dashboard/i }));
expect(await screen.findByRole('dialog', { name: 'Add panel to dashboard' })).toBeInTheDocument();
};
@@ -44,7 +48,7 @@ describe('AddToDashboardButton', () => {
const button = await screen.findByRole('button', { name: /add to dashboard/i });
expect(button).toBeDisabled();
- userEvent.click(button);
+ await userEvent.click(button);
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
@@ -71,7 +75,7 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('button', { name: /cancel/i }));
+ await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
@@ -86,7 +90,7 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('button', { name: /open$/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open dashboard$/i }));
await waitForAddToDashboardResponse();
@@ -105,7 +109,7 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
await waitForAddToDashboardResponse();
@@ -124,7 +128,7 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
await waitForAddToDashboardResponse();
@@ -138,7 +142,7 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('button', { name: /open$/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open dashboard$/i }));
await waitForAddToDashboardResponse();
@@ -157,7 +161,7 @@ describe('AddToDashboardButton', () => {
expect(screen.queryByRole('combobox', { name: /dashboard/ })).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
+ await userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
expect(screen.getByRole('combobox', { name: /dashboard/ })).toBeInTheDocument();
});
@@ -168,9 +172,9 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
+ await userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
- userEvent.click(screen.getByRole('button', { name: /open$/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open dashboard$/i }));
await waitForAddToDashboardResponse();
expect(locationService.push).not.toHaveBeenCalled();
@@ -203,16 +207,16 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
+ await userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
- userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
+ await userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
await waitFor(async () => {
await screen.findByLabelText('Select option');
});
- userEvent.click(screen.getByLabelText('Select option'));
+ await userEvent.click(screen.getByLabelText('Select option'));
- userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
await waitFor(async () => {
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -246,16 +250,16 @@ describe('AddToDashboardButton', () => {
await openModal();
- userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
+ await userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
- userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
+ await userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
await waitFor(async () => {
await screen.findByLabelText('Select option');
});
- userEvent.click(screen.getByLabelText('Select option'));
+ await userEvent.click(screen.getByLabelText('Select option'));
- userEvent.click(screen.getByRole('button', { name: /open$/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open dashboard$/i }));
await waitFor(async () => {
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -281,7 +285,7 @@ describe('AddToDashboardButton', () => {
await openModal();
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
await waitFor(async () => {
expect(await screen.findByRole('alert')).toBeInTheDocument();
@@ -300,7 +304,7 @@ describe('AddToDashboardButton', () => {
await openModal();
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
await waitFor(async () => {
expect(await screen.findByRole('alert')).toBeInTheDocument();
@@ -328,16 +332,16 @@ describe('AddToDashboardButton', () => {
await openModal();
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
+ await userEvent.click(screen.getByRole('radio', { name: /existing dashboard/i }));
- userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
+ await userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
await waitFor(async () => {
await screen.findByLabelText('Select option');
});
- userEvent.click(screen.getByLabelText('Select option'));
+ await userEvent.click(screen.getByLabelText('Select option'));
- userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
await waitFor(async () => {
expect(await screen.findByRole('alert')).toBeInTheDocument();
@@ -352,7 +356,7 @@ describe('AddToDashboardButton', () => {
await openModal();
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
+ await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
await waitFor(async () => {
expect(await screen.findByRole('alert')).toBeInTheDocument();
diff --git a/public/app/features/explore/AddToDashboard/index.tsx b/public/app/features/explore/AddToDashboard/index.tsx
index 50d19c3e643..37cbd9a8697 100644
--- a/public/app/features/explore/AddToDashboard/index.tsx
+++ b/public/app/features/explore/AddToDashboard/index.tsx
@@ -1,10 +1,13 @@
import React, { useState } from 'react';
-import { ExploreId } from 'app/types';
-import { AddToDashboardModal } from './AddToDashboardModal';
-import { ToolbarButton } from '@grafana/ui';
import { useSelector } from 'react-redux';
+
+import { ToolbarButton } from '@grafana/ui';
+import { ExploreId } from 'app/types';
+
import { getExploreItemSelector } from '../state/selectors';
+import { AddToDashboardModal } from './AddToDashboardModal';
+
interface Props {
exploreId: ExploreId;
}
diff --git a/public/app/features/explore/ElapsedTime.tsx b/public/app/features/explore/ElapsedTime.tsx
index c358a0048bf..f0eea87e29a 100644
--- a/public/app/features/explore/ElapsedTime.tsx
+++ b/public/app/features/explore/ElapsedTime.tsx
@@ -1,5 +1,6 @@
import React, { FC, useState, useEffect } from 'react';
import { useInterval } from 'react-use';
+
import { Time, TimeProps } from './Time';
const INTERVAL = 150;
diff --git a/public/app/features/explore/ErrorContainer.test.tsx b/public/app/features/explore/ErrorContainer.test.tsx
index accc19c1877..a3699acc9d4 100644
--- a/public/app/features/explore/ErrorContainer.test.tsx
+++ b/public/app/features/explore/ErrorContainer.test.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
+import React from 'react';
+
import { ErrorContainer, ErrorContainerProps } from './ErrorContainer';
describe('ErrorContainer', () => {
diff --git a/public/app/features/explore/ErrorContainer.tsx b/public/app/features/explore/ErrorContainer.tsx
index fffa9c10313..9f6d6a4a320 100644
--- a/public/app/features/explore/ErrorContainer.tsx
+++ b/public/app/features/explore/ErrorContainer.tsx
@@ -1,4 +1,5 @@
import React, { FunctionComponent } from 'react';
+
import { DataQueryError } from '@grafana/data';
import { Alert } from '@grafana/ui';
import { FadeIn } from 'app/core/components/Animations/FadeIn';
diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx
index b9ce6c9f5f7..d1c30e4d722 100644
--- a/public/app/features/explore/Explore.test.tsx
+++ b/public/app/features/explore/Explore.test.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
-import { DataSourceApi, LoadingState, CoreApp, createTheme } from '@grafana/data';
import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { AutoSizerProps } from 'react-virtualized-auto-sizer';
+
+import { DataSourceApi, LoadingState, CoreApp, createTheme } from '@grafana/data';
+import { configureStore } from 'app/store/configureStore';
import { ExploreId } from 'app/types/explore';
+
import { Explore, Props } from './Explore';
import { scanStopAction } from './state/query';
-import { Provider } from 'react-redux';
-import { configureStore } from 'app/store/configureStore';
-import { AutoSizerProps } from 'react-virtualized-auto-sizer';
import { createEmptyQueryResponse } from './state/utils';
const makeEmptyQueryResponse = (loadingState: LoadingState) => {
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 38ec9457441..319d3801189 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -1,40 +1,42 @@
-import React, { createRef } from 'react';
import { css, cx } from '@emotion/css';
-import { compose } from 'redux';
+import memoizeOne from 'memoize-one';
+import React, { createRef } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
-import memoizeOne from 'memoize-one';
+import { compose } from 'redux';
+import { Unsubscribable } from 'rxjs';
+
+import { AbsoluteTimeRange, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2 } from '@grafana/ui';
-import { AbsoluteTimeRange, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data';
-
-import LogsContainer from './LogsContainer';
-import { QueryRows } from './QueryRows';
-import TableContainer from './TableContainer';
-import RichHistoryContainer from './RichHistory/RichHistoryContainer';
-import ExploreQueryInspector from './ExploreQueryInspector';
-import { splitOpen } from './state/main';
-import { changeSize, changeGraphStyle } from './state/explorePane';
-import { makeAbsoluteTime, updateTimeRange } from './state/time';
-import { addQueryRow, loadLogsVolumeData, modifyQueries, scanStart, scanStopAction, setQueries } from './state/query';
-import { ExploreGraphStyle, ExploreId, ExploreItemState } from 'app/types/explore';
-import { StoreState } from 'app/types';
-import { ExploreToolbar } from './ExploreToolbar';
-import { NoDataSourceCallToAction } from './NoDataSourceCallToAction';
-import { getTimeZone } from '../profile/state/selectors';
-import { SecondaryActions } from './SecondaryActions';
import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, FilterItem } from '@grafana/ui/src/components/Table/types';
-import { NodeGraphContainer } from './NodeGraphContainer';
-import { ResponseErrorContainer } from './ResponseErrorContainer';
-import { TraceViewContainer } from './TraceView/TraceViewContainer';
-import { ExploreGraph } from './ExploreGraph';
-import { LogsVolumePanel } from './LogsVolumePanel';
-import { ExploreGraphLabel } from './ExploreGraphLabel';
import appEvents from 'app/core/app_events';
-import { AbsoluteTimeEvent } from 'app/types/events';
-import { Unsubscribable } from 'rxjs';
import { getNodeGraphDataFrames } from 'app/plugins/panel/nodeGraph/utils';
+import { StoreState } from 'app/types';
+import { AbsoluteTimeEvent } from 'app/types/events';
+import { ExploreGraphStyle, ExploreId, ExploreItemState } from 'app/types/explore';
+
+import { getTimeZone } from '../profile/state/selectors';
+
+import { ExploreGraph } from './ExploreGraph';
+import { ExploreGraphLabel } from './ExploreGraphLabel';
+import ExploreQueryInspector from './ExploreQueryInspector';
+import { ExploreToolbar } from './ExploreToolbar';
+import LogsContainer from './LogsContainer';
+import { LogsVolumePanel } from './LogsVolumePanel';
import { NoData } from './NoData';
+import { NoDataSourceCallToAction } from './NoDataSourceCallToAction';
+import { NodeGraphContainer } from './NodeGraphContainer';
+import { QueryRows } from './QueryRows';
+import { ResponseErrorContainer } from './ResponseErrorContainer';
+import RichHistoryContainer from './RichHistory/RichHistoryContainer';
+import { SecondaryActions } from './SecondaryActions';
+import TableContainer from './TableContainer';
+import { TraceViewContainer } from './TraceView/TraceViewContainer';
+import { changeSize, changeGraphStyle } from './state/explorePane';
+import { splitOpen } from './state/main';
+import { addQueryRow, loadLogsVolumeData, modifyQueries, scanStart, scanStopAction, setQueries } from './state/query';
+import { makeAbsoluteTime, updateTimeRange } from './state/time';
const getStyles = (theme: GrafanaTheme2) => {
return {
diff --git a/public/app/features/explore/ExploreActions.tsx b/public/app/features/explore/ExploreActions.tsx
new file mode 100644
index 00000000000..95b038d4f0e
--- /dev/null
+++ b/public/app/features/explore/ExploreActions.tsx
@@ -0,0 +1,96 @@
+import { useRegisterActions, useKBar, Action, Priority } from 'kbar';
+import { FC, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { ExploreId } from 'app/types';
+
+import { splitOpen, splitClose } from './state/main';
+import { runQueries } from './state/query';
+import { isSplit } from './state/selectors';
+
+interface Props {
+ exploreIdLeft: ExploreId;
+ exploreIdRight?: ExploreId;
+}
+
+export const ExploreActions: FC = ({ exploreIdLeft, exploreIdRight }: Props) => {
+ const [actions, setActions] = useState
+
);
}
diff --git a/public/app/features/canvas/runtime/group.tsx b/public/app/features/canvas/runtime/group.tsx
index d331d745f9c..91e1c6a6510 100644
--- a/public/app/features/canvas/runtime/group.tsx
+++ b/public/app/features/canvas/runtime/group.tsx
@@ -1,13 +1,17 @@
-import React from 'react';
-import { CanvasGroupOptions, canvasElementRegistry } from 'app/features/canvas';
-import { DimensionContext } from 'app/features/dimensions';
-import { notFoundItem } from 'app/features/canvas/elements/notFound';
-import { ElementState } from './element';
-import { CanvasElementItem } from '../element';
-import { LayerActionID } from 'app/plugins/panel/canvas/types';
import { cloneDeep } from 'lodash';
-import { Scene } from './scene';
+import React from 'react';
+
+import { CanvasGroupOptions, canvasElementRegistry } from 'app/features/canvas';
+import { notFoundItem } from 'app/features/canvas/elements/notFound';
+import { DimensionContext } from 'app/features/dimensions';
+import { LayerActionID } from 'app/plugins/panel/canvas/types';
+
+import { CanvasElementItem } from '../element';
+import { HorizontalConstraint, Placement, VerticalConstraint } from '../types';
+
+import { ElementState } from './element';
import { RootElement } from './root';
+import { Scene } from './scene';
export const groupItemDummy: CanvasElementItem = {
id: 'group',
@@ -53,27 +57,6 @@ export class GroupState extends ElementState {
return false;
}
- // The parent size, need to set our own size based on offsets
- updateSize(width: number, height: number) {
- super.updateSize(width, height);
- if (!this.parent) {
- this.width = width;
- this.height = height;
- this.sizeStyle.width = width;
- this.sizeStyle.height = height;
- }
-
- // Update children with calculated size
- for (const elem of this.elements) {
- elem.updateSize(this.width, this.height);
- }
-
- // The group forced to full width (for now)
- this.sizeStyle.width = width;
- this.sizeStyle.height = height;
- this.sizeStyle.position = 'absolute';
- }
-
updateData(ctx: DimensionContext) {
super.updateData(ctx);
for (const elem of this.elements) {
@@ -113,21 +96,50 @@ export class GroupState extends ElementState {
return;
}
const opts = cloneDeep(element.options);
- if (element.anchor.top) {
- opts.placement!.top! += 10;
- }
- if (element.anchor.left) {
- opts.placement!.left! += 10;
- }
- if (element.anchor.bottom) {
- opts.placement!.bottom! += 10;
- }
- if (element.anchor.right) {
- opts.placement!.right! += 10;
+
+ const { constraint, placement: oldPlacement } = element.options;
+ const { vertical, horizontal } = constraint ?? {};
+ const placement = oldPlacement ?? ({} as Placement);
+
+ switch (vertical) {
+ case VerticalConstraint.Top:
+ case VerticalConstraint.TopBottom:
+ if (placement.top == null) {
+ placement.top = 25;
+ } else {
+ placement.top += 10;
+ }
+ break;
+ case VerticalConstraint.Bottom:
+ if (placement.bottom == null) {
+ placement.bottom = 100;
+ } else {
+ placement.bottom -= 10;
+ }
+ break;
}
+ switch (horizontal) {
+ case HorizontalConstraint.Left:
+ case HorizontalConstraint.LeftRight:
+ if (placement.left == null) {
+ placement.left = 50;
+ } else {
+ placement.left += 10;
+ }
+ break;
+ case HorizontalConstraint.Right:
+ if (placement.right == null) {
+ placement.right = 50;
+ } else {
+ placement.right -= 10;
+ }
+ break;
+ }
+
+ opts.placement = placement;
+
const copy = new ElementState(element.item, opts, this);
- copy.updateSize(element.width, element.height);
copy.updateData(this.scene.context);
if (updateName) {
copy.options.name = this.scene.getNextElementName();
diff --git a/public/app/features/canvas/runtime/root.tsx b/public/app/features/canvas/runtime/root.tsx
index 1106adddd93..8eebe0c01aa 100644
--- a/public/app/features/canvas/runtime/root.tsx
+++ b/public/app/features/canvas/runtime/root.tsx
@@ -1,25 +1,22 @@
import { CanvasGroupOptions, CanvasElementOptions } from 'app/features/canvas';
+
import { GroupState } from './group';
import { Scene } from './scene';
export class RootElement extends GroupState {
constructor(public options: CanvasGroupOptions, public scene: Scene, private changeCallback: () => void) {
super(options, scene);
+
+ this.sizeStyle = {
+ height: '100%',
+ width: '100%',
+ };
}
isRoot(): this is RootElement {
return true;
}
- // The parent size is always fullsize
- updateSize(width: number, height: number) {
- super.updateSize(width, height);
- this.width = width;
- this.height = height;
- this.sizeStyle.width = width;
- this.sizeStyle.height = height;
- }
-
// root type can not change
onChange(options: CanvasElementOptions) {
this.revId++;
@@ -28,10 +25,10 @@ export class RootElement extends GroupState {
}
getSaveModel(): CanvasGroupOptions {
- const { placement, anchor, ...rest } = this.options;
+ const { placement, constraint, ...rest } = this.options;
return {
- ...rest, // everything except placement & anchor
+ ...rest, // everything except placement & constraint
elements: this.elements.map((v) => v.getSaveModel()),
};
}
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index da2ad559db8..0db06d31aff 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -1,14 +1,14 @@
-import React, { CSSProperties } from 'react';
import { css } from '@emotion/css';
+import Moveable from 'moveable';
+import React, { CSSProperties } from 'react';
import { ReplaySubject, Subject } from 'rxjs';
import { first } from 'rxjs/operators';
-import Moveable from 'moveable';
import Selecto from 'selecto';
-import { config } from 'app/core/config';
import { GrafanaTheme2, PanelData } from '@grafana/data';
import { stylesFactory } from '@grafana/ui';
-import { Anchor, CanvasGroupOptions, DEFAULT_CANVAS_ELEMENT_CONFIG, Placement } from 'app/features/canvas';
+import { config } from 'app/core/config';
+import { CanvasGroupOptions, DEFAULT_CANVAS_ELEMENT_CONFIG } from 'app/features/canvas';
import {
ColorDimensionConfig,
ResourceDimensionConfig,
@@ -24,11 +24,12 @@ import {
getTextDimensionFromData,
getScalarDimensionFromData,
} from 'app/features/dimensions/utils';
-import { ElementState } from './element';
-import { RootElement } from './root';
-import { GroupState } from './group';
import { LayerActionID } from 'app/plugins/panel/canvas/types';
+import { ElementState } from './element';
+import { GroupState } from './group';
+import { RootElement } from './root';
+
export interface SelectionParams {
targets: Array
+
+ typeof item === 'string' ? (
+
+ );
+};
+
+const getSearchStyles = (theme: GrafanaTheme2) => ({
+ positioner: css({
+ zIndex: theme.zIndex.portal,
+ marginTop: '0px',
+ '&::before': {
+ content: '""',
+ position: 'fixed',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ background: theme.components.overlay.background,
+ backdropFilter: 'blur(1px)',
+ },
+ }),
+ animator: css({
+ maxWidth: theme.breakpoints.values.sm, // supposed to be 600...
+ width: '100%',
+ background: theme.colors.background.canvas,
+ color: theme.colors.text.primary,
+ borderRadius: theme.shape.borderRadius(4),
+ overflow: 'hidden',
+ boxShadow: theme.shadows.z3,
+ }),
+ search: css({
+ padding: theme.spacing(2, 3),
+ fontSize: theme.typography.fontSize,
+ width: '100%',
+ boxSizing: 'border-box',
+ outline: 'none',
+ border: 'none',
+ background: theme.colors.background.canvas,
+ color: theme.colors.text.primary,
+ borderBottom: `1px solid ${theme.colors.border.weak}`,
+ }),
+ sectionHeader: css({
+ padding: theme.spacing(1, 2),
+ fontSize: theme.typography.h6.fontSize,
+ fontWeight: theme.typography.body.fontWeight,
+ color: theme.colors.text.secondary,
+ }),
+ resultsContainer: css({
+ padding: theme.spacing(2, 0),
+ }),
+});
diff --git a/public/app/features/commandPalette/ResultItem.tsx b/public/app/features/commandPalette/ResultItem.tsx
new file mode 100644
index 00000000000..6f817fac456
--- /dev/null
+++ b/public/app/features/commandPalette/ResultItem.tsx
@@ -0,0 +1,124 @@
+import { css } from '@emotion/css';
+import { ActionId, ActionImpl } from 'kbar';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useTheme2 } from '@grafana/ui';
+
+export const ResultItem = React.forwardRef(
+ (
+ {
+ action,
+ active,
+ currentRootActionId,
+ }: {
+ action: ActionImpl;
+ active: boolean;
+ currentRootActionId: ActionId;
+ },
+ ref: React.Ref{item}
+ ) : (
+
+
+ );
+ }
+);
+ResultItem.displayName = 'ResultItem';
+
+const getResultItemStyles = (theme: GrafanaTheme2, isActive: boolean) => {
+ const textColor = isActive ? theme.colors.text.maxContrast : theme.colors.text.primary;
+ const rowBackgroundColor = isActive ? theme.colors.background.primary : 'transparent';
+ const shortcutBackgroundColor = isActive ? theme.colors.background.secondary : theme.colors.background.primary;
+ return {
+ row: css({
+ color: textColor,
+ padding: theme.spacing(1, 2),
+ background: rowBackgroundColor,
+ display: 'flex',
+ alightItems: 'center',
+ justifyContent: 'space-between',
+ cursor: 'pointer',
+ '&:before': {
+ display: isActive ? 'block' : 'none',
+ content: '" "',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ bottom: 0,
+ width: theme.spacing(0.5),
+ borderRadius: theme.shape.borderRadius(1),
+ backgroundImage: theme.colors.gradients.brandVertical,
+ },
+ }),
+ actionContainer: css({
+ display: 'flex',
+ gap: theme.spacing(2),
+ alignitems: 'center',
+ fontsize: theme.typography.fontSize,
+ }),
+ textContainer: css({
+ display: 'flex',
+ flexDirection: 'column',
+ }),
+ shortcut: css({
+ padding: theme.spacing(0, 1),
+ background: shortcutBackgroundColor,
+ borderRadius: theme.shape.borderRadius(),
+ fontsize: theme.typography.fontSize,
+ }),
+ breadcrumbAncestor: css({
+ opacity: 0.5,
+ marginRight: theme.spacing(1),
+ }),
+ subtitleText: css({
+ fontSize: theme.typography.fontSize - 2,
+ }),
+ shortcutContainer: css({
+ display: 'grid',
+ gridAutoFlow: 'column',
+ gap: theme.spacing(1),
+ }),
+ };
+};
diff --git a/public/app/features/commandPalette/actions/dashboard.nav.actions.ts b/public/app/features/commandPalette/actions/dashboard.nav.actions.ts
new file mode 100644
index 00000000000..703b928d47c
--- /dev/null
+++ b/public/app/features/commandPalette/actions/dashboard.nav.actions.ts
@@ -0,0 +1,25 @@
+import { Action } from 'kbar';
+
+import { locationService, getBackendSrv } from '@grafana/runtime';
+
+async function getDashboardNav(parentId: string): Promise
+ {action.icon}
+
+ {action.shortcut?.length ? (
+
+
+ {action.subtitle && {action.subtitle}}
+
+ {ancestors.length > 0 &&
+ ancestors.map((ancestor) => (
+
+ {ancestor.name}
+ ›
+
+ ))}
+ {action.name}
+
+
+ {action.shortcut.map((sc) => (
+
+ {sc}
+
+ ))}
+
+ ) : null}
+