+ {infoBoxTitle &&

{infoBoxTitle}

} +

+ ) : ( + '' + )} + + ); + }; + + const ctaElementClassName = !footer() + ? css` + margin-bottom: 20px; + ` + : ''; + + const ctaElement = ( + + {buttonTitle} + + ); + + return ; +}; + +export default EmptyListCTA; diff --git a/public/app/core/components/ErrorPage/ErrorPage.tsx b/public/app/core/components/ErrorPage/ErrorPage.tsx new file mode 100644 index 00000000..d1263769 --- /dev/null +++ b/public/app/core/components/ErrorPage/ErrorPage.tsx @@ -0,0 +1,90 @@ +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'; + +interface ConnectedProps { + navModel: NavModel; +} + +interface OwnProps {} + +type Props = ConnectedProps; + +export class ErrorPage extends PureComponent { + render() { + const { navModel } = this.props; + return ( + + +

100%

80%

60%

40%

20%

Then

Now

current

+ +

Chances you are on the page you are looking for.

Sorry for the inconvenience

+ Please go back to your{' '} + + home dashboard + {' '} + and try again. +

+ If the error persists, seek help on the{' '} + + community site + + . +

+ + + ); + } +} + +const mapStateToProps: MapStateToProps = (state) => { + return { + navModel: getNavModel(state.navIndex, 'not-found'), + }; +}; + +export default connect(mapStateToProps)(ErrorPage); diff --git a/public/app/core/components/FolderFilter/FolderFilter.tsx b/public/app/core/components/FolderFilter/FolderFilter.tsx new file mode 100644 index 00000000..37cc3e04 --- /dev/null +++ b/public/app/core/components/FolderFilter/FolderFilter.tsx @@ -0,0 +1,106 @@ +import React, { useCallback, useMemo, useState } from 'react'; +import { css } from '@emotion/css'; +import debounce from 'debounce-promise'; +import { AsyncMultiSelect, Icon, useStyles2 } from '@grafana/ui'; +import { GrafanaTheme2, SelectableValue } from '@grafana/data'; + +import { FolderInfo, PermissionLevelString } from 'app/types'; +import { getBackendSrv } from 'app/core/services/backend_srv'; + +export interface FolderFilterProps { + onChange: (folder: FolderInfo[]) => void; + maxMenuHeight?: number; +} + +export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderFilterProps): JSX.Element { + const styles = useStyles2(getStyles); + const [loading, setLoading] = useState(false); + const getOptions = useCallback((searchString: string) => getFoldersAsOptions(searchString, setLoading), []); + const debouncedLoadOptions = useMemo(() => debounce(getOptions, 300), [getOptions]); + const [value, setValue] = useState>>([]); + const onChange = useCallback( + (folders: Array>) => { + const changedFolders = []; + for (const folder of folders) { + if (folder.value) { + changedFolders.push(folder.value); + } + } + propsOnChange(changedFolders); + setValue(folders); + }, + [propsOnChange] + ); + const selectOptions = { + defaultOptions: true, + isMulti: true, + noOptionsMessage: 'No folders found', + placeholder: 'Filter by folder', + maxMenuHeight, + value, + onChange, + }; + + return ( +

+ {value.length > 0 && ( + onChange([])}> + Clear folders + + )} + } + aria-label="Folder filter" + /> +

+ ); +} + +async function getFoldersAsOptions(searchString: string, setLoading: (loading: boolean) => void) { + setLoading(true); + + const params = { + query: searchString, + type: 'dash-folder', + permission: PermissionLevelString.View, + }; + + const searchHits = await getBackendSrv().search(params); + const options = searchHits.map((d) => ({ label: d.title, value: { id: d.id, title: d.title } })); + if (!searchString || 'general'.includes(searchString.toLowerCase())) { + options.unshift({ label: 'General', value: { id: 0, title: 'General' } }); + } + + setLoading(false); + + return options; +} + +function getStyles(theme: GrafanaTheme2) { + return { + container: css` + label: container; + position: relative; + min-width: 180px; + flex-grow: 1; + `, + clear: css` + label: clear; + text-decoration: underline; + font-size: ${theme.spacing(1.5)}; + position: absolute; + top: -${theme.spacing(2.75)}; + right: 0; + cursor: pointer; + color: ${theme.colors.text.link}; + + &:hover { + color: ${theme.colors.text.maxContrast}; + } + `, + }; +} diff --git a/public/app/core/components/Footer/Footer.tsx b/public/app/core/components/Footer/Footer.tsx new file mode 100644 index 00000000..9096de39 --- /dev/null +++ b/public/app/core/components/Footer/Footer.tsx @@ -0,0 +1,90 @@ +import React, { FC } from 'react'; +import config from 'app/core/config'; +import { Icon, IconName } from '@grafana/ui'; + +export interface FooterLink { + text: string; + id?: string; + icon?: string; + url?: string; + target?: string; +} + +export let getFooterLinks = (): FooterLink[] => { + return [ + { + text: 'Documentation', + icon: 'document-info', + url: 'https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer', + target: '_blank', + }, + { + text: 'Support', + icon: 'question-circle', + url: 'https://grafana.com/products/enterprise/?utm_source=grafana_footer', + target: '_blank', + }, + { + text: 'Community', + icon: 'comments-alt', + url: 'https://community.grafana.com/?utm_source=grafana_footer', + target: '_blank', + }, + ]; +}; + +export let getVersionLinks = (): FooterLink[] => { + const { buildInfo, licenseInfo } = config; + const links: FooterLink[] = []; + const stateInfo = licenseInfo.stateInfo ? ` (${licenseInfo.stateInfo})` : ''; + + links.push({ text: `${buildInfo.edition}${stateInfo}`, url: licenseInfo.licenseUrl }); + + if (buildInfo.hideVersion) { + return links; + } + + links.push({ text: `v${buildInfo.version} (${buildInfo.commit})` }); + + if (buildInfo.hasUpdate) { + links.push({ + id: 'updateVersion', + text: `New version available!`, + icon: 'download-alt', + url: 'https://grafana.com/grafana/download?utm_source=grafana_footer', + target: '_blank', + }); + } + + return links; +}; + +export function setFooterLinksFn(fn: typeof getFooterLinks) { + getFooterLinks = fn; +} + +export function setVersionLinkFn(fn: typeof getFooterLinks) { + getVersionLinks = fn; +} + +export const Footer: FC = React.memo(() => { + const links = getFooterLinks().concat(getVersionLinks()); + + return ( + + ); +}); + +Footer.displayName = 'Footer'; diff --git a/public/app/core/components/ForgottenPassword/ChangePassword.tsx b/public/app/core/components/ForgottenPassword/ChangePassword.tsx new file mode 100644 index 00000000..69c813b4 --- /dev/null +++ b/public/app/core/components/ForgottenPassword/ChangePassword.tsx @@ -0,0 +1,62 @@ +import React, { FC, SyntheticEvent } from 'react'; +import { Tooltip, Form, Field, VerticalGroup, Button } from '@grafana/ui'; +import { selectors } from '@grafana/e2e-selectors'; +import { submitButton } from '../Login/LoginForm'; +import { PasswordField } from '../PasswordField/PasswordField'; +interface Props { + onSubmit: (pw: string) => void; + onSkip?: (event?: SyntheticEvent) => void; +} + +interface PasswordDTO { + newPassword: string; + confirmNew: string; +} + +export const ChangePassword: FC = ({ onSubmit, onSkip }) => { + const submit = (passwords: PasswordDTO) => { + onSubmit(passwords.newPassword); + }; + return ( + + {({ errors, register, getValues }) => ( + <> + + + + + v === getValues().newPassword || 'Passwords must match!', + })} + /> + + + + + {onSkip && ( + + + + )} + + + )} + + ); +}; diff --git a/public/app/core/components/ForgottenPassword/ChangePasswordPage.test.tsx b/public/app/core/components/ForgottenPassword/ChangePasswordPage.test.tsx new file mode 100644 index 00000000..c8a92dcf --- /dev/null +++ b/public/app/core/components/ForgottenPassword/ChangePasswordPage.test.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps'; + +import { ChangePasswordPage, Props } from './ChangePasswordPage'; + +const postMock = jest.fn(); +jest.mock('@grafana/runtime', () => ({ + getBackendSrv: () => ({ + post: postMock, + }), +})); + +jest.mock('app/core/config', () => { + return { + loginError: false, + buildInfo: { + version: 'v1.0', + commit: '1', + env: 'production', + edition: 'Open Source', + isEnterprise: false, + }, + licenseInfo: { + stateInfo: '', + licenseUrl: '', + }, + appSubUrl: '', + }; +}); +const props: Props = { + ...getRouteComponentProps({ + queryParams: { code: 'some code' }, + }), +}; + +describe('ChangePassword Page', () => { + it('renders correctly', () => { + render(); + + expect(screen.getByLabelText('New password')).toBeInTheDocument(); + expect(screen.getByLabelText('Confirm new password')).toBeInTheDocument(); + + expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument(); + }); + it('should pass validation checks for password and confirm password field', async () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: 'Submit' })); + 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 waitFor(() => expect(screen.getByText('Passwords must match!')).toBeInTheDocument()); + + 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 () => { + Object.defineProperty(window, 'location', { + value: { + assign: jest.fn(), + }, + }); + postMock.mockResolvedValueOnce({ message: 'Logged in' }); + render(); + + userEvent.type(screen.getByLabelText('New password'), 'test'); + userEvent.type(screen.getByLabelText('Confirm new password'), 'test'); + fireEvent.click(screen.getByRole('button', { name: 'Submit' })); + await waitFor(() => + expect(postMock).toHaveBeenCalledWith('/api/user/password/reset', { + code: 'some code', + confirmPassword: 'test', + newPassword: 'test', + }) + ); + expect(window.location.assign).toHaveBeenCalledWith('/'); + }); +}); diff --git a/public/app/core/components/ForgottenPassword/ChangePasswordPage.tsx b/public/app/core/components/ForgottenPassword/ChangePasswordPage.tsx new file mode 100644 index 00000000..55bb5da3 --- /dev/null +++ b/public/app/core/components/ForgottenPassword/ChangePasswordPage.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react'; +import { LoginLayout, InnerBox } from '../Login/LoginLayout'; +import { ChangePassword } from './ChangePassword'; +import LoginCtrl from '../Login/LoginCtrl'; +import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; + +export interface Props extends GrafanaRouteComponentProps<{}, { code: string }> {} + +export const ChangePasswordPage: FC = (props) => { + return ( + + + + {({ changePassword }) => } + + + + ); +}; + +export default ChangePasswordPage; diff --git a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx new file mode 100644 index 00000000..94b4f0b2 --- /dev/null +++ b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx @@ -0,0 +1,72 @@ +import React, { FC, useState } from 'react'; +import { Form, Field, Input, Button, Legend, Container, useStyles, HorizontalGroup, LinkButton } from '@grafana/ui'; +import { getBackendSrv } from '@grafana/runtime'; +import { css } from '@emotion/css'; +import { GrafanaTheme } from '@grafana/data'; +import config from 'app/core/config'; + +interface EmailDTO { + userOrEmail: string; +} + +const paragraphStyles = (theme: GrafanaTheme) => css` + color: ${theme.colors.formDescription}; + font-size: ${theme.typography.size.sm}; + font-weight: ${theme.typography.weight.regular}; + margin-top: ${theme.spacing.sm}; + display: block; +`; + +export const ForgottenPassword: FC = () => { + const [emailSent, setEmailSent] = useState(false); + const styles = useStyles(paragraphStyles); + const loginHref = `${config.appSubUrl}/login`; + + const sendEmail = async (formModel: EmailDTO) => { + const res = await getBackendSrv().post('/api/user/password/send-reset-email', formModel); + if (res) { + setEmailSent(true); + } + }; + + if (emailSent) { + return ( +

An email with a reset link has been sent to the email address. You should receive it shortly.

+ + + Back to login + +

+ ); + } + return ( + + ); +}; diff --git a/public/app/core/components/ForgottenPassword/SendResetMailPage.test.tsx b/public/app/core/components/ForgottenPassword/SendResetMailPage.test.tsx new file mode 100644 index 00000000..57b5ccbc --- /dev/null +++ b/public/app/core/components/ForgottenPassword/SendResetMailPage.test.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { SendResetMailPage } from './SendResetMailPage'; + +const postMock = jest.fn(); +jest.mock('@grafana/runtime', () => ({ + getBackendSrv: () => ({ + post: postMock, + }), +})); + +jest.mock('app/core/config', () => { + return { + buildInfo: { + version: 'v1.0', + commit: '1', + env: 'production', + edition: 'Open Source', + isEnterprise: false, + }, + licenseInfo: { + stateInfo: '', + licenseUrl: '', + }, + appSubUrl: '', + }; +}); + +describe('VerifyEmail Page', () => { + it('renders correctly', () => { + render(); + expect(screen.getByText('Reset password')).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: /User Enter your information/i })).toBeInTheDocument(); + + expect(screen.getByRole('button', { name: 'Send reset email' })).toBeInTheDocument(); + + expect(screen.getByRole('link', { name: 'Back to login' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Back to login' })).toHaveAttribute('href', '/login'); + }); + it('should pass validation checks for email field', async () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: 'Send reset email' })); + expect(await screen.findByText('Email or username is required')).toBeInTheDocument(); + + userEvent.type(screen.getByRole('textbox', { name: /User Enter your information/i }), 'test@gmail.com'); + await waitFor(() => expect(screen.queryByText('Email is invalid')).not.toBeInTheDocument()); + }); + it('should show success meessage if reset-password is successful', async () => { + postMock.mockResolvedValueOnce({ message: 'Email sent' }); + render(); + + userEvent.type(screen.getByRole('textbox', { name: /User Enter your information/i }), 'test@gmail.com'); + fireEvent.click(screen.getByRole('button', { name: 'Send reset email' })); + await waitFor(() => + expect(postMock).toHaveBeenCalledWith('/api/user/password/send-reset-email', { + userOrEmail: 'test@gmail.com', + }) + ); + expect(screen.getByText(/An email with a reset link/i)).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Back to login' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Back to login' })).toHaveAttribute('href', '/login'); + }); +}); diff --git a/public/app/core/components/ForgottenPassword/SendResetMailPage.tsx b/public/app/core/components/ForgottenPassword/SendResetMailPage.tsx new file mode 100644 index 00000000..1ab5a36f --- /dev/null +++ b/public/app/core/components/ForgottenPassword/SendResetMailPage.tsx @@ -0,0 +1,14 @@ +import React, { FC } from 'react'; + +import { LoginLayout, InnerBox } from '../Login/LoginLayout'; +import { ForgottenPassword } from './ForgottenPassword'; + +export const SendResetMailPage: FC = () => ( + + + + + +); + +export default SendResetMailPage; diff --git a/public/app/core/components/Layers/AddLayerButton.tsx b/public/app/core/components/Layers/AddLayerButton.tsx new file mode 100644 index 00000000..27273528 --- /dev/null +++ b/public/app/core/components/Layers/AddLayerButton.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import { ValuePicker } from '@grafana/ui'; +import { SelectableValue } from '@grafana/data'; + +type AddLayerButtonProps = { + onChange: (sel: SelectableValue) => void; + options: Array>; + label: string; +}; + +export const AddLayerButton = ({ onChange, options, label }: AddLayerButtonProps) => { + return ( + + ); +}; diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx new file mode 100644 index 00000000..282ed0be --- /dev/null +++ b/public/app/core/components/Layers/LayerDragDropList.tsx @@ -0,0 +1,172 @@ +import React from 'react'; +import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd'; +import { css, cx } from '@emotion/css'; +import { Icon, IconButton, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; +import { config } from '@grafana/runtime'; + +import { LayerName } from './LayerName'; +import { LayerElement } from './types'; + +type LayerDragDropListProps = { + layers: T[]; + getLayerInfo: (element: T) => string; + onDragEnd: (result: DropResult) => void; + onSelect: (element: T) => any; + onDelete: (element: T) => any; + onDuplicate?: (element: T) => any; + isGroup?: (element: T) => boolean; + selection?: string[]; // list of unique ids (names) + excludeBaseLayer?: boolean; + onNameChange: (element: T, newName: string) => any; + verifyLayerNameUniqueness?: (nameToCheck: string) => boolean; +}; + +export const LayerDragDropList = ({ + layers, + getLayerInfo, + onDragEnd, + onSelect, + onDelete, + onDuplicate, + isGroup, + selection, + excludeBaseLayer, + onNameChange, + verifyLayerNameUniqueness, +}: LayerDragDropListProps) => { + const style = styles(config.theme); + + const getRowStyle = (isSelected: boolean) => { + return isSelected ? `${style.row} ${style.sel}` : style.row; + }; + + return ( + + + {(provided, snapshot) => ( +

+ {(() => { + // reverse order + const rows: any = []; + const lastLayerIndex = excludeBaseLayer ? 1 : 0; + const shouldRenderDragIconLengthThreshold = excludeBaseLayer ? 2 : 1; + for (let i = layers.length - 1; i >= lastLayerIndex; i--) { + const element = layers[i]; + const uid = element.getName(); + + const isSelected = Boolean(selection?.includes(uid)); + rows.push( + + {(provided, snapshot) => ( +

onSelect(element)} + > + onNameChange(element, v)} + verifyLayerNameUniqueness={verifyLayerNameUniqueness ?? undefined} + /> +

{getLayerInfo(element)}

+ + {!isGroup!(element) && ( + <> + {onDuplicate ? ( + onDuplicate(element)} + surface="header" + /> + ) : null} + + onDelete(element)} + surface="header" + /> + {layers.length > shouldRenderDragIconLengthThreshold && ( + + )} + + )} +

+ )} + + ); + } + + return rows; + })()} + + {provided.placeholder} +

+ )} + + + ); +}; + +LayerDragDropList.defaultProps = { + isGroup: () => false, +}; + +const styles = stylesFactory((theme: GrafanaTheme) => ({ + wrapper: css` + margin-bottom: ${theme.spacing.md}; + `, + row: css` + padding: ${theme.spacing.xs} ${theme.spacing.sm}; + border-radius: ${theme.border.radius.sm}; + background: ${theme.colors.bg2}; + min-height: ${theme.spacing.formInputHeight}px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 3px; + cursor: pointer; + + border: 1px solid ${theme.colors.formInputBorder}; + &:hover { + border: 1px solid ${theme.colors.formInputBorderHover}; + } + `, + sel: css` + border: 1px solid ${theme.colors.formInputBorderActive}; + &:hover { + border: 1px solid ${theme.colors.formInputBorderActive}; + } + `, + dragIcon: css` + cursor: drag; + `, + actionIcon: css` + color: ${theme.colors.textWeak}; + &:hover { + color: ${theme.colors.text}; + } + `, + typeWrapper: css` + color: ${theme.colors.textBlue}; + margin-right: 5px; + `, + textWrapper: css` + display: flex; + align-items: center; + flex-grow: 1; + overflow: hidden; + margin-right: ${theme.spacing.sm}; + `, +})); diff --git a/public/app/core/components/Layers/LayerName.test.tsx b/public/app/core/components/Layers/LayerName.test.tsx new file mode 100644 index 00000000..0fda27cf --- /dev/null +++ b/public/app/core/components/Layers/LayerName.test.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { LayerNameProps, LayerName } from './LayerName'; + +describe('LayerName', () => { + it('Can edit title', () => { + const scenario = renderScenario({}); + screen.getByTestId('layer-name-div').click(); + + const input = screen.getByTestId('layer-name-input'); + fireEvent.change(input, { target: { value: 'new name' } }); + fireEvent.blur(input); + + expect((scenario.props.onChange as any).mock.calls[0][0]).toBe('new name'); + }); + + it('Show error when empty name is specified', async () => { + renderScenario({}); + + screen.getByTestId('layer-name-div').click(); + const input = screen.getByTestId('layer-name-input'); + fireEvent.change(input, { target: { value: '' } }); + const alert = await screen.findByRole('alert'); + + expect(alert.textContent).toBe('An empty layer name is not allowed'); + }); + + it('Show error when other layer with same name exists', async () => { + renderScenario({}); + + screen.getByTestId('layer-name-div').click(); + const input = screen.getByTestId('layer-name-input'); + fireEvent.change(input, { target: { value: 'Layer 2' } }); + const alert = await screen.findByRole('alert'); + + expect(alert.textContent).toBe('Layer name already exists'); + }); + + function renderScenario(overrides: Partial) { + const props: LayerNameProps = { + name: 'Layer 1', + onChange: jest.fn(), + verifyLayerNameUniqueness: (nameToCheck: string) => { + const names = new Set(['Layer 1', 'Layer 2']); + return !names.has(nameToCheck); + }, + }; + + Object.assign(props, overrides); + + return { + props, + renderResult: render(), + }; + } +}); diff --git a/public/app/core/components/Layers/LayerName.tsx b/public/app/core/components/Layers/LayerName.tsx new file mode 100644 index 00000000..c229d7f0 --- /dev/null +++ b/public/app/core/components/Layers/LayerName.tsx @@ -0,0 +1,157 @@ +import React, { useState } from 'react'; +import { css, cx } from '@emotion/css'; +import { Icon, Input, FieldValidationMessage, useStyles } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; + +export interface LayerNameProps { + name: string; + onChange: (v: string) => void; + verifyLayerNameUniqueness?: (nameToCheck: string) => boolean; +} + +export const LayerName = ({ name, onChange, verifyLayerNameUniqueness }: LayerNameProps) => { + const styles = useStyles(getStyles); + + const [isEditing, setIsEditing] = useState(false); + const [validationError, setValidationError] = useState(null); + + const onEditLayer = (event: React.SyntheticEvent) => { + setIsEditing(true); + }; + + const onEndEditName = (newName: string) => { + setIsEditing(false); + + if (validationError) { + setValidationError(null); + return; + } + + if (name !== newName) { + onChange(newName); + } + }; + + const onInputChange = (event: React.SyntheticEvent) => { + const newName = event.currentTarget.value.trim(); + + if (newName.length === 0) { + setValidationError('An empty layer name is not allowed'); + return; + } + + if (verifyLayerNameUniqueness && !verifyLayerNameUniqueness(newName) && newName !== name) { + setValidationError('Layer name already exists'); + return; + } + + if (validationError) { + setValidationError(null); + } + }; + + const onEditLayerBlur = (event: React.SyntheticEvent) => { + onEndEditName(event.currentTarget.value.trim()); + }; + + const onKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + onEndEditName((event.target as any).value); + } + }; + + const onFocus = (event: React.FocusEvent) => { + event.target.select(); + }; + + return ( + <> +

+ {!isEditing && ( + + )} + + {isEditing && ( + <> + + {validationError && {validationError}} + + )} +

+ + ); +}; + +const getStyles = (theme: GrafanaTheme) => { + return { + wrapper: css` + label: Wrapper; + display: flex; + align-items: center; + margin-left: ${theme.spacing.xs}; + `, + layerNameWrapper: css` + display: flex; + cursor: pointer; + border: 1px solid transparent; + border-radius: ${theme.border.radius.md}; + align-items: center; + padding: 0 0 0 ${theme.spacing.xs}; + margin: 0; + background: transparent; + + &:hover { + background: ${theme.colors.bg3}; + border: 1px dashed ${theme.colors.border3}; + } + + &:focus { + border: 2px solid ${theme.colors.formInputBorderActive}; + } + + &:hover, + &:focus { + .query-name-edit-icon { + visibility: visible; + } + } + `, + layerName: css` + font-weight: ${theme.typography.weight.semibold}; + color: ${theme.colors.textBlue}; + cursor: pointer; + overflow: hidden; + margin-left: ${theme.spacing.xs}; + `, + layerEditIcon: cx( + css` + margin-left: ${theme.spacing.md}; + visibility: hidden; + `, + 'query-name-edit-icon' + ), + layerNameInput: css` + max-width: 300px; + margin: -4px 0; + `, + }; +}; diff --git a/public/app/core/components/Layers/types.ts b/public/app/core/components/Layers/types.ts new file mode 100644 index 00000000..cf65396c --- /dev/null +++ b/public/app/core/components/Layers/types.ts @@ -0,0 +1,4 @@ +/** An interface that has a getName method */ +export interface LayerElement { + getName: () => string; +} diff --git a/public/app/core/components/LocalStorageValueProvider/LocalStorageValueProvider.tsx b/public/app/core/components/LocalStorageValueProvider/LocalStorageValueProvider.tsx new file mode 100644 index 00000000..c8923f3e --- /dev/null +++ b/public/app/core/components/LocalStorageValueProvider/LocalStorageValueProvider.tsx @@ -0,0 +1,51 @@ +import React, { PureComponent } from 'react'; +import store from '../../store'; + +export interface Props { + storageKey: string; + defaultValue: T; + children: (value: T, onSaveToStore: (value: T) => void, onDeleteFromStore: () => void) => React.ReactNode; +} + +interface State { + value: T; +} + +export class LocalStorageValueProvider extends PureComponent, State> { + constructor(props: Props) { + super(props); + + const { storageKey, defaultValue } = props; + + this.state = { + value: store.getObject(storageKey, defaultValue), + }; + } + + onSaveToStore = (value: T) => { + const { storageKey } = this.props; + try { + store.setObject(storageKey, value); + } catch (error) { + console.error(error); + } + this.setState({ value }); + }; + + onDeleteFromStore = () => { + const { storageKey, defaultValue } = this.props; + try { + store.delete(storageKey); + } catch (error) { + console.log(error); + } + this.setState({ value: defaultValue }); + }; + + render() { + const { children } = this.props; + const { value } = this.state; + + return <>{children(value, this.onSaveToStore, this.onDeleteFromStore)}; + } +} diff --git a/public/app/core/components/LocalStorageValueProvider/index.tsx b/public/app/core/components/LocalStorageValueProvider/index.tsx new file mode 100644 index 00000000..e4bde7cc --- /dev/null +++ b/public/app/core/components/LocalStorageValueProvider/index.tsx @@ -0,0 +1 @@ +export { LocalStorageValueProvider } from './LocalStorageValueProvider'; diff --git a/public/app/core/components/Login/LoginCtrl.tsx b/public/app/core/components/Login/LoginCtrl.tsx new file mode 100644 index 00000000..aa969a8d --- /dev/null +++ b/public/app/core/components/Login/LoginCtrl.tsx @@ -0,0 +1,154 @@ +import React, { PureComponent } from 'react'; +import config from 'app/core/config'; +import { getBackendSrv } from '@grafana/runtime'; +import appEvents from 'app/core/app_events'; +import { AppEvents } from '@grafana/data'; + +const isOauthEnabled = () => { + return !!config.oauth && Object.keys(config.oauth).length > 0; +}; + +export interface FormModel { + user: string; + password: string; + email: string; +} + +interface Props { + resetCode?: string; + + children: (props: { + isLoggingIn: boolean; + changePassword: (pw: string) => void; + isChangingPassword: boolean; + skipPasswordChange: Function; + login: (data: FormModel) => void; + disableLoginForm: boolean; + ldapEnabled: boolean; + authProxyEnabled: boolean; + disableUserSignUp: boolean; + isOauthEnabled: boolean; + loginHint: string; + passwordHint: string; + }) => JSX.Element; +} + +interface State { + isLoggingIn: boolean; + isChangingPassword: boolean; +} + +export class LoginCtrl extends PureComponent { + result: any = {}; + + constructor(props: Props) { + super(props); + this.state = { + isLoggingIn: false, + isChangingPassword: false, + }; + + if (config.loginError) { + appEvents.emit(AppEvents.alertWarning, ['Login Failed', config.loginError]); + } + } + + changePassword = (password: string) => { + const pw = { + newPassword: password, + confirmNew: password, + oldPassword: 'admin', + }; + + if (!this.props.resetCode) { + getBackendSrv() + .put('/api/user/password', pw) + .then(() => { + this.toGrafana(); + }) + .catch((err: any) => console.error(err)); + } + + const resetModel = { + code: this.props.resetCode, + newPassword: password, + confirmPassword: password, + }; + + getBackendSrv() + .post('/api/user/password/reset', resetModel) + .then(() => { + this.toGrafana(); + }); + }; + + login = (formModel: FormModel) => { + this.setState({ + isLoggingIn: true, + }); + + getBackendSrv() + .post('/login', formModel) + .then((result: any) => { + this.result = result; + if (formModel.password !== 'admin' || config.ldapEnabled || config.authProxyEnabled) { + this.toGrafana(); + return; + } else { + this.changeView(); + } + }) + .catch(() => { + this.setState({ + isLoggingIn: false, + }); + }); + }; + + changeView = () => { + this.setState({ + isChangingPassword: true, + }); + }; + + toGrafana = () => { + // Use window.location.href to force page reload + if (this.result.redirectUrl) { + if (config.appSubUrl !== '' && !this.result.redirectUrl.startsWith(config.appSubUrl)) { + window.location.assign(config.appSubUrl + this.result.redirectUrl); + } else { + window.location.assign(this.result.redirectUrl); + } + } else { + window.location.assign(config.appSubUrl + '/'); + } + }; + + render() { + const { children } = this.props; + const { isLoggingIn, isChangingPassword } = this.state; + const { login, toGrafana, changePassword } = this; + const { loginHint, passwordHint, disableLoginForm, ldapEnabled, authProxyEnabled, disableUserSignUp } = config; + + return ( + <> + {children({ + isOauthEnabled: isOauthEnabled(), + loginHint, + passwordHint, + disableLoginForm, + ldapEnabled, + authProxyEnabled, + disableUserSignUp, + login, + isLoggingIn, + changePassword, + skipPasswordChange: toGrafana, + isChangingPassword, + })} + + ); + } +} + +export default LoginCtrl; diff --git a/public/app/core/components/Login/LoginForm.tsx b/public/app/core/components/Login/LoginForm.tsx new file mode 100644 index 00000000..e7dc1d4d --- /dev/null +++ b/public/app/core/components/Login/LoginForm.tsx @@ -0,0 +1,59 @@ +import React, { FC, ReactElement } from 'react'; +import { selectors } from '@grafana/e2e-selectors'; + +import { FormModel } from './LoginCtrl'; +import { Button, Form, Input, Field } from '@grafana/ui'; +import { css } from '@emotion/css'; +import { PasswordField } from '../PasswordField/PasswordField'; + +interface Props { + children: ReactElement; + onSubmit: (data: FormModel) => void; + isLoggingIn: boolean; + passwordHint: string; + loginHint: string; +} + +const wrapperStyles = css` + width: 100%; + padding-bottom: 16px; +`; + +export const submitButton = css` + justify-content: center; + width: 100%; +`; + +export const LoginForm: FC = ({ children, onSubmit, isLoggingIn, passwordHint, loginHint }) => { + return ( +

+ +

+ ); +}; diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx new file mode 100644 index 00000000..c2e5f448 --- /dev/null +++ b/public/app/core/components/Login/LoginLayout.tsx @@ -0,0 +1,153 @@ +import React, { FC, useEffect, useState } from 'react'; +import { cx, css, keyframes } from '@emotion/css'; +import { useStyles2, styleMixins } from '@grafana/ui'; +import { Branding } from '../Branding/Branding'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Footer } from '../Footer/Footer'; + +interface InnerBoxProps { + enterAnimation?: boolean; +} +export const InnerBox: FC = ({ children, enterAnimation = true }) => { + const loginStyles = useStyles2(getLoginStyles); + return

{children}

; +}; + +export const LoginLayout: FC = ({ children }) => { + const loginStyles = useStyles2(getLoginStyles); + const subTitle = Branding.GetLoginSubTitle(); + const [startAnim, setStartAnim] = useState(false); + + useEffect(() => setStartAnim(true), []); + + return ( + +

+ +

{Branding.LoginTitle}

+ {subTitle &&

{Branding.GetLoginSubTitle()}

} +

{children}

+ + ); +}; + +const flyInAnimation = keyframes` +from{ + opacity: 0; + transform: translate(-60px, 0px); +} + +to{ + opacity: 1; + transform: translate(0px, 0px); +}`; + +export const getLoginStyles = (theme: GrafanaTheme2) => { + const bgColor = theme.isDark ? '#000' : theme.colors.background.canvas; + + return { + container: css({ + minHeight: '100%', + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + backgroundColor: bgColor, + minWidth: '100%', + marginLeft: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }), + loginAnim: css` + &:before { + opacity: 1; + } + + .login-content-box { + opacity: 1; + } + `, + submitButton: css` + justify-content: center; + width: 100%; + `, + loginLogo: css` + width: 100%; + max-width: 60px; + margin-bottom: 15px; + + @media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} { + max-width: 100px; + } + `, + loginLogoWrapper: css` + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: ${theme.spacing(3)}; + `, + titleWrapper: css` + text-align: center; + `, + mainTitle: css` + font-size: 22px; + + @media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} { + font-size: 32px; + } + `, + subTitle: css` + font-size: ${theme.typography.size.md}; + color: ${theme.colors.text.secondary}; + `, + loginContent: css` + max-width: 478px; + width: calc(100% - 2rem); + display: flex; + align-items: stretch; + flex-direction: column; + position: relative; + justify-content: flex-start; + z-index: 1; + min-height: 320px; + border-radius: ${theme.shape.borderRadius(4)}; + padding: ${theme.spacing(2, 0)}; + opacity: 0; + transition: opacity 0.5s ease-in-out; + + @media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} { + min-height: 320px; + justify-content: center; + } + `, + loginOuterBox: css` + display: flex; + overflow-y: hidden; + align-items: center; + justify-content: center; + `, + loginInnerBox: css` + padding: ${theme.spacing(2)}; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-grow: 1; + max-width: 415px; + width: 100%; + transform: translate(0px, 0px); + transition: 0.25s ease; + `, + enterAnimation: css` + animation: ${flyInAnimation} ease-out 0.2s; + `, + }; +}; diff --git a/public/app/core/components/Login/LoginPage.test.tsx b/public/app/core/components/Login/LoginPage.test.tsx new file mode 100644 index 00000000..260fd09c --- /dev/null +++ b/public/app/core/components/Login/LoginPage.test.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { LoginPage } from './LoginPage'; + +const postMock = jest.fn(); +jest.mock('@grafana/runtime', () => ({ + getBackendSrv: () => ({ + post: postMock, + }), +})); + +jest.mock('app/core/config', () => { + return { + loginError: false, + buildInfo: { + version: 'v1.0', + commit: '1', + env: 'production', + edition: 'Open Source', + isEnterprise: false, + }, + licenseInfo: { + stateInfo: '', + licenseUrl: '', + }, + appSubUrl: '', + getConfig: () => ({ + appSubUrl: '', + verifyEmailEnabled: false, + }), + }; +}); + +describe('Login Page', () => { + it('renders correctly', () => { + render(); + + expect(screen.getByRole('heading', { name: 'Welcome to Grafana' })).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: 'Username input field' })).toBeInTheDocument(); + expect(screen.getByLabelText('Password input field')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Login button' })).toBeInTheDocument(); + + expect(screen.getByRole('link', { name: 'Forgot your password?' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Forgot your password?' })).toHaveAttribute( + 'href', + '/user/password/send-reset-email' + ); + + expect(screen.getByRole('link', { name: 'Sign up' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Sign up' })).toHaveAttribute('href', '/signup'); + }); + it('should pass validation checks for username field', async () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: 'Login button' })); + expect(await screen.findByText('Email or username is required')).toBeInTheDocument(); + + userEvent.type(screen.getByRole('textbox', { name: 'Username input field' }), 'admin'); + await waitFor(() => expect(screen.queryByText('Email or username is required')).not.toBeInTheDocument()); + }); + it('should pass validation checks for password field', async () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: 'Login button' })); + expect(await screen.findByText('Password is required')).toBeInTheDocument(); + + userEvent.type(screen.getByLabelText('Password input field'), 'admin'); + await waitFor(() => expect(screen.queryByText('Password is required')).not.toBeInTheDocument()); + }); + it('should navigate to default url if credentials is valid', async () => { + Object.defineProperty(window, 'location', { + value: { + assign: jest.fn(), + }, + }); + postMock.mockResolvedValueOnce({ message: 'Logged in' }); + render(); + + userEvent.type(screen.getByLabelText('Username input field'), 'admin'); + userEvent.type(screen.getByLabelText('Password input field'), 'test'); + fireEvent.click(screen.getByLabelText('Login button')); + + await waitFor(() => expect(postMock).toHaveBeenCalledWith('/login', { password: 'test', user: 'admin' })); + expect(window.location.assign).toHaveBeenCalledWith('/'); + }); +}); diff --git a/public/app/core/components/Login/LoginPage.tsx b/public/app/core/components/Login/LoginPage.tsx new file mode 100644 index 00000000..581e2489 --- /dev/null +++ b/public/app/core/components/Login/LoginPage.tsx @@ -0,0 +1,78 @@ +// Libraries +import React, { FC } from 'react'; +import { css } from '@emotion/css'; + +// Components +import { UserSignup } from './UserSignup'; +import { LoginServiceButtons } from './LoginServiceButtons'; +import LoginCtrl from './LoginCtrl'; +import { LoginForm } from './LoginForm'; +import { ChangePassword } from '../ForgottenPassword/ChangePassword'; +import { Branding } from 'app/core/components/Branding/Branding'; +import { HorizontalGroup, LinkButton } from '@grafana/ui'; +import { LoginLayout, InnerBox } from './LoginLayout'; +import config from 'app/core/config'; + +const forgottenPasswordStyles = css` + padding: 0; + margin-top: 4px; +`; + +export const LoginPage: FC = () => { + document.title = Branding.AppTitle; + return ( + + + {({ + loginHint, + passwordHint, + ldapEnabled, + authProxyEnabled, + disableLoginForm, + disableUserSignUp, + login, + isLoggingIn, + changePassword, + skipPasswordChange, + isChangingPassword, + }) => ( + <> + {!isChangingPassword && ( + + {!disableLoginForm && ( + + {!(ldapEnabled || authProxyEnabled) ? ( + + + Forgot your password? + + + ) : ( + <> + )} + + )} + + {!disableUserSignUp && } + + )} + {isChangingPassword && ( + + skipPasswordChange()} /> + + )} + + )} + + + ); +}; diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx new file mode 100644 index 00000000..ffb4c5c0 --- /dev/null +++ b/public/app/core/components/Login/LoginServiceButtons.tsx @@ -0,0 +1,169 @@ +import React from 'react'; +import config from 'app/core/config'; +import { css, cx } from '@emotion/css'; +import { Icon, IconName, LinkButton, useStyles, useTheme2, VerticalGroup } from '@grafana/ui'; +import { GrafanaTheme, GrafanaTheme2, DEFAULT_SAML_NAME } from '@grafana/data'; +import { pickBy } from 'lodash'; + +export interface LoginService { + bgColor: string; + enabled: boolean; + name: string; + hrefName?: string; + icon: IconName; +} + +export interface LoginServices { + [key: string]: LoginService; +} + +const loginServices: () => LoginServices = () => { + const oauthEnabled = !!config.oauth; + + return { + saml: { + bgColor: '#464646', + enabled: config.samlEnabled, + name: config.samlName || DEFAULT_SAML_NAME, + icon: 'key-skeleton-alt', + }, + google: { + bgColor: '#e84d3c', + enabled: oauthEnabled && config.oauth.google, + name: 'Google', + icon: 'google', + }, + azuread: { + bgColor: '#2f2f2f', + enabled: oauthEnabled && config.oauth.azuread, + name: 'Microsoft', + icon: 'microsoft', + }, + github: { + bgColor: '#464646', + enabled: oauthEnabled && config.oauth.github, + name: 'GitHub', + icon: 'github', + }, + gitlab: { + bgColor: '#fc6d26', + enabled: oauthEnabled && config.oauth.gitlab, + name: 'GitLab', + icon: 'gitlab', + }, + grafanacom: { + bgColor: '#262628', + enabled: oauthEnabled && config.oauth.grafana_com, + name: 'Grafana.com', + hrefName: 'grafana_com', + icon: 'grafana', + }, + okta: { + bgColor: '#2f2f2f', + enabled: oauthEnabled && config.oauth.okta, + name: 'Okta', + icon: 'okta', + }, + oauth: { + bgColor: '#262628', + enabled: oauthEnabled && config.oauth.generic_oauth, + name: oauthEnabled && config.oauth.generic_oauth ? config.oauth.generic_oauth.name : 'OAuth', + icon: 'signin', + hrefName: 'generic_oauth', + }, + }; +}; + +const getServiceStyles = (theme: GrafanaTheme) => { + return { + button: css` + color: #d8d9da; + position: relative; + `, + buttonIcon: css` + position: absolute; + left: ${theme.spacing.sm}; + top: 50%; + transform: translateY(-50%); + `, + divider: { + base: css` + color: ${theme.colors.text}; + display: flex; + margin-bottom: ${theme.spacing.sm}; + justify-content: space-between; + text-align: center; + width: 100%; + `, + line: css` + width: 100px; + height: 10px; + border-bottom: 1px solid ${theme.colors.text}; + `, + }, + }; +}; + +const LoginDivider = () => { + const styles = useStyles(getServiceStyles); + return ( + <> +

+ {!config.disableLoginForm && or} +

+ + ); +}; + +function getButtonStyleFor(service: LoginService, styles: ReturnType, theme: GrafanaTheme2) { + return cx( + styles.button, + css` + background-color: ${service.bgColor}; + color: ${theme.colors.getContrastText(service.bgColor)}; + + &:hover { + background-color: ${theme.colors.emphasize(service.bgColor, 0.15)}; + box-shadow: ${theme.shadows.z1}; + } + ` + ); +} + +export const LoginServiceButtons = () => { + const enabledServices = pickBy(loginServices(), (service) => service.enabled); + const hasServices = Object.keys(enabledServices).length > 0; + const theme = useTheme2(); + const styles = useStyles(getServiceStyles); + + if (hasServices) { + return ( + + + {Object.entries(enabledServices).map(([key, service]) => ( + + + Sign in with {service.name} + + ))} + + ); + } + + return null; +}; diff --git a/public/app/core/components/Login/UserSignup.tsx b/public/app/core/components/Login/UserSignup.tsx new file mode 100644 index 00000000..3f80b49b --- /dev/null +++ b/public/app/core/components/Login/UserSignup.tsx @@ -0,0 +1,26 @@ +import React, { FC } from 'react'; +import { LinkButton, VerticalGroup } from '@grafana/ui'; +import { css } from '@emotion/css'; +import { getConfig } from 'app/core/config'; + +export const UserSignup: FC<{}> = () => { + const href = getConfig().verifyEmailEnabled ? `${getConfig().appSubUrl}/verify` : `${getConfig().appSubUrl}/signup`; + const paddingTop = css({ paddingTop: '16px' }); + + return ( + +

New to Grafana?

+ + Sign up + + + ); +}; diff --git a/public/app/core/components/NavBar/NavBar.test.tsx b/public/app/core/components/NavBar/NavBar.test.tsx new file mode 100644 index 00000000..751a7d2f --- /dev/null +++ b/public/app/core/components/NavBar/NavBar.test.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { NavBar } from './NavBar'; +import { render, screen } from '@testing-library/react'; +import { Router } from 'react-router-dom'; +import { locationService } from '@grafana/runtime'; +import { configureStore } from 'app/store/configureStore'; +import { Provider } from 'react-redux'; + +jest.mock('app/core/services/context_srv', () => ({ + contextSrv: { + sidemenu: true, + user: {}, + isSignedIn: false, + isGrafanaAdmin: false, + isEditor: false, + hasEditPermissionFolders: false, + }, +})); + +const setup = () => { + const store = configureStore(); + + return render( + + + + + + ); +}; + +describe('Render', () => { + it('should render component', async () => { + setup(); + const sidemenu = await screen.findByTestId('sidemenu'); + expect(sidemenu).toBeInTheDocument(); + }); + + it('should not render when in kiosk mode', async () => { + setup(); + + locationService.partial({ kiosk: 'full' }); + const sidemenu = screen.queryByTestId('sidemenu'); + expect(sidemenu).not.toBeInTheDocument(); + }); +}); diff --git a/public/app/core/components/NavBar/NavBar.tsx b/public/app/core/components/NavBar/NavBar.tsx new file mode 100644 index 00000000..81430427 --- /dev/null +++ b/public/app/core/components/NavBar/NavBar.tsx @@ -0,0 +1,169 @@ +import React, { FC, useState } from 'react'; +import { useLocation } from 'react-router-dom'; +import { css, cx } from '@emotion/css'; +import { cloneDeep } from 'lodash'; +import { GrafanaTheme2, NavModelItem, NavSection } from '@grafana/data'; +import { Icon, IconName, useTheme2 } from '@grafana/ui'; +import { locationService } from '@grafana/runtime'; +import { Branding } from 'app/core/components/Branding/Branding'; +import config from 'app/core/config'; +import { KioskMode } from 'app/types'; +import { enrichConfigItems, getActiveItem, isMatchOrChildMatch, isSearchActive, SEARCH_ITEM_ID } from './utils'; +import { OrgSwitcher } from '../OrgSwitcher'; +import NavBarItem from './NavBarItem'; +import { NavBarSection } from './NavBarSection'; +import { NavBarMenu } from './NavBarMenu'; +import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu'; + +const homeUrl = config.appSubUrl || '/'; + +const onOpenSearch = () => { + locationService.partial({ search: 'open' }); +}; + +const searchItem: NavModelItem = { + id: SEARCH_ITEM_ID, + onClick: onOpenSearch, + text: 'Search dashboards', + icon: 'search', +}; + +export const NavBar: FC = React.memo(() => { + const theme = useTheme2(); + const styles = getStyles(theme); + const location = useLocation(); + const query = new URLSearchParams(location.search); + const kiosk = query.get('kiosk') as KioskMode; + const [showSwitcherModal, setShowSwitcherModal] = useState(false); + const toggleSwitcherModal = () => { + setShowSwitcherModal(!showSwitcherModal); + }; + const navTree: NavModelItem[] = cloneDeep(config.bootData.navTree); + const topItems = navTree.filter((item) => item.section === NavSection.Core); + const bottomItems = enrichConfigItems( + navTree.filter((item) => item.section === NavSection.Config), + location, + toggleSwitcherModal + ); + const activeItem = isSearchActive(location) ? searchItem : getActiveItem(navTree, location.pathname); + + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + + if (kiosk !== null) { + return null; + } + + return ( +

setMobileMenuOpen(!mobileMenuOpen)} key="hamburger"> + +

+ + + + + + + + + + + + {topItems.map((link, index) => ( + + {link.icon && } + {link.img && {`${link.text}

} + + ))} + + +

+ + + {bottomItems.map((link, index) => ( + + {link.icon && } + {link.img && {`${link.text}

} + + ))} + + + {showSwitcherModal && } + {mobileMenuOpen && ( + setMobileMenuOpen(false)} + /> + )} +

+ ); +}); + +NavBar.displayName = 'NavBar'; + +const getStyles = (theme: GrafanaTheme2) => ({ + search: css` + display: none; + margin-top: ${theme.spacing(5)}; + + ${theme.breakpoints.up('md')} { + display: block; + } + `, + sidemenu: css` + display: flex; + flex-direction: column; + position: fixed; + z-index: ${theme.zIndex.sidemenu}; + + ${theme.breakpoints.up('md')} { + background: ${theme.colors.background.primary}; + border-right: 1px solid ${theme.components.panel.borderColor}; + padding: 0 0 ${theme.spacing(1)} 0; + position: relative; + width: ${theme.components.sidemenu.width}px; + } + + .sidemenu-hidden & { + display: none; + } + `, + grafanaLogo: css` + display: none; + img { + height: ${theme.spacing(3.5)}; + width: ${theme.spacing(3.5)}; + } + + ${theme.breakpoints.up('md')} { + align-items: center; + display: flex; + justify-content: center; + } + `, + mobileSidemenuLogo: css` + align-items: center; + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: ${theme.spacing(2)}; + + ${theme.breakpoints.up('md')} { + display: none; + } + `, + spacer: css` + flex: 1; + `, +}); diff --git a/public/app/core/components/NavBar/NavBarItem.test.tsx b/public/app/core/components/NavBar/NavBarItem.test.tsx new file mode 100644 index 00000000..1868b804 --- /dev/null +++ b/public/app/core/components/NavBar/NavBarItem.test.tsx @@ -0,0 +1,226 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { BrowserRouter } from 'react-router-dom'; +import { locationUtil } from '@grafana/data'; +import { config, setLocationService } from '@grafana/runtime'; + +import NavBarItem, { Props } from './NavBarItem'; + +const onClickMock = jest.fn(); +const defaults: Props = { + children: undefined, + link: { + text: 'Parent Node', + onClick: onClickMock, + children: [ + { text: 'Child Node 1', onClick: onClickMock, children: [] }, + { text: 'Child Node 2', onClick: onClickMock, children: [] }, + ], + }, +}; + +function getTestContext(overrides: Partial = {}, subUrl = '') { + jest.clearAllMocks(); + config.appSubUrl = subUrl; + locationUtil.initialize({ config, getTimeRangeForUrl: jest.fn(), getVariablesUrlParams: jest.fn() }); + const pushMock = jest.fn(); + const locationService: any = { push: pushMock }; + setLocationService(locationService); + const props = { ...defaults, ...overrides }; + + const { rerender } = render( + + {props.children} + + ); + + return { rerender, pushMock }; +} + +describe('NavBarItem', () => { + describe('when url property is not set', () => { + it('then it renders the menu trigger as a button', () => { + getTestContext(); + + expect(screen.getAllByRole('button')).toHaveLength(1); + }); + + describe('and clicking on the menu trigger button', () => { + it('then the onClick handler should be called', () => { + getTestContext(); + + userEvent.click(screen.getByRole('button')); + + expect(onClickMock).toHaveBeenCalledTimes(1); + }); + }); + + describe('and hovering over the menu trigger button', () => { + it('then the menu items should be visible', () => { + getTestContext(); + + userEvent.hover(screen.getByRole('button')); + + expect(screen.getByRole('menuitem', { name: 'Parent Node' })).toBeInTheDocument(); + expect(screen.getByText('Child Node 1')).toBeInTheDocument(); + expect(screen.getByText('Child Node 2')).toBeInTheDocument(); + }); + }); + + describe('and tabbing to the menu trigger button', () => { + it('then the menu items should be visible', () => { + getTestContext(); + + userEvent.tab(); + + expect(screen.getByText('Parent Node')).toBeInTheDocument(); + expect(screen.getByText('Child Node 1')).toBeInTheDocument(); + expect(screen.getByText('Child Node 2')).toBeInTheDocument(); + }); + }); + + describe('and pressing arrow right on the menu trigger button', () => { + it('then the correct menu item should receive focus', () => { + getTestContext(); + + userEvent.tab(); + expect(screen.getAllByRole('menuitem')).toHaveLength(3); + expect(screen.getByRole('menuitem', { name: 'Parent Node' })).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1'); + + userEvent.keyboard('{arrowright}'); + expect(screen.getAllByRole('menuitem')).toHaveLength(3); + expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0'); + expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1'); + }); + }); + }); + + describe('when url property is set', () => { + it('then it renders the menu trigger as a link', () => { + getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } }); + + expect(screen.getAllByRole('link')).toHaveLength(1); + expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.grafana.com'); + }); + + describe('and hovering over the menu trigger link', () => { + it('then the menu items should be visible', () => { + getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } }); + + userEvent.hover(screen.getByRole('link')); + + expect(screen.getByText('Parent Node')).toBeInTheDocument(); + expect(screen.getByText('Child Node 1')).toBeInTheDocument(); + expect(screen.getByText('Child Node 2')).toBeInTheDocument(); + }); + }); + + describe('and tabbing to the menu trigger link', () => { + it('then the menu items should be visible', () => { + getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } }); + + userEvent.tab(); + + expect(screen.getByText('Parent Node')).toBeInTheDocument(); + expect(screen.getByText('Child Node 1')).toBeInTheDocument(); + expect(screen.getByText('Child Node 2')).toBeInTheDocument(); + }); + }); + + describe('and pressing arrow right on the menu trigger link', () => { + it('then the correct menu item should receive focus', () => { + getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } }); + + userEvent.tab(); + expect(screen.getAllByRole('link')[0]).toHaveFocus(); + expect(screen.getAllByRole('menuitem')).toHaveLength(3); + expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1'); + + userEvent.keyboard('{arrowright}'); + expect(screen.getAllByRole('link')[0]).not.toHaveFocus(); + expect(screen.getAllByRole('menuitem')).toHaveLength(3); + expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0'); + expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1'); + }); + }); + + describe('and pressing arrow left on a menu item', () => { + it('then the nav bar item should receive focus', () => { + getTestContext({ link: { ...defaults.link, url: 'https://www.grafana.com' } }); + + userEvent.tab(); + userEvent.keyboard('{arrowright}'); + expect(screen.getAllByRole('link')[0]).not.toHaveFocus(); + expect(screen.getAllByRole('menuitem')).toHaveLength(3); + expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '0'); + expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1'); + + userEvent.keyboard('{arrowleft}'); + expect(screen.getAllByRole('link')[0]).toHaveFocus(); + expect(screen.getAllByRole('menuitem')).toHaveLength(3); + expect(screen.getAllByRole('menuitem')[0]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[1]).toHaveAttribute('tabIndex', '-1'); + expect(screen.getAllByRole('menuitem')[2]).toHaveAttribute('tabIndex', '-1'); + }); + }); + + describe('when appSubUrl is configured and user clicks on menuitem link', () => { + it('then location service should be called with correct url', async () => { + const { pushMock } = getTestContext( + { + link: { + ...defaults.link, + url: 'https://www.grafana.com', + children: [{ text: 'New', url: '/grafana/dashboard/new', children: [] }], + }, + }, + '/grafana' + ); + + userEvent.hover(screen.getByRole('link')); + await waitFor(() => { + expect(screen.getByText('Parent Node')).toBeInTheDocument(); + expect(screen.getByText('New')).toBeInTheDocument(); + }); + + userEvent.click(screen.getByText('New')); + await waitFor(() => { + expect(pushMock).toHaveBeenCalledTimes(1); + expect(pushMock).toHaveBeenCalledWith('/dashboard/new'); + }); + }); + }); + + describe('when appSubUrl is not configured and user clicks on menuitem link', () => { + it('then location service should be called with correct url', async () => { + const { pushMock } = getTestContext({ + link: { + ...defaults.link, + url: 'https://www.grafana.com', + children: [{ text: 'New', url: '/grafana/dashboard/new', children: [] }], + }, + }); + + userEvent.hover(screen.getByRole('link')); + await waitFor(() => { + expect(screen.getByText('Parent Node')).toBeInTheDocument(); + expect(screen.getByText('New')).toBeInTheDocument(); + }); + + userEvent.click(screen.getByText('New')); + await waitFor(() => { + expect(pushMock).toHaveBeenCalledTimes(1); + expect(pushMock).toHaveBeenCalledWith('/grafana/dashboard/new'); + }); + }); + }); + }); +}); diff --git a/public/app/core/components/NavBar/NavBarItem.tsx b/public/app/core/components/NavBar/NavBarItem.tsx new file mode 100644 index 00000000..84648fb3 --- /dev/null +++ b/public/app/core/components/NavBar/NavBarItem.tsx @@ -0,0 +1,132 @@ +import React, { ReactNode } from 'react'; +import { Item } from '@react-stately/collections'; +import { css, cx } from '@emotion/css'; +import { GrafanaTheme2, locationUtil, NavMenuItemType, NavModelItem } from '@grafana/data'; +import { IconName, useTheme2 } from '@grafana/ui'; +import { locationService } from '@grafana/runtime'; + +import { NavBarMenuItem } from './NavBarMenuItem'; +import { getNavBarItemWithoutMenuStyles, NavBarItemWithoutMenu } from './NavBarItemWithoutMenu'; +import { NavBarItemMenuTrigger } from './NavBarItemMenuTrigger'; +import { NavBarItemMenu } from './NavBarItemMenu'; +import { getNavModelItemKey } from './utils'; + +export interface Props { + isActive?: boolean; + children: ReactNode; + className?: string; + reverseMenuDirection?: boolean; + showMenu?: boolean; + link: NavModelItem; +} + +const NavBarItem = ({ + isActive = false, + children, + className, + reverseMenuDirection = false, + showMenu = true, + link, +}: Props) => { + const theme = useTheme2(); + const menuItems = link.children ?? []; + const menuItemsSorted = reverseMenuDirection ? menuItems.reverse() : menuItems; + const filteredItems = menuItemsSorted + .filter((item) => !item.hideFromMenu) + .map((i) => ({ ...i, menuItemType: NavMenuItemType.Item })); + const adjustHeightForBorder = filteredItems.length === 0; + const styles = getStyles(theme, adjustHeightForBorder, isActive); + const section: NavModelItem = { + ...link, + children: filteredItems, + menuItemType: NavMenuItemType.Section, + }; + const items: NavModelItem[] = [section].concat(filteredItems); + const onNavigate = (item: NavModelItem) => { + const { url, target, onClick } = item; + if (!url) { + onClick?.(); + return; + } + + if (!target && url.startsWith('/')) { + locationService.push(locationUtil.stripBaseFromUrl(url)); + } else { + window.open(url, target); + } + }; + + return showMenu ? ( +

+ + + {(item: NavModelItem) => { + if (item.menuItemType === NavMenuItemType.Section) { + return ( + + + + ); + } + + return ( + + + + ); + }} + + +

+ ) : ( + + {children} + + ); +}; + +export default NavBarItem; + +const getStyles = (theme: GrafanaTheme2, adjustHeightForBorder: boolean, isActive?: boolean) => ({ + ...getNavBarItemWithoutMenuStyles(theme, isActive), + header: css` + color: ${theme.colors.text.primary}; + height: ${theme.components.sidemenu.width - (adjustHeightForBorder ? 2 : 1)}px; + font-size: ${theme.typography.h4.fontSize}; + font-weight: ${theme.typography.h4.fontWeight}; + padding: ${theme.spacing(1)} ${theme.spacing(2)}; + white-space: nowrap; + width: 100%; + `, + item: css` + color: ${theme.colors.text.primary}; + `, +}); diff --git a/public/app/core/components/NavBar/NavBarItemMenu.tsx b/public/app/core/components/NavBar/NavBarItemMenu.tsx new file mode 100644 index 00000000..000b996d --- /dev/null +++ b/public/app/core/components/NavBar/NavBarItemMenu.tsx @@ -0,0 +1,105 @@ +import React, { ReactElement, useEffect, useRef } from 'react'; +import { css } from '@emotion/css'; +import { useTheme2 } from '@grafana/ui'; +import { GrafanaTheme2, NavMenuItemType, NavModelItem } from '@grafana/data'; +import { SpectrumMenuProps } from '@react-types/menu'; +import { useMenu } from '@react-aria/menu'; +import { useTreeState } from '@react-stately/tree'; +import { mergeProps } from '@react-aria/utils'; + +import { getNavModelItemKey } from './utils'; +import { useNavBarItemMenuContext } from './context'; +import { NavBarItemMenuItem } from './NavBarItemMenuItem'; + +export interface NavBarItemMenuProps extends SpectrumMenuProps { + onNavigate: (item: NavModelItem) => void; + adjustHeightForBorder: boolean; + reverseMenuDirection?: boolean; +} + +export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null { + const { reverseMenuDirection, adjustHeightForBorder, disabledKeys, onNavigate, ...rest } = props; + const contextProps = useNavBarItemMenuContext(); + const completeProps = { + ...mergeProps(contextProps, rest), + }; + const { menuHasFocus, menuProps: contextMenuProps = {} } = contextProps; + const theme = useTheme2(); + const styles = getStyles(theme, reverseMenuDirection); + const state = useTreeState({ ...rest, disabledKeys }); + const ref = useRef(null); + const { menuProps } = useMenu(completeProps, { ...state }, ref); + const allItems = [...state.collection]; + const items = allItems.filter((item) => item.value.menuItemType === NavMenuItemType.Item); + const section = allItems.find((item) => item.value.menuItemType === NavMenuItemType.Section); + + useEffect(() => { + if (menuHasFocus && !state.selectionManager.isFocused) { + state.selectionManager.setFocusedKey(section?.key ?? ''); + state.selectionManager.setFocused(true); + } else if (!menuHasFocus) { + state.selectionManager.setFocused(false); + state.selectionManager.setFocusedKey(''); + state.selectionManager.clearSelection(); + } + }, [menuHasFocus, state.selectionManager, reverseMenuDirection, section?.key]); + + if (!section) { + return null; + } + + const menuSubTitle = section.value.subTitle; + + const sectionComponent = ( + + ); + + const itemComponents = items.map((item) => ( + + )); + + const subTitleComponent = menuSubTitle && ( +

+ {menuSubTitle} +

+ ); + + const menu = [sectionComponent, itemComponents, subTitleComponent]; + + return ( +

+ {reverseMenuDirection ? menu.reverse() : menu} + + ); +} + +function getStyles(theme: GrafanaTheme2, reverseDirection?: boolean) { + return { + menu: css` + background-color: ${theme.colors.background.primary}; + border: 1px solid ${theme.components.panel.borderColor}; + bottom: ${reverseDirection ? 0 : 'auto'}; + box-shadow: ${theme.shadows.z3}; + display: flex; + flex-direction: column; + left: 100%; + list-style: none; + min-width: 140px; + position: absolute; + top: ${reverseDirection ? 'auto' : 0}; + transition: ${theme.transitions.create('opacity')}; + z-index: ${theme.zIndex.sidemenu}; + list-style: none; + `, + subtitle: css` + background-color: transparent; + border-${reverseDirection ? 'bottom' : 'top'}: 1px solid ${theme.colors.border.weak}; + color: ${theme.colors.text.secondary}; + font-size: ${theme.typography.bodySmall.fontSize}; + font-weight: ${theme.typography.bodySmall.fontWeight}; + padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)}; + text-align: left; + white-space: nowrap; + `, + }; +} diff --git a/public/app/core/components/NavBar/NavBarItemMenuItem.tsx b/public/app/core/components/NavBar/NavBarItemMenuItem.tsx new file mode 100644 index 00000000..785a4f3a --- /dev/null +++ b/public/app/core/components/NavBar/NavBarItemMenuItem.tsx @@ -0,0 +1,87 @@ +import React, { ReactElement, useRef, useState } from 'react'; +import { css } from '@emotion/css'; +import { useTheme2 } from '@grafana/ui'; +import { GrafanaTheme2, NavModelItem } from '@grafana/data'; +import { useMenuItem } from '@react-aria/menu'; +import { useFocus, useKeyboard } from '@react-aria/interactions'; +import { TreeState } from '@react-stately/tree'; +import { mergeProps } from '@react-aria/utils'; +import { Node } from '@react-types/shared'; + +import { useNavBarItemMenuContext } from './context'; + +export interface NavBarItemMenuItemProps { + item: Node; + state: TreeState; + onNavigate: (item: NavModelItem) => void; +} + +export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement { + const { onClose, onLeft } = useNavBarItemMenuContext(); + const { key, rendered } = item; + const ref = useRef(null); + const isDisabled = state.disabledKeys.has(key); + + // style to the focused menu item + const [isFocused, setFocused] = useState(false); + const { focusProps } = useFocus({ onFocusChange: setFocused, isDisabled }); + const theme = useTheme2(); + const isSection = item.value.menuItemType === 'section'; + const styles = getStyles(theme, isFocused, isSection); + const onAction = () => { + onNavigate(item.value); + onClose(); + }; + + let { menuItemProps } = useMenuItem( + { + isDisabled, + 'aria-label': item['aria-label'], + key, + closeOnSelect: true, + onClose, + onAction, + }, + state, + ref + ); + + const { keyboardProps } = useKeyboard({ + onKeyDown: (e) => { + if (e.key === 'ArrowLeft') { + onLeft(); + } + e.continuePropagation(); + }, + }); + + return ( +

+ {rendered} +

+ ); +} + +function getStyles(theme: GrafanaTheme2, isFocused: boolean, isSection: boolean) { + let backgroundColor = 'transparent'; + if (isFocused) { + backgroundColor = theme.colors.action.hover; + } else if (isSection) { + backgroundColor = theme.colors.background.secondary; + } + return { + menuItem: css` + background-color: ${backgroundColor}; + color: ${theme.colors.text.primary}; + + &:focus-visible { + background-color: ${theme.colors.action.hover}; + box-shadow: none; + color: ${theme.colors.text.primary}; + outline: 2px solid ${theme.colors.primary.main}; + outline-offset: -2px; + transition: none; + } + `, + }; +} diff --git a/public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx b/public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx new file mode 100644 index 00000000..c93dcf0f --- /dev/null +++ b/public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx @@ -0,0 +1,208 @@ +import React, { ReactElement, useState } from 'react'; +import { css, cx } from '@emotion/css'; +import { Icon, IconName, Link, useTheme2 } from '@grafana/ui'; +import { GrafanaTheme2, NavModelItem } from '@grafana/data'; +import { MenuTriggerProps } from '@react-types/menu'; +import { useMenuTriggerState } from '@react-stately/menu'; +import { useMenuTrigger } from '@react-aria/menu'; +import { useFocusWithin, useHover, useKeyboard } from '@react-aria/interactions'; +import { useButton } from '@react-aria/button'; +import { DismissButton, useOverlay } from '@react-aria/overlays'; +import { FocusScope } from '@react-aria/focus'; + +import { NavBarItemMenuContext } from './context'; + +export interface NavBarItemMenuTriggerProps extends MenuTriggerProps { + children: ReactElement; + item: NavModelItem; + isActive?: boolean; + label: string; +} + +export function NavBarItemMenuTrigger(props: NavBarItemMenuTriggerProps): ReactElement { + const { item, isActive, label, children: menu, ...rest } = props; + const [menuHasFocus, setMenuHasFocus] = useState(false); + const theme = useTheme2(); + const styles = getStyles(theme, isActive); + + // Create state based on the incoming props + const state = useMenuTriggerState({ ...rest }); + + // Get props for the menu trigger and menu elements + const ref = React.useRef(null); + const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, ref); + + const { hoverProps } = useHover({ + onHoverChange: (isHovering) => { + if (isHovering) { + state.open(); + } else { + state.close(); + } + }, + }); + + const { focusWithinProps } = useFocusWithin({ + onFocusWithinChange: (isFocused) => { + if (isFocused) { + state.open(); + } + if (!isFocused) { + state.close(); + setMenuHasFocus(false); + } + }, + }); + + const { keyboardProps } = useKeyboard({ + onKeyDown: (e) => { + switch (e.key) { + case 'ArrowRight': + if (!state.isOpen) { + state.open(); + } + setMenuHasFocus(true); + break; + default: + break; + } + }, + }); + + // Get props for the button based on the trigger props from useMenuTrigger + const { buttonProps } = useButton(menuTriggerProps, ref); + + let element = ( + + ); + + if (item?.url) { + element = + !item.target && item.url.startsWith('/') ? ( + + + {item?.icon && } + {item?.img && {`${item.text}

} + + + ) : ( + + + {item?.icon && } + {item?.img &&

} + + + ); + } + + const overlayRef = React.useRef(null); + const { overlayProps } = useOverlay( + { + onClose: () => state.close(), + isOpen: state.isOpen, + isDismissable: true, + }, + overlayRef + ); + + return ( +

+ {element} + {state.isOpen && ( + state.close(), + onLeft: () => { + setMenuHasFocus(false); + ref.current?.focus(); + }, + }} + > + +

+ state.close()} /> + {menu} + state.close()} /> +

+ + + )} +

+ ); +} + +const getStyles = (theme: GrafanaTheme2, isActive?: boolean) => ({ + element: css` + background-color: transparent; + border: none; + color: inherit; + display: block; + line-height: ${theme.components.sidemenu.width}px; + padding: 0; + text-align: center; + width: ${theme.components.sidemenu.width}px; + + &::before { + display: ${isActive ? 'block' : 'none'}; + content: ' '; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + border-radius: 2px; + background-image: ${theme.colors.gradients.brandVertical}; + } + + &:focus-visible { + background-color: ${theme.colors.action.hover}; + box-shadow: none; + color: ${theme.colors.text.primary}; + outline: 2px solid ${theme.colors.primary.main}; + outline-offset: -2px; + transition: none; + } + `, + icon: css` + height: 100%; + width: 100%; + + img { + border-radius: 50%; + height: ${theme.spacing(3)}; + width: ${theme.spacing(3)}; + } + `, +}); diff --git a/public/app/core/components/NavBar/NavBarItemWithoutMenu.tsx b/public/app/core/components/NavBar/NavBarItemWithoutMenu.tsx new file mode 100644 index 00000000..c1f97555 --- /dev/null +++ b/public/app/core/components/NavBar/NavBarItemWithoutMenu.tsx @@ -0,0 +1,118 @@ +import { GrafanaTheme2 } from '../../../../../packages/grafana-data'; +import { css, cx } from '@emotion/css'; +import React, { ReactNode } from 'react'; +import { Link, useTheme2 } from '../../../../../packages/grafana-ui'; + +export interface NavBarItemWithoutMenuProps { + label: string; + children: ReactNode; + className?: string; + url?: string; + target?: string; + isActive?: boolean; + onClick?: () => void; +} + +export function NavBarItemWithoutMenu({ + label, + children, + className, + url, + target, + isActive = false, + onClick, +}: NavBarItemWithoutMenuProps) { + const theme = useTheme2(); + const styles = getNavBarItemWithoutMenuStyles(theme, isActive); + + return ( +

+ {!url && ( + + )} + {url && ( + <> + {!target && url.startsWith('/') ? ( + + {children} + + ) : ( + + {children} + + )} + + )} +

+ ); +} + +export function getNavBarItemWithoutMenuStyles(theme: GrafanaTheme2, isActive?: boolean) { + return { + container: css` + position: relative; + color: ${isActive ? theme.colors.text.primary : theme.colors.text.secondary}; + + &:hover { + background-color: ${theme.colors.action.hover}; + color: ${theme.colors.text.primary}; + + // TODO don't use a hardcoded class here, use isVisible in NavBarDropdown + .navbar-dropdown { + opacity: 1; + visibility: visible; + } + } + `, + element: css` + background-color: transparent; + border: none; + color: inherit; + display: block; + line-height: ${theme.components.sidemenu.width}px; + padding: 0; + text-align: center; + width: ${theme.components.sidemenu.width}px; + + &::before { + display: ${isActive ? 'block' : 'none'}; + content: ' '; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + border-radius: 2px; + background-image: ${theme.colors.gradients.brandVertical}; + } + + &:focus-visible { + background-color: ${theme.colors.action.hover}; + box-shadow: none; + color: ${theme.colors.text.primary}; + outline: 2px solid ${theme.colors.primary.main}; + outline-offset: -2px; + transition: none; + } + `, + icon: css` + height: 100%; + width: 100%; + + img { + border-radius: 50%; + height: ${theme.spacing(3)}; + width: ${theme.spacing(3)}; + } + `, + }; +} diff --git a/public/app/core/components/NavBar/NavBarMenu.test.tsx b/public/app/core/components/NavBar/NavBarMenu.test.tsx new file mode 100644 index 00000000..08f1acd6 --- /dev/null +++ b/public/app/core/components/NavBar/NavBarMenu.test.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { NavModelItem } from '@grafana/data'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { NavBarMenu } from './NavBarMenu'; + +describe('NavBarMenu', () => { + const mockOnClose = jest.fn(); + const mockNavItems: NavModelItem[] = []; + + beforeEach(() => { + render(); + }); + + it('should render the component', () => { + const sidemenu = screen.getByTestId('navbarmenu'); + expect(sidemenu).toBeInTheDocument(); + }); + + it('has a close button', () => { + const closeButton = screen.getByRole('button', { name: 'Close navigation menu' }); + expect(closeButton).toBeInTheDocument(); + }); + + it('clicking the close button calls the onClose callback', () => { + const closeButton = screen.getByRole('button', { name: 'Close navigation menu' }); + expect(closeButton).toBeInTheDocument(); + userEvent.click(closeButton); + expect(mockOnClose).toHaveBeenCalled(); + }); +}); diff --git a/public/app/core/components/NavBar/NavBarMenu.tsx b/public/app/core/components/NavBar/NavBarMenu.tsx new file mode 100644 index 00000000..c5bb21fa --- /dev/null +++ b/public/app/core/components/NavBar/NavBarMenu.tsx @@ -0,0 +1,123 @@ +import React, { useRef } from 'react'; +import { GrafanaTheme2, NavModelItem } from '@grafana/data'; +import { CustomScrollbar, Icon, IconButton, IconName, useTheme2 } from '@grafana/ui'; +import { FocusScope } from '@react-aria/focus'; +import { useOverlay } from '@react-aria/overlays'; +import { css } from '@emotion/css'; +import { NavBarMenuItem } from './NavBarMenuItem'; + +export interface Props { + activeItem?: NavModelItem; + navItems: NavModelItem[]; + onClose: () => void; +} + +export function NavBarMenu({ activeItem, navItems, onClose }: Props) { + const theme = useTheme2(); + const styles = getStyles(theme); + const ref = useRef(null); + const { overlayProps } = useOverlay( + { + isDismissable: true, + isOpen: true, + onClose, + }, + ref + ); + + return ( + +

+ + +

+ +

+ { + link.onClick?.(); + onClose(); + }} + styleOverrides={styles.sectionHeader} + target={link.target} + text={link.text} + url={link.url} + isMobile={true} + /> + {link.children?.map( + (childLink, childIndex) => + !childLink.divider && ( + { + childLink.onClick?.(); + onClose(); + }} + styleOverrides={styles.item} + target={childLink.target} + text={childLink.text} + url={childLink.url} + isMobile={true} + /> + ) + )} +

+ +

+ + ); +} + +NavBarMenu.displayName = 'NavBarMenu'; + +const getStyles = (theme: GrafanaTheme2) => ({ + container: css` + background-color: ${theme.colors.background.canvas}; + bottom: 0; + display: flex; + flex-direction: column; + left: 0; + min-width: 300px; + position: fixed; + right: 0; + top: 0; + + ${theme.breakpoints.up('md')} { + border-right: 1px solid ${theme.colors.border.weak}; + right: unset; + } + `, + content: css` + display: flex; + flex-direction: column; + overflow: auto; + `, + header: css` + border-bottom: 1px solid ${theme.colors.border.weak}; + display: flex; + justify-content: space-between; + padding: ${theme.spacing(2)}; + `, + item: css` + padding: ${theme.spacing(1)} ${theme.spacing(2)}; + `, + section: css` + border-bottom: 1px solid ${theme.colors.border.weak}; + `, + sectionHeader: css` + color: ${theme.colors.text.primary}; + font-size: ${theme.typography.h5.fontSize}; + padding: ${theme.spacing(1)} ${theme.spacing(2)}; + `, +}); diff --git a/public/app/core/components/NavBar/NavBarMenuItem.test.tsx b/public/app/core/components/NavBar/NavBarMenuItem.test.tsx new file mode 100644 index 00000000..64fa8e53 --- /dev/null +++ b/public/app/core/components/NavBar/NavBarMenuItem.test.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; +import { NavBarMenuItem } from './NavBarMenuItem'; + +describe('NavBarMenuItem', () => { + const mockText = 'MyChildItem'; + const mockUrl = '/route'; + const mockIcon = 'home-alt'; + + it('displays the text', () => { + render(); + const text = screen.getByText(mockText); + expect(text).toBeInTheDocument(); + }); + + it('attaches the url to the text if provided', () => { + render( + + + + ); + const link = screen.getByRole('link', { name: mockText }); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', mockUrl); + }); + + it('displays an icon if a valid icon is provided', () => { + render(); + const icon = screen.getByTestId('dropdown-child-icon'); + expect(icon).toBeInTheDocument(); + }); + + it('displays an external link icon if the target is _blank', () => { + render(); + const icon = screen.getByTestId('external-link-icon'); + expect(icon).toBeInTheDocument(); + }); + + it('displays a divider instead when isDivider is true', () => { + render(); + + // Check the divider is shown + const divider = screen.getByTestId('dropdown-child-divider'); + expect(divider).toBeInTheDocument(); + + // Check nothing else is rendered + const text = screen.queryByText(mockText); + const icon = screen.queryByTestId('dropdown-child-icon'); + const link = screen.queryByRole('link', { name: mockText }); + expect(text).not.toBeInTheDocument(); + expect(icon).not.toBeInTheDocument(); + expect(link).not.toBeInTheDocument(); + }); +}); diff --git a/public/app/core/components/NavBar/NavBarMenuItem.tsx b/public/app/core/components/NavBar/NavBarMenuItem.tsx new file mode 100644 index 00000000..cb37fe82 --- /dev/null +++ b/public/app/core/components/NavBar/NavBarMenuItem.tsx @@ -0,0 +1,141 @@ +import React from 'react'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Icon, IconName, Link, useTheme2 } from '@grafana/ui'; +import { css } from '@emotion/css'; + +export interface Props { + icon?: IconName; + isActive?: boolean; + isDivider?: boolean; + onClick?: () => void; + styleOverrides?: string; + target?: HTMLAnchorElement['target']; + text: string; + url?: string; + adjustHeightForBorder?: boolean; + isMobile?: boolean; +} + +export function NavBarMenuItem({ + icon, + isActive, + isDivider, + onClick, + styleOverrides, + target, + text, + url, + isMobile = false, +}: Props) { + const theme = useTheme2(); + const styles = getStyles(theme, isActive, styleOverrides); + + const linkContent = ( +

+ {icon && } + {text} +

+ {target === '_blank' && ( + + )} +

+ ); + + let element = ( + + ); + + if (url) { + element = + !target && url.startsWith('/') ? ( + + {linkContent} + + ) : ( + + {linkContent} + + ); + } + if (isMobile) { + return isDivider ? ( +

+ ) : ( +

{element}

+ ); + } + + return isDivider ? ( +

+ ) : ( + <>{element} + ); +} + +NavBarMenuItem.displayName = 'NavBarMenuItem'; + +const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], styleOverrides: Props['styleOverrides']) => ({ + divider: css` + border-bottom: 1px solid ${theme.colors.border.weak}; + height: 1px; + margin: ${theme.spacing(1)} 0; + overflow: hidden; + `, + element: css` + align-items: center; + background: none; + border: none; + color: ${isActive ? theme.colors.text.primary : theme.colors.text.secondary}; + display: flex; + font-size: inherit; + height: 100%; + padding: 5px 12px 5px 10px; + position: relative; + text-align: left; + white-space: nowrap; + width: 100%; + + &:hover, + &:focus-visible { + background-color: ${theme.colors.action.hover}; + color: ${theme.colors.text.primary}; + } + + &:focus-visible { + box-shadow: none; + outline: 2px solid ${theme.colors.primary.main}; + outline-offset: -2px; + transition: none; + } + + &::before { + display: ${isActive ? 'block' : 'none'}; + content: ' '; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + border-radius: 2px; + background-image: ${theme.colors.gradients.brandVertical}; + } + + ${styleOverrides}; + `, + externalLinkIcon: css` + color: ${theme.colors.text.secondary}; + margin-left: ${theme.spacing(1)}; + `, + icon: css` + margin-right: ${theme.spacing(1)}; + `, + linkContent: css` + display: flex; + flex: 1; + flex-direction: row; + justify-content: space-between; + `, +}); diff --git a/public/app/core/components/NavBar/NavBarNext.test.tsx b/public/app/core/components/NavBar/NavBarNext.test.tsx new file mode 100644 index 00000000..2b48ab83 --- /dev/null +++ b/public/app/core/components/NavBar/NavBarNext.test.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { NavBarNext } from './NavBarNext'; +import { render, screen } from '@testing-library/react'; +import { Router } from 'react-router-dom'; +import { locationService } from '@grafana/runtime'; +import { configureStore } from 'app/store/configureStore'; +import { Provider } from 'react-redux'; + +jest.mock('app/core/services/context_srv', () => ({ + contextSrv: { + sidemenu: true, + user: {}, + isSignedIn: false, + isGrafanaAdmin: false, + isEditor: false, + hasEditPermissionFolders: false, + }, +})); + +const setup = () => { + const store = configureStore(); + + return render( + + + + + + ); +}; + +describe('Render', () => { + it('should render component', async () => { + setup(); + const sidemenu = await screen.findByTestId('sidemenu'); + expect(sidemenu).toBeInTheDocument(); + }); + + it('should not render when in kiosk mode', async () => { + setup(); + + locationService.partial({ kiosk: 'full' }); + const sidemenu = screen.queryByTestId('sidemenu'); + expect(sidemenu).not.toBeInTheDocument(); + }); +}); diff --git a/public/app/core/components/NavBar/NavBarNext.tsx b/public/app/core/components/NavBar/NavBarNext.tsx new file mode 100644 index 00000000..41d9f8fe --- /dev/null +++ b/public/app/core/components/NavBar/NavBarNext.tsx @@ -0,0 +1,174 @@ +import React, { FC, useState } from 'react'; +import { useLocation } from 'react-router-dom'; +import { css, cx } from '@emotion/css'; +import { cloneDeep } from 'lodash'; +import { GrafanaTheme2, NavModelItem, NavSection } from '@grafana/data'; +import { Icon, IconName, useTheme2 } from '@grafana/ui'; +import { locationService } from '@grafana/runtime'; +import config from 'app/core/config'; +import { KioskMode } from 'app/types'; +import { enrichConfigItems, getActiveItem, isMatchOrChildMatch, isSearchActive, SEARCH_ITEM_ID } from './utils'; +import { OrgSwitcher } from '../OrgSwitcher'; +import { NavBarSection } from './NavBarSection'; +import { NavBarMenu } from './NavBarMenu'; +import NavBarItem from './NavBarItem'; +import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu'; +import { Branding } from '../Branding/Branding'; + +const onOpenSearch = () => { + locationService.partial({ search: 'open' }); +}; + +const searchItem: NavModelItem = { + id: SEARCH_ITEM_ID, + onClick: onOpenSearch, + text: 'Search dashboards', + icon: 'search', +}; + +export const NavBarNext: FC = React.memo(() => { + const theme = useTheme2(); + const styles = getStyles(theme); + const location = useLocation(); + const query = new URLSearchParams(location.search); + const kiosk = query.get('kiosk') as KioskMode; + const [showSwitcherModal, setShowSwitcherModal] = useState(false); + const toggleSwitcherModal = () => { + setShowSwitcherModal(!showSwitcherModal); + }; + const navTree: NavModelItem[] = cloneDeep(config.bootData.navTree); + const coreItems = navTree.filter((item) => item.section === NavSection.Core); + const pluginItems = navTree.filter((item) => item.section === NavSection.Plugin); + const configItems = enrichConfigItems( + navTree.filter((item) => item.section === NavSection.Config), + location, + toggleSwitcherModal + ); + const activeItem = isSearchActive(location) ? searchItem : getActiveItem(navTree, location.pathname); + const [menuOpen, setMenuOpen] = useState(false); + + if (kiosk !== null) { + return null; + } + + return ( +

setMenuOpen(!menuOpen)} key="hamburger"> + +

+ + + setMenuOpen(!menuOpen)}> + + + + + + + + + {coreItems.map((link, index) => ( + + {link.icon && } + {link.img && {`${link.text}

} + + ))} + + + {pluginItems.length > 0 && ( + + {pluginItems.map((link, index) => ( + + {link.icon && } + {link.img && {`${link.text}

} + + ))} + + )} + +

+ + + {configItems.map((link, index) => ( + + {link.icon && } + {link.img && {`${link.text}

} + + ))} + + + {showSwitcherModal && } + {menuOpen && ( + setMenuOpen(false)} + /> + )} +

+ ); +}); + +NavBarNext.displayName = 'NavBar'; + +const getStyles = (theme: GrafanaTheme2) => ({ + search: css` + display: none; + margin-top: 0; + + ${theme.breakpoints.up('md')} { + display: block; + } + `, + sidemenu: css` + display: flex; + flex-direction: column; + position: fixed; + z-index: ${theme.zIndex.sidemenu}; + + ${theme.breakpoints.up('md')} { + gap: ${theme.spacing(1)}; + margin-left: ${theme.spacing(1)}; + padding: ${theme.spacing(1)} 0; + position: relative; + width: ${theme.components.sidemenu.width}px; + } + + .sidemenu-hidden & { + display: none; + } + `, + grafanaLogo: css` + align-items: center; + display: flex; + img { + height: ${theme.spacing(3)}; + width: ${theme.spacing(3)}; + } + justify-content: center; + `, + mobileSidemenuLogo: css` + align-items: center; + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: ${theme.spacing(2)}; + + ${theme.breakpoints.up('md')} { + display: none; + } + `, + spacer: css` + flex: 1; + `, +}); diff --git a/public/app/core/components/NavBar/NavBarSection.tsx b/public/app/core/components/NavBar/NavBarSection.tsx new file mode 100644 index 00000000..9f11a7ef --- /dev/null +++ b/public/app/core/components/NavBar/NavBarSection.tsx @@ -0,0 +1,37 @@ +import React, { ReactNode } from 'react'; +import { css, cx } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useTheme2 } from '@grafana/ui'; +import config from '../../config'; + +export interface Props { + children: ReactNode; + className?: string; +} + +export function NavBarSection({ children, className }: Props) { + const newNavigationEnabled = config.featureToggles.newNavigation; + const theme = useTheme2(); + const styles = getStyles(theme, newNavigationEnabled); + + return ( +

+ {children} + + ); +} + +const getStyles = (theme: GrafanaTheme2, newNavigationEnabled: boolean) => ({ + container: css` + display: none; + list-style: none; + + ${theme.breakpoints.up('md')} { + background-color: ${newNavigationEnabled ? theme.colors.background.primary : 'inherit'}; + border: ${newNavigationEnabled ? `1px solid ${theme.components.panel.borderColor}` : 'none'}; + border-radius: 2px; + display: flex; + flex-direction: inherit; + } + `, +}); diff --git a/public/app/core/components/NavBar/context.tsx b/public/app/core/components/NavBar/context.tsx new file mode 100644 index 00000000..e2c5b0c0 --- /dev/null +++ b/public/app/core/components/NavBar/context.tsx @@ -0,0 +1,18 @@ +import { createContext, HTMLAttributes, useContext } from 'react'; + +export interface NavBarItemMenuContextProps { + menuHasFocus: boolean; + onClose: () => void; + onLeft: () => void; + menuProps?: HTMLAttributes; +} + +export const NavBarItemMenuContext = createContext({ + menuHasFocus: false, + onClose: () => undefined, + onLeft: () => undefined, +}); + +export function useNavBarItemMenuContext(): NavBarItemMenuContextProps { + return useContext(NavBarItemMenuContext); +} diff --git a/public/app/core/components/NavBar/utils.test.ts b/public/app/core/components/NavBar/utils.test.ts new file mode 100644 index 00000000..8da0b6bc --- /dev/null +++ b/public/app/core/components/NavBar/utils.test.ts @@ -0,0 +1,301 @@ +import { Location } from 'history'; +import { NavModelItem } from '@grafana/data'; +import { ContextSrv, setContextSrv } from 'app/core/services/context_srv'; +import { getConfig, updateConfig } from '../../config'; +import { enrichConfigItems, getActiveItem, getForcedLoginUrl, isMatchOrChildMatch, isSearchActive } from './utils'; + +jest.mock('../../app_events', () => ({ + publish: jest.fn(), +})); + +describe('getForcedLoginUrl', () => { + it.each` + appSubUrl | url | expected + ${''} | ${'/whatever?a=1&b=2'} | ${'/whatever?a=1&b=2&forceLogin=true'} + ${'/grafana'} | ${'/whatever?a=1&b=2'} | ${'/grafana/whatever?a=1&b=2&forceLogin=true'} + ${'/grafana/test'} | ${'/whatever?a=1&b=2'} | ${'/grafana/test/whatever?a=1&b=2&forceLogin=true'} + ${'/grafana'} | ${''} | ${'/grafana?forceLogin=true'} + ${'/grafana'} | ${'/whatever'} | ${'/grafana/whatever?forceLogin=true'} + ${'/grafana'} | ${'/whatever/'} | ${'/grafana/whatever/?forceLogin=true'} + `( + "when appUrl set to '$appUrl' and appSubUrl set to '$appSubUrl' then result should be '$expected'", + ({ appSubUrl, url, expected }) => { + updateConfig({ + appSubUrl, + }); + + const result = getForcedLoginUrl(url); + + expect(result).toBe(expected); + } + ); +}); + +describe('enrichConfigItems', () => { + let mockItems: NavModelItem[]; + const mockLocation: Location = { + hash: '', + pathname: '/', + search: '', + state: '', + }; + + beforeEach(() => { + mockItems = [ + { + id: 'profile', + text: 'Profile', + hideFromMenu: true, + }, + { + id: 'help', + text: 'Help', + hideFromMenu: true, + }, + ]; + }); + + it('does not add a sign in item if a user signed in', () => { + const contextSrv = new ContextSrv(); + contextSrv.user.isSignedIn = false; + setContextSrv(contextSrv); + const enrichedConfigItems = enrichConfigItems(mockItems, mockLocation, jest.fn()); + const signInNode = enrichedConfigItems.find((item) => item.id === 'signin'); + expect(signInNode).toBeDefined(); + }); + + it('adds a sign in item if a user is not signed in', () => { + const contextSrv = new ContextSrv(); + contextSrv.user.isSignedIn = true; + setContextSrv(contextSrv); + const enrichedConfigItems = enrichConfigItems(mockItems, mockLocation, jest.fn()); + const signInNode = enrichedConfigItems.find((item) => item.id === 'signin'); + expect(signInNode).toBeDefined(); + }); + + it('does not add an org switcher to the profile node if there is 1 org', () => { + const contextSrv = new ContextSrv(); + contextSrv.user.orgCount = 1; + setContextSrv(contextSrv); + const enrichedConfigItems = enrichConfigItems(mockItems, mockLocation, jest.fn()); + const profileNode = enrichedConfigItems.find((item) => item.id === 'profile'); + expect(profileNode!.children).toBeUndefined(); + }); + + it('adds an org switcher to the profile node if there is more than 1 org', () => { + const contextSrv = new ContextSrv(); + contextSrv.user.orgCount = 2; + setContextSrv(contextSrv); + const enrichedConfigItems = enrichConfigItems(mockItems, mockLocation, jest.fn()); + const profileNode = enrichedConfigItems.find((item) => item.id === 'profile'); + expect(profileNode!.children).toContainEqual( + expect.objectContaining({ + text: 'Switch organization', + }) + ); + }); + + it('enhances the help node with extra child links', () => { + const contextSrv = new ContextSrv(); + setContextSrv(contextSrv); + const enrichedConfigItems = enrichConfigItems(mockItems, mockLocation, jest.fn()); + const helpNode = enrichedConfigItems.find((item) => item.id === 'help'); + expect(helpNode!.children).toContainEqual( + expect.objectContaining({ + text: 'Documentation', + }) + ); + expect(helpNode!.children).toContainEqual( + expect.objectContaining({ + text: 'Support', + }) + ); + expect(helpNode!.children).toContainEqual( + expect.objectContaining({ + text: 'Community', + }) + ); + expect(helpNode!.children).toContainEqual( + expect.objectContaining({ + text: 'Keyboard shortcuts', + }) + ); + }); +}); + +describe('isMatchOrChildMatch', () => { + const mockChild: NavModelItem = { + text: 'Child', + url: '/dashboards/child', + }; + const mockItemToCheck: NavModelItem = { + text: 'Dashboards', + url: '/dashboards', + children: [mockChild], + }; + + it('returns true if the itemToCheck is an exact match with the searchItem', () => { + const searchItem = mockItemToCheck; + expect(isMatchOrChildMatch(mockItemToCheck, searchItem)).toBe(true); + }); + + it('returns true if the itemToCheck has a child that matches the searchItem', () => { + const searchItem = mockChild; + expect(isMatchOrChildMatch(mockItemToCheck, searchItem)).toBe(true); + }); + + it('returns false otherwise', () => { + const searchItem: NavModelItem = { + text: 'No match', + url: '/noMatch', + }; + expect(isMatchOrChildMatch(mockItemToCheck, searchItem)).toBe(false); + }); +}); + +describe('getActiveItem', () => { + const mockNavTree: NavModelItem[] = [ + { + text: 'Item', + url: '/item', + }, + { + text: 'Item with query param', + url: '/itemWithQueryParam?foo=bar', + }, + { + text: 'Item with children', + url: '/itemWithChildren', + children: [ + { + text: 'Child', + url: '/child', + }, + ], + }, + { + text: 'Alerting item', + url: '/alerting/list', + }, + { + text: 'Base', + url: '/', + }, + { + text: 'Dashboards', + url: '/dashboards', + }, + { + text: 'More specific dashboard', + url: '/d/moreSpecificDashboard', + }, + ]; + + it('returns an exact match at the top level', () => { + const mockPathName = '/item'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'Item', + url: '/item', + }); + }); + + it('returns an exact match ignoring query params', () => { + const mockPathName = '/itemWithQueryParam?bar=baz'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'Item with query param', + url: '/itemWithQueryParam?foo=bar', + }); + }); + + it('returns an exact child match', () => { + const mockPathName = '/child'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'Child', + url: '/child', + }); + }); + + it('returns the alerting link if the pathname is an alert notification', () => { + const mockPathName = '/alerting/notification/foo'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'Alerting item', + url: '/alerting/list', + }); + }); + + describe('when the newNavigation feature toggle is disabled', () => { + beforeEach(() => { + updateConfig({ + featureToggles: { + ...getConfig().featureToggles, + newNavigation: false, + }, + }); + }); + + it('returns the base route link if the pathname starts with /d/', () => { + const mockPathName = '/d/foo'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'Base', + url: '/', + }); + }); + + it('returns a more specific link if one exists', () => { + const mockPathName = '/d/moreSpecificDashboard'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'More specific dashboard', + url: '/d/moreSpecificDashboard', + }); + }); + }); + + describe('when the newNavigation feature toggle is enabled', () => { + beforeEach(() => { + updateConfig({ + featureToggles: { + ...getConfig().featureToggles, + newNavigation: true, + }, + }); + }); + + it('returns the dashboards route link if the pathname starts with /d/', () => { + const mockPathName = '/d/foo'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'Dashboards', + url: '/dashboards', + }); + }); + + it('returns a more specific link if one exists', () => { + const mockPathName = '/d/moreSpecificDashboard'; + expect(getActiveItem(mockNavTree, mockPathName)).toEqual({ + text: 'More specific dashboard', + url: '/d/moreSpecificDashboard', + }); + }); + }); +}); + +describe('isSearchActive', () => { + it('returns true if the search query parameter is "open"', () => { + const mockLocation = { + hash: '', + pathname: '/', + search: '?search=open', + state: '', + }; + expect(isSearchActive(mockLocation)).toBe(true); + }); + + it('returns false if the search query parameter is missing', () => { + const mockLocation = { + hash: '', + pathname: '/', + search: '', + state: '', + }; + expect(isSearchActive(mockLocation)).toBe(false); + }); +}); diff --git a/public/app/core/components/NavBar/utils.ts b/public/app/core/components/NavBar/utils.ts new file mode 100644 index 00000000..80b8bca7 --- /dev/null +++ b/public/app/core/components/NavBar/utils.ts @@ -0,0 +1,142 @@ +import { Location } from 'history'; +import { NavModelItem, NavSection } from '@grafana/data'; +import { getConfig } from 'app/core/config'; +import { contextSrv } from 'app/core/services/context_srv'; +import { ShowModalReactEvent } from '../../../types/events'; +import appEvents from '../../app_events'; +import { getFooterLinks } from '../Footer/Footer'; +import { HelpModal } from '../help/HelpModal'; + +export const SEARCH_ITEM_ID = 'search'; + +export const getForcedLoginUrl = (url: string) => { + const queryParams = new URLSearchParams(url.split('?')[1]); + queryParams.append('forceLogin', 'true'); + + return `${getConfig().appSubUrl}${url.split('?')[0]}?${queryParams.toString()}`; +}; + +export const enrichConfigItems = ( + items: NavModelItem[], + location: Location, + toggleOrgSwitcher: () => void +) => { + const { isSignedIn, user } = contextSrv; + const onOpenShortcuts = () => { + appEvents.publish(new ShowModalReactEvent({ component: HelpModal })); + }; + + if (user && user.orgCount > 1) { + const profileNode = items.find((bottomNavItem) => bottomNavItem.id === 'profile'); + if (profileNode) { + profileNode.showOrgSwitcher = true; + profileNode.subTitle = `Current Org.: ${user?.orgName}`; + } + } + + if (!isSignedIn) { + const forcedLoginUrl = getForcedLoginUrl(location.pathname + location.search); + + items.unshift({ + icon: 'signout', + id: 'signin', + section: NavSection.Config, + target: '_self', + text: 'Sign in', + url: forcedLoginUrl, + }); + } + + items.forEach((link, index) => { + let menuItems = link.children || []; + + if (link.id === 'help') { + link.children = [ + ...getFooterLinks(), + { + text: 'Keyboard shortcuts', + icon: 'keyboard', + onClick: onOpenShortcuts, + }, + ]; + } + + if (link.showOrgSwitcher) { + link.children = [ + ...menuItems, + { + text: 'Switch organization', + icon: 'arrow-random', + onClick: toggleOrgSwitcher, + }, + ]; + } + }); + return items; +}; + +export const isMatchOrChildMatch = (itemToCheck: NavModelItem, searchItem?: NavModelItem) => { + return Boolean(itemToCheck === searchItem || itemToCheck.children?.some((child) => child === searchItem)); +}; + +const stripQueryParams = (url?: string) => { + return url?.split('?')[0] ?? ''; +}; + +const isBetterMatch = (newMatch: NavModelItem, currentMatch?: NavModelItem) => { + const currentMatchUrl = stripQueryParams(currentMatch?.url); + const newMatchUrl = stripQueryParams(newMatch.url); + return newMatchUrl && newMatchUrl.length > currentMatchUrl?.length; +}; + +export const getActiveItem = ( + navTree: NavModelItem[], + pathname: string, + currentBestMatch?: NavModelItem +): NavModelItem | undefined => { + const newNavigationEnabled = getConfig().featureToggles.newNavigation; + const dashboardLinkMatch = newNavigationEnabled ? '/dashboards' : '/'; + + for (const link of navTree) { + const linkPathname = stripQueryParams(link.url); + if (linkPathname) { + if (linkPathname === pathname) { + // exact match + currentBestMatch = link; + break; + } else if (linkPathname !== '/' && pathname.startsWith(linkPathname)) { + // partial match + if (isBetterMatch(link, currentBestMatch)) { + currentBestMatch = link; + } + } else if (linkPathname === '/alerting/list' && pathname.startsWith('/alerting/notification/')) { + // alert channel match + // TODO refactor routes such that we don't need this custom logic + currentBestMatch = link; + break; + } else if (linkPathname === dashboardLinkMatch && pathname.startsWith('/d/')) { + // dashboard match + // TODO refactor routes such that we don't need this custom logic + if (isBetterMatch(link, currentBestMatch)) { + currentBestMatch = link; + } + } + } + if (link.children) { + currentBestMatch = getActiveItem(link.children, pathname, currentBestMatch); + } + if (stripQueryParams(currentBestMatch?.url) === pathname) { + return currentBestMatch; + } + } + return currentBestMatch; +}; + +export const isSearchActive = (location: Location) => { + const query = new URLSearchParams(location.search); + return query.get('search') === 'open'; +}; + +export function getNavModelItemKey(item: NavModelItem) { + return item.id ?? item.text; +} diff --git a/public/app/core/components/NodeGraphSettings.tsx b/public/app/core/components/NodeGraphSettings.tsx new file mode 100644 index 00000000..669376a9 --- /dev/null +++ b/public/app/core/components/NodeGraphSettings.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { css } from '@emotion/css'; +import { + DataSourceJsonData, + DataSourcePluginOptionsEditorProps, + GrafanaTheme, + updateDatasourcePluginJsonDataOption, +} from '@grafana/data'; +import { InlineField, InlineFieldRow, InlineSwitch, useStyles } from '@grafana/ui'; + +export interface NodeGraphOptions { + enabled?: boolean; +} + +export interface NodeGraphData extends DataSourceJsonData { + nodeGraph?: NodeGraphOptions; +} + +interface Props extends DataSourcePluginOptionsEditorProps {} + +export function NodeGraphSettings({ options, onOptionsChange }: Props) { + const styles = useStyles(getStyles); + + return ( +

Node Graph

+ + + ) => + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'nodeGraph', { + ...options.jsonData.nodeGraph, + enabled: event.currentTarget.checked, + }) + } + /> + + +

+ ); +} + +const getStyles = (theme: GrafanaTheme) => ({ + container: css` + label: container; + width: 100%; + `, + row: css` + label: row; + align-items: baseline; + `, +}); diff --git a/public/app/core/components/OrgSwitcher.tsx b/public/app/core/components/OrgSwitcher.tsx new file mode 100644 index 00000000..861e4552 --- /dev/null +++ b/public/app/core/components/OrgSwitcher.tsx @@ -0,0 +1,91 @@ +import React from 'react'; + +import { getBackendSrv } from '@grafana/runtime'; +import { UserOrgDTO } from '@grafana/data'; +import { Modal, Button, CustomScrollbar } from '@grafana/ui'; + +import { contextSrv } from 'app/core/services/context_srv'; +import config from 'app/core/config'; +import { css } from '@emotion/css'; + +interface Props { + onDismiss: () => void; +} + +interface State { + orgs: UserOrgDTO[]; +} + +export class OrgSwitcher extends React.PureComponent { + state: State = { + orgs: [], + }; + + componentDidMount() { + this.getUserOrgs(); + } + + getUserOrgs = async () => { + const orgs: UserOrgDTO[] = await getBackendSrv().get('/api/user/orgs'); + this.setState({ orgs }); + }; + + setCurrentOrg = async (org: UserOrgDTO) => { + await getBackendSrv().post(`/api/user/using/${org.orgId}`); + this.setWindowLocation(`${config.appSubUrl}${config.appSubUrl.endsWith('/') ? '' : '/'}?orgId=${org.orgId}`); + }; + + setWindowLocation(href: string) { + window.location.href = href; + } + + render() { + const { onDismiss } = this.props; + const { orgs } = this.state; + + const currentOrgId = contextSrv.user.orgId; + const contentClassName = css({ + display: 'flex', + maxHeight: 'calc(85vh - 42px)', + }); + + return ( + + + + + + + + + + + {orgs.map((org) => ( + + + + + + ))} + +

Name	Role	+
{org.name}	{org.role}	+ {org.orgId === currentOrgId ? ( + + ) : ( + + )} +

+ + + ); + } +} diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx new file mode 100644 index 00000000..40034d42 --- /dev/null +++ b/public/app/core/components/Page/Page.tsx @@ -0,0 +1,61 @@ +// Libraries +import React, { FC, HTMLAttributes, useEffect } from 'react'; +import { getTitleFromNavModel } from 'app/core/selectors/navModel'; + +// Components +import PageHeader from '../PageHeader/PageHeader'; +import { Footer } from '../Footer/Footer'; +import { PageContents } from './PageContents'; +import { CustomScrollbar, useStyles2 } from '@grafana/ui'; +import { GrafanaTheme2, NavModel } from '@grafana/data'; +import { Branding } from '../Branding/Branding'; +import { css, cx } from '@emotion/css'; + +interface Props extends HTMLAttributes { + children: React.ReactNode; + navModel?: NavModel; +} + +export interface PageType extends FC { + Header: typeof PageHeader; + Contents: typeof PageContents; +} + +export const Page: PageType = ({ navModel, children, className, ...otherProps }) => { + const styles = useStyles2(getStyles); + + useEffect(() => { + if (navModel) { + const title = getTitleFromNavModel(navModel); + document.title = title ? `${title} - ${Branding.AppTitle}` : Branding.AppTitle; + } else { + document.title = Branding.AppTitle; + } + }, [navModel]); + + return ( +

+ +

+ {navModel && } + {children} +

+ +

+ ); +}; + +Page.Header = PageHeader; +Page.Contents = PageContents; + +export default Page; + +const getStyles = (theme: GrafanaTheme2) => ({ + wrapper: css` + width: 100%; + flex-grow: 1; + width: 100%; + min-height: 0; + `, +}); diff --git a/public/app/core/components/Page/PageContents.tsx b/public/app/core/components/Page/PageContents.tsx new file mode 100644 index 00000000..edfc9a01 --- /dev/null +++ b/public/app/core/components/Page/PageContents.tsx @@ -0,0 +1,16 @@ +// Libraries +import React, { FC } from 'react'; +import { cx } from '@emotion/css'; + +// Components +import PageLoader from '../PageLoader/PageLoader'; + +interface Props { + isLoading?: boolean; + children: React.ReactNode; + className?: string; +} + +export const PageContents: FC = ({ isLoading, children, className }) => { + return

{isLoading ? : children}

; +}; diff --git a/public/app/core/components/PageActionBar/PageActionBar.test.tsx b/public/app/core/components/PageActionBar/PageActionBar.test.tsx new file mode 100644 index 00000000..93f35b71 --- /dev/null +++ b/public/app/core/components/PageActionBar/PageActionBar.test.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import PageActionBar, { Props } from './PageActionBar'; + +const setup = (propOverrides?: object) => { + const props: Props = { + searchQuery: '', + setSearchQuery: jest.fn(), + target: '_blank', + linkButton: { href: 'some/url', title: 'test' }, + }; + + Object.assign(props, propOverrides); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/PageActionBar/PageActionBar.tsx b/public/app/core/components/PageActionBar/PageActionBar.tsx new file mode 100644 index 00000000..1c771a4e --- /dev/null +++ b/public/app/core/components/PageActionBar/PageActionBar.tsx @@ -0,0 +1,30 @@ +import React, { PureComponent } from 'react'; +import { LinkButton, FilterInput } from '@grafana/ui'; + +export interface Props { + searchQuery: string; + setSearchQuery: (value: string) => void; + linkButton?: { href: string; title: string; disabled?: boolean }; + target?: string; + placeholder?: string; +} + +export default class PageActionBar extends PureComponent { + render() { + const { searchQuery, linkButton, setSearchQuery, target, placeholder = 'Search by name or type' } = this.props; + const linkProps = { href: linkButton?.href, disabled: linkButton?.disabled }; + + if (target) { + (linkProps as any).target = target; + } + + return ( +

+ +

+ {linkButton && {linkButton.title}} +

+ ); + } +} diff --git a/public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap b/public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap new file mode 100644 index 00000000..28597c2e --- /dev/null +++ b/public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +

+ +

+ + test + +

+`; diff --git a/public/app/core/components/PageHeader/PageHeader.test.tsx b/public/app/core/components/PageHeader/PageHeader.test.tsx new file mode 100644 index 00000000..03ac4b58 --- /dev/null +++ b/public/app/core/components/PageHeader/PageHeader.test.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import PageHeader from './PageHeader'; +import { render, screen } from '@testing-library/react'; + +describe('PageHeader', () => { + describe('when the nav tree has a node with a title', () => { + it('should render the title', async () => { + const nav = { + main: { + icon: 'folder-open', + id: 'node', + subTitle: 'node subtitle', + url: '', + text: 'node', + }, + node: {}, + }; + + render(); + + expect(screen.getByRole('heading', { name: 'node' })).toBeInTheDocument(); + }); + }); + + describe('when the nav tree has a node with breadcrumbs and a title', () => { + it('should render the title with breadcrumbs first and then title last', async () => { + const nav = { + main: { + icon: 'folder-open', + id: 'child', + subTitle: 'child subtitle', + url: '', + text: 'child', + breadcrumbs: [{ title: 'Parent', url: 'parentUrl' }], + }, + node: {}, + }; + + render(); + + expect(screen.getByRole('heading', { name: 'Parent / child' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Parent' })).toBeInTheDocument(); + }); + }); +}); diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx new file mode 100644 index 00000000..9b6c8ff0 --- /dev/null +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -0,0 +1,146 @@ +import React, { FC } from 'react'; +import { css } from '@emotion/css'; +import { Tab, TabsBar, Icon, IconName, useStyles2 } from '@grafana/ui'; +import { NavModel, NavModelItem, NavModelBreadcrumb, GrafanaTheme2 } from '@grafana/data'; +import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem'; + +export interface Props { + model: NavModel; +} + +const SelectNav = ({ children, customCss }: { children: NavModelItem[]; customCss: string }) => { + if (!children || children.length === 0) { + return null; + } + + const defaultSelectedItem = children.find((navItem) => { + return navItem.active === true; + }); + + return ( +

+ {defaultSelectedItem?.text} +

+ ); + })} +

+ ); +}; + +const Navigation = ({ children }: { children: NavModelItem[] }) => { + if (!children || children.length === 0) { + return null; + } + + return ( + + ); +}; + +export const PageHeader: FC = ({ model }) => { + const styles = useStyles2(getStyles); + + if (!model) { + return null; + } + + const main = model.main; + const children = main.children; + + return ( +

+ {renderHeaderTitle(main)} + {children && children.length && {children}} +

+ ); +}; + +function renderHeaderTitle(main: NavModelItem) { + const marginTop = main.icon === 'grafana' ? 12 : 14; + + return ( +

+ + {main.icon && } + {main.img && {`logo

} + + +

+ {renderTitle(main.text, main.breadcrumbs ?? [])} + {main.subTitle &&

{main.subTitle}

} +

+ ); +} + +function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) { + if (!title && (!breadcrumbs || breadcrumbs.length === 0)) { + return null; + } + + if (!breadcrumbs || breadcrumbs.length === 0) { + return

{title}

; + } + + const breadcrumbsResult = []; + for (const bc of breadcrumbs) { + if (bc.url) { + breadcrumbsResult.push( + + {bc.title} + + ); + } else { + breadcrumbsResult.push( / {bc.title}); + } + } + breadcrumbsResult.push( / {title}); + + return

{breadcrumbsResult}

; +} + +const getStyles = (theme: GrafanaTheme2) => ({ + headerCanvas: css` + background: ${theme.colors.background.canvas}; + `, +}); + +export default PageHeader; diff --git a/public/app/core/components/PageLoader/PageLoader.tsx b/public/app/core/components/PageLoader/PageLoader.tsx new file mode 100644 index 00000000..ff4f4dc4 --- /dev/null +++ b/public/app/core/components/PageLoader/PageLoader.tsx @@ -0,0 +1,17 @@ +import React, { FC } from 'react'; +import { LoadingPlaceholder } from '@grafana/ui'; + +interface Props { + pageName?: string; +} + +const PageLoader: FC = ({ pageName = '' }) => { + const loadingText = `Loading ${pageName}...`; + return ( +

+ +

+ ); +}; + +export default PageLoader; diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx new file mode 100644 index 00000000..a03362e9 --- /dev/null +++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx @@ -0,0 +1,86 @@ +import React, { useCallback, useMemo, useState } from 'react'; +import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data'; +import { getAllPanelPluginMeta } from 'app/features/panel/state/util'; +import { Icon, MultiSelect, useStyles2 } from '@grafana/ui'; +import { css } from '@emotion/css'; + +export interface Props { + onChange: (plugins: PanelPluginMeta[]) => void; + maxMenuHeight?: number; +} + +export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Props): JSX.Element => { + const plugins = useMemo(() => { + return getAllPanelPluginMeta(); + }, []); + const options = useMemo( + () => + plugins + .map((p) => ({ label: p.name, imgUrl: p.info.logos.small, value: p })) + .sort((a, b) => a.label?.localeCompare(b.label)), + [plugins] + ); + const [value, setValue] = useState>>([]); + const onChange = useCallback( + (plugins: Array>) => { + const changedPlugins = []; + for (const plugin of plugins) { + if (plugin.value) { + changedPlugins.push(plugin.value); + } + } + propsOnChange(changedPlugins); + setValue(plugins); + }, + [propsOnChange] + ); + const styles = useStyles2(getStyles); + + const selectOptions = { + defaultOptions: true, + getOptionLabel: (i: any) => i.label, + getOptionValue: (i: any) => i.value, + noOptionsMessage: 'No Panel types found', + placeholder: 'Filter by type', + maxMenuHeight, + options, + value, + onChange, + }; + + return ( +

+ {value.length > 0 && ( + onChange([])}> + Clear types + + )} + } aria-label="Panel Type filter" /> +

+ ); +}; + +function getStyles(theme: GrafanaTheme2) { + return { + container: css` + label: container; + position: relative; + min-width: 180px; + flex-grow: 1; + `, + clear: css` + label: clear; + text-decoration: underline; + font-size: ${theme.spacing(1.5)}; + position: absolute; + top: -${theme.spacing(2.75)}; + right: 0; + cursor: pointer; + color: ${theme.colors.text.link}; + + &:hover { + color: ${theme.colors.text.maxContrast}; + } + `, + }; +} diff --git a/public/app/core/components/PasswordField/PasswordField.test.tsx b/public/app/core/components/PasswordField/PasswordField.test.tsx new file mode 100644 index 00000000..98af3c90 --- /dev/null +++ b/public/app/core/components/PasswordField/PasswordField.test.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { PasswordField } from './PasswordField'; + +describe('PasswordField', () => { + const props = { + id: 'password', + placeholder: 'enter password', + 'data-testid': 'password-field', + }; + it('should render correctly', () => { + render(); + expect(screen.getByTestId('password-field')).toBeInTheDocument(); + expect(screen.getByRole('switch', { name: 'Show password' })).toBeInTheDocument(); + }); + it('should able to show password value if clicked on password-reveal icon', () => { + render(); + expect(screen.getByTestId('password-field')).toHaveProperty('type', 'password'); + fireEvent.click(screen.getByRole('switch', { name: 'Show password' })); + expect(screen.getByTestId('password-field')).toHaveProperty('type', 'text'); + }); +}); diff --git a/public/app/core/components/PasswordField/PasswordField.tsx b/public/app/core/components/PasswordField/PasswordField.tsx new file mode 100644 index 00000000..ec32963c --- /dev/null +++ b/public/app/core/components/PasswordField/PasswordField.tsx @@ -0,0 +1,45 @@ +import React, { FC, useState } from 'react'; +import { selectors } from '@grafana/e2e-selectors'; + +import { Input, IconButton } from '@grafana/ui'; + +export interface Props { + autoFocus?: boolean; + autoComplete?: string; + id?: string; + passwordHint?: string; +} + +export const PasswordField: FC = React.forwardRef( + ({ autoComplete, autoFocus, id, passwordHint, ...props }, ref) => { + const [showPassword, setShowPassword] = useState(false); + + return ( + { + setShowPassword(!showPassword); + }} + /> + } + /> + ); + } +); + +PasswordField.displayName = 'PasswordField'; diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx new file mode 100644 index 00000000..dcdd9bb6 --- /dev/null +++ b/public/app/core/components/PermissionList/AddPermission.tsx @@ -0,0 +1,148 @@ +import React, { Component } from 'react'; +import { css } from '@emotion/css'; +import config from 'app/core/config'; +import { UserPicker } from 'app/core/components/Select/UserPicker'; +import { TeamPicker } from 'app/core/components/Select/TeamPicker'; +import { Button, Form, HorizontalGroup, Select, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme, SelectableValue } from '@grafana/data'; +import { OrgUser, Team } from 'app/types'; +import { + dashboardPermissionLevels, + dashboardAclTargets, + AclTarget, + PermissionLevel, + NewDashboardAclItem, + OrgRole, +} from 'app/types/acl'; +import { CloseButton } from '../CloseButton/CloseButton'; + +export interface Props { + onAddPermission: (item: NewDashboardAclItem) => void; + onCancel: () => void; +} + +class AddPermissions extends Component { + static defaultProps = { + showPermissionLevels: true, + }; + + constructor(props: Props) { + super(props); + this.state = this.getCleanState(); + } + + getCleanState() { + return { + userId: 0, + teamId: 0, + role: undefined, + type: AclTarget.Team, + permission: PermissionLevel.View, + }; + } + + onTypeChanged = (item: any) => { + const type = item.value as AclTarget; + + switch (type) { + case AclTarget.User: + case AclTarget.Team: + this.setState({ type: type, userId: 0, teamId: 0, role: undefined }); + break; + case AclTarget.Editor: + this.setState({ type: type, userId: 0, teamId: 0, role: OrgRole.Editor }); + break; + case AclTarget.Viewer: + this.setState({ type: type, userId: 0, teamId: 0, role: OrgRole.Viewer }); + break; + } + }; + + onUserSelected = (user: SelectableValue) => { + this.setState({ userId: user && !Array.isArray(user) ? user.id : 0 }); + }; + + onTeamSelected = (team: SelectableValue) => { + this.setState({ teamId: team.value?.id && !Array.isArray(team.value) ? team.value.id : 0 }); + }; + + onPermissionChanged = (permission: SelectableValue) => { + this.setState({ permission: permission.value! }); + }; + + onSubmit = async () => { + await this.props.onAddPermission(this.state); + this.setState(this.getCleanState()); + }; + + isValid() { + switch (this.state.type) { + case AclTarget.Team: + return this.state.teamId > 0; + case AclTarget.User: + return this.state.userId > 0; + } + return true; + } + + render() { + const { onCancel } = this.props; + const newItem = this.state; + const pickerClassName = 'min-width-20'; + const isValid = this.isValid(); + const styles = getStyles(config.theme); + + return ( +

+ +

Add Permission For

+ +

+ ); + } +} + +const getStyles = stylesFactory((theme: GrafanaTheme) => ({ + label: css` + color: ${theme.colors.textBlue}; + font-weight: bold; + `, +})); + +export default AddPermissions; diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx new file mode 100644 index 00000000..a278cc29 --- /dev/null +++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx @@ -0,0 +1,43 @@ +import React, { Component } from 'react'; +import { Select, Icon, Button } from '@grafana/ui'; +import { dashboardPermissionLevels } from 'app/types/acl'; + +export interface Props { + item: any; +} + +export default class DisabledPermissionListItem extends Component { + render() { + const { item } = this.props; + const currentPermissionLevel = dashboardPermissionLevels.find((dp) => dp.value === item.permission); + + return ( + + + + + + {item.name} + (Role) + + + Can + +

+ + + + {!item.inherited ? ( + + + +

+ ); +}; + +const filterCustomRoles = (option: Role) => !option.name?.startsWith('fixed:'); +const filterFixedRoles = (option: Role) => option.name?.startsWith('fixed:'); + +const getOptionGroups = (options: Role[]) => { + const groupsMap: { [key: string]: Role[] } = {}; + options.forEach((role) => { + if (role.name.startsWith('fixed:')) { + const groupName = getRoleGroup(role); + if (groupsMap[groupName]) { + groupsMap[groupName].push(role); + } else { + groupsMap[groupName] = [role]; + } + } + }); + + const groups = []; + for (const groupName of Object.keys(groupsMap)) { + const groupOptions = groupsMap[groupName].sort(sortRolesByName); + groups.push({ + name: fixedRoleGroupNames[groupName] || capitalize(groupName), + value: groupName, + options: groupOptions, + }); + } + return groups.sort((a, b) => a.name.localeCompare(b.name)); +}; + +interface RolePickerSubMenuProps { + options: Role[]; + selectedOptions: Role[]; + disabledOptions?: Role[]; + onSelect: (option: Role) => void; + onClear?: () => void; +} + +export const RolePickerSubMenu = ({ + options, + selectedOptions, + disabledOptions, + onSelect, + onClear, +}: RolePickerSubMenuProps): JSX.Element => { + const theme = useTheme2(); + const styles = getSelectStyles(theme); + const customStyles = useStyles2(getStyles); + + const onClearInternal = async () => { + if (onClear) { + onClear(); + } + }; + + return ( +

+ +

+ {options.map((option, i) => ( + opt.uid === option.uid) || + disabledOptions?.find((opt) => opt.uid === option.uid)) + ) + } + disabled={ + !!(option.uid && disabledOptions?.find((opt) => opt.uid === option.uid)) || isNotDelegatable(option) + } + onChange={onSelect} + hideDescription + /> + ))} +

+ +

+ + + +

+ ); +}; + +interface RoleMenuOptionProps { + data: Role; + onChange: (value: Role) => void; + isSelected?: boolean; + isFocused?: boolean; + disabled?: boolean; + hideDescription?: boolean; +} + +export const RoleMenuOption = React.forwardRef>>( + ({ data, isFocused, isSelected, disabled, onChange, hideDescription }, ref) => { + const theme = useTheme2(); + const styles = getSelectStyles(theme); + const customStyles = useStyles2(getStyles); + + const wrapperClassName = cx( + styles.option, + isFocused && styles.optionFocused, + disabled && customStyles.menuOptionDisabled + ); + + const onChangeInternal = (event: FormEvent) => { + if (disabled) { + return; + } + event.preventDefault(); + event.stopPropagation(); + onChange(data); + }; + + return ( +

+ +

+ {data.displayName || data.name} + {!hideDescription && data.description &&

{data.description}

} +

+ {data.description && ( + + + + )} +

+ ); + } +); + +RoleMenuOption.displayName = 'RoleMenuOption'; + +interface RoleMenuGroupsOptionProps { + data: SelectableValue; + onChange: (value: string) => void; + onClick?: (value: string) => void; + onOpenSubMenu?: (value: string) => void; + onCloseSubMenu?: (value: string) => void; + isSelected?: boolean; + partiallySelected?: boolean; + isFocused?: boolean; + disabled?: boolean; + children?: React.ReactNode; + root?: HTMLElement; +} + +export const RoleMenuGroupOption = React.forwardRef( + ( + { + data, + isFocused, + isSelected, + partiallySelected, + disabled, + onChange, + onClick, + onOpenSubMenu, + onCloseSubMenu, + children, + root, + }, + ref + ) => { + const theme = useTheme2(); + const styles = getSelectStyles(theme); + const customStyles = useStyles2(getStyles); + + const wrapperClassName = cx( + styles.option, + isFocused && styles.optionFocused, + disabled && customStyles.menuOptionDisabled + ); + + const onChangeInternal = (event: FormEvent) => { + if (disabled) { + return; + } + if (data.value) { + onChange(data.value); + } + }; + + const onClickInternal = (event: FormEvent) => { + if (onClick) { + onClick(data.value!); + } + }; + + const onMouseEnter = () => { + if (onOpenSubMenu) { + onOpenSubMenu(data.value!); + } + }; + + const onMouseLeave = () => { + if (onCloseSubMenu) { + onCloseSubMenu(data.value!); + } + }; + + return ( +

+ +

+ {data.displayName || data.name} + +

+ {root && children && ( + + {children} + + )} +

+ ); + } +); + +RoleMenuGroupOption.displayName = 'RoleMenuGroupOption'; + +const getRoleGroup = (role: Role) => { + return role.group ?? 'Other'; +}; + +const capitalize = (s: string): string => { + return s.slice(0, 1).toUpperCase() + s.slice(1); +}; + +const sortRolesByName = (a: Role, b: Role) => a.name.localeCompare(b.name); + +const isNotDelegatable = (role: Role) => { + return role.delegatable !== undefined && !role.delegatable; +}; + +export const getStyles = (theme: GrafanaTheme2) => { + return { + menuWrapper: css` + display: flex; + max-height: 650px; + position: absolute; + z-index: ${theme.zIndex.dropdown}; + overflow: hidden; + min-width: auto; + `, + menu: css` + min-width: 260px; + + & > div { + padding-top: ${theme.spacing(1)}; + } + `, + subMenu: css` + height: 100%; + min-width: 260px; + display: flex; + flex-direction: column; + border-left-style: solid; + border-left-width: 1px; + border-left-color: ${theme.components.input.borderColor}; + + & > div { + padding-top: ${theme.spacing(1)}; + } + `, + groupHeader: css` + padding: ${theme.spacing(0, 4)}; + display: flex; + align-items: center; + color: ${theme.colors.text.primary}; + font-weight: ${theme.typography.fontWeightBold}; + `, + container: css` + padding: ${theme.spacing(1)}; + border: 1px ${theme.colors.border.weak} solid; + border-radius: ${theme.shape.borderRadius(1)}; + background-color: ${theme.colors.background.primary}; + z-index: ${theme.zIndex.modal}; + `, + menuSection: css` + margin-bottom: ${theme.spacing(2)}; + `, + menuOptionCheckbox: css` + display: flex; + margin: ${theme.spacing(0, 1, 0, 0.25)}; + `, + menuButtonRow: css` + background-color: ${theme.colors.background.primary}; + padding: ${theme.spacing(1)}; + `, + menuOptionBody: css` + font-weight: ${theme.typography.fontWeightRegular}; + padding: ${theme.spacing(0, 1.5, 0, 0)}; + `, + menuOptionDisabled: css` + color: ${theme.colors.text.disabled}; + cursor: not-allowed; + `, + menuOptionExpand: css` + position: absolute; + right: ${theme.spacing(1.25)}; + color: ${theme.colors.text.disabled}; + + &:after { + content: '>'; + } + `, + menuOptionInfoSign: css` + color: ${theme.colors.text.disabled}; + `, + builtInRoleSelector: css` + margin: ${theme.spacing(1, 1.25, 1, 1)}; + `, + subMenuPortal: css` + height: 100%; + > div { + height: 100%; + } + `, + subMenuButtonRow: css` + background-color: ${theme.colors.background.primary}; + padding: ${theme.spacing(1)}; + `, + checkboxPartiallyChecked: css` + input { + &:checked + span { + &:after { + border-width: 0 3px 0px 0; + transform: rotate(90deg); + } + } + } + `, + }; +}; diff --git a/public/app/core/components/RolePicker/UserRolePicker.tsx b/public/app/core/components/RolePicker/UserRolePicker.tsx new file mode 100644 index 00000000..57400f84 --- /dev/null +++ b/public/app/core/components/RolePicker/UserRolePicker.tsx @@ -0,0 +1,87 @@ +import React, { FC } from 'react'; +import { getBackendSrv } from '@grafana/runtime'; +import { Role, OrgRole } from 'app/types'; +import { RolePicker } from './RolePicker'; + +export interface Props { + builtInRole: OrgRole; + userId: number; + orgId?: number; + onBuiltinRoleChange: (newRole: OrgRole) => void; + getRoleOptions?: () => Promise; + getBuiltinRoles?: () => Promise<{ [key: string]: Role[] }>; + disabled?: boolean; + builtinRolesDisabled?: boolean; +} + +export const UserRolePicker: FC = ({ + builtInRole, + userId, + orgId, + onBuiltinRoleChange, + getRoleOptions, + getBuiltinRoles, + disabled, + builtinRolesDisabled, +}) => { + return ( + updateUserRoles(roles, userId, orgId)} + onBuiltinRoleChange={onBuiltinRoleChange} + getRoleOptions={() => (getRoleOptions ? getRoleOptions() : fetchRoleOptions(orgId))} + getRoles={() => fetchUserRoles(userId, orgId)} + getBuiltinRoles={() => (getBuiltinRoles ? getBuiltinRoles() : fetchBuiltinRoles(orgId))} + disabled={disabled} + builtinRolesDisabled={builtinRolesDisabled} + /> + ); +}; + +export const fetchRoleOptions = async (orgId?: number, query?: string): Promise => { + let rolesUrl = '/api/access-control/roles?delegatable=true'; + if (orgId) { + rolesUrl += `&targetOrgId=${orgId}`; + } + const roles = await getBackendSrv().get(rolesUrl); + if (!roles || !roles.length) { + return []; + } + return roles; +}; + +export const fetchBuiltinRoles = (orgId?: number): Promise<{ [key: string]: Role[] }> => { + let builtinRolesUrl = '/api/access-control/builtin-roles'; + if (orgId) { + builtinRolesUrl += `?targetOrgId=${orgId}`; + } + return getBackendSrv().get(builtinRolesUrl); +}; + +export const fetchUserRoles = async (userId: number, orgId?: number): Promise => { + let userRolesUrl = `/api/access-control/users/${userId}/roles`; + if (orgId) { + userRolesUrl += `?targetOrgId=${orgId}`; + } + try { + const roles = await getBackendSrv().get(userRolesUrl); + if (!roles || !roles.length) { + return []; + } + return roles; + } catch (error) { + error.isHandled = true; + return []; + } +}; + +export const updateUserRoles = (roleUids: string[], userId: number, orgId?: number) => { + let userRolesUrl = `/api/access-control/users/${userId}/roles`; + if (orgId) { + userRolesUrl += `?targetOrgId=${orgId}`; + } + return getBackendSrv().put(userRolesUrl, { + orgId, + roleUids, + }); +}; diff --git a/public/app/core/components/RolePicker/ValueContainer.tsx b/public/app/core/components/RolePicker/ValueContainer.tsx new file mode 100644 index 00000000..84481936 --- /dev/null +++ b/public/app/core/components/RolePicker/ValueContainer.tsx @@ -0,0 +1,37 @@ +import React, { ReactNode } from 'react'; +import { css, cx } from '@emotion/css'; +import { getInputStyles, Icon, IconName, useStyles2, getSelectStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; + +export interface Props { + children: ReactNode; + iconName?: IconName; +} +export const ValueContainer = ({ children, iconName }: Props) => { + const styles = useStyles2(getStyles); + return ( +

+ {iconName && } + {children} +

+ ); +}; + +const getStyles = (theme: GrafanaTheme2) => { + const { prefix } = getInputStyles({ theme }); + const { multiValueContainer } = getSelectStyles(theme); + return { + container: cx( + prefix, + multiValueContainer, + css` + position: relative; + padding: ${theme.spacing(0.5, 1, 0.5, 1)}; + + svg { + margin-right: ${theme.spacing(0.5)}; + } + ` + ), + }; +}; diff --git a/public/app/core/components/Select/FolderPicker.test.tsx b/public/app/core/components/Select/FolderPicker.test.tsx new file mode 100644 index 00000000..43ad88e7 --- /dev/null +++ b/public/app/core/components/Select/FolderPicker.test.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { FolderPicker, getInitialValues } from './FolderPicker'; +import * as api from 'app/features/manage-dashboards/state/actions'; +import { DashboardSearchHit } from '../../../features/search/types'; + +describe('FolderPicker', () => { + it('should render', () => { + jest + .spyOn(api, 'searchFolders') + .mockResolvedValue([ + { title: 'Dash 1', id: 1 } as DashboardSearchHit, + { title: 'Dash 2', id: 2 } as DashboardSearchHit, + ]); + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + }); +}); + +describe('getInitialValues', () => { + describe('when called with folderId and title', () => { + it('then it should return folderId and title', async () => { + const getFolder = jest.fn().mockResolvedValue({}); + const folder = await getInitialValues({ folderId: 0, folderName: 'Some title', getFolder }); + + expect(folder).toEqual({ label: 'Some title', value: 0 }); + expect(getFolder).not.toHaveBeenCalled(); + }); + }); + + describe('when called with just a folderId', () => { + it('then it should call api to retrieve title', async () => { + const getFolder = jest.fn().mockResolvedValue({ id: 0, title: 'Title from api' }); + const folder = await getInitialValues({ folderId: 0, getFolder }); + + expect(folder).toEqual({ label: 'Title from api', value: 0 }); + expect(getFolder).toHaveBeenCalledTimes(1); + expect(getFolder).toHaveBeenCalledWith(0); + }); + }); + + describe('when called without folderId', () => { + it('then it should throw an error', async () => { + const getFolder = jest.fn().mockResolvedValue({}); + await expect(getInitialValues({ getFolder })).rejects.toThrow(); + }); + }); +}); diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx new file mode 100644 index 00000000..e471e680 --- /dev/null +++ b/public/app/core/components/Select/FolderPicker.tsx @@ -0,0 +1,213 @@ +import React, { PureComponent } from 'react'; +import { debounce } from 'lodash'; +import { AsyncSelect } from '@grafana/ui'; +import { AppEvents, SelectableValue } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; + +import appEvents from '../../app_events'; +import { contextSrv } from 'app/core/services/context_srv'; +import { createFolder, getFolderById, searchFolders } from 'app/features/manage-dashboards/state/actions'; +import { PermissionLevelString } from '../../../types'; + +export interface Props { + onChange: ($folder: { title: string; id: number }) => void; + enableCreateNew?: boolean; + rootName?: string; + enableReset?: boolean; + dashboardId?: any; + initialTitle?: string; + initialFolderId?: number; + permissionLevel?: Exclude; + allowEmpty?: boolean; + showRoot?: boolean; + /** + * Skips loading all folders in order to find the folder matching + * the folder where the dashboard is stored. + * Instead initialFolderId and initialTitle will be used to display the correct folder. + * initialFolderId needs to have an value > -1 or an error will be thrown. + */ + skipInitialLoad?: boolean; + /** The id of the search input. Use this to set a matching label with htmlFor */ + inputId?: string; +} + +interface State { + folder: SelectableValue | null; +} + +export class FolderPicker extends PureComponent { + debouncedSearch: any; + + constructor(props: Props) { + super(props); + + this.state = { + folder: null, + }; + + this.debouncedSearch = debounce(this.getOptions, 300, { + leading: true, + trailing: true, + }); + } + + static defaultProps: Partial = { + rootName: 'General', + enableReset: false, + initialTitle: '', + enableCreateNew: false, + permissionLevel: PermissionLevelString.Edit, + allowEmpty: false, + showRoot: true, + }; + + componentDidMount = async () => { + if (this.props.skipInitialLoad) { + const folder = await getInitialValues({ + getFolder: getFolderById, + folderId: this.props.initialFolderId, + folderName: this.props.initialTitle, + }); + this.setState({ folder }); + return; + } + + await this.loadInitialValue(); + }; + + getOptions = async (query: string) => { + const { rootName, enableReset, initialTitle, permissionLevel, initialFolderId, showRoot } = this.props; + + const searchHits = await searchFolders(query, permissionLevel); + + const options: Array> = searchHits.map((hit) => ({ label: hit.title, value: hit.id })); + if (contextSrv.isEditor && rootName?.toLowerCase().startsWith(query.toLowerCase()) && showRoot) { + options.unshift({ label: rootName, value: 0 }); + } + + if ( + enableReset && + query === '' && + initialTitle !== '' && + !options.find((option) => option.label === initialTitle) + ) { + options.unshift({ label: initialTitle, value: initialFolderId }); + } + + return options; + }; + + onFolderChange = (newFolder: SelectableValue) => { + if (!newFolder) { + newFolder = { value: 0, label: this.props.rootName }; + } + + this.setState( + { + folder: newFolder, + }, + () => this.props.onChange({ id: newFolder.value!, title: newFolder.label! }) + ); + }; + + createNewFolder = async (folderName: string) => { + // @ts-ignore + const newFolder = await createFolder({ title: folderName }); + let folder = { value: -1, label: 'Not created' }; + if (newFolder.id > -1) { + appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']); + folder = { value: newFolder.id, label: newFolder.title }; + await this.onFolderChange(folder); + } else { + appEvents.emit(AppEvents.alertError, ['Folder could not be created']); + } + + return folder; + }; + + private loadInitialValue = async () => { + const { initialTitle, rootName, initialFolderId, enableReset, dashboardId } = this.props; + const resetFolder: SelectableValue = { label: initialTitle, value: undefined }; + const rootFolder: SelectableValue = { label: rootName, value: 0 }; + + const options = await this.getOptions(''); + + let folder: SelectableValue | null = null; + + if (initialFolderId !== undefined && initialFolderId !== null && initialFolderId > -1) { + folder = options.find((option) => option.value === initialFolderId) || null; + } else if (enableReset && initialTitle) { + folder = resetFolder; + } else if (initialFolderId) { + folder = options.find((option) => option.id === initialFolderId) || null; + } + + if (!folder && !this.props.allowEmpty) { + if (contextSrv.isEditor) { + folder = rootFolder; + } else { + // We shouldn't assign a random folder without the user actively choosing it on a persisted dashboard + const isPersistedDashBoard = !!dashboardId; + if (isPersistedDashBoard) { + folder = resetFolder; + } else { + folder = options.length > 0 ? options[0] : resetFolder; + } + } + } + + this.setState( + { + folder, + }, + () => { + // if this is not the same as our initial value notify parent + if (folder && folder.value !== initialFolderId) { + this.props.onChange({ id: folder.value!, title: folder.label! }); + } + } + ); + }; + + render() { + const { folder } = this.state; + const { enableCreateNew, inputId } = this.props; + + return ( +

+ +

+ ); + } +} + +interface Args { + getFolder: typeof getFolderById; + folderId?: number; + folderName?: string; +} + +export async function getInitialValues({ folderName, folderId, getFolder }: Args): Promise> { + if (folderId === null || folderId === undefined || folderId < 0) { + throw new Error('folderId should to be greater or equal to zero.'); + } + + if (folderName) { + return { label: folderName, value: folderId }; + } + + const folderDto = await getFolder(folderId); + return { label: folderDto.title, value: folderId }; +} diff --git a/public/app/core/components/Select/MetricSelect.test.tsx b/public/app/core/components/Select/MetricSelect.test.tsx new file mode 100644 index 00000000..fef81075 --- /dev/null +++ b/public/app/core/components/Select/MetricSelect.test.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { MetricSelect } from './MetricSelect'; +import { LegacyForms } from '@grafana/ui'; +import { expect } from '../../../../test/lib/common'; + +const { Select } = LegacyForms; + +describe('MetricSelect', () => { + describe('When receive props', () => { + it('should pass correct set of props to Select component', () => { + const props: any = { + placeholder: 'Select Reducer', + className: 'width-15', + options: [], + variables: [], + }; + const wrapper = shallow(); + expect(wrapper.find(Select).props()).toMatchObject({ + className: 'width-15', + isMulti: false, + isClearable: false, + backspaceRemovesValue: false, + isSearchable: true, + maxMenuHeight: 500, + placeholder: 'Select Reducer', + }); + }); + it('should pass callbacks correctly to the Select component', () => { + const spyOnChange = jest.fn(); + const props: any = { + onChange: spyOnChange, + options: [], + variables: [], + }; + const wrapper = shallow(); + const select = wrapper.find(Select); + + select.props().onChange({ value: 'foo' }, { action: 'select-option', option: undefined }); + + expect(select.props().noOptionsMessage).toBeDefined(); + + // @ts-ignore typescript doesn't understand that noOptionsMessage can't be undefined here + const noOptionsMessage = select.props().noOptionsMessage(); + expect(noOptionsMessage).toEqual('No options found'); + expect(spyOnChange).toHaveBeenCalledWith('foo'); + }); + }); +}); diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx new file mode 100644 index 00000000..cafc9e6d --- /dev/null +++ b/public/app/core/components/Select/MetricSelect.tsx @@ -0,0 +1,67 @@ +import React, { useMemo, useCallback, FC } from 'react'; +import { flatten } from 'lodash'; + +import { LegacyForms } from '@grafana/ui'; +import { SelectableValue } from '@grafana/data'; +import { Variable } from 'app/types/templates'; +const { Select } = LegacyForms; + +export interface Props { + onChange: (value: string | undefined) => void; + options: Array>; + isSearchable: boolean; + value: string; + placeholder?: string; + className?: string; + variables?: Variable[]; +} + +export const MetricSelect: FC = (props) => { + const { value, placeholder, className, isSearchable, onChange } = props; + const options = useSelectOptions(props); + const selected = useSelectedOption(options, value); + const onChangeValue = useCallback((selectable: SelectableValue) => onChange(selectable.value), [onChange]); + + return ( + } + /> + ) : null; +}; diff --git a/public/app/core/components/Select/TeamPicker.test.tsx b/public/app/core/components/Select/TeamPicker.test.tsx new file mode 100644 index 00000000..c24e2532 --- /dev/null +++ b/public/app/core/components/Select/TeamPicker.test.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { TeamPicker } from './TeamPicker'; + +jest.mock('@grafana/runtime', () => ({ + getBackendSrv: () => { + return { + get: () => { + return Promise.resolve([]); + }, + }; + }, +})); + +describe('TeamPicker', () => { + it('renders correctly', async () => { + const props = { + onSelected: () => {}, + }; + render(); + expect(await screen.findByTestId('teamPicker')).toBeInTheDocument(); + }); +}); diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx new file mode 100644 index 00000000..db17af60 --- /dev/null +++ b/public/app/core/components/Select/TeamPicker.tsx @@ -0,0 +1,73 @@ +import React, { Component } from 'react'; +import { debounce, isNil } from 'lodash'; +import { AsyncSelect } from '@grafana/ui'; +import { SelectableValue } from '@grafana/data'; +import { getBackendSrv } from '@grafana/runtime'; +import { Team } from 'app/types'; + +export interface Props { + onSelected: (team: SelectableValue) => void; + className?: string; +} + +export interface State { + isLoading: boolean; +} + +export class TeamPicker extends Component { + debouncedSearch: any; + + constructor(props: Props) { + super(props); + this.state = { isLoading: false }; + this.search = this.search.bind(this); + + this.debouncedSearch = debounce(this.search, 300, { + leading: true, + trailing: true, + }); + } + + search(query?: string) { + this.setState({ isLoading: true }); + + if (isNil(query)) { + query = ''; + } + + return getBackendSrv() + .get(`/api/teams/search?perpage=100&page=1&query=${query}`) + .then((result: { teams: Team[] }) => { + const teams: Array> = result.teams.map((team) => { + return { + value: team, + label: team.name, + imgUrl: team.avatarUrl, + }; + }); + + this.setState({ isLoading: false }); + return teams; + }); + } + + render() { + const { onSelected, className } = this.props; + const { isLoading } = this.state; + return ( +

+ +

+ ); + } +} diff --git a/public/app/core/components/Select/UserPicker.test.tsx b/public/app/core/components/Select/UserPicker.test.tsx new file mode 100644 index 00000000..cbc1ea62 --- /dev/null +++ b/public/app/core/components/Select/UserPicker.test.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { UserPicker } from './UserPicker'; + +jest.mock('@grafana/runtime', () => ({ + getBackendSrv: () => ({ get: jest.fn().mockResolvedValue([]) }), +})); + +describe('UserPicker', () => { + it('renders correctly', () => { + render( {}} />); + expect(screen.getByTestId('userPicker')).toBeInTheDocument(); + }); +}); diff --git a/public/app/core/components/Select/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx new file mode 100644 index 00000000..4b28cb6e --- /dev/null +++ b/public/app/core/components/Select/UserPicker.tsx @@ -0,0 +1,84 @@ +// Libraries +import React, { Component } from 'react'; +import { debounce, isNil } from 'lodash'; + +// Components +import { AsyncSelect } from '@grafana/ui'; + +// Utils & Services +import { getBackendSrv } from '@grafana/runtime'; + +// Types +import { OrgUser } from 'app/types'; +import { SelectableValue } from '@grafana/data'; + +export interface Props { + onSelected: (user: SelectableValue) => void; + className?: string; + inputId?: string; +} + +export interface State { + isLoading: boolean; +} + +export class UserPicker extends Component { + debouncedSearch: any; + + constructor(props: Props) { + super(props); + this.state = { isLoading: false }; + this.search = this.search.bind(this); + + this.debouncedSearch = debounce(this.search, 300, { + leading: true, + trailing: true, + }); + } + + search(query?: string) { + this.setState({ isLoading: true }); + + if (isNil(query)) { + query = ''; + } + + return getBackendSrv() + .get(`/api/org/users/lookup?query=${query}&limit=100`) + .then((result: OrgUser[]) => { + return result.map((user) => ({ + id: user.userId, + value: user.userId, + label: user.login, + imgUrl: user.avatarUrl, + login: user.login, + })); + }) + .finally(() => { + this.setState({ isLoading: false }); + }); + } + + render() { + const { className, onSelected, inputId } = this.props; + const { isLoading } = this.state; + + return ( +

+ +

+ ); + } +} diff --git a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap new file mode 100644 index 00000000..bd84fb67 --- /dev/null +++ b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FolderPicker should render 1`] = ` +

+ +

+`; diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx new file mode 100644 index 00000000..ecedadb5 --- /dev/null +++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx @@ -0,0 +1,208 @@ +import React, { PureComponent } from 'react'; +import { css } from '@emotion/css'; + +import { + Button, + Field, + FieldSet, + Form, + Icon, + Label, + RadioButtonGroup, + Select, + stylesFactory, + TimeZonePicker, + Tooltip, + WeekStartPicker, +} from '@grafana/ui'; +import { SelectableValue } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; + +import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types'; +import { backendSrv } from 'app/core/services/backend_srv'; +import { PreferencesService } from 'app/core/services/PreferencesService'; + +export interface Props { + resourceUri: string; + disabled?: boolean; +} + +export interface State { + homeDashboardId: number; + theme: string; + timezone: string; + weekStart: string; + dashboards: DashboardSearchHit[]; +} + +const themes: SelectableValue[] = [ + { value: '', label: 'Default' }, + { value: 'dark', label: 'Dark' }, + { value: 'light', label: 'Light' }, +]; + +export class SharedPreferences extends PureComponent { + service: PreferencesService; + + constructor(props: Props) { + super(props); + + this.service = new PreferencesService(props.resourceUri); + this.state = { + homeDashboardId: 0, + theme: '', + timezone: '', + weekStart: '', + dashboards: [], + }; + } + + async componentDidMount() { + const prefs = await this.service.load(); + const dashboards = await backendSrv.search({ starred: true }); + const defaultDashboardHit: DashboardSearchHit = { + id: 0, + title: 'Default', + tags: [], + type: '' as DashboardSearchItemType, + uid: '', + uri: '', + url: '', + folderId: 0, + folderTitle: '', + folderUid: '', + folderUrl: '', + isStarred: false, + slug: '', + items: [], + }; + + if (prefs.homeDashboardId > 0 && !dashboards.find((d) => d.id === prefs.homeDashboardId)) { + const missing = await backendSrv.search({ dashboardIds: [prefs.homeDashboardId] }); + if (missing && missing.length > 0) { + dashboards.push(missing[0]); + } + } + + this.setState({ + homeDashboardId: prefs.homeDashboardId, + theme: prefs.theme, + timezone: prefs.timezone, + weekStart: prefs.weekStart, + dashboards: [defaultDashboardHit, ...dashboards], + }); + } + + onSubmitForm = async () => { + const { homeDashboardId, theme, timezone, weekStart } = this.state; + await this.service.update({ homeDashboardId, theme, timezone, weekStart }); + window.location.reload(); + }; + + onThemeChanged = (value: string) => { + this.setState({ theme: value }); + }; + + onTimeZoneChanged = (timezone?: string) => { + if (!timezone) { + return; + } + this.setState({ timezone: timezone }); + }; + + onWeekStartChanged = (weekStart: string) => { + this.setState({ weekStart: weekStart }); + }; + + onHomeDashboardChanged = (dashboardId: number) => { + this.setState({ homeDashboardId: dashboardId }); + }; + + getFullDashName = (dashboard: SelectableValue) => { + if (typeof dashboard.folderTitle === 'undefined' || dashboard.folderTitle === '') { + return dashboard.title; + } + return dashboard.folderTitle + ' / ' + dashboard.title; + }; + + render() { + const { theme, timezone, weekStart, homeDashboardId, dashboards } = this.state; + const { disabled } = this.props; + const styles = getStyles(); + + return ( +

+ {() => { + return ( +

+ + item.value === theme)?.value} + onChange={this.onThemeChanged} + /> + + + + Home Dashboard + + + + + } + data-testid="User preferences home dashboard drop down" + > + + + + + + {!getConfig().autoAssignOrg && ( + + + + )} + {getConfig().verifyEmailEnabled && ( + + + + )} + + + + + v === getValues().password || 'Passwords must match!', + })} + /> + + + + + + Back to login + + + + )} + + + + ); +}; + +export default SignupPage; diff --git a/public/app/core/components/Signup/VerifyEmail.tsx b/public/app/core/components/Signup/VerifyEmail.tsx new file mode 100644 index 00000000..788f4462 --- /dev/null +++ b/public/app/core/components/Signup/VerifyEmail.tsx @@ -0,0 +1,72 @@ +import React, { FC, useState } from 'react'; +import { Form, Field, Input, Button, Legend, Container, HorizontalGroup, LinkButton } from '@grafana/ui'; +import { getConfig } from 'app/core/config'; +import { getBackendSrv } from '@grafana/runtime'; +import appEvents from 'app/core/app_events'; +import { AppEvents } from '@grafana/data'; + +interface EmailDTO { + email: string; +} + +export const VerifyEmail: FC = () => { + const [emailSent, setEmailSent] = useState(false); + + const onSubmit = (formModel: EmailDTO) => { + getBackendSrv() + .post('/api/user/signup', formModel) + .then(() => { + setEmailSent(true); + }) + .catch((err) => { + const msg = err.data?.message || err; + appEvents.emit(AppEvents.alertWarning, [msg]); + }); + }; + + if (emailSent) { + return ( +

An email with a verification link has been sent to the email address. You should receive it shortly.

+ + + Complete Signup + +

+ ); + } + + return ( + + ); +}; diff --git a/public/app/core/components/Signup/VerifyEmailPage.test.tsx b/public/app/core/components/Signup/VerifyEmailPage.test.tsx new file mode 100644 index 00000000..b56d09f4 --- /dev/null +++ b/public/app/core/components/Signup/VerifyEmailPage.test.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { VerifyEmailPage } from './VerifyEmailPage'; + +const postMock = jest.fn(); +jest.mock('@grafana/runtime', () => ({ + getBackendSrv: () => ({ + post: postMock, + }), +})); + +jest.mock('app/core/config', () => { + return { + buildInfo: { + version: 'v1.0', + commit: '1', + env: 'production', + edition: 'Open Source', + isEnterprise: false, + }, + licenseInfo: { + stateInfo: '', + licenseUrl: '', + }, + getConfig: () => ({ + verifyEmailEnabled: true, + appSubUrl: '', + }), + }; +}); + +describe('VerifyEmail Page', () => { + it('renders correctly', () => { + render(); + expect(screen.getByText('Verify Email')).toBeInTheDocument(); + expect(screen.getByRole('textbox', { name: /Email/i })).toBeInTheDocument(); + + expect(screen.getByRole('button', { name: 'Send verification email' })).toBeInTheDocument(); + + expect(screen.getByRole('link', { name: 'Back to login' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Back to login' })).toHaveAttribute('href', '/login'); + }); + it('should pass validation checks for email field', async () => { + render(); + + fireEvent.click(screen.getByRole('button', { name: 'Send verification email' })); + expect(await screen.findByText('Email is required')).toBeInTheDocument(); + + userEvent.type(screen.getByRole('textbox', { name: /Email/i }), 'test'); + await waitFor(() => expect(screen.queryByText('Email is invalid')).toBeInTheDocument()); + + userEvent.type(screen.getByRole('textbox', { name: /Email/i }), 'test@gmail.com'); + await waitFor(() => expect(screen.queryByText('Email is invalid')).not.toBeInTheDocument()); + }); + it('should show complete signup if email-verification is successful', async () => { + postMock.mockResolvedValueOnce({ message: 'SignUpCreated' }); + render(); + + userEvent.type(screen.getByRole('textbox', { name: /Email/i }), 'test@gmail.com'); + fireEvent.click(screen.getByRole('button', { name: 'Send verification email' })); + + await waitFor(() => + expect(postMock).toHaveBeenCalledWith('/api/user/signup', { + email: 'test@gmail.com', + }) + ); + expect(screen.getByRole('link', { name: 'Complete Signup' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Complete Signup' })).toHaveAttribute('href', '/signup'); + }); +}); diff --git a/public/app/core/components/Signup/VerifyEmailPage.tsx b/public/app/core/components/Signup/VerifyEmailPage.tsx new file mode 100644 index 00000000..3583fca4 --- /dev/null +++ b/public/app/core/components/Signup/VerifyEmailPage.tsx @@ -0,0 +1,16 @@ +import React, { FC } from 'react'; + +import { LoginLayout, InnerBox } from '../Login/LoginLayout'; +import { VerifyEmail } from './VerifyEmail'; + +export const VerifyEmailPage: FC = () => { + return ( + + + + + + ); +}; + +export default VerifyEmailPage; diff --git a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx new file mode 100644 index 00000000..18d143e6 --- /dev/null +++ b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx @@ -0,0 +1,208 @@ +import React, { createRef, MutableRefObject, PureComponent, ReactNode } from 'react'; +import SplitPane from 'react-split-pane'; +import { css, cx } from '@emotion/css'; +import { GrafanaTheme } from '@grafana/data'; +import { stylesFactory } from '@grafana/ui'; +import { config } from 'app/core/config'; + +enum Pane { + Right, + Top, +} + +interface Props { + leftPaneComponents: ReactNode[] | ReactNode; + rightPaneComponents: ReactNode; + uiState: { topPaneSize: number; rightPaneSize: number }; + rightPaneVisible?: boolean; + updateUiState: (uiState: { topPaneSize?: number; rightPaneSize?: number }) => void; +} + +export class SplitPaneWrapper extends PureComponent { + rafToken = createRef(); + static defaultProps = { + rightPaneVisible: true, + }; + + componentDidMount() { + window.addEventListener('resize', this.updateSplitPaneSize); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.updateSplitPaneSize); + } + + updateSplitPaneSize = () => { + if (this.rafToken.current !== undefined) { + window.cancelAnimationFrame(this.rafToken.current!); + } + (this.rafToken as MutableRefObject).current = window.requestAnimationFrame(() => { + this.forceUpdate(); + }); + }; + + onDragFinished = (pane: Pane, size?: number) => { + document.body.style.cursor = 'auto'; + + // When the drag handle is just clicked size is undefined + if (!size) { + return; + } + + const { updateUiState } = this.props; + if (pane === Pane.Top) { + updateUiState({ + topPaneSize: size / window.innerHeight, + }); + } else { + updateUiState({ + rightPaneSize: size / window.innerWidth, + }); + } + }; + + onDragStarted = () => { + document.body.style.cursor = 'row-resize'; + }; + + renderHorizontalSplit() { + const { leftPaneComponents, uiState } = this.props; + const styles = getStyles(config.theme); + const topPaneSize = + uiState.topPaneSize >= 1 ? (uiState.topPaneSize as number) : (uiState.topPaneSize as number) * window.innerHeight; + + /* + Guesstimate the height of the browser window minus + panel toolbar and editor toolbar (~120px). This is to prevent resizing + the preview window beyond the browser window. + */ + + if (Array.isArray(leftPaneComponents)) { + return ( + this.onDragFinished(Pane.Top, size)} + > + {leftPaneComponents} + + ); + } + + return leftPaneComponents; + } + + render() { + const { rightPaneVisible, rightPaneComponents, uiState } = this.props; + // Limit options pane width to 90% of screen. + const styles = getStyles(config.theme); + + // Need to handle when width is relative. ie a percentage of the viewport + const rightPaneSize = + uiState.rightPaneSize <= 1 + ? (uiState.rightPaneSize as number) * window.innerWidth + : (uiState.rightPaneSize as number); + + if (!rightPaneVisible) { + return this.renderHorizontalSplit(); + } + + return ( + (document.body.style.cursor = 'col-resize')} + onDragFinished={(size) => this.onDragFinished(Pane.Right, size)} + > + {this.renderHorizontalSplit()} + {rightPaneComponents} + + ); + } +} + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + const handleColor = theme.palette.blue95; + const paneSpacing = theme.spacing.md; + + const resizer = css` + position: relative; + + &::before { + content: ''; + position: absolute; + transition: 0.2s border-color ease-in-out; + } + + &::after { + background: ${theme.colors.panelBorder}; + content: ''; + position: absolute; + left: 50%; + top: 50%; + transition: 0.2s background ease-in-out; + transform: translate(-50%, -50%); + border-radius: 4px; + } + + &:hover { + &::before { + border-color: ${handleColor}; + } + + &::after { + background: ${handleColor}; + } + } + `; + + return { + resizerV: cx( + resizer, + css` + cursor: col-resize; + width: ${paneSpacing}; + + &::before { + border-right: 1px solid transparent; + height: 100%; + left: 50%; + transform: translateX(-50%); + } + + &::after { + height: 200px; + width: 4px; + } + ` + ), + resizerH: cx( + resizer, + css` + height: ${paneSpacing}; + cursor: row-resize; + margin-left: ${paneSpacing}; + + &::before { + border-top: 1px solid transparent; + top: 50%; + transform: translateY(-50%); + width: 100%; + } + + &::after { + height: 4px; + width: 200px; + } + ` + ), + }; +}); diff --git a/public/app/core/components/TagFilter/TagBadge.tsx b/public/app/core/components/TagFilter/TagBadge.tsx new file mode 100644 index 00000000..1d071464 --- /dev/null +++ b/public/app/core/components/TagFilter/TagBadge.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { getTagColorsFromName, Icon } from '@grafana/ui'; + +export interface Props { + label: string; + removeIcon: boolean; + count: number; + onClick?: any; +} + +export class TagBadge extends React.Component { + constructor(props: Props) { + super(props); + } + + render() { + const { label, removeIcon, count } = this.props; + const { color } = getTagColorsFromName(label); + + const tagStyle = { + backgroundColor: color, + }; + + const countLabel = count !== 0 && {`(${count})`}; + + return ( + + {removeIcon && } + {label} {countLabel} + + ); + } +} diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx new file mode 100644 index 00000000..c69fd5ac --- /dev/null +++ b/public/app/core/components/TagFilter/TagFilter.tsx @@ -0,0 +1,145 @@ +// Libraries +import React, { FC } from 'react'; +import { css } from '@emotion/css'; +import { components } from 'react-select'; +import debounce from 'debounce-promise'; +import { stylesFactory, useTheme, Icon, AsyncMultiSelect } from '@grafana/ui'; +import { escapeStringForRegex, GrafanaTheme } from '@grafana/data'; +// Components +import { TagOption } from './TagOption'; +import { TagBadge } from './TagBadge'; + +export interface TermCount { + term: string; + count: number; +} + +export interface Props { + allowCustomValue?: boolean; + formatCreateLabel?: (input: string) => string; + /** Do not show selected values inside Select. Useful when the values need to be shown in some other components */ + hideValues?: boolean; + inputId?: string; + isClearable?: boolean; + onChange: (tags: string[]) => void; + placeholder?: string; + tagOptions: () => Promise; + tags: string[]; + width?: number; +} + +const filterOption = (option: any, searchQuery: string) => { + const regex = RegExp(escapeStringForRegex(searchQuery), 'i'); + return regex.test(option.value); +}; + +export const TagFilter: FC = ({ + allowCustomValue = false, + formatCreateLabel, + hideValues, + inputId, + isClearable, + onChange, + placeholder = 'Filter by tag', + tagOptions, + tags, + width, +}) => { + const theme = useTheme(); + const styles = getStyles(theme); + + const onLoadOptions = async (query: string) => { + const options = await tagOptions(); + return options.map((option) => ({ + value: option.term, + label: option.term, + count: option.count, + })); + }; + + const debouncedLoadOptions = debounce(onLoadOptions, 300); + + const onTagChange = (newTags: any[]) => { + // On remove with 1 item returns null, so we need to make sure it's an empty array in that case + // https://github.com/JedWatson/react-select/issues/3632 + onChange((newTags || []).map((tag) => tag.value)); + }; + + const value = tags.map((tag) => ({ value: tag, label: tag, count: 0 })); + + const selectOptions = { + allowCreateWhileLoading: true, + allowCustomValue, + formatCreateLabel, + defaultOptions: true, + filterOption, + getOptionLabel: (i: any) => i.label, + getOptionValue: (i: any) => i.value, + inputId, + isMulti: true, + loadOptions: debouncedLoadOptions, + loadingMessage: 'Loading...', + noOptionsMessage: 'No tags found', + onChange: onTagChange, + placeholder, + value, + width, + components: { + Option: TagOption, + MultiValueLabel: (): any => { + return null; // We want the whole tag to be clickable so we use MultiValueRemove instead + }, + MultiValueRemove(props: any) { + const { data } = props; + + return ( + + + + ); + }, + MultiValueContainer: hideValues ? (): any => null : components.MultiValueContainer, + }, + }; + + return ( +

+ {isClearable && tags.length > 0 && ( + onTagChange([])}> + Clear tags + + )} + } aria-label="Tag filter" /> +

+ ); +}; + +TagFilter.displayName = 'TagFilter'; + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + return { + tagFilter: css` + position: relative; + min-width: 180px; + flex-grow: 1; + + .label-tag { + margin-left: 6px; + cursor: pointer; + } + `, + clear: css` + text-decoration: underline; + font-size: 12px; + position: absolute; + top: -22px; + right: 0; + cursor: pointer; + color: ${theme.colors.textWeak}; + + &:hover { + color: ${theme.colors.textStrong}; + } + `, + }; +}); diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx new file mode 100644 index 00000000..3505e958 --- /dev/null +++ b/public/app/core/components/TagFilter/TagOption.tsx @@ -0,0 +1,47 @@ +import React, { FC } from 'react'; +import { css, cx } from '@emotion/css'; +import { useTheme, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; + +import { OptionProps } from 'react-select'; +import { TagBadge } from './TagBadge'; + +// https://github.com/JedWatson/react-select/issues/3038 +interface ExtendedOptionProps extends OptionProps { + data: any; +} + +export const TagOption: FC = ({ data, className, label, isFocused, innerProps }) => { + const theme = useTheme(); + const styles = getStyles(theme); + + return ( +

+ +

+ ); +}; + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + return { + option: css` + padding: 8px; + white-space: nowrap; + cursor: pointer; + border-left: 2px solid transparent; + &:hover { + background: ${theme.colors.dropdownOptionHoverBg}; + } + `, + optionFocused: css` + background: ${theme.colors.dropdownOptionHoverBg}; + border-style: solid; + border-top: 0; + border-right: 0; + border-bottom: 0; + border-left-width: 2px; + `, + }; +}); diff --git a/public/app/core/components/TagFilter/TagValue.tsx b/public/app/core/components/TagFilter/TagValue.tsx new file mode 100644 index 00000000..0406ead1 --- /dev/null +++ b/public/app/core/components/TagFilter/TagValue.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { TagBadge } from './TagBadge'; + +export interface Props { + value: any; + className: any; + onClick: any; + onRemove: any; +} + +export class TagValue extends React.Component { + constructor(props: Props) { + super(props); + this.onClick = this.onClick.bind(this); + } + + onClick(event: React.SyntheticEvent) { + this.props.onRemove(this.props.value, event); + } + + render() { + const { value } = this.props; + return ; + } +} diff --git a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx new file mode 100644 index 00000000..2306922b --- /dev/null +++ b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { LocalStorageValueProvider } from '../LocalStorageValueProvider'; +import { TimeRange, isDateTime, toUtc } from '@grafana/data'; +import { TimeRangePickerProps, TimeRangePicker } from '@grafana/ui'; + +const LOCAL_STORAGE_KEY = 'grafana.dashboard.timepicker.history'; + +interface Props extends Omit {} + +export const TimePickerWithHistory: React.FC = (props) => { + return ( + storageKey={LOCAL_STORAGE_KEY} defaultValue={[]}> + {(values, onSaveToStore) => { + return ( + { + onAppendToHistory(value, values, onSaveToStore); + props.onChange(value); + }} + /> + ); + }} + + ); +}; + +function convertIfJson(history: TimeRange[]): TimeRange[] { + return history.map((time) => { + if (isDateTime(time.from)) { + return time; + } + + return { + from: toUtc(time.from), + to: toUtc(time.to), + raw: time.raw, + }; + }); +} + +function onAppendToHistory(toAppend: TimeRange, values: TimeRange[], onSaveToStore: (values: TimeRange[]) => void) { + if (!isAbsolute(toAppend)) { + return; + } + const toStore = limit([toAppend, ...values]); + onSaveToStore(toStore); +} + +function isAbsolute(value: TimeRange): boolean { + return isDateTime(value.raw.from) || isDateTime(value.raw.to); +} + +function limit(value: TimeRange[]): TimeRange[] { + return value.slice(0, 4); +} diff --git a/public/app/core/components/TraceToLogsSettings.tsx b/public/app/core/components/TraceToLogsSettings.tsx new file mode 100644 index 00000000..870e7785 --- /dev/null +++ b/public/app/core/components/TraceToLogsSettings.tsx @@ -0,0 +1,183 @@ +import { css } from '@emotion/css'; +import { + DataSourceJsonData, + DataSourcePluginOptionsEditorProps, + GrafanaTheme, + updateDatasourcePluginJsonDataOption, +} from '@grafana/data'; +import { DataSourcePicker } from '@grafana/runtime'; +import { InlineField, InlineFieldRow, Input, TagsInput, useStyles, InlineSwitch } from '@grafana/ui'; +import React from 'react'; + +export interface TraceToLogsOptions { + datasourceUid?: string; + tags?: string[]; + spanStartTimeShift?: string; + spanEndTimeShift?: string; + filterByTraceID?: boolean; + filterBySpanID?: boolean; + lokiSearch?: boolean; +} + +export interface TraceToLogsData extends DataSourceJsonData { + tracesToLogs?: TraceToLogsOptions; +} + +interface Props extends DataSourcePluginOptionsEditorProps {} + +export function TraceToLogsSettings({ options, onOptionsChange }: Props) { + const styles = useStyles(getStyles); + + return ( +

Trace to logs

+ +

+ Trace to logs let's you navigate from a trace span to the selected data source's log. +

+ + + + + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { + datasourceUid: ds.uid, + tags: options.jsonData.tracesToLogs?.tags, + }) + } + /> + + + + + + + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { + datasourceUid: options.jsonData.tracesToLogs?.datasourceUid, + tags: tags, + }) + } + /> + + + + + + + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { + ...options.jsonData.tracesToLogs, + spanStartTimeShift: v.currentTarget.value, + }) + } + value={options.jsonData.tracesToLogs?.spanStartTimeShift || ''} + /> + + + + + + + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { + ...options.jsonData.tracesToLogs, + spanEndTimeShift: v.currentTarget.value, + }) + } + value={options.jsonData.tracesToLogs?.spanEndTimeShift || ''} + /> + + + + + + ) => + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { + ...options.jsonData.tracesToLogs, + filterByTraceID: event.currentTarget.checked, + }) + } + /> + + + + + + ) => + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { + ...options.jsonData.tracesToLogs, + filterBySpanID: event.currentTarget.checked, + }) + } + /> + + + + + ) => + updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { + ...options.jsonData.tracesToLogs, + lokiSearch: event.currentTarget.checked, + }) + } + /> + + +

+ ); +} + +const getStyles = (theme: GrafanaTheme) => ({ + infoText: css` + padding-bottom: ${theme.spacing.md}; + color: ${theme.colors.textSemiWeak}; + `, +}); diff --git a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx new file mode 100644 index 00000000..6f7c1d97 --- /dev/null +++ b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx @@ -0,0 +1,389 @@ +import React, { ChangeEvent } from 'react'; +import { of, OperatorFunction } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { + BinaryOperationID, + binaryOperators, + DataFrame, + DataTransformerID, + FieldType, + getFieldDisplayName, + KeyValue, + ReducerID, + SelectableValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; +import { FilterPill, HorizontalGroup, Input, LegacyForms, Select, StatsPicker } from '@grafana/ui'; +import { + BinaryOptions, + CalculateFieldMode, + CalculateFieldTransformerOptions, + getNameFromOptions, + ReduceOptions, +} from '@grafana/data/src/transformations/transformers/calculateField'; + +import { defaults } from 'lodash'; + +interface CalculateFieldTransformerEditorProps extends TransformerUIProps {} + +interface CalculateFieldTransformerEditorState { + include: string[]; + names: string[]; + selected: string[]; +} + +const calculationModes = [ + { value: CalculateFieldMode.BinaryOperation, label: 'Binary operation' }, + { value: CalculateFieldMode.ReduceRow, label: 'Reduce row' }, +]; + +const okTypes = new Set([FieldType.time, FieldType.number, FieldType.string]); + +export class CalculateFieldTransformerEditor extends React.PureComponent< + CalculateFieldTransformerEditorProps, + CalculateFieldTransformerEditorState +> { + constructor(props: CalculateFieldTransformerEditorProps) { + super(props); + + this.state = { + include: props.options?.reduce?.include || [], + names: [], + selected: [], + }; + } + + componentDidMount() { + this.initOptions(); + } + + componentDidUpdate(oldProps: CalculateFieldTransformerEditorProps) { + if (this.props.input !== oldProps.input) { + this.initOptions(); + } + } + + private initOptions() { + const { options } = this.props; + const configuredOptions = options?.reduce?.include || []; + const subscription = of(this.props.input) + .pipe( + standardTransformers.ensureColumnsTransformer.operator(null), + this.extractAllNames(), + this.extractNamesAndSelected(configuredOptions) + ) + .subscribe(({ selected, names }) => { + this.setState({ names, selected }, () => subscription.unsubscribe()); + }); + } + + private extractAllNames(): OperatorFunction { + return (source) => + source.pipe( + map((input) => { + const allNames: string[] = []; + const byName: KeyValue = {}; + + for (const frame of input) { + for (const field of frame.fields) { + if (!okTypes.has(field.type)) { + continue; + } + + const displayName = getFieldDisplayName(field, frame, input); + + if (!byName[displayName]) { + byName[displayName] = true; + allNames.push(displayName); + } + } + } + + return allNames; + }) + ); + } + + private extractNamesAndSelected( + configuredOptions: string[] + ): OperatorFunction { + return (source) => + source.pipe( + map((allNames) => { + if (!configuredOptions.length) { + return { names: allNames, selected: [] }; + } + + const names: string[] = []; + const selected: string[] = []; + + for (const v of allNames) { + if (configuredOptions.includes(v)) { + selected.push(v); + } + names.push(v); + } + + return { names, selected }; + }) + ); + } + + onToggleReplaceFields = () => { + const { options } = this.props; + this.props.onChange({ + ...options, + replaceFields: !options.replaceFields, + }); + }; + + onModeChanged = (value: SelectableValue) => { + const { options, onChange } = this.props; + const mode = value.value ?? CalculateFieldMode.BinaryOperation; + onChange({ + ...options, + mode, + }); + }; + + onAliasChanged = (evt: ChangeEvent) => { + const { options } = this.props; + this.props.onChange({ + ...options, + alias: evt.target.value, + }); + }; + + //--------------------------------------------------------- + // Reduce by Row + //--------------------------------------------------------- + + updateReduceOptions = (v: ReduceOptions) => { + const { options, onChange } = this.props; + onChange({ + ...options, + mode: CalculateFieldMode.ReduceRow, + reduce: v, + }); + }; + + onFieldToggle = (fieldName: string) => { + const { selected } = this.state; + if (selected.indexOf(fieldName) > -1) { + this.onChange(selected.filter((s) => s !== fieldName)); + } else { + this.onChange([...selected, fieldName]); + } + }; + + onChange = (selected: string[]) => { + this.setState({ selected }); + const { reduce } = this.props.options; + this.updateReduceOptions({ + ...reduce!, + include: selected, + }); + }; + + onStatsChange = (stats: string[]) => { + const reducer = stats.length ? (stats[0] as ReducerID) : ReducerID.sum; + + const { reduce } = this.props.options; + this.updateReduceOptions({ ...reduce, reducer }); + }; + + renderReduceRow(options?: ReduceOptions) { + const { names, selected } = this.state; + options = defaults(options, { reducer: ReducerID.sum }); + + return ( + <> +

Field name

+ + {names.map((o, i) => { + return ( + { + this.onFieldToggle(o); + }} + label={o} + selected={selected.indexOf(o) > -1} + /> + ); + })} + +

Calculation

+ +

+ + ); + } + + //--------------------------------------------------------- + // Binary Operator + //--------------------------------------------------------- + + updateBinaryOptions = (v: BinaryOptions) => { + const { options, onChange } = this.props; + onChange({ + ...options, + mode: CalculateFieldMode.BinaryOperation, + binary: v, + }); + }; + + onBinaryLeftChanged = (v: SelectableValue) => { + const { binary } = this.props.options; + this.updateBinaryOptions({ + ...binary!, + left: v.value!, + }); + }; + + onBinaryRightChanged = (v: SelectableValue) => { + const { binary } = this.props.options; + this.updateBinaryOptions({ + ...binary!, + right: v.value!, + }); + }; + + onBinaryOperationChanged = (v: SelectableValue) => { + const { binary } = this.props.options; + this.updateBinaryOptions({ + ...binary!, + operator: v.value! as BinaryOperationID, + }); + }; + + renderBinaryOperation(options?: BinaryOptions) { + options = defaults(options, { reducer: ReducerID.sum }); + + let foundLeft = !options?.left; + let foundRight = !options?.right; + const names = this.state.names.map((v) => { + if (v === options?.left) { + foundLeft = true; + } + if (v === options?.right) { + foundRight = true; + } + return { label: v, value: v }; + }); + const leftNames = foundLeft ? names : [...names, { label: options?.left, value: options?.left }]; + const rightNames = foundRight ? names : [...names, { label: options?.right, value: options?.right }]; + + const ops = binaryOperators.list().map((v) => { + return { label: v.id, value: v.id }; + }); + + return ( +

Operation

+ + v.value === mode)} + onChange={this.onModeChanged} + /> +

+ {mode === CalculateFieldMode.BinaryOperation && this.renderBinaryOperation(options.binary)} + {mode === CalculateFieldMode.ReduceRow && this.renderReduceRow(options.reduce)} +

Alias

+ +

+ ); + } +} + +export const calculateFieldTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.calculateField, + editor: CalculateFieldTransformerEditor, + transformation: standardTransformers.calculateFieldTransformer, + name: 'Add field from calculation', + description: 'Use the row values to calculate a new field', +}; diff --git a/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx b/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx new file mode 100644 index 00000000..0e774923 --- /dev/null +++ b/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx @@ -0,0 +1,93 @@ +import React, { ChangeEvent } from 'react'; +import { + DataTransformerID, + SelectableValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; +import { Input, Select } from '@grafana/ui'; +import { + ConcatenateFrameNameMode, + ConcatenateTransformerOptions, +} from '@grafana/data/src/transformations/transformers/concat'; + +interface ConcatenateTransformerEditorProps extends TransformerUIProps {} + +const nameModes: Array> = [ + { value: ConcatenateFrameNameMode.FieldName, label: 'Copy frame name to field name' }, + { value: ConcatenateFrameNameMode.Label, label: 'Add a label with the frame name' }, + { value: ConcatenateFrameNameMode.Drop, label: 'Ignore the frame name' }, +]; + +export class ConcatenateTransformerEditor extends React.PureComponent { + constructor(props: ConcatenateTransformerEditorProps) { + super(props); + } + + onModeChanged = (value: SelectableValue) => { + const { options, onChange } = this.props; + const frameNameMode = value.value ?? ConcatenateFrameNameMode.FieldName; + onChange({ + ...options, + frameNameMode, + }); + }; + + onLabelChanged = (evt: ChangeEvent) => { + const { options } = this.props; + this.props.onChange({ + ...options, + frameNameLabel: evt.target.value, + }); + }; + + //--------------------------------------------------------- + // Render + //--------------------------------------------------------- + + render() { + const { options } = this.props; + + const frameNameMode = options.frameNameMode ?? ConcatenateFrameNameMode.FieldName; + + return ( +

Name

+ +

+ )} +

+ ); + } +} + +export const concatenateTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.concatenate, + editor: ConcatenateTransformerEditor, + transformation: standardTransformers.concatenateTransformer, + name: 'Concatenate fields', + description: + 'Combine all fields into a single frame. Values will be appended with undefined values if not the same length.', +}; diff --git a/public/app/core/components/TransformersUI/ConvertFieldTypeTransformerEditor.tsx b/public/app/core/components/TransformersUI/ConvertFieldTypeTransformerEditor.tsx new file mode 100644 index 00000000..456761e5 --- /dev/null +++ b/public/app/core/components/TransformersUI/ConvertFieldTypeTransformerEditor.tsx @@ -0,0 +1,153 @@ +import React, { ChangeEvent, useCallback } from 'react'; +import { + DataTransformerID, + FieldNamePickerConfigSettings, + FieldType, + SelectableValue, + StandardEditorsRegistryItem, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; + +import { ConvertFieldTypeTransformerOptions } from '@grafana/data/src/transformations/transformers/convertFieldType'; +import { Button, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui'; +import { FieldNamePicker } from '../../../../../packages/grafana-ui/src/components/MatchersUI/FieldNamePicker'; +import { ConvertFieldTypeOptions } from '../../../../../packages/grafana-data/src/transformations/transformers/convertFieldType'; + +const fieldNamePickerSettings: StandardEditorsRegistryItem = { + settings: { width: 24 }, +} as any; + +export const ConvertFieldTypeTransformerEditor: React.FC> = ({ + input, + options, + onChange, +}) => { + const allTypes: Array> = [ + { value: FieldType.number, label: 'Numeric' }, + { value: FieldType.string, label: 'String' }, + { value: FieldType.time, label: 'Time' }, + { value: FieldType.boolean, label: 'Boolean' }, + { value: FieldType.other, label: 'JSON' }, + ]; + + const onSelectField = useCallback( + (idx) => (value: string | undefined) => { + const conversions = options.conversions; + conversions[idx] = { ...conversions[idx], targetField: value ?? '' }; + onChange({ + ...options, + conversions: conversions, + }); + }, + [onChange, options] + ); + + const onSelectDestinationType = useCallback( + (idx) => (value: SelectableValue) => { + const conversions = options.conversions; + conversions[idx] = { ...conversions[idx], destinationType: value.value }; + onChange({ + ...options, + conversions: conversions, + }); + }, + [onChange, options] + ); + + const onInputFormat = useCallback( + (idx) => (e: ChangeEvent) => { + const conversions = options.conversions; + conversions[idx] = { ...conversions[idx], dateFormat: e.currentTarget.value }; + onChange({ + ...options, + conversions: conversions, + }); + }, + [onChange, options] + ); + + const onAddConvertFieldType = useCallback(() => { + onChange({ + ...options, + conversions: [ + ...options.conversions, + { targetField: undefined, destinationType: undefined, dateFormat: undefined }, + ], + }); + }, [onChange, options]); + + const onRemoveConvertFieldType = useCallback( + (idx) => { + const removed = options.conversions; + removed.splice(idx, 1); + onChange({ + ...options, + conversions: removed, + }); + }, + [onChange, options] + ); + + return ( + <> + {options.conversions.map((c: ConvertFieldTypeOptions, idx: number) => { + return ( + + + + + + + + )} + + + ); +}; + +export const convertFieldTypeTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.convertFieldType, + editor: ConvertFieldTypeTransformerEditor, + transformation: standardTransformers.convertFieldTypeTransformer, + name: standardTransformers.convertFieldTypeTransformer.name, + description: standardTransformers.convertFieldTypeTransformer.description, +}; diff --git a/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx b/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx new file mode 100644 index 00000000..dcf3ec3d --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx @@ -0,0 +1,211 @@ +import React from 'react'; +import { + DataTransformerID, + KeyValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, + getFieldDisplayName, + stringToJsRegex, +} from '@grafana/data'; +import { Field, Input, FilterPill, HorizontalGroup } from '@grafana/ui'; +import { css } from '@emotion/css'; +import { FilterFieldsByNameTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByName'; + +interface FilterByNameTransformerEditorProps extends TransformerUIProps {} + +interface FilterByNameTransformerEditorState { + include: string[]; + options: FieldNameInfo[]; + selected: string[]; + regex?: string; + isRegexValid?: boolean; +} + +interface FieldNameInfo { + name: string; + count: number; +} +export class FilterByNameTransformerEditor extends React.PureComponent< + FilterByNameTransformerEditorProps, + FilterByNameTransformerEditorState +> { + constructor(props: FilterByNameTransformerEditorProps) { + super(props); + this.state = { + include: props.options.include?.names || [], + regex: props.options.include?.pattern, + options: [], + selected: [], + isRegexValid: true, + }; + } + + componentDidMount() { + this.initOptions(); + } + + componentDidUpdate(oldProps: FilterByNameTransformerEditorProps) { + if (this.props.input !== oldProps.input) { + this.initOptions(); + } + } + + private initOptions() { + const { input, options } = this.props; + const configuredOptions = Array.from(options.include?.names ?? []); + + const allNames: FieldNameInfo[] = []; + const byName: KeyValue = {}; + + for (const frame of input) { + for (const field of frame.fields) { + const displayName = getFieldDisplayName(field, frame, input); + let v = byName[displayName]; + + if (!v) { + v = byName[displayName] = { + name: displayName, + count: 0, + }; + allNames.push(v); + } + + v.count++; + } + } + + if (options.include?.pattern) { + try { + const regex = stringToJsRegex(options.include.pattern); + + for (const info of allNames) { + if (regex.test(info.name)) { + configuredOptions.push(info.name); + } + } + } catch (error) { + console.error(error); + } + } + + if (configuredOptions.length) { + const selected: FieldNameInfo[] = allNames.filter((n) => configuredOptions.includes(n.name)); + + this.setState({ + options: allNames, + selected: selected.map((s) => s.name), + regex: options.include?.pattern, + }); + } else { + this.setState({ + options: allNames, + selected: allNames.map((n) => n.name), + regex: options.include?.pattern, + }); + } + } + + onFieldToggle = (fieldName: string) => { + const { selected } = this.state; + if (selected.indexOf(fieldName) > -1) { + this.onChange(selected.filter((s) => s !== fieldName)); + } else { + this.onChange([...selected, fieldName]); + } + }; + + onChange = (selected: string[]) => { + const { regex, isRegexValid } = this.state; + const options: FilterFieldsByNameTransformerOptions = { + ...this.props.options, + include: { names: selected }, + }; + + if (regex && isRegexValid) { + options.include = options.include ?? {}; + options.include.pattern = regex; + } + + this.setState({ selected }, () => { + this.props.onChange(options); + }); + }; + + onInputBlur = (e: React.FocusEvent) => { + const { selected, regex } = this.state; + let isRegexValid = true; + + try { + if (regex) { + stringToJsRegex(regex); + } + } catch (e) { + isRegexValid = false; + } + + if (isRegexValid) { + this.props.onChange({ + ...this.props.options, + include: { pattern: regex }, + }); + } else { + this.props.onChange({ + ...this.props.options, + include: { names: selected }, + }); + } + + this.setState({ isRegexValid }); + }; + + render() { + const { options, selected, isRegexValid } = this.state; + return ( +

Identifier

+ + + this.setState({ regex: e.currentTarget.value })} + onBlur={this.onInputBlur} + width={25} + /> + + {options.map((o, i) => { + const label = `${o.name}${o.count > 1 ? ' (' + o.count + ')' : ''}`; + const isSelected = selected.indexOf(o.name) > -1; + return ( + { + this.onFieldToggle(o.name); + }} + label={label} + selected={isSelected} + /> + ); + })} + +

+ ); + } +} + +export const filterFieldsByNameTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.filterFieldsByName, + editor: FilterByNameTransformerEditor, + transformation: standardTransformers.filterFieldsByNameTransformer, + name: 'Filter by name', + description: 'Removes part of the query results using a regex pattern. The pattern can be inclusive or exclusive.', +}; diff --git a/public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx b/public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx new file mode 100644 index 00000000..e4f90fe9 --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx @@ -0,0 +1,139 @@ +import React from 'react'; +import { + DataTransformerID, + KeyValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; +import { HorizontalGroup, FilterPill } from '@grafana/ui'; + +import { FilterFramesByRefIdTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByRefId'; + +interface FilterByRefIdTransformerEditorProps extends TransformerUIProps {} + +interface FilterByRefIdTransformerEditorState { + include: string; + options: RefIdInfo[]; + selected: string[]; +} + +interface RefIdInfo { + refId: string; + count: number; +} +export class FilterByRefIdTransformerEditor extends React.PureComponent< + FilterByRefIdTransformerEditorProps, + FilterByRefIdTransformerEditorState +> { + constructor(props: FilterByRefIdTransformerEditorProps) { + super(props); + this.state = { + include: props.options.include || '', + options: [], + selected: [], + }; + } + + componentDidMount() { + this.initOptions(); + } + + componentDidUpdate(oldProps: FilterByRefIdTransformerEditorProps) { + if (this.props.input !== oldProps.input) { + this.initOptions(); + } + } + + private initOptions() { + const { input, options } = this.props; + const configuredOptions = options.include ? options.include.split('|') : []; + + const allNames: RefIdInfo[] = []; + const byName: KeyValue = {}; + for (const frame of input) { + if (frame.refId) { + let v = byName[frame.refId]; + if (!v) { + v = byName[frame.refId] = { + refId: frame.refId, + count: 0, + }; + allNames.push(v); + } + v.count++; + } + } + + if (configuredOptions.length) { + const options: RefIdInfo[] = []; + const selected: RefIdInfo[] = []; + for (const v of allNames) { + if (configuredOptions.includes(v.refId)) { + selected.push(v); + } + options.push(v); + } + + this.setState({ + options, + selected: selected.map((s) => s.refId), + }); + } else { + this.setState({ options: allNames, selected: [] }); + } + } + + onFieldToggle = (fieldName: string) => { + const { selected } = this.state; + if (selected.indexOf(fieldName) > -1) { + this.onChange(selected.filter((s) => s !== fieldName)); + } else { + this.onChange([...selected, fieldName]); + } + }; + + onChange = (selected: string[]) => { + this.setState({ selected }); + this.props.onChange({ + ...this.props.options, + include: selected.join('|'), + }); + }; + + render() { + const { options, selected } = this.state; + return ( +

Series refId

+ + {options.map((o, i) => { + const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`; + const isSelected = selected.indexOf(o.refId) > -1; + return ( + { + this.onFieldToggle(o.refId); + }} + label={label} + selected={isSelected} + /> + ); + })} + +

+ ); + } +} + +export const filterFramesByRefIdTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.filterByRefId, + editor: FilterByRefIdTransformerEditor, + transformation: standardTransformers.filterFramesByRefIdTransformer, + name: 'Filter data by query', + description: + 'Filter data by query. This is useful if you are sharing the results from a different panel that has many queries and you want to only visualize a subset of that in this panel.', +}; diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx new file mode 100644 index 00000000..44fce104 --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx @@ -0,0 +1,166 @@ +import React, { useCallback } from 'react'; +import { Button, Select } from '@grafana/ui'; +import { Field, SelectableValue, valueMatchers } from '@grafana/data'; +import { FilterByValueFilter } from '@grafana/data/src/transformations/transformers/filterByValue'; +import { valueMatchersUI } from './ValueMatchers/valueMatchersUI'; + +interface Props { + onDelete: () => void; + onChange: (filter: FilterByValueFilter) => void; + filter: FilterByValueFilter; + fieldsInfo: DataFrameFieldsInfo; +} + +export interface DataFrameFieldsInfo { + fieldsAsOptions: Array>; + fieldByDisplayName: Record; +} + +export const FilterByValueFilterEditor: React.FC = (props) => { + const { onDelete, onChange, filter, fieldsInfo } = props; + const { fieldsAsOptions, fieldByDisplayName } = fieldsInfo; + const fieldName = getFieldName(filter, fieldsAsOptions) ?? ''; + const field = fieldByDisplayName[fieldName]; + const matcherOptions = field ? getMatcherOptions(field) : []; + const matcherId = getSelectedMatcherId(filter, matcherOptions); + const editor = valueMatchersUI.getIfExists(matcherId); + + const onChangeField = useCallback( + (selectable?: SelectableValue) => { + if (!selectable?.value) { + return; + } + onChange({ + ...filter, + fieldName: selectable.value, + }); + }, + [onChange, filter] + ); + + const onChangeMatcher = useCallback( + (selectable?: SelectableValue) => { + if (!selectable?.value) { + return; + } + + const id = selectable.value; + const options = valueMatchers.get(id).getDefaultOptions(field); + + onChange({ + ...filter, + config: { id, options }, + }); + }, + [onChange, filter, field] + ); + + const onChangeMatcherOptions = useCallback( + (options) => { + onChange({ + ...filter, + config: { + ...filter.config, + options, + }, + }); + }, + [onChange, filter] + ); + + if (!field || !editor || !editor.component) { + return null; + } + + return ( +

Field

+ +

Value

+ +

+ ); +}; + +const getMatcherOptions = (field: Field): Array> => { + const options = []; + + for (const matcher of valueMatchers.list()) { + if (!matcher.isApplicable(field)) { + continue; + } + + const editor = valueMatchersUI.getIfExists(matcher.id); + + if (!editor) { + continue; + } + + options.push({ + value: matcher.id, + label: matcher.name, + description: matcher.description, + }); + } + + return options; +}; + +const getSelectedMatcherId = ( + filter: FilterByValueFilter, + matcherOptions: Array> +): string | undefined => { + const matcher = matcherOptions.find((m) => m.value === filter.config.id); + + if (matcher && matcher.value) { + return matcher.value; + } + + if (matcherOptions[0]?.value) { + return matcherOptions[0]?.value; + } + + return; +}; + +const getFieldName = ( + filter: FilterByValueFilter, + fieldOptions: Array> +): string | undefined => { + const fieldName = fieldOptions.find((m) => m.value === filter.fieldName); + + if (fieldName && fieldName.value) { + return fieldName.value; + } + + if (fieldOptions[0]?.value) { + return fieldOptions[0]?.value; + } + + return; +}; diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueTransformerEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueTransformerEditor.tsx new file mode 100644 index 00000000..169d17dc --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueTransformerEditor.tsx @@ -0,0 +1,182 @@ +import React, { useMemo, useCallback } from 'react'; +import { css } from '@emotion/css'; +import { + DataTransformerID, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, + getFieldDisplayName, + DataFrame, + SelectableValue, + FieldType, + ValueMatcherID, + valueMatchers, +} from '@grafana/data'; +import { Button, RadioButtonGroup, stylesFactory } from '@grafana/ui'; +import { cloneDeep } from 'lodash'; +import { + FilterByValueFilter, + FilterByValueMatch, + FilterByValueTransformerOptions, + FilterByValueType, +} from '@grafana/data/src/transformations/transformers/filterByValue'; + +import { DataFrameFieldsInfo, FilterByValueFilterEditor } from './FilterByValueFilterEditor'; + +const filterTypes: Array> = [ + { label: 'Include', value: FilterByValueType.include }, + { label: 'Exclude', value: FilterByValueType.exclude }, +]; + +const filterMatch: Array> = [ + { label: 'Match all', value: FilterByValueMatch.all }, + { label: 'Match any', value: FilterByValueMatch.any }, +]; + +export const FilterByValueTransformerEditor: React.FC> = ( + props +) => { + const { input, options, onChange } = props; + const styles = getEditorStyles(); + const fieldsInfo = useFieldsInfo(input); + + const onAddFilter = useCallback(() => { + const frame = input[0]; + const field = frame.fields.find((f) => f.type !== FieldType.time); + + if (!field) { + return; + } + + const filters = cloneDeep(options.filters); + const matcher = valueMatchers.get(ValueMatcherID.greater); + + filters.push({ + fieldName: getFieldDisplayName(field, frame, input), + config: { + id: matcher.id, + options: matcher.getDefaultOptions(field), + }, + }); + onChange({ ...options, filters }); + }, [onChange, options, input]); + + const onDeleteFilter = useCallback( + (index: number) => { + let filters = cloneDeep(options.filters); + filters.splice(index, 1); + onChange({ ...options, filters }); + }, + [options, onChange] + ); + + const onChangeFilter = useCallback( + (filter: FilterByValueFilter, index: number) => { + let filters = cloneDeep(options.filters); + filters[index] = filter; + onChange({ ...options, filters }); + }, + [options, onChange] + ); + + const onChangeType = useCallback( + (type?: FilterByValueType) => { + onChange({ + ...options, + type: type ?? FilterByValueType.include, + }); + }, + [options, onChange] + ); + + const onChangeMatch = useCallback( + (match?: FilterByValueMatch) => { + onChange({ + ...options, + match: match ?? FilterByValueMatch.all, + }); + }, + [options, onChange] + ); + + return ( +

Filter type

+ +

Conditions

+ +

+ {options.filters.map((filter, idx) => ( + onChangeFilter(filter, idx)} + onDelete={() => onDeleteFilter(idx)} + /> + ))} +

+ +

+ ); +}; + +export const filterByValueTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.filterByValue, + editor: FilterByValueTransformerEditor, + transformation: standardTransformers.filterByValueTransformer, + name: standardTransformers.filterByValueTransformer.name, + description: + 'Removes rows of the query results using user-defined filters. This is useful if you can not filter your data in the data source.', +}; + +const getEditorStyles = stylesFactory(() => ({ + conditions: css` + padding-left: 16px; + `, +})); + +const useFieldsInfo = (data: DataFrame[]): DataFrameFieldsInfo => { + return useMemo(() => { + const meta = { + fieldsAsOptions: [], + fieldByDisplayName: {}, + }; + + if (!Array.isArray(data)) { + return meta; + } + + return data.reduce((meta: DataFrameFieldsInfo, frame) => { + return frame.fields.reduce((meta, field) => { + const fieldName = getFieldDisplayName(field, frame, data); + + if (meta.fieldByDisplayName[fieldName]) { + return meta; + } + + meta.fieldsAsOptions.push({ + label: fieldName, + value: fieldName, + type: field.type, + }); + + meta.fieldByDisplayName[fieldName] = field; + + return meta; + }, meta); + }, meta); + }, [data]); +}; diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx new file mode 100644 index 00000000..00499b90 --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx @@ -0,0 +1,104 @@ +import React, { useCallback, useState } from 'react'; +import { Input } from '@grafana/ui'; +import { ValueMatcherID, BasicValueMatcherOptions } from '@grafana/data'; +import { ValueMatcherEditorConfig, ValueMatcherUIProps, ValueMatcherUIRegistryItem } from './types'; +import { convertToType } from './utils'; + +export function basicMatcherEditor( + config: ValueMatcherEditorConfig +): React.FC>> { + return function Render({ options, onChange, field }) { + const { validator, converter = convertToType } = config; + const { value } = options; + const [isInvalid, setInvalid] = useState(!validator(value)); + + const onChangeValue = useCallback( + (event: React.FormEvent) => { + setInvalid(!validator(event.currentTarget.value)); + }, + [setInvalid, validator] + ); + + const onChangeOptions = useCallback( + (event: React.FocusEvent) => { + if (isInvalid) { + return; + } + + const { value } = event.currentTarget; + + onChange({ + ...options, + value: converter(value, field), + }); + }, + [options, onChange, isInvalid, field, converter] + ); + + return ( + + ); + }; +} + +export const getBasicValueMatchersUI = (): Array> => { + return [ + { + name: 'Is greater', + id: ValueMatcherID.greater, + component: basicMatcherEditor({ + validator: (value) => !isNaN(value), + }), + }, + { + name: 'Is greater or equal', + id: ValueMatcherID.greaterOrEqual, + component: basicMatcherEditor({ + validator: (value) => !isNaN(value), + }), + }, + { + name: 'Is lower', + id: ValueMatcherID.lower, + component: basicMatcherEditor({ + validator: (value) => !isNaN(value), + }), + }, + { + name: 'Is lower or equal', + id: ValueMatcherID.lowerOrEqual, + component: basicMatcherEditor({ + validator: (value) => !isNaN(value), + }), + }, + { + name: 'Is equal', + id: ValueMatcherID.equal, + component: basicMatcherEditor({ + validator: () => true, + }), + }, + { + name: 'Is not equal', + id: ValueMatcherID.notEqual, + component: basicMatcherEditor({ + validator: () => true, + }), + }, + { + name: 'Regex', + id: ValueMatcherID.regex, + component: basicMatcherEditor({ + validator: () => true, + converter: (value: any) => String(value), + }), + }, + ]; +}; diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx new file mode 100644 index 00000000..84119754 --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx @@ -0,0 +1,22 @@ +import { ValueMatcherID } from '@grafana/data'; +import React from 'react'; +import { ValueMatcherUIProps, ValueMatcherUIRegistryItem } from './types'; + +export const NoopMatcherEditor: React.FC> = () => { + return null; +}; + +export const getNoopValueMatchersUI = (): Array> => { + return [ + { + name: 'Is null', + id: ValueMatcherID.isNull, + component: NoopMatcherEditor, + }, + { + name: 'Is not null', + id: ValueMatcherID.isNotNull, + component: NoopMatcherEditor, + }, + ]; +}; diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx new file mode 100644 index 00000000..5738f38b --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx @@ -0,0 +1,81 @@ +import React, { useCallback, useState } from 'react'; +import { Input } from '@grafana/ui'; +import { ValueMatcherID, RangeValueMatcherOptions } from '@grafana/data'; +import { ValueMatcherEditorConfig, ValueMatcherUIProps, ValueMatcherUIRegistryItem } from './types'; +import { convertToType } from './utils'; + +type PropNames = 'from' | 'to'; + +export function rangeMatcherEditor( + config: ValueMatcherEditorConfig +): React.FC>> { + return function RangeMatcherEditor({ options, onChange, field }) { + const { validator } = config; + const [isInvalid, setInvalid] = useState({ + from: !validator(options.from), + to: !validator(options.to), + }); + + const onChangeValue = useCallback( + (event: React.FormEvent, prop: PropNames) => { + setInvalid({ + ...isInvalid, + [prop]: !validator(event.currentTarget.value), + }); + }, + [setInvalid, validator, isInvalid] + ); + + const onChangeOptions = useCallback( + (event: React.FocusEvent, prop: PropNames) => { + if (isInvalid[prop]) { + return; + } + + const { value } = event.currentTarget; + + onChange({ + ...options, + [prop]: convertToType(value, field), + }); + }, + [options, onChange, isInvalid, field] + ); + + return ( + <> + onChangeValue(event, 'from')} + onBlur={(event) => onChangeOptions(event, 'from')} + /> +

and

+ onChangeValue(event, 'to')} + onBlur={(event) => onChangeOptions(event, 'to')} + /> + + ); + }; +} + +export const getRangeValueMatchersUI = (): Array> => { + return [ + { + name: 'Is between', + id: ValueMatcherID.between, + component: rangeMatcherEditor({ + validator: (value) => { + return !isNaN(value); + }, + }), + }, + ]; +}; diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/types.ts b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/types.ts new file mode 100644 index 00000000..56a7b799 --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/types.ts @@ -0,0 +1,14 @@ +import { Field, RegistryItem } from '@grafana/data'; +export interface ValueMatcherUIRegistryItem extends RegistryItem { + component: React.ComponentType>; +} + +export interface ValueMatcherUIProps { + options: TOptions; + onChange: (options: TOptions) => void; + field: Field; +} +export interface ValueMatcherEditorConfig { + validator: (value: any) => boolean; + converter?: (value: any, field: Field) => any; +} diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/utils.ts b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/utils.ts new file mode 100644 index 00000000..f30f590a --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/utils.ts @@ -0,0 +1,34 @@ +import { Field, FieldType } from '@grafana/data'; +import { isString, isUndefined } from 'lodash'; + +export function convertToType(value: any, field: Field): any { + switch (field.type) { + case FieldType.boolean: + if (isUndefined(value)) { + return false; + } + return convertToBool(value); + + case FieldType.number: + if (isNaN(value)) { + return 0; + } + return parseFloat(value); + + case FieldType.string: + if (!value) { + return ''; + } + return String(value); + + default: + return value; + } +} + +const convertToBool = (value: any): boolean => { + if (isString(value)) { + return !(value[0] === 'F' || value[0] === 'f' || value[0] === '0'); + } + return !!value; +}; diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/valueMatchersUI.ts b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/valueMatchersUI.ts new file mode 100644 index 00000000..0517333a --- /dev/null +++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/valueMatchersUI.ts @@ -0,0 +1,9 @@ +import { Registry } from '@grafana/data'; +import { getBasicValueMatchersUI } from './BasicMatcherEditor'; +import { getNoopValueMatchersUI } from './NoopMatcherEditor'; +import { getRangeValueMatchersUI } from './RangeMatcherEditor'; +import { ValueMatcherUIRegistryItem } from './types'; + +export const valueMatchersUI = new Registry>(() => { + return [...getBasicValueMatchersUI(), ...getNoopValueMatchersUI(), ...getRangeValueMatchersUI()]; +}); diff --git a/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx b/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx new file mode 100644 index 00000000..a85cc42e --- /dev/null +++ b/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx @@ -0,0 +1,148 @@ +import React, { useCallback } from 'react'; +import { css, cx } from '@emotion/css'; +import { + DataTransformerID, + ReducerID, + SelectableValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; +import { Select, StatsPicker, stylesFactory } from '@grafana/ui'; + +import { + GroupByFieldOptions, + GroupByOperationID, + GroupByTransformerOptions, +} from '@grafana/data/src/transformations/transformers/groupBy'; +import { useAllFieldNamesFromDataFrames } from './utils'; + +interface FieldProps { + fieldName: string; + config?: GroupByFieldOptions; + onConfigChange: (config: GroupByFieldOptions) => void; +} + +export const GroupByTransformerEditor: React.FC> = ({ + input, + options, + onChange, +}) => { + const fieldNames = useAllFieldNamesFromDataFrames(input); + + const onConfigChange = useCallback( + (fieldName: string) => (config: GroupByFieldOptions) => { + onChange({ + ...options, + fields: { + ...options.fields, + [fieldName]: config, + }, + }); + }, + // Adding options to the dependency array causes infinite loop here. + // eslint-disable-next-line react-hooks/exhaustive-deps + [onChange] + ); + + return ( +

+ {fieldNames.map((key) => ( + + ))} +

+ ); +}; + +const options = [ + { label: 'Group by', value: GroupByOperationID.groupBy }, + { label: 'Calculate', value: GroupByOperationID.aggregate }, +]; + +export const GroupByFieldConfiguration: React.FC = ({ fieldName, config, onConfigChange }) => { + const styles = getStyling(); + + const onChange = useCallback( + (value: SelectableValue) => { + onConfigChange({ + aggregations: config?.aggregations ?? [], + operation: value?.value ?? null, + }); + }, + [config, onConfigChange] + ); + + return ( +

{fieldName}

+ +

+ + + + + + + + + + + + + +

+ ); +}; + +export const histogramTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.histogram, + editor: HistogramTransformerEditor, + transformation: standardTransformers.histogramTransformer, + name: standardTransformers.histogramTransformer.name, + description: standardTransformers.histogramTransformer.description, +}; diff --git a/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx new file mode 100644 index 00000000..0101173b --- /dev/null +++ b/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx @@ -0,0 +1,130 @@ +import React, { useMemo } from 'react'; +import { + DataTransformerID, + SelectableValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; +import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill } from '@grafana/ui'; + +import { + LabelsToFieldsMode, + LabelsToFieldsOptions, +} from '@grafana/data/src/transformations/transformers/labelsToFields'; + +const modes: Array> = [ + { value: LabelsToFieldsMode.Columns, label: 'Columns' }, + { value: LabelsToFieldsMode.Rows, label: 'Rows' }, +]; + +export const LabelsAsFieldsTransformerEditor: React.FC> = ({ + input, + options, + onChange, +}) => { + const labelWidth = 20; + + const { labelNames, selected } = useMemo(() => { + let labelNames: Array> = []; + let uniqueLabels: Record = {}; + + for (const frame of input) { + for (const field of frame.fields) { + if (!field.labels) { + continue; + } + + for (const labelName of Object.keys(field.labels)) { + if (!uniqueLabels[labelName]) { + labelNames.push({ value: labelName, label: labelName }); + uniqueLabels[labelName] = true; + } + } + } + } + + const selected = new Set(options.keepLabels?.length ? options.keepLabels : Object.keys(uniqueLabels)); + return { labelNames, selected }; + }, [options.keepLabels, input]); + + const onValueLabelChange = (value: SelectableValue | null) => { + onChange({ ...options, valueLabel: value?.value }); + }; + + const onToggleSelection = (v: string) => { + if (selected.has(v)) { + selected.delete(v); + } else { + selected.add(v); + } + if (selected.size === labelNames.length || !selected.size) { + const { keepLabels, ...rest } = options; + onChange(rest); + } else { + onChange({ ...options, keepLabels: [...selected] }); + } + }; + + return ( +

+ + + onChange({ ...options, mode: v })} + /> + + + + + <> + {labelNames.map((o, i) => { + const label = o.label!; + return ( + onToggleSelection(label)} + label={label} + selected={selected.has(label)} + /> + ); + })} + + + + {options.mode !== LabelsToFieldsMode.Rows && ( + + + onRenameField(fieldName, event.currentTarget.value)} + /> +

+ )} + + ); +}; + +DraggableFieldName.displayName = 'DraggableFieldName'; + +const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({ + toggle: css` + margin: 0 8px; + color: ${theme.colors.textWeak}; + `, + draggable: css` + opacity: 0.4; + &:hover { + color: ${theme.colors.textStrong}; + } + `, + name: css` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: ${theme.typography.size.sm}; + font-weight: ${theme.typography.weight.semibold}; + `, +})); + +const reorderToIndex = (fieldNames: string[], startIndex: number, endIndex: number) => { + const result = Array.from(fieldNames); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result.reduce((nameByIndex, fieldName, index) => { + nameByIndex[fieldName] = index; + return nameByIndex; + }, {} as Record); +}; + +const orderFieldNamesByIndex = (fieldNames: string[], indexByName: Record = {}): string[] => { + if (!indexByName || Object.keys(indexByName).length === 0) { + return fieldNames; + } + const comparer = createOrderFieldsComparer(indexByName); + return fieldNames.sort(comparer); +}; + +export const organizeFieldsTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.organize, + editor: OrganizeFieldsTransformerEditor, + transformation: standardTransformers.organizeFieldsTransformer, + name: 'Organize fields', + description: + "Allows the user to re-order, hide, or rename fields / columns. Useful when data source doesn't allow overrides for visualizing data.", +}; diff --git a/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx new file mode 100644 index 00000000..24be8657 --- /dev/null +++ b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx @@ -0,0 +1,128 @@ +import React, { useCallback } from 'react'; +import { LegacyForms, Select, StatsPicker } from '@grafana/ui'; +import { + DataTransformerID, + ReducerID, + SelectableValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; + +import { ReduceTransformerMode, ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce'; +import { selectors } from '@grafana/e2e-selectors'; + +// TODO: Minimal implementation, needs some <3 +export const ReduceTransformerEditor: React.FC> = ({ + options, + onChange, +}) => { + const modes: Array> = [ + { + label: 'Series to rows', + value: ReduceTransformerMode.SeriesToRows, + description: 'Create a table with one row for each series value', + }, + { + label: 'Reduce fields', + value: ReduceTransformerMode.ReduceFields, + description: 'Collapse each field into a single value', + }, + ]; + + const onSelectMode = useCallback( + (value: SelectableValue) => { + const mode = value.value!; + onChange({ + ...options, + mode, + includeTimeField: mode === ReduceTransformerMode.ReduceFields ? !!options.includeTimeField : false, + }); + }, + [onChange, options] + ); + + const onToggleTime = useCallback(() => { + onChange({ + ...options, + includeTimeField: !options.includeTimeField, + }); + }, [onChange, options]); + + const onToggleLabels = useCallback(() => { + onChange({ + ...options, + labelsToFields: !options.labelsToFields, + }); + }, [onChange, options]); + + return ( + <> +

+ Mode +

+ + +

Replace

+ + + +

+ + ); + } +} + +export const renameByRegexTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.renameByRegex, + editor: RenameByRegexTransformerEditor, + transformation: standardTransformers.renameByRegexTransformer, + name: 'Rename by regex', + description: 'Renames part of the query result by using regular expression with placeholders.', +}; diff --git a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx new file mode 100644 index 00000000..4146cfb2 --- /dev/null +++ b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx @@ -0,0 +1,48 @@ +import React, { useCallback } from 'react'; +import { + DataTransformerID, + SelectableValue, + standardTransformers, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; +import { Select } from '@grafana/ui'; + +import { SeriesToColumnsOptions } from '@grafana/data/src/transformations/transformers/seriesToColumns'; +import { useAllFieldNamesFromDataFrames } from './utils'; + +export const SeriesToFieldsTransformerEditor: React.FC> = ({ + input, + options, + onChange, +}) => { + const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item })); + + const onSelectField = useCallback( + (value: SelectableValue) => { + onChange({ + ...options, + byField: value.value, + }); + }, + [onChange, options] + ); + + return ( +

Field name

+ { + onSortChange(index, { ...s, field: v.value! }); + }} + /> + + + { + onSortChange(index, { ...s, desc: !!!s.desc }); + }} + /> + + + ); + })} +

+ ); +}; + +export const sortByTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.sortBy, + editor: SortByTransformerEditor, + transformation: standardTransformers.sortByTransformer, + name: standardTransformers.sortByTransformer.name, + description: standardTransformers.sortByTransformer.description, +}; diff --git a/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.test.tsx b/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.test.tsx new file mode 100644 index 00000000..6d5a221b --- /dev/null +++ b/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.test.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { toDataFrame, FieldType } from '@grafana/data'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { selectOptionInTest } from '@grafana/ui'; +import { Props, ConfigFromQueryTransformerEditor } from './ConfigFromQueryTransformerEditor'; + +beforeEach(() => { + jest.clearAllMocks(); +}); + +const input = toDataFrame({ + fields: [ + { name: 'Name', type: FieldType.string, values: ['Temperature', 'Pressure'] }, + { name: 'Value', type: FieldType.number, values: [10, 200] }, + { name: 'Unit', type: FieldType.string, values: ['degree', 'pressurebar'] }, + { name: 'Miiin', type: FieldType.number, values: [3, 100] }, + { name: 'max', type: FieldType.string, values: [15, 200] }, + ], + refId: 'A', +}); + +const mockOnChange = jest.fn(); + +const props: Props = { + input: [input], + onChange: mockOnChange, + options: { + mappings: [], + }, +}; + +const setup = (testProps?: Partial) => { + const editorProps = { ...props, ...testProps }; + return render(); +}; + +describe('ConfigFromQueryTransformerEditor', () => { + it('Should be able to select config frame by refId', async () => { + setup(); + + let select = (await screen.findByText('Config query')).nextSibling!; + await fireEvent.keyDown(select, { keyCode: 40 }); + await selectOptionInTest(select as HTMLElement, 'A'); + + expect(mockOnChange).toHaveBeenCalledWith( + expect.objectContaining({ + configRefId: 'A', + }) + ); + }); +}); diff --git a/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx b/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx new file mode 100644 index 00000000..1a0a8303 --- /dev/null +++ b/public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx @@ -0,0 +1,166 @@ +import React from 'react'; +import { + FieldMatcherID, + GrafanaTheme2, + PluginState, + SelectableValue, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; +import { configFromDataTransformer, ConfigFromQueryTransformOptions } from './configFromQuery'; +import { fieldMatchersUI, InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui'; +import { FieldToConfigMappingEditor } from '../fieldToConfigMapping/FieldToConfigMappingEditor'; +import { css } from '@emotion/css'; + +export interface Props extends TransformerUIProps {} + +export function ConfigFromQueryTransformerEditor({ input, onChange, options }: Props) { + const styles = useStyles2(getStyles); + + const refIds = input + .map((x) => x.refId) + .filter((x) => x != null) + .map((x) => ({ label: x, value: x })); + + const currentRefId = options.configRefId || 'config'; + const currentMatcher = options.applyTo ?? { id: FieldMatcherID.byType, options: 'number' }; + const matcherUI = fieldMatchersUI.get(currentMatcher.id); + const configFrame = input.find((x) => x.refId === currentRefId); + + const onRefIdChange = (value: SelectableValue) => { + onChange({ + ...options, + configRefId: value.value || 'config', + }); + }; + + const onMatcherChange = (value: SelectableValue) => { + onChange({ ...options, applyTo: { id: value.value! } }); + }; + + const onMatcherConfigChange = (matcherOption: any) => { + onChange({ ...options, applyTo: { id: currentMatcher.id, options: matcherOption } }); + }; + + const matchers = fieldMatchersUI + .list() + .filter((o) => !o.excludeFromPicker) + .map>((i) => ({ label: i.name, value: i.id, description: i.description })); + + return ( + <> + + + + + + + + + + + + {configFrame && ( + onChange({ ...options, mappings })} + withReducers + /> + )} + + + ); +} + +export const configFromQueryTransformRegistryItem: TransformerRegistryItem = { + id: configFromDataTransformer.id, + editor: ConfigFromQueryTransformerEditor, + transformation: configFromDataTransformer, + name: configFromDataTransformer.name, + description: configFromDataTransformer.description, + state: PluginState.beta, + help: ` +### Use cases + +This transformation allows you select one query and from it extract standard options such as +**Min**, **Max**, **Unit**, and **Thresholds** and apply them to other query results. +This enables dynamic query driven visualization configuration. + +### Options + +- **Config query**: Selet the query that returns the data you want to use as configuration. +- **Apply to**: Select what fields or series to apply the configuration to. +- **Apply to options**: Usually a field type or field name regex depending on what option you selected in **Apply to**. + +### Field mapping table + +Below the configuration listed above you will find the field table. Here all fields found in the data returned by the config query will be listed along with a **Use as** and **Select** option. This table gives you control over what field should be mapped to which config property and if there are multiple rows which value to select. + +## Example + +Input[0] (From query: A, name: ServerA) + +| Time | Value | +| ------------- | ----- | +| 1626178119127 | 10 | +| 1626178119129 | 30 | + +Input[1] (From query: B) + +| Time | Value | +| ------------- | ----- | +| 1626178119127 | 100 | +| 1626178119129 | 100 | + +Output (Same as Input[0] but now with config on the Value field) + +| Time | Value (config: Max=100) | +| ------------- | ----------------------- | +| 1626178119127 | 10 | +| 1626178119129 | 30 | + +Each row in the source data becomes a separate field. Each field now also has a maximum +configuration option set. Options such as **min**, **max**, **unit**, and **thresholds** are all part of field configuration, and if they are set like this, they will be used by the visualization instead of any options that are manually configured. +in the panel editor options pane. + +## Value mappings + +You can also transform a query result into value mappings. This is is a bit different because every +row in the configuration query result is used to define a single value mapping row. See the following example. + +Config query result: + +| Value | Text | Color | +| ----- | ------ | ----- | +| L | Low | blue | +| M | Medium | green | +| H | High | red | + +In the field mapping specify: + +| Field | Use as | Select | +| ----- | ----------------------- | ---------- | +| Value | Value mappings / Value | All values | +| Text | Value mappings / Text | All values | +| Color | Value mappings / Ciolor | All values | + +Grafana will build the value mappings from you query result and apply it the the real data query results. You should see values being mapped and colored according to the config query results. +`, +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + matcherOptions: css` + min-width: 404px; + `, +}); diff --git a/public/app/core/components/TransformersUI/configFromQuery/configFromQuery.test.ts b/public/app/core/components/TransformersUI/configFromQuery/configFromQuery.test.ts new file mode 100644 index 00000000..99ecd9e9 --- /dev/null +++ b/public/app/core/components/TransformersUI/configFromQuery/configFromQuery.test.ts @@ -0,0 +1,157 @@ +import { toDataFrame, FieldType, ReducerID } from '@grafana/data'; +import { FieldConfigHandlerKey } from '../fieldToConfigMapping/fieldToConfigMapping'; +import { extractConfigFromQuery, ConfigFromQueryTransformOptions } from './configFromQuery'; + +describe('config from data', () => { + const config = toDataFrame({ + fields: [ + { name: 'Time', type: FieldType.time, values: [1, 2] }, + { name: 'Max', type: FieldType.number, values: [1, 10, 50] }, + { name: 'Min', type: FieldType.number, values: [1, 10, 5] }, + { name: 'Names', type: FieldType.string, values: ['first-name', 'middle', 'last-name'] }, + ], + refId: 'A', + }); + + const seriesA = toDataFrame({ + fields: [ + { name: 'Time', type: FieldType.time, values: [1, 2, 3] }, + { + name: 'Value', + type: FieldType.number, + values: [2, 3, 4], + config: { displayName: 'SeriesA' }, + }, + ], + }); + + it('Select and apply with two frames and default mappings and reducer', () => { + const options: ConfigFromQueryTransformOptions = { + configRefId: 'A', + mappings: [], + }; + + const results = extractConfigFromQuery(options, [config, seriesA]); + expect(results.length).toBe(1); + expect(results[0].fields[1].config.max).toBe(50); + expect(results[0].fields[1].config.min).toBe(5); + }); + + it('Can apply to config frame if there is only one frame', () => { + const options: ConfigFromQueryTransformOptions = { + configRefId: 'A', + mappings: [], + }; + + const results = extractConfigFromQuery(options, [config]); + expect(results.length).toBe(1); + expect(results[0].fields[1].name).toBe('Max'); + expect(results[0].fields[1].config.max).toBe(50); + }); + + it('With ignore mappings', () => { + const options: ConfigFromQueryTransformOptions = { + configRefId: 'A', + mappings: [{ fieldName: 'Min', handlerKey: FieldConfigHandlerKey.Ignore }], + }; + + const results = extractConfigFromQuery(options, [config, seriesA]); + expect(results.length).toBe(1); + expect(results[0].fields[1].config.min).toEqual(undefined); + expect(results[0].fields[1].config.max).toEqual(50); + }); + + it('With custom mappings', () => { + const options: ConfigFromQueryTransformOptions = { + configRefId: 'A', + mappings: [{ fieldName: 'Min', handlerKey: 'decimals' }], + }; + + const results = extractConfigFromQuery(options, [config, seriesA]); + expect(results.length).toBe(1); + expect(results[0].fields[1].config.decimals).toBe(5); + }); + + it('With custom reducer', () => { + const options: ConfigFromQueryTransformOptions = { + configRefId: 'A', + mappings: [{ fieldName: 'Max', handlerKey: 'max', reducerId: ReducerID.min }], + }; + + const results = extractConfigFromQuery(options, [config, seriesA]); + expect(results.length).toBe(1); + expect(results[0].fields[1].config.max).toBe(1); + }); + + it('With custom matcher and displayName mapping', () => { + const options: ConfigFromQueryTransformOptions = { + configRefId: 'A', + mappings: [{ fieldName: 'Names', handlerKey: 'displayName', reducerId: ReducerID.first }], + applyTo: { id: 'byName', options: 'Value' }, + }; + + const results = extractConfigFromQuery(options, [config, seriesA]); + expect(results.length).toBe(1); + expect(results[0].fields[1].config.displayName).toBe('first-name'); + }); +}); + +describe('value mapping from data', () => { + const config = toDataFrame({ + fields: [ + { name: 'value', type: FieldType.number, values: [1, 2, 3] }, + { name: 'text', type: FieldType.string, values: ['one', 'two', 'three'] }, + { name: 'color', type: FieldType.string, values: ['red', 'blue', 'green'] }, + ], + refId: 'config', + }); + + const seriesA = toDataFrame({ + fields: [ + { name: 'Time', type: FieldType.time, values: [1, 2, 3] }, + { + name: 'Value', + type: FieldType.number, + values: [1, 2, 3], + config: {}, + }, + ], + }); + + it('Should take all field values and map to value mappings', () => { + const options: ConfigFromQueryTransformOptions = { + configRefId: 'config', + mappings: [ + { fieldName: 'value', handlerKey: 'mappings.value' }, + { fieldName: 'color', handlerKey: 'mappings.color' }, + { fieldName: 'text', handlerKey: 'mappings.text' }, + ], + }; + + const results = extractConfigFromQuery(options, [config, seriesA]); + expect(results[0].fields[1].config.mappings).toMatchInlineSnapshot(` + Array [ + Object { + "options": Object { + "1": Object { + "color": "red", + "index": 0, + "text": "one", + }, + "2": Object { + "color": "blue", + "index": 1, + "text": "two", + }, + "3": Object { + "color": "green", + "index": 2, + "text": "three", + }, + }, + "type": "value", + }, + ] + `); + }); +}); diff --git a/public/app/core/components/TransformersUI/configFromQuery/configFromQuery.ts b/public/app/core/components/TransformersUI/configFromQuery/configFromQuery.ts new file mode 100644 index 00000000..3f140f72 --- /dev/null +++ b/public/app/core/components/TransformersUI/configFromQuery/configFromQuery.ts @@ -0,0 +1,105 @@ +import { map } from 'rxjs/operators'; +import { + ArrayVector, + DataFrame, + DataTransformerID, + DataTransformerInfo, + FieldMatcherID, + getFieldDisplayName, + getFieldMatcher, + MatcherConfig, + reduceField, +} from '@grafana/data'; +import { + getFieldConfigFromFrame, + FieldToConfigMapping, + evaluteFieldMappings, +} from '../fieldToConfigMapping/fieldToConfigMapping'; + +export interface ConfigFromQueryTransformOptions { + configRefId?: string; + mappings: FieldToConfigMapping[]; + applyTo?: MatcherConfig; +} + +export function extractConfigFromQuery(options: ConfigFromQueryTransformOptions, data: DataFrame[]) { + let configFrame: DataFrame | null = null; + + for (const frame of data) { + if (frame.refId === options.configRefId) { + configFrame = frame; + break; + } + } + + if (!configFrame) { + return data; + } + + const reducedConfigFrame: DataFrame = { + fields: [], + length: 1, + }; + + const mappingResult = evaluteFieldMappings(configFrame, options.mappings ?? [], false); + + // reduce config frame + for (const field of configFrame.fields) { + const newField = { ...field }; + const fieldName = getFieldDisplayName(field, configFrame); + const fieldMapping = mappingResult.index[fieldName]; + const result = reduceField({ field, reducers: [fieldMapping.reducerId] }); + newField.values = new ArrayVector([result[fieldMapping.reducerId]]); + reducedConfigFrame.fields.push(newField); + } + + const output: DataFrame[] = []; + const matcher = getFieldMatcher(options.applyTo || { id: FieldMatcherID.numeric }); + + for (const frame of data) { + // Skip config frame in output + if (frame === configFrame && data.length > 1) { + continue; + } + + const outputFrame: DataFrame = { + fields: [], + length: frame.length, + }; + + for (const field of frame.fields) { + if (matcher(field, frame, data)) { + const dataConfig = getFieldConfigFromFrame(reducedConfigFrame, 0, mappingResult); + outputFrame.fields.push({ + ...field, + config: { + ...field.config, + ...dataConfig, + }, + }); + } else { + outputFrame.fields.push(field); + } + } + + output.push(outputFrame); + } + + return output; +} + +export const configFromDataTransformer: DataTransformerInfo = { + id: DataTransformerID.configFromData, + name: 'Config from query results', + description: 'Set unit, min, max and more from data', + defaultOptions: { + configRefId: 'config', + mappings: [], + }, + + /** + * Return a modified copy of the series. If the transform is not or should not + * be applied, just return the input series + */ + operator: (options) => (source) => source.pipe(map((data) => extractConfigFromQuery(options, data))), +}; diff --git a/public/app/core/components/TransformersUI/extractFields/ExtractFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/extractFields/ExtractFieldsTransformerEditor.tsx new file mode 100644 index 00000000..d7a868b7 --- /dev/null +++ b/public/app/core/components/TransformersUI/extractFields/ExtractFieldsTransformerEditor.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { + DataTransformerID, + FieldNamePickerConfigSettings, + PluginState, + SelectableValue, + StandardEditorsRegistryItem, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; + +import { InlineField, InlineFieldRow, InlineSwitch, Select } from '@grafana/ui'; +import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker'; +import { ExtractFieldsOptions, extractFieldsTransformer } from './extractFields'; +import { FieldExtractorID, fieldExtractors } from './fieldExtractors'; + +const fieldNamePickerSettings: StandardEditorsRegistryItem = { + settings: { + width: 30, + placeholderText: 'Select field', + }, + name: '', + id: '', + editor: () => null, +}; + +export const extractFieldsTransformerEditor: React.FC> = ({ + input, + options, + onChange, +}) => { + const onPickSourceField = (source?: string) => { + onChange({ + ...options, + source, + }); + }; + + const onFormatChange = (format?: SelectableValue) => { + onChange({ + ...options, + format: format?.value, + }); + }; + + const onToggleReplace = () => { + onChange({ + ...options, + replace: !options.replace, + }); + }; + + const format = fieldExtractors.selectOptions(options.format ? [options.format] : undefined); + + return ( +

+ + + + + + + + onChangeConfigProperty(row, value)} + /> + + {withReducers && ( + + onChangeReducer(row, stats[0] as ReducerID)} + /> + + )} + + ))} + + + ); +} + +interface FieldToConfigRowViewModel { + handlerKey: string | null; + fieldName: string; + configOption: SelectableValue | null; + placeholder?: string; + missingInFrame?: boolean; + reducerId: string; +} + +function getViewModelRows( + frame: DataFrame, + mappings: FieldToConfigMapping[], + withNameAndValue?: boolean +): FieldToConfigRowViewModel[] { + const rows: FieldToConfigRowViewModel[] = []; + const mappingResult = evaluteFieldMappings(frame, mappings ?? [], withNameAndValue); + + for (const field of frame.fields) { + const fieldName = getFieldDisplayName(field, frame); + const mapping = mappingResult.index[fieldName]; + const option = configHandlerToSelectOption(mapping.handler, mapping.automatic); + + rows.push({ + fieldName, + configOption: mapping.automatic ? null : option, + placeholder: mapping.automatic ? option?.label : 'Choose', + handlerKey: mapping.handler?.key ?? null, + reducerId: mapping.reducerId, + }); + } + + // Add rows for mappings that have no matching field + for (const mapping of mappings) { + if (!rows.find((x) => x.fieldName === mapping.fieldName)) { + const handler = findConfigHandlerFor(mapping.handlerKey); + + rows.push({ + fieldName: mapping.fieldName, + handlerKey: mapping.handlerKey, + configOption: configHandlerToSelectOption(handler, false), + missingInFrame: true, + reducerId: mapping.reducerId ?? ReducerID.lastNotNull, + }); + } + } + + return Object.values(rows); +} + +function configHandlerToSelectOption( + def: FieldToConfigMapHandler | null, + isAutomatic: boolean +): SelectableValue | null { + if (!def) { + return null; + } + + let name = def.name ?? capitalize(def.key); + + if (isAutomatic) { + name = `${name} (auto)`; + } + + return { + label: name, + value: def.key, + }; +} + +const getStyles = (theme: GrafanaTheme2) => ({ + table: css` + margin-top: ${theme.spacing(1)}; + + td, + th { + border-right: 4px solid ${theme.colors.background.primary}; + border-bottom: 4px solid ${theme.colors.background.primary}; + white-space: nowrap; + } + th { + font-size: ${theme.typography.bodySmall.fontSize}; + line-height: ${theme.spacing(4)}; + padding: ${theme.spacing(0, 1)}; + } + `, + labelCell: css` + font-size: ${theme.typography.bodySmall.fontSize}; + background: ${theme.colors.background.secondary}; + padding: ${theme.spacing(0, 1)}; + max-width: 400px; + overflow: hidden; + text-overflow: ellipsis; + min-width: 140px; + `, + selectCell: css` + padding: 0; + min-width: 161px; + `, +}); diff --git a/public/app/core/components/TransformersUI/fieldToConfigMapping/fieldToConfigMapping.ts b/public/app/core/components/TransformersUI/fieldToConfigMapping/fieldToConfigMapping.ts new file mode 100644 index 00000000..8795d73c --- /dev/null +++ b/public/app/core/components/TransformersUI/fieldToConfigMapping/fieldToConfigMapping.ts @@ -0,0 +1,344 @@ +import { + anyToNumber, + DataFrame, + FieldColorModeId, + FieldConfig, + getFieldDisplayName, + MappingType, + ReducerID, + ThresholdsMode, + ValueMapping, + ValueMap, + Field, + FieldType, +} from '@grafana/data'; +import { isArray } from 'lodash'; + +export interface FieldToConfigMapping { + fieldName: string; + reducerId?: ReducerID; + handlerKey: string | null; +} + +/** + * Transforms a frame with fields to a map of field configs + * + * Input + * | Unit | Min | Max | + * -------------------------------- + * | Temperature | 0 | 30 | + * | Pressure | 0 | 100 | + * + * Outputs + * { + { min: 0, max: 100 }, + * } + */ + +export function getFieldConfigFromFrame( + frame: DataFrame, + rowIndex: number, + evaluatedMappings: EvaluatedMappingResult +): FieldConfig { + const config: FieldConfig = {}; + const context: FieldToConfigContext = {}; + + for (const field of frame.fields) { + const fieldName = getFieldDisplayName(field, frame); + const mapping = evaluatedMappings.index[fieldName]; + const handler = mapping.handler; + + if (!handler) { + continue; + } + + const configValue = field.values.get(rowIndex); + + if (configValue === null || configValue === undefined) { + continue; + } + + const newValue = handler.processor(configValue, config, context); + if (newValue != null) { + (config as any)[handler.targetProperty ?? handler.key] = newValue; + } + } + + if (context.mappingValues) { + config.mappings = combineValueMappings(context); + } + + return config; +} + +interface FieldToConfigContext { + mappingValues?: any[]; + mappingColors?: string[]; + mappingTexts?: string[]; +} + +type FieldToConfigMapHandlerProcessor = (value: any, config: FieldConfig, context: FieldToConfigContext) => any; + +export interface FieldToConfigMapHandler { + key: string; + targetProperty?: string; + name?: string; + processor: FieldToConfigMapHandlerProcessor; + defaultReducer?: ReducerID; +} + +export enum FieldConfigHandlerKey { + Name = 'field.name', + Value = 'field.value', + Label = 'field.label', + Ignore = '__ignore', +} + +export const configMapHandlers: FieldToConfigMapHandler[] = [ + { + key: FieldConfigHandlerKey.Name, + name: 'Field name', + processor: () => {}, + }, + { + key: FieldConfigHandlerKey.Value, + name: 'Field value', + processor: () => {}, + }, + { + key: FieldConfigHandlerKey.Label, + name: 'Field label', + processor: () => {}, + }, + { + key: FieldConfigHandlerKey.Ignore, + name: 'Ignore', + processor: () => {}, + }, + { + key: 'max', + processor: toNumericOrUndefined, + }, + { + key: 'min', + processor: toNumericOrUndefined, + }, + { + key: 'unit', + processor: (value) => value.toString(), + }, + { + key: 'decimals', + processor: toNumericOrUndefined, + }, + { + key: 'displayName', + name: 'Display name', + processor: (value: any) => value.toString(), + }, + { + key: 'color', + processor: (value) => ({ fixedColor: value, mode: FieldColorModeId.Fixed }), + }, + { + key: 'threshold1', + targetProperty: 'thresholds', + processor: (value, config) => { + const numeric = anyToNumber(value); + + if (isNaN(numeric)) { + return; + } + + if (!config.thresholds) { + config.thresholds = { + mode: ThresholdsMode.Absolute, + steps: [{ value: -Infinity, color: 'green' }], + }; + } + + config.thresholds.steps.push({ + value: numeric, + color: 'red', + }); + + return config.thresholds; + }, + }, + { + key: 'mappings.value', + name: 'Value mappings / Value', + targetProperty: 'mappings', + defaultReducer: ReducerID.allValues, + processor: (value, config, context) => { + if (!isArray(value)) { + return; + } + + context.mappingValues = value; + return config.mappings; + }, + }, + { + key: 'mappings.color', + name: 'Value mappings / Color', + targetProperty: 'mappings', + defaultReducer: ReducerID.allValues, + processor: (value, config, context) => { + if (!isArray(value)) { + return; + } + + context.mappingColors = value; + return config.mappings; + }, + }, + { + key: 'mappings.text', + name: 'Value mappings / Display text', + targetProperty: 'mappings', + defaultReducer: ReducerID.allValues, + processor: (value, config, context) => { + if (!isArray(value)) { + return; + } + + context.mappingTexts = value; + return config.mappings; + }, + }, +]; + +function combineValueMappings(context: FieldToConfigContext): ValueMapping[] { + const valueMap: ValueMap = { + type: MappingType.ValueToText, + options: {}, + }; + + if (!context.mappingValues) { + return []; + } + + for (let i = 0; i < context.mappingValues.length; i++) { + const value = context.mappingValues[i]; + if (value != null) { + valueMap.options[value.toString()] = { + color: context.mappingColors && context.mappingColors[i], + text: context.mappingTexts && context.mappingTexts[i], + index: i, + }; + } + } + + return [valueMap]; +} + +let configMapHandlersIndex: Record | null = null; + +export function getConfigMapHandlersIndex() { + if (configMapHandlersIndex === null) { + configMapHandlersIndex = {}; + for (const def of configMapHandlers) { + configMapHandlersIndex[def.key] = def; + } + } + + return configMapHandlersIndex; +} + +function toNumericOrUndefined(value: any) { + const numeric = anyToNumber(value); + + if (isNaN(numeric)) { + return; + } + + return numeric; +} + +export function getConfigHandlerKeyForField(fieldName: string, mappings: FieldToConfigMapping[]) { + for (const map of mappings) { + if (fieldName === map.fieldName) { + return map.handlerKey; + } + } + + return fieldName.toLowerCase(); +} + +export function lookUpConfigHandler(key: string | null): FieldToConfigMapHandler | null { + if (!key) { + return null; + } + + return getConfigMapHandlersIndex()[key]; +} + +export interface EvaluatedMapping { + automatic: boolean; + handler: FieldToConfigMapHandler | null; + reducerId: ReducerID; +} +export interface EvaluatedMappingResult { + index: Record; + nameField?: Field; + valueField?: Field; +} + +export function evaluteFieldMappings( + frame: DataFrame, + mappings: FieldToConfigMapping[], + withNameAndValue?: boolean +): EvaluatedMappingResult { + const result: EvaluatedMappingResult = { + index: {}, + }; + + // Look up name and value field in mappings + let nameFieldMappping = mappings.find((x) => x.handlerKey === FieldConfigHandlerKey.Name); + let valueFieldMapping = mappings.find((x) => x.handlerKey === FieldConfigHandlerKey.Value); + + for (const field of frame.fields) { + const fieldName = getFieldDisplayName(field, frame); + const mapping = mappings.find((x) => x.fieldName === fieldName); + const key = mapping ? mapping.handlerKey : fieldName.toLowerCase(); + let handler = lookUpConfigHandler(key); + + // Name and value handlers are a special as their auto logic is based on first matching criteria + if (withNameAndValue) { + // If we have a handler it means manually specified field + if (handler) { + if (handler.key === FieldConfigHandlerKey.Name) { + result.nameField = field; + } + if (handler.key === FieldConfigHandlerKey.Value) { + result.valueField = field; + } + } else if (!mapping) { + // We have no name field and no mapping for it, pick first string + if (!result.nameField && !nameFieldMappping && field.type === FieldType.string) { + result.nameField = field; + handler = lookUpConfigHandler(FieldConfigHandlerKey.Name); + } + + if (!result.valueField && !valueFieldMapping && field.type === FieldType.number) { + result.valueField = field; + handler = lookUpConfigHandler(FieldConfigHandlerKey.Value); + } + } + } + + // If no handle and when in name and value mode (Rows to fields) default to labels + if (!handler && withNameAndValue) { + handler = lookUpConfigHandler(FieldConfigHandlerKey.Label); + } + + result.index[fieldName] = { + automatic: !mapping, + handler: handler, + reducerId: mapping?.reducerId ?? handler?.defaultReducer ?? ReducerID.lastNotNull, + }; + } + + return result; +} diff --git a/public/app/core/components/TransformersUI/lookupGazetteer/FieldLookupTransformerEditor.tsx b/public/app/core/components/TransformersUI/lookupGazetteer/FieldLookupTransformerEditor.tsx new file mode 100644 index 00000000..44cad494 --- /dev/null +++ b/public/app/core/components/TransformersUI/lookupGazetteer/FieldLookupTransformerEditor.tsx @@ -0,0 +1,91 @@ +import React, { useCallback } from 'react'; +import { + DataTransformerID, + FieldNamePickerConfigSettings, + PluginState, + StandardEditorsRegistryItem, + TransformerRegistryItem, + TransformerUIProps, +} from '@grafana/data'; + +import { InlineField, InlineFieldRow } from '@grafana/ui'; +import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker'; +import { GazetteerPathEditor } from 'app/plugins/panel/geomap/editor/GazetteerPathEditor'; +import { GazetteerPathEditorConfigSettings } from 'app/plugins/panel/geomap/types'; +import { FieldLookupOptions, fieldLookupTransformer } from './fieldLookup'; +import { FieldType } from '../../../../../../packages/grafana-data/src'; + +const fieldNamePickerSettings: StandardEditorsRegistryItem = { + settings: { + width: 30, + filter: (f) => f.type === FieldType.string, + placeholderText: 'Select text field', + noFieldsMessage: 'No text fields found', + }, + name: '', + id: '', + editor: () => null, +}; + +const fieldLookupSettings: StandardEditorsRegistryItem = { + settings: {}, +} as any; + +export const FieldLookupTransformerEditor: React.FC> = ({ + input, + options, + onChange, +}) => { + const onPickLookupField = useCallback( + (value: string | undefined) => { + onChange({ + ...options, + lookupField: value, + }); + }, + [onChange, options] + ); + + const onPickGazetteer = useCallback( + (value: string | undefined) => { + onChange({ + ...options, + gazetteer: value, + }); + }, + [onChange, options] + ); + return ( +

+ + + + + + + + + + +

+ ); +}; + +export const fieldLookupTransformRegistryItem: TransformerRegistryItem = { + id: DataTransformerID.fieldLookup, + editor: FieldLookupTransformerEditor, + transformation: fieldLookupTransformer, + name: 'Field lookup', + description: `Use a field value to lookup additional fields from an external source. This currently supports spatial data, but will eventually support more formats`, + state: PluginState.alpha, +}; diff --git a/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.test.ts b/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.test.ts new file mode 100644 index 00000000..29be1b69 --- /dev/null +++ b/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.test.ts @@ -0,0 +1,115 @@ +import { FieldMatcherID, fieldMatchers, FieldType } from '@grafana/data'; +import { toDataFrame } from '@grafana/data/src/dataframe/processDataFrame'; +import { DataTransformerID } from '@grafana/data/src/transformations/transformers/ids'; +import { Gazetteer } from 'app/plugins/panel/geomap/gazetteer/gazetteer'; +import { addFieldsFromGazetteer } from './fieldLookup'; + +describe('Lookup gazetteer', () => { + it('adds lat/lon based on string field', async () => { + const cfg = { + id: DataTransformerID.fieldLookup, + options: { + lookupField: 'location', + gazetteer: 'public/gazetteer/usa-states.json', + }, + }; + const data = toDataFrame({ + name: 'locations', + fields: [ + { name: 'location', type: FieldType.string, values: ['AL', 'AK', 'Arizona', 'Arkansas', 'Somewhere'] }, + { name: 'values', type: FieldType.number, values: [0, 10, 5, 1, 5] }, + ], + }); + + const matcher = fieldMatchers.get(FieldMatcherID.byName).get(cfg.options?.lookupField); + + const values = new Map() + .set('AL', { name: 'Alabama', id: 'AL', coords: [-80.891064, 12.448457] }) + .set('AK', { name: 'Arkansas', id: 'AK', coords: [-100.891064, 24.448457] }) + .set('AZ', { name: 'Arizona', id: 'AZ', coords: [-111.891064, 33.448457] }) + .set('Arizona', { name: 'Arizona', id: 'AZ', coords: [-111.891064, 33.448457] }); + + const gaz: Gazetteer = { + count: 3, + examples: () => ['AL', 'AK', 'AZ'], + find: (k) => { + let v = values.get(k); + if (!v && typeof k === 'string') { + v = values.get(k.toUpperCase()); + } + return v; + }, + path: 'public/gazetteer/usa-states.json', + }; + + expect(await addFieldsFromGazetteer([data], gaz, matcher)).toMatchInlineSnapshot(` + Array [ + Object { + "creator": [Function], + "fields": Array [ + Object { + "config": Object {}, + "name": "location", + "type": "string", + "values": Array [ + "AL", + "AK", + "Arizona", + "Arkansas", + "Somewhere", + ], + }, + Object { + "config": Object {}, + "name": "lon", + "type": "number", + "values": Array [ + -80.891064, + -100.891064, + -111.891064, + , + , + ], + }, + Object { + "config": Object {}, + "name": "lat", + "type": "number", + "values": Array [ + 12.448457, + 24.448457, + 33.448457, + , + , + ], + }, + Object { + "config": Object {}, + "name": "values", + "state": Object { + "displayName": "values", + }, + "type": "number", + "values": Array [ + 0, + 10, + 5, + 1, + 5, + ], + }, + ], + "first": Array [ + "AL", + "AK", + "Arizona", + "Arkansas", + "Somewhere", + ], + "length": 5, + "name": "locations", + }, + ] + `); + }); +}); diff --git a/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.ts b/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.ts new file mode 100644 index 00000000..9c42db91 --- /dev/null +++ b/public/app/core/components/TransformersUI/lookupGazetteer/fieldLookup.ts @@ -0,0 +1,69 @@ +import { + ArrayVector, + DataFrame, + DataTransformerID, + Field, + FieldMatcher, + FieldMatcherID, + fieldMatchers, + FieldType, + DataTransformerInfo, +} from '@grafana/data'; +import { COUNTRIES_GAZETTEER_PATH, Gazetteer, getGazetteer } from 'app/plugins/panel/geomap/gazetteer/gazetteer'; +import { mergeMap, from } from 'rxjs'; + +export interface FieldLookupOptions { + lookupField?: string; + gazetteer?: string; +} + +export const fieldLookupTransformer: DataTransformerInfo = { + id: DataTransformerID.fieldLookup, + name: 'Lookup fields from resource', + description: 'Retrieve matching data based on specified field', + defaultOptions: {}, + + operator: (options) => (source) => source.pipe(mergeMap((data) => from(doGazetteerXform(data, options)))), +}; + +async function doGazetteerXform(frames: DataFrame[], options: FieldLookupOptions): Promise { + const fieldMatches = fieldMatchers.get(FieldMatcherID.byName).get(options?.lookupField); + + const gaz = await getGazetteer(options?.gazetteer ?? COUNTRIES_GAZETTEER_PATH); + + return addFieldsFromGazetteer(frames, gaz, fieldMatches); +} + +export function addFieldsFromGazetteer(frames: DataFrame[], gaz: Gazetteer, matcher: FieldMatcher): DataFrame[] { + return frames.map((frame) => { + const fields: Field[] = []; + + for (const field of frame.fields) { + fields.push(field); + + //if the field matches + if (matcher(field, frame, frames)) { + const values = field.values.toArray(); + const lat = new Array(values.length); + const lon = new Array(values.length); + + //for each value find the corresponding value in the gazetteer + for (let v = 0; v < values.length; v++) { + const foundMatchingValue = gaz.find(values[v]); + + //for now start by adding lat and lon + if (foundMatchingValue && foundMatchingValue?.coords.length) { + lon[v] = foundMatchingValue.coords[0]; + lat[v] = foundMatchingValue.coords[1]; + } + } + fields.push({ name: 'lon', type: FieldType.number, values: new ArrayVector(lon), config: {} }); + fields.push({ name: 'lat', type: FieldType.number, values: new ArrayVector(lat), config: {} }); + } + } + return { + ...frame, + fields, + }; + }); +} diff --git a/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx b/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx new file mode 100644 index 00000000..fc31ff43 --- /dev/null +++ b/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx @@ -0,0 +1,109 @@ +import React, { useCallback } from 'react'; +import { GrafanaTheme2, SelectableValue, TransformerRegistryItem, TransformerUIProps } from '@grafana/data'; +import { prepareTimeSeriesTransformer, PrepareTimeSeriesOptions, timeSeriesFormat } from './prepareTimeSeries'; +import { InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui'; +import { css } from '@emotion/css'; + +const wideInfo = { + label: 'Wide time series', + value: timeSeriesFormat.TimeSeriesWide, + description: 'Creates a single frame joined by time', + info: ( +

Single frame
1st field is shared time field
Time in ascending order
Multiple value fields of any type

+ ), +}; + +const manyInfo = { + label: 'Multi-frame time series', + value: timeSeriesFormat.TimeSeriesMany, + description: 'Creates a new frame for each time/number pair', + info: ( +

Multiple frames
Each frame has two fields: time, value
Time in ascending order
String values are represented as labels
All values are numeric

+ ), +}; + +const longInfo = { + label: 'Long time series', + value: timeSeriesFormat.TimeSeriesLong, + description: 'Convert each frame to long format', + info: ( +

Single frame
1st field is time field
Time in ascending order, but may have duplictes
String values are represented as separate fields rather than as labels
Multiple value fields may exist

+ ), +}; + +const formats: Array> = [wideInfo, manyInfo, longInfo]; + +export function PrepareTimeSeriesEditor(props: TransformerUIProps): React.ReactElement { + const { options, onChange } = props; + const styles = useStyles2(getStyles); + + const onSelectFormat = useCallback( + (value: SelectableValue) => { + onChange({ + ...options, + format: value.value!, + }); + }, + [onChange, options] + ); + + return ( + <> + + + + + + + )} + + )} + +

+ Organization users + {!canReadUsers && renderMissingUserListRightsMessage()} + {canReadUsers && !!users.length && ( + { + updateOrgUserRole({ ...orgUser, role }, orgId); + setUsers( + users.map((user) => { + if (orgUser.userId === user.userId) { + return { ...orgUser, role }; + } + return user; + }) + ); + fetchOrgUsers(); + }} + onRemoveUser={(orgUser) => { + removeOrgUser(orgUser, orgId); + setUsers(users.filter((user) => orgUser.userId !== user.userId)); + fetchOrgUsers(); + }} + /> + )} +

+ + + + ); +}; + +export default AdminEditOrgPage; diff --git a/public/app/features/admin/AdminListOrgsPage.tsx b/public/app/features/admin/AdminListOrgsPage.tsx new file mode 100644 index 00000000..925b62b5 --- /dev/null +++ b/public/app/features/admin/AdminListOrgsPage.tsx @@ -0,0 +1,61 @@ +import React, { FC, useEffect } from 'react'; +import { getNavModel } from 'app/core/selectors/navModel'; +import Page from 'app/core/components/Page/Page'; +import { useSelector } from 'react-redux'; +import { StoreState } from 'app/types/store'; +import { LinkButton } from '@grafana/ui'; +import { getBackendSrv } from '@grafana/runtime'; +import { AdminOrgsTable } from './AdminOrgsTable'; +import useAsyncFn from 'react-use/lib/useAsyncFn'; +import { contextSrv } from 'app/core/services/context_srv'; +import { AccessControlAction } from 'app/types'; + +const deleteOrg = async (orgId: number) => { + return await getBackendSrv().delete('/api/orgs/' + orgId); +}; + +const getOrgs = async () => { + return await getBackendSrv().get('/api/orgs'); +}; + +const getErrorMessage = (error: any) => { + return error?.data?.message || 'An unexpected error happened.'; +}; + +export const AdminListOrgsPages: FC = () => { + const navIndex = useSelector((state: StoreState) => state.navIndex); + const navModel = getNavModel(navIndex, 'global-orgs'); + const [state, fetchOrgs] = useAsyncFn(async () => await getOrgs(), []); + const canCreateOrg = contextSrv.hasPermission(AccessControlAction.OrgsCreate); + + useEffect(() => { + fetchOrgs(); + }, [fetchOrgs]); + + return ( + + + <> +

+ + New org + +

+ {state.error && getErrorMessage(state.error)} + {state.loading && 'Fetching organizations'} + {state.value && ( + { + deleteOrg(orgId).then(() => fetchOrgs()); + }} + /> + )} + + + + ); +}; + +export default AdminListOrgsPages; diff --git a/public/app/features/admin/AdminOrgsTable.tsx b/public/app/features/admin/AdminOrgsTable.tsx new file mode 100644 index 00000000..ab290859 --- /dev/null +++ b/public/app/features/admin/AdminOrgsTable.tsx @@ -0,0 +1,67 @@ +import React, { FC, useState } from 'react'; +import { AccessControlAction, Organization } from 'app/types'; +import { Button, ConfirmModal } from '@grafana/ui'; +import { contextSrv } from 'app/core/core'; + +interface Props { + orgs: Organization[]; + onDelete: (orgId: number) => void; +} + +export const AdminOrgsTable: FC = ({ orgs, onDelete }) => { + const canDeleteOrgs = contextSrv.hasPermission(AccessControlAction.OrgsDelete); + + const [deleteOrg, setDeleteOrg] = useState(); + return ( + + + + + + + + + + {orgs.map((org) => ( + + + + + + ))} + + {deleteOrg && ( + + Are you sure you want to delete '{deleteOrg.name}'? +
All dashboards for this organization will be removed! + + } + confirmText="Delete" + onDismiss={() => setDeleteOrg(undefined)} + onConfirm={() => { + onDelete(deleteOrg.id); + setDeleteOrg(undefined); + }} + /> + )} +

ID	Name
+ {org.id} +	+ {org.name} +	+

+ ); +}; diff --git a/public/app/features/admin/AdminSettings.tsx b/public/app/features/admin/AdminSettings.tsx new file mode 100644 index 00000000..d6b8a2d3 --- /dev/null +++ b/public/app/features/admin/AdminSettings.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { getBackendSrv } from '@grafana/runtime'; +import { NavModel } from '@grafana/data'; + +import { StoreState } from 'app/types'; +import { getNavModel } from 'app/core/selectors/navModel'; +import Page from 'app/core/components/Page/Page'; + +type Settings = { [key: string]: { [key: string]: string } }; + +interface Props { + navModel: NavModel; +} + +interface State { + settings: Settings; + isLoading: boolean; +} + +export class AdminSettings extends React.PureComponent { + state: State = { + settings: {}, + isLoading: true, + }; + + async componentDidMount() { + const settings: Settings = await getBackendSrv().get('/api/admin/settings'); + this.setState({ + settings, + isLoading: false, + }); + } + + render() { + const { settings, isLoading } = this.state; + const { navModel } = this.props; + + return ( + + +

+ These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change + these you currently need to restart Grafana. +

+ + + + {Object.entries(settings).map(([sectionName, sectionSettings], i) => ( + + + + + {Object.entries(sectionSettings).map(([settingName, settingValue], j) => ( + + + + + ))} + + ))} + +

{sectionName}	+
{settingName}	{settingValue}

+ + + ); + } +} + +const mapStateToProps = (state: StoreState) => ({ + navModel: getNavModel(state.navIndex, 'server-settings'), +}); + +export default connect(mapStateToProps)(AdminSettings); diff --git a/public/app/features/admin/LicenseChrome.tsx b/public/app/features/admin/LicenseChrome.tsx new file mode 100644 index 00000000..ed6b89a2 --- /dev/null +++ b/public/app/features/admin/LicenseChrome.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { stylesFactory, useTheme } from '@grafana/ui'; +import { css } from '@emotion/css'; +import { GrafanaTheme } from '@grafana/data'; + +const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' }; + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + const backgroundUrl = theme.isDark ? 'public/img/licensing/header_dark.svg' : 'public/img/licensing/header_light.svg'; + const footerBg = theme.isDark ? theme.palette.dark9 : theme.palette.gray6; + + return { + container: css` + padding: 36px 79px; + background: ${theme.colors.panelBg}; + `, + footer: css` + text-align: center; + padding: 16px; + background: ${footerBg}; + `, + header: css` + height: 137px; + padding: 40px 0 0 79px; + position: relative; + background: url('${backgroundUrl}') right; + `, + }; +}); + +interface Props { + header: string; + subheader?: string; + editionNotice?: string; +} + +export const LicenseChrome: React.FC = ({ header, editionNotice, subheader, children }) => { + const theme = useTheme(); + const styles = getStyles(theme); + + return ( + <> +

{header}

+ {subheader &&

{subheader}

} + + + Grafana

+ +

{children}

+ + {editionNotice &&

{editionNotice}

} + + ); +}; + +interface CircleProps { + size: string; + style?: React.CSSProperties; +} + +export const Circle: React.FC = ({ size, style, children }) => { + return ( +

+ {children} +

+ ); +}; diff --git a/public/app/features/admin/OrgRolePicker.tsx b/public/app/features/admin/OrgRolePicker.tsx new file mode 100644 index 00000000..0335f827 --- /dev/null +++ b/public/app/features/admin/OrgRolePicker.tsx @@ -0,0 +1,37 @@ +import React, { FC } from 'react'; +import { OrgRole } from '@grafana/data'; +import { Select } from '@grafana/ui'; + +interface Props { + value: OrgRole; + disabled?: boolean; + 'aria-label'?: string; + inputId?: string; + onChange: (role: OrgRole) => void; + autoFocus?: boolean; +} + +const options = Object.keys(OrgRole).map((key) => ({ label: key, value: key })); + +export const OrgRolePicker: FC = ({ + value, + onChange, + 'aria-label': ariaLabel, + inputId, + autoFocus, + ...restProps +}) => { + return ( + + + + + + + + + + + + value.trim() !== '' && value.length >= 4, + })} + type="password" + /> + + + + ); + }} + + + + ); +}; + +const mapStateToProps = (state: StoreState) => ({ + navModel: getNavModel(state.navIndex, 'global-users'), +}); + +export default connect(mapStateToProps)(UserCreatePage); diff --git a/public/app/features/admin/UserLdapSyncInfo.tsx b/public/app/features/admin/UserLdapSyncInfo.tsx new file mode 100644 index 00000000..6ba53378 --- /dev/null +++ b/public/app/features/admin/UserLdapSyncInfo.tsx @@ -0,0 +1,77 @@ +import React, { PureComponent } from 'react'; +import { dateTimeFormat } from '@grafana/data'; +import { AccessControlAction, SyncInfo, UserDTO } from 'app/types'; +import { Button, LinkButton } from '@grafana/ui'; +import { contextSrv } from 'app/core/core'; + +interface Props { + ldapSyncInfo: SyncInfo; + user: UserDTO; + onUserSync: () => void; +} + +interface State {} + +const format = 'dddd YYYY-MM-DD HH:mm zz'; +const debugLDAPMappingBaseURL = '/admin/ldap'; + +export class UserLdapSyncInfo extends PureComponent { + onUserSync = () => { + this.props.onUserSync(); + }; + + render() { + const { ldapSyncInfo, user } = this.props; + const nextSyncSuccessful = ldapSyncInfo && ldapSyncInfo.nextSync; + const nextSyncTime = nextSyncSuccessful ? dateTimeFormat(ldapSyncInfo.nextSync, { format }) : ''; + const debugLDAPMappingURL = `${debugLDAPMappingBaseURL}?user=${user && user.login}`; + const canReadLDAPUser = contextSrv.hasPermission(AccessControlAction.LDAPUsersRead); + const canSyncLDAPUser = contextSrv.hasPermission(AccessControlAction.LDAPUsersSync); + + return ( + <> +

LDAP Synchronisation

+ + + + + + + + + {ldapSyncInfo.enabled ? ( + <> + + + + ) : ( + <> + + + + )} + + +

External sync	User synced via LDAP. Some changes must be done in LDAP or mappings.	+ LDAP +
Next scheduled synchronization	{nextSyncTime}	Next scheduled synchronization	Not enabled

+ {canSyncLDAPUser && ( + + )} + {canReadLDAPUser && ( + + Debug LDAP Mapping + + )} +

+ + ); + } +} diff --git a/public/app/features/admin/UserListAdminPage.tsx b/public/app/features/admin/UserListAdminPage.tsx new file mode 100644 index 00000000..dfb7864c --- /dev/null +++ b/public/app/features/admin/UserListAdminPage.tsx @@ -0,0 +1,352 @@ +import React, { ComponentType, useEffect, useMemo, memo } from 'react'; +import { css, cx } from '@emotion/css'; +import { connect, ConnectedProps } from 'react-redux'; +import { + Icon, + IconName, + LinkButton, + Pagination, + RadioButtonGroup, + Tooltip, + useStyles2, + FilterInput, +} from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import Page from 'app/core/components/Page/Page'; +import { TagBadge } from 'app/core/components/TagFilter/TagBadge'; +import { contextSrv } from 'app/core/core'; +import { getNavModel } from '../../core/selectors/navModel'; +import { AccessControlAction, StoreState, Unit, UserDTO, UserFilter } from '../../types'; +import { changeFilter, changePage, changeQuery, fetchUsers } from './state/actions'; +import PageLoader from '../../core/components/PageLoader/PageLoader'; + +export interface FilterProps { + filters: UserFilter[]; + onChange: (filter: any) => void; + className?: string; +} +const extraFilters: Array> = []; +export const addExtraFilters = (filter: ComponentType) => { + extraFilters.push(filter); +}; + +const mapDispatchToProps = { + fetchUsers, + changeQuery, + changePage, + changeFilter, +}; + +const mapStateToProps = (state: StoreState) => ({ + navModel: getNavModel(state.navIndex, 'global-users'), + users: state.userListAdmin.users, + query: state.userListAdmin.query, + showPaging: state.userListAdmin.showPaging, + totalPages: state.userListAdmin.totalPages, + page: state.userListAdmin.page, + filters: state.userListAdmin.filters, + isLoading: state.userListAdmin.isLoading, +}); + +const connector = connect(mapStateToProps, mapDispatchToProps); + +interface OwnProps {} + +type Props = OwnProps & ConnectedProps; + +const UserListAdminPageUnConnected: React.FC = ({ + fetchUsers, + navModel, + query, + changeQuery, + users, + showPaging, + totalPages, + page, + changePage, + changeFilter, + filters, + isLoading, +}) => { + const styles = useStyles2(getStyles); + + useEffect(() => { + fetchUsers(); + }, [fetchUsers]); + + const showLicensedRole = useMemo(() => users.some((user) => user.licensedRole), [users]); + + return ( + + +

+ + changeFilter({ name: 'activeLast30Days', value })} + value={filters.find((f) => f.name === 'activeLast30Days')?.value} + className={styles.filter} + /> + {extraFilters.map((FilterComponent, index) => ( + + ))} +

+ {contextSrv.hasPermission(AccessControlAction.UsersCreate) && ( + + New user + + )} +

+ {isLoading ? ( + + ) : ( + <> +

+ + + + + + + + + {showLicensedRole && ( + + )} + + + + + + {users.map((user) => ( + + ))} + +

	Login	Email	Name	Belongs to	+ Licensed role{' '} + + Licensed role is based on a user's Org role (i.e. Viewer, Editor, Admin) and their + dashboard/folder permissions.{' '} + + Learn more + + + } + > + + +	+ Last active + + + +

+ {showPaging && } + + )} + + + ); +}; + +const getUsersAriaLabel = (name: string) => { + return `Edit user's ${name} details`; +}; + +type UserListItemProps = { + user: UserDTO; + showLicensedRole: boolean; +}; + +const UserListItem = memo(({ user, showLicensedRole }: UserListItemProps) => { + const styles = useStyles2(getStyles); + const editUrl = `admin/users/edit/${user.id}`; + + return ( + + + +

+ + + + + {user.login} + + + + + {user.email} + + + + + {user.name} + + + + org.name).join(',')}` + : undefined + } + > + + {user.isAdmin && ( + + + + + + )} + + {showLicensedRole && ( + + + {user.licensedRole === 'None' ? ( + + Not assigned{' '} + + + + + ) : ( + user.licensedRole + )} + + + )} + + {user.lastSeenAtAge && ( + + {user.lastSeenAtAge === '10 years' ? Never : user.lastSeenAtAge} + + )} + + + {Array.isArray(user.authLabels) && user.authLabels.length > 0 && ( + + )} + + + {user.isDisabled && Disabled} + + + ); +}); + +UserListItem.displayName = 'UserListItem'; + +type OrgUnitProps = { units?: Unit[]; icon: IconName }; + +const OrgUnits = ({ units, icon }: OrgUnitProps) => { + const styles = useStyles2(getStyles); + + if (!units?.length) { + return null; + } + + return units.length > 1 ? ( + + {units?.map((unit) => ( + + {unit.name} + + ))} +

+ } + > +

+ {units.length} +

+ + ) : ( + + {units[0].name} + + ); +}; + +const getStyles = (theme: GrafanaTheme2) => { + return { + table: css` + margin-top: ${theme.spacing(3)}; + `, + filter: css` + margin: 0 ${theme.spacing(1)}; + `, + iconRow: css` + svg { + margin-left: ${theme.spacing(0.5)}; + } + `, + row: css` + display: flex; + align-items: center; + height: 100% !important; + + a { + padding: ${theme.spacing(0.5)} 0 !important; + } + `, + unitTooltip: css` + display: flex; + flex-direction: column; + `, + unitItem: css` + cursor: pointer; + padding: ${theme.spacing(0.5)} 0; + margin-right: ${theme.spacing(1)}; + `, + disabled: css` + color: ${theme.colors.text.disabled}; + `, + link: css` + color: inherit; + cursor: pointer; + text-decoration: underline; + `, + }; +}; + +export default connector(UserListAdminPageUnConnected); diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx new file mode 100644 index 00000000..8cff0b30 --- /dev/null +++ b/public/app/features/admin/UserOrgs.tsx @@ -0,0 +1,421 @@ +import React, { PureComponent, ReactElement } from 'react'; +import { css, cx } from '@emotion/css'; +import { + Button, + ConfirmButton, + Field, + HorizontalGroup, + Icon, + Modal, + stylesFactory, + Themeable, + Tooltip, + useStyles2, + useTheme, + withTheme, +} from '@grafana/ui'; +import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data'; +import { AccessControlAction, Organization, OrgRole, UserDTO, UserOrg } from 'app/types'; +import { OrgPicker, OrgSelectItem } from 'app/core/components/Select/OrgPicker'; +import { OrgRolePicker } from './OrgRolePicker'; +import { contextSrv } from 'app/core/core'; +import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker'; + +interface Props { + orgs: UserOrg[]; + user?: UserDTO; + isExternalUser?: boolean; + + onOrgRemove: (orgId: number) => void; + onOrgRoleChange: (orgId: number, newRole: OrgRole) => void; + onOrgAdd: (orgId: number, role: OrgRole) => void; +} + +interface State { + showAddOrgModal: boolean; +} + +export class UserOrgs extends PureComponent { + addToOrgButtonRef = React.createRef(); + state = { + showAddOrgModal: false, + }; + + showOrgAddModal = () => { + this.setState({ showAddOrgModal: true }); + }; + + dismissOrgAddModal = () => { + this.setState({ showAddOrgModal: false }, () => { + this.addToOrgButtonRef.current?.focus(); + }); + }; + + render() { + const { user, orgs, isExternalUser, onOrgRoleChange, onOrgRemove, onOrgAdd } = this.props; + const { showAddOrgModal } = this.state; + const addToOrgContainerClass = css` + margin-top: 0.8rem; + `; + const canAddToOrg = contextSrv.hasPermission(AccessControlAction.OrgUsersAdd); + return ( + <> +

Organizations

+ + + {orgs.map((org, index) => ( + + ))} + +

+ {canAddToOrg && ( + + )} +

+ +

+ + ); + } +} + +const getOrgRowStyles = stylesFactory((theme: GrafanaTheme) => { + return { + removeButton: css` + margin-right: 0.6rem; + text-decoration: underline; + color: ${theme.palette.blue95}; + `, + label: css` + font-weight: 500; + `, + disabledTooltip: css` + display: flex; + `, + tooltipItem: css` + margin-left: 5px; + `, + tooltipItemLink: css` + color: ${theme.palette.blue95}; + `, + rolePickerWrapper: css` + display: flex; + `, + rolePicker: css` + flex: auto; + margin-right: ${theme.spacing.sm}; + `, + }; +}); + +interface OrgRowProps extends Themeable { + user?: UserDTO; + org: UserOrg; + isExternalUser?: boolean; + onOrgRemove: (orgId: number) => void; + onOrgRoleChange: (orgId: number, newRole: OrgRole) => void; +} + +class UnThemedOrgRow extends PureComponent { + state = { + currentRole: this.props.org.role, + isChangingRole: false, + }; + + onOrgRemove = () => { + const { org } = this.props; + this.props.onOrgRemove(org.orgId); + }; + + onChangeRoleClick = () => { + const { org } = this.props; + this.setState({ isChangingRole: true, currentRole: org.role }); + }; + + onOrgRoleChange = (newRole: OrgRole) => { + this.setState({ currentRole: newRole }); + }; + + onOrgRoleSave = () => { + this.props.onOrgRoleChange(this.props.org.orgId, this.state.currentRole); + }; + + onCancelClick = () => { + this.setState({ isChangingRole: false }); + }; + + onBuiltinRoleChange = (newRole: OrgRole) => { + this.props.onOrgRoleChange(this.props.org.orgId, newRole); + }; + + render() { + const { user, org, isExternalUser, theme } = this.props; + const { currentRole, isChangingRole } = this.state; + const styles = getOrgRowStyles(theme); + const labelClass = cx('width-16', styles.label); + const canChangeRole = contextSrv.hasPermission(AccessControlAction.OrgUsersRoleUpdate); + const canRemoveFromOrg = contextSrv.hasPermission(AccessControlAction.OrgUsersRemove); + const rolePickerDisabled = isExternalUser || !canChangeRole; + + const inputId = `${org.name}-input`; + return ( + + + {org.name} + + {contextSrv.accessControlEnabled() ? ( + +

+ +

+ {isExternalUser && } +

+ + ) : ( + <> + {isChangingRole ? ( + + + + ) : ( + {org.role} + )} + +

+ {canChangeRole && ( + + )} +

+ + + )} + +

+ {canRemoveFromOrg && ( + + Remove from organization + + )} +

+ + + ); + } +} + +const OrgRow = withTheme(UnThemedOrgRow); + +const getAddToOrgModalStyles = stylesFactory(() => ({ + modal: css` + width: 500px; + `, + buttonRow: css` + text-align: center; + `, + modalContent: css` + overflow: visible; + `, +})); + +interface AddToOrgModalProps { + isOpen: boolean; + + onOrgAdd(orgId: number, role: string): void; + + onDismiss?(): void; +} + +interface AddToOrgModalState { + selectedOrg: Organization | null; + role: OrgRole; +} + +export class AddToOrgModal extends PureComponent { + state: AddToOrgModalState = { + selectedOrg: null, + role: OrgRole.Admin, + }; + + onOrgSelect = (org: OrgSelectItem) => { + this.setState({ selectedOrg: org.value! }); + }; + + onOrgRoleChange = (newRole: OrgRole) => { + this.setState({ + role: newRole, + }); + }; + + onAddUserToOrg = () => { + const { selectedOrg, role } = this.state; + this.props.onOrgAdd(selectedOrg!.id, role); + }; + + onCancel = () => { + if (this.props.onDismiss) { + this.props.onDismiss(); + } + }; + + render() { + const { isOpen } = this.props; + const { role } = this.state; + const styles = getAddToOrgModalStyles(); + return ( + + + + + + + + + + + + + + + ); + } +} + +interface ChangeOrgButtonProps { + isExternalUser?: boolean; + onChangeRoleClick: () => void; + onCancelClick: () => void; + onOrgRoleSave: () => void; +} + +const getChangeOrgButtonTheme = (theme: GrafanaTheme2) => ({ + disabledTooltip: css` + display: flex; + `, + tooltipItemLink: css` + color: ${theme.v1.palette.blue95}; + `, +}); + +export function ChangeOrgButton({ + onChangeRoleClick, + isExternalUser, + onOrgRoleSave, + onCancelClick, +}: ChangeOrgButtonProps): ReactElement { + const styles = useStyles2(getChangeOrgButtonTheme); + return ( +

+ + Change role + + {isExternalUser && ( + + This user's role is not editable because it is synchronized from your auth provider. Refer to + the + + Grafana authentication docs + + for details. +

+ } + > + + + )} +

+ ); +} + +const ExternalUserTooltip: React.FC = () => { + const theme = useTheme(); + const styles = getTooltipStyles(theme); + + return ( +

+ + This user's built-in role is not editable because it is synchronized from your auth provider. Refer to + the + + Grafana authentication docs + + for details. +

+ } + > + + +

+ ); +}; + +const getTooltipStyles = stylesFactory((theme: GrafanaTheme) => ({ + disabledTooltip: css` + display: flex; + `, + tooltipItemLink: css` + color: ${theme.palette.blue95}; + `, +})); diff --git a/public/app/features/admin/UserPermissions.tsx b/public/app/features/admin/UserPermissions.tsx new file mode 100644 index 00000000..f1888f1a --- /dev/null +++ b/public/app/features/admin/UserPermissions.tsx @@ -0,0 +1,80 @@ +import React, { useState } from 'react'; +import { ConfirmButton, RadioButtonGroup, Icon } from '@grafana/ui'; +import { AccessControlAction } from 'app/types'; +import { contextSrv } from 'app/core/core'; + +interface Props { + isGrafanaAdmin: boolean; + + onGrafanaAdminChange: (isGrafanaAdmin: boolean) => void; +} + +const adminOptions = [ + { label: 'Yes', value: true }, + { label: 'No', value: false }, +]; + +export function UserPermissions({ isGrafanaAdmin, onGrafanaAdminChange }: Props) { + const [isEditing, setIsEditing] = useState(false); + const [currentAdminOption, setCurrentAdminOption] = useState(isGrafanaAdmin); + + const onChangeClick = () => setIsEditing(true); + + const onCancelClick = () => { + setIsEditing(false); + setCurrentAdminOption(isGrafanaAdmin); + }; + + const handleGrafanaAdminChange = () => onGrafanaAdminChange(currentAdminOption); + + const canChangePermissions = contextSrv.hasPermission(AccessControlAction.UsersPermissionsUpdate); + + return ( + <> +

Permissions

+ + + + + {isEditing ? ( + + ) : ( + + )} + + + +

Grafana Admin

+ +

+ {isGrafanaAdmin ? ( + <> + Yes + + ) : ( + <>No + )} +

+ {canChangePermissions && ( + + Change + + )} +

+ + ); +} diff --git a/public/app/features/admin/UserProfile.tsx b/public/app/features/admin/UserProfile.tsx new file mode 100644 index 00000000..64f37b0e --- /dev/null +++ b/public/app/features/admin/UserProfile.tsx @@ -0,0 +1,329 @@ +import React, { FC, PureComponent, useRef, useState } from 'react'; +import { AccessControlAction, UserDTO } from 'app/types'; +import { css, cx } from '@emotion/css'; +import { config } from 'app/core/config'; +import { GrafanaTheme } from '@grafana/data'; +import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus, stylesFactory } from '@grafana/ui'; +import { contextSrv } from 'app/core/core'; + +interface Props { + user: UserDTO; + + onUserUpdate: (user: UserDTO) => void; + onUserDelete: (userId: number) => void; + onUserDisable: (userId: number) => void; + onUserEnable: (userId: number) => void; + onPasswordChange(password: string): void; +} + +export function UserProfile({ + user, + onUserUpdate, + onUserDelete, + onUserDisable, + onUserEnable, + onPasswordChange, +}: Props) { + const [showDeleteModal, setShowDeleteModal] = useState(false); + const [showDisableModal, setShowDisableModal] = useState(false); + + const deleteUserRef = useRef(null); + const showDeleteUserModal = (show: boolean) => () => { + setShowDeleteModal(show); + if (!show && deleteUserRef.current) { + deleteUserRef.current.focus(); + } + }; + + const disableUserRef = useRef(null); + const showDisableUserModal = (show: boolean) => () => { + setShowDisableModal(show); + if (!show && disableUserRef.current) { + disableUserRef.current.focus(); + } + }; + + const handleUserDelete = () => onUserDelete(user.id); + + const handleUserDisable = () => onUserDisable(user.id); + + const handleUserEnable = () => onUserEnable(user.id); + + const onUserNameChange = (newValue: string) => { + onUserUpdate({ + ...user, + name: newValue, + }); + }; + + const onUserEmailChange = (newValue: string) => { + onUserUpdate({ + ...user, + email: newValue, + }); + }; + + const onUserLoginChange = (newValue: string) => { + onUserUpdate({ + ...user, + login: newValue, + }); + }; + + const authSource = user.authLabels?.length && user.authLabels[0]; + const lockMessage = authSource ? `Synced via ${authSource}` : ''; + const styles = getStyles(config.theme); + + const editLocked = user.isExternal || !contextSrv.hasPermissionInMetadata(AccessControlAction.UsersWrite, user); + const passwordChangeLocked = + user.isExternal || !contextSrv.hasPermissionInMetadata(AccessControlAction.UsersPasswordUpdate, user); + const canDelete = contextSrv.hasPermissionInMetadata(AccessControlAction.UsersDelete, user); + const canDisable = contextSrv.hasPermissionInMetadata(AccessControlAction.UsersDisable, user); + const canEnable = contextSrv.hasPermissionInMetadata(AccessControlAction.UsersEnable, user); + + return ( + <> +

User information

+ + + + + + + +

+ {canDelete && ( + <> + + + + )} + {user.isDisabled && canEnable && ( + + )} + {!user.isDisabled && canDisable && ( + <> + + + + )} +

+ + ); +} + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + return { + buttonRow: css` + margin-top: 0.8rem; + > * { + margin-right: 16px; + } + `, + }; +}); + +interface UserProfileRowProps { + label: string; + value?: string; + locked?: boolean; + lockMessage?: string; + inputType?: string; + onChange?: (value: string) => void; +} + +interface UserProfileRowState { + value: string; + editing: boolean; +} + +export class UserProfileRow extends PureComponent { + inputElem?: HTMLInputElement; + + static defaultProps: Partial = { + value: '', + locked: false, + lockMessage: '', + inputType: 'text', + }; + + state = { + editing: false, + value: this.props.value || '', + }; + + setInputElem = (elem: any) => { + this.inputElem = elem; + }; + + onEditClick = () => { + if (this.props.inputType === 'password') { + // Reset value for password field + this.setState({ editing: true, value: '' }, this.focusInput); + } else { + this.setState({ editing: true }, this.focusInput); + } + }; + + onCancelClick = () => { + this.setState({ editing: false, value: this.props.value || '' }); + }; + + onInputChange = (event: React.ChangeEvent, status?: LegacyInputStatus) => { + if (status === LegacyInputStatus.Invalid) { + return; + } + + this.setState({ value: event.target.value }); + }; + + onInputBlur = (event: React.FocusEvent, status?: LegacyInputStatus) => { + if (status === LegacyInputStatus.Invalid) { + return; + } + + this.setState({ value: event.target.value }); + }; + + focusInput = () => { + if (this.inputElem && this.inputElem.focus) { + this.inputElem.focus(); + } + }; + + onSave = () => { + if (this.props.onChange) { + this.props.onChange(this.state.value); + } + }; + + render() { + const { label, locked, lockMessage, inputType } = this.props; + const { value } = this.state; + const labelClass = cx( + 'width-16', + css` + font-weight: 500; + ` + ); + + if (locked) { + return ; + } + + const inputId = `${label}-input`; + return ( + + + {label} + + + {this.state.editing ? ( + + ) : ( + {this.props.value} + )} + + + + Edit + + + + ); + } +} + +interface LockedRowProps { + label: string; + value?: any; + lockMessage?: string; +} + +export const LockedRow: FC = ({ label, value, lockMessage }) => { + const lockMessageClass = css` + font-style: italic; + margin-right: 0.6rem; + `; + const labelClass = cx( + 'width-16', + css` + font-weight: 500; + ` + ); + + return ( + + {label} + + {value} + + + {lockMessage} + + + ); +}; diff --git a/public/app/features/admin/UserSessions.tsx b/public/app/features/admin/UserSessions.tsx new file mode 100644 index 00000000..0b9d530d --- /dev/null +++ b/public/app/features/admin/UserSessions.tsx @@ -0,0 +1,115 @@ +import React, { PureComponent } from 'react'; +import { css } from '@emotion/css'; +import { ConfirmButton, ConfirmModal, Button } from '@grafana/ui'; +import { AccessControlAction, UserSession } from 'app/types'; +import { contextSrv } from 'app/core/core'; + +interface Props { + sessions: UserSession[]; + + onSessionRevoke: (id: number) => void; + onAllSessionsRevoke: () => void; +} + +interface State { + showLogoutModal: boolean; +} + +export class UserSessions extends PureComponent { + forceAllLogoutButton = React.createRef(); + state: State = { + showLogoutModal: false, + }; + + showLogoutConfirmationModal = () => { + this.setState({ showLogoutModal: true }); + }; + + dismissLogoutConfirmationModal = () => { + this.setState({ showLogoutModal: false }, () => { + this.forceAllLogoutButton.current?.focus(); + }); + }; + + onSessionRevoke = (id: number) => { + return () => { + this.props.onSessionRevoke(id); + }; + }; + + onAllSessionsRevoke = () => { + this.setState({ showLogoutModal: false }); + this.props.onAllSessionsRevoke(); + }; + + render() { + const { sessions } = this.props; + const { showLogoutModal } = this.state; + + const logoutFromAllDevicesClass = css` + margin-top: 0.8rem; + `; + + const canLogout = contextSrv.hasPermission(AccessControlAction.UsersLogout); + + return ( + <> +

Sessions

+ + + + + + + + + + + {sessions && + sessions.map((session, index) => ( + + + + + + + + ))} + +

Last seen	Logged on	IP address	Browser and OS
{session.isActive ? 'Now' : session.seenAt}	{session.createdAt}	{session.clientIp}	{`${session.browser} on ${session.os} ${session.osVersion}`}	+ + {canLogout && ( + + Force logout + + )} + +

+ {canLogout && sessions.length > 0 && ( + + )} + +

+ + ); + } +} diff --git a/public/app/features/admin/ldap/LdapConnectionStatus.tsx b/public/app/features/admin/ldap/LdapConnectionStatus.tsx new file mode 100644 index 00000000..1e79ecd8 --- /dev/null +++ b/public/app/features/admin/ldap/LdapConnectionStatus.tsx @@ -0,0 +1,86 @@ +import React, { FC } from 'react'; +import { Alert, Icon } from '@grafana/ui'; +import { AppNotificationSeverity, LdapConnectionInfo, LdapServerInfo } from 'app/types'; + +interface Props { + ldapConnectionInfo: LdapConnectionInfo; +} + +export const LdapConnectionStatus: FC = ({ ldapConnectionInfo }) => { + return ( + <> +

LDAP Connection

+ + + + + + + + + {ldapConnectionInfo && + ldapConnectionInfo.map((serverInfo, index) => ( + + + + + + ))} + +

Host	Port
{serverInfo.host}	{serverInfo.port}	+ {serverInfo.available ? ( + + ) : ( + + )} +

+ +

+ + ); +}; + +interface LdapConnectionErrorProps { + ldapConnectionInfo: LdapConnectionInfo; +} + +export const LdapErrorBox: FC = ({ ldapConnectionInfo }) => { + const hasError = ldapConnectionInfo.some((info) => info.error); + if (!hasError) { + return null; + } + + const connectionErrors: LdapServerInfo[] = []; + ldapConnectionInfo.forEach((info) => { + if (info.error) { + connectionErrors.push(info); + } + }); + + const errorElements = connectionErrors.map((info, index) => ( +

+ + {info.host}:{info.port} +
+ + {info.error} + {index !== connectionErrors.length - 1 && ( + <> +
+
+ + )} +

+ )); + + return ( + + {errorElements} + + ); +}; diff --git a/public/app/features/admin/ldap/LdapPage.tsx b/public/app/features/admin/ldap/LdapPage.tsx new file mode 100644 index 00000000..900d4fa8 --- /dev/null +++ b/public/app/features/admin/ldap/LdapPage.tsx @@ -0,0 +1,162 @@ +import React, { PureComponent } from 'react'; +import { connect, ConnectedProps } from 'react-redux'; +import { NavModel } from '@grafana/data'; +import { Alert, Button, LegacyForms } from '@grafana/ui'; +const { FormField } = LegacyForms; +import { getNavModel } from 'app/core/selectors/navModel'; +import config from 'app/core/config'; +import Page from 'app/core/components/Page/Page'; +import { LdapConnectionStatus } from './LdapConnectionStatus'; +import { LdapSyncInfo } from './LdapSyncInfo'; +import { LdapUserInfo } from './LdapUserInfo'; +import { + AppNotificationSeverity, + LdapError, + LdapUser, + StoreState, + SyncInfo, + LdapConnectionInfo, + AccessControlAction, +} from 'app/types'; +import { + loadLdapState, + loadLdapSyncStatus, + loadUserMapping, + clearUserError, + clearUserMappingInfo, +} from '../state/actions'; +import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; +import { contextSrv } from 'app/core/core'; + +interface OwnProps extends GrafanaRouteComponentProps<{}, { username?: string }> { + navModel: NavModel; + ldapConnectionInfo: LdapConnectionInfo; + ldapUser?: LdapUser; + ldapSyncInfo?: SyncInfo; + ldapError?: LdapError; + userError?: LdapError; +} + +interface State { + isLoading: boolean; +} + +export class LdapPage extends PureComponent { + state = { + isLoading: true, + }; + + async componentDidMount() { + const { clearUserMappingInfo, queryParams } = this.props; + await clearUserMappingInfo(); + await this.fetchLDAPStatus(); + + if (queryParams.username) { + await this.fetchUserMapping(queryParams.username); + } + + this.setState({ isLoading: false }); + } + + async fetchLDAPStatus() { + const { loadLdapState, loadLdapSyncStatus } = this.props; + return Promise.all([loadLdapState(), loadLdapSyncStatus()]); + } + + async fetchUserMapping(username: string) { + const { loadUserMapping } = this.props; + return await loadUserMapping(username); + } + + search = (event: any) => { + event.preventDefault(); + const username = event.target.elements['username'].value; + if (username) { + this.fetchUserMapping(username); + } + }; + + onClearUserError = () => { + this.props.clearUserError(); + }; + + render() { + const { ldapUser, userError, ldapError, ldapSyncInfo, ldapConnectionInfo, navModel, queryParams } = this.props; + const { isLoading } = this.state; + const canReadLDAPUser = contextSrv.hasPermission(AccessControlAction.LDAPUsersRead); + + return ( + + + <> + {ldapError && ldapError.title && ( +

+ + {ldapError.body} + +

+ )} + + + + {config.licenseInfo.hasLicense && ldapSyncInfo && } + + {canReadLDAPUser && ( + <> +

Test user mapping

+ {userError && userError.title && ( +

+ + {userError.body} + +

+ )} + {ldapUser && } + + )} + + + + ); + } +} + +const mapStateToProps = (state: StoreState) => ({ + navModel: getNavModel(state.navIndex, 'ldap'), + ldapConnectionInfo: state.ldap.connectionInfo, + ldapUser: state.ldap.user, + ldapSyncInfo: state.ldap.syncInfo, + userError: state.ldap.userError, + ldapError: state.ldap.ldapError, +}); + +const mapDispatchToProps = { + loadLdapState, + loadLdapSyncStatus, + loadUserMapping, + clearUserError, + clearUserMappingInfo, +}; + +const connector = connect(mapStateToProps, mapDispatchToProps); +type Props = OwnProps & ConnectedProps; + +export default connector(LdapPage); diff --git a/public/app/features/admin/ldap/LdapSyncInfo.tsx b/public/app/features/admin/ldap/LdapSyncInfo.tsx new file mode 100644 index 00000000..91a89073 --- /dev/null +++ b/public/app/features/admin/ldap/LdapSyncInfo.tsx @@ -0,0 +1,62 @@ +import React, { PureComponent } from 'react'; +import { dateTimeFormat } from '@grafana/data'; +import { Button, Spinner } from '@grafana/ui'; +import { SyncInfo } from 'app/types'; + +interface Props { + ldapSyncInfo: SyncInfo; +} + +interface State { + isSyncing: boolean; +} + +const format = 'dddd YYYY-MM-DD HH:mm zz'; + +export class LdapSyncInfo extends PureComponent { + state = { + isSyncing: false, + }; + + handleSyncClick = () => { + this.setState({ isSyncing: !this.state.isSyncing }); + }; + + render() { + const { ldapSyncInfo } = this.props; + const { isSyncing } = this.state; + const nextSyncTime = dateTimeFormat(ldapSyncInfo.nextSync, { format }); + + return ( + <> +

+ LDAP Synchronisation + +

+ + + + + + + + + + + + + + + +

Active synchronisation	{ldapSyncInfo.enabled ? 'Enabled' : 'Disabled'}
Scheduled	{ldapSyncInfo.schedule}
Next scheduled synchronisation	{nextSyncTime}

+ + ); + } +} diff --git a/public/app/features/admin/ldap/LdapUserGroups.tsx b/public/app/features/admin/ldap/LdapUserGroups.tsx new file mode 100644 index 00000000..b0b7da6c --- /dev/null +++ b/public/app/features/admin/ldap/LdapUserGroups.tsx @@ -0,0 +1,69 @@ +import React, { FC } from 'react'; +import { Tooltip, Icon } from '@grafana/ui'; +import { LdapRole } from 'app/types'; + +interface Props { + groups: LdapRole[]; + showAttributeMapping?: boolean; +} + +export const LdapUserGroups: FC = ({ groups, showAttributeMapping }) => { + const items = showAttributeMapping ? groups : groups.filter((item) => item.orgRole); + + return ( +

+ + + + {showAttributeMapping && } + + + + + + {items.map((group, index) => { + return ( + + {showAttributeMapping && ( + <> + + {!group.orgRole && ( + <> + + + )} + + )} + {group.orgName && ( + <> + + + + )} + + ); + })} + +

LDAP Group	+ Organization + + + + + +	Role
{group.groupDN}	+	+ + No match + + + + + + +	{group.orgName}	{group.orgRole}

+ ); +}; diff --git a/public/app/features/admin/ldap/LdapUserInfo.tsx b/public/app/features/admin/ldap/LdapUserInfo.tsx new file mode 100644 index 00000000..c1c3298c --- /dev/null +++ b/public/app/features/admin/ldap/LdapUserInfo.tsx @@ -0,0 +1,39 @@ +import React, { FC } from 'react'; +import { LdapUserMappingInfo } from './LdapUserMappingInfo'; +import { LdapUserPermissions } from './LdapUserPermissions'; +import { LdapUserGroups } from './LdapUserGroups'; +import { LdapUserTeams } from './LdapUserTeams'; +import { LdapUser } from 'app/types'; + +interface Props { + ldapUser: LdapUser; + showAttributeMapping?: boolean; +} + +export const LdapUserInfo: FC = ({ ldapUser, showAttributeMapping }) => { + return ( + <> + + + {ldapUser.roles && ldapUser.roles.length > 0 && ( + + )} + + {ldapUser.teams && ldapUser.teams.length > 0 ? ( + + ) : ( +

+ + + + + + +

No teams found via LDAP

+ )} + + ); +}; diff --git a/public/app/features/admin/ldap/LdapUserMappingInfo.tsx b/public/app/features/admin/ldap/LdapUserMappingInfo.tsx new file mode 100644 index 00000000..26998042 --- /dev/null +++ b/public/app/features/admin/ldap/LdapUserMappingInfo.tsx @@ -0,0 +1,46 @@ +import React, { FC } from 'react'; +import { LdapUserInfo } from 'app/types'; + +interface Props { + info: LdapUserInfo; + showAttributeMapping?: boolean; +} + +export const LdapUserMappingInfo: FC = ({ info, showAttributeMapping }) => { + return ( +

+ + + + + {showAttributeMapping && } + + + + + + + {showAttributeMapping && } + + + + + {showAttributeMapping && } + + + + + {showAttributeMapping && } + + + + + {showAttributeMapping && } + + +

User information	LDAP attribute
First name	{info.name.ldapValue}	{info.name.cfgAttrValue}
Surname	{info.surname.ldapValue}	{info.surname.cfgAttrValue}
Username	{info.login.ldapValue}	{info.login.cfgAttrValue}
Email	{info.email.ldapValue}	{info.email.cfgAttrValue}

+ ); +}; diff --git a/public/app/features/admin/ldap/LdapUserPermissions.tsx b/public/app/features/admin/ldap/LdapUserPermissions.tsx new file mode 100644 index 00000000..3ee94d86 --- /dev/null +++ b/public/app/features/admin/ldap/LdapUserPermissions.tsx @@ -0,0 +1,51 @@ +import React, { FC } from 'react'; +import { LdapPermissions } from 'app/types'; +import { Icon } from '@grafana/ui'; + +interface Props { + permissions: LdapPermissions; +} + +export const LdapUserPermissions: FC = ({ permissions }) => { + return ( +

+ + + + + + + + + + + + + + + + +

Permissions
Grafana admin	+ {permissions.isGrafanaAdmin ? ( + <> + Yes + + ) : ( + 'No' + )} +
Status	+ {permissions.isDisabled ? ( + <> + Inactive + + ) : ( + <> + Active + + )} +

+ ); +}; diff --git a/public/app/features/admin/ldap/LdapUserTeams.tsx b/public/app/features/admin/ldap/LdapUserTeams.tsx new file mode 100644 index 00000000..38a76e66 --- /dev/null +++ b/public/app/features/admin/ldap/LdapUserTeams.tsx @@ -0,0 +1,62 @@ +import React, { FC } from 'react'; +import { Tooltip, Icon } from '@grafana/ui'; +import { LdapTeam } from 'app/types'; + +interface Props { + teams: LdapTeam[]; + showAttributeMapping?: boolean; +} + +export const LdapUserTeams: FC = ({ teams, showAttributeMapping }) => { + const items = showAttributeMapping ? teams : teams.filter((item) => item.teamName); + + return ( +

+ + + + {showAttributeMapping && } + + + + + + {items.map((team, index) => { + return ( + + {showAttributeMapping && ( + <> + + {!team.orgName && ( + <> + + + )} + + )} + {team.orgName && ( + <> + + + + )} + + ); + })} + +

LDAP Group	Organisation	Team
{team.groupDN}	+	+ + No match + + + + + + +	{team.orgName}	{team.teamName}

+ ); +}; diff --git a/public/app/features/admin/partials/admin_home.html b/public/app/features/admin/partials/admin_home.html new file mode 100644 index 00000000..a3432e61 --- /dev/null +++ b/public/app/features/admin/partials/admin_home.html @@ -0,0 +1,12 @@ + + +

+ +

+ Grafana is a multi-tenant system where most can be configured per organization. These + admin pages are for server admins where you can manage orgs, & all users across all orgs. +

+ +

diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html new file mode 100644 index 00000000..104398ca --- /dev/null +++ b/public/app/features/admin/partials/edit_org.html @@ -0,0 +1,52 @@ + + +

Edit Organization

+ + + +

Organization Users

+ + + + + + + + + + + + + + +

Username	Email	Role
{{orgUser.login}}	{{orgUser.email}}	+ + + + + +	+ + + +

+ +

diff --git a/public/app/features/admin/partials/stats.html b/public/app/features/admin/partials/stats.html new file mode 100644 index 00000000..e2a4bb62 --- /dev/null +++ b/public/app/features/admin/partials/stats.html @@ -0,0 +1,54 @@ + + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name	Value
Total dashboards	{{ctrl.stats.dashboards}}
Total users	{{ctrl.stats.users}}
Active users (seen last 14 days)	{{ctrl.stats.activeUsers}}
Total organizations	{{ctrl.stats.orgs}}
Total datasources	{{ctrl.stats.datasources}}
Total playlists	{{ctrl.stats.playlists}}
Total snapshots	{{ctrl.stats.snapshots}}
Total dashboard tags	{{ctrl.stats.tags}}
Total starred dashboards	{{ctrl.stats.stars}}
Total alerts	{{ctrl.stats.alerts}}

diff --git a/public/app/features/admin/partials/styleguide.html b/public/app/features/admin/partials/styleguide.html new file mode 100644 index 00000000..0ff6de9f --- /dev/null +++ b/public/app/features/admin/partials/styleguide.html @@ -0,0 +1,27 @@ + + +

+ +

Buttons

+ +

Forms

+ +

+ Label + +

+ +

+ diff --git a/public/app/features/admin/state/actions.ts b/public/app/features/admin/state/actions.ts new file mode 100644 index 00000000..ff5aaa23 --- /dev/null +++ b/public/app/features/admin/state/actions.ts @@ -0,0 +1,311 @@ +import config from 'app/core/config'; +import { dateTimeFormat, dateTimeFormatTimeAgo } from '@grafana/data'; +import { getBackendSrv, locationService } from '@grafana/runtime'; +import { ThunkResult, LdapUser, UserSession, UserDTO, AccessControlAction, UserFilter } from 'app/types'; + +import { + userAdminPageLoadedAction, + userProfileLoadedAction, + userOrgsLoadedAction, + userSessionsLoadedAction, + userAdminPageFailedAction, + ldapConnectionInfoLoadedAction, + ldapSyncStatusLoadedAction, + userMappingInfoLoadedAction, + userMappingInfoFailedAction, + clearUserMappingInfoAction, + clearUserErrorAction, + ldapFailedAction, + usersFetched, + queryChanged, + pageChanged, + filterChanged, + usersFetchBegin, + usersFetchEnd, +} from './reducers'; +import { debounce } from 'lodash'; +import { contextSrv } from 'app/core/core'; +import { addAccessControlQueryParam } from 'app/core/utils/accessControl'; +// UserAdminPage + +export function loadAdminUserPage(userId: number): ThunkResult { + return async (dispatch) => { + try { + dispatch(userAdminPageLoadedAction(false)); + await dispatch(loadUserProfile(userId)); + await dispatch(loadUserOrgs(userId)); + await dispatch(loadUserSessions(userId)); + if (config.ldapEnabled && config.licenseInfo.hasLicense) { + await dispatch(loadLdapSyncStatus()); + } + dispatch(userAdminPageLoadedAction(true)); + } catch (error) { + console.error(error); + + const userError = { + title: error.data.message, + body: error.data.error, + }; + + dispatch(userAdminPageFailedAction(userError)); + } + }; +} + +export function loadUserProfile(userId: number): ThunkResult { + return async (dispatch) => { + const user = await getBackendSrv().get(addAccessControlQueryParam(`/api/users/${userId}`)); + dispatch(userProfileLoadedAction(user)); + }; +} + +export function updateUser(user: UserDTO): ThunkResult { + return async (dispatch) => { + await getBackendSrv().put(`/api/users/${user.id}`, user); + dispatch(loadAdminUserPage(user.id)); + }; +} + +export function setUserPassword(userId: number, password: string): ThunkResult { + return async (dispatch) => { + const payload = { password }; + await getBackendSrv().put(`/api/admin/users/${userId}/password`, payload); + dispatch(loadAdminUserPage(userId)); + }; +} + +export function disableUser(userId: number): ThunkResult { + return async (dispatch) => { + await getBackendSrv().post(`/api/admin/users/${userId}/disable`); + locationService.push('/admin/users'); + }; +} + +export function enableUser(userId: number): ThunkResult { + return async (dispatch) => { + await getBackendSrv().post(`/api/admin/users/${userId}/enable`); + dispatch(loadAdminUserPage(userId)); + }; +} + +export function deleteUser(userId: number): ThunkResult { + return async (dispatch) => { + await getBackendSrv().delete(`/api/admin/users/${userId}`); + locationService.push('/admin/users'); + }; +} + +export function updateUserPermissions(userId: number, isGrafanaAdmin: boolean): ThunkResult { + return async (dispatch) => { + const payload = { isGrafanaAdmin }; + await getBackendSrv().put(`/api/admin/users/${userId}/permissions`, payload); + dispatch(loadAdminUserPage(userId)); + }; +} + +export function loadUserOrgs(userId: number): ThunkResult { + return async (dispatch) => { + const orgs = await getBackendSrv().get(`/api/users/${userId}/orgs`); + dispatch(userOrgsLoadedAction(orgs)); + }; +} + +export function addOrgUser(user: UserDTO, orgId: number, role: string): ThunkResult { + return async (dispatch) => { + const payload = { + loginOrEmail: user.login, + role: role, + }; + await getBackendSrv().post(`/api/orgs/${orgId}/users/`, payload); + dispatch(loadAdminUserPage(user.id)); + }; +} + +export function updateOrgUserRole(userId: number, orgId: number, role: string): ThunkResult { + return async (dispatch) => { + const payload = { role }; + await getBackendSrv().patch(`/api/orgs/${orgId}/users/${userId}`, payload); + dispatch(loadAdminUserPage(userId)); + }; +} + +export function deleteOrgUser(userId: number, orgId: number): ThunkResult { + return async (dispatch) => { + await getBackendSrv().delete(`/api/orgs/${orgId}/users/${userId}`); + dispatch(loadAdminUserPage(userId)); + }; +} + +export function loadUserSessions(userId: number): ThunkResult { + return async (dispatch) => { + if (!contextSrv.hasPermission(AccessControlAction.UsersAuthTokenList)) { + return; + } + + const tokens = await getBackendSrv().get(`/api/admin/users/${userId}/auth-tokens`); + tokens.reverse(); + const sessions = tokens.map((session: UserSession) => { + return { + id: session.id, + isActive: session.isActive, + seenAt: dateTimeFormatTimeAgo(session.seenAt), + createdAt: dateTimeFormat(session.createdAt, { format: 'MMMM DD, YYYY' }), + clientIp: session.clientIp, + browser: session.browser, + browserVersion: session.browserVersion, + os: session.os, + osVersion: session.osVersion, + device: session.device, + }; + }); + dispatch(userSessionsLoadedAction(sessions)); + }; +} + +export function revokeSession(tokenId: number, userId: number): ThunkResult { + return async (dispatch) => { + const payload = { authTokenId: tokenId }; + await getBackendSrv().post(`/api/admin/users/${userId}/revoke-auth-token`, payload); + dispatch(loadUserSessions(userId)); + }; +} + +export function revokeAllSessions(userId: number): ThunkResult { + return async (dispatch) => { + await getBackendSrv().post(`/api/admin/users/${userId}/logout`); + dispatch(loadUserSessions(userId)); + }; +} + +// LDAP user actions + +export function loadLdapSyncStatus(): ThunkResult { + return async (dispatch) => { + // Available only in enterprise + const canReadLDAPStatus = contextSrv.hasPermission(AccessControlAction.LDAPStatusRead); + if (config.licenseInfo.hasLicense && canReadLDAPStatus) { + const syncStatus = await getBackendSrv().get(`/api/admin/ldap-sync-status`); + dispatch(ldapSyncStatusLoadedAction(syncStatus)); + } + }; +} + +export function syncLdapUser(userId: number): ThunkResult { + return async (dispatch) => { + await getBackendSrv().post(`/api/admin/ldap/sync/${userId}`); + dispatch(loadAdminUserPage(userId)); + }; +} + +// LDAP debug page + +export function loadLdapState(): ThunkResult { + return async (dispatch) => { + if (!contextSrv.hasPermission(AccessControlAction.LDAPStatusRead)) { + return; + } + + try { + const connectionInfo = await getBackendSrv().get(`/api/admin/ldap/status`); + dispatch(ldapConnectionInfoLoadedAction(connectionInfo)); + } catch (error) { + error.isHandled = true; + const ldapError = { + title: error.data.message, + body: error.data.error, + }; + dispatch(ldapFailedAction(ldapError)); + } + }; +} + +export function loadUserMapping(username: string): ThunkResult { + return async (dispatch) => { + try { + const response = await getBackendSrv().get(`/api/admin/ldap/${encodeURIComponent(username)}`); + const { name, surname, email, login, isGrafanaAdmin, isDisabled, roles, teams } = response; + const userInfo: LdapUser = { + info: { name, surname, email, login }, + permissions: { isGrafanaAdmin, isDisabled }, + roles, + teams, + }; + dispatch(userMappingInfoLoadedAction(userInfo)); + } catch (error) { + error.isHandled = true; + const userError = { + title: error.data.message, + body: error.data.error, + }; + dispatch(clearUserMappingInfoAction()); + dispatch(userMappingInfoFailedAction(userError)); + } + }; +} + +export function clearUserError(): ThunkResult { + return (dispatch) => { + dispatch(clearUserErrorAction()); + }; +} + +export function clearUserMappingInfo(): ThunkResult { + return (dispatch) => { + dispatch(clearUserErrorAction()); + dispatch(clearUserMappingInfoAction()); + }; +} + +// UserListAdminPage + +const getFilters = (filters: UserFilter[]) => { + return filters + .map((filter) => { + if (Array.isArray(filter.value)) { + return filter.value.map((v) => `${filter.name}=${v.value}`).join('&'); + } + return `${filter.name}=${filter.value}`; + }) + .join('&'); +}; + +export function fetchUsers(): ThunkResult { + return async (dispatch, getState) => { + try { + const { perPage, page, query, filters } = getState().userListAdmin; + const result = await getBackendSrv().get( + `/api/users/search?perpage=${perPage}&page=${page}&query=${query}&${getFilters(filters)}` + ); + dispatch(usersFetched(result)); + } catch (error) { + usersFetchEnd(); + console.error(error); + } + }; +} + +const fetchUsersWithDebounce = debounce((dispatch) => dispatch(fetchUsers()), 500); + +export function changeQuery(query: string): ThunkResult { + return async (dispatch) => { + dispatch(usersFetchBegin()); + dispatch(queryChanged(query)); + fetchUsersWithDebounce(dispatch); + }; +} + +export function changeFilter(filter: UserFilter): ThunkResult { + return async (dispatch) => { + dispatch(usersFetchBegin()); + dispatch(filterChanged(filter)); + fetchUsersWithDebounce(dispatch); + }; +} + +export function changePage(page: number): ThunkResult { + return async (dispatch) => { + dispatch(usersFetchBegin()); + dispatch(pageChanged(page)); + dispatch(fetchUsers()); + }; +} diff --git a/public/app/features/admin/state/apis.tsx b/public/app/features/admin/state/apis.tsx new file mode 100644 index 00000000..79c2061e --- /dev/null +++ b/public/app/features/admin/state/apis.tsx @@ -0,0 +1,30 @@ +import { getBackendSrv } from '@grafana/runtime'; + +export interface ServerStat { + activeAdmins: number; + activeEditors: number; + activeSessions: number; + activeUsers: number; + activeViewers: number; + admins: number; + alerts: number; + dashboards: number; + datasources: number; + editors: number; + orgs: number; + playlists: number; + snapshots: number; + stars: number; + tags: number; + users: number; + viewers: number; +} + +export const getServerStats = async (): Promise => { + return getBackendSrv() + .get('api/admin/stats') + .catch((err) => { + console.error(err); + return null; + }); +}; diff --git a/public/app/features/admin/state/reducers.test.ts b/public/app/features/admin/state/reducers.test.ts new file mode 100644 index 00000000..00052d54 --- /dev/null +++ b/public/app/features/admin/state/reducers.test.ts @@ -0,0 +1,290 @@ +import { reducerTester } from 'test/core/redux/reducerTester'; +import { + clearUserMappingInfoAction, + ldapConnectionInfoLoadedAction, + ldapFailedAction, + ldapReducer, + ldapSyncStatusLoadedAction, + userAdminReducer, + userMappingInfoFailedAction, + userMappingInfoLoadedAction, + userProfileLoadedAction, + userSessionsLoadedAction, + userListAdminReducer, + queryChanged, +} from './reducers'; +import { LdapState, LdapUser, UserAdminState, UserDTO, UserListAdminState } from 'app/types'; + +const makeInitialLdapState = (): LdapState => ({ + connectionInfo: [], +}); + +const makeInitialUserAdminState = (): UserAdminState => ({ + sessions: [], + orgs: [], + isLoading: true, +}); + +const makeInitialUserListAdminState = (): UserListAdminState => ({ + users: [], + query: '', + page: 0, + perPage: 50, + totalPages: 1, + showPaging: false, + filters: [{ name: 'activeLast30Days', value: true }], + isLoading: false, +}); + +const getTestUserMapping = (): LdapUser => ({ + info: { + email: { cfgAttrValue: 'mail', ldapValue: 'user@localhost' }, + name: { cfgAttrValue: 'givenName', ldapValue: 'User' }, + surname: { cfgAttrValue: 'sn', ldapValue: '' }, + login: { cfgAttrValue: 'cn', ldapValue: 'user' }, + }, + permissions: { + isGrafanaAdmin: false, + isDisabled: false, + }, + roles: [], + teams: [], +}); + +const getTestUser = (): UserDTO => ({ + id: 1, + email: 'user@localhost', + login: 'user', + name: 'User', + avatarUrl: '', + isGrafanaAdmin: false, + isDisabled: false, +}); + +describe('LDAP page reducer', () => { + describe('When page loaded', () => { + describe('When connection info loaded', () => { + it('should set connection info and clear error', () => { + const initialState = { + ...makeInitialLdapState(), + }; + + reducerTester() + .givenReducer(ldapReducer, initialState) + .whenActionIsDispatched( + ldapConnectionInfoLoadedAction([ + { + available: true, + host: 'localhost', + port: 389, + error: (null as unknown) as string, + }, + ]) + ) + .thenStateShouldEqual({ + ...makeInitialLdapState(), + connectionInfo: [ + { + available: true, + host: 'localhost', + port: 389, + error: (null as unknown) as string, + }, + ], + ldapError: undefined, + }); + }); + }); + + describe('When connection failed', () => { + it('should set ldap error', () => { + const initialState = { + ...makeInitialLdapState(), + }; + + reducerTester() + .givenReducer(ldapReducer, initialState) + .whenActionIsDispatched( + ldapFailedAction({ + title: 'LDAP error', + body: 'Failed to connect', + }) + ) + .thenStateShouldEqual({ + ...makeInitialLdapState(), + ldapError: { + title: 'LDAP error', + body: 'Failed to connect', + }, + }); + }); + }); + + describe('When LDAP sync status loaded', () => { + it('should set sync info', () => { + const initialState = { + ...makeInitialLdapState(), + }; + + reducerTester() + .givenReducer(ldapReducer, initialState) + .whenActionIsDispatched( + ldapSyncStatusLoadedAction({ + enabled: true, + schedule: '0 0 * * * *', + nextSync: '2019-01-01T12:00:00Z', + }) + ) + .thenStateShouldEqual({ + ...makeInitialLdapState(), + syncInfo: { + enabled: true, + schedule: '0 0 * * * *', + nextSync: '2019-01-01T12:00:00Z', + }, + }); + }); + }); + }); + + describe('When user mapping info loaded', () => { + it('should set sync info and clear user error', () => { + const initialState = { + ...makeInitialLdapState(), + userError: { + title: 'User not found', + body: 'Cannot find user', + }, + }; + + reducerTester() + .givenReducer(ldapReducer, initialState) + .whenActionIsDispatched(userMappingInfoLoadedAction(getTestUserMapping())) + .thenStateShouldEqual({ + ...makeInitialLdapState(), + user: getTestUserMapping(), + userError: undefined, + }); + }); + }); + + describe('When user not found', () => { + it('should set user error and clear user info', () => { + const initialState = { + ...makeInitialLdapState(), + user: getTestUserMapping(), + }; + + reducerTester() + .givenReducer(ldapReducer, initialState) + .whenActionIsDispatched( + userMappingInfoFailedAction({ + title: 'User not found', + body: 'Cannot find user', + }) + ) + .thenStateShouldEqual({ + ...makeInitialLdapState(), + user: undefined, + userError: { + title: 'User not found', + body: 'Cannot find user', + }, + }); + }); + }); + + describe('when clearUserMappingInfoAction is dispatched', () => { + it('then state should be correct', () => { + reducerTester() + .givenReducer(ldapReducer, { + ...makeInitialLdapState(), + user: getTestUserMapping(), + }) + .whenActionIsDispatched(clearUserMappingInfoAction()) + .thenStateShouldEqual({ + ...makeInitialLdapState(), + user: undefined, + }); + }); + }); +}); + +describe('Edit Admin user page reducer', () => { + describe('When user loaded', () => { + it('should set user and clear user error', () => { + const initialState = { + ...makeInitialUserAdminState(), + }; + + reducerTester() + .givenReducer(userAdminReducer, initialState) + .whenActionIsDispatched(userProfileLoadedAction(getTestUser())) + .thenStateShouldEqual({ + ...makeInitialUserAdminState(), + + user: getTestUser(), + }); + }); + }); + + describe('when userSessionsLoadedAction is dispatched', () => { + it('then state should be correct', () => { + reducerTester() + .givenReducer(userAdminReducer, { ...makeInitialUserAdminState() }) + .whenActionIsDispatched( + userSessionsLoadedAction([ + { + browser: 'Chrome', + id: 1, + browserVersion: '79', + clientIp: '127.0.0.1', + createdAt: '2020-01-01 00:00:00', + device: 'a device', + isActive: true, + os: 'MacOS', + osVersion: '15', + seenAt: '2020-01-01 00:00:00', + }, + ]) + ) + .thenStateShouldEqual({ + ...makeInitialUserAdminState(), + sessions: [ + { + browser: 'Chrome', + id: 1, + browserVersion: '79', + clientIp: '127.0.0.1', + createdAt: '2020-01-01 00:00:00', + device: 'a device', + isActive: true, + os: 'MacOS', + osVersion: '15', + seenAt: '2020-01-01 00:00:00', + }, + ], + }); + }); + }); +}); + +describe('User List Admin reducer', () => { + describe('When query changed', () => { + it('should reset page to 0', () => { + const initialState = { + ...makeInitialUserListAdminState(), + page: 3, + }; + + reducerTester() + .givenReducer(userListAdminReducer, initialState) + .whenActionIsDispatched(queryChanged('test')) + .thenStateShouldEqual({ + ...makeInitialUserListAdminState(), + query: 'test', + page: 0, + }); + }); + }); +}); diff --git a/public/app/features/admin/state/reducers.ts b/public/app/features/admin/state/reducers.ts new file mode 100644 index 00000000..ec025749 --- /dev/null +++ b/public/app/features/admin/state/reducers.ts @@ -0,0 +1,206 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { + LdapConnectionInfo, + LdapError, + LdapState, + LdapUser, + SyncInfo, + UserAdminError, + UserAdminState, + UserDTO, + UserOrg, + UserSession, + UserListAdminState, + UserFilter, +} from 'app/types'; + +const initialLdapState: LdapState = { + connectionInfo: [], + syncInfo: undefined, + user: undefined, + connectionError: undefined, + userError: undefined, +}; + +const ldapSlice = createSlice({ + name: 'ldap', + initialState: initialLdapState, + reducers: { + ldapConnectionInfoLoadedAction: (state, action: PayloadAction): LdapState => ({ + ...state, + ldapError: undefined, + connectionInfo: action.payload, + }), + ldapFailedAction: (state, action: PayloadAction): LdapState => ({ + ...state, + ldapError: action.payload, + }), + ldapSyncStatusLoadedAction: (state, action: PayloadAction): LdapState => ({ + ...state, + syncInfo: action.payload, + }), + userMappingInfoLoadedAction: (state, action: PayloadAction): LdapState => ({ + ...state, + user: action.payload, + userError: undefined, + }), + userMappingInfoFailedAction: (state, action: PayloadAction): LdapState => ({ + ...state, + user: undefined, + userError: action.payload, + }), + clearUserMappingInfoAction: (state, action: PayloadAction): LdapState => ({ + ...state, + user: undefined, + }), + clearUserErrorAction: (state, action: PayloadAction): LdapState => ({ + ...state, + userError: undefined, + }), + }, +}); + +export const { + clearUserErrorAction, + clearUserMappingInfoAction, + ldapConnectionInfoLoadedAction, + ldapFailedAction, + ldapSyncStatusLoadedAction, + userMappingInfoFailedAction, + userMappingInfoLoadedAction, +} = ldapSlice.actions; + +export const ldapReducer = ldapSlice.reducer; + +// UserAdminPage + +const initialUserAdminState: UserAdminState = { + user: undefined, + sessions: [], + orgs: [], + isLoading: true, + error: undefined, +}; + +export const userAdminSlice = createSlice({ + name: 'userAdmin', + initialState: initialUserAdminState, + reducers: { + userProfileLoadedAction: (state, action: PayloadAction): UserAdminState => ({ + ...state, + user: action.payload, + }), + userOrgsLoadedAction: (state, action: PayloadAction): UserAdminState => ({ + ...state, + orgs: action.payload, + }), + userSessionsLoadedAction: (state, action: PayloadAction): UserAdminState => ({ + ...state, + sessions: action.payload, + }), + userAdminPageLoadedAction: (state, action: PayloadAction): UserAdminState => ({ + ...state, + isLoading: !action.payload, + }), + userAdminPageFailedAction: (state, action: PayloadAction): UserAdminState => ({ + ...state, + error: action.payload, + isLoading: false, + }), + }, +}); + +export const { + userProfileLoadedAction, + userOrgsLoadedAction, + userSessionsLoadedAction, + userAdminPageLoadedAction, + userAdminPageFailedAction, +} = userAdminSlice.actions; + +export const userAdminReducer = userAdminSlice.reducer; + +// UserListAdminPage + +const initialUserListAdminState: UserListAdminState = { + users: [], + query: '', + page: 0, + perPage: 50, + totalPages: 1, + showPaging: false, + filters: [{ name: 'activeLast30Days', value: false }], + isLoading: false, +}; + +interface UsersFetched { + users: UserDTO[]; + perPage: number; + page: number; + totalCount: number; +} + +export const userListAdminSlice = createSlice({ + name: 'userListAdmin', + initialState: initialUserListAdminState, + reducers: { + usersFetched: (state, action: PayloadAction) => { + const { totalCount, perPage, ...rest } = action.payload; + const totalPages = Math.ceil(totalCount / perPage); + + return { + ...state, + ...rest, + totalPages, + perPage, + showPaging: totalPages > 1, + isLoading: false, + }; + }, + usersFetchBegin: (state) => { + return { ...state, isLoading: true }; + }, + usersFetchEnd: (state) => { + return { ...state, isLoading: false }; + }, + queryChanged: (state, action: PayloadAction) => ({ + ...state, + query: action.payload, + page: 0, + }), + pageChanged: (state, action: PayloadAction) => ({ + ...state, + page: action.payload, + }), + filterChanged: (state, action: PayloadAction) => { + const { name, value } = action.payload; + + if (state.filters.some((filter) => filter.name === name)) { + return { + ...state, + filters: state.filters.map((filter) => (filter.name === name ? { ...filter, value } : filter)), + }; + } + return { + ...state, + filters: [...state.filters, action.payload], + }; + }, + }, +}); + +export const { + usersFetched, + usersFetchBegin, + usersFetchEnd, + queryChanged, + pageChanged, + filterChanged, +} = userListAdminSlice.actions; +export const userListAdminReducer = userListAdminSlice.reducer; + +export default { + ldap: ldapReducer, + userAdmin: userAdminReducer, + userListAdmin: userListAdminReducer, +}; diff --git a/public/app/features/alerting/AlertHowToModal.tsx b/public/app/features/alerting/AlertHowToModal.tsx new file mode 100644 index 00000000..c4bcbda7 --- /dev/null +++ b/public/app/features/alerting/AlertHowToModal.tsx @@ -0,0 +1,21 @@ +import { Modal, VerticalGroup } from '@grafana/ui'; +import React from 'react'; + +export interface AlertHowToModalProps { + onDismiss: () => void; +} + +export function AlertHowToModal({ onDismiss }: AlertHowToModalProps): JSX.Element { + return ( + + + link to how to alert image

+ Alerts are added and configured in the Alert tab of any dashboard graph panel, letting you build and visualize + an alert using existing queries. +

Remember to save the dashboard to persist your alert rule changes.

+ + + ); +} diff --git a/public/app/features/alerting/AlertRuleItem.test.tsx b/public/app/features/alerting/AlertRuleItem.test.tsx new file mode 100644 index 00000000..e619e713 --- /dev/null +++ b/public/app/features/alerting/AlertRuleItem.test.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import AlertRuleItem, { Props } from './AlertRuleItem'; + +const setup = (propOverrides?: object) => { + const props: Props = { + rule: { + id: 1, + dashboardId: 1, + panelId: 1, + name: 'Some rule', + state: 'Open', + stateText: 'state text', + stateIcon: 'icon', + stateClass: 'state class', + stateAge: 'age', + url: 'https://something.something.darkside', + }, + search: '', + onTogglePause: jest.fn(), + }; + + Object.assign(props, propOverrides); + + return render(); +}; + +describe('AlertRuleItem', () => { + it('should render component', () => { + const mockToggle = jest.fn(); + setup({ onTogglePause: mockToggle }); + + expect(screen.getByText('Some rule')).toBeInTheDocument(); + expect(screen.getByText('state text')).toBeInTheDocument(); + expect(screen.getByText('Pause')).toBeInTheDocument(); + expect(screen.getByText('Edit alert')).toBeInTheDocument(); + + fireEvent.click(screen.getByText('Pause')); + expect(mockToggle).toHaveBeenCalled(); + }); +}); diff --git a/public/app/features/alerting/AlertRuleItem.tsx b/public/app/features/alerting/AlertRuleItem.tsx new file mode 100644 index 00000000..36d72ac5 --- /dev/null +++ b/public/app/features/alerting/AlertRuleItem.tsx @@ -0,0 +1,59 @@ +import React, { useCallback } from 'react'; +// @ts-ignore +import Highlighter from 'react-highlight-words'; +import { Icon, IconName, Button, LinkButton, Card } from '@grafana/ui'; +import { AlertRule } from '../../types'; + +export interface Props { + rule: AlertRule; + search: string; + onTogglePause: () => void; +} + +const AlertRuleItem = ({ rule, search, onTogglePause }: Props) => { + const ruleUrl = `${rule.url}?editPanel=${rule.panelId}&tab=alert`; + const renderText = useCallback( + (text) => ( + + ), + [search] + ); + + return ( + + {renderText(rule.name)} + + + + + + + {renderText(rule.stateText)}{' '} + + for {rule.stateAge} + + {rule.info ? renderText(rule.info) : null} + + + + + Edit alert + + + + ); +}; + +export default AlertRuleItem; diff --git a/public/app/features/alerting/AlertRuleList.test.tsx b/public/app/features/alerting/AlertRuleList.test.tsx new file mode 100644 index 00000000..935b3d30 --- /dev/null +++ b/public/app/features/alerting/AlertRuleList.test.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { AlertRuleListUnconnected, Props } from './AlertRuleList'; +import { AlertRule } from '../../types'; +import appEvents from '../../core/app_events'; +import { NavModel } from '@grafana/data'; +import { setSearchQuery } from './state/reducers'; +import { mockToolkitActionCreator } from 'test/core/redux/mocks'; +import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps'; +import { locationService } from '@grafana/runtime'; +import { ShowModalReactEvent } from '../../types/events'; +import { AlertHowToModal } from './AlertHowToModal'; + +jest.mock('../../core/app_events', () => ({ + publish: jest.fn(), +})); + +const setup = (propOverrides?: object) => { + const props: Props = { + ...getRouteComponentProps({}), + navModel: {} as NavModel, + alertRules: [] as AlertRule[], + getAlertRulesAsync: jest.fn(), + setSearchQuery: mockToolkitActionCreator(setSearchQuery), + togglePauseAlertRule: jest.fn(), + search: '', + isLoading: false, + }; + + Object.assign(props, propOverrides); + + const wrapper = shallow(); + + return { + wrapper, + instance: wrapper.instance() as AlertRuleListUnconnected, + }; +}; + +describe('Life cycle', () => { + describe('component did mount', () => { + it('should call fetchrules', () => { + const { instance } = setup(); + instance.fetchRules = jest.fn(); + instance.componentDidMount(); + expect(instance.fetchRules).toHaveBeenCalled(); + }); + }); + + describe('component did update', () => { + it('should call fetchrules if props differ', () => { + const { instance } = setup(); + instance.fetchRules = jest.fn(); + + instance.componentDidUpdate({ queryParams: { state: 'ok' } } as any); + + expect(instance.fetchRules).toHaveBeenCalled(); + }); + }); +}); + +describe('Functions', () => { + describe('Get state filter', () => { + it('should get all if prop is not set', () => { + const { instance } = setup(); + const stateFilter = instance.getStateFilter(); + expect(stateFilter).toEqual('all'); + }); + + it('should return state filter if set', () => { + const { instance } = setup({ + queryParams: { state: 'ok' }, + }); + + const stateFilter = instance.getStateFilter(); + expect(stateFilter).toEqual('ok'); + }); + }); + + describe('State filter changed', () => { + it('should update location', () => { + const { instance } = setup(); + const mockEvent = { value: 'alerting' }; + instance.onStateFilterChanged(mockEvent); + expect(locationService.getSearchObject().state).toBe('alerting'); + }); + }); + + describe('Open how to', () => { + it('should emit show-modal event', () => { + const { instance } = setup(); + + instance.onOpenHowTo(); + + expect(appEvents.publish).toHaveBeenCalledWith(new ShowModalReactEvent({ component: AlertHowToModal })); + }); + }); + + describe('Search query change', () => { + it('should set search query', () => { + const { instance } = setup(); + instance.onSearchQueryChange('dashboard'); + expect(instance.props.setSearchQuery).toHaveBeenCalledWith('dashboard'); + }); + }); +}); diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx new file mode 100644 index 00000000..2085c76b --- /dev/null +++ b/public/app/features/alerting/AlertRuleList.tsx @@ -0,0 +1,147 @@ +import React, { PureComponent } from 'react'; +import { connect, ConnectedProps } from 'react-redux'; +import Page from 'app/core/components/Page/Page'; +import AlertRuleItem from './AlertRuleItem'; +import appEvents from 'app/core/app_events'; +import { getNavModel } from 'app/core/selectors/navModel'; +import { AlertRule, StoreState } from 'app/types'; +import { getAlertRulesAsync, togglePauseAlertRule } from './state/actions'; +import { getAlertRuleItems, getSearchQuery } from './state/selectors'; +import { SelectableValue } from '@grafana/data'; +import { config, locationService } from '@grafana/runtime'; +import { setSearchQuery } from './state/reducers'; +import { Button, FilterInput, LinkButton, Select, VerticalGroup } from '@grafana/ui'; +import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; +import { ShowModalReactEvent } from '../../types/events'; +import { AlertHowToModal } from './AlertHowToModal'; +import { UnifiedAlertingPromotion } from './components/UnifiedAlertingPromotion'; + +function mapStateToProps(state: StoreState) { + return { + navModel: getNavModel(state.navIndex, 'alert-list'), + alertRules: getAlertRuleItems(state), + search: getSearchQuery(state.alertRules), + isLoading: state.alertRules.isLoading, + }; +} + +const mapDispatchToProps = { + getAlertRulesAsync, + setSearchQuery, + togglePauseAlertRule, +}; + +const connector = connect(mapStateToProps, mapDispatchToProps); + +interface OwnProps extends GrafanaRouteComponentProps<{}, { state: string }> {} + +export type Props = OwnProps & ConnectedProps; + +export class AlertRuleListUnconnected extends PureComponent { + stateFilters = [ + { label: 'All', value: 'all' }, + { label: 'OK', value: 'ok' }, + { label: 'Not OK', value: 'not_ok' }, + { label: 'Alerting', value: 'alerting' }, + { label: 'No data', value: 'no_data' }, + { label: 'Paused', value: 'paused' }, + { label: 'Pending', value: 'pending' }, + ]; + + componentDidMount() { + this.fetchRules(); + } + + componentDidUpdate(prevProps: Props) { + if (prevProps.queryParams.state !== this.props.queryParams.state) { + this.fetchRules(); + } + } + + async fetchRules() { + await this.props.getAlertRulesAsync({ state: this.getStateFilter() }); + } + + getStateFilter(): string { + return this.props.queryParams.state ?? 'all'; + } + + onStateFilterChanged = (option: SelectableValue) => { + locationService.partial({ state: option.value }); + }; + + onOpenHowTo = () => { + appEvents.publish(new ShowModalReactEvent({ component: AlertHowToModal })); + }; + + onSearchQueryChange = (value: string) => { + this.props.setSearchQuery(value); + }; + + onTogglePause = (rule: AlertRule) => { + this.props.togglePauseAlertRule(rule.id, { paused: rule.state !== 'paused' }); + }; + + alertStateFilterOption = ({ text, value }: { text: string; value: string }) => { + return ( + + ); + }; + + render() { + const { navModel, alertRules, search, isLoading } = this.props; + + return ( + + +

+ +

+ + States + + +

+ + + + onResetSecureField(option.propertyName)} fill="text" type="button" size="sm"> + Clear + + } + /> + ) : ( + + )} + + ); + })} + + ); +}; diff --git a/public/app/features/alerting/components/NotificationSettings.tsx b/public/app/features/alerting/components/NotificationSettings.tsx new file mode 100644 index 00000000..9972becc --- /dev/null +++ b/public/app/features/alerting/components/NotificationSettings.tsx @@ -0,0 +1,56 @@ +import React, { FC } from 'react'; +import { Checkbox, CollapsableSection, Field, InfoBox, Input } from '@grafana/ui'; +import { NotificationSettingsProps } from './NotificationChannelForm'; + +interface Props extends NotificationSettingsProps { + imageRendererAvailable: boolean; +} + +export const NotificationSettings: FC = ({ currentFormValues, imageRendererAvailable, register }) => { + return ( + + + + + + + + {currentFormValues.uploadImage && !imageRendererAvailable && ( + + Grafana cannot find an image renderer to capture an image for the notification. Please make sure the Grafana + Image Renderer plugin is installed. Please contact your Grafana administrator to install the plugin. + + )} + + + + + + + {currentFormValues.sendReminder && ( + <> + + + + + )} + + ); +}; diff --git a/public/app/features/alerting/components/OptionElement.tsx b/public/app/features/alerting/components/OptionElement.tsx new file mode 100644 index 00000000..4c949202 --- /dev/null +++ b/public/app/features/alerting/components/OptionElement.tsx @@ -0,0 +1,56 @@ +import React, { FC } from 'react'; +import { FormAPI, Input, InputControl, Select, TextArea } from '@grafana/ui'; +import { NotificationChannelOption } from '../../../types'; + +interface Props extends Pick, 'register' | 'control'> { + option: NotificationChannelOption; + invalid?: boolean; +} + +export const OptionElement: FC = ({ control, option, register, invalid }) => { + const modelValue = option.secure ? `secureSettings.${option.propertyName}` : `settings.${option.propertyName}`; + switch (option.element) { + case 'input': + return ( + (option.validationRule !== '' ? validateOption(v, option.validationRule) : true), + })} + invalid={invalid} + type={option.inputType} + placeholder={option.placeholder} + /> + ); + + case 'select': + return ( + ( +

(option.validationRule !== '' ? validateOption(v, option.validationRule) : true),
+          })}
+        />
+      );
+
+    default:
+      console.error('Element not supported', option.element);
+      return null;
+  }
+};
+
+const validateOption = (value: string, validationRule: string) => {
+  return RegExp(validationRule).test(value) ? true : 'Invalid format';
+};
diff --git a/public/app/features/alerting/components/UnifiedAlertingPromotion.test.tsx b/public/app/features/alerting/components/UnifiedAlertingPromotion.test.tsx
new file mode 100644
index 00000000..1a5df7e6
--- /dev/null
+++ b/public/app/features/alerting/components/UnifiedAlertingPromotion.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UnifiedAlertingPromotion, LOCAL_STORAGE_KEY } from './UnifiedAlertingPromotion';
+
+describe('Unified Alerting promotion', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('should show by default', () => {
+    render(<UnifiedAlertingPromotion />);
+    expect(screen.queryByText('Try out the Grafana 8 alerting!')).toBeInTheDocument();
+  });
+
+  it('should be hidden if dismissed', () => {
+    const promotion = render(<UnifiedAlertingPromotion />);
+    expect(window.localStorage.getItem(LOCAL_STORAGE_KEY)).toBe('true');
+
+    const dismissButton = promotion.getByRole('button');
+    userEvent.click(dismissButton);
+
+    expect(screen.queryByText('Try out the Grafana 8 alerting!')).not.toBeInTheDocument();
+    expect(window.localStorage.getItem(LOCAL_STORAGE_KEY)).toBe('false');
+  });
+
+  it('should not render if previously dismissed', () => {
+    window.localStorage.setItem(LOCAL_STORAGE_KEY, 'false');
+    render(<UnifiedAlertingPromotion />);
+
+    expect(screen.queryByText('Try out the Grafana 8 alerting!')).not.toBeInTheDocument();
+  });
+});
diff --git a/public/app/features/alerting/components/UnifiedAlertingPromotion.tsx b/public/app/features/alerting/components/UnifiedAlertingPromotion.tsx
new file mode 100644
index 00000000..d3a36949
--- /dev/null
+++ b/public/app/features/alerting/components/UnifiedAlertingPromotion.tsx
@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+
+import { Alert } from '@grafana/ui';
+import { useLocalStorage } from 'react-use';
+
+export const LOCAL_STORAGE_KEY = 'grafana.legacyalerting.unifiedalertingpromo';
+
+const UnifiedAlertingPromotion: FC<{}> = () => {
+  const [showUnifiedAlertingPromotion, setShowUnifiedAlertingPromotion] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_KEY,
+    true
+  );
+
+  if (!showUnifiedAlertingPromotion) {
+    return null;
+  }
+
+  return (
+    <Alert
+      severity="info"
+      title="Try out the Grafana 8 alerting!"
+      onRemove={() => setShowUnifiedAlertingPromotion(false)}
+    >
+      <p>
+        You are using the legacy Grafana alerting.
+        <br />
+        While we have no plans of deprecating it any time soon, we invite you to give the improved Grafana 8 alerting a
+        try.
+      </p>
+      <p>
+        See{' '}
+        <a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/difference-old-new/">
+          What’s New with Grafana 8 alerting
+        </a>{' '}
+        to learn more about what‘s new in Grafana 8 alerting or learn{' '}
+        <a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/opt-in/">
+          how to enable the new Grafana 8 alerting feature
+        </a>
+        .
+      </p>
+    </Alert>
+  );
+};
+
+export { UnifiedAlertingPromotion };
diff --git a/public/app/features/alerting/getAlertingValidationMessage.test.ts b/public/app/features/alerting/getAlertingValidationMessage.test.ts
new file mode 100644
index 00000000..6deb2188
--- /dev/null
+++ b/public/app/features/alerting/getAlertingValidationMessage.test.ts
@@ -0,0 +1,193 @@
+import { DataSourceSrv } from '@grafana/runtime';
+import {
+  DataSourceApi,
+  PluginMeta,
+  DataTransformerConfig,
+  DataSourceInstanceSettings,
+  DataSourceRef,
+} from '@grafana/data';
+
+import { ElasticsearchQuery } from '../../plugins/datasource/elasticsearch/types';
+import { getAlertingValidationMessage } from './getAlertingValidationMessage';
+
+describe('getAlertingValidationMessage', () => {
+  describe('when called with some targets containing template variables', () => {
+    it('then it should return false', async () => {
+      let call = 0;
+      const datasource: DataSourceApi = ({
+        meta: ({ alerting: true } as any) as PluginMeta,
+        targetContainsTemplate: () => {
+          if (call === 0) {
+            call++;
+            return true;
+          }
+          return false;
+        },
+        name: 'some name',
+        uid: 'some uid',
+      } as any) as DataSourceApi;
+      const getMock = jest.fn().mockResolvedValue(datasource);
+      const datasourceSrv: DataSourceSrv = {
+        get: (ref: DataSourceRef) => {
+          return getMock(ref.uid);
+        },
+        getList(): DataSourceInstanceSettings[] {
+          return [];
+        },
+        getInstanceSettings: (() => {}) as any,
+      };
+      const targets: ElasticsearchQuery[] = [
+        { refId: 'A', query: '@hostname:$hostname' },
+        { refId: 'B', query: '@instance:instance' },
+      ];
+      const transformations: DataTransformerConfig[] = [];
+
+      const result = await getAlertingValidationMessage(transformations, targets, datasourceSrv, {
+        uid: datasource.uid,
+      });
+
+      expect(result).toBe('');
+      expect(getMock).toHaveBeenCalledTimes(2);
+      expect(getMock).toHaveBeenCalledWith(datasource.uid);
+    });
+  });
+
+  describe('when called with some targets using a datasource that does not support alerting', () => {
+    it('then it should return false', async () => {
+      const alertingDatasource: DataSourceApi = ({
+        meta: ({ alerting: true } as any) as PluginMeta,
+        targetContainsTemplate: () => false,
+        name: 'alertingDatasource',
+      } as any) as DataSourceApi;
+      const datasource: DataSourceApi = ({
+        meta: ({ alerting: false } as any) as PluginMeta,
+        targetContainsTemplate: () => false,
+        name: 'datasource',
+      } as any) as DataSourceApi;
+
+      const datasourceSrv: DataSourceSrv = {
+        get: (name: string) => {
+          if (name === datasource.name) {
+            return Promise.resolve(datasource);
+          }
+
+          return Promise.resolve(alertingDatasource);
+        },
+        getInstanceSettings: (() => {}) as any,
+        getList(): DataSourceInstanceSettings[] {
+          return [];
+        },
+      };
+      const targets: any[] = [
+        { refId: 'A', query: 'some query', datasource: 'alertingDatasource' },
+        { refId: 'B', query: 'some query', datasource: 'datasource' },
+      ];
+      const transformations: DataTransformerConfig[] = [];
+
+      const result = await getAlertingValidationMessage(transformations, targets, datasourceSrv, {
+        uid: datasource.name,
+      });
+
+      expect(result).toBe('');
+    });
+  });
+
+  describe('when called with all targets containing template variables', () => {
+    it('then it should return false', async () => {
+      const datasource: DataSourceApi = ({
+        meta: ({ alerting: true } as any) as PluginMeta,
+        targetContainsTemplate: () => true,
+        name: 'some name',
+      } as any) as DataSourceApi;
+      const getMock = jest.fn().mockResolvedValue(datasource);
+      const datasourceSrv: DataSourceSrv = {
+        get: (ref: DataSourceRef) => {
+          return getMock(ref.uid);
+        },
+        getInstanceSettings: (() => {}) as any,
+        getList(): DataSourceInstanceSettings[] {
+          return [];
+        },
+      };
+      const targets: ElasticsearchQuery[] = [
+        { refId: 'A', query: '@hostname:$hostname' },
+        { refId: 'B', query: '@instance:$instance' },
+      ];
+      const transformations: DataTransformerConfig[] = [];
+
+      const result = await getAlertingValidationMessage(transformations, targets, datasourceSrv, {
+        uid: datasource.name,
+      });
+
+      expect(result).toBe('Template variables are not supported in alert queries');
+      expect(getMock).toHaveBeenCalledTimes(2);
+      expect(getMock).toHaveBeenCalledWith(datasource.name);
+    });
+  });
+
+  describe('when called with all targets using a datasource that does not support alerting', () => {
+    it('then it should return false', async () => {
+      const datasource: DataSourceApi = ({
+        meta: ({ alerting: false } as any) as PluginMeta,
+        targetContainsTemplate: () => false,
+        name: 'some name',
+        uid: 'theid',
+      } as any) as DataSourceApi;
+      const getMock = jest.fn().mockResolvedValue(datasource);
+      const datasourceSrv: DataSourceSrv = {
+        get: (ref: DataSourceRef) => {
+          return getMock(ref.uid);
+        },
+        getInstanceSettings: (() => {}) as any,
+        getList(): DataSourceInstanceSettings[] {
+          return [];
+        },
+      };
+      const targets: ElasticsearchQuery[] = [
+        { refId: 'A', query: '@hostname:hostname' },
+        { refId: 'B', query: '@instance:instance' },
+      ];
+      const transformations: DataTransformerConfig[] = [];
+
+      const result = await getAlertingValidationMessage(transformations, targets, datasourceSrv, {
+        uid: datasource.uid,
+      });
+
+      expect(result).toBe('The datasource does not support alerting queries');
+      expect(getMock).toHaveBeenCalledTimes(2);
+      expect(getMock).toHaveBeenCalledWith(datasource.uid);
+    });
+  });
+
+  describe('when called with transformations', () => {
+    it('then it should return false', async () => {
+      const datasource: DataSourceApi = ({
+        meta: ({ alerting: true } as any) as PluginMeta,
+        targetContainsTemplate: () => false,
+        name: 'some name',
+      } as any) as DataSourceApi;
+      const getMock = jest.fn().mockResolvedValue(datasource);
+      const datasourceSrv: DataSourceSrv = {
+        get: (ref: DataSourceRef) => {
+          return getMock(ref.uid);
+        },
+        getInstanceSettings: (() => {}) as any,
+        getList(): DataSourceInstanceSettings[] {
+          return [];
+        },
+      };
+      const targets: ElasticsearchQuery[] = [
+        { refId: 'A', query: '@hostname:hostname' },
+        { refId: 'B', query: '@instance:instance' },
+      ];
+      const transformations: DataTransformerConfig[] = [{ id: 'A', options: null }];
+
+      const result = await getAlertingValidationMessage(transformations, targets, datasourceSrv, {
+        uid: datasource.uid,
+      });
+
+      expect(result).toBe('Transformations are not supported in alert queries');
+      expect(getMock).toHaveBeenCalledTimes(0);
+    });
+  });
+});
diff --git a/public/app/features/alerting/getAlertingValidationMessage.ts b/public/app/features/alerting/getAlertingValidationMessage.ts
new file mode 100644
index 00000000..52184d0d
--- /dev/null
+++ b/public/app/features/alerting/getAlertingValidationMessage.ts
@@ -0,0 +1,48 @@
+import { DataQuery, DataSourceRef, DataTransformerConfig } from '@grafana/data';
+import { DataSourceSrv } from '@grafana/runtime';
+
+export const getDefaultCondition = () => ({
+  type: 'query',
+  query: { params: ['A', '5m', 'now'] },
+  reducer: { type: 'avg', params: [] as any[] },
+  evaluator: { type: 'gt', params: [null] as any[] },
+  operator: { type: 'and' },
+});
+
+export const getAlertingValidationMessage = async (
+  transformations: DataTransformerConfig[] | undefined,
+  targets: DataQuery[],
+  datasourceSrv: DataSourceSrv,
+  datasource: DataSourceRef | null
+): Promise<string> => {
+  if (targets.length === 0) {
+    return 'Could not find any metric queries';
+  }
+
+  if (transformations && transformations.length) {
+    return 'Transformations are not supported in alert queries';
+  }
+
+  let alertingNotSupported = 0;
+  let templateVariablesNotSupported = 0;
+
+  for (const target of targets) {
+    const dsRef = target.datasource || datasource;
+    const ds = await datasourceSrv.get(dsRef);
+    if (!ds.meta.alerting) {
+      alertingNotSupported++;
+    } else if (ds.targetContainsTemplate && ds.targetContainsTemplate(target)) {
+      templateVariablesNotSupported++;
+    }
+  }
+
+  if (alertingNotSupported === targets.length) {
+    return 'The datasource does not support alerting queries';
+  }
+
+  if (templateVariablesNotSupported === targets.length) {
+    return 'Template variables are not supported in alert queries';
+  }
+
+  return '';
+};
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
new file mode 100644
index 00000000..6a4aceff
--- /dev/null
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -0,0 +1,244 @@
+<div ng-if="ctrl.panel.alert">
+  <div class="alert alert-error m-b-2" ng-show="ctrl.error">
+    <icon name="'exclamation-triangle'"></icon> {{ctrl.error}}
+  </div>
+
+  <div class="gf-form-group">
+    <h4 class="section-heading">Rule</h4>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <span class="gf-form-label width-6">Name</span>
+        <input type="text" class="gf-form-input width-20 gf-form-input--has-help-icon" ng-model="ctrl.alert.name" />
+        <info-popover mode="right-absolute">
+          If you want to apply templating to the alert rule name, you must use the following syntax - ${Label}
+        </info-popover>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label width-9">Evaluate every</span>
+        <input
+          class="gf-form-input max-width-6"
+          type="text"
+          ng-model="ctrl.alert.frequency"
+          ng-blur="ctrl.checkFrequency()"
+        />
+      </div>
+      <div class="gf-form max-width-11">
+        <label class="gf-form-label width-5">For</label>
+        <input
+          type="text"
+          class="gf-form-input max-width-6 gf-form-input--has-help-icon"
+          ng-model="ctrl.alert.for"
+          spellcheck="false"
+          placeholder="5m"
+          ng-pattern="/(^\d+([dhms])$)|(0)|(^$)/"
+        />
+        <info-popover mode="right-absolute">
+          If an alert rule has a configured and the query violates the configured threshold, then it goes from OK
+          to Pending. Grafana does not send any notifications for that change. Once the alert rule has been
+          firing for more than For duration, then the alert changes to Alerting and sends alert notifications.
+        </info-popover>
+      </div>
+    </div>
+    <div class="gf-form" ng-if="ctrl.frequencyWarning">
+      <label class="gf-form-label text-warning">
+        <icon name="'exclamation-triangle'"></icon> {{ctrl.frequencyWarning}}
+      </label>
+    </div>
+  </div>
+
+  <div class="gf-form-group">
+    <h4 class="section-heading">Conditions</h4>
+    <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
+      <div class="gf-form">
+        <metric-segment-model
+          css-class="query-keyword width-5"
+          ng-if="$index"
+          property="conditionModel.operator.type"
+          options="ctrl.evalOperators"
+          custom="false"
+        ></metric-segment-model>
+        <span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
+      </div>
+      <div class="gf-form">
+        <query-part-editor
+          class="gf-form-label query-part width-9"
+          part="conditionModel.reducerPart"
+          handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)"
+        >
+        </query-part-editor>
+        <span class="gf-form-label query-keyword">OF</span>
+      </div>
+      <div class="gf-form">
+        <query-part-editor
+          class="gf-form-label query-part"
+          part="conditionModel.queryPart"
+          handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)"
+        >
+        </query-part-editor>
+      </div>
+      <div class="gf-form">
+        <metric-segment-model
+          property="conditionModel.evaluator.type"
+          options="ctrl.evalFunctions"
+          custom="false"
+          css-class="query-keyword"
+          on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"
+        ></metric-segment-model>
+        <input
+          class="gf-form-input max-width-9"
+          type="number"
+          step="any"
+          ng-hide="conditionModel.evaluator.params.length === 0"
+          ng-model="conditionModel.evaluator.params[0]"
+          ng-change="ctrl.evaluatorParamsChanged()"
+        />
+        <label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
+        <input
+          class="gf-form-input max-width-9"
+          type="number"
+          step="any"
+          ng-if="conditionModel.evaluator.params.length === 2"
+          ng-model="conditionModel.evaluator.params[1]"
+          ng-change="ctrl.evaluatorParamsChanged()"
+        />
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label">
+          <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
+            <icon name="'trash-alt'"></icon>
+          </a>
+        </label>
+      </div>
+    </div>
+
+    <div class="gf-form">
+      <label class="gf-form-label dropdown">
+        <a class="pointer dropdown-toggle" data-toggle="dropdown">
+          <icon name="'plus-circle'"></icon>
+        </a>
+        <ul class="dropdown-menu" role="menu">
+          <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
+            <a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
+          </li>
+        </ul>
+      </label>
+    </div>
+  </div>
+
+  <div class="gf-form-group">
+    <h4 class="section-heading">No data and error handling</h4>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <span class="gf-form-label width-15">If no data or all values are null</span>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label query-keyword">set state to</span>
+        <div class="gf-form-select-wrapper">
+          <select
+            class="gf-form-input"
+            ng-model="ctrl.alert.noDataState"
+            ng-options="f.value as f.text for f in ctrl.noDataModes"
+          >
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <span class="gf-form-label width-15">If execution error or timeout</span>
+      </div>
+      <div class="gf-form">
+        <span class="gf-form-label query-keyword">set state to</span>
+        <div class="gf-form-select-wrapper">
+          <select
+            class="gf-form-input"
+            ng-model="ctrl.alert.executionErrorState"
+            ng-options="f.value as f.text for f in ctrl.executionErrorModes"
+          >
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h4 class="section-heading">Notifications</h4>
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-8">Send to</span>
+    </div>
+    <div class="gf-form" ng-repeat="nc in ctrl.alertNotifications">
+      <span class="gf-form-label">
+        <icon name="'{{nc.iconClass}}'"></icon>
+         {{nc.name}} <span ng-if="nc.isDefault">(default)</span>
+        <icon
+          name="'times'"
+          class="pointer muted"
+          ng-click="ctrl.removeNotification(nc)"
+          ng-if="nc.isDefault === false"
+        ></icon>
+      </span>
+    </div>
+    <div class="gf-form">
+      <metric-segment
+        segment="ctrl.addNotificationSegment"
+        get-options="ctrl.getNotifications()"
+        on-change="ctrl.notificationAdded()"
+      ></metric-segment>
+    </div>
+  </div>
+  <div class="gf-form gf-form--v-stretch">
+    <span class="gf-form-label width-8">Message</span>
+    <textarea
+      class="gf-form-input gf-form-input--has-help-icon"
+      rows="10"
+      ng-model="ctrl.alert.message"
+      placeholder="Notification message details..."
+    >

+ + If you want to apply templating to the alert rule name, use the following syntax - ${Label} + +

+ Tags +

+ {{ name }} + + + + + + +

+ + +

+ + + Add Tag + + +

diff --git a/public/app/features/alerting/routes.tsx b/public/app/features/alerting/routes.tsx new file mode 100644 index 00000000..9254e343 --- /dev/null +++ b/public/app/features/alerting/routes.tsx @@ -0,0 +1,174 @@ +import React from 'react'; +import { Redirect } from 'react-router-dom'; +import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport'; +import { config } from 'app/core/config'; +import { RouteDescriptor } from 'app/core/navigation/types'; + +const alertingRoutes: RouteDescriptor[] = [ + { + path: '/alerting', + // eslint-disable-next-line react/display-name + component: () => , + }, + { + path: '/alerting/list', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertRuleListIndex" */ 'app/features/alerting/AlertRuleListIndex') + ), + }, + { + path: '/alerting/ng/list', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertRuleList" */ 'app/features/alerting/AlertRuleList') + ), + }, + { + path: '/alerting/routes', + roles: () => ['Admin', 'Editor'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertAmRoutes" */ 'app/features/alerting/unified/AmRoutes') + ), + }, + { + path: '/alerting/routes/mute-timing/new', + roles: () => ['Admin', 'Editor'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "MuteTimings" */ 'app/features/alerting/unified/MuteTimings') + ), + }, + { + path: '/alerting/routes/mute-timing/edit', + roles: () => ['Admin', 'Editor'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "MuteTimings" */ 'app/features/alerting/unified/MuteTimings') + ), + }, + { + path: '/alerting/silences', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertSilences" */ 'app/features/alerting/unified/Silences') + ), + }, + { + path: '/alerting/silence/new', + roles: () => ['Editor', 'Admin'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertSilences" */ 'app/features/alerting/unified/Silences') + ), + }, + { + path: '/alerting/silence/:id/edit', + roles: () => ['Editor', 'Admin'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertSilences" */ 'app/features/alerting/unified/Silences') + ), + }, + { + path: '/alerting/notifications', + roles: config.unifiedAlertingEnabled ? () => ['Editor', 'Admin'] : undefined, + component: SafeDynamicImport( + () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex') + ), + }, + { + path: '/alerting/notifications/templates/new', + roles: () => ['Editor', 'Admin'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex') + ), + }, + { + path: '/alerting/notifications/templates/:id/edit', + roles: () => ['Editor', 'Admin'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex') + ), + }, + { + path: '/alerting/notifications/receivers/new', + roles: () => ['Editor', 'Admin'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex') + ), + }, + { + path: '/alerting/notifications/receivers/:id/edit', + roles: () => ['Editor', 'Admin'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex') + ), + }, + { + path: '/alerting/notifications/global-config', + roles: () => ['Admin', 'Editor'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/NotificationsIndex') + ), + }, + { + path: '/alerting/notification/new', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "NewNotificationChannel" */ 'app/features/alerting/NewNotificationChannelPage') + ), + }, + { + path: '/alerting/notification/:id/edit', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "EditNotificationChannel"*/ 'app/features/alerting/EditNotificationChannelPage') + ), + }, + { + path: '/alerting/groups/', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertGroups" */ 'app/features/alerting/unified/AlertGroups') + ), + }, + { + path: '/alerting/new', + pageClass: 'page-alerting', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertingRuleForm"*/ 'app/features/alerting/unified/RuleEditor') + ), + }, + { + path: '/alerting/:id/edit', + pageClass: 'page-alerting', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertingRuleForm"*/ 'app/features/alerting/unified/RuleEditor') + ), + }, + { + path: '/alerting/:sourceName/:id/view', + pageClass: 'page-alerting', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertingRule"*/ 'app/features/alerting/unified/RuleViewer') + ), + }, + { + path: '/alerting/:sourceName/:name/find', + pageClass: 'page-alerting', + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertingRedirectToRule"*/ 'app/features/alerting/unified/RedirectToRuleViewer') + ), + }, + { + path: '/alerting/admin', + roles: () => ['Admin'], + component: SafeDynamicImport( + () => import(/* webpackChunkName: "AlertingAdmin" */ 'app/features/alerting/unified/Admin') + ), + }, +]; + +export function getAlertingRoutes(cfg = config): RouteDescriptor[] { + if (cfg.alertingEnabled || cfg.unifiedAlertingEnabled) { + return alertingRoutes; + } + + return alertingRoutes.map((route) => ({ + ...route, + component: SafeDynamicImport( + () => import(/* webpackChunkName: "Alerting feature toggle page"*/ 'app/features/alerting/FeatureTogglePage') + ), + })); +} diff --git a/public/app/features/alerting/state/ThresholdMapper.test.ts b/public/app/features/alerting/state/ThresholdMapper.test.ts new file mode 100644 index 00000000..df70c654 --- /dev/null +++ b/public/app/features/alerting/state/ThresholdMapper.test.ts @@ -0,0 +1,138 @@ +import { hiddenReducerTypes, ThresholdMapper } from './ThresholdMapper'; +import alertDef from './alertDef'; + +const visibleReducerTypes = alertDef.reducerTypes + .filter(({ value }) => hiddenReducerTypes.indexOf(value) === -1) + .map(({ value }) => value); + +describe('ThresholdMapper', () => { + describe('with greater than evaluator', () => { + it('can map query conditions to thresholds', () => { + const panel: any = { + type: 'graph', + options: { alertThresholds: true }, + alert: { + conditions: [ + { + type: 'query', + evaluator: { type: 'gt', params: [100] }, + }, + ], + }, + }; + + const updated = ThresholdMapper.alertToGraphThresholds(panel); + expect(updated).toBe(true); + expect(panel.thresholds[0].op).toBe('gt'); + expect(panel.thresholds[0].value).toBe(100); + }); + }); + + describe('with outside range evaluator', () => { + it('can map query conditions to thresholds', () => { + const panel: any = { + type: 'graph', + options: { alertThresholds: true }, + alert: { + conditions: [ + { + type: 'query', + evaluator: { type: 'outside_range', params: [100, 200] }, + }, + ], + }, + }; + + const updated = ThresholdMapper.alertToGraphThresholds(panel); + expect(updated).toBe(true); + expect(panel.thresholds[0].op).toBe('lt'); + expect(panel.thresholds[0].value).toBe(100); + + expect(panel.thresholds[1].op).toBe('gt'); + expect(panel.thresholds[1].value).toBe(200); + }); + }); + + describe('with inside range evaluator', () => { + it('can map query conditions to thresholds', () => { + const panel: any = { + type: 'graph', + options: { alertThresholds: true }, + alert: { + conditions: [ + { + type: 'query', + evaluator: { type: 'within_range', params: [100, 200] }, + }, + ], + }, + }; + + const updated = ThresholdMapper.alertToGraphThresholds(panel); + expect(updated).toBe(true); + expect(panel.thresholds[0].op).toBe('gt'); + expect(panel.thresholds[0].value).toBe(100); + + expect(panel.thresholds[1].op).toBe('lt'); + expect(panel.thresholds[1].value).toBe(200); + }); + }); + + visibleReducerTypes.forEach((type) => { + describe(`with {${type}} reducer`, () => { + it('visible should be true', () => { + const panel = getPanel({ reducerType: type }); + + const updated = ThresholdMapper.alertToGraphThresholds(panel); + + expect(updated).toBe(true); + expect(panel.thresholds[0]).toEqual({ + value: 100, + op: 'gt', + fill: true, + line: true, + colorMode: 'critical', + visible: true, + }); + }); + }); + }); + + hiddenReducerTypes.forEach((type) => { + describe(`with {${type}} reducer`, () => { + it('visible should be false', () => { + const panel = getPanel({ reducerType: type }); + + const updated = ThresholdMapper.alertToGraphThresholds(panel); + + expect(updated).toBe(true); + expect(panel.thresholds[0]).toEqual({ + value: 100, + op: 'gt', + fill: true, + line: true, + colorMode: 'critical', + visible: false, + }); + }); + }); + }); +}); + +function getPanel({ reducerType }: { reducerType?: string } = {}) { + const panel: any = { + type: 'graph', + options: { alertThreshold: true }, + alert: { + conditions: [ + { + type: 'query', + evaluator: { type: 'gt', params: [100] }, + reducer: { type: reducerType }, + }, + ], + }, + }; + + return panel; +} diff --git a/public/app/features/alerting/state/ThresholdMapper.ts b/public/app/features/alerting/state/ThresholdMapper.ts new file mode 100644 index 00000000..5e089484 --- /dev/null +++ b/public/app/features/alerting/state/ThresholdMapper.ts @@ -0,0 +1,72 @@ +import { config } from 'app/core/config'; +import { PanelModel } from 'app/features/dashboard/state'; + +export const hiddenReducerTypes = ['percent_diff', 'percent_diff_abs']; +export class ThresholdMapper { + static alertToGraphThresholds(panel: PanelModel) { + if (!panel.alert || config.unifiedAlertingEnabled) { + return false; // no update when no alerts + } + + for (let i = 0; i < panel.alert.conditions.length; i++) { + const condition = panel.alert.conditions[i]; + if (condition.type !== 'query') { + continue; + } + + const evaluator = condition.evaluator; + const thresholds: any[] = (panel.thresholds = []); + const visible = hiddenReducerTypes.indexOf(condition.reducer?.type) === -1; + + switch (evaluator.type) { + case 'gt': { + const value = evaluator.params[0]; + thresholds.push({ value: value, op: 'gt', visible }); + break; + } + case 'lt': { + const value = evaluator.params[0]; + thresholds.push({ value: value, op: 'lt', visible }); + break; + } + case 'outside_range': { + const value1 = evaluator.params[0]; + const value2 = evaluator.params[1]; + + if (value1 > value2) { + thresholds.push({ value: value1, op: 'gt', visible }); + thresholds.push({ value: value2, op: 'lt', visible }); + } else { + thresholds.push({ value: value1, op: 'lt', visible }); + thresholds.push({ value: value2, op: 'gt', visible }); + } + + break; + } + case 'within_range': { + const value1 = evaluator.params[0]; + const value2 = evaluator.params[1]; + + if (value1 > value2) { + thresholds.push({ value: value1, op: 'lt', visible }); + thresholds.push({ value: value2, op: 'gt', visible }); + } else { + thresholds.push({ value: value1, op: 'gt', visible }); + thresholds.push({ value: value2, op: 'lt', visible }); + } + break; + } + } + break; + } + + for (const t of panel.thresholds) { + t.fill = panel.options.alertThreshold; + t.line = panel.options.alertThreshold; + t.colorMode = 'critical'; + } + + const updated = true; + return updated; + } +} diff --git a/public/app/features/alerting/state/actions.ts b/public/app/features/alerting/state/actions.ts new file mode 100644 index 00000000..99b65bbd --- /dev/null +++ b/public/app/features/alerting/state/actions.ts @@ -0,0 +1,74 @@ +import { AppEvents } from '@grafana/data'; +import { getBackendSrv, locationService } from '@grafana/runtime'; +import { appEvents } from 'app/core/core'; +import { loadAlertRules, loadedAlertRules, notificationChannelLoaded, setNotificationChannels } from './reducers'; +import { AlertRuleDTO, NotifierDTO, ThunkResult } from 'app/types'; + +export function getAlertRulesAsync(options: { state: string }): ThunkResult { + return async (dispatch) => { + dispatch(loadAlertRules()); + const rules: AlertRuleDTO[] = await getBackendSrv().get('/api/alerts', options); + dispatch(loadedAlertRules(rules)); + }; +} + +export function togglePauseAlertRule(id: number, options: { paused: boolean }): ThunkResult { + return async (dispatch) => { + await getBackendSrv().post(`/api/alerts/${id}/pause`, options); + const stateFilter = locationService.getSearchObject().state || 'all'; + dispatch(getAlertRulesAsync({ state: stateFilter.toString() })); + }; +} + +export function createNotificationChannel(data: any): ThunkResult { + return async (dispatch) => { + try { + await getBackendSrv().post(`/api/alert-notifications`, data); + appEvents.emit(AppEvents.alertSuccess, ['Notification created']); + locationService.push('/alerting/notifications'); + } catch (error) { + appEvents.emit(AppEvents.alertError, [error.data.error]); + } + }; +} + +export function updateNotificationChannel(data: any): ThunkResult { + return async (dispatch) => { + try { + await getBackendSrv().put(`/api/alert-notifications/${data.id}`, data); + appEvents.emit(AppEvents.alertSuccess, ['Notification updated']); + } catch (error) { + appEvents.emit(AppEvents.alertError, [error.data.error]); + } + }; +} + +export function testNotificationChannel(data: any): ThunkResult { + return async (dispatch, getState) => { + const channel = getState().notificationChannel.notificationChannel; + await getBackendSrv().post('/api/alert-notifications/test', { id: channel.id, ...data }); + }; +} + +export function loadNotificationTypes(): ThunkResult { + return async (dispatch) => { + const alertNotifiers: NotifierDTO[] = await getBackendSrv().get(`/api/alert-notifiers`); + + const notificationTypes = alertNotifiers.sort((o1, o2) => { + if (o1.name > o2.name) { + return 1; + } + return -1; + }); + + dispatch(setNotificationChannels(notificationTypes)); + }; +} + +export function loadNotificationChannel(id: number): ThunkResult { + return async (dispatch) => { + await dispatch(loadNotificationTypes()); + const notificationChannel = await getBackendSrv().get(`/api/alert-notifications/${id}`); + dispatch(notificationChannelLoaded(notificationChannel)); + }; +} diff --git a/public/app/features/alerting/state/alertDef.ts b/public/app/features/alerting/state/alertDef.ts new file mode 100644 index 00000000..1e482568 --- /dev/null +++ b/public/app/features/alerting/state/alertDef.ts @@ -0,0 +1,208 @@ +import { isArray, reduce } from 'lodash'; +import { QueryPartDef, QueryPart } from 'app/angular/components/query_part'; + +const alertQueryDef = new QueryPartDef({ + type: 'query', + params: [ + { name: 'queryRefId', type: 'string', dynamicLookup: true }, + { + name: 'from', + type: 'string', + options: ['10s', '1m', '5m', '10m', '15m', '1h', '2h', '6h', '12h', '24h', '48h'], + }, + { name: 'to', type: 'string', options: ['now', 'now-1m', 'now-5m', 'now-10m', 'now-1h'] }, + ], + defaultParams: ['#A', '15m', 'now', 'avg'], +}); + +const conditionTypes = [{ text: 'Query', value: 'query' }]; + +const alertStateSortScore = { + alerting: 1, + firing: 1, + no_data: 2, + pending: 3, + ok: 4, + paused: 5, + inactive: 5, +}; + +export enum EvalFunction { + 'IsAbove' = 'gt', + 'IsBelow' = 'lt', + 'IsOutsideRange' = 'outside_range', + 'IsWithinRange' = 'within_range', + 'HasNoValue' = 'no_value', +} + +const evalFunctions = [ + { value: EvalFunction.IsAbove, text: 'IS ABOVE' }, + { value: EvalFunction.IsBelow, text: 'IS BELOW' }, + { value: EvalFunction.IsOutsideRange, text: 'IS OUTSIDE RANGE' }, + { value: EvalFunction.IsWithinRange, text: 'IS WITHIN RANGE' }, + { value: EvalFunction.HasNoValue, text: 'HAS NO VALUE' }, +]; + +const evalOperators = [ + { text: 'OR', value: 'or' }, + { text: 'AND', value: 'and' }, +]; + +const reducerTypes = [ + { text: 'avg()', value: 'avg' }, + { text: 'min()', value: 'min' }, + { text: 'max()', value: 'max' }, + { text: 'sum()', value: 'sum' }, + { text: 'count()', value: 'count' }, + { text: 'last()', value: 'last' }, + { text: 'median()', value: 'median' }, + { text: 'diff()', value: 'diff' }, + { text: 'diff_abs()', value: 'diff_abs' }, + { text: 'percent_diff()', value: 'percent_diff' }, + { text: 'percent_diff_abs()', value: 'percent_diff_abs' }, + { text: 'count_non_null()', value: 'count_non_null' }, +]; + +const noDataModes = [ + { text: 'Alerting', value: 'alerting' }, + { text: 'No Data', value: 'no_data' }, + { text: 'Keep Last State', value: 'keep_state' }, + { text: 'Ok', value: 'ok' }, +]; + +const executionErrorModes = [ + { text: 'Alerting', value: 'alerting' }, + { text: 'Keep Last State', value: 'keep_state' }, +]; + +function createReducerPart(model: any) { + const def = new QueryPartDef({ type: model.type, defaultParams: [] }); + return new QueryPart(model, def); +} + +function getStateDisplayModel(state: string) { + const normalizedState = state.toLowerCase().replace(/_/g, ''); + + switch (normalizedState) { + case 'normal': + case 'ok': { + return { + text: 'OK', + iconClass: 'heart', + stateClass: 'alert-state-ok', + }; + } + case 'alerting': { + return { + text: 'ALERTING', + iconClass: 'heart-break', + stateClass: 'alert-state-critical', + }; + } + case 'nodata': { + return { + text: 'NO DATA', + iconClass: 'question-circle', + stateClass: 'alert-state-warning', + }; + } + case 'paused': { + return { + text: 'PAUSED', + iconClass: 'pause', + stateClass: 'alert-state-paused', + }; + } + case 'pending': { + return { + text: 'PENDING', + iconClass: 'hourglass', + stateClass: 'alert-state-warning', + }; + } + case 'unknown': { + return { + text: 'UNKNOWN', + iconClass: 'question-circle', + stateClass: '.alert-state-paused', + }; + } + + case 'firing': { + return { + text: 'FIRING', + iconClass: 'fire', + stateClass: '', + }; + } + + case 'inactive': { + return { + text: 'INACTIVE', + iconClass: 'check', + stateClass: '', + }; + } + + case 'error': { + return { + text: 'ERROR', + iconClass: 'heart-break', + stateClass: 'alert-state-critical', + }; + } + } + + throw { message: 'Unknown alert state' }; +} + +function joinEvalMatches(matches: any, separator: string) { + return reduce( + matches, + (res, ev) => { + if (ev.metric !== undefined && ev.value !== undefined) { + res.push(ev.metric + '=' + ev.value); + } + + // For backwards compatibility . Should be be able to remove this after ~2017-06-01 + if (ev.Metric !== undefined && ev.Value !== undefined) { + res.push(ev.Metric + '=' + ev.Value); + } + + return res; + }, + [] as string[] + ).join(separator); +} + +function getAlertAnnotationInfo(ah: any) { + // backward compatibility, can be removed in grafana 5.x + // old way stored evalMatches in data property directly, + // new way stores it in evalMatches property on new data object + + if (isArray(ah.data)) { + return joinEvalMatches(ah.data, ', '); + } else if (isArray(ah.data.evalMatches)) { + return joinEvalMatches(ah.data.evalMatches, ', '); + } + + if (ah.data.error) { + return 'Error: ' + ah.data.error; + } + + return ''; +} + +export default { + alertQueryDef: alertQueryDef, + getStateDisplayModel: getStateDisplayModel, + conditionTypes: conditionTypes, + evalFunctions: evalFunctions, + evalOperators: evalOperators, + noDataModes: noDataModes, + executionErrorModes: executionErrorModes, + reducerTypes: reducerTypes, + createReducerPart: createReducerPart, + getAlertAnnotationInfo: getAlertAnnotationInfo, + alertStateSortScore: alertStateSortScore, +}; diff --git a/public/app/features/alerting/state/reducers.test.ts b/public/app/features/alerting/state/reducers.test.ts new file mode 100644 index 00000000..13b9accc --- /dev/null +++ b/public/app/features/alerting/state/reducers.test.ts @@ -0,0 +1,423 @@ +import { dateTime } from '@grafana/data'; +import { + alertRulesReducer, + initialChannelState, + initialState, + loadAlertRules, + loadedAlertRules, + notificationChannelReducer, + setSearchQuery, + notificationChannelLoaded, +} from './reducers'; +import { AlertRuleDTO, AlertRulesState, NotificationChannelState, NotifierDTO } from 'app/types'; +import { reducerTester } from '../../../../test/core/redux/reducerTester'; + +describe('Alert rules', () => { + const realDateNow = Date.now.bind(global.Date); + const anchorUnix = dateTime('2019-09-04T10:01:01+02:00').valueOf(); + const dateNowStub = jest.fn(() => anchorUnix); + global.Date.now = dateNowStub; + + const newStateDate = dateTime().subtract(1, 'y'); + const newStateDateFormatted = newStateDate.format('YYYY-MM-DD'); + const newStateDateAge = newStateDate.fromNow(true); + const payload: AlertRuleDTO[] = [ + { + id: 2, + dashboardId: 7, + dashboardUid: 'ggHbN42mk', + dashboardSlug: 'alerting-with-testdata', + panelId: 4, + name: 'TestData - Always Alerting', + state: 'alerting', + newStateDate: `${newStateDateFormatted}T10:00:30+02:00`, + evalDate: '0001-01-01T00:00:00Z', + evalData: { evalMatches: [{ metric: 'A-series', tags: null, value: 215 }] }, + executionError: '', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + id: 1, + dashboardId: 7, + dashboardUid: 'ggHbN42mk', + dashboardSlug: 'alerting-with-testdata', + panelId: 3, + name: 'TestData - Always OK', + state: 'ok', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + evalDate: '0001-01-01T00:00:00Z', + evalData: {}, + executionError: '', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + id: 3, + dashboardId: 7, + dashboardUid: 'ggHbN42mk', + dashboardSlug: 'alerting-with-testdata', + panelId: 3, + name: 'TestData - ok', + state: 'ok', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + evalDate: '0001-01-01T00:00:00Z', + evalData: {}, + executionError: 'error', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + id: 4, + dashboardId: 7, + dashboardUid: 'ggHbN42mk', + dashboardSlug: 'alerting-with-testdata', + panelId: 3, + name: 'TestData - Paused', + state: 'paused', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + evalDate: '0001-01-01T00:00:00Z', + evalData: {}, + executionError: 'error', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + id: 5, + dashboardId: 7, + dashboardUid: 'ggHbN42mk', + dashboardSlug: 'alerting-with-testdata', + panelId: 3, + name: 'TestData - Ok', + state: 'ok', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + evalDate: '0001-01-01T00:00:00Z', + evalData: { + noData: true, + }, + executionError: 'error', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + ]; + + afterAll(() => { + global.Date.now = realDateNow; + }); + + describe('when loadAlertRules is dispatched', () => { + it('then state should be correct', () => { + reducerTester() + .givenReducer(alertRulesReducer, { ...initialState }) + .whenActionIsDispatched(loadAlertRules()) + .thenStateShouldEqual({ ...initialState, isLoading: true }); + }); + }); + + describe('when setSearchQuery is dispatched', () => { + it('then state should be correct', () => { + reducerTester() + .givenReducer(alertRulesReducer, { ...initialState }) + .whenActionIsDispatched(setSearchQuery('query')) + .thenStateShouldEqual({ ...initialState, searchQuery: 'query' }); + }); + }); + + describe('when loadedAlertRules is dispatched', () => { + it('then state should be correct', () => { + reducerTester() + .givenReducer(alertRulesReducer, { ...initialState, isLoading: true }) + .whenActionIsDispatched(loadedAlertRules(payload)) + .thenStateShouldEqual({ + ...initialState, + isLoading: false, + items: [ + { + dashboardId: 7, + dashboardSlug: 'alerting-with-testdata', + dashboardUid: 'ggHbN42mk', + evalData: { + evalMatches: [ + { + metric: 'A-series', + tags: null, + value: 215, + }, + ], + }, + evalDate: '0001-01-01T00:00:00Z', + executionError: '', + id: 2, + name: 'TestData - Always Alerting', + newStateDate: `${newStateDateFormatted}T10:00:30+02:00`, + panelId: 4, + state: 'alerting', + stateAge: newStateDateAge, + stateClass: 'alert-state-critical', + stateIcon: 'heart-break', + stateText: 'ALERTING', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + dashboardId: 7, + dashboardSlug: 'alerting-with-testdata', + dashboardUid: 'ggHbN42mk', + evalData: {}, + evalDate: '0001-01-01T00:00:00Z', + executionError: '', + id: 1, + name: 'TestData - Always OK', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + panelId: 3, + state: 'ok', + stateAge: newStateDateAge, + stateClass: 'alert-state-ok', + stateIcon: 'heart', + stateText: 'OK', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + dashboardId: 7, + dashboardSlug: 'alerting-with-testdata', + dashboardUid: 'ggHbN42mk', + evalData: {}, + evalDate: '0001-01-01T00:00:00Z', + executionError: 'error', + id: 3, + info: 'Execution Error: error', + name: 'TestData - ok', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + panelId: 3, + state: 'ok', + stateAge: newStateDateAge, + stateClass: 'alert-state-ok', + stateIcon: 'heart', + stateText: 'OK', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + dashboardId: 7, + dashboardSlug: 'alerting-with-testdata', + dashboardUid: 'ggHbN42mk', + evalData: {}, + evalDate: '0001-01-01T00:00:00Z', + executionError: 'error', + id: 4, + name: 'TestData - Paused', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + panelId: 3, + state: 'paused', + stateAge: newStateDateAge, + stateClass: 'alert-state-paused', + stateIcon: 'pause', + stateText: 'PAUSED', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + { + dashboardId: 7, + dashboardSlug: 'alerting-with-testdata', + dashboardUid: 'ggHbN42mk', + evalData: { + noData: true, + }, + evalDate: '0001-01-01T00:00:00Z', + executionError: 'error', + id: 5, + info: 'Query returned no data', + name: 'TestData - Ok', + newStateDate: `${newStateDateFormatted}T10:01:01+02:00`, + panelId: 3, + state: 'ok', + stateAge: newStateDateAge, + stateClass: 'alert-state-ok', + stateIcon: 'heart', + stateText: 'OK', + url: '/d/ggHbN42mk/alerting-with-testdata', + }, + ], + }); + }); + }); +}); + +describe('Notification channel', () => { + const notifiers: NotifierDTO[] = [ + { + type: 'webhook', + name: 'webhook', + heading: 'Webhook settings', + description: 'Sends HTTP POST request to a URL', + info: '', + options: [ + { + element: 'input', + inputType: 'text', + label: 'Url', + description: '', + placeholder: '', + propertyName: 'url', + showWhen: { field: '', is: '' }, + required: true, + validationRule: '', + secure: false, + }, + { + element: 'select', + inputType: '', + label: 'Http Method', + description: '', + placeholder: '', + propertyName: 'httpMethod', + selectOptions: [ + { value: 'POST', label: 'POST' }, + { value: 'PUT', label: 'PUT' }, + ], + showWhen: { field: '', is: '' }, + required: false, + validationRule: '', + secure: false, + }, + { + element: 'input', + inputType: 'text', + label: 'Username', + description: '', + placeholder: '', + propertyName: 'username', + showWhen: { field: '', is: '' }, + required: false, + validationRule: '', + secure: false, + }, + { + element: 'input', + inputType: 'password', + label: 'Password', + description: '', + placeholder: '', + propertyName: 'password', + showWhen: { field: '', is: '' }, + required: false, + validationRule: '', + secure: true, + }, + ], + }, + ]; + + describe('Load notification channel', () => { + it('should migrate non secure settings to secure fields', () => { + const payload = { + id: 2, + uid: '9L3FrrHGk', + name: 'Webhook test', + type: 'webhook', + isDefault: false, + sendReminder: false, + disableResolveMessage: false, + frequency: '', + created: '2020-08-28T08:49:24Z', + updated: '2020-08-28T08:49:24Z', + settings: { + autoResolve: true, + httpMethod: 'POST', + password: 'asdf', + severity: 'critical', + uploadImage: true, + url: 'http://localhost.webhook', + username: 'asdf', + }, + }; + + const expected = { + id: 2, + uid: '9L3FrrHGk', + name: 'Webhook test', + type: 'webhook', + isDefault: false, + sendReminder: false, + disableResolveMessage: false, + frequency: '', + created: '2020-08-28T08:49:24Z', + updated: '2020-08-28T08:49:24Z', + secureSettings: { + password: 'asdf', + }, + settings: { + autoResolve: true, + httpMethod: 'POST', + password: '', + severity: 'critical', + uploadImage: true, + url: 'http://localhost.webhook', + username: 'asdf', + }, + }; + + reducerTester() + .givenReducer(notificationChannelReducer, { ...initialChannelState, notifiers: notifiers }) + .whenActionIsDispatched(notificationChannelLoaded(payload)) + .thenStateShouldEqual({ + ...initialChannelState, + notifiers: notifiers, + notificationChannel: expected, + }); + }); + + it('should handle already secure field', () => { + const payload = { + id: 2, + uid: '9L3FrrHGk', + name: 'Webhook test', + type: 'webhook', + isDefault: false, + sendReminder: false, + disableResolveMessage: false, + frequency: '', + created: '2020-08-28T08:49:24Z', + updated: '2020-08-28T08:49:24Z', + secureFields: { + password: true, + }, + settings: { + autoResolve: true, + httpMethod: 'POST', + password: '', + severity: 'critical', + uploadImage: true, + url: 'http://localhost.webhook', + username: 'asdf', + }, + }; + + const expected = { + id: 2, + uid: '9L3FrrHGk', + name: 'Webhook test', + type: 'webhook', + isDefault: false, + sendReminder: false, + disableResolveMessage: false, + frequency: '', + created: '2020-08-28T08:49:24Z', + updated: '2020-08-28T08:49:24Z', + secureFields: { + password: true, + }, + settings: { + autoResolve: true, + httpMethod: 'POST', + password: '', + severity: 'critical', + uploadImage: true, + url: 'http://localhost.webhook', + username: 'asdf', + }, + }; + + reducerTester() + .givenReducer(notificationChannelReducer, { ...initialChannelState, notifiers: notifiers }) + .whenActionIsDispatched(notificationChannelLoaded(payload)) + .thenStateShouldEqual({ + ...initialChannelState, + notifiers: notifiers, + notificationChannel: expected, + }); + }); + }); +}); diff --git a/public/app/features/alerting/state/reducers.ts b/public/app/features/alerting/state/reducers.ts new file mode 100644 index 00000000..9de18c88 --- /dev/null +++ b/public/app/features/alerting/state/reducers.ts @@ -0,0 +1,168 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { dateTime } from '@grafana/data'; +import alertDef from './alertDef'; +import { + AlertRule, + AlertRuleDTO, + AlertRulesState, + NotificationChannelOption, + NotificationChannelState, + NotifierDTO, +} from 'app/types'; +import unifiedAlertingReducer from '../unified/state/reducers'; + +export const initialState: AlertRulesState = { + items: [], + searchQuery: '', + isLoading: false, +}; + +export const initialChannelState: NotificationChannelState = { + notificationChannelTypes: [], + notificationChannel: {}, + notifiers: [], +}; + +function convertToAlertRule(dto: AlertRuleDTO, state: string): AlertRule { + const stateModel = alertDef.getStateDisplayModel(state); + + const rule: AlertRule = { + ...dto, + stateText: stateModel.text, + stateIcon: stateModel.iconClass, + stateClass: stateModel.stateClass, + stateAge: dateTime(dto.newStateDate).fromNow(true), + }; + + if (rule.state !== 'paused') { + if (rule.executionError) { + rule.info = 'Execution Error: ' + rule.executionError; + } + if (rule.evalData && rule.evalData.noData) { + rule.info = 'Query returned no data'; + } + } + + return rule; +} + +const alertRulesSlice = createSlice({ + name: 'alertRules', + initialState, + reducers: { + loadAlertRules: (state) => { + return { ...state, isLoading: true }; + }, + loadedAlertRules: (state, action: PayloadAction): AlertRulesState => { + const alertRules: AlertRuleDTO[] = action.payload; + + const alertRulesViewModel: AlertRule[] = alertRules.map((rule) => { + return convertToAlertRule(rule, rule.state); + }); + + return { ...state, items: alertRulesViewModel, isLoading: false }; + }, + setSearchQuery: (state, action: PayloadAction): AlertRulesState => { + return { ...state, searchQuery: action.payload }; + }, + }, +}); + +const notificationChannelSlice = createSlice({ + name: 'notificationChannel', + initialState: initialChannelState, + reducers: { + setNotificationChannels: (state, action: PayloadAction): NotificationChannelState => { + return { + ...state, + notificationChannelTypes: transformNotifiers(action.payload), + notifiers: action.payload, + }; + }, + notificationChannelLoaded: (state, action: PayloadAction): NotificationChannelState => { + const notificationChannel = action.payload; + const selectedType: NotifierDTO = state.notifiers.find((t) => t.type === notificationChannel.type)!; + const secureChannelOptions = selectedType.options.filter((o: NotificationChannelOption) => o.secure); + /* + If any secure field is in plain text we need to migrate it to use secure field instead. + */ + if ( + secureChannelOptions.length > 0 && + secureChannelOptions.some((o: NotificationChannelOption) => { + return notificationChannel.settings[o.propertyName] !== ''; + }) + ) { + return migrateSecureFields(state, action.payload, secureChannelOptions); + } + + return { ...state, notificationChannel: notificationChannel }; + }, + resetSecureField: (state, action: PayloadAction): NotificationChannelState => { + return { + ...state, + notificationChannel: { + ...state.notificationChannel, + secureFields: { ...state.notificationChannel.secureFields, [action.payload]: false }, + }, + }; + }, + }, +}); + +export const { loadAlertRules, loadedAlertRules, setSearchQuery } = alertRulesSlice.actions; + +export const { + setNotificationChannels, + notificationChannelLoaded, + resetSecureField, +} = notificationChannelSlice.actions; + +export const alertRulesReducer = alertRulesSlice.reducer; +export const notificationChannelReducer = notificationChannelSlice.reducer; + +export default { + alertRules: alertRulesReducer, + notificationChannel: notificationChannelReducer, + unifiedAlerting: unifiedAlertingReducer, +}; + +function migrateSecureFields( + state: NotificationChannelState, + notificationChannel: any, + secureChannelOptions: NotificationChannelOption[] +) { + const cleanedSettings: { [key: string]: string } = {}; + const secureSettings: { [key: string]: string } = {}; + + secureChannelOptions.forEach((option) => { + secureSettings[option.propertyName] = notificationChannel.settings[option.propertyName]; + cleanedSettings[option.propertyName] = ''; + }); + + return { + ...state, + notificationChannel: { + ...notificationChannel, + settings: { ...notificationChannel.settings, ...cleanedSettings }, + secureSettings: { ...secureSettings }, + }, + }; +} + +function transformNotifiers(notifiers: NotifierDTO[]) { + return notifiers + .map((option: NotifierDTO) => { + return { + value: option.type, + label: option.name, + ...option, + typeName: option.type, + }; + }) + .sort((o1, o2) => { + if (o1.name > o2.name) { + return 1; + } + return -1; + }); +} diff --git a/public/app/features/alerting/state/selectors.test.ts b/public/app/features/alerting/state/selectors.test.ts new file mode 100644 index 00000000..a38bb798 --- /dev/null +++ b/public/app/features/alerting/state/selectors.test.ts @@ -0,0 +1,98 @@ +import { getSearchQuery, getAlertRuleItems } from './selectors'; + +describe('Get search query', () => { + it('should get search query', () => { + const state = { searchQuery: 'dashboard' }; + const result = getSearchQuery(state as any); + + expect(result).toEqual(state.searchQuery); + }); +}); + +describe('Get alert rule items', () => { + it('should get alert rule items', () => { + const state = { + alertRules: { + items: [ + { + id: 1, + dashboardId: 1, + panelId: 1, + name: '', + state: '', + stateText: '', + stateIcon: '', + stateClass: '', + stateAge: '', + url: '', + }, + ], + searchQuery: '', + }, + }; + + const result = getAlertRuleItems(state as any); + expect(result.length).toEqual(1); + }); + + it('should filter rule items based on search query', () => { + const state = { + alertRules: { + items: [ + { + id: 1, + dashboardId: 1, + panelId: 1, + name: 'dashboard', + state: '', + stateText: '', + stateIcon: '', + stateClass: '', + stateAge: '', + url: '', + }, + { + id: 2, + dashboardId: 3, + panelId: 1, + name: 'dashboard2', + state: '', + stateText: '', + stateIcon: '', + stateClass: '', + stateAge: '', + url: '', + }, + { + id: 3, + dashboardId: 5, + panelId: 1, + name: 'hello', + state: '', + stateText: '', + stateIcon: '', + stateClass: '', + stateAge: '', + url: '', + }, + { + id: 4, + dashboardId: 7, + panelId: 1, + name: 'test', + state: '', + stateText: 'dashboard', + stateIcon: '', + stateClass: '', + stateAge: '', + url: '', + }, + ], + searchQuery: 'dashboard', + }, + }; + + const result = getAlertRuleItems(state as any); + expect(result.length).toEqual(3); + }); +}); diff --git a/public/app/features/alerting/state/selectors.ts b/public/app/features/alerting/state/selectors.ts new file mode 100644 index 00000000..f51e66ce --- /dev/null +++ b/public/app/features/alerting/state/selectors.ts @@ -0,0 +1,19 @@ +import { AlertRule, AlertRulesState, NotificationChannelState, StoreState } from 'app/types'; + +export const getSearchQuery = (state: AlertRulesState) => state.searchQuery; + +export const getAlertRuleItems = (state: StoreState): AlertRule[] => { + const regex = new RegExp(state.alertRules.searchQuery, 'i'); + + return state.alertRules.items.filter((item) => { + return regex.test(item.name) || regex.test(item.stateText) || regex.test(item.info!); + }); +}; + +export const getNotificationChannel = (state: NotificationChannelState, channelId: number) => { + if (state.notificationChannel.id === channelId) { + return state.notificationChannel; + } + + return null; +}; diff --git a/public/app/features/alerting/unified/Admin.tsx b/public/app/features/alerting/unified/Admin.tsx new file mode 100644 index 00000000..21a534cd --- /dev/null +++ b/public/app/features/alerting/unified/Admin.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { AlertingPageWrapper } from './components/AlertingPageWrapper'; +import AlertmanagerConfig from './components/admin/AlertmanagerConfig'; +import { ExternalAlertmanagers } from './components/admin/ExternalAlertmanagers'; + +export default function Admin(): JSX.Element { + return ( + + + + + ); +} diff --git a/public/app/features/alerting/unified/AlertGroups.test.tsx b/public/app/features/alerting/unified/AlertGroups.test.tsx new file mode 100644 index 00000000..2d6d4e90 --- /dev/null +++ b/public/app/features/alerting/unified/AlertGroups.test.tsx @@ -0,0 +1,151 @@ +import React from 'react'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; +import { render, waitFor } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { fetchAlertGroups } from './api/alertmanager'; +import { byRole, byTestId, byText } from 'testing-library-selector'; +import { configureStore } from 'app/store/configureStore'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import AlertGroups from './AlertGroups'; +import { mockAlertGroup, mockAlertmanagerAlert, mockDataSource, MockDataSourceSrv } from './mocks'; +import { DataSourceType } from './utils/datasource'; +import userEvent from '@testing-library/user-event'; + +jest.mock('./api/alertmanager'); + +const mocks = { + api: { + fetchAlertGroups: typeAsJestMock(fetchAlertGroups), + }, +}; + +const renderAmNotifications = () => { + const store = configureStore(); + + return render( + + + + + + ); +}; + +const dataSources = { + am: mockDataSource({ + name: 'Alertmanager', + type: DataSourceType.Alertmanager, + }), +}; + +const ui = { + group: byTestId('alert-group'), + groupCollapseToggle: byTestId('alert-group-collapse-toggle'), + groupTable: byTestId('alert-group-table'), + row: byTestId('row'), + collapseToggle: byTestId('collapse-toggle'), + silenceButton: byText('Silence'), + sourceButton: byText('See source'), + matcherInput: byTestId('search-query-input'), + groupByContainer: byTestId('group-by-container'), + groupByInput: byRole('combobox', { name: /group by label keys/i }), + clearButton: byRole('button', { name: 'Clear filters' }), +}; + +describe('AlertGroups', () => { + beforeAll(() => { + mocks.api.fetchAlertGroups.mockImplementation(() => { + return Promise.resolve([ + mockAlertGroup({ labels: {}, alerts: [mockAlertmanagerAlert({ labels: { foo: 'bar' } })] }), + mockAlertGroup(), + ]); + }); + }); + + beforeEach(() => { + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + }); + + it('loads and shows groups', async () => { + renderAmNotifications(); + + await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); + + const groups = ui.group.getAll(); + + expect(groups).toHaveLength(2); + expect(groups[0]).toHaveTextContent('No grouping'); + expect(groups[1]).toHaveTextContent('severity=warningregion=US-Central'); + + userEvent.click(ui.groupCollapseToggle.get(groups[0])); + expect(ui.groupTable.get()).toBeDefined(); + + userEvent.click(ui.collapseToggle.get(ui.groupTable.get())); + expect(ui.silenceButton.get(ui.groupTable.get())).toBeDefined(); + expect(ui.sourceButton.get(ui.groupTable.get())).toBeDefined(); + }); + + it('should group by custom grouping', async () => { + const regions = ['NASA', 'EMEA', 'APAC']; + mocks.api.fetchAlertGroups.mockImplementation(() => { + const groups = regions.map((region) => + mockAlertGroup({ + labels: { region }, + alerts: [ + mockAlertmanagerAlert({ labels: { region, appName: 'billing', env: 'production' } }), + mockAlertmanagerAlert({ labels: { region, appName: 'auth', env: 'staging', uniqueLabel: 'true' } }), + mockAlertmanagerAlert({ labels: { region, appName: 'frontend', env: 'production' } }), + ], + }) + ); + return Promise.resolve(groups); + }); + + renderAmNotifications(); + await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); + let groups = ui.group.getAll(); + const groupByInput = ui.groupByInput.get(); + const groupByWrapper = ui.groupByContainer.get(); + + expect(groups).toHaveLength(3); + expect(groups[0]).toHaveTextContent('region=NASA'); + expect(groups[1]).toHaveTextContent('region=EMEA'); + expect(groups[2]).toHaveTextContent('region=APAC'); + + userEvent.type(groupByInput, 'appName{enter}'); + + await waitFor(() => expect(groupByWrapper).toHaveTextContent('appName')); + + groups = ui.group.getAll(); + + await waitFor(() => expect(ui.clearButton.get()).toBeInTheDocument()); + expect(groups).toHaveLength(3); + expect(groups[0]).toHaveTextContent('appName=billing'); + expect(groups[1]).toHaveTextContent('appName=auth'); + expect(groups[2]).toHaveTextContent('appName=frontend'); + + userEvent.click(ui.clearButton.get()); + await waitFor(() => expect(groupByWrapper).not.toHaveTextContent('appName')); + + userEvent.type(groupByInput, 'env{enter}'); + await waitFor(() => expect(groupByWrapper).toHaveTextContent('env')); + + groups = ui.group.getAll(); + + expect(groups).toHaveLength(2); + expect(groups[0]).toHaveTextContent('env=production'); + expect(groups[1]).toHaveTextContent('env=staging'); + + userEvent.click(ui.clearButton.get()); + await waitFor(() => expect(groupByWrapper).not.toHaveTextContent('env')); + + userEvent.type(groupByInput, 'uniqueLabel{enter}'); + await waitFor(() => expect(groupByWrapper).toHaveTextContent('uniqueLabel')); + + groups = ui.group.getAll(); + expect(groups).toHaveLength(2); + expect(groups[0]).toHaveTextContent('No grouping'); + expect(groups[1]).toHaveTextContent('uniqueLabel=true'); + }); +}); diff --git a/public/app/features/alerting/unified/AlertGroups.tsx b/public/app/features/alerting/unified/AlertGroups.tsx new file mode 100644 index 00000000..e901b32c --- /dev/null +++ b/public/app/features/alerting/unified/AlertGroups.tsx @@ -0,0 +1,81 @@ +import React, { useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { Alert, LoadingPlaceholder, useStyles2 } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useQueryParams } from 'app/core/hooks/useQueryParams'; + +import { AlertingPageWrapper } from './components/AlertingPageWrapper'; +import { AlertGroup } from './components/alert-groups/AlertGroup'; +import { AlertGroupFilter } from './components/alert-groups/AlertGroupFilter'; +import { fetchAlertGroupsAction } from './state/actions'; + +import { initialAsyncRequestState } from './utils/redux'; +import { getFiltersFromUrlParams } from './utils/misc'; +import { NOTIFICATIONS_POLL_INTERVAL_MS } from './utils/constants'; + +import { useAlertManagerSourceName } from './hooks/useAlertManagerSourceName'; +import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; +import { useGroupedAlerts } from './hooks/useGroupedAlerts'; +import { useFilteredAmGroups } from './hooks/useFilteredAmGroups'; +import { css } from '@emotion/css'; + +const AlertGroups = () => { + const [alertManagerSourceName] = useAlertManagerSourceName(); + const dispatch = useDispatch(); + const [queryParams] = useQueryParams(); + const { groupBy = [] } = getFiltersFromUrlParams(queryParams); + const styles = useStyles2(getStyles); + + const alertGroups = useUnifiedAlertingSelector((state) => state.amAlertGroups); + const { loading, error, result: results = [] } = + alertGroups[alertManagerSourceName || ''] ?? initialAsyncRequestState; + + const groupedAlerts = useGroupedAlerts(results, groupBy); + const filteredAlertGroups = useFilteredAmGroups(groupedAlerts); + + useEffect(() => { + function fetchNotifications() { + if (alertManagerSourceName) { + dispatch(fetchAlertGroupsAction(alertManagerSourceName)); + } + } + fetchNotifications(); + const interval = setInterval(fetchNotifications, NOTIFICATIONS_POLL_INTERVAL_MS); + return () => { + clearInterval(interval); + }; + }, [dispatch, alertManagerSourceName]); + + return ( + + + {loading && } + {error && !loading && ( + + {error.message || 'Unknown error'} + + )} + {results && + filteredAlertGroups.map((group, index) => { + return ( + + {((index === 1 && Object.keys(filteredAlertGroups[0].labels).length === 0) || + (index === 0 && Object.keys(group.labels).length > 0)) && ( +

Grouped by: {Object.keys(group.labels).join(', ')}

+ )} + + + ); + })} + {results && !filteredAlertGroups.length &&

No results.

} + + ); +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + groupingBanner: css` + margin: ${theme.spacing(2, 0)}; + `, +}); + +export default AlertGroups; diff --git a/public/app/features/alerting/unified/AmRoutes.test.tsx b/public/app/features/alerting/unified/AmRoutes.test.tsx new file mode 100644 index 00000000..3542859e --- /dev/null +++ b/public/app/features/alerting/unified/AmRoutes.test.tsx @@ -0,0 +1,632 @@ +import React from 'react'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; +import { render, waitFor } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { + AlertManagerCortexConfig, + AlertManagerDataSourceJsonData, + AlertManagerImplementation, + MuteTimeInterval, + Route, +} from 'app/plugins/datasource/alertmanager/types'; +import { configureStore } from 'app/store/configureStore'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { byLabelText, byRole, byTestId, byText } from 'testing-library-selector'; +import AmRoutes from './AmRoutes'; +import { fetchAlertManagerConfig, fetchStatus, updateAlertManagerConfig } from './api/alertmanager'; +import { mockDataSource, MockDataSourceSrv, someCloudAlertManagerConfig, someCloudAlertManagerStatus } from './mocks'; +import { getAllDataSources } from './utils/config'; +import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from './utils/datasource'; +import userEvent from '@testing-library/user-event'; +import { selectOptionInTest } from '@grafana/ui'; +import { ALERTMANAGER_NAME_QUERY_KEY } from './utils/constants'; + +jest.mock('./api/alertmanager'); +jest.mock('./utils/config'); + +const mocks = { + getAllDataSourcesMock: typeAsJestMock(getAllDataSources), + + api: { + fetchAlertManagerConfig: typeAsJestMock(fetchAlertManagerConfig), + updateAlertManagerConfig: typeAsJestMock(updateAlertManagerConfig), + fetchStatus: typeAsJestMock(fetchStatus), + }, +}; + +const renderAmRoutes = (alertManagerSourceName?: string) => { + const store = configureStore(); + locationService.push(location); + + locationService.push( + '/alerting/routes' + (alertManagerSourceName ? `?${ALERTMANAGER_NAME_QUERY_KEY}=${alertManagerSourceName}` : '') + ); + + return render( + + + + + + ); +}; + +const dataSources = { + am: mockDataSource({ + name: 'Alertmanager', + type: DataSourceType.Alertmanager, + }), + promAlertManager: mockDataSource({ + name: 'PromManager', + type: DataSourceType.Alertmanager, + jsonData: { + implementation: AlertManagerImplementation.prometheus, + }, + }), +}; + +const ui = { + rootReceiver: byTestId('am-routes-root-receiver'), + rootGroupBy: byTestId('am-routes-root-group-by'), + rootTimings: byTestId('am-routes-root-timings'), + row: byTestId('am-routes-row'), + + rootRouteContainer: byTestId('am-root-route-container'), + + editButton: byRole('button', { name: 'Edit' }), + saveButton: byRole('button', { name: 'Save' }), + + editRouteButton: byLabelText('Edit route'), + deleteRouteButton: byLabelText('Delete route'), + newPolicyButton: byRole('button', { name: /New policy/ }), + newPolicyCTAButton: byRole('button', { name: /New specific policy/ }), + savePolicyButton: byRole('button', { name: /save policy/i }), + + receiverSelect: byTestId('am-receiver-select'), + groupSelect: byTestId('am-group-select'), + muteTimingSelect: byTestId('am-mute-timing-select'), + + groupWaitContainer: byTestId('am-group-wait'), + groupIntervalContainer: byTestId('am-group-interval'), + groupRepeatContainer: byTestId('am-repeat-interval'), +}; + +describe('AmRoutes', () => { + const subroutes: Route[] = [ + { + match: { + sub1matcher1: 'sub1value1', + sub1matcher2: 'sub1value2', + }, + match_re: { + sub1matcher3: 'sub1value3', + sub1matcher4: 'sub1value4', + }, + group_by: ['sub1group1', 'sub1group2'], + receiver: 'a-receiver', + continue: true, + group_wait: '3s', + group_interval: '2m', + repeat_interval: '1s', + routes: [ + { + match: { + sub1sub1matcher1: 'sub1sub1value1', + sub1sub1matcher2: 'sub1sub1value2', + }, + match_re: { + sub1sub1matcher3: 'sub1sub1value3', + sub1sub1matcher4: 'sub1sub1value4', + }, + group_by: ['sub1sub1group1', 'sub1sub1group2'], + receiver: 'another-receiver', + }, + { + match: { + sub1sub2matcher1: 'sub1sub2value1', + sub1sub2matcher2: 'sub1sub2value2', + }, + match_re: { + sub1sub2matcher3: 'sub1sub2value3', + sub1sub2matcher4: 'sub1sub2value4', + }, + group_by: ['sub1sub2group1', 'sub1sub2group2'], + receiver: 'another-receiver', + }, + ], + }, + { + match: { + sub2matcher1: 'sub2value1', + sub2matcher2: 'sub2value2', + }, + match_re: { + sub2matcher3: 'sub2value3', + sub2matcher4: 'sub2value4', + }, + receiver: 'another-receiver', + }, + ]; + + const simpleRoute: Route = { + receiver: 'simple-receiver', + matchers: ['hello=world', 'foo!=bar'], + }; + + const rootRoute: Route = { + receiver: 'default-receiver', + group_by: ['a-group', 'another-group'], + group_wait: '1s', + group_interval: '2m', + repeat_interval: '3d', + routes: subroutes, + }; + + const muteInterval: MuteTimeInterval = { + name: 'default-mute', + time_intervals: [ + { + times: [{ start_time: '12:00', end_time: '24:00' }], + weekdays: ['monday:friday'], + days_of_month: ['1:7', '-1:-7'], + months: ['january:june'], + years: ['2020:2022'], + }, + ], + }; + + beforeEach(() => { + mocks.getAllDataSourcesMock.mockReturnValue(Object.values(dataSources)); + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + }); + + afterEach(() => { + jest.resetAllMocks(); + + setDataSourceSrv(undefined as any); + }); + + it('loads and shows routes', async () => { + mocks.api.fetchAlertManagerConfig.mockResolvedValue({ + alertmanager_config: { + route: rootRoute, + receivers: [ + { + name: 'default-receiver', + }, + { + name: 'a-receiver', + }, + { + name: 'another-receiver', + }, + ], + }, + template_files: {}, + }); + + await renderAmRoutes(); + + await waitFor(() => expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalledTimes(1)); + + expect(ui.rootReceiver.get()).toHaveTextContent(rootRoute.receiver!); + expect(ui.rootGroupBy.get()).toHaveTextContent(rootRoute.group_by!.join(', ')); + const rootTimings = ui.rootTimings.get(); + expect(rootTimings).toHaveTextContent(rootRoute.group_wait!); + expect(rootTimings).toHaveTextContent(rootRoute.group_interval!); + expect(rootTimings).toHaveTextContent(rootRoute.repeat_interval!); + + const rows = await ui.row.findAll(); + expect(rows).toHaveLength(2); + + subroutes.forEach((route, index) => { + Object.entries(route.match ?? {}).forEach(([label, value]) => { + expect(rows[index]).toHaveTextContent(`${label}=${value}`); + }); + + Object.entries(route.match_re ?? {}).forEach(([label, value]) => { + expect(rows[index]).toHaveTextContent(`${label}=~${value}`); + }); + + if (route.group_by) { + expect(rows[index]).toHaveTextContent(route.group_by.join(', ')); + } + + if (route.receiver) { + expect(rows[index]).toHaveTextContent(route.receiver); + } + }); + }); + + it('can edit root route if one is already defined', async () => { + const defaultConfig: AlertManagerCortexConfig = { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + receiver: 'default', + group_by: ['alertname'], + }, + templates: [], + }, + template_files: {}, + }; + const currentConfig = { current: defaultConfig }; + mocks.api.updateAlertManagerConfig.mockImplementation((amSourceName, newConfig) => { + currentConfig.current = newConfig; + return Promise.resolve(); + }); + + mocks.api.fetchAlertManagerConfig.mockImplementation(() => { + return Promise.resolve(currentConfig.current); + }); + + await renderAmRoutes(); + expect(await ui.rootReceiver.find()).toHaveTextContent('default'); + expect(ui.rootGroupBy.get()).toHaveTextContent('alertname'); + + // open root route for editing + const rootRouteContainer = await ui.rootRouteContainer.find(); + userEvent.click(ui.editButton.get(rootRouteContainer)); + + // configure receiver & group by + const receiverSelect = await ui.receiverSelect.find(); + await clickSelectOption(receiverSelect, 'critical'); + + const groupSelect = ui.groupSelect.get(); + userEvent.type(byRole('combobox').get(groupSelect), 'namespace{enter}'); + + // configure timing intervals + userEvent.click(byText('Timing options').get(rootRouteContainer)); + + await updateTiming(ui.groupWaitContainer.get(), '1', 'Minutes'); + await updateTiming(ui.groupIntervalContainer.get(), '4', 'Minutes'); + await updateTiming(ui.groupRepeatContainer.get(), '5', 'Hours'); + + //save + userEvent.click(ui.saveButton.get(rootRouteContainer)); + + // wait for it to go out of edit mode + await waitFor(() => expect(ui.editButton.query(rootRouteContainer)).not.toBeInTheDocument()); + + // check that appropriate api calls were made + expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalledTimes(3); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledTimes(1); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME, { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + continue: false, + group_by: ['alertname', 'namespace'], + receiver: 'critical', + routes: [], + group_interval: '4m', + group_wait: '1m', + repeat_interval: '5h', + mute_time_intervals: [], + }, + templates: [], + }, + template_files: {}, + }); + + // check that new config values are rendered + await waitFor(() => expect(ui.rootReceiver.query()).toHaveTextContent('critical')); + expect(ui.rootGroupBy.get()).toHaveTextContent('alertname, namespace'); + }); + + it('can edit root route if one is not defined yet', async () => { + mocks.api.fetchAlertManagerConfig.mockResolvedValue({ + alertmanager_config: { + receivers: [{ name: 'default' }], + }, + template_files: {}, + }); + + await renderAmRoutes(); + + // open root route for editing + const rootRouteContainer = await ui.rootRouteContainer.find(); + userEvent.click(ui.editButton.get(rootRouteContainer)); + + // configure receiver & group by + const receiverSelect = await ui.receiverSelect.find(); + await clickSelectOption(receiverSelect, 'default'); + + const groupSelect = ui.groupSelect.get(); + userEvent.type(byRole('combobox').get(groupSelect), 'severity{enter}'); + userEvent.type(byRole('combobox').get(groupSelect), 'namespace{enter}'); + //save + userEvent.click(ui.saveButton.get(rootRouteContainer)); + + // wait for it to go out of edit mode + await waitFor(() => expect(ui.editButton.query(rootRouteContainer)).not.toBeInTheDocument()); + + // check that appropriate api calls were made + expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalledTimes(3); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledTimes(1); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME, { + alertmanager_config: { + receivers: [{ name: 'default' }], + route: { + continue: false, + group_by: ['severity', 'namespace'], + receiver: 'default', + routes: [], + mute_time_intervals: [], + }, + }, + template_files: {}, + }); + }); + + it('Show error message if loading Alertmanager config fails', async () => { + mocks.api.fetchAlertManagerConfig.mockRejectedValue({ + status: 500, + data: { + message: "Alertmanager has exploded. it's gone. Forget about it.", + }, + }); + await renderAmRoutes(); + await waitFor(() => expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalledTimes(1)); + expect(await byText("Alertmanager has exploded. it's gone. Forget about it.").find()).toBeInTheDocument(); + expect(ui.rootReceiver.query()).not.toBeInTheDocument(); + expect(ui.editButton.query()).not.toBeInTheDocument(); + }); + + it('Converts matchers to object_matchers for grafana alertmanager', async () => { + const defaultConfig: AlertManagerCortexConfig = { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + continue: false, + receiver: 'default', + group_by: ['alertname'], + routes: [simpleRoute], + group_interval: '4m', + group_wait: '1m', + repeat_interval: '5h', + }, + templates: [], + }, + template_files: {}, + }; + + const currentConfig = { current: defaultConfig }; + mocks.api.updateAlertManagerConfig.mockImplementation((amSourceName, newConfig) => { + currentConfig.current = newConfig; + return Promise.resolve(); + }); + + mocks.api.fetchAlertManagerConfig.mockImplementation(() => { + return Promise.resolve(currentConfig.current); + }); + + await renderAmRoutes(GRAFANA_RULES_SOURCE_NAME); + expect(await ui.rootReceiver.find()).toHaveTextContent('default'); + expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalled(); + + // Toggle a save to test new object_matchers + const rootRouteContainer = await ui.rootRouteContainer.find(); + userEvent.click(ui.editButton.get(rootRouteContainer)); + userEvent.click(ui.saveButton.get(rootRouteContainer)); + + await waitFor(() => expect(ui.editButton.query(rootRouteContainer)).not.toBeInTheDocument()); + + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalled(); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME, { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + continue: false, + group_by: ['alertname'], + group_interval: '4m', + group_wait: '1m', + receiver: 'default', + repeat_interval: '5h', + mute_time_intervals: [], + routes: [ + { + continue: false, + group_by: [], + object_matchers: [ + ['hello', '=', 'world'], + ['foo', '!=', 'bar'], + ], + receiver: 'simple-receiver', + mute_time_intervals: [], + routes: [], + }, + ], + }, + templates: [], + }, + template_files: {}, + }); + }); + + it('Keeps matchers for non-grafana alertmanager sources', async () => { + const defaultConfig: AlertManagerCortexConfig = { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + continue: false, + receiver: 'default', + group_by: ['alertname'], + routes: [simpleRoute], + group_interval: '4m', + group_wait: '1m', + repeat_interval: '5h', + }, + templates: [], + }, + template_files: {}, + }; + + const currentConfig = { current: defaultConfig }; + mocks.api.updateAlertManagerConfig.mockImplementation((amSourceName, newConfig) => { + currentConfig.current = newConfig; + return Promise.resolve(); + }); + + mocks.api.fetchAlertManagerConfig.mockImplementation(() => { + return Promise.resolve(currentConfig.current); + }); + + await renderAmRoutes(dataSources.am.name); + expect(await ui.rootReceiver.find()).toHaveTextContent('default'); + expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalled(); + + // Toggle a save to test new object_matchers + const rootRouteContainer = await ui.rootRouteContainer.find(); + userEvent.click(ui.editButton.get(rootRouteContainer)); + userEvent.click(ui.saveButton.get(rootRouteContainer)); + + await waitFor(() => expect(ui.editButton.query(rootRouteContainer)).not.toBeInTheDocument()); + + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalled(); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith(dataSources.am.name, { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + continue: false, + group_by: ['alertname'], + group_interval: '4m', + group_wait: '1m', + matchers: [], + receiver: 'default', + repeat_interval: '5h', + mute_time_intervals: [], + routes: [ + { + continue: false, + group_by: [], + matchers: ['hello=world', 'foo!=bar'], + receiver: 'simple-receiver', + routes: [], + mute_time_intervals: [], + }, + ], + }, + templates: [], + }, + template_files: {}, + }); + }); + + it('Prometheus Alertmanager routes cannot be edited', async () => { + mocks.api.fetchStatus.mockResolvedValue({ + ...someCloudAlertManagerStatus, + config: someCloudAlertManagerConfig.alertmanager_config, + }); + await renderAmRoutes(dataSources.promAlertManager.name); + const rootRouteContainer = await ui.rootRouteContainer.find(); + expect(ui.editButton.query(rootRouteContainer)).not.toBeInTheDocument(); + const rows = await ui.row.findAll(); + expect(rows).toHaveLength(2); + expect(ui.editRouteButton.query()).not.toBeInTheDocument(); + expect(ui.deleteRouteButton.query()).not.toBeInTheDocument(); + expect(ui.saveButton.query()).not.toBeInTheDocument(); + + expect(mocks.api.fetchAlertManagerConfig).not.toHaveBeenCalled(); + expect(mocks.api.fetchStatus).toHaveBeenCalledTimes(1); + }); + + it('Prometheus Alertmanager has no CTA button if there are no specific policies', async () => { + mocks.api.fetchStatus.mockResolvedValue({ + ...someCloudAlertManagerStatus, + config: { + ...someCloudAlertManagerConfig.alertmanager_config, + route: { + ...someCloudAlertManagerConfig.alertmanager_config.route, + routes: undefined, + }, + }, + }); + await renderAmRoutes(dataSources.promAlertManager.name); + const rootRouteContainer = await ui.rootRouteContainer.find(); + expect(ui.editButton.query(rootRouteContainer)).not.toBeInTheDocument(); + expect(ui.newPolicyCTAButton.query()).not.toBeInTheDocument(); + expect(mocks.api.fetchAlertManagerConfig).not.toHaveBeenCalled(); + expect(mocks.api.fetchStatus).toHaveBeenCalledTimes(1); + }); + + it('Can add a mute timing to a route', async () => { + const defaultConfig: AlertManagerCortexConfig = { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + continue: false, + receiver: 'default', + group_by: ['alertname'], + routes: [simpleRoute], + group_interval: '4m', + group_wait: '1m', + repeat_interval: '5h', + }, + templates: [], + mute_time_intervals: [muteInterval], + }, + template_files: {}, + }; + + const currentConfig = { current: defaultConfig }; + mocks.api.updateAlertManagerConfig.mockImplementation((amSourceName, newConfig) => { + currentConfig.current = newConfig; + return Promise.resolve(); + }); + + mocks.api.fetchAlertManagerConfig.mockResolvedValue(defaultConfig); + + await renderAmRoutes(dataSources.am.name); + const rows = await ui.row.findAll(); + expect(rows).toHaveLength(1); + userEvent.click(ui.editRouteButton.get(rows[0])); + + const muteTimingSelect = ui.muteTimingSelect.get(); + await clickSelectOption(muteTimingSelect, 'default-mute'); + expect(muteTimingSelect).toHaveTextContent('default-mute'); + + const savePolicyButton = ui.savePolicyButton.get(); + expect(savePolicyButton).toBeInTheDocument(); + + userEvent.click(savePolicyButton); + + await waitFor(() => expect(savePolicyButton).not.toBeInTheDocument()); + + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalled(); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith(dataSources.am.name, { + ...defaultConfig, + alertmanager_config: { + ...defaultConfig.alertmanager_config, + route: { + ...defaultConfig.alertmanager_config.route, + mute_time_intervals: [], + matchers: [], + routes: [ + { + ...simpleRoute, + mute_time_intervals: [muteInterval.name], + routes: [], + continue: false, + group_by: [], + }, + ], + }, + }, + }); + }); +}); + +const clickSelectOption = async (selectElement: HTMLElement, optionText: string): Promise => { + userEvent.click(byRole('combobox').get(selectElement)); + await selectOptionInTest(selectElement, optionText); +}; + +const updateTiming = async (selectElement: HTMLElement, value: string, timeUnit: string): Promise => { + const input = byRole('textbox').get(selectElement); + const select = byRole('combobox').get(selectElement); + userEvent.type(input, value); + userEvent.click(select); + await selectOptionInTest(selectElement, timeUnit); +}; diff --git a/public/app/features/alerting/unified/AmRoutes.tsx b/public/app/features/alerting/unified/AmRoutes.tsx new file mode 100644 index 00000000..b757fed3 --- /dev/null +++ b/public/app/features/alerting/unified/AmRoutes.tsx @@ -0,0 +1,144 @@ +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { css } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Alert, LoadingPlaceholder, useStyles2, withErrorBoundary } from '@grafana/ui'; +import { useDispatch } from 'react-redux'; +import { Redirect } from 'react-router-dom'; +import { Receiver } from 'app/plugins/datasource/alertmanager/types'; +import { useCleanup } from '../../../core/hooks/useCleanup'; +import { AlertingPageWrapper } from './components/AlertingPageWrapper'; +import { AlertManagerPicker } from './components/AlertManagerPicker'; +import { AmRootRoute } from './components/amroutes/AmRootRoute'; +import { AmSpecificRouting } from './components/amroutes/AmSpecificRouting'; +import { useAlertManagerSourceName } from './hooks/useAlertManagerSourceName'; +import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; +import { fetchAlertManagerConfigAction, updateAlertManagerConfigAction } from './state/actions'; +import { AmRouteReceiver, FormAmRoute } from './types/amroutes'; +import { amRouteToFormAmRoute, formAmRouteToAmRoute, stringsToSelectableValues } from './utils/amroutes'; +import { initialAsyncRequestState } from './utils/redux'; +import { isVanillaPrometheusAlertManagerDataSource } from './utils/datasource'; +import { MuteTimingsTable } from './components/amroutes/MuteTimingsTable'; + +const AmRoutes: FC = () => { + const dispatch = useDispatch(); + const styles = useStyles2(getStyles); + const [isRootRouteEditMode, setIsRootRouteEditMode] = useState(false); + const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(); + + const readOnly = alertManagerSourceName ? isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName) : true; + + const amConfigs = useUnifiedAlertingSelector((state) => state.amConfigs); + + const fetchConfig = useCallback(() => { + if (alertManagerSourceName) { + dispatch(fetchAlertManagerConfigAction(alertManagerSourceName)); + } + }, [alertManagerSourceName, dispatch]); + + useEffect(() => { + fetchConfig(); + }, [fetchConfig]); + + const { result, loading: resultLoading, error: resultError } = + (alertManagerSourceName && amConfigs[alertManagerSourceName]) || initialAsyncRequestState; + + const config = result?.alertmanager_config; + const [rootRoute, id2ExistingRoute] = useMemo(() => amRouteToFormAmRoute(config?.route), [config?.route]); + + const receivers = stringsToSelectableValues( + (config?.receivers ?? []).map((receiver: Receiver) => receiver.name) + ) as AmRouteReceiver[]; + + const enterRootRouteEditMode = () => { + setIsRootRouteEditMode(true); + }; + + const exitRootRouteEditMode = () => { + setIsRootRouteEditMode(false); + }; + + useCleanup((state) => state.unifiedAlerting.saveAMConfig); + const handleSave = (data: Partial) => { + if (!result) { + return; + } + + const newData = formAmRouteToAmRoute( + alertManagerSourceName, + { + ...rootRoute, + ...data, + }, + id2ExistingRoute + ); + + if (isRootRouteEditMode) { + exitRootRouteEditMode(); + } + + dispatch( + updateAlertManagerConfigAction({ + newConfig: { + ...result, + alertmanager_config: { + ...result.alertmanager_config, + route: newData, + }, + }, + oldConfig: result, + alertManagerSourceName: alertManagerSourceName!, + successMessage: 'Saved', + refetch: true, + }) + ); + }; + + if (!alertManagerSourceName) { + return ; + } + + return ( + + + {resultError && !resultLoading && ( + + {resultError.message || 'Unknown error.'} + + )} + {resultLoading && } + {result && !resultLoading && !resultError && ( + <> + +

+ +

+ + + )} + + ); +}; + +export default withErrorBoundary(AmRoutes, { style: 'page' }); + +const getStyles = (theme: GrafanaTheme2) => ({ + break: css` + width: 100%; + height: 0; + margin-bottom: ${theme.spacing(2)}; + `, +}); diff --git a/public/app/features/alerting/unified/MuteTimings.test.tsx b/public/app/features/alerting/unified/MuteTimings.test.tsx new file mode 100644 index 00000000..da69dc66 --- /dev/null +++ b/public/app/features/alerting/unified/MuteTimings.test.tsx @@ -0,0 +1,295 @@ +import React from 'react'; +import { render, waitFor, fireEvent } from '@testing-library/react'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; + +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { fetchAlertManagerConfig, updateAlertManagerConfig } from './api/alertmanager'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { configureStore } from 'app/store/configureStore'; + +import { mockDataSource, MockDataSourceSrv } from './mocks'; +import { DataSourceType } from './utils/datasource'; +import { AlertManagerCortexConfig, MuteTimeInterval } from 'app/plugins/datasource/alertmanager/types'; +import { byRole, byTestId, byText } from 'testing-library-selector'; +import userEvent from '@testing-library/user-event'; +import MuteTimings from './MuteTimings'; + +jest.mock('./api/alertmanager'); + +const mocks = { + api: { + fetchAlertManagerConfig: typeAsJestMock(fetchAlertManagerConfig), + updateAlertManagerConfig: typeAsJestMock(updateAlertManagerConfig), + }, +}; + +const renderMuteTimings = (location = '/alerting/routes/mute-timing/new') => { + const store = configureStore(); + locationService.push(location); + + return render( + + + + + + ); +}; + +const dataSources = { + am: mockDataSource({ + name: 'Alertmanager', + type: DataSourceType.Alertmanager, + }), +}; + +const ui = { + form: byTestId('mute-timing-form'), + nameField: byTestId('mute-timing-name'), + + startsAt: byTestId('mute-timing-starts-at'), + endsAt: byTestId('mute-timing-ends-at'), + addTimeRange: byRole('button', { name: /add another time range/i }), + + weekdays: byTestId('mute-timing-weekdays'), + days: byTestId('mute-timing-days'), + months: byTestId('mute-timing-months'), + years: byTestId('mute-timing-years'), + + addInterval: byRole('button', { name: /add another time interval/i }), + submitButton: byText(/submit/i), +}; + +const muteTimeInterval: MuteTimeInterval = { + name: 'default-mute', + time_intervals: [ + { + times: [ + { + start_time: '12:00', + end_time: '24:00', + }, + ], + days_of_month: ['15', '-1'], + months: ['august:december', 'march'], + }, + ], +}; + +const defaultConfig: AlertManagerCortexConfig = { + alertmanager_config: { + receivers: [{ name: 'default' }, { name: 'critical' }], + route: { + receiver: 'default', + group_by: ['alertname'], + routes: [ + { + matchers: ['env=prod', 'region!=EU'], + mute_time_intervals: [muteTimeInterval.name], + }, + ], + }, + templates: [], + mute_time_intervals: [muteTimeInterval], + }, + template_files: {}, +}; + +const resetMocks = () => { + jest.resetAllMocks(); + + mocks.api.fetchAlertManagerConfig.mockImplementation(() => { + return Promise.resolve({ ...defaultConfig }); + }); + mocks.api.updateAlertManagerConfig.mockImplementation(() => { + return Promise.resolve(); + }); +}; + +describe('Mute timings', () => { + beforeEach(() => { + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + resetMocks(); + }); + + it('creates a new mute timing', async () => { + await renderMuteTimings(); + + await waitFor(() => expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalled()); + expect(ui.nameField.get()).toBeInTheDocument(); + + userEvent.type(ui.nameField.get(), 'maintenance period'); + userEvent.type(ui.startsAt.get(), '22:00'); + userEvent.type(ui.endsAt.get(), '24:00'); + userEvent.type(ui.days.get(), '-1'); + userEvent.type(ui.months.get(), 'january, july'); + + fireEvent.submit(ui.form.get()); + + await waitFor(() => expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalled()); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith('grafana', { + ...defaultConfig, + alertmanager_config: { + ...defaultConfig.alertmanager_config, + mute_time_intervals: [ + muteTimeInterval, + { + name: 'maintenance period', + time_intervals: [ + { + days_of_month: ['-1'], + months: ['january', 'july'], + times: [ + { + start_time: '22:00', + end_time: '24:00', + }, + ], + }, + ], + }, + ], + }, + }); + }); + + it('prepoluates the form when editing a mute timing', async () => { + await renderMuteTimings( + '/alerting/routes/mute-timing/edit' + `?muteName=${encodeURIComponent(muteTimeInterval.name)}` + ); + + await waitFor(() => expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalled()); + expect(ui.nameField.get()).toBeInTheDocument(); + expect(ui.nameField.get()).toHaveValue(muteTimeInterval.name); + expect(ui.months.get()).toHaveValue(muteTimeInterval.time_intervals[0].months?.join(', ')); + + userEvent.clear(ui.startsAt.getAll()?.[0]); + userEvent.clear(ui.endsAt.getAll()?.[0]); + userEvent.clear(ui.weekdays.get()); + userEvent.clear(ui.days.get()); + userEvent.clear(ui.months.get()); + userEvent.clear(ui.years.get()); + + userEvent.type(ui.weekdays.get(), 'monday'); + userEvent.type(ui.days.get(), '-7:-1'); + userEvent.type(ui.months.get(), '3, 6, 9, 12'); + userEvent.type(ui.years.get(), '2021:2024'); + + fireEvent.submit(ui.form.get()); + + await waitFor(() => expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalled()); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith('grafana', { + alertmanager_config: { + receivers: [ + { + name: 'default', + }, + { + name: 'critical', + }, + ], + route: { + receiver: 'default', + group_by: ['alertname'], + routes: [ + { + matchers: ['env=prod', 'region!=EU'], + mute_time_intervals: ['default-mute'], + }, + ], + }, + templates: [], + mute_time_intervals: [ + { + name: 'default-mute', + time_intervals: [ + { + times: [], + weekdays: ['monday'], + days_of_month: ['-7:-1'], + months: ['3', '6', '9', '12'], + years: ['2021:2024'], + }, + ], + }, + ], + }, + template_files: {}, + }); + }); + + it('form is invalid with duplicate mute timing name', async () => { + await renderMuteTimings(); + + await waitFor(() => expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalled()); + await waitFor(() => expect(ui.nameField.get()).toBeInTheDocument()); + await userEvent.type(ui.nameField.get(), 'default-mute'); + await userEvent.type(ui.days.get(), '1'); + await waitFor(() => expect(ui.nameField.get()).toHaveValue('default-mute')); + + fireEvent.submit(ui.form.get()); + + // Form state should be invalid and prevent firing of update action + await waitFor(() => expect(byRole('alert').get()).toBeInTheDocument()); + expect(mocks.api.updateAlertManagerConfig).not.toHaveBeenCalled(); + }); + + it('replaces mute timings in routes when the mute timing name is changed', async () => { + await renderMuteTimings( + '/alerting/routes/mute-timing/edit' + `?muteName=${encodeURIComponent(muteTimeInterval.name)}` + ); + + await waitFor(() => expect(mocks.api.fetchAlertManagerConfig).toHaveBeenCalled()); + expect(ui.nameField.get()).toBeInTheDocument(); + expect(ui.nameField.get()).toHaveValue(muteTimeInterval.name); + + userEvent.clear(ui.nameField.get()); + userEvent.type(ui.nameField.get(), 'Lunch breaks'); + + fireEvent.submit(ui.form.get()); + + await waitFor(() => expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalled()); + expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalledWith('grafana', { + alertmanager_config: { + receivers: [ + { + name: 'default', + }, + { + name: 'critical', + }, + ], + route: { + receiver: 'default', + group_by: ['alertname'], + routes: [ + { + matchers: ['env=prod', 'region!=EU'], + mute_time_intervals: ['Lunch breaks'], + }, + ], + }, + templates: [], + mute_time_intervals: [ + { + name: 'Lunch breaks', + time_intervals: [ + { + times: [ + { + start_time: '12:00', + end_time: '24:00', + }, + ], + days_of_month: ['15', '-1'], + months: ['august:december', 'march'], + }, + ], + }, + ], + }, + template_files: {}, + }); + }); +}); diff --git a/public/app/features/alerting/unified/MuteTimings.tsx b/public/app/features/alerting/unified/MuteTimings.tsx new file mode 100644 index 00000000..0087a390 --- /dev/null +++ b/public/app/features/alerting/unified/MuteTimings.tsx @@ -0,0 +1,70 @@ +import React, { useCallback, useEffect } from 'react'; +import { Route, Redirect, Switch } from 'react-router-dom'; +import MuteTimingForm from './components/amroutes/MuteTimingForm'; +import { useAlertManagerSourceName } from './hooks/useAlertManagerSourceName'; +import { useDispatch } from 'react-redux'; +import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; +import { fetchAlertManagerConfigAction } from './state/actions'; +import { initialAsyncRequestState } from './utils/redux'; +import { MuteTimeInterval } from 'app/plugins/datasource/alertmanager/types'; +import { Alert, LoadingPlaceholder } from '@grafana/ui'; +import { useQueryParams } from 'app/core/hooks/useQueryParams'; + +const MuteTimings = () => { + const [queryParams] = useQueryParams(); + const dispatch = useDispatch(); + const [alertManagerSourceName] = useAlertManagerSourceName(); + + const amConfigs = useUnifiedAlertingSelector((state) => state.amConfigs); + + const fetchConfig = useCallback(() => { + if (alertManagerSourceName) { + dispatch(fetchAlertManagerConfigAction(alertManagerSourceName)); + } + }, [alertManagerSourceName, dispatch]); + + useEffect(() => { + fetchConfig(); + }, [fetchConfig]); + + const { result, error, loading } = + (alertManagerSourceName && amConfigs[alertManagerSourceName]) || initialAsyncRequestState; + + const config = result?.alertmanager_config; + + const getMuteTimingByName = useCallback( + (id: string): MuteTimeInterval | undefined => { + return config?.mute_time_intervals?.find(({ name }: MuteTimeInterval) => name === id); + }, + [config] + ); + + return ( + <> + {loading && } + {error && !loading && ( + + {error.message || 'Unknown error.'} + + )} + {result && !error && ( + + + + + + {() => { + if (queryParams['muteName']) { + const muteTiming = getMuteTimingByName(String(queryParams['muteName'])); + return ; + } + return ; + }} + + + )} + + ); +}; + +export default MuteTimings; diff --git a/public/app/features/alerting/unified/PanelAlertTab.tsx b/public/app/features/alerting/unified/PanelAlertTab.tsx new file mode 100644 index 00000000..cb45af4c --- /dev/null +++ b/public/app/features/alerting/unified/PanelAlertTab.tsx @@ -0,0 +1,15 @@ +import { Tab, TabProps } from '@grafana/ui/src/components/Tabs/Tab'; +import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; +import React, { FC } from 'react'; +import { usePanelCombinedRules } from './hooks/usePanelCombinedRules'; + +interface Props extends Omit { + panel: PanelModel; + dashboard: DashboardModel; +} + +// it will load rule count from backend +export const PanelAlertTab: FC = ({ panel, dashboard, ...otherProps }) => { + const { rules, loading } = usePanelCombinedRules({ panel, dashboard }); + return ; +}; diff --git a/public/app/features/alerting/unified/PanelAlertTabContent.test.tsx b/public/app/features/alerting/unified/PanelAlertTabContent.test.tsx new file mode 100644 index 00000000..bf10c1bc --- /dev/null +++ b/public/app/features/alerting/unified/PanelAlertTabContent.test.tsx @@ -0,0 +1,344 @@ +import React from 'react'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; +import { configureStore } from 'app/store/configureStore'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { render } from '@testing-library/react'; +import { PanelAlertTabContent } from './PanelAlertTabContent'; +import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; +import { + mockDataSource, + MockDataSourceSrv, + mockPromAlertingRule, + mockPromRuleGroup, + mockPromRuleNamespace, + mockRulerGrafanaRule, +} from './mocks'; +import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from './utils/datasource'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { getAllDataSources } from './utils/config'; +import { fetchRules } from './api/prometheus'; +import { fetchRulerRules } from './api/ruler'; +import { Annotation } from './utils/constants'; +import { byTestId } from 'testing-library-selector'; +import { PrometheusDatasource } from 'app/plugins/datasource/prometheus/datasource'; +import { DataSourceApi } from '@grafana/data'; +import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; +import { PromOptions } from 'app/plugins/datasource/prometheus/types'; +import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend'; + +jest.mock('./api/prometheus'); +jest.mock('./api/ruler'); +jest.mock('./utils/config'); + +const dataSources = { + prometheus: mockDataSource({ + name: 'Prometheus', + type: DataSourceType.Prometheus, + isDefault: false, + }), + default: mockDataSource({ + name: 'Default', + type: DataSourceType.Prometheus, + isDefault: true, + }), +}; +dataSources.prometheus.meta.alerting = true; +dataSources.default.meta.alerting = true; + +const mocks = { + getAllDataSources: typeAsJestMock(getAllDataSources), + api: { + fetchRules: typeAsJestMock(fetchRules), + fetchRulerRules: typeAsJestMock(fetchRulerRules), + }, +}; + +const renderAlertTabContent = (dashboard: DashboardModel, panel: PanelModel) => { + const store = configureStore(); + + return render( + + + + + + ); +}; + +const rules = [ + mockPromRuleNamespace({ + name: 'default', + groups: [ + mockPromRuleGroup({ + name: 'mygroup', + rules: [ + mockPromAlertingRule({ + name: 'dashboardrule1', + annotations: { + [Annotation.dashboardUID]: '12', + [Annotation.panelID]: '34', + }, + }), + ], + }), + mockPromRuleGroup({ + name: 'othergroup', + rules: [ + mockPromAlertingRule({ + name: 'dashboardrule2', + annotations: { + [Annotation.dashboardUID]: '121', + [Annotation.panelID]: '341', + }, + }), + ], + }), + ], + }), +]; + +const rulerRules = { + default: [ + { + name: 'mygroup', + rules: [ + mockRulerGrafanaRule( + { + annotations: { + [Annotation.dashboardUID]: '12', + [Annotation.panelID]: '34', + }, + }, + { + title: 'dashboardrule1', + } + ), + ], + }, + { + name: 'othergroup', + rules: [ + mockRulerGrafanaRule( + { + annotations: { + [Annotation.dashboardUID]: '121', + [Annotation.panelID]: '341', + }, + }, + { + title: 'dashboardrule2', + } + ), + ], + }, + ], +}; + +const dashboard = { + uid: '12', + time: { + from: 'now-6h', + to: 'now', + }, + meta: { + canSave: true, + folderId: 1, + folderTitle: 'super folder', + }, +} as DashboardModel; + +const panel = ({ + datasource: { + type: 'prometheus', + uid: dataSources.prometheus.uid, + }, + title: 'mypanel', + id: 34, + targets: [ + { + expr: 'sum(some_metric [$__interval])) by (app)', + refId: 'A', + }, + ], +} as any) as PanelModel; + +const ui = { + row: byTestId('row'), + createButton: byTestId('create-alert-rule-button'), +}; + +describe('PanelAlertTabContent', () => { + beforeEach(() => { + jest.resetAllMocks(); + mocks.getAllDataSources.mockReturnValue(Object.values(dataSources)); + const dsService = new MockDataSourceSrv(dataSources); + dsService.datasources[dataSources.prometheus.uid] = new PrometheusDatasource( + dataSources.prometheus + ) as DataSourceApi; + dsService.datasources[dataSources.default.uid] = new PrometheusDatasource(dataSources.default) as DataSourceApi< + any, + any + >; + setDataSourceSrv(dsService); + }); + + it('Will take into account panel maxDataPoints', async () => { + await renderAlertTabContent(dashboard, ({ + ...panel, + maxDataPoints: 100, + interval: '10s', + } as any) as PanelModel); + + const button = await ui.createButton.find(); + const href = button.href; + const match = href.match(/alerting\/new\?defaults=(.*)&returnTo=/); + expect(match).toHaveLength(2); + + const defaults = JSON.parse(decodeURIComponent(match![1])); + expect(defaults.queries[0].model).toEqual({ + expr: 'sum(some_metric [5m])) by (app)', + refId: 'A', + datasource: { + type: 'prometheus', + uid: 'mock-ds-2', + }, + interval: '', + intervalMs: 300000, + maxDataPoints: 100, + }); + }); + + it('Will work with default datasource', async () => { + await renderAlertTabContent(dashboard, ({ + ...panel, + datasource: undefined, + maxDataPoints: 100, + interval: '10s', + } as any) as PanelModel); + + const button = await ui.createButton.find(); + const href = button.href; + const match = href.match(/alerting\/new\?defaults=(.*)&returnTo=/); + expect(match).toHaveLength(2); + + const defaults = JSON.parse(decodeURIComponent(match![1])); + expect(defaults.queries[0].model).toEqual({ + expr: 'sum(some_metric [5m])) by (app)', + refId: 'A', + datasource: { + type: 'prometheus', + uid: 'mock-ds-3', + }, + interval: '', + intervalMs: 300000, + maxDataPoints: 100, + }); + }); + + it('Will take into account datasource minInterval', async () => { + ((getDatasourceSrv() as any) as MockDataSourceSrv).datasources[dataSources.prometheus.uid].interval = '7m'; + + await renderAlertTabContent(dashboard, ({ + ...panel, + maxDataPoints: 100, + } as any) as PanelModel); + + const button = await ui.createButton.find(); + const href = button.href; + const match = href.match(/alerting\/new\?defaults=(.*)&returnTo=/); + expect(match).toHaveLength(2); + + const defaults = JSON.parse(decodeURIComponent(match![1])); + expect(defaults.queries[0].model).toEqual({ + expr: 'sum(some_metric [7m])) by (app)', + refId: 'A', + datasource: { + type: 'prometheus', + uid: 'mock-ds-2', + }, + interval: '', + intervalMs: 420000, + maxDataPoints: 100, + }); + }); + + it('Will render alerts belonging to panel and a button to create alert from panel queries', async () => { + mocks.api.fetchRules.mockResolvedValue(rules); + mocks.api.fetchRulerRules.mockResolvedValue(rulerRules); + + await renderAlertTabContent(dashboard, panel); + + const rows = await ui.row.findAll(); + expect(rows).toHaveLength(1); + expect(rows[0]).toHaveTextContent(/dashboardrule1/); + expect(rows[0]).not.toHaveTextContent(/dashboardrule2/); + + const button = await ui.createButton.find(); + const href = button.href; + const match = href.match(/alerting\/new\?defaults=(.*)&returnTo=/); + expect(match).toHaveLength(2); + + const defaults = JSON.parse(decodeURIComponent(match![1])); + expect(defaults).toEqual({ + type: 'grafana', + folder: { id: 1, title: 'super folder' }, + queries: [ + { + refId: 'A', + queryType: '', + relativeTimeRange: { from: 21600, to: 0 }, + datasourceUid: 'mock-ds-2', + model: { + expr: 'sum(some_metric [15s])) by (app)', + refId: 'A', + datasource: { + type: 'prometheus', + uid: 'mock-ds-2', + }, + interval: '', + intervalMs: 15000, + }, + }, + { + refId: 'B', + datasourceUid: '-100', + queryType: '', + model: { + refId: 'B', + hide: false, + type: 'classic_conditions', + datasource: { + type: ExpressionDatasourceRef.type, + uid: '-100', + }, + conditions: [ + { + type: 'query', + evaluator: { params: [3], type: 'gt' }, + operator: { type: 'and' }, + query: { params: ['A'] }, + reducer: { params: [], type: 'last' }, + }, + ], + }, + }, + ], + name: 'mypanel', + condition: 'B', + annotations: [ + { key: '__dashboardUid__', value: '12' }, + { key: '__panelId__', value: '34' }, + ], + }); + + expect(mocks.api.fetchRulerRules).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME, { + dashboardUID: dashboard.uid, + panelId: panel.id, + }); + expect(mocks.api.fetchRules).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME, { + dashboardUID: dashboard.uid, + panelId: panel.id, + }); + }); +}); diff --git a/public/app/features/alerting/unified/PanelAlertTabContent.tsx b/public/app/features/alerting/unified/PanelAlertTabContent.tsx new file mode 100644 index 00000000..7460af80 --- /dev/null +++ b/public/app/features/alerting/unified/PanelAlertTabContent.tsx @@ -0,0 +1,85 @@ +import { css } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Alert, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui'; +import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; +import React, { FC } from 'react'; +import { NewRuleFromPanelButton } from './components/panel-alerts-tab/NewRuleFromPanelButton'; +import { RulesTable } from './components/rules/RulesTable'; +import { usePanelCombinedRules } from './hooks/usePanelCombinedRules'; +import { selectors } from '@grafana/e2e-selectors'; + +interface Props { + dashboard: DashboardModel; + panel: PanelModel; +} + +export const PanelAlertTabContent: FC = ({ dashboard, panel }) => { + const styles = useStyles2(getStyles); + const { errors, loading, rules } = usePanelCombinedRules({ + dashboard, + panel, + poll: true, + }); + + const alert = errors.length ? ( + + {errors.map((error, index) => ( +

Failed to load Grafana rules state: {error.message || 'Unknown error.'}

+ ))} + + ) : null; + + if (loading && !rules.length) { + return ( +

+ {alert} + +

+ ); + } + + if (rules.length) { + return ( + +

+ {alert} + + {!!dashboard.meta.canSave && ( + + )} +

+ + ); + } + + return ( +

+ {alert} + {!!dashboard.uid && ( + <> +

There are no alert rules linked to this panel.

+ {!!dashboard.meta.canSave && } + + )} + {!dashboard.uid && !!dashboard.meta.canSave && ( + + Dashboard must be saved before alerts can be added. + + )} +

+ ); +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + newButton: css` + margin-top: ${theme.spacing(3)}; + `, + innerWrapper: css` + padding: ${theme.spacing(2)}; + `, + noRulesWrapper: css` + margin: ${theme.spacing(2)}; + background-color: ${theme.colors.background.secondary}; + padding: ${theme.spacing(3)}; + `, +}); diff --git a/public/app/features/alerting/unified/Receivers.test.tsx b/public/app/features/alerting/unified/Receivers.test.tsx new file mode 100644 index 00000000..e75408c7 --- /dev/null +++ b/public/app/features/alerting/unified/Receivers.test.tsx @@ -0,0 +1,444 @@ +import { configureStore } from 'app/store/configureStore'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import Receivers from './Receivers'; +import React from 'react'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; +import { act, render, waitFor } from '@testing-library/react'; +import { getAllDataSources } from './utils/config'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { updateAlertManagerConfig, fetchAlertManagerConfig, fetchStatus, testReceivers } from './api/alertmanager'; +import { + mockDataSource, + MockDataSourceSrv, + someCloudAlertManagerConfig, + someCloudAlertManagerStatus, + someGrafanaAlertManagerConfig, +} from './mocks'; +import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from './utils/datasource'; +import { fetchNotifiers } from './api/grafana'; +import { grafanaNotifiersMock } from './mocks/grafana-notifiers'; +import { byLabelText, byPlaceholderText, byRole, byTestId, byText } from 'testing-library-selector'; +import userEvent from '@testing-library/user-event'; +import { ALERTMANAGER_NAME_LOCAL_STORAGE_KEY, ALERTMANAGER_NAME_QUERY_KEY } from './utils/constants'; +import store from 'app/core/store'; +import { contextSrv } from 'app/core/services/context_srv'; +import { selectOptionInTest } from '@grafana/ui'; +import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from 'app/plugins/datasource/alertmanager/types'; + +jest.mock('./api/alertmanager'); +jest.mock('./api/grafana'); +jest.mock('./utils/config'); + +const mocks = { + getAllDataSources: typeAsJestMock(getAllDataSources), + + api: { + fetchConfig: typeAsJestMock(fetchAlertManagerConfig), + fetchStatus: typeAsJestMock(fetchStatus), + updateConfig: typeAsJestMock(updateAlertManagerConfig), + fetchNotifiers: typeAsJestMock(fetchNotifiers), + testReceivers: typeAsJestMock(testReceivers), + }, +}; + +const renderReceivers = (alertManagerSourceName?: string) => { + const store = configureStore(); + + locationService.push( + '/alerting/notifications' + + (alertManagerSourceName ? `?${ALERTMANAGER_NAME_QUERY_KEY}=${alertManagerSourceName}` : '') + ); + + return render( + + + + + + ); +}; + +const dataSources = { + alertManager: mockDataSource({ + name: 'CloudManager', + type: DataSourceType.Alertmanager, + }), + promAlertManager: mockDataSource({ + name: 'PromManager', + type: DataSourceType.Alertmanager, + jsonData: { + implementation: AlertManagerImplementation.prometheus, + }, + }), +}; + +const ui = { + newContactPointButton: byRole('link', { name: /new contact point/i }), + saveContactButton: byRole('button', { name: /save contact point/i }), + newContactPointTypeButton: byRole('button', { name: /new contact point type/i }), + testContactPointButton: byRole('button', { name: /Test/ }), + testContactPointModal: byRole('heading', { name: /test contact point/i }), + customContactPointOption: byRole('radio', { name: /custom/i }), + contactPointAnnotationSelect: (idx: number) => byTestId(`annotation-key-${idx}`), + contactPointAnnotationValue: (idx: number) => byTestId(`annotation-value-${idx}`), + contactPointLabelKey: (idx: number) => byTestId(`label-key-${idx}`), + contactPointLabelValue: (idx: number) => byTestId(`label-value-${idx}`), + testContactPoint: byRole('button', { name: /send test notification/i }), + cancelButton: byTestId('cancel-button'), + + receiversTable: byTestId('receivers-table'), + templatesTable: byTestId('templates-table'), + alertManagerPicker: byTestId('alertmanager-picker'), + + channelFormContainer: byTestId('item-container'), + + inputs: { + name: byPlaceholderText('Name'), + email: { + addresses: byLabelText(/Addresses/), + toEmails: byLabelText(/To/), + }, + hipchat: { + url: byLabelText('Hip Chat Url'), + apiKey: byLabelText('API Key'), + }, + slack: { + webhookURL: byLabelText(/Webhook URL/i), + }, + webhook: { + URL: byLabelText(/The endpoint to send HTTP POST requests to/i), + }, + }, +}; + +const clickSelectOption = async (selectElement: HTMLElement, optionText: string): Promise => { + userEvent.click(byRole('combobox').get(selectElement)); + await selectOptionInTest(selectElement, optionText); +}; + +describe('Receivers', () => { + beforeEach(() => { + jest.resetAllMocks(); + mocks.getAllDataSources.mockReturnValue(Object.values(dataSources)); + mocks.api.fetchNotifiers.mockResolvedValue(grafanaNotifiersMock); + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + contextSrv.isEditor = true; + store.delete(ALERTMANAGER_NAME_LOCAL_STORAGE_KEY); + }); + + it('Template and receiver tables are rendered, alertmanager can be selected', async () => { + mocks.api.fetchConfig.mockImplementation((name) => + Promise.resolve(name === GRAFANA_RULES_SOURCE_NAME ? someGrafanaAlertManagerConfig : someCloudAlertManagerConfig) + ); + await renderReceivers(); + + // check that by default grafana templates & receivers are fetched rendered in appropriate tables + let receiversTable = await ui.receiversTable.find(); + let templatesTable = await ui.templatesTable.find(); + let templateRows = templatesTable.querySelectorAll('tbody tr'); + expect(templateRows).toHaveLength(3); + expect(templateRows[0]).toHaveTextContent('first template'); + expect(templateRows[1]).toHaveTextContent('second template'); + expect(templateRows[2]).toHaveTextContent('third template'); + let receiverRows = receiversTable.querySelectorAll('tbody tr'); + expect(receiverRows[0]).toHaveTextContent('default'); + expect(receiverRows[1]).toHaveTextContent('critical'); + expect(receiverRows).toHaveLength(2); + + expect(mocks.api.fetchConfig).toHaveBeenCalledTimes(1); + expect(mocks.api.fetchConfig).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME); + expect(mocks.api.fetchNotifiers).toHaveBeenCalledTimes(1); + expect(locationService.getSearchObject()[ALERTMANAGER_NAME_QUERY_KEY]).toEqual(undefined); + + // select external cloud alertmanager, check that data is retrieved and contents are rendered as appropriate + await clickSelectOption(ui.alertManagerPicker.get(), 'CloudManager'); + await byText('cloud-receiver').find(); + expect(mocks.api.fetchConfig).toHaveBeenCalledTimes(2); + expect(mocks.api.fetchConfig).toHaveBeenLastCalledWith('CloudManager'); + + receiversTable = await ui.receiversTable.find(); + templatesTable = await ui.templatesTable.find(); + templateRows = templatesTable.querySelectorAll('tbody tr'); + expect(templateRows[0]).toHaveTextContent('foo template'); + expect(templateRows).toHaveLength(1); + receiverRows = receiversTable.querySelectorAll('tbody tr'); + expect(receiverRows[0]).toHaveTextContent('cloud-receiver'); + expect(receiverRows).toHaveLength(1); + expect(locationService.getSearchObject()[ALERTMANAGER_NAME_QUERY_KEY]).toEqual('CloudManager'); + }); + + it('Grafana receiver can be tested', async () => { + mocks.api.fetchConfig.mockResolvedValue(someGrafanaAlertManagerConfig); + + await renderReceivers(); + + // go to new contact point page + userEvent.click(await ui.newContactPointButton.find()); + + await byRole('heading', { name: /create contact point/i }).find(); + expect(locationService.getLocation().pathname).toEqual('/alerting/notifications/receivers/new'); + + // type in a name for the new receiver + userEvent.type(ui.inputs.name.get(), 'my new receiver'); + + // enter some email + const email = ui.inputs.email.addresses.get(); + userEvent.clear(email); + userEvent.type(email, 'tester@grafana.com'); + + // try to test the contact point + userEvent.click(ui.testContactPointButton.get()); + + await waitFor(() => expect(ui.testContactPointModal.get()).toBeInTheDocument()); + userEvent.click(ui.customContactPointOption.get()); + await waitFor(() => expect(ui.contactPointAnnotationSelect(0).get()).toBeInTheDocument()); + + // enter custom annotations and labels + await clickSelectOption(ui.contactPointAnnotationSelect(0).get(), 'Description'); + await userEvent.type(ui.contactPointAnnotationValue(0).get(), 'Test contact point'); + await userEvent.type(ui.contactPointLabelKey(0).get(), 'foo'); + await userEvent.type(ui.contactPointLabelValue(0).get(), 'bar'); + userEvent.click(ui.testContactPoint.get()); + + await waitFor(() => expect(mocks.api.testReceivers).toHaveBeenCalled()); + + expect(mocks.api.testReceivers).toHaveBeenCalledWith( + 'grafana', + [ + { + grafana_managed_receiver_configs: [ + { + disableResolveMessage: false, + name: 'test', + secureSettings: {}, + settings: { addresses: 'tester@grafana.com', singleEmail: false }, + type: 'email', + }, + ], + name: 'test', + }, + ], + { annotations: { description: 'Test contact point' }, labels: { foo: 'bar' } } + ); + }); + + it('Grafana receiver can be created', async () => { + mocks.api.fetchConfig.mockResolvedValue(someGrafanaAlertManagerConfig); + mocks.api.updateConfig.mockResolvedValue(); + await renderReceivers(); + + // go to new contact point page + await userEvent.click(await ui.newContactPointButton.find()); + + await byRole('heading', { name: /create contact point/i }).find(); + expect(locationService.getLocation().pathname).toEqual('/alerting/notifications/receivers/new'); + + // type in a name for the new receiver + userEvent.type(byPlaceholderText('Name').get(), 'my new receiver'); + + // check that default email form is rendered + await ui.inputs.email.addresses.find(); + + // select hipchat + await clickSelectOption(byTestId('items.0.type').get(), 'HipChat'); + + // check that email options are gone and hipchat options appear + expect(ui.inputs.email.addresses.query()).not.toBeInTheDocument(); + + const urlInput = ui.inputs.hipchat.url.get(); + const apiKeyInput = ui.inputs.hipchat.apiKey.get(); + + userEvent.type(urlInput, 'http://hipchat'); + userEvent.type(apiKeyInput, 'foobarbaz'); + + // it seems react-hook-form does some async state updates after submit + await act(async () => { + await userEvent.click(ui.saveContactButton.get()); + }); + + // see that we're back to main page and proper api calls have been made + await ui.receiversTable.find(); + expect(mocks.api.updateConfig).toHaveBeenCalledTimes(1); + expect(mocks.api.fetchConfig).toHaveBeenCalledTimes(3); + expect(locationService.getLocation().pathname).toEqual('/alerting/notifications'); + expect(mocks.api.updateConfig).toHaveBeenLastCalledWith(GRAFANA_RULES_SOURCE_NAME, { + ...someGrafanaAlertManagerConfig, + alertmanager_config: { + ...someGrafanaAlertManagerConfig.alertmanager_config, + receivers: [ + ...(someGrafanaAlertManagerConfig.alertmanager_config.receivers ?? []), + { + name: 'my new receiver', + grafana_managed_receiver_configs: [ + { + disableResolveMessage: false, + name: 'my new receiver', + secureSettings: {}, + settings: { + apiKey: 'foobarbaz', + url: 'http://hipchat', + }, + type: 'hipchat', + }, + ], + }, + ], + }, + }); + }); + + it('Cloud alertmanager receiver can be edited', async () => { + mocks.api.fetchConfig.mockResolvedValue(someCloudAlertManagerConfig); + mocks.api.updateConfig.mockResolvedValue(); + await renderReceivers('CloudManager'); + + // click edit button for the receiver + const receiversTable = await ui.receiversTable.find(); + const receiverRows = receiversTable.querySelectorAll('tbody tr'); + expect(receiverRows[0]).toHaveTextContent('cloud-receiver'); + await userEvent.click(byTestId('edit').get(receiverRows[0])); + + // check that form is open + await byRole('heading', { name: /update contact point/i }).find(); + expect(locationService.getLocation().pathname).toEqual('/alerting/notifications/receivers/cloud-receiver/edit'); + expect(ui.channelFormContainer.queryAll()).toHaveLength(2); + + // delete the email channel + expect(ui.channelFormContainer.queryAll()).toHaveLength(2); + await userEvent.click(byTestId('items.0.delete-button').get()); + expect(ui.channelFormContainer.queryAll()).toHaveLength(1); + + // modify webhook url + const slackContainer = ui.channelFormContainer.get(); + await userEvent.click(byText('Optional Slack settings').get(slackContainer)); + userEvent.type(ui.inputs.slack.webhookURL.get(slackContainer), 'http://newgreaturl'); + + // add confirm button to action + await userEvent.click(byText(/Actions $1$/i).get(slackContainer)); + await userEvent.click(await byTestId('items.1.settings.actions.0.confirm.add-button').find()); + const confirmSubform = byTestId('items.1.settings.actions.0.confirm.container').get(); + userEvent.type(byLabelText('Text').get(confirmSubform), 'confirm this'); + + // delete a field + await userEvent.click(byText(/Fields $2$/i).get(slackContainer)); + await userEvent.click(byTestId('items.1.settings.fields.0.delete-button').get()); + await byText(/Fields $1$/i).get(slackContainer); + + // add another channel + await userEvent.click(ui.newContactPointTypeButton.get()); + await clickSelectOption(await byTestId('items.2.type').find(), 'Webhook'); + userEvent.type(await ui.inputs.webhook.URL.find(), 'http://webhookurl'); + + // it seems react-hook-form does some async state updates after submit + await act(async () => { + await userEvent.click(ui.saveContactButton.get()); + }); + + // see that we're back to main page and proper api calls have been made + await ui.receiversTable.find(); + expect(mocks.api.updateConfig).toHaveBeenCalledTimes(1); + expect(mocks.api.fetchConfig).toHaveBeenCalledTimes(3); + expect(locationService.getLocation().pathname).toEqual('/alerting/notifications'); + expect(mocks.api.updateConfig).toHaveBeenLastCalledWith('CloudManager', { + ...someCloudAlertManagerConfig, + alertmanager_config: { + ...someCloudAlertManagerConfig.alertmanager_config, + receivers: [ + { + name: 'cloud-receiver', + slack_configs: [ + { + actions: [ + { + confirm: { + text: 'confirm this', + }, + text: 'action1text', + type: 'action1type', + url: 'http://action1', + }, + ], + api_url: 'http://slack1http://newgreaturl', + channel: '#mychannel', + fields: [ + { + short: false, + title: 'field2', + value: 'text2', + }, + ], + link_names: false, + send_resolved: false, + short_fields: false, + }, + ], + webhook_configs: [ + { + send_resolved: true, + url: 'http://webhookurl', + }, + ], + }, + ], + }, + }); + }); + + it('Prometheus Alertmanager receiver cannot be edited', async () => { + mocks.api.fetchStatus.mockResolvedValue({ + ...someCloudAlertManagerStatus, + config: someCloudAlertManagerConfig.alertmanager_config, + }); + await renderReceivers(dataSources.promAlertManager.name); + + const receiversTable = await ui.receiversTable.find(); + // there's no templates table for vanilla prom, API does not return templates + expect(ui.templatesTable.query()).not.toBeInTheDocument(); + + // click view button on the receiver + const receiverRows = receiversTable.querySelectorAll('tbody tr'); + expect(receiverRows[0]).toHaveTextContent('cloud-receiver'); + expect(byTestId('edit').query(receiverRows[0])).not.toBeInTheDocument(); + await userEvent.click(byTestId('view').get(receiverRows[0])); + + // check that form is open + await byRole('heading', { name: /contact point/i }).find(); + expect(locationService.getLocation().pathname).toEqual('/alerting/notifications/receivers/cloud-receiver/edit'); + const channelForms = ui.channelFormContainer.queryAll(); + expect(channelForms).toHaveLength(2); + + // check that inputs are disabled and there is no save button + expect(ui.inputs.name.queryAll()[0]).toHaveAttribute('readonly'); + expect(ui.inputs.email.toEmails.get(channelForms[0])).toHaveAttribute('readonly'); + expect(ui.inputs.slack.webhookURL.get(channelForms[1])).toHaveAttribute('readonly'); + expect(ui.newContactPointButton.query()).not.toBeInTheDocument(); + expect(ui.testContactPointButton.query()).not.toBeInTheDocument(); + expect(ui.saveContactButton.query()).not.toBeInTheDocument(); + expect(ui.cancelButton.query()).toBeInTheDocument(); + + expect(mocks.api.fetchConfig).not.toHaveBeenCalled(); + expect(mocks.api.fetchStatus).toHaveBeenCalledTimes(1); + }); + + it('Loads config from status endpoint if there is no user config', async () => { + // loading an empty config with make it fetch config from status endpoint + mocks.api.fetchConfig.mockResolvedValue({ + template_files: {}, + alertmanager_config: {}, + }); + mocks.api.fetchStatus.mockResolvedValue(someCloudAlertManagerStatus); + await renderReceivers('CloudManager'); + + // check that receiver from the default config is represented + const receiversTable = await ui.receiversTable.find(); + const receiverRows = receiversTable.querySelectorAll('tbody tr'); + expect(receiverRows[0]).toHaveTextContent('default-email'); + + // check that both config and status endpoints were called + expect(mocks.api.fetchConfig).toHaveBeenCalledTimes(1); + expect(mocks.api.fetchConfig).toHaveBeenLastCalledWith('CloudManager'); + expect(mocks.api.fetchStatus).toHaveBeenCalledTimes(1); + expect(mocks.api.fetchStatus).toHaveBeenLastCalledWith('CloudManager'); + }); +}); diff --git a/public/app/features/alerting/unified/Receivers.tsx b/public/app/features/alerting/unified/Receivers.tsx new file mode 100644 index 00000000..1d148d92 --- /dev/null +++ b/public/app/features/alerting/unified/Receivers.tsx @@ -0,0 +1,107 @@ +import { Alert, LoadingPlaceholder, withErrorBoundary } from '@grafana/ui'; +import React, { FC, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { Redirect, Route, RouteChildrenProps, Switch, useLocation } from 'react-router-dom'; +import { AlertingPageWrapper } from './components/AlertingPageWrapper'; +import { AlertManagerPicker } from './components/AlertManagerPicker'; +import { EditReceiverView } from './components/receivers/EditReceiverView'; +import { EditTemplateView } from './components/receivers/EditTemplateView'; +import { GlobalConfigForm } from './components/receivers/GlobalConfigForm'; +import { NewReceiverView } from './components/receivers/NewReceiverView'; +import { NewTemplateView } from './components/receivers/NewTemplateView'; +import { ReceiversAndTemplatesView } from './components/receivers/ReceiversAndTemplatesView'; +import { useAlertManagerSourceName } from './hooks/useAlertManagerSourceName'; +import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; +import { fetchAlertManagerConfigAction, fetchGrafanaNotifiersAction } from './state/actions'; +import { GRAFANA_RULES_SOURCE_NAME } from './utils/datasource'; +import { initialAsyncRequestState } from './utils/redux'; + +const Receivers: FC = () => { + const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(); + const dispatch = useDispatch(); + + const location = useLocation(); + const isRoot = location.pathname.endsWith('/alerting/notifications'); + + const configRequests = useUnifiedAlertingSelector((state) => state.amConfigs); + + const { result: config, loading, error } = + (alertManagerSourceName && configRequests[alertManagerSourceName]) || initialAsyncRequestState; + const receiverTypes = useUnifiedAlertingSelector((state) => state.grafanaNotifiers); + + const shouldLoadConfig = isRoot || !config; + + useEffect(() => { + if (alertManagerSourceName && shouldLoadConfig) { + dispatch(fetchAlertManagerConfigAction(alertManagerSourceName)); + } + }, [alertManagerSourceName, dispatch, shouldLoadConfig]); + + useEffect(() => { + if (alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME && !(receiverTypes.result || receiverTypes.loading)) { + dispatch(fetchGrafanaNotifiersAction()); + } + }, [alertManagerSourceName, dispatch, receiverTypes]); + + const disableAmSelect = !isRoot; + + if (!alertManagerSourceName) { + return ; + } + + return ( + + + {error && !loading && ( + + {error.message || 'Unknown error.'} + + )} + {loading && !config && } + {config && !error && ( + + + + + + + + + {({ match }: RouteChildrenProps<{ name: string }>) => + match?.params.name && ( + + ) + } + + + + + + {({ match }: RouteChildrenProps<{ name: string }>) => + match?.params.name && ( + + ) + } + + + + + + )} + + ); +}; + +export default withErrorBoundary(Receivers, { style: 'page' }); diff --git a/public/app/features/alerting/unified/RedirectToRuleViewer.test.tsx b/public/app/features/alerting/unified/RedirectToRuleViewer.test.tsx new file mode 100644 index 00000000..a8298cc5 --- /dev/null +++ b/public/app/features/alerting/unified/RedirectToRuleViewer.test.tsx @@ -0,0 +1,146 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { DataSourceJsonData, PluginMeta } from '@grafana/data'; +import { locationService } from '@grafana/runtime'; +import { RedirectToRuleViewer } from './RedirectToRuleViewer'; +import { configureStore } from 'app/store/configureStore'; +import { typeAsJestMock } from '../../../../test/helpers/typeAsJestMock'; +import { useCombinedRulesMatching } from './hooks/useCombinedRule'; +import { CombinedRule, Rule } from '../../../types/unified-alerting'; +import { PromRuleType } from '../../../types/unified-alerting-dto'; +import { getRulesSourceByName } from './utils/datasource'; + +jest.mock('./hooks/useCombinedRule'); +jest.mock('./utils/datasource'); +jest.mock('react-router-dom', () => ({ + ...(jest.requireActual('react-router-dom') as any), + Redirect: jest.fn(({}) => `Redirected`), +})); + +const store = configureStore(); +const renderRedirectToRuleViewer = () => { + return render( + + + + + + ); +}; + +const mockRuleSourceByName = () => { + typeAsJestMock(getRulesSourceByName).mockReturnValue({ + name: 'prom test', + type: 'prometheus', + uid: 'asdf23', + id: 1, + meta: {} as PluginMeta, + jsonData: {} as DataSourceJsonData, + access: 'proxy', + }); +}; + +describe('Redirect to Rule viewer', () => { + it('should list rules that match the same name', () => { + typeAsJestMock(useCombinedRulesMatching).mockReturnValue({ + result: mockedRules, + loading: false, + dispatched: true, + requestId: 'A', + error: undefined, + }); + mockRuleSourceByName(); + renderRedirectToRuleViewer(); + expect(screen.getAllByText('Cloud test alert')).toHaveLength(2); + }); + + it('should redirect to view rule page if only one match', () => { + typeAsJestMock(useCombinedRulesMatching).mockReturnValue({ + result: [mockedRules[0]], + loading: false, + dispatched: true, + requestId: 'A', + error: undefined, + }); + mockRuleSourceByName(); + renderRedirectToRuleViewer(); + expect(screen.getByText('Redirected')).toBeInTheDocument(); + }); +}); + +const mockedRules: CombinedRule[] = [ + { + name: 'Cloud test alert', + labels: {}, + query: 'up == 0', + annotations: {}, + group: { + name: 'test', + rules: [], + }, + promRule: { + health: 'ok', + name: 'cloud up alert', + query: 'up == 0', + type: PromRuleType.Alerting, + } as Rule, + namespace: { + name: 'prom test alerts', + groups: [], + rulesSource: { + name: 'prom test', + type: 'prometheus', + uid: 'asdf23', + id: 1, + meta: {} as PluginMeta, + jsonData: {} as DataSourceJsonData, + access: 'proxy', + }, + }, + }, + { + name: 'Cloud test alert', + labels: {}, + query: 'up == 0', + annotations: {}, + group: { + name: 'test', + rules: [], + }, + promRule: { + health: 'ok', + name: 'cloud up alert', + query: 'up == 0', + type: PromRuleType.Alerting, + } as Rule, + namespace: { + name: 'prom test alerts', + groups: [], + rulesSource: { + name: 'prom test', + type: 'prometheus', + uid: 'asdf23', + id: 1, + meta: {} as PluginMeta, + jsonData: {} as DataSourceJsonData, + access: 'proxy', + }, + }, + }, +]; + +const mockRoute = (ruleName: string, sourceName: string) => { + return { + route: { + path: '/', + component: RedirectToRuleViewer, + }, + queryParams: { returnTo: '/alerting/list' }, + match: { params: { name: ruleName, sourceName: sourceName }, isExact: false, url: 'asdf', path: '' }, + history: locationService.getHistory(), + location: { pathname: '', hash: '', search: '', state: '' }, + staticContext: {}, + }; +}; diff --git a/public/app/features/alerting/unified/RedirectToRuleViewer.tsx b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx new file mode 100644 index 00000000..51c6f212 --- /dev/null +++ b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { Redirect } from 'react-router-dom'; +import { css } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Alert, Card, Icon, LoadingPlaceholder, useStyles2, withErrorBoundary } from '@grafana/ui'; +import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; +import { useCombinedRulesMatching } from './hooks/useCombinedRule'; +import { createViewLink } from './utils/misc'; +import { getRulesSourceByName } from './utils/datasource'; +import { RuleViewerLayout } from './components/rule-viewer/RuleViewerLayout'; +import { AlertLabels } from './components/AlertLabels'; + +type RedirectToRuleViewerProps = GrafanaRouteComponentProps<{ name?: string; sourceName?: string }>; +const pageTitle = 'Alerting / Find rule'; + +export function RedirectToRuleViewer(props: RedirectToRuleViewerProps): JSX.Element | null { + const { name, sourceName } = props.match.params; + const styles = useStyles2(getStyles); + const { error, loading, result: rules, dispatched } = useCombinedRulesMatching(name, sourceName); + + if (error) { + return ( + + +

+ {error.message} +
+ {!!error?.stack && error.stack} +

+ + + ); + } + + if (loading || !dispatched || !Array.isArray(rules)) { + return ( + + + + ); + } + + if (!name || !sourceName) { + return ; + } + + const rulesSource = getRulesSourceByName(sourceName); + + if (!rulesSource) { + return ( + + +

{`Could not find data source with name: ${sourceName}.`}

+ + + ); + } + + if (rules.length === 1) { + const [rule] = rules; + return ; + } + + return ( + +

+ Several rules in {sourceName} matched the name{' '} + {name}, please select the rule you want to view. +

+ {rules.map((rule, index) => { + return ( + + {rule.name} + + + {`${rule.namespace.name} / ${rule.group.name}`} + + + + + + ); + })} +

+ + ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + param: css` + font-style: italic; + color: ${theme.colors.text.secondary}; + `, + rules: css` + margin-top: ${theme.spacing(2)}; + `, + namespace: css` + margin-left: ${theme.spacing(1)}; + `, + errorMessage: css` + white-space: pre-wrap; + `, + }; +} + +export default withErrorBoundary(RedirectToRuleViewer, { style: 'page' }); diff --git a/public/app/features/alerting/unified/RuleEditor.test.tsx b/public/app/features/alerting/unified/RuleEditor.test.tsx new file mode 100644 index 00000000..b4bcd63e --- /dev/null +++ b/public/app/features/alerting/unified/RuleEditor.test.tsx @@ -0,0 +1,512 @@ +import { Matcher, render, waitFor } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { BackendSrv, locationService, setBackendSrv, setDataSourceSrv } from '@grafana/runtime'; +import { configureStore } from 'app/store/configureStore'; +import RuleEditor from './RuleEditor'; +import { Route, Router } from 'react-router-dom'; +import React from 'react'; +import { byLabelText, byRole, byTestId, byText } from 'testing-library-selector'; +import { selectOptionInTest } from '@grafana/ui'; +import { contextSrv } from 'app/core/services/context_srv'; +import { mockDataSource, MockDataSourceSrv } from './mocks'; +import userEvent from '@testing-library/user-event'; +import { DataSourceInstanceSettings } from '@grafana/data'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { getAllDataSources } from './utils/config'; +import { fetchRulerRules, fetchRulerRulesGroup, fetchRulerRulesNamespace, setRulerRuleGroup } from './api/ruler'; +import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from './utils/datasource'; +import { DashboardSearchHit } from 'app/features/search/types'; +import { getDefaultQueries } from './utils/rule-form'; +import { ExpressionEditorProps } from './components/rule-editor/ExpressionEditor'; +import * as api from 'app/features/manage-dashboards/state/actions'; +import { GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto'; + +jest.mock('./components/rule-editor/ExpressionEditor', () => ({ + // eslint-disable-next-line react/display-name + ExpressionEditor: ({ value, onChange }: ExpressionEditorProps) => ( + onChange(e.target.value)} /> + ), +})); + +jest.mock('./api/ruler'); +jest.mock('./utils/config'); + +// there's no angular scope in test and things go terribly wrong when trying to render the query editor row. +// lets just skip it +jest.mock('app/features/query/components/QueryEditorRow', () => ({ + // eslint-disable-next-line react/display-name + QueryEditorRow: () =>

, +})); + +const mocks = { + getAllDataSources: typeAsJestMock(getAllDataSources), + + api: { + fetchRulerRulesGroup: typeAsJestMock(fetchRulerRulesGroup), + setRulerRuleGroup: typeAsJestMock(setRulerRuleGroup), + fetchRulerRulesNamespace: typeAsJestMock(fetchRulerRulesNamespace), + fetchRulerRules: typeAsJestMock(fetchRulerRules), + }, +}; + +function renderRuleEditor(identifier?: string) { + const store = configureStore(); + + locationService.push(identifier ? `/alerting/${identifier}/edit` : `/alerting/new`); + + return render( + + + + + + ); +} + +const ui = { + inputs: { + name: byLabelText('Rule name'), + alertType: byTestId('alert-type-picker'), + dataSource: byTestId('datasource-picker'), + folder: byTestId('folder-picker'), + namespace: byTestId('namespace-picker'), + group: byTestId('group-picker'), + annotationKey: (idx: number) => byTestId(`annotation-key-${idx}`), + annotationValue: (idx: number) => byTestId(`annotation-value-${idx}`), + labelKey: (idx: number) => byTestId(`label-key-${idx}`), + labelValue: (idx: number) => byTestId(`label-value-${idx}`), + expr: byTestId('expr'), + }, + buttons: { + save: byRole('button', { name: 'Save' }), + addAnnotation: byRole('button', { name: /Add info/ }), + addLabel: byRole('button', { name: /Add label/ }), + }, +}; + +describe('RuleEditor', () => { + beforeEach(() => { + jest.resetAllMocks(); + contextSrv.isEditor = true; + }); + + it('can create a new cloud alert', async () => { + const dataSources = { + default: mockDataSource( + { + type: 'prometheus', + name: 'Prom', + isDefault: true, + }, + { alerting: true } + ), + }; + + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + mocks.getAllDataSources.mockReturnValue(Object.values(dataSources)); + mocks.api.setRulerRuleGroup.mockResolvedValue(); + mocks.api.fetchRulerRulesNamespace.mockResolvedValue([]); + mocks.api.fetchRulerRulesGroup.mockResolvedValue({ + name: 'group2', + rules: [], + }); + mocks.api.fetchRulerRules.mockResolvedValue({ + namespace1: [ + { + name: 'group1', + rules: [], + }, + ], + namespace2: [ + { + name: 'group2', + rules: [], + }, + ], + }); + + await renderRuleEditor(); + userEvent.type(await ui.inputs.name.find(), 'my great new rule'); + await clickSelectOption(ui.inputs.alertType.get(), /Cortex\/Loki managed alert/); + const dataSourceSelect = ui.inputs.dataSource.get(); + userEvent.click(byRole('combobox').get(dataSourceSelect)); + await clickSelectOption(dataSourceSelect, 'Prom (default)'); + await waitFor(() => expect(mocks.api.fetchRulerRules).toHaveBeenCalled()); + await clickSelectOption(ui.inputs.namespace.get(), 'namespace2'); + await clickSelectOption(ui.inputs.group.get(), 'group2'); + + userEvent.type(ui.inputs.expr.get(), 'up == 1'); + + userEvent.type(ui.inputs.annotationValue(0).get(), 'some summary'); + userEvent.type(ui.inputs.annotationValue(1).get(), 'some description'); + + // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed + userEvent.click(ui.buttons.addLabel.get(), undefined, { skipPointerEventsCheck: true }); + + userEvent.type(ui.inputs.labelKey(0).get(), 'severity'); + userEvent.type(ui.inputs.labelValue(0).get(), 'warn'); + userEvent.type(ui.inputs.labelKey(1).get(), 'team'); + userEvent.type(ui.inputs.labelValue(1).get(), 'the a-team'); + + // save and check what was sent to backend + userEvent.click(ui.buttons.save.get()); + await waitFor(() => expect(mocks.api.setRulerRuleGroup).toHaveBeenCalled()); + expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledWith('Prom', 'namespace2', { + name: 'group2', + rules: [ + { + alert: 'my great new rule', + annotations: { description: 'some description', summary: 'some summary' }, + labels: { severity: 'warn', team: 'the a-team' }, + expr: 'up == 1', + for: '1m', + }, + ], + }); + }); + + it('can create new grafana managed alert', async () => { + const searchFolderMock = jest.spyOn(api, 'searchFolders').mockResolvedValue([ + { + title: 'Folder A', + id: 1, + }, + { + title: 'Folder B', + id: 2, + }, + ] as DashboardSearchHit[]); + + const dataSources = { + default: mockDataSource({ + type: 'prometheus', + name: 'Prom', + isDefault: true, + }), + }; + + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + mocks.api.setRulerRuleGroup.mockResolvedValue(); + mocks.api.fetchRulerRulesNamespace.mockResolvedValue([]); + + // fill out the form + await renderRuleEditor(); + userEvent.type(await ui.inputs.name.find(), 'my great new rule'); + await clickSelectOption(ui.inputs.alertType.get(), /Classic Grafana alerts based on thresholds/); + const folderInput = await ui.inputs.folder.find(); + await waitFor(() => expect(searchFolderMock).toHaveBeenCalled()); + await clickSelectOption(folderInput, 'Folder A'); + + userEvent.type(ui.inputs.annotationValue(0).get(), 'some summary'); + userEvent.type(ui.inputs.annotationValue(1).get(), 'some description'); + + // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed + userEvent.click(ui.buttons.addLabel.get(), undefined, { skipPointerEventsCheck: true }); + + userEvent.type(ui.inputs.labelKey(0).get(), 'severity'); + userEvent.type(ui.inputs.labelValue(0).get(), 'warn'); + userEvent.type(ui.inputs.labelKey(1).get(), 'team'); + userEvent.type(ui.inputs.labelValue(1).get(), 'the a-team'); + + // save and check what was sent to backend + userEvent.click(ui.buttons.save.get()); + await waitFor(() => expect(mocks.api.setRulerRuleGroup).toHaveBeenCalled()); + expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME, 'Folder A', { + interval: '1m', + name: 'my great new rule', + rules: [ + { + annotations: { description: 'some description', summary: 'some summary' }, + labels: { severity: 'warn', team: 'the a-team' }, + for: '5m', + grafana_alert: { + condition: 'B', + data: getDefaultQueries(), + exec_err_state: 'Alerting', + no_data_state: 'NoData', + title: 'my great new rule', + }, + }, + ], + }); + }); + + it('can create a new cloud recording rule', async () => { + const dataSources = { + default: mockDataSource( + { + type: 'prometheus', + name: 'Prom', + isDefault: true, + }, + { alerting: true } + ), + }; + + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + mocks.getAllDataSources.mockReturnValue(Object.values(dataSources)); + mocks.api.setRulerRuleGroup.mockResolvedValue(); + mocks.api.fetchRulerRulesNamespace.mockResolvedValue([]); + mocks.api.fetchRulerRulesGroup.mockResolvedValue({ + name: 'group2', + rules: [], + }); + mocks.api.fetchRulerRules.mockResolvedValue({ + namespace1: [ + { + name: 'group1', + rules: [], + }, + ], + namespace2: [ + { + name: 'group2', + rules: [], + }, + ], + }); + + await renderRuleEditor(); + userEvent.type(await ui.inputs.name.find(), 'my great new recording rule'); + await clickSelectOption(ui.inputs.alertType.get(), /Cortex\/Loki managed recording rule/); + const dataSourceSelect = ui.inputs.dataSource.get(); + userEvent.click(byRole('combobox').get(dataSourceSelect)); + await clickSelectOption(dataSourceSelect, 'Prom (default)'); + await waitFor(() => expect(mocks.api.fetchRulerRules).toHaveBeenCalled()); + await clickSelectOption(ui.inputs.namespace.get(), 'namespace2'); + await clickSelectOption(ui.inputs.group.get(), 'group2'); + + userEvent.type(ui.inputs.expr.get(), 'up == 1'); + + // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed + userEvent.click(ui.buttons.addLabel.get(), undefined, { skipPointerEventsCheck: true }); + + userEvent.type(ui.inputs.labelKey(1).get(), 'team'); + userEvent.type(ui.inputs.labelValue(1).get(), 'the a-team'); + + // try to save, find out that recording rule name is invalid + userEvent.click(ui.buttons.save.get()); + await waitFor(() => + expect( + byText( + 'Recording rule name must be valid metric name. It may only contain letters, numbers, and colons. It may not contain whitespace.' + ).get() + ).toBeInTheDocument() + ); + expect(mocks.api.setRulerRuleGroup).not.toBeCalled(); + + // fix name and re-submit + userEvent.type(await ui.inputs.name.find(), '{selectall}{del}my:great:new:recording:rule'); + userEvent.click(ui.buttons.save.get()); + + // save and check what was sent to backend + userEvent.click(ui.buttons.save.get()); + await waitFor(() => expect(mocks.api.setRulerRuleGroup).toHaveBeenCalled()); + expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledWith('Prom', 'namespace2', { + name: 'group2', + rules: [ + { + record: 'my:great:new:recording:rule', + labels: { team: 'the a-team' }, + expr: 'up == 1', + }, + ], + }); + }); + + it('can edit grafana managed rule', async () => { + const uid = 'FOOBAR123'; + const folder = { + title: 'Folder A', + uid: 'abcd', + id: 1, + }; + const searchFolderMock = jest.spyOn(api, 'searchFolders').mockResolvedValue([folder] as DashboardSearchHit[]); + const getFolderByUid = jest.fn().mockResolvedValue({ + ...folder, + canSave: true, + }); + const dataSources = { + default: mockDataSource({ + type: 'prometheus', + name: 'Prom', + isDefault: true, + }), + }; + + const backendSrv = ({ + getFolderByUid, + } as any) as BackendSrv; + setBackendSrv(backendSrv); + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + mocks.api.setRulerRuleGroup.mockResolvedValue(); + mocks.api.fetchRulerRulesNamespace.mockResolvedValue([]); + mocks.api.fetchRulerRules.mockResolvedValue({ + [folder.title]: [ + { + interval: '1m', + name: 'my great new rule', + rules: [ + { + annotations: { description: 'some description', summary: 'some summary' }, + labels: { severity: 'warn', team: 'the a-team' }, + for: '5m', + grafana_alert: { + uid, + namespace_uid: 'abcd', + namespace_id: 1, + condition: 'B', + data: getDefaultQueries(), + exec_err_state: GrafanaAlertStateDecision.Alerting, + no_data_state: GrafanaAlertStateDecision.NoData, + title: 'my great new rule', + }, + }, + ], + }, + ], + }); + + await renderRuleEditor(uid); + await waitFor(() => expect(searchFolderMock).toHaveBeenCalled()); + + // check that it's filled in + const nameInput = await ui.inputs.name.find(); + expect(nameInput).toHaveValue('my great new rule'); + expect(ui.inputs.folder.get()).toHaveTextContent(new RegExp(folder.title)); + expect(ui.inputs.annotationValue(0).get()).toHaveValue('some description'); + expect(ui.inputs.annotationValue(1).get()).toHaveValue('some summary'); + + // add an annotation + await clickSelectOption(ui.inputs.annotationKey(2).get(), /Add new/); + userEvent.type(byRole('textbox').get(ui.inputs.annotationKey(2).get()), 'custom'); + userEvent.type(ui.inputs.annotationValue(2).get(), 'value'); + + //add a label + userEvent.type(ui.inputs.labelKey(2).get(), 'custom'); + userEvent.type(ui.inputs.labelValue(2).get(), 'value'); + + // save and check what was sent to backend + userEvent.click(ui.buttons.save.get()); + await waitFor(() => expect(mocks.api.setRulerRuleGroup).toHaveBeenCalled()); + + expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledWith(GRAFANA_RULES_SOURCE_NAME, 'Folder A', { + interval: '1m', + name: 'my great new rule', + rules: [ + { + annotations: { description: 'some description', summary: 'some summary', custom: 'value' }, + labels: { severity: 'warn', team: 'the a-team', custom: 'value' }, + for: '5m', + grafana_alert: { + uid, + condition: 'B', + data: getDefaultQueries(), + exec_err_state: 'Alerting', + no_data_state: 'NoData', + title: 'my great new rule', + }, + }, + ], + }); + }); + + it('for cloud alerts, should only allow to select editable rules sources', async () => { + const dataSources: Record> = { + // can edit rules + loki: mockDataSource( + { + type: DataSourceType.Loki, + name: 'loki with ruler', + }, + { alerting: true } + ), + loki_disabled: mockDataSource( + { + type: DataSourceType.Loki, + name: 'loki disabled for alerting', + jsonData: { + manageAlerts: false, + }, + }, + { alerting: true } + ), + // can edit rules + prom: mockDataSource( + { + type: DataSourceType.Prometheus, + name: 'cortex with ruler', + }, + { alerting: true } + ), + // cannot edit rules + loki_local_rule_store: mockDataSource( + { + type: DataSourceType.Loki, + name: 'loki with local rule store', + }, + { alerting: true } + ), + // cannot edit rules + prom_no_ruler_api: mockDataSource( + { + type: DataSourceType.Loki, + name: 'cortex without ruler api', + }, + { alerting: true } + ), + // not a supported datasource type + splunk: mockDataSource( + { + type: 'splunk', + name: 'splunk', + }, + { alerting: true } + ), + }; + + mocks.api.fetchRulerRulesGroup.mockImplementation(async (dataSourceName: string) => { + if (dataSourceName === 'loki with ruler' || dataSourceName === 'cortex with ruler') { + return null; + } + if (dataSourceName === 'loki with local rule store') { + throw { + status: 400, + data: { + message: 'GetRuleGroup unsupported in rule local store', + }, + }; + } + if (dataSourceName === 'cortex without ruler api') { + throw new Error('404 from rules config endpoint. Perhaps ruler API is not enabled?'); + } + return null; + }); + + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + mocks.getAllDataSources.mockReturnValue(Object.values(dataSources)); + + // render rule editor, select cortex/loki managed alerts + await renderRuleEditor(); + await ui.inputs.name.find(); + await clickSelectOption(ui.inputs.alertType.get(), /Cortex\/Loki managed alert/); + + // wait for ui theck each datasource if it supports rule editing + await waitFor(() => expect(mocks.api.fetchRulerRulesGroup).toHaveBeenCalledTimes(4)); + + // check that only rules sources that have ruler available are there + const dataSourceSelect = ui.inputs.dataSource.get(); + userEvent.click(byRole('combobox').get(dataSourceSelect)); + expect(await byText('loki with ruler').query()).toBeInTheDocument(); + expect(byText('cortex with ruler').query()).toBeInTheDocument(); + expect(byText('loki with local rule store').query()).not.toBeInTheDocument(); + expect(byText('prom without ruler api').query()).not.toBeInTheDocument(); + expect(byText('splunk').query()).not.toBeInTheDocument(); + expect(byText('loki disabled for alerting').query()).not.toBeInTheDocument(); + }); +}); + +const clickSelectOption = async (selectElement: HTMLElement, optionText: Matcher): Promise => { + userEvent.click(byRole('combobox').get(selectElement)); + await selectOptionInTest(selectElement, optionText as string); +}; diff --git a/public/app/features/alerting/unified/RuleEditor.tsx b/public/app/features/alerting/unified/RuleEditor.tsx new file mode 100644 index 00000000..d22917be --- /dev/null +++ b/public/app/features/alerting/unified/RuleEditor.tsx @@ -0,0 +1,86 @@ +import { css } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Alert, LinkButton, LoadingPlaceholder, useStyles2, withErrorBoundary } from '@grafana/ui'; +import Page from 'app/core/components/Page/Page'; +import { contextSrv } from 'app/core/services/context_srv'; +import { useCleanup } from 'app/core/hooks/useCleanup'; +import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; +import { RuleIdentifier } from 'app/types/unified-alerting'; +import React, { FC, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { AlertRuleForm } from './components/rule-editor/AlertRuleForm'; +import { useIsRuleEditable } from './hooks/useIsRuleEditable'; +import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; +import { fetchEditableRuleAction } from './state/actions'; +import * as ruleId from './utils/rule-id'; + +interface ExistingRuleEditorProps { + identifier: RuleIdentifier; +} + +const ExistingRuleEditor: FC = ({ identifier }) => { + useCleanup((state) => state.unifiedAlerting.ruleForm.existingRule); + const { loading, result, error, dispatched } = useUnifiedAlertingSelector((state) => state.ruleForm.existingRule); + const dispatch = useDispatch(); + const { isEditable } = useIsRuleEditable(ruleId.ruleIdentifierToRuleSourceName(identifier), result?.rule); + + useEffect(() => { + if (!dispatched) { + dispatch(fetchEditableRuleAction(identifier)); + } + }, [dispatched, dispatch, identifier]); + + if (loading || isEditable === undefined) { + return ( + + + + ); + } + if (error) { + return ( + + + {error.message} + + + ); + } + if (!result) { + return Sorry! This rule does not exist.; + } + if (isEditable === false) { + return Sorry! You do not have permission to edit this rule.; + } + return ; +}; + +type RuleEditorProps = GrafanaRouteComponentProps<{ id?: string }>; + +const RuleEditor: FC = ({ match }) => { + const { id } = match.params; + const identifier = ruleId.tryParse(id, true); + + if (identifier) { + return ; + } + if (!(contextSrv.hasEditPermissionInFolders || contextSrv.isEditor)) { + return Sorry! You are not allowed to create rules.; + } + return ; +}; + +const AlertWarning: FC<{ title: string }> = ({ title, children }) => ( + +

{children}

+ To rule list + +); + +const warningStyles = (theme: GrafanaTheme2) => ({ + warning: css` + margin: ${theme.spacing(4)}; + `, +}); + +export default withErrorBoundary(RuleEditor, { style: 'page' }); diff --git a/public/app/features/alerting/unified/RuleList.test.tsx b/public/app/features/alerting/unified/RuleList.test.tsx new file mode 100644 index 00000000..4a3f133b --- /dev/null +++ b/public/app/features/alerting/unified/RuleList.test.tsx @@ -0,0 +1,574 @@ +import React from 'react'; +import { render, waitFor } from '@testing-library/react'; +import { configureStore } from 'app/store/configureStore'; +import { Provider } from 'react-redux'; +import { RuleList } from './RuleList'; +import { byLabelText, byRole, byTestId, byText } from 'testing-library-selector'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { getAllDataSources } from './utils/config'; +import { fetchRules } from './api/prometheus'; +import { fetchRulerRules, deleteRulerRulesGroup, deleteNamespace, setRulerRuleGroup } from './api/ruler'; +import { + mockDataSource, + mockPromAlert, + mockPromAlertingRule, + mockPromRecordingRule, + mockPromRuleGroup, + mockPromRuleNamespace, + MockDataSourceSrv, + somePromRules, + someRulerRules, +} from './mocks'; +import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from './utils/datasource'; +import { SerializedError } from '@reduxjs/toolkit'; +import { PromAlertingRuleState } from 'app/types/unified-alerting-dto'; +import userEvent from '@testing-library/user-event'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; +import { Router } from 'react-router-dom'; + +jest.mock('./api/prometheus'); +jest.mock('./api/ruler'); +jest.mock('./utils/config'); +jest.mock('app/core/core', () => ({ + appEvents: { + subscribe: () => { + return { unsubscribe: () => {} }; + }, + emit: () => {}, + }, +})); + +const mocks = { + getAllDataSourcesMock: typeAsJestMock(getAllDataSources), + + api: { + fetchRules: typeAsJestMock(fetchRules), + fetchRulerRules: typeAsJestMock(fetchRulerRules), + deleteGroup: typeAsJestMock(deleteRulerRulesGroup), + deleteNamespace: typeAsJestMock(deleteNamespace), + setRulerRuleGroup: typeAsJestMock(setRulerRuleGroup), + }, +}; + +const renderRuleList = () => { + const store = configureStore(); + locationService.push('/'); + + return render( + + + + + + ); +}; + +const dataSources = { + prom: mockDataSource({ + name: 'Prometheus', + type: DataSourceType.Prometheus, + }), + promdisabled: mockDataSource({ + name: 'Prometheus-disabled', + type: DataSourceType.Prometheus, + jsonData: { + manageAlerts: false, + }, + }), + loki: mockDataSource({ + name: 'Loki', + type: DataSourceType.Loki, + }), + promBroken: mockDataSource({ + name: 'Prometheus-broken', + type: DataSourceType.Prometheus, + }), +}; + +const ui = { + ruleGroup: byTestId('rule-group'), + cloudRulesSourceErrors: byTestId('cloud-rulessource-errors'), + groupCollapseToggle: byTestId('group-collapse-toggle'), + ruleCollapseToggle: byTestId('collapse-toggle'), + rulesTable: byTestId('rules-table'), + ruleRow: byTestId('row'), + expandedContent: byTestId('expanded-content'), + rulesFilterInput: byTestId('search-query-input'), + moreErrorsButton: byRole('button', { name: /more errors/ }), + editCloudGroupIcon: byTestId('edit-group'), + + editGroupModal: { + namespaceInput: byLabelText('Namespace'), + ruleGroupInput: byLabelText('Rule group'), + intervalInput: byLabelText('Rule group evaluation interval'), + saveButton: byRole('button', { name: /Save changes/ }), + }, +}; + +describe('RuleList', () => { + afterEach(() => { + jest.resetAllMocks(); + setDataSourceSrv(undefined as any); + }); + + it('load & show rule groups from multiple cloud data sources', async () => { + mocks.getAllDataSourcesMock.mockReturnValue(Object.values(dataSources)); + + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + + mocks.api.fetchRules.mockImplementation((dataSourceName: string) => { + if (dataSourceName === dataSources.prom.name) { + return Promise.resolve([ + mockPromRuleNamespace({ + name: 'default', + dataSourceName: dataSources.prom.name, + groups: [ + mockPromRuleGroup({ + name: 'group-2', + }), + mockPromRuleGroup({ + name: 'group-1', + }), + ], + }), + ]); + } else if (dataSourceName === dataSources.loki.name) { + return Promise.resolve([ + mockPromRuleNamespace({ + name: 'default', + dataSourceName: dataSources.loki.name, + groups: [ + mockPromRuleGroup({ + name: 'group-1', + }), + ], + }), + mockPromRuleNamespace({ + name: 'lokins', + dataSourceName: dataSources.loki.name, + groups: [ + mockPromRuleGroup({ + name: 'group-1', + }), + ], + }), + ]); + } else if (dataSourceName === dataSources.promBroken.name) { + return Promise.reject({ message: 'this datasource is broken' } as SerializedError); + } else if (dataSourceName === GRAFANA_RULES_SOURCE_NAME) { + return Promise.resolve([ + mockPromRuleNamespace({ + name: 'foofolder', + dataSourceName: GRAFANA_RULES_SOURCE_NAME, + groups: [ + mockPromRuleGroup({ + name: 'grafana-group', + rules: [ + mockPromAlertingRule({ + query: '[]', + }), + ], + }), + ], + }), + ]); + } + return Promise.reject(new Error(`unexpected datasourceName: ${dataSourceName}`)); + }); + + await renderRuleList(); + + await waitFor(() => expect(mocks.api.fetchRules).toHaveBeenCalledTimes(4)); + const groups = await ui.ruleGroup.findAll(); + expect(groups).toHaveLength(5); + + expect(groups[0]).toHaveTextContent('foofolder'); + expect(groups[1]).toHaveTextContent('default > group-1'); + expect(groups[2]).toHaveTextContent('default > group-1'); + expect(groups[3]).toHaveTextContent('default > group-2'); + expect(groups[4]).toHaveTextContent('lokins > group-1'); + + const errors = await ui.cloudRulesSourceErrors.find(); + + expect(errors).not.toHaveTextContent( + 'Failed to load rules state from Prometheus-broken: this datasource is broken' + ); + userEvent.click(ui.moreErrorsButton.get()); + expect(errors).toHaveTextContent('Failed to load rules state from Prometheus-broken: this datasource is broken'); + }); + + it('expand rule group, rule and alert details', async () => { + mocks.getAllDataSourcesMock.mockReturnValue([dataSources.prom]); + setDataSourceSrv(new MockDataSourceSrv({ prom: dataSources.prom })); + mocks.api.fetchRules.mockImplementation((dataSourceName: string) => { + if (dataSourceName === GRAFANA_RULES_SOURCE_NAME) { + return Promise.resolve([]); + } else { + return Promise.resolve([ + mockPromRuleNamespace({ + groups: [ + mockPromRuleGroup({ + name: 'group-1', + }), + mockPromRuleGroup({ + name: 'group-2', + rules: [ + mockPromRecordingRule({ + name: 'recordingrule', + }), + mockPromAlertingRule({ + name: 'alertingrule', + labels: { + severity: 'warning', + foo: 'bar', + }, + query: 'topk(5, foo)[5m]', + annotations: { + message: 'great alert', + }, + alerts: [ + mockPromAlert({ + labels: { + foo: 'bar', + severity: 'warning', + }, + value: '2e+10', + annotations: { + message: 'first alert message', + }, + }), + mockPromAlert({ + labels: { + foo: 'baz', + severity: 'error', + }, + value: '3e+11', + annotations: { + message: 'first alert message', + }, + }), + ], + }), + mockPromAlertingRule({ + name: 'p-rule', + alerts: [], + state: PromAlertingRuleState.Pending, + }), + mockPromAlertingRule({ + name: 'i-rule', + alerts: [], + state: PromAlertingRuleState.Inactive, + }), + ], + }), + ], + }), + ]); + } + }); + + await renderRuleList(); + + const groups = await ui.ruleGroup.findAll(); + expect(groups).toHaveLength(2); + expect(groups[0]).toHaveTextContent('1 rule'); + expect(groups[1]).toHaveTextContent('4 rules: 1 firing, 1 pending'); + + // expand second group to see rules table + expect(ui.rulesTable.query()).not.toBeInTheDocument(); + userEvent.click(ui.groupCollapseToggle.get(groups[1])); + const table = await ui.rulesTable.find(groups[1]); + + // check that rule rows are rendered properly + let ruleRows = ui.ruleRow.getAll(table); + expect(ruleRows).toHaveLength(4); + + expect(ruleRows[0]).toHaveTextContent('Recording rule'); + expect(ruleRows[0]).toHaveTextContent('recordingrule'); + + expect(ruleRows[1]).toHaveTextContent('Firing'); + expect(ruleRows[1]).toHaveTextContent('alertingrule'); + + expect(ruleRows[2]).toHaveTextContent('Pending'); + expect(ruleRows[2]).toHaveTextContent('p-rule'); + + expect(ruleRows[3]).toHaveTextContent('Normal'); + expect(ruleRows[3]).toHaveTextContent('i-rule'); + + expect(byText('Labels').query()).not.toBeInTheDocument(); + + // expand alert details + userEvent.click(ui.ruleCollapseToggle.get(ruleRows[1])); + + const ruleDetails = ui.expandedContent.get(ruleRows[1]); + + expect(ruleDetails).toHaveTextContent('Labelsseverity=warningfoo=bar'); + expect(ruleDetails).toHaveTextContent('Expressiontopk ( 5 , foo ) [ 5m ]'); + expect(ruleDetails).toHaveTextContent('messagegreat alert'); + expect(ruleDetails).toHaveTextContent('Matching instances'); + + // finally, check instances table + const instancesTable = byTestId('dynamic-table').get(ruleDetails); + expect(instancesTable).toBeInTheDocument(); + const instanceRows = byTestId('row').getAll(instancesTable); + expect(instanceRows).toHaveLength(2); + + expect(instanceRows![0]).toHaveTextContent('Firingfoo=barseverity=warning2021-03-18 13:47:05'); + expect(instanceRows![1]).toHaveTextContent('Firingfoo=bazseverity=error2021-03-18 13:47:05'); + + // expand details of an instance + userEvent.click(ui.ruleCollapseToggle.get(instanceRows![0])); + + const alertDetails = byTestId('expanded-content').get(instanceRows[0]); + expect(alertDetails).toHaveTextContent('Value2e+10'); + expect(alertDetails).toHaveTextContent('messagefirst alert message'); + + // collapse everything again + userEvent.click(ui.ruleCollapseToggle.get(instanceRows![0])); + expect(byTestId('expanded-content').query(instanceRows[0])).not.toBeInTheDocument(); + userEvent.click(ui.ruleCollapseToggle.getAll(ruleRows[1])[0]); + userEvent.click(ui.groupCollapseToggle.get(groups[1])); + expect(ui.rulesTable.query()).not.toBeInTheDocument(); + }); + + it('filters rules and alerts by labels', async () => { + mocks.getAllDataSourcesMock.mockReturnValue([dataSources.prom]); + setDataSourceSrv(new MockDataSourceSrv({ prom: dataSources.prom })); + mocks.api.fetchRulerRules.mockResolvedValue({}); + mocks.api.fetchRules.mockImplementation((dataSourceName: string) => { + if (dataSourceName === GRAFANA_RULES_SOURCE_NAME) { + return Promise.resolve([]); + } else { + return Promise.resolve([ + mockPromRuleNamespace({ + groups: [ + mockPromRuleGroup({ + name: 'group-1', + rules: [ + mockPromAlertingRule({ + name: 'alertingrule', + labels: { + severity: 'warning', + foo: 'bar', + }, + query: 'topk(5, foo)[5m]', + annotations: { + message: 'great alert', + }, + alerts: [ + mockPromAlert({ + labels: { + foo: 'bar', + severity: 'warning', + }, + value: '2e+10', + annotations: { + message: 'first alert message', + }, + }), + mockPromAlert({ + labels: { + foo: 'baz', + severity: 'error', + }, + value: '3e+11', + annotations: { + message: 'first alert message', + }, + }), + ], + }), + ], + }), + mockPromRuleGroup({ + name: 'group-2', + rules: [ + mockPromAlertingRule({ + name: 'alertingrule2', + labels: { + severity: 'error', + foo: 'buzz', + }, + query: 'topk(5, foo)[5m]', + annotations: { + message: 'great alert', + }, + alerts: [ + mockPromAlert({ + labels: { + foo: 'buzz', + severity: 'error', + region: 'EU', + }, + value: '2e+10', + annotations: { + message: 'alert message', + }, + }), + mockPromAlert({ + labels: { + foo: 'buzz', + severity: 'error', + region: 'US', + }, + value: '3e+11', + annotations: { + message: 'alert message', + }, + }), + ], + }), + ], + }), + ], + }), + ]); + } + }); + + await renderRuleList(); + const groups = await ui.ruleGroup.findAll(); + expect(groups).toHaveLength(2); + + const filterInput = ui.rulesFilterInput.get(); + userEvent.type(filterInput, '{{foo="bar"}'); + + // Input is debounced so wait for it to be visible + await waitFor(() => expect(filterInput).toHaveValue('{foo="bar"}')); + // Group doesn't contain matching labels + await waitFor(() => expect(ui.ruleGroup.queryAll()).toHaveLength(1)); + + userEvent.click(ui.groupCollapseToggle.get(groups[0])); + + const ruleRows = ui.ruleRow.getAll(groups[0]); + expect(ruleRows).toHaveLength(1); + + userEvent.click(ui.ruleCollapseToggle.get(ruleRows[0])); + const ruleDetails = ui.expandedContent.get(ruleRows[0]); + + expect(ruleDetails).toHaveTextContent('Labelsseverity=warningfoo=bar'); + + // Check for different label matchers + userEvent.type(filterInput, '{selectall}{del}{{foo!="bar",foo!="baz"}'); + // Group doesn't contain matching labels + await waitFor(() => expect(ui.ruleGroup.queryAll()).toHaveLength(1)); + await waitFor(() => expect(ui.ruleGroup.get()).toHaveTextContent('group-2')); + + userEvent.type(filterInput, '{selectall}{del}{{foo=~"b.+"}'); + await waitFor(() => expect(ui.ruleGroup.queryAll()).toHaveLength(2)); + + userEvent.type(filterInput, '{selectall}{del}{{region="US"}'); + await waitFor(() => expect(ui.ruleGroup.queryAll()).toHaveLength(1)); + await waitFor(() => expect(ui.ruleGroup.get()).toHaveTextContent('group-2')); + }); + + describe('edit lotex groups, namespaces', () => { + const testDatasources = { + prom: dataSources.prom, + }; + + function testCase(name: string, fn: () => Promise) { + it(name, async () => { + mocks.getAllDataSourcesMock.mockReturnValue(Object.values(testDatasources)); + setDataSourceSrv(new MockDataSourceSrv(testDatasources)); + mocks.api.fetchRules.mockImplementation((sourceName) => + Promise.resolve(sourceName === testDatasources.prom.name ? somePromRules() : []) + ); + mocks.api.fetchRulerRules.mockImplementation((sourceName) => + Promise.resolve(sourceName === testDatasources.prom.name ? someRulerRules : {}) + ); + mocks.api.setRulerRuleGroup.mockResolvedValue(); + mocks.api.deleteNamespace.mockResolvedValue(); + + await renderRuleList(); + + expect(await ui.rulesFilterInput.find()).toHaveValue(''); + + const groups = await ui.ruleGroup.findAll(); + expect(groups).toHaveLength(3); + + // open edit dialog + userEvent.click(ui.editCloudGroupIcon.get(groups[0])); + + expect(ui.editGroupModal.namespaceInput.get()).toHaveValue('namespace1'); + expect(ui.editGroupModal.ruleGroupInput.get()).toHaveValue('group1'); + await fn(); + }); + } + + testCase('rename both lotex namespace and group', async () => { + // make changes to form + userEvent.clear(ui.editGroupModal.namespaceInput.get()); + userEvent.type(ui.editGroupModal.namespaceInput.get(), 'super namespace'); + + userEvent.clear(ui.editGroupModal.ruleGroupInput.get()); + userEvent.type(ui.editGroupModal.ruleGroupInput.get(), 'super group'); + + userEvent.type(ui.editGroupModal.intervalInput.get(), '5m'); + + // submit, check that appropriate calls were made + userEvent.click(ui.editGroupModal.saveButton.get()); + + await waitFor(() => expect(ui.editGroupModal.namespaceInput.query()).not.toBeInTheDocument()); + + expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledTimes(2); + expect(mocks.api.deleteNamespace).toHaveBeenCalledTimes(1); + expect(mocks.api.deleteGroup).not.toHaveBeenCalled(); + expect(mocks.api.fetchRulerRules).toHaveBeenCalledTimes(4); + expect(mocks.api.setRulerRuleGroup).toHaveBeenNthCalledWith(1, testDatasources.prom.name, 'super namespace', { + ...someRulerRules['namespace1'][0], + name: 'super group', + interval: '5m', + }); + expect(mocks.api.setRulerRuleGroup).toHaveBeenNthCalledWith( + 2, + testDatasources.prom.name, + 'super namespace', + someRulerRules['namespace1'][1] + ); + expect(mocks.api.deleteNamespace).toHaveBeenLastCalledWith('Prometheus', 'namespace1'); + }); + + testCase('rename just the lotex group', async () => { + // make changes to form + userEvent.clear(ui.editGroupModal.ruleGroupInput.get()); + userEvent.type(ui.editGroupModal.ruleGroupInput.get(), 'super group'); + userEvent.type(ui.editGroupModal.intervalInput.get(), '5m'); + + // submit, check that appropriate calls were made + userEvent.click(ui.editGroupModal.saveButton.get()); + + await waitFor(() => expect(ui.editGroupModal.namespaceInput.query()).not.toBeInTheDocument()); + + expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledTimes(1); + expect(mocks.api.deleteGroup).toHaveBeenCalledTimes(1); + expect(mocks.api.deleteNamespace).not.toHaveBeenCalled(); + expect(mocks.api.fetchRulerRules).toHaveBeenCalledTimes(4); + expect(mocks.api.setRulerRuleGroup).toHaveBeenNthCalledWith(1, testDatasources.prom.name, 'namespace1', { + ...someRulerRules['namespace1'][0], + name: 'super group', + interval: '5m', + }); + expect(mocks.api.deleteGroup).toHaveBeenLastCalledWith('Prometheus', 'namespace1', 'group1'); + }); + + testCase('edit lotex group eval interval, no renaming', async () => { + // make changes to form + userEvent.type(ui.editGroupModal.intervalInput.get(), '5m'); + + // submit, check that appropriate calls were made + userEvent.click(ui.editGroupModal.saveButton.get()); + + await waitFor(() => expect(ui.editGroupModal.namespaceInput.query()).not.toBeInTheDocument()); + + expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledTimes(1); + expect(mocks.api.deleteGroup).not.toHaveBeenCalled(); + expect(mocks.api.deleteNamespace).not.toHaveBeenCalled(); + expect(mocks.api.fetchRulerRules).toHaveBeenCalledTimes(4); + expect(mocks.api.setRulerRuleGroup).toHaveBeenNthCalledWith(1, testDatasources.prom.name, 'namespace1', { + ...someRulerRules['namespace1'][0], + interval: '5m', + }); + }); + }); +}); diff --git a/public/app/features/alerting/unified/RuleList.tsx b/public/app/features/alerting/unified/RuleList.tsx new file mode 100644 index 00000000..cf42aece --- /dev/null +++ b/public/app/features/alerting/unified/RuleList.tsx @@ -0,0 +1,135 @@ +import { GrafanaTheme2, urlUtil } from '@grafana/data'; +import { useStyles2, LinkButton, withErrorBoundary, Button } from '@grafana/ui'; +import React, { useEffect, useMemo, useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { AlertingPageWrapper } from './components/AlertingPageWrapper'; +import { NoRulesSplash } from './components/rules/NoRulesCTA'; +import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; +import { useFilteredRules } from './hooks/useFilteredRules'; +import { fetchAllPromAndRulerRulesAction } from './state/actions'; +import { getAllRulesSourceNames } from './utils/datasource'; +import { css } from '@emotion/css'; +import { useCombinedRuleNamespaces } from './hooks/useCombinedRuleNamespaces'; +import { RULE_LIST_POLL_INTERVAL_MS } from './utils/constants'; +import RulesFilter from './components/rules/RulesFilter'; +import { RuleListGroupView } from './components/rules/RuleListGroupView'; +import { RuleListStateView } from './components/rules/RuleListStateView'; +import { useQueryParams } from 'app/core/hooks/useQueryParams'; +import { useLocation } from 'react-router-dom'; +import { contextSrv } from 'app/core/services/context_srv'; +import { RuleStats } from './components/rules/RuleStats'; +import { RuleListErrors } from './components/rules/RuleListErrors'; +import { getFiltersFromUrlParams } from './utils/misc'; + +const VIEWS = { + groups: RuleListGroupView, + state: RuleListStateView, +}; + +export const RuleList = withErrorBoundary( + () => { + const dispatch = useDispatch(); + const styles = useStyles2(getStyles); + const rulesDataSourceNames = useMemo(getAllRulesSourceNames, []); + const location = useLocation(); + const [expandAll, setExpandAll] = useState(false); + + const [queryParams] = useQueryParams(); + const filters = getFiltersFromUrlParams(queryParams); + const filtersActive = Object.values(filters).some((filter) => filter !== undefined); + + const view = VIEWS[queryParams['view'] as keyof typeof VIEWS] + ? (queryParams['view'] as keyof typeof VIEWS) + : 'groups'; + + const ViewComponent = VIEWS[view]; + + // fetch rules, then poll every RULE_LIST_POLL_INTERVAL_MS + useEffect(() => { + dispatch(fetchAllPromAndRulerRulesAction()); + const interval = setInterval(() => dispatch(fetchAllPromAndRulerRulesAction()), RULE_LIST_POLL_INTERVAL_MS); + return () => { + clearInterval(interval); + }; + }, [dispatch]); + + const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules); + const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules); + + const dispatched = rulesDataSourceNames.some( + (name) => promRuleRequests[name]?.dispatched || rulerRuleRequests[name]?.dispatched + ); + const loading = rulesDataSourceNames.some( + (name) => promRuleRequests[name]?.loading || rulerRuleRequests[name]?.loading + ); + const haveResults = rulesDataSourceNames.some( + (name) => + (promRuleRequests[name]?.result?.length && !promRuleRequests[name]?.error) || + (Object.keys(rulerRuleRequests[name]?.result || {}).length && !rulerRuleRequests[name]?.error) + ); + + const showNewAlertSplash = dispatched && !loading && !haveResults; + + const combinedNamespaces = useCombinedRuleNamespaces(); + const filteredNamespaces = useFilteredRules(combinedNamespaces); + return ( + + + {!showNewAlertSplash && ( + <> + +

+ {view === 'groups' && filtersActive && ( + + )} + +

+ {(contextSrv.hasEditPermissionInFolders || contextSrv.isEditor) && ( + + New alert rule + + )} +

+ + )} + {showNewAlertSplash && } + {haveResults && } + + ); + }, + { style: 'page' } +); + +const getStyles = (theme: GrafanaTheme2) => ({ + break: css` + width: 100%; + height: 0; + margin-bottom: ${theme.spacing(2)}; + border-bottom: solid 1px ${theme.colors.border.medium}; + `, + buttonsContainer: css` + margin-bottom: ${theme.spacing(2)}; + display: flex; + justify-content: space-between; + `, + statsContainer: css` + display: flex; + flex-direction: row; + align-items: center; + `, + expandAllButton: css` + margin-right: ${theme.spacing(1)}; + `, +}); diff --git a/public/app/features/alerting/unified/RuleViewer.test.tsx b/public/app/features/alerting/unified/RuleViewer.test.tsx new file mode 100644 index 00000000..69f13c65 --- /dev/null +++ b/public/app/features/alerting/unified/RuleViewer.test.tsx @@ -0,0 +1,144 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { DataSourceJsonData, PluginMeta } from '@grafana/data'; +import { locationService } from '@grafana/runtime'; +import { RuleViewer } from './RuleViewer'; +import { configureStore } from 'app/store/configureStore'; +import { typeAsJestMock } from '../../../../test/helpers/typeAsJestMock'; +import { useCombinedRule } from './hooks/useCombinedRule'; +import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; +import { GRAFANA_RULES_SOURCE_NAME } from './utils/datasource'; +import { CombinedRule } from 'app/types/unified-alerting'; +import { GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto'; + +jest.mock('./hooks/useCombinedRule'); +jest.mock('@grafana/runtime', () => ({ + ...(jest.requireActual('@grafana/runtime') as any), + getDataSourceSrv: () => { + return { + getInstanceSettings: () => ({ name: 'prometheus' }), + get: () => + Promise.resolve({ + filterQuery: () => true, + }), + }; + }, +})); + +const store = configureStore(); +const renderRuleViewer = () => { + return render( + + + + + + ); +}; +describe('RuleViewer', () => { + afterEach(() => { + jest.resetAllMocks(); + }); + + it('should render page with grafana alert', () => { + typeAsJestMock(useCombinedRule).mockReturnValue({ + result: mockGrafanaRule as CombinedRule, + loading: false, + dispatched: true, + requestId: 'A', + error: undefined, + }); + + renderRuleViewer(); + expect(screen.getByText('Alerting / View rule')).toBeInTheDocument(); + expect(screen.getByText('Test alert')).toBeInTheDocument(); + }); + + it('should render page with cloud alert', () => { + typeAsJestMock(useCombinedRule).mockReturnValue({ + result: mockCloudRule as CombinedRule, + loading: false, + dispatched: true, + requestId: 'A', + error: undefined, + }); + renderRuleViewer(); + expect(screen.getByText('Alerting / View rule')).toBeInTheDocument(); + expect(screen.getByText('Cloud test alert')).toBeInTheDocument(); + }); +}); + +const mockGrafanaRule = { + name: 'Test alert', + query: 'up', + labels: {}, + annotations: {}, + group: { + name: 'Prom up alert', + rules: [], + }, + namespace: { + rulesSource: GRAFANA_RULES_SOURCE_NAME, + name: 'Alerts', + groups: [], + }, + rulerRule: { + for: '', + annotations: {}, + labels: {}, + grafana_alert: { + condition: 'B', + exec_err_state: GrafanaAlertStateDecision.Alerting, + namespace_id: 11, + namespace_uid: 'namespaceuid123', + no_data_state: GrafanaAlertStateDecision.NoData, + title: 'Test alert', + uid: 'asdf23', + data: [], + }, + }, +}; + +const mockCloudRule = { + name: 'Cloud test alert', + labels: {}, + query: 'up == 0', + annotations: {}, + group: { + name: 'test', + rules: [], + }, + promRule: { + health: 'ok', + name: 'cloud up alert', + query: 'up == 0', + type: 'alerting', + }, + namespace: { + name: 'prom test alerts', + groups: [], + rulesSource: { + name: 'prom test', + type: 'prometheus', + uid: 'asdf23', + id: 1, + meta: {} as PluginMeta, + jsonData: {} as DataSourceJsonData, + access: 'proxy', + }, + }, +}; + +const mockRoute: GrafanaRouteComponentProps<{ id?: string; sourceName?: string }> = { + route: { + path: '/', + component: RuleViewer, + }, + queryParams: { returnTo: '/alerting/list' }, + match: { params: { id: 'test1', sourceName: 'grafana' }, isExact: false, url: 'asdf', path: '' }, + history: locationService.getHistory(), + location: { pathname: '', hash: '', search: '', state: '' }, + staticContext: {}, +}; diff --git a/public/app/features/alerting/unified/RuleViewer.tsx b/public/app/features/alerting/unified/RuleViewer.tsx new file mode 100644 index 00000000..a0701875 --- /dev/null +++ b/public/app/features/alerting/unified/RuleViewer.tsx @@ -0,0 +1,216 @@ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useObservable } from 'react-use'; +import { css } from '@emotion/css'; +import { GrafanaTheme2, LoadingState, PanelData } from '@grafana/data'; +import { + withErrorBoundary, + useStyles2, + Alert, + LoadingPlaceholder, + PanelChromeLoadingIndicator, + Icon, +} from '@grafana/ui'; +import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; +import { AlertingQueryRunner } from './state/AlertingQueryRunner'; +import { useCombinedRule } from './hooks/useCombinedRule'; +import { alertRuleToQueries } from './utils/query'; +import { RuleState } from './components/rules/RuleState'; +import { getRulesSourceByName } from './utils/datasource'; +import { DetailsField } from './components/DetailsField'; +import { RuleHealth } from './components/rules/RuleHealth'; +import { RuleViewerVisualization } from './components/rule-viewer/RuleViewerVisualization'; +import { RuleDetailsActionButtons } from './components/rules/RuleDetailsActionButtons'; +import { RuleDetailsMatchingInstances } from './components/rules/RuleDetailsMatchingInstances'; +import { RuleDetailsDataSources } from './components/rules/RuleDetailsDataSources'; +import { RuleViewerLayout, RuleViewerLayoutContent } from './components/rule-viewer/RuleViewerLayout'; +import { AlertLabels } from './components/AlertLabels'; +import { RuleDetailsExpression } from './components/rules/RuleDetailsExpression'; +import { RuleDetailsAnnotations } from './components/rules/RuleDetailsAnnotations'; +import * as ruleId from './utils/rule-id'; +import { AlertQuery } from '../../../types/unified-alerting-dto'; + +type RuleViewerProps = GrafanaRouteComponentProps<{ id?: string; sourceName?: string }>; + +const errorMessage = 'Could not find data source for rule'; +const errorTitle = 'Could not view rule'; +const pageTitle = 'Alerting / View rule'; + +export function RuleViewer({ match }: RuleViewerProps) { + const styles = useStyles2(getStyles); + const { id, sourceName } = match.params; + const identifier = ruleId.tryParse(id, true); + const { loading, error, result: rule } = useCombinedRule(identifier, sourceName); + const runner = useMemo(() => new AlertingQueryRunner(), []); + const data = useObservable(runner.get()); + const queries2 = useMemo(() => alertRuleToQueries(rule), [rule]); + const [queries, setQueries] = useState([]); + + const onRunQueries = useCallback(() => { + if (queries.length > 0) { + runner.run(queries); + } + }, [queries, runner]); + + useEffect(() => { + setQueries(queries2); + }, [queries2]); + + useEffect(() => { + onRunQueries(); + }, [onRunQueries]); + + useEffect(() => { + return () => runner.destroy(); + }, [runner]); + + const onChangeQuery = useCallback((query: AlertQuery) => { + setQueries((queries) => + queries.map((q) => { + if (q.refId === query.refId) { + return query; + } + return q; + }) + ); + }, []); + + if (!sourceName) { + return ( + + +

{errorMessage}

+ + + ); + } + + const rulesSource = getRulesSourceByName(sourceName); + + if (loading) { + return ( + + + + ); + } + + if (error || !rulesSource) { + return ( + + +

+ {error?.message ?? errorMessage} +
+ {!!error?.stack && error.stack} +

+ + + ); + } + + if (!rule) { + return ( + + Rule could not be found. + + ); + } + const annotations = Object.entries(rule.annotations).filter(([_, value]) => !!value.trim()); + return ( + + +

+ {rule.name} +

+ + +

+ {rule.promRule && ( + + + + )} + {!!rule.labels && !!Object.keys(rule.labels).length && ( + + + + )} + + +

+ + {`${rule.namespace.name} / ${rule.group.name}`} +

+ +

+ + {data && Object.keys(data).length > 0 && ( + <> +

+ Query results runner.cancel()} /> +

+ +

+ {queries.map((query) => { + return ( +

+ +

+ ); + })} +

+ + + )} + + ); +} + +function isLoading(data: Record): boolean { + return !!Object.values(data).find((d) => d.state === LoadingState.Loading); +} + +const getStyles = (theme: GrafanaTheme2) => { + return { + errorMessage: css` + white-space: pre-wrap; + `, + queries: css` + height: 100%; + width: 100%; + `, + queriesTitle: css` + padding: ${theme.spacing(2, 0.5)}; + font-size: ${theme.typography.h5.fontSize}; + font-weight: ${theme.typography.fontWeightBold}; + font-family: ${theme.typography.h5.fontFamily}; + `, + query: css` + border-bottom: 1px solid ${theme.colors.border.medium}; + padding: ${theme.spacing(2)}; + `, + details: css` + display: flex; + flex-direction: row; + `, + leftSide: css` + flex: 1; + `, + rightSide: css` + padding-left: 90px; + width: 300px; + `, + }; +}; + +export default withErrorBoundary(RuleViewer, { style: 'page' }); diff --git a/public/app/features/alerting/unified/Silences.test.tsx b/public/app/features/alerting/unified/Silences.test.tsx new file mode 100644 index 00000000..3b468dd0 --- /dev/null +++ b/public/app/features/alerting/unified/Silences.test.tsx @@ -0,0 +1,272 @@ +import React from 'react'; +import { render, waitFor } from '@testing-library/react'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; +import { dateTime } from '@grafana/data'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { fetchSilences, fetchAlerts, createOrUpdateSilence } from './api/alertmanager'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { configureStore } from 'app/store/configureStore'; +import Silences from './Silences'; +import { mockAlertmanagerAlert, mockDataSource, MockDataSourceSrv, mockSilence } from './mocks'; +import { DataSourceType } from './utils/datasource'; +import { parseMatchers } from './utils/alertmanager'; +import { AlertState, MatcherOperator } from 'app/plugins/datasource/alertmanager/types'; +import { byLabelText, byPlaceholderText, byRole, byTestId, byText } from 'testing-library-selector'; +import userEvent from '@testing-library/user-event'; + +jest.mock('./api/alertmanager'); + +const TEST_TIMEOUT = 60000; + +const mocks = { + api: { + fetchSilences: typeAsJestMock(fetchSilences), + fetchAlerts: typeAsJestMock(fetchAlerts), + createOrUpdateSilence: typeAsJestMock(createOrUpdateSilence), + }, +}; + +const renderSilences = (location = '/alerting/silences/') => { + const store = configureStore(); + locationService.push(location); + + return render( + + + + + + ); +}; + +const dataSources = { + am: mockDataSource({ + name: 'Alertmanager', + type: DataSourceType.Alertmanager, + }), +}; + +const ui = { + silencesTable: byTestId('dynamic-table'), + silenceRow: byTestId('row'), + silencedAlertCell: byTestId('alerts'), + queryBar: byPlaceholderText('Search'), + editor: { + timeRange: byLabelText('Timepicker', { exact: false }), + durationField: byLabelText('Duration'), + durationInput: byRole('textbox', { name: /duration/i }), + matchersField: byTestId('matcher'), + matcherName: byPlaceholderText('label'), + matcherValue: byPlaceholderText('value'), + comment: byPlaceholderText('Details about the silence'), + createdBy: byPlaceholderText('User'), + matcherOperatorSelect: byLabelText('operator'), + matcherOperator: (operator: MatcherOperator) => byText(operator, { exact: true }), + addMatcherButton: byRole('button', { name: 'Add matcher' }), + submit: byText('Submit'), + }, +}; + +const resetMocks = () => { + jest.resetAllMocks(); + mocks.api.fetchSilences.mockImplementation(() => { + return Promise.resolve([ + mockSilence({ id: '12345' }), + mockSilence({ id: '67890', matchers: parseMatchers('foo!=bar'), comment: 'Catch all' }), + ]); + }); + + mocks.api.fetchAlerts.mockImplementation(() => { + return Promise.resolve([ + mockAlertmanagerAlert({ + labels: { foo: 'bar' }, + status: { state: AlertState.Suppressed, silencedBy: ['12345'], inhibitedBy: [] }, + }), + mockAlertmanagerAlert({ + labels: { foo: 'buzz' }, + status: { state: AlertState.Suppressed, silencedBy: ['67890'], inhibitedBy: [] }, + }), + ]); + }); + + mocks.api.createOrUpdateSilence.mockResolvedValue(mockSilence()); +}; + +describe('Silences', () => { + beforeAll(resetMocks); + afterEach(resetMocks); + + beforeEach(() => { + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + }); + + it( + 'loads and shows silences', + async () => { + renderSilences(); + await waitFor(() => expect(mocks.api.fetchSilences).toHaveBeenCalled()); + await waitFor(() => expect(mocks.api.fetchAlerts).toHaveBeenCalled()); + + expect(ui.silencesTable.query()).not.toBeNull(); + + const silences = ui.silenceRow.queryAll(); + expect(silences).toHaveLength(2); + expect(silences[0]).toHaveTextContent('foo=bar'); + expect(silences[1]).toHaveTextContent('foo!=bar'); + }, + TEST_TIMEOUT + ); + + it( + 'shows the correct number of silenced alerts', + async () => { + mocks.api.fetchAlerts.mockImplementation(() => { + return Promise.resolve([ + mockAlertmanagerAlert({ + labels: { foo: 'bar', buzz: 'bazz' }, + status: { state: AlertState.Suppressed, silencedBy: ['12345'], inhibitedBy: [] }, + }), + mockAlertmanagerAlert({ + labels: { foo: 'bar', buzz: 'bazz' }, + status: { state: AlertState.Suppressed, silencedBy: ['12345'], inhibitedBy: [] }, + }), + ]); + }); + + renderSilences(); + await waitFor(() => expect(mocks.api.fetchSilences).toHaveBeenCalled()); + await waitFor(() => expect(mocks.api.fetchAlerts).toHaveBeenCalled()); + + const silencedAlertRows = ui.silencedAlertCell.getAll(ui.silencesTable.get()); + expect(silencedAlertRows).toHaveLength(2); + expect(silencedAlertRows[0]).toHaveTextContent('2'); + expect(silencedAlertRows[1]).toHaveTextContent('0'); + }, + TEST_TIMEOUT + ); + + it( + 'filters silences by matchers', + async () => { + renderSilences(); + await waitFor(() => expect(mocks.api.fetchSilences).toHaveBeenCalled()); + await waitFor(() => expect(mocks.api.fetchAlerts).toHaveBeenCalled()); + + const queryBar = ui.queryBar.get(); + userEvent.paste(queryBar, 'foo=bar'); + + await waitFor(() => expect(ui.silenceRow.getAll()).toHaveLength(1)); + }, + TEST_TIMEOUT + ); +}); + +describe('Silence edit', () => { + const baseUrlPath = '/alerting/silence/new'; + beforeAll(resetMocks); + afterEach(resetMocks); + + beforeEach(() => { + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + }); + + it( + 'prefills the matchers field with matchers params', + async () => { + renderSilences( + `${baseUrlPath}?matchers=${encodeURIComponent('foo=bar,bar=~ba.+,hello!=world,cluster!~us-central.*')}` + ); + await waitFor(() => expect(ui.editor.durationField.query()).not.toBeNull()); + + const matchers = ui.editor.matchersField.queryAll(); + expect(matchers).toHaveLength(4); + + expect(ui.editor.matcherName.query(matchers[0])).toHaveValue('foo'); + expect(ui.editor.matcherOperator(MatcherOperator.equal).query(matchers[0])).not.toBeNull(); + expect(ui.editor.matcherValue.query(matchers[0])).toHaveValue('bar'); + + expect(ui.editor.matcherName.query(matchers[1])).toHaveValue('bar'); + expect(ui.editor.matcherOperator(MatcherOperator.regex).query(matchers[1])).not.toBeNull(); + expect(ui.editor.matcherValue.query(matchers[1])).toHaveValue('ba.+'); + + expect(ui.editor.matcherName.query(matchers[2])).toHaveValue('hello'); + expect(ui.editor.matcherOperator(MatcherOperator.notEqual).query(matchers[2])).not.toBeNull(); + expect(ui.editor.matcherValue.query(matchers[2])).toHaveValue('world'); + + expect(ui.editor.matcherName.query(matchers[3])).toHaveValue('cluster'); + expect(ui.editor.matcherOperator(MatcherOperator.notRegex).query(matchers[3])).not.toBeNull(); + expect(ui.editor.matcherValue.query(matchers[3])).toHaveValue('us-central.*'); + }, + TEST_TIMEOUT + ); + + it( + 'creates a new silence', + async () => { + renderSilences(baseUrlPath); + await waitFor(() => expect(ui.editor.durationField.query()).not.toBeNull()); + + const start = new Date(); + const end = new Date(start.getTime() + 24 * 60 * 60 * 1000); + + const startDateString = dateTime(start).format('YYYY-MM-DD'); + const endDateString = dateTime(end).format('YYYY-MM-DD'); + + userEvent.clear(ui.editor.durationInput.get()); + userEvent.type(ui.editor.durationInput.get(), '1d'); + + await waitFor(() => expect(ui.editor.durationInput.query()).toHaveValue('1d')); + await waitFor(() => expect(ui.editor.timeRange.get()).toHaveTextContent(startDateString)); + await waitFor(() => expect(ui.editor.timeRange.get()).toHaveTextContent(endDateString)); + + userEvent.type(ui.editor.matcherName.get(), 'foo'); + userEvent.type(ui.editor.matcherOperatorSelect.get(), '='); + userEvent.tab(); + userEvent.type(ui.editor.matcherValue.get(), 'bar'); + + // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed + userEvent.click(ui.editor.addMatcherButton.get(), undefined, { skipPointerEventsCheck: true }); + userEvent.type(ui.editor.matcherName.getAll()[1], 'bar'); + userEvent.type(ui.editor.matcherOperatorSelect.getAll()[1], '!='); + userEvent.tab(); + userEvent.type(ui.editor.matcherValue.getAll()[1], 'buzz'); + + // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed + userEvent.click(ui.editor.addMatcherButton.get(), undefined, { skipPointerEventsCheck: true }); + userEvent.type(ui.editor.matcherName.getAll()[2], 'region'); + userEvent.type(ui.editor.matcherOperatorSelect.getAll()[2], '=~'); + userEvent.tab(); + userEvent.type(ui.editor.matcherValue.getAll()[2], 'us-west-.*'); + + // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed + userEvent.click(ui.editor.addMatcherButton.get(), undefined, { skipPointerEventsCheck: true }); + userEvent.type(ui.editor.matcherName.getAll()[3], 'env'); + userEvent.type(ui.editor.matcherOperatorSelect.getAll()[3], '!~'); + userEvent.tab(); + userEvent.type(ui.editor.matcherValue.getAll()[3], 'dev|staging'); + + userEvent.type(ui.editor.comment.get(), 'Test'); + userEvent.type(ui.editor.createdBy.get(), 'Homer Simpson'); + + userEvent.click(ui.editor.submit.get()); + + await waitFor(() => + expect(mocks.api.createOrUpdateSilence).toHaveBeenCalledWith( + 'grafana', + expect.objectContaining({ + comment: 'Test', + createdBy: 'Homer Simpson', + matchers: [ + { isEqual: true, isRegex: false, name: 'foo', value: 'bar' }, + { isEqual: false, isRegex: false, name: 'bar', value: 'buzz' }, + { isEqual: true, isRegex: true, name: 'region', value: 'us-west-.*' }, + { isEqual: false, isRegex: true, name: 'env', value: 'dev|staging' }, + ], + }) + ) + ); + }, + TEST_TIMEOUT + ); +}); diff --git a/public/app/features/alerting/unified/Silences.tsx b/public/app/features/alerting/unified/Silences.tsx new file mode 100644 index 00000000..3cb5544d --- /dev/null +++ b/public/app/features/alerting/unified/Silences.tsx @@ -0,0 +1,96 @@ +import React, { FC, useEffect, useCallback } from 'react'; +import { Alert, LoadingPlaceholder, withErrorBoundary } from '@grafana/ui'; + +import { useDispatch } from 'react-redux'; +import { Redirect, Route, RouteChildrenProps, Switch, useLocation } from 'react-router-dom'; +import { AlertingPageWrapper } from './components/AlertingPageWrapper'; +import SilencesTable from './components/silences/SilencesTable'; +import { useAlertManagerSourceName } from './hooks/useAlertManagerSourceName'; +import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; +import { fetchAmAlertsAction, fetchSilencesAction } from './state/actions'; +import { SILENCES_POLL_INTERVAL_MS } from './utils/constants'; +import { AsyncRequestState, initialAsyncRequestState } from './utils/redux'; +import SilencesEditor from './components/silences/SilencesEditor'; +import { AlertManagerPicker } from './components/AlertManagerPicker'; +import { Silence } from 'app/plugins/datasource/alertmanager/types'; + +const Silences: FC = () => { + const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(); + const dispatch = useDispatch(); + const silences = useUnifiedAlertingSelector((state) => state.silences); + const alertsRequests = useUnifiedAlertingSelector((state) => state.amAlerts); + const alertsRequest = alertManagerSourceName + ? alertsRequests[alertManagerSourceName] || initialAsyncRequestState + : undefined; + + const location = useLocation(); + const isRoot = location.pathname.endsWith('/alerting/silences'); + + useEffect(() => { + function fetchAll() { + if (alertManagerSourceName) { + dispatch(fetchSilencesAction(alertManagerSourceName)); + dispatch(fetchAmAlertsAction(alertManagerSourceName)); + } + } + fetchAll(); + const interval = setInterval(() => fetchAll, SILENCES_POLL_INTERVAL_MS); + return () => { + clearInterval(interval); + }; + }, [alertManagerSourceName, dispatch]); + + const { result, loading, error }: AsyncRequestState = + (alertManagerSourceName && silences[alertManagerSourceName]) || initialAsyncRequestState; + + const getSilenceById = useCallback((id: string) => result && result.find((silence) => silence.id === id), [result]); + + if (!alertManagerSourceName) { + return ; + } + + return ( + + + {error && !loading && ( + + {error.message || 'Unknown error.'} + + )} + {alertsRequest?.error && !alertsRequest?.loading && ( + + {alertsRequest.error?.message || 'Unknown error.'} + + )} + {loading && } + {result && !error && ( + + + + + + + + + {({ match }: RouteChildrenProps<{ id: string }>) => { + return ( + match?.params.id && ( + + ) + ); + }} + + + )} + + ); +}; + +export default withErrorBoundary(Silences, { style: 'page' }); diff --git a/public/app/features/alerting/unified/api/alertmanager.ts b/public/app/features/alerting/unified/api/alertmanager.ts new file mode 100644 index 00000000..0ea54d11 --- /dev/null +++ b/public/app/features/alerting/unified/api/alertmanager.ts @@ -0,0 +1,237 @@ +import { lastValueFrom } from 'rxjs'; +import { urlUtil } from '@grafana/data'; +import { getBackendSrv } from '@grafana/runtime'; + +import { + AlertmanagerAlert, + AlertManagerCortexConfig, + AlertmanagerGroup, + Silence, + SilenceCreatePayload, + Matcher, + AlertmanagerStatus, + Receiver, + TestReceiversPayload, + TestReceiversResult, + TestReceiversAlert, + ExternalAlertmanagersResponse, +} from 'app/plugins/datasource/alertmanager/types'; +import { getDatasourceAPIId, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource'; + +// "grafana" for grafana-managed, otherwise a datasource name +export async function fetchAlertManagerConfig(alertManagerSourceName: string): Promise { + try { + const result = await lastValueFrom( + getBackendSrv().fetch({ + url: `/api/alertmanager/${getDatasourceAPIId(alertManagerSourceName)}/config/api/v1/alerts`, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); + return { + template_files: result.data.template_files ?? {}, + alertmanager_config: result.data.alertmanager_config ?? {}, + }; + } catch (e) { + // if no config has been uploaded to grafana, it returns error instead of latest config + if ( + alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME && + e.data?.message?.includes('could not find an Alertmanager configuration') + ) { + return { + template_files: {}, + alertmanager_config: {}, + }; + } + throw e; + } +} + +export async function updateAlertManagerConfig( + alertManagerSourceName: string, + config: AlertManagerCortexConfig +): Promise { + await lastValueFrom( + getBackendSrv().fetch({ + method: 'POST', + url: `/api/alertmanager/${getDatasourceAPIId(alertManagerSourceName)}/config/api/v1/alerts`, + data: config, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); +} + +export async function deleteAlertManagerConfig(alertManagerSourceName: string): Promise { + await lastValueFrom( + getBackendSrv().fetch({ + method: 'DELETE', + url: `/api/alertmanager/${getDatasourceAPIId(alertManagerSourceName)}/config/api/v1/alerts`, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); +} + +export async function fetchSilences(alertManagerSourceName: string): Promise { + const result = await lastValueFrom( + getBackendSrv().fetch({ + url: `/api/alertmanager/${getDatasourceAPIId(alertManagerSourceName)}/api/v2/silences`, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); + return result.data; +} + +// returns the new silence ID. Even in the case of an update, a new silence is created and the previous one expired. +export async function createOrUpdateSilence( + alertmanagerSourceName: string, + payload: SilenceCreatePayload +): Promise { + const result = await lastValueFrom( + getBackendSrv().fetch({ + url: `/api/alertmanager/${getDatasourceAPIId(alertmanagerSourceName)}/api/v2/silences`, + data: payload, + showErrorAlert: false, + showSuccessAlert: false, + method: 'POST', + }) + ); + return result.data; +} + +export async function expireSilence(alertmanagerSourceName: string, silenceID: string): Promise { + await getBackendSrv().delete( + `/api/alertmanager/${getDatasourceAPIId(alertmanagerSourceName)}/api/v2/silence/${encodeURIComponent(silenceID)}` + ); +} + +export async function fetchAlerts( + alertmanagerSourceName: string, + matchers?: Matcher[], + silenced = true, + active = true, + inhibited = true +): Promise { + const filters = + urlUtil.toUrlParams({ silenced, active, inhibited }) + + matchers + ?.map( + (matcher) => + `filter=${encodeURIComponent( + `${escapeQuotes(matcher.name)}=${matcher.isRegex ? '~' : ''}"${escapeQuotes(matcher.value)}"` + )}` + ) + .join('&') || ''; + + const result = await lastValueFrom( + getBackendSrv().fetch({ + url: + `/api/alertmanager/${getDatasourceAPIId(alertmanagerSourceName)}/api/v2/alerts` + + (filters ? '?' + filters : ''), + showErrorAlert: false, + showSuccessAlert: false, + }) + ); + + return result.data; +} + +export async function fetchAlertGroups(alertmanagerSourceName: string): Promise { + const result = await lastValueFrom( + getBackendSrv().fetch({ + url: `/api/alertmanager/${getDatasourceAPIId(alertmanagerSourceName)}/api/v2/alerts/groups`, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); + + return result.data; +} + +export async function fetchStatus(alertManagerSourceName: string): Promise { + const result = await lastValueFrom( + getBackendSrv().fetch({ + url: `/api/alertmanager/${getDatasourceAPIId(alertManagerSourceName)}/api/v2/status`, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); + + return result.data; +} + +export async function testReceivers( + alertManagerSourceName: string, + receivers: Receiver[], + alert?: TestReceiversAlert +): Promise { + const data: TestReceiversPayload = { + receivers, + alert, + }; + const result = await lastValueFrom( + getBackendSrv().fetch({ + method: 'POST', + data, + url: `/api/alertmanager/${getDatasourceAPIId(alertManagerSourceName)}/config/api/v1/receivers/test`, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); + + // api returns 207 if one or more receivers has failed test. Collect errors in this case + if (result.status === 207) { + throw new Error( + result.data.receivers + .flatMap((receiver) => + receiver.grafana_managed_receiver_configs + .filter((receiver) => receiver.status === 'failed') + .map((receiver) => receiver.error ?? 'Unknown error.') + ) + .join('; ') + ); + } +} + +export async function addAlertManagers(alertManagers: string[]): Promise { + await lastValueFrom( + getBackendSrv().fetch({ + method: 'POST', + data: { alertmanagers: alertManagers }, + url: '/api/v1/ngalert/admin_config', + showErrorAlert: false, + showSuccessAlert: false, + }) + ).then(() => { + fetchExternalAlertmanagerConfig(); + }); +} + +export async function fetchExternalAlertmanagers(): Promise { + const result = await lastValueFrom( + getBackendSrv().fetch({ + method: 'GET', + url: '/api/v1/ngalert/alertmanagers', + }) + ); + + return result.data; +} + +export async function fetchExternalAlertmanagerConfig(): Promise<{ alertmanagers: string[] }> { + const result = await lastValueFrom( + getBackendSrv().fetch<{ alertmanagers: string[] }>({ + method: 'GET', + url: '/api/v1/ngalert/admin_config', + showErrorAlert: false, + }) + ); + + return result.data; +} + +function escapeQuotes(value: string): string { + return value.replace(/"/g, '\\"'); +} diff --git a/public/app/features/alerting/unified/api/annotations.test.ts b/public/app/features/alerting/unified/api/annotations.test.ts new file mode 100644 index 00000000..ca52b08c --- /dev/null +++ b/public/app/features/alerting/unified/api/annotations.test.ts @@ -0,0 +1,18 @@ +import '@grafana/runtime'; +import { fetchAnnotations } from './annotations'; + +const get = jest.fn(); + +jest.mock('@grafana/runtime', () => ({ + getBackendSrv: () => ({ get }), +})); + +describe('annotations', () => { + beforeEach(() => get.mockClear()); + + it('should fetch annotation for an alertId', () => { + const ALERT_ID = 'abc123'; + fetchAnnotations(ALERT_ID); + expect(get).toBeCalledWith('/api/annotations', { alertId: ALERT_ID }); + }); +}); diff --git a/public/app/features/alerting/unified/api/annotations.ts b/public/app/features/alerting/unified/api/annotations.ts new file mode 100644 index 00000000..2df5ee2c --- /dev/null +++ b/public/app/features/alerting/unified/api/annotations.ts @@ -0,0 +1,8 @@ +import { getBackendSrv } from '@grafana/runtime'; +import { StateHistoryItem } from 'app/types/unified-alerting'; + +export function fetchAnnotations(alertId: string): Promise { + return getBackendSrv().get('/api/annotations', { + alertId, + }); +} diff --git a/public/app/features/alerting/unified/api/grafana.ts b/public/app/features/alerting/unified/api/grafana.ts new file mode 100644 index 00000000..dcca81c1 --- /dev/null +++ b/public/app/features/alerting/unified/api/grafana.ts @@ -0,0 +1,6 @@ +import { getBackendSrv } from '@grafana/runtime'; +import { NotifierDTO } from 'app/types'; + +export function fetchNotifiers(): Promise { + return getBackendSrv().get(`/api/alert-notifiers`); +} diff --git a/public/app/features/alerting/unified/api/preview.ts b/public/app/features/alerting/unified/api/preview.ts new file mode 100644 index 00000000..2d51276f --- /dev/null +++ b/public/app/features/alerting/unified/api/preview.ts @@ -0,0 +1,83 @@ +import { + dataFrameFromJSON, + DataFrameJSON, + getDefaultTimeRange, + LoadingState, + PanelData, + withLoadingIndicator, +} from '@grafana/data'; +import { getBackendSrv, toDataQueryError } from '@grafana/runtime'; +import { Observable, of } from 'rxjs'; +import { catchError, map, share } from 'rxjs/operators'; +import { + CloudPreviewRuleRequest, + GrafanaPreviewRuleRequest, + isCloudPreviewRequest, + isGrafanaPreviewRequest, + PreviewRuleRequest, + PreviewRuleResponse, +} from '../types/preview'; +import { RuleFormType } from '../types/rule-form'; + +export function previewAlertRule(request: PreviewRuleRequest): Observable { + if (isCloudPreviewRequest(request)) { + return previewCloudAlertRule(request); + } + + if (isGrafanaPreviewRequest(request)) { + return previewGrafanaAlertRule(request); + } + + throw new Error('unsupported preview rule request'); +} + +type GrafanaPreviewRuleResponse = { + instances: DataFrameJSON[]; +}; + +function previewGrafanaAlertRule(request: GrafanaPreviewRuleRequest): Observable { + const type = RuleFormType.grafana; + + return withLoadingIndicator({ + whileLoading: createResponse(type), + source: getBackendSrv() + .fetch({ + method: 'POST', + url: `/api/v1/rule/test/grafana`, + data: request, + }) + .pipe( + map(({ data }) => { + return createResponse(type, { + state: LoadingState.Done, + series: data.instances.map(dataFrameFromJSON), + }); + }), + catchError((error: Error) => { + return of( + createResponse(type, { + state: LoadingState.Error, + error: toDataQueryError(error), + }) + ); + }), + share() + ), + }); +} + +function createResponse(ruleType: RuleFormType, data: Partial = {}): PreviewRuleResponse { + return { + ruleType, + data: { + state: LoadingState.Loading, + series: [], + timeRange: getDefaultTimeRange(), + ...data, + }, + }; +} + +function previewCloudAlertRule(request: CloudPreviewRuleRequest): Observable { + throw new Error('preview for cloud alerting rules is not implemented'); +} diff --git a/public/app/features/alerting/unified/api/prometheus.ts b/public/app/features/alerting/unified/api/prometheus.ts new file mode 100644 index 00000000..5d830406 --- /dev/null +++ b/public/app/features/alerting/unified/api/prometheus.ts @@ -0,0 +1,57 @@ +import { lastValueFrom } from 'rxjs'; +import { getBackendSrv } from '@grafana/runtime'; + +import { RuleNamespace } from 'app/types/unified-alerting'; +import { PromRulesResponse } from 'app/types/unified-alerting-dto'; +import { getDatasourceAPIId, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource'; + +export interface FetchPromRulesFilter { + dashboardUID: string; + panelId?: number; +} + +export async function fetchRules(dataSourceName: string, filter?: FetchPromRulesFilter): Promise { + if (filter?.dashboardUID && dataSourceName !== GRAFANA_RULES_SOURCE_NAME) { + throw new Error('Filtering by dashboard UID is not supported for cloud rules sources.'); + } + + const params: Record = {}; + if (filter?.dashboardUID) { + params['dashboard_uid'] = filter.dashboardUID; + if (filter.panelId) { + params['panel_id'] = String(filter.panelId); + } + } + + const response = await lastValueFrom( + getBackendSrv().fetch({ + url: `/api/prometheus/${getDatasourceAPIId(dataSourceName)}/api/v1/rules`, + showErrorAlert: false, + showSuccessAlert: false, + params, + }) + ).catch((e) => { + if ('status' in e && e.status === 404) { + throw new Error('404 from rule state endpoint. Perhaps ruler API is not enabled?'); + } + throw e; + }); + + const nsMap: { [key: string]: RuleNamespace } = {}; + response.data.data.groups.forEach((group) => { + group.rules.forEach((rule) => { + rule.query = rule.query || ''; + }); + if (!nsMap[group.file]) { + nsMap[group.file] = { + dataSourceName, + name: group.file, + groups: [group], + }; + } else { + nsMap[group.file].groups.push(group); + } + }); + + return Object.values(nsMap); +} diff --git a/public/app/features/alerting/unified/api/ruler.ts b/public/app/features/alerting/unified/api/ruler.ts new file mode 100644 index 00000000..a849fbb4 --- /dev/null +++ b/public/app/features/alerting/unified/api/ruler.ts @@ -0,0 +1,155 @@ +import { lastValueFrom } from 'rxjs'; +import { FetchResponse, getBackendSrv } from '@grafana/runtime'; + +import { PostableRulerRuleGroupDTO, RulerRuleGroupDTO, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto'; +import { getDatasourceAPIId, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource'; +import { RULER_NOT_SUPPORTED_MSG } from '../utils/constants'; + +interface ErrorResponseMessage { + message?: string; + error?: string; +} + +// upsert a rule group. use this to update rules +export async function setRulerRuleGroup( + dataSourceName: string, + namespace: string, + group: PostableRulerRuleGroupDTO +): Promise { + await lastValueFrom( + getBackendSrv().fetch({ + method: 'POST', + url: `/api/ruler/${getDatasourceAPIId(dataSourceName)}/api/v1/rules/${encodeURIComponent(namespace)}`, + data: group, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); +} + +export interface FetchRulerRulesFilter { + dashboardUID: string; + panelId?: number; +} + +// fetch all ruler rule namespaces and included groups +export async function fetchRulerRules(dataSourceName: string, filter?: FetchRulerRulesFilter) { + if (filter?.dashboardUID && dataSourceName !== GRAFANA_RULES_SOURCE_NAME) { + throw new Error('Filtering by dashboard UID is not supported for cloud rules sources.'); + } + + const params: Record = {}; + if (filter?.dashboardUID) { + params['dashboard_uid'] = filter.dashboardUID; + if (filter.panelId) { + params['panel_id'] = String(filter.panelId); + } + } + return rulerGetRequest( + `/api/ruler/${getDatasourceAPIId(dataSourceName)}/api/v1/rules`, + {}, + params + ); +} + +// fetch rule groups for a particular namespace +// will throw with { status: 404 } if namespace does not exist +export async function fetchRulerRulesNamespace(dataSourceName: string, namespace: string) { + const result = await rulerGetRequest>( + `/api/ruler/${getDatasourceAPIId(dataSourceName)}/api/v1/rules/${encodeURIComponent(namespace)}`, + {} + ); + return result[namespace] || []; +} + +// fetch a particular rule group +// will throw with { status: 404 } if rule group does not exist +export async function fetchRulerRulesGroup( + dataSourceName: string, + namespace: string, + group: string +): Promise { + return rulerGetRequest( + `/api/ruler/${getDatasourceAPIId(dataSourceName)}/api/v1/rules/${encodeURIComponent( + namespace + )}/${encodeURIComponent(group)}`, + null + ); +} + +export async function deleteRulerRulesGroup(dataSourceName: string, namespace: string, groupName: string) { + await lastValueFrom( + getBackendSrv().fetch({ + url: `/api/ruler/${getDatasourceAPIId(dataSourceName)}/api/v1/rules/${encodeURIComponent( + namespace + )}/${encodeURIComponent(groupName)}`, + method: 'DELETE', + showSuccessAlert: false, + showErrorAlert: false, + }) + ); +} + +// false in case ruler is not supported. this is weird, but we'll work on it +async function rulerGetRequest(url: string, empty: T, params?: Record): Promise { + try { + const response = await lastValueFrom( + getBackendSrv().fetch({ + url, + showErrorAlert: false, + showSuccessAlert: false, + params, + }) + ); + return response.data; + } catch (error) { + if (!isResponseError(error)) { + throw error; + } + + const notFoundError = error.status === 404; + const rulerNotSupported = + error.status === 500 && + error.data.error?.includes('unexpected content type from upstream. expected YAML, got text/html'); + + if (notFoundError) { + // the endpoint will return 404 but confirm that it's a Cortex endpoint + if (isCortexErrorResponse(error)) { + return empty; + } + // any other 404 should throw an exception + throw new Error('404 from rules config endpoint. Perhaps ruler API is not enabled?'); + } else if (rulerNotSupported) { + // assert if the endoint is not supported at all + throw { + ...error, + data: { + ...error.data, + message: RULER_NOT_SUPPORTED_MSG, + }, + }; + } + throw error; + } +} + +function isResponseError(error: unknown): error is FetchResponse { + const hasErrorMessage = (error as FetchResponse).data != null; + const hasErrorCode = Number.isFinite((error as FetchResponse).status); + return hasErrorCode && hasErrorMessage; +} + +function isCortexErrorResponse(error: FetchResponse) { + return error.data.error?.includes('group does not exist') || error.data.error?.includes('no rule groups found'); +} + +export async function deleteNamespace(dataSourceName: string, namespace: string): Promise { + await lastValueFrom( + getBackendSrv().fetch({ + method: 'DELETE', + url: `/api/ruler/${getDatasourceAPIId(dataSourceName)}/api/v1/rules/${encodeURIComponent(namespace)}`, + showErrorAlert: false, + showSuccessAlert: false, + }) + ); +} diff --git a/public/app/features/alerting/unified/components/AlertLabel.tsx b/public/app/features/alerting/unified/components/AlertLabel.tsx new file mode 100644 index 00000000..984e57a3 --- /dev/null +++ b/public/app/features/alerting/unified/components/AlertLabel.tsx @@ -0,0 +1,32 @@ +import React, { FC } from 'react'; +import { IconButton, useStyles } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; +import { css } from '@emotion/css'; + +interface Props { + labelKey: string; + value: string; + operator?: string; + onRemoveLabel?: () => void; +} + +export const AlertLabel: FC = ({ labelKey, value, operator = '=', onRemoveLabel }) => ( +

+ {labelKey} + {operator} + {value} + {!!onRemoveLabel && } +

+); + +export const getStyles = (theme: GrafanaTheme) => css` + padding: ${theme.spacing.xs} ${theme.spacing.sm}; + border-radius: ${theme.border.radius.sm}; + border: solid 1px ${theme.colors.border2}; + font-size: ${theme.typography.size.sm}; + background-color: ${theme.colors.bg2}; + font-weight: ${theme.typography.weight.bold}; + color: ${theme.colors.formLabel}; + display: inline-block; + line-height: 1.2; +`; diff --git a/public/app/features/alerting/unified/components/AlertLabels.tsx b/public/app/features/alerting/unified/components/AlertLabels.tsx new file mode 100644 index 00000000..d4bbf0f5 --- /dev/null +++ b/public/app/features/alerting/unified/components/AlertLabels.tsx @@ -0,0 +1,30 @@ +import { GrafanaTheme } from '@grafana/data'; +import { useStyles } from '@grafana/ui'; +import { css, cx } from '@emotion/css'; +import React from 'react'; +import { AlertLabel } from './AlertLabel'; + +type Props = { labels: Record; className?: string }; + +export const AlertLabels = ({ labels, className }: Props) => { + const styles = useStyles(getStyles); + const pairs = Object.entries(labels).filter(([key]) => !(key.startsWith('__') && key.endsWith('__'))); + + return ( +

+ {pairs.map(([key, value], index) => ( + + ))} +

+ ); +}; + +const getStyles = (theme: GrafanaTheme) => ({ + wrapper: css` + & > * { + margin-bottom: ${theme.spacing.xs}; + margin-right: ${theme.spacing.xs}; + } + padding-bottom: ${theme.spacing.xs}; + `, +}); diff --git a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx new file mode 100644 index 00000000..01f91871 --- /dev/null +++ b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx @@ -0,0 +1,69 @@ +import { SelectableValue, GrafanaTheme2 } from '@grafana/data'; +import { DataSourceType, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource'; +import React, { FC, useMemo } from 'react'; +import { Field, Select, useStyles2 } from '@grafana/ui'; +import { getAllDataSources } from '../utils/config'; +import { css } from '@emotion/css'; + +interface Props { + onChange: (alertManagerSourceName: string) => void; + current?: string; + disabled?: boolean; +} + +export const AlertManagerPicker: FC = ({ onChange, current, disabled = false }) => { + const styles = useStyles2(getStyles); + + const options: Array> = useMemo(() => { + return [ + { + label: 'Grafana', + value: GRAFANA_RULES_SOURCE_NAME, + imgUrl: 'public/img/grafana_icon.svg', + meta: {}, + }, + ...getAllDataSources() + .filter((ds) => ds.type === DataSourceType.Alertmanager) + .map((ds) => ({ + label: ds.name.substr(0, 37), + value: ds.name, + imgUrl: ds.meta.info.logos.small, + meta: ds.meta, + })), + ]; + }, []); + + // no need to show the picker if there's only one option + if (options.length === 1) { + return null; + } + + return ( + + remove(index)} + variant="destructive" + className={styles.destroyInputRow} + > + + + } + /> + + ); + })} + +

+ )} + +

+ +

+ )} + + + ); +}; + +function cleanAlertmanagerUrl(url: string): string { + return url.replace(/\/$/, '').replace(/\/api\/v[1|2]\/alerts/i, ''); +} + +const getStyles = (theme: GrafanaTheme2) => { + const muted = css` + color: ${theme.colors.text.secondary}; + `; + return { + description: cx( + css` + margin-bottom: ${theme.spacing(2)}; + `, + muted + ), + muted: muted, + bold: css` + font-weight: ${theme.typography.fontWeightBold}; + `, + modal: css``, + modalIcon: cx( + muted, + css` + margin-right: ${theme.spacing(1)}; + ` + ), + modalTitle: css` + display: flex; + `, + input: css` + margin-bottom: ${theme.spacing(1)}; + margin-right: ${theme.spacing(1)}; + `, + inputRow: css` + display: flex; + `, + destroyInputRow: css` + padding: ${theme.spacing(1)}; + `, + fieldArray: css` + margin-bottom: ${theme.spacing(4)}; + `, + }; +}; diff --git a/public/app/features/alerting/unified/components/admin/AlertmanagerConfig.test.tsx b/public/app/features/alerting/unified/components/admin/AlertmanagerConfig.test.tsx new file mode 100644 index 00000000..f38e41b6 --- /dev/null +++ b/public/app/features/alerting/unified/components/admin/AlertmanagerConfig.test.tsx @@ -0,0 +1,162 @@ +import React from 'react'; +import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; +import { getAllDataSources } from '../../utils/config'; +import { + fetchAlertManagerConfig, + deleteAlertManagerConfig, + updateAlertManagerConfig, + fetchStatus, +} from '../../api/alertmanager'; +import { configureStore } from 'app/store/configureStore'; +import { locationService, setDataSourceSrv } from '@grafana/runtime'; +import AlertmanagerConfig from './AlertmanagerConfig'; +import { Provider } from 'react-redux'; +import { Router } from 'react-router-dom'; +import { ALERTMANAGER_NAME_LOCAL_STORAGE_KEY, ALERTMANAGER_NAME_QUERY_KEY } from '../../utils/constants'; +import { render, waitFor } from '@testing-library/react'; +import { byLabelText, byRole, byTestId } from 'testing-library-selector'; +import { + mockDataSource, + MockDataSourceSrv, + someCloudAlertManagerConfig, + someCloudAlertManagerStatus, +} from '../../mocks'; +import { DataSourceType } from '../../utils/datasource'; +import { contextSrv } from 'app/core/services/context_srv'; +import store from 'app/core/store'; +import userEvent from '@testing-library/user-event'; +import { + AlertManagerCortexConfig, + AlertManagerDataSourceJsonData, + AlertManagerImplementation, +} from 'app/plugins/datasource/alertmanager/types'; + +jest.mock('../../api/alertmanager'); +jest.mock('../../api/grafana'); +jest.mock('../../utils/config'); + +const mocks = { + getAllDataSources: typeAsJestMock(getAllDataSources), + + api: { + fetchConfig: typeAsJestMock(fetchAlertManagerConfig), + deleteAlertManagerConfig: typeAsJestMock(deleteAlertManagerConfig), + updateAlertManagerConfig: typeAsJestMock(updateAlertManagerConfig), + fetchStatus: typeAsJestMock(fetchStatus), + }, +}; + +const renderAdminPage = (alertManagerSourceName?: string) => { + const store = configureStore(); + + locationService.push( + '/alerting/notifications' + + (alertManagerSourceName ? `?${ALERTMANAGER_NAME_QUERY_KEY}=${alertManagerSourceName}` : '') + ); + + return render( + + + + + + ); +}; + +const dataSources = { + alertManager: mockDataSource({ + name: 'CloudManager', + type: DataSourceType.Alertmanager, + }), + promAlertManager: mockDataSource({ + name: 'PromManager', + type: DataSourceType.Alertmanager, + jsonData: { + implementation: AlertManagerImplementation.prometheus, + }, + }), +}; + +const ui = { + confirmButton: byRole('button', { name: /Confirm Modal Danger Button/ }), + resetButton: byRole('button', { name: /Reset configuration/ }), + saveButton: byRole('button', { name: /Save/ }), + configInput: byLabelText(/Configuration/), + readOnlyConfig: byTestId('readonly-config'), +}; + +describe('Admin config', () => { + beforeEach(() => { + jest.resetAllMocks(); + mocks.getAllDataSources.mockReturnValue(Object.values(dataSources)); + setDataSourceSrv(new MockDataSourceSrv(dataSources)); + contextSrv.isGrafanaAdmin = true; + store.delete(ALERTMANAGER_NAME_LOCAL_STORAGE_KEY); + }); + + it('Reset alertmanager config', async () => { + mocks.api.fetchConfig.mockResolvedValue({ + template_files: { + foo: 'bar', + }, + alertmanager_config: {}, + }); + mocks.api.deleteAlertManagerConfig.mockResolvedValue(); + + await renderAdminPage(dataSources.alertManager.name); + + userEvent.click(await ui.resetButton.find()); + userEvent.click(ui.confirmButton.get()); + await waitFor(() => expect(mocks.api.deleteAlertManagerConfig).toHaveBeenCalled()); + expect(ui.confirmButton.query()).not.toBeInTheDocument(); + }); + + it('Edit and save alertmanager config', async () => { + let savedConfig: AlertManagerCortexConfig | undefined = undefined; + + const defaultConfig = { + template_files: { + foo: 'bar', + }, + alertmanager_config: {}, + }; + + const newConfig = { + template_files: { + bar: 'baz', + }, + alertmanager_config: {}, + }; + + mocks.api.fetchConfig.mockImplementation(() => Promise.resolve(savedConfig ?? defaultConfig)); + mocks.api.updateAlertManagerConfig.mockResolvedValue(); + await renderAdminPage(dataSources.alertManager.name); + const input = await ui.configInput.find(); + expect(input.value).toEqual(JSON.stringify(defaultConfig, null, 2)); + userEvent.clear(input); + // What is this regex replace doing? in userEvent v13, '{' and '[' are special characters. + // To get the literal character, you have to escape them by typing '{{' or '[['. + // See https://github.com/testing-library/user-event/issues/584. + userEvent.type(input, JSON.stringify(newConfig, null, 2).replace(/[{[]/g, '$&$&')); + userEvent.click(ui.saveButton.get()); + await waitFor(() => expect(mocks.api.updateAlertManagerConfig).toHaveBeenCalled()); + await waitFor(() => expect(mocks.api.fetchConfig).toHaveBeenCalledTimes(3)); + expect(input.value).toEqual(JSON.stringify(newConfig, null, 2)); + }); + + it('Read-only when using Prometheus Alertmanager', async () => { + mocks.api.fetchStatus.mockResolvedValue({ + ...someCloudAlertManagerStatus, + config: someCloudAlertManagerConfig.alertmanager_config, + }); + await renderAdminPage(dataSources.promAlertManager.name); + + await ui.readOnlyConfig.find(); + expect(ui.configInput.query()).not.toBeInTheDocument(); + expect(ui.resetButton.query()).not.toBeInTheDocument(); + expect(ui.saveButton.query()).not.toBeInTheDocument(); + + expect(mocks.api.fetchConfig).not.toHaveBeenCalled(); + expect(mocks.api.fetchStatus).toHaveBeenCalledTimes(1); + }); +}); diff --git a/public/app/features/alerting/unified/components/admin/AlertmanagerConfig.tsx b/public/app/features/alerting/unified/components/admin/AlertmanagerConfig.tsx new file mode 100644 index 00000000..662d97a1 --- /dev/null +++ b/public/app/features/alerting/unified/components/admin/AlertmanagerConfig.tsx @@ -0,0 +1,158 @@ +import React, { useEffect, useState, useMemo } from 'react'; +import { css } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Alert, Button, ConfirmModal, TextArea, HorizontalGroup, Field, Form, useStyles2 } from '@grafana/ui'; +import { useAlertManagerSourceName } from '../../hooks/useAlertManagerSourceName'; +import { AlertManagerPicker } from '../AlertManagerPicker'; +import { GRAFANA_RULES_SOURCE_NAME, isVanillaPrometheusAlertManagerDataSource } from '../../utils/datasource'; +import { useDispatch } from 'react-redux'; +import { + deleteAlertManagerConfigAction, + fetchAlertManagerConfigAction, + updateAlertManagerConfigAction, +} from '../../state/actions'; +import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector'; +import { initialAsyncRequestState } from '../../utils/redux'; + +interface FormValues { + configJSON: string; +} + +export default function AlertmanagerConfig(): JSX.Element { + const dispatch = useDispatch(); + const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(); + const [showConfirmDeleteAMConfig, setShowConfirmDeleteAMConfig] = useState(false); + const { loading: isDeleting } = useUnifiedAlertingSelector((state) => state.deleteAMConfig); + const { loading: isSaving } = useUnifiedAlertingSelector((state) => state.saveAMConfig); + const readOnly = alertManagerSourceName ? isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName) : false; + const styles = useStyles2(getStyles); + + const configRequests = useUnifiedAlertingSelector((state) => state.amConfigs); + + const { result: config, loading: isLoadingConfig, error: loadingError } = + (alertManagerSourceName && configRequests[alertManagerSourceName]) || initialAsyncRequestState; + + useEffect(() => { + if (alertManagerSourceName) { + dispatch(fetchAlertManagerConfigAction(alertManagerSourceName)); + } + }, [alertManagerSourceName, dispatch]); + + const resetConfig = () => { + if (alertManagerSourceName) { + dispatch(deleteAlertManagerConfigAction(alertManagerSourceName)); + } + setShowConfirmDeleteAMConfig(false); + }; + + const defaultValues = useMemo( + (): FormValues => ({ + configJSON: config ? JSON.stringify(config, null, 2) : '', + }), + [config] + ); + + const loading = isDeleting || isLoadingConfig || isSaving; + + const onSubmit = (values: FormValues) => { + if (alertManagerSourceName && config) { + dispatch( + updateAlertManagerConfigAction({ + newConfig: JSON.parse(values.configJSON), + oldConfig: config, + alertManagerSourceName, + successMessage: 'Alertmanager configuration updated.', + refetch: true, + }) + ); + } + }; + + return ( +

+ + {loadingError && !loading && ( + + {loadingError.message || 'Unknown error.'} + + )} + {isDeleting && alertManagerSourceName !== GRAFANA_RULES_SOURCE_NAME && ( + + It might take a while... + + )} + {alertManagerSourceName && config && ( +

+ {({ register, errors }) => ( + <> + {!readOnly && ( + +

{
+                        try {
+                          JSON.parse(v);
+                          return true;
+                        } catch (e) {
+                          return e.message;
+                        }
+                      },
+                    })}
+                    id="configuration"
+                    rows={25}
+                  />
+                </Field>
+              )}
+              {readOnly && (
+                <Field label="Configuration">
+                  <pre data-testid="readonly-config">{defaultValues.configJSON}</pre>
+                </Field>
+              )}
+              {!readOnly && (
+                <HorizontalGroup>
+                  <Button type="submit" variant="primary" disabled={loading}>
+                    Save
+                  </Button>
+                  <Button
+                    type="button"
+                    disabled={loading}
+                    variant="destructive"
+                    onClick={() => setShowConfirmDeleteAMConfig(true)}
+                  >
+                    Reset configuration
+                  </Button>
+                </HorizontalGroup>
+              )}
+              {!!showConfirmDeleteAMConfig && (
+                <ConfirmModal
+                  isOpen={true}
+                  title="Reset Alertmanager configuration"
+                  body={`Are you sure you want to reset configuration ${
+                    alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME
+                      ? 'for the Grafana Alertmanager'
+                      : `for "${alertManagerSourceName}"`
+                  }? Contact points and notification policies will be reset to their defaults.`}
+                  confirmText="Yes, reset configuration"
+                  onConfirm={resetConfig}
+                  onDismiss={() => setShowConfirmDeleteAMConfig(false)}
+                />
+              )}
+            </>
+          )}
+        </Form>
+      )}
+    </div>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    margin-bottom: ${theme.spacing(4)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
new file mode 100644
index 00000000..9bb29cac
--- /dev/null
+++ b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ConfirmModal, HorizontalGroup, Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import { AddAlertManagerModal } from './AddAlertManagerModal';
+import {
+  addExternalAlertmanagersAction,
+  fetchExternalAlertmanagersAction,
+  fetchExternalAlertmanagersConfigAction,
+} from '../../state/actions';
+import { useExternalAmSelector } from '../../hooks/useExternalAmSelector';
+
+export const ExternalAlertmanagers = () => {
+  const styles = useStyles2(getStyles);
+  const dispatch = useDispatch();
+  const [modalState, setModalState] = useState({ open: false, payload: [{ url: '' }] });
+  const [deleteModalState, setDeleteModalState] = useState({ open: false, index: 0 });
+  const externalAlertManagers = useExternalAmSelector();
+
+  useEffect(() => {
+    dispatch(fetchExternalAlertmanagersAction());
+    dispatch(fetchExternalAlertmanagersConfigAction());
+    const interval = setInterval(() => dispatch(fetchExternalAlertmanagersAction()), 5000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [dispatch]);
+
+  const onDelete = useCallback(
+    (index: number) => {
+      // to delete we need to filter the alertmanager from the list and repost
+      const newList = (externalAlertManagers ?? [])
+        .filter((am, i) => i !== index)
+        .map((am) => {
+          return am.url;
+        });
+      dispatch(addExternalAlertmanagersAction(newList));
+      setDeleteModalState({ open: false, index: 0 });
+    },
+    [externalAlertManagers, dispatch]
+  );
+
+  const onEdit = useCallback(() => {
+    const ams = externalAlertManagers ? [...externalAlertManagers] : [{ url: '' }];
+    setModalState((state) => ({
+      ...state,
+      open: true,
+      payload: ams,
+    }));
+  }, [setModalState, externalAlertManagers]);
+
+  const onOpenModal = useCallback(() => {
+    setModalState((state) => {
+      const ams = externalAlertManagers ? [...externalAlertManagers, { url: '' }] : [{ url: '' }];
+      return {
+        ...state,
+        open: true,
+        payload: ams,
+      };
+    });
+  }, [externalAlertManagers]);
+
+  const onCloseModal = useCallback(() => {
+    setModalState((state) => ({
+      ...state,
+      open: false,
+    }));
+  }, [setModalState]);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'active':
+        return 'green';
+
+      case 'pending':
+        return 'yellow';
+
+      default:
+        return 'red';
+    }
+  };
+
+  const noAlertmanagers = externalAlertManagers?.length === 0;
+
+  return (
+    <div>
+      <h4>External Alertmanagers</h4>
+      <div className={styles.muted}>
+        You can have your Grafana managed alerts be delivered to one or many external Alertmanager(s) in addition to the
+        internal Alertmanager by specifying their URLs below.
+      </div>
+      <div className={styles.actions}>
+        {!noAlertmanagers && (
+          <Button type="button" onClick={onOpenModal}>
+            Add Alertmanager
+          </Button>
+        )}
+      </div>
+      {noAlertmanagers ? (
+        <EmptyListCTA
+          title="You have not added any external alertmanagers"
+          onClick={onOpenModal}
+          buttonTitle="Add Alertmanager"
+          buttonIcon="bell-slash"
+        />
+      ) : (
+        <table className="filter-table form-inline filter-table--hover">
+          <thead>
+            <tr>
+              <th>Url</th>
+              <th>Status</th>
+              <th style={{ width: '2%' }}>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {externalAlertManagers?.map((am, index) => {
+              return (
+                <tr key={index}>
+                  <td>
+                    <span className={styles.url}>{am.url}</span>
+                    {am.actualUrl ? (
+                      <Tooltip content={`Discovered ${am.actualUrl} from ${am.url}`} theme="info">
+                        <Icon name="info-circle" />
+                      </Tooltip>
+                    ) : null}
+                  </td>
+                  <td>
+                    <Icon name="heart" style={{ color: getStatusColor(am.status) }} title={am.status} />
+                  </td>
+                  <td>
+                    <HorizontalGroup>
+                      <Button variant="secondary" type="button" onClick={onEdit} aria-label="Edit alertmanager">
+                        <Icon name="pen" />
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        aria-label="Remove alertmanager"
+                        type="button"
+                        onClick={() => setDeleteModalState({ open: true, index })}
+                      >
+                        <Icon name="trash-alt" />
+                      </Button>
+                    </HorizontalGroup>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      )}
+      <ConfirmModal
+        isOpen={deleteModalState.open}
+        title="Remove Alertmanager"
+        body="Are you sure you want to remove this Alertmanager"
+        confirmText="Remove"
+        onConfirm={() => onDelete(deleteModalState.index)}
+        onDismiss={() => setDeleteModalState({ open: false, index: 0 })}
+      />
+      {modalState.open && <AddAlertManagerModal onClose={onCloseModal} alertmanagers={modalState.payload} />}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  url: css`
+    margin-right: ${theme.spacing(1)};
+  `,
+  muted: css`
+    color: ${theme.colors.text.secondary};
+  `,
+  actions: css`
+    margin-top: ${theme.spacing(2)};
+    display: flex;
+    justify-content: flex-end;
+  `,
+  table: css``,
+});
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx
new file mode 100644
index 00000000..8b16461f
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx
@@ -0,0 +1,79 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { LinkButton, useStyles2 } from '@grafana/ui';
+import { AlertmanagerAlert, AlertState } from 'app/plugins/datasource/alertmanager/types';
+
+import React, { FC } from 'react';
+import { makeAMLink } from '../../utils/misc';
+import { AnnotationDetailsField } from '../AnnotationDetailsField';
+import { getMatcherQueryParams } from '../../utils/matchers';
+
+interface AmNotificationsAlertDetailsProps {
+  alertManagerSourceName: string;
+  alert: AlertmanagerAlert;
+}
+
+export const AlertDetails: FC<AmNotificationsAlertDetailsProps> = ({ alert, alertManagerSourceName }) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      <div className={styles.actionsRow}>
+        {alert.status.state === AlertState.Suppressed && (
+          <LinkButton
+            href={`${makeAMLink(
+              '/alerting/silences',
+              alertManagerSourceName
+            )}&silenceIds=${alert.status.silencedBy.join(',')}`}
+            className={styles.button}
+            icon={'bell'}
+            size={'sm'}
+          >
+            Manage silences
+          </LinkButton>
+        )}
+        {alert.status.state === AlertState.Active && (
+          <LinkButton
+            href={`${makeAMLink('/alerting/silence/new', alertManagerSourceName)}&${getMatcherQueryParams(
+              alert.labels
+            )}`}
+            className={styles.button}
+            icon={'bell-slash'}
+            size={'sm'}
+          >
+            Silence
+          </LinkButton>
+        )}
+        {alert.generatorURL && (
+          <LinkButton className={styles.button} href={alert.generatorURL} icon={'chart-line'} size={'sm'}>
+            See source
+          </LinkButton>
+        )}
+      </div>
+      {Object.entries(alert.annotations).map(([annotationKey, annotationValue]) => (
+        <AnnotationDetailsField key={annotationKey} annotationKey={annotationKey} value={annotationValue} />
+      ))}
+      <div className={styles.receivers}>
+        Receivers:{' '}
+        {alert.receivers
+          .map(({ name }) => name)
+          .filter((name) => !!name)
+          .join(', ')}
+      </div>
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  button: css`
+    & + & {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+  actionsRow: css`
+    padding: ${theme.spacing(2, 0)} !important;
+    border-bottom: 1px solid ${theme.colors.border.medium};
+  `,
+  receivers: css`
+    padding: ${theme.spacing(1, 0)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
new file mode 100644
index 00000000..07373222
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
@@ -0,0 +1,80 @@
+import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
+import React, { useState } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { AlertLabels } from '../AlertLabels';
+import { AlertGroupAlertsTable } from './AlertGroupAlertsTable';
+import { CollapseToggle } from '../CollapseToggle';
+import { AlertGroupHeader } from './AlertGroupHeader';
+
+interface Props {
+  group: AlertmanagerGroup;
+  alertManagerSourceName: string;
+}
+
+export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <div className={styles.group} data-testid="alert-group">
+          <CollapseToggle
+            isCollapsed={isCollapsed}
+            onToggle={() => setIsCollapsed(!isCollapsed)}
+            data-testid="alert-group-collapse-toggle"
+          />
+          {Object.keys(group.labels).length ? (
+            <AlertLabels className={styles.headerLabels} labels={group.labels} />
+          ) : (
+            <span>No grouping</span>
+          )}
+        </div>
+        <AlertGroupHeader group={group} />
+      </div>
+      {!isCollapsed && <AlertGroupAlertsTable alertManagerSourceName={alertManagerSourceName} alerts={group.alerts} />}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    & + & {
+      margin-top: ${theme.spacing(2)};
+    }
+  `,
+  headerLabels: css`
+    padding-bottom: 0 !important;
+    margin-bottom: -${theme.spacing(0.5)};
+  `,
+  header: css`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: ${theme.spacing(1, 1, 1, 0)};
+    background-color: ${theme.colors.background.secondary};
+    width: 100%;
+  `,
+  group: css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  `,
+  summary: css``,
+  spanElement: css`
+    margin-left: ${theme.spacing(0.5)};
+  `,
+  [AlertState.Active]: css`
+    color: ${theme.colors.error.main};
+  `,
+  [AlertState.Suppressed]: css`
+    color: ${theme.colors.primary.main};
+  `,
+  [AlertState.Unprocessed]: css`
+    color: ${theme.colors.secondary.main};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx
new file mode 100644
index 00000000..f6df855e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx
@@ -0,0 +1,91 @@
+import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
+import React, { useMemo } from 'react';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
+import { css } from '@emotion/css';
+import { DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
+import { AmAlertStateTag } from '../silences/AmAlertStateTag';
+import { AlertLabels } from '../AlertLabels';
+import { DynamicTableWithGuidelines } from '../DynamicTableWithGuidelines';
+import { AlertDetails } from './AlertDetails';
+
+interface Props {
+  alerts: AlertmanagerAlert[];
+  alertManagerSourceName: string;
+}
+
+type AlertGroupAlertsTableColumnProps = DynamicTableColumnProps<AlertmanagerAlert>;
+type AlertGroupAlertsTableItemProps = DynamicTableItemProps<AlertmanagerAlert>;
+
+export const AlertGroupAlertsTable = ({ alerts, alertManagerSourceName }: Props) => {
+  const styles = useStyles2(getStyles);
+
+  const columns = useMemo(
+    (): AlertGroupAlertsTableColumnProps[] => [
+      {
+        id: 'state',
+        label: 'State',
+        // eslint-disable-next-line react/display-name
+        renderCell: ({ data: alert }) => (
+          <>
+            <AmAlertStateTag state={alert.status.state} />
+            <span className={styles.duration}>
+              for{' '}
+              {intervalToAbbreviatedDurationString({
+                start: new Date(alert.startsAt),
+                end: new Date(alert.endsAt),
+              })}
+            </span>
+          </>
+        ),
+        size: '220px',
+      },
+      {
+        id: 'labels',
+        label: 'Labels',
+        // eslint-disable-next-line react/display-name
+        renderCell: ({ data: { labels } }) => <AlertLabels className={styles.labels} labels={labels} />,
+        size: 1,
+      },
+    ],
+    [styles]
+  );
+
+  const items = useMemo(
+    (): AlertGroupAlertsTableItemProps[] =>
+      alerts.map((alert) => ({
+        id: alert.fingerprint,
+        data: alert,
+      })),
+    [alerts]
+  );
+
+  return (
+    <div className={styles.tableWrapper} data-testid="alert-group-table">
+      <DynamicTableWithGuidelines
+        cols={columns}
+        items={items}
+        isExpandable={true}
+        renderExpandedContent={({ data: alert }) => (
+          <AlertDetails alert={alert} alertManagerSourceName={alertManagerSourceName} />
+        )}
+      />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  tableWrapper: css`
+    margin-top: ${theme.spacing(3)};
+    ${theme.breakpoints.up('md')} {
+      margin-left: ${theme.spacing(4.5)};
+    }
+  `,
+  duration: css`
+    margin-left: ${theme.spacing(1)};
+    font-size: ${theme.typography.bodySmall.fontSize};
+  `,
+  labels: css`
+    padding-bottom: 0;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx
new file mode 100644
index 00000000..eb13990c
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroupFilter.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+
+import { AlertManagerPicker } from '../AlertManagerPicker';
+import { MatcherFilter } from './MatcherFilter';
+import { AlertStateFilter } from './AlertStateFilter';
+import { GroupBy } from './GroupBy';
+import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, useStyles2 } from '@grafana/ui';
+
+import { useAlertManagerSourceName } from '../../hooks/useAlertManagerSourceName';
+import { css } from '@emotion/css';
+import { getFiltersFromUrlParams } from '../../utils/misc';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+
+interface Props {
+  groups: AlertmanagerGroup[];
+}
+
+export const AlertGroupFilter = ({ groups }: Props) => {
+  const [filterKey, setFilterKey] = useState<number>(Math.floor(Math.random() * 100));
+  const [queryParams, setQueryParams] = useQueryParams();
+  const { groupBy = [], queryString, alertState } = getFiltersFromUrlParams(queryParams);
+  const matcherFilterKey = `matcher-${filterKey}`;
+
+  const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName();
+  const styles = useStyles2(getStyles);
+
+  const clearFilters = () => {
+    setQueryParams({
+      groupBy: null,
+      queryString: null,
+      alertState: null,
+    });
+    setTimeout(() => setFilterKey(filterKey + 1), 100);
+  };
+
+  const showClearButton = !!(groupBy.length > 0 || queryString || alertState);
+
+  return (
+    <div className={styles.wrapper}>
+      <AlertManagerPicker current={alertManagerSourceName} onChange={setAlertManagerSourceName} />
+      <div className={styles.filterSection}>
+        <MatcherFilter
+          className={styles.filterInput}
+          key={matcherFilterKey}
+          queryString={queryString}
+          onFilterChange={(value) => setQueryParams({ queryString: value ? value : null })}
+        />
+        <GroupBy
+          className={styles.filterInput}
+          groups={groups}
+          groupBy={groupBy}
+          onGroupingChange={(keys) => setQueryParams({ groupBy: keys.length ? keys.join(',') : null })}
+        />
+        <AlertStateFilter
+          stateFilter={alertState as AlertState}
+          onStateFilterChange={(value) => setQueryParams({ alertState: value ? value : null })}
+        />
+        {showClearButton && (
+          <Button className={styles.clearButton} variant={'secondary'} icon="times" onClick={clearFilters}>
+            Clear filters
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    border-bottom: 1px solid ${theme.colors.border.medium};
+    margin-bottom: ${theme.spacing(3)};
+  `,
+  filterSection: css`
+    display: flex;
+    flex-direction: row;
+    margin-bottom: ${theme.spacing(3)};
+  `,
+  filterInput: css`
+    width: 340px;
+    & + & {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+  clearButton: css`
+    margin-left: ${theme.spacing(1)};
+    margin-top: 19px;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx
new file mode 100644
index 00000000..9f6d9fd7
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx
@@ -0,0 +1,39 @@
+import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
+import React from 'react';
+import { useStyles2 } from '@grafana/ui';
+import { getNotificationsTextColors } from '../../styles/notifications';
+import pluralize from 'pluralize';
+
+interface Props {
+  group: AlertmanagerGroup;
+}
+
+export const AlertGroupHeader = ({ group }: Props) => {
+  const textStyles = useStyles2(getNotificationsTextColors);
+  const total = group.alerts.length;
+  const countByStatus = group.alerts.reduce((statusObj, alert) => {
+    if (statusObj[alert.status.state]) {
+      statusObj[alert.status.state] += 1;
+    } else {
+      statusObj[alert.status.state] = 1;
+    }
+    return statusObj;
+  }, {} as Record<AlertState, number>);
+
+  return (
+    <div>
+      {`${total} ${pluralize('alert', total)}: `}
+      {Object.entries(countByStatus).map(([state, count], index) => {
+        return (
+          <span
+            key={`${JSON.stringify(group.labels)}-notifications-${index}`}
+            className={textStyles[state as AlertState]}
+          >
+            {index > 0 && ', '}
+            {`${count} ${state}`}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertStateFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertStateFilter.tsx
new file mode 100644
index 00000000..44cc945b
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertStateFilter.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { RadioButtonGroup, Label, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { AlertState } from 'app/plugins/datasource/alertmanager/types';
+import { css } from '@emotion/css';
+
+interface Props {
+  stateFilter?: AlertState;
+  onStateFilterChange: (value: AlertState) => void;
+}
+
+export const AlertStateFilter = ({ onStateFilterChange, stateFilter }: Props) => {
+  const styles = useStyles2(getStyles);
+  const alertStateOptions: SelectableValue[] = Object.entries(AlertState)
+    .sort(([labelA], [labelB]) => (labelA < labelB ? -1 : 1))
+    .map(([label, state]) => ({
+      label,
+      value: state,
+    }));
+
+  return (
+    <div className={styles.wrapper}>
+      <Label>State</Label>
+      <RadioButtonGroup options={alertStateOptions} value={stateFilter} onChange={onStateFilterChange} />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    margin-left: ${theme.spacing(1)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/alert-groups/GroupBy.tsx b/public/app/features/alerting/unified/components/alert-groups/GroupBy.tsx
new file mode 100644
index 00000000..ae595e84
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/GroupBy.tsx
@@ -0,0 +1,37 @@
+import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types';
+import React from 'react';
+import { uniq } from 'lodash';
+import { Icon, Label, MultiSelect } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+
+interface Props {
+  className?: string;
+  groups: AlertmanagerGroup[];
+  groupBy: string[];
+  onGroupingChange: (keys: string[]) => void;
+}
+
+export const GroupBy = ({ className, groups, groupBy, onGroupingChange }: Props) => {
+  const labelKeyOptions = uniq(groups.flatMap((group) => group.alerts).flatMap(({ labels }) => Object.keys(labels)))
+    .filter((label) => !(label.startsWith('__') && label.endsWith('__'))) // Filter out private labels
+    .map<SelectableValue>((key) => ({
+      label: key,
+      value: key,
+    }));
+
+  return (
+    <div data-testid={'group-by-container'} className={className}>
+      <Label>Custom group by</Label>
+      <MultiSelect
+        aria-label={'group by label keys'}
+        value={groupBy}
+        placeholder="Group by"
+        prefix={<Icon name={'tag-alt'} />}
+        onChange={(items) => {
+          onGroupingChange(items.map(({ value }) => value as string));
+        }}
+        options={labelKeyOptions}
+      />
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
new file mode 100644
index 00000000..2db2ee94
--- /dev/null
+++ b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
@@ -0,0 +1,54 @@
+import React, { FormEvent } from 'react';
+import { Label, Tooltip, Input, Icon, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+
+interface Props {
+  className?: string;
+  queryString?: string;
+  onFilterChange: (filterString: string) => void;
+}
+
+export const MatcherFilter = ({ className, onFilterChange, queryString }: Props) => {
+  const styles = useStyles2(getStyles);
+  const handleSearchChange = (e: FormEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    onFilterChange(target.value);
+  };
+  const searchIcon = <Icon name={'search'} />;
+  return (
+    <div className={className}>
+      <Label>
+        <Tooltip
+          content={
+            <div>
+              Filter alerts using label querying, ex:
+              <pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
+            </div>
+          }
+        >
+          <Icon className={styles.icon} name="info-circle" size="xs" />
+        </Tooltip>
+        Search by label
+      </Label>
+      <Input
+        placeholder="Search"
+        defaultValue={queryString}
+        onChange={handleSearchChange}
+        data-testid="search-query-input"
+        prefix={searchIcon}
+        className={styles.inputWidth}
+      />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  icon: css`
+    margin-right: ${theme.spacing(0.5)};
+  `,
+  inputWidth: css`
+    width: 340px;
+    flex-grow: 0;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRootRoute.tsx b/public/app/features/alerting/unified/components/amroutes/AmRootRoute.tsx
new file mode 100644
index 00000000..e248d4e2
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/AmRootRoute.tsx
@@ -0,0 +1,80 @@
+import React, { FC } from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, useStyles2 } from '@grafana/ui';
+import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
+import { AmRootRouteForm } from './AmRootRouteForm';
+import { AmRootRouteRead } from './AmRootRouteRead';
+import { isVanillaPrometheusAlertManagerDataSource } from '../../utils/datasource';
+
+export interface AmRootRouteProps {
+  isEditMode: boolean;
+  onEnterEditMode: () => void;
+  onExitEditMode: () => void;
+  onSave: (data: Partial<FormAmRoute>) => void;
+  receivers: AmRouteReceiver[];
+  routes: FormAmRoute;
+  alertManagerSourceName: string;
+}
+
+export const AmRootRoute: FC<AmRootRouteProps> = ({
+  isEditMode,
+  onSave,
+  onEnterEditMode,
+  onExitEditMode,
+  receivers,
+  routes,
+  alertManagerSourceName,
+}) => {
+  const styles = useStyles2(getStyles);
+
+  const isReadOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
+
+  return (
+    <div className={styles.container} data-testid="am-root-route-container">
+      <div className={styles.titleContainer}>
+        <h5 className={styles.title}>
+          Root policy - <i>default for all alerts</i>
+        </h5>
+        {!isEditMode && !isReadOnly && (
+          <Button icon="pen" onClick={onEnterEditMode} size="sm" type="button" variant="secondary">
+            Edit
+          </Button>
+        )}
+      </div>
+      <p>
+        All alerts will go to the default contact point, unless you set additional matchers in the specific routing
+        area.
+      </p>
+      {isEditMode ? (
+        <AmRootRouteForm
+          alertManagerSourceName={alertManagerSourceName}
+          onCancel={onExitEditMode}
+          onSave={onSave}
+          receivers={receivers}
+          routes={routes}
+        />
+      ) : (
+        <AmRootRouteRead routes={routes} />
+      )}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css`
+      background-color: ${theme.colors.background.secondary};
+      color: ${theme.colors.text.secondary};
+      padding: ${theme.spacing(2)};
+    `,
+    titleContainer: css`
+      color: ${theme.colors.text.primary};
+      display: flex;
+      flex-flow: row nowrap;
+    `,
+    title: css`
+      flex: 100%;
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx b/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx
new file mode 100644
index 00000000..714b6329
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx
@@ -0,0 +1,232 @@
+import React, { FC, useState } from 'react';
+import { cx } from '@emotion/css';
+import { Button, Collapse, Field, Form, Input, InputControl, Link, MultiSelect, Select, useStyles2 } from '@grafana/ui';
+import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
+import {
+  mapMultiSelectValueToStrings,
+  mapSelectValueToString,
+  optionalPositiveInteger,
+  stringToSelectableValue,
+  stringsToSelectableValues,
+} from '../../utils/amroutes';
+import { makeAMLink } from '../../utils/misc';
+import { timeOptions } from '../../utils/time';
+import { getFormStyles } from './formStyles';
+
+export interface AmRootRouteFormProps {
+  alertManagerSourceName: string;
+  onCancel: () => void;
+  onSave: (data: FormAmRoute) => void;
+  receivers: AmRouteReceiver[];
+  routes: FormAmRoute;
+}
+
+export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
+  alertManagerSourceName,
+  onCancel,
+  onSave,
+  receivers,
+  routes,
+}) => {
+  const styles = useStyles2(getFormStyles);
+  const [isTimingOptionsExpanded, setIsTimingOptionsExpanded] = useState(false);
+  const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(routes.groupBy));
+
+  return (
+    <Form defaultValues={routes} onSubmit={onSave}>
+      {({ control, errors, setValue }) => (
+        <>
+          <Field label="Default contact point" invalid={!!errors.receiver} error={errors.receiver?.message}>
+            <>
+              <div className={styles.container} data-testid="am-receiver-select">
+                <InputControl
+                  render={({ field: { onChange, ref, ...field } }) => (
+                    <Select
+                      aria-label="Default contact point"
+                      {...field}
+                      className={styles.input}
+                      onChange={(value) => onChange(mapSelectValueToString(value))}
+                      options={receivers}
+                      menuShouldPortal
+                    />
+                  )}
+                  control={control}
+                  name="receiver"
+                  rules={{ required: { value: true, message: 'Required.' } }}
+                />
+                <span>or</span>
+                <Link
+                  className={styles.linkText}
+                  href={makeAMLink('/alerting/notifications/receivers/new', alertManagerSourceName)}
+                >
+                  Create a contact point
+                </Link>
+              </div>
+            </>
+          </Field>
+          <Field
+            label="Group by"
+            description="Group alerts when you receive a notification based on labels."
+            data-testid="am-group-select"
+          >
+            {/* @ts-ignore-check: react-hook-form made me do this */}
+            <InputControl
+              render={({ field: { onChange, ref, ...field } }) => (
+                <MultiSelect
+                  aria-label="Group by"
+                  menuShouldPortal
+                  {...field}
+                  allowCustomValue
+                  className={styles.input}
+                  onCreateOption={(opt: string) => {
+                    setGroupByOptions((opts) => [...opts, stringToSelectableValue(opt)]);
+
+                    // @ts-ignore-check: react-hook-form made me do this
+                    setValue('groupBy', [...field.value, opt]);
+                  }}
+                  onChange={(value) => onChange(mapMultiSelectValueToStrings(value))}
+                  options={groupByOptions}
+                />
+              )}
+              control={control}
+              name="groupBy"
+            />
+          </Field>
+          <Collapse
+            collapsible
+            className={styles.collapse}
+            isOpen={isTimingOptionsExpanded}
+            label="Timing options"
+            onToggle={setIsTimingOptionsExpanded}
+          >
+            <Field
+              label="Group wait"
+              description="The waiting time until the initial notification is sent for a new group created by an incoming alert. Default 30 seconds."
+              invalid={!!errors.groupWaitValue}
+              error={errors.groupWaitValue?.message}
+              data-testid="am-group-wait"
+            >
+              <>
+                <div className={cx(styles.container, styles.timingContainer)}>
+                  <InputControl
+                    render={({ field, fieldState: { invalid } }) => (
+                      <Input
+                        {...field}
+                        className={styles.smallInput}
+                        invalid={invalid}
+                        placeholder={'Default 30 seconds'}
+                      />
+                    )}
+                    control={control}
+                    name="groupWaitValue"
+                    rules={{
+                      validate: optionalPositiveInteger,
+                    }}
+                  />
+                  <InputControl
+                    render={({ field: { onChange, ref, ...field } }) => (
+                      <Select
+                        menuShouldPortal
+                        {...field}
+                        className={styles.input}
+                        onChange={(value) => onChange(mapSelectValueToString(value))}
+                        options={timeOptions}
+                        aria-label="Group wait type"
+                      />
+                    )}
+                    control={control}
+                    name="groupWaitValueType"
+                  />
+                </div>
+              </>
+            </Field>
+            <Field
+              label="Group interval"
+              description="The waiting time to send a batch of new alerts for that group after the first notification was sent. Default 5 minutes."
+              invalid={!!errors.groupIntervalValue}
+              error={errors.groupIntervalValue?.message}
+              data-testid="am-group-interval"
+            >
+              <>
+                <div className={cx(styles.container, styles.timingContainer)}>
+                  <InputControl
+                    render={({ field, fieldState: { invalid } }) => (
+                      <Input
+                        {...field}
+                        className={styles.smallInput}
+                        invalid={invalid}
+                        placeholder={'Default 5 minutes'}
+                      />
+                    )}
+                    control={control}
+                    name="groupIntervalValue"
+                    rules={{
+                      validate: optionalPositiveInteger,
+                    }}
+                  />
+                  <InputControl
+                    render={({ field: { onChange, ref, ...field } }) => (
+                      <Select
+                        menuShouldPortal
+                        {...field}
+                        className={styles.input}
+                        onChange={(value) => onChange(mapSelectValueToString(value))}
+                        options={timeOptions}
+                        aria-label="Group interval type"
+                      />
+                    )}
+                    control={control}
+                    name="groupIntervalValueType"
+                  />
+                </div>
+              </>
+            </Field>
+            <Field
+              label="Repeat interval"
+              description="The waiting time to resend an alert after they have successfully been sent. Default 4 hours."
+              invalid={!!errors.repeatIntervalValue}
+              error={errors.repeatIntervalValue?.message}
+              data-testid="am-repeat-interval"
+            >
+              <>
+                <div className={cx(styles.container, styles.timingContainer)}>
+                  <InputControl
+                    render={({ field, fieldState: { invalid } }) => (
+                      <Input {...field} className={styles.smallInput} invalid={invalid} placeholder="Default 4 hours" />
+                    )}
+                    control={control}
+                    name="repeatIntervalValue"
+                    rules={{
+                      validate: optionalPositiveInteger,
+                    }}
+                  />
+                  <InputControl
+                    render={({ field: { onChange, ref, ...field } }) => (
+                      <Select
+                        menuShouldPortal
+                        {...field}
+                        className={styles.input}
+                        menuPlacement="top"
+                        onChange={(value) => onChange(mapSelectValueToString(value))}
+                        options={timeOptions}
+                        aria-label="Repeat interval type"
+                      />
+                    )}
+                    control={control}
+                    name="repeatIntervalValueType"
+                  />
+                </div>
+              </>
+            </Field>
+          </Collapse>
+          <div className={styles.container}>
+            <Button type="submit">Save</Button>
+            <Button onClick={onCancel} type="reset" variant="secondary" fill="outline">
+              Cancel
+            </Button>
+          </div>
+        </>
+      )}
+    </Form>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRootRouteRead.tsx b/public/app/features/alerting/unified/components/amroutes/AmRootRouteRead.tsx
new file mode 100644
index 00000000..d534bbff
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/AmRootRouteRead.tsx
@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import { useStyles2 } from '@grafana/ui';
+import { FormAmRoute } from '../../types/amroutes';
+import { getGridStyles } from './gridStyles';
+
+export interface AmRootRouteReadProps {
+  routes: FormAmRoute;
+}
+
+export const AmRootRouteRead: FC<AmRootRouteReadProps> = ({ routes }) => {
+  const styles = useStyles2(getGridStyles);
+
+  const receiver = routes.receiver || '-';
+  const groupBy = routes.groupBy.join(', ') || '-';
+  const groupWait = routes.groupWaitValue ? `${routes.groupWaitValue}${routes.groupWaitValueType}` : '-';
+  const groupInterval = routes.groupIntervalValue
+    ? `${routes.groupIntervalValue}${routes.groupIntervalValueType}`
+    : '-';
+  const repeatInterval = routes.repeatIntervalValue
+    ? `${routes.repeatIntervalValue}${routes.repeatIntervalValueType}`
+    : '-';
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleCell}>Contact point</div>
+      <div className={styles.valueCell} data-testid="am-routes-root-receiver">
+        {receiver}
+      </div>
+      <div className={styles.titleCell}>Group by</div>
+      <div className={styles.valueCell} data-testid="am-routes-root-group-by">
+        {groupBy}
+      </div>
+      <div className={styles.titleCell}>Timings</div>
+      <div className={styles.valueCell} data-testid="am-routes-root-timings">
+        Group wait: {groupWait} | Group interval: {groupInterval} | Repeat interval: {repeatInterval}
+      </div>
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx
new file mode 100644
index 00000000..567a9488
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx
@@ -0,0 +1,379 @@
+import React, { FC, useState } from 'react';
+import { css, cx } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import {
+  Button,
+  Field,
+  FieldArray,
+  Form,
+  HorizontalGroup,
+  IconButton,
+  Input,
+  InputControl,
+  MultiSelect,
+  Select,
+  Switch,
+  useStyles2,
+} from '@grafana/ui';
+import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
+import {
+  emptyArrayFieldMatcher,
+  mapMultiSelectValueToStrings,
+  mapSelectValueToString,
+  optionalPositiveInteger,
+  stringToSelectableValue,
+  stringsToSelectableValues,
+} from '../../utils/amroutes';
+import { timeOptions } from '../../utils/time';
+import { getFormStyles } from './formStyles';
+import { matcherFieldOptions } from '../../utils/alertmanager';
+import { useMuteTimingOptions } from '../../hooks/useMuteTimingOptions';
+
+export interface AmRoutesExpandedFormProps {
+  onCancel: () => void;
+  onSave: (data: FormAmRoute) => void;
+  receivers: AmRouteReceiver[];
+  routes: FormAmRoute;
+}
+
+export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ onCancel, onSave, receivers, routes }) => {
+  const styles = useStyles2(getStyles);
+  const formStyles = useStyles2(getFormStyles);
+  const [overrideGrouping, setOverrideGrouping] = useState(routes.groupBy.length > 0);
+  const [overrideTimings, setOverrideTimings] = useState(
+    !!routes.groupWaitValue || !!routes.groupIntervalValue || !!routes.repeatIntervalValue
+  );
+  const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(routes.groupBy));
+  const muteTimingOptions = useMuteTimingOptions();
+
+  return (
+    <Form defaultValues={routes} onSubmit={onSave}>
+      {({ control, register, errors, setValue }) => (
+        <>
+          {/* @ts-ignore-check: react-hook-form made me do this */}
+          <input type="hidden" {...register('id')} />
+          {/* @ts-ignore-check: react-hook-form made me do this */}
+          <FieldArray name="object_matchers" control={control}>
+            {({ fields, append, remove }) => (
+              <>
+                <div>Matching labels</div>
+                <div className={styles.matchersContainer}>
+                  {fields.map((field, index) => {
+                    const localPath = `object_matchers[${index}]`;
+                    return (
+                      <HorizontalGroup key={field.id} align="flex-start">
+                        <Field
+                          label="Label"
+                          invalid={!!errors.object_matchers?.[index]?.name}
+                          error={errors.object_matchers?.[index]?.name?.message}
+                        >
+                          <Input
+                            {...register(`${localPath}.name`, { required: 'Field is required' })}
+                            defaultValue={field.name}
+                            placeholder="label"
+                          />
+                        </Field>
+                        <Field label={'Operator'}>
+                          <InputControl
+                            render={({ field: { onChange, ref, ...field } }) => (
+                              <Select
+                                {...field}
+                                className={styles.matchersOperator}
+                                onChange={(value) => onChange(value?.value)}
+                                options={matcherFieldOptions}
+                                aria-label="Operator"
+                              />
+                            )}
+                            defaultValue={field.operator}
+                            control={control}
+                            name={`${localPath}.operator` as const}
+                            rules={{ required: { value: true, message: 'Required.' } }}
+                          />
+                        </Field>
+                        <Field
+                          label="Value"
+                          invalid={!!errors.object_matchers?.[index]?.value}
+                          error={errors.object_matchers?.[index]?.value?.message}
+                        >
+                          <Input
+                            {...register(`${localPath}.value`, { required: 'Field is required' })}
+                            defaultValue={field.value}
+                            placeholder="value"
+                          />
+                        </Field>
+                        <IconButton
+                          className={styles.removeButton}
+                          tooltip="Remove matcher"
+                          name={'trash-alt'}
+                          onClick={() => remove(index)}
+                        >
+                          Remove
+                        </IconButton>
+                      </HorizontalGroup>
+                    );
+                  })}
+                </div>
+                <Button
+                  className={styles.addMatcherBtn}
+                  icon="plus"
+                  onClick={() => append(emptyArrayFieldMatcher)}
+                  variant="secondary"
+                  type="button"
+                >
+                  Add matcher
+                </Button>
+              </>
+            )}
+          </FieldArray>
+          <Field label="Contact point">
+            {/* @ts-ignore-check: react-hook-form made me do this */}
+            <InputControl
+              render={({ field: { onChange, ref, ...field } }) => (
+                <Select
+                  aria-label="Contact point"
+                  {...field}
+                  className={formStyles.input}
+                  onChange={(value) => onChange(mapSelectValueToString(value))}
+                  options={receivers}
+                  menuShouldPortal
+                />
+              )}
+              control={control}
+              name="receiver"
+            />
+          </Field>
+          <Field label="Continue matching subsequent sibling nodes">
+            <Switch id="continue-toggle" {...register('continue')} />
+          </Field>
+          <Field label="Override grouping">
+            <Switch
+              id="override-grouping-toggle"
+              value={overrideGrouping}
+              onChange={() => setOverrideGrouping((overrideGrouping) => !overrideGrouping)}
+            />
+          </Field>
+          {overrideGrouping && (
+            <Field label="Group by" description="Group alerts when you receive a notification based on labels.">
+              <InputControl
+                render={({ field: { onChange, ref, ...field } }) => (
+                  <MultiSelect
+                    aria-label="Group by"
+                    menuShouldPortal
+                    {...field}
+                    allowCustomValue
+                    className={formStyles.input}
+                    onCreateOption={(opt: string) => {
+                      setGroupByOptions((opts) => [...opts, stringToSelectableValue(opt)]);
+
+                      // @ts-ignore-check: react-hook-form made me do this
+                      setValue('groupBy', [...field.value, opt]);
+                    }}
+                    onChange={(value) => onChange(mapMultiSelectValueToStrings(value))}
+                    options={groupByOptions}
+                  />
+                )}
+                control={control}
+                name="groupBy"
+              />
+            </Field>
+          )}
+          <Field label="Override general timings">
+            <Switch
+              id="override-timings-toggle"
+              value={overrideTimings}
+              onChange={() => setOverrideTimings((overrideTimings) => !overrideTimings)}
+            />
+          </Field>
+          {overrideTimings && (
+            <>
+              <Field
+                label="Group wait"
+                description="The waiting time until the initial notification is sent for a new group created by an incoming alert."
+                invalid={!!errors.groupWaitValue}
+                error={errors.groupWaitValue?.message}
+              >
+                <>
+                  <div className={cx(formStyles.container, formStyles.timingContainer)}>
+                    <InputControl
+                      render={({ field, fieldState: { invalid } }) => (
+                        <Input
+                          {...field}
+                          className={formStyles.smallInput}
+                          invalid={invalid}
+                          placeholder="Time"
+                          aria-label="Group wait value"
+                        />
+                      )}
+                      control={control}
+                      name="groupWaitValue"
+                      rules={{
+                        validate: optionalPositiveInteger,
+                      }}
+                    />
+                    <InputControl
+                      render={({ field: { onChange, ref, ...field } }) => (
+                        <Select
+                          menuShouldPortal
+                          {...field}
+                          className={formStyles.input}
+                          onChange={(value) => onChange(mapSelectValueToString(value))}
+                          options={timeOptions}
+                          aria-label="Group wait type"
+                        />
+                      )}
+                      control={control}
+                      name="groupWaitValueType"
+                    />
+                  </div>
+                </>
+              </Field>
+              <Field
+                label="Group interval"
+                description="The waiting time to send a batch of new alerts for that group after the first notification was sent."
+                invalid={!!errors.groupIntervalValue}
+                error={errors.groupIntervalValue?.message}
+              >
+                <>
+                  <div className={cx(formStyles.container, formStyles.timingContainer)}>
+                    <InputControl
+                      render={({ field, fieldState: { invalid } }) => (
+                        <Input
+                          {...field}
+                          className={formStyles.smallInput}
+                          invalid={invalid}
+                          placeholder="Time"
+                          aria-label="Group interval value"
+                        />
+                      )}
+                      control={control}
+                      name="groupIntervalValue"
+                      rules={{
+                        validate: optionalPositiveInteger,
+                      }}
+                    />
+                    <InputControl
+                      render={({ field: { onChange, ref, ...field } }) => (
+                        <Select
+                          menuShouldPortal
+                          {...field}
+                          className={formStyles.input}
+                          onChange={(value) => onChange(mapSelectValueToString(value))}
+                          options={timeOptions}
+                          aria-label="Group interval type"
+                        />
+                      )}
+                      control={control}
+                      name="groupIntervalValueType"
+                    />
+                  </div>
+                </>
+              </Field>
+              <Field
+                label="Repeat interval"
+                description="The waiting time to resend an alert after they have successfully been sent."
+                invalid={!!errors.repeatIntervalValue}
+                error={errors.repeatIntervalValue?.message}
+              >
+                <>
+                  <div className={cx(formStyles.container, formStyles.timingContainer)}>
+                    <InputControl
+                      render={({ field, fieldState: { invalid } }) => (
+                        <Input
+                          {...field}
+                          className={formStyles.smallInput}
+                          invalid={invalid}
+                          placeholder="Time"
+                          aria-label="Repeat interval value"
+                        />
+                      )}
+                      control={control}
+                      name="repeatIntervalValue"
+                      rules={{
+                        validate: optionalPositiveInteger,
+                      }}
+                    />
+                    <InputControl
+                      render={({ field: { onChange, ref, ...field } }) => (
+                        <Select
+                          menuShouldPortal
+                          {...field}
+                          className={formStyles.input}
+                          menuPlacement="top"
+                          onChange={(value) => onChange(mapSelectValueToString(value))}
+                          options={timeOptions}
+                          aria-label="Repeat interval type"
+                        />
+                      )}
+                      control={control}
+                      name="repeatIntervalValueType"
+                    />
+                  </div>
+                </>
+              </Field>
+            </>
+          )}
+          <Field
+            label="Mute timings"
+            data-testid="am-mute-timing-select"
+            description="Add mute timing to policy"
+            invalid={!!errors.muteTimeIntervals}
+          >
+            <InputControl
+              render={({ field: { onChange, ref, ...field } }) => (
+                <MultiSelect
+                  aria-label="Mute timings"
+                  menuShouldPortal
+                  {...field}
+                  className={formStyles.input}
+                  onChange={(value) => onChange(mapMultiSelectValueToStrings(value))}
+                  options={muteTimingOptions}
+                />
+              )}
+              control={control}
+              name="muteTimeIntervals"
+            />
+          </Field>
+          <div className={styles.buttonGroup}>
+            <Button type="submit">Save policy</Button>
+            <Button onClick={onCancel} fill="outline" type="button" variant="secondary">
+              Cancel
+            </Button>
+          </div>
+        </>
+      )}
+    </Form>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  const commonSpacing = theme.spacing(3.5);
+
+  return {
+    addMatcherBtn: css`
+      margin-bottom: ${commonSpacing};
+    `,
+    matchersContainer: css`
+      background-color: ${theme.colors.background.secondary};
+      margin: ${theme.spacing(1, 0)};
+      padding: ${theme.spacing(1, 4.6, 1, 1.5)};
+      width: fit-content;
+    `,
+    matchersOperator: css`
+      min-width: 140px;
+    `,
+    nestedPolicies: css`
+      margin-top: ${commonSpacing};
+    `,
+    removeButton: css`
+      margin-left: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(2.5)};
+    `,
+    buttonGroup: css`
+      margin: ${theme.spacing(6)} 0 ${commonSpacing};
+
+      & > * + * {
+        margin-left: ${theme.spacing(1.5)};
+      }
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedRead.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedRead.tsx
new file mode 100644
index 00000000..04d3431e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedRead.tsx
@@ -0,0 +1,111 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import React, { FC, useState } from 'react';
+import { Button, useStyles2 } from '@grafana/ui';
+import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
+import { emptyRoute } from '../../utils/amroutes';
+import { AmRoutesTable } from './AmRoutesTable';
+import { getGridStyles } from './gridStyles';
+import { MuteTimingsTable } from './MuteTimingsTable';
+import { useAlertManagerSourceName } from '../../hooks/useAlertManagerSourceName';
+
+export interface AmRoutesExpandedReadProps {
+  onChange: (routes: FormAmRoute) => void;
+  receivers: AmRouteReceiver[];
+  routes: FormAmRoute;
+  readOnly?: boolean;
+}
+
+export const AmRoutesExpandedRead: FC<AmRoutesExpandedReadProps> = ({
+  onChange,
+  receivers,
+  routes,
+  readOnly = false,
+}) => {
+  const styles = useStyles2(getStyles);
+  const gridStyles = useStyles2(getGridStyles);
+  const [alertManagerSourceName] = useAlertManagerSourceName();
+
+  const groupWait = routes.groupWaitValue ? `${routes.groupWaitValue}${routes.groupWaitValueType}` : '-';
+  const groupInterval = routes.groupIntervalValue
+    ? `${routes.groupIntervalValue}${routes.groupIntervalValueType}`
+    : '-';
+  const repeatInterval = routes.repeatIntervalValue
+    ? `${routes.repeatIntervalValue}${routes.repeatIntervalValueType}`
+    : '-';
+
+  const [subroutes, setSubroutes] = useState(routes.routes);
+  const [isAddMode, setIsAddMode] = useState(false);
+
+  return (
+    <div className={gridStyles.container}>
+      <div className={gridStyles.titleCell}>Group wait</div>
+      <div className={gridStyles.valueCell}>{groupWait}</div>
+      <div className={gridStyles.titleCell}>Group interval</div>
+      <div className={gridStyles.valueCell}>{groupInterval}</div>
+      <div className={gridStyles.titleCell}>Repeat interval</div>
+      <div className={gridStyles.valueCell}>{repeatInterval}</div>
+      <div className={gridStyles.titleCell}>Nested policies</div>
+      <div className={gridStyles.valueCell}>
+        {!!subroutes.length ? (
+          <AmRoutesTable
+            isAddMode={isAddMode}
+            onCancelAdd={() => {
+              setIsAddMode(false);
+              setSubroutes((subroutes) => {
+                const newSubroutes = [...subroutes];
+                newSubroutes.pop();
+
+                return newSubroutes;
+              });
+            }}
+            onChange={(newRoutes) => {
+              onChange({
+                ...routes,
+                routes: newRoutes,
+              });
+
+              if (isAddMode) {
+                setIsAddMode(false);
+              }
+            }}
+            receivers={receivers}
+            routes={subroutes}
+          />
+        ) : (
+          <p>No nested policies configured.</p>
+        )}
+        {!isAddMode && !readOnly && (
+          <Button
+            className={styles.addNestedRoutingBtn}
+            icon="plus"
+            onClick={() => {
+              setSubroutes((subroutes) => [...subroutes, emptyRoute]);
+              setIsAddMode(true);
+            }}
+            variant="secondary"
+            type="button"
+          >
+            Add nested policy
+          </Button>
+        )}
+      </div>
+      <div className={gridStyles.titleCell}>Mute timings</div>
+      <div className={gridStyles.valueCell}>
+        <MuteTimingsTable
+          alertManagerSourceName={alertManagerSourceName!}
+          muteTimingNames={routes.muteTimeIntervals}
+          hideActions
+        />
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    addNestedRoutingBtn: css`
+      margin-top: ${theme.spacing(2)};
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx
new file mode 100644
index 00000000..c3543129
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx
@@ -0,0 +1,168 @@
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, HorizontalGroup, IconButton } from '@grafana/ui';
+import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
+import { prepareItems } from '../../utils/dynamicTable';
+import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
+import { AmRoutesExpandedForm } from './AmRoutesExpandedForm';
+import { AmRoutesExpandedRead } from './AmRoutesExpandedRead';
+import { Matchers } from '../silences/Matchers';
+import { matcherFieldToMatcher } from '../../utils/alertmanager';
+
+export interface AmRoutesTableProps {
+  isAddMode: boolean;
+  onChange: (routes: FormAmRoute[]) => void;
+  onCancelAdd: () => void;
+  receivers: AmRouteReceiver[];
+  routes: FormAmRoute[];
+  readOnly?: boolean;
+}
+
+type RouteTableColumnProps = DynamicTableColumnProps<FormAmRoute>;
+type RouteTableItemProps = DynamicTableItemProps<FormAmRoute>;
+
+export const AmRoutesTable: FC<AmRoutesTableProps> = ({
+  isAddMode,
+  onCancelAdd,
+  onChange,
+  receivers,
+  routes,
+  readOnly = false,
+}) => {
+  const [editMode, setEditMode] = useState(false);
+
+  const [expandedId, setExpandedId] = useState<string | number>();
+
+  const expandItem = useCallback((item: RouteTableItemProps) => setExpandedId(item.id), []);
+
+  const collapseItem = useCallback(() => setExpandedId(undefined), []);
+
+  const cols: RouteTableColumnProps[] = [
+    {
+      id: 'matchingCriteria',
+      label: 'Matching labels',
+      // eslint-disable-next-line react/display-name
+      renderCell: (item) => <Matchers matchers={item.data.object_matchers.map(matcherFieldToMatcher)} />,
+      size: 10,
+    },
+    {
+      id: 'groupBy',
+      label: 'Group by',
+      renderCell: (item) => item.data.groupBy.join(', ') || '-',
+      size: 5,
+    },
+    {
+      id: 'receiverChannel',
+      label: 'Contact point',
+      renderCell: (item) => item.data.receiver || '-',
+      size: 5,
+    },
+    ...(readOnly
+      ? []
+      : [
+          {
+            id: 'actions',
+            label: 'Actions',
+            // eslint-disable-next-line react/display-name
+            renderCell: (item, index) => {
+              if (item.renderExpandedContent) {
+                return null;
+              }
+
+              const expandWithCustomContent = () => {
+                expandItem(item);
+                setEditMode(true);
+              };
+
+              return (
+                <HorizontalGroup>
+                  <Button
+                    aria-label="Edit route"
+                    icon="pen"
+                    onClick={expandWithCustomContent}
+                    size="sm"
+                    type="button"
+                    variant="secondary"
+                  >
+                    Edit
+                  </Button>
+                  <IconButton
+                    aria-label="Delete route"
+                    name="trash-alt"
+                    onClick={() => {
+                      const newRoutes = [...routes];
+
+                      newRoutes.splice(index, 1);
+
+                      onChange(newRoutes);
+                    }}
+                    type="button"
+                  />
+                </HorizontalGroup>
+              );
+            },
+            size: '100px',
+          } as RouteTableColumnProps,
+        ]),
+  ];
+
+  const items = useMemo(() => prepareItems(routes), [routes]);
+
+  // expand the last item when adding
+  useEffect(() => {
+    if (isAddMode && items.length) {
+      setExpandedId(items[items.length - 1].id);
+    }
+  }, [isAddMode, items]);
+
+  return (
+    <DynamicTable
+      cols={cols}
+      isExpandable={true}
+      items={items}
+      testIdGenerator={() => 'am-routes-row'}
+      onCollapse={collapseItem}
+      onExpand={expandItem}
+      isExpanded={(item) => expandedId === item.id}
+      renderExpandedContent={(item: RouteTableItemProps, index) =>
+        isAddMode || editMode ? (
+          <AmRoutesExpandedForm
+            onCancel={() => {
+              if (isAddMode) {
+                onCancelAdd();
+              }
+              setEditMode(false);
+            }}
+            onSave={(data) => {
+              const newRoutes = [...routes];
+
+              newRoutes[index] = {
+                ...newRoutes[index],
+                ...data,
+              };
+              setEditMode(false);
+              onChange(newRoutes);
+            }}
+            receivers={receivers}
+            routes={item.data}
+          />
+        ) : (
+          <AmRoutesExpandedRead
+            onChange={(data) => {
+              const newRoutes = [...routes];
+
+              newRoutes[index] = {
+                ...item.data,
+                ...data,
+              };
+
+              onChange(newRoutes);
+            }}
+            receivers={receivers}
+            routes={item.data}
+            readOnly={readOnly}
+          />
+        )
+      }
+    />
+  );
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/AmSpecificRouting.tsx b/public/app/features/alerting/unified/components/amroutes/AmSpecificRouting.tsx
new file mode 100644
index 00000000..d4d36a8a
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/AmSpecificRouting.tsx
@@ -0,0 +1,119 @@
+import React, { FC, useState } from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, useStyles2 } from '@grafana/ui';
+import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
+import { emptyArrayFieldMatcher, emptyRoute } from '../../utils/amroutes';
+import { EmptyArea } from '../EmptyArea';
+import { AmRoutesTable } from './AmRoutesTable';
+import { EmptyAreaWithCTA } from '../EmptyAreaWithCTA';
+
+export interface AmSpecificRoutingProps {
+  onChange: (routes: FormAmRoute) => void;
+  onRootRouteEdit: () => void;
+  receivers: AmRouteReceiver[];
+  routes: FormAmRoute;
+  readOnly?: boolean;
+}
+
+export const AmSpecificRouting: FC<AmSpecificRoutingProps> = ({
+  onChange,
+  onRootRouteEdit,
+  receivers,
+  routes,
+  readOnly = false,
+}) => {
+  const [actualRoutes, setActualRoutes] = useState(routes.routes);
+  const [isAddMode, setIsAddMode] = useState(false);
+
+  const styles = useStyles2(getStyles);
+
+  const addNewRoute = () => {
+    setIsAddMode(true);
+    setActualRoutes((actualRoutes) => [
+      ...actualRoutes,
+      {
+        ...emptyRoute,
+        matchers: [emptyArrayFieldMatcher],
+      },
+    ]);
+  };
+
+  return (
+    <div className={styles.container}>
+      <h5>Specific routing</h5>
+      <p>Send specific alerts to chosen contact points, based on matching criteria</p>
+      {!routes.receiver ? (
+        readOnly ? (
+          <EmptyArea>
+            <p>There is no default contact point configured for the root route.</p>
+          </EmptyArea>
+        ) : (
+          <EmptyAreaWithCTA
+            buttonIcon="rocket"
+            buttonLabel="Set a default contact point"
+            onButtonClick={onRootRouteEdit}
+            text="You haven't set a default contact point for the root route yet."
+          />
+        )
+      ) : actualRoutes.length > 0 ? (
+        <>
+          {!isAddMode && !readOnly && (
+            <Button className={styles.addMatcherBtn} icon="plus" onClick={addNewRoute} type="button">
+              New policy
+            </Button>
+          )}
+          <AmRoutesTable
+            isAddMode={isAddMode}
+            readOnly={readOnly}
+            onCancelAdd={() => {
+              setIsAddMode(false);
+              setActualRoutes((actualRoutes) => {
+                const newRoutes = [...actualRoutes];
+                newRoutes.pop();
+
+                return newRoutes;
+              });
+            }}
+            onChange={(newRoutes) => {
+              onChange({
+                ...routes,
+                routes: newRoutes,
+              });
+
+              if (isAddMode) {
+                setIsAddMode(false);
+              }
+            }}
+            receivers={receivers}
+            routes={actualRoutes}
+          />
+        </>
+      ) : readOnly ? (
+        <EmptyArea>
+          <p>There are no specific policies configured.</p>
+        </EmptyArea>
+      ) : (
+        <EmptyAreaWithCTA
+          buttonIcon="plus"
+          buttonLabel="New specific policy"
+          onButtonClick={addNewRoute}
+          text="You haven't created any specific policies yet."
+        />
+      )}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css`
+      display: flex;
+      flex-flow: column nowrap;
+    `,
+    addMatcherBtn: css`
+      align-self: flex-end;
+      margin-bottom: ${theme.spacing(3.5)};
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/MuteTimingForm.tsx b/public/app/features/alerting/unified/components/amroutes/MuteTimingForm.tsx
new file mode 100644
index 00000000..99f5a6ea
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/MuteTimingForm.tsx
@@ -0,0 +1,157 @@
+import React, { useMemo } from 'react';
+import { AlertingPageWrapper } from '../AlertingPageWrapper';
+import { Alert, Field, FieldSet, Input, Button, LinkButton, useStyles2 } from '@grafana/ui';
+import { FormProvider, useForm } from 'react-hook-form';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useDispatch } from 'react-redux';
+import { css } from '@emotion/css';
+import {
+  AlertmanagerConfig,
+  AlertManagerCortexConfig,
+  MuteTimeInterval,
+} from 'app/plugins/datasource/alertmanager/types';
+import { AlertManagerPicker } from '../AlertManagerPicker';
+import { useAlertManagerSourceName } from '../../hooks/useAlertManagerSourceName';
+import { updateAlertManagerConfigAction } from '../../state/actions';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { initialAsyncRequestState } from '../../utils/redux';
+import { MuteTimingFields } from '../../types/mute-timing-form';
+import { createMuteTiming, defaultTimeInterval } from '../../utils/mute-timings';
+import { makeAMLink } from '../../utils/misc';
+import { renameMuteTimings } from '../../utils/alertmanager';
+import { MuteTimingTimeInterval } from './MuteTimingTimeInterval';
+
+interface Props {
+  muteTiming?: MuteTimeInterval;
+  showError?: boolean;
+}
+
+const useDefaultValues = (muteTiming?: MuteTimeInterval): MuteTimingFields => {
+  return useMemo(() => {
+    const defaultValues = {
+      name: '',
+      time_intervals: [defaultTimeInterval],
+    };
+
+    if (!muteTiming) {
+      return defaultValues;
+    }
+
+    const intervals = muteTiming.time_intervals.map((interval) => ({
+      times: interval.times ?? defaultTimeInterval.times,
+      weekdays: interval?.weekdays?.join(', ') ?? defaultTimeInterval.weekdays,
+      days_of_month: interval?.days_of_month?.join(', ') ?? defaultTimeInterval.days_of_month,
+      months: interval?.months?.join(', ') ?? defaultTimeInterval.months,
+      years: interval?.years?.join(', ') ?? defaultTimeInterval.years,
+    }));
+
+    return {
+      name: muteTiming.name,
+      time_intervals: intervals,
+    };
+  }, [muteTiming]);
+};
+
+const MuteTimingForm = ({ muteTiming, showError }: Props) => {
+  const dispatch = useDispatch();
+  const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName();
+  const styles = useStyles2(getStyles);
+
+  const defaultAmCortexConfig = { alertmanager_config: {}, template_files: {} };
+  const amConfigs = useUnifiedAlertingSelector((state) => state.amConfigs);
+  const { result = defaultAmCortexConfig, loading } =
+    (alertManagerSourceName && amConfigs[alertManagerSourceName]) || initialAsyncRequestState;
+
+  const config: AlertmanagerConfig = result?.alertmanager_config ?? {};
+  const defaultValues = useDefaultValues(muteTiming);
+  const formApi = useForm({ defaultValues });
+
+  const onSubmit = (values: MuteTimingFields) => {
+    const newMuteTiming = createMuteTiming(values);
+
+    const muteTimings = muteTiming
+      ? config?.mute_time_intervals?.filter(({ name }) => name !== muteTiming.name)
+      : config.mute_time_intervals;
+
+    const newConfig: AlertManagerCortexConfig = {
+      ...result,
+      alertmanager_config: {
+        ...config,
+        route:
+          muteTiming && newMuteTiming.name !== muteTiming.name
+            ? renameMuteTimings(newMuteTiming.name, muteTiming.name, config.route ?? {})
+            : config.route,
+        mute_time_intervals: [...(muteTimings || []), newMuteTiming],
+      },
+    };
+
+    dispatch(
+      updateAlertManagerConfigAction({
+        newConfig,
+        oldConfig: result,
+        alertManagerSourceName: alertManagerSourceName!,
+        successMessage: 'Mute timing saved',
+        redirectPath: '/alerting/routes/',
+      })
+    );
+  };
+
+  return (
+    <AlertingPageWrapper pageId="am-routes">
+      <AlertManagerPicker current={alertManagerSourceName} onChange={setAlertManagerSourceName} disabled />
+      {result && !loading && (
+        <FormProvider {...formApi}>
+          <form onSubmit={formApi.handleSubmit(onSubmit)} data-testid="mute-timing-form">
+            {showError && <Alert title="No matching mute timing found" />}
+            <FieldSet label={'Create mute timing'}>
+              <Field
+                required
+                label="Name"
+                description="A unique name for the mute timing"
+                invalid={!!formApi.formState.errors?.name}
+                error={formApi.formState.errors.name?.message}
+              >
+                <Input
+                  {...formApi.register('name', {
+                    required: true,
+                    validate: (value) => {
+                      if (!muteTiming) {
+                        const existingMuteTiming = config?.mute_time_intervals?.find(({ name }) => value === name);
+                        return existingMuteTiming ? `Mute timing already exists for "${value}"` : true;
+                      }
+                      return value.length > 0 || 'Name is required';
+                    },
+                  })}
+                  className={styles.input}
+                  data-testid={'mute-timing-name'}
+                />
+              </Field>
+              <MuteTimingTimeInterval />
+              <LinkButton
+                type="button"
+                variant="secondary"
+                href={makeAMLink('/alerting/routes/', alertManagerSourceName)}
+              >
+                Cancel
+              </LinkButton>
+              <Button type="submit" className={styles.submitButton}>
+                {muteTiming ? 'Save' : 'Submit'}
+              </Button>
+            </FieldSet>
+          </form>
+        </FormProvider>
+      )}
+    </AlertingPageWrapper>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  input: css`
+    width: 400px;
+  `,
+  submitButton: css`
+    margin-left: ${theme.spacing(1)};
+  `,
+});
+
+export default MuteTimingForm;
diff --git a/public/app/features/alerting/unified/components/amroutes/MuteTimingTimeInterval.tsx b/public/app/features/alerting/unified/components/amroutes/MuteTimingTimeInterval.tsx
new file mode 100644
index 00000000..6d23d6be
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/MuteTimingTimeInterval.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, Input, Field, FieldSet, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { useFormContext, useFieldArray } from 'react-hook-form';
+import { DAYS_OF_THE_WEEK, MONTHS, validateArrayField, defaultTimeInterval } from '../../utils/mute-timings';
+import { MuteTimingFields } from '../../types/mute-timing-form';
+import { MuteTimingTimeRange } from './MuteTimingTimeRange';
+
+export const MuteTimingTimeInterval = () => {
+  const styles = useStyles2(getStyles);
+  const { formState, register } = useFormContext();
+  const {
+    fields: timeIntervals,
+    append: addTimeInterval,
+    remove: removeTimeInterval,
+  } = useFieldArray<MuteTimingFields>({
+    name: 'time_intervals',
+  });
+
+  return (
+    <FieldSet className={styles.timeIntervalLegend} label="Time intervals">
+      <>
+        <p>
+          A time interval is a definition for a moment in time. All fields are lists, and at least one list element must
+          be satisfied to match the field. If a field is left blank, any moment of time will match the field. For an
+          instant of time to match a complete time interval, all fields must match. A mute timing can contain multiple
+          time intervals.
+        </p>
+        {timeIntervals.map((timeInterval, timeIntervalIndex) => {
+          const errors = formState.errors;
+          return (
+            <div key={timeInterval.id} className={styles.timeIntervalSection}>
+              <MuteTimingTimeRange intervalIndex={timeIntervalIndex} />
+              <Field
+                label="Days of the week"
+                error={errors.time_intervals?.[timeIntervalIndex]?.weekdays?.message ?? ''}
+                invalid={!!errors.time_intervals?.[timeIntervalIndex]?.weekdays}
+              >
+                <Input
+                  {...register(`time_intervals.${timeIntervalIndex}.weekdays`, {
+                    validate: (value) =>
+                      validateArrayField(
+                        value,
+                        (day) => DAYS_OF_THE_WEEK.includes(day.toLowerCase()),
+                        'Invalid day of the week'
+                      ),
+                  })}
+                  className={styles.input}
+                  data-testid="mute-timing-weekdays"
+                  // @ts-ignore react-hook-form doesn't handle nested field arrays well
+                  defaultValue={timeInterval.weekdays}
+                  placeholder="Example: monday, tuesday:thursday"
+                />
+              </Field>
+              <Field
+                label="Days of the month"
+                description="The days of the month, 1-31, of a month. Negative values can be used to represent days which begin at the end of the month"
+                invalid={!!errors.time_intervals?.[timeIntervalIndex]?.days_of_month}
+                error={errors.time_intervals?.[timeIntervalIndex]?.days_of_month?.message}
+              >
+                <Input
+                  {...register(`time_intervals.${timeIntervalIndex}.days_of_month`, {
+                    validate: (value) =>
+                      validateArrayField(
+                        value,
+                        (day) => {
+                          const parsedDay = parseInt(day, 10);
+                          return (parsedDay > -31 && parsedDay < 0) || (parsedDay > 0 && parsedDay < 32);
+                        },
+                        'Invalid day'
+                      ),
+                  })}
+                  className={styles.input}
+                  // @ts-ignore react-hook-form doesn't handle nested field arrays well
+                  defaultValue={timeInterval.days_of_month}
+                  placeholder="Example: 1, 14:16, -1"
+                  data-testid="mute-timing-days"
+                />
+              </Field>
+              <Field
+                label="Months"
+                description="The months of the year in either numerical or the full calendar month"
+                invalid={!!errors.time_intervals?.[timeIntervalIndex]?.months}
+                error={errors.time_intervals?.[timeIntervalIndex]?.months?.message}
+              >
+                <Input
+                  {...register(`time_intervals.${timeIntervalIndex}.months`, {
+                    validate: (value) =>
+                      validateArrayField(
+                        value,
+                        (month) => MONTHS.includes(month) || (parseInt(month, 10) < 13 && parseInt(month, 10) > 0),
+                        'Invalid month'
+                      ),
+                  })}
+                  className={styles.input}
+                  placeholder="Example: 1:3, may:august, december"
+                  // @ts-ignore react-hook-form doesn't handle nested field arrays well
+                  defaultValue={timeInterval.months}
+                  data-testid="mute-timing-months"
+                />
+              </Field>
+              <Field
+                label="Years"
+                invalid={!!errors.time_intervals?.[timeIntervalIndex]?.years}
+                error={errors.time_intervals?.[timeIntervalIndex]?.years?.message ?? ''}
+              >
+                <Input
+                  {...register(`time_intervals.${timeIntervalIndex}.years`, {
+                    validate: (value) => validateArrayField(value, (year) => /^\d{4}$/.test(year), 'Invalid year'),
+                  })}
+                  className={styles.input}
+                  placeholder="Example: 2021:2022, 2030"
+                  // @ts-ignore react-hook-form doesn't handle nested field arrays well
+                  defaultValue={timeInterval.years}
+                  data-testid="mute-timing-years"
+                />
+              </Field>
+              <Button
+                type="button"
+                variant="destructive"
+                icon="trash-alt"
+                onClick={() => removeTimeInterval(timeIntervalIndex)}
+              >
+                Remove time interval
+              </Button>
+            </div>
+          );
+        })}
+        <Button
+          type="button"
+          variant="secondary"
+          className={styles.removeTimeIntervalButton}
+          onClick={() => {
+            addTimeInterval(defaultTimeInterval);
+          }}
+          icon="plus"
+        >
+          Add another time interval
+        </Button>
+      </>
+    </FieldSet>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  input: css`
+    width: 400px;
+  `,
+  timeIntervalLegend: css`
+    legend {
+      font-size: 1.25rem;
+    }
+  `,
+  timeIntervalSection: css`
+    background-color: ${theme.colors.background.secondary};
+    padding: ${theme.spacing(1)};
+    margin-bottom: ${theme.spacing(1)};
+  `,
+  removeTimeIntervalButton: css`
+    margin-top: ${theme.spacing(1)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/amroutes/MuteTimingTimeRange.tsx b/public/app/features/alerting/unified/components/amroutes/MuteTimingTimeRange.tsx
new file mode 100644
index 00000000..dfb1b91e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/MuteTimingTimeRange.tsx
@@ -0,0 +1,118 @@
+import React, { FC } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { MuteTimingFields } from '../../types/mute-timing-form';
+import { Field, InlineFieldRow, InlineField, Input, Button, IconButton, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+
+interface Props {
+  intervalIndex: number;
+}
+
+export const MuteTimingTimeRange: FC<Props> = ({ intervalIndex }) => {
+  const styles = useStyles2(getStyles);
+  const { register, formState } = useFormContext<MuteTimingFields>();
+
+  const { fields: timeRanges, append: addTimeRange, remove: removeTimeRange } = useFieldArray<MuteTimingFields>({
+    name: `time_intervals.${intervalIndex}.times`,
+  });
+
+  const validateTime = (timeString: string) => {
+    if (!timeString) {
+      return true;
+    }
+    const [hour, minutes] = timeString.split(':').map((x) => parseInt(x, 10));
+    const isHourValid = hour > 0 && hour < 25;
+    const isMinuteValid = minutes > -1 && minutes < 60;
+    const isTimeValid = hour === 24 ? minutes === 0 : isHourValid && isMinuteValid;
+
+    return isTimeValid || 'Time is invalid';
+  };
+
+  const formErrors = formState.errors.time_intervals?.[intervalIndex];
+  const timeRangeInvalid = formErrors?.times?.some((value) => value?.start_time || value?.end_time) ?? false;
+
+  return (
+    <div>
+      <Field
+        className={styles.field}
+        label="Time range"
+        description="The time inclusive of the starting time and exclusive of the end time in UTC"
+        invalid={timeRangeInvalid}
+        error={timeRangeInvalid ? 'Times must be between 00:00 and 24:00 UTC' : ''}
+      >
+        <>
+          {timeRanges.map((timeRange, index) => {
+            return (
+              <div className={styles.timeRange} key={timeRange.id}>
+                <InlineFieldRow>
+                  <InlineField label="Start time" invalid={!!formErrors?.times?.[index]?.start_time}>
+                    <Input
+                      {...register(`time_intervals.${intervalIndex}.times.${index}.start_time`, {
+                        validate: validateTime,
+                      })}
+                      className={styles.timeRangeInput}
+                      // @ts-ignore react-hook-form doesn't handle nested field arrays well
+                      defaultValue={timeRange.start_time}
+                      placeholder="HH:MM"
+                      data-testid="mute-timing-starts-at"
+                    />
+                  </InlineField>
+                  <InlineField label="End time" invalid={!!formErrors?.times?.[index]?.end_time}>
+                    <Input
+                      {...register(`time_intervals.${intervalIndex}.times.${index}.end_time`, {
+                        validate: validateTime,
+                      })}
+                      className={styles.timeRangeInput}
+                      // @ts-ignore react-hook-form doesn't handle nested field arrays well
+                      defaultValue={timeRange.end_time}
+                      placeholder="HH:MM"
+                      data-testid="mute-timing-ends-at"
+                    />
+                  </InlineField>
+                  <IconButton
+                    className={styles.deleteTimeRange}
+                    title={'Remove'}
+                    name={'trash-alt'}
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      removeTimeRange(index);
+                    }}
+                  />
+                </InlineFieldRow>
+              </div>
+            );
+          })}
+        </>
+      </Field>
+      <Button
+        className={styles.addTimeRange}
+        variant="secondary"
+        type="button"
+        icon={'plus'}
+        onClick={() => addTimeRange({ start_time: '', end_time: '' })}
+      >
+        Add another time range
+      </Button>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  field: css`
+    margin-bottom: 0;
+  `,
+  timeRange: css`
+    margin-bottom: ${theme.spacing(1)};
+  `,
+  timeRangeInput: css`
+    width: 120px;
+  `,
+  deleteTimeRange: css`
+    margin: ${theme.spacing(1)} 0 0 ${theme.spacing(0.5)};
+  `,
+  addTimeRange: css`
+    margin-bottom: ${theme.spacing(2)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/amroutes/MuteTimingsTable.tsx b/public/app/features/alerting/unified/components/amroutes/MuteTimingsTable.tsx
new file mode 100644
index 00000000..2c32e513
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/MuteTimingsTable.tsx
@@ -0,0 +1,145 @@
+import React, { FC, useMemo, useState } from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { IconButton, LinkButton, Link, useStyles2, ConfirmModal } from '@grafana/ui';
+import { AlertManagerCortexConfig, MuteTimeInterval, TimeInterval } from 'app/plugins/datasource/alertmanager/types';
+import { useDispatch } from 'react-redux';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { deleteMuteTimingAction } from '../../state/actions';
+import { makeAMLink } from '../../utils/misc';
+import { AsyncRequestState, initialAsyncRequestState } from '../../utils/redux';
+import { DynamicTable, DynamicTableItemProps, DynamicTableColumnProps } from '../DynamicTable';
+import {
+  getTimeString,
+  getWeekdayString,
+  getDaysOfMonthString,
+  getMonthsString,
+  getYearsString,
+} from '../../utils/alertmanager';
+
+interface Props {
+  alertManagerSourceName: string;
+  muteTimingNames?: string[];
+  hideActions?: boolean;
+}
+
+export const MuteTimingsTable: FC<Props> = ({ alertManagerSourceName, muteTimingNames, hideActions }) => {
+  const styles = useStyles2(getStyles);
+  const dispatch = useDispatch();
+  const amConfigs = useUnifiedAlertingSelector((state) => state.amConfigs);
+  const [muteTimingName, setMuteTimingName] = useState<string>('');
+  const { result }: AsyncRequestState<AlertManagerCortexConfig> =
+    (alertManagerSourceName && amConfigs[alertManagerSourceName]) || initialAsyncRequestState;
+
+  const items = useMemo((): Array<DynamicTableItemProps<MuteTimeInterval>> => {
+    const muteTimings = result?.alertmanager_config?.mute_time_intervals ?? [];
+    return muteTimings
+      .filter(({ name }) => (muteTimingNames ? muteTimingNames.includes(name) : true))
+      .map((mute) => {
+        return {
+          id: mute.name,
+          data: mute,
+        };
+      });
+  }, [result?.alertmanager_config?.mute_time_intervals, muteTimingNames]);
+
+  const columns = useColumns(alertManagerSourceName, hideActions, setMuteTimingName);
+
+  return (
+    <div>
+      {!hideActions && <h5>Mute timings</h5>}
+      {!hideActions && (
+        <p>
+          Mute timings are a named interval of time that may be referenced in the notification policy tree to mute
+          particular notification policies for specific times of the day.
+        </p>
+      )}
+      {items.length > 0 ? <DynamicTable items={items} cols={columns} /> : <p>No mute timings configured</p>}
+      {!hideActions && (
+        <ConfirmModal
+          isOpen={!!muteTimingName}
+          title="Delete mute timing"
+          body={`Are you sure you would like to delete "${muteTimingName}"`}
+          confirmText="Delete"
+          onConfirm={() => dispatch(deleteMuteTimingAction(alertManagerSourceName, muteTimingName))}
+          onDismiss={() => setMuteTimingName('')}
+        />
+      )}
+      {!hideActions && (
+        <LinkButton
+          className={styles.addMuteButton}
+          variant="secondary"
+          href={makeAMLink('alerting/routes/mute-timing/new', alertManagerSourceName)}
+        >
+          Add mute timing
+        </LinkButton>
+      )}
+    </div>
+  );
+};
+
+function useColumns(alertManagerSourceName: string, hideActions = false, setMuteTimingName: (name: string) => void) {
+  return useMemo((): Array<DynamicTableColumnProps<MuteTimeInterval>> => {
+    const columns: Array<DynamicTableColumnProps<MuteTimeInterval>> = [
+      {
+        id: 'name',
+        label: 'Name',
+        renderCell: function renderName({ data }) {
+          return data.name;
+        },
+        size: '250px',
+      },
+      {
+        id: 'timeRange',
+        label: 'Time range',
+        renderCell: ({ data }) => renderTimeIntervals(data.time_intervals),
+      },
+    ];
+    if (!hideActions) {
+      columns.push({
+        id: 'actions',
+        label: 'Actions',
+        renderCell: function renderActions({ data }) {
+          return (
+            <div>
+              <Link
+                href={makeAMLink(`/alerting/routes/mute-timing/edit`, alertManagerSourceName, { muteName: data.name })}
+              >
+                <IconButton name="edit" title="Edit mute timing" />
+              </Link>
+              <IconButton name={'trash-alt'} title="Delete mute timing" onClick={() => setMuteTimingName(data.name)} />
+            </div>
+          );
+        },
+        size: '100px',
+      });
+    }
+    return columns;
+  }, [alertManagerSourceName, hideActions, setMuteTimingName]);
+}
+
+function renderTimeIntervals(timeIntervals: TimeInterval[]) {
+  return timeIntervals.map((interval, index) => {
+    const { times, weekdays, days_of_month, months, years } = interval;
+    const timeString = getTimeString(times);
+    const weekdayString = getWeekdayString(weekdays);
+    const daysString = getDaysOfMonthString(days_of_month);
+    const monthsString = getMonthsString(months);
+    const yearsString = getYearsString(years);
+
+    return (
+      <React.Fragment key={JSON.stringify(interval) + index}>
+        {`${timeString} ${weekdayString}`}
+        <br />
+        {[daysString, monthsString, yearsString].join(' | ')}
+        <br />
+      </React.Fragment>
+    );
+  });
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  addMuteButton: css`
+    margin-top: ${theme.spacing(1)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/amroutes/formStyles.ts b/public/app/features/alerting/unified/components/amroutes/formStyles.ts
new file mode 100644
index 00000000..60cde9d1
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/formStyles.ts
@@ -0,0 +1,33 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getFormStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css`
+      align-items: center;
+      display: flex;
+      flex-flow: row nowrap;
+
+      & > * + * {
+        margin-left: ${theme.spacing(1)};
+      }
+    `,
+    input: css`
+      flex: 1;
+    `,
+    timingContainer: css`
+      max-width: ${theme.spacing(33)};
+    `,
+    smallInput: css`
+      width: ${theme.spacing(6.5)};
+    `,
+    linkText: css`
+      text-decoration: underline;
+    `,
+    collapse: css`
+      border: none;
+      background: none;
+      color: ${theme.colors.text.primary};
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/gridStyles.ts b/public/app/features/alerting/unified/components/amroutes/gridStyles.ts
new file mode 100644
index 00000000..4e39d8c6
--- /dev/null
+++ b/public/app/features/alerting/unified/components/amroutes/gridStyles.ts
@@ -0,0 +1,23 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getGridStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css`
+      display: grid;
+      font-style: ${theme.typography.fontSize};
+      grid-template-columns: ${theme.spacing(15.5)} auto;
+
+      ${theme.breakpoints.down('md')} {
+        grid-template-columns: 100%;
+      }
+    `,
+    titleCell: css`
+      color: ${theme.colors.text.primary};
+    `,
+    valueCell: css`
+      color: ${theme.colors.text.secondary};
+      margin-bottom: ${theme.spacing(1)};
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx
new file mode 100644
index 00000000..234dc3c3
--- /dev/null
+++ b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx
@@ -0,0 +1,40 @@
+import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+import React, { FC } from 'react';
+import { Alert, LinkButton, Button } from '@grafana/ui';
+import { panelToRuleFormValues } from '../../utils/rule-form';
+import { useLocation } from 'react-router-dom';
+import { urlUtil } from '@grafana/data';
+import { useAsync } from 'react-use';
+
+interface Props {
+  panel: PanelModel;
+  dashboard: DashboardModel;
+  className?: string;
+}
+
+export const NewRuleFromPanelButton: FC<Props> = ({ dashboard, panel, className }) => {
+  const { loading, value: formValues } = useAsync(() => panelToRuleFormValues(panel, dashboard), [panel, dashboard]);
+  const location = useLocation();
+  if (loading) {
+    return <Button disabled={true}>Create alert rule from this panel</Button>;
+  }
+
+  if (!formValues) {
+    return (
+      <Alert severity="info" title="No alerting capable query found">
+        Cannot create alerts from this panel because no query to an alerting capable datasource is found.
+      </Alert>
+    );
+  }
+
+  const ruleFormUrl = urlUtil.renderUrl('alerting/new', {
+    defaults: JSON.stringify(formValues),
+    returnTo: location.pathname + location.search,
+  });
+
+  return (
+    <LinkButton icon="bell" href={ruleFormUrl} className={className} data-testid="create-alert-rule-button">
+      Create alert rule from this panel
+    </LinkButton>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx b/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
new file mode 100644
index 00000000..a40c90ff
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
@@ -0,0 +1,29 @@
+import { InfoBox } from '@grafana/ui';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
+import { CloudReceiverForm } from './form/CloudReceiverForm';
+import { GrafanaReceiverForm } from './form/GrafanaReceiverForm';
+
+interface Props {
+  receiverName: string;
+  config: AlertManagerCortexConfig;
+  alertManagerSourceName: string;
+}
+
+export const EditReceiverView: FC<Props> = ({ config, receiverName, alertManagerSourceName }) => {
+  const receiver = config.alertmanager_config.receivers?.find(({ name }) => name === receiverName);
+  if (!receiver) {
+    return (
+      <InfoBox severity="error" title="Receiver not found">
+        Sorry, this receiver does not seem to exit.
+      </InfoBox>
+    );
+  }
+
+  if (alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME) {
+    return <GrafanaReceiverForm config={config} alertManagerSourceName={alertManagerSourceName} existing={receiver} />;
+  } else {
+    return <CloudReceiverForm config={config} alertManagerSourceName={alertManagerSourceName} existing={receiver} />;
+  }
+};
diff --git a/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
new file mode 100644
index 00000000..7b337ab6
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
@@ -0,0 +1,28 @@
+import { InfoBox } from '@grafana/ui';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { TemplateForm } from './TemplateForm';
+
+interface Props {
+  templateName: string;
+  config: AlertManagerCortexConfig;
+  alertManagerSourceName: string;
+}
+
+export const EditTemplateView: FC<Props> = ({ config, templateName, alertManagerSourceName }) => {
+  const template = config.template_files?.[templateName];
+  if (!template) {
+    return (
+      <InfoBox severity="error" title="Template not found">
+        Sorry, this template does not seem to exit.
+      </InfoBox>
+    );
+  }
+  return (
+    <TemplateForm
+      alertManagerSourceName={alertManagerSourceName}
+      config={config}
+      existing={{ name: templateName, content: template }}
+    />
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx
new file mode 100644
index 00000000..b7cdf82c
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx
@@ -0,0 +1,118 @@
+import { useCleanup } from 'app/core/hooks/useCleanup';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { useForm, FormProvider } from 'react-hook-form';
+import { globalConfigOptions } from '../../utils/cloud-alertmanager-notifier-types';
+import { OptionField } from './form/fields/OptionField';
+import { Alert, Button, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
+import { makeAMLink } from '../../utils/misc';
+import { useDispatch } from 'react-redux';
+import { updateAlertManagerConfigAction } from '../../state/actions';
+import { omitEmptyValues } from '../../utils/receiver-form';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { isVanillaPrometheusAlertManagerDataSource } from '../../utils/datasource';
+
+interface Props {
+  config: AlertManagerCortexConfig;
+  alertManagerSourceName: string;
+}
+
+type FormValues = Record<string, unknown>;
+
+const defaultValues: FormValues = {
+  smtp_require_tls: true,
+} as const;
+
+export const GlobalConfigForm: FC<Props> = ({ config, alertManagerSourceName }) => {
+  const dispatch = useDispatch();
+  useCleanup((state) => state.unifiedAlerting.saveAMConfig);
+  const { loading, error } = useUnifiedAlertingSelector((state) => state.saveAMConfig);
+  const readOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
+  const styles = useStyles2(getStyles);
+
+  const formAPI = useForm<FormValues>({
+    // making a copy here beacuse react-hook-form will mutate these, and break if the object is frozen. for real.
+    defaultValues: JSON.parse(
+      JSON.stringify({
+        ...defaultValues,
+        ...(config.alertmanager_config.global ?? {}),
+      })
+    ),
+  });
+
+  const {
+    handleSubmit,
+    formState: { errors },
+  } = formAPI;
+
+  const onSubmitCallback = (values: FormValues) => {
+    dispatch(
+      updateAlertManagerConfigAction({
+        newConfig: {
+          ...config,
+          alertmanager_config: {
+            ...config.alertmanager_config,
+            global: omitEmptyValues(values),
+          },
+        },
+        oldConfig: config,
+        alertManagerSourceName,
+        successMessage: 'Global config updated.',
+        redirectPath: makeAMLink('/alerting/notifications', alertManagerSourceName),
+      })
+    );
+  };
+
+  return (
+    <FormProvider {...formAPI}>
+      <form onSubmit={handleSubmit(onSubmitCallback)}>
+        <h4 className={styles.heading}>Global config</h4>
+        {error && (
+          <Alert severity="error" title="Error saving receiver">
+            {error.message || String(error)}
+          </Alert>
+        )}
+        {globalConfigOptions.map((option) => (
+          <OptionField
+            readOnly={readOnly}
+            defaultValue={defaultValues[option.propertyName]}
+            key={option.propertyName}
+            option={option}
+            error={errors[option.propertyName]}
+            pathPrefix={''}
+          />
+        ))}
+        <div>
+          <HorizontalGroup>
+            {!readOnly && (
+              <>
+                {loading && (
+                  <Button disabled={true} icon="fa fa-spinner" variant="primary">
+                    Saving...
+                  </Button>
+                )}
+                {!loading && <Button type="submit">Save global config</Button>}
+              </>
+            )}
+            <LinkButton
+              disabled={loading}
+              fill="outline"
+              variant="secondary"
+              href={makeAMLink('alerting/notifications', alertManagerSourceName)}
+            >
+              Cancel
+            </LinkButton>
+          </HorizontalGroup>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  heading: css`
+    margin: ${theme.spacing(4, 0)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/NewReceiverView.tsx b/public/app/features/alerting/unified/components/receivers/NewReceiverView.tsx
new file mode 100644
index 00000000..66a605eb
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/NewReceiverView.tsx
@@ -0,0 +1,18 @@
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
+import { CloudReceiverForm } from './form/CloudReceiverForm';
+import { GrafanaReceiverForm } from './form/GrafanaReceiverForm';
+
+interface Props {
+  config: AlertManagerCortexConfig;
+  alertManagerSourceName: string;
+}
+
+export const NewReceiverView: FC<Props> = ({ alertManagerSourceName, config }) => {
+  if (alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME) {
+    return <GrafanaReceiverForm alertManagerSourceName={alertManagerSourceName} config={config} />;
+  } else {
+    return <CloudReceiverForm alertManagerSourceName={alertManagerSourceName} config={config} />;
+  }
+};
diff --git a/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
new file mode 100644
index 00000000..fb529d34
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
@@ -0,0 +1,12 @@
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { TemplateForm } from './TemplateForm';
+
+interface Props {
+  config: AlertManagerCortexConfig;
+  alertManagerSourceName: string;
+}
+
+export const NewTemplateView: FC<Props> = ({ config, alertManagerSourceName }) => {
+  return <TemplateForm config={config} alertManagerSourceName={alertManagerSourceName} />;
+};
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx
new file mode 100644
index 00000000..7a03daa5
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx
@@ -0,0 +1,43 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, LinkButton, useStyles2 } from '@grafana/ui';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { GRAFANA_RULES_SOURCE_NAME, isVanillaPrometheusAlertManagerDataSource } from '../../utils/datasource';
+import { makeAMLink } from '../../utils/misc';
+import { ReceiversTable } from './ReceiversTable';
+import { TemplatesTable } from './TemplatesTable';
+
+interface Props {
+  config: AlertManagerCortexConfig;
+  alertManagerName: string;
+}
+
+export const ReceiversAndTemplatesView: FC<Props> = ({ config, alertManagerName }) => {
+  const isCloud = alertManagerName !== GRAFANA_RULES_SOURCE_NAME;
+  const styles = useStyles2(getStyles);
+  const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerName);
+  return (
+    <>
+      {!isVanillaAM && <TemplatesTable config={config} alertManagerName={alertManagerName} />}
+      <ReceiversTable config={config} alertManagerName={alertManagerName} />
+      {isCloud && (
+        <Alert className={styles.section} severity="info" title="Global config for contact points">
+          <p>
+            For each external Alertmanager you can define global settings, like server addresses, usernames and
+            password, for all the supported contact points.
+          </p>
+          <LinkButton href={makeAMLink('alerting/notifications/global-config', alertManagerName)} variant="secondary">
+            {isVanillaAM ? 'View global config' : 'Edit global config'}
+          </LinkButton>
+        </Alert>
+      )}
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  section: css`
+    margin-top: ${theme.spacing(4)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx
new file mode 100644
index 00000000..2b5fa298
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx
@@ -0,0 +1,52 @@
+import { css, cx } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, useStyles2 } from '@grafana/ui';
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+interface Props {
+  title: string;
+  description: string;
+  addButtonLabel: string;
+  addButtonTo: string;
+  className?: string;
+  showButton?: boolean;
+}
+
+export const ReceiversSection: FC<Props> = ({
+  className,
+  title,
+  description,
+  addButtonLabel,
+  addButtonTo,
+  children,
+  showButton = true,
+}) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      <div className={cx(styles.heading, className)}>
+        <div>
+          <h4>{title}</h4>
+          <p className={styles.description}>{description}</p>
+        </div>
+        {showButton && (
+          <Link to={addButtonTo}>
+            <Button icon="plus">{addButtonLabel}</Button>
+          </Link>
+        )}
+      </div>
+      {children}
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  heading: css`
+    display: flex;
+    justify-content: space-between;
+  `,
+  description: css`
+    color: ${theme.colors.text.secondary};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.test.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.test.tsx
new file mode 100644
index 00000000..fa439426
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.test.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  AlertManagerCortexConfig,
+  GrafanaManagedReceiverConfig,
+  Receiver,
+} from 'app/plugins/datasource/alertmanager/types';
+import { configureStore } from 'app/store/configureStore';
+import { Provider } from 'react-redux';
+import { ReceiversTable } from './ReceiversTable';
+import { fetchGrafanaNotifiersAction } from '../../state/actions';
+import { NotifierDTO, NotifierType } from 'app/types';
+import { byRole } from 'testing-library-selector';
+import { Router } from 'react-router-dom';
+import { locationService } from '@grafana/runtime';
+
+const renderReceieversTable = async (receivers: Receiver[], notifiers: NotifierDTO[]) => {
+  const config: AlertManagerCortexConfig = {
+    template_files: {},
+    alertmanager_config: {
+      receivers,
+    },
+  };
+
+  const store = configureStore();
+  await store.dispatch(fetchGrafanaNotifiersAction.fulfilled(notifiers, 'initial'));
+
+  return render(
+    <Provider store={store}>
+      <Router history={locationService.getHistory()}>
+        <ReceiversTable config={config} alertManagerName="alertmanager-1" />
+      </Router>
+    </Provider>
+  );
+};
+
+const mockGrafanaReceiver = (type: string): GrafanaManagedReceiverConfig => ({
+  type,
+  disableResolveMessage: false,
+  secureFields: {},
+  settings: {},
+  name: type,
+});
+
+const mockNotifier = (type: NotifierType, name: string): NotifierDTO => ({
+  type,
+  name,
+  description: 'its a mock',
+  heading: 'foo',
+  options: [],
+});
+
+const ui = {
+  table: byRole<HTMLTableElement>('table'),
+};
+
+describe('ReceiversTable', () => {
+  it('render receivers with grafana notifiers', async () => {
+    const receivers: Receiver[] = [
+      {
+        name: 'with receivers',
+        grafana_managed_receiver_configs: [mockGrafanaReceiver('googlechat'), mockGrafanaReceiver('sensugo')],
+      },
+      {
+        name: 'without receivers',
+        grafana_managed_receiver_configs: [],
+      },
+    ];
+
+    const notifiers: NotifierDTO[] = [mockNotifier('googlechat', 'Google Chat'), mockNotifier('sensugo', 'Sensu Go')];
+
+    await renderReceieversTable(receivers, notifiers);
+
+    const table = await ui.table.find();
+
+    const rows = table.querySelector('tbody')?.querySelectorAll('tr')!;
+    expect(rows).toHaveLength(2);
+    expect(rows[0].querySelectorAll('td')[0]).toHaveTextContent('with receivers');
+    expect(rows[0].querySelectorAll('td')[1]).toHaveTextContent('Google Chat, Sensu Go');
+    expect(rows[1].querySelectorAll('td')[0]).toHaveTextContent('without receivers');
+    expect(rows[1].querySelectorAll('td')[1].textContent).toEqual('');
+  });
+
+  it('render receivers with alertmanager notifers', async () => {
+    const receivers: Receiver[] = [
+      {
+        name: 'with receivers',
+        email_configs: [
+          {
+            to: 'domas.lapinskas@grafana.com',
+          },
+        ],
+        slack_configs: [],
+        webhook_configs: [
+          {
+            url: 'http://example.com',
+          },
+        ],
+        opsgenie_configs: [
+          {
+            foo: 'bar',
+          },
+        ],
+        foo_configs: [
+          {
+            url: 'bar',
+          },
+        ],
+      },
+      {
+        name: 'without receivers',
+      },
+    ];
+
+    await renderReceieversTable(receivers, []);
+
+    const table = await ui.table.find();
+
+    const rows = table.querySelector('tbody')?.querySelectorAll('tr')!;
+    expect(rows).toHaveLength(2);
+    expect(rows[0].querySelectorAll('td')[0]).toHaveTextContent('with receivers');
+    expect(rows[0].querySelectorAll('td')[1]).toHaveTextContent('Email, Webhook, OpsGenie, Foo');
+    expect(rows[1].querySelectorAll('td')[0]).toHaveTextContent('without receivers');
+    expect(rows[1].querySelectorAll('td')[1].textContent).toEqual('');
+  });
+});
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
new file mode 100644
index 00000000..ba453192
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
@@ -0,0 +1,167 @@
+import { Button, ConfirmModal, Modal, useStyles2 } from '@grafana/ui';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC, useMemo, useState } from 'react';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { getAlertTableStyles } from '../../styles/table';
+import { extractNotifierTypeCounts } from '../../utils/receivers';
+import { ActionIcon } from '../rules/ActionIcon';
+import { ReceiversSection } from './ReceiversSection';
+import { makeAMLink } from '../../utils/misc';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+import { isReceiverUsed } from '../../utils/alertmanager';
+import { useDispatch } from 'react-redux';
+import { deleteReceiverAction } from '../../state/actions';
+import { isVanillaPrometheusAlertManagerDataSource } from '../../utils/datasource';
+
+interface Props {
+  config: AlertManagerCortexConfig;
+  alertManagerName: string;
+}
+
+export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
+  const dispatch = useDispatch();
+  const tableStyles = useStyles2(getAlertTableStyles);
+  const styles = useStyles2(getStyles);
+  const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerName);
+  const grafanaNotifiers = useUnifiedAlertingSelector((state) => state.grafanaNotifiers);
+
+  // receiver name slated for deletion. If this is set, a confirmation modal is shown. If user approves, this receiver is deleted
+  const [receiverToDelete, setReceiverToDelete] = useState<string>();
+  const [showCannotDeleteReceiverModal, setShowCannotDeleteReceiverModal] = useState(false);
+
+  const onClickDeleteReceiver = (receiverName: string): void => {
+    if (isReceiverUsed(receiverName, config)) {
+      setShowCannotDeleteReceiverModal(true);
+    } else {
+      setReceiverToDelete(receiverName);
+    }
+  };
+
+  const deleteReceiver = () => {
+    if (receiverToDelete) {
+      dispatch(deleteReceiverAction(receiverToDelete, alertManagerName));
+    }
+    setReceiverToDelete(undefined);
+  };
+
+  const rows = useMemo(
+    () =>
+      config.alertmanager_config.receivers?.map((receiver) => ({
+        name: receiver.name,
+        types: Object.entries(extractNotifierTypeCounts(receiver, grafanaNotifiers.result ?? [])).map(
+          ([type, count]) => {
+            if (count > 1) {
+              return `${type} (${count})`;
+            }
+            return type;
+          }
+        ),
+      })) ?? [],
+    [config, grafanaNotifiers.result]
+  );
+
+  return (
+    <ReceiversSection
+      className={styles.section}
+      title="Contact points"
+      description="Define where the notifications will be sent to, for example email or Slack."
+      showButton={!isVanillaAM}
+      addButtonLabel="New contact point"
+      addButtonTo={makeAMLink('/alerting/notifications/receivers/new', alertManagerName)}
+    >
+      <table className={tableStyles.table} data-testid="receivers-table">
+        <colgroup>
+          <col />
+          <col />
+          <col />
+        </colgroup>
+        <thead>
+          <tr>
+            <th>Contact point name</th>
+            <th>Type</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {!rows.length && (
+            <tr className={tableStyles.evenRow}>
+              <td colSpan={3}>No receivers defined.</td>
+            </tr>
+          )}
+          {rows.map((receiver, idx) => (
+            <tr key={receiver.name} className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
+              <td>{receiver.name}</td>
+              <td>{receiver.types.join(', ')}</td>
+              <td className={tableStyles.actionsCell}>
+                {!isVanillaAM && (
+                  <>
+                    <ActionIcon
+                      aria-label="Edit"
+                      data-testid="edit"
+                      to={makeAMLink(
+                        `/alerting/notifications/receivers/${encodeURIComponent(receiver.name)}/edit`,
+                        alertManagerName
+                      )}
+                      tooltip="Edit contact point"
+                      icon="pen"
+                    />
+                    <ActionIcon
+                      onClick={() => onClickDeleteReceiver(receiver.name)}
+                      tooltip="Delete contact point"
+                      icon="trash-alt"
+                    />
+                  </>
+                )}
+                {isVanillaAM && (
+                  <ActionIcon
+                    data-testid="view"
+                    to={makeAMLink(
+                      `/alerting/notifications/receivers/${encodeURIComponent(receiver.name)}/edit`,
+                      alertManagerName
+                    )}
+                    tooltip="View contact point"
+                    icon="file-alt"
+                  />
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {!!showCannotDeleteReceiverModal && (
+        <Modal
+          isOpen={true}
+          title="Cannot delete contact point"
+          onDismiss={() => setShowCannotDeleteReceiverModal(false)}
+        >
+          <p>
+            Contact point cannot be deleted because it is used in more policies. Please update or delete these policies
+            first.
+          </p>
+          <Modal.ButtonRow>
+            <Button variant="secondary" onClick={() => setShowCannotDeleteReceiverModal(false)} fill="outline">
+              Close
+            </Button>
+          </Modal.ButtonRow>
+        </Modal>
+      )}
+      {!!receiverToDelete && (
+        <ConfirmModal
+          isOpen={true}
+          title="Delete contact point"
+          body={`Are you sure you want to delete contact point "${receiverToDelete}"?`}
+          confirmText="Yes, delete"
+          onConfirm={deleteReceiver}
+          onDismiss={() => setReceiverToDelete(undefined)}
+        />
+      )}
+    </ReceiversSection>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  section: css`
+    margin-top: ${theme.spacing(4)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
new file mode 100644
index 00000000..073759a5
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -0,0 +1,181 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, Button, Field, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
+import { useCleanup } from 'app/core/hooks/useCleanup';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { useForm, Validate } from 'react-hook-form';
+import { useDispatch } from 'react-redux';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { updateAlertManagerConfigAction } from '../../state/actions';
+import { makeAMLink } from '../../utils/misc';
+import { ensureDefine } from '../../utils/templates';
+
+interface Values {
+  name: string;
+  content: string;
+}
+
+const defaults: Values = Object.freeze({
+  name: '',
+  content: '',
+});
+
+interface Props {
+  existing?: Values;
+  config: AlertManagerCortexConfig;
+  alertManagerSourceName: string;
+}
+
+export const TemplateForm: FC<Props> = ({ existing, alertManagerSourceName, config }) => {
+  const styles = useStyles2(getStyles);
+  const dispatch = useDispatch();
+
+  useCleanup((state) => state.unifiedAlerting.saveAMConfig);
+
+  const { loading, error } = useUnifiedAlertingSelector((state) => state.saveAMConfig);
+
+  const submit = (values: Values) => {
+    // wrap content in "define" if it's not already wrapped, in case user did not do it/
+    // it's not obvious that this is needed for template to work
+    const content = ensureDefine(values.name, values.content);
+
+    // add new template to template map
+    const template_files = {
+      ...config.template_files,
+      [values.name]: content,
+    };
+
+    // delete existing one (if name changed, otherwise it was overwritten in previous step)
+    if (existing && existing.name !== values.name) {
+      delete template_files[existing.name];
+    }
+
+    // make sure name for the template is configured on the alertmanager config object
+    const templates = [
+      ...(config.alertmanager_config.templates ?? []).filter((name) => name !== existing?.name),
+      values.name,
+    ];
+
+    const newConfig: AlertManagerCortexConfig = {
+      template_files,
+      alertmanager_config: {
+        ...config.alertmanager_config,
+        templates,
+      },
+    };
+    dispatch(
+      updateAlertManagerConfigAction({
+        alertManagerSourceName,
+        newConfig,
+        oldConfig: config,
+        successMessage: 'Template saved.',
+        redirectPath: '/alerting/notifications',
+      })
+    );
+  };
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<Values>({
+    mode: 'onSubmit',
+    defaultValues: existing ?? defaults,
+  });
+
+  const validateNameIsUnique: Validate<string> = (name: string) => {
+    return !config.template_files[name] || existing?.name === name
+      ? true
+      : 'Another template with this name already exists.';
+  };
+
+  return (
+    <form onSubmit={handleSubmit(submit)}>
+      <h4>{existing ? 'Edit message template' : 'Create message template'}</h4>
+      {error && (
+        <Alert severity="error" title="Error saving template">
+          {error.message || (error as any)?.data?.message || String(error)}
+        </Alert>
+      )}
+      <Field label="Template name" error={errors?.name?.message} invalid={!!errors.name?.message} required>
+        <Input
+          {...register('name', {
+            required: { value: true, message: 'Required.' },
+            validate: { nameIsUnique: validateNameIsUnique },
+          })}
+          placeholder="Give your template a name"
+          width={42}
+          autoFocus={true}
+        />
+      </Field>
+      <Field
+        description={
+          <>
+            You can use the{' '}
+            <a
+              href="https://pkg.go.dev/text/template?utm_source=godoc"
+              target="__blank"
+              rel="noreferrer"
+              className={styles.externalLink}
+            >
+              Go templating language
+            </a>
+            .{' '}
+            <a
+              href="https://prometheus.io/blog/2016/03/03/custom-alertmanager-templates/"
+              target="__blank"
+              rel="noreferrer"
+              className={styles.externalLink}
+            >
+              More info about alertmanager templates
+            </a>
+          </>
+        }
+        label="Content"
+        error={errors?.content?.message}
+        invalid={!!errors.content?.message}
+        required
+      >
+        <TextArea
+          {...register('content', { required: { value: true, message: 'Required.' } })}
+          className={styles.textarea}
+          placeholder="Message"
+          rows={12}
+        />
+      </Field>
+      <div className={styles.buttons}>
+        {loading && (
+          <Button disabled={true} icon="fa fa-spinner" variant="primary">
+            Saving...
+          </Button>
+        )}
+        {!loading && <Button variant="primary">Save template</Button>}
+        <LinkButton
+          disabled={loading}
+          href={makeAMLink('alerting/notifications', alertManagerSourceName)}
+          variant="secondary"
+          type="button"
+          fill="outline"
+        >
+          Cancel
+        </LinkButton>
+      </div>
+    </form>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  externalLink: css`
+    color: ${theme.colors.text.secondary};
+    text-decoration: underline;
+  `,
+  buttons: css`
+    & > * + * {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+  textarea: css`
+    max-width: 758px;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
new file mode 100644
index 00000000..48f9d83b
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
@@ -0,0 +1,111 @@
+import { ConfirmModal, useStyles2 } from '@grafana/ui';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC, Fragment, useMemo, useState } from 'react';
+import { getAlertTableStyles } from '../../styles/table';
+import { CollapseToggle } from '../CollapseToggle';
+import { DetailsField } from '../DetailsField';
+import { ActionIcon } from '../rules/ActionIcon';
+import { ReceiversSection } from './ReceiversSection';
+import { makeAMLink } from '../../utils/misc';
+import { useDispatch } from 'react-redux';
+import { deleteTemplateAction } from '../../state/actions';
+
+interface Props {
+  config: AlertManagerCortexConfig;
+  alertManagerName: string;
+}
+
+export const TemplatesTable: FC<Props> = ({ config, alertManagerName }) => {
+  const dispatch = useDispatch();
+  const [expandedTemplates, setExpandedTemplates] = useState<Record<string, boolean>>({});
+  const tableStyles = useStyles2(getAlertTableStyles);
+
+  const templateRows = useMemo(() => Object.entries(config.template_files), [config]);
+  const [templateToDelete, setTemplateToDelete] = useState<string>();
+
+  const deleteTemplate = () => {
+    if (templateToDelete) {
+      dispatch(deleteTemplateAction(templateToDelete, alertManagerName));
+    }
+    setTemplateToDelete(undefined);
+  };
+
+  return (
+    <ReceiversSection
+      title="Message templates"
+      description="Templates construct the messages that get sent to the contact points."
+      addButtonLabel="New template"
+      addButtonTo={makeAMLink('/alerting/notifications/templates/new', alertManagerName)}
+    >
+      <table className={tableStyles.table} data-testid="templates-table">
+        <colgroup>
+          <col className={tableStyles.colExpand} />
+          <col />
+          <col />
+        </colgroup>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Template</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {!templateRows.length && (
+            <tr className={tableStyles.evenRow}>
+              <td colSpan={3}>No templates defined.</td>
+            </tr>
+          )}
+          {templateRows.map(([name, content], idx) => {
+            const isExpanded = !!expandedTemplates[name];
+            return (
+              <Fragment key={name}>
+                <tr key={name} className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
+                  <td>
+                    <CollapseToggle
+                      isCollapsed={!expandedTemplates[name]}
+                      onToggle={() => setExpandedTemplates({ ...expandedTemplates, [name]: !isExpanded })}
+                    />
+                  </td>
+                  <td>{name}</td>
+                  <td className={tableStyles.actionsCell}>
+                    <ActionIcon
+                      to={makeAMLink(
+                        `/alerting/notifications/templates/${encodeURIComponent(name)}/edit`,
+                        alertManagerName
+                      )}
+                      tooltip="edit template"
+                      icon="pen"
+                    />
+                    <ActionIcon onClick={() => setTemplateToDelete(name)} tooltip="delete template" icon="trash-alt" />
+                  </td>
+                </tr>
+                {isExpanded && (
+                  <tr className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
+                    <td></td>
+                    <td colSpan={2}>
+                      <DetailsField label="Description" horizontal={true}>
+                        <pre>{content}</pre>
+                      </DetailsField>
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+
+      {!!templateToDelete && (
+        <ConfirmModal
+          isOpen={true}
+          title="Delete template"
+          body={`Are you sure you want to delete template "${templateToDelete}"?`}
+          confirmText="Yes, delete"
+          onConfirm={deleteTemplate}
+          onDismiss={() => setTemplateToDelete(undefined)}
+        />
+      )}
+    </ReceiversSection>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx
new file mode 100644
index 00000000..75ee9c47
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { Button, Field, Input } from '@grafana/ui';
+import { OptionField } from './fields/OptionField';
+import { ChannelValues, ReceiverFormValues } from '../../../types/receiver-form';
+import { useFormContext, FieldError, FieldErrors, DeepMap } from 'react-hook-form';
+import { NotificationChannelOption, NotificationChannelSecureFields } from 'app/types';
+
+export interface Props<R extends ChannelValues> {
+  defaultValues: R;
+  selectedChannelOptions: NotificationChannelOption[];
+  secureFields: NotificationChannelSecureFields;
+
+  onResetSecureField: (key: string) => void;
+  errors?: FieldErrors<R>;
+  pathPrefix?: string;
+  readOnly?: boolean;
+}
+
+export function ChannelOptions<R extends ChannelValues>({
+  defaultValues,
+  selectedChannelOptions,
+  onResetSecureField,
+  secureFields,
+  errors,
+  pathPrefix = '',
+  readOnly = false,
+}: Props<R>): JSX.Element {
+  const { watch } = useFormContext<ReceiverFormValues<R>>();
+  const currentFormValues = watch() as Record<string, any>; // react hook form types ARE LYING!
+  return (
+    <>
+      {selectedChannelOptions.map((option: NotificationChannelOption, index: number) => {
+        const key = `${option.label}-${index}`;
+        // Some options can be dependent on other options, this determines what is selected in the dependency options
+        // I think this needs more thought.
+        const selectedOptionValue = currentFormValues[`${pathPrefix}settings.${option.showWhen.field}`];
+
+        if (option.showWhen.field && selectedOptionValue !== option.showWhen.is) {
+          return null;
+        }
+
+        if (secureFields && secureFields[option.propertyName]) {
+          return (
+            <Field key={key} label={option.label} description={option.description || undefined}>
+              <Input
+                readOnly={true}
+                value="Configured"
+                suffix={
+                  readOnly ? null : (
+                    <Button
+                      onClick={() => onResetSecureField(option.propertyName)}
+                      variant="link"
+                      type="button"
+                      size="sm"
+                    >
+                      Clear
+                    </Button>
+                  )
+                }
+              />
+            </Field>
+          );
+        }
+
+        const error: FieldError | DeepMap<any, FieldError> | undefined = ((option.secure
+          ? errors?.secureSettings
+          : errors?.settings) as DeepMap<any, FieldError> | undefined)?.[option.propertyName];
+
+        const defaultValue = defaultValues?.settings?.[option.propertyName];
+
+        return (
+          <OptionField
+            defaultValue={defaultValue}
+            readOnly={readOnly}
+            key={key}
+            error={error}
+            pathPrefix={option.secure ? `${pathPrefix}secureSettings.` : `${pathPrefix}settings.`}
+            option={option}
+          />
+        );
+      })}
+    </>
+  );
+}
diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
new file mode 100644
index 00000000..e8a79e09
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
@@ -0,0 +1,194 @@
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { NotifierDTO } from 'app/types';
+import React, { useEffect, useMemo, useState } from 'react';
+import { css } from '@emotion/css';
+import { Alert, Button, Field, InputControl, Select, useStyles2 } from '@grafana/ui';
+import { useFormContext, FieldErrors } from 'react-hook-form';
+import { ChannelValues, CommonSettingsComponentType } from '../../../types/receiver-form';
+import { ChannelOptions } from './ChannelOptions';
+import { CollapsibleSection } from './CollapsibleSection';
+import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
+
+interface Props<R> {
+  defaultValues: R;
+  pathPrefix: string;
+  notifiers: NotifierDTO[];
+  onDuplicate: () => void;
+  onTest?: () => void;
+  commonSettingsComponent: CommonSettingsComponentType;
+
+  secureFields?: Record<string, boolean>;
+  errors?: FieldErrors<R>;
+  onDelete?: () => void;
+  readOnly?: boolean;
+}
+
+export function ChannelSubForm<R extends ChannelValues>({
+  defaultValues,
+  pathPrefix,
+  onDuplicate,
+  onDelete,
+  onTest,
+  notifiers,
+  errors,
+  secureFields,
+  commonSettingsComponent: CommonSettingsComponent,
+  readOnly = false,
+}: Props<R>): JSX.Element {
+  const styles = useStyles2(getStyles);
+  const name = (fieldName: string) => `${pathPrefix}${fieldName}`;
+  const { control, watch, register } = useFormContext();
+  const selectedType = watch(name('type')) ?? defaultValues.type; // nope, setting "default" does not work at all.
+  const { loading: testingReceiver } = useUnifiedAlertingSelector((state) => state.testReceivers);
+
+  useEffect(() => {
+    register(`${pathPrefix}.__id`);
+  }, [register, pathPrefix]);
+
+  const [_secureFields, setSecureFields] = useState(secureFields ?? {});
+
+  const onResetSecureField = (key: string) => {
+    if (_secureFields[key]) {
+      const updatedSecureFields = { ...secureFields };
+      delete updatedSecureFields[key];
+      setSecureFields(updatedSecureFields);
+    }
+  };
+
+  const typeOptions = useMemo(
+    (): SelectableValue[] =>
+      notifiers
+        .map(({ name, type }) => ({
+          label: name,
+          value: type,
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [notifiers]
+  );
+
+  const notifier = notifiers.find(({ type }) => type === selectedType);
+  // if there are mandatory options defined, optional options will be hidden by a collapse
+  // if there aren't mandatory options, all options will be shown without collapse
+  const mandatoryOptions = notifier?.options.filter((o) => o.required);
+  const optionalOptions = notifier?.options.filter((o) => !o.required);
+
+  const contactPointTypeInputId = `contact-point-type-${pathPrefix}`;
+  return (
+    <div className={styles.wrapper} data-testid="item-container">
+      <div className={styles.topRow}>
+        <div>
+          <Field label="Contact point type" htmlFor={contactPointTypeInputId} data-testid={`${pathPrefix}type`}>
+            <InputControl
+              name={name('type')}
+              defaultValue={defaultValues.type}
+              render={({ field: { ref, onChange, ...field } }) => (
+                <Select
+                  disabled={readOnly}
+                  inputId={contactPointTypeInputId}
+                  menuShouldPortal
+                  {...field}
+                  width={37}
+                  options={typeOptions}
+                  onChange={(value) => onChange(value?.value)}
+                />
+              )}
+              control={control}
+              rules={{ required: true }}
+            />
+          </Field>
+        </div>
+        {!readOnly && (
+          <div className={styles.buttons}>
+            {onTest && (
+              <Button
+                disabled={testingReceiver}
+                size="xs"
+                variant="secondary"
+                type="button"
+                onClick={() => onTest()}
+                icon={testingReceiver ? 'fa fa-spinner' : 'message'}
+              >
+                Test
+              </Button>
+            )}
+            <Button size="xs" variant="secondary" type="button" onClick={() => onDuplicate()} icon="copy">
+              Duplicate
+            </Button>
+            {onDelete && (
+              <Button
+                data-testid={`${pathPrefix}delete-button`}
+                size="xs"
+                variant="secondary"
+                type="button"
+                onClick={() => onDelete()}
+                icon="trash-alt"
+              >
+                Delete
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+      {notifier && (
+        <div className={styles.innerContent}>
+          <ChannelOptions<R>
+            defaultValues={defaultValues}
+            selectedChannelOptions={mandatoryOptions?.length ? mandatoryOptions! : optionalOptions!}
+            secureFields={_secureFields}
+            errors={errors}
+            onResetSecureField={onResetSecureField}
+            pathPrefix={pathPrefix}
+            readOnly={readOnly}
+          />
+          {!!(mandatoryOptions?.length && optionalOptions?.length) && (
+            <CollapsibleSection label={`Optional ${notifier.name} settings`}>
+              {notifier.info !== '' && (
+                <Alert title="" severity="info">
+                  {notifier.info}
+                </Alert>
+              )}
+              <ChannelOptions<R>
+                defaultValues={defaultValues}
+                selectedChannelOptions={optionalOptions!}
+                secureFields={_secureFields}
+                onResetSecureField={onResetSecureField}
+                errors={errors}
+                pathPrefix={pathPrefix}
+                readOnly={readOnly}
+              />
+            </CollapsibleSection>
+          )}
+          <CollapsibleSection label="Notification settings">
+            <CommonSettingsComponent pathPrefix={pathPrefix} readOnly={readOnly} />
+          </CollapsibleSection>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  buttons: css`
+    & > * + * {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+  innerContent: css`
+    max-width: 536px;
+  `,
+  wrapper: css`
+    margin: ${theme.spacing(2, 0)};
+    padding: ${theme.spacing(1)};
+    border: solid 1px ${theme.colors.border.medium};
+    border-radius: ${theme.shape.borderRadius(1)};
+    max-width: ${theme.breakpoints.values.xl}${theme.breakpoints.unit};
+  `,
+  topRow: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  `,
+  channelSettingsHeader: css`
+    margin-top: ${theme.spacing(2)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/form/CloudCommonChannelSettings.tsx b/public/app/features/alerting/unified/components/receivers/form/CloudCommonChannelSettings.tsx
new file mode 100644
index 00000000..53e48f12
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/CloudCommonChannelSettings.tsx
@@ -0,0 +1,24 @@
+import { Checkbox, Field } from '@grafana/ui';
+import React, { FC } from 'react';
+import { CommonSettingsComponentProps } from '../../../types/receiver-form';
+import { useFormContext } from 'react-hook-form';
+
+export const CloudCommonChannelSettings: FC<CommonSettingsComponentProps> = ({
+  pathPrefix,
+  className,
+  readOnly = false,
+}) => {
+  const { register } = useFormContext();
+  return (
+    <div className={className}>
+      <Field disabled={readOnly}>
+        <Checkbox
+          {...register(`${pathPrefix}sendResolved`)}
+          label="Send resolved"
+          disabled={readOnly}
+          description="Whether or not to notify about resolved alerts."
+        />
+      </Field>
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
new file mode 100644
index 00000000..c78aa7f0
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
@@ -0,0 +1,82 @@
+import { Alert } from '@grafana/ui';
+import { AlertManagerCortexConfig, Receiver } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { updateAlertManagerConfigAction } from '../../../state/actions';
+import { CloudChannelValues, ReceiverFormValues, CloudChannelMap } from '../../../types/receiver-form';
+import { cloudNotifierTypes } from '../../../utils/cloud-alertmanager-notifier-types';
+import { isVanillaPrometheusAlertManagerDataSource } from '../../../utils/datasource';
+import { makeAMLink } from '../../../utils/misc';
+import {
+  cloudReceiverToFormValues,
+  formValuesToCloudReceiver,
+  updateConfigWithReceiver,
+} from '../../../utils/receiver-form';
+import { CloudCommonChannelSettings } from './CloudCommonChannelSettings';
+import { ReceiverForm } from './ReceiverForm';
+
+interface Props {
+  alertManagerSourceName: string;
+  config: AlertManagerCortexConfig;
+  existing?: Receiver;
+}
+
+const defaultChannelValues: CloudChannelValues = Object.freeze({
+  __id: '',
+  sendResolved: true,
+  secureSettings: {},
+  settings: {},
+  secureFields: {},
+  type: 'email',
+});
+
+export const CloudReceiverForm: FC<Props> = ({ existing, alertManagerSourceName, config }) => {
+  const dispatch = useDispatch();
+  const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
+
+  // transform receiver DTO to form values
+  const [existingValue] = useMemo((): [ReceiverFormValues<CloudChannelValues> | undefined, CloudChannelMap] => {
+    if (!existing) {
+      return [undefined, {}];
+    }
+    return cloudReceiverToFormValues(existing, cloudNotifierTypes);
+  }, [existing]);
+
+  const onSubmit = (values: ReceiverFormValues<CloudChannelValues>) => {
+    const newReceiver = formValuesToCloudReceiver(values, defaultChannelValues);
+    dispatch(
+      updateAlertManagerConfigAction({
+        newConfig: updateConfigWithReceiver(config, newReceiver, existing?.name),
+        oldConfig: config,
+        alertManagerSourceName,
+        successMessage: existing ? 'Contact point updated.' : 'Contact point created.',
+        redirectPath: makeAMLink('/alerting/notifications', alertManagerSourceName),
+      })
+    );
+  };
+
+  const takenReceiverNames = useMemo(
+    () => config.alertmanager_config.receivers?.map(({ name }) => name).filter((name) => name !== existing?.name) ?? [],
+    [config, existing]
+  );
+
+  return (
+    <>
+      {!isVanillaAM && (
+        <Alert title="Info" severity="info">
+          Note that empty string values will be replaced with global defaults were appropriate.
+        </Alert>
+      )}
+      <ReceiverForm<CloudChannelValues>
+        config={config}
+        onSubmit={onSubmit}
+        initialValues={existingValue}
+        notifiers={cloudNotifierTypes}
+        alertManagerSourceName={alertManagerSourceName}
+        defaultItem={defaultChannelValues}
+        takenReceiverNames={takenReceiverNames}
+        commonSettingsComponent={CloudCommonChannelSettings}
+      />
+    </>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
new file mode 100644
index 00000000..16a1470f
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
@@ -0,0 +1,53 @@
+import { css, cx } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, useStyles2 } from '@grafana/ui';
+import React, { FC, useState } from 'react';
+
+interface Props {
+  label: string;
+  description?: string;
+  className?: string;
+}
+
+export const CollapsibleSection: FC<Props> = ({ label, description, children, className }) => {
+  const styles = useStyles2(getStyles);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
+
+  return (
+    <div className={cx(styles.wrapper, className)}>
+      <div className={styles.heading} onClick={toggleCollapse}>
+        <Icon className={styles.caret} size="xl" name={isCollapsed ? 'angle-right' : 'angle-down'} />
+        <h6>{label}</h6>
+      </div>
+      {description && <p className={styles.description}>{description}</p>}
+      <div className={isCollapsed ? styles.hidden : undefined}>{children}</div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    margin-top: ${theme.spacing(1)};
+    padding-bottom: ${theme.spacing(1)};
+  `,
+  caret: css`
+    margin-left: -${theme.spacing(0.5)}; // make it align with fields despite icon size
+  `,
+  heading: css`
+    cursor: pointer;
+    h6 {
+      display: inline-block;
+    }
+  `,
+  hidden: css`
+    display: none;
+  `,
+  description: css`
+    color: ${theme.colors.text.secondary};
+    font-size: ${theme.typography.size.sm};
+    font-weight: ${theme.typography.fontWeightRegular};
+    margin: 0;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx b/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
new file mode 100644
index 00000000..1fa79e29
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
@@ -0,0 +1,19 @@
+import { Checkbox, Field } from '@grafana/ui';
+import React, { FC } from 'react';
+import { CommonSettingsComponentProps } from '../../../types/receiver-form';
+import { useFormContext } from 'react-hook-form';
+
+export const GrafanaCommonChannelSettings: FC<CommonSettingsComponentProps> = ({ pathPrefix, className }) => {
+  const { register } = useFormContext();
+  return (
+    <div className={className}>
+      <Field>
+        <Checkbox
+          {...register(`${pathPrefix}disableResolveMessage`)}
+          label="Disable resolved message"
+          description="Disable the resolve message [OK] that is sent when alerting state returns to false"
+        />
+      </Field>
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
new file mode 100644
index 00000000..36528ceb
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
@@ -0,0 +1,132 @@
+import { LoadingPlaceholder } from '@grafana/ui';
+import {
+  AlertManagerCortexConfig,
+  GrafanaManagedReceiverConfig,
+  Receiver,
+  TestReceiversAlert,
+} from 'app/plugins/datasource/alertmanager/types';
+import React, { FC, useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
+import {
+  fetchGrafanaNotifiersAction,
+  testReceiversAction,
+  updateAlertManagerConfigAction,
+} from '../../../state/actions';
+import { GrafanaChannelValues, ReceiverFormValues } from '../../../types/receiver-form';
+import { GRAFANA_RULES_SOURCE_NAME } from '../../../utils/datasource';
+import {
+  formChannelValuesToGrafanaChannelConfig,
+  formValuesToGrafanaReceiver,
+  grafanaReceiverToFormValues,
+  updateConfigWithReceiver,
+} from '../../../utils/receiver-form';
+import { GrafanaCommonChannelSettings } from './GrafanaCommonChannelSettings';
+import { ReceiverForm } from './ReceiverForm';
+import { TestContactPointModal } from './TestContactPointModal';
+
+interface Props {
+  alertManagerSourceName: string;
+  config: AlertManagerCortexConfig;
+  existing?: Receiver;
+}
+
+const defaultChannelValues: GrafanaChannelValues = Object.freeze({
+  __id: '',
+  secureSettings: {},
+  settings: {},
+  secureFields: {},
+  disableResolveMessage: false,
+  type: 'email',
+});
+
+export const GrafanaReceiverForm: FC<Props> = ({ existing, alertManagerSourceName, config }) => {
+  const grafanaNotifiers = useUnifiedAlertingSelector((state) => state.grafanaNotifiers);
+  const [testChannelValues, setTestChannelValues] = useState<GrafanaChannelValues>();
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!(grafanaNotifiers.result || grafanaNotifiers.loading)) {
+      dispatch(fetchGrafanaNotifiersAction());
+    }
+  }, [grafanaNotifiers, dispatch]);
+
+  // transform receiver DTO to form values
+  const [existingValue, id2original] = useMemo((): [
+    ReceiverFormValues<GrafanaChannelValues> | undefined,
+    Record<string, GrafanaManagedReceiverConfig>
+  ] => {
+    if (!existing || !grafanaNotifiers.result) {
+      return [undefined, {}];
+    }
+    return grafanaReceiverToFormValues(existing, grafanaNotifiers.result!);
+  }, [existing, grafanaNotifiers.result]);
+
+  const onSubmit = (values: ReceiverFormValues<GrafanaChannelValues>) => {
+    const newReceiver = formValuesToGrafanaReceiver(values, id2original, defaultChannelValues);
+    dispatch(
+      updateAlertManagerConfigAction({
+        newConfig: updateConfigWithReceiver(config, newReceiver, existing?.name),
+        oldConfig: config,
+        alertManagerSourceName: GRAFANA_RULES_SOURCE_NAME,
+        successMessage: existing ? 'Contact point updated.' : 'Contact point created',
+        redirectPath: '/alerting/notifications',
+      })
+    );
+  };
+
+  const onTestChannel = (values: GrafanaChannelValues) => {
+    setTestChannelValues(values);
+  };
+
+  const testNotification = (alert?: TestReceiversAlert) => {
+    if (testChannelValues) {
+      const existing: GrafanaManagedReceiverConfig | undefined = id2original[testChannelValues.__id];
+      const chan = formChannelValuesToGrafanaChannelConfig(testChannelValues, defaultChannelValues, 'test', existing);
+
+      const payload = {
+        alertManagerSourceName,
+        receivers: [
+          {
+            name: 'test',
+            grafana_managed_receiver_configs: [chan],
+          },
+        ],
+        alert,
+      };
+
+      dispatch(testReceiversAction(payload));
+    }
+  };
+
+  const takenReceiverNames = useMemo(
+    () => config.alertmanager_config.receivers?.map(({ name }) => name).filter((name) => name !== existing?.name) ?? [],
+    [config, existing]
+  );
+
+  if (grafanaNotifiers.result) {
+    return (
+      <>
+        <ReceiverForm<GrafanaChannelValues>
+          config={config}
+          onSubmit={onSubmit}
+          initialValues={existingValue}
+          onTestChannel={onTestChannel}
+          notifiers={grafanaNotifiers.result}
+          alertManagerSourceName={alertManagerSourceName}
+          defaultItem={defaultChannelValues}
+          takenReceiverNames={takenReceiverNames}
+          commonSettingsComponent={GrafanaCommonChannelSettings}
+        />
+        <TestContactPointModal
+          onDismiss={() => setTestChannelValues(undefined)}
+          isOpen={!!testChannelValues}
+          onTest={(alert) => testNotification(alert)}
+        />
+      </>
+    );
+  } else {
+    return <LoadingPlaceholder text="Loading notifiers..." />;
+  }
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
new file mode 100644
index 00000000..516986bb
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
@@ -0,0 +1,194 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2, AppEvents } from '@grafana/data';
+import { Alert, Button, Field, Input, LinkButton, useStyles2 } from '@grafana/ui';
+import { useCleanup } from 'app/core/hooks/useCleanup';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+import { NotifierDTO } from 'app/types';
+import React, { useCallback } from 'react';
+import { useForm, FormProvider, FieldErrors, Validate } from 'react-hook-form';
+import { useControlledFieldArray } from '../../../hooks/useControlledFieldArray';
+import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
+import { ChannelValues, CommonSettingsComponentType, ReceiverFormValues } from '../../../types/receiver-form';
+import { makeAMLink } from '../../../utils/misc';
+import { ChannelSubForm } from './ChannelSubForm';
+import { DeletedSubForm } from './fields/DeletedSubform';
+import { appEvents } from 'app/core/core';
+import { isVanillaPrometheusAlertManagerDataSource } from '../../../utils/datasource';
+
+interface Props<R extends ChannelValues> {
+  config: AlertManagerCortexConfig;
+  notifiers: NotifierDTO[];
+  defaultItem: R;
+  alertManagerSourceName: string;
+  onTestChannel?: (channel: R) => void;
+  onSubmit: (values: ReceiverFormValues<R>) => void;
+  takenReceiverNames: string[]; // will validate that user entered receiver name is not one of these
+  commonSettingsComponent: CommonSettingsComponentType;
+  initialValues?: ReceiverFormValues<R>;
+}
+
+export function ReceiverForm<R extends ChannelValues>({
+  config,
+  initialValues,
+  defaultItem,
+  notifiers,
+  alertManagerSourceName,
+  onSubmit,
+  onTestChannel,
+  takenReceiverNames,
+  commonSettingsComponent,
+}: Props<R>): JSX.Element {
+  const styles = useStyles2(getStyles);
+  const readOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
+  const defaultValues = initialValues || {
+    name: '',
+    items: [
+      {
+        ...defaultItem,
+        __id: String(Math.random()),
+      } as any,
+    ],
+  };
+
+  const formAPI = useForm<ReceiverFormValues<R>>({
+    // making a copy here beacuse react-hook-form will mutate these, and break if the object is frozen. for real.
+    defaultValues: JSON.parse(JSON.stringify(defaultValues)),
+  });
+
+  useCleanup((state) => state.unifiedAlerting.saveAMConfig);
+
+  const { loading } = useUnifiedAlertingSelector((state) => state.saveAMConfig);
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+    getValues,
+  } = formAPI;
+
+  const { fields, append, remove } = useControlledFieldArray<R>({ name: 'items', formAPI, softDelete: true });
+
+  const validateNameIsAvailable: Validate<string> = useCallback(
+    (name: string) =>
+      takenReceiverNames.map((name) => name.trim().toLowerCase()).includes(name.trim().toLowerCase())
+        ? 'Another receiver with this name already exists.'
+        : true,
+    [takenReceiverNames]
+  );
+
+  const submitCallback = (values: ReceiverFormValues<R>) => {
+    onSubmit({
+      ...values,
+      items: values.items.filter((item) => !item.__deleted),
+    });
+  };
+
+  const onInvalid = () => {
+    appEvents.emit(AppEvents.alertError, ['There are errors in the form. Please correct them and try again!']);
+  };
+
+  return (
+    <FormProvider {...formAPI}>
+      {!config.alertmanager_config.route && (
+        <Alert severity="warning" title="Attention">
+          Because there is no default policy configured yet, this contact point will automatically be set as default.
+        </Alert>
+      )}
+      <form onSubmit={handleSubmit(submitCallback, onInvalid)}>
+        <h4 className={styles.heading}>
+          {readOnly ? 'Contact point' : initialValues ? 'Update contact point' : 'Create contact point'}
+        </h4>
+        <Field label="Name" invalid={!!errors.name} error={errors.name && errors.name.message} required>
+          <Input
+            readOnly={readOnly}
+            id="name"
+            {...register('name', {
+              required: 'Name is required',
+              validate: { nameIsAvailable: validateNameIsAvailable },
+            })}
+            width={39}
+            placeholder="Name"
+          />
+        </Field>
+        {fields.map((field, index) => {
+          const pathPrefix = `items.${index}.`;
+          if (field.__deleted) {
+            return <DeletedSubForm key={field.__id} pathPrefix={pathPrefix} />;
+          }
+          const initialItem = initialValues?.items.find(({ __id }) => __id === field.__id);
+          return (
+            <ChannelSubForm<R>
+              defaultValues={field}
+              key={field.__id}
+              onDuplicate={() => {
+                const currentValues: R = getValues().items[index];
+                append({ ...currentValues, __id: String(Math.random()) });
+              }}
+              onTest={
+                onTestChannel
+                  ? () => {
+                      const currentValues: R = getValues().items[index];
+                      onTestChannel(currentValues);
+                    }
+                  : undefined
+              }
+              onDelete={() => remove(index)}
+              pathPrefix={pathPrefix}
+              notifiers={notifiers}
+              secureFields={initialItem?.secureFields}
+              errors={errors?.items?.[index] as FieldErrors<R>}
+              commonSettingsComponent={commonSettingsComponent}
+              readOnly={readOnly}
+            />
+          );
+        })}
+        <>
+          {!readOnly && (
+            <Button
+              type="button"
+              icon="plus"
+              variant="secondary"
+              onClick={() => append({ ...defaultItem, __id: String(Math.random()) } as R)}
+            >
+              New contact point type
+            </Button>
+          )}
+          <div className={styles.buttons}>
+            {!readOnly && (
+              <>
+                {loading && (
+                  <Button disabled={true} icon="fa fa-spinner" variant="primary">
+                    Saving...
+                  </Button>
+                )}
+                {!loading && <Button type="submit">Save contact point</Button>}
+              </>
+            )}
+            <LinkButton
+              disabled={loading}
+              fill="outline"
+              variant="secondary"
+              data-testid="cancel-button"
+              href={makeAMLink('alerting/notifications', alertManagerSourceName)}
+            >
+              Cancel
+            </LinkButton>
+          </div>
+        </>
+      </form>
+    </FormProvider>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  heading: css`
+    margin: ${theme.spacing(4, 0)};
+  `,
+  buttons: css`
+    margin-top: ${theme.spacing(4)};
+
+    & > * + * {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/form/SubformOptionElement.tsx b/public/app/features/alerting/unified/components/receivers/form/SubformOptionElement.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx b/public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx
new file mode 100644
index 00000000..1c580b64
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/TestContactPointModal.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { Modal, Button, Label, useStyles2, RadioButtonGroup } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useForm, FormProvider } from 'react-hook-form';
+import { TestReceiversAlert } from 'app/plugins/datasource/alertmanager/types';
+import { css } from '@emotion/css';
+import AnnotationsField from '../../rule-editor/AnnotationsField';
+import LabelsField from '../../rule-editor/LabelsField';
+import { Annotations, Labels } from 'app/types/unified-alerting-dto';
+
+interface Props {
+  isOpen: boolean;
+  onDismiss: () => void;
+  onTest: (alert?: TestReceiversAlert) => void;
+}
+
+type AnnoField = {
+  key: string;
+  value: string;
+};
+
+interface FormFields {
+  annotations: AnnoField[];
+  labels: AnnoField[];
+}
+
+enum NotificationType {
+  predefined = 'Predefined',
+  custom = 'Custom',
+}
+
+const notificationOptions = Object.values(NotificationType).map((value) => ({ label: value, value: value }));
+
+const defaultValues: FormFields = {
+  annotations: [{ key: '', value: '' }],
+  labels: [{ key: '', value: '' }],
+};
+
+export const TestContactPointModal = ({ isOpen, onDismiss, onTest }: Props) => {
+  const [notificationType, setNotificationType] = useState<NotificationType>(NotificationType.predefined);
+  const styles = useStyles2(getStyles);
+  const formMethods = useForm<FormFields>({ defaultValues, mode: 'onBlur' });
+
+  const onSubmit = (data: FormFields) => {
+    if (notificationType === NotificationType.custom) {
+      const alert = {
+        annotations: data.annotations
+          .filter(({ key, value }) => !!key && !!value)
+          .reduce((acc, { key, value }) => {
+            return { ...acc, [key]: value };
+          }, {} as Annotations),
+        labels: data.labels
+          .filter(({ key, value }) => !!key && !!value)
+          .reduce((acc, { key, value }) => {
+            return { ...acc, [key]: value };
+          }, {} as Labels),
+      };
+      onTest(alert);
+    } else {
+      onTest();
+    }
+  };
+
+  return (
+    <Modal onDismiss={onDismiss} isOpen={isOpen} title={'Test contact point'}>
+      <div className={styles.section}>
+        <Label>Notification message</Label>
+        <RadioButtonGroup
+          options={notificationOptions}
+          value={notificationType}
+          onChange={(value) => setNotificationType(value)}
+        />
+      </div>
+
+      <FormProvider {...formMethods}>
+        <form onSubmit={formMethods.handleSubmit(onSubmit)}>
+          {notificationType === NotificationType.predefined && (
+            <div className={styles.section}>
+              You will send a test notification that uses a predefined alert. If you have defined a custom template or
+              message, for better results switch to <strong>custom</strong> notification message, from above.
+            </div>
+          )}
+          {notificationType === NotificationType.custom && (
+            <>
+              <div className={styles.section}>
+                You will send a test notification that uses the annotations defined below. This is a good option if you
+                use custom templates and messages.
+              </div>
+              <div className={styles.section}>
+                <AnnotationsField />
+              </div>
+              <div className={styles.section}>
+                <LabelsField />
+              </div>
+            </>
+          )}
+
+          <Modal.ButtonRow>
+            <Button type="submit">Send test notification</Button>
+          </Modal.ButtonRow>
+        </form>
+      </FormProvider>
+    </Modal>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: ${theme.spacing(1)};
+  `,
+  section: css`
+    margin-bottom: ${theme.spacing(2)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/DeletedSubform.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/DeletedSubform.tsx
new file mode 100644
index 00000000..233a5081
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/DeletedSubform.tsx
@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+interface Props {
+  pathPrefix: string;
+}
+
+// we can't drop the deleted item from list entirely because
+// there will be a rece condition with register/unregister calls in react-hook-form
+// and fields will become randomly erroneously unregistered
+export function DeletedSubForm({ pathPrefix }: Props): JSX.Element {
+  const { register } = useFormContext();
+
+  // required to be registered or react-hook-form will randomly drop the values when it feels like it
+  useEffect(() => {
+    register(`${pathPrefix}.__id`);
+    register(`${pathPrefix}.__deleted`);
+  }, [register, pathPrefix]);
+
+  return <></>;
+}
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
new file mode 100644
index 00000000..91a5b5e7
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
@@ -0,0 +1,115 @@
+import React, { FC, useEffect, useState } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+import { Button, Input, useStyles2 } from '@grafana/ui';
+import { ActionIcon } from '../../../rules/ActionIcon';
+
+interface Props {
+  value?: Record<string, string>;
+  readOnly?: boolean;
+  onChange: (value: Record<string, string>) => void;
+}
+
+export const KeyValueMapInput: FC<Props> = ({ value, onChange, readOnly = false }) => {
+  const styles = useStyles2(getStyles);
+  const [pairs, setPairs] = useState(recordToPairs(value));
+  useEffect(() => setPairs(recordToPairs(value)), [value]);
+
+  const emitChange = (pairs: Array<[string, string]>) => {
+    onChange(pairsToRecord(pairs));
+  };
+
+  const deleteItem = (index: number) => {
+    const newPairs = pairs.slice();
+    const removed = newPairs.splice(index, 1)[0];
+    setPairs(newPairs);
+    if (removed[0]) {
+      emitChange(newPairs);
+    }
+  };
+
+  const updatePair = (values: [string, string], index: number) => {
+    const old = pairs[index];
+    const newPairs = pairs.map((pair, i) => (i === index ? values : pair));
+    setPairs(newPairs);
+    if (values[0] || old[0]) {
+      emitChange(newPairs);
+    }
+  };
+
+  return (
+    <div>
+      {!!pairs.length && (
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Value</th>
+              {!readOnly && <th></th>}
+            </tr>
+          </thead>
+          <tbody>
+            {pairs.map(([key, value], index) => (
+              <tr key={index}>
+                <td>
+                  <Input
+                    readOnly={readOnly}
+                    value={key}
+                    onChange={(e) => updatePair([e.currentTarget.value, value], index)}
+                  />
+                </td>
+                <td>
+                  <Input
+                    readOnly={readOnly}
+                    value={value}
+                    onChange={(e) => updatePair([key, e.currentTarget.value], index)}
+                  />
+                </td>
+                {!readOnly && (
+                  <td>
+                    <ActionIcon icon="trash-alt" tooltip="delete" onClick={() => deleteItem(index)} />
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {!readOnly && (
+        <Button
+          className={styles.addButton}
+          type="button"
+          variant="secondary"
+          icon="plus"
+          size="sm"
+          onClick={() => setPairs([...pairs, ['', '']])}
+        >
+          Add
+        </Button>
+      )}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  addButton: css`
+    margin-top: ${theme.spacing(1)};
+  `,
+  table: css`
+    tbody td {
+      padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} 0;
+    }
+  `,
+});
+
+const pairsToRecord = (pairs: Array<[string, string]>): Record<string, string> => {
+  const record: Record<string, string> = {};
+  for (const [key, value] of pairs) {
+    if (key) {
+      record[key] = value;
+    }
+  }
+  return record;
+};
+
+const recordToPairs = (obj?: Record<string, string>): Array<[string, string]> => Object.entries(obj ?? {});
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
new file mode 100644
index 00000000..1af2bf08
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx
@@ -0,0 +1,166 @@
+import React, { FC, useEffect } from 'react';
+import { Checkbox, Field, Input, InputControl, Select, TextArea } from '@grafana/ui';
+import { NotificationChannelOption } from 'app/types';
+import { useFormContext, FieldError, DeepMap } from 'react-hook-form';
+import { SubformField } from './SubformField';
+import { css } from '@emotion/css';
+import { KeyValueMapInput } from './KeyValueMapInput';
+import { SubformArrayField } from './SubformArrayField';
+import { StringArrayInput } from './StringArrayInput';
+
+interface Props {
+  defaultValue: any;
+  option: NotificationChannelOption;
+  invalid?: boolean;
+  pathPrefix: string;
+  error?: FieldError | DeepMap<any, FieldError>;
+  readOnly?: boolean;
+}
+
+export const OptionField: FC<Props> = ({ option, invalid, pathPrefix, error, defaultValue, readOnly = false }) => {
+  if (option.element === 'subform') {
+    return (
+      <SubformField
+        readOnly={readOnly}
+        defaultValue={defaultValue}
+        option={option}
+        errors={error as DeepMap<any, FieldError> | undefined}
+        pathPrefix={pathPrefix}
+      />
+    );
+  }
+  if (option.element === 'subform_array') {
+    return (
+      <SubformArrayField
+        readOnly={readOnly}
+        defaultValues={defaultValue}
+        option={option}
+        pathPrefix={pathPrefix}
+        errors={error as Array<DeepMap<any, FieldError>> | undefined}
+      />
+    );
+  }
+  return (
+    <Field
+      label={option.element !== 'checkbox' ? option.label : undefined}
+      description={option.description || undefined}
+      invalid={!!error}
+      error={error?.message}
+    >
+      <OptionInput
+        id={`${pathPrefix}${option.propertyName}`}
+        defaultValue={defaultValue}
+        option={option}
+        invalid={invalid}
+        pathPrefix={pathPrefix}
+        readOnly={readOnly}
+      />
+    </Field>
+  );
+};
+
+const OptionInput: FC<Props & { id: string }> = ({ option, invalid, id, pathPrefix = '', readOnly = false }) => {
+  const { control, register, unregister } = useFormContext();
+  const name = `${pathPrefix}${option.propertyName}`;
+
+  // workaround for https://github.com/react-hook-form/react-hook-form/issues/4993#issuecomment-829012506
+  useEffect(
+    () => () => {
+      unregister(name, { keepValue: false });
+    },
+    [unregister, name]
+  );
+  switch (option.element) {
+    case 'checkbox':
+      return (
+        <Checkbox
+          id={id}
+          readOnly={readOnly}
+          disabled={readOnly}
+          className={styles.checkbox}
+          {...register(name)}
+          label={option.label}
+          description={option.description}
+        />
+      );
+    case 'input':
+      return (
+        <Input
+          id={id}
+          readOnly={readOnly}
+          invalid={invalid}
+          type={option.inputType}
+          {...register(name, {
+            required: option.required ? 'Required' : false,
+            validate: (v) => (option.validationRule !== '' ? validateOption(v, option.validationRule) : true),
+          })}
+          placeholder={option.placeholder}
+        />
+      );
+
+    case 'select':
+      return (
+        <InputControl
+          render={({ field: { onChange, ref, ...field } }) => (
+            <Select
+              disabled={readOnly}
+              menuShouldPortal
+              {...field}
+              options={option.selectOptions ?? undefined}
+              invalid={invalid}
+              onChange={(value) => onChange(value.value)}
+            />
+          )}
+          control={control}
+          name={name}
+        />
+      );
+
+    case 'textarea':
+      return (
+        <TextArea
+          id={id}
+          readOnly={readOnly}
+          invalid={invalid}
+          {...register(name, {
+            required: option.required ? 'Required' : false,
+            validate: (v) => (option.validationRule !== '' ? validateOption(v, option.validationRule) : true),
+          })}
+        />
+      );
+    case 'string_array':
+      return (
+        <InputControl
+          render={({ field: { value, onChange } }) => (
+            <StringArrayInput readOnly={readOnly} value={value} onChange={onChange} />
+          )}
+          control={control}
+          name={name}
+        />
+      );
+    case 'key_value_map':
+      return (
+        <InputControl
+          render={({ field: { value, onChange } }) => (
+            <KeyValueMapInput readOnly={readOnly} value={value} onChange={onChange} />
+          )}
+          control={control}
+          name={name}
+        />
+      );
+
+    default:
+      console.error('Element not supported', option.element);
+      return null;
+  }
+};
+
+const styles = {
+  checkbox: css`
+    height: auto; // native chekbox has fixed height which does not take into account description
+  `,
+};
+
+const validateOption = (value: string, validationRule: string) => {
+  return RegExp(validationRule).test(value) ? true : 'Invalid format';
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx
new file mode 100644
index 00000000..8ff879e9
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx
@@ -0,0 +1,77 @@
+import React, { FC } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+import { Button, Input, useStyles2 } from '@grafana/ui';
+import { ActionIcon } from '../../../rules/ActionIcon';
+
+interface Props {
+  value?: string[];
+  readOnly?: boolean;
+  onChange: (value: string[]) => void;
+}
+
+export const StringArrayInput: FC<Props> = ({ value, onChange, readOnly = false }) => {
+  const styles = useStyles2(getStyles);
+
+  const deleteItem = (index: number) => {
+    if (!value) {
+      return;
+    }
+    const newValue = value.slice();
+    newValue.splice(index, 1);
+    onChange(newValue);
+  };
+
+  const updateValue = (itemValue: string, index: number) => {
+    if (!value) {
+      return;
+    }
+    onChange(value.map((v, i) => (i === index ? itemValue : v)));
+  };
+
+  return (
+    <div>
+      {!!value?.length &&
+        value.map((v, index) => (
+          <div key={index} className={styles.row}>
+            <Input readOnly={readOnly} value={v} onChange={(e) => updateValue(e.currentTarget.value, index)} />
+            {!readOnly && (
+              <ActionIcon
+                className={styles.deleteIcon}
+                icon="trash-alt"
+                tooltip="delete"
+                onClick={() => deleteItem(index)}
+              />
+            )}
+          </div>
+        ))}
+      {!readOnly && (
+        <Button
+          className={styles.addButton}
+          type="button"
+          variant="secondary"
+          icon="plus"
+          size="sm"
+          onClick={() => onChange([...(value ?? []), ''])}
+        >
+          Add
+        </Button>
+      )}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  row: css`
+    display: flex;
+    flex-direction: row;
+    margin-bottom: ${theme.spacing(1)};
+    align-items: center;
+  `,
+  deleteIcon: css`
+    margin-left: ${theme.spacing(1)};
+  `,
+  addButton: css`
+    margin-top: ${theme.spacing(1)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx
new file mode 100644
index 00000000..935118e7
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx
@@ -0,0 +1,73 @@
+import React, { FC } from 'react';
+import { NotificationChannelOption } from 'app/types';
+import { FieldError, DeepMap, useFormContext } from 'react-hook-form';
+import { Button, useStyles2 } from '@grafana/ui';
+import { CollapsibleSection } from '../CollapsibleSection';
+import { ActionIcon } from '../../../rules/ActionIcon';
+import { OptionField } from './OptionField';
+import { useControlledFieldArray } from 'app/features/alerting/unified/hooks/useControlledFieldArray';
+import { getReceiverFormFieldStyles } from './styles';
+
+interface Props {
+  defaultValues?: any[];
+  option: NotificationChannelOption;
+  pathPrefix: string;
+  errors?: Array<DeepMap<any, FieldError>>;
+  readOnly?: boolean;
+}
+
+export const SubformArrayField: FC<Props> = ({ option, pathPrefix, errors, defaultValues, readOnly = false }) => {
+  const styles = useStyles2(getReceiverFormFieldStyles);
+  const path = `${pathPrefix}${option.propertyName}`;
+  const formAPI = useFormContext();
+  const { fields, append, remove } = useControlledFieldArray({ name: path, formAPI, defaults: defaultValues });
+
+  return (
+    <div className={styles.wrapper}>
+      <CollapsibleSection
+        className={styles.collapsibleSection}
+        label={`${option.label} (${fields.length})`}
+        description={option.description}
+      >
+        {(fields ?? defaultValues ?? []).map((field, itemIndex) => {
+          return (
+            <div key={itemIndex} className={styles.wrapper}>
+              {!readOnly && (
+                <ActionIcon
+                  data-testid={`${path}.${itemIndex}.delete-button`}
+                  icon="trash-alt"
+                  tooltip="delete"
+                  onClick={() => remove(itemIndex)}
+                  className={styles.deleteIcon}
+                />
+              )}
+              {option.subformOptions?.map((option) => (
+                <OptionField
+                  readOnly={readOnly}
+                  defaultValue={field?.[option.propertyName]}
+                  key={option.propertyName}
+                  option={option}
+                  pathPrefix={`${path}.${itemIndex}.`}
+                  error={errors?.[itemIndex]?.[option.propertyName]}
+                />
+              ))}
+            </div>
+          );
+        })}
+        {!readOnly && (
+          <Button
+            data-testid={`${path}.add-button`}
+            className={styles.addButton}
+            type="button"
+            variant="secondary"
+            icon="plus"
+            size="sm"
+            onClick={() => append({ __id: String(Math.random()) })}
+          >
+            Add
+          </Button>
+        )}
+      </CollapsibleSection>
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/SubformField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/SubformField.tsx
new file mode 100644
index 00000000..7707b9f4
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/SubformField.tsx
@@ -0,0 +1,70 @@
+import React, { FC, useState } from 'react';
+import { NotificationChannelOption } from 'app/types';
+import { FieldError, DeepMap, useFormContext } from 'react-hook-form';
+import { OptionField } from './OptionField';
+import { Button, useStyles2 } from '@grafana/ui';
+import { ActionIcon } from '../../../rules/ActionIcon';
+import { getReceiverFormFieldStyles } from './styles';
+
+interface Props {
+  defaultValue: any;
+  option: NotificationChannelOption;
+  pathPrefix: string;
+  errors?: DeepMap<any, FieldError>;
+  readOnly?: boolean;
+}
+
+export const SubformField: FC<Props> = ({ option, pathPrefix, errors, defaultValue, readOnly = false }) => {
+  const styles = useStyles2(getReceiverFormFieldStyles);
+  const name = `${pathPrefix}${option.propertyName}`;
+  const { watch } = useFormContext();
+  const _watchValue = watch(name);
+  const value = _watchValue === undefined ? defaultValue : _watchValue;
+
+  const [show, setShow] = useState(!!value);
+
+  return (
+    <div className={styles.wrapper} data-testid={`${name}.container`}>
+      <h6>{option.label}</h6>
+      {option.description && <p className={styles.description}>{option.description}</p>}
+      {show && (
+        <>
+          {!readOnly && (
+            <ActionIcon
+              data-testid={`${name}.delete-button`}
+              icon="trash-alt"
+              tooltip="delete"
+              onClick={() => setShow(false)}
+              className={styles.deleteIcon}
+            />
+          )}
+          {(option.subformOptions ?? []).map((subOption) => {
+            return (
+              <OptionField
+                readOnly={readOnly}
+                defaultValue={defaultValue?.[subOption.propertyName]}
+                key={subOption.propertyName}
+                option={subOption}
+                pathPrefix={`${name}.`}
+                error={errors?.[subOption.propertyName]}
+              />
+            );
+          })}
+        </>
+      )}
+      {!show && !readOnly && (
+        <Button
+          className={styles.addButton}
+          type="button"
+          variant="secondary"
+          icon="plus"
+          size="sm"
+          onClick={() => setShow(true)}
+          data-testid={`${name}.add-button`}
+        >
+          Add
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts b/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts
new file mode 100644
index 00000000..28709bf3
--- /dev/null
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/styles.ts
@@ -0,0 +1,30 @@
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+
+export const getReceiverFormFieldStyles = (theme: GrafanaTheme2) => ({
+  collapsibleSection: css`
+    margin: 0;
+    padding: 0;
+  `,
+  wrapper: css`
+    margin: ${theme.spacing(2, 0)};
+    padding: ${theme.spacing(1)};
+    border: solid 1px ${theme.colors.border.medium};
+    border-radius: ${theme.shape.borderRadius(1)};
+    position: relative;
+  `,
+  description: css`
+    color: ${theme.colors.text.secondary};
+    font-size: ${theme.typography.size.sm};
+    font-weight: ${theme.typography.fontWeightRegular};
+    margin: 0;
+  `,
+  deleteIcon: css`
+    position: absolute;
+    right: ${theme.spacing(1)};
+    top: ${theme.spacing(1)};
+  `,
+  addButton: css`
+    margin-top: ${theme.spacing(1)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
new file mode 100644
index 00000000..dfb7cfeb
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
@@ -0,0 +1,165 @@
+import React, { FC, useMemo } from 'react';
+import { GrafanaTheme2, AppEvents } from '@grafana/data';
+import { PageToolbar, Button, useStyles2, CustomScrollbar, Spinner } from '@grafana/ui';
+import { css } from '@emotion/css';
+
+import { AlertTypeStep } from './AlertTypeStep';
+import { DetailsStep } from './DetailsStep';
+import { QueryStep } from './QueryStep';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import { RuleFormType, RuleFormValues } from '../../types/rule-form';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { initialAsyncRequestState } from '../../utils/redux';
+import { saveRuleFormAction } from '../../state/actions';
+import { RuleWithLocation } from 'app/types/unified-alerting';
+import { useDispatch } from 'react-redux';
+import { useCleanup } from 'app/core/hooks/useCleanup';
+import { rulerRuleToFormValues, getDefaultFormValues, getDefaultQueries } from '../../utils/rule-form';
+import { Link } from 'react-router-dom';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+
+import { appEvents } from 'app/core/core';
+import { CloudConditionsStep } from './CloudConditionsStep';
+import { GrafanaConditionsStep } from './GrafanaConditionsStep';
+
+type Props = {
+  existing?: RuleWithLocation;
+};
+
+export const AlertRuleForm: FC<Props> = ({ existing }) => {
+  const styles = useStyles2(getStyles);
+  const dispatch = useDispatch();
+  const [queryParams] = useQueryParams();
+
+  const returnTo: string = (queryParams['returnTo'] as string | undefined) ?? '/alerting/list';
+
+  const defaultValues: RuleFormValues = useMemo(() => {
+    if (existing) {
+      return rulerRuleToFormValues(existing);
+    }
+    return {
+      ...getDefaultFormValues(),
+      queries: getDefaultQueries(),
+      ...(queryParams['defaults'] ? JSON.parse(queryParams['defaults'] as string) : {}),
+    };
+  }, [existing, queryParams]);
+
+  const formAPI = useForm<RuleFormValues>({
+    mode: 'onSubmit',
+    defaultValues,
+    shouldFocusError: true,
+  });
+
+  const { handleSubmit, watch } = formAPI;
+
+  const type = watch('type');
+  const dataSourceName = watch('dataSourceName');
+
+  const showStep2 = Boolean(type && (type === RuleFormType.grafana || !!dataSourceName));
+
+  const submitState = useUnifiedAlertingSelector((state) => state.ruleForm.saveRule) || initialAsyncRequestState;
+  useCleanup((state) => state.unifiedAlerting.ruleForm.saveRule);
+
+  const submit = (values: RuleFormValues, exitOnSave: boolean) => {
+    dispatch(
+      saveRuleFormAction({
+        values: {
+          ...defaultValues,
+          ...values,
+          annotations:
+            values.annotations
+              ?.map(({ key, value }) => ({ key: key.trim(), value: value.trim() }))
+              .filter(({ key, value }) => !!key && !!value) ?? [],
+          labels:
+            values.labels
+              ?.map(({ key, value }) => ({ key: key.trim(), value: value.trim() }))
+              .filter(({ key }) => !!key) ?? [],
+        },
+        existing,
+        redirectOnSave: exitOnSave ? returnTo : undefined,
+      })
+    );
+  };
+
+  const onInvalid = () => {
+    appEvents.emit(AppEvents.alertError, ['There are errors in the form. Please correct them and try again!']);
+  };
+
+  return (
+    <FormProvider {...formAPI}>
+      <form onSubmit={(e) => e.preventDefault()} className={styles.form}>
+        <PageToolbar title="Create alert rule" pageIcon="bell">
+          <Link to={returnTo}>
+            <Button variant="secondary" disabled={submitState.loading} type="button" fill="outline">
+              Cancel
+            </Button>
+          </Link>
+          <Button
+            variant="primary"
+            type="button"
+            onClick={handleSubmit((values) => submit(values, false), onInvalid)}
+            disabled={submitState.loading}
+          >
+            {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
+            Save
+          </Button>
+          <Button
+            variant="primary"
+            type="button"
+            onClick={handleSubmit((values) => submit(values, true), onInvalid)}
+            disabled={submitState.loading}
+          >
+            {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
+            Save and exit
+          </Button>
+        </PageToolbar>
+        <div className={styles.contentOuter}>
+          <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
+            <div className={styles.contentInner}>
+              <AlertTypeStep editingExistingRule={!!existing} />
+              {showStep2 && (
+                <>
+                  <QueryStep />
+                  {type === RuleFormType.grafana ? <GrafanaConditionsStep /> : <CloudConditionsStep />}
+                  <DetailsStep />
+                </>
+              )}
+            </div>
+          </CustomScrollbar>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    buttonSpinner: css`
+      margin-right: ${theme.spacing(1)};
+    `,
+    form: css`
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    `,
+    contentInner: css`
+      flex: 1;
+      padding: ${theme.spacing(2)};
+    `,
+    contentOuter: css`
+      background: ${theme.colors.background.primary};
+      border: 1px solid ${theme.colors.border.weak};
+      border-radius: ${theme.shape.borderRadius()};
+      margin: ${theme.spacing(0, 2, 2)};
+      overflow: hidden;
+      flex: 1;
+    `,
+    flexRow: css`
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx
new file mode 100644
index 00000000..e2065b51
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx
@@ -0,0 +1,171 @@
+import React, { FC, useMemo } from 'react';
+import { DataSourceInstanceSettings, GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { Field, Input, InputControl, Select, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { RuleEditorSection } from './RuleEditorSection';
+import { useFormContext } from 'react-hook-form';
+import { RuleFormType, RuleFormValues } from '../../types/rule-form';
+import { RuleFolderPicker } from './RuleFolderPicker';
+import { GroupAndNamespaceFields } from './GroupAndNamespaceFields';
+import { contextSrv } from 'app/core/services/context_srv';
+import { CloudRulesSourcePicker } from './CloudRulesSourcePicker';
+
+interface Props {
+  editingExistingRule: boolean;
+}
+
+const recordingRuleNameValidationPattern = {
+  message:
+    'Recording rule name must be valid metric name. It may only contain letters, numbers, and colons. It may not contain whitespace.',
+  value: /^[a-zA-Z_:][a-zA-Z0-9_:]*$/,
+};
+
+export const AlertTypeStep: FC<Props> = ({ editingExistingRule }) => {
+  const styles = useStyles2(getStyles);
+
+  const {
+    register,
+    control,
+    watch,
+    formState: { errors },
+    setValue,
+  } = useFormContext<RuleFormValues & { location?: string }>();
+
+  const ruleFormType = watch('type');
+  const dataSourceName = watch('dataSourceName');
+
+  const alertTypeOptions = useMemo((): SelectableValue[] => {
+    const result = [
+      {
+        label: 'Grafana managed alert',
+        value: RuleFormType.grafana,
+        description: 'Classic Grafana alerts based on thresholds.',
+      },
+    ];
+
+    if (contextSrv.isEditor) {
+      result.push({
+        label: 'Cortex/Loki managed alert',
+        value: RuleFormType.cloudAlerting,
+        description: 'Alert based on a system or application behavior. Based on Prometheus.',
+      });
+      result.push({
+        label: 'Cortex/Loki managed recording rule',
+        value: RuleFormType.cloudRecording,
+        description: 'Recording rule to pre-compute frequently needed or expensive calculations. Based on Prometheus.',
+      });
+    }
+
+    return result;
+  }, []);
+
+  return (
+    <RuleEditorSection stepNo={1} title="Rule type">
+      <Field
+        className={styles.formInput}
+        label="Rule name"
+        error={errors?.name?.message}
+        invalid={!!errors.name?.message}
+      >
+        <Input
+          id="name"
+          {...register('name', {
+            required: { value: true, message: 'Must enter an alert name' },
+            pattern: ruleFormType === RuleFormType.cloudRecording ? recordingRuleNameValidationPattern : undefined,
+          })}
+          autoFocus={true}
+        />
+      </Field>
+      <div className={styles.flexRow}>
+        <Field
+          disabled={editingExistingRule}
+          label="Rule type"
+          className={styles.formInput}
+          error={errors.type?.message}
+          invalid={!!errors.type?.message}
+          data-testid="alert-type-picker"
+        >
+          <InputControl
+            render={({ field: { onChange, ref, ...field } }) => (
+              <Select
+                menuShouldPortal
+                aria-label="Rule type"
+                {...field}
+                options={alertTypeOptions}
+                onChange={(v: SelectableValue) => onChange(v?.value)}
+              />
+            )}
+            name="type"
+            control={control}
+            rules={{
+              required: { value: true, message: 'Please select alert type' },
+            }}
+          />
+        </Field>
+        {(ruleFormType === RuleFormType.cloudRecording || ruleFormType === RuleFormType.cloudAlerting) && (
+          <Field
+            className={styles.formInput}
+            label="Select data source"
+            error={errors.dataSourceName?.message}
+            invalid={!!errors.dataSourceName?.message}
+            data-testid="datasource-picker"
+          >
+            <InputControl
+              render={({ field: { onChange, ref, ...field } }) => (
+                <CloudRulesSourcePicker
+                  {...field}
+                  onChange={(ds: DataSourceInstanceSettings) => {
+                    // reset location if switching data sources, as different rules source will have different groups and namespaces
+                    setValue('location', undefined);
+                    onChange(ds?.name ?? null);
+                  }}
+                />
+              )}
+              name="dataSourceName"
+              control={control}
+              rules={{
+                required: { value: true, message: 'Please select a data source' },
+              }}
+            />
+          </Field>
+        )}
+      </div>
+      {(ruleFormType === RuleFormType.cloudRecording || ruleFormType === RuleFormType.cloudAlerting) &&
+        dataSourceName && <GroupAndNamespaceFields rulesSourceName={dataSourceName} />}
+
+      {ruleFormType === RuleFormType.grafana && (
+        <Field
+          label="Folder"
+          className={styles.formInput}
+          error={errors.folder?.message}
+          invalid={!!errors.folder?.message}
+          data-testid="folder-picker"
+        >
+          <InputControl
+            render={({ field: { ref, ...field } }) => (
+              <RuleFolderPicker {...field} enableCreateNew={true} enableReset={true} />
+            )}
+            name="folder"
+            rules={{
+              required: { value: true, message: 'Please select a folder' },
+            }}
+          />
+        </Field>
+      )}
+    </RuleEditorSection>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  formInput: css`
+    width: 330px;
+    & + & {
+      margin-left: ${theme.spacing(3)};
+    }
+  `,
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx
new file mode 100644
index 00000000..7451454b
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx
@@ -0,0 +1,34 @@
+import { SelectableValue } from '@grafana/data';
+import React, { FC, useMemo } from 'react';
+import { SelectWithAdd } from './SelectWIthAdd';
+import { Annotation, annotationLabels } from '../../utils/constants';
+
+interface Props {
+  onChange: (value: string) => void;
+  existingKeys: string[];
+
+  value?: string;
+  width?: number;
+  className?: string;
+  'aria-label'?: string;
+}
+
+export const AnnotationKeyInput: FC<Props> = ({ value, existingKeys, 'aria-label': ariaLabel, ...rest }) => {
+  const annotationOptions = useMemo(
+    (): SelectableValue[] =>
+      Object.values(Annotation)
+        .filter((key) => !existingKeys.includes(key)) // remove keys already taken in other annotations
+        .map((key) => ({ value: key, label: annotationLabels[key] })),
+    [existingKeys]
+  );
+
+  return (
+    <SelectWithAdd
+      aria-label={ariaLabel}
+      value={value}
+      options={annotationOptions}
+      custom={!!value && !(Object.values(Annotation) as string[]).includes(value)}
+      {...rest}
+    />
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx
new file mode 100644
index 00000000..da1b3aef
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx
@@ -0,0 +1,128 @@
+import React, { FC, useCallback } from 'react';
+import { Button, Field, FieldArray, Input, InputControl, Label, TextArea, useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css, cx } from '@emotion/css';
+import { useFormContext } from 'react-hook-form';
+import { RuleFormValues } from '../../types/rule-form';
+import { AnnotationKeyInput } from './AnnotationKeyInput';
+
+const AnnotationsField: FC = () => {
+  const styles = useStyles(getStyles);
+  const {
+    control,
+    register,
+    watch,
+    formState: { errors },
+  } = useFormContext();
+  const annotations = watch('annotations') as RuleFormValues['annotations'];
+
+  const existingKeys = useCallback(
+    (index: number): string[] => annotations.filter((_, idx: number) => idx !== index).map(({ key }) => key),
+    [annotations]
+  );
+
+  return (
+    <>
+      <Label>Summary and annotations</Label>
+      <FieldArray name={'annotations'} control={control}>
+        {({ fields, append, remove }) => {
+          return (
+            <div className={styles.flexColumn}>
+              {fields.map((field, index) => {
+                const isUrl = annotations[index]?.key?.toLocaleLowerCase().endsWith('url');
+                const ValueInputComponent = isUrl ? Input : TextArea;
+                return (
+                  <div key={field.id} className={styles.flexRow}>
+                    <Field
+                      className={styles.field}
+                      invalid={!!errors.annotations?.[index]?.key?.message}
+                      error={errors.annotations?.[index]?.key?.message}
+                      data-testid={`annotation-key-${index}`}
+                    >
+                      <InputControl
+                        name={`annotations[${index}].key`}
+                        render={({ field: { ref, ...field } }) => (
+                          <AnnotationKeyInput
+                            {...field}
+                            aria-label={`Annotation detail ${index + 1}`}
+                            existingKeys={existingKeys(index)}
+                            width={18}
+                          />
+                        )}
+                        control={control}
+                        rules={{ required: { value: !!annotations[index]?.value, message: 'Required.' } }}
+                      />
+                    </Field>
+                    <Field
+                      className={cx(styles.flexRowItemMargin, styles.field)}
+                      invalid={!!errors.annotations?.[index]?.value?.message}
+                      error={errors.annotations?.[index]?.value?.message}
+                    >
+                      <ValueInputComponent
+                        data-testid={`annotation-value-${index}`}
+                        className={cx(styles.annotationValueInput, { [styles.textarea]: !isUrl })}
+                        {...register(`annotations[${index}].value`)}
+                        placeholder={isUrl ? 'https://' : `Text`}
+                        defaultValue={field.value}
+                      />
+                    </Field>
+                    <Button
+                      type="button"
+                      className={styles.flexRowItemMargin}
+                      aria-label="delete annotation"
+                      icon="trash-alt"
+                      variant="secondary"
+                      onClick={() => remove(index)}
+                    />
+                  </div>
+                );
+              })}
+              <Button
+                className={styles.addAnnotationsButton}
+                icon="plus-circle"
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  append({ key: '', value: '' });
+                }}
+              >
+                Add info
+              </Button>
+            </div>
+          );
+        }}
+      </FieldArray>
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  annotationValueInput: css`
+    width: 426px;
+  `,
+  textarea: css`
+    height: 76px;
+  `,
+  addAnnotationsButton: css`
+    flex-grow: 0;
+    align-self: flex-start;
+    margin-left: 148px;
+  `,
+  flexColumn: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  field: css`
+    margin-bottom: ${theme.spacing.xs};
+  `,
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  `,
+  flexRowItemMargin: css`
+    margin-left: ${theme.spacing.xs};
+  `,
+});
+
+export default AnnotationsField;
diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudConditionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudConditionsStep.tsx
new file mode 100644
index 00000000..91cc9fcc
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/CloudConditionsStep.tsx
@@ -0,0 +1,71 @@
+import React, { FC } from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme } from '@grafana/data';
+import { Field, Input, InputControl, Select, useStyles } from '@grafana/ui';
+import { useFormContext } from 'react-hook-form';
+import { RuleFormType, RuleFormValues } from '../../types/rule-form';
+import { timeOptions } from '../../utils/time';
+import { RuleEditorSection } from './RuleEditorSection';
+import { PreviewRule } from './PreviewRule';
+
+export const CloudConditionsStep: FC = () => {
+  const styles = useStyles(getStyles);
+  const {
+    register,
+    control,
+    watch,
+    formState: { errors },
+  } = useFormContext<RuleFormValues>();
+
+  const type = watch('type');
+
+  // cloud recording rules do not have alert conditions
+  if (type === RuleFormType.cloudRecording) {
+    return null;
+  }
+
+  return (
+    <RuleEditorSection stepNo={3} title="Define alert conditions">
+      <Field label="For" description="Expression has to be true for this long for the alert to be fired.">
+        <div className={styles.flexRow}>
+          <Field invalid={!!errors.forTime?.message} error={errors.forTime?.message} className={styles.inlineField}>
+            <Input
+              {...register('forTime', { pattern: { value: /^\d+$/, message: 'Must be a positive integer.' } })}
+              width={8}
+            />
+          </Field>
+          <InputControl
+            name="forTimeUnit"
+            render={({ field: { onChange, ref, ...field } }) => (
+              <Select
+                menuShouldPortal
+                {...field}
+                options={timeOptions}
+                onChange={(value) => onChange(value?.value)}
+                width={15}
+                className={styles.timeUnit}
+              />
+            )}
+            control={control}
+          />
+        </div>
+      </Field>
+      <PreviewRule />
+    </RuleEditorSection>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  inlineField: css`
+    margin-bottom: 0;
+  `,
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+  `,
+  timeUnit: css`
+    margin-left: ${theme.spacing.xs};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx
new file mode 100644
index 00000000..7668d836
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx
@@ -0,0 +1,24 @@
+import React, { useCallback } from 'react';
+import { DataSourceInstanceSettings } from '@grafana/data';
+import { DataSourcePicker } from '@grafana/runtime';
+import { useRulesSourcesWithRuler } from '../../hooks/useRuleSourcesWithRuler';
+
+interface Props {
+  onChange: (ds: DataSourceInstanceSettings) => void;
+  value: string | null;
+  onBlur?: () => void;
+  name?: string;
+}
+
+export function CloudRulesSourcePicker({ value, ...props }: Props): JSX.Element {
+  const rulesSourcesWithRuler = useRulesSourcesWithRuler();
+
+  const dataSourceFilter = useCallback(
+    (ds: DataSourceInstanceSettings): boolean => {
+      return !!rulesSourcesWithRuler.find(({ id }) => id === ds.id);
+    },
+    [rulesSourcesWithRuler]
+  );
+
+  return <DataSourcePicker noDefault alerting filter={dataSourceFilter} current={value} {...props} />;
+}
diff --git a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx
new file mode 100644
index 00000000..f4341f35
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx
@@ -0,0 +1,68 @@
+import { SelectableValue } from '@grafana/data';
+import { Field, InputControl, Select } from '@grafana/ui';
+import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
+import React, { FC, useEffect, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { RuleFormValues } from '../../types/rule-form';
+
+export const ConditionField: FC = () => {
+  const {
+    watch,
+    setValue,
+    formState: { errors },
+  } = useFormContext<RuleFormValues>();
+
+  const queries = watch('queries');
+  const condition = watch('condition');
+
+  const options = useMemo(
+    (): SelectableValue[] =>
+      queries
+        .filter((q) => !!q.refId)
+        .map((q) => ({
+          value: q.refId,
+          label: q.refId,
+        })),
+    [queries]
+  );
+
+  // reset condition if option no longer exists or if it is unset, but there are options available
+  useEffect(() => {
+    const expressions = queries.filter((query) => query.datasourceUid === ExpressionDatasourceUID);
+    if (condition && !options.find(({ value }) => value === condition)) {
+      setValue('condition', expressions.length ? expressions[expressions.length - 1].refId : null);
+    } else if (!condition && expressions.length) {
+      setValue('condition', expressions[expressions.length - 1].refId);
+    }
+  }, [condition, options, queries, setValue]);
+
+  return (
+    <Field
+      label="Condition"
+      description="The query or expression that will be alerted on"
+      error={errors.condition?.message}
+      invalid={!!errors.condition?.message}
+    >
+      <InputControl
+        name="condition"
+        render={({ field: { onChange, ref, ...field } }) => (
+          <Select
+            menuShouldPortal
+            aria-label="Condition"
+            {...field}
+            width={42}
+            options={options}
+            onChange={(v: SelectableValue) => onChange(v?.value ?? null)}
+            noOptionsMessage="No queries defined"
+          />
+        )}
+        rules={{
+          required: {
+            value: true,
+            message: 'Please select the condition to alert on',
+          },
+        }}
+      />
+    </Field>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
new file mode 100644
index 00000000..2f727086
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import LabelsField from './LabelsField';
+import AnnotationsField from './AnnotationsField';
+import { RuleEditorSection } from './RuleEditorSection';
+import { useFormContext } from 'react-hook-form';
+import { RuleFormType, RuleFormValues } from '../../types/rule-form';
+
+export const DetailsStep: FC = () => {
+  const { watch } = useFormContext<RuleFormValues>();
+
+  const type = watch('type');
+
+  return (
+    <RuleEditorSection
+      stepNo={type === RuleFormType.cloudRecording ? 3 : 4}
+      title={
+        type === RuleFormType.cloudRecording ? 'Add details for your recording rule' : 'Add details for your alert'
+      }
+      description={
+        type === RuleFormType.cloudRecording
+          ? 'Add labels to help you better manage your rules'
+          : 'Write a summary and add labels to help you better manage your alerts'
+      }
+    >
+      {type !== RuleFormType.cloudRecording && <AnnotationsField />}
+      <LabelsField />
+    </RuleEditorSection>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
new file mode 100644
index 00000000..c95961f6
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
@@ -0,0 +1,73 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { noop } from 'lodash';
+import { CoreApp, DataQuery } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
+import { useAsync } from 'react-use';
+import { PromQuery } from 'app/plugins/datasource/prometheus/types';
+import { LokiQuery } from 'app/plugins/datasource/loki/types';
+
+export interface ExpressionEditorProps {
+  value?: string;
+  onChange: (value: string) => void;
+  dataSourceName: string; // will be a prometheus or loki datasource
+}
+
+export const ExpressionEditor: FC<ExpressionEditorProps> = ({ value, onChange, dataSourceName }) => {
+  const { mapToValue, mapToQuery } = useQueryMappers(dataSourceName);
+  const [query, setQuery] = useState(mapToQuery({ refId: 'A', hide: false }, value));
+  const { error, loading, value: dataSource } = useAsync(() => {
+    return getDataSourceSrv().get(dataSourceName);
+  }, [dataSourceName]);
+
+  const onChangeQuery = useCallback(
+    (query: DataQuery) => {
+      setQuery(query);
+      onChange(mapToValue(query));
+    },
+    [onChange, mapToValue]
+  );
+
+  if (loading || dataSource?.name !== dataSourceName) {
+    return null;
+  }
+
+  if (error || !dataSource || !dataSource?.components?.QueryEditor) {
+    const errorMessage = error?.message || 'Data source plugin does not export any Query Editor component';
+    return <div>Could not load query editor due to: {errorMessage}</div>;
+  }
+
+  const QueryEditor = dataSource?.components?.QueryEditor;
+
+  return (
+    <QueryEditor
+      query={query}
+      queries={[query]}
+      app={CoreApp.CloudAlerting}
+      onChange={onChangeQuery}
+      onRunQuery={noop}
+      datasource={dataSource}
+    />
+  );
+};
+
+type QueryMappers<T extends DataQuery = DataQuery> = {
+  mapToValue: (query: T) => string;
+  mapToQuery: (existing: T, value: string | undefined) => T;
+};
+
+function useQueryMappers(dataSourceName: string): QueryMappers {
+  return useMemo(() => {
+    const settings = getDataSourceSrv().getInstanceSettings(dataSourceName);
+
+    switch (settings?.type) {
+      case 'loki':
+      case 'prometheus':
+        return {
+          mapToValue: (query: DataQuery) => (query as PromQuery | LokiQuery).expr,
+          mapToQuery: (existing: DataQuery, value: string | undefined) => ({ ...existing, expr: value }),
+        };
+      default:
+        throw new Error(`${dataSourceName} is not supported as an expression editor`);
+    }
+  }, [dataSourceName]);
+}
diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
new file mode 100644
index 00000000..42eab782
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
@@ -0,0 +1,30 @@
+import { SelectableValue } from '@grafana/data';
+import { Select } from '@grafana/ui';
+import { SelectBaseProps } from '@grafana/ui/src/components/Select/types';
+import { GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto';
+import React, { FC, useMemo } from 'react';
+
+type Props = Omit<SelectBaseProps<GrafanaAlertStateDecision>, 'options'> & {
+  includeNoData: boolean;
+  includeError: boolean;
+};
+
+const options: SelectableValue[] = [
+  { value: GrafanaAlertStateDecision.Alerting, label: 'Alerting' },
+  { value: GrafanaAlertStateDecision.NoData, label: 'No Data' },
+  { value: GrafanaAlertStateDecision.OK, label: 'OK' },
+  { value: GrafanaAlertStateDecision.Error, label: 'Error' },
+];
+
+export const GrafanaAlertStatePicker: FC<Props> = ({ includeNoData, includeError, ...props }) => {
+  const opts = useMemo(() => {
+    if (!includeNoData) {
+      return options.filter((opt) => opt.value !== GrafanaAlertStateDecision.NoData);
+    }
+    if (!includeError) {
+      return options.filter((opt) => opt.value !== GrafanaAlertStateDecision.Error);
+    }
+    return options;
+  }, [includeNoData, includeError]);
+  return <Select menuShouldPortal options={opts} {...props} />;
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionEvalWarning.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionEvalWarning.tsx
new file mode 100644
index 00000000..a51b3505
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionEvalWarning.tsx
@@ -0,0 +1,32 @@
+import { durationToMilliseconds, parseDuration } from '@grafana/data';
+import { Alert } from '@grafana/ui';
+import { isEmpty } from 'lodash';
+import React, { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { RuleFormValues } from '../../types/rule-form';
+
+// a warning that will be shown if a problematic yet technically valid combination of "evaluate every" and "evaluate for" is enetered
+export const GrafanaConditionEvalWarning: FC = () => {
+  const { watch } = useFormContext<RuleFormValues>();
+  const evaluateFor = watch('evaluateFor');
+  const evaluateEvery = watch('evaluateEvery');
+  if (evaluateFor === '0') {
+    return null;
+  }
+  const durationFor = parseDuration(evaluateFor);
+  const durationEvery = parseDuration(evaluateEvery);
+  if (isEmpty(durationFor) || isEmpty(durationEvery)) {
+    return null;
+  }
+  const millisFor = durationToMilliseconds(durationFor);
+  const millisEvery = durationToMilliseconds(durationEvery);
+  if (millisFor && millisEvery && millisFor <= millisEvery) {
+    return (
+      <Alert severity="warning" title="">
+        Setting a "for" duration that is less than or equal to the evaluation interval will result in the
+        evaluation interval being used to calculate when an alert that has stopped receiving data will be closed.
+      </Alert>
+    );
+  }
+  return null;
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionsStep.tsx
new file mode 100644
index 00000000..cbde71df
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionsStep.tsx
@@ -0,0 +1,153 @@
+import React, { FC, useState } from 'react';
+import { css } from '@emotion/css';
+import { parseDuration, durationToMilliseconds, GrafanaTheme2 } from '@grafana/data';
+import { Field, InlineLabel, Input, InputControl, useStyles2 } from '@grafana/ui';
+import { useFormContext, RegisterOptions } from 'react-hook-form';
+import { RuleFormValues } from '../../types/rule-form';
+import { positiveDurationValidationPattern, durationValidationPattern } from '../../utils/time';
+import { ConditionField } from './ConditionField';
+import { GrafanaAlertStatePicker } from './GrafanaAlertStatePicker';
+import { RuleEditorSection } from './RuleEditorSection';
+import { PreviewRule } from './PreviewRule';
+import { GrafanaConditionEvalWarning } from './GrafanaConditionEvalWarning';
+import { CollapseToggle } from '../CollapseToggle';
+
+const MIN_TIME_RANGE_STEP_S = 10; // 10 seconds
+
+const forValidationOptions: RegisterOptions = {
+  required: {
+    value: true,
+    message: 'Required.',
+  },
+  pattern: durationValidationPattern,
+};
+
+const evaluateEveryValidationOptions: RegisterOptions = {
+  required: {
+    value: true,
+    message: 'Required.',
+  },
+  pattern: positiveDurationValidationPattern,
+  validate: (value: string) => {
+    const duration = parseDuration(value);
+    if (Object.keys(duration).length) {
+      const diff = durationToMilliseconds(duration);
+      if (diff < MIN_TIME_RANGE_STEP_S * 1000) {
+        return `Cannot be less than ${MIN_TIME_RANGE_STEP_S} seconds.`;
+      }
+      if (diff % (MIN_TIME_RANGE_STEP_S * 1000) !== 0) {
+        return `Must be a multiple of ${MIN_TIME_RANGE_STEP_S} seconds.`;
+      }
+    }
+    return true;
+  },
+};
+
+export const GrafanaConditionsStep: FC = () => {
+  const styles = useStyles2(getStyles);
+  const [showErrorHandling, setShowErrorHandling] = useState(false);
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<RuleFormValues>();
+
+  const evaluateEveryId = 'eval-every-input';
+  const evaluateForId = 'eval-for-input';
+
+  return (
+    <RuleEditorSection stepNo={3} title="Define alert conditions">
+      <ConditionField />
+      <Field label="Evaluate">
+        <div className={styles.flexRow}>
+          <InlineLabel
+            htmlFor={evaluateEveryId}
+            width={16}
+            tooltip="How often the alert will be evaluated to see if it fires"
+          >
+            Evaluate every
+          </InlineLabel>
+          <Field
+            className={styles.inlineField}
+            error={errors.evaluateEvery?.message}
+            invalid={!!errors.evaluateEvery?.message}
+            validationMessageHorizontalOverflow={true}
+          >
+            <Input id={evaluateEveryId} width={8} {...register('evaluateEvery', evaluateEveryValidationOptions)} />
+          </Field>
+          <InlineLabel
+            htmlFor={evaluateForId}
+            width={7}
+            tooltip='Once condition is breached, alert will go into pending state. If it is pending for longer than the "for" value, it will become a firing alert.'
+          >
+            for
+          </InlineLabel>
+          <Field
+            className={styles.inlineField}
+            error={errors.evaluateFor?.message}
+            invalid={!!errors.evaluateFor?.message}
+            validationMessageHorizontalOverflow={true}
+          >
+            <Input id={evaluateForId} width={8} {...register('evaluateFor', forValidationOptions)} />
+          </Field>
+        </div>
+      </Field>
+      <GrafanaConditionEvalWarning />
+      <CollapseToggle
+        isCollapsed={!showErrorHandling}
+        onToggle={(collapsed) => setShowErrorHandling(!collapsed)}
+        text="Configure no data and error handling"
+        className={styles.collapseToggle}
+      />
+      {showErrorHandling && (
+        <>
+          <Field htmlFor="no-data-state-input" label="Alert state if no data or all values are null">
+            <InputControl
+              render={({ field: { onChange, ref, ...field } }) => (
+                <GrafanaAlertStatePicker
+                  {...field}
+                  inputId="no-data-state-input"
+                  width={42}
+                  includeNoData={true}
+                  includeError={false}
+                  onChange={(value) => onChange(value?.value)}
+                />
+              )}
+              name="noDataState"
+            />
+          </Field>
+          <Field htmlFor="exec-err-state-input" label="Alert state if execution error or timeout">
+            <InputControl
+              render={({ field: { onChange, ref, ...field } }) => (
+                <GrafanaAlertStatePicker
+                  {...field}
+                  inputId="exec-err-state-input"
+                  width={42}
+                  includeNoData={false}
+                  includeError={true}
+                  onChange={(value) => onChange(value?.value)}
+                />
+              )}
+              name="execErrState"
+            />
+          </Field>
+        </>
+      )}
+      <PreviewRule />
+    </RuleEditorSection>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  inlineField: css`
+    margin-bottom: 0;
+  `,
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+  `,
+  collapseToggle: css`
+    margin: ${theme.spacing(2, 0, 2, -1)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
new file mode 100644
index 00000000..a4b5022e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
@@ -0,0 +1,110 @@
+import React, { FC, useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { fetchRulerRulesAction } from '../../state/actions';
+import { RuleFormValues } from '../../types/rule-form';
+import { useFormContext } from 'react-hook-form';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { SelectWithAdd } from './SelectWIthAdd';
+import { Field, InputControl, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+
+interface Props {
+  rulesSourceName: string;
+}
+
+export const GroupAndNamespaceFields: FC<Props> = ({ rulesSourceName }) => {
+  const {
+    control,
+    watch,
+    formState: { errors },
+    setValue,
+  } = useFormContext<RuleFormValues>();
+
+  const style = useStyles2(getStyle);
+
+  const [customGroup, setCustomGroup] = useState(false);
+
+  const rulerRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(fetchRulerRulesAction({ rulesSourceName }));
+  }, [rulesSourceName, dispatch]);
+
+  const rulesConfig = rulerRequests[rulesSourceName]?.result;
+
+  const namespace = watch('namespace');
+
+  const namespaceOptions = useMemo(
+    (): Array<SelectableValue<string>> =>
+      rulesConfig ? Object.keys(rulesConfig).map((namespace) => ({ label: namespace, value: namespace })) : [],
+    [rulesConfig]
+  );
+
+  const groupOptions = useMemo(
+    (): Array<SelectableValue<string>> =>
+      (namespace && rulesConfig?.[namespace]?.map((group) => ({ label: group.name, value: group.name }))) || [],
+    [namespace, rulesConfig]
+  );
+
+  return (
+    <div className={style.flexRow}>
+      <Field
+        data-testid="namespace-picker"
+        label="Namespace"
+        error={errors.namespace?.message}
+        invalid={!!errors.namespace?.message}
+      >
+        <InputControl
+          render={({ field: { onChange, ref, ...field } }) => (
+            <SelectWithAdd
+              {...field}
+              className={style.input}
+              onChange={(value) => {
+                setValue('group', ''); //reset if namespace changes
+                onChange(value);
+              }}
+              onCustomChange={(custom: boolean) => {
+                custom && setCustomGroup(true);
+              }}
+              options={namespaceOptions}
+              width={42}
+            />
+          )}
+          name="namespace"
+          control={control}
+          rules={{
+            required: { value: true, message: 'Required.' },
+          }}
+        />
+      </Field>
+      <Field data-testid="group-picker" label="Group" error={errors.group?.message} invalid={!!errors.group?.message}>
+        <InputControl
+          render={({ field: { ref, ...field } }) => (
+            <SelectWithAdd {...field} options={groupOptions} width={42} custom={customGroup} className={style.input} />
+          )}
+          name="group"
+          control={control}
+          rules={{
+            required: { value: true, message: 'Required.' },
+          }}
+        />
+      </Field>
+    </div>
+  );
+};
+
+const getStyle = (theme: GrafanaTheme2) => ({
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    & > * + * {
+      margin-left: ${theme.spacing(3)};
+    }
+  `,
+  input: css`
+    width: 330px !important;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
new file mode 100644
index 00000000..d6e764bc
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
@@ -0,0 +1,142 @@
+import React, { FC } from 'react';
+import { Button, Field, FieldArray, Input, InlineLabel, Label, useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css, cx } from '@emotion/css';
+import { useFormContext } from 'react-hook-form';
+
+interface Props {
+  className?: string;
+}
+
+const LabelsField: FC<Props> = ({ className }) => {
+  const styles = useStyles(getStyles);
+  const {
+    register,
+    control,
+    watch,
+    formState: { errors },
+  } = useFormContext();
+  const labels = watch('labels');
+  return (
+    <div className={cx(className, styles.wrapper)}>
+      <Label>Custom Labels</Label>
+      <FieldArray control={control} name="labels">
+        {({ fields, append, remove }) => {
+          return (
+            <>
+              <div className={styles.flexRow}>
+                <InlineLabel width={18}>Labels</InlineLabel>
+                <div className={styles.flexColumn}>
+                  {fields.map((field, index) => {
+                    return (
+                      <div key={field.id}>
+                        <div className={cx(styles.flexRow, styles.centerAlignRow)}>
+                          <Field
+                            className={styles.labelInput}
+                            invalid={!!errors.labels?.[index]?.key?.message}
+                            error={errors.labels?.[index]?.key?.message}
+                          >
+                            <Input
+                              {...register(`labels[${index}].key`, {
+                                required: { value: !!labels[index]?.value, message: 'Required.' },
+                              })}
+                              placeholder="key"
+                              data-testid={`label-key-${index}`}
+                              defaultValue={field.key}
+                            />
+                          </Field>
+                          <InlineLabel className={styles.equalSign}>=</InlineLabel>
+                          <Field
+                            className={styles.labelInput}
+                            invalid={!!errors.labels?.[index]?.value?.message}
+                            error={errors.labels?.[index]?.value?.message}
+                          >
+                            <Input
+                              {...register(`labels[${index}].value`, {
+                                required: { value: !!labels[index]?.key, message: 'Required.' },
+                              })}
+                              placeholder="value"
+                              data-testid={`label-value-${index}`}
+                              defaultValue={field.value}
+                            />
+                          </Field>
+                          <Button
+                            className={styles.deleteLabelButton}
+                            aria-label="delete label"
+                            icon="trash-alt"
+                            variant="secondary"
+                            onClick={() => {
+                              remove(index);
+                            }}
+                          />
+                        </div>
+                      </div>
+                    );
+                  })}
+                  <Button
+                    className={styles.addLabelButton}
+                    icon="plus-circle"
+                    type="button"
+                    variant="secondary"
+                    onClick={() => {
+                      append({});
+                    }}
+                  >
+                    Add label
+                  </Button>
+                </div>
+              </div>
+            </>
+          );
+        }}
+      </FieldArray>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => {
+  return {
+    wrapper: css`
+      margin-top: ${theme.spacing.md};
+    `,
+    flexColumn: css`
+      display: flex;
+      flex-direction: column;
+    `,
+    flexRow: css`
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+
+      & + button {
+        margin-left: ${theme.spacing.xs};
+      }
+    `,
+    deleteLabelButton: css`
+      margin-left: ${theme.spacing.xs};
+      align-self: flex-start;
+    `,
+    addLabelButton: css`
+      flex-grow: 0;
+      align-self: flex-start;
+    `,
+    centerAlignRow: css`
+      align-items: baseline;
+    `,
+    equalSign: css`
+      align-self: flex-start;
+      width: 28px;
+      justify-content: center;
+      margin-left: ${theme.spacing.xs};
+    `,
+    labelInput: css`
+      width: 183px;
+      margin-bottom: ${theme.spacing.sm};
+      & + & {
+        margin-left: ${theme.spacing.sm};
+      }
+    `,
+  };
+};
+
+export default LabelsField;
diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
new file mode 100644
index 00000000..9cac7d83
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx
@@ -0,0 +1,100 @@
+import React, { useCallback, useState } from 'react';
+import { css } from '@emotion/css';
+import { useFormContext } from 'react-hook-form';
+import { takeWhile } from 'rxjs/operators';
+import { useMountedState } from 'react-use';
+import { Button, HorizontalGroup, useStyles2 } from '@grafana/ui';
+import { dateTimeFormatISO, GrafanaTheme2, LoadingState } from '@grafana/data';
+import { RuleFormType } from '../../types/rule-form';
+import { PreviewRuleRequest, PreviewRuleResponse } from '../../types/preview';
+import { previewAlertRule } from '../../api/preview';
+import { PreviewRuleResult } from './PreviewRuleResult';
+
+const fields: string[] = ['type', 'dataSourceName', 'condition', 'queries', 'expression'];
+
+export function PreviewRule(): React.ReactElement | null {
+  const styles = useStyles2(getStyles);
+  const [preview, onPreview] = usePreview();
+  const { watch } = useFormContext();
+  const [type, condition] = watch(['type', 'condition']);
+
+  if (type === RuleFormType.cloudRecording || type === RuleFormType.cloudAlerting) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <HorizontalGroup>
+        <Button disabled={!condition} type="button" variant="primary" onClick={onPreview}>
+          Preview alerts
+        </Button>
+      </HorizontalGroup>
+      <PreviewRuleResult preview={preview} />
+    </div>
+  );
+}
+
+function usePreview(): [PreviewRuleResponse | undefined, () => void] {
+  const [preview, setPreview] = useState<PreviewRuleResponse | undefined>();
+  const { getValues } = useFormContext();
+  const isMounted = useMountedState();
+
+  const onPreview = useCallback(() => {
+    const values = getValues(fields);
+    const request = createPreviewRequest(values);
+
+    previewAlertRule(request)
+      .pipe(takeWhile((response) => !isCompleted(response), true))
+      .subscribe((response) => {
+        if (!isMounted()) {
+          return;
+        }
+        setPreview(response);
+      });
+  }, [getValues, isMounted]);
+
+  return [preview, onPreview];
+}
+
+function createPreviewRequest(values: any[]): PreviewRuleRequest {
+  const [type, dataSourceName, condition, queries, expression] = values;
+
+  switch (type) {
+    case RuleFormType.cloudAlerting:
+      return {
+        dataSourceName,
+        expr: expression,
+      };
+
+    case RuleFormType.grafana:
+      return {
+        grafana_condition: {
+          condition,
+          data: queries,
+          now: dateTimeFormatISO(Date.now()),
+        },
+      };
+
+    default:
+      throw new Error(`Alert type ${type} not supported by preview.`);
+  }
+}
+
+function isCompleted(response: PreviewRuleResponse): boolean {
+  switch (response.data.state) {
+    case LoadingState.Done:
+    case LoadingState.Error:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css`
+      margin-top: ${theme.spacing(2)};
+      max-width: ${theme.breakpoints.values.xxl}px;
+    `,
+  };
+}
diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
new file mode 100644
index 00000000..0e77dbe8
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { TableCellDisplayMode, useStyles2 } from '@grafana/ui';
+import { PanelRenderer } from '@grafana/runtime';
+import { FieldConfigSource, FieldMatcherID, GrafanaTheme2, LoadingState } from '@grafana/data';
+import { PreviewRuleResponse } from '../../types/preview';
+import { RuleFormType } from '../../types/rule-form';
+import { messageFromError } from '../../utils/redux';
+
+type Props = {
+  preview: PreviewRuleResponse | undefined;
+};
+
+export function PreviewRuleResult(props: Props): React.ReactElement | null {
+  const { preview } = props;
+  const styles = useStyles2(getStyles);
+  const fieldConfig: FieldConfigSource = {
+    defaults: {},
+    overrides: [
+      {
+        matcher: { id: FieldMatcherID.byName, options: 'Info' },
+        properties: [{ id: 'custom.displayMode', value: TableCellDisplayMode.JSONView }],
+      },
+    ],
+  };
+
+  if (!preview) {
+    return null;
+  }
+
+  const { data, ruleType } = preview;
+
+  if (data.state === LoadingState.Loading) {
+    return (
+      <div className={styles.container}>
+        <span>Loading preview...</span>
+      </div>
+    );
+  }
+
+  if (data.state === LoadingState.Error) {
+    return (
+      <div className={styles.container}>
+        {data.error ? messageFromError(data.error) : 'Failed to preview alert rule'}
+      </div>
+    );
+  }
+  return (
+    <div className={styles.container}>
+      <span>
+        Preview based on the result of running the query, for this moment.{' '}
+        {ruleType === RuleFormType.grafana ? 'Configuration for `no data` and `error handling` is not applied.' : null}
+      </span>
+      <div className={styles.table}>
+        <AutoSizer>
+          {({ width, height }) => (
+            <div style={{ width: `${width}px`, height: `${height}px` }}>
+              <PanelRenderer
+                title=""
+                width={width}
+                height={height}
+                pluginId="table"
+                data={data}
+                fieldConfig={fieldConfig}
+              />
+            </div>
+          )}
+        </AutoSizer>
+      </div>
+    </div>
+  );
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css`
+      margin: ${theme.spacing(2)} 0;
+    `,
+    table: css`
+      flex: 1 1 auto;
+      height: 135px;
+      margin-top: ${theme.spacing(2)};
+      border: 1px solid ${theme.colors.border.medium};
+      border-radius: ${theme.shape.borderRadius(1)};
+    `,
+  };
+}
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
new file mode 100644
index 00000000..e94779bf
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
@@ -0,0 +1,234 @@
+import React, { PureComponent } from 'react';
+import { css } from '@emotion/css';
+import {
+  DataQuery,
+  getDefaultRelativeTimeRange,
+  GrafanaTheme2,
+  LoadingState,
+  PanelData,
+  RelativeTimeRange,
+} from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { Button, HorizontalGroup, Icon, stylesFactory, Tooltip } from '@grafana/ui';
+import { config } from '@grafana/runtime';
+import { QueryRows } from './QueryRows';
+import {
+  dataSource as expressionDatasource,
+  ExpressionDatasourceUID,
+} from 'app/features/expressions/ExpressionDatasource';
+import { getNextRefIdChar } from 'app/core/utils/query';
+import { defaultCondition } from 'app/features/expressions/utils/expressionTypes';
+import { ExpressionQueryType } from 'app/features/expressions/types';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+import { AlertingQueryRunner } from '../../state/AlertingQueryRunner';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { isExpressionQuery } from 'app/features/expressions/guards';
+
+interface Props {
+  value?: AlertQuery[];
+  onChange: (queries: AlertQuery[]) => void;
+}
+
+interface State {
+  panelDataByRefId: Record<string, PanelData>;
+}
+export class QueryEditor extends PureComponent<Props, State> {
+  private runner: AlertingQueryRunner;
+  private queries: AlertQuery[];
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { panelDataByRefId: {} };
+    this.runner = new AlertingQueryRunner();
+    this.queries = props.value ?? [];
+  }
+
+  componentDidMount() {
+    this.runner.get().subscribe((data) => {
+      this.setState({ panelDataByRefId: data });
+    });
+  }
+
+  componentWillUnmount() {
+    this.runner.destroy();
+  }
+
+  onRunQueries = () => {
+    const { queries } = this;
+    this.runner.run(queries);
+  };
+
+  onCancelQueries = () => {
+    this.runner.cancel();
+  };
+
+  onChangeQueries = (queries: AlertQuery[]) => {
+    this.queries = queries;
+    this.props.onChange(queries);
+  };
+
+  onDuplicateQuery = (query: AlertQuery) => {
+    const { queries } = this;
+    this.onChangeQueries(addQuery(queries, query));
+  };
+
+  onNewAlertingQuery = () => {
+    const { queries } = this;
+    const defaultDataSource = getDatasourceSrv().getInstanceSettings('default');
+
+    if (!defaultDataSource) {
+      return;
+    }
+
+    this.onChangeQueries(
+      addQuery(queries, {
+        datasourceUid: defaultDataSource.uid,
+        model: {
+          refId: '',
+          datasource: {
+            type: defaultDataSource.type,
+            uid: defaultDataSource.uid,
+          },
+        },
+      })
+    );
+  };
+
+  onNewExpressionQuery = () => {
+    const { queries } = this;
+
+    this.onChangeQueries(
+      addQuery(queries, {
+        datasourceUid: ExpressionDatasourceUID,
+        model: expressionDatasource.newQuery({
+          type: ExpressionQueryType.classic,
+          conditions: [defaultCondition],
+        }),
+      })
+    );
+  };
+
+  renderAddQueryRow(styles: ReturnType<typeof getStyles>) {
+    return (
+      <HorizontalGroup spacing="md" align="flex-start">
+        <Button
+          type="button"
+          icon="plus"
+          onClick={this.onNewAlertingQuery}
+          variant="secondary"
+          aria-label={selectors.components.QueryTab.addQuery}
+        >
+          Query
+        </Button>
+        {config.expressionsEnabled && (
+          <Tooltip content="Beta feature: queries could stop working in next version" placement="right">
+            <Button
+              type="button"
+              icon="plus"
+              onClick={this.onNewExpressionQuery}
+              variant="secondary"
+              className={styles.expressionButton}
+            >
+              <span>Expression </span>
+              <Icon name="exclamation-triangle" className="muted" size="sm" />
+            </Button>
+          </Tooltip>
+        )}
+      </HorizontalGroup>
+    );
+  }
+
+  isRunning() {
+    const data = Object.values(this.state.panelDataByRefId).find((d) => Boolean(d));
+    return data?.state === LoadingState.Loading;
+  }
+
+  renderRunQueryButton() {
+    const isRunning = this.isRunning();
+    const styles = getStyles(config.theme2);
+
+    if (isRunning) {
+      return (
+        <div className={styles.runWrapper}>
+          <Button icon="fa fa-spinner" type="button" variant="destructive" onClick={this.onCancelQueries}>
+            Cancel
+          </Button>
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.runWrapper}>
+        <Button icon="sync" type="button" onClick={this.onRunQueries}>
+          Run queries
+        </Button>
+      </div>
+    );
+  }
+
+  render() {
+    const { value = [] } = this.props;
+    const { panelDataByRefId } = this.state;
+    const styles = getStyles(config.theme2);
+
+    return (
+      <div className={styles.container}>
+        <QueryRows
+          data={panelDataByRefId}
+          queries={value}
+          onQueriesChange={this.onChangeQueries}
+          onDuplicateQuery={this.onDuplicateQuery}
+          onRunQueries={this.onRunQueries}
+        />
+        {this.renderAddQueryRow(styles)}
+        {this.renderRunQueryButton()}
+      </div>
+    );
+  }
+}
+
+const addQuery = (queries: AlertQuery[], queryToAdd: Pick<AlertQuery, 'model' | 'datasourceUid'>): AlertQuery[] => {
+  const refId = getNextRefIdChar(queries);
+
+  const query: AlertQuery = {
+    ...queryToAdd,
+    refId,
+    queryType: '',
+    model: {
+      ...queryToAdd.model,
+      hide: false,
+      refId,
+    },
+    relativeTimeRange: defaultTimeRange(queryToAdd.model),
+  };
+
+  return [...queries, query];
+};
+
+const defaultTimeRange = (model: DataQuery): RelativeTimeRange | undefined => {
+  if (isExpressionQuery(model)) {
+    return;
+  }
+
+  return getDefaultRelativeTimeRange();
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
+  return {
+    container: css`
+      background-color: ${theme.colors.background.primary};
+      height: 100%;
+      max-width: ${theme.breakpoints.values.xxl}px;
+    `,
+    runWrapper: css`
+      margin-top: ${theme.spacing(1)};
+    `,
+    editorWrapper: css`
+      border: 1px solid ${theme.colors.border.medium};
+      border-radius: ${theme.shape.borderRadius()};
+    `,
+    expressionButton: css`
+      margin-right: ${theme.spacing(0.5)};
+    `,
+  };
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
new file mode 100644
index 00000000..1bd3a659
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
@@ -0,0 +1,277 @@
+import React, { PureComponent } from 'react';
+import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import {
+  DataQuery,
+  DataSourceInstanceSettings,
+  LoadingState,
+  PanelData,
+  RelativeTimeRange,
+  ThresholdsConfig,
+  ThresholdsMode,
+} from '@grafana/data';
+import { config, getDataSourceSrv } from '@grafana/runtime';
+import { QueryWrapper } from './QueryWrapper';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+import { isExpressionQuery } from 'app/features/expressions/guards';
+import { queriesWithUpdatedReferences } from './util';
+
+interface Props {
+  // The query configuration
+  queries: AlertQuery[];
+  data: Record<string, PanelData>;
+
+  // Query editing
+  onQueriesChange: (queries: AlertQuery[]) => void;
+  onDuplicateQuery: (query: AlertQuery) => void;
+  onRunQueries: () => void;
+}
+
+interface State {
+  dataPerQuery: Record<string, PanelData>;
+}
+
+export class QueryRows extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = { dataPerQuery: {} };
+  }
+
+  onRemoveQuery = (query: DataQuery) => {
+    this.props.onQueriesChange(
+      this.props.queries.filter((item) => {
+        return item.model.refId !== query.refId;
+      })
+    );
+  };
+
+  onChangeTimeRange = (timeRange: RelativeTimeRange, index: number) => {
+    const { queries, onQueriesChange } = this.props;
+    onQueriesChange(
+      queries.map((item, itemIndex) => {
+        if (itemIndex !== index) {
+          return item;
+        }
+        return {
+          ...item,
+          relativeTimeRange: timeRange,
+        };
+      })
+    );
+  };
+
+  onChangeThreshold = (thresholds: ThresholdsConfig, index: number) => {
+    const { queries, onQueriesChange } = this.props;
+
+    const referencedRefId = queries[index].refId;
+
+    onQueriesChange(
+      queries.map((query) => {
+        if (!isExpressionQuery(query.model)) {
+          return query;
+        }
+
+        if (query.model.conditions && query.model.conditions[0].query.params[0] === referencedRefId) {
+          return {
+            ...query,
+            model: {
+              ...query.model,
+              conditions: query.model.conditions.map((condition, conditionIndex) => {
+                // Only update the first condition for a given refId.
+                if (condition.query.params[0] === referencedRefId && conditionIndex === 0) {
+                  return {
+                    ...condition,
+                    evaluator: {
+                      ...condition.evaluator,
+                      params: [parseFloat(thresholds.steps[1].value.toPrecision(3))],
+                    },
+                  };
+                }
+                return condition;
+              }),
+            },
+          };
+        }
+        return query;
+      })
+    );
+  };
+
+  onChangeDataSource = (settings: DataSourceInstanceSettings, index: number) => {
+    const { queries, onQueriesChange } = this.props;
+
+    onQueriesChange(
+      queries.map((item, itemIndex) => {
+        if (itemIndex !== index) {
+          return item;
+        }
+
+        const previous = getDataSourceSrv().getInstanceSettings(item.datasourceUid);
+
+        if (previous?.type === settings.uid) {
+          return {
+            ...item,
+            datasourceUid: settings.uid,
+          };
+        }
+
+        const { refId, hide } = item.model;
+
+        return {
+          ...item,
+          datasourceUid: settings.uid,
+          model: { refId, hide },
+        };
+      })
+    );
+  };
+
+  onChangeQuery = (query: DataQuery, index: number) => {
+    const { queries, onQueriesChange } = this.props;
+
+    // find what queries still have a reference to the old name
+    const previousRefId = queries[index].refId;
+    const newRefId = query.refId;
+
+    onQueriesChange(
+      queriesWithUpdatedReferences(queries, previousRefId, newRefId).map((item, itemIndex) => {
+        if (itemIndex !== index) {
+          return item;
+        }
+
+        return {
+          ...item,
+          refId: query.refId,
+          queryType: item.model.queryType ?? '',
+          model: {
+            ...item.model,
+            ...query,
+            datasource: query.datasource!,
+          },
+        };
+      })
+    );
+  };
+
+  onDragEnd = (result: DropResult) => {
+    const { queries, onQueriesChange } = this.props;
+
+    if (!result || !result.destination) {
+      return;
+    }
+
+    const startIndex = result.source.index;
+    const endIndex = result.destination.index;
+    if (startIndex === endIndex) {
+      return;
+    }
+
+    const update = Array.from(queries);
+    const [removed] = update.splice(startIndex, 1);
+    update.splice(endIndex, 0, removed);
+    onQueriesChange(update);
+  };
+
+  onDuplicateQuery = (query: DataQuery, source: AlertQuery): void => {
+    this.props.onDuplicateQuery({
+      ...source,
+      model: query,
+    });
+  };
+
+  getDataSourceSettings = (query: AlertQuery): DataSourceInstanceSettings | undefined => {
+    return getDataSourceSrv().getInstanceSettings(query.datasourceUid);
+  };
+
+  getThresholdsForQueries = (queries: AlertQuery[]): Record<string, ThresholdsConfig> => {
+    const record: Record<string, ThresholdsConfig> = {};
+
+    for (const query of queries) {
+      if (!isExpressionQuery(query.model)) {
+        continue;
+      }
+
+      if (!Array.isArray(query.model.conditions)) {
+        continue;
+      }
+
+      query.model.conditions.forEach((condition, index) => {
+        if (index > 0) {
+          return;
+        }
+        const threshold = condition.evaluator.params[0];
+        const refId = condition.query.params[0];
+
+        if (condition.evaluator.type === 'outside_range' || condition.evaluator.type === 'within_range') {
+          return;
+        }
+        if (!record[refId]) {
+          record[refId] = {
+            mode: ThresholdsMode.Absolute,
+            steps: [
+              {
+                value: -Infinity,
+                color: config.theme2.colors.success.main,
+              },
+            ],
+          };
+        }
+
+        record[refId].steps.push({
+          value: threshold,
+          color: config.theme2.colors.error.main,
+        });
+      });
+    }
+
+    return record;
+  };
+
+  render() {
+    const { onDuplicateQuery, onRunQueries, queries } = this.props;
+    const thresholdByRefId = this.getThresholdsForQueries(queries);
+
+    return (
+      <DragDropContext onDragEnd={this.onDragEnd}>
+        <Droppable droppableId="alerting-queries" direction="vertical">
+          {(provided) => {
+            return (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                {queries.map((query, index) => {
+                  const data: PanelData = this.props.data?.[query.refId] ?? {
+                    series: [],
+                    state: LoadingState.NotStarted,
+                  };
+                  const dsSettings = this.getDataSourceSettings(query);
+
+                  if (!dsSettings) {
+                    return null;
+                  }
+                  return (
+                    <QueryWrapper
+                      index={index}
+                      key={`${query.refId}-${index}`}
+                      dsSettings={dsSettings}
+                      data={data}
+                      query={query}
+                      onChangeQuery={this.onChangeQuery}
+                      onRemoveQuery={this.onRemoveQuery}
+                      queries={queries}
+                      onChangeDataSource={this.onChangeDataSource}
+                      onDuplicateQuery={onDuplicateQuery}
+                      onRunQueries={onRunQueries}
+                      onChangeTimeRange={this.onChangeTimeRange}
+                      thresholds={thresholdByRefId[query.refId]}
+                      onChangeThreshold={this.onChangeThreshold}
+                    />
+                  );
+                })}
+                {provided.placeholder}
+              </div>
+            );
+          }}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+}
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryStep.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryStep.tsx
new file mode 100644
index 00000000..a77c592c
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryStep.tsx
@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Field, InputControl } from '@grafana/ui';
+import { ExpressionEditor } from './ExpressionEditor';
+import { RuleEditorSection } from './RuleEditorSection';
+import { RuleFormType, RuleFormValues } from '../../types/rule-form';
+import { QueryEditor } from './QueryEditor';
+
+export const QueryStep: FC = () => {
+  const {
+    control,
+    watch,
+    formState: { errors },
+  } = useFormContext<RuleFormValues>();
+  const type = watch('type');
+  const dataSourceName = watch('dataSourceName');
+  return (
+    <RuleEditorSection
+      stepNo={2}
+      title={type === RuleFormType.cloudRecording ? 'Create a query to be recorded' : 'Create a query to be alerted on'}
+    >
+      {(type === RuleFormType.cloudRecording || type === RuleFormType.cloudAlerting) && dataSourceName && (
+        <Field error={errors.expression?.message} invalid={!!errors.expression?.message}>
+          <InputControl
+            name="expression"
+            render={({ field: { ref, ...field } }) => <ExpressionEditor {...field} dataSourceName={dataSourceName} />}
+            control={control}
+            rules={{
+              required: { value: true, message: 'A valid expression is required' },
+            }}
+          />
+        </Field>
+      )}
+      {type === RuleFormType.grafana && (
+        <Field
+          invalid={!!errors.queries}
+          error={(!!errors.queries && 'Must provide at least one valid query.') || undefined}
+        >
+          <InputControl
+            name="queries"
+            render={({ field: { ref, ...field } }) => <QueryEditor {...field} />}
+            control={control}
+            rules={{
+              validate: (queries) => Array.isArray(queries) && !!queries.length,
+            }}
+          />
+        </Field>
+      )}
+    </RuleEditorSection>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
new file mode 100644
index 00000000..cb2d6695
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
@@ -0,0 +1,113 @@
+import React, { FC, ReactNode, useState } from 'react';
+import { css } from '@emotion/css';
+import { cloneDeep } from 'lodash';
+import {
+  CoreApp,
+  DataQuery,
+  DataSourceInstanceSettings,
+  getDefaultRelativeTimeRange,
+  GrafanaTheme2,
+  LoadingState,
+  PanelData,
+  RelativeTimeRange,
+  ThresholdsConfig,
+} from '@grafana/data';
+import { RelativeTimeRangePicker, useStyles2 } from '@grafana/ui';
+import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow';
+import { VizWrapper } from './VizWrapper';
+import { isExpressionQuery } from 'app/features/expressions/guards';
+import { TABLE, TIMESERIES } from '../../utils/constants';
+import { SupportedPanelPlugins } from '../PanelPluginsButtonGroup';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+
+interface Props {
+  data: PanelData;
+  query: AlertQuery;
+  queries: AlertQuery[];
+  dsSettings: DataSourceInstanceSettings;
+  onChangeDataSource: (settings: DataSourceInstanceSettings, index: number) => void;
+  onChangeQuery: (query: DataQuery, index: number) => void;
+  onChangeTimeRange?: (timeRange: RelativeTimeRange, index: number) => void;
+  onRemoveQuery: (query: DataQuery) => void;
+  onDuplicateQuery: (query: AlertQuery) => void;
+  onRunQueries: () => void;
+  index: number;
+  thresholds: ThresholdsConfig;
+  onChangeThreshold: (thresholds: ThresholdsConfig, index: number) => void;
+}
+
+export const QueryWrapper: FC<Props> = ({
+  data,
+  dsSettings,
+  index,
+  onChangeDataSource,
+  onChangeQuery,
+  onChangeTimeRange,
+  onRunQueries,
+  onRemoveQuery,
+  onDuplicateQuery,
+  query,
+  queries,
+  thresholds,
+  onChangeThreshold,
+}) => {
+  const styles = useStyles2(getStyles);
+  const isExpression = isExpressionQuery(query.model);
+  const [pluginId, changePluginId] = useState<SupportedPanelPlugins>(isExpression ? TABLE : TIMESERIES);
+
+  const renderTimePicker = (query: AlertQuery, index: number): ReactNode => {
+    if (isExpressionQuery(query.model) || !onChangeTimeRange) {
+      return null;
+    }
+
+    return (
+      <RelativeTimeRangePicker
+        timeRange={query.relativeTimeRange ?? getDefaultRelativeTimeRange()}
+        onChange={(range) => onChangeTimeRange(range, index)}
+      />
+    );
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <QueryEditorRow<DataQuery>
+        dataSource={dsSettings}
+        onChangeDataSource={!isExpression ? (settings) => onChangeDataSource(settings, index) : undefined}
+        id={query.refId}
+        index={index}
+        key={query.refId}
+        data={data}
+        query={cloneDeep(query.model)}
+        onChange={(query) => onChangeQuery(query, index)}
+        onRemoveQuery={onRemoveQuery}
+        onAddQuery={() => onDuplicateQuery(cloneDeep(query))}
+        onRunQuery={onRunQueries}
+        queries={queries}
+        renderHeaderExtras={() => renderTimePicker(query, index)}
+        app={CoreApp.UnifiedAlerting}
+        visualization={
+          data.state !== LoadingState.NotStarted ? (
+            <VizWrapper
+              data={data}
+              changePanel={changePluginId}
+              currentPanel={pluginId}
+              thresholds={thresholds}
+              onThresholdsChange={(thresholds) => onChangeThreshold(thresholds, index)}
+            />
+          ) : null
+        }
+        hideDisableQuery={true}
+      />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    label: AlertingQueryWrapper;
+    margin-bottom: ${theme.spacing(1)};
+    border: 1px solid ${theme.colors.border.medium};
+    border-radius: ${theme.shape.borderRadius(1)};
+    padding-bottom: ${theme.spacing(1)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
new file mode 100644
index 00000000..220e314c
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx
@@ -0,0 +1,63 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { FieldSet, useStyles2 } from '@grafana/ui';
+import React, { FC } from 'react';
+
+export interface RuleEditorSectionProps {
+  title: string;
+  stepNo: number;
+  description?: string;
+}
+
+export const RuleEditorSection: FC<RuleEditorSectionProps> = ({ title, stepNo, children, description }) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.parent}>
+      <div>
+        <span className={styles.stepNo}>{stepNo}</span>
+      </div>
+      <div className={styles.content}>
+        <FieldSet label={title} className={styles.fieldset}>
+          {description && <p className={styles.description}>{description}</p>}
+          {children}
+        </FieldSet>
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  fieldset: css`
+    legend {
+      font-size: 16px;
+      padding-top: ${theme.spacing(0.5)};
+    }
+  `,
+  parent: css`
+    display: flex;
+    flex-direction: row;
+    max-width: ${theme.breakpoints.values.xl};
+    & + & {
+      margin-top: ${theme.spacing(4)};
+    }
+  `,
+  description: css`
+    margin-top: -${theme.spacing(2)};
+  `,
+  stepNo: css`
+    display: inline-block;
+    width: ${theme.spacing(4)};
+    height: ${theme.spacing(4)};
+    line-height: ${theme.spacing(4)};
+    border-radius: ${theme.spacing(4)};
+    text-align: center;
+    color: ${theme.colors.text.maxContrast};
+    background-color: ${theme.colors.background.canvas};
+    font-size: ${theme.typography.size.lg};
+    margin-right: ${theme.spacing(2)};
+  `,
+  content: css`
+    flex: 1;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
new file mode 100644
index 00000000..c608bec4
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { FolderPicker, Props as FolderPickerProps } from 'app/core/components/Select/FolderPicker';
+
+export interface Folder {
+  title: string;
+  id: number;
+}
+
+export interface Props extends Omit<FolderPickerProps, 'initialTitle' | 'initialFolderId'> {
+  value?: Folder;
+}
+
+export const RuleFolderPicker: FC<Props> = ({ value, ...props }) => (
+  <FolderPicker showRoot={false} allowEmpty={true} initialTitle={value?.title} initialFolderId={value?.id} {...props} />
+);
diff --git a/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx b/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
new file mode 100644
index 00000000..34b11dc1
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
@@ -0,0 +1,84 @@
+import { SelectableValue } from '@grafana/data';
+import { Input, Select } from '@grafana/ui';
+import React, { FC, useEffect, useMemo, useState } from 'react';
+
+interface Props {
+  onChange: (value: string) => void;
+  options: Array<SelectableValue<string>>;
+  value?: string;
+  addLabel?: string;
+  className?: string;
+  placeholder?: string;
+  custom?: boolean;
+  onCustomChange?: (custom: boolean) => void;
+  width?: number;
+  disabled?: boolean;
+  'aria-label'?: string;
+}
+
+export const SelectWithAdd: FC<Props> = ({
+  value,
+  onChange,
+  options,
+  className,
+  placeholder,
+  width,
+  custom,
+  onCustomChange,
+  disabled = false,
+  addLabel = '+ Add new',
+  'aria-label': ariaLabel,
+}) => {
+  const [isCustom, setIsCustom] = useState(custom);
+
+  useEffect(() => {
+    if (custom) {
+      setIsCustom(custom);
+    }
+  }, [custom]);
+
+  const _options = useMemo((): Array<SelectableValue<string>> => [...options, { value: '__add__', label: addLabel }], [
+    options,
+    addLabel,
+  ]);
+
+  if (isCustom) {
+    return (
+      <Input
+        aria-label={ariaLabel}
+        width={width}
+        autoFocus={!custom}
+        value={value || ''}
+        placeholder={placeholder}
+        className={className}
+        disabled={disabled}
+        onChange={(e) => onChange((e.target as HTMLInputElement).value)}
+      />
+    );
+  } else {
+    return (
+      <Select
+        menuShouldPortal
+        aria-label={ariaLabel}
+        width={width}
+        options={_options}
+        value={value}
+        className={className}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(val: SelectableValue) => {
+          const value = val?.value;
+          if (value === '__add__') {
+            setIsCustom(true);
+            if (onCustomChange) {
+              onCustomChange(true);
+            }
+            onChange('');
+          } else {
+            onChange(value);
+          }
+        }}
+      />
+    );
+  }
+};
diff --git a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
new file mode 100644
index 00000000..d826ec64
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
@@ -0,0 +1,127 @@
+import React, { FC, useEffect, useMemo, useState } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { css } from '@emotion/css';
+import { FieldConfigSource, GrafanaTheme2, PanelData, ThresholdsConfig } from '@grafana/data';
+import { PanelRenderer } from '@grafana/runtime';
+import { PanelContext, PanelContextProvider, useStyles2 } from '@grafana/ui';
+import { GraphFieldConfig, GraphTresholdsStyleMode } from '@grafana/schema';
+import { PanelOptions } from 'app/plugins/panel/table/models.gen';
+import { useVizHeight } from '../../hooks/useVizHeight';
+import { SupportedPanelPlugins, PanelPluginsButtonGroup } from '../PanelPluginsButtonGroup';
+import appEvents from 'app/core/app_events';
+
+interface Props {
+  data: PanelData;
+  currentPanel: SupportedPanelPlugins;
+  changePanel: (panel: SupportedPanelPlugins) => void;
+  thresholds: ThresholdsConfig;
+  onThresholdsChange: (thresholds: ThresholdsConfig) => void;
+}
+
+type PanelFieldConfig = FieldConfigSource<GraphFieldConfig>;
+
+export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel, onThresholdsChange, thresholds }) => {
+  const [options, setOptions] = useState<PanelOptions>({
+    frameIndex: 0,
+    showHeader: true,
+  });
+  const vizHeight = useVizHeight(data, currentPanel, options.frameIndex);
+  const styles = useStyles2(getStyles(vizHeight));
+
+  const [fieldConfig, setFieldConfig] = useState<PanelFieldConfig>(defaultFieldConfig(thresholds, data));
+
+  useEffect(() => {
+    setFieldConfig((fieldConfig) => ({
+      ...fieldConfig,
+      defaults: {
+        ...fieldConfig.defaults,
+        thresholds: thresholds,
+        unit: defaultUnit(data),
+        custom: {
+          ...fieldConfig.defaults.custom,
+          thresholdsStyle: {
+            mode: GraphTresholdsStyleMode.Line,
+          },
+        },
+      },
+    }));
+  }, [thresholds, setFieldConfig, data]);
+
+  const context: PanelContext = useMemo(
+    () => ({
+      eventBus: appEvents,
+      canEditThresholds: true,
+      onThresholdsChange: onThresholdsChange,
+    }),
+    [onThresholdsChange]
+  );
+
+  if (!options || !data) {
+    return null;
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.buttonGroup}>
+        <PanelPluginsButtonGroup onChange={changePanel} value={currentPanel} />
+      </div>
+      <AutoSizer>
+        {({ width }) => {
+          if (width === 0) {
+            return null;
+          }
+          return (
+            <div style={{ height: `${vizHeight}px`, width: `${width}px` }}>
+              <PanelContextProvider value={context}>
+                <PanelRenderer
+                  height={vizHeight}
+                  width={width}
+                  data={data}
+                  pluginId={currentPanel}
+                  title="title"
+                  onOptionsChange={setOptions}
+                  options={options}
+                  fieldConfig={fieldConfig}
+                />
+              </PanelContextProvider>
+            </div>
+          );
+        }}
+      </AutoSizer>
+    </div>
+  );
+};
+
+const getStyles = (visHeight: number) => (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    padding: 0 ${theme.spacing(2)};
+    height: ${visHeight + theme.spacing.gridSize * 4}px;
+  `,
+  buttonGroup: css`
+    display: flex;
+    justify-content: flex-end;
+  `,
+});
+
+function defaultUnit(data: PanelData): string | undefined {
+  return data.series[0]?.fields.find((field) => field.type === 'number')?.config.unit;
+}
+
+function defaultFieldConfig(thresholds: ThresholdsConfig, data: PanelData): PanelFieldConfig {
+  if (!thresholds) {
+    return { defaults: {}, overrides: [] };
+  }
+
+  return {
+    defaults: {
+      thresholds: thresholds,
+      unit: defaultUnit(data),
+      custom: {
+        thresholdsStyle: {
+          mode: GraphTresholdsStyleMode.Line,
+        },
+      },
+    },
+    overrides: [],
+  };
+}
diff --git a/public/app/features/alerting/unified/components/rule-editor/util.test.ts b/public/app/features/alerting/unified/components/rule-editor/util.test.ts
new file mode 100644
index 00000000..7b62497f
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/util.test.ts
@@ -0,0 +1,193 @@
+import { ClassicCondition, ExpressionQuery } from 'app/features/expressions/types';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+import { queriesWithUpdatedReferences, updateMathExpressionRefs } from './util';
+import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend';
+
+describe('rule-editor', () => {
+  const dataSource: AlertQuery = {
+    refId: 'A',
+    datasourceUid: 'abc123',
+    queryType: '',
+    relativeTimeRange: {
+      from: 600,
+      to: 0,
+    },
+    model: {
+      refId: 'A',
+    },
+  };
+
+  const classicCondition = {
+    refId: 'B',
+    datasourceUid: '-100',
+    queryType: '',
+    model: {
+      refId: 'B',
+      type: 'classic_conditions',
+      datasource: ExpressionDatasourceRef,
+      conditions: [
+        {
+          type: 'query',
+          evaluator: {
+            params: [3],
+            type: 'gt',
+          },
+          operator: {
+            type: 'and',
+          },
+          query: {
+            params: ['A'],
+          },
+          reducer: {
+            params: [],
+            type: 'last',
+          },
+        },
+      ],
+    },
+  };
+
+  const mathExpression = {
+    refId: 'B',
+    datasourceUid: '-100',
+    queryType: '',
+    model: {
+      refId: 'B',
+      type: 'math',
+      datasource: ExpressionDatasourceRef,
+      conditions: [],
+      expression: 'abs($A) + $A',
+    },
+  };
+
+  const reduceExpression = {
+    refId: 'B',
+    datasourceUid: '-100',
+    queryType: '',
+    model: {
+      refId: 'B',
+      type: 'reduce',
+      datasource: ExpressionDatasourceRef,
+      conditions: [],
+      reducer: 'mean',
+      expression: 'A',
+    },
+  };
+
+  const resampleExpression = {
+    refId: 'A',
+    datasourceUid: '-100',
+    model: {
+      refId: 'A',
+      type: 'resample',
+      datasource: {
+        type: '__expr__',
+        uid: '__expr__',
+      },
+      conditions: [],
+      downsampler: 'mean',
+      upsampler: 'fillna',
+      expression: 'A',
+      window: '30m',
+    },
+    queryType: '',
+  };
+
+  describe('rewires query names', () => {
+    it('should rewire classic expressions', () => {
+      const queries: AlertQuery[] = [dataSource, classicCondition];
+      const rewiredQueries = queriesWithUpdatedReferences(queries, 'A', 'C');
+
+      const queryModel = rewiredQueries[1].model as ExpressionQuery;
+
+      const checkConditionParams = (condition: ClassicCondition) => {
+        return expect(condition.query.params).toEqual(['C']);
+      };
+
+      expect(queryModel.conditions?.every(checkConditionParams));
+    });
+
+    it('should rewire math expressions', () => {
+      const queries: AlertQuery[] = [dataSource, mathExpression];
+      const rewiredQueries = queriesWithUpdatedReferences(queries, 'A', 'Query A');
+
+      const queryModel = rewiredQueries[1].model as ExpressionQuery;
+
+      expect(queryModel.expression).toBe('abs(${Query A}) + ${Query A}');
+    });
+
+    it('should rewire reduce expressions', () => {
+      const queries: AlertQuery[] = [dataSource, reduceExpression];
+      const rewiredQueries = queriesWithUpdatedReferences(queries, 'A', 'C');
+
+      const queryModel = rewiredQueries[1].model as ExpressionQuery;
+      expect(queryModel.expression).toBe('C');
+    });
+
+    it('should rewire resample expressions', () => {
+      const queries: AlertQuery[] = [dataSource, resampleExpression];
+      const rewiredQueries = queriesWithUpdatedReferences(queries, 'A', 'C');
+
+      const queryModel = rewiredQueries[1].model as ExpressionQuery;
+      expect(queryModel.expression).toBe('C');
+    });
+
+    it('should rewire multiple expressions', () => {
+      const queries: AlertQuery[] = [dataSource, mathExpression, resampleExpression];
+      const rewiredQueries = queriesWithUpdatedReferences(queries, 'A', 'C');
+
+      expect(rewiredQueries[1].model as ExpressionQuery).toHaveProperty('expression', 'abs(${C}) + ${C}');
+      expect(rewiredQueries[2].model as ExpressionQuery).toHaveProperty('expression', 'C');
+    });
+
+    it('should skip if refs are identical', () => {
+      const queries: AlertQuery[] = [dataSource, reduceExpression, mathExpression];
+      const rewiredQueries = queriesWithUpdatedReferences(queries, 'A', 'A');
+
+      expect(rewiredQueries[0]).toEqual(queries[0]);
+      expect(rewiredQueries[1]).toEqual(queries[1]);
+      expect(rewiredQueries[2]).toEqual(queries[2]);
+    });
+
+    it('should not rewire non-referencing expressions', () => {
+      const dataSource1 = { ...dataSource, refId: 'Q1' };
+      const dataSource2 = { ...dataSource, refId: 'Q2' };
+      const condition1 = {
+        ...classicCondition,
+        refId: 'A',
+        model: {
+          ...classicCondition.model,
+          conditions: [
+            {
+              ...classicCondition.model.conditions[0],
+              query: { params: ['Q1'] },
+            },
+          ],
+        },
+      };
+      const condition2 = { ...reduceExpression, refId: 'B', model: { ...reduceExpression.model, expression: 'Q1' } };
+      const condition3 = { ...mathExpression, refId: 'C', model: { ...mathExpression.model, expression: '${Q1}' } };
+
+      const queries: AlertQuery[] = [dataSource1, dataSource2, condition1, condition2, condition3];
+      const rewiredQueries = queriesWithUpdatedReferences(queries, 'Q2', 'Q3');
+
+      expect(rewiredQueries[0]).toEqual(queries[0]);
+      expect(rewiredQueries[1]).toEqual(queries[1]);
+      expect(rewiredQueries[2]).toEqual(queries[2]);
+      expect(rewiredQueries[3]).toEqual(queries[3]);
+      expect(rewiredQueries[4]).toEqual(queries[4]);
+    });
+  });
+
+  describe('updateMathExpressionRefs', () => {
+    it('should rewire refs without brackets', () => {
+      expect(updateMathExpressionRefs('abs($Foo) + $Foo', 'Foo', 'Bar')).toBe('abs(${Bar}) + ${Bar}');
+    });
+    it('should rewire refs with brackets', () => {
+      expect(updateMathExpressionRefs('abs(${Foo}) + $Foo', 'Foo', 'Bar')).toBe('abs(${Bar}) + ${Bar}');
+    });
+    it('should not rewire refs with partial variable match', () => {
+      expect(updateMathExpressionRefs('$A3 + $B', 'A', 'C')).toBe('$A3 + $B');
+    });
+  });
+});
diff --git a/public/app/features/alerting/unified/components/rule-editor/util.ts b/public/app/features/alerting/unified/components/rule-editor/util.ts
new file mode 100644
index 00000000..04e488b2
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-editor/util.ts
@@ -0,0 +1,66 @@
+import { isExpressionQuery } from 'app/features/expressions/guards';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+
+export function queriesWithUpdatedReferences(
+  queries: AlertQuery[],
+  previousRefId: string,
+  newRefId: string
+): AlertQuery[] {
+  return queries.map((query) => {
+    if (previousRefId === newRefId) {
+      return query;
+    }
+
+    if (!isExpressionQuery(query.model)) {
+      return query;
+    }
+
+    const isMathExpression = query.model.type === 'math';
+    const isReduceExpression = query.model.type === 'reduce';
+    const isResampleExpression = query.model.type === 'resample';
+    const isClassicExpression = query.model.type === 'classic_conditions';
+
+    if (isMathExpression) {
+      return {
+        ...query,
+        model: {
+          ...query.model,
+          expression: updateMathExpressionRefs(query.model.expression ?? '', previousRefId, newRefId),
+        },
+      };
+    }
+
+    if (isResampleExpression || isReduceExpression) {
+      const isReferencing = query.model.expression === previousRefId;
+
+      return {
+        ...query,
+        model: {
+          ...query.model,
+          expression: isReferencing ? newRefId : query.model.expression,
+        },
+      };
+    }
+
+    if (isClassicExpression) {
+      const conditions = query.model.conditions?.map((condition) => ({
+        ...condition,
+        query: {
+          ...condition.query,
+          params: condition.query.params.map((param: string) => (param === previousRefId ? newRefId : param)),
+        },
+      }));
+
+      return { ...query, model: { ...query.model, conditions } };
+    }
+
+    return query;
+  });
+}
+
+export function updateMathExpressionRefs(expression: string, previousRefId: string, newRefId: string): string {
+  const oldExpression = new RegExp('(\\$' + previousRefId + '\\b)|(\\${' + previousRefId + '})', 'gm');
+  const newExpression = '${' + newRefId + '}';
+
+  return expression.replace(oldExpression, newExpression);
+}
diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx
new file mode 100644
index 00000000..1dff5a18
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+import { PageToolbar, useStyles2 } from '@grafana/ui';
+import { Page } from 'app/core/components/Page/Page';
+
+type Props = {
+  children: React.ReactNode | React.ReactNode[];
+  title: string;
+  wrapInContent?: boolean;
+};
+
+export function RuleViewerLayout(props: Props): JSX.Element | null {
+  const { wrapInContent = true, children, title } = props;
+  const styles = useStyles2(getPageStyles);
+
+  return (
+    <Page>
+      <PageToolbar title={title} pageIcon="bell" onGoBack={() => locationService.push('/alerting/list')} />
+      <div className={styles.content}>{wrapInContent ? <RuleViewerLayoutContent {...props} /> : children}</div>
+    </Page>
+  );
+}
+
+type ContentProps = {
+  children: React.ReactNode | React.ReactNode[];
+  padding?: number;
+};
+
+export function RuleViewerLayoutContent({ children, padding = 2 }: ContentProps): JSX.Element | null {
+  const styles = useStyles2(getContentStyles(padding));
+  return <div className={styles.wrapper}>{children}</div>;
+}
+
+const getPageStyles = (theme: GrafanaTheme2) => {
+  return {
+    content: css`
+      margin: ${theme.spacing(0, 2, 2)};
+      max-width: ${theme.breakpoints.values.xxl}px;
+    `,
+  };
+};
+
+const getContentStyles = (padding: number) => (theme: GrafanaTheme2) => {
+  return {
+    wrapper: css`
+      background: ${theme.colors.background.primary};
+      border: 1px solid ${theme.colors.border.weak};
+      border-radius: ${theme.shape.borderRadius()};
+      padding: ${theme.spacing(padding)};
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx
new file mode 100644
index 00000000..26eb3ed2
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx
@@ -0,0 +1,171 @@
+import React, { useCallback, useState } from 'react';
+import { css } from '@emotion/css';
+import { DataSourceInstanceSettings, DateTime, dateTime, GrafanaTheme2, PanelData, urlUtil } from '@grafana/data';
+import { config, getDataSourceSrv, PanelRenderer } from '@grafana/runtime';
+import { Alert, CodeEditor, DateTimePicker, LinkButton, useStyles2, useTheme2 } from '@grafana/ui';
+import { isExpressionQuery } from 'app/features/expressions/guards';
+import { PanelOptions } from 'app/plugins/panel/table/models.gen';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { PanelPluginsButtonGroup, SupportedPanelPlugins } from '../PanelPluginsButtonGroup';
+import { TABLE, TIMESERIES } from '../../utils/constants';
+
+type RuleViewerVisualizationProps = {
+  data?: PanelData;
+  query: AlertQuery;
+  onChangeQuery: (query: AlertQuery) => void;
+};
+
+const headerHeight = 4;
+
+export function RuleViewerVisualization(props: RuleViewerVisualizationProps): JSX.Element | null {
+  const theme = useTheme2();
+  const styles = useStyles2(getStyles);
+  const { data, query, onChangeQuery } = props;
+  const defaultPanel = isExpressionQuery(query.model) ? TABLE : TIMESERIES;
+  const [panel, setPanel] = useState<SupportedPanelPlugins>(defaultPanel);
+  const dsSettings = getDataSourceSrv().getInstanceSettings(query.datasourceUid);
+  const relativeTimeRange = query.relativeTimeRange;
+  const [options, setOptions] = useState<PanelOptions>({
+    frameIndex: 0,
+    showHeader: true,
+  });
+
+  const onTimeChange = useCallback(
+    (newDateTime: DateTime) => {
+      const now = dateTime().unix() - newDateTime.unix();
+
+      if (relativeTimeRange) {
+        const interval = relativeTimeRange.from - relativeTimeRange.to;
+        onChangeQuery({
+          ...query,
+          relativeTimeRange: { from: now + interval, to: now },
+        });
+      }
+    },
+    [onChangeQuery, query, relativeTimeRange]
+  );
+
+  const setDateTime = useCallback((relativeTimeRangeTo: number) => {
+    return relativeTimeRangeTo === 0 ? dateTime() : dateTime().subtract(relativeTimeRangeTo, 'seconds');
+  }, []);
+
+  if (!data) {
+    return null;
+  }
+
+  if (!dsSettings) {
+    return (
+      <div className={styles.content}>
+        <Alert title="Could not find datasource for query" />
+        <CodeEditor
+          width="100%"
+          height="250px"
+          language="json"
+          showLineNumbers={false}
+          showMiniMap={false}
+          value={JSON.stringify(query, null, '\t')}
+          readOnly={true}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.content}>
+      <AutoSizer>
+        {({ width, height }) => {
+          return (
+            <div style={{ width, height }}>
+              <div className={styles.header}>
+                <div>
+                  {`Query ${query.refId}`}
+                  <span className={styles.dataSource}>({dsSettings.name})</span>
+                </div>
+                <div className={styles.actions}>
+                  {!isExpressionQuery(query.model) && relativeTimeRange ? (
+                    <DateTimePicker
+                      date={setDateTime(relativeTimeRange.to)}
+                      onChange={onTimeChange}
+                      maxDate={new Date()}
+                    />
+                  ) : null}
+                  <PanelPluginsButtonGroup onChange={setPanel} value={panel} size="md" />
+                  {!isExpressionQuery(query.model) && (
+                    <>
+                      <div className={styles.spacing} />
+                      <LinkButton
+                        size="md"
+                        variant="secondary"
+                        icon="compass"
+                        target="_blank"
+                        href={createExploreLink(dsSettings, query)}
+                      >
+                        View in Explore
+                      </LinkButton>
+                    </>
+                  )}
+                </div>
+              </div>
+              <PanelRenderer
+                height={height - theme.spacing.gridSize * headerHeight}
+                width={width}
+                data={data}
+                pluginId={panel}
+                title=""
+                onOptionsChange={setOptions}
+                options={options}
+              />
+            </div>
+          );
+        }}
+      </AutoSizer>
+    </div>
+  );
+}
+
+function createExploreLink(settings: DataSourceInstanceSettings, query: AlertQuery): string {
+  const { name } = settings;
+  const { refId, ...rest } = query.model;
+  const queryParams = { ...rest, datasource: name };
+
+  return urlUtil.renderUrl(`${config.appSubUrl}/explore`, {
+    left: JSON.stringify(['now-1h', 'now', name, queryParams]),
+  });
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    content: css`
+      width: 100%;
+      height: 250px;
+    `,
+    header: css`
+      height: ${theme.spacing(headerHeight)};
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      white-space: nowrap;
+    `,
+    refId: css`
+      font-weight: ${theme.typography.fontWeightMedium};
+      color: ${theme.colors.text.link};
+      overflow: hidden;
+    `,
+    dataSource: css`
+      margin-left: ${theme.spacing(1)};
+      font-style: italic;
+      color: ${theme.colors.text.secondary};
+    `,
+    actions: css`
+      display: flex;
+      align-items: center;
+    `,
+    spacing: css`
+      padding: ${theme.spacing(0, 1, 0, 0)};
+    `,
+    errorMessage: css`
+      white-space: pre-wrap;
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/rules/ActionButton.tsx b/public/app/features/alerting/unified/components/rules/ActionButton.tsx
new file mode 100644
index 00000000..e87de470
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/ActionButton.tsx
@@ -0,0 +1,16 @@
+import { Button, ButtonProps } from '@grafana/ui/src/components/Button';
+import React, { FC } from 'react';
+import { css, cx } from '@emotion/css';
+import { GrafanaTheme } from '@grafana/data';
+import { useStyles } from '@grafana/ui';
+
+type Props = Omit<ButtonProps, 'variant' | 'size'>;
+
+export const ActionButton: FC<Props> = ({ className, ...restProps }) => (
+  <Button variant="secondary" size="xs" className={cx(useStyles(getStyle), className)} {...restProps} />
+);
+
+export const getStyle = (theme: GrafanaTheme) => css`
+  height: 24px;
+  font-size: ${theme.typography.size.sm};
+`;
diff --git a/public/app/features/alerting/unified/components/rules/ActionIcon.tsx b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
new file mode 100644
index 00000000..163db439
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
@@ -0,0 +1,60 @@
+import { Icon, IconName, useStyles, Tooltip } from '@grafana/ui';
+import { PopoverContent } from '@grafana/ui/src/components/Tooltip/Tooltip';
+import { TooltipPlacement } from '@grafana/ui/src/components/Tooltip/PopoverController';
+import React, { FC } from 'react';
+import { css, cx } from '@emotion/css';
+import { Link } from 'react-router-dom';
+
+interface Props {
+  tooltip: PopoverContent;
+  icon: IconName;
+
+  className?: string;
+  tooltipPlacement?: TooltipPlacement;
+  to?: string;
+  target?: string;
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  'data-testid'?: string;
+}
+
+export const ActionIcon: FC<Props> = ({
+  tooltip,
+  icon,
+  to,
+  target,
+  onClick,
+  className,
+  tooltipPlacement = 'top',
+  ...rest
+}) => {
+  const ariaLabel = typeof tooltip === 'string' ? tooltip : undefined;
+  const iconEl = (
+    <Icon
+      role="button"
+      className={cx(useStyles(getStyle), className)}
+      onClick={onClick}
+      name={icon}
+      {...rest}
+      aria-label={ariaLabel}
+    />
+  );
+
+  return (
+    <Tooltip content={tooltip} placement={tooltipPlacement}>
+      {(() => {
+        if (to) {
+          return (
+            <Link to={to} target={target}>
+              {iconEl}
+            </Link>
+          );
+        }
+        return iconEl;
+      })()}
+    </Tooltip>
+  );
+};
+
+export const getStyle = () => css`
+  cursor: pointer;
+`;
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx b/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx
new file mode 100644
index 00000000..6d4443da
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx
@@ -0,0 +1,25 @@
+import { Alert } from 'app/types/unified-alerting';
+import React, { FC } from 'react';
+import { AnnotationDetailsField } from '../AnnotationDetailsField';
+import { DetailsField } from '../DetailsField';
+
+interface Props {
+  instance: Alert;
+}
+
+export const AlertInstanceDetails: FC<Props> = ({ instance }) => {
+  const annotations = (Object.entries(instance.annotations || {}) || []).filter(([_, value]) => !!value.trim());
+
+  return (
+    <div>
+      {instance.value && (
+        <DetailsField label="Value" horizontal={true}>
+          {instance.value}
+        </DetailsField>
+      )}
+      {annotations.map(([key, value]) => (
+        <AnnotationDetailsField key={key} annotationKey={key} value={value} />
+      ))}
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx b/public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx
new file mode 100644
index 00000000..c1152853
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/AlertInstanceStateFilter.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { RadioButtonGroup, Label } from '@grafana/ui';
+import { GrafanaAlertState } from 'app/types/unified-alerting-dto';
+
+interface Props {
+  className?: string;
+  stateFilter?: GrafanaAlertState;
+  onStateFilterChange: (value: GrafanaAlertState | undefined) => void;
+}
+
+export const AlertInstanceStateFilter = ({ className, onStateFilterChange, stateFilter }: Props) => {
+  const stateOptions = Object.values(GrafanaAlertState).map((value) => ({
+    label: value,
+    value,
+  }));
+
+  return (
+    <div className={className}>
+      <Label>State</Label>
+      <RadioButtonGroup
+        options={stateOptions}
+        value={stateFilter}
+        onChange={onStateFilterChange}
+        onClick={(v) => {
+          if (v === stateFilter) {
+            onStateFilterChange(undefined);
+          }
+        }}
+      />
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
new file mode 100644
index 00000000..ab128527
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
@@ -0,0 +1,84 @@
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert } from 'app/types/unified-alerting';
+import { css } from '@emotion/css';
+import React, { FC, useMemo } from 'react';
+import { alertInstanceKey } from '../../utils/rules';
+import { AlertLabels } from '../AlertLabels';
+import { AlertInstanceDetails } from './AlertInstanceDetails';
+import { AlertStateTag } from './AlertStateTag';
+import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
+
+interface Props {
+  instances: Alert[];
+}
+
+type AlertTableColumnProps = DynamicTableColumnProps<Alert>;
+type AlertTableItemProps = DynamicTableItemProps<Alert>;
+
+export const AlertInstancesTable: FC<Props> = ({ instances }) => {
+  const items = useMemo(
+    (): AlertTableItemProps[] =>
+      instances.map((instance) => ({
+        data: instance,
+        id: alertInstanceKey(instance),
+      })),
+    [instances]
+  );
+
+  return (
+    <DynamicTable
+      cols={columns}
+      isExpandable={true}
+      items={items}
+      renderExpandedContent={({ data }) => <AlertInstanceDetails instance={data} />}
+    />
+  );
+};
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  colExpand: css`
+    width: 36px;
+  `,
+  colState: css`
+    width: 110px;
+  `,
+  labelsCell: css`
+    padding-top: ${theme.spacing(0.5)} !important;
+    padding-bottom: ${theme.spacing(0.5)} !important;
+  `,
+  createdCell: css`
+    white-space: nowrap;
+  `,
+  table: css`
+    td {
+      vertical-align: top;
+      padding-top: ${theme.spacing(1)};
+      padding-bottom: ${theme.spacing(1)};
+    }
+  `,
+});
+
+const columns: AlertTableColumnProps[] = [
+  {
+    id: 'state',
+    label: 'State',
+    // eslint-disable-next-line react/display-name
+    renderCell: ({ data: { state } }) => <AlertStateTag state={state} />,
+    size: '80px',
+  },
+  {
+    id: 'labels',
+    label: 'Labels',
+    // eslint-disable-next-line react/display-name
+    renderCell: ({ data: { labels } }) => <AlertLabels labels={labels} />,
+  },
+  {
+    id: 'created',
+    label: 'Created',
+    // eslint-disable-next-line react/display-name
+    renderCell: ({ data: { activeAt } }) => (
+      <>{activeAt.startsWith('0001') ? '-' : activeAt.substr(0, 19).replace('T', ' ')}</>
+    ),
+    size: '150px',
+  },
+];
diff --git a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
new file mode 100644
index 00000000..efeaa659
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
@@ -0,0 +1,12 @@
+import { AlertState } from '@grafana/data';
+import { GrafanaAlertState, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
+import React, { FC } from 'react';
+import { alertStateToReadable, alertStateToState } from '../../utils/rules';
+import { StateTag } from '../StateTag';
+interface Props {
+  state: PromAlertingRuleState | GrafanaAlertState | AlertState;
+}
+
+export const AlertStateTag: FC<Props> = ({ state }) => (
+  <StateTag state={alertStateToState[state]}>{alertStateToReadable(state)}</StateTag>
+);
diff --git a/public/app/features/alerting/unified/components/rules/CloudRules.tsx b/public/app/features/alerting/unified/components/rules/CloudRules.tsx
new file mode 100644
index 00000000..3ed9e89a
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/CloudRules.tsx
@@ -0,0 +1,68 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme } from '@grafana/data';
+import { LoadingPlaceholder, useStyles } from '@grafana/ui';
+import React, { FC, useMemo } from 'react';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { RulesGroup } from './RulesGroup';
+import { getRulesDataSources, getRulesSourceName } from '../../utils/datasource';
+import { CombinedRuleNamespace } from 'app/types/unified-alerting';
+import pluralize from 'pluralize';
+
+interface Props {
+  namespaces: CombinedRuleNamespace[];
+  expandAll: boolean;
+}
+
+export const CloudRules: FC<Props> = ({ namespaces, expandAll }) => {
+  const styles = useStyles(getStyles);
+  const rules = useUnifiedAlertingSelector((state) => state.promRules);
+  const rulesDataSources = useMemo(getRulesDataSources, []);
+
+  const dataSourcesLoading = useMemo(() => rulesDataSources.filter((ds) => rules[ds.name]?.loading), [
+    rules,
+    rulesDataSources,
+  ]);
+
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.sectionHeader}>
+        <h5>Cortex / Loki</h5>
+        {dataSourcesLoading.length ? (
+          <LoadingPlaceholder
+            className={styles.loader}
+            text={`Loading rules from ${dataSourcesLoading.length} ${pluralize('source', dataSourcesLoading.length)}`}
+          />
+        ) : (
+          <div />
+        )}
+      </div>
+
+      {namespaces.map((namespace) => {
+        const { groups, rulesSource } = namespace;
+        return groups.map((group) => (
+          <RulesGroup
+            group={group}
+            key={`${getRulesSourceName(rulesSource)}-${name}-${group.name}`}
+            namespace={namespace}
+            expandAll={expandAll}
+          />
+        ));
+      })}
+      {namespaces?.length === 0 && !!rulesDataSources.length && <p>No rules found.</p>}
+      {!rulesDataSources.length && <p>There are no Prometheus or Loki datas sources configured.</p>}
+    </section>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  loader: css`
+    margin-bottom: 0;
+  `,
+  sectionHeader: css`
+    display: flex;
+    justify-content: space-between;
+  `,
+  wrapper: css`
+    margin-bottom: ${theme.spacing.xl};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/EditCloudGroupModal.tsx b/public/app/features/alerting/unified/components/rules/EditCloudGroupModal.tsx
new file mode 100644
index 00000000..52c86b03
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/EditCloudGroupModal.tsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useMemo } from 'react';
+import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting';
+import { Modal, Button, Form, Field, Input, useStyles2 } from '@grafana/ui';
+import { durationValidationPattern } from '../../utils/time';
+import { css } from '@emotion/css';
+import { useDispatch } from 'react-redux';
+import { updateLotexNamespaceAndGroupAction } from '../../state/actions';
+import { getRulesSourceName } from '../../utils/datasource';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { initialAsyncRequestState } from '../../utils/redux';
+import { useCleanup } from 'app/core/hooks/useCleanup';
+
+interface Props {
+  namespace: CombinedRuleNamespace;
+  group: CombinedRuleGroup;
+  onClose: () => void;
+}
+
+interface FormValues {
+  namespaceName: string;
+  groupName: string;
+  groupInterval: string;
+}
+
+export function EditCloudGroupModal(props: Props): React.ReactElement {
+  const { namespace, group, onClose } = props;
+  const styles = useStyles2(getStyles);
+  const dispatch = useDispatch();
+  const { loading, error, dispatched } =
+    useUnifiedAlertingSelector((state) => state.updateLotexNamespaceAndGroup) ?? initialAsyncRequestState;
+
+  const defaultValues = useMemo(
+    (): FormValues => ({
+      namespaceName: namespace.name,
+      groupName: group.name,
+      groupInterval: group.interval ?? '',
+    }),
+    [namespace, group]
+  );
+
+  // close modal if successfully saved
+  useEffect(() => {
+    if (dispatched && !loading && !error) {
+      onClose();
+    }
+  }, [dispatched, loading, onClose, error]);
+
+  useCleanup((state) => state.unifiedAlerting.updateLotexNamespaceAndGroup);
+
+  const onSubmit = (values: FormValues) => {
+    dispatch(
+      updateLotexNamespaceAndGroupAction({
+        rulesSourceName: getRulesSourceName(namespace.rulesSource),
+        groupName: group.name,
+        newGroupName: values.groupName,
+        namespaceName: namespace.name,
+        newNamespaceName: values.namespaceName,
+        groupInterval: values.groupInterval || undefined,
+      })
+    );
+  };
+
+  return (
+    <Modal
+      className={styles.modal}
+      isOpen={true}
+      title="Edit namespace or rule group"
+      onDismiss={onClose}
+      onClickBackdrop={onClose}
+    >
+      <Form defaultValues={defaultValues} onSubmit={onSubmit} key={JSON.stringify(defaultValues)}>
+        {({ register, errors, formState: { isDirty } }) => (
+          <>
+            <Field label="Namespace" invalid={!!errors.namespaceName} error={errors.namespaceName?.message}>
+              <Input
+                id="namespaceName"
+                {...register('namespaceName', {
+                  required: 'Namespace name is required.',
+                })}
+              />
+            </Field>
+            <Field label="Rule group" invalid={!!errors.groupName} error={errors.groupName?.message}>
+              <Input
+                id="groupName"
+                {...register('groupName', {
+                  required: 'Rule group name is required.',
+                })}
+              />
+            </Field>
+            <Field
+              label="Rule group evaluation interval"
+              invalid={!!errors.groupInterval}
+              error={errors.groupInterval?.message}
+            >
+              <Input
+                id="groupInterval"
+                placeholder="1m"
+                {...register('groupInterval', {
+                  pattern: durationValidationPattern,
+                })}
+              />
+            </Field>
+
+            <Modal.ButtonRow>
+              <Button variant="secondary" type="button" disabled={loading} onClick={onClose} fill="outline">
+                Close
+              </Button>
+              <Button type="submit" disabled={!isDirty || loading}>
+                {loading ? 'Saving...' : 'Save changes'}
+              </Button>
+            </Modal.ButtonRow>
+          </>
+        )}
+      </Form>
+    </Modal>
+  );
+}
+
+const getStyles = () => ({
+  modal: css`
+    max-width: 560px;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
new file mode 100644
index 00000000..eb4e4262
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
@@ -0,0 +1,55 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme } from '@grafana/data';
+import { LoadingPlaceholder, useStyles } from '@grafana/ui';
+import React, { FC } from 'react';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { RulesGroup } from './RulesGroup';
+import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
+import { CombinedRuleNamespace } from 'app/types/unified-alerting';
+import { initialAsyncRequestState } from '../../utils/redux';
+
+interface Props {
+  namespaces: CombinedRuleNamespace[];
+  expandAll: boolean;
+}
+
+export const GrafanaRules: FC<Props> = ({ namespaces, expandAll }) => {
+  const styles = useStyles(getStyles);
+  const { loading } = useUnifiedAlertingSelector(
+    (state) => state.promRules[GRAFANA_RULES_SOURCE_NAME] || initialAsyncRequestState
+  );
+
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.sectionHeader}>
+        <h5>Grafana</h5>
+        {loading ? <LoadingPlaceholder className={styles.loader} text="Loading..." /> : <div />}
+      </div>
+
+      {namespaces?.map((namespace) =>
+        namespace.groups.map((group) => (
+          <RulesGroup
+            group={group}
+            key={`${namespace.name}-${group.name}`}
+            namespace={namespace}
+            expandAll={expandAll}
+          />
+        ))
+      )}
+      {namespaces?.length === 0 && <p>No rules found.</p>}
+    </section>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  loader: css`
+    margin-bottom: 0;
+  `,
+  sectionHeader: css`
+    display: flex;
+    justify-content: space-between;
+  `,
+  wrapper: css`
+    margin-bottom: ${theme.spacing.xl};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
new file mode 100644
index 00000000..2a74d453
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
@@ -0,0 +1,22 @@
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import { contextSrv } from 'app/core/services/context_srv';
+import React, { FC } from 'react';
+import { CallToActionCard } from '@grafana/ui';
+
+export const NoRulesSplash: FC = () => {
+  if (contextSrv.hasEditPermissionInFolders || contextSrv.isEditor) {
+    return (
+      <EmptyListCTA
+        title="You haven`t created any alert rules yet"
+        buttonIcon="bell"
+        buttonLink={'alerting/new'}
+        buttonTitle="New alert rule"
+        proTip="you can also create alert rules from existing panels and queries."
+        proTipLink="https://grafana.com/docs/"
+        proTipLinkTitle="Learn more"
+        proTipTarget="_blank"
+      />
+    );
+  }
+  return <CallToActionCard message="No rules exist yet." callToActionElement={<div />} />;
+};
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
new file mode 100644
index 00000000..af21b4d4
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
@@ -0,0 +1,66 @@
+import { CombinedRule } from 'app/types/unified-alerting';
+import React, { FC } from 'react';
+import { useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { AlertLabels } from '../AlertLabels';
+import { DetailsField } from '../DetailsField';
+import { RuleDetailsActionButtons } from './RuleDetailsActionButtons';
+import { RuleDetailsDataSources } from './RuleDetailsDataSources';
+import { RuleDetailsMatchingInstances } from './RuleDetailsMatchingInstances';
+import { RuleDetailsExpression } from './RuleDetailsExpression';
+import { RuleDetailsAnnotations } from './RuleDetailsAnnotations';
+
+interface Props {
+  rule: CombinedRule;
+}
+
+export const RuleDetails: FC<Props> = ({ rule }) => {
+  const styles = useStyles2(getStyles);
+  const {
+    promRule,
+    namespace: { rulesSource },
+  } = rule;
+
+  const annotations = Object.entries(rule.annotations).filter(([_, value]) => !!value.trim());
+
+  return (
+    <div>
+      <RuleDetailsActionButtons rule={rule} rulesSource={rulesSource} />
+      <div className={styles.wrapper}>
+        <div className={styles.leftSide}>
+          {!!rule.labels && !!Object.keys(rule.labels).length && (
+            <DetailsField label="Labels" horizontal={true}>
+              <AlertLabels labels={rule.labels} />
+            </DetailsField>
+          )}
+          <RuleDetailsExpression rulesSource={rulesSource} rule={rule} annotations={annotations} />
+          <RuleDetailsAnnotations annotations={annotations} />
+        </div>
+        <div className={styles.rightSide}>
+          <RuleDetailsDataSources rulesSource={rulesSource} rule={rule} />
+        </div>
+      </div>
+      <RuleDetailsMatchingInstances promRule={promRule} />
+    </div>
+  );
+};
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    display: flex;
+    flex-direction: row;
+    ${theme.breakpoints.down('md')} {
+      flex-direction: column;
+    }
+  `,
+  leftSide: css`
+    flex: 1;
+  `,
+  rightSide: css`
+    ${theme.breakpoints.up('md')} {
+      padding-left: 90px;
+      width: 300px;
+    }
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
new file mode 100644
index 00000000..ea1c1ce3
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
@@ -0,0 +1,273 @@
+import React, { FC, Fragment, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { css } from '@emotion/css';
+import { AppEvents, GrafanaTheme2, urlUtil } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { Button, ConfirmModal, ClipboardButton, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
+import { contextSrv } from 'app/core/services/context_srv';
+import { appEvents } from 'app/core/core';
+import { useIsRuleEditable } from '../../hooks/useIsRuleEditable';
+import { Annotation } from '../../utils/constants';
+import { getRulesSourceName, isCloudRulesSource, isGrafanaRulesSource } from '../../utils/datasource';
+import { createExploreLink, createViewLink, makeSilenceLink } from '../../utils/misc';
+import * as ruleId from '../../utils/rule-id';
+import { deleteRuleAction } from '../../state/actions';
+import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
+import { getAlertmanagerByUid } from '../../utils/alertmanager';
+import { useStateHistoryModal } from '../../hooks/useStateHistoryModal';
+import { RulerGrafanaRuleDTO, RulerRuleDTO } from 'app/types/unified-alerting-dto';
+
+interface Props {
+  rule: CombinedRule;
+  rulesSource: RulesSource;
+}
+
+export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const style = useStyles2(getStyles);
+  const { namespace, group, rulerRule } = rule;
+  const [ruleToDelete, setRuleToDelete] = useState<CombinedRule>();
+  const alertId = isGrafanaRulerRule(rule.rulerRule) ? rule.rulerRule.grafana_alert.id ?? '' : '';
+  const { StateHistoryModal, showStateHistoryModal } = useStateHistoryModal(alertId);
+
+  const alertmanagerSourceName = isGrafanaRulesSource(rulesSource)
+    ? rulesSource
+    : getAlertmanagerByUid(rulesSource.jsonData.alertmanagerUid)?.name;
+
+  const leftButtons: JSX.Element[] = [];
+  const rightButtons: JSX.Element[] = [];
+
+  const { isEditable } = useIsRuleEditable(getRulesSourceName(rulesSource), rulerRule);
+  const returnTo = location.pathname + location.search;
+  const isViewMode = inViewMode(location.pathname);
+
+  const deleteRule = () => {
+    if (ruleToDelete && ruleToDelete.rulerRule) {
+      const identifier = ruleId.fromRulerRule(
+        getRulesSourceName(ruleToDelete.namespace.rulesSource),
+        ruleToDelete.namespace.name,
+        ruleToDelete.group.name,
+        ruleToDelete.rulerRule
+      );
+
+      dispatch(deleteRuleAction(identifier, { navigateTo: isViewMode ? '/alerting/list' : undefined }));
+      setRuleToDelete(undefined);
+    }
+  };
+
+  const buildShareUrl = () => {
+    if (isCloudRulesSource(rulesSource)) {
+      const ruleUrl = `${encodeURIComponent(rulesSource.name)}/${encodeURIComponent(rule.name)}`;
+      return `${config.appUrl}${config.appSubUrl}/alerting/${ruleUrl}/find`;
+    }
+
+    return window.location.href.split('?')[0];
+  };
+
+  // explore does not support grafana rule queries atm
+  if (isCloudRulesSource(rulesSource) && contextSrv.isEditor) {
+    leftButtons.push(
+      <LinkButton
+        className={style.button}
+        size="xs"
+        key="explore"
+        variant="primary"
+        icon="chart-line"
+        target="__blank"
+        href={createExploreLink(rulesSource.name, rule.query)}
+      >
+        See graph
+      </LinkButton>
+    );
+  }
+  if (rule.annotations[Annotation.runbookURL]) {
+    leftButtons.push(
+      <LinkButton
+        className={style.button}
+        size="xs"
+        key="runbook"
+        variant="primary"
+        icon="book"
+        target="__blank"
+        href={rule.annotations[Annotation.runbookURL]}
+      >
+        View runbook
+      </LinkButton>
+    );
+  }
+  if (rule.annotations[Annotation.dashboardUID]) {
+    const dashboardUID = rule.annotations[Annotation.dashboardUID];
+    if (dashboardUID) {
+      leftButtons.push(
+        <LinkButton
+          className={style.button}
+          size="xs"
+          key="dashboard"
+          variant="primary"
+          icon="apps"
+          target="__blank"
+          href={`d/${encodeURIComponent(dashboardUID)}`}
+        >
+          Go to dashboard
+        </LinkButton>
+      );
+      const panelId = rule.annotations[Annotation.panelID];
+      if (panelId) {
+        leftButtons.push(
+          <LinkButton
+            className={style.button}
+            size="xs"
+            key="panel"
+            variant="primary"
+            icon="apps"
+            target="__blank"
+            href={`d/${encodeURIComponent(dashboardUID)}?viewPanel=${encodeURIComponent(panelId)}`}
+          >
+            Go to panel
+          </LinkButton>
+        );
+      }
+    }
+  }
+
+  if (alertmanagerSourceName) {
+    leftButtons.push(
+      <LinkButton
+        className={style.button}
+        size="xs"
+        key="silence"
+        icon="bell-slash"
+        target="__blank"
+        href={makeSilenceLink(alertmanagerSourceName, rule)}
+      >
+        Silence
+      </LinkButton>
+    );
+  }
+
+  if (alertId) {
+    leftButtons.push(
+      <Fragment key="history">
+        <Button className={style.button} size="xs" icon="history" onClick={() => showStateHistoryModal()}>
+          Show state history
+        </Button>
+        {StateHistoryModal}
+      </Fragment>
+    );
+  }
+
+  if (!isViewMode) {
+    rightButtons.push(
+      <LinkButton
+        className={style.button}
+        size="xs"
+        key="view"
+        variant="secondary"
+        icon="eye"
+        href={createViewLink(rulesSource, rule, returnTo)}
+      >
+        View
+      </LinkButton>
+    );
+  }
+
+  if (isEditable && rulerRule) {
+    const sourceName = getRulesSourceName(rulesSource);
+    const identifier = ruleId.fromRulerRule(sourceName, namespace.name, group.name, rulerRule);
+
+    const editURL = urlUtil.renderUrl(
+      `${config.appSubUrl}/alerting/${encodeURIComponent(ruleId.stringifyIdentifier(identifier))}/edit`,
+      {
+        returnTo,
+      }
+    );
+
+    if (isViewMode) {
+      rightButtons.push(
+        <ClipboardButton
+          key="copy"
+          onClipboardCopy={() => {
+            appEvents.emit(AppEvents.alertSuccess, ['URL copied!']);
+          }}
+          onClipboardError={(e) => {
+            appEvents.emit(AppEvents.alertError, ['Error while copying URL', e.text]);
+          }}
+          className={style.button}
+          size="sm"
+          getText={buildShareUrl}
+        >
+          Copy link to rule
+        </ClipboardButton>
+      );
+    }
+
+    rightButtons.push(
+      <LinkButton className={style.button} size="xs" key="edit" variant="secondary" icon="pen" href={editURL}>
+        Edit
+      </LinkButton>,
+      <Button
+        className={style.button}
+        size="xs"
+        type="button"
+        key="delete"
+        variant="secondary"
+        icon="trash-alt"
+        onClick={() => setRuleToDelete(rule)}
+      >
+        Delete
+      </Button>
+    );
+  }
+  if (leftButtons.length || rightButtons.length) {
+    return (
+      <>
+        <div className={style.wrapper}>
+          <HorizontalGroup width="auto">{leftButtons.length ? leftButtons : <div />}</HorizontalGroup>
+          <HorizontalGroup width="auto">{rightButtons.length ? rightButtons : <div />}</HorizontalGroup>
+        </div>
+        {!!ruleToDelete && (
+          <ConfirmModal
+            isOpen={true}
+            title="Delete rule"
+            body="Deleting this rule will permanently remove it from your alert rule list. Are you sure you want to delete this rule?"
+            confirmText="Yes, delete"
+            icon="exclamation-triangle"
+            onConfirm={deleteRule}
+            onDismiss={() => setRuleToDelete(undefined)}
+          />
+        )}
+      </>
+    );
+  }
+
+  return null;
+};
+
+function inViewMode(pathname: string): boolean {
+  return pathname.endsWith('/view');
+}
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    padding: ${theme.spacing(2)} 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    border-bottom: solid 1px ${theme.colors.border.medium};
+  `,
+  button: css`
+    height: 24px;
+    margin-top: ${theme.spacing(1)};
+    font-size: ${theme.typography.size.sm};
+  `,
+});
+
+function isGrafanaRulerRule(rule?: RulerRuleDTO): rule is RulerGrafanaRuleDTO {
+  if (!rule) {
+    return false;
+  }
+  return (rule as RulerGrafanaRuleDTO).grafana_alert != null;
+}
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx
new file mode 100644
index 00000000..3963d88c
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import { AnnotationDetailsField } from '../AnnotationDetailsField';
+
+type Props = {
+  annotations: Array<[string, string]>;
+};
+
+export function RuleDetailsAnnotations(props: Props): JSX.Element | null {
+  const { annotations } = props;
+  const styles = useStyles2(getStyles);
+
+  if (annotations.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.annotations}>
+      {annotations.map(([key, value]) => (
+        <AnnotationDetailsField key={key} annotationKey={key} value={value} />
+      ))}
+    </div>
+  );
+}
+
+const getStyles = () => ({
+  annotations: css`
+    margin-top: 46px;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx
new file mode 100644
index 00000000..fc6584d9
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx
@@ -0,0 +1,74 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
+import { useStyles2 } from '@grafana/ui';
+import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
+import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
+import React, { useMemo } from 'react';
+import { isCloudRulesSource } from '../../utils/datasource';
+import { isGrafanaRulerRule } from '../../utils/rules';
+import { DetailsField } from '../DetailsField';
+
+type Props = {
+  rule: CombinedRule;
+  rulesSource: RulesSource;
+};
+
+export function RuleDetailsDataSources(props: Props): JSX.Element | null {
+  const { rulesSource, rule } = props;
+  const styles = useStyles2(getStyles);
+
+  const dataSources: Array<{ name: string; icon?: string }> = useMemo(() => {
+    if (isCloudRulesSource(rulesSource)) {
+      return [{ name: rulesSource.name, icon: rulesSource.meta.info.logos.small }];
+    }
+
+    if (isGrafanaRulerRule(rule.rulerRule)) {
+      const { data } = rule.rulerRule.grafana_alert;
+      const unique = data.reduce((dataSources, query) => {
+        const ds = getDataSourceSrv().getInstanceSettings(query.datasourceUid);
+
+        if (!ds || ds.uid === ExpressionDatasourceUID) {
+          return dataSources;
+        }
+
+        dataSources[ds.name] = { name: ds.name, icon: ds.meta.info.logos.small };
+        return dataSources;
+      }, {} as Record<string, { name: string; icon?: string }>);
+
+      return Object.values(unique);
+    }
+
+    return [];
+  }, [rule, rulesSource]);
+
+  if (dataSources.length === 0) {
+    return null;
+  }
+
+  return (
+    <DetailsField label="Data source">
+      {dataSources.map(({ name, icon }, index) => (
+        <div key={name}>
+          {icon && (
+            <>
+              <img alt={`${name} datasource logo`} className={styles.dataSourceIcon} src={icon} />{' '}
+            </>
+          )}
+          {name}
+        </div>
+      ))}
+    </DetailsField>
+  );
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  const size = theme.spacing(2);
+
+  return {
+    dataSourceIcon: css`
+      width: ${size};
+      height: ${size};
+    `,
+  };
+}
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx
new file mode 100644
index 00000000..af3750a7
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { css, cx } from '@emotion/css';
+import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
+import { isCloudRulesSource } from '../../utils/datasource';
+import { DetailsField } from '../DetailsField';
+import { Expression } from '../Expression';
+
+type Props = {
+  rule: CombinedRule;
+  rulesSource: RulesSource;
+  annotations: Array<[string, string]>;
+};
+
+export function RuleDetailsExpression(props: Props): JSX.Element | null {
+  const { annotations, rulesSource, rule } = props;
+  const styles = getStyles();
+
+  if (!isCloudRulesSource(rulesSource)) {
+    return null;
+  }
+
+  return (
+    <DetailsField label="Expression" horizontal={true} className={cx({ [styles.exprRow]: !!annotations.length })}>
+      <Expression expression={rule.query} rulesSource={rulesSource} />
+    </DetailsField>
+  );
+}
+
+const getStyles = () => ({
+  exprRow: css`
+    margin-bottom: 46px;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx
new file mode 100644
index 00000000..db039e76
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx
@@ -0,0 +1,103 @@
+import { Alert, Rule } from 'app/types/unified-alerting';
+import React, { useMemo, useState } from 'react';
+import { isAlertingRule } from '../../utils/rules';
+import { DetailsField } from '../DetailsField';
+import { AlertInstancesTable } from './AlertInstancesTable';
+import { SortOrder } from 'app/plugins/panel/alertlist/types';
+import { GrafanaAlertState } from 'app/types/unified-alerting-dto';
+import { GrafanaTheme } from '@grafana/data';
+import { useStyles } from '@grafana/ui';
+import { css, cx } from '@emotion/css';
+import { labelsMatchMatchers, parseMatchers } from 'app/features/alerting/unified/utils/alertmanager';
+import { sortAlerts } from 'app/features/alerting/unified/utils/misc';
+import { MatcherFilter } from 'app/features/alerting/unified/components/alert-groups/MatcherFilter';
+import { AlertInstanceStateFilter } from 'app/features/alerting/unified/components/rules/AlertInstanceStateFilter';
+
+type Props = {
+  promRule?: Rule;
+};
+
+export function RuleDetailsMatchingInstances(props: Props): JSX.Element | null {
+  const { promRule } = props;
+
+  const [queryString, setQueryString] = useState<string>();
+  const [alertState, setAlertState] = useState<GrafanaAlertState>();
+
+  // This key is used to force a rerender on the inputs when the filters are cleared
+  const [filterKey] = useState<number>(Math.floor(Math.random() * 100));
+  const queryStringKey = `queryString-${filterKey}`;
+
+  const styles = useStyles(getStyles);
+
+  const alerts = useMemo(
+    (): Alert[] =>
+      isAlertingRule(promRule) && promRule.alerts?.length
+        ? filterAlerts(queryString, alertState, sortAlerts(SortOrder.Importance, promRule.alerts))
+        : [],
+    [promRule, alertState, queryString]
+  );
+
+  if (!isAlertingRule(promRule)) {
+    return null;
+  }
+
+  return (
+    <DetailsField label="Matching instances" horizontal={true}>
+      <div className={cx(styles.flexRow, styles.spaceBetween)}>
+        <div className={styles.flexRow}>
+          <MatcherFilter
+            className={styles.rowChild}
+            key={queryStringKey}
+            queryString={queryString}
+            onFilterChange={(value) => setQueryString(value)}
+          />
+          <AlertInstanceStateFilter
+            className={styles.rowChild}
+            stateFilter={alertState}
+            onStateFilterChange={setAlertState}
+          />
+        </div>
+      </div>
+
+      <AlertInstancesTable instances={alerts} />
+    </DetailsField>
+  );
+}
+
+function filterAlerts(
+  alertInstanceLabel: string | undefined,
+  alertInstanceState: GrafanaAlertState | undefined,
+  alerts: Alert[]
+): Alert[] {
+  let filteredAlerts = [...alerts];
+  if (alertInstanceLabel) {
+    const matchers = parseMatchers(alertInstanceLabel || '');
+    filteredAlerts = filteredAlerts.filter(({ labels }) => labelsMatchMatchers(labels, matchers));
+  }
+  if (alertInstanceState) {
+    filteredAlerts = filteredAlerts.filter((alert) => {
+      return alert.state === alertInstanceState;
+    });
+  }
+
+  return filteredAlerts;
+}
+
+const getStyles = (theme: GrafanaTheme) => {
+  return {
+    flexRow: css`
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      width: 100%;
+      flex-wrap: wrap;
+      margin-bottom: ${theme.spacing.sm};
+    `,
+    spaceBetween: css`
+      justify-content: space-between;
+    `,
+    rowChild: css`
+      margin-right: ${theme.spacing.sm};
+    `,
+  };
+};
diff --git a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
new file mode 100644
index 00000000..3cb4c3d9
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
@@ -0,0 +1,35 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import { Rule } from 'app/types/unified-alerting';
+import React, { FC } from 'react';
+
+interface Prom {
+  rule: Rule;
+}
+
+export const RuleHealth: FC<Prom> = ({ rule }) => {
+  const style = useStyles2(getStyle);
+  if (rule.health === 'err' || rule.health === 'error') {
+    return (
+      <Tooltip theme="error" content={rule.lastError || 'No error message provided.'}>
+        <div className={style.warn}>
+          <Icon name="exclamation-triangle" />
+          <span>error</span>
+        </div>
+      </Tooltip>
+    );
+  }
+  return <>{rule.health}</>;
+};
+
+const getStyle = (theme: GrafanaTheme2) => ({
+  warn: css`
+    display: inline-flex;
+    flex-direction: row;
+    color: ${theme.colors.warning.text};
+    & > * + * {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx
new file mode 100644
index 00000000..1d04dd52
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx
@@ -0,0 +1,127 @@
+import { css } from '@emotion/css';
+import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
+import { Alert, Button, Tooltip, useStyles2 } from '@grafana/ui';
+import { SerializedError } from '@reduxjs/toolkit';
+import pluralize from 'pluralize';
+import React, { useMemo, ReactElement, useState, FC } from 'react';
+import { useLocalStorage } from 'react-use';
+import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
+import { getRulesDataSources, GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
+import { isRulerNotSupportedResponse } from '../../utils/rules';
+
+export function RuleListErrors(): ReactElement {
+  const [expanded, setExpanded] = useState(false);
+  const [closed, setClosed] = useLocalStorage('grafana.unifiedalerting.hideErrors', false);
+  const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules);
+  const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
+  const styles = useStyles2(getStyles);
+
+  const errors = useMemo((): JSX.Element[] => {
+    const [promRequestErrors, rulerRequestErrors] = [promRuleRequests, rulerRuleRequests].map((requests) =>
+      getRulesDataSources().reduce<Array<{ error: SerializedError; dataSource: DataSourceInstanceSettings }>>(
+        (result, dataSource) => {
+          const error = requests[dataSource.name]?.error;
+          if (requests[dataSource.name] && error && !isRulerNotSupportedResponse(requests[dataSource.name])) {
+            return [...result, { dataSource, error }];
+          }
+          return result;
+        },
+        []
+      )
+    );
+    const grafanaPromError = promRuleRequests[GRAFANA_RULES_SOURCE_NAME]?.error;
+    const grafanaRulerError = rulerRuleRequests[GRAFANA_RULES_SOURCE_NAME]?.error;
+
+    const result: JSX.Element[] = [];
+
+    if (grafanaPromError) {
+      result.push(<>Failed to load Grafana rules state: {grafanaPromError.message || 'Unknown error.'}</>);
+    }
+    if (grafanaRulerError) {
+      result.push(<>Failed to load Grafana rules config: {grafanaRulerError.message || 'Unknown error.'}</>);
+    }
+
+    promRequestErrors.forEach(({ dataSource, error }) =>
+      result.push(
+        <>
+          Failed to load rules state from <a href={`datasources/edit/${dataSource.uid}`}>{dataSource.name}</a>:{' '}
+          {error.message || 'Unknown error.'}
+        </>
+      )
+    );
+
+    rulerRequestErrors.forEach(({ dataSource, error }) =>
+      result.push(
+        <>
+          Failed to load rules config from <a href={`datasources/edit/${dataSource.uid}`}>{dataSource.name}</a>:{' '}
+          {error.message || 'Unknown error.'}
+        </>
+      )
+    );
+
+    return result;
+  }, [promRuleRequests, rulerRuleRequests]);
+
+  return (
+    <>
+      {!!errors.length && closed && (
+        <ErrorSummaryButton count={errors.length} onClick={() => setClosed((closed) => !closed)} />
+      )}
+      {!!errors.length && !closed && (
+        <Alert
+          data-testid="cloud-rulessource-errors"
+          title="Errors loading rules"
+          severity="error"
+          onRemove={() => setClosed(true)}
+        >
+          {expanded && errors.map((item, idx) => <div key={idx}>{item}</div>)}
+          {!expanded && (
+            <>
+              <div>{errors[0]}</div>
+              {errors.length >= 2 && (
+                <Button
+                  className={styles.moreButton}
+                  fill="text"
+                  icon="angle-right"
+                  size="sm"
+                  onClick={() => setExpanded(true)}
+                >
+                  {errors.length - 1} more {pluralize('error', errors.length - 1)}
+                </Button>
+              )}
+            </>
+          )}
+        </Alert>
+      )}
+    </>
+  );
+}
+
+interface ErrorSummaryProps {
+  count: number;
+  onClick: () => void;
+}
+
+const ErrorSummaryButton: FC<ErrorSummaryProps> = ({ count, onClick }) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.floatRight}>
+      <Tooltip content="Show all errors" placement="bottom">
+        <Button fill="text" variant="destructive" icon="exclamation-triangle" onClick={onClick}>
+          {count > 1 ? <>{count} errors</> : <>1 error</>}
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  moreButton: css`
+    padding: 0;
+  `,
+  floatRight: css`
+    display: flex;
+    justify-content: flex-end;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RuleListGroupView.tsx b/public/app/features/alerting/unified/components/rules/RuleListGroupView.tsx
new file mode 100644
index 00000000..e2a51b2b
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleListGroupView.tsx
@@ -0,0 +1,32 @@
+import { CombinedRuleNamespace } from 'app/types/unified-alerting';
+import React, { FC, useMemo } from 'react';
+import { isCloudRulesSource, isGrafanaRulesSource } from '../../utils/datasource';
+import { CloudRules } from './CloudRules';
+import { GrafanaRules } from './GrafanaRules';
+
+interface Props {
+  namespaces: CombinedRuleNamespace[];
+  expandAll: boolean;
+}
+
+export const RuleListGroupView: FC<Props> = ({ namespaces, expandAll }) => {
+  const [grafanaNamespaces, cloudNamespaces] = useMemo(() => {
+    const sorted = namespaces
+      .map((namespace) => ({
+        ...namespace,
+        groups: namespace.groups.sort((a, b) => a.name.localeCompare(b.name)),
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+    return [
+      sorted.filter((ns) => isGrafanaRulesSource(ns.rulesSource)),
+      sorted.filter((ns) => isCloudRulesSource(ns.rulesSource)),
+    ];
+  }, [namespaces]);
+
+  return (
+    <>
+      <GrafanaRules namespaces={grafanaNamespaces} expandAll={expandAll} />
+      <CloudRules namespaces={cloudNamespaces} expandAll={expandAll} />
+    </>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx b/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx
new file mode 100644
index 00000000..3dfd9dc8
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx
@@ -0,0 +1,46 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { CombinedRule } from 'app/types/unified-alerting';
+import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
+import React, { FC, useState } from 'react';
+import { alertStateToReadable } from '../../utils/rules';
+import { CollapseToggle } from '../CollapseToggle';
+import { RulesTable } from './RulesTable';
+
+interface Props {
+  rules: CombinedRule[];
+  state: PromAlertingRuleState;
+  defaultCollapsed?: boolean;
+}
+
+export const RuleListStateSection: FC<Props> = ({ rules, state, defaultCollapsed = false }) => {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      <h4 className={styles.header}>
+        <CollapseToggle
+          className={styles.collapseToggle}
+          size="xxl"
+          isCollapsed={collapsed}
+          onToggle={() => setCollapsed(!collapsed)}
+        />
+        {alertStateToReadable(state)} ({rules.length})
+      </h4>
+      {!collapsed && <RulesTable className={styles.rulesTable} rules={rules} showGroupColumn={true} />}
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  collapseToggle: css`
+    vertical-align: middle;
+  `,
+  header: css`
+    margin-top: ${theme.spacing(2)};
+  `,
+  rulesTable: css`
+    margin-top: ${theme.spacing(3)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RuleListStateView.tsx b/public/app/features/alerting/unified/components/rules/RuleListStateView.tsx
new file mode 100644
index 00000000..f833dbba
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleListStateView.tsx
@@ -0,0 +1,60 @@
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { CombinedRule, CombinedRuleNamespace } from 'app/types/unified-alerting';
+import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
+import React, { FC, useMemo } from 'react';
+import { getFiltersFromUrlParams } from '../../utils/misc';
+import { isAlertingRule } from '../../utils/rules';
+import { RuleListStateSection } from './RuleListStateSection';
+
+interface Props {
+  namespaces: CombinedRuleNamespace[];
+  expandAll?: boolean;
+}
+
+type GroupedRules = Record<PromAlertingRuleState, CombinedRule[]>;
+
+export const RuleListStateView: FC<Props> = ({ namespaces }) => {
+  const filters = getFiltersFromUrlParams(useQueryParams()[0]);
+
+  const groupedRules = useMemo(() => {
+    const result: GroupedRules = {
+      [PromAlertingRuleState.Firing]: [],
+      [PromAlertingRuleState.Inactive]: [],
+      [PromAlertingRuleState.Pending]: [],
+    };
+
+    namespaces.forEach((namespace) =>
+      namespace.groups.forEach((group) =>
+        group.rules.forEach((rule) => {
+          if (rule.promRule && isAlertingRule(rule.promRule)) {
+            result[rule.promRule.state].push(rule);
+          }
+        })
+      )
+    );
+
+    Object.values(result).forEach((rules) => rules.sort((a, b) => a.name.localeCompare(b.name)));
+
+    return result;
+  }, [namespaces]);
+  return (
+    <>
+      {(!filters.alertState || filters.alertState === PromAlertingRuleState.Firing) && (
+        <RuleListStateSection state={PromAlertingRuleState.Firing} rules={groupedRules[PromAlertingRuleState.Firing]} />
+      )}
+      {(!filters.alertState || filters.alertState === PromAlertingRuleState.Pending) && (
+        <RuleListStateSection
+          state={PromAlertingRuleState.Pending}
+          rules={groupedRules[PromAlertingRuleState.Pending]}
+        />
+      )}
+      {(!filters.alertState || filters.alertState === PromAlertingRuleState.Inactive) && (
+        <RuleListStateSection
+          defaultCollapsed={filters.alertState !== PromAlertingRuleState.Inactive}
+          state={PromAlertingRuleState.Inactive}
+          rules={groupedRules[PromAlertingRuleState.Inactive]}
+        />
+      )}
+    </>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rules/RuleState.tsx b/public/app/features/alerting/unified/components/rules/RuleState.tsx
new file mode 100644
index 00000000..85e85a2d
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleState.tsx
@@ -0,0 +1,85 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
+import { HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui';
+import { CombinedRule } from 'app/types/unified-alerting';
+import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
+import React, { FC, useMemo } from 'react';
+import { isAlertingRule, isRecordingRule, getFirstActiveAt } from '../../utils/rules';
+import { AlertStateTag } from './AlertStateTag';
+
+interface Props {
+  rule: CombinedRule;
+  isDeleting: boolean;
+  isCreating: boolean;
+}
+
+export const RuleState: FC<Props> = ({ rule, isDeleting, isCreating }) => {
+  const style = useStyles2(getStyle);
+  const { promRule } = rule;
+
+  // return how long the rule has been in it's firing state, if any
+  const forTime = useMemo(() => {
+    if (
+      promRule &&
+      isAlertingRule(promRule) &&
+      promRule.alerts?.length &&
+      promRule.state !== PromAlertingRuleState.Inactive
+    ) {
+      // find earliest alert
+      const firstActiveAt = getFirstActiveAt(promRule);
+
+      // calculate time elapsed from earliest alert
+      if (firstActiveAt) {
+        return (
+          <span title={String(firstActiveAt)} className={style.for}>
+            for{' '}
+            {intervalToAbbreviatedDurationString(
+              {
+                start: firstActiveAt,
+                end: new Date(),
+              },
+              false
+            )}
+          </span>
+        );
+      }
+    }
+    return null;
+  }, [promRule, style]);
+
+  if (isDeleting) {
+    return (
+      <HorizontalGroup align="flex-start">
+        <Spinner />
+        deleting
+      </HorizontalGroup>
+    );
+  } else if (isCreating) {
+    return (
+      <HorizontalGroup align="flex-start">
+        {' '}
+        <Spinner />
+        creating
+      </HorizontalGroup>
+    );
+  } else if (promRule && isAlertingRule(promRule)) {
+    return (
+      <HorizontalGroup align="flex-start">
+        <AlertStateTag state={promRule.state} />
+        {forTime}
+      </HorizontalGroup>
+    );
+  } else if (promRule && isRecordingRule(promRule)) {
+    return <>Recording rule</>;
+  }
+  return <>n/a</>;
+};
+
+const getStyle = (theme: GrafanaTheme2) => ({
+  for: css`
+    font-size: ${theme.typography.bodySmall.fontSize};
+    color: ${theme.colors.text.secondary};
+    white-space: nowrap;
+    padding-top: 2px;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RuleStats.tsx b/public/app/features/alerting/unified/components/rules/RuleStats.tsx
new file mode 100644
index 00000000..58415d36
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RuleStats.tsx
@@ -0,0 +1,113 @@
+import { CombinedRule, CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting';
+import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
+import pluralize from 'pluralize';
+import React, { FC, Fragment, useMemo } from 'react';
+import { isAlertingRule, isRecordingRule, isRecordingRulerRule } from '../../utils/rules';
+import { StateColoredText } from '../StateColoredText';
+
+interface Props {
+  showInactive?: boolean;
+  showRecording?: boolean;
+  group?: CombinedRuleGroup;
+  namespaces?: CombinedRuleNamespace[];
+}
+
+const emptyStats = {
+  total: 0,
+  recording: 0,
+  [PromAlertingRuleState.Firing]: 0,
+  [PromAlertingRuleState.Pending]: 0,
+  [PromAlertingRuleState.Inactive]: 0,
+  error: 0,
+} as const;
+
+export const RuleStats: FC<Props> = ({ showInactive, showRecording, group, namespaces }) => {
+  const calculated = useMemo(() => {
+    const stats = { ...emptyStats };
+    const calcRule = (rule: CombinedRule) => {
+      if (rule.promRule && isAlertingRule(rule.promRule)) {
+        stats[rule.promRule.state] += 1;
+      }
+      if (rule.promRule?.health === 'err' || rule.promRule?.health === 'error') {
+        stats.error += 1;
+      }
+      if (
+        (rule.promRule && isRecordingRule(rule.promRule)) ||
+        (rule.rulerRule && isRecordingRulerRule(rule.rulerRule))
+      ) {
+        stats.recording += 1;
+      }
+      stats.total += 1;
+    };
+    if (group) {
+      group.rules.forEach(calcRule);
+    }
+    if (namespaces) {
+      namespaces.forEach((namespace) => namespace.groups.forEach((group) => group.rules.forEach(calcRule)));
+    }
+    return stats;
+  }, [group, namespaces]);
+
+  const statsComponents: React.ReactNode[] = [];
+  if (calculated[PromAlertingRuleState.Firing]) {
+    statsComponents.push(
+      <StateColoredText key="firing" status={PromAlertingRuleState.Firing}>
+        {calculated[PromAlertingRuleState.Firing]} firing
+      </StateColoredText>
+    );
+  }
+  if (calculated.error) {
+    statsComponents.push(
+      <StateColoredText key="errors" status={PromAlertingRuleState.Firing}>
+        {calculated.error} errors
+      </StateColoredText>
+    );
+  }
+  if (calculated[PromAlertingRuleState.Pending]) {
+    statsComponents.push(
+      <StateColoredText key="pending" status={PromAlertingRuleState.Pending}>
+        {calculated[PromAlertingRuleState.Pending]} pending
+      </StateColoredText>
+    );
+  }
+  if (showInactive && calculated[PromAlertingRuleState.Inactive]) {
+    statsComponents.push(
+      <StateColoredText key="inactive" status="neutral">
+        {calculated[PromAlertingRuleState.Inactive]} normal
+      </StateColoredText>
+    );
+  }
+  if (showRecording && calculated.recording) {
+    statsComponents.push(
+      <StateColoredText key="recording" status="neutral">
+        {calculated.recording} recording
+      </StateColoredText>
+    );
+  }
+
+  return (
+    <div>
+      <span>
+        {calculated.total} {pluralize('rule', calculated.total)}
+      </span>
+      {!!statsComponents.length && (
+        <>
+          <span>: </span>
+          {statsComponents.reduce<React.ReactNode[]>(
+            (prev, curr, idx) =>
+              prev.length
+                ? [
+                    prev,
+                    <Fragment key={idx}>
+                      <span>, </span>
+                    </Fragment>,
+                    curr,
+                  ]
+                : [curr],
+            []
+          )}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
new file mode 100644
index 00000000..c6fbf27e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
@@ -0,0 +1,206 @@
+import React, { FormEvent, useState } from 'react';
+import { Button, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles } from '@grafana/ui';
+import { DataSourceInstanceSettings, GrafanaTheme, SelectableValue } from '@grafana/data';
+import { css, cx } from '@emotion/css';
+import { debounce } from 'lodash';
+
+import { PromAlertingRuleState, PromRuleType } from 'app/types/unified-alerting-dto';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { getFiltersFromUrlParams } from '../../utils/misc';
+import { DataSourcePicker } from '@grafana/runtime';
+import { alertStateToReadable } from '../../utils/rules';
+
+const ViewOptions: SelectableValue[] = [
+  {
+    icon: 'folder',
+    label: 'Groups',
+    value: 'group',
+  },
+  {
+    icon: 'heart-rate',
+    label: 'State',
+    value: 'state',
+  },
+];
+
+const RuleTypeOptions: SelectableValue[] = [
+  {
+    label: 'Alert ',
+    value: PromRuleType.Alerting,
+  },
+  {
+    label: 'Recording ',
+    value: PromRuleType.Recording,
+  },
+];
+
+const RulesFilter = () => {
+  const [queryParams, setQueryParams] = useQueryParams();
+  // This key is used to force a rerender on the inputs when the filters are cleared
+  const [filterKey, setFilterKey] = useState<number>(Math.floor(Math.random() * 100));
+  const dataSourceKey = `dataSource-${filterKey}`;
+  const queryStringKey = `queryString-${filterKey}`;
+
+  const { dataSource, alertState, queryString, ruleType } = getFiltersFromUrlParams(queryParams);
+
+  const styles = useStyles(getStyles);
+  const stateOptions = Object.entries(PromAlertingRuleState).map(([key, value]) => ({
+    label: alertStateToReadable(value),
+    value,
+  }));
+
+  const handleDataSourceChange = (dataSourceValue: DataSourceInstanceSettings) => {
+    setQueryParams({ dataSource: dataSourceValue.name });
+  };
+
+  const clearDataSource = () => {
+    setQueryParams({ dataSource: null });
+  };
+
+  const handleQueryStringChange = debounce((e: FormEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    setQueryParams({ queryString: target.value || null });
+  }, 600);
+
+  const handleAlertStateChange = (value: string) => {
+    setQueryParams({ alertState: value });
+  };
+
+  const handleViewChange = (view: string) => {
+    setQueryParams({ view });
+  };
+
+  const handleRuleTypeChange = (ruleType: PromRuleType) => {
+    setQueryParams({ ruleType });
+  };
+
+  const handleClearFiltersClick = () => {
+    setQueryParams({
+      alertState: null,
+      queryString: null,
+      dataSource: null,
+      ruleType: null,
+    });
+    setTimeout(() => setFilterKey(filterKey + 1), 100);
+  };
+
+  const searchIcon = <Icon name={'search'} />;
+  return (
+    <div className={styles.container}>
+      <div className={styles.inputWidth}>
+        <Label>Search by data source</Label>
+        <DataSourcePicker
+          key={dataSourceKey}
+          alerting
+          noDefault
+          placeholder="All data sources"
+          current={dataSource}
+          onChange={handleDataSourceChange}
+          onClear={clearDataSource}
+        />
+      </div>
+      <div className={cx(styles.flexRow, styles.spaceBetween)}>
+        <div className={styles.flexRow}>
+          <div className={styles.rowChild}>
+            <Label>
+              <Tooltip
+                content={
+                  <div>
+                    Filter rules and alerts using label querying, ex:
+                    <pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
+                  </div>
+                }
+              >
+                <Icon name="info-circle" className={styles.tooltip} />
+              </Tooltip>
+              Search by label
+            </Label>
+            <Input
+              key={queryStringKey}
+              className={styles.inputWidth}
+              prefix={searchIcon}
+              onChange={handleQueryStringChange}
+              defaultValue={queryString}
+              placeholder="Search"
+              data-testid="search-query-input"
+            />
+          </div>
+          <div className={styles.rowChild}>
+            <Label>State</Label>
+            <RadioButtonGroup options={stateOptions} value={alertState} onChange={handleAlertStateChange} />
+          </div>
+          <div className={styles.rowChild}>
+            <Label>Rule type</Label>
+            <RadioButtonGroup
+              options={RuleTypeOptions}
+              value={ruleType as PromRuleType}
+              onChange={handleRuleTypeChange}
+            />
+          </div>
+          <div className={styles.rowChild}>
+            <Label>View as</Label>
+            <RadioButtonGroup
+              options={ViewOptions}
+              value={String(queryParams['view'] || 'group')}
+              onChange={handleViewChange}
+            />
+          </div>
+        </div>
+        {(dataSource || alertState || queryString || ruleType) && (
+          <div className={styles.flexRow}>
+            <Button
+              className={styles.clearButton}
+              fullWidth={false}
+              icon="times"
+              variant="secondary"
+              onClick={handleClearFiltersClick}
+            >
+              Clear filters
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => {
+  return {
+    container: css`
+      display: flex;
+      flex-direction: column;
+      border-bottom: 1px solid ${theme.colors.border1};
+      padding-bottom: ${theme.spacing.sm};
+
+      & > div {
+        margin-bottom: ${theme.spacing.sm};
+      }
+    `,
+    inputWidth: css`
+      width: 340px;
+      flex-grow: 0;
+    `,
+    flexRow: css`
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      width: 100%;
+      flex-wrap: wrap;
+    `,
+    spaceBetween: css`
+      justify-content: space-between;
+    `,
+    rowChild: css`
+      margin-right: ${theme.spacing.sm};
+      margin-top: ${theme.spacing.sm};
+    `,
+    tooltip: css`
+      margin: 0 ${theme.spacing.xs};
+    `,
+    clearButton: css`
+      margin-top: ${theme.spacing.sm};
+    `,
+  };
+};
+
+export default RulesFilter;
diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
new file mode 100644
index 00000000..b5237649
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
@@ -0,0 +1,200 @@
+import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting';
+import React, { FC, useState, useEffect } from 'react';
+import { HorizontalGroup, Icon, Spinner, Tooltip, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+import { isGrafanaRulerRule } from '../../utils/rules';
+import { CollapseToggle } from '../CollapseToggle';
+import { RulesTable } from './RulesTable';
+import { GRAFANA_RULES_SOURCE_NAME, isCloudRulesSource } from '../../utils/datasource';
+import { ActionIcon } from './ActionIcon';
+import { useHasRuler } from '../../hooks/useHasRuler';
+import kbn from 'app/core/utils/kbn';
+import { useFolder } from '../../hooks/useFolder';
+import { RuleStats } from './RuleStats';
+import { EditCloudGroupModal } from './EditCloudGroupModal';
+
+interface Props {
+  namespace: CombinedRuleNamespace;
+  group: CombinedRuleGroup;
+  expandAll: boolean;
+}
+
+export const RulesGroup: FC<Props> = React.memo(({ group, namespace, expandAll }) => {
+  const { rulesSource } = namespace;
+  const styles = useStyles2(getStyles);
+
+  const [isEditingGroup, setIsEditingGroup] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(!expandAll);
+
+  useEffect(() => {
+    setIsCollapsed(!expandAll);
+  }, [expandAll]);
+
+  const hasRuler = useHasRuler();
+  const rulerRule = group.rules[0]?.rulerRule;
+  const folderUID = (rulerRule && isGrafanaRulerRule(rulerRule) && rulerRule.grafana_alert.namespace_uid) || undefined;
+  const { folder } = useFolder(folderUID);
+
+  // group "is deleting" if rules source has ruler, but this group has no rules that are in ruler
+  const isDeleting = hasRuler(rulesSource) && !group.rules.find((rule) => !!rule.rulerRule);
+
+  const actionIcons: React.ReactNode[] = [];
+
+  // for grafana, link to folder views
+  if (isDeleting) {
+    actionIcons.push(
+      <HorizontalGroup key="is-deleting">
+        <Spinner />
+        deleting
+      </HorizontalGroup>
+    );
+  } else if (rulesSource === GRAFANA_RULES_SOURCE_NAME) {
+    if (folderUID) {
+      const baseUrl = `/dashboards/f/${folderUID}/${kbn.slugifyForUrl(namespace.name)}`;
+      if (folder?.canSave) {
+        actionIcons.push(
+          <ActionIcon
+            aria-label="edit folder"
+            key="edit"
+            icon="pen"
+            tooltip="edit folder"
+            to={baseUrl + '/settings'}
+            target="__blank"
+          />
+        );
+      }
+      if (folder?.canAdmin) {
+        actionIcons.push(
+          <ActionIcon
+            aria-label="manage permissions"
+            key="manage-perms"
+            icon="lock"
+            tooltip="manage permissions"
+            to={baseUrl + '/permissions'}
+            target="__blank"
+          />
+        );
+      }
+    }
+  } else if (hasRuler(rulesSource)) {
+    actionIcons.push(
+      <ActionIcon
+        aria-label="edit rule group"
+        data-testid="edit-group"
+        key="edit"
+        icon="pen"
+        tooltip="edit rule group"
+        onClick={() => setIsEditingGroup(true)}
+      />
+    );
+  }
+
+  const groupName = isCloudRulesSource(rulesSource) ? `${namespace.name} > ${group.name}` : namespace.name;
+
+  return (
+    <div className={styles.wrapper} data-testid="rule-group">
+      <div className={styles.header} data-testid="rule-group-header">
+        <CollapseToggle
+          className={styles.collapseToggle}
+          isCollapsed={isCollapsed}
+          onToggle={setIsCollapsed}
+          data-testid="group-collapse-toggle"
+        />
+        <Icon name={isCollapsed ? 'folder' : 'folder-open'} />
+        {isCloudRulesSource(rulesSource) && (
+          <Tooltip content={rulesSource.name} placement="top">
+            <img
+              alt={rulesSource.meta.name}
+              className={styles.dataSourceIcon}
+              src={rulesSource.meta.info.logos.small}
+            />
+          </Tooltip>
+        )}
+        <h6 className={styles.heading}>{groupName}</h6>
+        <div className={styles.spacer} />
+        <div className={styles.headerStats}>
+          <RuleStats showInactive={false} group={group} />
+        </div>
+        {!!actionIcons.length && (
+          <>
+            <div className={styles.actionsSeparator}>|</div>
+            <div className={styles.actionIcons}>{actionIcons}</div>
+          </>
+        )}
+      </div>
+      {!isCollapsed && (
+        <RulesTable showSummaryColumn={true} className={styles.rulesTable} showGuidelines={true} rules={group.rules} />
+      )}
+      {isEditingGroup && (
+        <EditCloudGroupModal group={group} namespace={namespace} onClose={() => setIsEditingGroup(false)} />
+      )}
+    </div>
+  );
+});
+
+RulesGroup.displayName = 'RulesGroup';
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    & + & {
+      margin-top: ${theme.spacing(2)};
+    }
+  `,
+  header: css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0;
+    background-color: ${theme.colors.background.secondary};
+    flex-wrap: wrap;
+  `,
+  headerStats: css`
+    span {
+      vertical-align: middle;
+    }
+
+    ${theme.breakpoints.down('sm')} {
+      order: 2;
+      width: 100%;
+      padding-left: ${theme.spacing(1)};
+    }
+  `,
+  heading: css`
+    margin-left: ${theme.spacing(1)};
+    margin-bottom: 0;
+  `,
+  spacer: css`
+    flex: 1;
+  `,
+  collapseToggle: css`
+    background: none;
+    border: none;
+    margin-top: -${theme.spacing(1)};
+    margin-bottom: -${theme.spacing(1)};
+
+    svg {
+      margin-bottom: 0;
+    }
+  `,
+  dataSourceIcon: css`
+    width: ${theme.spacing(2)};
+    height: ${theme.spacing(2)};
+    margin-left: ${theme.spacing(2)};
+  `,
+  dataSourceOrigin: css`
+    margin-right: 1em;
+    color: ${theme.colors.text.disabled};
+  `,
+  actionsSeparator: css`
+    margin: 0 ${theme.spacing(2)};
+  `,
+  actionIcons: css`
+    & > * + * {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+  rulesTable: css`
+    margin-top: ${theme.spacing(3)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
new file mode 100644
index 00000000..221d238b
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
@@ -0,0 +1,148 @@
+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 { Annotation } from '../../utils/constants';
+import { RuleState } from './RuleState';
+import { RuleHealth } from './RuleHealth';
+import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
+import { DynamicTableWithGuidelines } from '../DynamicTableWithGuidelines';
+
+type RuleTableColumnProps = DynamicTableColumnProps<CombinedRule>;
+type RuleTableItemProps = DynamicTableItemProps<CombinedRule>;
+
+interface Props {
+  rules: CombinedRule[];
+  showGuidelines?: boolean;
+  showGroupColumn?: boolean;
+  showSummaryColumn?: boolean;
+  emptyMessage?: string;
+  className?: string;
+}
+
+export const RulesTable: FC<Props> = ({
+  rules,
+  className,
+  showGuidelines = false,
+  emptyMessage = 'No rules found.',
+  showGroupColumn = false,
+  showSummaryColumn = false,
+}) => {
+  const styles = useStyles2(getStyles);
+
+  const wrapperClass = cx(styles.wrapper, className, { [styles.wrapperMargin]: showGuidelines });
+
+  const items = useMemo((): RuleTableItemProps[] => {
+    const seenKeys: string[] = [];
+    return rules.map((rule, ruleIdx) => {
+      let key = JSON.stringify([rule.promRule?.type, rule.labels, rule.query, rule.name, rule.annotations]);
+      if (seenKeys.includes(key)) {
+        key += `-${ruleIdx}`;
+      }
+      seenKeys.push(key);
+      return {
+        id: key,
+        data: rule,
+      };
+    });
+  }, [rules]);
+
+  const columns = useColumns(showSummaryColumn, showGroupColumn);
+
+  if (!rules.length) {
+    return <div className={cx(wrapperClass, styles.emptyMessage)}>{emptyMessage}</div>;
+  }
+
+  const TableComponent = showGuidelines ? DynamicTableWithGuidelines : DynamicTable;
+
+  return (
+    <div className={wrapperClass} data-testid="rules-table">
+      <TableComponent
+        cols={columns}
+        isExpandable={true}
+        items={items}
+        renderExpandedContent={({ data: rule }) => <RuleDetails rule={rule} />}
+      />
+    </div>
+  );
+};
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  wrapperMargin: css`
+    ${theme.breakpoints.up('md')} {
+      margin-left: 36px;
+    }
+  `,
+  emptyMessage: css`
+    padding: ${theme.spacing(1)};
+  `,
+  wrapper: css`
+    width: auto;
+    background-color: ${theme.colors.background.secondary};
+    border-radius: ${theme.shape.borderRadius()};
+  `,
+});
+
+function useColumns(showSummaryColumn: boolean, showGroupColumn: boolean) {
+  const hasRuler = useHasRuler();
+
+  return useMemo((): RuleTableColumnProps[] => {
+    const columns: RuleTableColumnProps[] = [
+      {
+        id: 'state',
+        label: 'State',
+        // eslint-disable-next-line react/display-name
+        renderCell: ({ data: rule }) => {
+          const { namespace } = rule;
+          const { rulesSource } = namespace;
+          const { promRule, rulerRule } = rule;
+          const isDeleting = !!(hasRuler(rulesSource) && promRule && !rulerRule);
+          const isCreating = !!(hasRuler(rulesSource) && rulerRule && !promRule);
+          return <RuleState rule={rule} isDeleting={isDeleting} isCreating={isCreating} />;
+        },
+        size: '165px',
+      },
+      {
+        id: 'name',
+        label: 'Name',
+        // eslint-disable-next-line react/display-name
+        renderCell: ({ data: rule }) => rule.name,
+        size: 5,
+      },
+      {
+        id: 'health',
+        label: 'Health',
+        // eslint-disable-next-line react/display-name
+        renderCell: ({ data: { promRule } }) => (promRule ? <RuleHealth rule={promRule} /> : null),
+        size: '75px',
+      },
+    ];
+    if (showSummaryColumn) {
+      columns.push({
+        id: 'summary',
+        label: 'Summary',
+        // eslint-disable-next-line react/display-name
+        renderCell: ({ data: rule }) => rule.annotations[Annotation.summary] ?? '',
+        size: 5,
+      });
+    }
+    if (showGroupColumn) {
+      columns.push({
+        id: 'group',
+        label: 'Group',
+        // 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;
+        },
+        size: 5,
+      });
+    }
+    return columns;
+  }, [hasRuler, showSummaryColumn, showGroupColumn]);
+}
diff --git a/public/app/features/alerting/unified/components/rules/StateHistory.tsx b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
new file mode 100644
index 00000000..f7050eb1
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
@@ -0,0 +1,126 @@
+import React, { FC } from 'react';
+import { uniqueId } from 'lodash';
+import { AlertState, dateTimeFormat, GrafanaTheme } from '@grafana/data';
+import { Alert, LoadingPlaceholder, useStyles } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { StateHistoryItem, StateHistoryItemData } from 'app/types/unified-alerting';
+import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
+import { AlertStateTag } from './AlertStateTag';
+import { useManagedAlertStateHistory } from '../../hooks/useManagedAlertStateHistory';
+import { AlertLabel } from '../AlertLabel';
+import { GrafanaAlertState, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
+
+type StateHistoryRowItem = {
+  id: string;
+  state: PromAlertingRuleState | GrafanaAlertState | AlertState;
+  text?: string;
+  data?: StateHistoryItemData;
+  timestamp?: number;
+};
+
+type StateHistoryRow = DynamicTableItemProps<StateHistoryRowItem>;
+
+interface RuleStateHistoryProps {
+  alertId: string;
+}
+
+const StateHistory: FC<RuleStateHistoryProps> = ({ alertId }) => {
+  const { loading, error, result = [] } = useManagedAlertStateHistory(alertId);
+
+  if (loading && !error) {
+    return <LoadingPlaceholder text={'Loading history...'} />;
+  }
+
+  if (error && !loading) {
+    return <Alert title={'Failed to fetch alert state history'}>{error.message}</Alert>;
+  }
+
+  const columns: Array<DynamicTableColumnProps<StateHistoryRowItem>> = [
+    { id: 'state', label: 'State', size: 'max-content', renderCell: renderStateCell },
+    { id: 'value', label: '', size: 'auto', renderCell: renderValueCell },
+    { id: 'timestamp', label: 'Time', size: 'max-content', renderCell: renderTimestampCell },
+  ];
+
+  const items: StateHistoryRow[] = result
+    .reduce((acc: StateHistoryRowItem[], item, index) => {
+      acc.push({
+        id: String(item.id),
+        state: item.newState,
+        text: item.text,
+        data: item.data,
+        timestamp: item.updated,
+      });
+
+      // if the preceding state is not the same, create a separate state entry – this likely means the state was reset
+      if (!hasMatchingPrecedingState(index, result)) {
+        acc.push({ id: uniqueId(), state: item.prevState });
+      }
+
+      return acc;
+    }, [])
+    .map((historyItem) => ({
+      id: historyItem.id,
+      data: historyItem,
+    }));
+
+  return <DynamicTable cols={columns} items={items} />;
+};
+
+function renderValueCell(item: StateHistoryRow) {
+  const matches = item.data.data?.evalMatches ?? [];
+
+  return (
+    <>
+      {item.data.text}
+      <LabelsWrapper>
+        {matches.map((match) => (
+          <AlertLabel key={match.metric} labelKey={match.metric} value={String(match.value)} />
+        ))}
+      </LabelsWrapper>
+    </>
+  );
+}
+
+function renderStateCell(item: StateHistoryRow) {
+  return <AlertStateTag state={item.data.state} />;
+}
+
+function renderTimestampCell(item: StateHistoryRow) {
+  return (
+    <div className={TimestampStyle}>{item.data.timestamp && <span>{dateTimeFormat(item.data.timestamp)}</span>}</div>
+  );
+}
+
+const LabelsWrapper: FC<{}> = ({ children }) => {
+  const { wrapper } = useStyles(getStyles);
+  return <div className={wrapper}>{children}</div>;
+};
+
+const TimestampStyle = css`
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+`;
+
+const getStyles = (theme: GrafanaTheme) => ({
+  wrapper: css`
+    & > * {
+      margin-right: ${theme.spacing.xs};
+    }
+  `,
+});
+
+// this function will figure out if a given historyItem has a preceding historyItem where the states match - in other words
+// the newState of the previous historyItem is the same as the prevState of the current historyItem
+function hasMatchingPrecedingState(index: number, items: StateHistoryItem[]): boolean {
+  const currentHistoryItem = items[index];
+  const previousHistoryItem = items[index + 1];
+
+  if (!previousHistoryItem) {
+    return false;
+  }
+
+  return previousHistoryItem.newState === currentHistoryItem.prevState;
+}
+
+export { StateHistory };
diff --git a/public/app/features/alerting/unified/components/silences/AmAlertStateTag.tsx b/public/app/features/alerting/unified/components/silences/AmAlertStateTag.tsx
new file mode 100644
index 00000000..66206ed0
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/AmAlertStateTag.tsx
@@ -0,0 +1,15 @@
+import { AlertState } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { State, StateTag } from '../StateTag';
+
+const alertStateToState: Record<AlertState, State> = {
+  [AlertState.Active]: 'bad',
+  [AlertState.Unprocessed]: 'neutral',
+  [AlertState.Suppressed]: 'info',
+};
+
+interface Props {
+  state: AlertState;
+}
+
+export const AmAlertStateTag: FC<Props> = ({ state }) => <StateTag state={alertStateToState[state]}>{state}</StateTag>;
diff --git a/public/app/features/alerting/unified/components/silences/Matchers.tsx b/public/app/features/alerting/unified/components/silences/Matchers.tsx
new file mode 100644
index 00000000..7b3520ce
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/Matchers.tsx
@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import { GrafanaTheme } from '@grafana/data';
+import { useStyles } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { Matcher } from 'app/plugins/datasource/alertmanager/types';
+import { AlertLabel } from '../AlertLabel';
+import { matcherToOperator } from '../../utils/alertmanager';
+
+type MatchersProps = { matchers: Matcher[]; onRemoveLabel?(index: number): void };
+
+export const Matchers = ({ matchers, onRemoveLabel }: MatchersProps) => {
+  const styles = useStyles(getStyles);
+
+  const removeLabel = useCallback(
+    (index: number) => {
+      if (!!onRemoveLabel) {
+        onRemoveLabel(index);
+      }
+    },
+    [onRemoveLabel]
+  );
+
+  return (
+    <div className={styles.wrapper}>
+      {matchers.map((matcher, index) => {
+        const { name, value } = matcher;
+        return (
+          <AlertLabel
+            key={`${name}-${value}-${index}`}
+            labelKey={name}
+            value={value}
+            operator={matcherToOperator(matcher)}
+            onRemoveLabel={!!onRemoveLabel ? () => removeLabel(index) : undefined}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  wrapper: css`
+    & > * {
+      margin-top: ${theme.spacing.xs};
+      margin-right: ${theme.spacing.xs};
+    }
+    padding-bottom: ${theme.spacing.xs};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/silences/MatchersField.tsx b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
new file mode 100644
index 00000000..96ee773c
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
@@ -0,0 +1,138 @@
+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 { useFormContext, useFieldArray } from 'react-hook-form';
+import { SilenceFormFields } from '../../types/silence-form';
+import { MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
+import { matcherFieldOptions } from '../../utils/alertmanager';
+
+interface Props {
+  className?: string;
+}
+
+const MatchersField: FC<Props> = ({ className }) => {
+  const styles = useStyles2(getStyles);
+  const formApi = useFormContext<SilenceFormFields>();
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = formApi;
+
+  const { fields: matchers = [], append, remove } = useFieldArray<SilenceFormFields>({ name: 'matchers' });
+
+  return (
+    <div className={cx(className, styles.wrapper)}>
+      <Field label="Matching labels" required>
+        <div>
+          <div className={styles.matchers}>
+            {matchers.map((matcher, index) => {
+              return (
+                <div className={styles.row} key={`${matcher.id}`} data-testid="matcher">
+                  <Field
+                    label="Label"
+                    invalid={!!errors?.matchers?.[index]?.name}
+                    error={errors?.matchers?.[index]?.name?.message}
+                  >
+                    <Input
+                      {...register(`matchers.${index}.name` as const, {
+                        required: { value: true, message: 'Required.' },
+                      })}
+                      defaultValue={matcher.name}
+                      placeholder="label"
+                    />
+                  </Field>
+                  <Field label={'Operator'}>
+                    <InputControl
+                      control={control}
+                      render={({ field: { onChange, ref, ...field } }) => (
+                        <Select
+                          {...field}
+                          menuShouldPortal
+                          onChange={(value) => onChange(value.value)}
+                          className={styles.matcherOptions}
+                          options={matcherFieldOptions}
+                          aria-label="operator"
+                        />
+                      )}
+                      defaultValue={matcher.operator || matcherFieldOptions[0].value}
+                      name={`matchers.${index}.operator` as const}
+                      rules={{ required: { value: true, message: 'Required.' } }}
+                    />
+                  </Field>
+                  <Field
+                    label="Value"
+                    invalid={!!errors?.matchers?.[index]?.value}
+                    error={errors?.matchers?.[index]?.value?.message}
+                  >
+                    <Input
+                      {...register(`matchers.${index}.value` as const, {
+                        required: { value: true, message: 'Required.' },
+                      })}
+                      defaultValue={matcher.value}
+                      placeholder="value"
+                    />
+                  </Field>
+                  {matchers.length > 1 && (
+                    <IconButton
+                      className={styles.removeButton}
+                      tooltip="Remove matcher"
+                      name={'trash-alt'}
+                      onClick={() => remove(index)}
+                    >
+                      Remove
+                    </IconButton>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+          <Button
+            type="button"
+            icon="plus"
+            variant="secondary"
+            onClick={() => {
+              const newMatcher = { name: '', value: '', operator: MatcherOperator.equal };
+              append(newMatcher);
+            }}
+          >
+            Add matcher
+          </Button>
+        </div>
+      </Field>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    wrapper: css`
+      margin-top: ${theme.spacing(2)};
+    `,
+    row: css`
+      display: flex;
+      align-items: flex-start;
+      flex-direction: row;
+      background-color: ${theme.colors.background.secondary};
+      padding: ${theme.spacing(1)} ${theme.spacing(1)} 0 ${theme.spacing(1)};
+      & > * + * {
+        margin-left: ${theme.spacing(2)};
+      }
+    `,
+    removeButton: css`
+      margin-left: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(2.5)};
+    `,
+    matcherOptions: css`
+      min-width: 140px;
+    `,
+    matchers: css`
+      max-width: 585px;
+      margin: ${theme.spacing(1)} 0;
+      padding-top: ${theme.spacing(0.5)};
+    `,
+  };
+};
+
+export default MatchersField;
diff --git a/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx b/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
new file mode 100644
index 00000000..95a29833
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
@@ -0,0 +1,23 @@
+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 { makeAMLink } from '../../utils/misc';
+
+type Props = {
+  alertManagerSourceName: string;
+};
+
+export const NoSilencesSplash: FC<Props> = ({ alertManagerSourceName }) => {
+  if (contextSrv.isEditor) {
+    return (
+      <EmptyListCTA
+        title="You haven't created any silences yet"
+        buttonIcon="bell-slash"
+        buttonLink={makeAMLink('alerting/silence/new', alertManagerSourceName)}
+        buttonTitle="New silence"
+      />
+    );
+  }
+  return <CallToActionCard callToActionElement={<div />} message="No silences found." />;
+};
diff --git a/public/app/features/alerting/unified/components/silences/SilenceDetails.tsx b/public/app/features/alerting/unified/components/silences/SilenceDetails.tsx
new file mode 100644
index 00000000..e519ec1e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilenceDetails.tsx
@@ -0,0 +1,49 @@
+import { css } from '@emotion/css';
+import { dateMath, GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
+import React from 'react';
+import { useStyles2 } from '@grafana/ui';
+import SilencedAlertsTable from './SilencedAlertsTable';
+
+import { SilenceTableItem } from './SilencesTable';
+
+interface Props {
+  silence: SilenceTableItem;
+}
+
+export const SilenceDetails = ({ silence }: Props) => {
+  const { startsAt, endsAt, comment, createdBy, silencedAlerts } = silence;
+  const styles = useStyles2(getStyles);
+
+  const dateDisplayFormat = 'YYYY-MM-DD HH:mm';
+  const startsAtDate = dateMath.parse(startsAt);
+  const endsAtDate = dateMath.parse(endsAt);
+  const duration = intervalToAbbreviatedDurationString({ start: new Date(startsAt), end: new Date(endsAt) });
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>Comment</div>
+      <div>{comment}</div>
+      <div className={styles.title}>Schedule</div>
+      <div>{`${startsAtDate?.format(dateDisplayFormat)} - ${endsAtDate?.format(dateDisplayFormat)}`}</div>
+      <div className={styles.title}>Duration</div>
+      <div> {duration}</div>
+      <div className={styles.title}>Created by</div>
+      <div> {createdBy}</div>
+      <div className={styles.title}>Affected alerts</div>
+      <SilencedAlertsTable silencedAlerts={silencedAlerts} />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    display: grid;
+    grid-template-columns: 1fr 9fr;
+    grid-row-gap: 1rem;
+  `,
+  title: css`
+    color: ${theme.colors.text.primary};
+  `,
+  row: css`
+    margin: ${theme.spacing(1, 0)};
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/silences/SilencePeriod.tsx b/public/app/features/alerting/unified/components/silences/SilencePeriod.tsx
new file mode 100644
index 00000000..3542a843
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilencePeriod.tsx
@@ -0,0 +1,79 @@
+import { css } from '@emotion/css';
+import { dateTime, GrafanaTheme } from '@grafana/data';
+import { Field, TimeRangeInput, useStyles } from '@grafana/ui';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { SilenceFormFields } from '../../types/silence-form';
+
+export const SilencePeriod = () => {
+  const { control, getValues } = useFormContext<SilenceFormFields>();
+  const styles = useStyles(getStyles);
+  const {
+    field: { onChange: onChangeStartsAt, value: startsAt },
+    fieldState: { invalid: startsAtInvalid },
+  } = useController({
+    name: 'startsAt',
+    control,
+    rules: {
+      validate: (value) => getValues().endsAt > value,
+    },
+  });
+
+  const {
+    field: { onChange: onChangeEndsAt, value: endsAt },
+    fieldState: { invalid: endsAtInvalid },
+  } = useController({
+    name: 'endsAt',
+    control,
+    rules: {
+      validate: (value) => getValues().startsAt < value,
+    },
+  });
+
+  const {
+    field: { onChange: onChangeTimeZone, value: timeZone },
+  } = useController({
+    name: 'timeZone',
+    control,
+  });
+
+  const invalid = startsAtInvalid || endsAtInvalid;
+
+  const from = dateTime(startsAt);
+  const to = dateTime(endsAt);
+
+  return (
+    <Field
+      className={styles.timeRange}
+      label="Silence start and end"
+      error={invalid ? 'To is before or the same as from' : ''}
+      invalid={invalid}
+    >
+      <TimeRangeInput
+        value={{
+          from,
+          to,
+          raw: {
+            from,
+            to,
+          },
+        }}
+        timeZone={timeZone}
+        onChange={(newValue) => {
+          onChangeStartsAt(dateTime(newValue.from));
+          onChangeEndsAt(dateTime(newValue.to));
+        }}
+        onChangeTimeZone={(newValue) => onChangeTimeZone(newValue)}
+        hideTimeZone={false}
+        hideQuickRanges={true}
+        placeholder={'Select time range'}
+      />
+    </Field>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  timeRange: css`
+    width: 400px;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx b/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
new file mode 100644
index 00000000..4b212d3c
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
@@ -0,0 +1,17 @@
+import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC } from 'react';
+import { State, StateTag } from '../StateTag';
+
+const silenceStateToState: Record<SilenceState, State> = {
+  [SilenceState.Active]: 'good',
+  [SilenceState.Expired]: 'neutral',
+  [SilenceState.Pending]: 'neutral',
+};
+
+interface Props {
+  state: SilenceState;
+}
+
+export const SilenceStateTag: FC<Props> = ({ state }) => (
+  <StateTag state={silenceStateToState[state]}>{state}</StateTag>
+);
diff --git a/public/app/features/alerting/unified/components/silences/SilenceTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilenceTableRow.tsx
new file mode 100644
index 00000000..7f76d3c4
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilenceTableRow.tsx
@@ -0,0 +1,139 @@
+import React, { FC, Fragment, useState } from 'react';
+import { dateMath, GrafanaTheme, intervalToAbbreviatedDurationString } from '@grafana/data';
+import { css, cx } from '@emotion/css';
+import { Silence, AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
+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';
+interface Props {
+  className?: string;
+  silence: Silence;
+  silencedAlerts: AlertmanagerAlert[];
+  alertManagerSourceName: string;
+}
+
+const SilenceTableRow: FC<Props> = ({ silence, className, silencedAlerts, alertManagerSourceName }) => {
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
+  const dispatch = useDispatch();
+
+  const styles = useStyles(getStyles);
+  const { status, matchers = [], startsAt, endsAt, comment, createdBy } = silence;
+
+  const dateDisplayFormat = 'YYYY-MM-DD HH:mm';
+  const startsAtDate = dateMath.parse(startsAt);
+  const endsAtDate = dateMath.parse(endsAt);
+  const duration = intervalToAbbreviatedDurationString({ start: new Date(startsAt), end: new Date(endsAt) });
+
+  const handleExpireSilenceClick = () => {
+    dispatch(expireSilenceAction(alertManagerSourceName, silence.id));
+  };
+
+  const detailsColspan = contextSrv.isEditor ? 4 : 3;
+
+  return (
+    <Fragment>
+      <tr className={className} data-testid="silence-table-row">
+        <td>
+          <CollapseToggle isCollapsed={isCollapsed} onToggle={(value) => setIsCollapsed(value)} />
+        </td>
+        <td>
+          <SilenceStateTag state={status.state} />
+        </td>
+        <td className={styles.matchersCell}>
+          <Matchers matchers={matchers} />
+        </td>
+        <td data-testid="silenced-alerts">{silencedAlerts.length}</td>
+        <td>
+          {startsAtDate?.format(dateDisplayFormat)} {'-'}
+          <br />
+          {endsAtDate?.format(dateDisplayFormat)}
+        </td>
+        {contextSrv.isEditor && (
+          <td className={styles.actionsCell}>
+            {status.state === 'expired' ? (
+              <Link href={makeAMLink(`/alerting/silence/${silence.id}/edit`, alertManagerSourceName)}>
+                <ActionButton icon="sync">Recreate</ActionButton>
+              </Link>
+            ) : (
+              <ActionButton icon="bell" onClick={handleExpireSilenceClick}>
+                Unsilence
+              </ActionButton>
+            )}
+            {status.state !== 'expired' && (
+              <ActionIcon
+                to={makeAMLink(`/alerting/silence/${silence.id}/edit`, alertManagerSourceName)}
+                icon="pen"
+                tooltip="edit"
+              />
+            )}
+          </td>
+        )}
+      </tr>
+      {!isCollapsed && (
+        <>
+          <tr className={className}>
+            <td />
+            <td>Comment</td>
+            <td colSpan={detailsColspan}>{comment}</td>
+          </tr>
+          <tr className={className}>
+            <td />
+            <td>Schedule</td>
+            <td colSpan={detailsColspan}>{`${startsAtDate?.format(dateDisplayFormat)} - ${endsAtDate?.format(
+              dateDisplayFormat
+            )}`}</td>
+          </tr>
+          <tr className={className}>
+            <td />
+            <td>Duration</td>
+            <td colSpan={detailsColspan}>{duration}</td>
+          </tr>
+          <tr className={className}>
+            <td />
+            <td>Created by</td>
+            <td colSpan={detailsColspan}>{createdBy}</td>
+          </tr>
+          {!!silencedAlerts.length && (
+            <tr className={cx(className, styles.alertRulesCell)}>
+              <td />
+              <td>Affected alerts</td>
+              <td colSpan={detailsColspan}>
+                <SilencedAlertsTable silencedAlerts={silencedAlerts} />
+              </td>
+            </tr>
+          )}
+        </>
+      )}
+    </Fragment>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  matchersCell: css`
+    & > * + * {
+      margin-left: ${theme.spacing.xs};
+    }
+  `,
+  actionsCell: css`
+    text-align: right;
+    width: 1%;
+    white-space: nowrap;
+
+    & > * + * {
+      margin-left: ${theme.spacing.sm};
+    }
+  `,
+  alertRulesCell: css`
+    vertical-align: top;
+  `,
+});
+
+export default SilenceTableRow;
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
new file mode 100644
index 00000000..0fc23763
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
@@ -0,0 +1,66 @@
+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';
+
+interface Props {
+  silencedAlerts: AlertmanagerAlert[];
+}
+
+const SilencedAlertsTable: FC<Props> = ({ silencedAlerts }) => {
+  const tableStyles = useStyles2(getAlertTableStyles);
+  const styles = useStyles2(getStyles);
+
+  if (!!silencedAlerts.length) {
+    return (
+      <table className={cx(tableStyles.table, styles.tableMargin)}>
+        <colgroup>
+          <col className={tableStyles.colExpand} />
+          <col className={styles.colState} />
+          <col />
+          <col className={styles.colName} />
+          <col />
+        </colgroup>
+        <thead>
+          <tr>
+            <th></th>
+            <th>State</th>
+            <th></th>
+            <th>Alert name</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {silencedAlerts.map((alert, index) => {
+            return (
+              <SilencedAlertsTableRow
+                key={alert.fingerprint}
+                alert={alert}
+                className={index % 2 === 0 ? tableStyles.evenRow : ''}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  } else {
+    return null;
+  }
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  tableMargin: css`
+    margin-bottom: ${theme.spacing(1)};
+  `,
+  colState: css`
+    width: 110px;
+  `,
+  colName: css`
+    width: 65%;
+  `,
+});
+
+export default SilencedAlertsTable;
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
new file mode 100644
index 00000000..9cdb73ec
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
@@ -0,0 +1,55 @@
+import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC, useState } from 'react';
+import { CollapseToggle } from '../CollapseToggle';
+import { ActionIcon } from '../rules/ActionIcon';
+import { getAlertTableStyles } from '../../styles/table';
+import { useStyles2 } from '@grafana/ui';
+import { intervalToAbbreviatedDurationString } from '@grafana/data';
+import { AlertLabels } from '../AlertLabels';
+import { AmAlertStateTag } from './AmAlertStateTag';
+
+interface Props {
+  alert: AlertmanagerAlert;
+  className?: string;
+}
+
+export const SilencedAlertsTableRow: FC<Props> = ({ alert, className }) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const tableStyles = useStyles2(getAlertTableStyles);
+
+  const duration = intervalToAbbreviatedDurationString({
+    start: new Date(alert.startsAt),
+    end: new Date(alert.endsAt),
+  });
+  const alertName = Object.entries(alert.labels).reduce((name, [labelKey, labelValue]) => {
+    if (labelKey === 'alertname' || labelKey === '__alert_rule_title__') {
+      name = labelValue;
+    }
+    return name;
+  }, '');
+  return (
+    <>
+      <tr className={className}>
+        <td>
+          <CollapseToggle isCollapsed={isCollapsed} onToggle={(collapsed) => setIsCollapsed(collapsed)} />
+        </td>
+        <td>
+          <AmAlertStateTag state={alert.status.state} />
+        </td>
+        <td>for {duration} seconds</td>
+        <td>{alertName}</td>
+        <td className={tableStyles.actionsCell}>
+          <ActionIcon icon="chart-line" to={alert.generatorURL} tooltip="View in explorer" />
+        </td>
+      </tr>
+      {!isCollapsed && (
+        <tr className={className}>
+          <td></td>
+          <td colSpan={5}>
+            <AlertLabels labels={alert.labels} />
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
diff --git a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
new file mode 100644
index 00000000..a2bb9c45
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
@@ -0,0 +1,255 @@
+import { MatcherOperator, Silence, SilenceCreatePayload } from 'app/plugins/datasource/alertmanager/types';
+import React, { FC, useMemo, useState } from 'react';
+import { Button, Field, FieldSet, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
+import {
+  DefaultTimeZone,
+  parseDuration,
+  intervalToAbbreviatedDurationString,
+  addDurationToDate,
+  dateTime,
+  isValidDate,
+  UrlQueryMap,
+  GrafanaTheme2,
+} from '@grafana/data';
+import { useDebounce } from 'react-use';
+import { config } from '@grafana/runtime';
+import { pickBy } from 'lodash';
+import MatchersField from './MatchersField';
+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 { useCleanup } from 'app/core/hooks/useCleanup';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { parseQueryParamMatchers } from '../../utils/matchers';
+import { matcherToMatcherField, matcherFieldToMatcher } from '../../utils/alertmanager';
+
+interface Props {
+  silence?: Silence;
+  alertManagerSourceName: string;
+}
+
+const defaultsFromQuery = (queryParams: UrlQueryMap): Partial<SilenceFormFields> => {
+  const defaults: Partial<SilenceFormFields> = {};
+
+  const { matchers, comment } = queryParams;
+
+  if (typeof matchers === 'string') {
+    const formMatchers = parseQueryParamMatchers(matchers);
+    if (formMatchers.length) {
+      defaults.matchers = formMatchers.map(matcherToMatcherField);
+    }
+  }
+
+  if (typeof comment === 'string') {
+    defaults.comment = comment;
+  }
+
+  return defaults;
+};
+
+const getDefaultFormValues = (queryParams: UrlQueryMap, silence?: Silence): SilenceFormFields => {
+  const now = new Date();
+  if (silence) {
+    const isExpired = Date.parse(silence.endsAt) < Date.now();
+    const interval = isExpired
+      ? {
+          start: now,
+          end: addDurationToDate(now, { hours: 2 }),
+        }
+      : { start: new Date(silence.startsAt), end: new Date(silence.endsAt) };
+    return {
+      id: silence.id,
+      startsAt: interval.start.toISOString(),
+      endsAt: interval.end.toISOString(),
+      comment: silence.comment,
+      createdBy: silence.createdBy,
+      duration: intervalToAbbreviatedDurationString(interval),
+      isRegex: false,
+      matchers: silence.matchers?.map(matcherToMatcherField) || [],
+      matcherName: '',
+      matcherValue: '',
+      timeZone: DefaultTimeZone,
+    };
+  } else {
+    const endsAt = addDurationToDate(now, { hours: 2 }); // Default time period is now + 2h
+    return {
+      id: '',
+      startsAt: now.toISOString(),
+      endsAt: endsAt.toISOString(),
+      comment: '',
+      createdBy: config.bootData.user.name,
+      duration: '2h',
+      isRegex: false,
+      matchers: [{ name: '', value: '', operator: MatcherOperator.equal }],
+      matcherName: '',
+      matcherValue: '',
+      timeZone: DefaultTimeZone,
+      ...defaultsFromQuery(queryParams),
+    };
+  }
+};
+
+export const SilencesEditor: FC<Props> = ({ silence, alertManagerSourceName }) => {
+  const [queryParams] = useQueryParams();
+  const defaultValues = useMemo(() => getDefaultFormValues(queryParams, silence), [silence, queryParams]);
+  const formAPI = useForm({ defaultValues });
+  const dispatch = useDispatch();
+  const styles = useStyles2(getStyles);
+
+  const { loading } = useUnifiedAlertingSelector((state) => state.updateSilence);
+
+  useCleanup((state) => state.unifiedAlerting.updateSilence);
+
+  const { register, handleSubmit, formState, watch, setValue, clearErrors } = formAPI;
+
+  const onSubmit = (data: SilenceFormFields) => {
+    const { id, startsAt, endsAt, comment, createdBy, matchers: matchersFields } = data;
+    const matchers = matchersFields.map(matcherFieldToMatcher);
+    const payload = pickBy(
+      {
+        id,
+        startsAt,
+        endsAt,
+        comment,
+        createdBy,
+        matchers,
+      },
+      (value) => !!value
+    ) as SilenceCreatePayload;
+    dispatch(
+      createOrUpdateSilenceAction({
+        alertManagerSourceName,
+        payload,
+        exitOnSave: true,
+        successMessage: `Silence ${payload.id ? 'updated' : 'created'}`,
+      })
+    );
+  };
+
+  const duration = watch('duration');
+  const startsAt = watch('startsAt');
+  const endsAt = watch('endsAt');
+
+  // Keep duration and endsAt in sync
+  const [prevDuration, setPrevDuration] = useState(duration);
+  useDebounce(
+    () => {
+      if (isValidDate(startsAt) && isValidDate(endsAt)) {
+        if (duration !== prevDuration) {
+          setValue('endsAt', dateTime(addDurationToDate(new Date(startsAt), parseDuration(duration))).toISOString());
+          setPrevDuration(duration);
+        } else {
+          const startValue = new Date(startsAt).valueOf();
+          const endValue = new Date(endsAt).valueOf();
+          if (endValue > startValue) {
+            const nextDuration = intervalToAbbreviatedDurationString({
+              start: new Date(startsAt),
+              end: new Date(endsAt),
+            });
+            setValue('duration', nextDuration);
+            setPrevDuration(nextDuration);
+          }
+        }
+      }
+    },
+    700,
+    [clearErrors, duration, endsAt, prevDuration, setValue, startsAt]
+  );
+
+  return (
+    <FormProvider {...formAPI}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FieldSet label={`${silence ? 'Recreate silence' : 'Create silence'}`}>
+          <div className={styles.flexRow}>
+            <SilencePeriod />
+            <Field
+              label="Duration"
+              invalid={!!formState.errors.duration}
+              error={
+                formState.errors.duration &&
+                (formState.errors.duration.type === 'required' ? 'Required field' : formState.errors.duration.message)
+              }
+            >
+              <Input
+                className={styles.createdBy}
+                {...register('duration', {
+                  validate: (value) =>
+                    Object.keys(parseDuration(value)).length === 0
+                      ? 'Invalid duration. Valid example: 1d 4h (Available units: y, M, w, d, h, m, s)'
+                      : undefined,
+                })}
+                id="duration"
+              />
+            </Field>
+          </div>
+
+          <MatchersField />
+          <Field
+            className={cx(styles.field, styles.textArea)}
+            label="Comment"
+            required
+            error={formState.errors.comment?.message}
+            invalid={!!formState.errors.comment}
+          >
+            <TextArea
+              {...register('comment', { required: { value: true, message: 'Required.' } })}
+              placeholder="Details about the silence"
+            />
+          </Field>
+          <Field
+            className={cx(styles.field, styles.createdBy)}
+            label="Created by"
+            required
+            error={formState.errors.createdBy?.message}
+            invalid={!!formState.errors.createdBy}
+          >
+            <Input {...register('createdBy', { required: { value: true, message: 'Required.' } })} placeholder="User" />
+          </Field>
+        </FieldSet>
+        <div className={styles.flexRow}>
+          {loading && (
+            <Button disabled={true} icon="fa fa-spinner" variant="primary">
+              Saving...
+            </Button>
+          )}
+          {!loading && <Button type="submit">Submit</Button>}
+          <LinkButton
+            href={makeAMLink('alerting/silences', alertManagerSourceName)}
+            variant={'secondary'}
+            fill="outline"
+          >
+            Cancel
+          </LinkButton>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  field: css`
+    margin: ${theme.spacing(1, 0)};
+  `,
+  textArea: css`
+    width: 600px;
+  `,
+  createdBy: css`
+    width: 200px;
+  `,
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    & > * {
+      margin-right: ${theme.spacing(1)};
+    }
+  `,
+});
+
+export default SilencesEditor;
diff --git a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
new file mode 100644
index 00000000..13442048
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
@@ -0,0 +1,109 @@
+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 } from 'lodash';
+
+const stateOptions: SelectableValue[] = Object.entries(SilenceState).map(([key, value]) => ({
+  label: key,
+  value,
+}));
+
+export const SilencesFilter = () => {
+  const [queryStringKey, setQueryStringKey] = useState(`queryString-${Math.random() * 100}`);
+  const [queryParams, setQueryParams] = useQueryParams();
+  const { queryString, silenceState } = getSilenceFiltersFromUrlParams(queryParams);
+  const styles = useStyles2(getStyles);
+
+  const handleQueryStringChange = debounce((e: FormEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    setQueryParams({ queryString: target.value || null });
+  }, 400);
+
+  const handleSilenceStateChange = (state: string) => {
+    setQueryParams({ silenceState: state });
+  };
+
+  const clearFilters = () => {
+    setQueryParams({
+      queryString: null,
+      silenceState: null,
+    });
+    setTimeout(() => setQueryStringKey(''));
+  };
+
+  const inputInvalid = queryString && queryString.length > 3 ? parseMatchers(queryString).length === 0 : false;
+
+  return (
+    <div className={styles.flexRow}>
+      <Field
+        className={styles.rowChild}
+        label={
+          <span className={styles.fieldLabel}>
+            <Tooltip
+              content={
+                <div>
+                  Filter silences by matchers using a comma separated list of matchers, ie:
+                  <pre>{`severity=critical, instance=~cluster-us-.+`}</pre>
+                </div>
+              }
+            >
+              <Icon name="info-circle" />
+            </Tooltip>{' '}
+            Search by matchers
+          </span>
+        }
+        invalid={inputInvalid}
+        error={inputInvalid ? 'Query must use valid matcher syntax' : null}
+      >
+        <Input
+          key={queryStringKey}
+          className={styles.searchInput}
+          prefix={<Icon name="search" />}
+          onChange={handleQueryStringChange}
+          defaultValue={queryString ?? ''}
+          placeholder="Search"
+          data-testid="search-query-input"
+        />
+      </Field>
+
+      <div className={styles.rowChild}>
+        <Label>State</Label>
+        <RadioButtonGroup options={stateOptions} value={silenceState} onChange={handleSilenceStateChange} />
+      </div>
+      {(queryString || silenceState) && (
+        <div className={styles.rowChild}>
+          <Button variant="secondary" icon="times" onClick={clearFilters}>
+            Clear filters
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  searchInput: css`
+    width: 360px;
+  `,
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    padding-bottom: ${theme.spacing(2)};
+    border-bottom: 1px solid ${theme.colors.border.strong};
+  `,
+  rowChild: css`
+    margin-right: ${theme.spacing(1)};
+    margin-bottom: 0;
+    max-height: 52px;
+  `,
+  fieldLabel: css`
+    font-size: 12px;
+    font-weight: 500;
+  `,
+});
diff --git a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
new file mode 100644
index 00000000..74422e8e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
@@ -0,0 +1,252 @@
+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 { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { SilencesFilter } from './SilencesFilter';
+import { parseMatchers } from '../../utils/alertmanager';
+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 { SilenceDetails } from './SilenceDetails';
+
+export interface SilenceTableItem extends Silence {
+  silencedAlerts: AlertmanagerAlert[];
+}
+
+type SilenceTableColumnProps = DynamicTableColumnProps<SilenceTableItem>;
+type SilenceTableItemProps = DynamicTableItemProps<SilenceTableItem>;
+interface Props {
+  silences: Silence[];
+  alertManagerAlerts: AlertmanagerAlert[];
+  alertManagerSourceName: string;
+}
+
+const SilencesTable: FC<Props> = ({ silences, alertManagerAlerts, alertManagerSourceName }) => {
+  const styles = useStyles2(getStyles);
+  const [queryParams] = useQueryParams();
+  const filteredSilences = useFilteredSilences(silences);
+
+  const { silenceState } = getSilenceFiltersFromUrlParams(queryParams);
+
+  const showExpiredSilencesBanner =
+    !!filteredSilences.length && (silenceState === undefined || silenceState === SilenceState.Expired);
+
+  const columns = useColumns(alertManagerSourceName);
+
+  const items = useMemo((): SilenceTableItemProps[] => {
+    const findSilencedAlerts = (id: string) => {
+      return alertManagerAlerts.filter((alert) => alert.status.silencedBy.includes(id));
+    };
+    return filteredSilences.map((silence) => {
+      const silencedAlerts = findSilencedAlerts(silence.id);
+      return {
+        id: silence.id,
+        data: { ...silence, silencedAlerts },
+      };
+    });
+  }, [filteredSilences, alertManagerAlerts]);
+
+  return (
+    <div data-testid="silences-table">
+      {!!silences.length && (
+        <>
+          <SilencesFilter />
+          {contextSrv.isEditor && (
+            <div className={styles.topButtonContainer}>
+              <Link href={makeAMLink('/alerting/silence/new', alertManagerSourceName)}>
+                <Button className={styles.addNewSilence} icon="plus">
+                  New Silence
+                </Button>
+              </Link>
+            </div>
+          )}
+          {!!items.length ? (
+            <>
+              <DynamicTable
+                items={items}
+                cols={columns}
+                isExpandable
+                renderExpandedContent={({ data }) => <SilenceDetails silence={data} />}
+              />
+              {showExpiredSilencesBanner && (
+                <div className={styles.callout}>
+                  <Icon className={styles.calloutIcon} name="info-circle" />
+                  <span>Expired silences are automatically deleted after 5 days.</span>
+                </div>
+              )}
+            </>
+          ) : (
+            'No matching silences found'
+          )}
+        </>
+      )}
+      {!silences.length && <NoSilencesSplash alertManagerSourceName={alertManagerSourceName} />}
+    </div>
+  );
+};
+
+const useFilteredSilences = (silences: Silence[]) => {
+  const [queryParams] = useQueryParams();
+  return useMemo(() => {
+    const { queryString, silenceState } = getSilenceFiltersFromUrlParams(queryParams);
+    const silenceIdsString = queryParams?.silenceIds;
+    return silences.filter((silence) => {
+      if (typeof silenceIdsString === 'string') {
+        const idsIncluded = silenceIdsString.split(',').includes(silence.id);
+        if (!idsIncluded) {
+          return false;
+        }
+      }
+      if (queryString) {
+        const matchers = parseMatchers(queryString);
+        const matchersMatch = matchers.every((matcher) =>
+          silence.matchers?.some(
+            ({ name, value, isEqual, isRegex }) =>
+              matcher.name === name &&
+              matcher.value === value &&
+              matcher.isEqual === isEqual &&
+              matcher.isRegex === isRegex
+          )
+        );
+        if (!matchersMatch) {
+          return false;
+        }
+      }
+      if (silenceState) {
+        const stateMatches = silence.status.state === silenceState;
+        if (!stateMatches) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }, [queryParams, silences]);
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  topButtonContainer: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  `,
+  addNewSilence: css`
+    margin: ${theme.spacing(2, 0)};
+  `,
+  callout: css`
+    background-color: ${theme.colors.background.secondary};
+    border-top: 3px solid ${theme.colors.info.border};
+    border-radius: 2px;
+    height: 62px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: ${theme.spacing(2)};
+
+    & > * {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+  calloutIcon: css`
+    color: ${theme.colors.info.text};
+  `,
+  editButton: css`
+    margin-left: ${theme.spacing(0.5)};
+  `,
+});
+
+function useColumns(alertManagerSourceName: string) {
+  const dispatch = useDispatch();
+  const styles = useStyles2(getStyles);
+  return useMemo((): SilenceTableColumnProps[] => {
+    const handleExpireSilenceClick = (id: string) => {
+      dispatch(expireSilenceAction(alertManagerSourceName, id));
+    };
+    const showActions = contextSrv.isEditor;
+    const columns: SilenceTableColumnProps[] = [
+      {
+        id: 'state',
+        label: 'State',
+        renderCell: function renderStateTag({ data: { status } }) {
+          return <SilenceStateTag state={status.state} />;
+        },
+        size: '88px',
+      },
+      {
+        id: 'matchers',
+        label: 'Matching labels',
+        renderCell: function renderMatchers({ data: { matchers } }) {
+          return <Matchers matchers={matchers || []} />;
+        },
+        size: 9,
+      },
+      {
+        id: 'alerts',
+        label: 'Alerts',
+        renderCell: function renderSilencedAlerts({ data: { silencedAlerts } }) {
+          return <span data-testid="alerts">{silencedAlerts.length}</span>;
+        },
+        size: 1,
+      },
+      {
+        id: 'schedule',
+        label: 'Schedule',
+        renderCell: function renderSchedule({ data: { startsAt, endsAt } }) {
+          const startsAtDate = dateMath.parse(startsAt);
+          const endsAtDate = dateMath.parse(endsAt);
+          const dateDisplayFormat = 'YYYY-MM-DD HH:mm';
+          return (
+            <>
+              {' '}
+              {startsAtDate?.format(dateDisplayFormat)} {'-'}
+              <br />
+              {endsAtDate?.format(dateDisplayFormat)}
+            </>
+          );
+        },
+        size: '150px',
+      },
+    ];
+    if (showActions) {
+      columns.push({
+        id: 'actions',
+        label: 'Actions',
+        renderCell: function renderActions({ data: silence }) {
+          return (
+            <>
+              {silence.status.state === 'expired' ? (
+                <Link href={makeAMLink(`/alerting/silence/${silence.id}/edit`, alertManagerSourceName)}>
+                  <ActionButton icon="sync">Recreate</ActionButton>
+                </Link>
+              ) : (
+                <ActionButton icon="bell" onClick={() => handleExpireSilenceClick(silence.id)}>
+                  Unsilence
+                </ActionButton>
+              )}
+              {silence.status.state !== 'expired' && (
+                <ActionIcon
+                  className={styles.editButton}
+                  to={makeAMLink(`/alerting/silence/${silence.id}/edit`, alertManagerSourceName)}
+                  icon="pen"
+                  tooltip="edit"
+                />
+              )}
+            </>
+          );
+        },
+        size: '140px',
+      });
+    }
+    return columns;
+  }, [alertManagerSourceName, dispatch, styles]);
+}
+
+export default SilencesTable;
diff --git a/public/app/features/alerting/unified/hooks/useAlertManagerSourceName.ts b/public/app/features/alerting/unified/hooks/useAlertManagerSourceName.ts
new file mode 100644
index 00000000..9ffbcd06
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useAlertManagerSourceName.ts
@@ -0,0 +1,54 @@
+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';
+
+function isAlertManagerSource(alertManagerSourceName: string): boolean {
+  return (
+    alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME ||
+    !!getAlertManagerDataSources().find((ds) => ds.name === alertManagerSourceName)
+  );
+}
+
+/* this will return am name either from query params or from local storage or a default (grafana).
+ *
+ * fallbackUrl - if provided, will redirect to this url if alertmanager provided in query no longer
+ */
+export function useAlertManagerSourceName(): [string | undefined, (alertManagerSourceName: string) => void] {
+  const [queryParams, updateQueryParams] = useQueryParams();
+
+  const update = useCallback(
+    (alertManagerSourceName: string) => {
+      if (!isAlertManagerSource(alertManagerSourceName)) {
+        return;
+      }
+      if (alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME) {
+        store.delete(ALERTMANAGER_NAME_LOCAL_STORAGE_KEY);
+        updateQueryParams({ [ALERTMANAGER_NAME_QUERY_KEY]: null });
+      } else {
+        store.set(ALERTMANAGER_NAME_LOCAL_STORAGE_KEY, alertManagerSourceName);
+        updateQueryParams({ [ALERTMANAGER_NAME_QUERY_KEY]: alertManagerSourceName });
+      }
+    },
+    [updateQueryParams]
+  );
+
+  const querySource = queryParams[ALERTMANAGER_NAME_QUERY_KEY];
+
+  if (querySource && typeof querySource === 'string') {
+    if (isAlertManagerSource(querySource)) {
+      return [querySource, update];
+    } else {
+      // non existing alertmanager
+      return [undefined, update];
+    }
+  }
+  const storeSource = store.get(ALERTMANAGER_NAME_LOCAL_STORAGE_KEY);
+  if (storeSource && typeof storeSource === 'string' && isAlertManagerSource(storeSource)) {
+    update(storeSource);
+    return [storeSource, update];
+  }
+
+  return [GRAFANA_RULES_SOURCE_NAME, update];
+}
diff --git a/public/app/features/alerting/unified/hooks/useCombinedRule.ts b/public/app/features/alerting/unified/hooks/useCombinedRule.ts
new file mode 100644
index 00000000..7809c75f
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useCombinedRule.ts
@@ -0,0 +1,116 @@
+import { useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { CombinedRule, RuleIdentifier, RuleNamespace } from 'app/types/unified-alerting';
+import { AsyncRequestMapSlice, AsyncRequestState, initialAsyncRequestState } from '../utils/redux';
+import { useCombinedRuleNamespaces } from './useCombinedRuleNamespaces';
+import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+import { fetchPromRulesAction, fetchRulerRulesAction } from '../state/actions';
+import { RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
+import * as ruleId from '../utils/rule-id';
+import { isRulerNotSupportedResponse } from '../utils/rules';
+
+export function useCombinedRule(
+  identifier: RuleIdentifier | undefined,
+  ruleSourceName: string | undefined
+): AsyncRequestState<CombinedRule> {
+  const requestState = useCombinedRulesLoader(ruleSourceName);
+  const combinedRules = useCombinedRuleNamespaces(ruleSourceName);
+
+  const rule = useMemo(() => {
+    if (!identifier || !ruleSourceName || combinedRules.length === 0) {
+      return;
+    }
+
+    for (const namespace of combinedRules) {
+      for (const group of namespace.groups) {
+        for (const rule of group.rules) {
+          const id = ruleId.fromCombinedRule(ruleSourceName, rule);
+
+          if (ruleId.equal(id, identifier)) {
+            return rule;
+          }
+        }
+      }
+    }
+
+    return;
+  }, [identifier, ruleSourceName, combinedRules]);
+
+  return {
+    ...requestState,
+    result: rule,
+  };
+}
+
+export function useCombinedRulesMatching(
+  ruleName: string | undefined,
+  ruleSourceName: string | undefined
+): AsyncRequestState<CombinedRule[]> {
+  const requestState = useCombinedRulesLoader(ruleSourceName);
+  const combinedRules = useCombinedRuleNamespaces(ruleSourceName);
+
+  const rules = useMemo(() => {
+    if (!ruleName || !ruleSourceName || combinedRules.length === 0) {
+      return [];
+    }
+
+    const rules: CombinedRule[] = [];
+
+    for (const namespace of combinedRules) {
+      for (const group of namespace.groups) {
+        for (const rule of group.rules) {
+          if (rule.name === ruleName) {
+            rules.push(rule);
+          }
+        }
+      }
+    }
+
+    return rules;
+  }, [ruleName, ruleSourceName, combinedRules]);
+
+  return {
+    ...requestState,
+    result: rules,
+  };
+}
+
+function useCombinedRulesLoader(rulesSourceName: string | undefined): AsyncRequestState<void> {
+  const dispatch = useDispatch();
+  const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules);
+  const promRuleRequest = getRequestState(rulesSourceName, promRuleRequests);
+  const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
+  const rulerRuleRequest = getRequestState(rulesSourceName, rulerRuleRequests);
+
+  useEffect(() => {
+    if (!rulesSourceName) {
+      return;
+    }
+
+    dispatch(fetchPromRulesAction({ rulesSourceName }));
+    dispatch(fetchRulerRulesAction({ rulesSourceName }));
+  }, [dispatch, rulesSourceName]);
+
+  return {
+    loading: promRuleRequest.loading || rulerRuleRequest.loading,
+    error: promRuleRequest.error ?? isRulerNotSupportedResponse(rulerRuleRequest) ? undefined : rulerRuleRequest.error,
+    dispatched: promRuleRequest.dispatched && rulerRuleRequest.dispatched,
+  };
+}
+
+function getRequestState(
+  ruleSourceName: string | undefined,
+  slice: AsyncRequestMapSlice<RulerRulesConfigDTO | RuleNamespace[] | null>
+): AsyncRequestState<RulerRulesConfigDTO | RuleNamespace[] | null> {
+  if (!ruleSourceName) {
+    return initialAsyncRequestState;
+  }
+
+  const state = slice[ruleSourceName];
+
+  if (!state) {
+    return initialAsyncRequestState;
+  }
+
+  return state;
+}
diff --git a/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
new file mode 100644
index 00000000..13abd147
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts
@@ -0,0 +1,236 @@
+import {
+  CombinedRule,
+  CombinedRuleGroup,
+  CombinedRuleNamespace,
+  Rule,
+  RuleGroup,
+  RuleNamespace,
+  RulesSource,
+} from 'app/types/unified-alerting';
+import { RulerRuleDTO, RulerRuleGroupDTO, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
+import { useMemo, useRef } from 'react';
+import {
+  getAllRulesSources,
+  getRulesSourceByName,
+  isCloudRulesSource,
+  isGrafanaRulesSource,
+} from '../utils/datasource';
+import { isAlertingRule, isAlertingRulerRule, isRecordingRulerRule } from '../utils/rules';
+import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+
+interface CacheValue {
+  promRules?: RuleNamespace[];
+  rulerRules?: RulerRulesConfigDTO | null;
+  result: CombinedRuleNamespace[];
+}
+
+// this little monster combines prometheus rules and ruler rules to produce a unified data structure
+// can limit to a single rules source
+export function useCombinedRuleNamespaces(rulesSourceName?: string): CombinedRuleNamespace[] {
+  const promRulesResponses = useUnifiedAlertingSelector((state) => state.promRules);
+  const rulerRulesResponses = useUnifiedAlertingSelector((state) => state.rulerRules);
+
+  // cache results per rules source, so we only recalculate those for which results have actually changed
+  const cache = useRef<Record<string, CacheValue>>({});
+
+  const rulesSources = useMemo((): RulesSource[] => {
+    if (rulesSourceName) {
+      const rulesSource = getRulesSourceByName(rulesSourceName);
+      if (!rulesSource) {
+        throw new Error(`Unknown rules source: ${rulesSourceName}`);
+      }
+      return [rulesSource];
+    }
+    return getAllRulesSources();
+  }, [rulesSourceName]);
+
+  return useMemo(
+    () =>
+      rulesSources
+        .map((rulesSource): CombinedRuleNamespace[] => {
+          const rulesSourceName = isCloudRulesSource(rulesSource) ? rulesSource.name : rulesSource;
+          const promRules = promRulesResponses[rulesSourceName]?.result;
+          const rulerRules = rulerRulesResponses[rulesSourceName]?.result;
+
+          const cached = cache.current[rulesSourceName];
+          if (cached && cached.promRules === promRules && cached.rulerRules === rulerRules) {
+            return cached.result;
+          }
+          const namespaces: Record<string, CombinedRuleNamespace> = {};
+
+          // first get all the ruler rules in
+          Object.entries(rulerRules || {}).forEach(([namespaceName, groups]) => {
+            const namespace: CombinedRuleNamespace = {
+              rulesSource,
+              name: namespaceName,
+              groups: [],
+            };
+            namespaces[namespaceName] = namespace;
+            addRulerGroupsToCombinedNamespace(namespace, groups);
+          });
+
+          // then correlate with prometheus rules
+          promRules?.forEach(({ name: namespaceName, groups }) => {
+            const ns = (namespaces[namespaceName] = namespaces[namespaceName] || {
+              rulesSource,
+              name: namespaceName,
+              groups: [],
+            });
+
+            addPromGroupsToCombinedNamespace(ns, groups);
+          });
+
+          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;
+        })
+        .flat(),
+    [promRulesResponses, rulerRulesResponses, rulesSources]
+  );
+}
+
+function addRulerGroupsToCombinedNamespace(namespace: CombinedRuleNamespace, groups: RulerRuleGroupDTO[]): void {
+  namespace.groups = groups.map((group) => {
+    const combinedGroup: CombinedRuleGroup = {
+      name: group.name,
+      interval: group.interval,
+      rules: [],
+    };
+    combinedGroup.rules = group.rules.map((rule) => rulerRuleToCombinedRule(rule, namespace, combinedGroup));
+    return combinedGroup;
+  });
+}
+
+function addPromGroupsToCombinedNamespace(namespace: CombinedRuleNamespace, groups: RuleGroup[]): void {
+  groups.forEach((group) => {
+    let combinedGroup = namespace.groups.find((g) => g.name === group.name);
+    if (!combinedGroup) {
+      combinedGroup = {
+        name: group.name,
+        rules: [],
+      };
+      namespace.groups.push(combinedGroup);
+    }
+
+    (group.rules ?? []).forEach((rule) => {
+      const existingRule = getExistingRuleInGroup(rule, combinedGroup!, namespace.rulesSource);
+      if (existingRule) {
+        existingRule.promRule = rule;
+      } else {
+        combinedGroup!.rules.push(promRuleToCombinedRule(rule, namespace, combinedGroup!));
+      }
+    });
+  });
+}
+
+function promRuleToCombinedRule(rule: Rule, namespace: CombinedRuleNamespace, group: CombinedRuleGroup): CombinedRule {
+  return {
+    name: rule.name,
+    query: rule.query,
+    labels: rule.labels || {},
+    annotations: isAlertingRule(rule) ? rule.annotations || {} : {},
+    promRule: rule,
+    namespace: namespace,
+    group,
+  };
+}
+
+function rulerRuleToCombinedRule(
+  rule: RulerRuleDTO,
+  namespace: CombinedRuleNamespace,
+  group: CombinedRuleGroup
+): CombinedRule {
+  return isAlertingRulerRule(rule)
+    ? {
+        name: rule.alert,
+        query: rule.expr,
+        labels: rule.labels || {},
+        annotations: rule.annotations || {},
+        rulerRule: rule,
+        namespace,
+        group,
+      }
+    : isRecordingRulerRule(rule)
+    ? {
+        name: rule.record,
+        query: rule.expr,
+        labels: rule.labels || {},
+        annotations: {},
+        rulerRule: rule,
+        namespace,
+        group,
+      }
+    : {
+        name: rule.grafana_alert.title,
+        query: '',
+        labels: rule.labels || {},
+        annotations: rule.annotations || {},
+        rulerRule: rule,
+        namespace,
+        group,
+      };
+}
+
+// find existing rule in group that matches the given prom rule
+function getExistingRuleInGroup(
+  rule: Rule,
+  group: CombinedRuleGroup,
+  rulesSource: RulesSource
+): CombinedRule | undefined {
+  if (isGrafanaRulesSource(rulesSource)) {
+    // assume grafana groups have only the one rule. check name anyway because paranoid
+    return group!.rules.find((existingRule) => existingRule.name === rule.name);
+  }
+  return (
+    // try finding a rule that matches name, labels, annotations and query
+    group!.rules.find(
+      (existingRule) => !existingRule.promRule && isCombinedRuleEqualToPromRule(existingRule, rule, true)
+    ) ??
+    // if that fails, try finding a rule that only matches name, labels and annotations.
+    // loki & prom can sometimes modify the query so it doesnt match, eg `2 > 1` becomes `1`
+    group!.rules.find(
+      (existingRule) => !existingRule.promRule && isCombinedRuleEqualToPromRule(existingRule, rule, false)
+    )
+  );
+}
+
+function isCombinedRuleEqualToPromRule(combinedRule: CombinedRule, rule: Rule, checkQuery = true): boolean {
+  if (combinedRule.name === rule.name) {
+    return (
+      JSON.stringify([
+        checkQuery ? hashQuery(combinedRule.query) : '',
+        combinedRule.labels,
+        combinedRule.annotations,
+      ]) ===
+      JSON.stringify([
+        checkQuery ? hashQuery(rule.query) : '',
+        rule.labels || {},
+        isAlertingRule(rule) ? rule.annotations || {} : {},
+      ])
+    );
+  }
+  return false;
+}
+
+// there can be slight differences in how prom & ruler render a query, this will hash them accounting for the differences
+function hashQuery(query: string) {
+  // one of them might be wrapped in parens
+  if (query.length > 1 && query[0] === '(' && query[query.length - 1] === ')') {
+    query = query.substr(1, query.length - 2);
+  }
+  // whitespace could be added or removed
+  query = query.replace(/\s|\n/g, '');
+  // labels matchers can be reordered, so sort the enitre string, esentially comparing just the character counts
+  return query.split('').sort().join('');
+}
diff --git a/public/app/features/alerting/unified/hooks/useControlledFieldArray.ts b/public/app/features/alerting/unified/hooks/useControlledFieldArray.ts
new file mode 100644
index 00000000..b42831c0
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useControlledFieldArray.ts
@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+
+import { set } from 'lodash';
+
+interface Options<R> {
+  name: string;
+  formAPI: UseFormReturn<any>;
+  defaults?: R[];
+
+  // if true, sets `__deleted: true` but does not remove item from the array in values
+  softDelete?: boolean;
+}
+
+export type ControlledField<R> = R & {
+  __deleted?: boolean;
+};
+
+const EMPTY_ARRAY = [] as const;
+
+/*
+ * react-hook-form's own useFieldArray is uncontrolled and super buggy.
+ * this is a simple controlled version. It's dead simple and more robust at the cost of re-rendering the form
+ * on every change to the sub forms in the array.
+ * Warning: you'll have to take care of your own unique identiifer to use as `key` for the ReactNode array.
+ * Using index will cause problems.
+ */
+export function useControlledFieldArray<R>(options: Options<R>) {
+  const { name, formAPI, defaults, softDelete } = options;
+  const { watch, getValues, reset, setValue } = formAPI;
+
+  const fields: Array<ControlledField<R>> = watch(name) ?? defaults ?? EMPTY_ARRAY;
+
+  const update = useCallback(
+    (updateFn: (fields: R[]) => R[]) => {
+      const values = JSON.parse(JSON.stringify(getValues()));
+      const newItems = updateFn(fields ?? []);
+      reset(set(values, name, newItems));
+    },
+    [getValues, name, reset, fields]
+  );
+
+  return {
+    fields,
+    append: useCallback((values: R) => update((fields) => [...fields, values]), [update]),
+    remove: useCallback(
+      (index: number) => {
+        if (softDelete) {
+          setValue(`${name}.${index}.__deleted`, true);
+        } else {
+          update((items) => {
+            const newItems = items.slice();
+            newItems.splice(index, 1);
+            return newItems;
+          });
+        }
+      },
+      [update, name, setValue, softDelete]
+    ),
+  };
+}
diff --git a/public/app/features/alerting/unified/hooks/useExternalAMSelector.test.ts b/public/app/features/alerting/unified/hooks/useExternalAMSelector.test.ts
new file mode 100644
index 00000000..823141fe
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useExternalAMSelector.test.ts
@@ -0,0 +1,129 @@
+import * as reactRedux from 'react-redux';
+import { useExternalAmSelector } from './useExternalAmSelector';
+
+const createMockStoreState = (
+  activeAlertmanagers: Array<{ url: string }>,
+  droppedAlertmanagers: Array<{ url: string }>,
+  alertmanagerConfig: string[]
+) => ({
+  unifiedAlerting: {
+    externalAlertmanagers: {
+      discoveredAlertmanagers: {
+        result: {
+          data: {
+            activeAlertManagers: activeAlertmanagers,
+            droppedAlertManagers: droppedAlertmanagers,
+          },
+        },
+      },
+      alertmanagerConfig: {
+        result: {
+          alertmanagers: alertmanagerConfig,
+        },
+      },
+    },
+  },
+});
+
+describe('useExternalAmSelector', () => {
+  const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
+  beforeEach(() => {
+    useSelectorMock.mockClear();
+  });
+  it('should have one in pending', () => {
+    useSelectorMock.mockImplementation((callback) => {
+      return callback(createMockStoreState([], [], ['some/url/to/am']));
+    });
+    const alertmanagers = useExternalAmSelector();
+
+    expect(alertmanagers).toEqual([
+      {
+        url: 'some/url/to/am',
+        status: 'pending',
+        actualUrl: '',
+      },
+    ]);
+  });
+
+  it('should have one active, one pending', () => {
+    useSelectorMock.mockImplementation((callback) => {
+      return callback(
+        createMockStoreState([{ url: 'some/url/to/am/api/v2/alerts' }], [], ['some/url/to/am', 'some/url/to/am1'])
+      );
+    });
+
+    const alertmanagers = useExternalAmSelector();
+
+    expect(alertmanagers).toEqual([
+      {
+        url: 'some/url/to/am',
+        actualUrl: 'some/url/to/am/api/v2/alerts',
+        status: 'active',
+      },
+      {
+        url: 'some/url/to/am1',
+        actualUrl: '',
+        status: 'pending',
+      },
+    ]);
+  });
+
+  it('should have two active', () => {
+    useSelectorMock.mockImplementation((callback) => {
+      return callback(
+        createMockStoreState(
+          [{ url: 'some/url/to/am/api/v2/alerts' }, { url: 'some/url/to/am1/api/v2/alerts' }],
+          [],
+          ['some/url/to/am', 'some/url/to/am1']
+        )
+      );
+    });
+
+    const alertmanagers = useExternalAmSelector();
+
+    expect(alertmanagers).toEqual([
+      {
+        url: 'some/url/to/am',
+        actualUrl: 'some/url/to/am/api/v2/alerts',
+        status: 'active',
+      },
+      {
+        url: 'some/url/to/am1',
+        actualUrl: 'some/url/to/am1/api/v2/alerts',
+        status: 'active',
+      },
+    ]);
+  });
+
+  it('should have one active, one dropped, one pending', () => {
+    useSelectorMock.mockImplementation((callback) => {
+      return callback(
+        createMockStoreState(
+          [{ url: 'some/url/to/am/api/v2/alerts' }],
+          [{ url: 'some/dropped/url/api/v2/alerts' }],
+          ['some/url/to/am', 'some/url/to/am1']
+        )
+      );
+    });
+
+    const alertmanagers = useExternalAmSelector();
+
+    expect(alertmanagers).toEqual([
+      {
+        url: 'some/url/to/am',
+        actualUrl: 'some/url/to/am/api/v2/alerts',
+        status: 'active',
+      },
+      {
+        url: 'some/url/to/am1',
+        actualUrl: '',
+        status: 'pending',
+      },
+      {
+        url: 'some/dropped/url',
+        actualUrl: 'some/dropped/url/api/v2/alerts',
+        status: 'dropped',
+      },
+    ]);
+  });
+});
diff --git a/public/app/features/alerting/unified/hooks/useExternalAmSelector.ts b/public/app/features/alerting/unified/hooks/useExternalAmSelector.ts
new file mode 100644
index 00000000..a4297f7b
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useExternalAmSelector.ts
@@ -0,0 +1,56 @@
+import { useSelector } from 'react-redux';
+import { StoreState } from '../../../../types';
+
+const SUFFIX_REGEX = /\/api\/v[1|2]\/alerts/i;
+type AlertmanagerConfig = { url: string; status: string; actualUrl: string };
+
+export function useExternalAmSelector(): AlertmanagerConfig[] | undefined {
+  const discoveredAlertmanagers = useSelector(
+    (state: StoreState) => state.unifiedAlerting.externalAlertmanagers.discoveredAlertmanagers.result?.data
+  );
+  const alertmanagerConfig = useSelector(
+    (state: StoreState) => state.unifiedAlerting.externalAlertmanagers.alertmanagerConfig.result?.alertmanagers
+  );
+
+  if (!discoveredAlertmanagers || !alertmanagerConfig) {
+    return [];
+  }
+
+  const enabledAlertmanagers: AlertmanagerConfig[] = [];
+  const droppedAlertmanagers: AlertmanagerConfig[] = discoveredAlertmanagers?.droppedAlertManagers.map((am) => ({
+    url: am.url.replace(SUFFIX_REGEX, ''),
+    status: 'dropped',
+    actualUrl: am.url,
+  }));
+
+  for (const url of alertmanagerConfig) {
+    if (discoveredAlertmanagers.activeAlertManagers.length === 0) {
+      enabledAlertmanagers.push({
+        url: url,
+        status: 'pending',
+        actualUrl: '',
+      });
+    } else {
+      let found = false;
+      for (const activeAM of discoveredAlertmanagers.activeAlertManagers) {
+        if (activeAM.url === `${url}/api/v2/alerts`) {
+          found = true;
+          enabledAlertmanagers.push({
+            url: activeAM.url.replace(SUFFIX_REGEX, ''),
+            status: 'active',
+            actualUrl: activeAM.url,
+          });
+        }
+      }
+      if (!found) {
+        enabledAlertmanagers.push({
+          url: url,
+          status: 'pending',
+          actualUrl: '',
+        });
+      }
+    }
+  }
+
+  return [...enabledAlertmanagers, ...droppedAlertmanagers];
+}
diff --git a/public/app/features/alerting/unified/hooks/useFilteredAmGroups.ts b/public/app/features/alerting/unified/hooks/useFilteredAmGroups.ts
new file mode 100644
index 00000000..fb5f54ae
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useFilteredAmGroups.ts
@@ -0,0 +1,30 @@
+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';
+
+export const useFilteredAmGroups = (groups: AlertmanagerGroup[]) => {
+  const [queryParams] = useQueryParams();
+  const filters = getFiltersFromUrlParams(queryParams);
+  const matchers = parseMatchers(filters.queryString || '');
+
+  return useMemo(() => {
+    return groups.reduce((filteredGroup, group) => {
+      const alerts = group.alerts.filter(({ labels, status }) => {
+        const labelsMatch = labelsMatchMatchers(labels, matchers);
+        const filtersMatch = filters.alertState ? status.state === filters.alertState : true;
+        return labelsMatch && filtersMatch;
+      });
+      if (alerts.length > 0) {
+        // The ungrouped alerts should be first in the results
+        if (Object.keys(group.labels).length === 0) {
+          filteredGroup.unshift({ ...group, alerts });
+        } else {
+          filteredGroup.push({ ...group, alerts });
+        }
+      }
+      return filteredGroup;
+    }, [] as AlertmanagerGroup[]);
+  }, [groups, filters, matchers]);
+};
diff --git a/public/app/features/alerting/unified/hooks/useFilteredRules.ts b/public/app/features/alerting/unified/hooks/useFilteredRules.ts
new file mode 100644
index 00000000..b8be1dd1
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useFilteredRules.ts
@@ -0,0 +1,102 @@
+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 { labelsMatchMatchers, parseMatchers } from '../utils/alertmanager';
+
+export const useFilteredRules = (namespaces: CombinedRuleNamespace[]) => {
+  const [queryParams] = useQueryParams();
+  const filters = getFiltersFromUrlParams(queryParams);
+
+  return useMemo(() => {
+    const filteredNamespaces = namespaces
+      // Filter by data source
+      // TODO: filter by multiple data sources for grafana-managed alerts
+      .filter(({ rulesSource }) =>
+        filters.dataSource && isCloudRulesSource(rulesSource) ? rulesSource.name === filters.dataSource : true
+      )
+      // If a namespace and group have rules that match the rules filters then keep them.
+      .reduce(reduceNamespaces(filters), [] as CombinedRuleNamespace[]);
+    return filteredNamespaces;
+  }, [namespaces, filters]);
+};
+
+const reduceNamespaces = (filters: FilterState) => {
+  return (namespaceAcc: CombinedRuleNamespace[], namespace: CombinedRuleNamespace) => {
+    const groups = namespace.groups.reduce(reduceGroups(filters), [] as CombinedRuleGroup[]);
+
+    if (groups.length) {
+      namespaceAcc.push({
+        ...namespace,
+        groups,
+      });
+    }
+
+    return namespaceAcc;
+  };
+};
+
+// Reduces groups to only groups that have rules matching the filters
+const reduceGroups = (filters: FilterState) => {
+  return (groupAcc: CombinedRuleGroup[], group: CombinedRuleGroup) => {
+    const rules = group.rules.filter((rule) => {
+      if (filters.ruleType && filters.ruleType !== rule.promRule?.type) {
+        return false;
+      }
+      if (filters.dataSource && isGrafanaRulerRule(rule.rulerRule) && !isQueryingDataSource(rule.rulerRule, filters)) {
+        return false;
+      }
+      // Query strings can match alert name, label keys, and label values
+      if (filters.queryString) {
+        const normalizedQueryString = filters.queryString.toLocaleLowerCase();
+        const doesNameContainsQueryString = rule.name?.toLocaleLowerCase().includes(normalizedQueryString);
+        const matchers = parseMatchers(filters.queryString);
+
+        const doRuleLabelsMatchQuery = labelsMatchMatchers(rule.labels, matchers);
+        const doAlertsContainMatchingLabels =
+          rule.promRule &&
+          rule.promRule.type === PromRuleType.Alerting &&
+          rule.promRule.alerts &&
+          rule.promRule.alerts.some((alert) => labelsMatchMatchers(alert.labels, matchers));
+
+        if (!(doesNameContainsQueryString || doRuleLabelsMatchQuery || doAlertsContainMatchingLabels)) {
+          return false;
+        }
+      }
+      if (
+        filters.alertState &&
+        !(rule.promRule && isAlertingRule(rule.promRule) && rule.promRule.state === filters.alertState)
+      ) {
+        return false;
+      }
+      return true;
+    });
+    // Add rules to the group that match the rule list filters
+    if (rules.length) {
+      groupAcc.push({
+        ...group,
+        rules,
+      });
+    }
+    return groupAcc;
+  };
+};
+
+const isQueryingDataSource = (rulerRule: RulerGrafanaRuleDTO, filter: FilterState): boolean => {
+  if (!filter.dataSource) {
+    return true;
+  }
+
+  return !!rulerRule.grafana_alert.data.find((query) => {
+    if (!query.datasourceUid) {
+      return false;
+    }
+    const ds = getDataSourceSrv().getInstanceSettings(query.datasourceUid);
+    return ds?.name === filter.dataSource;
+  });
+};
diff --git a/public/app/features/alerting/unified/hooks/useFolder.ts b/public/app/features/alerting/unified/hooks/useFolder.ts
new file mode 100644
index 00000000..196c0406
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useFolder.ts
@@ -0,0 +1,32 @@
+import { FolderDTO } from 'app/types';
+import { useDispatch } from 'react-redux';
+import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+import { useEffect } from 'react';
+import { fetchFolderIfNotFetchedAction } from '../state/actions';
+import { initialAsyncRequestState } from '../utils/redux';
+
+interface ReturnBag {
+  folder?: FolderDTO;
+  loading: boolean;
+}
+
+export function useFolder(uid?: string): ReturnBag {
+  const dispatch = useDispatch();
+  const folderRequests = useUnifiedAlertingSelector((state) => state.folders);
+  useEffect(() => {
+    if (uid) {
+      dispatch(fetchFolderIfNotFetchedAction(uid));
+    }
+  }, [dispatch, uid]);
+
+  if (uid) {
+    const request = folderRequests[uid] || initialAsyncRequestState;
+    return {
+      folder: request.result,
+      loading: request.loading,
+    };
+  }
+  return {
+    loading: false,
+  };
+}
diff --git a/public/app/features/alerting/unified/hooks/useGroupedAlerts.ts b/public/app/features/alerting/unified/hooks/useGroupedAlerts.ts
new file mode 100644
index 00000000..278851fb
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useGroupedAlerts.ts
@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types';
+import { Labels } from '@grafana/data';
+
+export const useGroupedAlerts = (groups: AlertmanagerGroup[], groupBy: string[]) => {
+  return useMemo(() => {
+    if (groupBy.length === 0) {
+      return groups;
+    }
+    const alerts = groups.flatMap(({ alerts }) => alerts);
+    return alerts.reduce((groupings, alert) => {
+      const alertContainsGroupings = groupBy.every((groupByLabel) => Object.keys(alert.labels).includes(groupByLabel));
+
+      if (alertContainsGroupings) {
+        const existingGrouping = groupings.find((group) => {
+          return groupBy.every((groupKey) => {
+            return group.labels[groupKey] === alert.labels[groupKey];
+          });
+        });
+        if (!existingGrouping) {
+          const labels = groupBy.reduce((acc, key) => {
+            acc = { ...acc, [key]: alert.labels[key] };
+            return acc;
+          }, {} as Labels);
+          groupings.push({
+            alerts: [alert],
+            labels,
+            receiver: {
+              name: 'NONE',
+            },
+          });
+        } else {
+          existingGrouping.alerts.push(alert);
+        }
+      } else {
+        const noGroupingGroup = groupings.find((group) => Object.keys(group.labels).length === 0);
+        if (!noGroupingGroup) {
+          groupings.push({ alerts: [alert], labels: {}, receiver: { name: 'NONE' } });
+        } else {
+          noGroupingGroup.alerts.push(alert);
+        }
+      }
+
+      return groupings;
+    }, [] as AlertmanagerGroup[]);
+  }, [groups, groupBy]);
+};
diff --git a/public/app/features/alerting/unified/hooks/useHasRuler.ts b/public/app/features/alerting/unified/hooks/useHasRuler.ts
new file mode 100644
index 00000000..eb326280
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useHasRuler.ts
@@ -0,0 +1,16 @@
+import { RulesSource } from 'app/types/unified-alerting';
+import { useCallback } from 'react';
+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
+export function useHasRuler(): (rulesSource: string | RulesSource) => boolean {
+  const rulerRules = useUnifiedAlertingSelector((state) => state.rulerRules);
+  return useCallback(
+    (rulesSource: string | RulesSource) => {
+      const rulesSourceName = typeof rulesSource === 'string' ? rulesSource : rulesSource.name;
+      return rulesSourceName === GRAFANA_RULES_SOURCE_NAME || !!rulerRules[rulesSourceName]?.result;
+    },
+    [rulerRules]
+  );
+}
diff --git a/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts b/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts
new file mode 100644
index 00000000..4a28c440
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts
@@ -0,0 +1,51 @@
+import { contextSrv } from 'app/core/services/context_srv';
+import { isGrafanaRulerRule } from '../utils/rules';
+import { RulerRuleDTO } from 'app/types/unified-alerting-dto';
+import { useFolder } from './useFolder';
+import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import { checkIfLotexSupportsEditingRulesAction } from '../state/actions';
+import { GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
+
+interface ResultBag {
+  isEditable?: boolean;
+  loading: boolean;
+}
+
+export function useIsRuleEditable(rulesSourceName: string, rule?: RulerRuleDTO): ResultBag {
+  const checkEditingRequests = useUnifiedAlertingSelector((state) => state.lotexSupportsRuleEditing);
+  const dispatch = useDispatch();
+  const folderUID = rule && isGrafanaRulerRule(rule) ? rule.grafana_alert.namespace_uid : undefined;
+
+  const { folder, loading } = useFolder(folderUID);
+
+  useEffect(() => {
+    if (checkEditingRequests[rulesSourceName] === undefined && rulesSourceName !== GRAFANA_RULES_SOURCE_NAME) {
+      dispatch(checkIfLotexSupportsEditingRulesAction(rulesSourceName));
+    }
+  }, [rulesSourceName, checkEditingRequests, dispatch]);
+
+  if (!rule) {
+    return { isEditable: false, loading: false };
+  }
+
+  // grafana rules can be edited if user can edit the folder they're in
+  if (isGrafanaRulerRule(rule)) {
+    if (!folderUID) {
+      throw new Error(
+        `Rule ${rule.grafana_alert.title} does not have a folder uid, cannot determine if it is editable.`
+      );
+    }
+    return {
+      isEditable: folder?.canSave,
+      loading,
+    };
+  }
+
+  // prom rules are only editable by users with Editor role and only if rules source supports editing
+  return {
+    isEditable: contextSrv.isEditor && !!checkEditingRequests[rulesSourceName]?.result,
+    loading: !!checkEditingRequests[rulesSourceName]?.loading,
+  };
+}
diff --git a/public/app/features/alerting/unified/hooks/useManagedAlertStateHistory.ts b/public/app/features/alerting/unified/hooks/useManagedAlertStateHistory.ts
new file mode 100644
index 00000000..8fcb6a22
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useManagedAlertStateHistory.ts
@@ -0,0 +1,19 @@
+import { StateHistoryItem } from 'app/types/unified-alerting';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { fetchGrafanaAnnotationsAction } from '../state/actions';
+import { AsyncRequestState } from '../utils/redux';
+import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+
+export function useManagedAlertStateHistory(alertId: string) {
+  const dispatch = useDispatch();
+  const history = useUnifiedAlertingSelector<AsyncRequestState<StateHistoryItem[]>>(
+    (state) => state.managedAlertStateHistory
+  );
+
+  useEffect(() => {
+    dispatch(fetchGrafanaAnnotationsAction(alertId));
+  }, [dispatch, alertId]);
+
+  return history;
+}
diff --git a/public/app/features/alerting/unified/hooks/useMuteTimingOptions.ts b/public/app/features/alerting/unified/hooks/useMuteTimingOptions.ts
new file mode 100644
index 00000000..650ee65e
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useMuteTimingOptions.ts
@@ -0,0 +1,26 @@
+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';
+
+export function useMuteTimingOptions(): Array<SelectableValue<string>> {
+  const [alertManagerSourceName] = useAlertManagerSourceName();
+  const amConfigs = useUnifiedAlertingSelector((state) => state.amConfigs);
+
+  return useMemo(() => {
+    const { result } = (alertManagerSourceName && amConfigs[alertManagerSourceName]) || initialAsyncRequestState;
+    const config: AlertmanagerConfig = result?.alertmanager_config ?? {};
+
+    const muteTimingsOptions: Array<SelectableValue<string>> =
+      config?.mute_time_intervals?.map((value) => ({
+        value: value.name,
+        label: value.name,
+        description: value.time_intervals.map((interval) => timeIntervalToString(interval)).join(', AND '),
+      })) ?? [];
+
+    return muteTimingsOptions;
+  }, [alertManagerSourceName, amConfigs]);
+}
diff --git a/public/app/features/alerting/unified/hooks/usePanelCombinedRules.ts b/public/app/features/alerting/unified/hooks/usePanelCombinedRules.ts
new file mode 100644
index 00000000..7bdb4b30
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/usePanelCombinedRules.ts
@@ -0,0 +1,86 @@
+import { SerializedError } from '@reduxjs/toolkit';
+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;
+
+  poll?: boolean;
+}
+
+interface ReturnBag {
+  errors: SerializedError[];
+  rules: CombinedRule[];
+
+  loading?: boolean;
+}
+
+export function usePanelCombinedRules({ dashboard, panel, poll = false }: Options): ReturnBag {
+  const dispatch = useDispatch();
+
+  const promRuleRequest =
+    useUnifiedAlertingSelector((state) => state.promRules[GRAFANA_RULES_SOURCE_NAME]) ?? initialAsyncRequestState;
+  const rulerRuleRequest =
+    useUnifiedAlertingSelector((state) => state.rulerRules[GRAFANA_RULES_SOURCE_NAME]) ?? initialAsyncRequestState;
+
+  // fetch rules, then poll every RULE_LIST_POLL_INTERVAL_MS
+  useEffect(() => {
+    const fetch = () => {
+      dispatch(
+        fetchPromRulesAction({
+          rulesSourceName: GRAFANA_RULES_SOURCE_NAME,
+          filter: { dashboardUID: dashboard.uid, panelId: panel.id },
+        })
+      );
+      dispatch(
+        fetchRulerRulesAction({
+          rulesSourceName: GRAFANA_RULES_SOURCE_NAME,
+          filter: { dashboardUID: dashboard.uid, panelId: panel.id },
+        })
+      );
+    };
+    fetch();
+    if (poll) {
+      const interval = setInterval(fetch, RULE_LIST_POLL_INTERVAL_MS);
+      return () => {
+        clearInterval(interval);
+      };
+    }
+    return () => {};
+  }, [dispatch, poll, panel.id, dashboard.uid]);
+
+  const loading = promRuleRequest.loading || rulerRuleRequest.loading;
+  const errors = [promRuleRequest.error, rulerRuleRequest.error].filter(
+    (err: SerializedError | undefined): err is SerializedError => !!err
+  );
+
+  const combinedNamespaces = useCombinedRuleNamespaces(GRAFANA_RULES_SOURCE_NAME);
+
+  // filter out rules that are relevant to this panel
+  const rules = useMemo(
+    (): CombinedRule[] =>
+      combinedNamespaces
+        .flatMap((ns) => ns.groups)
+        .flatMap((group) => group.rules)
+        .filter(
+          (rule) =>
+            rule.annotations[Annotation.dashboardUID] === dashboard.uid &&
+            rule.annotations[Annotation.panelID] === String(panel.id)
+        ),
+    [combinedNamespaces, dashboard, panel]
+  );
+
+  return {
+    rules,
+    errors,
+    loading,
+  };
+}
diff --git a/public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts b/public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts
new file mode 100644
index 00000000..b2aa8275
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts
@@ -0,0 +1,22 @@
+import { DataSourceInstanceSettings } from '@grafana/data';
+import { useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { checkIfLotexSupportsEditingRulesAction } from '../state/actions';
+import { getRulesDataSources } from '../utils/datasource';
+import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+
+export function useRulesSourcesWithRuler(): DataSourceInstanceSettings[] {
+  const checkEditingRequests = useUnifiedAlertingSelector((state) => state.lotexSupportsRuleEditing);
+  const dispatch = useDispatch();
+
+  // try fetching rules for each prometheus to see if it has ruler
+  useEffect(() => {
+    getRulesDataSources()
+      .filter((ds) => checkEditingRequests[ds.name] === undefined)
+      .forEach((ds) => dispatch(checkIfLotexSupportsEditingRulesAction(ds.name)));
+  }, [dispatch, checkEditingRequests]);
+
+  return useMemo(() => getRulesDataSources().filter((ds) => checkEditingRequests[ds.name]?.result), [
+    checkEditingRequests,
+  ]);
+}
diff --git a/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx b/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx
new file mode 100644
index 00000000..980977e6
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx
@@ -0,0 +1,30 @@
+import React, { useMemo, useState } from 'react';
+import { Modal } from '@grafana/ui';
+import { StateHistory } from '../components/rules/StateHistory';
+
+function useStateHistoryModal(alertId: string) {
+  const [showModal, setShowModal] = useState<boolean>(false);
+
+  const StateHistoryModal = useMemo(
+    () => (
+      <Modal
+        isOpen={showModal}
+        onDismiss={() => setShowModal(false)}
+        closeOnBackdropClick={true}
+        closeOnEscape={true}
+        title="State history"
+      >
+        <StateHistory alertId={alertId} />
+      </Modal>
+    ),
+    [alertId, showModal]
+  );
+
+  return {
+    StateHistoryModal,
+    showStateHistoryModal: () => setShowModal(true),
+    hideStateHistoryModal: () => setShowModal(false),
+  };
+}
+
+export { useStateHistoryModal };
diff --git a/public/app/features/alerting/unified/hooks/useUnifiedAlertingSelector.ts b/public/app/features/alerting/unified/hooks/useUnifiedAlertingSelector.ts
new file mode 100644
index 00000000..8593feeb
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useUnifiedAlertingSelector.ts
@@ -0,0 +1,10 @@
+import { StoreState } from 'app/types';
+import { useSelector } from 'react-redux';
+import { UnifiedAlertingState } from '../state/reducers';
+
+export function useUnifiedAlertingSelector<TSelected = unknown>(
+  selector: (state: UnifiedAlertingState) => TSelected,
+  equalityFn?: (left: TSelected, right: TSelected) => boolean
+): TSelected {
+  return useSelector((state: StoreState) => selector(state.unifiedAlerting), equalityFn);
+}
diff --git a/public/app/features/alerting/unified/hooks/useVizHeight.ts b/public/app/features/alerting/unified/hooks/useVizHeight.ts
new file mode 100644
index 00000000..bd3b525e
--- /dev/null
+++ b/public/app/features/alerting/unified/hooks/useVizHeight.ts
@@ -0,0 +1,26 @@
+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) {
+  const theme = useTheme2();
+  if (pluginId === TIMESERIES || pluginId === STAT || dataIsEmpty(data)) {
+    return 200;
+  }
+
+  const values = data.series[frameIndex].fields[0].values.length;
+  const rowHeight = theme.spacing.gridSize * 5;
+
+  /*
+   Calculate how if we can make  the table smaller than 200px
+   for when we only have 1-2 values
+   The extra rowHeight is to accommodate the header.
+  */
+  const tableHeight = values * rowHeight + rowHeight;
+
+  return tableHeight >= 200 ? 200 : tableHeight;
+}
+
+function dataIsEmpty(data: PanelData) {
+  return !data || !data.series[0] || !data.series[0].fields[0] || !data.series[0].fields[0].values;
+}
diff --git a/public/app/features/alerting/unified/mocks.ts b/public/app/features/alerting/unified/mocks.ts
new file mode 100644
index 00000000..79033432
--- /dev/null
+++ b/public/app/features/alerting/unified/mocks.ts
@@ -0,0 +1,430 @@
+import {
+  DataSourceApi,
+  DataSourceInstanceSettings,
+  DataSourceJsonData,
+  DataSourcePluginMeta,
+  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 } from 'app/types/unified-alerting';
+import DatasourceSrv from 'app/features/plugins/datasource_srv';
+import { DataSourceSrv, GetDataSourceListFilters, config } from '@grafana/runtime';
+import {
+  AlertmanagerAlert,
+  AlertManagerCortexConfig,
+  AlertmanagerGroup,
+  AlertmanagerStatus,
+  AlertState,
+  GrafanaManagedReceiverConfig,
+  Silence,
+  SilenceState,
+} from 'app/plugins/datasource/alertmanager/types';
+
+let nextDataSourceId = 1;
+
+export function mockDataSource<T extends DataSourceJsonData = DataSourceJsonData>(
+  partial: Partial<DataSourceInstanceSettings<T>> = {},
+  meta: Partial<DataSourcePluginMeta> = {}
+): DataSourceInstanceSettings<T> {
+  const id = partial.id ?? nextDataSourceId++;
+
+  return {
+    id,
+    uid: `mock-ds-${nextDataSourceId}`,
+    type: 'prometheus',
+    name: `Prometheus-${id}`,
+    access: 'proxy',
+    jsonData: {} as T,
+    meta: ({
+      info: {
+        logos: {
+          small: 'https://prometheus.io/assets/prometheus_logo_grey.svg',
+          large: 'https://prometheus.io/assets/prometheus_logo_grey.svg',
+        },
+      },
+      ...meta,
+    } as any) as DataSourcePluginMeta,
+    ...partial,
+  };
+}
+
+export const mockPromAlert = (partial: Partial<Alert> = {}): Alert => ({
+  activeAt: '2021-03-18T13:47:05.04938691Z',
+  annotations: {
+    message: 'alert with severity "warning"',
+  },
+  labels: {
+    alertname: 'myalert',
+    severity: 'warning',
+  },
+  state: PromAlertingRuleState.Firing,
+  value: '1e+00',
+  ...partial,
+});
+
+export const mockRulerGrafanaRule = (
+  partial: Partial<RulerGrafanaRuleDTO> = {},
+  partialDef: Partial<GrafanaRuleDefinition> = {}
+): RulerGrafanaRuleDTO => {
+  return {
+    for: '1m',
+    grafana_alert: {
+      uid: '123',
+      title: 'myalert',
+      namespace_uid: '123',
+      namespace_id: 1,
+      condition: 'A',
+      no_data_state: GrafanaAlertStateDecision.Alerting,
+      exec_err_state: GrafanaAlertStateDecision.Alerting,
+      data: [
+        {
+          datasourceUid: '123',
+          refId: 'A',
+          queryType: 'huh',
+          model: {} as any,
+        },
+      ],
+      ...partialDef,
+    },
+    annotations: {
+      message: 'alert with severity "{{.warning}}}"',
+    },
+    labels: {
+      severity: 'warning',
+    },
+    ...partial,
+  };
+};
+
+export const mockRulerAlertingRule = (partial: Partial<RulerAlertingRuleDTO> = {}): RulerAlertingRuleDTO => ({
+  alert: 'alert1',
+  expr: 'up = 1',
+  labels: {
+    severity: 'warning',
+  },
+  annotations: {
+    summary: 'test alert',
+  },
+});
+
+export const mockRulerRuleGroup = (partial: Partial<RulerRuleGroupDTO> = {}): RulerRuleGroupDTO => ({
+  name: 'group1',
+  rules: [mockRulerAlertingRule()],
+  ...partial,
+});
+
+export const mockPromAlertingRule = (partial: Partial<AlertingRule> = {}): AlertingRule => {
+  return {
+    type: PromRuleType.Alerting,
+    alerts: [mockPromAlert()],
+    name: 'myalert',
+    query: 'foo > 1',
+    lastEvaluation: '2021-03-23T08:19:05.049595312Z',
+    evaluationTime: 0.000395601,
+    annotations: {
+      message: 'alert with severity "{{.warning}}}"',
+    },
+    labels: {
+      severity: 'warning',
+    },
+    state: PromAlertingRuleState.Firing,
+    health: 'OK',
+    ...partial,
+  };
+};
+
+export const mockPromRecordingRule = (partial: Partial<RecordingRule> = {}): RecordingRule => {
+  return {
+    type: PromRuleType.Recording,
+    query: 'bar < 3',
+    labels: {
+      cluster: 'eu-central',
+    },
+    health: 'OK',
+    name: 'myrecordingrule',
+    lastEvaluation: '2021-03-23T08:19:05.049595312Z',
+    evaluationTime: 0.000395601,
+    ...partial,
+  };
+};
+
+export const mockPromRuleGroup = (partial: Partial<RuleGroup> = {}): RuleGroup => {
+  return {
+    name: 'mygroup',
+    interval: 60,
+    rules: [mockPromAlertingRule()],
+    ...partial,
+  };
+};
+
+export const mockPromRuleNamespace = (partial: Partial<RuleNamespace> = {}): RuleNamespace => {
+  return {
+    dataSourceName: 'Prometheus-1',
+    name: 'default',
+    groups: [mockPromRuleGroup()],
+    ...partial,
+  };
+};
+
+export const mockAlertmanagerAlert = (partial: Partial<AlertmanagerAlert> = {}): AlertmanagerAlert => {
+  return {
+    annotations: {
+      summary: 'US-Central region is on fire',
+    },
+    endsAt: '2021-06-22T21:49:28.562Z',
+    fingerprint: '88e013643c3df34ac3',
+    receivers: [{ name: 'pagerduty' }],
+    startsAt: '2021-06-21T17:25:28.562Z',
+    status: { inhibitedBy: [], silencedBy: [], state: AlertState.Active },
+    updatedAt: '2021-06-22T21:45:28.564Z',
+    generatorURL: 'https://play.grafana.com/explore',
+    labels: { severity: 'warning', region: 'US-Central' },
+    ...partial,
+  };
+};
+
+export const mockAlertGroup = (partial: Partial<AlertmanagerGroup> = {}): AlertmanagerGroup => {
+  return {
+    labels: {
+      severity: 'warning',
+      region: 'US-Central',
+    },
+    receiver: {
+      name: 'pagerduty',
+    },
+    alerts: [
+      mockAlertmanagerAlert(),
+      mockAlertmanagerAlert({
+        status: { state: AlertState.Suppressed, silencedBy: ['123456abcdef'], inhibitedBy: [] },
+        labels: { severity: 'warning', region: 'US-Central', foo: 'bar', ...partial.labels },
+      }),
+    ],
+    ...partial,
+  };
+};
+
+export const mockSilence = (partial: Partial<Silence> = {}): Silence => {
+  return {
+    id: '1a2b3c4d5e6f',
+    matchers: [{ name: 'foo', value: 'bar', isEqual: true, isRegex: false }],
+    startsAt: new Date().toISOString(),
+    endsAt: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+    updatedAt: new Date().toISOString(),
+    createdBy: config.bootData.user.name || 'admin',
+    comment: 'Silence noisy alerts',
+    status: {
+      state: SilenceState.Active,
+    },
+    ...partial,
+  };
+};
+
+export class MockDataSourceSrv implements DataSourceSrv {
+  datasources: Record<string, DataSourceApi> = {};
+  // @ts-ignore
+  private settingsMapByName: Record<string, DataSourceInstanceSettings> = {};
+  private settingsMapByUid: Record<string, DataSourceInstanceSettings> = {};
+  private settingsMapById: Record<string, DataSourceInstanceSettings> = {};
+  // @ts-ignore
+  private templateSrv = {
+    getVariables: () => [],
+    replace: (name: any) => name,
+  };
+
+  defaultName = '';
+
+  constructor(datasources: Record<string, DataSourceInstanceSettings>) {
+    this.datasources = {};
+    this.settingsMapByName = Object.values(datasources).reduce<Record<string, DataSourceInstanceSettings>>(
+      (acc, ds) => {
+        acc[ds.name] = ds;
+        return acc;
+      },
+      {}
+    );
+
+    for (const dsSettings of Object.values(this.settingsMapByName)) {
+      this.settingsMapByUid[dsSettings.uid] = dsSettings;
+      this.settingsMapById[dsSettings.id] = dsSettings;
+      if (dsSettings.isDefault) {
+        this.defaultName = dsSettings.name;
+      }
+    }
+  }
+
+  get(name?: string | null | DataSourceRef, scopedVars?: ScopedVars): Promise<DataSourceApi> {
+    return DatasourceSrv.prototype.get.call(this, name, scopedVars);
+    //return Promise.reject(new Error('not implemented'));
+  }
+
+  /**
+   * Get a list of data sources
+   */
+  getList(filters?: GetDataSourceListFilters): DataSourceInstanceSettings[] {
+    return DatasourceSrv.prototype.getList.call(this, filters);
+  }
+
+  /**
+   * Get settings and plugin metadata by name or uid
+   */
+  getInstanceSettings(nameOrUid: string | null | undefined): DataSourceInstanceSettings | undefined {
+    return (
+      DatasourceSrv.prototype.getInstanceSettings.call(this, nameOrUid) ||
+      (({ meta: { info: { logos: {} } } } as unknown) as DataSourceInstanceSettings)
+    );
+  }
+
+  async loadDatasource(name: string): Promise<DataSourceApi<any, any>> {
+    return DatasourceSrv.prototype.loadDatasource.call(this, name);
+  }
+}
+
+export const mockGrafanaReceiver = (
+  type: string,
+  overrides: Partial<GrafanaManagedReceiverConfig> = {}
+): GrafanaManagedReceiverConfig => ({
+  type: type,
+  name: type,
+  disableResolveMessage: false,
+  settings: {},
+  ...overrides,
+});
+
+export const someGrafanaAlertManagerConfig: AlertManagerCortexConfig = {
+  template_files: {
+    'first template': 'first template content',
+    'second template': 'second template content',
+    'third template': 'third template',
+  },
+  alertmanager_config: {
+    route: {
+      receiver: 'default',
+    },
+    receivers: [
+      {
+        name: 'default',
+        grafana_managed_receiver_configs: [mockGrafanaReceiver('email')],
+      },
+      {
+        name: 'critical',
+        grafana_managed_receiver_configs: [mockGrafanaReceiver('slack'), mockGrafanaReceiver('pagerduty')],
+      },
+    ],
+  },
+};
+
+export const someCloudAlertManagerStatus: AlertmanagerStatus = {
+  cluster: {
+    peers: [],
+    status: 'ok',
+  },
+  uptime: '10 hours',
+  versionInfo: {
+    branch: '',
+    version: '',
+    goVersion: '',
+    buildDate: '',
+    buildUser: '',
+    revision: '',
+  },
+  config: {
+    route: {
+      receiver: 'default-email',
+    },
+    receivers: [
+      {
+        name: 'default-email',
+        email_configs: [
+          {
+            to: 'example@example.com',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const someCloudAlertManagerConfig: AlertManagerCortexConfig = {
+  template_files: {
+    'foo template': 'foo content',
+  },
+  alertmanager_config: {
+    route: {
+      receiver: 'cloud-receiver',
+      routes: [
+        {
+          receiver: 'foo-receiver',
+        },
+        {
+          receiver: 'bar-receiver',
+        },
+      ],
+    },
+    receivers: [
+      {
+        name: 'cloud-receiver',
+        email_configs: [
+          {
+            to: 'domas.lapinskas@grafana.com',
+          },
+        ],
+        slack_configs: [
+          {
+            api_url: 'http://slack1',
+            channel: '#mychannel',
+            actions: [
+              {
+                text: 'action1text',
+                type: 'action1type',
+                url: 'http://action1',
+              },
+            ],
+            fields: [
+              {
+                title: 'field1',
+                value: 'text1',
+              },
+              {
+                title: 'field2',
+                value: 'text2',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const somePromRules = (dataSourceName = 'Prometheus'): RuleNamespace[] => [
+  {
+    dataSourceName,
+    name: 'namespace1',
+    groups: [
+      mockPromRuleGroup({ name: 'group1', rules: [mockPromAlertingRule({ name: 'alert1' })] }),
+      mockPromRuleGroup({ name: 'group2', rules: [mockPromAlertingRule({ name: 'alert2' })] }),
+    ],
+  },
+  {
+    dataSourceName,
+    name: 'namespace2',
+    groups: [mockPromRuleGroup({ name: 'group3', rules: [mockPromAlertingRule({ name: 'alert3' })] })],
+  },
+];
+export const someRulerRules: RulerRulesConfigDTO = {
+  namespace1: [
+    mockRulerRuleGroup({ name: 'group1', rules: [mockRulerAlertingRule({ alert: 'alert1' })] }),
+    mockRulerRuleGroup({ name: 'group2', rules: [mockRulerAlertingRule({ alert: 'alert2' })] }),
+  ],
+  namespace2: [mockRulerRuleGroup({ name: 'group3', rules: [mockRulerAlertingRule({ alert: 'alert3' })] })],
+};
diff --git a/public/app/features/alerting/unified/mocks/grafana-notifiers.ts b/public/app/features/alerting/unified/mocks/grafana-notifiers.ts
new file mode 100644
index 00000000..876672ed
--- /dev/null
+++ b/public/app/features/alerting/unified/mocks/grafana-notifiers.ts
@@ -0,0 +1,1133 @@
+import { NotifierDTO } from 'app/types';
+
+export const grafanaNotifiersMock: NotifierDTO[] = [
+  {
+    type: 'teams',
+    name: 'Microsoft Teams',
+    heading: 'Teams settings',
+    description: 'Sends notifications using Incoming Webhook connector to Microsoft Teams',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'URL',
+        description: '',
+        placeholder: 'Teams incoming webhook url',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'dingding',
+    name: 'DingDing',
+    heading: 'DingDing settings',
+    description: 'Sends HTTP POST request to DingDing',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Url',
+        description: '',
+        placeholder: 'https://oapi.dingtalk.com/robot/send?access_token=xxxxxxxxx',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Message Type',
+        description: '',
+        placeholder: '',
+        propertyName: 'msgType',
+        selectOptions: [
+          { value: 'link', label: 'Link' },
+          { value: 'actionCard', label: 'ActionCard' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'googlechat',
+    name: 'Google Hangouts Chat',
+    heading: 'Google Hangouts Chat settings',
+    description: 'Sends notifications to Google Hangouts Chat via webhooks based on the official JSON message format',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Url',
+        description: '',
+        placeholder: 'Google Hangouts Chat incoming webhook url',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'textarea',
+        inputType: '',
+        label: 'Message',
+        description: '',
+        placeholder: '{{ template "default.message" . }}',
+        propertyName: 'message',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'hipchat',
+    name: 'HipChat',
+    heading: 'HipChat settings',
+    description: 'Sends notifications uto a HipChat Room',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Hip Chat Url',
+        description: '',
+        placeholder: 'HipChat URL (ex https://grafana.hipchat.com)',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'API Key',
+        description: '',
+        placeholder: 'HipChat API Key',
+        propertyName: 'apiKey',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Room ID',
+        description: '',
+        placeholder: '',
+        propertyName: 'roomid',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'webhook',
+    name: 'webhook',
+    heading: 'Webhook settings',
+    description: 'Sends HTTP POST request to a URL',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Url',
+        description: '',
+        placeholder: '',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Http Method',
+        description: '',
+        placeholder: '',
+        propertyName: 'httpMethod',
+        selectOptions: [
+          { value: 'POST', label: 'POST' },
+          { value: 'PUT', label: 'PUT' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Username',
+        description: '',
+        placeholder: '',
+        propertyName: 'username',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'password',
+        label: 'Password',
+        description: '',
+        placeholder: '',
+        propertyName: 'password',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: true,
+      },
+    ],
+  },
+  {
+    type: 'kafka',
+    name: 'Kafka REST Proxy',
+    heading: 'Kafka settings',
+    description: 'Sends notifications to Kafka Rest Proxy',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Kafka REST Proxy',
+        description: '',
+        placeholder: 'http://localhost:8082',
+        propertyName: 'kafkaRestProxy',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Topic',
+        description: '',
+        placeholder: 'topic1',
+        propertyName: 'kafkaTopic',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'sensu',
+    name: 'Sensu',
+    heading: 'Sensu settings',
+    description: 'Sends HTTP POST request to a Sensu API',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Url',
+        description: '',
+        placeholder: 'http://sensu-api.local:4567/results',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Source',
+        description: 'If empty rule id will be used',
+        placeholder: '',
+        propertyName: 'source',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Handler',
+        description: '',
+        placeholder: 'default',
+        propertyName: 'handler',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Username',
+        description: '',
+        placeholder: '',
+        propertyName: 'username',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'password',
+        label: 'Password',
+        description: '',
+        placeholder: '',
+        propertyName: 'passsword ',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: true,
+      },
+    ],
+  },
+  {
+    type: 'threema',
+    name: 'Threema Gateway',
+    heading: 'Threema Gateway settings',
+    description: 'Sends notifications to Threema using Threema Gateway (Basic IDs)',
+    info:
+      'Notifications can be configured for any Threema Gateway ID of type "Basic". End-to-End IDs are not currently supported.The Threema Gateway ID can be set up at https://gateway.threema.ch/.',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Gateway ID',
+        description: 'Your 8 character Threema Gateway Basic ID (starting with a *).',
+        placeholder: '*3MAGWID',
+        propertyName: 'gateway_id',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '\\*[0-9A-Z]{7}',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Recipient ID',
+        description: 'The 8 character Threema ID that should receive the alerts.',
+        placeholder: 'YOUR3MID',
+        propertyName: 'recipient_id',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '[0-9A-Z]{8}',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'API Secret',
+        description: 'Your Threema Gateway API secret.',
+        placeholder: '',
+        propertyName: 'api_secret',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+    ],
+  },
+  {
+    type: 'LINE',
+    name: 'LINE',
+    heading: 'LINE notify settings',
+    description: 'Send notifications to LINE notify',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Token',
+        description: '',
+        placeholder: 'LINE notify token key',
+        propertyName: 'token',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+    ],
+  },
+  {
+    type: 'opsgenie',
+    name: 'OpsGenie',
+    heading: 'OpsGenie settings',
+    description: 'Sends notifications to OpsGenie',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'API Key',
+        description: '',
+        placeholder: 'OpsGenie API Key',
+        propertyName: 'apiKey',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Alert API Url',
+        description: '',
+        placeholder: 'https://api.opsgenie.com/v2/alerts',
+        propertyName: 'apiUrl',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'checkbox',
+        inputType: '',
+        label: 'Auto close incidents',
+        description: 'Automatically close alerts in OpsGenie once the alert goes back to ok.',
+        placeholder: '',
+        propertyName: 'autoClose',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'checkbox',
+        inputType: '',
+        label: 'Override priority',
+        description: 'Allow the alert priority to be set using the og_priority tag',
+        placeholder: '',
+        propertyName: 'overridePriority',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Send notification tags as',
+        description: 'Send the notification tags to Opsgenie as either Extra Properties, Tags or both',
+        placeholder: '',
+        propertyName: 'sendTagsAs',
+        selectOptions: [
+          { value: 'tags', label: 'Tags' },
+          { value: 'details', label: 'Extra Properties' },
+          { value: 'both', label: 'Tags \u0026 Extra Properties' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'pushover',
+    name: 'Pushover',
+    heading: 'Pushover settings',
+    description: 'Sends HTTP POST request to the Pushover API',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'API Token',
+        description: '',
+        placeholder: 'Application token',
+        propertyName: 'apiToken',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'User key(s)',
+        description: '',
+        placeholder: 'comma-separated list',
+        propertyName: 'userKey',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Device(s) (optional)',
+        description: '',
+        placeholder: 'comma-separated list; leave empty to send to all devices',
+        propertyName: 'device',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Alerting priority',
+        description: '',
+        placeholder: '',
+        propertyName: 'priority',
+        selectOptions: [
+          { value: '2', label: 'Emergency' },
+          { value: '1', label: 'High' },
+          { value: '0', label: 'Normal' },
+          { value: '-1', label: 'Low' },
+          { value: '-2', label: 'Lowest' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'OK priority',
+        description: '',
+        placeholder: '',
+        propertyName: 'okPriority',
+        selectOptions: [
+          { value: '2', label: 'Emergency' },
+          { value: '1', label: 'High' },
+          { value: '0', label: 'Normal' },
+          { value: '-1', label: 'Low' },
+          { value: '-2', label: 'Lowest' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Retry (Only used for Emergency Priority)',
+        description:
+          'How often (in seconds) the Pushover servers will send the same alerting or OK notification to the user.',
+        placeholder: 'minimum 30 seconds',
+        propertyName: 'retry',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Expire (Only used for Emergency Priority)',
+        description: 'How many seconds the alerting or OK notification will continue to be retried.',
+        placeholder: 'maximum 86400 seconds',
+        propertyName: 'expire',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Alerting sound',
+        description: '',
+        placeholder: '',
+        propertyName: 'sound',
+        selectOptions: [
+          { value: 'default', label: 'Default' },
+          { value: 'pushover', label: 'Pushover' },
+          { value: 'bike', label: 'Bike' },
+          { value: 'bugle', label: 'Bugle' },
+          { value: 'cashregister', label: 'Cashregister' },
+          { value: 'classical', label: 'Classical' },
+          { value: 'cosmic', label: 'Cosmic' },
+          { value: 'falling', label: 'Falling' },
+          { value: 'gamelan', label: 'Gamelan' },
+          { value: 'incoming', label: 'Incoming' },
+          { value: 'intermission', label: 'Intermission' },
+          { value: 'magic', label: 'Magic' },
+          { value: 'mechanical', label: 'Mechanical' },
+          { value: 'pianobar', label: 'Pianobar' },
+          { value: 'siren', label: 'Siren' },
+          { value: 'spacealarm', label: 'Spacealarm' },
+          { value: 'tugboat', label: 'Tugboat' },
+          { value: 'alien', label: 'Alien' },
+          { value: 'climb', label: 'Climb' },
+          { value: 'persistent', label: 'Persistent' },
+          { value: 'echo', label: 'Echo' },
+          { value: 'updown', label: 'Updown' },
+          { value: 'none', label: 'None' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'OK sound',
+        description: '',
+        placeholder: '',
+        propertyName: 'okSound',
+        selectOptions: [
+          { value: 'default', label: 'Default' },
+          { value: 'pushover', label: 'Pushover' },
+          { value: 'bike', label: 'Bike' },
+          { value: 'bugle', label: 'Bugle' },
+          { value: 'cashregister', label: 'Cashregister' },
+          { value: 'classical', label: 'Classical' },
+          { value: 'cosmic', label: 'Cosmic' },
+          { value: 'falling', label: 'Falling' },
+          { value: 'gamelan', label: 'Gamelan' },
+          { value: 'incoming', label: 'Incoming' },
+          { value: 'intermission', label: 'Intermission' },
+          { value: 'magic', label: 'Magic' },
+          { value: 'mechanical', label: 'Mechanical' },
+          { value: 'pianobar', label: 'Pianobar' },
+          { value: 'siren', label: 'Siren' },
+          { value: 'spacealarm', label: 'Spacealarm' },
+          { value: 'tugboat', label: 'Tugboat' },
+          { value: 'alien', label: 'Alien' },
+          { value: 'climb', label: 'Climb' },
+          { value: 'persistent', label: 'Persistent' },
+          { value: 'echo', label: 'Echo' },
+          { value: 'updown', label: 'Updown' },
+          { value: 'none', label: 'None' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'sensugo',
+    name: 'Sensu Go',
+    heading: 'Sensu Go Settings',
+    description: 'Sends HTTP POST request to a Sensu Go API',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Backend URL',
+        description: '',
+        placeholder: 'http://sensu-api.local:8080',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'password',
+        label: 'API Key',
+        description: 'API Key to auth to Sensu Go backend',
+        placeholder: '',
+        propertyName: 'apikey',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Proxy entity name',
+        description: 'If empty, rule name will be used',
+        placeholder: '',
+        propertyName: 'entity',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Check name',
+        description: 'If empty, rule id will be used',
+        placeholder: '',
+        propertyName: 'check',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Handler',
+        description: '',
+        placeholder: '',
+        propertyName: 'handler',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Namespace',
+        description: '',
+        placeholder: 'default',
+        propertyName: 'namespace',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'prometheus-alertmanager',
+    name: 'Prometheus Alertmanager',
+    heading: 'Alertmanager settings',
+    description: 'Sends alert to Prometheus Alertmanager',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Url',
+        description:
+          'As specified in Alertmanager documentation, do not specify a load balancer here. Enter all your Alertmanager URLs comma-separated.',
+        placeholder: 'http://localhost:9093',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Basic Auth User',
+        description: '',
+        placeholder: '',
+        propertyName: 'basicAuthUser',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'password',
+        label: 'Basic Auth Password',
+        description: '',
+        placeholder: '',
+        propertyName: 'basicAuthPassword',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: true,
+      },
+    ],
+  },
+  {
+    type: 'discord',
+    name: 'Discord',
+    heading: 'Discord settings',
+    description: 'Sends notifications to Discord',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Message Content',
+        description: 'Mention a group using @ or a user using \u003c@ID\u003e when notifying in a channel',
+        placeholder: '',
+        propertyName: 'content',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Webhook URL',
+        description: '',
+        placeholder: 'Discord webhook URL',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'email',
+    name: 'Email',
+    heading: 'Email settings',
+    description: 'Sends notifications using Grafana server configured SMTP settings',
+    info: '',
+    options: [
+      {
+        element: 'checkbox',
+        inputType: '',
+        label: 'Single email',
+        description: 'Send a single email to all recipients',
+        placeholder: '',
+        propertyName: 'singleEmail',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'textarea',
+        inputType: '',
+        label: 'Addresses',
+        description: 'You can enter multiple email addresses using a ";" separator',
+        placeholder: '',
+        propertyName: 'addresses',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'victorops',
+    name: 'VictorOps',
+    heading: 'VictorOps settings',
+    description: 'Sends notifications to VictorOps',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Url',
+        description: '',
+        placeholder: 'VictorOps url',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'checkbox',
+        inputType: '',
+        label: 'Auto resolve incidents',
+        description: 'Resolve incidents in VictorOps once the alert goes back to ok.',
+        placeholder: '',
+        propertyName: 'autoResolve',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'pagerduty',
+    name: 'PagerDuty',
+    heading: 'PagerDuty settings',
+    description: 'Sends notifications to PagerDuty',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Integration Key',
+        description: '',
+        placeholder: 'Pagerduty Integration Key',
+        propertyName: 'integrationKey',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Severity',
+        description: '',
+        placeholder: '',
+        propertyName: 'severity',
+        selectOptions: [
+          { value: 'critical', label: 'Critical' },
+          { value: 'error', label: 'Error' },
+          { value: 'warning', label: 'Warning' },
+          { value: 'info', label: 'Info' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'checkbox',
+        inputType: '',
+        label: 'Auto resolve incidents',
+        description: 'Resolve incidents in pagerduty once the alert goes back to ok.',
+        placeholder: '',
+        propertyName: 'autoResolve',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'checkbox',
+        inputType: '',
+        label: 'Include message in details',
+        description:
+          'Move the alert message from the PD summary into the custom details. This changes the custom details object and may break event rules you have configured',
+        placeholder: '',
+        propertyName: 'messageInDetails',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+  {
+    type: 'slack',
+    name: 'Slack',
+    heading: 'Slack settings',
+    description: 'Sends notifications to Slack',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Recipient',
+        description:
+          'Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace), or user/channel Slack ID - required unless you provide a webhook',
+        placeholder: '',
+        propertyName: 'recipient',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Token',
+        description: 'Provide a Slack API token (starts with "xoxb") - required unless you provide a webhook',
+        placeholder: '',
+        propertyName: 'token',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: true,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Username',
+        description: "Set the username for the bot's message",
+        placeholder: '',
+        propertyName: 'username',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Icon emoji',
+        description: "Provide an emoji to use as the icon for the bot's message. Overrides the icon URL.",
+        placeholder: '',
+        propertyName: 'iconEmoji',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Icon URL',
+        description: "Provide a URL to an image to use as the icon for the bot's message",
+        placeholder: '',
+        propertyName: 'iconUrl',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Mention Users',
+        description:
+          "Mention one or more users (comma separated) when notifying in a channel, by ID (you can copy this from the user's Slack profile)",
+        placeholder: '',
+        propertyName: 'mentionUsers',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Mention Groups',
+        description:
+          "Mention one or more groups (comma separated) when notifying in a channel (you can copy this from the group's Slack profile URL)",
+        placeholder: '',
+        propertyName: 'mentionGroups',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Mention Channel',
+        description: 'Mention whole channel or just active members when notifying',
+        placeholder: '',
+        propertyName: 'mentionChannel',
+        selectOptions: [
+          { value: '', label: 'Disabled' },
+          { value: 'here', label: 'Every active channel member' },
+          { value: 'channel', label: 'Every channel member' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Webhook URL',
+        description:
+          "Optionally provide a Slack incoming webhook URL for sending messages, in this case the token isn't necessary",
+        placeholder: 'Slack incoming webhook URL',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: true,
+      },
+    ],
+  },
+  {
+    type: 'telegram',
+    name: 'Telegram',
+    heading: 'Telegram API settings',
+    description: 'Sends notifications to Telegram',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'BOT API Token',
+        description: '',
+        placeholder: 'Telegram BOT API Token',
+        propertyName: 'bottoken',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: true,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Chat ID',
+        description: 'Integer Telegram Chat Identifier',
+        placeholder: '',
+        propertyName: 'chatid',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+  },
+];
diff --git a/public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts b/public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts
new file mode 100644
index 00000000..84a0a79e
--- /dev/null
+++ b/public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts
@@ -0,0 +1,276 @@
+import {
+  ArrayVector,
+  DataFrame,
+  DataFrameJSON,
+  DataSourceApi,
+  Field,
+  FieldType,
+  getDefaultRelativeTimeRange,
+  LoadingState,
+  rangeUtil,
+} from '@grafana/data';
+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', () => {
+  it('should successfully map response and return panel data by refId', async () => {
+    const response = createFetchResponse<AlertingQueryResponse>({
+      results: {
+        A: { frames: [createDataFrameJSON([1, 2, 3])] },
+        B: { frames: [createDataFrameJSON([5, 6])] },
+      },
+    });
+
+    const runner = new AlertingQueryRunner(
+      mockBackendSrv({
+        fetch: () => of(response),
+      }),
+      mockDataSourceSrv()
+    );
+
+    const data = runner.get();
+    runner.run([createQuery('A'), createQuery('B')]);
+
+    await expect(data.pipe(take(1))).toEmitValuesWith((values) => {
+      const [data] = values;
+      expect(data).toEqual({
+        A: {
+          annotations: [],
+          state: LoadingState.Done,
+          series: [
+            expectDataFrameWithValues({
+              time: [1620051612238, 1620051622238, 1620051632238],
+              values: [1, 2, 3],
+            }),
+          ],
+          structureRev: 1,
+          timeRange: expect.anything(),
+          timings: {
+            dataProcessingTime: expect.any(Number),
+          },
+        },
+        B: {
+          annotations: [],
+          state: LoadingState.Done,
+          series: [
+            expectDataFrameWithValues({
+              time: [1620051612238, 1620051622238],
+              values: [5, 6],
+            }),
+          ],
+          structureRev: 1,
+          timeRange: expect.anything(),
+          timings: {
+            dataProcessingTime: expect.any(Number),
+          },
+        },
+      });
+    });
+  });
+
+  it('should successfully map response with sliding relative time range', async () => {
+    const response = createFetchResponse<AlertingQueryResponse>({
+      results: {
+        A: { frames: [createDataFrameJSON([1, 2, 3])] },
+        B: { frames: [createDataFrameJSON([5, 6])] },
+      },
+    });
+
+    const runner = new AlertingQueryRunner(
+      mockBackendSrv({
+        fetch: () => of(response),
+      }),
+      mockDataSourceSrv()
+    );
+
+    const data = runner.get();
+    runner.run([createQuery('A'), createQuery('B')]);
+
+    await expect(data.pipe(take(1))).toEmitValuesWith((values) => {
+      const [data] = values;
+      const relativeA = rangeUtil.timeRangeToRelative(data.A.timeRange);
+      const relativeB = rangeUtil.timeRangeToRelative(data.B.timeRange);
+      const expected = getDefaultRelativeTimeRange();
+
+      expect(relativeA).toEqual(expected);
+      expect(relativeB).toEqual(expected);
+    });
+  });
+
+  it('should emit loading state if response is slower then 200ms', async () => {
+    const response = createFetchResponse<AlertingQueryResponse>({
+      results: {
+        A: { frames: [createDataFrameJSON([1, 2, 3])] },
+        B: { frames: [createDataFrameJSON([5, 6])] },
+      },
+    });
+
+    const runner = new AlertingQueryRunner(
+      mockBackendSrv({
+        fetch: () => of(response).pipe(delay(210)),
+      }),
+      mockDataSourceSrv()
+    );
+
+    const data = runner.get();
+    runner.run([createQuery('A'), createQuery('B')]);
+
+    await expect(data.pipe(take(2))).toEmitValuesWith((values) => {
+      const [loading, data] = values;
+
+      expect(loading.A.state).toEqual(LoadingState.Loading);
+      expect(loading.B.state).toEqual(LoadingState.Loading);
+
+      expect(data).toEqual({
+        A: {
+          annotations: [],
+          state: LoadingState.Done,
+          series: [
+            expectDataFrameWithValues({
+              time: [1620051612238, 1620051622238, 1620051632238],
+              values: [1, 2, 3],
+            }),
+          ],
+          structureRev: 2,
+          timeRange: expect.anything(),
+          timings: {
+            dataProcessingTime: expect.any(Number),
+          },
+        },
+        B: {
+          annotations: [],
+          state: LoadingState.Done,
+          series: [
+            expectDataFrameWithValues({
+              time: [1620051612238, 1620051622238],
+              values: [5, 6],
+            }),
+          ],
+          structureRev: 2,
+          timeRange: expect.anything(),
+          timings: {
+            dataProcessingTime: expect.any(Number),
+          },
+        },
+      });
+    });
+  });
+
+  it('should emit error state if fetch request fails', async () => {
+    const error = new Error('could not query data');
+    const runner = new AlertingQueryRunner(
+      mockBackendSrv({
+        fetch: () => throwError(error),
+      }),
+      mockDataSourceSrv()
+    );
+
+    const data = runner.get();
+    runner.run([createQuery('A'), createQuery('B')]);
+
+    await expect(data.pipe(take(1))).toEmitValuesWith((values) => {
+      const [data] = values;
+
+      expect(data.A.state).toEqual(LoadingState.Error);
+      expect(data.A.error).toEqual(error);
+
+      expect(data.B.state).toEqual(LoadingState.Error);
+      expect(data.B.error).toEqual(error);
+    });
+  });
+
+  it('should not execute if a query fails filterQuery check', async () => {
+    const runner = new AlertingQueryRunner(
+      mockBackendSrv({
+        fetch: () => throwError(new Error("shouldn't happen")),
+      }),
+      mockDataSourceSrv({ filterQuery: () => false })
+    );
+
+    const data = runner.get();
+    runner.run([createQuery('A'), createQuery('B')]);
+
+    await expect(data.pipe(take(1))).toEmitValuesWith((values) => {
+      const [data] = values;
+
+      expect(data.A.state).toEqual(LoadingState.Done);
+      expect(data.A.series).toHaveLength(0);
+
+      expect(data.B.state).toEqual(LoadingState.Done);
+      expect(data.B.series).toHaveLength(0);
+    });
+  });
+});
+
+type MockBackendSrvConfig = {
+  fetch: () => Observable<FetchResponse<AlertingQueryResponse>>;
+};
+
+const mockBackendSrv = ({ fetch }: MockBackendSrvConfig): BackendSrv => {
+  return ({
+    fetch,
+    resolveCancelerIfExists: jest.fn(),
+  } as unknown) as BackendSrv;
+};
+
+const mockDataSourceSrv = (dsApi?: Partial<DataSourceApi>) => {
+  return ({
+    get: () => Promise.resolve(dsApi ?? {}),
+  } as unknown) as DataSourceSrv;
+};
+
+const expectDataFrameWithValues = ({ time, values }: { time: number[]; values: number[] }): DataFrame => {
+  return {
+    fields: [
+      {
+        config: {},
+        entities: {},
+        name: 'time',
+        state: null,
+        type: FieldType.time,
+        values: new ArrayVector(time),
+      } as Field,
+      {
+        config: {},
+        entities: {},
+        name: 'value',
+        state: null,
+        type: FieldType.number,
+        values: new ArrayVector(values),
+      } as Field,
+    ],
+    length: values.length,
+  };
+};
+
+const createDataFrameJSON = (values: number[]): DataFrameJSON => {
+  const startTime = 1620051602238;
+  const timeValues = values.map((_, index) => startTime + (index + 1) * 10000);
+
+  return {
+    schema: {
+      fields: [
+        { name: 'time', type: FieldType.time },
+        { name: 'value', type: FieldType.number },
+      ],
+    },
+    data: {
+      values: [timeValues, values],
+    },
+  };
+};
+
+const createQuery = (refId: string): AlertQuery => {
+  return {
+    refId,
+    queryType: '',
+    datasourceUid: '',
+    model: { refId },
+    relativeTimeRange: getDefaultRelativeTimeRange(),
+  };
+};
diff --git a/public/app/features/alerting/unified/state/AlertingQueryRunner.ts b/public/app/features/alerting/unified/state/AlertingQueryRunner.ts
new file mode 100644
index 00000000..4822898c
--- /dev/null
+++ b/public/app/features/alerting/unified/state/AlertingQueryRunner.ts
@@ -0,0 +1,202 @@
+import { Observable, of, OperatorFunction, ReplaySubject, Unsubscribable } from 'rxjs';
+import { catchError, map, share } from 'rxjs/operators';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  dataFrameFromJSON,
+  DataFrameJSON,
+  getDefaultTimeRange,
+  LoadingState,
+  PanelData,
+  rangeUtil,
+  TimeRange,
+  withLoadingIndicator,
+} from '@grafana/data';
+import { FetchResponse, getDataSourceSrv, toDataQueryError } from '@grafana/runtime';
+import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
+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[];
+}
+
+export interface AlertingQueryResponse {
+  results: Record<string, AlertingQueryResult>;
+}
+export class AlertingQueryRunner {
+  private subject: ReplaySubject<Record<string, PanelData>>;
+  private subscription?: Unsubscribable;
+  private lastResult: Record<string, PanelData>;
+
+  constructor(private backendSrv = getBackendSrv(), private dataSourceSrv = getDataSourceSrv()) {
+    this.subject = new ReplaySubject(1);
+    this.lastResult = {};
+  }
+
+  get(): Observable<Record<string, PanelData>> {
+    return this.subject.asObservable();
+  }
+
+  async run(queries: AlertQuery[]) {
+    if (queries.length === 0) {
+      const empty = initialState(queries, LoadingState.Done);
+      return this.subject.next(empty);
+    }
+
+    // do not execute if one more of the queries are not runnable,
+    // for example not completely configured
+    for (const query of queries) {
+      if (!isExpressionQuery(query.model)) {
+        const ds = await this.dataSourceSrv.get(query.datasourceUid);
+        if (ds.filterQuery && !ds.filterQuery(query.model)) {
+          const empty = initialState(queries, LoadingState.Done);
+          return this.subject.next(empty);
+        }
+      }
+    }
+
+    this.subscription = runRequest(this.backendSrv, queries).subscribe({
+      next: (dataPerQuery) => {
+        const nextResult = applyChange(dataPerQuery, (refId, data) => {
+          const previous = this.lastResult[refId];
+          const preProcessed = preProcessPanelData(data, previous);
+          return setStructureRevision(preProcessed, previous);
+        });
+
+        this.lastResult = nextResult;
+        this.subject.next(this.lastResult);
+      },
+
+      error: (error: Error) => {
+        this.lastResult = mapErrorToPanelData(this.lastResult, error);
+        this.subject.next(this.lastResult);
+      },
+    });
+  }
+
+  cancel() {
+    if (!this.subscription) {
+      return;
+    }
+    this.subscription.unsubscribe();
+
+    let requestIsRunning = false;
+
+    const nextResult = applyChange(this.lastResult, (refId, data) => {
+      if (data.state === LoadingState.Loading) {
+        requestIsRunning = true;
+      }
+
+      return {
+        ...data,
+        state: LoadingState.Done,
+      };
+    });
+
+    if (requestIsRunning) {
+      this.subject.next(nextResult);
+    }
+  }
+
+  destroy() {
+    if (this.subject) {
+      this.subject.complete();
+    }
+
+    this.cancel();
+  }
+}
+
+const runRequest = (backendSrv: BackendSrv, queries: AlertQuery[]): Observable<Record<string, PanelData>> => {
+  const initial = initialState(queries, LoadingState.Loading);
+  const request = {
+    data: { data: queries },
+    url: '/api/v1/eval',
+    method: 'POST',
+    requestId: uuidv4(),
+  };
+
+  return withLoadingIndicator({
+    whileLoading: initial,
+    source: backendSrv.fetch<AlertingQueryResponse>(request).pipe(
+      mapToPanelData(initial),
+      catchError((error) => of(mapErrorToPanelData(initial, error))),
+      cancelNetworkRequestsOnUnsubscribe(backendSrv, request.requestId),
+      share()
+    ),
+  });
+};
+
+const initialState = (queries: AlertQuery[], state: LoadingState): Record<string, PanelData> => {
+  return queries.reduce((dataByQuery: Record<string, PanelData>, query) => {
+    dataByQuery[query.refId] = {
+      state,
+      series: [],
+      timeRange: getTimeRange(query, queries),
+    };
+
+    return dataByQuery;
+  }, {});
+};
+
+const getTimeRange = (query: AlertQuery, queries: AlertQuery[]): TimeRange => {
+  if (isExpressionQuery(query.model)) {
+    const relative = getTimeRangeForExpression(query.model, queries);
+    return rangeUtil.relativeToTimeRange(relative);
+  }
+
+  if (!query.relativeTimeRange) {
+    console.warn(`Query with refId: ${query.refId} did not have any relative time range, using default.`);
+    return getDefaultTimeRange();
+  }
+
+  return rangeUtil.relativeToTimeRange(query.relativeTimeRange);
+};
+
+const mapToPanelData = (
+  dataByQuery: Record<string, PanelData>
+): OperatorFunction<FetchResponse<AlertingQueryResponse>, Record<string, PanelData>> => {
+  return map((response) => {
+    const { data } = response;
+    const results: Record<string, PanelData> = {};
+
+    for (const [refId, result] of Object.entries(data.results)) {
+      results[refId] = {
+        timeRange: dataByQuery[refId].timeRange,
+        state: LoadingState.Done,
+        series: result.frames.map(dataFrameFromJSON),
+      };
+    }
+
+    return results;
+  });
+};
+
+const mapErrorToPanelData = (lastResult: Record<string, PanelData>, error: Error): Record<string, PanelData> => {
+  const queryError = toDataQueryError(error);
+
+  return applyChange(lastResult, (refId, data) => {
+    return {
+      ...data,
+      state: LoadingState.Error,
+      error: queryError,
+    };
+  });
+};
+
+const applyChange = (
+  initial: Record<string, PanelData>,
+  change: (refId: string, data: PanelData) => PanelData
+): Record<string, PanelData> => {
+  const nextResult: Record<string, PanelData> = {};
+
+  for (const [refId, data] of Object.entries(initial)) {
+    nextResult[refId] = change(refId, data);
+  }
+
+  return nextResult;
+};
diff --git a/public/app/features/alerting/unified/state/actions.ts b/public/app/features/alerting/unified/state/actions.ts
new file mode 100644
index 00000000..ab87c055
--- /dev/null
+++ b/public/app/features/alerting/unified/state/actions.ts
@@ -0,0 +1,811 @@
+import { getBackendSrv, locationService } from '@grafana/runtime';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import {
+  AlertmanagerAlert,
+  AlertManagerCortexConfig,
+  AlertmanagerGroup,
+  ExternalAlertmanagersResponse,
+  Receiver,
+  Silence,
+  SilenceCreatePayload,
+  TestReceiversAlert,
+} from 'app/plugins/datasource/alertmanager/types';
+import { FolderDTO, NotifierDTO, ThunkResult } from 'app/types';
+import { RuleIdentifier, RuleNamespace, RuleWithLocation, StateHistoryItem } from 'app/types/unified-alerting';
+import {
+  PostableRulerRuleGroupDTO,
+  RulerGrafanaRuleDTO,
+  RulerRuleGroupDTO,
+  RulerRulesConfigDTO,
+} from 'app/types/unified-alerting-dto';
+import { fetchNotifiers } from '../api/grafana';
+import { fetchAnnotations } from '../api/annotations';
+import {
+  expireSilence,
+  fetchAlertManagerConfig,
+  fetchAlerts,
+  fetchAlertGroups,
+  fetchSilences,
+  createOrUpdateSilence,
+  updateAlertManagerConfig,
+  fetchStatus,
+  deleteAlertManagerConfig,
+  testReceivers,
+  addAlertManagers,
+  fetchExternalAlertmanagers,
+  fetchExternalAlertmanagerConfig,
+} from '../api/alertmanager';
+import { FetchPromRulesFilter, fetchRules } from '../api/prometheus';
+import {
+  deleteNamespace,
+  deleteRulerRulesGroup,
+  fetchRulerRules,
+  fetchRulerRulesGroup,
+  fetchRulerRulesNamespace,
+  FetchRulerRulesFilter,
+  setRulerRuleGroup,
+} from '../api/ruler';
+import { RuleFormType, RuleFormValues } from '../types/rule-form';
+import {
+  getAllRulesSourceNames,
+  GRAFANA_RULES_SOURCE_NAME,
+  isGrafanaRulesSource,
+  isVanillaPrometheusAlertManagerDataSource,
+} from '../utils/datasource';
+import { makeAMLink, retryWhile } from '../utils/misc';
+import { isFetchError, withAppEvents, withSerializedError } from '../utils/redux';
+import { formValuesToRulerRuleDTO, formValuesToRulerGrafanaRuleDTO } from '../utils/rule-form';
+import {
+  isCloudRuleIdentifier,
+  isGrafanaRuleIdentifier,
+  isGrafanaRulerRule,
+  isPrometheusRuleIdentifier,
+  isRulerNotSupportedResponse,
+} from '../utils/rules';
+import { addDefaultsToAlertmanagerConfig, removeMuteTimingFromRoute } from '../utils/alertmanager';
+import * as ruleId from '../utils/rule-id';
+import { isEmpty } from 'lodash';
+import messageFromError from 'app/plugins/datasource/grafana-azure-monitor-datasource/utils/messageFromError';
+
+const FETCH_CONFIG_RETRY_TIMEOUT = 30 * 1000;
+
+export const fetchPromRulesAction = createAsyncThunk(
+  'unifiedalerting/fetchPromRules',
+  ({ rulesSourceName, filter }: { rulesSourceName: string; filter?: FetchPromRulesFilter }): Promise<RuleNamespace[]> =>
+    withSerializedError(fetchRules(rulesSourceName, filter))
+);
+
+export const fetchAlertManagerConfigAction = createAsyncThunk(
+  'unifiedalerting/fetchAmConfig',
+  (alertManagerSourceName: string): Promise<AlertManagerCortexConfig> =>
+    withSerializedError(
+      (async () => {
+        // for vanilla prometheus, there is no config endpoint. Only fetch config from status
+        if (isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName)) {
+          return fetchStatus(alertManagerSourceName).then((status) => ({
+            alertmanager_config: status.config,
+            template_files: {},
+          }));
+        }
+
+        return retryWhile(
+          () => fetchAlertManagerConfig(alertManagerSourceName),
+          // if config has been recently deleted, it takes a while for cortex start returning the default one.
+          // retry for a short while instead of failing
+          (e) => !!messageFromError(e)?.includes('alertmanager storage object not found'),
+          FETCH_CONFIG_RETRY_TIMEOUT
+        ).then((result) => {
+          // if user config is empty for cortex alertmanager, try to get config from status endpoint
+          if (
+            isEmpty(result.alertmanager_config) &&
+            isEmpty(result.template_files) &&
+            alertManagerSourceName !== GRAFANA_RULES_SOURCE_NAME
+          ) {
+            return fetchStatus(alertManagerSourceName).then((status) => ({
+              alertmanager_config: status.config,
+              template_files: {},
+            }));
+          }
+          return result;
+        });
+      })()
+    )
+);
+
+export const fetchExternalAlertmanagersAction = createAsyncThunk(
+  'unifiedAlerting/fetchExternalAlertmanagers',
+  (): Promise<ExternalAlertmanagersResponse> => {
+    return withSerializedError(fetchExternalAlertmanagers());
+  }
+);
+
+export const fetchExternalAlertmanagersConfigAction = createAsyncThunk(
+  'unifiedAlerting/fetchExternAlertmanagersConfig',
+  (): Promise<{ alertmanagers: string[] }> => {
+    return withSerializedError(fetchExternalAlertmanagerConfig());
+  }
+);
+
+export const fetchRulerRulesAction = createAsyncThunk(
+  'unifiedalerting/fetchRulerRules',
+  ({
+    rulesSourceName,
+    filter,
+  }: {
+    rulesSourceName: string;
+    filter?: FetchRulerRulesFilter;
+  }): Promise<RulerRulesConfigDTO | null> => {
+    return withSerializedError(fetchRulerRules(rulesSourceName, filter));
+  }
+);
+
+export const fetchSilencesAction = createAsyncThunk(
+  'unifiedalerting/fetchSilences',
+  (alertManagerSourceName: string): Promise<Silence[]> => {
+    return withSerializedError(fetchSilences(alertManagerSourceName));
+  }
+);
+
+// this will only trigger ruler rules fetch if rules are not loaded yet and request is not in flight
+export function fetchRulerRulesIfNotFetchedYet(rulesSourceName: string): ThunkResult<void> {
+  return (dispatch, getStore) => {
+    const { rulerRules } = getStore().unifiedAlerting;
+    const resp = rulerRules[rulesSourceName];
+    if (!resp?.result && !(resp && isRulerNotSupportedResponse(resp)) && !resp?.loading) {
+      dispatch(fetchRulerRulesAction({ rulesSourceName }));
+    }
+  };
+}
+
+export function fetchAllPromAndRulerRulesAction(force = false): ThunkResult<void> {
+  return (dispatch, getStore) => {
+    const { promRules, rulerRules } = getStore().unifiedAlerting;
+    getAllRulesSourceNames().map((rulesSourceName) => {
+      if (force || !promRules[rulesSourceName]?.loading) {
+        dispatch(fetchPromRulesAction({ rulesSourceName }));
+      }
+      if (force || !rulerRules[rulesSourceName]?.loading) {
+        dispatch(fetchRulerRulesAction({ rulesSourceName }));
+      }
+    });
+  };
+}
+
+export function fetchAllPromRulesAction(force = false): ThunkResult<void> {
+  return (dispatch, getStore) => {
+    const { promRules } = getStore().unifiedAlerting;
+    getAllRulesSourceNames().map((rulesSourceName) => {
+      if (force || !promRules[rulesSourceName]?.loading) {
+        dispatch(fetchPromRulesAction({ rulesSourceName }));
+      }
+    });
+  };
+}
+
+async function findEditableRule(ruleIdentifier: RuleIdentifier): Promise<RuleWithLocation | null> {
+  if (isGrafanaRuleIdentifier(ruleIdentifier)) {
+    const namespaces = await fetchRulerRules(GRAFANA_RULES_SOURCE_NAME);
+    // find namespace and group that contains the uid for the rule
+    for (const [namespace, groups] of Object.entries(namespaces)) {
+      for (const group of groups) {
+        const rule = group.rules.find(
+          (rule) => isGrafanaRulerRule(rule) && rule.grafana_alert?.uid === ruleIdentifier.uid
+        );
+        if (rule) {
+          return {
+            group,
+            ruleSourceName: GRAFANA_RULES_SOURCE_NAME,
+            namespace: namespace,
+            rule,
+          };
+        }
+      }
+    }
+  }
+
+  if (isCloudRuleIdentifier(ruleIdentifier)) {
+    const { ruleSourceName, namespace, groupName } = ruleIdentifier;
+    const group = await fetchRulerRulesGroup(ruleSourceName, namespace, groupName);
+
+    if (!group) {
+      return null;
+    }
+
+    const rule = group.rules.find((rule) => {
+      const identifier = ruleId.fromRulerRule(ruleSourceName, namespace, group.name, rule);
+      return ruleId.equal(identifier, ruleIdentifier);
+    });
+
+    if (!rule) {
+      return null;
+    }
+
+    return {
+      group,
+      ruleSourceName,
+      namespace,
+      rule,
+    };
+  }
+
+  if (isPrometheusRuleIdentifier(ruleIdentifier)) {
+    throw new Error('Native prometheus rules can not be edited in grafana.');
+  }
+
+  return null;
+}
+
+export const fetchEditableRuleAction = createAsyncThunk(
+  'unifiedalerting/fetchEditableRule',
+  (ruleIdentifier: RuleIdentifier): Promise<RuleWithLocation | null> =>
+    withSerializedError(findEditableRule(ruleIdentifier))
+);
+
+async function deleteRule(ruleWithLocation: RuleWithLocation): Promise<void> {
+  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(GRAFANA_RULES_SOURCE_NAME, namespace, group.name);
+    return;
+  }
+  // in case of CLOUD
+  // it was the last rule, delete the entire group
+  if (group.rules.length === 1) {
+    await deleteRulerRulesGroup(ruleSourceName, namespace, group.name);
+    return;
+  }
+  // post the group with rule removed
+  await setRulerRuleGroup(ruleSourceName, namespace, {
+    ...group,
+    rules: group.rules.filter((r) => r !== rule),
+  });
+}
+
+export function deleteRuleAction(
+  ruleIdentifier: RuleIdentifier,
+  options: { navigateTo?: string } = {}
+): ThunkResult<void> {
+  /*
+   * fetch the rules group from backend, delete group if it is found and+
+   * reload ruler rules
+   */
+  return async (dispatch) => {
+    withAppEvents(
+      (async () => {
+        const ruleWithLocation = await findEditableRule(ruleIdentifier);
+        if (!ruleWithLocation) {
+          throw new Error('Rule not found.');
+        }
+        await deleteRule(ruleWithLocation);
+        // refetch rules for this rules source
+        dispatch(fetchRulerRulesAction({ rulesSourceName: ruleWithLocation.ruleSourceName }));
+        dispatch(fetchPromRulesAction({ rulesSourceName: ruleWithLocation.ruleSourceName }));
+
+        if (options.navigateTo) {
+          locationService.replace(options.navigateTo);
+        }
+      })(),
+      {
+        successMessage: 'Rule deleted.',
+      }
+    );
+  };
+}
+
+async function saveLotexRule(values: RuleFormValues, existing?: RuleWithLocation): Promise<RuleIdentifier> {
+  const { dataSourceName, group, namespace } = values;
+  const formRule = formValuesToRulerRuleDTO(values);
+  if (dataSourceName && group && namespace) {
+    // if we're updating a rule...
+    if (existing) {
+      // refetch it so we always have the latest greatest
+      const freshExisting = await findEditableRule(ruleId.fromRuleWithLocation(existing));
+      if (!freshExisting) {
+        throw new Error('Rule not found.');
+      }
+      // if namespace or group was changed, delete the old rule
+      if (freshExisting.namespace !== namespace || freshExisting.group.name !== group) {
+        await deleteRule(freshExisting);
+      } else {
+        // if same namespace or group, update the group replacing the old rule with new
+        const payload = {
+          ...freshExisting.group,
+          rules: freshExisting.group.rules.map((existingRule) =>
+            existingRule === freshExisting.rule ? formRule : existingRule
+          ),
+        };
+        await setRulerRuleGroup(dataSourceName, namespace, payload);
+        return ruleId.fromRulerRule(dataSourceName, namespace, group, formRule);
+      }
+    }
+
+    // if creating new rule or existing rule was in a different namespace/group, create new rule in target group
+
+    const targetGroup = await fetchRulerRulesGroup(dataSourceName, namespace, group);
+
+    const payload: RulerRuleGroupDTO = targetGroup
+      ? {
+          ...targetGroup,
+          rules: [...targetGroup.rules, formRule],
+        }
+      : {
+          name: group,
+          rules: [formRule],
+        };
+
+    await setRulerRuleGroup(dataSourceName, namespace, payload);
+    return ruleId.fromRulerRule(dataSourceName, namespace, group, formRule);
+  } else {
+    throw new Error('Data source and location must be specified');
+  }
+}
+
+async function saveGrafanaRule(values: RuleFormValues, existing?: RuleWithLocation): Promise<RuleIdentifier> {
+  const { folder, evaluateEvery } = values;
+  const formRule = formValuesToRulerGrafanaRuleDTO(values);
+  if (folder) {
+    // 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.');
+      }
+
+      // if folder has changed, delete the old one
+      if (freshExisting.namespace !== folder.title) {
+        await deleteRule(freshExisting);
+        // if same folder, repost the group with updated rule
+      } else {
+        const uid = (freshExisting.rule as RulerGrafanaRuleDTO).grafana_alert.uid!;
+        formRule.grafana_alert.uid = uid;
+        await setRulerRuleGroup(GRAFANA_RULES_SOURCE_NAME, freshExisting.namespace, {
+          name: freshExisting.group.name,
+          interval: evaluateEvery,
+          rules: [formRule],
+        });
+        return { uid };
+      }
+    }
+
+    // if creating new rule or folder was changed, create rule in a new group
+
+    const existingNamespace = await fetchRulerRulesNamespace(GRAFANA_RULES_SOURCE_NAME, folder.title);
+
+    // set group name to rule name, but be super paranoid and check that this group does not already exist
+    let group = values.name;
+    let idx = 1;
+    while (!!existingNamespace.find((g) => g.name === group)) {
+      group = `${values.name}-${++idx}`;
+    }
+
+    const payload: PostableRulerRuleGroupDTO = {
+      name: group,
+      interval: evaluateEvery,
+      rules: [formRule],
+    };
+    await setRulerRuleGroup(GRAFANA_RULES_SOURCE_NAME, folder.title, payload);
+
+    // now refetch this group to get the uid, hah
+    const result = await fetchRulerRulesGroup(GRAFANA_RULES_SOURCE_NAME, folder.title, group);
+    const newUid = (result?.rules[0] as RulerGrafanaRuleDTO)?.grafana_alert?.uid;
+    if (newUid) {
+      return { uid: newUid };
+    } else {
+      throw new Error('Failed to fetch created rule.');
+    }
+  } else {
+    throw new Error('Folder must be specified');
+  }
+}
+
+export const saveRuleFormAction = createAsyncThunk(
+  'unifiedalerting/saveRuleForm',
+  ({
+    values,
+    existing,
+    redirectOnSave,
+  }: {
+    values: RuleFormValues;
+    existing?: RuleWithLocation;
+    redirectOnSave?: string;
+  }): Promise<void> =>
+    withAppEvents(
+      withSerializedError(
+        (async () => {
+          const { type } = values;
+          // in case of system (cortex/loki)
+          let identifier: RuleIdentifier;
+          if (type === RuleFormType.cloudAlerting || type === RuleFormType.cloudRecording) {
+            identifier = await saveLotexRule(values, existing);
+            // in case of grafana managed
+          } else if (type === RuleFormType.grafana) {
+            identifier = await saveGrafanaRule(values, existing);
+          } else {
+            throw new Error('Unexpected rule form type');
+          }
+          if (redirectOnSave) {
+            locationService.push(redirectOnSave);
+          } else {
+            // redirect to edit page
+            const newLocation = `/alerting/${encodeURIComponent(ruleId.stringifyIdentifier(identifier))}/edit`;
+            if (locationService.getLocation().pathname !== newLocation) {
+              locationService.replace(newLocation);
+            }
+          }
+        })()
+      ),
+      {
+        successMessage: existing ? `Rule "${values.name}" updated.` : `Rule "${values.name}" saved.`,
+        errorMessage: 'Failed to save rule',
+      }
+    )
+);
+
+export const fetchGrafanaNotifiersAction = createAsyncThunk(
+  'unifiedalerting/fetchGrafanaNotifiers',
+  (): Promise<NotifierDTO[]> => withSerializedError(fetchNotifiers())
+);
+
+export const fetchGrafanaAnnotationsAction = createAsyncThunk(
+  'unifiedalerting/fetchGrafanaAnnotations',
+  (alertId: string): Promise<StateHistoryItem[]> => withSerializedError(fetchAnnotations(alertId))
+);
+
+interface UpdateAlertManagerConfigActionOptions {
+  alertManagerSourceName: string;
+  oldConfig: AlertManagerCortexConfig; // it will be checked to make sure it didn't change in the meanwhile
+  newConfig: AlertManagerCortexConfig;
+  successMessage?: string; // show toast on success
+  redirectPath?: string; // where to redirect on success
+  refetch?: boolean; // refetch config on success
+}
+
+export const updateAlertManagerConfigAction = createAsyncThunk<void, UpdateAlertManagerConfigActionOptions, {}>(
+  'unifiedalerting/updateAMConfig',
+  ({ alertManagerSourceName, oldConfig, newConfig, successMessage, redirectPath, refetch }, thunkAPI): Promise<void> =>
+    withAppEvents(
+      withSerializedError(
+        (async () => {
+          const latestConfig = await fetchAlertManagerConfig(alertManagerSourceName);
+          if (
+            !(isEmpty(latestConfig.alertmanager_config) && isEmpty(latestConfig.template_files)) &&
+            JSON.stringify(latestConfig) !== JSON.stringify(oldConfig)
+          ) {
+            throw new Error(
+              'It seems configuration has been recently updated. Please reload page and try again to make sure that recent changes are not overwritten.'
+            );
+          }
+          await updateAlertManagerConfig(alertManagerSourceName, addDefaultsToAlertmanagerConfig(newConfig));
+          if (refetch) {
+            await thunkAPI.dispatch(fetchAlertManagerConfigAction(alertManagerSourceName));
+          }
+          if (redirectPath) {
+            locationService.push(makeAMLink(redirectPath, alertManagerSourceName));
+          }
+        })()
+      ),
+      {
+        successMessage,
+      }
+    )
+);
+
+export const fetchAmAlertsAction = createAsyncThunk(
+  'unifiedalerting/fetchAmAlerts',
+  (alertManagerSourceName: string): Promise<AlertmanagerAlert[]> =>
+    withSerializedError(fetchAlerts(alertManagerSourceName, [], true, true, true))
+);
+
+export const expireSilenceAction = (alertManagerSourceName: string, silenceId: string): ThunkResult<void> => {
+  return async (dispatch) => {
+    await withAppEvents(expireSilence(alertManagerSourceName, silenceId), {
+      successMessage: 'Silence expired.',
+    });
+    dispatch(fetchSilencesAction(alertManagerSourceName));
+    dispatch(fetchAmAlertsAction(alertManagerSourceName));
+  };
+};
+
+type UpdateSilenceActionOptions = {
+  alertManagerSourceName: string;
+  payload: SilenceCreatePayload;
+  exitOnSave: boolean;
+  successMessage?: string;
+};
+
+export const createOrUpdateSilenceAction = createAsyncThunk<void, UpdateSilenceActionOptions, {}>(
+  'unifiedalerting/updateSilence',
+  ({ alertManagerSourceName, payload, exitOnSave, successMessage }): Promise<void> =>
+    withAppEvents(
+      withSerializedError(
+        (async () => {
+          await createOrUpdateSilence(alertManagerSourceName, payload);
+          if (exitOnSave) {
+            locationService.push('/alerting/silences');
+          }
+        })()
+      ),
+      {
+        successMessage,
+      }
+    )
+);
+
+export const deleteReceiverAction = (receiverName: string, alertManagerSourceName: string): ThunkResult<void> => {
+  return (dispatch, getState) => {
+    const config = getState().unifiedAlerting.amConfigs?.[alertManagerSourceName]?.result;
+    if (!config) {
+      throw new Error(`Config for ${alertManagerSourceName} not found`);
+    }
+    if (!config.alertmanager_config.receivers?.find((receiver) => receiver.name === receiverName)) {
+      throw new Error(`Cannot delete receiver ${receiverName}: not found in config.`);
+    }
+    const newConfig: AlertManagerCortexConfig = {
+      ...config,
+      alertmanager_config: {
+        ...config.alertmanager_config,
+        receivers: config.alertmanager_config.receivers.filter((receiver) => receiver.name !== receiverName),
+      },
+    };
+    return dispatch(
+      updateAlertManagerConfigAction({
+        newConfig,
+        oldConfig: config,
+        alertManagerSourceName,
+        successMessage: 'Contact point deleted.',
+        refetch: true,
+      })
+    );
+  };
+};
+
+export const deleteTemplateAction = (templateName: string, alertManagerSourceName: string): ThunkResult<void> => {
+  return (dispatch, getState) => {
+    const config = getState().unifiedAlerting.amConfigs?.[alertManagerSourceName]?.result;
+    if (!config) {
+      throw new Error(`Config for ${alertManagerSourceName} not found`);
+    }
+    if (typeof config.template_files?.[templateName] !== 'string') {
+      throw new Error(`Cannot delete template ${templateName}: not found in config.`);
+    }
+    const newTemplates = { ...config.template_files };
+    delete newTemplates[templateName];
+    const newConfig: AlertManagerCortexConfig = {
+      ...config,
+      alertmanager_config: {
+        ...config.alertmanager_config,
+        templates: config.alertmanager_config.templates?.filter((existing) => existing !== templateName),
+      },
+      template_files: newTemplates,
+    };
+    return dispatch(
+      updateAlertManagerConfigAction({
+        newConfig,
+        oldConfig: config,
+        alertManagerSourceName,
+        successMessage: 'Template deleted.',
+        refetch: true,
+      })
+    );
+  };
+};
+
+export const fetchFolderAction = createAsyncThunk(
+  'unifiedalerting/fetchFolder',
+  (uid: string): Promise<FolderDTO> => withSerializedError((getBackendSrv() as any).getFolderByUid(uid))
+);
+
+export const fetchFolderIfNotFetchedAction = (uid: string): ThunkResult<void> => {
+  return (dispatch, getState) => {
+    if (!getState().unifiedAlerting.folders[uid]?.dispatched) {
+      dispatch(fetchFolderAction(uid));
+    }
+  };
+};
+
+export const fetchAlertGroupsAction = createAsyncThunk(
+  'unifiedalerting/fetchAlertGroups',
+  (alertManagerSourceName: string): Promise<AlertmanagerGroup[]> => {
+    return withSerializedError(fetchAlertGroups(alertManagerSourceName));
+  }
+);
+
+export const checkIfLotexSupportsEditingRulesAction = createAsyncThunk<boolean, string>(
+  'unifiedalerting/checkIfLotexRuleEditingSupported',
+  async (rulesSourceName: string): Promise<boolean> =>
+    withAppEvents(
+      (async () => {
+        try {
+          await fetchRulerRulesGroup(rulesSourceName, 'test', 'test');
+          return true;
+        } catch (e) {
+          if (
+            (isFetchError(e) &&
+              (e.data.message?.includes('GetRuleGroup unsupported in rule local store') || // "local" rule storage
+                e.data.message?.includes('page not found'))) || // ruler api disabled
+            e.message?.includes('404 from rules config endpoint') // ruler api disabled
+          ) {
+            return false;
+          }
+          throw e;
+        }
+      })(),
+      {
+        errorMessage: `Failed to determine if "${rulesSourceName}" allows editing rules`,
+      }
+    )
+);
+
+export const deleteAlertManagerConfigAction = createAsyncThunk(
+  'unifiedalerting/deleteAlertManagerConfig',
+  async (alertManagerSourceName: string, thunkAPI): Promise<void> => {
+    return withAppEvents(
+      withSerializedError(
+        (async () => {
+          await deleteAlertManagerConfig(alertManagerSourceName);
+          await thunkAPI.dispatch(fetchAlertManagerConfigAction(alertManagerSourceName));
+        })()
+      ),
+      {
+        errorMessage: 'Failed to reset Alertmanager configuration',
+        successMessage: 'Alertmanager configuration reset.',
+      }
+    );
+  }
+);
+
+export const deleteMuteTimingAction = (alertManagerSourceName: string, muteTimingName: string): ThunkResult<void> => {
+  return async (dispatch, getState) => {
+    const config = getState().unifiedAlerting.amConfigs[alertManagerSourceName].result;
+
+    const muteIntervals =
+      config?.alertmanager_config?.mute_time_intervals?.filter(({ name }) => name !== muteTimingName) ?? [];
+
+    if (config) {
+      withAppEvents(
+        dispatch(
+          updateAlertManagerConfigAction({
+            alertManagerSourceName,
+            oldConfig: config,
+            newConfig: {
+              ...config,
+              alertmanager_config: {
+                ...config.alertmanager_config,
+                route: config.alertmanager_config.route
+                  ? removeMuteTimingFromRoute(muteTimingName, config.alertmanager_config?.route)
+                  : undefined,
+                mute_time_intervals: muteIntervals,
+              },
+            },
+            refetch: true,
+          })
+        ),
+        {
+          successMessage: `Deleted "${muteTimingName}" from Alertmanager configuration`,
+          errorMessage: 'Failed to delete mute timing',
+        }
+      );
+    }
+  };
+};
+
+interface TestReceiversOptions {
+  alertManagerSourceName: string;
+  receivers: Receiver[];
+  alert?: TestReceiversAlert;
+}
+
+export const testReceiversAction = createAsyncThunk(
+  'unifiedalerting/testReceivers',
+  ({ alertManagerSourceName, receivers, alert }: TestReceiversOptions): Promise<void> => {
+    return withAppEvents(withSerializedError(testReceivers(alertManagerSourceName, receivers, alert)), {
+      errorMessage: 'Failed to send test alert.',
+      successMessage: 'Test alert sent.',
+    });
+  }
+);
+
+interface UpdateNamespaceAndGroupOptions {
+  rulesSourceName: string;
+  namespaceName: string;
+  groupName: string;
+  newNamespaceName: string;
+  newGroupName: string;
+  groupInterval?: string;
+}
+
+// allows renaming namespace, renaming group and changing group interval, all in one go
+export const updateLotexNamespaceAndGroupAction = createAsyncThunk(
+  'unifiedalerting/updateLotexNamespaceAndGroup',
+  async (options: UpdateNamespaceAndGroupOptions, thunkAPI): Promise<void> => {
+    return withAppEvents(
+      withSerializedError(
+        (async () => {
+          const { rulesSourceName, namespaceName, groupName, newNamespaceName, newGroupName, groupInterval } = options;
+          if (options.rulesSourceName === GRAFANA_RULES_SOURCE_NAME) {
+            throw new Error(`this action does not support Grafana rules`);
+          }
+          // fetch rules and perform sanity checks
+          const rulesResult = await fetchRulerRules(rulesSourceName);
+          if (!rulesResult[namespaceName]) {
+            throw new Error(`Namespace "${namespaceName}" not found.`);
+          }
+          const existingGroup = rulesResult[namespaceName].find((group) => group.name === groupName);
+          if (!existingGroup) {
+            throw new Error(`Group "${groupName}" not found.`);
+          }
+          if (newGroupName !== groupName && !!rulesResult[namespaceName].find((group) => group.name === newGroupName)) {
+            throw new Error(`Group "${newGroupName}" already exists.`);
+          }
+          if (newNamespaceName !== namespaceName && !!rulesResult[newNamespaceName]) {
+            throw new Error(`Namespace "${newNamespaceName}" already exists.`);
+          }
+          if (
+            newNamespaceName === namespaceName &&
+            groupName === newGroupName &&
+            groupInterval === existingGroup.interval
+          ) {
+            throw new Error('Nothing changed.');
+          }
+
+          // if renaming namespace - make new copies of all groups, then delete old namespace
+          if (newNamespaceName !== namespaceName) {
+            for (const group of rulesResult[namespaceName]) {
+              await setRulerRuleGroup(
+                rulesSourceName,
+                newNamespaceName,
+                group.name === groupName
+                  ? {
+                      ...group,
+                      name: newGroupName,
+                      interval: groupInterval,
+                    }
+                  : group
+              );
+            }
+            await deleteNamespace(rulesSourceName, namespaceName);
+
+            // if only modifying group...
+          } else {
+            // save updated group
+            await setRulerRuleGroup(rulesSourceName, namespaceName, {
+              ...existingGroup,
+              name: newGroupName,
+              interval: groupInterval,
+            });
+            // if group name was changed, delete old group
+            if (newGroupName !== groupName) {
+              await deleteRulerRulesGroup(rulesSourceName, namespaceName, groupName);
+            }
+          }
+
+          // refetch all rules
+          await thunkAPI.dispatch(fetchRulerRulesAction({ rulesSourceName }));
+        })()
+      ),
+      {
+        errorMessage: 'Failed to update namespace / group',
+        successMessage: 'Update successful',
+      }
+    );
+  }
+);
+
+export const addExternalAlertmanagersAction = createAsyncThunk(
+  'unifiedAlerting/addExternalAlertmanagers',
+  async (alertManagerUrls: string[], thunkAPI): Promise<void> => {
+    return withAppEvents(
+      withSerializedError(
+        (async () => {
+          await addAlertManagers(alertManagerUrls);
+          thunkAPI.dispatch(fetchExternalAlertmanagersConfigAction());
+        })()
+      ),
+      {
+        errorMessage: 'Failed adding alertmanagers',
+        successMessage: 'Alertmanagers updated',
+      }
+    );
+  }
+);
diff --git a/public/app/features/alerting/unified/state/reducers.ts b/public/app/features/alerting/unified/state/reducers.ts
new file mode 100644
index 00000000..65f1aa8b
--- /dev/null
+++ b/public/app/features/alerting/unified/state/reducers.ts
@@ -0,0 +1,69 @@
+import { combineReducers } from 'redux';
+import { createAsyncMapSlice, createAsyncSlice } from '../utils/redux';
+import {
+  fetchAlertManagerConfigAction,
+  fetchAmAlertsAction,
+  fetchEditableRuleAction,
+  fetchGrafanaNotifiersAction,
+  fetchPromRulesAction,
+  fetchRulerRulesAction,
+  fetchSilencesAction,
+  saveRuleFormAction,
+  updateAlertManagerConfigAction,
+  createOrUpdateSilenceAction,
+  fetchFolderAction,
+  fetchAlertGroupsAction,
+  checkIfLotexSupportsEditingRulesAction,
+  deleteAlertManagerConfigAction,
+  testReceiversAction,
+  updateLotexNamespaceAndGroupAction,
+  fetchExternalAlertmanagersAction,
+  fetchExternalAlertmanagersConfigAction,
+  fetchGrafanaAnnotationsAction,
+} from './actions';
+
+export const reducer = combineReducers({
+  promRules: createAsyncMapSlice('promRules', fetchPromRulesAction, ({ rulesSourceName }) => rulesSourceName).reducer,
+  rulerRules: createAsyncMapSlice('rulerRules', fetchRulerRulesAction, ({ rulesSourceName }) => rulesSourceName)
+    .reducer,
+  amConfigs: createAsyncMapSlice(
+    'amConfigs',
+    fetchAlertManagerConfigAction,
+    (alertManagerSourceName) => alertManagerSourceName
+  ).reducer,
+  silences: createAsyncMapSlice('silences', fetchSilencesAction, (alertManagerSourceName) => alertManagerSourceName)
+    .reducer,
+  ruleForm: combineReducers({
+    saveRule: createAsyncSlice('saveRule', saveRuleFormAction).reducer,
+    existingRule: createAsyncSlice('existingRule', fetchEditableRuleAction).reducer,
+  }),
+  grafanaNotifiers: createAsyncSlice('grafanaNotifiers', fetchGrafanaNotifiersAction).reducer,
+  saveAMConfig: createAsyncSlice('saveAMConfig', updateAlertManagerConfigAction).reducer,
+  deleteAMConfig: createAsyncSlice('deleteAMConfig', deleteAlertManagerConfigAction).reducer,
+  updateSilence: createAsyncSlice('updateSilence', createOrUpdateSilenceAction).reducer,
+  amAlerts: createAsyncMapSlice('amAlerts', fetchAmAlertsAction, (alertManagerSourceName) => alertManagerSourceName)
+    .reducer,
+  folders: createAsyncMapSlice('folders', fetchFolderAction, (uid) => uid).reducer,
+  amAlertGroups: createAsyncMapSlice(
+    'amAlertGroups',
+    fetchAlertGroupsAction,
+    (alertManagerSourceName) => alertManagerSourceName
+  ).reducer,
+  lotexSupportsRuleEditing: createAsyncMapSlice(
+    'lotexSupportsRuleEditing',
+    checkIfLotexSupportsEditingRulesAction,
+    (source) => source
+  ).reducer,
+  testReceivers: createAsyncSlice('testReceivers', testReceiversAction).reducer,
+  updateLotexNamespaceAndGroup: createAsyncSlice('updateLotexNamespaceAndGroup', updateLotexNamespaceAndGroupAction)
+    .reducer,
+  externalAlertmanagers: combineReducers({
+    alertmanagerConfig: createAsyncSlice('alertmanagerConfig', fetchExternalAlertmanagersConfigAction).reducer,
+    discoveredAlertmanagers: createAsyncSlice('discoveredAlertmanagers', fetchExternalAlertmanagersAction).reducer,
+  }),
+  managedAlertStateHistory: createAsyncSlice('managedAlertStateHistory', fetchGrafanaAnnotationsAction).reducer,
+});
+
+export type UnifiedAlertingState = ReturnType<typeof reducer>;
+
+export default reducer;
diff --git a/public/app/features/alerting/unified/styles/notifications.ts b/public/app/features/alerting/unified/styles/notifications.ts
new file mode 100644
index 00000000..2d5966eb
--- /dev/null
+++ b/public/app/features/alerting/unified/styles/notifications.ts
@@ -0,0 +1,15 @@
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+import { AlertState } from 'app/plugins/datasource/alertmanager/types';
+
+export const getNotificationsTextColors = (theme: GrafanaTheme2) => ({
+  [AlertState.Active]: css`
+    color: ${theme.colors.error.text};
+  `,
+  [AlertState.Suppressed]: css`
+    color: ${theme.colors.primary.text};
+  `,
+  [AlertState.Unprocessed]: css`
+    color: ${theme.colors.secondary.text};
+  `,
+});
diff --git a/public/app/features/alerting/unified/styles/table.ts b/public/app/features/alerting/unified/styles/table.ts
new file mode 100644
index 00000000..707bdb0c
--- /dev/null
+++ b/public/app/features/alerting/unified/styles/table.ts
@@ -0,0 +1,38 @@
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+
+export const getAlertTableStyles = (theme: GrafanaTheme2) => ({
+  table: css`
+    width: 100%;
+    border-radius: ${theme.shape.borderRadius()};
+    border: solid 1px ${theme.colors.border.weak};
+    background-color: ${theme.colors.background.secondary};
+
+    th {
+      padding: ${theme.spacing(1)};
+    }
+
+    td {
+      padding: 0 ${theme.spacing(1)};
+    }
+
+    tr {
+      height: 38px;
+    }
+  `,
+  evenRow: css`
+    background-color: ${theme.colors.background.primary};
+  `,
+  colExpand: css`
+    width: 36px;
+  `,
+  actionsCell: css`
+    text-align: right;
+    width: 1%;
+    white-space: nowrap;
+
+    & > * + * {
+      margin-left: ${theme.spacing(1)};
+    }
+  `,
+});
diff --git a/public/app/features/alerting/unified/types/amroutes.ts b/public/app/features/alerting/unified/types/amroutes.ts
new file mode 100644
index 00000000..1bb95ed5
--- /dev/null
+++ b/public/app/features/alerting/unified/types/amroutes.ts
@@ -0,0 +1,22 @@
+import { MatcherFieldValue } from './silence-form';
+
+export interface FormAmRoute {
+  id: string;
+  object_matchers: MatcherFieldValue[];
+  continue: boolean;
+  receiver: string;
+  groupBy: string[];
+  groupWaitValue: string;
+  groupWaitValueType: string;
+  groupIntervalValue: string;
+  groupIntervalValueType: string;
+  repeatIntervalValue: string;
+  repeatIntervalValueType: string;
+  muteTimeIntervals: string[];
+  routes: FormAmRoute[];
+}
+
+export interface AmRouteReceiver {
+  label: string;
+  value: string;
+}
diff --git a/public/app/features/alerting/unified/types/mute-timing-form.ts b/public/app/features/alerting/unified/types/mute-timing-form.ts
new file mode 100644
index 00000000..3c759231
--- /dev/null
+++ b/public/app/features/alerting/unified/types/mute-timing-form.ts
@@ -0,0 +1,14 @@
+import { TimeRange } from 'app/plugins/datasource/alertmanager/types';
+
+export type MuteTimingFields = {
+  name: string;
+  time_intervals: MuteTimingIntervalFields[];
+};
+
+export type MuteTimingIntervalFields = {
+  times: TimeRange[];
+  weekdays: string;
+  days_of_month: string;
+  months: string;
+  years: string;
+};
diff --git a/public/app/features/alerting/unified/types/preview.ts b/public/app/features/alerting/unified/types/preview.ts
new file mode 100644
index 00000000..e94891a6
--- /dev/null
+++ b/public/app/features/alerting/unified/types/preview.ts
@@ -0,0 +1,31 @@
+import { PanelData } from '@grafana/data';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+import { RuleFormType } from './rule-form';
+
+export type PreviewRuleRequest = GrafanaPreviewRuleRequest | CloudPreviewRuleRequest;
+
+export type GrafanaPreviewRuleRequest = {
+  grafana_condition: {
+    condition: string;
+    data: AlertQuery[];
+    now: string;
+  };
+};
+
+export type CloudPreviewRuleRequest = {
+  dataSourceName: string;
+  expr: string;
+};
+
+export type PreviewRuleResponse = {
+  ruleType: RuleFormType;
+  data: PanelData;
+};
+
+export function isCloudPreviewRequest(request: PreviewRuleRequest): request is CloudPreviewRuleRequest {
+  return 'expr' in request;
+}
+
+export function isGrafanaPreviewRequest(request: PreviewRuleRequest): request is GrafanaPreviewRuleRequest {
+  return 'grafana_condition' in request;
+}
diff --git a/public/app/features/alerting/unified/types/receiver-form.ts b/public/app/features/alerting/unified/types/receiver-form.ts
new file mode 100644
index 00000000..126dd194
--- /dev/null
+++ b/public/app/features/alerting/unified/types/receiver-form.ts
@@ -0,0 +1,49 @@
+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 {
+  __id: string; // used to correllate form values to original DTOs
+  type: string;
+  settings: Record<string, any>;
+  secureSettings: Record<string, any>;
+  secureFields: Record<string, boolean>;
+}
+
+export interface ReceiverFormValues<R extends ChannelValues> {
+  name: string;
+  items: Array<ControlledField<R>>;
+}
+
+export interface CloudChannelValues extends ChannelValues {
+  type: string;
+  sendResolved: boolean;
+}
+
+export interface GrafanaChannelValues extends ChannelValues {
+  type: NotifierType;
+  disableResolveMessage: boolean;
+}
+
+export interface CommonSettingsComponentProps {
+  pathPrefix: string;
+  className?: string;
+  readOnly?: boolean;
+}
+export type CommonSettingsComponentType = React.ComponentType<CommonSettingsComponentProps>;
+
+export type CloudChannelConfig = {
+  send_resolved: boolean;
+  [key: string]: unknown;
+};
+
+// id to notifier
+export type GrafanaChannelMap = Record<string, GrafanaManagedReceiverConfig>;
+export type CloudChannelMap = Record<
+  string,
+  {
+    type: CloudNotifierType;
+    config: CloudChannelConfig;
+  }
+>;
diff --git a/public/app/features/alerting/unified/types/rule-form.ts b/public/app/features/alerting/unified/types/rule-form.ts
new file mode 100644
index 00000000..0ae36bb0
--- /dev/null
+++ b/public/app/features/alerting/unified/types/rule-form.ts
@@ -0,0 +1,33 @@
+import { AlertQuery, GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto';
+
+export enum RuleFormType {
+  grafana = 'grafana',
+  cloudAlerting = 'cloud-alerting',
+  cloudRecording = 'cloud-recording',
+}
+
+export interface RuleFormValues {
+  // common
+  name: string;
+  type?: RuleFormType;
+  dataSourceName: string | null;
+
+  labels: Array<{ key: string; value: string }>;
+  annotations: Array<{ key: string; value: string }>;
+
+  // grafana rules
+  queries: AlertQuery[];
+  condition: string | null; // refId of the query that gets alerted on
+  noDataState: GrafanaAlertStateDecision;
+  execErrState: GrafanaAlertStateDecision;
+  folder: { title: string; id: number } | null;
+  evaluateEvery: string;
+  evaluateFor: string;
+
+  // cortex / loki rules
+  namespace: string;
+  group: string;
+  forTime: number;
+  forTimeUnit: string;
+  expression: string;
+}
diff --git a/public/app/features/alerting/unified/types/silence-form.ts b/public/app/features/alerting/unified/types/silence-form.ts
new file mode 100644
index 00000000..7f99446e
--- /dev/null
+++ b/public/app/features/alerting/unified/types/silence-form.ts
@@ -0,0 +1,22 @@
+import { TimeZone } from '@grafana/data';
+import { MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
+
+export type MatcherFieldValue = {
+  name: string;
+  value: string;
+  operator: MatcherOperator;
+};
+
+export type SilenceFormFields = {
+  id: string;
+  startsAt: string;
+  endsAt: string;
+  timeZone: TimeZone;
+  duration: string;
+  comment: string;
+  matchers: MatcherFieldValue[];
+  createdBy: string;
+  matcherName: string;
+  matcherValue: string;
+  isRegex: boolean;
+};
diff --git a/public/app/features/alerting/unified/types/time.ts b/public/app/features/alerting/unified/types/time.ts
new file mode 100644
index 00000000..657f4c45
--- /dev/null
+++ b/public/app/features/alerting/unified/types/time.ts
@@ -0,0 +1,7 @@
+export enum TimeOptions {
+  seconds = 's',
+  minutes = 'm',
+  hours = 'h',
+  days = 'd',
+  weeks = 'w',
+}
diff --git a/public/app/features/alerting/unified/utils/alertmanager.test.ts b/public/app/features/alerting/unified/utils/alertmanager.test.ts
new file mode 100644
index 00000000..408764ce
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/alertmanager.test.ts
@@ -0,0 +1,177 @@
+import { Matcher, MatcherOperator, Route } from 'app/plugins/datasource/alertmanager/types';
+import { Labels } from 'app/types/unified-alerting-dto';
+import {
+  parseMatcher,
+  parseMatchers,
+  stringifyMatcher,
+  labelsMatchMatchers,
+  removeMuteTimingFromRoute,
+} from './alertmanager';
+
+describe('Alertmanager utils', () => {
+  describe('parseMatcher', () => {
+    it('should parse operators correctly', () => {
+      expect(parseMatcher('foo=bar')).toEqual<Matcher>({
+        name: 'foo',
+        value: 'bar',
+        isRegex: false,
+        isEqual: true,
+      });
+      expect(parseMatcher('foo!=bar')).toEqual<Matcher>({
+        name: 'foo',
+        value: 'bar',
+        isRegex: false,
+        isEqual: false,
+      });
+      expect(parseMatcher('foo =~bar')).toEqual<Matcher>({
+        name: 'foo',
+        value: 'bar',
+        isRegex: true,
+        isEqual: true,
+      });
+      expect(parseMatcher('foo!~ bar')).toEqual<Matcher>({
+        name: 'foo',
+        value: 'bar',
+        isRegex: true,
+        isEqual: false,
+      });
+    });
+
+    it('should parse escaped values correctly', () => {
+      expect(parseMatcher('foo=~"bar\\"baz\\""')).toEqual<Matcher>({
+        name: 'foo',
+        value: 'bar"baz"',
+        isRegex: true,
+        isEqual: true,
+      });
+      expect(parseMatcher('foo=~bar\\"baz\\"')).toEqual<Matcher>({
+        name: 'foo',
+        value: 'bar"baz"',
+        isRegex: true,
+        isEqual: true,
+      });
+    });
+    it('should parse multiple operators values correctly', () => {
+      expect(parseMatcher('foo=~bar=baz!=bad!~br')).toEqual<Matcher>({
+        name: 'foo',
+        value: 'bar=baz!=bad!~br',
+        isRegex: true,
+        isEqual: true,
+      });
+    });
+  });
+
+  describe('stringifyMatcher', () => {
+    it('should stringify matcher correctly', () => {
+      expect(
+        stringifyMatcher({
+          name: 'foo',
+          value: 'boo="bar"',
+          isRegex: true,
+          isEqual: false,
+        })
+      ).toEqual('foo!~"boo=\\"bar\\""');
+    });
+  });
+
+  describe('parseMatchers', () => {
+    it('should parse all operators', () => {
+      expect(parseMatchers('foo=bar, bar=~ba.+, severity!=warning, email!~@grafana.com')).toEqual<Matcher[]>([
+        { name: 'foo', value: 'bar', isRegex: false, isEqual: true },
+        { name: 'bar', value: 'ba.+', isEqual: true, isRegex: true },
+        { name: 'severity', value: 'warning', isRegex: false, isEqual: false },
+        { name: 'email', value: '@grafana.com', isRegex: true, isEqual: false },
+      ]);
+    });
+
+    it('should return nothing for invalid operator', () => {
+      expect(parseMatchers('foo=!bar')).toEqual([]);
+    });
+
+    it('should parse matchers with or without quotes', () => {
+      expect(parseMatchers('foo="bar",bar=bazz')).toEqual<Matcher[]>([
+        { name: 'foo', value: 'bar', isRegex: false, isEqual: true },
+        { name: 'bar', value: 'bazz', isEqual: true, isRegex: false },
+      ]);
+    });
+
+    it('should parse matchers for key with special characters', () => {
+      expect(parseMatchers('foo.bar-baz="bar",baz-bar.foo=bazz')).toEqual<Matcher[]>([
+        { name: 'foo.bar-baz', value: 'bar', isRegex: false, isEqual: true },
+        { name: 'baz-bar.foo', value: 'bazz', isEqual: true, isRegex: false },
+      ]);
+    });
+  });
+
+  describe('labelsMatchMatchers', () => {
+    it('should return true for matching labels', () => {
+      const labels: Labels = {
+        foo: 'bar',
+        bar: 'bazz',
+        bazz: 'buzz',
+      };
+
+      const matchers = parseMatchers('foo=bar,bar=bazz');
+      expect(labelsMatchMatchers(labels, matchers)).toBe(true);
+    });
+    it('should return false for no matching labels', () => {
+      const labels: Labels = {
+        foo: 'bar',
+        bar: 'bazz',
+      };
+      const matchers = parseMatchers('foo=buzz');
+      expect(labelsMatchMatchers(labels, matchers)).toBe(false);
+    });
+    it('should match with different operators', () => {
+      const labels: Labels = {
+        foo: 'bar',
+        bar: 'bazz',
+        email: 'admin@grafana.com',
+      };
+      const matchers = parseMatchers('foo!=bazz,bar=~ba.+');
+      expect(labelsMatchMatchers(labels, matchers)).toBe(true);
+    });
+  });
+
+  describe('removeMuteTimingFromRoute', () => {
+    const route: Route = {
+      receiver: 'gmail',
+      object_matchers: [['foo', MatcherOperator.equal, 'bar']],
+      mute_time_intervals: ['test1', 'test2'],
+      routes: [
+        {
+          receiver: 'slack',
+          object_matchers: [['env', MatcherOperator.equal, 'prod']],
+          mute_time_intervals: ['test2'],
+        },
+        {
+          receiver: 'pagerduty',
+          object_matchers: [['env', MatcherOperator.equal, 'eu']],
+          mute_time_intervals: ['test1'],
+        },
+      ],
+    };
+
+    it('should remove mute timings from routes', () => {
+      expect(removeMuteTimingFromRoute('test1', route)).toEqual({
+        mute_time_intervals: ['test2'],
+        object_matchers: [['foo', '=', 'bar']],
+        receiver: 'gmail',
+        routes: [
+          {
+            mute_time_intervals: ['test2'],
+            object_matchers: [['env', '=', 'prod']],
+            receiver: 'slack',
+            routes: undefined,
+          },
+          {
+            mute_time_intervals: [],
+            object_matchers: [['env', '=', 'eu']],
+            receiver: 'pagerduty',
+            routes: undefined,
+          },
+        ],
+      });
+    });
+  });
+});
diff --git a/public/app/features/alerting/unified/utils/alertmanager.ts b/public/app/features/alerting/unified/utils/alertmanager.ts
new file mode 100644
index 00000000..236b5366
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/alertmanager.ts
@@ -0,0 +1,264 @@
+import {
+  AlertManagerCortexConfig,
+  MatcherOperator,
+  Route,
+  Matcher,
+  TimeInterval,
+  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';
+
+export function addDefaultsToAlertmanagerConfig(config: AlertManagerCortexConfig): AlertManagerCortexConfig {
+  // add default receiver if it does not exist
+  if (!config.alertmanager_config.receivers) {
+    config.alertmanager_config.receivers = [{ name: 'default ' }];
+  }
+  // add default route if it does not exists
+  if (!config.alertmanager_config.route) {
+    config.alertmanager_config.route = {
+      receiver: config.alertmanager_config.receivers![0].name,
+    };
+  }
+  if (!config.template_files) {
+    config.template_files = {};
+  }
+  return config;
+}
+
+export function removeMuteTimingFromRoute(muteTiming: string, route: Route): Route {
+  const newRoute: Route = {
+    ...route,
+    mute_time_intervals: route.mute_time_intervals?.filter((muteName) => muteName !== muteTiming) ?? [],
+    routes: route.routes?.map((subRoute) => removeMuteTimingFromRoute(muteTiming, subRoute)),
+  };
+  return newRoute;
+}
+
+export function renameMuteTimings(newMuteTimingName: string, oldMuteTimingName: string, route: Route): Route {
+  return {
+    ...route,
+    mute_time_intervals: route.mute_time_intervals?.map((name) =>
+      name === oldMuteTimingName ? newMuteTimingName : name
+    ),
+    routes: route.routes?.map((subRoute) => renameMuteTimings(newMuteTimingName, oldMuteTimingName, subRoute)),
+  };
+}
+
+function isReceiverUsedInRoute(receiver: string, route: Route): boolean {
+  return (
+    (route.receiver === receiver || route.routes?.some((route) => isReceiverUsedInRoute(receiver, route))) ?? false
+  );
+}
+
+export function isReceiverUsed(receiver: string, config: AlertManagerCortexConfig): boolean {
+  return (
+    (config.alertmanager_config.route && isReceiverUsedInRoute(receiver, config.alertmanager_config.route)) ?? false
+  );
+}
+
+export function matcherToOperator(matcher: Matcher): MatcherOperator {
+  if (matcher.isEqual) {
+    if (matcher.isRegex) {
+      return MatcherOperator.regex;
+    } else {
+      return MatcherOperator.equal;
+    }
+  } else if (matcher.isRegex) {
+    return MatcherOperator.notRegex;
+  } else {
+    return MatcherOperator.notEqual;
+  }
+}
+
+export function matcherOperatorToValue(operator: MatcherOperator) {
+  switch (operator) {
+    case MatcherOperator.equal:
+      return { isEqual: true, isRegex: false };
+    case MatcherOperator.notEqual:
+      return { isEqual: false, isRegex: false };
+    case MatcherOperator.regex:
+      return { isEqual: true, isRegex: true };
+    case MatcherOperator.notRegex:
+      return { isEqual: false, isRegex: true };
+  }
+}
+
+export function matcherToMatcherField(matcher: Matcher): MatcherFieldValue {
+  return {
+    name: matcher.name,
+    value: matcher.value,
+    operator: matcherToOperator(matcher),
+  };
+}
+
+export function matcherFieldToMatcher(field: MatcherFieldValue): Matcher {
+  return {
+    name: field.name,
+    value: field.value,
+    ...matcherOperatorToValue(field.operator),
+  };
+}
+
+export const matcherFieldOptions: SelectableValue[] = [
+  { label: MatcherOperator.equal, description: 'Equals', value: MatcherOperator.equal },
+  { label: MatcherOperator.notEqual, description: 'Does not equal', value: MatcherOperator.notEqual },
+  { label: MatcherOperator.regex, description: 'Matches regex', value: MatcherOperator.regex },
+  { label: MatcherOperator.notRegex, description: 'Does not match regex', value: MatcherOperator.notRegex },
+];
+
+const matcherOperators = [
+  MatcherOperator.regex,
+  MatcherOperator.notRegex,
+  MatcherOperator.notEqual,
+  MatcherOperator.equal,
+];
+
+function unescapeMatcherValue(value: string) {
+  let trimmed = value.trim().replace(/\\"/g, '"');
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') && !trimmed.endsWith('\\"')) {
+    trimmed = trimmed.substr(1, trimmed.length - 2);
+  }
+  return trimmed.replace(/\\"/g, '"');
+}
+
+function escapeMatcherValue(value: string) {
+  return '"' + value.replace(/"/g, '\\"') + '"';
+}
+
+export function stringifyMatcher(matcher: Matcher): string {
+  return `${matcher.name}${matcherToOperator(matcher)}${escapeMatcherValue(matcher.value)}`;
+}
+
+export function parseMatcher(matcher: string): Matcher {
+  const trimmed = matcher.trim();
+  if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+    throw new Error(`PromQL matchers not supported yet, sorry! PromQL matcher found: ${trimmed}`);
+  }
+  const operatorsFound = matcherOperators
+    .map((op): [MatcherOperator, number] => [op, trimmed.indexOf(op)])
+    .filter(([_, idx]) => idx > -1)
+    .sort((a, b) => a[1] - b[1]);
+
+  if (!operatorsFound.length) {
+    throw new Error(`Invalid matcher: ${trimmed}`);
+  }
+  const [operator, idx] = operatorsFound[0];
+  const name = trimmed.substr(0, idx).trim();
+  const value = unescapeMatcherValue(trimmed.substr(idx + operator.length).trim());
+  if (!name) {
+    throw new Error(`Invalid matcher: ${trimmed}`);
+  }
+
+  return {
+    name,
+    value,
+    isRegex: operator === MatcherOperator.regex || operator === MatcherOperator.notRegex,
+    isEqual: operator === MatcherOperator.equal || operator === MatcherOperator.regex,
+  };
+}
+
+export function parseMatchers(matcherQueryString: string): Matcher[] {
+  const matcherRegExp = /\b([\w.-]+)(=~|!=|!~|=(?="?\w))"?([^"\n,]*)"?/g;
+  const matchers: Matcher[] = [];
+
+  matcherQueryString.replace(matcherRegExp, (_, key, operator, value) => {
+    const isEqual = operator === MatcherOperator.equal || operator === MatcherOperator.regex;
+    const isRegex = operator === MatcherOperator.regex || operator === MatcherOperator.notRegex;
+    matchers.push({
+      name: key,
+      value,
+      isEqual,
+      isRegex,
+    });
+    return '';
+  });
+
+  return matchers;
+}
+
+export function labelsMatchMatchers(labels: Labels, matchers: Matcher[]): boolean {
+  return matchers.every(({ name, value, isRegex, isEqual }) => {
+    return Object.entries(labels).some(([labelKey, labelValue]) => {
+      const nameMatches = name === labelKey;
+      let valueMatches;
+      if (isEqual && !isRegex) {
+        valueMatches = value === labelValue;
+      }
+      if (!isEqual && !isRegex) {
+        valueMatches = value !== labelValue;
+      }
+      if (isEqual && isRegex) {
+        valueMatches = new RegExp(value).test(labelValue);
+      }
+      if (!isEqual && isRegex) {
+        valueMatches = !new RegExp(value).test(labelValue);
+      }
+
+      return nameMatches && valueMatches;
+    });
+  });
+}
+
+export function getAllAlertmanagerDataSources() {
+  return getAllDataSources().filter((ds) => ds.type === DataSourceType.Alertmanager);
+}
+
+export function getAlertmanagerByUid(uid?: string) {
+  return getAllAlertmanagerDataSources().find((ds) => uid === ds.uid);
+}
+
+export function timeIntervalToString(timeInterval: TimeInterval): string {
+  const { times, weekdays, days_of_month, months, years } = timeInterval;
+  const timeString = getTimeString(times);
+  const weekdayString = getWeekdayString(weekdays);
+  const daysString = getDaysOfMonthString(days_of_month);
+  const monthsString = getMonthsString(months);
+  const yearsString = getYearsString(years);
+
+  return [timeString, weekdayString, daysString, monthsString, yearsString].join(', ');
+}
+
+export function getTimeString(times?: TimeRange[]): string {
+  return (
+    'Times: ' +
+    (times ? times?.map(({ start_time, end_time }) => `${start_time} - ${end_time} UTC`).join(' and ') : 'All')
+  );
+}
+
+export function getWeekdayString(weekdays?: string[]): string {
+  return (
+    'Weekdays: ' +
+    (weekdays
+      ?.map((day) => {
+        if (day.includes(':')) {
+          return day
+            .split(':')
+            .map((d) => {
+              const abbreviated = d.slice(0, 3);
+              return abbreviated[0].toLocaleUpperCase() + abbreviated.substr(1);
+            })
+            .join('-');
+        } else {
+          const abbreviated = day.slice(0, 3);
+          return abbreviated[0].toLocaleUpperCase() + abbreviated.substr(1);
+        }
+      })
+      .join(', ') ?? 'All')
+  );
+}
+
+export function getDaysOfMonthString(daysOfMonth?: string[]): string {
+  return 'Days of the month: ' + (daysOfMonth?.join(', ') ?? 'All');
+}
+
+export function getMonthsString(months?: string[]): string {
+  return 'Months: ' + (months?.join(', ') ?? 'All');
+}
+
+export function getYearsString(years?: string[]): string {
+  return 'Years: ' + (years?.join(', ') ?? 'All');
+}
diff --git a/public/app/features/alerting/unified/utils/amroutes.ts b/public/app/features/alerting/unified/utils/amroutes.ts
new file mode 100644
index 00000000..8609d24c
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/amroutes.ts
@@ -0,0 +1,200 @@
+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 { MatcherFieldValue } from '../types/silence-form';
+import { matcherToMatcherField, parseMatcher } from './alertmanager';
+import { GRAFANA_RULES_SOURCE_NAME } from './datasource';
+
+const defaultValueAndType: [string, string] = ['', timeOptions[0].value];
+
+const matchersToArrayFieldMatchers = (
+  matchers: Record<string, string> | undefined,
+  isRegex: boolean
+): MatcherFieldValue[] =>
+  Object.entries(matchers ?? {}).reduce<MatcherFieldValue[]>(
+    (acc, [name, value]) => [
+      ...acc,
+      {
+        name,
+        value,
+        operator: isRegex ? MatcherOperator.regex : MatcherOperator.equal,
+      },
+    ],
+    [] as MatcherFieldValue[]
+  );
+
+const intervalToValueAndType = (strValue: string | undefined): [string, string] => {
+  if (!strValue) {
+    return defaultValueAndType;
+  }
+
+  const [value, valueType] = strValue ? parseInterval(strValue) : [undefined, undefined];
+
+  const timeOption = timeOptions.find((opt) => opt.value === valueType);
+
+  if (!value || !timeOption) {
+    return defaultValueAndType;
+  }
+
+  return [String(value), timeOption.value];
+};
+
+const selectableValueToString = (selectableValue: SelectableValue<string>): string => selectableValue.value!;
+
+const selectableValuesToStrings = (arr: Array<SelectableValue<string>> | undefined): string[] =>
+  (arr ?? []).map(selectableValueToString);
+
+export const emptyArrayFieldMatcher: MatcherFieldValue = {
+  name: '',
+  value: '',
+  operator: MatcherOperator.equal,
+};
+
+export const emptyRoute: FormAmRoute = {
+  id: '',
+  groupBy: [],
+  object_matchers: [],
+  routes: [],
+  continue: false,
+  receiver: '',
+  groupWaitValue: '',
+  groupWaitValueType: timeOptions[0].value,
+  groupIntervalValue: '',
+  groupIntervalValueType: timeOptions[0].value,
+  repeatIntervalValue: '',
+  repeatIntervalValueType: timeOptions[0].value,
+  muteTimeIntervals: [],
+};
+
+//returns route, and a record mapping id to existing route route
+export const amRouteToFormAmRoute = (route: Route | undefined): [FormAmRoute, Record<string, Route>] => {
+  if (!route || Object.keys(route).length === 0) {
+    return [emptyRoute, {}];
+  }
+
+  const [groupWaitValue, groupWaitValueType] = intervalToValueAndType(route.group_wait);
+  const [groupIntervalValue, groupIntervalValueType] = intervalToValueAndType(route.group_interval);
+  const [repeatIntervalValue, repeatIntervalValueType] = intervalToValueAndType(route.repeat_interval);
+
+  const id = String(Math.random());
+  const id2route = {
+    [id]: route,
+  };
+  const formRoutes: FormAmRoute[] = [];
+  route.routes?.forEach((subRoute) => {
+    const [subFormRoute, subId2Route] = amRouteToFormAmRoute(subRoute);
+    formRoutes.push(subFormRoute);
+    Object.assign(id2route, subId2Route);
+  });
+
+  // Frontend migration to use object_matchers instead of matchers
+  const matchers = route.matchers
+    ? route.matchers?.map((matcher) => matcherToMatcherField(parseMatcher(matcher))) ?? []
+    : route.object_matchers?.map(
+        (matcher) => ({ name: matcher[0], operator: matcher[1], value: matcher[2] } as MatcherFieldValue)
+      ) ?? [];
+
+  return [
+    {
+      id,
+      object_matchers: [
+        ...matchers,
+        ...matchersToArrayFieldMatchers(route.match, false),
+        ...matchersToArrayFieldMatchers(route.match_re, true),
+      ],
+      continue: route.continue ?? false,
+      receiver: route.receiver ?? '',
+      groupBy: route.group_by ?? [],
+      groupWaitValue,
+      groupWaitValueType,
+      groupIntervalValue,
+      groupIntervalValueType,
+      repeatIntervalValue,
+      repeatIntervalValueType,
+      routes: formRoutes,
+      muteTimeIntervals: route.mute_time_intervals ?? [],
+    },
+    id2route,
+  ];
+};
+
+export const formAmRouteToAmRoute = (
+  alertManagerSourceName: string | undefined,
+  formAmRoute: FormAmRoute,
+  id2ExistingRoute: Record<string, Route>
+): Route => {
+  const existing: Route | undefined = id2ExistingRoute[formAmRoute.id];
+  const amRoute: Route = {
+    ...(existing ?? {}),
+    continue: formAmRoute.continue,
+    group_by: formAmRoute.groupBy,
+    object_matchers: formAmRoute.object_matchers.length
+      ? formAmRoute.object_matchers.map((matcher) => [matcher.name, matcher.operator, matcher.value])
+      : undefined,
+    match: undefined,
+    match_re: undefined,
+    group_wait: formAmRoute.groupWaitValue
+      ? `${formAmRoute.groupWaitValue}${formAmRoute.groupWaitValueType}`
+      : undefined,
+    group_interval: formAmRoute.groupIntervalValue
+      ? `${formAmRoute.groupIntervalValue}${formAmRoute.groupIntervalValueType}`
+      : undefined,
+    repeat_interval: formAmRoute.repeatIntervalValue
+      ? `${formAmRoute.repeatIntervalValue}${formAmRoute.repeatIntervalValueType}`
+      : undefined,
+    routes: formAmRoute.routes.map((subRoute) =>
+      formAmRouteToAmRoute(alertManagerSourceName, subRoute, id2ExistingRoute)
+    ),
+    mute_time_intervals: formAmRoute.muteTimeIntervals,
+  };
+
+  if (alertManagerSourceName !== GRAFANA_RULES_SOURCE_NAME) {
+    amRoute.matchers = formAmRoute.object_matchers.map(({ name, operator, value }) => `${name}${operator}${value}`);
+    amRoute.object_matchers = undefined;
+  } else {
+    amRoute.matchers = undefined;
+  }
+
+  if (formAmRoute.receiver) {
+    amRoute.receiver = formAmRoute.receiver;
+  }
+
+  return omitBy(amRoute, isUndefined);
+};
+
+export const stringToSelectableValue = (str: string): SelectableValue<string> => ({
+  label: str,
+  value: str,
+});
+
+export const stringsToSelectableValues = (arr: string[] | undefined): Array<SelectableValue<string>> =>
+  (arr ?? []).map(stringToSelectableValue);
+
+export const mapSelectValueToString = (selectableValue: SelectableValue<string>): string => {
+  if (!selectableValue) {
+    return '';
+  }
+
+  return selectableValueToString(selectableValue) ?? '';
+};
+
+export const mapMultiSelectValueToStrings = (
+  selectableValues: Array<SelectableValue<string>> | undefined
+): string[] => {
+  if (!selectableValues) {
+    return [];
+  }
+
+  return selectableValuesToStrings(selectableValues);
+};
+
+export const optionalPositiveInteger: Validate<string> = (value) => {
+  if (!value) {
+    return undefined;
+  }
+
+  return !/^\d+$/.test(value) ? 'Must be a positive integer.' : undefined;
+};
diff --git a/public/app/features/alerting/unified/utils/cloud-alertmanager-notifier-types.ts b/public/app/features/alerting/unified/utils/cloud-alertmanager-notifier-types.ts
new file mode 100644
index 00000000..d1e3bfcf
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/cloud-alertmanager-notifier-types.ts
@@ -0,0 +1,383 @@
+import { NotificationChannelOption, NotifierDTO } from 'app/types';
+
+function option(
+  propertyName: string,
+  label: string,
+  description: string,
+  rest: Partial<NotificationChannelOption> = {}
+): NotificationChannelOption {
+  return {
+    propertyName,
+    label,
+    description,
+    element: 'input',
+    inputType: '',
+    required: false,
+    secure: false,
+    placeholder: '',
+    validationRule: '',
+    showWhen: { field: '', is: '' },
+    ...rest,
+  };
+}
+
+const basicAuthOption: NotificationChannelOption = option(
+  'basic_auth',
+  'Basic auth',
+  'Sets the `Authorization` header with the configured username and password. Password and password_file are mutually exclusive.',
+  {
+    element: 'subform',
+    subformOptions: [
+      option('username', 'Username', ''),
+      option('password', 'Password', ''),
+      option('password_file', 'Password file', ''),
+    ],
+  }
+);
+
+const tlsConfigOption: NotificationChannelOption = option('tls_config', 'TLS config', 'Configures the TLS settings.', {
+  element: 'subform',
+  subformOptions: [
+    option('ca_file', 'CA file', 'CA certificate to validate the server certificate with.'),
+    option('cert_file', 'Cert file', 'Certificate for client cert authentication to the server.'),
+    option('key_file', 'Key file', 'Key file for client cert authentication to the server.'),
+    option('server_name', 'Server name', 'ServerName extension to indicate the name of the server.'),
+    option('insecure_skip_verify', 'Skip verify', 'Disable validation of the server certificate.', {
+      element: 'checkbox',
+    }),
+  ],
+});
+
+const httpConfigOption: NotificationChannelOption = option(
+  'http_config',
+  'HTTP Config',
+  'Note that `basic_auth`, `bearer_token` and `bearer_token_file` options are mutually exclusive.',
+  {
+    element: 'subform',
+    subformOptions: [
+      option('bearer_token', 'Bearer token', 'Sets the `Authorization` header with the configured bearer token.'),
+      option(
+        'bearer_token_file',
+        'Bearer token file',
+        'Sets the `Authorization` header with the bearer token read from the configured file.'
+      ),
+      option('proxy_url', 'Proxy URL', 'Optional proxy URL.'),
+      basicAuthOption,
+      tlsConfigOption,
+    ],
+  }
+);
+
+export const cloudNotifierTypes: NotifierDTO[] = [
+  {
+    name: 'Email',
+    description: 'Send notification over SMTP',
+    type: 'email',
+    info: '',
+    heading: 'Email settings',
+    options: [
+      option('to', 'To', 'The email address to send notifications to.', { required: true }),
+      option('from', 'From', 'The sender address.'),
+      option('smarthost', 'SMTP host', 'The SMTP host through which emails are sent.'),
+      option('hello', 'Hello', 'The hostname to identify to the SMTP server.'),
+      option('auth_username', 'Username', 'SMTP authentication information'),
+      option('auth_password', 'Password', 'SMTP authentication information'),
+      option('auth_secret', 'Secret', 'SMTP authentication information'),
+      option('auth_identity', 'Identity', 'SMTP authentication information'),
+      option('require_tls', 'Require TLS', 'The SMTP TLS requirement', { element: 'checkbox' }),
+      option('html', 'Email HTML body', 'The HTML body of the email notification.', {
+        placeholder: '{{ template "email.default.html" . }}',
+        element: 'textarea',
+      }),
+      option('text', 'Email text body', 'The text body of the email notification.', { element: 'textarea' }),
+      option(
+        'headers',
+        'Headers',
+        'Further headers email header key/value pairs. Overrides any headers previously set by the notification implementation.',
+        { element: 'key_value_map' }
+      ),
+      tlsConfigOption,
+    ],
+  },
+  {
+    name: 'PagerDuty',
+    description: 'Send notifications to PagerDuty',
+    type: 'pagerduty',
+    info: '',
+    heading: 'PagerDuty settings',
+    options: [
+      option(
+        'routing_key',
+        'Routing key',
+        'The PagerDuty integration key (when using PagerDuty integration type `Events API v2`)'
+      ),
+      option(
+        'service_key',
+        'Service key',
+        'The PagerDuty integration key (when using PagerDuty integration type `Prometheus`).'
+      ),
+      option('url', 'URL', 'The URL to send API requests to'),
+      option('client', 'Client', 'The client identification of the Alertmanager.', {
+        placeholder: '{{ template "pagerduty.default.client" . }}',
+      }),
+      option('client_url', 'Client URL', 'A backlink to the sender of the notification.', {
+        placeholder: '{{ template "pagerduty.default.clientURL" . }}',
+      }),
+      option('description', 'Description', 'A description of the incident.', {
+        placeholder: '{{ template "pagerduty.default.description" .}}',
+      }),
+      option('severity', 'Severity', 'Severity of the incident.', { placeholder: 'error' }),
+      option(
+        'details',
+        'Details',
+        'A set of arbitrary key/value pairs that provide further detail about the incident.',
+        {
+          element: 'key_value_map',
+        }
+      ),
+      option('images', 'Images', 'Images to attach to the incident.', {
+        element: 'subform_array',
+        subformOptions: [
+          option('href', 'URL', '', { required: true }),
+          option('source', 'Source', '', { required: true }),
+          option('alt', 'Alt', '', { required: true }),
+        ],
+      }),
+      option('links', 'Links', 'Links to attach to the incident.', {
+        element: 'subform_array',
+        subformOptions: [option('href', 'URL', '', { required: true }), option('text', 'Text', '', { required: true })],
+      }),
+      httpConfigOption,
+    ],
+  },
+  {
+    name: 'Pushover',
+    description: 'Send notifications to Pushover',
+    type: 'pushover',
+    info: '',
+    heading: 'Pushover settings',
+    options: [
+      option('user_key', 'User key', 'The recipient user’s user key.', { required: true }),
+      option('token', 'Token', 'Your registered application’s API token, see https://pushover.net/app', {
+        required: true,
+      }),
+      option('title', 'Title', 'Notification title.', {
+        placeholder: '{{ template "pushover.default.title" . }}',
+      }),
+      option('message', 'Message', 'Notification message.', {
+        placeholder: '{{ template "pushover.default.message" . }}',
+      }),
+      option('url', 'URL', 'A supplementary URL shown alongside the message.', {
+        placeholder: '{{ template "pushover.default.url" . }}',
+      }),
+      option('priority', 'Priority', 'Priority, see https://pushover.net/api#priority', {
+        placeholder: '{{ if eq .Status "firing" }}2{{ else }}0{{ end }}',
+      }),
+      option(
+        'retry',
+        'Retry',
+        'How often the Pushover servers will send the same notification to the user. Must be at least 30 seconds.',
+        {
+          placeholder: '1m',
+        }
+      ),
+      option(
+        'expire',
+        'Expire',
+        'How long your notification will continue to be retried for, unless the user acknowledges the notification.',
+        {
+          placeholder: '1h',
+        }
+      ),
+      httpConfigOption,
+    ],
+  },
+  {
+    name: 'Slack',
+    description: 'Send notifications to Slack',
+    type: 'slack',
+    info: '',
+    heading: 'Slack settings',
+    options: [
+      option('api_url', 'Webhook URL', 'The Slack webhook URL.'),
+      option('channel', 'Channel', 'The #channel or @user to send notifications to.', { required: true }),
+      option('icon_emoji', 'Emoji icon', ''),
+      option('icon_url', 'Icon URL', ''),
+      option('link_names', 'Names link', '', { element: 'checkbox' }),
+      option('username', 'Username', '', { placeholder: '{{ template "slack.default.username" . }}' }),
+      option('callback_id', 'Callback ID', '', { placeholder: '{{ template "slack.default.callbackid" . }}' }),
+      option('color', 'Color', '', { placeholder: '{{ if eq .Status "firing" }}danger{{ else }}good{{ end }}' }),
+      option('fallback', 'Fallback', '', { placeholder: '{{ template "slack.default.fallback" . }}' }),
+      option('footer', 'Footer', '', { placeholder: '{{ template "slack.default.footer" . }}' }),
+      option('mrkdwn_in', 'Mrkdwn fields', 'An array of field names that should be formatted by mrkdwn syntax.', {
+        element: 'string_array',
+      }),
+      option('pretext', 'Pre-text', '', { placeholder: '{{ template "slack.default.pretext" . }}' }),
+      option('short_fields', 'Short fields', '', { element: 'checkbox' }),
+      option('text', 'Message body', '', { element: 'textarea', placeholder: '{{ template "slack.default.text" . }}' }),
+      option('title', 'Title', '', { placeholder: '{{ template "slack.default.title" . }}' }),
+      option('title_link', 'Title link', '', { placeholder: '{{ template "slack.default.titlelink" . }}' }),
+      option('image_url', 'Image URL', ''),
+      option('thumb_url', 'Thumbnail URL', ''),
+      option('actions', 'Actions', '', {
+        element: 'subform_array',
+        subformOptions: [
+          option('text', 'Text', '', { required: true }),
+          option('type', 'Type', '', { required: true }),
+          option('url', 'URL', 'Either url or name and value are mandatory.'),
+          option('name', 'Name', ''),
+          option('value', 'Value', ''),
+          option('confirm', 'Confirm', '', {
+            element: 'subform',
+            subformOptions: [
+              option('text', 'Text', '', { required: true }),
+              option('dismiss_text', 'Dismiss text', ''),
+              option('ok_text', 'OK text', ''),
+              option('title', 'Title', ''),
+            ],
+          }),
+          option('style', 'Style', ''),
+        ],
+      }),
+      option('fields', 'Fields', '', {
+        element: 'subform_array',
+        subformOptions: [
+          option('title', 'Title', '', { required: true }),
+          option('value', 'Value', '', { required: true }),
+          option('short', 'Short', '', { element: 'checkbox' }),
+        ],
+      }),
+      httpConfigOption,
+    ],
+  },
+  {
+    name: 'OpsGenie',
+    description: 'Send notifications to OpsGenie',
+    type: 'opsgenie',
+    info: '',
+    heading: 'OpsGenie settings',
+    options: [
+      option('api_key', 'API key', 'The API key to use when talking to the OpsGenie API.'),
+      option('api_url', 'API URL', 'The host to send OpsGenie API requests to.'),
+      option('message', 'Message', 'Alert text limited to 130 characters.'),
+      option('description', 'Description', 'A description of the incident.', {
+        placeholder: '{{ template "opsgenie.default.description" . }}',
+      }),
+      option('source', 'Source', 'A backlink to the sender of the notification.', {
+        placeholder: '{{ template "opsgenie.default.source" . }}',
+      }),
+      option(
+        'details',
+        'Details',
+        'A set of arbitrary key/value pairs that provide further detail about the incident.',
+        {
+          element: 'key_value_map',
+        }
+      ),
+      option('tags', 'Tags', 'Comma separated list of tags attached to the notifications.'),
+      option('note', 'Note', 'Additional alert note.'),
+      option('priority', 'Priority', 'Priority level of alert. Possible values are P1, P2, P3, P4, and P5.'),
+      option('responders', 'Responders', 'List of responders responsible for notifications.', {
+        element: 'subform_array',
+        subformOptions: [
+          option('type', 'Type', '"team", "user", "escalation" or schedule".', { required: true }),
+          option('id', 'ID', 'Exactly one of these fields should be defined.'),
+          option('name', 'Name', 'Exactly one of these fields should be defined.'),
+          option('username', 'Username', 'Exactly one of these fields should be defined.'),
+        ],
+      }),
+      httpConfigOption,
+    ],
+  },
+  {
+    name: 'VictorOps',
+    description: 'Send notifications to VictorOps',
+    type: 'victorops',
+    info: '',
+    heading: 'VictorOps settings',
+    options: [
+      option('api_key', 'API key', 'The API key to use when talking to the VictorOps API.'),
+      option('api_url', 'API URL', 'The VictorOps API URL.'),
+      option('routing_key', 'Routing key', 'A key used to map the alert to a team.', { required: true }),
+      option('message_type', 'Message type', 'Describes the behavior of the alert (CRITICAL, WARNING, INFO).'),
+      option('entity_display_name', 'Entity display name', 'Contains summary of the alerted problem.', {
+        placeholder: '{{ template "victorops.default.entity_display_name" . }}',
+      }),
+      option('state_message', 'State message', 'Contains long explanation of the alerted problem.', {
+        placeholder: '{{ template "victorops.default.state_message" . }}',
+      }),
+      option('monitoring_tool', 'Monitoring tool', 'The monitoring tool the state message is from.', {
+        placeholder: '{{ template "victorops.default.monitoring_tool" . }}',
+      }),
+      httpConfigOption,
+    ],
+  },
+  {
+    name: 'Webhook',
+    description: 'Send notifications to a webhook',
+    type: 'webhook',
+    info: '',
+    heading: 'Webhook settings',
+    options: [
+      option('url', 'URL', 'The endpoint to send HTTP POST requests to.', { required: true }),
+      option(
+        'max_alerts',
+        'Max alerts',
+        'The maximum number of alerts to include in a single webhook message. Alerts above this threshold are truncated. When leaving this at its default value of 0, all alerts are included.',
+        { placeholder: '0', validationRule: '(^\\d+$|^$)' }
+      ),
+      httpConfigOption,
+    ],
+  },
+];
+
+export const globalConfigOptions: NotificationChannelOption[] = [
+  // email
+  option('smtp_from', 'SMTP from', 'The default SMTP From header field.'),
+  option(
+    'smtp_smarthost',
+    'SMTP smarthost',
+    'The default SMTP smarthost used for sending emails, including port number. Port number usually is 25, or 587 for SMTP over TLS (sometimes referred to as STARTTLS). Example: smtp.example.org:587'
+  ),
+  option('smtp_hello', 'SMTP hello', 'The default hostname to identify to the SMTP server.', {
+    placeholder: 'localhost',
+  }),
+  option(
+    'smtp_auth_username',
+    'SMTP auth username',
+    "SMTP Auth using CRAM-MD5, LOGIN and PLAIN. If empty, Alertmanager doesn't authenticate to the SMTP server."
+  ),
+  option('smtp_auth_password', 'SMTP auth password', 'SMTP Auth using LOGIN and PLAIN.'),
+  option('smtp_auth_identity', 'SMTP auth identity', 'SMTP Auth using PLAIN.'),
+  option('smtp_auth_secret', 'SMTP auth secret', 'SMTP Auth using CRAM-MD5.'),
+  option(
+    'smtp_require_tls',
+    'SMTP require TLS',
+    'The default SMTP TLS requirement. Note that Go does not support unencrypted connections to remote SMTP endpoints.',
+    {
+      element: 'checkbox',
+    }
+  ),
+
+  // slack
+  option('slack_api_url', 'Slack API URL', ''),
+  option('victorops_api_key', 'VictorOps API key', ''),
+  option('victorops_api_url', 'VictorOps API URL', '', {
+    placeholder: 'https://alert.victorops.com/integrations/generic/20131114/alert/',
+  }),
+  option('pagerduty_url', 'PagerDuty URL', 'https://events.pagerduty.com/v2/enqueue'),
+  option('opsgenie_api_key', 'OpsGenie API key', ''),
+  option('opsgenie_api_url', 'OpsGenie API URL', '', { placeholder: 'https://api.opsgenie.com/' }),
+  option('wechat_api_url', 'WeChat API URL', '', { placeholder: 'https://qyapi.weixin.qq.com/cgi-bin/' }),
+  option('wechat_api_secret', 'WeChat API secret', ''),
+  option('wechat_api_corp_id', 'WeChat API corp id', ''),
+  httpConfigOption,
+  option(
+    'resolve_timeout',
+    'Resolve timeout',
+    'ResolveTimeout is the default value used by alertmanager if the alert does not include EndsAt, after this time passes it can declare the alert as resolved if it has not been updated. This has no impact on alerts from Prometheus, as they always include EndsAt.',
+    {
+      placeholder: '5m',
+    }
+  ),
+];
diff --git a/public/app/features/alerting/unified/utils/config.ts b/public/app/features/alerting/unified/utils/config.ts
new file mode 100644
index 00000000..127e1b2f
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/config.ts
@@ -0,0 +1,6 @@
+import { DataSourceInstanceSettings, DataSourceJsonData } from '@grafana/data';
+import { config } from '@grafana/runtime';
+
+export function getAllDataSources(): Array<DataSourceInstanceSettings<DataSourceJsonData>> {
+  return Object.values(config.datasources);
+}
diff --git a/public/app/features/alerting/unified/utils/constants.ts b/public/app/features/alerting/unified/utils/constants.ts
new file mode 100644
index 00000000..6f4332cb
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/constants.ts
@@ -0,0 +1,30 @@
+export const RULER_NOT_SUPPORTED_MSG = 'ruler not supported';
+
+export const RULE_LIST_POLL_INTERVAL_MS = 20000;
+
+export const ALERTMANAGER_NAME_QUERY_KEY = 'alertmanager';
+export const ALERTMANAGER_NAME_LOCAL_STORAGE_KEY = 'alerting-alertmanager';
+export const SILENCES_POLL_INTERVAL_MS = 20000;
+export const NOTIFICATIONS_POLL_INTERVAL_MS = 20000;
+
+export const TIMESERIES = 'timeseries';
+export const TABLE = 'table';
+export const STAT = 'stat';
+
+export enum Annotation {
+  description = 'description',
+  summary = 'summary',
+  runbookURL = 'runbook_url',
+  alertId = '__alertId__',
+  dashboardUID = '__dashboardUid__',
+  panelID = '__panelId__',
+}
+
+export const annotationLabels: Record<Annotation, string> = {
+  [Annotation.description]: 'Description',
+  [Annotation.summary]: 'Summary',
+  [Annotation.runbookURL]: 'Runbook URL',
+  [Annotation.dashboardUID]: 'Dashboard UID',
+  [Annotation.panelID]: 'Panel ID',
+  [Annotation.alertId]: 'Alert ID',
+};
diff --git a/public/app/features/alerting/unified/utils/datasource.ts b/public/app/features/alerting/unified/utils/datasource.ts
new file mode 100644
index 00000000..99bb03c9
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/datasource.ts
@@ -0,0 +1,90 @@
+import { DataSourceInstanceSettings, DataSourceJsonData } from '@grafana/data';
+import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from 'app/plugins/datasource/alertmanager/types';
+import { RulesSource } from 'app/types/unified-alerting';
+import { getAllDataSources } from './config';
+
+export const GRAFANA_RULES_SOURCE_NAME = 'grafana';
+export const GRAFANA_DATASOURCE_NAME = '-- Grafana --';
+
+export enum DataSourceType {
+  Alertmanager = 'alertmanager',
+  Loki = 'loki',
+  Prometheus = 'prometheus',
+}
+
+export const RulesDataSourceTypes: string[] = [DataSourceType.Loki, DataSourceType.Prometheus];
+
+export function getRulesDataSources() {
+  return getAllDataSources()
+    .filter((ds) => RulesDataSourceTypes.includes(ds.type) && ds.jsonData.manageAlerts !== false)
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function getAlertManagerDataSources() {
+  return getAllDataSources()
+    .filter((ds) => ds.type === DataSourceType.Alertmanager)
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function getLotexDataSourceByName(dataSourceName: string): DataSourceInstanceSettings {
+  const dataSource = getDataSourceByName(dataSourceName);
+  if (!dataSource) {
+    throw new Error(`Data source ${dataSourceName} not found`);
+  }
+  if (dataSource.type !== DataSourceType.Loki && dataSource.type !== DataSourceType.Prometheus) {
+    throw new Error(`Unexpected data source type ${dataSource.type}`);
+  }
+  return dataSource;
+}
+
+export function getAllRulesSourceNames(): string[] {
+  return [...getRulesDataSources().map((r) => r.name), GRAFANA_RULES_SOURCE_NAME];
+}
+
+export function getAllRulesSources(): RulesSource[] {
+  return [...getRulesDataSources(), GRAFANA_RULES_SOURCE_NAME];
+}
+
+export function getRulesSourceName(rulesSource: RulesSource): string {
+  return isCloudRulesSource(rulesSource) ? rulesSource.name : rulesSource;
+}
+
+export function isCloudRulesSource(rulesSource: RulesSource | string): rulesSource is DataSourceInstanceSettings {
+  return rulesSource !== GRAFANA_RULES_SOURCE_NAME;
+}
+
+export function isVanillaPrometheusAlertManagerDataSource(name: string): boolean {
+  return (
+    name !== GRAFANA_RULES_SOURCE_NAME &&
+    (getDataSourceByName(name)?.jsonData as AlertManagerDataSourceJsonData)?.implementation ===
+      AlertManagerImplementation.prometheus
+  );
+}
+
+export function isGrafanaRulesSource(
+  rulesSource: RulesSource | string
+): rulesSource is typeof GRAFANA_RULES_SOURCE_NAME {
+  return rulesSource === GRAFANA_RULES_SOURCE_NAME;
+}
+
+export function getDataSourceByName(name: string): DataSourceInstanceSettings<DataSourceJsonData> | undefined {
+  return getAllDataSources().find((source) => source.name === name);
+}
+
+export function getRulesSourceByName(name: string): RulesSource | undefined {
+  if (name === GRAFANA_RULES_SOURCE_NAME) {
+    return GRAFANA_RULES_SOURCE_NAME;
+  }
+  return getDataSourceByName(name);
+}
+
+export function getDatasourceAPIId(dataSourceName: string) {
+  if (dataSourceName === GRAFANA_RULES_SOURCE_NAME) {
+    return GRAFANA_RULES_SOURCE_NAME;
+  }
+  const ds = getDataSourceByName(dataSourceName);
+  if (!ds) {
+    throw new Error(`Datasource "${dataSourceName}" not found`);
+  }
+  return String(ds.id);
+}
diff --git a/public/app/features/alerting/unified/utils/dynamicTable.ts b/public/app/features/alerting/unified/utils/dynamicTable.ts
new file mode 100644
index 00000000..25b22780
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/dynamicTable.ts
@@ -0,0 +1,10 @@
+import { DynamicTableItemProps } from '../components/DynamicTable';
+
+export const prepareItems = <T = unknown>(
+  items: T[],
+  idCreator?: (item: T) => number | string
+): Array<DynamicTableItemProps<T>> =>
+  items.map((item, index) => ({
+    id: idCreator?.(item) ?? index,
+    data: item,
+  }));
diff --git a/public/app/features/alerting/unified/utils/matchers.ts b/public/app/features/alerting/unified/utils/matchers.ts
new file mode 100644
index 00000000..fee8c2d5
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/matchers.ts
@@ -0,0 +1,22 @@
+import { Matcher } from 'app/plugins/datasource/alertmanager/types';
+import { Labels } from '@grafana/data';
+import { parseMatcher } from './alertmanager';
+
+// parses comma separated matchers like "foo=bar,baz=~bad*" into SilenceMatcher[]
+export function parseQueryParamMatchers(paramValue: string): Matcher[] {
+  return paramValue
+    .split(',')
+    .filter((x) => !!x.trim())
+    .map((x) => parseMatcher(x.trim()));
+}
+
+export const getMatcherQueryParams = (labels: Labels) => {
+  return `matchers=${encodeURIComponent(
+    Object.entries(labels)
+      .filter(([labelKey]) => !(labelKey.startsWith('__') && labelKey.endsWith('__')))
+      .map(([labelKey, labelValue]) => {
+        return `${labelKey}=${labelValue}`;
+      })
+      .join(',')
+  )}`;
+};
diff --git a/public/app/features/alerting/unified/utils/misc.test.ts b/public/app/features/alerting/unified/utils/misc.test.ts
new file mode 100644
index 00000000..c69888b3
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/misc.test.ts
@@ -0,0 +1,70 @@
+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';
+
+function withState(state: GrafanaAlertState, labels?: {}): Alert {
+  return { activeAt: '', annotations: {}, labels: labels || {}, state: state, value: '' };
+}
+
+function withDate(activeAt?: string, labels?: {}): Alert {
+  return {
+    activeAt: activeAt || '',
+    annotations: {},
+    labels: labels || {},
+    state: GrafanaAlertState.Alerting,
+    value: '',
+  };
+}
+
+function permute(inputArray: any[]): any[] {
+  return inputArray.reduce(function permute(res, item, key, arr) {
+    return res.concat(
+      (arr.length > 1 &&
+        arr
+          .slice(0, key)
+          .concat(arr.slice(key + 1))
+          .reduce(permute, [])
+          .map(function (perm: any) {
+            return [item].concat(perm);
+          })) ||
+        item
+    );
+  }, []);
+}
+
+describe('Unified Altering misc', () => {
+  describe('sortAlerts', () => {
+    describe('when using any sortOrder with a list of alert instances', () => {
+      it.each`
+        alerts                                                                                                                   | sortOrder               | expected
+        ${[withState(GrafanaAlertState.Pending), withState(GrafanaAlertState.Alerting), withState(GrafanaAlertState.Normal)]}    | ${SortOrder.Importance} | ${[withState(GrafanaAlertState.Alerting), withState(GrafanaAlertState.Pending), withState(GrafanaAlertState.Normal)]}
+        ${[withState(GrafanaAlertState.Pending), withState(GrafanaAlertState.Alerting), withState(GrafanaAlertState.NoData)]}    | ${SortOrder.Importance} | ${[withState(GrafanaAlertState.Alerting), withState(GrafanaAlertState.Pending), withState(GrafanaAlertState.NoData)]}
+        ${[withState(GrafanaAlertState.Pending), withState(GrafanaAlertState.Error), withState(GrafanaAlertState.Normal)]}       | ${SortOrder.Importance} | ${[withState(GrafanaAlertState.Error), withState(GrafanaAlertState.Pending), withState(GrafanaAlertState.Normal)]}
+        ${[withDate('2021-11-29T14:10:07-05:00'), withDate('2021-11-29T15:10:07-05:00'), withDate('2021-11-29T13:10:07-05:00')]} | ${SortOrder.TimeAsc}    | ${[withDate('2021-11-29T13:10:07-05:00'), withDate('2021-11-29T14:10:07-05:00'), withDate('2021-11-29T15:10:07-05:00')]}
+        ${[withDate('2021-11-29T14:10:07-05:00'), withDate('2021-11-29T15:10:07-05:00'), withDate('2021-11-29T13:10:07-05:00')]} | ${SortOrder.TimeDesc}   | ${[withDate('2021-11-29T15:10:07-05:00'), withDate('2021-11-29T14:10:07-05:00'), withDate('2021-11-29T13:10:07-05:00')]}
+        ${[withDate('', { mno: 'pqr' }), withDate('', { abc: 'def' }), withDate('', { ghi: 'jkl' })]}                            | ${SortOrder.AlphaAsc}   | ${[withDate('', { abc: 'def' }), withDate('', { ghi: 'jkl' }), withDate('', { mno: 'pqr' })]}
+        ${[withDate('', { mno: 'pqr' }), withDate('', { abc: 'def' }), withDate('', { ghi: 'jkl' })]}                            | ${SortOrder.AlphaDesc}  | ${[withDate('', { mno: 'pqr' }), withDate('', { ghi: 'jkl' }), withDate('', { abc: 'def' })]}
+      `('then it should sort the alerts correctly', ({ alerts, sortOrder, expected }) => {
+        const result = sortAlerts(sortOrder, alerts);
+
+        expect(result).toEqual(expected);
+      });
+    });
+
+    describe('when sorting ties', () => {
+      it.each`
+        alerts                                                                                                                                                   | sortOrder
+        ${[withState(GrafanaAlertState.Alerting, { ghi: 'jkl' }), withState(GrafanaAlertState.Alerting, { abc: 'def' }), withState(GrafanaAlertState.Alerting)]} | ${SortOrder.Importance}
+        ${[withDate('2021-11-29T13:10:07-05:00', { ghi: 'jkl' }), withDate('2021-11-29T13:10:07-05:00'), withDate('2021-11-29T13:10:07-05:00', { abc: 'def' })]} | ${SortOrder.TimeAsc}
+        ${[withDate('2021-11-29T13:10:07-05:00', { ghi: 'jkl' }), withDate('2021-11-29T13:10:07-05:00'), withDate('2021-11-29T13:10:07-05:00', { abc: 'def' })]} | ${SortOrder.TimeDesc}
+      `('then tie order should be deterministic', ({ alerts, sortOrder }) => {
+        // All input permutations should result in the same sorted order
+        const sortedPermutations = permute(alerts).map((a) => sortAlerts(sortOrder, a));
+        sortedPermutations.forEach((p) => {
+          expect(p).toEqual(sortedPermutations[0]);
+        });
+      });
+    });
+  });
+});
diff --git a/public/app/features/alerting/unified/utils/misc.ts b/public/app/features/alerting/unified/utils/misc.ts
new file mode 100644
index 00000000..33741bad
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/misc.ts
@@ -0,0 +1,127 @@
+import { urlUtil, UrlQueryMap } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { Alert, CombinedRule, FilterState, RulesSource, SilenceFilterState } from 'app/types/unified-alerting';
+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';
+
+export function createViewLink(ruleSource: RulesSource, rule: CombinedRule, returnTo: string): string {
+  const sourceName = getRulesSourceName(ruleSource);
+  const identifier = ruleId.fromCombinedRule(sourceName, rule);
+  const paramId = encodeURIComponent(ruleId.stringifyIdentifier(identifier));
+  const paramSource = encodeURIComponent(sourceName);
+
+  return urlUtil.renderUrl(`${config.appSubUrl}/alerting/${paramSource}/${paramId}/view`, { returnTo });
+}
+
+export function createExploreLink(dataSourceName: string, query: string) {
+  return urlUtil.renderUrl(`${config.appSubUrl}/explore`, {
+    left: JSON.stringify([
+      'now-1h',
+      'now',
+      dataSourceName,
+      { datasource: dataSourceName, expr: query },
+      { ui: [true, true, true, 'none'] },
+    ]),
+  });
+}
+
+export function arrayToRecord(items: Array<{ key: string; value: string }>): Record<string, string> {
+  return items.reduce<Record<string, string>>((rec, { key, value }) => {
+    rec[key] = value;
+    return rec;
+  }, {});
+}
+
+export const getFiltersFromUrlParams = (queryParams: UrlQueryMap): FilterState => {
+  const queryString = queryParams['queryString'] === undefined ? undefined : String(queryParams['queryString']);
+  const alertState = queryParams['alertState'] === undefined ? undefined : String(queryParams['alertState']);
+  const dataSource = queryParams['dataSource'] === undefined ? undefined : String(queryParams['dataSource']);
+  const ruleType = queryParams['ruleType'] === undefined ? undefined : String(queryParams['ruleType']);
+  const groupBy = queryParams['groupBy'] === undefined ? undefined : String(queryParams['groupBy']).split(',');
+  return { queryString, alertState, dataSource, groupBy, ruleType };
+};
+
+export const getSilenceFiltersFromUrlParams = (queryParams: UrlQueryMap): SilenceFilterState => {
+  const queryString = queryParams['queryString'] === undefined ? undefined : String(queryParams['queryString']);
+  const silenceState = queryParams['silenceState'] === undefined ? undefined : String(queryParams['silenceState']);
+
+  return { queryString, silenceState };
+};
+
+export function recordToArray(record: Record<string, string>): Array<{ key: string; value: string }> {
+  return Object.entries(record).map(([key, value]) => ({ key, value }));
+}
+
+export function makeAMLink(path: string, alertManagerName?: string, options?: Record<string, string>): string {
+  const search = new URLSearchParams(options);
+  if (alertManagerName) {
+    search.append(ALERTMANAGER_NAME_QUERY_KEY, alertManagerName);
+  }
+  return `${path}?${search.toString()}`;
+}
+
+export function makeSilenceLink(alertmanagerSourceName: string, rule: CombinedRule) {
+  return (
+    `${config.appSubUrl}/alerting/silence/new?alertmanager=${alertmanagerSourceName}` +
+    `&matchers=alertname=${rule.name},${Object.entries(rule.labels)
+      .map(([key, value]) => encodeURIComponent(`${key}=${value}`))
+      .join(',')}`
+  );
+}
+
+// keep retrying fn if it's error passes shouldRetry(error) and timeout has not elapsed yet
+export function retryWhile<T, E = Error>(
+  fn: () => Promise<T>,
+  shouldRetry: (e: E) => boolean,
+  timeout: number, // milliseconds, how long to keep retrying
+  pause = 1000 // milliseconds, pause between retries
+): Promise<T> {
+  const start = new Date().getTime();
+  const makeAttempt = (): Promise<T> =>
+    fn().catch((e) => {
+      if (shouldRetry(e) && new Date().getTime() - start < timeout) {
+        return new Promise((resolve) => setTimeout(resolve, pause)).then(makeAttempt);
+      }
+      throw e;
+    });
+  return makeAttempt();
+}
+
+const alertStateSortScore = {
+  [GrafanaAlertState.Alerting]: 1,
+  [PromAlertingRuleState.Firing]: 1,
+  [GrafanaAlertState.Error]: 1,
+  [GrafanaAlertState.Pending]: 2,
+  [PromAlertingRuleState.Pending]: 2,
+  [PromAlertingRuleState.Inactive]: 2,
+  [GrafanaAlertState.NoData]: 3,
+  [GrafanaAlertState.Normal]: 4,
+};
+
+export function sortAlerts(sortOrder: SortOrder, alerts: Alert[]): Alert[] {
+  // Make sure to handle tie-breaks because API returns alert instances in random order every time
+  if (sortOrder === SortOrder.Importance) {
+    return sortBy(alerts, (alert) => [alertStateSortScore[alert.state], alertInstanceKey(alert).toLocaleLowerCase()]);
+  } else if (sortOrder === SortOrder.TimeAsc) {
+    return sortBy(alerts, (alert) => [
+      new Date(alert.activeAt) || new Date(),
+      alertInstanceKey(alert).toLocaleLowerCase(),
+    ]);
+  } else if (sortOrder === SortOrder.TimeDesc) {
+    return sortBy(alerts, (alert) => [
+      new Date(alert.activeAt) || new Date(),
+      alertInstanceKey(alert).toLocaleLowerCase(),
+    ]).reverse();
+  }
+  const result = sortBy(alerts, (alert) => alertInstanceKey(alert).toLocaleLowerCase());
+  if (sortOrder === SortOrder.AlphaDesc) {
+    result.reverse();
+  }
+
+  return result;
+}
diff --git a/public/app/features/alerting/unified/utils/mute-timings.ts b/public/app/features/alerting/unified/utils/mute-timings.ts
new file mode 100644
index 00000000..c5afe46d
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/mute-timings.ts
@@ -0,0 +1,66 @@
+import { MuteTimeInterval, TimeInterval } from 'app/plugins/datasource/alertmanager/types';
+import { omitBy, isUndefined } from 'lodash';
+import { MuteTimingFields, MuteTimingIntervalFields } from '../types/mute-timing-form';
+
+export const DAYS_OF_THE_WEEK = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+export const MONTHS = [
+  'january',
+  'february',
+  'march',
+  'april',
+  'may',
+  'june',
+  'july',
+  'august',
+  'september',
+  'october',
+  'november',
+  'december',
+];
+
+export const defaultTimeInterval: MuteTimingIntervalFields = {
+  times: [{ start_time: '', end_time: '' }],
+  weekdays: '',
+  days_of_month: '',
+  months: '',
+  years: '',
+};
+
+export const validateArrayField = (value: string, validateValue: (input: string) => boolean, invalidText: string) => {
+  if (value) {
+    return (
+      value
+        .split(',')
+        .map((x) => x.trim())
+        .every((entry) => entry.split(':').every(validateValue)) || invalidText
+    );
+  } else {
+    return true;
+  }
+};
+
+const convertStringToArray = (str: string) => {
+  return str ? str.split(',').map((s) => s.trim()) : undefined;
+};
+
+export const createMuteTiming = (fields: MuteTimingFields): MuteTimeInterval => {
+  const timeIntervals: TimeInterval[] = fields.time_intervals.map(
+    ({ times, weekdays, days_of_month, months, years }) => {
+      const interval = {
+        times: times.filter(({ start_time, end_time }) => !!start_time && !!end_time),
+        weekdays: convertStringToArray(weekdays)?.map((v) => v.toLowerCase()),
+        days_of_month: convertStringToArray(days_of_month),
+        months: convertStringToArray(months),
+        years: convertStringToArray(years),
+      };
+
+      return omitBy(interval, isUndefined);
+    }
+  );
+
+  return {
+    name: fields.name,
+    time_intervals: timeIntervals,
+  };
+};
diff --git a/public/app/features/alerting/unified/utils/query.test.ts b/public/app/features/alerting/unified/utils/query.test.ts
new file mode 100644
index 00000000..185efb26
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/query.test.ts
@@ -0,0 +1,123 @@
+import { DataSourceJsonData, PluginMeta } from '@grafana/data';
+import { alertRuleToQueries } from './query';
+import { GRAFANA_RULES_SOURCE_NAME } from './datasource';
+import { CombinedRule } from 'app/types/unified-alerting';
+import { GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto';
+import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
+
+describe('alertRuleToQueries', () => {
+  it('it should convert grafana alert', () => {
+    const combinedRule: CombinedRule = {
+      name: 'Test alert',
+      query: 'up',
+      labels: {},
+      annotations: {},
+      group: {
+        name: 'Prom up alert',
+        rules: [],
+      },
+      namespace: {
+        rulesSource: GRAFANA_RULES_SOURCE_NAME,
+        name: 'Alerts',
+        groups: [],
+      },
+      rulerRule: {
+        for: '',
+        annotations: {},
+        labels: {},
+        grafana_alert: grafanaAlert,
+      },
+    };
+
+    const result = alertRuleToQueries(combinedRule);
+    expect(result).toEqual(grafanaAlert.data);
+  });
+
+  it('shoulds convert cloud alert', () => {
+    const combinedRule: CombinedRule = {
+      name: 'cloud test',
+      labels: {},
+      query: 'up == 0',
+      annotations: {},
+      group: {
+        name: 'test',
+        rules: [],
+      },
+      namespace: {
+        name: 'prom test alerts',
+        groups: [],
+        rulesSource: {
+          name: 'prom test',
+          type: 'prometheus',
+          uid: 'asdf23',
+          id: 1,
+          access: 'proxy',
+          meta: {} as PluginMeta,
+          jsonData: {} as DataSourceJsonData,
+        },
+      },
+    };
+
+    const result = alertRuleToQueries(combinedRule);
+    expect(result).toEqual([
+      {
+        refId: 'A',
+        datasourceUid: 'asdf23',
+        queryType: '',
+        model: {
+          refId: 'A',
+          expr: 'up == 0',
+        },
+        relativeTimeRange: {
+          from: 360,
+          to: 0,
+        },
+      },
+    ]);
+  });
+});
+
+const grafanaAlert = {
+  condition: 'B',
+  exec_err_state: GrafanaAlertStateDecision.Alerting,
+  namespace_id: 11,
+  namespace_uid: 'namespaceuid123',
+  no_data_state: GrafanaAlertStateDecision.NoData,
+  title: 'Test alert',
+  uid: 'asdf23',
+  data: [
+    {
+      refId: 'A',
+      queryType: '',
+      relativeTimeRange: { from: 600, to: 0 },
+      datasourceUid: 'asdf51',
+      model: {
+        expr: 'up',
+        refId: 'A',
+      },
+    },
+    {
+      refId: 'B',
+      queryType: '',
+      relativeTimeRange: { from: 0, to: 0 },
+      datasourceUid: '-100',
+      model: {
+        conditions: [
+          {
+            evaluator: { params: [1], type: 'lt' },
+            operator: { type: 'and' },
+            query: { params: ['A'] },
+            reducer: { params: [], type: 'last' },
+            type: 'query',
+          },
+        ],
+        datasource: {
+          uid: ExpressionDatasourceUID,
+        },
+        hide: false,
+        refId: 'B',
+        type: 'classic_conditions',
+      },
+    },
+  ],
+};
diff --git a/public/app/features/alerting/unified/utils/query.ts b/public/app/features/alerting/unified/utils/query.ts
new file mode 100644
index 00000000..835c5f33
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/query.ts
@@ -0,0 +1,67 @@
+import { DataQuery, DataSourceInstanceSettings } from '@grafana/data';
+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';
+
+export function alertRuleToQueries(combinedRule: CombinedRule | undefined | null): AlertQuery[] {
+  if (!combinedRule) {
+    return [];
+  }
+  const { namespace, rulerRule } = combinedRule;
+  const { rulesSource } = namespace;
+
+  if (isGrafanaRulesSource(rulesSource)) {
+    if (isGrafanaRulerRule(rulerRule)) {
+      return rulerRule.grafana_alert.data;
+    }
+  }
+
+  if (isCloudRulesSource(rulesSource)) {
+    const model = cloudAlertRuleToModel(rulesSource, combinedRule);
+
+    return [
+      {
+        refId: model.refId,
+        datasourceUid: rulesSource.uid,
+        queryType: '',
+        model,
+        relativeTimeRange: {
+          from: 360,
+          to: 0,
+        },
+      },
+    ];
+  }
+
+  return [];
+}
+
+function cloudAlertRuleToModel(dsSettings: DataSourceInstanceSettings, rule: CombinedRule): DataQuery {
+  const refId = 'A';
+
+  switch (dsSettings.type) {
+    case 'prometheus': {
+      const query: PromQuery = {
+        refId,
+        expr: rule.query,
+      };
+
+      return query;
+    }
+
+    case 'loki': {
+      const query: LokiQuery = {
+        refId,
+        expr: rule.query,
+      };
+
+      return query;
+    }
+
+    default:
+      throw new Error(`Query for datasource type ${dsSettings.type} is currently not supported by cloud alert rules.`);
+  }
+}
diff --git a/public/app/features/alerting/unified/utils/receiver-form.test.ts b/public/app/features/alerting/unified/utils/receiver-form.test.ts
new file mode 100644
index 00000000..49b10b91
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/receiver-form.test.ts
@@ -0,0 +1,44 @@
+import { omitEmptyValues } from './receiver-form';
+
+describe('Receiver form utils', () => {
+  describe('omitEmptyStringValues', () => {
+    it('should recursively omit empty strings but leave other properties in palce', () => {
+      const original = {
+        one: 'two',
+        remove: '',
+        three: 0,
+        four: null,
+        five: [
+          [
+            {
+              foo: 'bar',
+              remove: '',
+              notDefined: undefined,
+            },
+          ],
+          {
+            foo: 'bar',
+            remove: '',
+          },
+        ],
+      };
+
+      const expected = {
+        one: 'two',
+        three: 0,
+        five: [
+          [
+            {
+              foo: 'bar',
+            },
+          ],
+          {
+            foo: 'bar',
+          },
+        ],
+      };
+
+      expect(omitEmptyValues(original)).toEqual(expected);
+    });
+  });
+});
diff --git a/public/app/features/alerting/unified/utils/receiver-form.ts b/public/app/features/alerting/unified/utils/receiver-form.ts
new file mode 100644
index 00000000..801e5bfc
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/receiver-form.ts
@@ -0,0 +1,251 @@
+import { isArray } from 'angular';
+import {
+  AlertManagerCortexConfig,
+  GrafanaManagedReceiverConfig,
+  Receiver,
+  Route,
+} from 'app/plugins/datasource/alertmanager/types';
+import { CloudNotifierType, NotifierDTO, NotifierType } from 'app/types';
+import {
+  CloudChannelConfig,
+  CloudChannelMap,
+  CloudChannelValues,
+  GrafanaChannelMap,
+  GrafanaChannelValues,
+  ReceiverFormValues,
+} from '../types/receiver-form';
+
+export function grafanaReceiverToFormValues(
+  receiver: Receiver,
+  notifiers: NotifierDTO[]
+): [ReceiverFormValues<GrafanaChannelValues>, GrafanaChannelMap] {
+  const channelMap: GrafanaChannelMap = {};
+  // giving each form receiver item a unique id so we can use it to map back to "original" items
+  // as well as to use as `key` prop.
+  // @TODO use uid once backend is fixed to provide it. then we can get rid of the GrafanaChannelMap
+  let idCounter = 1;
+  const values = {
+    name: receiver.name,
+    items:
+      receiver.grafana_managed_receiver_configs?.map((channel) => {
+        const id = String(idCounter++);
+        channelMap[id] = channel;
+        const notifier = notifiers.find(({ type }) => type === channel.type);
+        return grafanaChannelConfigToFormChannelValues(id, channel, notifier);
+      }) ?? [],
+  };
+  return [values, channelMap];
+}
+
+export function cloudReceiverToFormValues(
+  receiver: Receiver,
+  notifiers: NotifierDTO[]
+): [ReceiverFormValues<CloudChannelValues>, CloudChannelMap] {
+  const channelMap: CloudChannelMap = {};
+  // giving each form receiver item a unique id so we can use it to map back to "original" items
+  let idCounter = 1;
+  const items: CloudChannelValues[] = Object.entries(receiver)
+    // filter out only config items that are relevant to cloud
+    .filter(([type]) => type.endsWith('_configs') && type !== 'grafana_managed_receiver_configs')
+    // map property names to cloud notifier types by removing the `_config` suffix
+    .map(([type, configs]): [CloudNotifierType, CloudChannelConfig[]] => [
+      type.replace('_configs', '') as CloudNotifierType,
+      configs as CloudChannelConfig[],
+    ])
+    // convert channel configs to form values
+    .map(([type, configs]) =>
+      configs.map((config) => {
+        const id = String(idCounter++);
+        channelMap[id] = { type, config };
+        const notifier = notifiers.find((notifier) => notifier.type === type);
+        if (!notifier) {
+          throw new Error(`unknown cloud notifier: ${type}`);
+        }
+        return cloudChannelConfigToFormChannelValues(id, type, config);
+      })
+    )
+    .flat();
+  const values = {
+    name: receiver.name,
+    items,
+  };
+  return [values, channelMap];
+}
+
+export function formValuesToGrafanaReceiver(
+  values: ReceiverFormValues<GrafanaChannelValues>,
+  channelMap: GrafanaChannelMap,
+  defaultChannelValues: GrafanaChannelValues
+): Receiver {
+  return {
+    name: values.name,
+    grafana_managed_receiver_configs: (values.items ?? []).map((channelValues) => {
+      const existing: GrafanaManagedReceiverConfig | undefined = channelMap[channelValues.__id];
+      return formChannelValuesToGrafanaChannelConfig(channelValues, defaultChannelValues, values.name, existing);
+    }),
+  };
+}
+
+export function formValuesToCloudReceiver(
+  values: ReceiverFormValues<CloudChannelValues>,
+  defaults: CloudChannelValues
+): Receiver {
+  const recv: Receiver = {
+    name: values.name,
+  };
+  values.items.forEach(({ __id, type, settings, sendResolved }) => {
+    const channel = omitEmptyValues({
+      ...settings,
+      send_resolved: sendResolved ?? defaults.sendResolved,
+    });
+
+    const configsKey = `${type}_configs`;
+    if (!recv[configsKey]) {
+      recv[configsKey] = [channel];
+    } else {
+      (recv[configsKey] as unknown[]).push(channel);
+    }
+  });
+  return recv;
+}
+
+// will add new receiver, or replace exisitng one
+export function updateConfigWithReceiver(
+  config: AlertManagerCortexConfig,
+  receiver: Receiver,
+  replaceReceiverName?: string
+): AlertManagerCortexConfig {
+  const oldReceivers = config.alertmanager_config.receivers ?? [];
+
+  // sanity check that name is not duplicated
+  if (receiver.name !== replaceReceiverName && !!oldReceivers.find(({ name }) => name === receiver.name)) {
+    throw new Error(`Duplicate receiver name ${receiver.name}`);
+  }
+
+  // sanity check that existing receiver exists
+  if (replaceReceiverName && !oldReceivers.find(({ name }) => name === replaceReceiverName)) {
+    throw new Error(`Expected receiver ${replaceReceiverName} to exist, but did not find it in the config`);
+  }
+
+  const updated: AlertManagerCortexConfig = {
+    ...config,
+    alertmanager_config: {
+      // @todo rename receiver on routes as necessary
+      ...config.alertmanager_config,
+      receivers: replaceReceiverName
+        ? oldReceivers.map((existingReceiver) =>
+            existingReceiver.name === replaceReceiverName ? receiver : existingReceiver
+          )
+        : [...oldReceivers, receiver],
+    },
+  };
+
+  // if receiver was renamed, rename it in routes as well
+  if (updated.alertmanager_config.route && replaceReceiverName && receiver.name !== replaceReceiverName) {
+    updated.alertmanager_config.route = renameReceiverInRoute(
+      updated.alertmanager_config.route,
+      replaceReceiverName,
+      receiver.name
+    );
+  }
+
+  return updated;
+}
+
+function renameReceiverInRoute(route: Route, oldName: string, newName: string) {
+  const updated: Route = {
+    ...route,
+  };
+  if (updated.receiver === oldName) {
+    updated.receiver = newName;
+  }
+  if (updated.routes) {
+    updated.routes = updated.routes.map((route) => renameReceiverInRoute(route, oldName, newName));
+  }
+  return updated;
+}
+
+function cloudChannelConfigToFormChannelValues(
+  id: string,
+  type: CloudNotifierType,
+  channel: CloudChannelConfig
+): CloudChannelValues {
+  return {
+    __id: id,
+    type,
+    settings: {
+      ...channel,
+    },
+    secureFields: {},
+    secureSettings: {},
+    sendResolved: channel.send_resolved,
+  };
+}
+
+function grafanaChannelConfigToFormChannelValues(
+  id: string,
+  channel: GrafanaManagedReceiverConfig,
+  notifier?: NotifierDTO
+): GrafanaChannelValues {
+  const values: GrafanaChannelValues = {
+    __id: id,
+    type: channel.type as NotifierType,
+    secureSettings: {},
+    settings: { ...channel.settings },
+    secureFields: { ...channel.secureFields },
+    disableResolveMessage: channel.disableResolveMessage,
+  };
+
+  // work around https://github.com/grafana/alerting-squad/issues/100
+  notifier?.options.forEach((option) => {
+    if (option.secure && values.settings[option.propertyName]) {
+      delete values.settings[option.propertyName];
+      values.secureFields[option.propertyName] = true;
+    }
+  });
+
+  return values;
+}
+
+export function formChannelValuesToGrafanaChannelConfig(
+  values: GrafanaChannelValues,
+  defaults: GrafanaChannelValues,
+  name: string,
+  existing?: GrafanaManagedReceiverConfig
+): GrafanaManagedReceiverConfig {
+  const channel: GrafanaManagedReceiverConfig = {
+    settings: omitEmptyValues({
+      ...(existing && existing.type === values.type ? existing.settings ?? {} : {}),
+      ...(values.settings ?? {}),
+    }),
+    secureSettings: values.secureSettings ?? {},
+    type: values.type,
+    name,
+    disableResolveMessage:
+      values.disableResolveMessage ?? existing?.disableResolveMessage ?? defaults.disableResolveMessage,
+  };
+  if (existing) {
+    channel.uid = existing.uid;
+  }
+  return channel;
+}
+
+// will remove properties that have empty ('', null, undefined) object properties.
+// traverses nested objects and arrays as well. in place, mutates the object.
+// this is needed because form will submit empty string for not filled in fields,
+// but for cloud alertmanager receiver config to use global default value the property must be omitted entirely
+// this isn't a perfect solution though. No way for user to intentionally provide an empty string. Will need rethinking later
+export function omitEmptyValues<T>(obj: T): T {
+  if (isArray(obj)) {
+    obj.forEach(omitEmptyValues);
+  } else if (typeof obj === 'object' && obj !== null) {
+    Object.entries(obj).forEach(([key, value]) => {
+      if (value === '' || value === null || value === undefined) {
+        delete (obj as any)[key];
+      } else {
+        omitEmptyValues(value);
+      }
+    });
+  }
+  return obj;
+}
diff --git a/public/app/features/alerting/unified/utils/receivers.ts b/public/app/features/alerting/unified/utils/receivers.ts
new file mode 100644
index 00000000..fbde0d53
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/receivers.ts
@@ -0,0 +1,45 @@
+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 }
+
+type NotifierTypeCounts = Record<string, number>; // name : count
+
+export function extractNotifierTypeCounts(receiver: Receiver, grafanaNotifiers: NotifierDTO[]): NotifierTypeCounts {
+  if (receiver['grafana_managed_receiver_configs']) {
+    return getGrafanaNotifierTypeCounts(receiver.grafana_managed_receiver_configs ?? [], grafanaNotifiers);
+  }
+  return getCortexAlertManagerNotifierTypeCounts(receiver);
+}
+
+function getCortexAlertManagerNotifierTypeCounts(receiver: Receiver): NotifierTypeCounts {
+  return Object.entries(receiver)
+    .filter(([key]) => key !== 'grafana_managed_receiver_configs' && key.endsWith('_configs')) // filter out only properties that are alertmanager notifier
+    .filter(([_, value]) => Array.isArray(value) && !!value.length) // check that there are actually notifiers of this type configured
+    .reduce<NotifierTypeCounts>((acc, [key, value]) => {
+      const type = key.replace('_configs', ''); // remove the `_config` part from the key, making it intto a notifier name
+      const name = receiverTypeNames[type] ?? capitalize(type);
+      return {
+        ...acc,
+        [name]: (acc[name] ?? 0) + (Array.isArray(value) ? value.length : 1),
+      };
+    }, {});
+}
+
+function getGrafanaNotifierTypeCounts(
+  configs: GrafanaManagedReceiverConfig[],
+  grafanaNotifiers: NotifierDTO[]
+): NotifierTypeCounts {
+  return configs
+    .map((recv) => recv.type) // extract types from config
+    .map((type) => grafanaNotifiers.find((r) => r.type === type)?.name ?? capitalize(type)) // get readable name from notifier cofnig, or if not available, just capitalize
+    .reduce<NotifierTypeCounts>(
+      (acc, type) => ({
+        ...acc,
+        [type]: (acc[type] ?? 0) + 1,
+      }),
+      {}
+    );
+}
diff --git a/public/app/features/alerting/unified/utils/redux.ts b/public/app/features/alerting/unified/utils/redux.ts
new file mode 100644
index 00000000..b2c50b26
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/redux.ts
@@ -0,0 +1,163 @@
+import { isArray } from 'angular';
+import { AsyncThunk, createSlice, Draft, isAsyncThunkAction, PayloadAction, SerializedError } from '@reduxjs/toolkit';
+import { FetchError } from '@grafana/runtime';
+import { AppEvents } from '@grafana/data';
+
+import { appEvents } from 'app/core/core';
+
+export interface AsyncRequestState<T> {
+  result?: T;
+  loading: boolean;
+  error?: SerializedError;
+  dispatched: boolean;
+  requestId?: string;
+}
+
+export const initialAsyncRequestState: Pick<
+  AsyncRequestState<undefined>,
+  'loading' | 'dispatched' | 'result' | 'error'
+> = Object.freeze({
+  loading: false,
+  result: undefined,
+  error: undefined,
+  dispatched: false,
+});
+
+export type AsyncRequestMapSlice<T> = Record<string, AsyncRequestState<T>>;
+
+export type AsyncRequestAction<T> = PayloadAction<Draft<T>, string, any, any>;
+
+function requestStateReducer<T, ThunkArg = void, ThunkApiConfig = {}>(
+  asyncThunk: AsyncThunk<T, ThunkArg, ThunkApiConfig>,
+  state: Draft<AsyncRequestState<T>> = initialAsyncRequestState,
+  action: AsyncRequestAction<T>
+): Draft<AsyncRequestState<T>> {
+  if (asyncThunk.pending.match(action)) {
+    return {
+      result: state.result,
+      loading: true,
+      error: state.error,
+      dispatched: true,
+      requestId: action.meta.requestId,
+    };
+  } else if (asyncThunk.fulfilled.match(action)) {
+    if (state.requestId === undefined || state.requestId === action.meta.requestId) {
+      return {
+        ...state,
+        result: action.payload,
+        loading: false,
+        error: undefined,
+      };
+    }
+  } else if (asyncThunk.rejected.match(action)) {
+    if (state.requestId === action.meta.requestId) {
+      return {
+        ...state,
+        loading: false,
+        error: action.error,
+      };
+    }
+  }
+  return state;
+}
+
+/*
+ * createAsyncSlice creates a slice based on a given async action, exposing it's state.
+ * takes care to only use state of the latest invocation of the action if there are several in flight.
+ */
+export function createAsyncSlice<T, ThunkArg = void, ThunkApiConfig = {}>(
+  name: string,
+  asyncThunk: AsyncThunk<T, ThunkArg, ThunkApiConfig>
+) {
+  return createSlice({
+    name,
+    initialState: initialAsyncRequestState as AsyncRequestState<T>,
+    reducers: {},
+    extraReducers: (builder) =>
+      builder.addDefaultCase((state, action) =>
+        requestStateReducer(asyncThunk, state, (action as unknown) as AsyncRequestAction<T>)
+      ),
+  });
+}
+
+/*
+ * createAsyncMapSlice creates a slice based on a given async action exposing a map of request states.
+ * separate requests are uniquely indentified by result of provided getEntityId function
+ * takes care to only use state of the latest invocation of the action if there are several in flight.
+ */
+export function createAsyncMapSlice<T, ThunkArg = void, ThunkApiConfig = {}>(
+  name: string,
+  asyncThunk: AsyncThunk<T, ThunkArg, ThunkApiConfig>,
+  getEntityId: (arg: ThunkArg) => string
+) {
+  return createSlice({
+    name,
+    initialState: {} as AsyncRequestMapSlice<T>,
+    reducers: {},
+    extraReducers: (builder) =>
+      builder.addDefaultCase((state, action) => {
+        if (isAsyncThunkAction(asyncThunk)(action)) {
+          const asyncAction = (action as unknown) as AsyncRequestAction<T>;
+          const entityId = getEntityId(asyncAction.meta.arg);
+          return {
+            ...state,
+            [entityId]: requestStateReducer(asyncThunk, state[entityId], asyncAction),
+          };
+        }
+        return state;
+      }),
+  });
+}
+
+// rethrow promise error in redux serialized format
+export function withSerializedError<T>(p: Promise<T>): Promise<T> {
+  return p.catch((e) => {
+    const err: SerializedError = {
+      message: messageFromError(e),
+      code: e.statusCode,
+    };
+    throw err;
+  });
+}
+
+export function withAppEvents<T>(
+  p: Promise<T>,
+  options: { successMessage?: string; errorMessage?: string }
+): Promise<T> {
+  return p
+    .then((v) => {
+      if (options.successMessage) {
+        appEvents.emit(AppEvents.alertSuccess, [options.successMessage]);
+      }
+      return v;
+    })
+    .catch((e) => {
+      const msg = messageFromError(e);
+      appEvents.emit(AppEvents.alertError, [`${options.errorMessage ?? 'Error'}: ${msg}`]);
+      throw e;
+    });
+}
+
+export function isFetchError(e: unknown): e is FetchError {
+  return typeof e === 'object' && e !== null && 'status' in e && 'data' in e;
+}
+
+export function messageFromError(e: Error | FetchError | SerializedError): string {
+  if (isFetchError(e)) {
+    if (e.data?.message) {
+      let msg = e.data?.message;
+      if (typeof e.data?.error === 'string') {
+        msg += `; ${e.data.error}`;
+      }
+      return msg;
+    } else if (isArray(e.data) && e.data.length && e.data[0]?.message) {
+      return e.data
+        .map((d) => d?.message)
+        .filter((m) => !!m)
+        .join(' ');
+    } else if (e.statusText) {
+      return e.statusText;
+    }
+  }
+  return (e as Error)?.message || String(e);
+}
diff --git a/public/app/features/alerting/unified/utils/rule-form.ts b/public/app/features/alerting/unified/utils/rule-form.ts
new file mode 100644
index 00000000..bf9326f2
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/rule-form.ts
@@ -0,0 +1,352 @@
+import {
+  DataQuery,
+  rangeUtil,
+  RelativeTimeRange,
+  ScopedVars,
+  getDefaultRelativeTimeRange,
+  TimeRange,
+  IntervalValues,
+  DataSourceRef,
+} from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
+import { contextSrv } from 'app/core/services/context_srv';
+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 {
+  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 { 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({
+    name: '',
+    labels: [{ key: '', value: '' }],
+    annotations: [
+      { key: Annotation.summary, value: '' },
+      { key: Annotation.description, value: '' },
+      { key: Annotation.runbookURL, value: '' },
+    ],
+    dataSourceName: null,
+    type: !contextSrv.isEditor ? RuleFormType.grafana : undefined, // viewers can't create prom alerts
+
+    // grafana
+    folder: null,
+    queries: [],
+    condition: '',
+    noDataState: GrafanaAlertStateDecision.NoData,
+    execErrState: GrafanaAlertStateDecision.Alerting,
+    evaluateEvery: '1m',
+    evaluateFor: '5m',
+
+    // cortex / loki
+    group: '',
+    namespace: '',
+    expression: '',
+    forTime: 1,
+    forTimeUnit: 'm',
+  });
+
+export function formValuesToRulerRuleDTO(values: RuleFormValues): RulerRuleDTO {
+  const { name, expression, forTime, forTimeUnit, type } = values;
+  if (type === RuleFormType.cloudAlerting) {
+    return {
+      alert: name,
+      for: `${forTime}${forTimeUnit}`,
+      annotations: arrayToRecord(values.annotations || []),
+      labels: arrayToRecord(values.labels || []),
+      expr: expression,
+    };
+  } else if (type === RuleFormType.cloudRecording) {
+    return {
+      record: name,
+      labels: arrayToRecord(values.labels || []),
+      expr: expression,
+    };
+  }
+  throw new Error(`unexpected rule type: ${type}`);
+}
+
+function listifyLabelsOrAnnotations(item: Labels | Annotations | undefined): Array<{ key: string; value: string }> {
+  return [...recordToArray(item || {}), { key: '', value: '' }];
+}
+
+export function formValuesToRulerGrafanaRuleDTO(values: RuleFormValues): PostableRuleGrafanaRuleDTO {
+  const { name, condition, noDataState, execErrState, evaluateFor, queries } = values;
+  if (condition) {
+    return {
+      grafana_alert: {
+        title: name,
+        condition,
+        no_data_state: noDataState,
+        exec_err_state: execErrState,
+        data: queries,
+      },
+      for: evaluateFor,
+      annotations: arrayToRecord(values.annotations || []),
+      labels: arrayToRecord(values.labels || []),
+    };
+  }
+  throw new Error('Cannot create rule without specifying alert condition');
+}
+
+export function rulerRuleToFormValues(ruleWithLocation: RuleWithLocation): RuleFormValues {
+  const { ruleSourceName, namespace, group, rule } = ruleWithLocation;
+
+  const defaultFormValues = getDefaultFormValues();
+  if (isGrafanaRulesSource(ruleSourceName)) {
+    if (isGrafanaRulerRule(rule)) {
+      const ga = rule.grafana_alert;
+      return {
+        ...defaultFormValues,
+        name: ga.title,
+        type: RuleFormType.grafana,
+        evaluateFor: rule.for || '0',
+        evaluateEvery: group.interval || defaultFormValues.evaluateEvery,
+        noDataState: ga.no_data_state,
+        execErrState: ga.exec_err_state,
+        queries: ga.data,
+        condition: ga.condition,
+        annotations: listifyLabelsOrAnnotations(rule.annotations),
+        labels: listifyLabelsOrAnnotations(rule.labels),
+        folder: { title: namespace, id: ga.namespace_id },
+      };
+    } else {
+      throw new Error('Unexpected type of rule for grafana rules source');
+    }
+  } else {
+    if (isAlertingRulerRule(rule)) {
+      const [forTime, forTimeUnit] = rule.for
+        ? parseInterval(rule.for)
+        : [defaultFormValues.forTime, defaultFormValues.forTimeUnit];
+      return {
+        ...defaultFormValues,
+        name: rule.alert,
+        type: RuleFormType.cloudAlerting,
+        dataSourceName: ruleSourceName,
+        namespace,
+        group: group.name,
+        expression: rule.expr,
+        forTime,
+        forTimeUnit,
+        annotations: listifyLabelsOrAnnotations(rule.annotations),
+        labels: listifyLabelsOrAnnotations(rule.labels),
+      };
+    } else if (isRecordingRulerRule(rule)) {
+      return {
+        ...defaultFormValues,
+        name: rule.record,
+        type: RuleFormType.cloudRecording,
+        dataSourceName: ruleSourceName,
+        namespace,
+        group: group.name,
+        expression: rule.expr,
+        labels: listifyLabelsOrAnnotations(rule.labels),
+      };
+    } else {
+      throw new Error('Unexpected type of rule for cloud rules source');
+    }
+  }
+}
+
+export const getDefaultQueries = (): AlertQuery[] => {
+  const dataSource = getDataSourceSrv().getInstanceSettings('default');
+
+  if (!dataSource) {
+    return [getDefaultExpression('A')];
+  }
+  const relativeTimeRange = getDefaultRelativeTimeRange();
+
+  return [
+    {
+      refId: 'A',
+      datasourceUid: dataSource.uid,
+      queryType: '',
+      relativeTimeRange,
+      model: {
+        refId: 'A',
+        hide: false,
+      },
+    },
+    getDefaultExpression('B'),
+  ];
+};
+
+const getDefaultExpression = (refId: string): AlertQuery => {
+  const model: ExpressionQuery = {
+    refId,
+    hide: false,
+    type: ExpressionQueryType.classic,
+    datasource: {
+      uid: ExpressionDatasourceUID,
+      type: ExpressionDatasourceRef.type,
+    },
+    conditions: [
+      {
+        type: 'query',
+        evaluator: {
+          params: [3],
+          type: EvalFunction.IsAbove,
+        },
+        operator: {
+          type: 'and',
+        },
+        query: {
+          params: ['A'],
+        },
+        reducer: {
+          params: [],
+          type: 'last',
+        },
+      },
+    ],
+  };
+
+  return {
+    refId,
+    datasourceUid: ExpressionDatasourceUID,
+    queryType: '',
+    model,
+  };
+};
+
+const dataQueriesToGrafanaQueries = async (
+  queries: DataQuery[],
+  relativeTimeRange: RelativeTimeRange,
+  scopedVars: ScopedVars | {},
+  panelDataSourceRef?: DataSourceRef,
+  maxDataPoints?: number,
+  minInterval?: string
+): Promise<AlertQuery[]> => {
+  const result: AlertQuery[] = [];
+
+  for (const target of queries) {
+    const datasource = await getDataSourceSrv().get(target.datasource?.uid ? target.datasource : panelDataSourceRef);
+    const dsRef = { uid: datasource.uid, type: datasource.type };
+
+    const range = rangeUtil.relativeToTimeRange(relativeTimeRange);
+    const { interval, intervalMs } = getIntervals(range, minInterval ?? datasource.interval, maxDataPoints);
+    const queryVariables = {
+      __interval: { text: interval, value: interval },
+      __interval_ms: { text: intervalMs, value: intervalMs },
+      ...scopedVars,
+    };
+
+    const interpolatedTarget = datasource.interpolateVariablesInQueries
+      ? await datasource.interpolateVariablesInQueries([target], queryVariables)[0]
+      : target;
+
+    // expressions
+    if (dsRef.uid === ExpressionDatasourceUID) {
+      const newQuery: AlertQuery = {
+        refId: interpolatedTarget.refId,
+        queryType: '',
+        relativeTimeRange,
+        datasourceUid: ExpressionDatasourceUID,
+        model: interpolatedTarget,
+      };
+      result.push(newQuery);
+      // queries
+    } else {
+      const datasourceSettings = getDataSourceSrv().getInstanceSettings(dsRef);
+      if (datasourceSettings && datasourceSettings.meta.alerting) {
+        const newQuery: AlertQuery = {
+          refId: interpolatedTarget.refId,
+          queryType: interpolatedTarget.queryType ?? '',
+          relativeTimeRange,
+          datasourceUid: datasourceSettings.uid,
+          model: {
+            ...interpolatedTarget,
+            maxDataPoints,
+            intervalMs,
+          },
+        };
+        result.push(newQuery);
+      }
+    }
+  }
+  return result;
+};
+
+export const panelToRuleFormValues = async (
+  panel: PanelModel,
+  dashboard: DashboardModel
+): Promise<Partial<RuleFormValues> | undefined> => {
+  const { targets } = panel;
+  if (!panel.id || !dashboard.uid) {
+    return undefined;
+  }
+
+  const relativeTimeRange = rangeUtil.timeRangeToRelative(rangeUtil.convertRawToRange(dashboard.time));
+  const queries = await dataQueriesToGrafanaQueries(
+    targets,
+    relativeTimeRange,
+    panel.scopedVars || {},
+    panel.datasource ?? undefined,
+    panel.maxDataPoints ?? undefined,
+    panel.interval ?? undefined
+  );
+  // if no alerting capable queries are found, can't create a rule
+  if (!queries.length || !queries.find((query) => query.datasourceUid !== ExpressionDatasourceUID)) {
+    return undefined;
+  }
+
+  if (!queries.find((query) => query.datasourceUid === ExpressionDatasourceUID)) {
+    queries.push(getDefaultExpression(getNextRefIdChar(queries.map((query) => query.model))));
+  }
+
+  const { folderId, folderTitle } = dashboard.meta;
+
+  const formValues = {
+    type: RuleFormType.grafana,
+    folder:
+      folderId && folderTitle
+        ? {
+            id: folderId,
+            title: folderTitle,
+          }
+        : undefined,
+    queries,
+    name: panel.title,
+    condition: queries[queries.length - 1].refId,
+    annotations: [
+      {
+        key: Annotation.dashboardUID,
+        value: dashboard.uid,
+      },
+      {
+        key: Annotation.panelID,
+        value: String(panel.id),
+      },
+    ],
+  };
+  return formValues;
+};
+
+export function getIntervals(range: TimeRange, lowLimit?: string, resolution?: number): IntervalValues {
+  if (!resolution) {
+    if (lowLimit && rangeUtil.intervalToMs(lowLimit) > 1000) {
+      return {
+        interval: lowLimit,
+        intervalMs: rangeUtil.intervalToMs(lowLimit),
+      };
+    }
+    return { interval: '1s', intervalMs: 1000 };
+  }
+
+  return rangeUtil.calculateInterval(range, resolution, lowLimit);
+}
diff --git a/public/app/features/alerting/unified/utils/rule-id.ts b/public/app/features/alerting/unified/utils/rule-id.ts
new file mode 100644
index 00000000..6b8d34f8
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/rule-id.ts
@@ -0,0 +1,218 @@
+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,
+  isAlertingRulerRule,
+  isCloudRuleIdentifier,
+  isGrafanaRuleIdentifier,
+  isGrafanaRulerRule,
+  isPrometheusRuleIdentifier,
+  isRecordingRule,
+  isRecordingRulerRule,
+} from './rules';
+
+export function fromRulerRule(
+  ruleSourceName: string,
+  namespace: string,
+  groupName: string,
+  rule: RulerRuleDTO
+): RuleIdentifier {
+  if (isGrafanaRulerRule(rule)) {
+    return { uid: rule.grafana_alert.uid! };
+  }
+  return {
+    ruleSourceName,
+    namespace,
+    groupName,
+    rulerRuleHash: hashRulerRule(rule),
+  };
+}
+
+export function fromRule(ruleSourceName: string, namespace: string, groupName: string, rule: Rule): RuleIdentifier {
+  return {
+    ruleSourceName,
+    namespace,
+    groupName,
+    ruleHash: hashRule(rule),
+  };
+}
+
+export function fromCombinedRule(ruleSourceName: string, rule: CombinedRule): RuleIdentifier {
+  const namespaceName = rule.namespace.name;
+  const groupName = rule.group.name;
+
+  if (rule.rulerRule) {
+    return fromRulerRule(ruleSourceName, namespaceName, groupName, rule.rulerRule);
+  }
+
+  if (rule.promRule) {
+    return fromRule(ruleSourceName, namespaceName, groupName, rule.promRule);
+  }
+
+  throw new Error('Could not create an id for a rule that is missing both `rulerRule` and `promRule`.');
+}
+
+export function fromRuleWithLocation(rule: RuleWithLocation): RuleIdentifier {
+  return fromRulerRule(rule.ruleSourceName, rule.namespace, rule.group.name, rule.rule);
+}
+
+export function equal(a: RuleIdentifier, b: RuleIdentifier) {
+  if (isGrafanaRuleIdentifier(a) && isGrafanaRuleIdentifier(b)) {
+    return a.uid === b.uid;
+  }
+
+  if (isCloudRuleIdentifier(a) && isCloudRuleIdentifier(b)) {
+    return (
+      a.groupName === b.groupName &&
+      a.namespace === b.namespace &&
+      a.rulerRuleHash === b.rulerRuleHash &&
+      a.ruleSourceName === b.ruleSourceName
+    );
+  }
+
+  if (isPrometheusRuleIdentifier(a) && isPrometheusRuleIdentifier(b)) {
+    return (
+      a.groupName === b.groupName &&
+      a.namespace === b.namespace &&
+      a.ruleHash === b.ruleHash &&
+      a.ruleSourceName === b.ruleSourceName
+    );
+  }
+
+  return false;
+}
+
+const cloudRuleIdentifierPrefix = 'cri';
+const prometheusRuleIdentifierPrefix = 'pri';
+
+function escapeDollars(value: string): string {
+  return value.replace(/\$/g, '_DOLLAR_');
+}
+
+function unesacapeDollars(value: string): string {
+  return value.replace(/\_DOLLAR\_/g, '$');
+}
+
+export function parse(value: string, decodeFromUri = false): RuleIdentifier {
+  const source = decodeFromUri ? decodeURIComponent(value) : value;
+  const parts = source.split('$');
+
+  if (parts.length === 1) {
+    return { uid: value };
+  }
+
+  if (parts.length === 5) {
+    const [prefix, ruleSourceName, namespace, groupName, hash] = parts.map(unesacapeDollars);
+
+    if (prefix === cloudRuleIdentifierPrefix) {
+      return { ruleSourceName, namespace, groupName, rulerRuleHash: Number(hash) };
+    }
+
+    if (prefix === prometheusRuleIdentifierPrefix) {
+      return { ruleSourceName, namespace, groupName, ruleHash: Number(hash) };
+    }
+  }
+
+  throw new Error(`Failed to parse rule location: ${value}`);
+}
+
+export function tryParse(value: string | undefined, decodeFromUri = false): RuleIdentifier | undefined {
+  if (!value) {
+    return;
+  }
+
+  try {
+    return parse(value, decodeFromUri);
+  } catch (error) {
+    return;
+  }
+}
+
+export function stringifyIdentifier(identifier: RuleIdentifier): string {
+  if (isGrafanaRuleIdentifier(identifier)) {
+    return identifier.uid;
+  }
+
+  if (isCloudRuleIdentifier(identifier)) {
+    return [
+      cloudRuleIdentifierPrefix,
+      identifier.ruleSourceName,
+      identifier.namespace,
+      identifier.groupName,
+      identifier.rulerRuleHash,
+    ]
+      .map(String)
+      .map(escapeDollars)
+      .join('$');
+  }
+
+  return [
+    prometheusRuleIdentifierPrefix,
+    identifier.ruleSourceName,
+    identifier.namespace,
+    identifier.groupName,
+    identifier.ruleHash,
+  ]
+    .map(String)
+    .map(escapeDollars)
+    .join('$');
+}
+
+function hash(value: string): number {
+  let hash = 0;
+  if (value.length === 0) {
+    return hash;
+  }
+  for (var i = 0; i < value.length; i++) {
+    var char = value.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash;
+}
+
+// this is used to identify lotex rules, as they do not have a unique identifier
+function hashRulerRule(rule: RulerRuleDTO): number {
+  if (isRecordingRulerRule(rule)) {
+    return hash(JSON.stringify([rule.record, rule.expr, hashLabelsOrAnnotations(rule.labels)]));
+  } else if (isAlertingRulerRule(rule)) {
+    return hash(
+      JSON.stringify([
+        rule.alert,
+        rule.expr,
+        hashLabelsOrAnnotations(rule.annotations),
+        hashLabelsOrAnnotations(rule.labels),
+      ])
+    );
+  } else {
+    throw new Error('only recording and alerting ruler rules can be hashed');
+  }
+}
+
+function hashRule(rule: Rule): number {
+  if (isRecordingRule(rule)) {
+    return hash(JSON.stringify([rule.type, rule.query, hashLabelsOrAnnotations(rule.labels)]));
+  }
+
+  if (isAlertingRule(rule)) {
+    return hash(
+      JSON.stringify([
+        rule.type,
+        rule.query,
+        hashLabelsOrAnnotations(rule.annotations),
+        hashLabelsOrAnnotations(rule.labels),
+      ])
+    );
+  }
+
+  throw new Error('only recording and alerting rules can be hashed');
+}
+
+function hashLabelsOrAnnotations(item: Labels | Annotations | undefined): string {
+  return JSON.stringify(Object.entries(item || {}).sort((a, b) => a[0].localeCompare(b[0])));
+}
+
+export function ruleIdentifierToRuleSourceName(identifier: RuleIdentifier): string {
+  return isGrafanaRuleIdentifier(identifier) ? GRAFANA_RULES_SOURCE_NAME : identifier.ruleSourceName;
+}
diff --git a/public/app/features/alerting/unified/utils/rules.ts b/public/app/features/alerting/unified/utils/rules.ts
new file mode 100644
index 00000000..b708cd53
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/rules.ts
@@ -0,0 +1,118 @@
+import { AlertState } from '@grafana/data';
+import {
+  GrafanaAlertState,
+  PromAlertingRuleState,
+  PromRuleType,
+  RulerAlertingRuleDTO,
+  RulerGrafanaRuleDTO,
+  RulerRecordingRuleDTO,
+  RulerRuleDTO,
+} from 'app/types/unified-alerting-dto';
+import {
+  Alert,
+  AlertingRule,
+  CloudRuleIdentifier,
+  GrafanaRuleIdentifier,
+  PrometheusRuleIdentifier,
+  PromRuleWithLocation,
+  RecordingRule,
+  Rule,
+  RuleIdentifier,
+  RuleNamespace,
+} from 'app/types/unified-alerting';
+import { AsyncRequestState } from './redux';
+import { RULER_NOT_SUPPORTED_MSG } from './constants';
+import { capitalize } from 'lodash';
+import { State } from '../components/StateTag';
+
+export function isAlertingRule(rule: Rule | undefined): rule is AlertingRule {
+  return typeof rule === 'object' && rule.type === PromRuleType.Alerting;
+}
+
+export function isRecordingRule(rule: Rule): rule is RecordingRule {
+  return rule.type === PromRuleType.Recording;
+}
+
+export function isAlertingRulerRule(rule?: RulerRuleDTO): rule is RulerAlertingRuleDTO {
+  return typeof rule === 'object' && 'alert' in rule;
+}
+
+export function isRecordingRulerRule(rule?: RulerRuleDTO): rule is RulerRecordingRuleDTO {
+  return typeof rule === 'object' && 'record' in rule;
+}
+
+export function isGrafanaRulerRule(rule?: RulerRuleDTO): rule is RulerGrafanaRuleDTO {
+  return typeof rule === 'object' && 'grafana_alert' in rule;
+}
+
+export function alertInstanceKey(alert: Alert): string {
+  return JSON.stringify(alert.labels);
+}
+
+export function isRulerNotSupportedResponse(resp: AsyncRequestState<any>) {
+  return resp.error && resp.error?.message === RULER_NOT_SUPPORTED_MSG;
+}
+
+export function isGrafanaRuleIdentifier(identifier: RuleIdentifier): identifier is GrafanaRuleIdentifier {
+  return 'uid' in identifier;
+}
+
+export function isCloudRuleIdentifier(identifier: RuleIdentifier): identifier is CloudRuleIdentifier {
+  return 'rulerRuleHash' in identifier;
+}
+
+export function isPrometheusRuleIdentifier(identifier: RuleIdentifier): identifier is PrometheusRuleIdentifier {
+  return 'ruleHash' in identifier;
+}
+
+export function alertStateToReadable(state: PromAlertingRuleState | GrafanaAlertState | AlertState): string {
+  if (state === PromAlertingRuleState.Inactive) {
+    return 'Normal';
+  }
+  return capitalize(state);
+}
+
+export const flattenRules = (rules: RuleNamespace[]) => {
+  return rules.reduce<PromRuleWithLocation[]>((acc, { dataSourceName, name: namespaceName, groups }) => {
+    groups.forEach(({ name: groupName, rules }) => {
+      rules.forEach((rule) => {
+        if (isAlertingRule(rule)) {
+          acc.push({ dataSourceName, namespaceName, groupName, rule });
+        }
+      });
+    });
+    return acc;
+  }, []);
+};
+
+export const alertStateToState: Record<PromAlertingRuleState | GrafanaAlertState | AlertState, State> = {
+  [PromAlertingRuleState.Inactive]: 'good',
+  [PromAlertingRuleState.Firing]: 'bad',
+  [PromAlertingRuleState.Pending]: 'warning',
+  [GrafanaAlertState.Alerting]: 'bad',
+  [GrafanaAlertState.Error]: 'bad',
+  [GrafanaAlertState.NoData]: 'info',
+  [GrafanaAlertState.Normal]: 'good',
+  [GrafanaAlertState.Pending]: 'warning',
+  [AlertState.NoData]: 'info',
+  [AlertState.Paused]: 'warning',
+  [AlertState.Alerting]: 'bad',
+  [AlertState.OK]: 'good',
+  [AlertState.Pending]: 'warning',
+  [AlertState.Unknown]: 'info',
+};
+
+export function getFirstActiveAt(promRule: AlertingRule) {
+  if (!promRule.alerts) {
+    return null;
+  }
+  return promRule.alerts.reduce((prev, alert) => {
+    if (alert.activeAt && alert.state !== GrafanaAlertState.Normal) {
+      const activeAt = new Date(alert.activeAt);
+      if (prev === null || prev.getTime() > activeAt.getTime()) {
+        return activeAt;
+      }
+    }
+    return prev;
+  }, null as Date | null);
+}
diff --git a/public/app/features/alerting/unified/utils/templates.ts b/public/app/features/alerting/unified/utils/templates.ts
new file mode 100644
index 00000000..30aabae1
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/templates.ts
@@ -0,0 +1,14 @@
+export function ensureDefine(templateName: string, templateContent: string): string {
+  // notification template content must be wrapped in {{ define "name" }} tag,
+  // but this is not obvious because user also has to provide name separately in the form.
+  // so if user does not manually add {{ define }} tag, we do it automatically
+  let content = templateContent.trim();
+  if (!content.match(/\{\{\s*define/)) {
+    const indentedContent = content
+      .split('\n')
+      .map((line) => '  ' + line)
+      .join('\n');
+    content = `{{ define "${templateName}" }}\n${indentedContent}\n{{ end }}`;
+  }
+  return content;
+}
diff --git a/public/app/features/alerting/unified/utils/time.ts b/public/app/features/alerting/unified/utils/time.ts
new file mode 100644
index 00000000..7d2919bc
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/time.ts
@@ -0,0 +1,36 @@
+import { describeInterval } from '@grafana/data/src/datetime/rangeutil';
+import { TimeOptions } from '../types/time';
+
+export function parseInterval(value: string): [number, string] {
+  const match = value.match(/(\d+)(\w+)/);
+  if (match) {
+    return [Number(match[1]), match[2]];
+  }
+  throw new Error(`Invalid interval description: ${value}`);
+}
+
+export function intervalToSeconds(interval: string): number {
+  const { sec, count } = describeInterval(interval);
+  return sec * count;
+}
+
+export const timeOptions = Object.entries(TimeOptions).map(([key, value]) => ({
+  label: key[0].toUpperCase() + key.slice(1),
+  value: value,
+}));
+
+// 1h, 10m and such
+export const positiveDurationValidationPattern = {
+  value: new RegExp(`^\\d+(${Object.values(TimeOptions).join('|')})$`),
+  message: `Must be of format "(number)(unit)" , for example "1m". Available units: ${Object.values(TimeOptions).join(
+    ', '
+  )}`,
+};
+
+// 1h, 10m or 0 (without units)
+export const durationValidationPattern = {
+  value: new RegExp(`^\\d+(${Object.values(TimeOptions).join('|')})|0$`),
+  message: `Must be of format "(number)(unit)", for example "1m", or just "0". Available units: ${Object.values(
+    TimeOptions
+  ).join(', ')}`,
+};
diff --git a/public/app/features/alerting/unified/utils/timeRange.test.ts b/public/app/features/alerting/unified/utils/timeRange.test.ts
new file mode 100644
index 00000000..b3d80a3b
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/timeRange.test.ts
@@ -0,0 +1,204 @@
+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 { AlertQuery } from 'app/types/unified-alerting-dto';
+
+describe('timeRange', () => {
+  describe('getTimeRangeForExpression', () => {
+    describe('classic condition', () => {
+      it('should return referenced query timeRange for classic condition', () => {
+        const expressionQuery: AlertQuery = {
+          refId: 'B',
+          queryType: 'expression',
+          datasourceUid: '-100',
+          model: {
+            queryType: 'query',
+            datasource: '__expr__',
+            refId: 'B',
+            conditions: [{ ...defaultCondition, query: { params: ['A'] } }],
+            type: ExpressionQueryType.classic,
+          } as ExpressionQuery,
+        };
+        const query: AlertQuery = {
+          refId: 'A',
+          relativeTimeRange: { from: 300, to: 0 },
+          queryType: 'query',
+          datasourceUid: 'dsuid',
+          model: { refId: 'A' },
+        };
+        const queries: AlertQuery[] = [query, expressionQuery];
+
+        expect(getTimeRangeForExpression(expressionQuery.model as ExpressionQuery, queries)).toEqual({
+          from: 300,
+          to: 0,
+        });
+      });
+
+      it('should return the min and max time range', () => {
+        const expressionQuery: AlertQuery = {
+          refId: 'C',
+          queryType: 'expression',
+          datasourceUid: '-100',
+          model: {
+            queryType: 'query',
+            datasource: '__expr__',
+            refId: 'C',
+            conditions: [
+              { ...defaultCondition, query: { params: ['A'] } },
+              { ...defaultCondition, query: { params: ['B'] } },
+            ],
+            type: ExpressionQueryType.classic,
+          } as ExpressionQuery,
+        };
+        const queryA: AlertQuery = {
+          refId: 'A',
+          relativeTimeRange: { from: 300, to: 0 },
+          datasourceUid: 'dsuid',
+          model: { refId: 'A' },
+          queryType: 'query',
+        };
+        const queryB: AlertQuery = {
+          refId: 'B',
+          relativeTimeRange: { from: 600, to: 300 },
+          datasourceUid: 'dsuid',
+          model: { refId: 'B' },
+          queryType: 'query',
+        };
+        const queries: AlertQuery[] = [queryA, queryB, expressionQuery];
+
+        expect(getTimeRangeForExpression(expressionQuery.model as ExpressionQuery, queries)).toEqual({
+          from: 600,
+          to: 0,
+        });
+      });
+    });
+  });
+  describe('math', () => {
+    it('should get timerange for referenced query', () => {
+      const expressionQuery: AlertQuery = {
+        refId: 'B',
+        queryType: 'expression',
+        datasourceUid: '-100',
+        model: {
+          queryType: 'query',
+          datasource: '__expr__',
+          refId: 'B',
+          expression: '$A > 10',
+          type: ExpressionQueryType.math,
+        } as ExpressionQuery,
+      };
+
+      const query: AlertQuery = {
+        refId: 'A',
+        datasourceUid: 'dsuid',
+        relativeTimeRange: { from: 300, to: 0 },
+        model: { refId: 'A' },
+        queryType: 'query',
+      };
+
+      expect(getTimeRangeForExpression(expressionQuery.model as ExpressionQuery, [expressionQuery, query]));
+    });
+
+    it('should get time ranges for multiple referenced queries', () => {
+      const expressionQuery: AlertQuery = {
+        refId: 'C',
+        queryType: 'expression',
+        datasourceUid: '-100',
+        model: {
+          queryType: 'query',
+          datasource: '__expr__',
+          refId: 'C',
+          expression: '$A > 10 && $queryB > 20',
+          type: ExpressionQueryType.math,
+        } as ExpressionQuery,
+      };
+
+      const queryA: AlertQuery = {
+        refId: 'A',
+        relativeTimeRange: { from: 300, to: 0 },
+        datasourceUid: 'dsuid',
+        model: { refId: 'A' },
+        queryType: 'query',
+      };
+
+      const queryB: AlertQuery = {
+        refId: 'queryB',
+        relativeTimeRange: { from: 600, to: 300 },
+        datasourceUid: 'dsuid',
+        model: { refId: 'queryB' },
+        queryType: 'query',
+      };
+
+      expect(
+        getTimeRangeForExpression(expressionQuery.model as ExpressionQuery, [expressionQuery, queryA, queryB])
+      ).toEqual({ from: 600, to: 0 });
+    });
+  });
+
+  describe('resample', () => {
+    it('should get referenced timerange for resample expression', () => {
+      const expressionQuery: AlertQuery = {
+        refId: 'B',
+        queryType: 'expression',
+        datasourceUid: '-100',
+        model: {
+          queryType: 'query',
+          datasource: '__expr__',
+          refId: 'B',
+          expression: 'A',
+          type: ExpressionQueryType.resample,
+          window: '10s',
+        } as ExpressionQuery,
+      };
+
+      const queryA: AlertQuery = {
+        refId: 'A',
+        relativeTimeRange: { from: 300, to: 0 },
+        datasourceUid: 'dsuid',
+        model: { refId: 'A' },
+        queryType: 'query',
+      };
+
+      const queries = [queryA, expressionQuery];
+
+      expect(getTimeRangeForExpression(expressionQuery.model as ExpressionQuery, queries)).toEqual({
+        from: 300,
+        to: 0,
+      });
+    });
+  });
+
+  describe('reduce', () => {
+    it('should get referenced timerange for reduce expression', () => {
+      const expressionQuery: AlertQuery = {
+        refId: 'B',
+        queryType: 'expression',
+        datasourceUid: '-100',
+        model: {
+          queryType: 'query',
+          datasource: '__expr__',
+          refId: 'B',
+          expression: 'A',
+          type: ExpressionQueryType.reduce,
+          reducer: ReducerID.max,
+        } as ExpressionQuery,
+      };
+
+      const queryA: AlertQuery = {
+        refId: 'A',
+        relativeTimeRange: { from: 300, to: 0 },
+        datasourceUid: 'dsuid',
+        model: { refId: 'A' },
+        queryType: 'query',
+      };
+
+      const queries = [queryA, expressionQuery];
+
+      expect(getTimeRangeForExpression(expressionQuery.model as ExpressionQuery, queries)).toEqual({
+        from: 300,
+        to: 0,
+      });
+    });
+  });
+});
diff --git a/public/app/features/alerting/unified/utils/timeRange.ts b/public/app/features/alerting/unified/utils/timeRange.ts
new file mode 100644
index 00000000..1e335b4e
--- /dev/null
+++ b/public/app/features/alerting/unified/utils/timeRange.ts
@@ -0,0 +1,76 @@
+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 };
+
+export const getTimeRangeForExpression = (query: ExpressionQuery, queries: AlertQuery[]): RelativeTimeRange => {
+  const referencedRefIds: string[] | undefined = getReferencedIds(query, queries);
+
+  if (!referencedRefIds) {
+    return FALL_BACK_TIME_RANGE;
+  }
+
+  const { from, to } = getTimeRanges(referencedRefIds, queries);
+
+  if (!from.length && !to.length) {
+    return FALL_BACK_TIME_RANGE;
+  }
+
+  return {
+    from: Math.max(...from),
+    to: Math.min(...to),
+  };
+};
+
+const getReferencedIds = (model: ExpressionQuery, queries: AlertQuery[]): string[] | undefined => {
+  switch (model.type) {
+    case ExpressionQueryType.classic:
+      return getReferencedIdsForClassicCondition(model);
+    case ExpressionQueryType.math:
+      return getReferencedIdsForMath(model, queries);
+    case ExpressionQueryType.resample:
+    case ExpressionQueryType.reduce:
+      return getReferencedIdsForReduce(model);
+  }
+};
+
+const getReferencedIdsForClassicCondition = (model: ExpressionQuery) => {
+  return model.conditions?.map((condition) => {
+    return condition.query.params[0];
+  });
+};
+
+const getTimeRanges = (referencedRefIds: string[], queries: AlertQuery[]) => {
+  let from: number[] = [];
+  let to = [FALL_BACK_TIME_RANGE.to];
+  for (const referencedRefIdsKey of referencedRefIds) {
+    const query = queries.find((query) => query.refId === referencedRefIdsKey);
+
+    if (!query || !query.relativeTimeRange) {
+      continue;
+    }
+    from.push(query.relativeTimeRange.from);
+    to.push(query.relativeTimeRange.to);
+  }
+
+  return {
+    from,
+    to,
+  };
+};
+
+const getReferencedIdsForMath = (model: ExpressionQuery, queries: AlertQuery[]) => {
+  return (
+    queries
+      // filter queries of type query and filter expression on if it includes any refIds
+      .filter((q) => q.queryType === 'query' && model.expression?.includes(q.refId))
+      .map((q) => {
+        return q.refId;
+      })
+  );
+};
+
+const getReferencedIdsForReduce = (model: ExpressionQuery) => {
+  return model.expression ? [model.expression] : undefined;
+};
diff --git a/public/app/features/alerting/utils/notificationChannel.test.ts b/public/app/features/alerting/utils/notificationChannel.test.ts
new file mode 100644
index 00000000..1ef70421
--- /dev/null
+++ b/public/app/features/alerting/utils/notificationChannel.test.ts
@@ -0,0 +1,209 @@
+import { transformSubmitData } from './notificationChannels';
+import { NotificationChannelDTO } from '../../../types';
+
+const basicFormData: NotificationChannelDTO = {
+  id: 1,
+  uid: 'pX7fbbHGk',
+  name: 'Pete discord',
+  type: {
+    value: 'discord',
+    label: 'Discord',
+    type: 'discord',
+    name: 'Discord',
+    heading: 'Discord settings',
+    description: 'Sends notifications to Discord',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Message Content',
+        description: 'Mention a group using @ or a user using <@ID> when notifying in a channel',
+        placeholder: '',
+        propertyName: 'content',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Webhook URL',
+        description: '',
+        placeholder: 'Discord webhook URL',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+    ],
+    typeName: 'discord',
+  },
+  isDefault: false,
+  sendReminder: false,
+  disableResolveMessage: false,
+  frequency: '',
+  created: '2020-08-24T10:46:43+02:00',
+  updated: '2020-09-02T14:08:27+02:00',
+  settings: {
+    url: 'https://discordapp.com/api/webhooks/',
+    uploadImage: true,
+    content: '',
+    autoResolve: true,
+    httpMethod: 'POST',
+    severity: 'critical',
+  },
+  secureFields: {},
+  secureSettings: {},
+};
+
+const selectFormData: NotificationChannelDTO = {
+  id: 23,
+  uid: 'BxEN9rNGk',
+  name: 'Webhook',
+  type: {
+    value: 'webhook',
+    label: 'webhook',
+    type: 'webhook',
+    name: 'webhook',
+    heading: 'Webhook settings',
+    description: 'Sends HTTP POST request to a URL',
+    info: '',
+    options: [
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Url',
+        description: '',
+        placeholder: '',
+        propertyName: 'url',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: true,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'select',
+        inputType: '',
+        label: 'Http Method',
+        description: '',
+        placeholder: '',
+        propertyName: 'httpMethod',
+        selectOptions: [
+          { value: 'POST', label: 'POST' },
+          { value: 'PUT', label: 'PUT' },
+        ],
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'text',
+        label: 'Username',
+        description: '',
+        placeholder: '',
+        propertyName: 'username',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: false,
+      },
+      {
+        element: 'input',
+        inputType: 'password',
+        label: 'Password',
+        description: '',
+        placeholder: '',
+        propertyName: 'password',
+        selectOptions: null,
+        showWhen: { field: '', is: '' },
+        required: false,
+        validationRule: '',
+        secure: true,
+      },
+    ],
+    typeName: 'webhook',
+  },
+  isDefault: false,
+  sendReminder: false,
+  disableResolveMessage: false,
+  frequency: '',
+  created: '2020-08-28T10:47:37+02:00',
+  updated: '2020-09-03T09:37:21+02:00',
+  settings: {
+    autoResolve: true,
+    httpMethod: 'POST',
+    password: '',
+    severity: 'critical',
+    uploadImage: true,
+    url: 'http://asdf',
+    username: 'asdf',
+  },
+  secureFields: { password: true },
+  secureSettings: {},
+};
+
+describe('Transform submit data', () => {
+  it('basic transform', () => {
+    const expected = {
+      id: 1,
+      name: 'Pete discord',
+      type: 'discord',
+      sendReminder: false,
+      disableResolveMessage: false,
+      frequency: '15m',
+      settings: {
+        uploadImage: true,
+        autoResolve: true,
+        httpMethod: 'POST',
+        severity: 'critical',
+        url: 'https://discordapp.com/api/webhooks/',
+        content: '',
+      },
+      secureSettings: {},
+      secureFields: {},
+      isDefault: false,
+      uid: 'pX7fbbHGk',
+      created: '2020-08-24T10:46:43+02:00',
+      updated: '2020-09-02T14:08:27+02:00',
+    };
+
+    expect(transformSubmitData(basicFormData)).toEqual(expected);
+  });
+
+  it('should transform form data with selects', () => {
+    const expected = {
+      created: '2020-08-28T10:47:37+02:00',
+      disableResolveMessage: false,
+      frequency: '15m',
+      id: 23,
+      isDefault: false,
+      name: 'Webhook',
+      secureFields: { password: true },
+      secureSettings: {},
+      sendReminder: false,
+      settings: {
+        autoResolve: true,
+        httpMethod: 'POST',
+        password: '',
+        severity: 'critical',
+        uploadImage: true,
+        url: 'http://asdf',
+        username: 'asdf',
+      },
+      type: 'webhook',
+      uid: 'BxEN9rNGk',
+      updated: '2020-09-03T09:37:21+02:00',
+    };
+
+    expect(transformSubmitData(selectFormData)).toEqual(expected);
+  });
+});
diff --git a/public/app/features/alerting/utils/notificationChannels.ts b/public/app/features/alerting/utils/notificationChannels.ts
new file mode 100644
index 00000000..1aa3e36c
--- /dev/null
+++ b/public/app/features/alerting/utils/notificationChannels.ts
@@ -0,0 +1,71 @@
+import memoizeOne from 'memoize-one';
+import { SelectableValue } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { NotificationChannelDTO, NotificationChannelType } from 'app/types';
+
+export const defaultValues: NotificationChannelDTO = {
+  id: -1,
+  name: '',
+  type: { value: 'email', label: 'Email' },
+  sendReminder: false,
+  disableResolveMessage: false,
+  frequency: '15m',
+  settings: {
+    uploadImage: config.rendererAvailable,
+    autoResolve: true,
+    httpMethod: 'POST',
+    severity: 'critical',
+  },
+  secureSettings: {},
+  secureFields: {},
+  isDefault: false,
+};
+
+export const mapChannelsToSelectableValue = memoizeOne(
+  (notificationChannels: NotificationChannelType[], includeDescription: boolean): Array<SelectableValue<string>> => {
+    return notificationChannels.map((channel) => {
+      if (includeDescription) {
+        return {
+          value: channel.value,
+          label: channel.label,
+          description: channel.description,
+        };
+      }
+      return {
+        value: channel.value,
+        label: channel.label,
+      };
+    });
+  }
+);
+
+export const transformSubmitData = (formData: NotificationChannelDTO) => {
+  /*
+    Some settings can be options in a select, in order to not save a SelectableValue<T>
+    we need to use check if it is a SelectableValue and use its value.
+  */
+  const settings = Object.fromEntries(
+    Object.entries(formData.settings).map(([key, value]) => {
+      return [key, value && value.hasOwnProperty('value') ? value.value : value];
+    })
+  );
+
+  return {
+    ...defaultValues,
+    ...formData,
+    frequency: formData.frequency === '' ? defaultValues.frequency : formData.frequency,
+    type: formData.type.value,
+    settings: { ...defaultValues.settings, ...settings },
+    secureSettings: { ...formData.secureSettings },
+  };
+};
+
+export const transformTestData = (formData: NotificationChannelDTO) => {
+  return {
+    name: formData.name,
+    type: formData.type.value,
+    frequency: formData.frequency ?? defaultValues.frequency,
+    settings: { ...Object.assign(defaultValues.settings, formData.settings) },
+    secureSettings: { ...formData.secureSettings },
+  };
+};
diff --git a/public/app/features/all.ts b/public/app/features/all.ts
new file mode 100644
index 00000000..ec007011
--- /dev/null
+++ b/public/app/features/all.ts
@@ -0,0 +1,3 @@
+import './plugins/all';
+import './dashboard';
+import './profile/all';
diff --git a/public/app/features/annotations/api.ts b/public/app/features/annotations/api.ts
new file mode 100644
index 00000000..cdbaab32
--- /dev/null
+++ b/public/app/features/annotations/api.ts
@@ -0,0 +1,23 @@
+import { AnnotationEvent } from '@grafana/data';
+import { getBackendSrv } from '@grafana/runtime';
+import { AnnotationTagsResponse } from './types';
+
+export function saveAnnotation(annotation: AnnotationEvent) {
+  return getBackendSrv().post('/api/annotations', annotation);
+}
+
+export function updateAnnotation(annotation: AnnotationEvent) {
+  return getBackendSrv().put(`/api/annotations/${annotation.id}`, annotation);
+}
+
+export function deleteAnnotation(annotation: AnnotationEvent) {
+  return getBackendSrv().delete(`/api/annotations/${annotation.id}`);
+}
+
+export async function getAnnotationTags() {
+  const response: AnnotationTagsResponse = await getBackendSrv().get('/api/annotations/tags');
+  return response.result.tags.map(({ tag, count }) => ({
+    term: tag,
+    count,
+  }));
+}
diff --git a/public/app/features/annotations/components/AnnotationResultMapper.tsx b/public/app/features/annotations/components/AnnotationResultMapper.tsx
new file mode 100644
index 00000000..60fa5ad0
--- /dev/null
+++ b/public/app/features/annotations/components/AnnotationResultMapper.tsx
@@ -0,0 +1,197 @@
+import React, { PureComponent } from 'react';
+
+import {
+  SelectableValue,
+  getFieldDisplayName,
+  AnnotationEvent,
+  AnnotationEventMappings,
+  AnnotationEventFieldMapping,
+  formattedValueToString,
+  AnnotationEventFieldSource,
+  getValueFormat,
+} from '@grafana/data';
+
+import { annotationEventNames, AnnotationFieldInfo } from '../standardAnnotationSupport';
+import { Select, Tooltip, Icon } from '@grafana/ui';
+import { AnnotationQueryResponse } from '../types';
+
+// const valueOptions: Array<SelectableValue<AnnotationEventFieldSource>> = [
+//   { value: AnnotationEventFieldSource.Field, label: 'Field', description: 'Set the field value from a response field' },
+//   { value: AnnotationEventFieldSource.Text, label: 'Text', description: 'Enter direct text for the value' },
+//   { value: AnnotationEventFieldSource.Skip, label: 'Skip', description: 'Hide this field' },
+// ];
+
+interface Props {
+  response?: AnnotationQueryResponse;
+
+  mappings?: AnnotationEventMappings;
+
+  change: (mappings?: AnnotationEventMappings) => void;
+}
+
+interface State {
+  fieldNames: Array<SelectableValue<string>>;
+}
+
+export class AnnotationFieldMapper extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      fieldNames: [],
+    };
+  }
+
+  updateFields = () => {
+    const frame = this.props.response?.panelData?.series[0];
+    if (frame && frame.fields) {
+      const fieldNames = frame.fields.map((f) => {
+        const name = getFieldDisplayName(f, frame);
+
+        let description = '';
+        for (let i = 0; i < frame.length; i++) {
+          if (i > 0) {
+            description += ', ';
+          }
+          if (i > 2) {
+            description += '...';
+            break;
+          }
+          description += f.values.get(i);
+        }
+
+        if (description.length > 50) {
+          description = description.substring(0, 50) + '...';
+        }
+
+        return {
+          label: `${name} (${f.type})`,
+          value: name,
+          description,
+        };
+      });
+      this.setState({ fieldNames });
+    }
+  };
+
+  componentDidMount() {
+    this.updateFields();
+  }
+
+  componentDidUpdate(oldProps: Props) {
+    if (oldProps.response !== this.props.response) {
+      this.updateFields();
+    }
+  }
+
+  onFieldSourceChange = (k: keyof AnnotationEvent, v: SelectableValue<AnnotationEventFieldSource>) => {
+    const mappings = this.props.mappings || {};
+    const mapping = mappings[k] || {};
+
+    this.props.change({
+      ...mappings,
+      [k]: {
+        ...mapping,
+        source: v.value || AnnotationEventFieldSource.Field,
+      },
+    });
+  };
+
+  onFieldNameChange = (k: keyof AnnotationEvent, v: SelectableValue<string>) => {
+    const mappings = this.props.mappings || {};
+    const mapping = mappings[k] || {};
+
+    this.props.change({
+      ...mappings,
+      [k]: {
+        ...mapping,
+        value: v.value,
+        source: AnnotationEventFieldSource.Field,
+      },
+    });
+  };
+
+  renderRow(row: AnnotationFieldInfo, mapping: AnnotationEventFieldMapping, first?: AnnotationEvent) {
+    const { fieldNames } = this.state;
+
+    let picker = fieldNames;
+    const current = mapping.value;
+    let currentValue = fieldNames.find((f) => current === f.value);
+    if (current) {
+      picker = [...fieldNames];
+      if (!currentValue) {
+        picker.push({
+          label: current,
+          value: current,
+        });
+      }
+    }
+
+    let value = first ? first[row.key] : '';
+    if (value && row.key.startsWith('time')) {
+      const fmt = getValueFormat('dateTimeAsIso');
+      value = formattedValueToString(fmt(value as number));
+    }
+    if (value === null || value === undefined) {
+      value = ''; // empty string
+    }
+
+    return (
+      <tr key={row.key}>
+        <td>
+          {row.key}{' '}
+          {row.help && (
+            <Tooltip content={row.help}>
+              <Icon name="info-circle" />
+            </Tooltip>
+          )}
+        </td>
+        {/* <td>
+          <Select
+            menuShouldPortal
+            value={valueOptions.find(v => v.value === mapping.source) || valueOptions[0]}
+            options={valueOptions}
+            onChange={(v: SelectableValue<AnnotationEventFieldSource>) => {
+              this.onFieldSourceChange(row.key, v);
+            }}
+          />
+        </td> */}
+        <td>
+          <Select
+            menuShouldPortal
+            value={currentValue}
+            options={picker}
+            placeholder={row.placeholder || row.key}
+            onChange={(v: SelectableValue<string>) => {
+              this.onFieldNameChange(row.key, v);
+            }}
+            noOptionsMessage="Unknown field names"
+            allowCustomValue={true}
+          />
+        </td>
+        <td>{`${value}`}</td>
+      </tr>
+    );
+  }
+
+  render() {
+    const first = this.props.response?.events?.[0];
+    const mappings = this.props.mappings || {};
+
+    return (
+      <table className="filter-table">
+        <thead>
+          <tr>
+            <th>Annotation</th>
+            <th>From</th>
+            <th>First Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {annotationEventNames.map((row) => {
+            return this.renderRow(row, mappings[row.key] || {}, first);
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
diff --git a/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx b/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
new file mode 100644
index 00000000..f0937dbd
--- /dev/null
+++ b/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
@@ -0,0 +1,188 @@
+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 { AnnotationQueryResponse } from '../types';
+import { AnnotationFieldMapper } from './AnnotationResultMapper';
+
+interface Props {
+  datasource: DataSourceApi;
+  annotation: AnnotationQuery<DataQuery>;
+  onChange: (annotation: AnnotationQuery<DataQuery>) => void;
+}
+
+interface State {
+  running?: boolean;
+  response?: AnnotationQueryResponse;
+}
+
+export default class StandardAnnotationQueryEditor extends PureComponent<Props, State> {
+  state = {} as State;
+
+  componentDidMount() {
+    this.verifyDataSource();
+  }
+
+  componentDidUpdate(oldProps: Props) {
+    if (this.props.annotation !== oldProps.annotation) {
+      this.verifyDataSource();
+    }
+  }
+
+  verifyDataSource() {
+    const { datasource, annotation } = this.props;
+
+    // Handle any migration issues
+    const processor = {
+      ...standardAnnotationSupport,
+      ...datasource.annotations,
+    };
+
+    const fixed = processor.prepareAnnotation!(annotation);
+    if (fixed !== annotation) {
+      this.props.onChange(fixed);
+    } else {
+      this.onRunQuery();
+    }
+  }
+
+  onRunQuery = async () => {
+    const { datasource, annotation } = this.props;
+    const dashboard = getDashboardSrv().getCurrent();
+    if (!dashboard) {
+      return;
+    }
+
+    this.setState({
+      running: true,
+    });
+    const response = await lastValueFrom(
+      executeAnnotationQuery(
+        {
+          range: getTimeSrv().timeRange(),
+          panel: {} as PanelModel,
+          dashboard,
+        },
+        datasource,
+        annotation
+      )
+    );
+    this.setState({
+      running: false,
+      response,
+    });
+  };
+
+  onQueryChange = (target: DataQuery) => {
+    this.props.onChange({
+      ...this.props.annotation,
+      target,
+    });
+  };
+
+  onMappingChange = (mappings?: AnnotationEventMappings) => {
+    this.props.onChange({
+      ...this.props.annotation,
+      mappings,
+    });
+  };
+
+  renderStatus() {
+    const { response, running } = this.state;
+    let rowStyle = 'alert-info';
+    let text = '...';
+    let icon: IconName | undefined = undefined;
+
+    if (running || response?.panelData?.state === LoadingState.Loading || !response) {
+      text = 'loading...';
+    } else {
+      const { events, panelData } = response;
+
+      if (panelData?.error) {
+        rowStyle = 'alert-error';
+        icon = 'exclamation-triangle';
+        text = panelData.error.message ?? 'error';
+      } else if (!events?.length) {
+        rowStyle = 'alert-warning';
+        icon = 'exclamation-triangle';
+        text = 'No events found';
+      } else {
+        const frame = panelData?.series[0];
+
+        text = `${events.length} events (from ${frame?.fields.length} fields)`;
+      }
+    }
+    return (
+      <div
+        className={cx(
+          rowStyle,
+          css`
+            margin: 4px 0px;
+            padding: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          `
+        )}
+      >
+        <div>
+          {icon && (
+            <>
+              <Icon name={icon} />
+               
+            </>
+          )}
+          {text}
+        </div>
+        <div>
+          {running ? (
+            <Spinner />
+          ) : (
+            <Button variant="secondary" size="xs" onClick={this.onRunQuery}>
+              TEST
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { datasource, annotation } = this.props;
+    const { response } = this.state;
+
+    // Find the annotaiton runner
+    let QueryEditor = datasource.annotations?.QueryEditor || datasource.components?.QueryEditor;
+    if (!QueryEditor) {
+      return <div>Annotations are not supported. This datasource needs to export a QueryEditor</div>;
+    }
+
+    const query = annotation.target ?? { refId: 'Anno' };
+    return (
+      <>
+        <QueryEditor
+          key={datasource?.name}
+          query={query}
+          datasource={datasource}
+          onChange={this.onQueryChange}
+          onRunQuery={this.onRunQuery}
+          data={response?.panelData}
+          range={getTimeSrv().timeRange()}
+        />
+        {datasource.type !== 'datasource' && (
+          <>
+            {this.renderStatus()}
+            <AnnotationFieldMapper response={response} mappings={annotation.mappings} change={this.onMappingChange} />
+          </>
+        )}
+      </>
+    );
+  }
+}
diff --git a/public/app/features/annotations/events_processing.test.ts b/public/app/features/annotations/events_processing.test.ts
new file mode 100644
index 00000000..f8707fe8
--- /dev/null
+++ b/public/app/features/annotations/events_processing.test.ts
@@ -0,0 +1,39 @@
+import { dedupAnnotations } from './events_processing';
+
+describe('Annotations deduplication', () => {
+  it('should remove duplicated annotations', () => {
+    const testAnnotations = [
+      { id: 1, time: 1 },
+      { id: 2, time: 2 },
+      { id: 2, time: 2 },
+      { id: 5, time: 5 },
+      { id: 5, time: 5 },
+    ];
+    const expectedAnnotations = [
+      { id: 1, time: 1 },
+      { id: 2, time: 2 },
+      { id: 5, time: 5 },
+    ];
+
+    const deduplicated = dedupAnnotations(testAnnotations);
+    expect(deduplicated).toEqual(expectedAnnotations);
+  });
+
+  it('should leave non "panel-alert" event if present', () => {
+    const testAnnotations = [
+      { id: 1, time: 1 },
+      { id: 2, time: 2 },
+      { id: 2, time: 2, eventType: 'panel-alert' },
+      { id: 5, time: 5 },
+      { id: 5, time: 5 },
+    ];
+    const expectedAnnotations = [
+      { id: 1, time: 1 },
+      { id: 2, time: 2 },
+      { id: 5, time: 5 },
+    ];
+
+    const deduplicated = dedupAnnotations(testAnnotations);
+    expect(deduplicated).toEqual(expectedAnnotations);
+  });
+});
diff --git a/public/app/features/annotations/events_processing.ts b/public/app/features/annotations/events_processing.ts
new file mode 100644
index 00000000..32d7f829
--- /dev/null
+++ b/public/app/features/annotations/events_processing.ts
@@ -0,0 +1,27 @@
+import { concat, every, find, groupBy, head, map, partition } from 'lodash';
+
+export function dedupAnnotations(annotations: any) {
+  let dedup = [];
+
+  // Split events by annotationId property existence
+  const events = partition(annotations, 'id');
+
+  const eventsById = groupBy(events[0], 'id');
+  dedup = map(eventsById, (eventGroup) => {
+    if (eventGroup.length > 1 && !every(eventGroup, isPanelAlert)) {
+      // Get first non-panel alert
+      return find(eventGroup, (event) => {
+        return event.eventType !== 'panel-alert';
+      });
+    } else {
+      return head(eventGroup);
+    }
+  });
+
+  dedup = concat(dedup, events[1]);
+  return dedup;
+}
+
+function isPanelAlert(event: { eventType: string }) {
+  return event.eventType === 'panel-alert';
+}
diff --git a/public/app/features/annotations/executeAnnotationQuery.ts b/public/app/features/annotations/executeAnnotationQuery.ts
new file mode 100644
index 00000000..3fe88217
--- /dev/null
+++ b/public/app/features/annotations/executeAnnotationQuery.ts
@@ -0,0 +1,74 @@
+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';
+
+let counter = 100;
+function getNextRequestId() {
+  return 'AQ' + counter++;
+}
+
+export function executeAnnotationQuery(
+  options: AnnotationQueryOptions,
+  datasource: DataSourceApi,
+  savedJsonAnno: any
+): Observable<AnnotationQueryResponse> {
+  const processor = {
+    ...standardAnnotationSupport,
+    ...datasource.annotations,
+  };
+
+  const annotation = processor.prepareAnnotation!(savedJsonAnno);
+  if (!annotation) {
+    return of({});
+  }
+
+  const query = processor.prepareQuery!(annotation);
+  if (!query) {
+    return of({});
+  }
+
+  // No more points than pixels
+  const maxDataPoints = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+  // Add interval to annotation queries
+  const interval = rangeUtil.calculateInterval(options.range, maxDataPoints, datasource.interval);
+
+  const scopedVars: ScopedVars = {
+    __interval: { text: interval.interval, value: interval.interval },
+    __interval_ms: { text: interval.intervalMs.toString(), value: interval.intervalMs },
+    __annotation: { text: annotation.name, value: annotation },
+  };
+
+  const queryRequest: DataQueryRequest = {
+    startTime: Date.now(),
+    requestId: getNextRequestId(),
+    range: options.range,
+    maxDataPoints,
+    scopedVars,
+    ...interval,
+    app: CoreApp.Dashboard,
+
+    timezone: options.dashboard.timezone,
+
+    targets: [
+      {
+        ...query,
+        refId: 'Anno',
+      },
+    ],
+  };
+
+  return runRequest(datasource, queryRequest).pipe(
+    mergeMap((panelData) => {
+      if (!panelData.series) {
+        return of({ panelData, events: [] });
+      }
+
+      return processor.processEvents!(annotation, panelData.series).pipe(map((events) => ({ panelData, events })));
+    })
+  );
+}
diff --git a/public/app/features/annotations/partials/event_editor.html b/public/app/features/annotations/partials/event_editor.html
new file mode 100644
index 00000000..b11b24ca
--- /dev/null
+++ b/public/app/features/annotations/partials/event_editor.html
@@ -0,0 +1,35 @@
+
+<div class="graph-annotation">
+	<div class="graph-annotation__header">
+		<div class="graph-annotation__user" bs-tooltip="'Created by {{ctrl.login}}'">
+		</div>
+
+		<div class="graph-annotation__title">
+			<span ng-if="!ctrl.event.id">Add annotation</span>
+			<span ng-if="ctrl.event.id">Edit annotation</span>
+		</div>
+
+    <div class="graph-annotation__time">{{ctrl.timeFormated}}</div>
+	</div>
+
+	<form name="ctrl.form" class="graph-annotation__body text-center">
+		<div style="display: inline-block">
+			<div class="gf-form gf-form--v-stretch">
+				<span class="gf-form-label width-7">Description</span>
+				<textarea class="gf-form-input width-20" rows="2" ng-model="ctrl.event.text"  placeholder="Description">

+ +

+ Tags + + +

+ +

+ + + Cancel +

+ +

diff --git a/public/app/features/annotations/standardAnnotationSupport.test.ts b/public/app/features/annotations/standardAnnotationSupport.test.ts new file mode 100644 index 00000000..9af8c457 --- /dev/null +++ b/public/app/features/annotations/standardAnnotationSupport.test.ts @@ -0,0 +1,159 @@ +import { FieldType, toDataFrame } from '@grafana/data'; +import { getAnnotationsFromData } from './standardAnnotationSupport'; + +describe('DataFrame to annotations', () => { + test('simple conversion', async () => { + const frame = toDataFrame({ + fields: [ + { type: FieldType.time, values: [1, 2, 3, 4, 5] }, + { name: 'first string field', values: ['t1', 't2', 't3', null, undefined] }, + { name: 'tags', values: ['aaa,bbb', 'bbb,ccc', 'zyz', null, undefined] }, + ], + }); + + await expect(getAnnotationsFromData([frame])).toEmitValues([ + [ + { + color: 'red', + tags: ['aaa', 'bbb'], + text: 't1', + time: 1, + type: 'default', + }, + { + color: 'red', + tags: ['bbb', 'ccc'], + text: 't2', + time: 2, + type: 'default', + }, + { + color: 'red', + tags: ['zyz'], + text: 't3', + time: 3, + type: 'default', + }, + { + color: 'red', + time: 4, + type: 'default', + }, + { + color: 'red', + time: 5, + type: 'default', + }, + ], + ]); + }); + + test('explicit mappins', async () => { + const frame = toDataFrame({ + fields: [ + { name: 'time1', values: [111, 222, 333] }, + { name: 'time2', values: [100, 200, 300] }, + { name: 'aaaaa', values: ['a1', 'a2', 'a3'] }, + { name: 'bbbbb', values: ['b1', 'b2', 'b3'] }, + ], + }); + + const observable = getAnnotationsFromData([frame], { + text: { value: 'bbbbb' }, + time: { value: 'time2' }, + timeEnd: { value: 'time1' }, + title: { value: 'aaaaa' }, + }); + + await expect(observable).toEmitValues([ + [ + { + color: 'red', + text: 'b1', + time: 100, + timeEnd: 111, + title: 'a1', + type: 'default', + }, + { + color: 'red', + text: 'b2', + time: 200, + timeEnd: 222, + title: 'a2', + type: 'default', + }, + { + color: 'red', + text: 'b3', + time: 300, + timeEnd: 333, + title: 'a3', + type: 'default', + }, + ], + ]); + }); + + it('all valid key names should be included in the output result', async () => { + const frame = toDataFrame({ + fields: [ + { name: 'time', values: [100] }, + { name: 'timeEnd', values: [200] }, + { name: 'title', values: ['title'] }, + { name: 'text', values: ['text'] }, + { name: 'tags', values: ['t1,t2,t3'] }, + { name: 'id', values: [1] }, + { name: 'userId', values: ['Admin'] }, + { name: 'login', values: ['admin'] }, + { name: 'email', values: ['admin@unknown.us'] }, + { name: 'prevState', values: ['normal'] }, + { name: 'newState', values: ['alerting'] }, + { name: 'data', values: [{ text: 'a', value: 'A' }] }, + { name: 'panelId', values: [4] }, + { name: 'alertId', values: [0] }, + ], + }); + + const observable = getAnnotationsFromData([frame]); + + await expect(observable).toEmitValues([ + [ + { + color: 'red', + data: { text: 'a', value: 'A' }, + email: 'admin@unknown.us', + id: 1, + login: 'admin', + newState: 'alerting', + panelId: 4, + prevState: 'normal', + tags: ['t1', 't2', 't3'], + text: 'text', + time: 100, + timeEnd: 200, + title: 'title', + type: 'default', + userId: 'Admin', + alertId: 0, + }, + ], + ]); + }); + + it('key names that are not valid should be excluded in the output result', async () => { + const frame = toDataFrame({ + fields: [ + { name: 'time', values: [100] }, + { name: 'text', values: ['text'] }, + { name: 'someData', values: [{ value: 'bar' }] }, + { name: 'panelSource', values: ['100'] }, + { name: 'timeStart', values: [100] }, + ], + }); + + const observable = getAnnotationsFromData([frame]); + + await expect(observable).toEmitValues([[{ color: 'red', text: 'text', time: 100, type: 'default' }]]); + }); +}); diff --git a/public/app/features/annotations/standardAnnotationSupport.ts b/public/app/features/annotations/standardAnnotationSupport.ts new file mode 100644 index 00000000..9348dd25 --- /dev/null +++ b/public/app/features/annotations/standardAnnotationSupport.ts @@ -0,0 +1,227 @@ +import { Observable, of, OperatorFunction } from 'rxjs'; +import { map, mergeMap } from 'rxjs/operators'; +import { + AnnotationEvent, + AnnotationEventFieldSource, + AnnotationEventMappings, + AnnotationQuery, + AnnotationSupport, + DataFrame, + Field, + FieldType, + getFieldDisplayName, + KeyValue, + standardTransformers, +} from '@grafana/data'; + +import { isString } from 'lodash'; + +export const standardAnnotationSupport: AnnotationSupport = { + /** + * Assume the stored value is standard model. + */ + prepareAnnotation: (json: any) => { + if (isString(json?.query)) { + const { query, ...rest } = json; + return { + ...rest, + target: { + query, + }, + mappings: {}, + }; + } + return json as AnnotationQuery; + }, + + /** + * Convert the stored JSON model and environment to a standard data source query object. + * This query will be executed in the data source and the results converted into events. + * Returning an undefined result will quietly skip query execution + */ + prepareQuery: (anno: AnnotationQuery) => anno.target, + + /** + * When the standard frame > event processing is insufficient, this allows explicit control of the mappings + */ + processEvents: (anno: AnnotationQuery, data: DataFrame[]) => { + return getAnnotationsFromData(data, anno.mappings); + }, +}; + +/** + * Flatten all panel data into a single frame + */ + +export function singleFrameFromPanelData(): OperatorFunction { + return (source) => + source.pipe( + mergeMap((data) => { + if (!data?.length) { + return of(undefined); + } + + if (data.length === 1) { + return of(data[0]); + } + + return of(data).pipe( + standardTransformers.mergeTransformer.operator({}), + map((d) => d[0]) + ); + }) + ); +} + +interface AnnotationEventFieldSetter { + key: keyof AnnotationEvent; + field?: Field; + text?: string; + regex?: RegExp; + split?: string; // for tags +} + +export interface AnnotationFieldInfo { + key: keyof AnnotationEvent; + + split?: string; + field?: (frame: DataFrame) => Field | undefined; + placeholder?: string; + help?: string; +} + +// These fields get added to the standard UI +export const annotationEventNames: AnnotationFieldInfo[] = [ + { + key: 'time', + field: (frame: DataFrame) => frame.fields.find((f) => f.type === FieldType.time), + placeholder: 'time, or the first time field', + }, + { key: 'timeEnd', help: 'When this field is defined, the annotation will be treated as a range' }, + { + key: 'title', + }, + { + key: 'text', + field: (frame: DataFrame) => frame.fields.find((f) => f.type === FieldType.string), + placeholder: 'text, or the first text field', + }, + { key: 'tags', split: ',', help: 'The results will be split on comma (,)' }, + { + key: 'id', + }, +]; + +// Given legacy infrastructure, alert events are passed though the same annotation +// pipeline, but include fields that should not be exposed generally +const alertEventAndAnnotationFields: AnnotationFieldInfo[] = [ + ...annotationEventNames, + { key: 'userId' }, + { key: 'login' }, + { key: 'email' }, + { key: 'prevState' }, + { key: 'newState' }, + { key: 'data' as any }, + { key: 'panelId' }, + { key: 'alertId' }, +]; + +export function getAnnotationsFromData( + data: DataFrame[], + options?: AnnotationEventMappings +): Observable { + return of(data).pipe( + singleFrameFromPanelData(), + map((frame) => { + if (!frame?.length) { + return []; + } + + let hasTime = false; + let hasText = false; + const byName: KeyValue = {}; + + for (const f of frame.fields) { + const name = getFieldDisplayName(f, frame); + byName[name.toLowerCase()] = f; + } + + if (!options) { + options = {}; + } + + const fields: AnnotationEventFieldSetter[] = []; + + for (const evts of alertEventAndAnnotationFields) { + const opt = options[evts.key] || {}; //AnnotationEventFieldMapping + + if (opt.source === AnnotationEventFieldSource.Skip) { + continue; + } + + const setter: AnnotationEventFieldSetter = { key: evts.key, split: evts.split }; + + if (opt.source === AnnotationEventFieldSource.Text) { + setter.text = opt.value; + } else { + const lower = (opt.value || evts.key).toLowerCase(); + setter.field = byName[lower]; + + if (!setter.field && evts.field) { + setter.field = evts.field(frame); + } + } + + if (setter.field || setter.text) { + fields.push(setter); + if (setter.key === 'time') { + hasTime = true; + } else if (setter.key === 'text') { + hasText = true; + } + } + } + + if (!hasTime || !hasText) { + return []; // throw an error? + } + + // Add each value to the string + const events: AnnotationEvent[] = []; + + for (let i = 0; i < frame.length; i++) { + const anno: AnnotationEvent = { + type: 'default', + color: 'red', + }; + + for (const f of fields) { + let v: any = undefined; + + if (f.text) { + v = f.text; // TODO support templates! + } else if (f.field) { + v = f.field.values.get(i); + if (v !== undefined && f.regex) { + const match = f.regex.exec(v); + if (match) { + v = match[1] ? match[1] : match[0]; + } + } + } + + if (v !== null && v !== undefined) { + if (f.split && typeof v === 'string') { + v = v.split(','); + } + (anno as any)[f.key] = v; + } + } + + events.push(anno); + } + + return events; + }) + ); +} diff --git a/public/app/features/annotations/types.ts b/public/app/features/annotations/types.ts new file mode 100644 index 00000000..6722de3d --- /dev/null +++ b/public/app/features/annotations/types.ts @@ -0,0 +1,37 @@ +import { AnnotationEvent, PanelData, TimeRange } from '@grafana/data'; +import { DashboardModel, PanelModel } from '../dashboard/state'; + +export interface AnnotationQueryOptions { + dashboard: DashboardModel; + panel: PanelModel; + range: TimeRange; +} + +export interface AnnotationQueryResponse { + /** + * The processed annotation events + */ + events?: AnnotationEvent[]; + + /** + * The original panel response + */ + panelData?: PanelData; +} + +export interface AnnotationTag { + /** + * The tag name + */ + tag: string; + /** + * The number of occurrences of that tag + */ + count: number; +} + +export interface AnnotationTagsResponse { + result: { + tags: AnnotationTag[]; + }; +} diff --git a/public/app/features/api-keys/ApiKeysActionBar.tsx b/public/app/features/api-keys/ApiKeysActionBar.tsx new file mode 100644 index 00000000..ef000521 --- /dev/null +++ b/public/app/features/api-keys/ApiKeysActionBar.tsx @@ -0,0 +1,22 @@ +import React, { FC } from 'react'; +import { Button, FilterInput } from '@grafana/ui'; + +interface Props { + searchQuery: string; + disabled: boolean; + onAddClick: () => void; + onSearchChange: (value: string) => void; +} + +export const ApiKeysActionBar: FC = ({ searchQuery, disabled, onAddClick, onSearchChange }) => { + return ( +

+ +

+ ); +}; diff --git a/public/app/features/api-keys/ApiKeysAddedModal.test.tsx b/public/app/features/api-keys/ApiKeysAddedModal.test.tsx new file mode 100644 index 00000000..82a3d7de --- /dev/null +++ b/public/app/features/api-keys/ApiKeysAddedModal.test.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { ApiKeysAddedModal, Props } from './ApiKeysAddedModal'; + +const setup = (propOverrides?: object) => { + const props: Props = { + onDismiss: jest.fn(), + apiKey: 'api key test', + rootPath: 'test/path', + }; + + Object.assign(props, propOverrides); + + const wrapper = shallow(); + + return { + wrapper, + }; +}; + +describe('Render', () => { + it('should render component', () => { + const { wrapper } = setup(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/api-keys/ApiKeysAddedModal.tsx b/public/app/features/api-keys/ApiKeysAddedModal.tsx new file mode 100644 index 00000000..89043776 --- /dev/null +++ b/public/app/features/api-keys/ApiKeysAddedModal.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { css } from '@emotion/css'; +import { Alert, Field, Modal, useStyles2 } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; + +export interface Props { + onDismiss: () => void; + apiKey: string; + rootPath: string; +} + +export function ApiKeysAddedModal({ onDismiss, apiKey, rootPath }: Props): JSX.Element { + const styles = useStyles2(getStyles); + return ( + + + {apiKey} + + + + It is not stored in this form, so be sure to copy it now. + + +

You can authenticate a request using the Authorization HTTP header, example:

+        curl -H "Authorization: Bearer {apiKey}" {rootPath}/api/dashboards/home
+

+ + ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + label: css` + padding: ${theme.spacing(1)}; + background-color: ${theme.colors.background.secondary}; + border-radius: ${theme.shape.borderRadius()}; + `, + small: css` + font-size: ${theme.typography.bodySmall.fontSize}; + font-weight: ${theme.typography.bodySmall.fontWeight}; + `, + }; +} diff --git a/public/app/features/api-keys/ApiKeysController.tsx b/public/app/features/api-keys/ApiKeysController.tsx new file mode 100644 index 00000000..69ac0551 --- /dev/null +++ b/public/app/features/api-keys/ApiKeysController.tsx @@ -0,0 +1,19 @@ +import { FC, useCallback, useState } from 'react'; + +interface Api { + isAdding: boolean; + toggleIsAdding: () => void; +} + +interface Props { + children: (props: Api) => JSX.Element; +} + +export const ApiKeysController: FC = ({ children }) => { + const [isAdding, setIsAdding] = useState(false); + const toggleIsAdding = useCallback(() => { + setIsAdding(!isAdding); + }, [isAdding]); + + return children({ isAdding, toggleIsAdding }); +}; diff --git a/public/app/features/api-keys/ApiKeysForm.tsx b/public/app/features/api-keys/ApiKeysForm.tsx new file mode 100644 index 00000000..9ad93b70 --- /dev/null +++ b/public/app/features/api-keys/ApiKeysForm.tsx @@ -0,0 +1,112 @@ +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 { CloseButton } from 'app/core/components/CloseButton/CloseButton'; + +const { Input } = LegacyForms; +const ROLE_OPTIONS: Array> = Object.keys(OrgRole).map((role) => ({ + label: role, + value: role as OrgRole, +})); + +interface Props { + show: boolean; + onClose: () => void; + onKeyAdded: (apiKey: NewApiKey) => void; +} + +function isValidInterval(value: string): boolean { + if (!value) { + return true; + } + try { + rangeUtil.intervalToSeconds(value); + return true; + } catch {} + return false; +} + +const timeRangeValidationEvents: ValidationEvents = { + [EventsWithValidation.onBlur]: [ + { + rule: isValidInterval, + errorMessage: 'Not a valid duration', + }, + ], +}; + +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 }) => { + const [name, setName] = useState(''); + const [role, setRole] = useState(OrgRole.Viewer); + const [secondsToLive, setSecondsToLive] = useState(''); + useEffect(() => { + setName(''); + setRole(OrgRole.Viewer); + setSecondsToLive(''); + }, [show]); + + const onSubmit = (event: FormEvent) => { + event.preventDefault(); + if (isValidInterval(secondsToLive)) { + onKeyAdded({ name, role, secondsToLive }); + onClose(); + } + }; + const onNameChange = (event: ChangeEvent) => { + setName(event.currentTarget.value); + }; + const onRoleChange = (role: SelectableValue) => { + setRole(role.value!); + }; + const onSecondsToLiveChange = (event: ChangeEvent) => { + setSecondsToLive(event.currentTarget.value); + }; + + return ( + +

+ + +

+ + ); +}; diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx new file mode 100644 index 00000000..e7adf743 --- /dev/null +++ b/public/app/features/api-keys/ApiKeysPage.test.tsx @@ -0,0 +1,212 @@ +import React from 'react'; +import { render, screen, within } from '@testing-library/react'; +import { ApiKeysPageUnconnected, Props } from './ApiKeysPage'; +import { ApiKey, OrgRole } from 'app/types'; +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 { silenceConsoleOutput } from '../../../test/core/utils/silenceConsoleOutput'; + +const setup = (propOverrides: Partial) => { + const loadApiKeysMock = jest.fn(); + const deleteApiKeyMock = jest.fn(); + const addApiKeyMock = jest.fn(); + const toggleIncludeExpiredMock = jest.fn(); + const setSearchQueryMock = mockToolkitActionCreator(setSearchQuery); + const props: Props = { + navModel: { + main: { + text: 'Configuration', + }, + node: { + text: 'Api Keys', + }, + } as NavModel, + apiKeys: [] as ApiKey[], + searchQuery: '', + hasFetched: false, + loadApiKeys: loadApiKeysMock, + deleteApiKey: deleteApiKeyMock, + setSearchQuery: setSearchQueryMock, + addApiKey: addApiKeyMock, + apiKeysCount: 0, + timeZone: 'utc', + includeExpired: false, + includeExpiredDisabled: false, + toggleIncludeExpired: toggleIncludeExpiredMock, + }; + + Object.assign(props, propOverrides); + + const { rerender } = render(); + return { + rerender, + props, + loadApiKeysMock, + setSearchQueryMock, + deleteApiKeyMock, + addApiKeyMock, + toggleIncludeExpiredMock, + }; +}; + +describe('ApiKeysPage', () => { + silenceConsoleOutput(); + describe('when mounted', () => { + it('then it should call loadApiKeys', () => { + const { loadApiKeysMock } = setup({}); + expect(loadApiKeysMock).toHaveBeenCalledTimes(1); + }); + }); + + describe('when loading', () => { + it('then should show Loading message', () => { + setup({ hasFetched: false }); + expect(screen.getByText(/loading \.\.\./i)).toBeInTheDocument(); + }); + }); + + describe('when there are no API keys', () => { + it('then it should render CTA', () => { + setup({ apiKeys: getMultipleMockKeys(0), apiKeysCount: 0, hasFetched: true }); + expect(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('New API key'))).toBeInTheDocument(); + }); + }); + + describe('when there are API keys', () => { + it('then it should render API keys table', async () => { + const apiKeys = [ + { id: 1, name: 'First', role: OrgRole.Admin, secondsToLive: 60, expiration: '2021-01-01' }, + { id: 2, name: 'Second', role: OrgRole.Editor, secondsToLive: 60, expiration: '2021-01-02' }, + { id: 3, name: 'Third', role: OrgRole.Viewer, secondsToLive: 0, expiration: undefined }, + ]; + setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true }); + expect(screen.getByRole('table')).toBeInTheDocument(); + expect(screen.getAllByRole('row').length).toBe(4); + expect(screen.getByRole('row', { name: /first admin 2021-01-01 00:00:00/i })).toBeInTheDocument(); + expect(screen.getByRole('row', { name: /second editor 2021-01-02 00:00:00/i })).toBeInTheDocument(); + expect(screen.getByRole('row', { name: /third viewer no expiration date/i })).toBeInTheDocument(); + }); + }); + + describe('when a user toggles the Show expired toggle', () => { + it('then it should dispatch toggleIncludeExpired', async () => { + const apiKeys = getMultipleMockKeys(3); + const { toggleIncludeExpiredMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true }); + + toggleShowExpired(); + expect(toggleIncludeExpiredMock).toHaveBeenCalledTimes(1); + }); + }); + + describe('when a user searches for an API key', () => { + it('then it should dispatch setSearchQuery with correct parameters', async () => { + const apiKeys = getMultipleMockKeys(3); + const { setSearchQueryMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true }); + + setSearchQueryMock.mockClear(); + expect(screen.getByPlaceholderText(/search keys/i)).toBeInTheDocument(); + userEvent.type(screen.getByPlaceholderText(/search keys/i), 'First'); + expect(setSearchQueryMock).toHaveBeenCalledTimes(5); + }); + }); + + describe('when a user deletes an API key', () => { + it('then it should dispatch deleteApi with correct parameters', async () => { + const apiKeys = [ + { id: 1, name: 'First', role: OrgRole.Admin, secondsToLive: 60, expiration: '2021-01-01' }, + { id: 2, name: 'Second', role: OrgRole.Editor, secondsToLive: 60, expiration: '2021-01-02' }, + { id: 3, name: 'Third', role: OrgRole.Viewer, secondsToLive: 0, expiration: undefined }, + ]; + const { deleteApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true }); + const firstRow = screen.getByRole('row', { name: /first admin 2021-01-01 00:00:00/i }); + const secondRow = screen.getByRole('row', { name: /second editor 2021-01-02 00:00:00/i }); + + deleteApiKeyMock.mockClear(); + expect(within(firstRow).getByLabelText('Delete API key')).toBeInTheDocument(); + 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 })); + expect(deleteApiKeyMock).toHaveBeenCalledTimes(1); + expect(deleteApiKeyMock).toHaveBeenCalledWith(1); + + toggleShowExpired(); + + deleteApiKeyMock.mockClear(); + expect(within(secondRow).getByLabelText('Delete API key')).toBeInTheDocument(); + 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, + }); + expect(deleteApiKeyMock).toHaveBeenCalledTimes(1); + expect(deleteApiKeyMock).toHaveBeenCalledWith(2); + }); + }); + + describe('when a user adds an API key from CTA', () => { + it('then it should call addApiKey with correct parameters', async () => { + const apiKeys: any[] = []; + const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true }); + + addApiKeyMock.mockClear(); + userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('New API key'))); + await addAndVerifyApiKey(addApiKeyMock); + }); + }); + + describe('when a user adds an API key from Add API key', () => { + it('then it should call addApiKey with correct parameters', async () => { + const apiKeys = getMultipleMockKeys(1); + const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true }); + + addApiKeyMock.mockClear(); + userEvent.click(screen.getByRole('button', { name: /add api key/i })); + await addAndVerifyApiKey(addApiKeyMock); + + toggleShowExpired(); + + addApiKeyMock.mockClear(); + userEvent.click(screen.getByRole('button', { name: /add api key/i })); + await addAndVerifyApiKey(addApiKeyMock); + }); + }); + + describe('when a user adds an API key with an invalid expiration', () => { + it('then it should display a message', async () => { + const apiKeys = getMultipleMockKeys(1); + 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'); + expect(screen.queryByText(/not a valid duration/i)).not.toBeInTheDocument(); + userEvent.click(screen.getByRole('button', { name: /^add$/i })); + expect(screen.getByText(/not a valid duration/i)).toBeInTheDocument(); + expect(addApiKeyMock).toHaveBeenCalledTimes(0); + }); + }); +}); + +function toggleShowExpired() { + expect(screen.queryByLabelText(/include expired keys/i)).toBeInTheDocument(); + userEvent.click(screen.getByLabelText(/include expired keys/i)); +} + +async function addAndVerifyApiKey(addApiKeyMock: jest.Mock) { + expect(screen.getByRole('heading', { name: /add api key/i })).toBeInTheDocument(); + expect(screen.getByPlaceholderText(/name/i)).toBeInTheDocument(); + 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 })); + 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 new file mode 100644 index 00000000..6e3d8273 --- /dev/null +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -0,0 +1,179 @@ +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 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 { 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 { ShowModalReactEvent } from 'app/types/events'; + +function mapStateToProps(state: StoreState) { + return { + navModel: getNavModel(state.navIndex, 'apikeys'), + apiKeys: getApiKeys(state.apiKeys), + searchQuery: state.apiKeys.searchQuery, + apiKeysCount: getApiKeysCount(state.apiKeys), + hasFetched: state.apiKeys.hasFetched, + timeZone: getTimeZone(state.user), + includeExpired: getIncludeExpired(state.apiKeys), + includeExpiredDisabled: getIncludeExpiredDisabled(state.apiKeys), + }; +} + +const mapDispatchToProps = { + loadApiKeys, + deleteApiKey, + setSearchQuery, + toggleIncludeExpired, + addApiKey, +}; + +const connector = connect(mapStateToProps, mapDispatchToProps); + +interface OwnProps {} + +export type Props = OwnProps & ConnectedProps; + +interface State { + isAdding: boolean; +} + +export class ApiKeysPageUnconnected extends PureComponent { + constructor(props: Props) { + super(props); + } + + componentDidMount() { + this.fetchApiKeys(); + } + + async fetchApiKeys() { + await this.props.loadApiKeys(); + } + + onDeleteApiKey = (key: ApiKey) => { + this.props.deleteApiKey(key.id!); + }; + + onSearchQueryChange = (value: string) => { + this.props.setSearchQuery(value); + }; + + onIncludeExpiredChange = (event: React.SyntheticEvent) => { + this.props.toggleIncludeExpired(); + }; + + onAddApiKey = (newApiKey: NewApiKey) => { + const openModal = (apiKey: string) => { + const rootPath = window.location.origin + config.appSubUrl; + + appEvents.publish( + new ShowModalReactEvent({ + props: { + apiKey, + rootPath, + }, + component: ApiKeysAddedModal, + }) + ); + }; + + const secondsToLive = newApiKey.secondsToLive; + try { + const secondsToLiveAsNumber = secondsToLive ? rangeUtil.intervalToSeconds(secondsToLive) : null; + const apiKey: ApiKey = { + ...newApiKey, + secondsToLive: secondsToLiveAsNumber, + }; + this.props.addApiKey(apiKey, openModal); + this.setState((prevState: State) => { + return { + ...prevState, + isAdding: false, + }; + }); + } catch (err) { + console.error(err); + } + }; + + render() { + const { + hasFetched, + navModel, + apiKeysCount, + apiKeys, + searchQuery, + timeZone, + includeExpired, + includeExpiredDisabled, + } = this.props; + + if (!hasFetched) { + return ( + + {} + + ); + } + + return ( + + + + {({ isAdding, toggleIsAdding }) => { + const showCTA = !isAdding && apiKeysCount === 0; + const showTable = apiKeysCount > 0; + return ( + <> + {showCTA ? ( + + ) : null} + {showTable ? ( + + ) : null} + + {showTable ? ( + + + + + + + ) : null} + + ); + }} + + + + ); + } +} + +const ApiKeysPage = connector(ApiKeysPageUnconnected); +export default ApiKeysPage; diff --git a/public/app/features/api-keys/ApiKeysTable.tsx b/public/app/features/api-keys/ApiKeysTable.tsx new file mode 100644 index 00000000..06445bf0 --- /dev/null +++ b/public/app/features/api-keys/ApiKeysTable.tsx @@ -0,0 +1,72 @@ +import React, { FC } from 'react'; +import { DeleteButton, Icon, IconName, Tooltip, useTheme2 } from '@grafana/ui'; +import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data'; + +import { ApiKey } from '../../types'; +import { css } from '@emotion/css'; + +interface Props { + apiKeys: ApiKey[]; + timeZone: TimeZone; + onDelete: (apiKey: ApiKey) => void; +} + +export const ApiKeysTable: FC = ({ apiKeys, timeZone, onDelete }) => { + const theme = useTheme2(); + const styles = getStyles(theme); + + return ( + + + + + + + + + {apiKeys.length > 0 ? ( + + {apiKeys.map((key) => { + const isExpired = Boolean(key.expiration && Date.now() > new Date(key.expiration).getTime()); + return ( + + + + + + + ); + })} + + ) : null} +

Name	Role	Expires	+
{key.name}	{key.role}	+ {formatDate(key.expiration, timeZone)} + {isExpired && ( + + + + + + )} +	+ onDelete(key)} /> +

+ ); +}; + +function formatDate(expiration: string | undefined, timeZone: TimeZone): string { + if (!expiration) { + return 'No expiration date'; + } + return dateTimeFormat(expiration, { timeZone }); +} + +const getStyles = (theme: GrafanaTheme2) => ({ + tableRow: (isExpired: boolean) => css` + color: ${isExpired ? theme.colors.text.secondary : theme.colors.text.primary}; + `, + tooltipContainer: css` + margin-left: ${theme.spacing(1)}; + `, +}); diff --git a/public/app/features/api-keys/__mocks__/apiKeysMock.ts b/public/app/features/api-keys/__mocks__/apiKeysMock.ts new file mode 100644 index 00000000..c244cb6a --- /dev/null +++ b/public/app/features/api-keys/__mocks__/apiKeysMock.ts @@ -0,0 +1,27 @@ +import { ApiKey, OrgRole } from 'app/types'; + +export const getMultipleMockKeys = (numberOfKeys: number): ApiKey[] => { + const keys: ApiKey[] = []; + + for (let i = 1; i <= numberOfKeys; i++) { + keys.push({ + id: i, + name: `test-${i}`, + role: OrgRole.Viewer, + secondsToLive: 100, + expiration: '2019-06-04', + }); + } + + return keys; +}; + +export const getMockKey = (): ApiKey => { + return { + id: 1, + name: 'test', + role: OrgRole.Admin, + secondsToLive: 200, + expiration: '2019-06-04', + }; +}; diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap new file mode 100644 index 00000000..380a868a --- /dev/null +++ b/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` + + + + api key test + + + + It is not stored in this form, so be sure to copy it now. + +

+ You can authenticate a request using the Authorization HTTP header, example: +

+    curl -H "Authorization: Bearer 
+    api key test
+    " 
+    test/path
+    /api/dashboards/home
+

+ +`; diff --git a/public/app/features/api-keys/state/actions.ts b/public/app/features/api-keys/state/actions.ts new file mode 100644 index 00000000..22fc8298 --- /dev/null +++ b/public/app/features/api-keys/state/actions.ts @@ -0,0 +1,37 @@ +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 { + return async (dispatch) => { + const result = await getBackendSrv().post('/api/auth/keys', apiKey); + dispatch(setSearchQuery('')); + dispatch(loadApiKeys()); + openModal(result.key); + }; +} + +export function loadApiKeys(): ThunkResult { + return async (dispatch) => { + dispatch(isFetching()); + const [keys, keysIncludingExpired] = await Promise.all([ + getBackendSrv().get('/api/auth/keys?includeExpired=false'), + getBackendSrv().get('/api/auth/keys?includeExpired=true'), + ]); + dispatch(apiKeysLoaded({ keys, keysIncludingExpired })); + }; +} + +export function deleteApiKey(id: number): ThunkResult { + return async (dispatch) => { + getBackendSrv() + .delete(`/api/auth/keys/${id}`) + .then(() => dispatch(loadApiKeys())); + }; +} + +export function toggleIncludeExpired(): ThunkResult { + return (dispatch) => { + dispatch(includeExpiredToggled()); + }; +} diff --git a/public/app/features/api-keys/state/reducers.test.ts b/public/app/features/api-keys/state/reducers.test.ts new file mode 100644 index 00000000..655a3d98 --- /dev/null +++ b/public/app/features/api-keys/state/reducers.test.ts @@ -0,0 +1,57 @@ +import { + apiKeysLoaded, + apiKeysReducer, + includeExpiredToggled, + initialApiKeysState, + 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', () => { + reducerTester() + .givenReducer(apiKeysReducer, { ...initialApiKeysState }) + .whenActionIsDispatched( + apiKeysLoaded({ keys: getMultipleMockKeys(4), keysIncludingExpired: getMultipleMockKeys(6) }) + ) + .thenStateShouldEqual({ + ...initialApiKeysState, + keys: getMultipleMockKeys(4), + keysIncludingExpired: getMultipleMockKeys(6), + hasFetched: true, + }); + }); + + it('should set search query', () => { + reducerTester() + .givenReducer(apiKeysReducer, { ...initialApiKeysState }) + .whenActionIsDispatched(setSearchQuery('test query')) + .thenStateShouldEqual({ + ...initialApiKeysState, + searchQuery: 'test query', + }); + }); + + it('should toggle the includeExpired state', () => { + reducerTester() + .givenReducer(apiKeysReducer, { ...initialApiKeysState }) + .whenActionIsDispatched(includeExpiredToggled()) + .thenStateShouldEqual({ + ...initialApiKeysState, + includeExpired: true, + }); + }); + + it('should set state when fetching', () => { + reducerTester() + .givenReducer(apiKeysReducer, { ...initialApiKeysState }) + .whenActionIsDispatched(isFetching()) + .thenStateShouldEqual({ + ...initialApiKeysState, + hasFetched: false, + }); + }); +}); diff --git a/public/app/features/api-keys/state/reducers.ts b/public/app/features/api-keys/state/reducers.ts new file mode 100644 index 00000000..327d18d3 --- /dev/null +++ b/public/app/features/api-keys/state/reducers.ts @@ -0,0 +1,43 @@ +import { createSlice } from '@reduxjs/toolkit'; + +import { ApiKeysState } from 'app/types'; + +export const initialApiKeysState: ApiKeysState = { + hasFetched: false, + includeExpired: false, + keys: [], + keysIncludingExpired: [], + searchQuery: '', +}; + +const apiKeysSlice = createSlice({ + name: 'apiKeys', + initialState: initialApiKeysState, + reducers: { + apiKeysLoaded: (state, action): ApiKeysState => { + const { keys, keysIncludingExpired } = action.payload; + const includeExpired = + action.payload.keys.length === 0 && action.payload.keysIncludingExpired.length > 0 + ? true + : state.includeExpired; + return { ...state, hasFetched: true, keys, keysIncludingExpired, includeExpired }; + }, + setSearchQuery: (state, action): ApiKeysState => { + return { ...state, searchQuery: action.payload }; + }, + includeExpiredToggled: (state): ApiKeysState => { + return { ...state, includeExpired: !state.includeExpired }; + }, + isFetching: (state): ApiKeysState => { + return { ...state, hasFetched: false }; + }, + }, +}); + +export const { apiKeysLoaded, includeExpiredToggled, isFetching, setSearchQuery } = apiKeysSlice.actions; + +export const apiKeysReducer = apiKeysSlice.reducer; + +export default { + apiKeys: apiKeysReducer, +}; diff --git a/public/app/features/api-keys/state/selectors.test.ts b/public/app/features/api-keys/state/selectors.test.ts new file mode 100644 index 00000000..307dadeb --- /dev/null +++ b/public/app/features/api-keys/state/selectors.test.ts @@ -0,0 +1,140 @@ +import { getApiKeys, getApiKeysCount, getIncludeExpired, getIncludeExpiredDisabled } from './selectors'; +import { getMultipleMockKeys } from '../__mocks__/apiKeysMock'; +import { ApiKeysState } from 'app/types'; + +describe('API Keys selectors', () => { + const mockKeys = getMultipleMockKeys(5); + const mockKeysIncludingExpired = getMultipleMockKeys(8); + + describe('getApiKeysCount', () => { + it('returns the correct count when includeExpired is false', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: false, + }; + const keyCount = getApiKeysCount(mockState); + expect(keyCount).toBe(5); + }); + + it('returns the correct count when includeExpired is true', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: true, + }; + const keyCount = getApiKeysCount(mockState); + expect(keyCount).toBe(8); + }); + }); + + describe('getApiKeys', () => { + describe('when includeExpired is false', () => { + it('should return all keys if no search query', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: false, + }; + const keys = getApiKeys(mockState); + expect(keys).toEqual(mockKeys); + }); + + it('should filter keys if search query exists', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '5', + hasFetched: true, + includeExpired: false, + }; + const keys = getApiKeys(mockState); + expect(keys.length).toEqual(1); + }); + }); + + describe('when includeExpired is true', () => { + it('should return all keys if no search query', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: true, + }; + const keys = getApiKeys(mockState); + expect(keys).toEqual(mockKeysIncludingExpired); + }); + + it('should filter keys if search query exists', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '5', + hasFetched: true, + includeExpired: true, + }; + const keys = getApiKeys(mockState); + expect(keys.length).toEqual(1); + }); + }); + }); + + describe('getIncludeExpired', () => { + it('returns true if includeExpired is true', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: true, + }; + const includeExpired = getIncludeExpired(mockState); + expect(includeExpired).toBe(true); + }); + + it('returns false if includeExpired is false', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: false, + }; + const includeExpired = getIncludeExpired(mockState); + expect(includeExpired).toBe(false); + }); + }); + + describe('getIncludeExpiredDisabled', () => { + it('returns true if there are no active keys but there are expired keys', () => { + const mockState: ApiKeysState = { + keys: [], + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: true, + }; + const includeExpiredDisabled = getIncludeExpiredDisabled(mockState); + expect(includeExpiredDisabled).toBe(true); + }); + + it('returns false otherwise', () => { + const mockState: ApiKeysState = { + keys: mockKeys, + keysIncludingExpired: mockKeysIncludingExpired, + searchQuery: '', + hasFetched: true, + includeExpired: false, + }; + const includeExpiredDisabled = getIncludeExpired(mockState); + expect(includeExpiredDisabled).toBe(false); + }); + }); +}); diff --git a/public/app/features/api-keys/state/selectors.ts b/public/app/features/api-keys/state/selectors.ts new file mode 100644 index 00000000..df05e856 --- /dev/null +++ b/public/app/features/api-keys/state/selectors.ts @@ -0,0 +1,18 @@ +import { ApiKeysState } from 'app/types'; + +export const getApiKeysCount = (state: ApiKeysState) => + state.includeExpired ? state.keysIncludingExpired.length : state.keys.length; + +export const getApiKeys = (state: ApiKeysState) => { + const regex = RegExp(state.searchQuery, 'i'); + const keysToFilter = state.includeExpired ? state.keysIncludingExpired : state.keys; + + return keysToFilter.filter((key) => { + return regex.test(key.name) || regex.test(key.role); + }); +}; + +export const getIncludeExpired = (state: ApiKeysState) => state.includeExpired; + +export const getIncludeExpiredDisabled = (state: ApiKeysState) => + state.keys.length === 0 && state.keysIncludingExpired.length > 0; diff --git a/public/app/features/canvas/element.ts b/public/app/features/canvas/element.ts new file mode 100644 index 00000000..90c6d4b6 --- /dev/null +++ b/public/app/features/canvas/element.ts @@ -0,0 +1,58 @@ +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'; + +/** + * This gets saved in panel json + * + * depending on the type, it may have additional config + * + * @alpha + */ +export interface CanvasElementOptions { + name: string; // configured unique display name + type: string; + + // Custom options depending on the type + config?: TConfig; + + // Standard options available for all elements + anchor?: Anchor; // defaults top, left, width and height + placement?: Placement; + background?: BackgroundConfig; + border?: LineConfig; +} + +export interface CanvasElementProps { + // Saved config + config: TConfig; + + // Calculated position info + width: number; + height: number; + + // Raw data + data?: TData; +} + +/** + * Canvas item builder + * + * @alpha + */ +export interface CanvasElementItem extends RegistryItem { + /** The default width/height to use when adding */ + defaultSize?: Placement; + + prepareData?: (ctx: DimensionContext, cfg: TConfig) => TData; + + /** Component used to draw */ + display: ComponentType>; + + getNewOptions: (options?: CanvasElementOptions) => Omit, 'type' | 'name'>; + + /** Build the configuraiton UI */ + registerOptionsUI?: PanelOptionsSupplier>; +} diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx new file mode 100644 index 00000000..482a432b --- /dev/null +++ b/public/app/features/canvas/elements/button.tsx @@ -0,0 +1,78 @@ +import React, { PureComponent } from 'react'; +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'; + +interface ButtonData { + text?: string; + api?: APIEditorConfig; +} + +interface ButtonConfig { + text?: TextDimensionConfig; + api?: APIEditorConfig; +} + +class ButtonDisplay extends PureComponent> { + render() { + const { data } = this.props; + const onClick = () => { + if (data?.api) { + callApi(data.api); + } + }; + + return ; + } +} + +export const buttonItem: CanvasElementItem = { + id: 'button', + name: 'Button', + description: 'Button', + + display: ButtonDisplay, + + defaultSize: { + width: 200, + height: 50, + }, + + getNewOptions: (options) => ({ + ...options, + }), + + // Called when data changes + prepareData: (ctx: DimensionContext, cfg: ButtonConfig) => { + const data: ButtonData = { + text: cfg?.text ? ctx.getText(cfg.text).value() : '', + api: cfg?.api ?? undefined, + }; + + return data; + }, + + // Heatmap overlay options + registerOptionsUI: (builder) => { + const category = ['Button']; + builder + .addCustomEditor({ + category, + id: 'textSelector', + path: 'config.text', + name: 'Text', + editor: TextDimensionEditor, + }) + .addCustomEditor({ + category, + id: 'apiSelector', + path: 'config.api', + name: 'API', + editor: APIEditor, + }); + }, +}; diff --git a/public/app/features/canvas/elements/droneFront.tsx b/public/app/features/canvas/elements/droneFront.tsx new file mode 100644 index 00000000..bd5a1ef9 --- /dev/null +++ b/public/app/features/canvas/elements/droneFront.tsx @@ -0,0 +1,113 @@ +import React, { FC } from 'react'; +import { css } from '@emotion/css'; +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'; + +interface DroneFrontData { + rollAngle?: number; +} + +interface DroneFrontConfig { + rollAngle?: ScalarDimensionConfig; +} + +const DroneFrontDisplay: FC> = (props) => { + const styles = useStyles2(getStyles); + + const { data } = props; + + const droneFrontTransformStyle = `rotate(${data?.rollAngle ? data.rollAngle : 0}deg)`; + + return ( + + ); +}; + +export const droneFrontItem: CanvasElementItem = { + id: 'droneFront', + name: 'Drone Front', + description: 'Drone front', + + display: DroneFrontDisplay, + + defaultSize: { + width: 100, + height: 100, + }, + + getNewOptions: (options) => ({ + ...options, + }), + + // Called when data changes + prepareData: (ctx: DimensionContext, cfg: DroneFrontConfig) => { + const data: DroneFrontData = { + rollAngle: cfg?.rollAngle ? ctx.getScalar(cfg.rollAngle).value() : 0, + }; + + return data; + }, + + registerOptionsUI: (builder) => { + const category = ['Drone Front']; + builder.addCustomEditor({ + category, + id: 'rollAngle', + path: 'config.rollAngle', + name: 'Roll Angle', + editor: ScalarDimensionEditor, + }); + }, +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + droneFront: css` + transition: transform 0.4s; + `, +}); diff --git a/public/app/features/canvas/elements/droneSide.tsx b/public/app/features/canvas/elements/droneSide.tsx new file mode 100644 index 00000000..a0857783 --- /dev/null +++ b/public/app/features/canvas/elements/droneSide.tsx @@ -0,0 +1,112 @@ +import React, { FC } from 'react'; +import { css } from '@emotion/css'; +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'; + +interface DroneSideData { + pitchAngle?: number; +} + +interface DroneSideConfig { + pitchAngle?: ScalarDimensionConfig; +} + +const DroneSideDisplay: FC> = (props) => { + const styles = useStyles2(getStyles); + + const { data } = props; + + const droneSidePitchTransformStyle = `rotate(${data?.pitchAngle ? data.pitchAngle : 0}deg)`; + + return ( + + ); +}; + +export const droneSideItem: CanvasElementItem = { + id: 'droneSide', + name: 'Drone Side', + description: 'Drone Side', + + display: DroneSideDisplay, + + defaultSize: { + width: 100, + height: 100, + }, + + getNewOptions: (options) => ({ + ...options, + }), + + // Called when data changes + prepareData: (ctx: DimensionContext, cfg: DroneSideConfig) => { + const data: DroneSideData = { + pitchAngle: cfg?.pitchAngle ? ctx.getScalar(cfg.pitchAngle).value() : 0, + }; + + return data; + }, + + registerOptionsUI: (builder) => { + const category = ['Drone Side']; + builder.addCustomEditor({ + category, + id: 'pitchAngle', + path: 'config.pitchAngle', + name: 'Pitch Angle', + editor: ScalarDimensionEditor, + }); + }, +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + droneSide: css` + transition: transform 0.4s; + `, +}); diff --git a/public/app/features/canvas/elements/droneTop.tsx b/public/app/features/canvas/elements/droneTop.tsx new file mode 100644 index 00000000..5d8eb7f6 --- /dev/null +++ b/public/app/features/canvas/elements/droneTop.tsx @@ -0,0 +1,173 @@ +import React, { FC } from 'react'; +import { css } from '@emotion/css'; +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'; + +interface DroneTopData { + bRightRotorRPM?: number; + bLeftRotorRPM?: number; + fRightRotorRPM?: number; + fLeftRotorRPM?: number; + yawAngle?: number; +} + +interface DroneTopConfig { + bRightRotorRPM?: ScalarDimensionConfig; + bLeftRotorRPM?: ScalarDimensionConfig; + fRightRotorRPM?: ScalarDimensionConfig; + fLeftRotorRPM?: ScalarDimensionConfig; + yawAngle?: ScalarDimensionConfig; +} + +const DroneTopDisplay: FC> = (props) => { + const styles = useStyles2(getStyles); + + const { data } = props; + + const fRightRotorAnimation = `spin ${data?.fRightRotorRPM ? 60 / Math.abs(data.fRightRotorRPM) : 0}s linear infinite`; + + const fLeftRotorAnimation = `spin ${data?.fLeftRotorRPM ? 60 / Math.abs(data.fLeftRotorRPM) : 0}s linear infinite`; + + const bRightRotorAnimation = `spin ${data?.bRightRotorRPM ? 60 / Math.abs(data.bRightRotorRPM) : 0}s linear infinite`; + + const bLeftRotorAnimation = `spin ${data?.bLeftRotorRPM ? 60 / Math.abs(data.bLeftRotorRPM) : 0}s linear infinite`; + + const droneTopTransformStyle = `rotate(${data?.yawAngle ? data.yawAngle : 0}deg)`; + + return ( + + ); +}; + +export const droneTopItem: CanvasElementItem = { + id: 'droneTop', + name: 'Drone Top', + description: 'Drone top', + + display: DroneTopDisplay, + + defaultSize: { + width: 100, + height: 100, + }, + + getNewOptions: (options) => ({ + ...options, + }), + + // Called when data changes + prepareData: (ctx: DimensionContext, cfg: DroneTopConfig) => { + const data: DroneTopData = { + bRightRotorRPM: cfg?.bRightRotorRPM ? ctx.getScalar(cfg.bRightRotorRPM).value() : 0, + bLeftRotorRPM: cfg?.bLeftRotorRPM ? ctx.getScalar(cfg.bLeftRotorRPM).value() : 0, + fRightRotorRPM: cfg?.fRightRotorRPM ? ctx.getScalar(cfg.fRightRotorRPM).value() : 0, + fLeftRotorRPM: cfg?.fLeftRotorRPM ? ctx.getScalar(cfg.fLeftRotorRPM).value() : 0, + yawAngle: cfg?.yawAngle ? ctx.getScalar(cfg.yawAngle).value() : 0, + }; + + return data; + }, + + registerOptionsUI: (builder) => { + const category = ['Drone Top']; + builder + .addCustomEditor({ + category, + id: 'yawAngle', + path: 'config.yawAngle', + name: 'Yaw Angle', + editor: ScalarDimensionEditor, + }) + .addCustomEditor({ + category, + id: 'fRightRotorRPM', + path: 'config.fRightRotorRPM', + name: 'Front Right Rotor RPM', + editor: ScalarDimensionEditor, + }) + .addCustomEditor({ + category, + id: 'fLeftRotorRPM', + path: 'config.fLeftRotorRPM', + name: 'Front Left Rotor RPM', + editor: ScalarDimensionEditor, + }) + .addCustomEditor({ + category, + id: 'bRightRotorRPM', + path: 'config.bRightRotorRPM', + name: 'Back Right Rotor RPM', + editor: ScalarDimensionEditor, + }) + .addCustomEditor({ + category, + id: 'bLeftRotorRPM', + path: 'config.bLeftRotorRPM', + name: 'Back Left Rotor RPM', + editor: ScalarDimensionEditor, + }); + }, +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + propeller: css` + transform-origin: 50% 50%; + transform-box: fill-box; + display: block; + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + `, + propellerCW: css` + animation-direction: normal; + `, + propellerCCW: css` + animation-direction: reverse; + `, +}); diff --git a/public/app/features/canvas/elements/icon.tsx b/public/app/features/canvas/elements/icon.tsx new file mode 100644 index 00000000..53652474 --- /dev/null +++ b/public/app/features/canvas/elements/icon.tsx @@ -0,0 +1,174 @@ +import React, { CSSProperties } from 'react'; + +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 { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor'; + +export interface IconConfig { + path?: ResourceDimensionConfig; + fill?: ColorDimensionConfig; + stroke?: LineConfig; + api?: APIEditorConfig; +} + +interface IconData { + path: string; + fill: string; + strokeColor?: string; + stroke?: number; + api?: APIEditorConfig; +} + +// When a stoke is defined, we want the path to be in page units +const svgStrokePathClass = css` + path { + vector-effect: non-scaling-stroke; + } +`; + +export function IconDisplay(props: CanvasElementProps) { + const { width, height, data } = props; + if (!data?.path) { + return null; + } + + const onClick = () => { + if (data?.api) { + callApi(data.api); + } + }; + + const svgStyle: CSSProperties = { + fill: data?.fill, + stroke: data?.strokeColor, + strokeWidth: data?.stroke, + }; + + return ( + + ); +} + +export const iconItem: CanvasElementItem = { + id: 'icon', + name: 'Icon', + description: 'SVG Icon display', + + display: IconDisplay, + + getNewOptions: (options) => ({ + placement: { + width: 50, + height: 50, + }, + ...options, + config: { + path: { + mode: ResourceDimensionMode.Fixed, + fixed: 'img/icons/unicons/question-circle.svg', + }, + fill: { fixed: '#FFF899' }, + }, + }), + + // Called when data changes + prepareData: (ctx: DimensionContext, cfg: IconConfig) => { + let path: string | undefined = undefined; + if (cfg.path) { + path = ctx.getResource(cfg.path).value(); + } + if (!path || !isString(path)) { + path = getPublicOrAbsoluteUrl('img/icons/unicons/question-circle.svg'); + } + + const data: IconData = { + path, + fill: cfg.fill ? ctx.getColor(cfg.fill).value() : '#CCC', + api: cfg?.api ?? undefined, + }; + + if (cfg.stroke?.width && cfg.stroke.color) { + if (cfg.stroke.width > 0) { + data.stroke = cfg.stroke?.width; + data.strokeColor = ctx.getColor(cfg.stroke.color).value(); + } + } + return data; + }, + + // Heatmap overlay options + registerOptionsUI: (builder) => { + const category = ['Icon']; + builder + .addCustomEditor({ + category, + id: 'iconSelector', + path: 'config.path', + name: 'SVG Path', + editor: ResourceDimensionEditor, + settings: { + resourceType: 'icon', + }, + }) + .addCustomEditor({ + category, + id: 'config.fill', + path: 'config.fill', + name: 'Fill color', + editor: ColorDimensionEditor, + settings: {}, + defaultValue: { + // Configured values + fixed: 'grey', + }, + }) + .addSliderInput({ + category, + path: 'config.stroke.width', + name: 'Stroke', + defaultValue: 0, + settings: { + min: 0, + max: 10, + }, + }) + .addCustomEditor({ + category, + id: 'config.stroke.color', + path: 'config.stroke.color', + name: 'Stroke color', + editor: ColorDimensionEditor, + settings: {}, + defaultValue: { + // Configured values + fixed: 'grey', + }, + showIf: (cfg) => Boolean(cfg?.config?.stroke?.width), + }) + .addCustomEditor({ + category, + id: 'apiSelector', + path: 'config.api', + name: 'API', + editor: APIEditor, + }); + }, +}; diff --git a/public/app/features/canvas/elements/notFound.tsx b/public/app/features/canvas/elements/notFound.tsx new file mode 100644 index 00000000..41dab2eb --- /dev/null +++ b/public/app/features/canvas/elements/notFound.tsx @@ -0,0 +1,36 @@ +import React, { PureComponent } from 'react'; + +import { CanvasElementItem, CanvasElementProps } from '../element'; + +interface NotFoundConfig { + orig?: any; +} + +class NotFoundDisplay extends PureComponent> { + render() { + const { config } = this.props; + return ( +

NOT FOUND:

{JSON.stringify(config, null, 2)}

+ ); + } +} + +export const notFoundItem: CanvasElementItem = { + id: 'not-found', + name: 'Not found', + description: 'Display when element type is not found in the registry', + + display: NotFoundDisplay, + + defaultSize: { + width: 100, + height: 100, + }, + + getNewOptions: () => ({ + config: {}, + }), +}; diff --git a/public/app/features/canvas/elements/textBox.tsx b/public/app/features/canvas/elements/textBox.tsx new file mode 100644 index 00000000..477cebca --- /dev/null +++ b/public/app/features/canvas/elements/textBox.tsx @@ -0,0 +1,163 @@ +import React, { PureComponent } from 'react'; +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', + Center = 'center', + Right = 'right', +} + +export enum VAlign { + Top = 'top', + Middle = 'middle', + Bottom = 'bottom', +} + +interface TextBoxData { + text?: string; + color?: string; + size?: number; // 0 or missing will "auto size" + align: Align; + valign: VAlign; +} + +interface TextBoxConfig { + text?: TextDimensionConfig; + color?: ColorDimensionConfig; + size?: number; // 0 or missing will "auto size" + align: Align; + valign: VAlign; +} + +class TextBoxDisplay extends PureComponent> { + render() { + const { data } = this.props; + const styles = getStyles(config.theme2, data); + return ( +

+ {data?.text} +

+ ); + } +} +const getStyles = stylesFactory((theme: GrafanaTheme2, data) => ({ + container: css` + position: absolute; + height: 100%; + width: 100%; + display: table; + `, + span: css` + display: table-cell; + vertical-align: ${data.valign}; + text-align: ${data.align}; + font-size: ${data?.size}px; + color: ${data?.color}; + `, +})); +export const textBoxItem: CanvasElementItem = { + id: 'text-box', + name: 'Text', + description: 'Text box', + + display: TextBoxDisplay, + + defaultSize: { + width: 240, + height: 160, + }, + + getNewOptions: (options) => ({ + background: { + color: { + fixed: 'grey', + }, + }, + ...options, + config: { + align: Align.Left, + valign: VAlign.Middle, + }, + }), + + // Called when data changes + prepareData: (ctx: DimensionContext, cfg: TextBoxConfig) => { + const data: TextBoxData = { + text: cfg.text ? ctx.getText(cfg.text).value() : '', + align: cfg.align ?? Align.Center, + valign: cfg.valign ?? VAlign.Middle, + size: cfg.size, + }; + + if (cfg.color) { + data.color = ctx.getColor(cfg.color).value(); + } + + return data; + }, + + // Heatmap overlay options + registerOptionsUI: (builder) => { + const category = ['Text box']; + builder + .addCustomEditor({ + category, + id: 'textSelector', + path: 'config.text', + name: 'Text', + editor: TextDimensionEditor, + }) + .addCustomEditor({ + category, + id: 'config.color', + path: 'config.color', + name: 'Text color', + editor: ColorDimensionEditor, + settings: {}, + defaultValue: {}, + }) + .addRadio({ + category, + path: 'config.align', + name: 'Align text', + settings: { + options: [ + { value: Align.Left, label: 'Left' }, + { value: Align.Center, label: 'Center' }, + { value: Align.Right, label: 'Right' }, + ], + }, + defaultValue: Align.Left, + }) + .addRadio({ + category, + path: 'config.valign', + name: 'Vertical align', + settings: { + options: [ + { value: VAlign.Top, label: 'Top' }, + { value: VAlign.Middle, label: 'Middle' }, + { value: VAlign.Bottom, label: 'Bottom' }, + ], + }, + defaultValue: VAlign.Middle, + }) + .addNumberInput({ + category, + path: 'config.size', + name: 'Text size', + settings: { + placeholder: 'Auto', + }, + }); + }, +}; diff --git a/public/app/features/canvas/elements/windTurbine.tsx b/public/app/features/canvas/elements/windTurbine.tsx new file mode 100644 index 00000000..e0b636ab --- /dev/null +++ b/public/app/features/canvas/elements/windTurbine.tsx @@ -0,0 +1,118 @@ +import React, { FC } from 'react'; +import { css } from '@emotion/css'; +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'; + +interface WindTurbineData { + rpm?: number; +} + +interface WindTurbineConfig { + rpm?: ScalarDimensionConfig; +} + +const WindTurbineDisplay: FC> = (props) => { + const styles = useStyles2(getStyles); + + const { data } = props; + + const windTurbineAnimation = `spin ${data?.rpm ? 60 / Math.abs(data.rpm) : 0}s linear infinite`; + + return ( + + ); +}; + +export const windTurbineItem: CanvasElementItem = { + id: 'windTurbine', + name: 'Wind Turbine', + description: 'Spinny spinny', + + display: WindTurbineDisplay, + + defaultSize: { + width: 100, + height: 100, + }, + + getNewOptions: (options) => ({ + ...options, + }), + + // Called when data changes + prepareData: (ctx: DimensionContext, cfg: WindTurbineConfig) => { + const data: WindTurbineData = { + rpm: cfg?.rpm ? ctx.getScalar(cfg.rpm).value() : 0, + }; + + return data; + }, + + registerOptionsUI: (builder) => { + const category = ['Wind Turbine']; + builder.addCustomEditor({ + category, + id: 'rpm', + path: 'config.rpm', + name: 'RPM', + editor: ScalarDimensionEditor, + }); + }, +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + blade: css` + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + transform-origin: 94.663px 94.663px; + transform: rotate(15deg); + `, +}); diff --git a/public/app/features/canvas/group.ts b/public/app/features/canvas/group.ts new file mode 100644 index 00000000..e456a406 --- /dev/null +++ b/public/app/features/canvas/group.ts @@ -0,0 +1,7 @@ +import { CanvasElementOptions } from './element'; + +export interface CanvasGroupOptions extends CanvasElementOptions { + type: 'group'; + elements: CanvasElementOptions[]; + // layout? // absolute, list, grid? +} diff --git a/public/app/features/canvas/index.ts b/public/app/features/canvas/index.ts new file mode 100644 index 00000000..1bce0d41 --- /dev/null +++ b/public/app/features/canvas/index.ts @@ -0,0 +1,4 @@ +export * from './types'; +export * from './element'; +export { CanvasGroupOptions } from './group'; +export * from './registry'; diff --git a/public/app/features/canvas/registry.ts b/public/app/features/canvas/registry.ts new file mode 100644 index 00000000..6bbf24f5 --- /dev/null +++ b/public/app/features/canvas/registry.ts @@ -0,0 +1,25 @@ +import { Registry } from '@grafana/data'; +import { CanvasElementItem, CanvasElementOptions } from './element'; +import { buttonItem } from './elements/button'; +import { droneFrontItem } from './elements/droneFront'; +import { droneSideItem } from './elements/droneSide'; +import { droneTopItem } from './elements/droneTop'; +import { iconItem } from './elements/icon'; +import { textBoxItem } from './elements/textBox'; +import { windTurbineItem } from './elements/windTurbine'; + +export const DEFAULT_CANVAS_ELEMENT_CONFIG: CanvasElementOptions = { + ...iconItem.getNewOptions(), + type: iconItem.id, + name: `Element 1`, +}; + +export const canvasElementRegistry = new Registry(() => [ + iconItem, // default for now + textBoxItem, + buttonItem, + droneTopItem, + droneFrontItem, + droneSideItem, + windTurbineItem, +]); diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx new file mode 100644 index 00000000..51e06c08 --- /dev/null +++ b/public/app/features/canvas/runtime/element.tsx @@ -0,0 +1,344 @@ +import React, { CSSProperties } from 'react'; +import { OnDrag, OnResize } from 'react-moveable/declaration/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 { GroupState } from './group'; +import { LayerElement } from 'app/core/components/Layers/types'; +import { Scene } from './scene'; + +let counter = 0; + +export class ElementState implements LayerElement { + // UID necessary for moveable to work (for now) + readonly UID = counter++; + revId = 0; + sizeStyle: CSSProperties = {}; + dataStyle: CSSProperties = {}; + + // Filled in by ref + 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; + + const scene = this.getScene(); + if (!options.name) { + const newName = scene?.getNextElementName(); + options.name = newName ?? fallbackName; + } + scene?.byName.set(options.name, this); + } + + private getScene(): Scene | undefined { + let trav = this.parent; + while (trav) { + if (trav.isRoot()) { + return trav.scene; + break; + } + trav = trav.parent; + } + + return undefined; + } + + getName() { + 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; + } + + 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, + position: 'absolute', + }; + } + + updateData(ctx: DimensionContext) { + if (this.item.prepareData) { + this.data = this.item.prepareData(ctx, this.options.config); + this.revId++; // rerender + } + + const { background, border } = this.options; + const css: CSSProperties = {}; + if (background) { + if (background.color) { + const color = ctx.getColor(background.color); + css.backgroundColor = color.value(); + } + if (background.image) { + const image = ctx.getResource(background.image); + if (image) { + const v = image.value(); + if (v) { + css.backgroundImage = `url("${v}")`; + switch (background.size ?? BackgroundImageSize.Contain) { + case BackgroundImageSize.Contain: + css.backgroundSize = 'contain'; + css.backgroundRepeat = 'no-repeat'; + break; + case BackgroundImageSize.Cover: + css.backgroundSize = 'cover'; + css.backgroundRepeat = 'no-repeat'; + break; + case BackgroundImageSize.Original: + css.backgroundRepeat = 'no-repeat'; + break; + case BackgroundImageSize.Tile: + css.backgroundRepeat = 'repeat'; + break; + case BackgroundImageSize.Fill: + css.backgroundSize = '100% 100%'; + break; + } + } + } + } + } + + if (border && border.color && border.width) { + const color = ctx.getColor(border.color); + css.borderWidth = border.width; + css.borderStyle = 'solid'; + css.borderColor = color.value(); + + // Move the image to inside the border + if (css.backgroundImage) { + css.backgroundOrigin = 'padding-box'; + } + } + + this.dataStyle = css; + } + + /** Recursively visit all nodes */ + visit(visitor: (v: ElementState) => void) { + visitor(this); + } + + onChange(options: CanvasElementOptions) { + if (this.item.id !== options.type) { + this.item = canvasElementRegistry.getIfExists(options.type) ?? notFoundItem; + } + + // rename handling + const oldName = this.options.name; + const newName = options.name; + + this.revId++; + this.options = { ...options }; + let trav = this.parent; + while (trav) { + if (trav.isRoot()) { + trav.scene.save(); + break; + } + trav.revId++; + trav = trav.parent; + } + + const scene = this.getScene(); + if (oldName !== newName && scene) { + scene.byName.delete(oldName); + scene.byName.set(newName, this); + } + } + + getSaveModel() { + return { ...this.options }; + } + + initElement = (target: HTMLDivElement) => { + this.div = target; + }; + + 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`; + } + }; + + // 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 style = event.target.style; + const deltaX = event.delta[0]; + const deltaY = event.delta[1]; + const dirLR = event.direction[0]; + 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`; + } + } else { + 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`; + } else { + 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`; + } else { + 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`; + } else { + placement.height! = event.height; + style.height = `${placement.height}px`; + } + } + + this.width = event.width; + this.height = event.height; + }; + + render() { + const { item } = this; + return ( +

+ +

+ ); + } +} diff --git a/public/app/features/canvas/runtime/group.tsx b/public/app/features/canvas/runtime/group.tsx new file mode 100644 index 00000000..d331d745 --- /dev/null +++ b/public/app/features/canvas/runtime/group.tsx @@ -0,0 +1,168 @@ +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 { RootElement } from './root'; + +export const groupItemDummy: CanvasElementItem = { + id: 'group', + name: 'Group', + description: 'Group', + + getNewOptions: () => ({ + config: {}, + }), + + // eslint-disable-next-line react/display-name + display: () => { + return

GROUP!

; + }, +}; + +export class GroupState extends ElementState { + elements: ElementState[] = []; + scene: Scene; + + constructor(public options: CanvasGroupOptions, scene: Scene, public parent?: GroupState) { + super(groupItemDummy, options, parent); + + this.scene = scene; + + // mutate options object + let { elements } = this.options; + if (!elements) { + this.options.elements = elements = []; + } + + for (const c of elements) { + if (c.type === 'group') { + this.elements.push(new GroupState(c as CanvasGroupOptions, scene, this)); + } else { + const item = canvasElementRegistry.getIfExists(c.type) ?? notFoundItem; + this.elements.push(new ElementState(item, c, this)); + } + } + } + + isRoot(): this is RootElement { + 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) { + elem.updateData(ctx); + } + } + + // used in the layer editor + reorder(startIndex: number, endIndex: number) { + const result = Array.from(this.elements); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + this.elements = result; + + this.reinitializeMoveable(); + } + + reinitializeMoveable() { + // Need to first clear current selection and then re-init moveable with slight delay + this.scene.clearCurrentSelection(); + setTimeout(() => this.scene.initMoveable(true), 100); + } + + // ??? or should this be on the element directly? + // are actions scoped to layers? + doAction = (action: LayerActionID, element: ElementState, updateName = true) => { + switch (action) { + case LayerActionID.Delete: + this.elements = this.elements.filter((e) => e !== element); + this.scene.byName.delete(element.options.name); + this.scene.save(); + this.reinitializeMoveable(); + break; + case LayerActionID.Duplicate: + if (element.item.id === 'group') { + console.log('Can not duplicate groups (yet)', action, element); + 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 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(); + } + this.elements.push(copy); + this.scene.byName.set(copy.options.name, copy); + this.scene.save(); + this.reinitializeMoveable(); + break; + default: + console.log('DO action', action, element); + return; + } + }; + + render() { + return ( +

+ {this.elements.map((v) => v.render())} +

+ ); + } + + /** Recursively visit all nodes */ + visit(visitor: (v: ElementState) => void) { + super.visit(visitor); + for (const e of this.elements) { + visitor(e); + } + } + + getSaveModel() { + return { + ...this.options, + elements: this.elements.map((v) => v.getSaveModel()), + }; + } +} diff --git a/public/app/features/canvas/runtime/root.tsx b/public/app/features/canvas/runtime/root.tsx new file mode 100644 index 00000000..25b45a8b --- /dev/null +++ b/public/app/features/canvas/runtime/root.tsx @@ -0,0 +1,38 @@ +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); + } + + 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++; + this.options = { ...options } as CanvasGroupOptions; + this.changeCallback(); + } + + getSaveModel() { + const { placement, anchor, ...rest } = this.options; + + return { + ...rest, // everything except placement & anchor + elements: this.elements.map((v) => v.getSaveModel()), + } as CanvasGroupOptions; + } +} diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx new file mode 100644 index 00000000..da2ad559 --- /dev/null +++ b/public/app/features/canvas/runtime/scene.tsx @@ -0,0 +1,361 @@ +import React, { CSSProperties } from 'react'; +import { css } from '@emotion/css'; +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 { + ColorDimensionConfig, + ResourceDimensionConfig, + ScaleDimensionConfig, + TextDimensionConfig, + DimensionContext, + ScalarDimensionConfig, +} from 'app/features/dimensions'; +import { + getColorDimensionFromData, + getScaleDimensionFromData, + getResourceDimensionFromData, + 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'; + +export interface SelectionParams { + targets: Array; + group?: GroupState; +} + +export class Scene { + styles = getStyles(config.theme2); + readonly selection = new ReplaySubject(1); + readonly moved = new Subject(); // called after resize/drag for editor updates + readonly byName = new Map(); + root: RootElement; + + revId = 0; + + width = 0; + height = 0; + style: CSSProperties = {}; + data?: PanelData; + selecto?: Selecto; + moveable?: Moveable; + div?: HTMLDivElement; + currentLayer?: GroupState; + + constructor(cfg: CanvasGroupOptions, enableEditing: boolean, public onSave: (cfg: CanvasGroupOptions) => void) { + this.root = this.load(cfg, enableEditing); + } + + getNextElementName = (isGroup = false) => { + const label = isGroup ? 'Group' : 'Element'; + let idx = this.byName.size + 1; + + const max = idx + 100; + while (true && idx < max) { + const name = `${label} ${idx++}`; + if (!this.byName.has(name)) { + return name; + } + } + + return `${label} ${Date.now()}`; + }; + + canRename = (v: string) => { + return !this.byName.has(v); + }; + + load(cfg: CanvasGroupOptions, enableEditing: boolean) { + this.root = new RootElement( + cfg ?? { + type: 'group', + elements: [DEFAULT_CANVAS_ELEMENT_CONFIG], + }, + this, + this.save // callback when changes are made + ); + + setTimeout(() => { + if (this.div) { + // If editing is enabled, clear selecto instance + const destroySelecto = enableEditing; + this.initMoveable(destroySelecto, enableEditing); + } + }, 100); + return this.root; + } + + context: DimensionContext = { + getColor: (color: ColorDimensionConfig) => getColorDimensionFromData(this.data, color), + getScale: (scale: ScaleDimensionConfig) => getScaleDimensionFromData(this.data, scale), + getScalar: (scalar: ScalarDimensionConfig) => getScalarDimensionFromData(this.data, scalar), + getText: (text: TextDimensionConfig) => getTextDimensionFromData(this.data, text), + getResource: (res: ResourceDimensionConfig) => getResourceDimensionFromData(this.data, res), + }; + + updateData(data: PanelData) { + this.data = data; + this.root.updateData(this.context); + } + + updateSize(width: number, height: number) { + this.width = width; + this.height = height; + this.style = { width, height }; + this.root.updateSize(width, height); + + if (this.selecto?.getSelectedTargets().length) { + this.clearCurrentSelection(); + } + } + + groupSelection() { + this.selection.pipe(first()).subscribe((currentSelectedElements) => { + const currentLayer = currentSelectedElements[0].parent!; + + const newLayer = new GroupState( + { + type: 'group', + name: this.getNextElementName(true), + elements: [], + }, + this, + currentSelectedElements[0].parent + ); + + currentSelectedElements.forEach((element: ElementState) => { + currentLayer.doAction(LayerActionID.Delete, element); + newLayer.doAction(LayerActionID.Duplicate, element, false); + }); + + currentLayer.elements.push(newLayer); + + this.byName.set(newLayer.getName(), newLayer); + + this.save(); + }); + } + + clearCurrentSelection() { + let event: MouseEvent = new MouseEvent('click'); + this.selecto?.clickTarget(event, this.div); + } + + updateCurrentLayer(newLayer: GroupState) { + this.currentLayer = newLayer; + this.clearCurrentSelection(); + 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 = () => { + this.onSave(this.root.getSaveModel()); + }; + + private findElementByTarget = (target: HTMLElement | SVGElement): ElementState | undefined => { + // We will probably want to add memoization to this as we are calling on drag / resize + + const stack = [...this.root.elements]; + while (stack.length > 0) { + const currentElement = stack.shift(); + + if (currentElement && currentElement.div && currentElement.div === target) { + return currentElement; + } + + const nestedElements = currentElement instanceof GroupState ? currentElement.elements : []; + for (const nestedElement of nestedElements) { + stack.unshift(nestedElement); + } + } + + return undefined; + }; + + setRef = (sceneContainer: HTMLDivElement) => { + this.div = sceneContainer; + }; + + select = (selection: SelectionParams) => { + if (this.selecto) { + this.selecto.setSelectedTargets(selection.targets); + this.updateSelection(selection); + } + }; + + private updateSelection = (selection: SelectionParams) => { + this.moveable!.target = selection.targets; + + if (selection.group) { + this.selection.next([selection.group]); + } else { + const s = selection.targets.map((t) => this.findElementByTarget(t)!); + this.selection.next(s); + } + }; + + private generateTargetElements = (rootElements: ElementState[]): HTMLDivElement[] => { + let targetElements: HTMLDivElement[] = []; + + const stack = [...rootElements]; + while (stack.length > 0) { + const currentElement = stack.shift(); + + if (currentElement && currentElement.div) { + targetElements.push(currentElement.div); + } + + const nestedElements = currentElement instanceof GroupState ? currentElement.elements : []; + for (const nestedElement of nestedElements) { + stack.unshift(nestedElement); + } + } + + return targetElements; + }; + + initMoveable = (destroySelecto = false, allowChanges = true) => { + const targetElements = this.generateTargetElements(this.root.elements); + + if (destroySelecto) { + this.selecto?.destroy(); + } + + this.selecto = new Selecto({ + container: this.div, + selectableTargets: targetElements, + selectByClick: true, + }); + + this.moveable = new Moveable(this.div!, { + draggable: allowChanges, + resizable: allowChanges, + origin: false, + }) + .on('clickGroup', (event) => { + this.selecto!.clickTarget(event.inputEvent, event.inputTarget); + }) + .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); + } + }) + .on('resize', (event) => { + const targetedElement = this.findElementByTarget(event.target); + targetedElement!.applyResize(event); + this.moved.next(Date.now()); // TODO only on end + }) + .on('resizeGroup', (e) => { + e.events.forEach((event) => { + const targetedElement = this.findElementByTarget(event.target); + targetedElement!.applyResize(event); + }); + this.moved.next(Date.now()); // TODO only on end + }); + + let targets: Array = []; + this.selecto!.on('dragStart', (event) => { + const selectedTarget = event.inputEvent.target; + + const isTargetMoveableElement = + this.moveable!.isMoveableElement(selectedTarget) || + targets.some((target) => target === selectedTarget || target.contains(selectedTarget)); + + if (isTargetMoveableElement) { + // Prevent drawing selection box when selected target is a moveable element + event.stop(); + } + }).on('selectEnd', (event) => { + targets = event.selected; + this.updateSelection({ targets }); + + if (event.isDragStart) { + event.inputEvent.preventDefault(); + setTimeout(() => { + this.moveable!.dragStart(event.inputEvent); + }); + } + }); + }; + + render() { + return ( +

+ {this.root.render()} +

+ ); + } +} + +const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ + wrap: css` + overflow: hidden; + position: relative; + `, + + toolbar: css` + position: absolute; + bottom: 0; + margin: 10px; + `, +})); diff --git a/public/app/features/canvas/types.ts b/public/app/features/canvas/types.ts new file mode 100644 index 00000000..872e149c --- /dev/null +++ b/public/app/features/canvas/types.ts @@ -0,0 +1,37 @@ +import { ColorDimensionConfig, ResourceDimensionConfig } from 'app/features/dimensions/types'; + +export interface Placement { + top?: number; + left?: number; + right?: number; + bottom?: number; + + width?: number; + height?: number; +} + +export interface Anchor { + top?: boolean; + left?: boolean; + right?: boolean; + bottom?: boolean; +} + +export enum BackgroundImageSize { + Original = 'original', + Contain = 'contain', + Cover = 'cover', + Fill = 'fill', + Tile = 'tile', +} + +export interface BackgroundConfig { + color?: ColorDimensionConfig; + image?: ResourceDimensionConfig; + size?: BackgroundImageSize; +} + +export interface LineConfig { + color?: ColorDimensionConfig; + width?: number; +} diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx new file mode 100644 index 00000000..4ce64244 --- /dev/null +++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { AddPanelWidgetUnconnected as AddPanelWidget, Props } from './AddPanelWidget'; +import { DashboardModel, PanelModel } from '../../state'; + +const getTestContext = (propOverrides?: object) => { + const props: Props = { + dashboard: {} as DashboardModel, + panel: {} as PanelModel, + addPanel: jest.fn() as any, + }; + Object.assign(props, propOverrides); + return render(); +}; + +describe('AddPanelWidget', () => { + it('should render component without error', () => { + expect(() => { + getTestContext(); + }); + }); + + it('should render the add panel actions', () => { + getTestContext(); + expect(screen.getByText(/Add a new panel/i)).toBeInTheDocument(); + expect(screen.getByText(/Add a new row/i)).toBeInTheDocument(); + expect(screen.getByText(/Add a panel from the panel library/i)).toBeInTheDocument(); + }); +}); diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx new file mode 100644 index 00000000..a059a678 --- /dev/null +++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx @@ -0,0 +1,295 @@ +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 tinycolor from 'tinycolor2'; +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 config from 'app/core/config'; +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'; + +export type PanelPluginInfo = { id: any; defaults: { gridPos: { w: any; h: any }; title: any } }; + +export interface OwnProps { + panel: PanelModel; + dashboard: DashboardModel; +} + +export interface DispatchProps { + addPanel: typeof addPanel; +} + +export type Props = OwnProps & DispatchProps; + +const getCopiedPanelPlugins = () => { + const panels = chain(config.panels) + .filter({ hideFromList: false }) + .map((item) => item) + .value(); + const copiedPanels = []; + + const copiedPanelJson = store.get(LS_PANEL_COPY_KEY); + if (copiedPanelJson) { + const copiedPanel = JSON.parse(copiedPanelJson); + const pluginInfo: any = find(panels, { id: copiedPanel.type }); + if (pluginInfo) { + const pluginCopy = cloneDeep(pluginInfo); + pluginCopy.name = copiedPanel.title; + pluginCopy.sort = -1; + pluginCopy.defaults = copiedPanel; + copiedPanels.push(pluginCopy); + } + } + + return sortBy(copiedPanels, 'sort'); +}; + +export const AddPanelWidgetUnconnected: React.FC = ({ panel, dashboard }) => { + const [addPanelView, setAddPanelView] = useState(false); + + const onCancelAddPanel = (evt: React.MouseEvent) => { + evt.preventDefault(); + dashboard.removePanel(panel); + }; + + const onBack = () => { + setAddPanelView(false); + }; + + const onCreateNewPanel = () => { + const { gridPos } = panel; + + const newPanel: Partial = { + type: 'timeseries', + title: 'Panel Title', + gridPos: { x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h }, + }; + + dashboard.addPanel(newPanel); + dashboard.removePanel(panel); + + locationService.partial({ editPanel: newPanel.id }); + }; + + const onPasteCopiedPanel = (panelPluginInfo: PanelPluginInfo) => { + const { gridPos } = panel; + + const newPanel: any = { + type: panelPluginInfo.id, + title: 'Panel Title', + gridPos: { + x: gridPos.x, + y: gridPos.y, + w: panelPluginInfo.defaults.gridPos.w, + h: panelPluginInfo.defaults.gridPos.h, + }, + }; + + // apply panel template / defaults + if (panelPluginInfo.defaults) { + defaults(newPanel, panelPluginInfo.defaults); + newPanel.title = panelPluginInfo.defaults.title; + store.delete(LS_PANEL_COPY_KEY); + } + + dashboard.addPanel(newPanel); + dashboard.removePanel(panel); + }; + + const onAddLibraryPanel = (panelInfo: LibraryElementDTO) => { + const { gridPos } = panel; + + const newPanel: PanelModel = { + ...panelInfo.model, + gridPos, + libraryPanel: toPanelModelLibraryPanel(panelInfo), + }; + + dashboard.addPanel(newPanel); + dashboard.removePanel(panel); + }; + + const onCreateNewRow = () => { + const newRow: any = { + type: 'row', + title: 'Row title', + gridPos: { x: 0, y: 0 }, + }; + + dashboard.addPanel(newRow); + dashboard.removePanel(panel); + }; + + const styles = useStyles2(getStyles); + const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []); + + return ( +

+ + {addPanelView ? 'Add panel from panel library' : 'Add panel'} + + {addPanelView ? ( + + ) : ( +

+ { + reportInteraction('Create new panel'); + onCreateNewPanel(); + }} + > + Add a new panel + + { + reportInteraction('Create new row'); + onCreateNewRow(); + }} + > + Add a new row + + { + reportInteraction('Add a panel from the panel library'); + setAddPanelView(true); + }} + > + Add a panel from the panel library + + {copiedPanelPlugins.length === 1 && ( + { + reportInteraction('Paste panel from clipboard'); + onPasteCopiedPanel(copiedPanelPlugins[0]); + }} + > + Paste panel from clipboard + + )} +

+ )} +

+ ); +}; + +const mapDispatchToProps: MapDispatchToProps = { addPanel }; + +export const AddPanelWidget = connect(undefined, mapDispatchToProps)(AddPanelWidgetUnconnected); + +interface AddPanelWidgetHandleProps { + onCancel: (e: React.MouseEvent) => void; + onBack?: () => void; + children?: string; + styles: AddPanelStyles; +} + +const AddPanelWidgetHandle: React.FC = ({ children, onBack, onCancel, styles }) => { + return ( +

+ {onBack && ( +

+ +

+ )} + {!onBack && ( +

+ +

+ )} + {children && {children}} +

+ +

+ ); +}; + +const getStyles = (theme: GrafanaTheme2) => { + const pulsate = keyframes` + 0% {box-shadow: 0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main};} + 50% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${tinycolor( + theme.colors.primary.main + ) + .darken(20) + .toHexString()};} + 100% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${theme.colors.primary.main};} + `; + + return { + // wrapper is used to make sure box-shadow animation isn't cut off in dashboard page + wrapper: css` + height: 100%; + padding-top: ${theme.spacing(0.5)}; + `, + callToAction: css` + overflow: hidden; + outline: 2px dotted transparent; + outline-offset: 2px; + box-shadow: 0 0 0 2px black, 0 0 0px 4px #1f60c4; + animation: ${pulsate} 2s ease infinite; + `, + actionsWrapper: css` + height: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: ${theme.spacing(1)}; + row-gap: ${theme.spacing(1)}; + padding: ${theme.spacing(0, 1, 1, 1)}; + + // This is to make the last action full width (if by itself) + & > div:nth-child(2n-1):nth-last-of-type(1) { + grid-column: span 2; + } + `, + headerRow: css` + display: flex; + align-items: center; + height: 38px; + flex-shrink: 0; + width: 100%; + font-size: ${theme.typography.fontSize}; + font-weight: ${theme.typography.fontWeightMedium}; + padding-left: ${theme.spacing(1)}; + transition: background-color 0.1s ease-in-out; + cursor: move; + + &:hover { + background: ${theme.colors.background.secondary}; + } + `, + backButton: css` + display: flex; + align-items: center; + cursor: pointer; + padding-left: ${theme.spacing(0.5)}; + width: ${theme.spacing(4)}; + `, + noMargin: css` + margin: 0; + `, + }; +}; + +type AddPanelStyles = ReturnType; diff --git a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss new file mode 100644 index 00000000..ccb5d7fe --- /dev/null +++ b/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss @@ -0,0 +1,78 @@ +.add-panel-widget-container { + height: 100%; +} + +.add-panel-widget { + height: 100%; +} + +.add-panel-widget__header { + top: 0; + position: absolute; + padding: 0 8px; + display: flex; + align-items: center; + width: 100%; + cursor: move; + background: $page-header-bg; + box-shadow: $page-header-shadow; + border-bottom: 1px solid $page-header-border-color; + + .gicon { + font-size: 30px; + margin-right: $space-md; + } + + &:hover { + transition: background-color 0.1s ease-in-out; + background-color: $panel-header-hover-bg; + } +} + +.add-panel-widget__title { + font-size: $font-size-md; + font-weight: $font-weight-semi-bold; + margin-right: $space-xl; +} + +.add-panel-widget__link { + margin: 0 $space-sm; + width: 170px; + height: 88px !important; + flex-direction: column !important; +} + +.add-panel-widget__icon { + margin-bottom: $space-sm; + + .gicon { + color: white; + height: 44px; + width: 53px; + position: relative; + left: 5px; + } +} + +.add-panel-widget__create { + display: inherit; + margin-bottom: $space-lg; + // this is to have the big button appear centered + margin-top: 55px; +} + +.add-panel-widget__actions { + display: inherit; +} + +.add-panel-widget__action { + margin: 0 $space-xs; +} + +.add-panel-widget__btn-container { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} diff --git a/public/app/features/dashboard/components/AddPanelWidget/index.ts b/public/app/features/dashboard/components/AddPanelWidget/index.ts new file mode 100644 index 00000000..b96948ab --- /dev/null +++ b/public/app/features/dashboard/components/AddPanelWidget/index.ts @@ -0,0 +1 @@ +export { AddPanelWidget } from './AddPanelWidget'; diff --git a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx new file mode 100644 index 00000000..0ef7279c --- /dev/null +++ b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { AnnotationQuery, DataSourceApi } from '@grafana/data'; +import { AngularComponent, getAngularLoader } from '@grafana/runtime'; + +export interface Props { + annotation: AnnotationQuery; + datasource: DataSourceApi; + onChange: (annotation: AnnotationQuery) => void; +} + +interface ScopeProps { + ctrl: { + currentDatasource: DataSourceApi; + currentAnnotation: AnnotationQuery; + ignoreNextWatcherFiring: boolean; + }; +} + +export class AngularEditorLoader extends React.PureComponent { + ref: HTMLDivElement | null = null; + angularComponent?: AngularComponent; + scopeProps?: ScopeProps; + + componentWillUnmount() { + if (this.angularComponent) { + this.angularComponent.destroy(); + } + } + + componentDidMount() { + if (this.ref) { + this.loadAngular(); + } + } + + componentDidUpdate(prevProps: Props) { + if (prevProps.datasource !== this.props.datasource) { + this.loadAngular(); + } + + if (this.scopeProps && this.scopeProps.ctrl.currentAnnotation !== this.props.annotation) { + this.scopeProps.ctrl.ignoreNextWatcherFiring = true; + this.scopeProps.ctrl.currentAnnotation = this.props.annotation; + this.angularComponent?.digest(); + } + } + + loadAngular() { + if (this.angularComponent) { + this.angularComponent.destroy(); + this.scopeProps = undefined; + } + + const loader = getAngularLoader(); + // NOTE: BE CAREFUL HERE + // If this template contains an ng-if, then it won't be removed correctly by AngularLoader. + // The compiledElem will only contain the single comment node (e.g. ) + const template = ` `; + const scopeProps = { + ctrl: { + currentDatasource: this.props.datasource, + currentAnnotation: this.props.annotation, + ignoreNextWatcherFiring: false, + }, + }; + + this.angularComponent = loader.load(this.ref, scopeProps, template); + this.angularComponent.digest(); + this.angularComponent.getScope().$watch(() => { + // To avoid recursive loop when the annotation is updated from outside angular in componentDidUpdate + if (scopeProps.ctrl.ignoreNextWatcherFiring) { + scopeProps.ctrl.ignoreNextWatcherFiring = false; + return; + } + + this.props.onChange(scopeProps.ctrl.currentAnnotation); + }); + + this.scopeProps = scopeProps; + } + + render() { + return

(this.ref = element)} />; + } +} diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx new file mode 100644 index 00000000..10ab9345 --- /dev/null +++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx @@ -0,0 +1,114 @@ +import React, { useState } from 'react'; +import { Checkbox, CollapsableSection, ColorValueEditor, Field, HorizontalGroup, Input } from '@grafana/ui'; +import { DashboardModel } from '../../state/DashboardModel'; +import { AnnotationQuery, DataSourceInstanceSettings } 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 { selectors } from '@grafana/e2e-selectors'; + +export const newAnnotation: AnnotationQuery = { + name: 'New annotation', + enable: true, + datasource: null, + iconColor: 'red', +}; + +type Props = { + editIdx: number; + dashboard: DashboardModel; +}; + +export const AnnotationSettingsEdit: React.FC = ({ editIdx, dashboard }) => { + const [annotation, setAnnotation] = useState(editIdx !== null ? dashboard.annotations.list[editIdx] : newAnnotation); + + const { value: ds } = useAsync(() => { + return getDataSourceSrv().get(annotation.datasource); + }, [annotation.datasource]); + + const onUpdate = (annotation: AnnotationQuery) => { + const list = [...dashboard.annotations.list]; + list.splice(editIdx, 1, annotation); + setAnnotation(annotation); + dashboard.annotations.list = list; + }; + + const onNameChange = (ev: React.FocusEvent) => { + onUpdate({ + ...annotation, + name: ev.currentTarget.value, + }); + }; + + const onDataSourceChange = (ds: DataSourceInstanceSettings) => { + onUpdate({ + ...annotation, + datasource: ds.name, + }); + }; + + const onChange = (ev: React.FocusEvent) => { + const target = ev.currentTarget; + onUpdate({ + ...annotation, + [target.name]: target.type === 'checkbox' ? target.checked : target.value, + }); + }; + + const onColorChange = (color: string) => { + onUpdate({ + ...annotation, + iconColor: color, + }); + }; + + const isNewAnnotation = annotation.name === newAnnotation.name; + + return ( +

+ + + + + + + + + + + + + + + + + + + {ds?.annotations && ( + + )} + {ds && !ds.annotations && } + +

+ ); +}; + +AnnotationSettingsEdit.displayName = 'AnnotationSettingsEdit'; diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx new file mode 100644 index 00000000..75139b62 --- /dev/null +++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx @@ -0,0 +1,111 @@ +import React, { useState } from 'react'; +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; + onNew: () => void; + onEdit: (idx: number) => void; +}; + +export const AnnotationSettingsList: React.FC = ({ dashboard, onNew, onEdit }) => { + const [annotations, updateAnnotations] = useState(dashboard.annotations.list); + + const onMove = (idx: number, direction: number) => { + dashboard.annotations.list = arrayUtils.moveItemImmutably(annotations, idx, idx + direction); + updateAnnotations(dashboard.annotations.list); + }; + + const onDelete = (idx: number) => { + dashboard.annotations.list = [...annotations.slice(0, idx), ...annotations.slice(idx + 1)]; + updateAnnotations(dashboard.annotations.list); + }; + + const showEmptyListCTA = annotations.length === 0 || (annotations.length === 1 && annotations[0].builtIn); + + return ( + + {annotations.length > 0 && ( + + + + + + + + + + {dashboard.annotations.list.map((annotation, idx) => ( + + {annotation.builtIn ? ( + + ) : ( + + )} + + + + + + ))} + +

Query name	Data source
onEdit(idx)}> + {annotation.name} (Built-in) +	onEdit(idx)}> + {annotation.name} +	onEdit(idx)}> + {annotation.datasource \|\| 'Default'} +	+ {idx !== 0 && ( + onMove(idx, -1)} + /> + )} +	+ {dashboard.annotations.list.length > 1 && idx !== dashboard.annotations.list.length - 1 ? ( + onMove(idx, 1)} + /> + ) : null} +	+ onDelete(idx)} + aria-label={`Delete query with title "${annotation.name}"`} + /> +

+ )} + {showEmptyListCTA && ( + Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines + and icons on all graph panels. When you hover over an annotation icon you can get event text & tags for + the event. You can add annotation events directly from grafana by holding CTRL or CMD + click on graph (or + drag region). These will be stored in Grafana's annotation database. +

+ Checkout the + Annotations documentation + for more information.`, + }} + /> + )} + {!showEmptyListCTA && New query} + + ); +}; diff --git a/public/app/features/dashboard/components/AnnotationSettings/index.tsx b/public/app/features/dashboard/components/AnnotationSettings/index.tsx new file mode 100644 index 00000000..b8110598 --- /dev/null +++ b/public/app/features/dashboard/components/AnnotationSettings/index.tsx @@ -0,0 +1,2 @@ +export { AnnotationSettingsEdit } from './AnnotationSettingsEdit'; +export { AnnotationSettingsList } from './AnnotationSettingsList'; diff --git a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts new file mode 100644 index 00000000..7a9f8d2f --- /dev/null +++ b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts @@ -0,0 +1,332 @@ +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 { 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'; + +jest.mock('app/core/store', () => { + return { + getBool: jest.fn(), + getObject: jest.fn(), + }; +}); + +jest.mock('@grafana/runtime', () => ({ + ...((jest.requireActual('@grafana/runtime') as unknown) as object), + getDataSourceSrv: () => { + return { + get: (v: any) => { + const s = getStubInstanceSettings(v); + // console.log('GET', v, s); + return Promise.resolve(s); + }, + getInstanceSettings: getStubInstanceSettings, + }; + }, + config: { + buildInfo: {}, + panels: {}, + featureToggles: { + newVariables: false, + }, + }, +})); + +variableAdapters.register(createQueryVariableAdapter()); +variableAdapters.register(createConstantVariableAdapter()); +variableAdapters.register(createDataSourceVariableAdapter()); + +describe('given dashboard with repeated panels', () => { + let dash: any, exported: any; + + beforeEach((done) => { + dash = { + templating: { + list: [ + { + name: 'apps', + type: 'query', + datasource: { uid: 'gfdb', type: 'testdb' }, + current: { value: 'Asd', text: 'Asd' }, + options: [{ value: 'Asd', text: 'Asd' }], + }, + { + name: 'prefix', + type: 'constant', + current: { value: 'collectd', text: 'collectd' }, + options: [], + query: 'collectd', + }, + { + name: 'ds', + type: 'datasource', + query: 'other2', + current: { value: 'other2', text: 'other2' }, + options: [], + }, + ], + }, + annotations: { + list: [ + { + name: 'logs', + datasource: 'gfdb', + }, + ], + }, + panels: [ + { id: 6, datasource: { uid: 'gfdb', type: 'testdb' }, type: 'graph' }, + { id: 7 }, + { + id: 8, + datasource: { uid: '-- Mixed --', type: 'mixed' }, + targets: [{ datasource: { uid: 'other', type: 'other' } }], + }, + { id: 9, datasource: { uid: '$ds', type: 'other2' } }, + { + id: 17, + datasource: { uid: '$ds', type: 'other2' }, + type: 'graph', + libraryPanel: { + name: 'Library Panel 2', + uid: 'ah8NqyDPs', + }, + }, + { + id: 2, + repeat: 'apps', + datasource: { uid: 'gfdb', type: 'testdb' }, + type: 'graph', + }, + { id: 3, repeat: null, repeatPanelId: 2 }, + { + id: 4, + collapsed: true, + panels: [ + { id: 10, datasource: { uid: 'gfdb', type: 'testdb' }, type: 'table' }, + { id: 11 }, + { + id: 12, + datasource: { uid: '-- Mixed --', type: 'mixed' }, + targets: [{ datasource: { uid: 'other', type: 'other' } }], + }, + { id: 13, datasource: { uid: '$uid', type: 'other' } }, + { + id: 14, + repeat: 'apps', + datasource: { uid: 'gfdb', type: 'testdb' }, + type: 'heatmap', + }, + { id: 15, repeat: null, repeatPanelId: 14 }, + { + id: 16, + datasource: { uid: 'gfdb', type: 'testdb' }, + type: 'graph', + libraryPanel: { + name: 'Library Panel', + uid: 'jL6MrxCMz', + }, + }, + ], + }, + ], + }; + + config.buildInfo.version = '3.0.2'; + + config.panels['graph'] = { + id: 'graph', + name: 'Graph', + info: { version: '1.1.0' }, + } as PanelPluginMeta; + + config.panels['table'] = { + id: 'table', + name: 'Table', + info: { version: '1.1.1' }, + } as PanelPluginMeta; + + config.panels['heatmap'] = { + id: 'heatmap', + name: 'Heatmap', + info: { version: '1.1.2' }, + } as PanelPluginMeta; + + dash = new DashboardModel(dash, {}, () => dash.templating.list); + const exporter = new DashboardExporter(); + exporter.makeExportable(dash).then((clean) => { + exported = clean; + done(); + }); + }); + + it('should replace datasource refs', () => { + const panel = exported.panels[0]; + expect(panel.datasource.uid).toBe('${DS_GFDB}'); + }); + + it('should replace datasource refs in collapsed row', () => { + const panel = exported.panels[6].panels[0]; + expect(panel.datasource.uid).toBe('${DS_GFDB}'); + }); + + it('should replace datasource in variable query', () => { + expect(exported.templating.list[0].datasource.uid).toBe('${DS_GFDB}'); + expect(exported.templating.list[0].options.length).toBe(0); + expect(exported.templating.list[0].current.value).toBe(undefined); + expect(exported.templating.list[0].current.text).toBe(undefined); + }); + + it('should replace datasource in annotation query', () => { + expect(exported.annotations.list[1].datasource).toBe('${DS_GFDB}'); + }); + + it('should add datasource as input', () => { + expect(exported.__inputs[0].name).toBe('DS_GFDB'); + expect(exported.__inputs[0].pluginId).toBe('testdb'); + expect(exported.__inputs[0].type).toBe('datasource'); + }); + + it('should add datasource to required', () => { + const require: any = find(exported.__requires, { name: 'TestDB' }); + expect(require.name).toBe('TestDB'); + expect(require.id).toBe('testdb'); + expect(require.type).toBe('datasource'); + expect(require.version).toBe('1.2.1'); + }); + + it('should not add built in datasources to required', () => { + const require: any = find(exported.__requires, { name: 'Mixed' }); + expect(require).toBe(undefined); + }); + + it('should add datasources used in mixed mode', () => { + const require: any = find(exported.__requires, { name: 'OtherDB' }); + expect(require).not.toBe(undefined); + }); + + it('should add graph panel to required', () => { + const require: any = find(exported.__requires, { name: 'Graph' }); + expect(require.name).toBe('Graph'); + expect(require.id).toBe('graph'); + expect(require.version).toBe('1.1.0'); + }); + + it('should add table panel to required', () => { + const require: any = find(exported.__requires, { name: 'Table' }); + expect(require.name).toBe('Table'); + expect(require.id).toBe('table'); + expect(require.version).toBe('1.1.1'); + }); + + it('should add heatmap panel to required', () => { + const require: any = find(exported.__requires, { name: 'Heatmap' }); + expect(require.name).toBe('Heatmap'); + expect(require.id).toBe('heatmap'); + expect(require.version).toBe('1.1.2'); + }); + + it('should add grafana version', () => { + const require: any = find(exported.__requires, { name: 'Grafana' }); + expect(require.type).toBe('grafana'); + expect(require.id).toBe('grafana'); + expect(require.version).toBe('3.0.2'); + }); + + it('should add constant template variables as inputs', () => { + const input: any = find(exported.__inputs, { name: 'VAR_PREFIX' }); + expect(input.type).toBe('constant'); + expect(input.label).toBe('prefix'); + expect(input.value).toBe('collectd'); + }); + + it('should templatize constant variables', () => { + const variable: any = find(exported.templating.list, { name: 'prefix' }); + expect(variable.query).toBe('${VAR_PREFIX}'); + expect(variable.current.text).toBe('${VAR_PREFIX}'); + expect(variable.current.value).toBe('${VAR_PREFIX}'); + expect(variable.options[0].text).toBe('${VAR_PREFIX}'); + expect(variable.options[0].value).toBe('${VAR_PREFIX}'); + }); + + it('should add datasources only use via datasource variable to requires', () => { + const require: any = find(exported.__requires, { name: 'OtherDB_2' }); + expect(require.id).toBe('other2'); + }); + + it('should add library panels as elements', () => { + const element: LibraryElementExport = exported.__elements.find( + (element: LibraryElementExport) => element.uid === 'ah8NqyDPs' + ); + expect(element.name).toBe('Library Panel 2'); + expect(element.kind).toBe(LibraryElementKind.Panel); + expect(element.model).toEqual({ + id: 17, + datasource: { type: 'other2', uid: '$ds' }, + type: 'graph', + }); + }); + + it('should add library panels in collapsed rows as elements', () => { + const element: LibraryElementExport = exported.__elements.find( + (element: LibraryElementExport) => element.uid === 'jL6MrxCMz' + ); + expect(element.name).toBe('Library Panel'); + expect(element.kind).toBe(LibraryElementKind.Panel); + expect(element.model).toEqual({ + id: 16, + type: 'graph', + datasource: { + type: 'testdb', + uid: '${DS_GFDB}', + }, + }); + }); +}); + +function getStubInstanceSettings(v: string | DataSourceRef): DataSourceInstanceSettings { + let key = (v as DataSourceRef)?.type ?? v; + return (stubs[(key as any) ?? 'gfdb'] ?? stubs['gfdb']) as any; +} + +// Stub responses +const stubs: { [key: string]: {} } = {}; +stubs['gfdb'] = { + name: 'gfdb', + meta: { id: 'testdb', info: { version: '1.2.1' }, name: 'TestDB' }, +}; + +stubs['other'] = { + name: 'other', + meta: { id: 'other', info: { version: '1.2.1' }, name: 'OtherDB' }, +}; + +stubs['other2'] = { + name: 'other2', + meta: { id: 'other2', info: { version: '1.2.1' }, name: 'OtherDB_2' }, +}; + +stubs['-- Mixed --'] = { + name: 'mixed', + meta: { + id: 'mixed', + info: { version: '1.2.1' }, + name: 'Mixed', + builtIn: true, + }, +}; + +stubs['-- Grafana --'] = { + name: '-- Grafana --', + meta: { + id: 'grafana', + info: { version: '1.2.1' }, + name: 'grafana', + builtIn: true, + }, +}; diff --git a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts new file mode 100644 index 00000000..ff29ddb6 --- /dev/null +++ b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts @@ -0,0 +1,253 @@ +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 { isPanelModelLibraryPanel } from '../../../library-panels/guard'; + +interface Input { + name: string; + type: string; + label: string; + value: any; + description: string; +} + +interface Requires { + [key: string]: { + type: string; + id: string; + name: string; + version: string; + }; +} + +interface DataSources { + [key: string]: { + name: string; + label: string; + description: string; + type: string; + pluginId: string; + pluginName: string; + }; +} + +export interface LibraryElementExport { + name: string; + uid: string; + model: any; + kind: LibraryElementKind; +} + +export class DashboardExporter { + makeExportable(dashboard: DashboardModel) { + // clean up repeated rows and panels, + // this is done on the live real dashboard instance, not on a clone + // so we need to undo this + // this is pretty hacky and needs to be changed + dashboard.cleanUpRepeats(); + + const saveModel = dashboard.getSaveModelClone(); + saveModel.id = null; + + // undo repeat cleanup + dashboard.processRepeats(); + + const inputs: Input[] = []; + const requires: Requires = {}; + const datasources: DataSources = {}; + const promises: Array> = []; + const variableLookup: { [key: string]: any } = {}; + const libraryPanels: Map = new Map(); + + for (const variable of saveModel.getVariables()) { + variableLookup[variable.name] = variable; + } + + const templateizeDatasourceUsage = (obj: any) => { + let datasource: string = obj.datasource; + let datasourceVariable: any = null; + + // ignore data source properties that contain a variable + if (datasource && (datasource as any).uid) { + const uid = (datasource as any).uid as string; + if (uid.indexOf('$') === 0) { + datasourceVariable = variableLookup[uid.substring(1)]; + if (datasourceVariable && datasourceVariable.current) { + datasource = datasourceVariable.current.value; + } + } + } + + promises.push( + getDataSourceSrv() + .get(datasource) + .then((ds) => { + if (ds.meta?.builtIn) { + return; + } + + // add data source type to require list + requires['datasource' + ds.meta?.id] = { + type: 'datasource', + id: ds.meta.id, + name: ds.meta.name, + version: ds.meta.info.version || '1.0.0', + }; + + // if used via variable we can skip templatizing usage + if (datasourceVariable) { + return; + } + + const refName = 'DS_' + ds.name.replace(' ', '_').toUpperCase(); + datasources[refName] = { + name: refName, + label: ds.name, + description: '', + type: 'datasource', + pluginId: ds.meta?.id, + pluginName: ds.meta?.name, + }; + + if (obj.datasource === null || typeof obj.datasource === 'string') { + obj.datasource = '${' + refName + '}'; + } else { + obj.datasource.uid = '${' + refName + '}'; + } + }) + ); + }; + + const processPanel = (panel: PanelModel) => { + if (panel.datasource !== undefined && panel.datasource !== null) { + templateizeDatasourceUsage(panel); + } + + if (panel.targets) { + for (const target of panel.targets) { + if (target.datasource !== undefined) { + templateizeDatasourceUsage(target); + } + } + } + + const panelDef: PanelPluginMeta = config.panels[panel.type]; + if (panelDef) { + requires['panel' + panelDef.id] = { + type: 'panel', + id: panelDef.id, + name: panelDef.name, + version: panelDef.info.version, + }; + } + }; + + const processLibraryPanels = (panel: any) => { + if (isPanelModelLibraryPanel(panel)) { + const { libraryPanel, ...model } = panel; + const { name, uid } = libraryPanel; + if (!libraryPanels.has(uid)) { + libraryPanels.set(uid, { name, uid, kind: LibraryElementKind.Panel, model }); + } + } + }; + + // check up panel data sources + for (const panel of saveModel.panels) { + processPanel(panel); + + // handle collapsed rows + if (panel.collapsed !== undefined && panel.collapsed === true && panel.panels) { + for (const rowPanel of panel.panels) { + processPanel(rowPanel); + } + } + } + + // templatize template vars + for (const variable of saveModel.getVariables()) { + if (isQuery(variable)) { + templateizeDatasourceUsage(variable); + variable.options = []; + variable.current = ({} as unknown) as VariableOption; + variable.refresh = + variable.refresh !== VariableRefresh.never ? variable.refresh : VariableRefresh.onDashboardLoad; + } + } + + // templatize annotations vars + for (const annotationDef of saveModel.annotations.list) { + templateizeDatasourceUsage(annotationDef); + } + + // add grafana version + requires['grafana'] = { + type: 'grafana', + id: 'grafana', + name: 'Grafana', + version: config.buildInfo.version, + }; + + return Promise.all(promises) + .then(() => { + each(datasources, (value: any) => { + inputs.push(value); + }); + + // we need to process all panels again after all the promises are resolved + // so all data sources, variables and targets have been templateized when we process library panels + for (const panel of saveModel.panels) { + processLibraryPanels(panel); + if (panel.collapsed !== undefined && panel.collapsed === true && panel.panels) { + for (const rowPanel of panel.panels) { + processLibraryPanels(rowPanel); + } + } + } + + // templatize constants + for (const variable of saveModel.getVariables()) { + if (isConstant(variable)) { + const refName = 'VAR_' + variable.name.replace(' ', '_').toUpperCase(); + inputs.push({ + name: refName, + type: 'constant', + label: variable.label || variable.name, + value: variable.query, + description: '', + }); + // update current and option + variable.query = '${' + refName + '}'; + variable.current = { + value: variable.query, + text: variable.query, + selected: false, + }; + variable.options = [variable.current]; + } + } + + // make inputs and requires a top thing + const newObj: { [key: string]: {} } = {}; + newObj['__inputs'] = inputs; + newObj['__elements'] = [...libraryPanels.values()]; + newObj['__requires'] = sortBy(requires, ['id']); + + defaults(newObj, saveModel); + return newObj; + }) + .catch((err) => { + console.error('Export failed:', err); + return { + error: err, + }; + }); + } +} diff --git a/public/app/features/dashboard/components/DashExportModal/index.ts b/public/app/features/dashboard/components/DashExportModal/index.ts new file mode 100644 index 00000000..f9afc4f6 --- /dev/null +++ b/public/app/features/dashboard/components/DashExportModal/index.ts @@ -0,0 +1 @@ +export { DashboardExporter } from './DashboardExporter'; diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx new file mode 100644 index 00000000..c34b2847 --- /dev/null +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -0,0 +1,268 @@ +// Libaries +import React, { PureComponent, FC, ReactNode } from 'react'; +import { connect, ConnectedProps } from 'react-redux'; +// Utils & Services +import { playlistSrv } from 'app/features/playlist/PlaylistSrv'; +// Components +import { DashNavButton } from './DashNavButton'; +import { DashNavTimeControls } from './DashNavTimeControls'; +import { ButtonGroup, ModalsController, ToolbarButton, PageToolbar } 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 { SaveDashboardModalProxy } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardModalProxy'; +import { locationService } from '@grafana/runtime'; +import { toggleKioskMode } from 'app/core/navigation/kiosk'; +import { getDashboardSrv } from '../../services/DashboardSrv'; + +const mapDispatchToProps = { + updateTimeZoneForSession, +}; + +const connector = connect(null, mapDispatchToProps); + +export interface OwnProps { + dashboard: DashboardModel; + isFullscreen: boolean; + kioskMode: KioskMode; + hideTimePicker: boolean; + folderTitle?: string; + title: string; + onAddPanel: () => void; +} + +interface DashNavButtonModel { + show: (props: Props) => boolean; + component: FC>; + index?: number | 'end'; +} + +const customLeftActions: DashNavButtonModel[] = []; +const customRightActions: DashNavButtonModel[] = []; + +export function addCustomLeftAction(content: DashNavButtonModel) { + customLeftActions.push(content); +} + +export function addCustomRightAction(content: DashNavButtonModel) { + customRightActions.push(content); +} + +type Props = OwnProps & ConnectedProps; + +class DashNav extends PureComponent { + constructor(props: Props) { + super(props); + } + + onClose = () => { + locationService.partial({ viewPanel: null }); + }; + + onToggleTVMode = () => { + toggleKioskMode(); + }; + + onOpenSettings = () => { + locationService.partial({ editview: 'settings' }); + }; + + onStarDashboard = () => { + const { dashboard } = this.props; + const dashboardSrv = getDashboardSrv(); + + dashboardSrv.starDashboard(dashboard.id, dashboard.meta.isStarred).then((newState: any) => { + dashboard.meta.isStarred = newState; + this.forceUpdate(); + }); + }; + + onPlaylistPrev = () => { + playlistSrv.prev(); + }; + + onPlaylistNext = () => { + playlistSrv.next(); + }; + + onPlaylistStop = () => { + playlistSrv.stop(); + this.forceUpdate(); + }; + + addCustomContent(actions: DashNavButtonModel[], buttons: ReactNode[]) { + actions.map((action, index) => { + const Component = action.component; + const element = ; + typeof action.index === 'number' ? buttons.splice(action.index, 0, element) : buttons.push(element); + }); + } + + isPlaylistRunning() { + return playlistSrv.isPlaying; + } + + renderLeftActionsButton() { + const { dashboard, kioskMode } = this.props; + const { canStar, canShare, isStarred } = dashboard.meta; + const buttons: ReactNode[] = []; + + if (kioskMode !== KioskMode.Off || this.isPlaylistRunning()) { + return []; + } + + if (canStar) { + let desc = isStarred ? 'Unmark as favorite' : 'Mark as favorite'; + buttons.push( + + ); + } + + if (canShare) { + let desc = 'Share dashboard or panel'; + buttons.push( + + {({ showModal, hideModal }) => ( + { + showModal(ShareModal, { + dashboard, + onDismiss: hideModal, + }); + }} + /> + )} + + ); + } + + this.addCustomContent(customLeftActions, buttons); + return buttons; + } + + renderPlaylistControls() { + return ( + + + Stop playlist + + + ); + } + + renderTimeControls() { + const { dashboard, updateTimeZoneForSession, hideTimePicker } = this.props; + + if (hideTimePicker) { + return null; + } + + return ( + + ); + } + + renderRightActionsButton() { + const { dashboard, onAddPanel, isFullscreen, kioskMode } = this.props; + const { canEdit, showSettings } = dashboard.meta; + const { snapshot } = dashboard; + const snapshotUrl = snapshot && snapshot.originalUrl; + const buttons: ReactNode[] = []; + const tvButton = ( + + ); + + if (this.isPlaylistRunning()) { + return [this.renderPlaylistControls(), this.renderTimeControls()]; + } + + if (kioskMode === KioskMode.TV) { + return [this.renderTimeControls(), tvButton]; + } + + if (canEdit && !isFullscreen) { + buttons.push(); + buttons.push( + + {({ showModal, hideModal }) => ( + { + showModal(SaveDashboardModalProxy, { + dashboard, + onDismiss: hideModal, + }); + }} + /> + )} + + ); + } + + if (snapshotUrl) { + buttons.push( + this.gotoSnapshotOrigin(snapshotUrl)} + icon="link" + key="button-snapshot" + /> + ); + } + + if (showSettings) { + buttons.push( + + ); + } + + this.addCustomContent(customRightActions, buttons); + + buttons.push(this.renderTimeControls()); + buttons.push(tvButton); + return buttons; + } + + gotoSnapshotOrigin(snapshotUrl: string) { + window.location.href = textUtil.sanitizeUrl(snapshotUrl); + } + + render() { + const { isFullscreen, title, folderTitle } = this.props; + const onGoBack = isFullscreen ? this.onClose : undefined; + + const titleHref = locationUtil.updateSearchParams(window.location.href, '?search=open'); + const parentHref = locationUtil.updateSearchParams(window.location.href, '?search=open&folder=current'); + + return ( + + {this.renderRightActionsButton()} + + ); + } +} + +export default connector(DashNav); diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx new file mode 100644 index 00000000..5f8e3e6a --- /dev/null +++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx @@ -0,0 +1,44 @@ +// Libraries +import React, { FunctionComponent, MouseEvent } from 'react'; +import { css } from '@emotion/css'; +// Components +import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; + +interface Props { + icon?: IconName; + tooltip: string; + onClick?: (event: MouseEvent) => void; + href?: string; + children?: React.ReactNode; + iconType?: IconType; + iconSize?: IconSize; +} + +export const DashNavButton: FunctionComponent = ({ icon, iconType, iconSize, tooltip, onClick, children }) => { + const theme = useTheme(); + const styles = getStyles(theme); + + return ( +

+ {icon && ( + + )} + {children} +

+ ); +}; + +const getStyles = stylesFactory((theme: GrafanaTheme) => ({ + noBorderContainer: css` + padding: 0 ${theme.spacing.xs}; + display: flex; + `, +})); diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx new file mode 100644 index 00000000..29593cac --- /dev/null +++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.test.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { DashNavTimeControls } from './DashNavTimeControls'; +import { DashboardModel } from '../../state/DashboardModel'; +import { getDashboardModel } from '../../../../../test/helpers/getDashboardModel'; + +describe('DashNavTimeControls', () => { + let dashboardModel: DashboardModel; + + beforeEach(() => { + const json = { + panels: [ + { + datasource: null, + gridPos: { + h: 3, + w: 24, + x: 0, + y: 8, + }, + id: 1, + type: 'welcome', + }, + ], + refresh: '', + templating: { + list: [], + }, + }; + dashboardModel = getDashboardModel(json); + }); + + it('renders RefreshPicker with run button in panel view', () => { + const container = render( + + ); + expect(container.queryByLabelText(/Refresh dashboard/i)).toBeInTheDocument(); + }); + + it('renders RefreshPicker with interval button in panel view', () => { + const container = render( + + ); + expect(container.queryByLabelText(/Choose refresh time interval/i)).toBeInTheDocument(); + }); + + it('should not render RefreshPicker interval button in panel edit', () => { + const panel: any = { destroy: jest.fn(), isEditing: true }; + dashboardModel.startRefresh = jest.fn(); + dashboardModel.panelInEdit = panel; + const container = render( + + ); + expect(container.queryByLabelText(/Choose refresh time interval/i)).not.toBeInTheDocument(); + }); + + it('should render RefreshPicker run button in panel edit', () => { + const panel: any = { destroy: jest.fn(), isEditing: true }; + dashboardModel.startRefresh = jest.fn(); + dashboardModel.panelInEdit = panel; + const container = render( + + ); + expect(container.queryByLabelText(/Refresh dashboard/i)).toBeInTheDocument(); + }); +}); diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx new file mode 100644 index 00000000..94313c0e --- /dev/null +++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx @@ -0,0 +1,117 @@ +// Libraries +import React, { Component } from 'react'; +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 { ShiftTimeEvent, ShiftTimeEventPayload, ZoomOutEvent } from '../../../../types/events'; +import { Unsubscribable } from 'rxjs'; + +export interface Props { + dashboard: DashboardModel; + onChangeTimeZone: (timeZone: TimeZone) => void; +} + +export class DashNavTimeControls extends Component { + private sub?: Unsubscribable; + + componentDidMount() { + this.sub = this.props.dashboard.events.subscribe(TimeRangeUpdatedEvent, () => this.forceUpdate()); + } + + componentWillUnmount() { + this.sub?.unsubscribe(); + } + + onChangeRefreshInterval = (interval: string) => { + getTimeSrv().setAutoRefresh(interval); + this.forceUpdate(); + }; + + onRefresh = () => { + getTimeSrv().refreshDashboard(); + return Promise.resolve(); + }; + + onMoveBack = () => { + appEvents.publish(new ShiftTimeEvent(ShiftTimeEventPayload.Left)); + }; + + onMoveForward = () => { + appEvents.publish(new ShiftTimeEvent(ShiftTimeEventPayload.Right)); + }; + + onChangeTimePicker = (timeRange: TimeRange) => { + const { dashboard } = this.props; + const panel = dashboard.timepicker; + const hasDelay = panel.nowDelay && timeRange.raw.to === 'now'; + + const adjustedFrom = dateMath.isMathString(timeRange.raw.from) ? timeRange.raw.from : timeRange.from; + const adjustedTo = dateMath.isMathString(timeRange.raw.to) ? timeRange.raw.to : timeRange.to; + const nextRange = { + from: adjustedFrom, + to: hasDelay ? 'now-' + panel.nowDelay : adjustedTo, + }; + + getTimeSrv().setTime(nextRange); + }; + + onChangeTimeZone = (timeZone: TimeZone) => { + this.props.dashboard.timezone = timeZone; + this.props.onChangeTimeZone(timeZone); + this.onRefresh(); + }; + + onChangeFiscalYearStartMonth = (month: number) => { + this.props.dashboard.fiscalYearStartMonth = month; + this.onRefresh(); + }; + + onZoom = () => { + appEvents.publish(new ZoomOutEvent(2)); + }; + + render() { + const { dashboard } = this.props; + const { refresh_intervals } = dashboard.timepicker; + const intervals = getTimeSrv().getValidIntervals(refresh_intervals || defaultIntervals); + + const timePickerValue = getTimeSrv().timeRange(); + const timeZone = dashboard.getTimezone(); + const fiscalYearStartMonth = dashboard.fiscalYearStartMonth; + const hideIntervalPicker = dashboard.panelInEdit?.isEditing; + + return ( + + + + + ); + } +} diff --git a/public/app/features/dashboard/components/DashNav/index.ts b/public/app/features/dashboard/components/DashNav/index.ts new file mode 100644 index 00000000..be07fd0d --- /dev/null +++ b/public/app/features/dashboard/components/DashNav/index.ts @@ -0,0 +1,2 @@ +import DashNav from './DashNav'; +export { DashNav }; diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx new file mode 100644 index 00000000..4da79364 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { css } from '@emotion/css'; +import { Alert, useStyles } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; +import { DashboardInitError, AppNotificationSeverity } from 'app/types'; +import { getMessageFromError } from 'app/core/utils/errors'; + +export interface Props { + initError?: DashboardInitError; +} + +export const DashboardFailed = ({ initError }: Props) => { + const styles = useStyles(getStyles); + if (!initError) { + return null; + } + + return ( +

+ + {getMessageFromError(initError.error)} + +

+ ); +}; + +export const getStyles = (theme: GrafanaTheme) => { + return { + dashboardLoading: css` + height: 60vh; + display: flex; + align-items: center; + justify-content: center; + `, + }; +}; diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx new file mode 100644 index 00000000..aea6b7db --- /dev/null +++ b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { css } from '@emotion/css'; +import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui'; +import { locationService } from '@grafana/runtime'; +import { GrafanaTheme } from '@grafana/data'; +import { DashboardInitPhase } from 'app/types'; + +export interface Props { + initPhase: DashboardInitPhase; +} + +export const DashboardLoading = ({ initPhase }: Props) => { + const styles = useStyles(getStyles); + const cancelVariables = () => { + locationService.push('/'); + }; + + return ( +

+ + + {initPhase} + {' '} + + + + +

+ ); +}; + +export const getStyles = (theme: GrafanaTheme) => { + return { + dashboardLoading: css` + height: 60vh; + display: flex; + align-items: center; + justify-content: center; + `, + dashboardLoadingText: css` + font-size: ${theme.typography.size.lg}; + `, + }; +}; diff --git a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx new file mode 100644 index 00000000..a93dcdcd --- /dev/null +++ b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx @@ -0,0 +1,122 @@ +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 { StoreState } from 'app/types'; +import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl'; +import { + getDashboardPermissions, + addDashboardPermission, + removeDashboardPermission, + updateDashboardPermission, +} from '../../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, +}); + +const mapDispatchToProps = { + getDashboardPermissions, + addDashboardPermission, + removeDashboardPermission, + updateDashboardPermission, +}; + +const connector = connect(mapStateToProps, mapDispatchToProps); + +export interface OwnProps { + dashboard: DashboardModel; +} + +export type Props = OwnProps & ConnectedProps; + +export interface State { + isAdding: boolean; +} + +export class DashboardPermissionsUnconnected extends PureComponent { + constructor(props: Props) { + super(props); + + this.state = { + isAdding: false, + }; + } + + componentDidMount() { + this.props.getDashboardPermissions(this.props.dashboard.id); + } + + onOpenAddPermissions = () => { + this.setState({ isAdding: true }); + }; + + onRemoveItem = (item: DashboardAcl) => { + this.props.removeDashboardPermission(this.props.dashboard.id, item); + }; + + onPermissionChanged = (item: DashboardAcl, level: PermissionLevel) => { + this.props.updateDashboardPermission(this.props.dashboard.id, item, level); + }; + + onAddPermission = (newItem: NewDashboardAclItem) => { + return this.props.addDashboardPermission(this.props.dashboard.id, newItem); + }; + + onCancelAddPermission = () => { + this.setState({ isAdding: false }); + }; + + getFolder() { + const { dashboard } = this.props; + + return { + id: dashboard.meta.folderId, + title: dashboard.meta.folderTitle, + url: dashboard.meta.folderUrl, + }; + } + + render() { + const { + permissions, + dashboard: { + meta: { hasUnsavedFolderChange }, + }, + } = this.props; + const { isAdding } = this.state; + + return hasUnsavedFolderChange ? ( +

You have changed a folder, please save to view permissions.

+ ) : ( +

Permissions

+ }> + + +

+ +

+ + + + +

+ ); + } +} + +export const DashboardPermissions = connector(DashboardPermissionsUnconnected); diff --git a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx new file mode 100644 index 00000000..3d0145e0 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx @@ -0,0 +1,158 @@ +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 { + return new DashboardModel({ + refresh: false, + panels: [ + { + id: 1, + type: 'graph', + gridPos: { x: 0, y: 0, w: 24, h: 6 }, + legend: { sortDesc: false }, + }, + { + id: 2, + type: 'row', + gridPos: { x: 0, y: 6, w: 24, h: 2 }, + collapsed: true, + panels: [ + { id: 3, type: 'graph', gridPos: { x: 0, y: 6, w: 12, h: 2 } }, + { id: 4, type: 'graph', gridPos: { x: 12, y: 6, w: 12, h: 2 } }, + ], + }, + { id: 5, type: 'row', gridPos: { x: 0, y: 6, w: 1, h: 1 } }, + ], + }); +} + +function getTestContext() { + const contextSrv: any = { isSignedIn: true, isEditor: true }; + setContextSrv(contextSrv); + const dash: any = getDefaultDashboardModel(); + const original: any = dash.getSaveModelClone(); + + return { dash, original, contextSrv }; +} + +describe('DashboardPrompt', () => { + it('No changes should not have changes', () => { + const { original, dash } = getTestContext(); + expect(hasChanges(dash, original)).toBe(false); + }); + + it('Simple change should be registered', () => { + const { original, dash } = getTestContext(); + dash.title = 'google'; + expect(hasChanges(dash, original)).toBe(true); + }); + + it('Should ignore a lot of changes', () => { + const { original, dash } = getTestContext(); + dash.time = { from: '1h' }; + dash.refresh = true; + dash.schemaVersion = 10; + expect(hasChanges(dash, original)).toBe(false); + }); + + it('Should ignore .iteration changes', () => { + const { original, dash } = getTestContext(); + dash.iteration = new Date().getTime() + 1; + expect(hasChanges(dash, original)).toBe(false); + }); + + it('Should ignore row collapse change', () => { + const { original, dash } = getTestContext(); + dash.toggleRow(dash.panels[1]); + expect(hasChanges(dash, original)).toBe(false); + }); + + it('Should ignore panel legend changes', () => { + const { original, dash } = getTestContext(); + dash.panels[0].legend.sortDesc = true; + dash.panels[0].legend.sort = 'avg'; + expect(hasChanges(dash, original)).toBe(false); + }); + + it('Should ignore panel repeats', () => { + const { original, dash } = getTestContext(); + dash.panels.push(new PanelModel({ repeatPanelId: 10 })); + expect(hasChanges(dash, original)).toBe(false); + }); + + describe('ignoreChanges', () => { + describe('when called without original dashboard', () => { + it('then it should return true', () => { + const { dash } = getTestContext(); + expect(ignoreChanges(dash, null)).toBe(true); + }); + }); + + describe('when called without current dashboard', () => { + it('then it should return true', () => { + const { original } = getTestContext(); + expect(ignoreChanges((null as unknown) as DashboardModel, original)).toBe(true); + }); + }); + + describe('when called without meta in current dashboard', () => { + it('then it should return true', () => { + const { original, dash } = getTestContext(); + expect(ignoreChanges({ ...dash, meta: undefined }, original)).toBe(true); + }); + }); + + describe('when called for a viewer without save permissions', () => { + it('then it should return true', () => { + const { original, dash, contextSrv } = getTestContext(); + contextSrv.isEditor = false; + expect(ignoreChanges({ ...dash, meta: { canSave: false } }, original)).toBe(true); + }); + }); + + describe('when called for a viewer with save permissions', () => { + it('then it should return undefined', () => { + const { original, dash, contextSrv } = getTestContext(); + contextSrv.isEditor = false; + expect(ignoreChanges({ ...dash, meta: { canSave: true } }, original)).toBe(undefined); + }); + }); + + describe('when called for an user that is not signed in', () => { + it('then it should return true', () => { + const { original, dash, contextSrv } = getTestContext(); + contextSrv.isSignedIn = false; + expect(ignoreChanges({ ...dash, meta: { canSave: true } }, original)).toBe(true); + }); + }); + + describe('when called with fromScript', () => { + it('then it should return true', () => { + const { original, dash } = getTestContext(); + expect( + ignoreChanges({ ...dash, meta: { canSave: true, fromScript: true, fromFile: undefined } }, original) + ).toBe(true); + }); + }); + + describe('when called with fromFile', () => { + it('then it should return true', () => { + const { original, dash } = getTestContext(); + expect( + ignoreChanges({ ...dash, meta: { canSave: true, fromScript: undefined, fromFile: true } }, original) + ).toBe(true); + }); + }); + + describe('when called with canSave but without fromScript and fromFile', () => { + it('then it should return false', () => { + const { original, dash } = getTestContext(); + expect( + ignoreChanges({ ...dash, meta: { canSave: true, fromScript: undefined, fromFile: undefined } }, original) + ).toBe(undefined); + }); + }); + }); +}); diff --git a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx new file mode 100644 index 00000000..24095f33 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx @@ -0,0 +1,255 @@ +import { locationService } from '@grafana/runtime'; +import { appEvents } from 'app/core/core'; +import { contextSrv } from 'app/core/services/context_srv'; +import React, { useEffect, useState } from 'react'; +import { Prompt } from 'react-router-dom'; +import { DashboardModel } from '../../state/DashboardModel'; +import { each, filter, find } from 'lodash'; +import angular from 'angular'; +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 { useDispatch } from 'react-redux'; +import { discardPanelChanges, exitPanelEditor } from '../PanelEditor/state/actions'; +import { DashboardSavedEvent } from 'app/types/events'; + +export interface Props { + dashboard: DashboardModel; +} + +interface State { + original: object | null; + originalPath?: string; + modal: PromptModal | null; + blockedLocation?: H.Location | null; +} + +enum PromptModal { + UnsavedChangesModal, + SaveLibraryPanelModal, +} + +export const DashboardPrompt = React.memo(({ dashboard }: Props) => { + const [state, setState] = useState({ original: null, modal: null }); + const dispatch = useDispatch(); + const { original, originalPath, blockedLocation, modal } = state; + + useEffect(() => { + // This timeout delay is to wait for panels to load and migrate scheme before capturing the original state + // This is to minimize unsaved changes warnings due to automatic schema migrations + const timeoutId = setTimeout(() => { + const originalPath = locationService.getLocation().pathname; + const original = dashboard.getSaveModelClone(); + + setState({ originalPath, original, modal: null }); + }, 1000); + + return () => { + clearTimeout(timeoutId); + }; + }, [dashboard]); + + useEffect(() => { + const handleUnload = (event: BeforeUnloadEvent) => { + if (ignoreChanges(dashboard, original)) { + return; + } + if (hasChanges(dashboard, original)) { + event.preventDefault(); + // No browser actually displays this message anymore. + // But Chrome requires it to be defined else the popup won't show. + event.returnValue = ''; + } + }; + window.addEventListener('beforeunload', handleUnload); + return () => window.removeEventListener('beforeunload', handleUnload); + }, [dashboard, original]); + + // Handle saved events + useEffect(() => { + const savedEventUnsub = appEvents.subscribe(DashboardSavedEvent, () => { + const original = dashboard.getSaveModelClone(); + const originalPath = locationService.getLocation().pathname; + setState({ originalPath, original, modal: null }); + + if (blockedLocation) { + moveToBlockedLocationAfterReactStateUpdate(blockedLocation); + } + }); + + return () => savedEventUnsub.unsubscribe(); + }, [dashboard, blockedLocation]); + + const onHistoryBlock = (location: H.Location) => { + const panelInEdit = dashboard.panelInEdit; + const search = new URLSearchParams(location.search); + + // Are we leaving panel edit & library panel? + if (panelInEdit && panelInEdit.libraryPanel && panelInEdit.hasChanged && !search.has('editPanel')) { + setState({ ...state, modal: PromptModal.SaveLibraryPanelModal, blockedLocation: location }); + return false; + } + + // Are we still on the same dashboard? + if (originalPath === location.pathname || !original) { + // This is here due to timing reasons we want the exit panel editor state changes to happen before router update + if (panelInEdit && !search.has('editPanel')) { + dispatch(exitPanelEditor()); + } + + return true; + } + + if (ignoreChanges(dashboard, original)) { + return true; + } + + if (!hasChanges(dashboard, original)) { + return true; + } + + setState({ ...state, modal: PromptModal.UnsavedChangesModal, blockedLocation: location }); + return false; + }; + + const onHideModalAndMoveToBlockedLocation = () => { + setState({ ...state, modal: null }); + moveToBlockedLocationAfterReactStateUpdate(blockedLocation); + }; + + return ( + <> + + {modal === PromptModal.UnsavedChangesModal && ( + {}} // Handled by DashboardSavedEvent above + onDiscard={() => { + // Clear original will allow us to leave without unsaved changes prompt + setState({ ...state, original: null, modal: null }); + moveToBlockedLocationAfterReactStateUpdate(blockedLocation); + }} + onDismiss={() => { + setState({ ...state, modal: null, blockedLocation: null }); + }} + /> + )} + {modal === PromptModal.SaveLibraryPanelModal && ( + { + dispatch(discardPanelChanges()); + setState({ ...state, modal: null }); + moveToBlockedLocationAfterReactStateUpdate(blockedLocation); + }} + onDismiss={() => { + setState({ ...state, modal: null, blockedLocation: null }); + }} + /> + )} + + ); +}); + +DashboardPrompt.displayName = 'DashboardPrompt'; + +function moveToBlockedLocationAfterReactStateUpdate(location?: H.Location | null) { + if (location) { + setTimeout(() => locationService.push(location!), 10); + } +} + +/** + * For some dashboards and users changes should be ignored * + */ +export function ignoreChanges(current: DashboardModel, original: object | null) { + if (!original) { + return true; + } + + // Ignore changes if the user has been signed out + if (!contextSrv.isSignedIn) { + return true; + } + + if (!current || !current.meta) { + return true; + } + + const { canSave, fromScript, fromFile } = current.meta; + if (!contextSrv.isEditor && !canSave) { + return true; + } + + return !canSave || fromScript || fromFile; +} + +/** + * Remove stuff that should not count in diff + */ +function cleanDashboardFromIgnoredChanges(dashData: any) { + // need to new up the domain model class to get access to expand / collapse row logic + const model = new DashboardModel(dashData); + + // Expand all rows before making comparison. This is required because row expand / collapse + // change order of panel array and panel positions. + model.expandRows(); + + const dash = model.getSaveModelClone(); + + // ignore time and refresh + dash.time = 0; + dash.refresh = 0; + dash.schemaVersion = 0; + dash.timezone = 0; + + // ignore iteration property + delete dash.iteration; + + dash.panels = filter(dash.panels, (panel) => { + if (panel.repeatPanelId) { + return false; + } + + // remove scopedVars + panel.scopedVars = undefined; + + // ignore panel legend sort + if (panel.legend) { + delete panel.legend.sort; + delete panel.legend.sortDesc; + } + + return true; + }); + + // ignore template variable values + each(dash.getVariables(), (variable: any) => { + variable.current = null; + variable.options = null; + variable.filters = null; + }); + + return dash; +} + +export function hasChanges(current: DashboardModel, original: any) { + const currentClean = cleanDashboardFromIgnoredChanges(current.getSaveModelClone()); + const originalClean = cleanDashboardFromIgnoredChanges(original); + + const currentTimepicker: any = find((currentClean as any).nav, { type: 'timepicker' }); + const originalTimepicker: any = find((originalClean as any).nav, { type: 'timepicker' }); + + if (currentTimepicker && originalTimepicker) { + currentTimepicker.now = originalTimepicker.now; + } + + const currentJson = angular.toJson(currentClean); + const originalJson = angular.toJson(originalClean); + + return currentJson !== originalJson; +} diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx new file mode 100644 index 00000000..9da5aa3b --- /dev/null +++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { DashboardRow } from './DashboardRow'; +import { PanelModel } from '../../state/PanelModel'; + +describe('DashboardRow', () => { + let wrapper: any, panel: PanelModel, dashboardMock: any; + + beforeEach(() => { + dashboardMock = { + toggleRow: jest.fn(), + on: jest.fn(), + meta: { + canEdit: true, + }, + events: { subscribe: jest.fn() }, + }; + + panel = new PanelModel({ collapsed: false }); + wrapper = mount(); + }); + + it('Should not have collapsed class when collaped is false', () => { + expect(wrapper.find('.dashboard-row')).toHaveLength(1); + expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(0); + }); + + it('Should collapse after clicking title', () => { + wrapper.find('.dashboard-row__title').simulate('click'); + + expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(1); + expect(dashboardMock.toggleRow.mock.calls).toHaveLength(1); + }); + + it('Should subscribe to event during mount', () => { + expect(dashboardMock.events.subscribe.mock.calls).toHaveLength(1); + }); + + it('should have two actions as admin', () => { + expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(2); + }); + + it('should not show row drag handle when cannot edit', () => { + dashboardMock.meta.canEdit = false; + wrapper = mount(); + expect(wrapper.find('.dashboard-row__drag')).toHaveLength(0); + }); + + it('should have zero actions when cannot edit', () => { + dashboardMock.meta.canEdit = false; + panel = new PanelModel({ collapsed: false }); + wrapper = mount(); + expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(0); + }); +}); diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx new file mode 100644 index 00000000..94213237 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx @@ -0,0 +1,115 @@ +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 { Unsubscribable } from 'rxjs'; + +export interface DashboardRowProps { + panel: PanelModel; + dashboard: DashboardModel; +} + +export class DashboardRow extends React.Component { + sub?: Unsubscribable; + constructor(props: DashboardRowProps) { + super(props); + + this.state = { + collapsed: this.props.panel.collapsed, + }; + } + + componentDidMount() { + this.sub = this.props.dashboard.events.subscribe(RefreshEvent, this.onVariableUpdated); + } + + componentWillUnmount() { + if (this.sub) { + this.sub.unsubscribe(); + } + } + + onVariableUpdated = () => { + this.forceUpdate(); + }; + + onToggle = () => { + this.props.dashboard.toggleRow(this.props.panel); + + this.setState((prevState: any) => { + return { collapsed: !prevState.collapsed }; + }); + }; + + onUpdate = (title: string, repeat?: string | null) => { + this.props.panel['title'] = title; + this.props.panel['repeat'] = repeat ?? undefined; + this.props.panel.render(); + this.props.dashboard.processRepeats(); + this.forceUpdate(); + }; + + onDelete = () => { + appEvents.publish( + new ShowConfirmModalEvent({ + title: 'Delete row', + text: 'Are you sure you want to remove this row and all its panels?', + altActionText: 'Delete row only', + icon: 'trash-alt', + onConfirm: () => { + this.props.dashboard.removeRow(this.props.panel, true); + }, + onAltAction: () => { + this.props.dashboard.removeRow(this.props.panel, false); + }, + }) + ); + }; + + render() { + const classes = classNames({ + 'dashboard-row': true, + 'dashboard-row--collapsed': this.state.collapsed, + }); + + const title = getTemplateSrv().replace(this.props.panel.title, this.props.panel.scopedVars, 'text'); + const count = this.props.panel.panels ? this.props.panel.panels.length : 0; + const panels = count === 1 ? 'panel' : 'panels'; + const canEdit = this.props.dashboard.meta.canEdit === true; + + return ( +

+ + + {title} + + ({count} {panels}) + + + {canEdit && ( +

+ + + + +

+ )} + {this.state.collapsed === true && ( +

+ +

+ )} + {canEdit &&

} +

+ ); + } +} diff --git a/public/app/features/dashboard/components/DashboardRow/index.ts b/public/app/features/dashboard/components/DashboardRow/index.ts new file mode 100644 index 00000000..3f71e03c --- /dev/null +++ b/public/app/features/dashboard/components/DashboardRow/index.ts @@ -0,0 +1 @@ +export { DashboardRow } from './DashboardRow'; diff --git a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx new file mode 100644 index 00000000..cad37e66 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx @@ -0,0 +1,254 @@ +import React from 'react'; +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import { within } from '@testing-library/dom'; +import userEvent from '@testing-library/user-event'; +import { selectors } from '@grafana/e2e-selectors'; +import { setAngularLoader, setDataSourceSrv } from '@grafana/runtime'; +import { AnnotationsSettings } from './AnnotationsSettings'; + +describe('AnnotationsSettings', () => { + let dashboard: any; + const datasources: Record = { + Grafana: { + name: 'Grafana', + meta: { + type: 'datasource', + name: 'Grafana', + id: 'grafana', + info: { + logos: { + small: 'public/img/icn-datasource.svg', + }, + }, + }, + }, + Testdata: { + name: 'Testdata', + id: 4, + meta: { + type: 'datasource', + name: 'TestData', + id: 'testdata', + info: { + logos: { + small: 'public/app/plugins/datasource/testdata/img/testdata.svg', + }, + }, + }, + }, + Prometheus: { + name: 'Prometheus', + id: 33, + meta: { + type: 'datasource', + name: 'Prometheus', + id: 'prometheus', + info: { + logos: { + small: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg', + }, + }, + }, + }, + }; + + const getTableBody = () => screen.getAllByRole('rowgroup')[1]; + const getTableBodyRows = () => within(getTableBody()).getAllByRole('row'); + + beforeAll(() => { + setDataSourceSrv({ + getList() { + return Object.values(datasources).map((d) => d); + }, + getInstanceSettings(name: string) { + return name + ? { + name: datasources[name].name, + value: datasources[name].name, + meta: datasources[name].meta, + } + : { + name: datasources.Testdata.name, + value: datasources.Testdata.name, + meta: datasources.Testdata.meta, + }; + }, + get(name: string) { + return Promise.resolve(name ? datasources[name] : datasources.Testdata); + }, + } as any); + + setAngularLoader({ + load: () => ({ + destroy: jest.fn(), + digest: jest.fn(), + getScope: () => ({ $watch: () => {} }), + }), + }); + }); + + beforeEach(() => { + dashboard = { + id: 74, + version: 7, + annotations: { + list: [ + { + builtIn: 1, + datasource: 'Grafana', + enable: true, + hide: true, + iconColor: 'rgba(0, 211, 255, 1)', + name: 'Annotations & Alerts', + type: 'dashboard', + }, + ], + }, + links: [], + }; + }); + + test('it renders a header and cta if no annotations or only builtIn annotation', () => { + render(); + + expect(screen.getByRole('heading', { name: /annotations/i })).toBeInTheDocument(); + expect(screen.queryByRole('table')).toBeInTheDocument(); + expect(screen.getByRole('row', { name: /annotations & alerts $built\-in$ grafana/i })).toBeInTheDocument(); + expect( + screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')) + ).toBeInTheDocument(); + expect(screen.queryByRole('link', { name: /annotations documentation/i })).toBeInTheDocument(); + + userEvent.click(screen.getByRole('cell', { name: /annotations & alerts $built\-in$/i })); + + const heading = screen.getByRole('heading', { + name: /annotations edit/i, + }); + const nameInput = screen.getByRole('textbox', { name: /name/i }); + + expect(heading).toBeInTheDocument(); + + userEvent.clear(nameInput); + userEvent.type(nameInput, 'My Annotation'); + + expect(screen.queryByText(/grafana/i)).toBeInTheDocument(); + expect(screen.getByRole('checkbox', { name: /hidden/i })).toBeChecked(); + + userEvent.click(within(heading).getByText(/annotations/i)); + + expect(screen.getByRole('table')).toBeInTheDocument(); + expect(screen.getByRole('row', { name: /my annotation $built\-in$ grafana/i })).toBeInTheDocument(); + expect( + screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')) + ).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /new query/i })).not.toBeInTheDocument(); + + userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]); + userEvent.click(screen.getByRole('button', { name: 'Delete' })); + + expect(screen.queryAllByRole('row').length).toBe(0); + expect( + screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')) + ).toBeInTheDocument(); + }); + + test('it renders a sortable table of annotations', () => { + const annotationsList = [ + ...dashboard.annotations.list, + { + builtIn: 0, + datasource: 'Prometheus', + enable: true, + hide: true, + iconColor: 'rgba(0, 211, 255, 1)', + name: 'Annotation 2', + type: 'dashboard', + }, + { + builtIn: 0, + datasource: 'Prometheus', + enable: true, + hide: true, + iconColor: 'rgba(0, 211, 255, 1)', + name: 'Annotation 3', + type: 'dashboard', + }, + ]; + const dashboardWithAnnotations = { + ...dashboard, + annotations: { + list: [...annotationsList], + }, + }; + render(); + // Check that we have sorting buttons + expect(within(getTableBodyRows()[0]).queryByRole('button', { name: 'arrow-up' })).not.toBeInTheDocument(); + expect(within(getTableBodyRows()[0]).queryByRole('button', { name: 'arrow-down' })).toBeInTheDocument(); + + expect(within(getTableBodyRows()[1]).queryByRole('button', { name: 'arrow-up' })).toBeInTheDocument(); + expect(within(getTableBodyRows()[1]).queryByRole('button', { name: 'arrow-down' })).toBeInTheDocument(); + + expect(within(getTableBodyRows()[2]).queryByRole('button', { name: 'arrow-up' })).toBeInTheDocument(); + expect(within(getTableBodyRows()[2]).queryByRole('button', { name: 'arrow-down' })).not.toBeInTheDocument(); + + // Check the original order + expect(within(getTableBodyRows()[0]).queryByText(/annotations & alerts/i)).toBeInTheDocument(); + expect(within(getTableBodyRows()[1]).queryByText(/annotation 2/i)).toBeInTheDocument(); + expect(within(getTableBodyRows()[2]).queryByText(/annotation 3/i)).toBeInTheDocument(); + + userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[0]); + userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[1]); + userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-up' })[0]); + + // Checking if it has changed the sorting accordingly + expect(within(getTableBodyRows()[0]).queryByText(/annotation 3/i)).toBeInTheDocument(); + expect(within(getTableBodyRows()[1]).queryByText(/annotation 2/i)).toBeInTheDocument(); + expect(within(getTableBodyRows()[2]).queryByText(/annotations & alerts/i)).toBeInTheDocument(); + }); + + test('it renders a form for adding/editing annotations', () => { + render(); + + userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query'))); + + const heading = screen.getByRole('heading', { + name: /annotations edit/i, + }); + const nameInput = screen.getByRole('textbox', { name: /name/i }); + + expect(heading).toBeInTheDocument(); + + userEvent.clear(nameInput); + userEvent.type(nameInput, 'My Prometheus Annotation'); + + userEvent.click(screen.getByText(/testdata/i)); + + expect(screen.queryByText(/prometheus/i)).toBeVisible(); + expect(screen.queryAllByText(/testdata/i)).toHaveLength(2); + + userEvent.click(screen.getByText(/prometheus/i)); + + expect(screen.getByRole('checkbox', { name: /hidden/i })).not.toBeChecked(); + + userEvent.click(within(heading).getByText(/annotations/i)); + + expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(2); + expect(screen.queryByRole('row', { name: /my prometheus annotation prometheus/i })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /new query/i })).toBeInTheDocument(); + expect( + screen.queryByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')) + ).not.toBeInTheDocument(); + + userEvent.click(screen.getByRole('button', { name: /new query/i })); + + userEvent.click(within(screen.getByRole('heading', { name: /annotations edit/i })).getByText(/annotations/i)); + + expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(3); + + userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]); + userEvent.click(screen.getByRole('button', { name: 'Delete' })); + + expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(2); + }); +}); diff --git a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx new file mode 100644 index 00000000..93fb799c --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import { DashboardModel } from '../../state/DashboardModel'; +import { AnnotationSettingsEdit, AnnotationSettingsList } from '../AnnotationSettings'; +import { newAnnotation } from '../AnnotationSettings/AnnotationSettingsEdit'; +import { DashboardSettingsHeader } from './DashboardSettingsHeader'; + +interface Props { + dashboard: DashboardModel; +} + +export const AnnotationsSettings: React.FC = ({ dashboard }) => { + const [editIdx, setEditIdx] = useState(null); + + const onGoBack = () => { + setEditIdx(null); + }; + + const onNew = () => { + dashboard.annotations.list = [...dashboard.annotations.list, { ...newAnnotation }]; + setEditIdx(dashboard.annotations.list.length - 1); + }; + + const onEdit = (idx: number) => { + setEditIdx(idx); + }; + + const isEditing = editIdx !== null; + + return ( + <> + + {!isEditing && } + {isEditing && } + + ); +}; diff --git a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.test.tsx b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.test.tsx new file mode 100644 index 00000000..d400a423 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.test.tsx @@ -0,0 +1,175 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { defaultIntervals } from '@grafana/ui'; + +import { AutoRefreshIntervals, getValidIntervals, Props, validateIntervals } from './AutoRefreshIntervals'; +import { TimeSrv } from '../../services/TimeSrv'; + +const setupTestContext = (options: Partial) => { + const defaults: Props = { + refreshIntervals: ['1s', '5s', '10s'], + onRefreshIntervalChange: jest.fn(), + getIntervalsFunc: (intervals) => intervals, + validateIntervalsFunc: () => null, + }; + + const props = { ...defaults, ...options }; + const { rerender } = render(); + + return { rerender, props }; +}; + +describe('AutoRefreshIntervals', () => { + describe('when component is mounted with refreshIntervals', () => { + it('then supplied intervals should be shown', () => { + setupTestContext({ getIntervalsFunc: () => ['5s', '10s'] }); // remove 1s entry to validate we're calling getIntervalsFunc + + expect(screen.getByRole('textbox')).toHaveValue('5s,10s'); + }); + }); + + describe('when component is mounted without refreshIntervals', () => { + it('then default intervals should be shown', () => { + setupTestContext({ refreshIntervals: (null as unknown) as string[] }); + + expect(screen.getByRole('textbox')).toHaveValue('5s,10s,30s,1m,5m,15m,30m,1h,2h,1d'); + }); + }); + + describe('when component is updated from Angular', () => { + it('then intervals should be updated', () => { + const { rerender, props } = setupTestContext({}); + const newProps = { ...props, renderCount: 1, refreshIntervals: ['2s', '6s', '11s'] }; + + rerender(); + + expect(screen.getByRole('textbox')).toHaveValue('2s,6s,11s'); + }); + }); + + describe('when input loses focus and intervals are valid', () => { + it('then onRefreshIntervalChange should be called', () => { + const { props } = setupTestContext({ validateIntervalsFunc: () => null }); + + userEvent.type(screen.getByRole('textbox'), ',30s'); + userEvent.tab(); + + expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30s'); + expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(1); + expect(props.onRefreshIntervalChange).toHaveBeenCalledWith(['1s', '5s', '10s', '30s']); + }); + }); + + describe('when input loses focus and intervals are invalid', () => { + it('then onRefreshIntervalChange should not be called', () => { + const { props } = setupTestContext({ validateIntervalsFunc: () => 'Not valid' }); + + userEvent.type(screen.getByRole('textbox'), ',30q'); + userEvent.tab(); + + expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30q'); + expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(0); + }); + }); + + describe('when input loses focus and previous intervals were invalid', () => { + it('then onRefreshIntervalChange should be called', () => { + 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(); + + expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30s'); + expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(1); + expect(props.onRefreshIntervalChange).toHaveBeenCalledWith(['1s', '5s', '10s', '30s']); + }); + }); +}); + +describe('getValidIntervals', () => { + describe('when called with empty intervals', () => { + it('then is should all non empty intervals', () => { + const emptyIntervals = ['', '5s', ' ', '10s', ' ']; + const dependencies = { + getTimeSrv: () => + (({ + getValidIntervals: (intervals: any) => intervals, + } as unknown) as TimeSrv), + }; + + const result = getValidIntervals(emptyIntervals, dependencies); + + expect(result).toEqual(['5s', '10s']); + }); + }); + + describe('when called with duplicate intervals', () => { + it('then is should return no duplicates', () => { + const duplicateIntervals = ['5s', '10s', '1m', '5s', '30s', '10s', '5s', '2m']; + const dependencies = { + getTimeSrv: () => + (({ + getValidIntervals: (intervals: any) => intervals, + } as unknown) as TimeSrv), + }; + + const result = getValidIntervals(duplicateIntervals, dependencies); + + expect(result).toEqual(['5s', '10s', '1m', '30s', '2m']); + }); + }); + + describe('when called with untrimmed intervals', () => { + it('then is should return trimmed intervals', () => { + const duplicateIntervals = [' 5s', '10s ', ' 1m ', ' 3 0 s ', ' 2 m ']; + const dependencies = { + getTimeSrv: () => + (({ + getValidIntervals: (intervals: any) => intervals, + } as unknown) as TimeSrv), + }; + + const result = getValidIntervals(duplicateIntervals, dependencies); + + expect(result).toEqual(['5s', '10s', '1m', '30s', '2m']); + }); + }); +}); + +describe('validateIntervals', () => { + describe('when getValidIntervals does not throw', () => { + it('then it should return null', () => { + const dependencies = { + getTimeSrv: () => + (({ + getValidIntervals: (intervals: any) => intervals, + } as unknown) as TimeSrv), + }; + + const result = validateIntervals(defaultIntervals, dependencies); + + expect(result).toBe(null); + }); + }); + + describe('when getValidIntervals throws', () => { + it('then it should return the exception message', () => { + const dependencies = { + getTimeSrv: () => + (({ + getValidIntervals: () => { + throw new Error('Some error'); + }, + } as unknown) as TimeSrv), + }; + + const result = validateIntervals(defaultIntervals, dependencies); + + expect(result).toEqual('Some error'); + }); + }); +}); diff --git a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx new file mode 100644 index 00000000..5554971c --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx @@ -0,0 +1,94 @@ +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { Input, defaultIntervals, Field } from '@grafana/ui'; + +import { getTimeSrv } from '../../services/TimeSrv'; + +export interface Props { + refreshIntervals: string[]; + onRefreshIntervalChange: (interval: string[]) => void; + getIntervalsFunc?: typeof getValidIntervals; + validateIntervalsFunc?: typeof validateIntervals; +} + +export const AutoRefreshIntervals: FC = ({ + refreshIntervals, + onRefreshIntervalChange, + getIntervalsFunc = getValidIntervals, + validateIntervalsFunc = validateIntervals, +}) => { + const [intervals, setIntervals] = useState(getIntervalsFunc(refreshIntervals ?? defaultIntervals)); + const [invalidIntervalsMessage, setInvalidIntervalsMessage] = useState(null); + + useEffect(() => { + const intervals = getIntervalsFunc(refreshIntervals ?? defaultIntervals); + setIntervals(intervals); + }, [getIntervalsFunc, refreshIntervals]); + + const intervalsString = useMemo(() => { + if (!Array.isArray(intervals)) { + return ''; + } + + return intervals.join(','); + }, [intervals]); + + const onIntervalsChange = useCallback( + (event: React.FormEvent) => { + const newIntervals = event.currentTarget.value ? event.currentTarget.value.split(',') : []; + + setIntervals(newIntervals); + }, + [setIntervals] + ); + + const onIntervalsBlur = useCallback( + (event: React.FormEvent) => { + const invalidMessage = validateIntervalsFunc(intervals); + + if (invalidMessage === null) { + // only refresh dashboard JSON if intervals are valid + onRefreshIntervalChange(getIntervalsFunc(intervals)); + } + + setInvalidIntervalsMessage(invalidMessage); + }, + [getIntervalsFunc, intervals, onRefreshIntervalChange, validateIntervalsFunc] + ); + + return ( + + + + ); +}; + +export const validateIntervals = ( + intervals: string[], + dependencies: { getTimeSrv: typeof getTimeSrv } = { getTimeSrv } +): string | null => { + try { + getValidIntervals(intervals, dependencies); + return null; + } catch (err) { + return err.message; + } +}; + +export const getValidIntervals = ( + intervals: string[], + dependencies: { getTimeSrv: typeof getTimeSrv } = { getTimeSrv } +) => { + const cleanIntervals = intervals.filter((i) => i.trim() !== '').map((interval) => interval.replace(/\s+/g, '')); + return [...new Set(dependencies.getTimeSrv().getValidIntervals(cleanIntervals))]; +}; diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx new file mode 100644 index 00000000..dd8d6763 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx @@ -0,0 +1,185 @@ +import React, { useCallback, useMemo } from 'react'; +import { Link } from 'react-router-dom'; +import { css, cx } from '@emotion/css'; +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 { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher'; +import { DashboardModel } from '../../state/DashboardModel'; +import { SaveDashboardAsButton, SaveDashboardButton } from '../SaveDashboard/SaveDashboardButton'; +import { VariableEditorContainer } from '../../../variables/editor/VariableEditorContainer'; +import { DashboardPermissions } from '../DashboardPermissions/DashboardPermissions'; +import { GeneralSettings } from './GeneralSettings'; +import { AnnotationsSettings } from './AnnotationsSettings'; +import { LinksSettings } from './LinksSettings'; +import { VersionsSettings } from './VersionsSettings'; +import { JsonEditorSettings } from './JsonEditorSettings'; +import { GrafanaTheme2, locationUtil } from '@grafana/data'; +import { locationService, reportInteraction } from '@grafana/runtime'; + +export interface Props { + dashboard: DashboardModel; + editview: string; +} + +export interface SettingsPage { + id: string; + title: string; + icon: IconName; + component: React.ReactNode; +} + +const onClose = () => locationService.partial({ editview: null }); + +const MakeEditable = (props: { onMakeEditable: () => any }) => ( +

Dashboard not editable

+ +

+); + +export function DashboardSettings({ dashboard, editview }: Props) { + const forceUpdate = useForceUpdate(); + const onMakeEditable = useCallback(() => { + dashboard.editable = true; + dashboard.meta.canMakeEditable = false; + dashboard.meta.canEdit = true; + dashboard.meta.canSave = true; + forceUpdate(); + }, [dashboard, forceUpdate]); + + const pages = useMemo((): SettingsPage[] => { + const pages: SettingsPage[] = []; + + if (dashboard.meta.canEdit) { + pages.push({ + title: 'General', + id: 'settings', + icon: 'sliders-v-alt', + component: , + }); + + pages.push({ + title: 'Annotations', + id: 'annotations', + icon: 'comment-alt', + component: , + }); + + pages.push({ + title: 'Variables', + id: 'templating', + icon: 'calculator-alt', + component: , + }); + + pages.push({ + title: 'Links', + id: 'links', + icon: 'link', + component: , + }); + } + + if (dashboard.meta.canMakeEditable) { + pages.push({ + title: 'General', + icon: 'sliders-v-alt', + id: 'settings', + component: , + }); + } + + if (dashboard.id && dashboard.meta.canSave) { + pages.push({ + title: 'Versions', + id: 'versions', + icon: 'history', + component: , + }); + } + + if (dashboard.id && dashboard.meta.canAdmin) { + pages.push({ + title: 'Permissions', + id: 'permissions', + icon: 'lock', + component: , + }); + } + + pages.push({ + title: 'JSON Model', + id: 'dashboard_json', + icon: 'arrow', + component: , + }); + + return pages; + }, [dashboard, onMakeEditable]); + + const onPostSave = () => { + dashboard.meta.hasUnsavedFolderChange = false; + dashboardWatcher.reloadPage(); + }; + + const folderTitle = dashboard.meta.folderTitle; + const currentPage = pages.find((page) => page.id === editview) ?? pages[0]; + const canSaveAs = contextSrv.hasEditPermissionInFolders; + const canSave = dashboard.meta.canSave; + const styles = getStyles(config.theme2); + + return ( +

+ + +

+ +

{currentPage.component}

+ +

+ ); +} + +const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ + scrollInner: css` + min-width: 100%; + display: flex; + `, + settingsWrapper: css` + margin: ${theme.spacing(0, 2, 2)}; + display: flex; + flex-grow: 1; + `, + settingsContent: css` + flex-grow: 1; + height: 100%; + padding: 32px; + border: 1px solid ${theme.colors.border.weak}; + background: ${theme.colors.background.primary}; + border-radius: ${theme.shape.borderRadius()}; + `, +})); diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettingsHeader.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettingsHeader.tsx new file mode 100644 index 00000000..e17ee1da --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettingsHeader.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Icon, HorizontalGroup } from '@grafana/ui'; + +type Props = { + title: string; + onGoBack: () => void; + isEditing: boolean; +}; + +export const DashboardSettingsHeader: React.FC = ({ onGoBack, isEditing, title }) => { + return ( +

+ +

+ + {title} + + {isEditing && ( + + Edit + + )} +

+ +

+ ); +}; diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx new file mode 100644 index 00000000..8b5b4301 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +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'; + +const setupTestContext = (options: Partial) => { + const defaults: Props = { + dashboard: ({ + title: 'test dashboard title', + description: 'test dashboard description', + timepicker: { + refresh_intervals: ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d', '2d'], + time_options: ['5m', '15m', '1h', '6h', '12h', '24h', '2d', '7d', '30d'], + }, + meta: { + folderId: 1, + folderTitle: 'test', + }, + timezone: 'utc', + } as unknown) as DashboardModel, + updateTimeZone: jest.fn(), + updateWeekStart: jest.fn(), + }; + + const props = { ...defaults, ...options }; + const { rerender } = render(); + + return { rerender, props }; +}; + +describe('General Settings', () => { + describe('when component is mounted with timezone', () => { + it('should render correctly', async () => { + setupTestContext({}); + screen.getByDisplayValue('test dashboard title'); + screen.getByDisplayValue('test dashboard description'); + expect(await screen.findByTestId(selectors.components.TimeZonePicker.containerV2)).toHaveTextContent( + 'Coordinated Universal Time' + ); + }); + }); + + describe('when timezone is changed', () => { + it('should call update function', async () => { + const { props } = setupTestContext({}); + userEvent.click(screen.getByTestId(selectors.components.TimeZonePicker.containerV2)); + const timeZonePicker = screen.getByTestId(selectors.components.TimeZonePicker.containerV2); + 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 new file mode 100644 index 00000000..5ad19559 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx @@ -0,0 +1,165 @@ +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 { FolderPicker } from 'app/core/components/Select/FolderPicker'; +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'; + +interface OwnProps { + dashboard: DashboardModel; +} + +export type Props = OwnProps & ConnectedProps; + +const GRAPH_TOOLTIP_OPTIONS = [ + { value: 0, label: 'Default' }, + { value: 1, label: 'Shared crosshair' }, + { value: 2, label: 'Shared Tooltip' }, +]; + +export function GeneralSettingsUnconnected({ dashboard, updateTimeZone, updateWeekStart }: Props): JSX.Element { + const [renderCounter, setRenderCounter] = useState(0); + + const onFolderChange = (folder: { id: number; title: string }) => { + dashboard.meta.folderId = folder.id; + dashboard.meta.folderTitle = folder.title; + dashboard.meta.hasUnsavedFolderChange = true; + }; + + const onBlur = (event: React.FocusEvent) => { + dashboard[event.currentTarget.name as 'title' | 'description'] = event.currentTarget.value; + }; + + const onTooltipChange = (graphTooltip: number) => { + dashboard.graphTooltip = graphTooltip; + setRenderCounter(renderCounter + 1); + }; + + const onRefreshIntervalChange = (intervals: string[]) => { + dashboard.timepicker.refresh_intervals = intervals.filter((i) => i.trim() !== ''); + }; + + const onNowDelayChange = (nowDelay: string) => { + dashboard.timepicker.nowDelay = nowDelay; + }; + + const onHideTimePickerChange = (hide: boolean) => { + dashboard.timepicker.hidden = hide; + setRenderCounter(renderCounter + 1); + }; + + const onLiveNowChange = (v: boolean) => { + dashboard.liveNow = v; + setRenderCounter(renderCounter + 1); + }; + + const onTimeZoneChange = (timeZone: TimeZone) => { + dashboard.timezone = timeZone; + setRenderCounter(renderCounter + 1); + updateTimeZone(timeZone); + }; + + const onWeekStartChange = (weekStart: string) => { + dashboard.weekStart = weekStart; + setRenderCounter(renderCounter + 1); + updateWeekStart(weekStart); + }; + + const onTagsChange = (tags: string[]) => { + dashboard.tags = tags; + setRenderCounter(renderCounter + 1); + }; + + const onEditableChange = (value: boolean) => { + dashboard.editable = value; + setRenderCounter(renderCounter + 1); + }; + + const editableOptions = [ + { label: 'Editable', value: true }, + { label: 'Read-only', value: false }, + ]; + + return ( +

+ General +

+ + + + + + + + + + + + + + + + +

+ + {config.featureToggles.dashboardPreviews && } + + + + + + + + + +

+ {dashboard.meta.canSave && } +

+ ); +} + +const mapDispatchToProps = { + updateTimeZone: updateTimeZoneDashboard, + updateWeekStart: updateWeekStartDashboard, +}; + +const connector = connect(null, mapDispatchToProps); + +export const GeneralSettings = connector(GeneralSettingsUnconnected); diff --git a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx new file mode 100644 index 00000000..fd121975 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +import { css } from '@emotion/css'; +import AutoSizer from 'react-virtualized-auto-sizer'; +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; +} + +export const JsonEditorSettings: React.FC = ({ dashboard }) => { + const [dashboardJson, setDashboardJson] = useState(JSON.stringify(dashboard.getSaveModelClone(), null, 2)); + const onBlur = (value: string) => { + setDashboardJson(value); + }; + const onClick = () => { + getDashboardSrv() + .saveJSONDashboard(dashboardJson) + .then(() => { + dashboardWatcher.reloadPage(); + }); + }; + const styles = useStyles2(getStyles); + + return ( +

JSON Model

+ The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel + settings, layout, queries, and so on. +

+ +

+ + {({ width, height }) => ( + + )} + +

+ {dashboard.meta.canSave && ( + + + + )} +

+ ); +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + editWrapper: css` + height: calc(100vh - 250px); + margin-bottom: 10px; + `, +}); diff --git a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx new file mode 100644 index 00000000..a2646974 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx @@ -0,0 +1,183 @@ +import React from 'react'; +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import { within } from '@testing-library/dom'; +import userEvent from '@testing-library/user-event'; +import { selectors } from '@grafana/e2e-selectors'; + +import { LinksSettings } from './LinksSettings'; + +describe('LinksSettings', () => { + let dashboard = {}; + const links = [ + { + asDropdown: false, + icon: 'external link', + includeVars: false, + keepTime: false, + tags: [], + targetBlank: false, + title: 'link 1', + tooltip: '', + type: 'link', + url: 'https://www.google.com', + }, + { + asDropdown: false, + icon: 'external link', + includeVars: false, + keepTime: false, + tags: ['gdev'], + targetBlank: false, + title: 'link 2', + tooltip: '', + type: 'dashboards', + url: '', + }, + { + asDropdown: false, + icon: 'external link', + includeVars: false, + keepTime: false, + tags: [], + targetBlank: false, + title: '', + tooltip: '', + type: 'link', + url: 'https://www.bing.com', + }, + ]; + + const getTableBody = () => screen.getAllByRole('rowgroup')[1]; + const getTableBodyRows = () => within(getTableBody()).getAllByRole('row'); + const assertRowHasText = (index: number, text: string) => { + expect(within(getTableBodyRows()[index]).queryByText(text)).toBeInTheDocument(); + }; + + beforeEach(() => { + dashboard = { + id: 74, + version: 7, + links: [...links], + }; + }); + + test('it renders a header and cta if no links', () => { + const linklessDashboard = { ...dashboard, links: [] }; + // @ts-ignore + render(); + + expect(screen.getByRole('heading', { name: 'Dashboard links' })).toBeInTheDocument(); + expect( + screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add dashboard link')) + ).toBeInTheDocument(); + expect(screen.queryByRole('table')).not.toBeInTheDocument(); + }); + + test('it renders a table of links', () => { + // @ts-ignore + render(); + + expect(getTableBodyRows().length).toBe(links.length); + expect( + screen.queryByTestId(selectors.components.CallToActionCard.buttonV2('Add dashboard link')) + ).not.toBeInTheDocument(); + }); + + test('it rearranges the order of dashboard links', () => { + // @ts-ignore + render(); + + // Check that we have sorting buttons + expect(within(getTableBodyRows()[0]).queryByRole('button', { name: 'arrow-up' })).not.toBeInTheDocument(); + expect(within(getTableBodyRows()[0]).queryByRole('button', { name: 'arrow-down' })).toBeInTheDocument(); + + expect(within(getTableBodyRows()[1]).queryByRole('button', { name: 'arrow-up' })).toBeInTheDocument(); + expect(within(getTableBodyRows()[1]).queryByRole('button', { name: 'arrow-down' })).toBeInTheDocument(); + + expect(within(getTableBodyRows()[2]).queryByRole('button', { name: 'arrow-up' })).toBeInTheDocument(); + expect(within(getTableBodyRows()[2]).queryByRole('button', { name: 'arrow-down' })).not.toBeInTheDocument(); + + // Checking the original order + assertRowHasText(0, links[0].title); + assertRowHasText(1, links[1].title); + assertRowHasText(2, links[2].url); + + userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[0]); + userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[1]); + userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-up' })[0]); + + // Checking if it has changed the sorting accordingly + assertRowHasText(0, links[2].url); + assertRowHasText(1, links[1].title); + assertRowHasText(2, links[0].title); + }); + + test('it duplicates dashboard links', () => { + // @ts-ignore + render(); + + expect(getTableBodyRows().length).toBe(links.length); + + userEvent.click(within(getTableBody()).getAllByRole('button', { name: /copy/i })[0]); + + expect(getTableBodyRows().length).toBe(links.length + 1); + expect(within(getTableBody()).getAllByText(links[0].title).length).toBe(2); + }); + + test('it deletes dashboard links', () => { + // @ts-ignore + render(); + + expect(getTableBodyRows().length).toBe(links.length); + + userEvent.click(within(getTableBody()).getAllByLabelText(/Delete link with title/)[0]); + userEvent.click(within(getTableBody()).getByRole('button', { name: 'Delete' })); + + expect(getTableBodyRows().length).toBe(links.length - 1); + expect(within(getTableBody()).queryByText(links[0].title)).not.toBeInTheDocument(); + }); + + test('it renders a form which modifies dashboard links', () => { + // @ts-ignore + render(); + userEvent.click(screen.getByRole('button', { name: /new/i })); + + expect(screen.queryByText('Type')).toBeInTheDocument(); + expect(screen.queryByText('Title')).toBeInTheDocument(); + expect(screen.queryByText('With tags')).toBeInTheDocument(); + + expect(screen.queryByText('Url')).not.toBeInTheDocument(); + expect(screen.queryByText('Tooltip')).not.toBeInTheDocument(); + expect(screen.queryByText('Icon')).not.toBeInTheDocument(); + + userEvent.click(screen.getByText('Dashboards')); + expect(screen.queryAllByText('Dashboards')).toHaveLength(2); + expect(screen.queryByText('Link')).toBeVisible(); + + userEvent.click(screen.getByText('Link')); + + expect(screen.queryByText('URL')).toBeInTheDocument(); + expect(screen.queryByText('Tooltip')).toBeInTheDocument(); + expect(screen.queryByText('Icon')).toBeInTheDocument(); + + userEvent.clear(screen.getByRole('textbox', { name: /title/i })); + userEvent.type(screen.getByRole('textbox', { name: /title/i }), 'New Dashboard Link'); + userEvent.click( + within(screen.getByRole('heading', { name: /dashboard links edit/i })).getByText(/dashboard links/i) + ); + + expect(getTableBodyRows().length).toBe(links.length + 1); + expect(within(getTableBody()).queryByText('New Dashboard Link')).toBeInTheDocument(); + + userEvent.click(screen.getAllByText(links[0].type)[0]); + userEvent.clear(screen.getByRole('textbox', { name: /title/i })); + userEvent.type(screen.getByRole('textbox', { name: /title/i }), 'The first dashboard link'); + userEvent.click( + within(screen.getByRole('heading', { name: /dashboard links edit/i })).getByText(/dashboard links/i) + ); + + expect(within(getTableBody()).queryByText(links[0].title)).not.toBeInTheDocument(); + expect(within(getTableBody()).queryByText('The first dashboard link')).toBeInTheDocument(); + }); +}); diff --git a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx new file mode 100644 index 00000000..4b3eebac --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx @@ -0,0 +1,37 @@ +import React, { useState } from 'react'; +import { DashboardModel } from '../../state/DashboardModel'; +import { LinkSettingsEdit, LinkSettingsList } from '../LinksSettings'; +import { newLink } from '../LinksSettings/LinkSettingsEdit'; +import { DashboardSettingsHeader } from './DashboardSettingsHeader'; +interface Props { + dashboard: DashboardModel; +} + +export type LinkSettingsMode = 'list' | 'new' | 'edit'; + +export const LinksSettings: React.FC = ({ dashboard }) => { + const [editIdx, setEditIdx] = useState(null); + + const onGoBack = () => { + setEditIdx(null); + }; + + const onNew = () => { + dashboard.links = [...dashboard.links, { ...newLink }]; + setEditIdx(dashboard.links.length - 1); + }; + + const onEdit = (idx: number) => { + setEditIdx(idx); + }; + + const isEditing = editIdx !== null; + + return ( + <> + + {!isEditing && } + {isEditing && } + + ); +}; diff --git a/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx b/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx new file mode 100644 index 00000000..be40e1dd --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx @@ -0,0 +1,23 @@ +import React, { ButtonHTMLAttributes } from 'react'; +import { Button, useStyles } from '@grafana/ui'; +import { GrafanaTheme } from '@grafana/data'; +import { css } from '@emotion/css'; + +export interface Props extends ButtonHTMLAttributes {} + +export const ListNewButton: React.FC = ({ children, ...restProps }) => { + const styles = useStyles(getStyles); + return ( +

+ +

+ ); +}; + +const getStyles = (theme: GrafanaTheme) => ({ + buttonWrapper: css` + padding: ${theme.spacing.lg} 0; + `, +}); diff --git a/public/app/features/dashboard/components/DashboardSettings/PreviewSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/PreviewSettings.tsx new file mode 100644 index 00000000..7b51cbe5 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/PreviewSettings.tsx @@ -0,0 +1,84 @@ +import React, { PureComponent } from 'react'; +import { CollapsableSection, FileUpload } from '@grafana/ui'; +import { getThumbnailURL } from 'app/features/search/components/SearchCard'; + +interface Props { + uid: string; +} + +interface State {} + +export class PreviewSettings extends PureComponent { + state: State = {}; + + doUpload = (evt: EventTarget & HTMLInputElement, isLight?: boolean) => { + const file = evt?.files && evt.files[0]; + if (!file) { + console.log('NOPE!', evt); + return; + } + + const url = getThumbnailURL(this.props.uid, isLight); + const formData = new FormData(); + formData.append('file', file); + + fetch(url, { + method: 'POST', + body: formData, + }) + .then((response) => response.json()) + .then((result) => { + console.log('Success:', result); + location.reload(); //HACK + }) + .catch((error) => { + console.error('Error:', error); + }); + }; + + render() { + const { uid } = this.props; + const imgstyle = { maxWidth: 300, maxHeight: 300 }; + return ( + +

DUMMY UI just so we have an upload button!

+ + + + + + + + + + + + + + + + + +

[DARK]	[LIGHT]
+ +	+ +
+ this.doUpload(currentTarget, false)} + > + Upload dark + +	+ this.doUpload(currentTarget, true)} + > + Upload light + +

+ + ); + } +} diff --git a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx new file mode 100644 index 00000000..d4374ca3 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx @@ -0,0 +1,114 @@ +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 { selectors } from '@grafana/e2e-selectors'; +import { AutoRefreshIntervals } from './AutoRefreshIntervals'; + +interface Props { + onWeekStartChange: (weekStart: string) => void; + onTimeZoneChange: (timeZone: TimeZone) => void; + onRefreshIntervalChange: (interval: string[]) => void; + onNowDelayChange: (nowDelay: string) => void; + onHideTimePickerChange: (hide: boolean) => void; + onLiveNowChange: (liveNow: boolean) => void; + refreshIntervals: string[]; + timePickerHidden: boolean; + nowDelay: string; + timezone: TimeZone; + weekStart: string; + liveNow: boolean; +} + +interface State { + isNowDelayValid: boolean; +} + +export class TimePickerSettings extends PureComponent { + state: State = { isNowDelayValid: true }; + + onNowDelayChange = (event: React.FormEvent) => { + const value = event.currentTarget.value; + + if (isEmpty(value)) { + this.setState({ isNowDelayValid: true }); + return this.props.onNowDelayChange(value); + } + + if (rangeUtil.isValidTimeSpan(value)) { + this.setState({ isNowDelayValid: true }); + return this.props.onNowDelayChange(value); + } + + this.setState({ isNowDelayValid: false }); + }; + + onHideTimePickerChange = () => { + this.props.onHideTimePickerChange(!this.props.timePickerHidden); + }; + + onLiveNowChange = () => { + this.props.onLiveNowChange(!this.props.liveNow); + }; + + onTimeZoneChange = (timeZone?: string) => { + if (typeof timeZone !== 'string') { + return; + } + this.props.onTimeZoneChange(timeZone); + }; + + onWeekStartChange = (weekStart: string) => { + this.props.onWeekStartChange(weekStart); + }; + + render() { + return ( + + + + + + + + + + + + + + + + + + + ); + } +} diff --git a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx new file mode 100644 index 00000000..00788bbe --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx @@ -0,0 +1,177 @@ +import React from 'react'; +import '@testing-library/jest-dom'; +import { render, screen, waitFor } from '@testing-library/react'; +import { within } from '@testing-library/dom'; +import userEvent from '@testing-library/user-event'; +import { historySrv } from '../VersionHistory/HistorySrv'; +import { VersionsSettings, VERSIONS_FETCH_LIMIT } from './VersionsSettings'; +import { versions, diffs } from './__mocks__/versions'; + +jest.mock('../VersionHistory/HistorySrv'); + +const queryByFullText = (text: string) => + screen.queryByText((_, node: Element | undefined | null) => { + if (node) { + const nodeHasText = (node: HTMLElement | Element) => node.textContent?.includes(text); + const currentNodeHasText = nodeHasText(node); + const childrenDontHaveText = Array.from(node.children).every((child) => !nodeHasText(child)); + return Boolean(currentNodeHasText && childrenDontHaveText); + } + return false; + }); + +describe('VersionSettings', () => { + const dashboard: any = { + id: 74, + version: 11, + formatDate: jest.fn(() => 'date'), + getRelativeTime: jest.fn(() => 'time ago'), + }; + + beforeEach(() => { + jest.resetAllMocks(); + }); + + test('renders a header and a loading indicator followed by results in a table', async () => { + // @ts-ignore + historySrv.getHistoryList.mockResolvedValue(versions); + render(); + + expect(screen.getByRole('heading', { name: /versions/i })).toBeInTheDocument(); + expect(screen.queryByText(/fetching history list/i)).toBeInTheDocument(); + + await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument()); + const tableBodyRows = within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row'); + + expect(tableBodyRows.length).toBe(versions.length); + + const firstRow = within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row')[0]; + + expect(within(firstRow).getByText(/latest/i)).toBeInTheDocument(); + expect(within(screen.getByRole('table')).getAllByText(/latest/i)).toHaveLength(1); + }); + + test('does not render buttons if versions === 1', async () => { + // @ts-ignore + historySrv.getHistoryList.mockResolvedValue(versions.slice(0, 1)); + render(); + + expect(screen.queryByRole('button', { name: /show more versions/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /compare versions/i })).not.toBeInTheDocument(); + + await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument()); + + expect(screen.queryByRole('button', { name: /show more versions/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /compare versions/i })).not.toBeInTheDocument(); + }); + + test('does not render show more button if versions < VERSIONS_FETCH_LIMIT', async () => { + // @ts-ignore + historySrv.getHistoryList.mockResolvedValue(versions.slice(0, VERSIONS_FETCH_LIMIT - 5)); + render(); + + expect(screen.queryByRole('button', { name: /show more versions|/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /compare versions/i })).not.toBeInTheDocument(); + + await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument()); + + expect(screen.queryByRole('button', { name: /show more versions/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /compare versions/i })).toBeInTheDocument(); + }); + + test('renders buttons if versions >= VERSIONS_FETCH_LIMIT', async () => { + // @ts-ignore + historySrv.getHistoryList.mockResolvedValue(versions.slice(0, VERSIONS_FETCH_LIMIT)); + render(); + + expect(screen.queryByRole('button', { name: /show more versions/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /compare versions/i })).not.toBeInTheDocument(); + + await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument()); + const compareButton = screen.getByRole('button', { name: /compare versions/i }); + const showMoreButton = screen.getByRole('button', { name: /show more versions/i }); + + expect(showMoreButton).toBeInTheDocument(); + expect(showMoreButton).toBeEnabled(); + + expect(compareButton).toBeInTheDocument(); + expect(compareButton).toBeDisabled(); + }); + + test('clicking show more appends results to the table', async () => { + historySrv.getHistoryList + // @ts-ignore + .mockImplementationOnce(() => Promise.resolve(versions.slice(0, VERSIONS_FETCH_LIMIT))) + .mockImplementationOnce(() => Promise.resolve(versions.slice(VERSIONS_FETCH_LIMIT, versions.length))); + + render(); + + expect(historySrv.getHistoryList).toBeCalledTimes(1); + + await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument()); + + expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(VERSIONS_FETCH_LIMIT); + + const showMoreButton = screen.getByRole('button', { name: /show more versions/i }); + userEvent.click(showMoreButton); + + expect(historySrv.getHistoryList).toBeCalledTimes(2); + expect(screen.queryByText(/Fetching more entries/i)).toBeInTheDocument(); + + await waitFor(() => + expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(versions.length) + ); + }); + + test('selecting two versions and clicking compare button should render compare view', async () => { + // @ts-ignore + historySrv.getHistoryList.mockResolvedValue(versions.slice(0, VERSIONS_FETCH_LIMIT)); + historySrv.getDashboardVersion + // @ts-ignore + .mockImplementationOnce(() => Promise.resolve(diffs.lhs)) + .mockImplementationOnce(() => Promise.resolve(diffs.rhs)); + + render(); + + expect(historySrv.getHistoryList).toBeCalledTimes(1); + + await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument()); + + const compareButton = screen.getByRole('button', { name: /compare versions/i }); + const tableBody = screen.getAllByRole('rowgroup')[1]; + userEvent.click(within(tableBody).getAllByRole('checkbox')[0]); + userEvent.click(within(tableBody).getAllByRole('checkbox')[VERSIONS_FETCH_LIMIT - 1]); + + expect(compareButton).toBeEnabled(); + + userEvent.click(within(tableBody).getAllByRole('checkbox')[1]); + + expect(compareButton).toBeDisabled(); + + userEvent.click(within(tableBody).getAllByRole('checkbox')[1]); + userEvent.click(compareButton); + + await waitFor(() => expect(screen.getByRole('heading', { name: /versions comparing 2 11/i })).toBeInTheDocument()); + + expect(queryByFullText('Version 11 updated by admin')).toBeInTheDocument(); + expect(queryByFullText('Version 2 updated by admin')).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /restore to version 2/i })).toBeInTheDocument(); + expect(screen.queryAllByTestId('diffGroup').length).toBe(5); + + const diffGroups = screen.getAllByTestId('diffGroup'); + + expect(queryByFullText('description added The dashboard description')).toBeInTheDocument(); + expect(queryByFullText('panels changed')).toBeInTheDocument(); + expect(within(diffGroups[1]).queryByRole('list')).toBeInTheDocument(); + expect(within(diffGroups[1]).queryByText(/added title/i)).toBeInTheDocument(); + expect(within(diffGroups[1]).queryByText(/changed id/i)).toBeInTheDocument(); + expect(queryByFullText('tags deleted item 0')).toBeInTheDocument(); + expect(queryByFullText('timepicker added 1 refresh_intervals')).toBeInTheDocument(); + expect(queryByFullText('version changed')).toBeInTheDocument(); + expect(screen.queryByText(/view json diff/i)).toBeInTheDocument(); + + userEvent.click(screen.getByText(/view json diff/i)); + + await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument()); + }); +}); diff --git a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx new file mode 100644 index 00000000..f5702c2e --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx @@ -0,0 +1,192 @@ +import React, { PureComponent } from 'react'; +import { Spinner, HorizontalGroup } from '@grafana/ui'; +import { DashboardModel } from '../../state/DashboardModel'; +import { + historySrv, + RevisionsModel, + VersionHistoryTable, + VersionHistoryHeader, + VersionsHistoryButtons, + VersionHistoryComparison, +} from '../VersionHistory'; + +interface Props { + dashboard: DashboardModel; +} + +type State = { + isLoading: boolean; + isAppending: boolean; + versions: DecoratedRevisionModel[]; + viewMode: 'list' | 'compare'; + diffData: { lhs: any; rhs: any }; + newInfo?: DecoratedRevisionModel; + baseInfo?: DecoratedRevisionModel; + isNewLatest: boolean; +}; + +export type DecoratedRevisionModel = RevisionsModel & { + createdDateString: string; + ageString: string; +}; + +export const VERSIONS_FETCH_LIMIT = 10; + +export class VersionsSettings extends PureComponent { + limit: number; + start: number; + + constructor(props: Props) { + super(props); + this.limit = VERSIONS_FETCH_LIMIT; + this.start = 0; + this.state = { + isAppending: true, + isLoading: true, + versions: [], + viewMode: 'list', + isNewLatest: false, + diffData: { + lhs: {}, + rhs: {}, + }, + }; + } + + componentDidMount() { + this.getVersions(); + } + + getVersions = (append = false) => { + this.setState({ isAppending: append }); + historySrv + .getHistoryList(this.props.dashboard, { limit: this.limit, start: this.start }) + .then((res) => { + this.setState({ + isLoading: false, + versions: [...this.state.versions, ...this.decorateVersions(res)], + }); + this.start += this.limit; + }) + .catch((err) => console.log(err)) + .finally(() => this.setState({ isAppending: false })); + }; + + getDiff = async () => { + const selectedVersions = this.state.versions.filter((version) => version.checked); + const [newInfo, baseInfo] = selectedVersions; + const isNewLatest = newInfo.version === this.props.dashboard.version; + + this.setState({ + isLoading: true, + }); + + const lhs = await historySrv.getDashboardVersion(this.props.dashboard.id, baseInfo.version); + const rhs = await historySrv.getDashboardVersion(this.props.dashboard.id, newInfo.version); + + this.setState({ + baseInfo, + isLoading: false, + isNewLatest, + newInfo, + viewMode: 'compare', + diffData: { + lhs: lhs.data, + rhs: rhs.data, + }, + }); + }; + + decorateVersions = (versions: RevisionsModel[]) => + versions.map((version) => ({ + ...version, + createdDateString: this.props.dashboard.formatDate(version.created), + ageString: this.props.dashboard.getRelativeTime(version.created), + checked: false, + })); + + isLastPage() { + return this.state.versions.find((rev) => rev.version === 1); + } + + onCheck = (ev: React.FormEvent, versionId: number) => { + this.setState({ + versions: this.state.versions.map((version) => + version.id === versionId ? { ...version, checked: ev.currentTarget.checked } : version + ), + }); + }; + + reset = () => { + this.setState({ + baseInfo: undefined, + diffData: { + lhs: {}, + rhs: {}, + }, + isNewLatest: false, + newInfo: undefined, + versions: this.state.versions.map((version) => ({ ...version, checked: false })), + viewMode: 'list', + }); + }; + + render() { + const { versions, viewMode, baseInfo, newInfo, isNewLatest, isLoading, diffData } = this.state; + const canCompare = versions.filter((version) => version.checked).length !== 2; + const showButtons = versions.length > 1; + const hasMore = versions.length >= this.limit; + + if (viewMode === 'compare') { + return ( +

+ + {isLoading ? ( + + ) : ( + + )} +

+ ); + } + + return ( +

+ + {isLoading ? ( + + ) : ( + + )} + {this.state.isAppending && } + {showButtons && ( + + )} +

+ ); + } +} + +const VersionsHistorySpinner = ({ msg }: { msg: string }) => ( + + + {msg} + +); diff --git a/public/app/features/dashboard/components/DashboardSettings/__mocks__/versions.ts b/public/app/features/dashboard/components/DashboardSettings/__mocks__/versions.ts new file mode 100644 index 00000000..fc3e141f --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/__mocks__/versions.ts @@ -0,0 +1,205 @@ +export const versions = [ + { + id: 249, + dashboardId: 74, + parentVersion: 10, + restoredFrom: 0, + version: 11, + created: '2021-01-15T14:44:44+01:00', + createdBy: 'admin', + message: 'testing changes...', + }, + { + id: 247, + dashboardId: 74, + parentVersion: 9, + restoredFrom: 0, + version: 10, + created: '2021-01-15T10:19:17+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 246, + dashboardId: 74, + parentVersion: 8, + restoredFrom: 0, + version: 9, + created: '2021-01-15T10:18:12+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 245, + dashboardId: 74, + parentVersion: 7, + restoredFrom: 0, + version: 8, + created: '2021-01-15T10:11:16+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 239, + dashboardId: 74, + parentVersion: 6, + restoredFrom: 0, + version: 7, + created: '2021-01-14T15:14:25+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 237, + dashboardId: 74, + parentVersion: 5, + restoredFrom: 0, + version: 6, + created: '2021-01-14T14:55:29+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 236, + dashboardId: 74, + parentVersion: 4, + restoredFrom: 0, + version: 5, + created: '2021-01-14T14:28:01+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 218, + dashboardId: 74, + parentVersion: 3, + restoredFrom: 0, + version: 4, + created: '2021-01-08T10:45:33+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 217, + dashboardId: 74, + parentVersion: 2, + restoredFrom: 0, + version: 3, + created: '2021-01-05T15:41:33+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 216, + dashboardId: 74, + parentVersion: 1, + restoredFrom: 0, + version: 2, + created: '2021-01-05T15:01:50+01:00', + createdBy: 'admin', + message: '', + }, + { + id: 215, + dashboardId: 74, + parentVersion: 1, + restoredFrom: 0, + version: 1, + created: '2021-01-05T14:59:15+01:00', + createdBy: 'admin', + message: '', + }, +]; + +export const diffs = { + lhs: { + data: { + annotations: { + list: [ + { + builtIn: 1, + datasource: '-- Grafana --', + enable: true, + hide: true, + iconColor: 'rgba(0, 211, 255, 1)', + name: 'Annotations & Alerts', + type: 'dashboard', + }, + ], + }, + editable: true, + gnetId: null, + graphTooltip: 0, + id: 141, + links: [], + panels: [ + { + type: 'graph', + id: 4, + }, + ], + schemaVersion: 27, + style: 'dark', + tags: ['the tag'], + templating: { + list: [], + }, + time: { + from: 'now-6h', + to: 'now', + }, + timepicker: {}, + timezone: '', + title: 'test dashboard', + uid: '_U4zObQMz', + version: 2, + }, + }, + rhs: { + data: { + annotations: { + list: [ + { + builtIn: 1, + datasource: '-- Grafana --', + enable: true, + hide: true, + iconColor: 'rgba(0, 211, 255, 1)', + name: 'Annotations & Alerts', + type: 'dashboard', + }, + ], + }, + description: 'The dashboard description', + editable: true, + gnetId: null, + graphTooltip: 0, + id: 141, + links: [], + panels: [ + { + type: 'graph', + title: 'panel title', + id: 6, + }, + ], + schemaVersion: 27, + style: 'dark', + tags: [], + templating: { + list: [], + }, + time: { + from: 'now-6h', + to: 'now', + }, + timepicker: { + refresh_intervals: ['5s'], + }, + timezone: '', + title: 'test dashboard', + uid: '_U4zObQMz', + version: 11, + }, + }, +}; diff --git a/public/app/features/dashboard/components/DashboardSettings/index.ts b/public/app/features/dashboard/components/DashboardSettings/index.ts new file mode 100644 index 00000000..92fde590 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/index.ts @@ -0,0 +1 @@ +export { DashboardSettings } from './DashboardSettings'; diff --git a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardButton.tsx b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardButton.tsx new file mode 100644 index 00000000..a32207fc --- /dev/null +++ b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardButton.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { DeleteDashboardModal } from './DeleteDashboardModal'; +import { Button, ModalsController } from '@grafana/ui'; +import { DashboardModel } from '../../state'; + +type Props = { + dashboard: DashboardModel; +}; + +export const DeleteDashboardButton = ({ dashboard }: Props) => ( + + {({ showModal, hideModal }) => ( + + )} + +); diff --git a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx new file mode 100644 index 00000000..97ea543f --- /dev/null +++ b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { css } from '@emotion/css'; +import { sumBy } from 'lodash'; +import { Modal, ConfirmModal, Button } from '@grafana/ui'; +import { DashboardModel, PanelModel } from '../../state'; +import { useDashboardDelete } from './useDashboardDelete'; +import useAsyncFn from 'react-use/lib/useAsyncFn'; +import { config } from 'app/core/config'; + +type DeleteDashboardModalProps = { + hideModal(): void; + dashboard: DashboardModel; +}; + +export const DeleteDashboardModal: React.FC = ({ hideModal, dashboard }) => { + const isProvisioned = dashboard.meta.provisioned; + const { onDeleteDashboard } = useDashboardDelete(dashboard.uid); + + const [, onConfirm] = useAsyncFn(async () => { + await onDeleteDashboard(); + hideModal(); + }, [hideModal]); + + const modalBody = getModalBody(dashboard.panels, dashboard.title); + + if (isProvisioned) { + return ; + } + + return ( + + ); +}; + +const getModalBody = (panels: PanelModel[], title: string) => { + const totalAlerts = sumBy(panels, (panel) => (panel.alert ? 1 : 0)); + return totalAlerts > 0 && !config.unifiedAlertingEnabled ? ( + <> +

Do you want to delete this dashboard?

+ This dashboard contains {totalAlerts} alert{totalAlerts > 1 ? 's' : ''}. Deleting this dashboard also deletes + those alerts. +

+ + ) : ( + <> +

Do you want to delete this dashboard?

{title}

+ + ); +}; + +const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): void; provisionedId: string }) => ( + +

+ This dashboard is managed by Grafana provisioning and cannot be deleted. Remove the dashboard from the config file + to delete it. +

+ + See{' '} + + documentation + {' '} + for more information about provisioning. + +
+ File path: {provisionedId} +

+ + + + +); diff --git a/public/app/features/dashboard/components/DeleteDashboard/useDashboardDelete.tsx b/public/app/features/dashboard/components/DeleteDashboard/useDashboardDelete.tsx new file mode 100644 index 00000000..9d1526b6 --- /dev/null +++ b/public/app/features/dashboard/components/DeleteDashboard/useDashboardDelete.tsx @@ -0,0 +1,19 @@ +import { useEffect } from 'react'; +import { useAsyncFn } from 'react-use'; +import { AppEvents } from '@grafana/data'; +import appEvents from 'app/core/app_events'; +import { deleteDashboard } from 'app/features/manage-dashboards/state/actions'; +import { locationService } from '@grafana/runtime'; + +export const useDashboardDelete = (uid: string) => { + const [state, onDeleteDashboard] = useAsyncFn(() => deleteDashboard(uid, false), []); + + useEffect(() => { + if (state.value) { + locationService.replace('/'); + appEvents.emit(AppEvents.alertSuccess, ['Dashboard Deleted', state.value.title + ' has been deleted']); + } + }, [state]); + + return { state, onDeleteDashboard }; +}; diff --git a/public/app/features/dashboard/components/Inspector/InspectContent.tsx b/public/app/features/dashboard/components/Inspector/InspectContent.tsx new file mode 100644 index 00000000..311059c7 --- /dev/null +++ b/public/app/features/dashboard/components/Inspector/InspectContent.tsx @@ -0,0 +1,107 @@ +import React, { useState } from 'react'; +import { DataSourceApi, PanelData, PanelPlugin } from '@grafana/data'; +import { getTemplateSrv } from '@grafana/runtime'; +import { CustomScrollbar, Drawer, TabContent } from '@grafana/ui'; +import { getPanelInspectorStyles } from 'app/features/inspector/styles'; +import { InspectMetadataTab } from 'app/features/inspector/InspectMetadataTab'; +import { InspectSubtitle } from 'app/features/inspector/InspectSubtitle'; +import { InspectJSONTab } from 'app/features/inspector/InspectJSONTab'; +import { QueryInspector } from 'app/features/inspector/QueryInspector'; +import { InspectStatsTab } from 'app/features/inspector/InspectStatsTab'; +import { InspectErrorTab } from 'app/features/inspector/InspectErrorTab'; +import { InspectDataTab } from 'app/features/inspector/InspectDataTab'; +import { InspectTab } from 'app/features/inspector/types'; +import { DashboardModel, PanelModel } from '../../state'; +import { GetDataOptions } from '../../../query/state/PanelQueryRunner'; +import { InspectActionsTab } from './PanelInspectActions'; + +interface Props { + dashboard: DashboardModel; + panel: PanelModel; + plugin?: PanelPlugin | null; + defaultTab?: InspectTab; + tabs: Array<{ label: string; value: InspectTab }>; + // The last raw response + data?: PanelData; + isDataLoading: boolean; + dataOptions: GetDataOptions; + // If the datasource supports custom metadata + metadataDatasource?: DataSourceApi; + onDataOptionsChange: (options: GetDataOptions) => void; + onClose: () => void; +} + +export const InspectContent: React.FC = ({ + panel, + plugin, + dashboard, + tabs, + data, + isDataLoading, + dataOptions, + metadataDatasource, + defaultTab, + onDataOptionsChange, + onClose, +}) => { + const [currentTab, setCurrentTab] = useState(defaultTab ?? InspectTab.Data); + + if (!plugin) { + return null; + } + + const styles = getPanelInspectorStyles(); + const error = data?.error; + + // Validate that the active tab is actually valid and allowed + let activeTab = currentTab; + if (!tabs.find((item) => item.value === currentTab)) { + activeTab = InspectTab.JSON; + } + const title = getTemplateSrv().replace(panel.title, panel.scopedVars, 'text'); + + return ( + setCurrentTab(item.value || InspectTab.Data)} + /> + } + width="50%" + onClose={onClose} + expandable + > + {activeTab === InspectTab.Data && ( + + )} + + + {data && activeTab === InspectTab.Meta && ( + + )} + + {activeTab === InspectTab.JSON && ( + + )} + {activeTab === InspectTab.Error && } + {data && activeTab === InspectTab.Stats && } + {data && activeTab === InspectTab.Query && ( + panel.refresh()} /> + )} + {activeTab === InspectTab.Actions && } + + + + ); +}; diff --git a/public/app/features/dashboard/components/Inspector/PanelInspectActions.tsx b/public/app/features/dashboard/components/Inspector/PanelInspectActions.tsx new file mode 100644 index 00000000..795f7a89 --- /dev/null +++ b/public/app/features/dashboard/components/Inspector/PanelInspectActions.tsx @@ -0,0 +1,84 @@ +import { PanelModel } from '../../state'; + +export interface PanelInspectActionProps { + panel: PanelModel; + data?: PanelData; +} + +export interface PanelInspectAction { + title: string; + description: string; + + component: ComponentType; +} + +export interface PanelInspectActionSupplier { + getActions: (panel: PanelModel) => PanelInspectAction[] | null; +} + +// const dummySupplier: PanelInspectActionSupplier = { +// getActions: (panel: PanelModel) => { +// return [ +// { +// title: 'Do something', +// description: 'that thingy', +// // eslint-disable-next-line react/display-name +// component: ({ panel }) => { +// return ( +//

+// DO THING ONE. Panel:

{JSON.stringify(panel.targets)}

+//

+// ); +// }, +// }, +// { +// title: 'Do something else', +// description: 'another thing', +// // eslint-disable-next-line react/display-name +// component: ({ panel }) => { +// return ( +//

+// DO THING TWO. Panel:

{JSON.stringify(panel.targets)}

+//

+// ); +// }, +// }, +// ]; +// }, +// }; + +// In Grafana 8.1, this can be improved and moved to `@grafana/runtime` +// NOTE: This is an internal/experimental API/hack and will change! +// (window as any).grafanaPanelInspectActionSupplier = dummySupplier; + +import React, { ComponentType } from 'react'; +import { PanelData } from '@grafana/data'; + +interface InspectActionsTabProps { + panel: PanelModel; + data?: PanelData; +} + +export const InspectActionsTab: React.FC = ({ panel, data }) => { + const supplier = (window as any).grafanaPanelInspectActionSupplier as PanelInspectActionSupplier; + if (!supplier) { + return

Missing actions

; + } + + const actions = supplier.getActions(panel); + if (!actions?.length) { + return

No actions avaliable

; + } + + return ( +

+ {actions.map((a, idx) => ( +

{a.title}

+ {a.description} + +

+ ))} +

+ ); +}; diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx new file mode 100644 index 00000000..56814922 --- /dev/null +++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; +import { connect, MapStateToProps } from 'react-redux'; +import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; +import { PanelPlugin } from '@grafana/data'; +import { locationService } from '@grafana/runtime'; +import { StoreState } from 'app/types'; +import { GetDataOptions } from '../../../query/state/PanelQueryRunner'; +import { usePanelLatestData } from '../PanelEditor/usePanelLatestData'; +import { InspectContent } from './InspectContent'; +import { useDatasourceMetadata, useInspectTabs } from './hooks'; +import { useLocation } from 'react-router-dom'; +import { InspectTab } from 'app/features/inspector/types'; +import { getPanelStateForModel } from 'app/features/panel/state/selectors'; + +interface OwnProps { + dashboard: DashboardModel; + panel: PanelModel; +} + +export interface ConnectedProps { + plugin?: PanelPlugin | null; +} + +export type Props = OwnProps & ConnectedProps; + +const PanelInspectorUnconnected: React.FC = ({ panel, dashboard, plugin }) => { + const [dataOptions, setDataOptions] = useState({ + withTransforms: false, + withFieldConfig: true, + }); + + const location = useLocation(); + const { data, isLoading, error } = usePanelLatestData(panel, dataOptions, true); + const metaDs = useDatasourceMetadata(data); + const tabs = useInspectTabs(panel, dashboard, plugin, error, metaDs); + const defaultTab = new URLSearchParams(location.search).get('inspectTab') as InspectTab; + + const onClose = () => { + locationService.partial({ + inspect: null, + inspectTab: null, + }); + }; + + if (!plugin) { + return null; + } + + return ( + + ); +}; + +const mapStateToProps: MapStateToProps = (state, props) => { + const panelState = getPanelStateForModel(state, props.panel); + if (!panelState) { + return { plugin: null }; + } + + return { + plugin: panelState.plugin, + }; +}; + +export const PanelInspector = connect(mapStateToProps)(PanelInspectorUnconnected); diff --git a/public/app/features/dashboard/components/Inspector/hooks.ts b/public/app/features/dashboard/components/Inspector/hooks.ts new file mode 100644 index 00000000..c46fd862 --- /dev/null +++ b/public/app/features/dashboard/components/Inspector/hooks.ts @@ -0,0 +1,73 @@ +import { DataQueryError, DataSourceApi, PanelData, PanelPlugin } from '@grafana/data'; +import useAsync from 'react-use/lib/useAsync'; +import { getDataSourceSrv } from '@grafana/runtime'; +import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; +import { useMemo } from 'react'; +import { supportsDataQuery } from '../PanelEditor/utils'; +import { InspectTab } from 'app/features/inspector/types'; +import { PanelInspectActionSupplier } from './PanelInspectActions'; + +/** + * Given PanelData return first data source supporting metadata inspector + */ +export const useDatasourceMetadata = (data?: PanelData) => { + const state = useAsync(async () => { + const targets = data?.request?.targets || []; + + if (data && data.series && targets.length) { + for (const frame of data.series) { + if (frame.meta && frame.meta.custom) { + // get data source from first query + const dataSource = await getDataSourceSrv().get(targets[0].datasource); + if (dataSource && dataSource.components?.MetadataInspector) { + return dataSource; + } + } + } + } + + return undefined; + }, [data]); + return state.value; +}; + +/** + * Configures tabs for PanelInspector + */ +export const useInspectTabs = ( + panel: PanelModel, + dashboard: DashboardModel, + plugin: PanelPlugin | undefined | null, + error?: DataQueryError, + metaDs?: DataSourceApi +) => { + return useMemo(() => { + const tabs = []; + if (supportsDataQuery(plugin)) { + tabs.push({ label: 'Data', value: InspectTab.Data }); + tabs.push({ label: 'Stats', value: InspectTab.Stats }); + } + + if (metaDs) { + tabs.push({ label: 'Meta Data', value: InspectTab.Meta }); + } + + tabs.push({ label: 'JSON', value: InspectTab.JSON }); + + if (error && error.message) { + tabs.push({ label: 'Error', value: InspectTab.Error }); + } + + // This is a quick internal hack to allow custom actions in inspect + // For 8.1, something like this should be exposed through grafana/runtime + const supplier = (window as any).grafanaPanelInspectActionSupplier as PanelInspectActionSupplier; + if (supplier && supplier.getActions(panel)) { + tabs.push({ label: 'Actions', value: InspectTab.Actions }); + } + + if (dashboard.meta.canEdit && supportsDataQuery(plugin)) { + tabs.push({ label: 'Query', value: InspectTab.Query }); + } + return tabs; + }, [panel, plugin, metaDs, dashboard, error]); +}; diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx new file mode 100644 index 00000000..ac99dca1 --- /dev/null +++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx @@ -0,0 +1,151 @@ +import React, { useState } from 'react'; +import { CollapsableSection, TagsInput, Select, Field, Input, Checkbox } from '@grafana/ui'; +import { SelectableValue } from '@grafana/data'; +import { DashboardLink, DashboardModel } from '../../state/DashboardModel'; + +export const newLink = { + icon: 'external link', + title: 'New link', + tooltip: '', + type: 'dashboards', + url: '', + asDropdown: false, + tags: [], + targetBlank: false, + keepTime: false, + includeVars: false, +} as DashboardLink; + +const linkTypeOptions = [ + { value: 'dashboards', label: 'Dashboards' }, + { value: 'link', label: 'Link' }, +]; + +export const linkIconMap: { [key: string]: string } = { + 'external link': 'external-link-alt', + dashboard: 'apps', + question: 'question-circle', + info: 'info-circle', + bolt: 'bolt', + doc: 'file-alt', + cloud: 'cloud', +}; + +const linkIconOptions = Object.keys(linkIconMap).map((key) => ({ label: key, value: key })); + +type LinkSettingsEditProps = { + editLinkIdx: number; + dashboard: DashboardModel; + onGoBack: () => void; +}; + +export const LinkSettingsEdit: React.FC = ({ editLinkIdx, dashboard }) => { + const [linkSettings, setLinkSettings] = useState(editLinkIdx !== null ? dashboard.links[editLinkIdx] : newLink); + + const onUpdate = (link: DashboardLink) => { + const links = [...dashboard.links]; + links.splice(editLinkIdx, 1, link); + dashboard.links = links; + setLinkSettings(link); + }; + + const onTagsChange = (tags: any[]) => { + onUpdate({ ...linkSettings, tags: tags }); + }; + + const onTypeChange = (selectedItem: SelectableValue) => { + const update = { ...linkSettings, type: selectedItem.value }; + + // clear props that are no longe revant for this type + if (update.type === 'dashboards') { + update.url = ''; + update.tooltip = ''; + } else { + update.tags = []; + } + + onUpdate(update); + }; + + const onIconChange = (selectedItem: SelectableValue) => { + onUpdate({ ...linkSettings, icon: selectedItem.value }); + }; + + const onChange = (ev: React.FocusEvent) => { + const target = ev.currentTarget; + onUpdate({ + ...linkSettings, + [target.name]: target.type === 'checkbox' ? target.checked : target.value, + }); + }; + + const isNew = linkSettings.title === newLink.title; + + return ( +

+ + + + + + + + + + + + onPanelConfigChange('libraryPanel', { ...panel.libraryPanel, name: e.currentTarget.value }) + } + /> + ); + }, + }) + ) + .addItem( + new OptionsPaneItemDescriptor({ + title: 'Information', + render: function renderLibraryPanelInformation() { + return ; + }, + }) + ); + } + + return descriptor; +} diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx new file mode 100644 index 00000000..5cd1e343 --- /dev/null +++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx @@ -0,0 +1,148 @@ +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 { OptionPaneRenderProps } from './types'; + +export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor { + const { panel, onPanelConfigChange } = props; + const descriptor = new OptionsPaneCategoryDescriptor({ + title: 'Panel options', + id: 'Panel options', + isOpenDefault: true, + }); + + return descriptor + .addItem( + new OptionsPaneItemDescriptor({ + title: 'Title', + value: panel.title, + popularRank: 1, + render: function renderTitle() { + return ( + onPanelConfigChange('title', e.currentTarget.value)} + /> + ); + }, + }) + ) + .addItem( + new OptionsPaneItemDescriptor({ + title: 'Description', + description: panel.description, + value: panel.description, + render: function renderDescription() { + return ( +

+ +

+ + Show Help + + + +

+ +

Annotation Query Format
+An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the time column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
+
+- column with alias: time for the annotation event time. Use epoch time or any native date data type.
+- column with alias: timeend for the annotation event end time. Use epoch time or any native date data type.
+- column with alias: text for the annotation text.
+- column with alias: tags for annotation tags. This is a comma separated string of tags e.g. 'tag1,tag2'.
+
+
+Macros:
+- $__time(column) -> column AS time
+- $__timeEpoch(column) -> DATEDIFF(second, '1970-01-01', column) AS time
+- $__timeFilter(column) -> column BETWEEN '2017-04-21T05:01:17Z' AND '2017-04-21T05:01:17Z'
+- $__unixEpochFilter(column) -> column >= 1492750877 AND column <= 1492750877
+- $__unixEpochNanoFilter(column) ->  column >= 1494410783152415214 AND column <= 1494497183142514872
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() ->  '2017-04-21T05:01:17Z'
+- $__timeTo() ->  '2017-04-21T05:01:17Z'
+- $__unixEpochFrom() -> 1492750877
+- $__unixEpochTo() -> 1492750877
+- $__unixEpochNanoFrom() ->  1494410783152415214
+- $__unixEpochNanoTo() ->  1494497183142514872
+

diff --git a/public/app/plugins/datasource/mssql/partials/config.html b/public/app/plugins/datasource/mssql/partials/config.html new file mode 100644 index 00000000..af18c632 --- /dev/null +++ b/public/app/plugins/datasource/mssql/partials/config.html @@ -0,0 +1,125 @@ + +

MS SQL connection

+ +

+ Host + +

+ +

+ Database + +

+ +

+ Authentication +

+ + +

SQL Server Authentication This is the default mechanism to connect to MS SQL Server. Enter the SQL Server Authentication login or the Windows Authentication login in the DOMAIN\User format.
Windows Authentication Windows Integrated Security - single sign on for users who are already logged onto Windows and have enabled this option for MS SQL Server.

+ +

+ User + +

+ +

+ Encrypt +

+ + + Determines whether or to which extent a secure SSL TCP/IP connection will be negotiated with the server. +

disable - Data sent between client and server is not encrypted.
false - Data sent between client and server is not encrypted beyond the login packet. (default)
true - Data sent between client and server is encrypted.

+ If you're using an older version of Microsoft SQL Server like 2008 and 2008R2 you may need to disable encryption to be able to connect. + +

+ +

Connection limits

+ +

+ Max open + + + The maximum number of open connections to the database. If Max idle connections is greater than 0 and the + Max open connections is less than Max idle connections, then Max idle connections will be + reduced to match the Max open connections limit. If set to 0, there is no limit on the number of open + connections. + +

+ Max idle + + + The maximum number of connections in the idle connection pool. If Max open connections is greater than 0 but + less than the Max idle connections, then the Max idle connections will be reduced to match the + Max open connections limit. If set to 0, no idle connections are retained. + +

+ Max lifetime + + + The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever. + +

+ +

MS SQL details

+ +

+ Min time interval + + + A lower limit for the auto group by time interval. Recommended to be set to write frequency, + for example 1m if your data is written every minute. + +

+ +

User Permission

+ The database user should only be granted SELECT permissions on the specified database and tables you want to query. + Grafana does not validate that queries are safe so queries can contain any SQL statement. For example, statements + like USE otherdb; and DROP TABLE user; would be executed. To protect against this we + highly recommmend you create a specific MS SQL user with restricted permissions. +

+ diff --git a/public/app/plugins/datasource/mssql/partials/query.editor.html b/public/app/plugins/datasource/mssql/partials/query.editor.html new file mode 100644 index 00000000..a1c71e0c --- /dev/null +++ b/public/app/plugins/datasource/mssql/partials/query.editor.html @@ -0,0 +1,90 @@ + +

+ + +

+ +

+ Format as +

+ +

+ + Show Help + + + +

+ + Generated SQL + + + +

+ +

Time series:
+- return column named time (in UTC), as a unix time stamp or any sql native date data type. You can use the macros below.
+- any other columns returned will be the time point values.
+Optional:
+  - return column named metric to represent the series name.
+  - If multiple value columns are returned the metric column is used as prefix.
+  - If no column named metric is found the column name of the value column is used as series name
+
+Resultsets of time series queries need to be sorted by time.
+
+Table:
+- return any set of columns
+
+Macros:
+- $__time(column) -> column AS time
+- $__timeEpoch(column) -> DATEDIFF(second, '1970-01-01', column) AS time
+- $__timeFilter(column) -> column BETWEEN '2017-04-21T05:01:17Z' AND '2017-04-21T05:01:17Z'
+- $__unixEpochFilter(column) -> column >= 1492750877 AND column <= 1492750877
+- $__unixEpochNanoFilter(column) ->  column >= 1494410783152415214 AND column <= 1494497183142514872
+- $__timeGroup(column, '5m'[, fillvalue]) -> CAST(ROUND(DATEDIFF(second, '1970-01-01', column)/300.0, 0) as bigint)*300.
+     by setting fillvalue grafana will fill in missing values according to the interval
+     fillvalue can be either a literal value, NULL or previous; previous will fill in the previous seen value or NULL if none has been seen yet
+- $__timeGroupAlias(column, '5m'[, fillvalue]) -> CAST(ROUND(DATEDIFF(second, '1970-01-01', column)/300.0, 0) as bigint)*300 AS [time]
+- $__unixEpochGroup(column,'5m') -> FLOOR(column/300)*300
+- $__unixEpochGroupAlias(column,'5m') -> FLOOR(column/300)*300 AS [time]
+
+Example of group by and order by with $__timeGroup:
+SELECT
+  $__timeGroup(date_time_col, '1h') AS time,
+  sum(value) as value
+FROM yourtable
+GROUP BY $__timeGroup(date_time_col, '1h')
+ORDER BY 1
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() ->  '2017-04-21T05:01:17Z'
+- $__timeTo() ->  '2017-04-21T05:01:17Z'
+- $__unixEpochFrom() -> 1492750877
+- $__unixEpochTo() -> 1492750877
+- $__unixEpochNanoFrom() ->  1494410783152415214
+- $__unixEpochNanoTo() ->  1494497183142514872
+

+ +

{{ctrl.lastQueryMeta.executedQueryString}}

+ +

{{ctrl.lastQueryError}}

+ + diff --git a/public/app/plugins/datasource/mssql/plugin.json b/public/app/plugins/datasource/mssql/plugin.json new file mode 100644 index 00000000..2c34f139 --- /dev/null +++ b/public/app/plugins/datasource/mssql/plugin.json @@ -0,0 +1,27 @@ +{ + "type": "datasource", + "name": "Microsoft SQL Server", + "id": "mssql", + "category": "sql", + + "info": { + "description": "Data source for Microsoft SQL Server compatible databases", + "author": { + "name": "Grafana Labs", + "url": "https://grafana.com" + }, + "logos": { + "small": "img/sql_server_logo.svg", + "large": "img/sql_server_logo.svg" + } + }, + + "alerting": true, + "annotations": true, + "metrics": true, + "backend": true, + + "queryOptions": { + "minInterval": true + } +} diff --git a/public/app/plugins/datasource/mssql/query_ctrl.ts b/public/app/plugins/datasource/mssql/query_ctrl.ts new file mode 100644 index 00000000..3dd76632 --- /dev/null +++ b/public/app/plugins/datasource/mssql/query_ctrl.ts @@ -0,0 +1,63 @@ +import { QueryCtrl } from 'app/plugins/sdk'; +import { auto } from 'angular'; +import { PanelEvents, QueryResultMeta } from '@grafana/data'; +import { MssqlQuery } from './types'; + +const defaultQuery = `SELECT + $__timeEpoch(), + as value, + as metric +FROM + +WHERE + $__timeFilter(time_column) +ORDER BY + ASC`; + +export class MssqlQueryCtrl extends QueryCtrl { + static templateUrl = 'partials/query.editor.html'; + + formats: any[]; + lastQueryMeta?: QueryResultMeta; + lastQueryError?: string; + showHelp = false; + + /** @ngInject */ + constructor($scope: any, $injector: auto.IInjectorService) { + super($scope, $injector); + + this.target.format = this.target.format || 'time_series'; + this.target.alias = ''; + this.formats = [ + { text: 'Time series', value: 'time_series' }, + { text: 'Table', value: 'table' }, + ]; + + if (!this.target.rawSql) { + // special handling when in table panel + if (this.panelCtrl.panel.type === 'table') { + this.target.format = 'table'; + this.target.rawSql = 'SELECT 1'; + } else { + this.target.rawSql = defaultQuery; + } + } + + this.panelCtrl.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this), $scope); + this.panelCtrl.events.on(PanelEvents.dataError, this.onDataError.bind(this), $scope); + } + + onDataReceived(dataList: any) { + this.lastQueryError = undefined; + this.lastQueryMeta = dataList[0]?.meta; + } + + onDataError(err: any) { + if (err.data && err.data.results) { + const queryRes = err.data.results[this.target.refId]; + if (queryRes) { + this.lastQueryError = queryRes.error; + } + } + } +} diff --git a/public/app/plugins/datasource/mssql/response_parser.ts b/public/app/plugins/datasource/mssql/response_parser.ts new file mode 100644 index 00000000..05a85317 --- /dev/null +++ b/public/app/plugins/datasource/mssql/response_parser.ts @@ -0,0 +1,74 @@ +import { AnnotationEvent, DataFrame, MetricFindValue } from '@grafana/data'; +import { BackendDataSourceResponse, toDataQueryResponse, FetchResponse } from '@grafana/runtime'; + +export default class ResponseParser { + transformMetricFindResponse(raw: FetchResponse): MetricFindValue[] { + const frames = toDataQueryResponse(raw).data as DataFrame[]; + + if (!frames || !frames.length) { + return []; + } + + const frame = frames[0]; + + const values: MetricFindValue[] = []; + const textField = frame.fields.find((f) => f.name === '__text'); + const valueField = frame.fields.find((f) => f.name === '__value'); + + if (textField && valueField) { + for (let i = 0; i < textField.values.length; i++) { + values.push({ text: '' + textField.values.get(i), value: '' + valueField.values.get(i) }); + } + } else { + values.push( + ...frame.fields + .flatMap((f) => f.values.toArray()) + .map((v) => ({ + text: v, + })) + ); + } + + return Array.from(new Set(values.map((v) => v.text))).map((text) => ({ + text, + value: values.find((v) => v.text === text)?.value, + })); + } + + async transformAnnotationResponse(options: any, data: BackendDataSourceResponse): Promise { + const frames = toDataQueryResponse({ data: data }).data as DataFrame[]; + if (!frames || !frames.length) { + return []; + } + const frame = frames[0]; + const timeField = frame.fields.find((f) => f.name === 'time'); + + if (!timeField) { + return Promise.reject({ message: 'Missing mandatory time column (with time column alias) in annotation query.' }); + } + + const timeEndField = frame.fields.find((f) => f.name === 'timeend'); + const textField = frame.fields.find((f) => f.name === 'text'); + const tagsField = frame.fields.find((f) => f.name === 'tags'); + + const list: AnnotationEvent[] = []; + for (let i = 0; i < frame.length; i++) { + const timeEnd = timeEndField && timeEndField.values.get(i) ? Math.floor(timeEndField.values.get(i)) : undefined; + list.push({ + annotation: options.annotation, + time: Math.floor(timeField.values.get(i)), + timeEnd, + text: textField && textField.values.get(i) ? textField.values.get(i) : '', + tags: + tagsField && tagsField.values.get(i) + ? tagsField.values + .get(i) + .trim() + .split(/\s*,\s*/) + : [], + }); + } + + return list; + } +} diff --git a/public/app/plugins/datasource/mssql/specs/datasource.test.ts b/public/app/plugins/datasource/mssql/specs/datasource.test.ts new file mode 100644 index 00000000..2376a669 --- /dev/null +++ b/public/app/plugins/datasource/mssql/specs/datasource.test.ts @@ -0,0 +1,364 @@ +import { of } from 'rxjs'; +import { dataFrameToJSON, dateTime, MetricFindValue, MutableDataFrame } from '@grafana/data'; + +import { MssqlDatasource } from '../datasource'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { backendSrv } from 'app/core/services/backend_srv'; +import { initialCustomVariableModelState } from '../../../../features/variables/custom/reducer'; +import { createFetchResponse } from 'test/helpers/createFetchResponse'; +import { TimeSrvStub } from 'test/specs/helpers'; + +jest.mock('@grafana/runtime', () => ({ + ...((jest.requireActual('@grafana/runtime') as unknown) as object), + getBackendSrv: () => backendSrv, +})); + +describe('MSSQLDatasource', () => { + const templateSrv: TemplateSrv = new TemplateSrv(); + const fetchMock = jest.spyOn(backendSrv, 'fetch'); + + const ctx: any = { + timeSrv: new TimeSrvStub(), + }; + + beforeEach(() => { + jest.clearAllMocks(); + + ctx.instanceSettings = { name: 'mssql' }; + ctx.ds = new MssqlDatasource(ctx.instanceSettings, templateSrv, ctx.timeSrv); + }); + + describe('When performing annotationQuery', () => { + let results: any; + + const annotationName = 'MyAnno'; + + const options = { + annotation: { + name: annotationName, + rawQuery: 'select time, text, tags from table;', + }, + range: { + from: dateTime(1432288354), + to: dateTime(1432288401), + }, + }; + + const response = { + results: { + MyAnno: { + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'time', values: [1521545610656, 1521546251185, 1521546501378] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + { name: 'tags', values: ['TagA,TagB', ' TagB , TagC', null] }, + ], + }) + ), + ], + }, + }, + }; + + beforeEach(() => { + fetchMock.mockImplementation(() => of(createFetchResponse(response))); + + return ctx.ds.annotationQuery(options).then((data: any) => { + results = data; + }); + }); + + it('should return annotation list', () => { + expect(results.length).toBe(3); + + expect(results[0].text).toBe('some text'); + expect(results[0].tags[0]).toBe('TagA'); + expect(results[0].tags[1]).toBe('TagB'); + + expect(results[1].tags[0]).toBe('TagB'); + expect(results[1].tags[1]).toBe('TagC'); + + expect(results[2].tags.length).toBe(0); + }); + }); + + describe('When performing metricFindQuery that returns multiple string fields', () => { + let results: MetricFindValue[]; + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'title', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + ], + }) + ), + ], + }, + }, + }; + + beforeEach(() => { + fetchMock.mockImplementation(() => of(createFetchResponse(response))); + + return ctx.ds.metricFindQuery(query).then((data: MetricFindValue[]) => { + results = data; + }); + }); + + it('should return list of all column values', () => { + expect(results.length).toBe(6); + expect(results[0].text).toBe('aTitle'); + expect(results[5].text).toBe('some text3'); + }); + }); + + describe('When performing metricFindQuery with key, value columns', () => { + let results: any; + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: '__value', values: ['value1', 'value2', 'value3'] }, + { name: '__text', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + ], + }) + ), + ], + }, + }, + }; + + beforeEach(() => { + fetchMock.mockImplementation(() => of(createFetchResponse(response))); + + return ctx.ds.metricFindQuery(query).then((data: any) => { + results = data; + }); + }); + + it('should return list of as text, value', () => { + expect(results.length).toBe(3); + expect(results[0].text).toBe('aTitle'); + expect(results[0].value).toBe('value1'); + expect(results[2].text).toBe('aTitle3'); + expect(results[2].value).toBe('value3'); + }); + }); + + describe('When performing metricFindQuery without key, value columns', () => { + let results: any; + const query = 'select id, values from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'id', values: [1, 2, 3] }, + { name: 'values', values: ['test1', 'test2', 'test3'] }, + ], + meta: { + executedQueryString: 'select id, values from atable', + }, + }) + ), + ], + }, + }, + }; + + beforeEach(() => { + fetchMock.mockImplementation(() => of(createFetchResponse(response))); + + return ctx.ds.metricFindQuery(query).then((data: any) => { + results = data; + }); + }); + + it('should return list of all field values as text', () => { + expect(results).toEqual([ + { text: 1 }, + { text: 2 }, + { text: 3 }, + { text: 'test1' }, + { text: 'test2' }, + { text: 'test3' }, + ]); + }); + }); + + describe('When performing metricFindQuery with key, value columns and with duplicate keys', () => { + let results: any; + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: '__text', values: ['aTitle', 'aTitle', 'aTitle'] }, + { name: '__value', values: ['same', 'same', 'diff'] }, + ], + }) + ), + ], + }, + }, + }; + + beforeEach(() => { + fetchMock.mockImplementation(() => of(createFetchResponse(response))); + return ctx.ds.metricFindQuery(query).then((data: any) => { + results = data; + }); + }); + + it('should return list of unique keys', () => { + expect(results.length).toBe(1); + expect(results[0].text).toBe('aTitle'); + expect(results[0].value).toBe('same'); + }); + }); + + describe('When performing metricFindQuery', () => { + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [{ name: 'test', values: ['aTitle'] }], + }) + ), + ], + }, + }, + }; + const time = { + from: dateTime(1521545610656), + to: dateTime(1521546251185), + }; + + beforeEach(() => { + ctx.timeSrv.setTime(time); + fetchMock.mockImplementation(() => of(createFetchResponse(response))); + + return ctx.ds.metricFindQuery(query, { range: time }); + }); + + it('should pass timerange to datasourceRequest', () => { + expect(fetchMock).toBeCalledTimes(1); + expect(fetchMock.mock.calls[0][0].data.from).toBe(time.from.valueOf().toString()); + expect(fetchMock.mock.calls[0][0].data.to).toBe(time.to.valueOf().toString()); + expect(fetchMock.mock.calls[0][0].data.queries.length).toBe(1); + expect(fetchMock.mock.calls[0][0].data.queries[0].rawSql).toBe(query); + }); + }); + + describe('When interpolating variables', () => { + beforeEach(() => { + ctx.variable = { ...initialCustomVariableModelState }; + }); + + describe('and value is a string', () => { + it('should return an unquoted value', () => { + expect(ctx.ds.interpolateVariable('abc', ctx.variable)).toEqual('abc'); + }); + }); + + describe('and value is a number', () => { + it('should return an unquoted value', () => { + expect(ctx.ds.interpolateVariable(1000, ctx.variable)).toEqual(1000); + }); + }); + + describe('and value is an array of strings', () => { + it('should return comma separated quoted values', () => { + expect(ctx.ds.interpolateVariable(['a', 'b', 'c'], ctx.variable)).toEqual("'a','b','c'"); + }); + }); + + describe('and variable allows multi-value and value is a string', () => { + it('should return a quoted value', () => { + ctx.variable.multi = true; + expect(ctx.ds.interpolateVariable('abc', ctx.variable)).toEqual("'abc'"); + }); + }); + + describe('and variable contains single quote', () => { + it('should return a quoted value', () => { + ctx.variable.multi = true; + expect(ctx.ds.interpolateVariable("a'bc", ctx.variable)).toEqual("'a''bc'"); + }); + }); + + describe('and variable allows all and value is a string', () => { + it('should return a quoted value', () => { + ctx.variable.includeAll = true; + expect(ctx.ds.interpolateVariable('abc', ctx.variable)).toEqual("'abc'"); + }); + }); + }); + + describe('targetContainsTemplate', () => { + it('given query that contains template variable it should return true', () => { + const rawSql = `SELECT + $__timeGroup(createdAt,'$summarize') as time, + avg(value) as value, + hostname as metric + FROM + grafana_metric + WHERE + $__timeFilter(createdAt) AND + measurement = 'logins.count' AND + hostname IN($host) + GROUP BY $__timeGroup(createdAt,'$summarize'), hostname + ORDER BY 1`; + const query = { + rawSql, + }; + templateSrv.init([ + { type: 'query', name: 'summarize', current: { value: '1m' } }, + { type: 'query', name: 'host', current: { value: 'a' } }, + ]); + expect(ctx.ds.targetContainsTemplate(query)).toBeTruthy(); + }); + + it('given query that only contains global template variable it should return false', () => { + const rawSql = `SELECT + $__timeGroup(createdAt,'$__interval') as time, + avg(value) as value, + hostname as metric + FROM + grafana_metric + WHERE + $__timeFilter(createdAt) AND + measurement = 'logins.count' + GROUP BY $__timeGroup(createdAt,'$summarize'), hostname + ORDER BY 1`; + const query = { + rawSql, + }; + templateSrv.init([ + { type: 'query', name: 'summarize', current: { value: '1m' } }, + { type: 'query', name: 'host', current: { value: 'a' } }, + ]); + expect(ctx.ds.targetContainsTemplate(query)).toBeFalsy(); + }); + }); +}); diff --git a/public/app/plugins/datasource/mssql/types.ts b/public/app/plugins/datasource/mssql/types.ts new file mode 100644 index 00000000..8359e566 --- /dev/null +++ b/public/app/plugins/datasource/mssql/types.ts @@ -0,0 +1,21 @@ +import { DataQuery, DataSourceJsonData } from '@grafana/data'; + +export interface MssqlQueryForInterpolation { + alias?: any; + format?: any; + rawSql?: any; + refId: any; + hide?: any; +} + +export type ResultFormat = 'time_series' | 'table'; + +export interface MssqlQuery extends DataQuery { + alias?: string; + format?: ResultFormat; + rawSql?: any; +} + +export interface MssqlOptions extends DataSourceJsonData { + timeInterval: string; +} diff --git a/public/app/plugins/datasource/mysql/README.md b/public/app/plugins/datasource/mysql/README.md new file mode 100644 index 00000000..79832ef8 --- /dev/null +++ b/public/app/plugins/datasource/mysql/README.md @@ -0,0 +1,14 @@ +# MySQL Data Source - Native Plugin + +Grafana ships with a built-in MySQL data source plugin that allows you to query and visualize data from a MySQL compatible database. + +## Adding the data source + +1. Open the side menu by clicking the Grafana icon in the top header. +2. In the side menu under the Dashboards link you should find a link named Data Sources. +3. Click the + Add data source button in the top header. +4. Select MySQL from the Type dropdown. + +Read more about it here: + +[http://docs.grafana.org/features/datasources/mysql/](http://docs.grafana.org/features/datasources/mysql/) diff --git a/public/app/plugins/datasource/mysql/datasource.ts b/public/app/plugins/datasource/mysql/datasource.ts new file mode 100644 index 00000000..7865155d --- /dev/null +++ b/public/app/plugins/datasource/mysql/datasource.ts @@ -0,0 +1,212 @@ +import { map as _map } from 'lodash'; +import { lastValueFrom, of } from 'rxjs'; +import { catchError, map, mapTo } from 'rxjs/operators'; +import { BackendDataSourceResponse, DataSourceWithBackend, FetchResponse, getBackendSrv } from '@grafana/runtime'; +import { AnnotationEvent, DataSourceInstanceSettings, MetricFindValue, ScopedVars } from '@grafana/data'; + +import MySQLQueryModel from 'app/plugins/datasource/mysql/mysql_query_model'; +import ResponseParser from './response_parser'; +import { MySQLOptions, MySQLQuery, MysqlQueryForInterpolation } from './types'; +import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv'; +import { getSearchFilterScopedVar } from '../../../features/variables/utils'; +import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'; +import { toTestingStatus } from '@grafana/runtime/src/utils/queryResponse'; + +export class MysqlDatasource extends DataSourceWithBackend { + id: any; + name: any; + responseParser: ResponseParser; + queryModel: MySQLQueryModel; + interval: string; + + constructor( + instanceSettings: DataSourceInstanceSettings, + private readonly templateSrv: TemplateSrv = getTemplateSrv(), + private readonly timeSrv: TimeSrv = getTimeSrv() + ) { + super(instanceSettings); + this.name = instanceSettings.name; + this.id = instanceSettings.id; + this.responseParser = new ResponseParser(); + this.queryModel = new MySQLQueryModel({}); + const settingsData = instanceSettings.jsonData || ({} as MySQLOptions); + this.interval = settingsData.timeInterval || '1m'; + } + + interpolateVariable = (value: string | string[] | number, variable: any) => { + if (typeof value === 'string') { + if (variable.multi || variable.includeAll) { + const result = this.queryModel.quoteLiteral(value); + return result; + } else { + return value; + } + } + + if (typeof value === 'number') { + return value; + } + + const quotedValues = _map(value, (v: any) => { + return this.queryModel.quoteLiteral(v); + }); + return quotedValues.join(','); + }; + + interpolateVariablesInQueries( + queries: MysqlQueryForInterpolation[], + scopedVars: ScopedVars + ): MysqlQueryForInterpolation[] { + let expandedQueries = queries; + if (queries && queries.length > 0) { + expandedQueries = queries.map((query) => { + const expandedQuery = { + ...query, + datasource: this.getRef(), + rawSql: this.templateSrv.replace(query.rawSql, scopedVars, this.interpolateVariable), + rawQuery: true, + }; + return expandedQuery; + }); + } + return expandedQueries; + } + + filterQuery(query: MySQLQuery): boolean { + return !query.hide; + } + + applyTemplateVariables(target: MySQLQuery, scopedVars: ScopedVars): Record { + const queryModel = new MySQLQueryModel(target, this.templateSrv, scopedVars); + return { + refId: target.refId, + datasource: this.getRef(), + rawSql: queryModel.render(this.interpolateVariable as any), + format: target.format, + }; + } + + async annotationQuery(options: any): Promise { + if (!options.annotation.rawQuery) { + return Promise.reject({ + message: 'Query missing in annotation definition', + }); + } + + const query = { + refId: options.annotation.name, + datasource: this.getRef(), + rawSql: this.templateSrv.replace(options.annotation.rawQuery, options.scopedVars, this.interpolateVariable), + format: 'table', + }; + + return lastValueFrom( + getBackendSrv() + .fetch({ + url: '/api/ds/query', + method: 'POST', + data: { + from: options.range.from.valueOf().toString(), + to: options.range.to.valueOf().toString(), + queries: [query], + }, + requestId: options.annotation.name, + }) + .pipe( + map( + async (res: FetchResponse) => + await this.responseParser.transformAnnotationResponse(options, res.data) + ) + ) + ); + } + + metricFindQuery(query: string, optionalOptions: any): Promise { + let refId = 'tempvar'; + if (optionalOptions && optionalOptions.variable && optionalOptions.variable.name) { + refId = optionalOptions.variable.name; + } + + const rawSql = this.templateSrv.replace( + query, + getSearchFilterScopedVar({ query, wildcardChar: '%', options: optionalOptions }), + this.interpolateVariable + ); + + const interpolatedQuery = { + refId: refId, + datasource: this.getRef(), + rawSql, + format: 'table', + }; + + const range = this.timeSrv.timeRange(); + + return lastValueFrom( + getBackendSrv() + .fetch({ + url: '/api/ds/query', + method: 'POST', + data: { + from: range.from.valueOf().toString(), + to: range.to.valueOf().toString(), + queries: [interpolatedQuery], + }, + requestId: refId, + }) + .pipe( + map((rsp) => { + return this.responseParser.transformMetricFindResponse(rsp); + }), + catchError((err) => { + return of([]); + }) + ) + ); + } + + testDatasource(): Promise { + return lastValueFrom( + getBackendSrv() + .fetch({ + url: '/api/ds/query', + method: 'POST', + data: { + from: '5m', + to: 'now', + queries: [ + { + refId: 'A', + intervalMs: 1, + maxDataPoints: 1, + datasource: this.getRef(), + rawSql: 'SELECT 1', + format: 'table', + }, + ], + }, + }) + .pipe( + mapTo({ status: 'success', message: 'Database Connection OK' }), + catchError((err) => { + return of(toTestingStatus(err)); + }) + ) + ); + } + + targetContainsTemplate(target: any) { + let rawSql = ''; + + if (target.rawQuery) { + rawSql = target.rawSql; + } else { + const query = new MySQLQueryModel(target); + rawSql = query.buildQuery(); + } + + rawSql = rawSql.replace('$__', ''); + + return this.templateSrv.variableExists(rawSql); + } +} diff --git a/public/app/plugins/datasource/mysql/img/mysql_logo.svg b/public/app/plugins/datasource/mysql/img/mysql_logo.svg new file mode 100644 index 00000000..6d1d5c81 --- /dev/null +++ b/public/app/plugins/datasource/mysql/img/mysql_logo.svg @@ -0,0 +1,27 @@ + + diff --git a/public/app/plugins/datasource/mysql/meta_query.ts b/public/app/plugins/datasource/mysql/meta_query.ts new file mode 100644 index 00000000..eb03dc40 --- /dev/null +++ b/public/app/plugins/datasource/mysql/meta_query.ts @@ -0,0 +1,142 @@ +export class MysqlMetaQuery { + constructor(private target: any, private queryModel: any) {} + + getOperators(datatype: string) { + switch (datatype) { + case 'double': + case 'float': { + return ['=', '!=', '<', '<=', '>', '>=']; + } + case 'text': + case 'tinytext': + case 'mediumtext': + case 'longtext': + case 'varchar': + case 'char': { + return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE']; + } + default: { + return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN']; + } + } + } + + // quote identifier as literal to use in metadata queries + quoteIdentAsLiteral(value: string) { + return this.queryModel.quoteLiteral(this.queryModel.unquoteIdentifier(value)); + } + + findMetricTable() { + // query that returns first table found that has a timestamp(tz) column and a float column + const query = ` + SELECT + table_name as table_name, + ( SELECT + column_name as column_name + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + c.data_type IN ('timestamp', 'datetime') + ORDER BY ordinal_position LIMIT 1 + ) AS time_column, + ( SELECT + column_name AS column_name + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + c.data_type IN('float', 'int', 'bigint') + ORDER BY ordinal_position LIMIT 1 + ) AS value_column + FROM information_schema.tables t + WHERE + t.table_schema = database() AND + EXISTS + ( SELECT 1 + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + c.data_type IN ('timestamp', 'datetime') + ) AND + EXISTS + ( SELECT 1 + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + c.data_type IN('float', 'int', 'bigint') + ) + LIMIT 1 +;`; + return query; + } + + buildTableConstraint(table: string) { + let query = ''; + + // check for schema qualified table + if (table.includes('.')) { + const parts = table.split('.'); + query = 'table_schema = ' + this.quoteIdentAsLiteral(parts[0]); + query += ' AND table_name = ' + this.quoteIdentAsLiteral(parts[1]); + return query; + } else { + query = 'table_schema = database() AND table_name = ' + this.quoteIdentAsLiteral(table); + + return query; + } + } + + buildTableQuery() { + return 'SELECT table_name FROM information_schema.tables WHERE table_schema = database() ORDER BY table_name'; + } + + buildColumnQuery(type?: string) { + let query = 'SELECT column_name FROM information_schema.columns WHERE '; + query += this.buildTableConstraint(this.target.table); + + switch (type) { + case 'time': { + query += " AND data_type IN ('timestamp','datetime','bigint','int','double','float')"; + break; + } + case 'metric': { + query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')"; + break; + } + case 'value': { + query += " AND data_type IN ('bigint','int','smallint','mediumint','tinyint','double','decimal','float')"; + query += ' AND column_name <> ' + this.quoteIdentAsLiteral(this.target.timeColumn); + break; + } + case 'group': { + query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')"; + break; + } + } + + query += ' ORDER BY column_name'; + + return query; + } + + buildValueQuery(column: string) { + let query = 'SELECT DISTINCT QUOTE(' + column + ')'; + query += ' FROM ' + this.target.table; + query += ' WHERE $__timeFilter(' + this.target.timeColumn + ')'; + query += ' ORDER BY 1 LIMIT 100'; + return query; + } + + buildDatatypeQuery(column: string) { + let query = ` +SELECT data_type +FROM information_schema.columns +WHERE `; + query += ' table_name = ' + this.quoteIdentAsLiteral(this.target.table); + query += ' AND column_name = ' + this.quoteIdentAsLiteral(column); + return query; + } +} diff --git a/public/app/plugins/datasource/mysql/module.ts b/public/app/plugins/datasource/mysql/module.ts new file mode 100644 index 00000000..4ab4d164 --- /dev/null +++ b/public/app/plugins/datasource/mysql/module.ts @@ -0,0 +1,56 @@ +import { MysqlDatasource } from './datasource'; +import { MysqlQueryCtrl } from './query_ctrl'; +import { + createChangeHandler, + createResetHandler, + PasswordFieldEnum, +} from '../../../features/datasources/utils/passwordHandlers'; +import { MySQLQuery } from './types'; +import { DataSourcePlugin } from '@grafana/data'; + +class MysqlConfigCtrl { + static templateUrl = 'partials/config.html'; + current: any; + onPasswordReset: ReturnType; + onPasswordChange: ReturnType; + + constructor() { + this.onPasswordReset = createResetHandler(this, PasswordFieldEnum.Password); + this.onPasswordChange = createChangeHandler(this, PasswordFieldEnum.Password); + } +} + +const defaultQuery = `SELECT + UNIX_TIMESTAMP() as time_sec, + as text, + as tags + FROM

+ WHERE $__timeFilter(time_column) + ORDER BY ASC + LIMIT 100 + `; + +class MysqlAnnotationsQueryCtrl { + static templateUrl = 'partials/annotations.editor.html'; + + declare annotation: any; + + /** @ngInject */ + constructor($scope: any) { + this.annotation = $scope.ctrl.annotation; + this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery; + } +} + +export { + MysqlDatasource, + MysqlDatasource as Datasource, + MysqlQueryCtrl as QueryCtrl, + MysqlConfigCtrl as ConfigCtrl, + MysqlAnnotationsQueryCtrl as AnnotationsQueryCtrl, +}; + +export const plugin = new DataSourcePlugin(MysqlDatasource) + .setQueryCtrl(MysqlQueryCtrl) + .setConfigCtrl(MysqlConfigCtrl) + .setAnnotationQueryCtrl(MysqlAnnotationsQueryCtrl); diff --git a/public/app/plugins/datasource/mysql/mysql_query_model.ts b/public/app/plugins/datasource/mysql/mysql_query_model.ts new file mode 100644 index 00000000..efa62919 --- /dev/null +++ b/public/app/plugins/datasource/mysql/mysql_query_model.ts @@ -0,0 +1,235 @@ +import { find, map } from 'lodash'; +import { TemplateSrv } from '@grafana/runtime'; +import { ScopedVars } from '@grafana/data'; + +export default class MySQLQueryModel { + target: any; + templateSrv: any; + scopedVars: any; + + /** @ngInject */ + constructor(target: any, templateSrv?: TemplateSrv, scopedVars?: ScopedVars) { + this.target = target; + this.templateSrv = templateSrv; + this.scopedVars = scopedVars; + + target.format = target.format || 'time_series'; + target.timeColumn = target.timeColumn || 'time'; + target.metricColumn = target.metricColumn || 'none'; + + target.group = target.group || []; + target.where = target.where || [{ type: 'macro', name: '$__timeFilter', params: [] }]; + target.select = target.select || [[{ type: 'column', params: ['value'] }]]; + + // handle pre query gui panels gracefully + if (!('rawQuery' in this.target)) { + if ('rawSql' in target) { + // pre query gui panel + target.rawQuery = true; + } else { + // new panel + target.rawQuery = false; + } + } + + // give interpolateQueryStr access to this + this.interpolateQueryStr = this.interpolateQueryStr.bind(this); + } + + // remove identifier quoting from identifier to use in metadata queries + unquoteIdentifier(value: string) { + if (value[0] === '"' && value[value.length - 1] === '"') { + return value.substring(1, value.length - 1).replace(/""/g, '"'); + } else { + return value; + } + } + + quoteIdentifier(value: string) { + return '"' + value.replace(/"/g, '""') + '"'; + } + + quoteLiteral(value: string) { + return "'" + value.replace(/'/g, "''") + "'"; + } + + escapeLiteral(value: any) { + return String(value).replace(/'/g, "''"); + } + + hasTimeGroup() { + return find(this.target.group, (g: any) => g.type === 'time'); + } + + hasMetricColumn() { + return this.target.metricColumn !== 'none'; + } + + interpolateQueryStr(value: string, variable: { multi: any; includeAll: any }, defaultFormatFn: any) { + // if no multi or include all do not regexEscape + if (!variable.multi && !variable.includeAll) { + return this.escapeLiteral(value); + } + + if (typeof value === 'string') { + return this.quoteLiteral(value); + } + + const escapedValues = map(value, this.quoteLiteral); + return escapedValues.join(','); + } + + render(interpolate?: boolean) { + const target = this.target; + + // new query with no table set yet + if (!this.target.rawQuery && !('table' in this.target)) { + return ''; + } + + if (!target.rawQuery) { + target.rawSql = this.buildQuery(); + } + + if (interpolate) { + return this.templateSrv.replace(target.rawSql, this.scopedVars, this.interpolateQueryStr); + } else { + return target.rawSql; + } + } + + hasUnixEpochTimecolumn() { + return ['int', 'bigint', 'double'].indexOf(this.target.timeColumnType) > -1; + } + + buildTimeColumn(alias = true) { + const timeGroup = this.hasTimeGroup(); + let query; + let macro = '$__timeGroup'; + + if (timeGroup) { + let args; + if (timeGroup.params.length > 1 && timeGroup.params[1] !== 'none') { + args = timeGroup.params.join(','); + } else { + args = timeGroup.params[0]; + } + if (this.hasUnixEpochTimecolumn()) { + macro = '$__unixEpochGroup'; + } + if (alias) { + macro += 'Alias'; + } + query = macro + '(' + this.target.timeColumn + ',' + args + ')'; + } else { + query = this.target.timeColumn; + if (alias) { + query += ' AS "time"'; + } + } + + return query; + } + + buildMetricColumn() { + if (this.hasMetricColumn()) { + return this.target.metricColumn + ' AS metric'; + } + + return ''; + } + + buildValueColumns() { + let query = ''; + for (const column of this.target.select) { + query += ',\n ' + this.buildValueColumn(column); + } + + return query; + } + + buildValueColumn(column: any) { + let query = ''; + + const columnName: any = find(column, (g: any) => g.type === 'column'); + query = columnName.params[0]; + + const aggregate: any = find(column, (g: any) => g.type === 'aggregate'); + + if (aggregate) { + const func = aggregate.params[0]; + query = func + '(' + query + ')'; + } + + const alias: any = find(column, (g: any) => g.type === 'alias'); + if (alias) { + query += ' AS ' + this.quoteIdentifier(alias.params[0]); + } + + return query; + } + + buildWhereClause() { + let query = ''; + const conditions = map(this.target.where, (tag, index) => { + switch (tag.type) { + case 'macro': + return tag.name + '(' + this.target.timeColumn + ')'; + break; + case 'expression': + return tag.params.join(' '); + break; + } + }); + + if (conditions.length > 0) { + query = '\nWHERE\n ' + conditions.join(' AND\n '); + } + + return query; + } + + buildGroupClause() { + let query = ''; + let groupSection = ''; + + for (let i = 0; i < this.target.group.length; i++) { + const part = this.target.group[i]; + if (i > 0) { + groupSection += ', '; + } + if (part.type === 'time') { + groupSection += '1'; + } else { + groupSection += part.params[0]; + } + } + + if (groupSection.length) { + query = '\nGROUP BY ' + groupSection; + if (this.hasMetricColumn()) { + query += ',2'; + } + } + return query; + } + + buildQuery() { + let query = 'SELECT'; + + query += '\n ' + this.buildTimeColumn(); + if (this.hasMetricColumn()) { + query += ',\n ' + this.buildMetricColumn(); + } + query += this.buildValueColumns(); + + query += '\nFROM ' + this.target.table; + + query += this.buildWhereClause(); + query += this.buildGroupClause(); + + query += '\nORDER BY ' + this.buildTimeColumn(false); + + return query; + } +} diff --git a/public/app/plugins/datasource/mysql/partials/annotations.editor.html b/public/app/plugins/datasource/mysql/partials/annotations.editor.html new file mode 100644 index 00000000..a9530b03 --- /dev/null +++ b/public/app/plugins/datasource/mysql/partials/annotations.editor.html @@ -0,0 +1,54 @@ +

+ +

+ + Show Help + + + +

+ +

Annotation Query Format
+An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the time or time_sec column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
+
+- column with alias: time or time_sec for the annotation event time. Use epoch time or any native date data type.
+- column with alias: timeend for the annotation event end time. Use epoch time or any native date data type.
+- column with alias: text for the annotation text
+- column with alias: tags for annotation tags. This is a comma separated string of tags e.g. 'tag1,tag2'
+
+
+Macros:
+- $__time(column) -> UNIX_TIMESTAMP(column) as time (or as time_sec)
+- $__timeEpoch(column) -> UNIX_TIMESTAMP(column) as time (or as time_sec)
+- $__timeFilter(column) -> column BETWEEN FROM_UNIXTIME(1492750877) AND FROM_UNIXTIME(1492750877)
+- $__unixEpochFilter(column) ->  time_unix_epoch > 1492750877 AND time_unix_epoch < 1492750877
+- $__unixEpochNanoFilter(column) ->  column >= 1494410783152415214 AND column <= 1494497183142514872
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() -> FROM_UNIXTIME(1492750877)
+- $__timeTo() ->  FROM_UNIXTIME(1492750877)
+- $__unixEpochFrom() ->  1492750877
+- $__unixEpochTo() ->  1492750877
+- $__unixEpochNanoFrom() ->  1494410783152415214
+- $__unixEpochNanoTo() ->  1494497183142514872
+

diff --git a/public/app/plugins/datasource/mysql/partials/config.html b/public/app/plugins/datasource/mysql/partials/config.html new file mode 100644 index 00000000..756819ec --- /dev/null +++ b/public/app/plugins/datasource/mysql/partials/config.html @@ -0,0 +1,131 @@ +

MySQL Connection

+ +

+ Host + +

+ +

+ Database + +

+ +

+ User + +

+ +

+ Session Timezone + + + Specify the time zone used in the database session, e.g. Europe/Berlin or +02:00. + This is necessary, if the timezone of the database (or the host of the database) is set to something other than UTC. + The value is set in the session with SET time_zone='...'. If you leave this field empty, + the timezone is not updated. You can find more information in the + MySQL documentation. + +

+ +

+ + +

+ +

+ + + + +Connection limits + +

+ Max lifetime + + + The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.

+ This should always be lower than configured wait_timeout in MySQL. + +

+ +

MySQL details

+ +

+ Min time interval + + + A lower limit for the auto group by time interval. Recommended to be set to write frequency, + for example 1m if your data is written every minute. + +

+ +

User Permission

+ The database user should only be granted SELECT permissions on the specified database & tables you want to query. + Grafana does not validate that queries are safe so queries can contain any SQL statement. For example, statements + like USE otherdb; and DROP TABLE user; would be executed. To protect against this we + Highly recommmend you create a specific MySQL user with restricted permissions. + + Checkout the MySQL Data Source Docs for more information. +

diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html new file mode 100644 index 00000000..a04ea789 --- /dev/null +++ b/public/app/plugins/datasource/mysql/partials/query.editor.html @@ -0,0 +1,190 @@ + + +

+ + +

+ +

+ FROM + + + Time column + + + + Metric column + Column to be used as metric name for the value column. + + +

+ +

+ + SELECT + +

+ +

+ + +

+ +

+ WHERE +

+ +

+ + +

+ +

+ + GROUP BY + + + + +

+ +

+ Format as +

+ +

+ + Query Builder + Edit SQL + +

+ + Show Help + + + +

+ + Generated SQL + + + +

+ +

Time series:
+- return column named time or time_sec (in UTC), as a unix time stamp or any sql native date data type. You can use the macros below.
+- return column(s) with numeric datatype as values
+Optional:
+  - return column named metric to represent the series name.
+  - If multiple value columns are returned the metric column is used as prefix.
+  - If no column named metric is found the column name of the value column is used as series name
+
+Resultsets of time series queries need to be sorted by time.
+
+Table:
+- return any set of columns
+
+Macros:
+- $__time(column) -> UNIX_TIMESTAMP(column) as time_sec
+- $__timeEpoch(column) -> UNIX_TIMESTAMP(column) as time_sec
+- $__timeFilter(column) -> column BETWEEN FROM_UNIXTIME(1492750877) AND FROM_UNIXTIME(1492750877)
+- $__unixEpochFilter(column) ->  time_unix_epoch > 1492750877 AND time_unix_epoch < 1492750877
+- $__unixEpochNanoFilter(column) ->  column >= 1494410783152415214 AND column <= 1494497183142514872
+- $__timeGroup(column,'5m'[, fillvalue]) -> cast(cast(UNIX_TIMESTAMP(column)/(300) as signed)*300 as signed)
+     by setting fillvalue grafana will fill in missing values according to the interval
+     fillvalue can be either a literal value, NULL or previous; previous will fill in the previous seen value or NULL if none has been seen yet
+- $__timeGroupAlias(column,'5m') -> cast(cast(UNIX_TIMESTAMP(column)/(300) as signed)*300 as signed) AS "time"
+- $__unixEpochGroup(column,'5m') -> column DIV 300 * 300
+- $__unixEpochGroupAlias(column,'5m') -> column DIV 300 * 300 AS "time"
+
+Example of group by and order by with $__timeGroup:
+SELECT
+  $__timeGroupAlias(timestamp_col, '1h'),
+  sum(value_double) as value
+FROM yourtable
+GROUP BY 1
+ORDER BY 1
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() -> FROM_UNIXTIME(1492750877)
+- $__timeTo() ->  FROM_UNIXTIME(1492750877)
+- $__unixEpochFrom() ->  1492750877
+- $__unixEpochTo() ->  1492750877
+- $__unixEpochNanoFrom() ->  1494410783152415214
+- $__unixEpochNanoTo() ->  1494497183142514872
+

+ +

{{ctrl.lastQueryMeta.executedQueryString}}

+ +

{{ctrl.lastQueryError}}

+ + diff --git a/public/app/plugins/datasource/mysql/plugin.json b/public/app/plugins/datasource/mysql/plugin.json new file mode 100644 index 00000000..48e1d39d --- /dev/null +++ b/public/app/plugins/datasource/mysql/plugin.json @@ -0,0 +1,27 @@ +{ + "type": "datasource", + "name": "MySQL", + "id": "mysql", + "category": "sql", + + "info": { + "description": "Data source for MySQL databases", + "author": { + "name": "Grafana Labs", + "url": "https://grafana.com" + }, + "logos": { + "small": "img/mysql_logo.svg", + "large": "img/mysql_logo.svg" + } + }, + + "alerting": true, + "annotations": true, + "metrics": true, + "backend": true, + + "queryOptions": { + "minInterval": true + } +} diff --git a/public/app/plugins/datasource/mysql/query_ctrl.ts b/public/app/plugins/datasource/mysql/query_ctrl.ts new file mode 100644 index 00000000..31890dbb --- /dev/null +++ b/public/app/plugins/datasource/mysql/query_ctrl.ts @@ -0,0 +1,644 @@ +import { clone, filter, find, findIndex, indexOf, map } from 'lodash'; +import appEvents from 'app/core/app_events'; +import { MysqlMetaQuery } from './meta_query'; +import { QueryCtrl } from 'app/plugins/sdk'; +import { SqlPart } from 'app/angular/components/sql_part/sql_part'; +import MySQLQueryModel from './mysql_query_model'; +import sqlPart from './sql_part'; +import { auto } from 'angular'; +import { PanelEvents, QueryResultMeta } from '@grafana/data'; +import { VariableWithMultiSupport } from 'app/features/variables/types'; +import { TemplateSrv } from '@grafana/runtime'; +import { ShowConfirmModalEvent } from '../../../types/events'; + +const defaultQuery = `SELECT + UNIX_TIMESTAMP() as time_sec, + as value, + as metric +FROM

+WHERE $__timeFilter(time_column) +ORDER BY ASC +`; + +export class MysqlQueryCtrl extends QueryCtrl { + static templateUrl = 'partials/query.editor.html'; + + formats: any[]; + lastQueryError?: string; + showHelp!: boolean; + + queryModel: MySQLQueryModel; + metaBuilder: MysqlMetaQuery; + lastQueryMeta?: QueryResultMeta; + tableSegment: any; + whereAdd: any; + timeColumnSegment: any; + metricColumnSegment: any; + selectMenu: any[] = []; + selectParts: SqlPart[][] = []; + groupParts: SqlPart[] = []; + whereParts: SqlPart[] = []; + groupAdd: any; + + /** @ngInject */ + constructor( + $scope: any, + $injector: auto.IInjectorService, + private templateSrv: TemplateSrv, + private uiSegmentSrv: any + ) { + super($scope, $injector); + + this.target = this.target; + this.queryModel = new MySQLQueryModel(this.target, templateSrv, this.panel.scopedVars); + this.metaBuilder = new MysqlMetaQuery(this.target, this.queryModel); + this.updateProjection(); + + this.formats = [ + { text: 'Time series', value: 'time_series' }, + { text: 'Table', value: 'table' }, + ]; + + if (!this.target.rawSql) { + // special handling when in table panel + if (this.panelCtrl.panel.type === 'table') { + this.target.format = 'table'; + this.target.rawSql = 'SELECT 1'; + this.target.rawQuery = true; + } else { + this.target.rawSql = defaultQuery; + this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then((result: any) => { + if (result.length > 0) { + this.target.table = result[0].text; + let segment = this.uiSegmentSrv.newSegment(this.target.table); + this.tableSegment.html = segment.html; + this.tableSegment.value = segment.value; + + this.target.timeColumn = result[1].text; + segment = this.uiSegmentSrv.newSegment(this.target.timeColumn); + this.timeColumnSegment.html = segment.html; + this.timeColumnSegment.value = segment.value; + + this.target.timeColumnType = 'timestamp'; + this.target.select = [[{ type: 'column', params: [result[2].text] }]]; + this.updateProjection(); + this.updateRawSqlAndRefresh(); + } + }); + } + } + + if (!this.target.table) { + this.tableSegment = uiSegmentSrv.newSegment({ value: 'select table', fake: true }); + } else { + this.tableSegment = uiSegmentSrv.newSegment(this.target.table); + } + + this.timeColumnSegment = uiSegmentSrv.newSegment(this.target.timeColumn); + this.metricColumnSegment = uiSegmentSrv.newSegment(this.target.metricColumn); + + this.buildSelectMenu(); + this.whereAdd = this.uiSegmentSrv.newPlusButton(); + this.groupAdd = this.uiSegmentSrv.newPlusButton(); + + this.panelCtrl.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this), $scope); + this.panelCtrl.events.on(PanelEvents.dataError, this.onDataError.bind(this), $scope); + } + + updateRawSqlAndRefresh() { + if (!this.target.rawQuery) { + this.target.rawSql = this.queryModel.buildQuery(); + } + + this.panelCtrl.refresh(); + } + + updateProjection() { + this.selectParts = map(this.target.select, (parts: any) => { + return map(parts, sqlPart.create).filter((n) => n); + }); + this.whereParts = map(this.target.where, sqlPart.create).filter((n) => n); + this.groupParts = map(this.target.group, sqlPart.create).filter((n) => n); + } + + updatePersistedParts() { + this.target.select = map(this.selectParts, (selectParts) => { + return map(selectParts, (part: any) => { + return { type: part.def.type, datatype: part.datatype, params: part.params }; + }); + }); + this.target.where = map(this.whereParts, (part: any) => { + return { type: part.def.type, datatype: part.datatype, name: part.name, params: part.params }; + }); + this.target.group = map(this.groupParts, (part: any) => { + return { type: part.def.type, datatype: part.datatype, params: part.params }; + }); + } + + buildSelectMenu() { + const aggregates = { + text: 'Aggregate Functions', + value: 'aggregate', + submenu: [ + { text: 'Average', value: 'avg' }, + { text: 'Count', value: 'count' }, + { text: 'Maximum', value: 'max' }, + { text: 'Minimum', value: 'min' }, + { text: 'Sum', value: 'sum' }, + { text: 'Standard deviation', value: 'stddev' }, + { text: 'Variance', value: 'variance' }, + ], + }; + + this.selectMenu.push(aggregates); + this.selectMenu.push({ text: 'Alias', value: 'alias' }); + this.selectMenu.push({ text: 'Column', value: 'column' }); + } + + toggleEditorMode() { + if (this.target.rawQuery) { + appEvents.publish( + new ShowConfirmModalEvent({ + title: 'Warning', + text2: 'Switching to query builder may overwrite your raw SQL.', + icon: 'exclamation-triangle', + yesText: 'Switch', + onConfirm: () => { + // This could be called from React, so wrap in $evalAsync. + // Will then either run as part of the current digest cycle or trigger a new one. + this.$scope.$evalAsync(() => { + this.target.rawQuery = !this.target.rawQuery; + }); + }, + }) + ); + } else { + // This could be called from React, so wrap in $evalAsync. + // Will then either run as part of the current digest cycle or trigger a new one. + this.$scope.$evalAsync(() => { + this.target.rawQuery = !this.target.rawQuery; + }); + } + } + + resetPlusButton(button: { html: any; value: any }) { + const plusButton = this.uiSegmentSrv.newPlusButton(); + button.html = plusButton.html; + button.value = plusButton.value; + } + + getTableSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildTableQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + + tableChanged() { + this.target.table = this.tableSegment.value; + this.target.where = []; + this.target.group = []; + this.updateProjection(); + + const segment = this.uiSegmentSrv.newSegment('none'); + this.metricColumnSegment.html = segment.html; + this.metricColumnSegment.value = segment.value; + this.target.metricColumn = 'none'; + + const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then((result: any) => { + // check if time column is still valid + if (result.length > 0 && !find(result, (r: any) => r.text === this.target.timeColumn)) { + const segment = this.uiSegmentSrv.newSegment(result[0].text); + this.timeColumnSegment.html = segment.html; + this.timeColumnSegment.value = segment.value; + } + return this.timeColumnChanged(false); + }); + const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then((result: any) => { + if (result.length > 0) { + this.target.select = [[{ type: 'column', params: [result[0].text] }]]; + this.updateProjection(); + } + }); + + Promise.all([task1, task2]).then(() => { + this.updateRawSqlAndRefresh(); + }); + } + + getTimeColumnSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('time')) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + + timeColumnChanged(refresh?: boolean) { + this.target.timeColumn = this.timeColumnSegment.value; + return this.datasource + .metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)) + .then((result: any) => { + if (result.length === 1) { + if (this.target.timeColumnType !== result[0].text) { + this.target.timeColumnType = result[0].text; + } + let partModel; + if (this.queryModel.hasUnixEpochTimecolumn()) { + partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] }); + } else { + partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] }); + } + + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } + } + + this.updatePersistedParts(); + if (refresh !== false) { + this.updateRawSqlAndRefresh(); + } + }); + } + + getMetricColumnSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('metric')) + .then(this.transformToSegments({ addNone: true })) + .catch(this.handleQueryError.bind(this)); + } + + metricColumnChanged() { + this.target.metricColumn = this.metricColumnSegment.value; + this.updateRawSqlAndRefresh(); + } + + onDataReceived(dataList: any) { + this.lastQueryError = undefined; + this.lastQueryMeta = dataList[0]?.meta; + } + + onDataError(err: any) { + if (err.data && err.data.results) { + const queryRes = err.data.results[this.target.refId]; + if (queryRes) { + this.lastQueryError = queryRes.error; + } + } + } + + transformToSegments(config: any) { + return (results: any) => { + const segments = map(results, (segment) => { + return this.uiSegmentSrv.newSegment({ + value: segment.text, + expandable: segment.expandable, + }); + }); + + if (config.addTemplateVars) { + for (const variable of this.templateSrv.getVariables()) { + let value; + value = '$' + variable.name; + if (config.templateQuoter && ((variable as unknown) as VariableWithMultiSupport).multi === false) { + value = config.templateQuoter(value); + } + + segments.unshift( + this.uiSegmentSrv.newSegment({ + type: 'template', + value: value, + expandable: true, + }) + ); + } + } + + if (config.addNone) { + segments.unshift(this.uiSegmentSrv.newSegment({ type: 'template', value: 'none', expandable: true })); + } + + return segments; + }; + } + + findAggregateIndex(selectParts: any) { + return findIndex(selectParts, (p: any) => p.def.type === 'aggregate' || p.def.type === 'percentile'); + } + + findWindowIndex(selectParts: any) { + return findIndex(selectParts, (p: any) => p.def.type === 'window' || p.def.type === 'moving_window'); + } + + addSelectPart(selectParts: any[], item: { value: any }, subItem: { type: any; value: any }) { + let partType = item.value; + if (subItem && subItem.type) { + partType = subItem.type; + } + let partModel = sqlPart.create({ type: partType }); + if (subItem) { + partModel.params[0] = subItem.value; + } + let addAlias = false; + + switch (partType) { + case 'column': + const parts = map(selectParts, (part: any) => { + return sqlPart.create({ type: part.def.type, params: clone(part.params) }); + }); + this.selectParts.push(parts); + break; + case 'percentile': + case 'aggregate': + // add group by if no group by yet + if (this.target.group.length === 0) { + this.addGroup('time', '$__interval'); + } + const aggIndex = this.findAggregateIndex(selectParts); + if (aggIndex !== -1) { + // replace current aggregation + selectParts[aggIndex] = partModel; + } else { + selectParts.splice(1, 0, partModel); + } + if (!find(selectParts, (p: any) => p.def.type === 'alias')) { + addAlias = true; + } + break; + case 'moving_window': + case 'window': + const windowIndex = this.findWindowIndex(selectParts); + if (windowIndex !== -1) { + // replace current window function + selectParts[windowIndex] = partModel; + } else { + const aggIndex = this.findAggregateIndex(selectParts); + if (aggIndex !== -1) { + selectParts.splice(aggIndex + 1, 0, partModel); + } else { + selectParts.splice(1, 0, partModel); + } + } + if (!find(selectParts, (p: any) => p.def.type === 'alias')) { + addAlias = true; + } + break; + case 'alias': + addAlias = true; + break; + } + + if (addAlias) { + // set initial alias name to column name + partModel = sqlPart.create({ type: 'alias', params: [selectParts[0].params[0].replace(/"/g, '')] }); + if (selectParts[selectParts.length - 1].def.type === 'alias') { + selectParts[selectParts.length - 1] = partModel; + } else { + selectParts.push(partModel); + } + } + + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + } + + removeSelectPart(selectParts: any, part: { def: { type: string } }) { + if (part.def.type === 'column') { + // remove all parts of column unless its last column + if (this.selectParts.length > 1) { + const modelsIndex = indexOf(this.selectParts, selectParts); + this.selectParts.splice(modelsIndex, 1); + } + } else { + const partIndex = indexOf(selectParts, part); + selectParts.splice(partIndex, 1); + } + + this.updatePersistedParts(); + } + + handleSelectPartEvent(selectParts: any, part: { def: any }, evt: { name: any }) { + switch (evt.name) { + case 'get-param-options': { + switch (part.def.type) { + // case 'aggregate': + // return this.datasource + // .metricFindQuery(this.metaBuilder.buildAggregateQuery()) + // .then(this.transformToSegments({})) + // .catch(this.handleQueryError.bind(this)); + case 'column': + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('value')) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + break; + } + case 'action': { + this.removeSelectPart(selectParts, part); + this.updateRawSqlAndRefresh(); + break; + } + case 'get-part-actions': { + return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + handleGroupPartEvent(part: any, index: any, evt: { name: any }) { + switch (evt.name) { + case 'get-param-options': { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + break; + } + case 'action': { + this.removeGroup(part, index); + this.updateRawSqlAndRefresh(); + break; + } + case 'get-part-actions': { + return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + addGroup(partType: string, value: string) { + let params = [value]; + if (partType === 'time') { + params = ['$__interval', 'none']; + } + const partModel = sqlPart.create({ type: partType, params: params }); + + if (partType === 'time') { + // put timeGroup at start + this.groupParts.splice(0, 0, partModel); + } else { + this.groupParts.push(partModel); + } + + // add aggregates when adding group by + for (const selectParts of this.selectParts) { + if (!selectParts.some((part) => part.def.type === 'aggregate')) { + const aggregate = sqlPart.create({ type: 'aggregate', params: ['avg'] }); + selectParts.splice(1, 0, aggregate); + if (!selectParts.some((part) => part.def.type === 'alias')) { + const alias = sqlPart.create({ type: 'alias', params: [selectParts[0].part.params[0]] }); + selectParts.push(alias); + } + } + } + + this.updatePersistedParts(); + } + + removeGroup(part: { def: { type: string } }, index: number) { + if (part.def.type === 'time') { + // remove aggregations + this.selectParts = map(this.selectParts, (s: any) => { + return filter(s, (part: any) => { + if (part.def.type === 'aggregate' || part.def.type === 'percentile') { + return false; + } + return true; + }); + }); + } + + this.groupParts.splice(index, 1); + this.updatePersistedParts(); + } + + handleWherePartEvent(whereParts: any, part: any, evt: any, index: any) { + switch (evt.name) { + case 'get-param-options': { + switch (evt.param.name) { + case 'left': + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + case 'right': + if (['int', 'bigint', 'double', 'datetime'].indexOf(part.datatype) > -1) { + // don't do value lookups for numerical fields + return Promise.resolve([]); + } else { + return this.datasource + .metricFindQuery(this.metaBuilder.buildValueQuery(part.params[0])) + .then( + this.transformToSegments({ + addTemplateVars: true, + templateQuoter: (v: string) => { + return this.queryModel.quoteLiteral(v); + }, + }) + ) + .catch(this.handleQueryError.bind(this)); + } + case 'op': + return Promise.resolve(this.uiSegmentSrv.newOperators(this.metaBuilder.getOperators(part.datatype))); + default: + return Promise.resolve([]); + } + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(part.params[0])).then((d: any) => { + if (d.length === 1) { + part.datatype = d[0].text; + } + }); + this.updateRawSqlAndRefresh(); + break; + } + case 'action': { + // remove element + whereParts.splice(index, 1); + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + break; + } + case 'get-part-actions': { + return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + getWhereOptions() { + const options = []; + if (this.queryModel.hasUnixEpochTimecolumn()) { + options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__unixEpochFilter' })); + } else { + options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__timeFilter' })); + } + options.push(this.uiSegmentSrv.newSegment({ type: 'expression', value: 'Expression' })); + return Promise.resolve(options); + } + + addWhereAction(part: any, index: number) { + switch (this.whereAdd.type) { + case 'macro': { + const partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] }); + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } + break; + } + default: { + this.whereParts.push(sqlPart.create({ type: 'expression', params: ['value', '=', 'value'] })); + } + } + + this.updatePersistedParts(); + this.resetPlusButton(this.whereAdd); + this.updateRawSqlAndRefresh(); + } + + getGroupOptions() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('group')) + .then((tags: any) => { + const options = []; + if (!this.queryModel.hasTimeGroup()) { + options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' })); + } + for (const tag of tags) { + options.push(this.uiSegmentSrv.newSegment({ type: 'column', value: tag.text })); + } + return options; + }) + .catch(this.handleQueryError.bind(this)); + } + + addGroupAction() { + switch (this.groupAdd.value) { + default: { + this.addGroup(this.groupAdd.type, this.groupAdd.value); + } + } + + this.resetPlusButton(this.groupAdd); + this.updateRawSqlAndRefresh(); + } + + handleQueryError(err: any): any[] { + this.error = err.message || 'Failed to issue metric query'; + return []; + } +} diff --git a/public/app/plugins/datasource/mysql/response_parser.ts b/public/app/plugins/datasource/mysql/response_parser.ts new file mode 100644 index 00000000..c4367a9c --- /dev/null +++ b/public/app/plugins/datasource/mysql/response_parser.ts @@ -0,0 +1,78 @@ +import { AnnotationEvent, DataFrame, MetricFindValue } from '@grafana/data'; +import { BackendDataSourceResponse, FetchResponse, toDataQueryResponse } from '@grafana/runtime'; + +export default class ResponseParser { + transformMetricFindResponse(raw: FetchResponse): MetricFindValue[] { + const frames = toDataQueryResponse(raw).data as DataFrame[]; + + if (!frames || !frames.length) { + return []; + } + + const frame = frames[0]; + + const values: MetricFindValue[] = []; + const textField = frame.fields.find((f) => f.name === '__text'); + const valueField = frame.fields.find((f) => f.name === '__value'); + + if (textField && valueField) { + for (let i = 0; i < textField.values.length; i++) { + values.push({ text: '' + textField.values.get(i), value: '' + valueField.values.get(i) }); + } + } else { + values.push( + ...frame.fields + .flatMap((f) => f.values.toArray()) + .map((v) => ({ + text: v, + })) + ); + } + + return Array.from(new Set(values.map((v) => v.text))).map((text) => ({ + text, + value: values.find((v) => v.text === text)?.value, + })); + } + + async transformAnnotationResponse(options: any, data: BackendDataSourceResponse): Promise { + const frames = toDataQueryResponse({ data: data }).data as DataFrame[]; + if (!frames || !frames.length) { + return []; + } + const frame = frames[0]; + const timeField = frame.fields.find((f) => f.name === 'time' || f.name === 'time_sec'); + + if (!timeField) { + throw new Error('Missing mandatory time column (with time column alias) in annotation query'); + } + + if (frame.fields.find((f) => f.name === 'title')) { + throw new Error('The title column for annotations is deprecated, now only a column named text is returned'); + } + + const timeEndField = frame.fields.find((f) => f.name === 'timeend'); + const textField = frame.fields.find((f) => f.name === 'text'); + const tagsField = frame.fields.find((f) => f.name === 'tags'); + + const list: AnnotationEvent[] = []; + for (let i = 0; i < frame.length; i++) { + const timeEnd = timeEndField && timeEndField.values.get(i) ? Math.floor(timeEndField.values.get(i)) : undefined; + list.push({ + annotation: options.annotation, + time: Math.floor(timeField.values.get(i)), + timeEnd, + text: textField && textField.values.get(i) ? textField.values.get(i) : '', + tags: + tagsField && tagsField.values.get(i) + ? tagsField.values + .get(i) + .trim() + .split(/\s*,\s*/) + : [], + }); + } + + return list; + } +} diff --git a/public/app/plugins/datasource/mysql/specs/datasource.test.ts b/public/app/plugins/datasource/mysql/specs/datasource.test.ts new file mode 100644 index 00000000..51f085ab --- /dev/null +++ b/public/app/plugins/datasource/mysql/specs/datasource.test.ts @@ -0,0 +1,440 @@ +import { of } from 'rxjs'; +import { + dataFrameToJSON, + DataQueryRequest, + DataSourceInstanceSettings, + dateTime, + MutableDataFrame, + toUtc, +} from '@grafana/data'; + +import { MysqlDatasource } from '../datasource'; +import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__ +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { initialCustomVariableModelState } from '../../../../features/variables/custom/reducer'; +import { FetchResponse, setBackendSrv } from '@grafana/runtime'; +import { MySQLOptions, MySQLQuery } from './../types'; + +describe('MySQLDatasource', () => { + const setupTextContext = (response: any) => { + jest.clearAllMocks(); + setBackendSrv(backendSrv); + const fetchMock = jest.spyOn(backendSrv, 'fetch'); + const instanceSettings = ({ + jsonData: { + defaultProject: 'testproject', + }, + } as unknown) as DataSourceInstanceSettings; + const templateSrv: TemplateSrv = new TemplateSrv(); + const variable = { ...initialCustomVariableModelState }; + const raw = { + from: toUtc('2018-04-25 10:00'), + to: toUtc('2018-04-25 11:00'), + }; + const timeSrvMock: any = { + timeRange: () => ({ + from: raw.from, + to: raw.to, + raw: raw, + }), + }; + fetchMock.mockImplementation((options) => of(createFetchResponse(response))); + + const ds = new MysqlDatasource(instanceSettings, templateSrv, timeSrvMock); + + return { ds, variable, templateSrv, fetchMock }; + }; + + describe('When performing a query with hidden target', () => { + it('should return empty result and backendSrv.fetch should not be called', async () => { + const options = ({ + range: { + from: dateTime(1432288354), + to: dateTime(1432288401), + }, + targets: [ + { + format: 'table', + rawQuery: true, + rawSql: 'select time, metric, value from grafana_metric', + refId: 'A', + datasource: 'gdev-ds', + hide: true, + }, + ], + } as unknown) as DataQueryRequest; + + const { ds, fetchMock } = setupTextContext({}); + + await expect(ds.query(options)).toEmitValuesWith((received) => { + expect(received[0]).toEqual({ data: [] }); + expect(fetchMock).not.toHaveBeenCalled(); + }); + }); + }); + + describe('When performing annotationQuery', () => { + let results: any; + const annotationName = 'MyAnno'; + const options = { + annotation: { + name: annotationName, + rawQuery: 'select time_sec, text, tags from table;', + }, + range: { + from: dateTime(1432288354), + to: dateTime(1432288401), + }, + }; + const response = { + results: { + MyAnno: { + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'time_sec', values: [1432288355, 1432288390, 1432288400] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + { name: 'tags', values: ['TagA,TagB', ' TagB , TagC', null] }, + ], + }) + ), + ], + }, + }, + }; + + beforeEach(async () => { + const { ds } = setupTextContext(response); + const data = await ds.annotationQuery(options); + results = data; + }); + + it('should return annotation list', async () => { + expect(results.length).toBe(3); + expect(results[0].text).toBe('some text'); + expect(results[0].tags[0]).toBe('TagA'); + expect(results[0].tags[1]).toBe('TagB'); + expect(results[1].tags[0]).toBe('TagB'); + expect(results[1].tags[1]).toBe('TagC'); + expect(results[2].tags.length).toBe(0); + }); + }); + + describe('When performing metricFindQuery that returns multiple string fields', () => { + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'title', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + it('should return list of all string field values', async () => { + const { ds } = setupTextContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results.length).toBe(6); + expect(results[0].text).toBe('aTitle'); + expect(results[5].text).toBe('some text3'); + }); + }); + + describe('When performing metricFindQuery with $__searchFilter and a searchFilter is given', () => { + const query = "select title from atable where title LIKE '$__searchFilter'"; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'title', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + it('should return list of all column values', async () => { + const { ds, fetchMock } = setupTextContext(response); + const results = await ds.metricFindQuery(query, { searchFilter: 'aTit' }); + + expect(fetchMock).toBeCalledTimes(1); + expect(fetchMock.mock.calls[0][0].data.queries[0].rawSql).toBe( + "select title from atable where title LIKE 'aTit%'" + ); + expect(results.length).toBe(6); + }); + }); + + describe('When performing metricFindQuery with $__searchFilter but no searchFilter is given', () => { + const query = "select title from atable where title LIKE '$__searchFilter'"; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'title', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + it('should return list of all column values', async () => { + const { ds, fetchMock } = setupTextContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(fetchMock).toBeCalledTimes(1); + expect(fetchMock.mock.calls[0][0].data.queries[0].rawSql).toBe("select title from atable where title LIKE '%'"); + expect(results.length).toBe(6); + }); + }); + + describe('When performing metricFindQuery with key, value columns', () => { + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: '__value', values: ['value1', 'value2', 'value3'] }, + { name: '__text', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + it('should return list of as text, value', async () => { + const { ds } = setupTextContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results.length).toBe(3); + expect(results[0].text).toBe('aTitle'); + expect(results[0].value).toBe('value1'); + expect(results[2].text).toBe('aTitle3'); + expect(results[2].value).toBe('value3'); + }); + }); + + describe('When performing metricFindQuery without key, value columns', () => { + const query = 'select id, values from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'id', values: [1, 2, 3] }, + { name: 'values', values: ['test1', 'test2', 'test3'] }, + ], + meta: { + executedQueryString: 'select id, values from atable', + }, + }) + ), + ], + }, + }, + }; + + it('should return list of all field values as text', async () => { + const { ds } = setupTextContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results).toEqual([ + { text: 1 }, + { text: 2 }, + { text: 3 }, + { text: 'test1' }, + { text: 'test2' }, + { text: 'test3' }, + ]); + }); + }); + + describe('When performing metricFindQuery with key, value columns and with duplicate keys', () => { + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: '__text', values: ['aTitle', 'aTitle', 'aTitle'] }, + { name: '__value', values: ['same', 'same', 'diff'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + it('should return list of unique keys', async () => { + const { ds } = setupTextContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results.length).toBe(1); + expect(results[0].text).toBe('aTitle'); + expect(results[0].value).toBe('same'); + }); + }); + + describe('When interpolating variables', () => { + describe('and value is a string', () => { + it('should return an unquoted value', () => { + const { ds, variable } = setupTextContext({}); + expect(ds.interpolateVariable('abc', variable)).toEqual('abc'); + }); + }); + + describe('and value is a number', () => { + it('should return an unquoted value', () => { + const { ds, variable } = setupTextContext({}); + expect(ds.interpolateVariable(1000, variable)).toEqual(1000); + }); + }); + + describe('and value is an array of strings', () => { + it('should return comma separated quoted values', () => { + const { ds, variable } = setupTextContext({}); + expect(ds.interpolateVariable(['a', 'b', 'c'], variable)).toEqual("'a','b','c'"); + }); + }); + + describe('and variable allows multi-value and value is a string', () => { + it('should return a quoted value', () => { + const { ds, variable } = setupTextContext({}); + variable.multi = true; + expect(ds.interpolateVariable('abc', variable)).toEqual("'abc'"); + }); + }); + + describe('and variable contains single quote', () => { + it('should return a quoted value', () => { + const { ds, variable } = setupTextContext({}); + variable.multi = true; + expect(ds.interpolateVariable("a'bc", variable)).toEqual("'a''bc'"); + }); + }); + + describe('and variable allows all and value is a string', () => { + it('should return a quoted value', () => { + const { ds, variable } = setupTextContext({}); + variable.includeAll = true; + expect(ds.interpolateVariable('abc', variable)).toEqual("'abc'"); + }); + }); + }); + + describe('targetContainsTemplate', () => { + it('given query that contains template variable it should return true', () => { + const { ds, templateSrv } = setupTextContext({}); + const rawSql = `SELECT + $__timeGroup(createdAt,'$summarize') as time_sec, + avg(value) as value, + hostname as metric + FROM + grafana_metric + WHERE + $__timeFilter(createdAt) AND + measurement = 'logins.count' AND + hostname IN($host) + GROUP BY 1, 3 + ORDER BY 1`; + const query = { + rawSql, + rawQuery: true, + }; + templateSrv.init([ + { type: 'query', name: 'summarize', current: { value: '1m' } }, + { type: 'query', name: 'host', current: { value: 'a' } }, + ]); + expect(ds.targetContainsTemplate(query)).toBeTruthy(); + }); + + it('given query that only contains global template variable it should return false', () => { + const { ds, templateSrv } = setupTextContext({}); + const rawSql = `SELECT + $__timeGroup(createdAt,'$__interval') as time_sec, + avg(value) as value, + hostname as metric + FROM + grafana_metric + WHERE + $__timeFilter(createdAt) AND + measurement = 'logins.count' + GROUP BY 1, 3 + ORDER BY 1`; + const query = { + rawSql, + rawQuery: true, + }; + templateSrv.init([ + { type: 'query', name: 'summarize', current: { value: '1m' } }, + { type: 'query', name: 'host', current: { value: 'a' } }, + ]); + expect(ds.targetContainsTemplate(query)).toBeFalsy(); + }); + }); +}); + +const createFetchResponse = (data: T): FetchResponse => ({ + data, + status: 200, + url: 'http://localhost:3000/api/query', + config: { url: 'http://localhost:3000/api/query' }, + type: 'basic', + statusText: 'Ok', + redirected: false, + headers: ({} as unknown) as Headers, + ok: true, +}); diff --git a/public/app/plugins/datasource/mysql/sql_part.ts b/public/app/plugins/datasource/mysql/sql_part.ts new file mode 100644 index 00000000..7506431c --- /dev/null +++ b/public/app/plugins/datasource/mysql/sql_part.ts @@ -0,0 +1,86 @@ +import { SqlPartDef, SqlPart } from 'app/angular/components/sql_part/sql_part'; + +const index: any[] = []; + +function createPart(part: any): any { + const def = index[part.type]; + if (!def) { + return null; + } + + return new SqlPart(part, def); +} + +function register(options: any) { + index[options.type] = new SqlPartDef(options); +} + +register({ + type: 'column', + style: 'label', + params: [{ type: 'column', dynamicLookup: true }], + defaultParams: ['value'], +}); + +register({ + type: 'expression', + style: 'expression', + label: 'Expr:', + params: [ + { name: 'left', type: 'string', dynamicLookup: true }, + { name: 'op', type: 'string', dynamicLookup: true }, + { name: 'right', type: 'string', dynamicLookup: true }, + ], + defaultParams: ['value', '=', 'value'], +}); + +register({ + type: 'macro', + style: 'label', + label: 'Macro:', + params: [], + defaultParams: [], +}); + +register({ + type: 'aggregate', + style: 'label', + params: [ + { + name: 'name', + type: 'string', + options: ['avg', 'count', 'min', 'max', 'sum', 'stddev', 'variance'], + }, + ], + defaultParams: ['avg'], +}); + +register({ + type: 'alias', + style: 'label', + params: [{ name: 'name', type: 'string', quote: 'double' }], + defaultParams: ['alias'], +}); + +register({ + type: 'time', + style: 'function', + label: 'time', + params: [ + { + name: 'interval', + type: 'interval', + options: ['$__interval', '1s', '10s', '1m', '5m', '10m', '15m', '1h'], + }, + { + name: 'fill', + type: 'string', + options: ['none', 'NULL', 'previous', '0'], + }, + ], + defaultParams: ['$__interval', 'none'], +}); + +export default { + create: createPart, +}; diff --git a/public/app/plugins/datasource/mysql/types.ts b/public/app/plugins/datasource/mysql/types.ts new file mode 100644 index 00000000..2f24c8e7 --- /dev/null +++ b/public/app/plugins/datasource/mysql/types.ts @@ -0,0 +1,20 @@ +import { DataQuery, DataSourceJsonData } from '@grafana/data'; +export interface MysqlQueryForInterpolation { + alias?: any; + format?: any; + rawSql?: any; + refId: any; + hide?: any; +} + +export interface MySQLOptions extends DataSourceJsonData { + timeInterval: string; +} + +export type ResultFormat = 'time_series' | 'table'; + +export interface MySQLQuery extends DataQuery { + alias?: string; + format?: ResultFormat; + rawSql?: any; +} diff --git a/public/app/plugins/datasource/opentsdb/README.md b/public/app/plugins/datasource/opentsdb/README.md new file mode 100644 index 00000000..56800ab0 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/README.md @@ -0,0 +1,7 @@ +# OpenTSDB Data Source - Native Plugin + +Grafana ships with **built in** support for OpenTSDB, a scalable, distributed time series database. + +Read more about it here: + +[http://docs.grafana.org/datasources/opentsdb/](http://docs.grafana.org/datasources/opentsdb/) diff --git a/public/app/plugins/datasource/opentsdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/opentsdb/components/ConfigEditor.tsx new file mode 100644 index 00000000..dc0bc712 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/components/ConfigEditor.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { DataSourceHttpSettings } from '@grafana/ui'; +import { DataSourcePluginOptionsEditorProps } from '@grafana/data'; +import { OpenTsdbDetails } from './OpenTsdbDetails'; +import { OpenTsdbOptions } from '../types'; + +export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps) => { + const { options, onOptionsChange } = props; + + return ( + <> + + + + ); +}; diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx new file mode 100644 index 00000000..e91ab6eb --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx @@ -0,0 +1,96 @@ +import React, { SyntheticEvent } from 'react'; +import { InlineFormLabel, LegacyForms } from '@grafana/ui'; +const { Select, Input } = LegacyForms; +import { DataSourceSettings, SelectableValue } from '@grafana/data'; +import { OpenTsdbOptions } from '../types'; +import { useUniqueId } from '../../influxdb/components/useUniqueId'; + +const tsdbVersions = [ + { label: '<=2.1', value: 1 }, + { label: '==2.2', value: 2 }, + { label: '==2.3', value: 3 }, +]; + +const tsdbResolutions = [ + { label: 'second', value: 1 }, + { label: 'millisecond', value: 2 }, +]; + +interface Props { + value: DataSourceSettings; + onChange: (value: DataSourceSettings) => void; +} + +export const OpenTsdbDetails = (props: Props) => { + const { onChange, value } = props; + + const idSuffix = useUniqueId(); + + return ( + <> +

OpenTSDB settings

+ + Version + + resolution.value === value.jsonData.tsdbResolution) ?? + tsdbResolutions[0] + } + onChange={onSelectChangeHandler('tsdbResolution', value, onChange)} + /> +

+ + Lookup limit + + +

+ + ); +}; + +const onSelectChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => ( + newValue: SelectableValue +) => { + onChange({ + ...value, + jsonData: { + ...value.jsonData, + [key]: newValue.value, + }, + }); +}; + +const onInputChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => ( + event: SyntheticEvent +) => { + onChange({ + ...value, + jsonData: { + ...value.jsonData, + [key]: event.currentTarget.value, + }, + }); +}; diff --git a/public/app/plugins/datasource/opentsdb/datasource.d.ts b/public/app/plugins/datasource/opentsdb/datasource.d.ts new file mode 100644 index 00000000..cd73e956 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/datasource.d.ts @@ -0,0 +1,2 @@ +declare var OpenTsDatasource: any; +export default OpenTsDatasource; diff --git a/public/app/plugins/datasource/opentsdb/datasource.ts b/public/app/plugins/datasource/opentsdb/datasource.ts new file mode 100644 index 00000000..07757aa5 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/datasource.ts @@ -0,0 +1,576 @@ +import angular from 'angular'; +import { + clone, + compact, + each, + every, + filter, + findIndex, + has, + includes, + isArray, + isEmpty, + map as _map, + toPairs, +} from 'lodash'; +import { lastValueFrom, Observable, of } from 'rxjs'; +import { catchError, map } from 'rxjs/operators'; +import { FetchResponse, getBackendSrv } from '@grafana/runtime'; +import { + AnnotationEvent, + DataQueryRequest, + DataQueryResponse, + DataSourceApi, + dateMath, + ScopedVars, +} from '@grafana/data'; + +import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv'; +import { OpenTsdbOptions, OpenTsdbQuery } from './types'; + +export default class OpenTsDatasource extends DataSourceApi { + type: any; + url: any; + name: any; + withCredentials: any; + basicAuth: any; + tsdbVersion: any; + tsdbResolution: any; + lookupLimit: any; + tagKeys: any; + + aggregatorsPromise: any; + filterTypesPromise: any; + + constructor(instanceSettings: any, private readonly templateSrv: TemplateSrv = getTemplateSrv()) { + super(instanceSettings); + this.type = 'opentsdb'; + this.url = instanceSettings.url; + this.name = instanceSettings.name; + this.withCredentials = instanceSettings.withCredentials; + this.basicAuth = instanceSettings.basicAuth; + instanceSettings.jsonData = instanceSettings.jsonData || {}; + this.tsdbVersion = instanceSettings.jsonData.tsdbVersion || 1; + this.tsdbResolution = instanceSettings.jsonData.tsdbResolution || 1; + this.lookupLimit = instanceSettings.jsonData.lookupLimit || 1000; + this.tagKeys = {}; + + this.aggregatorsPromise = null; + this.filterTypesPromise = null; + } + + // Called once per panel (graph) + query(options: DataQueryRequest): Observable { + const start = this.convertToTSDBTime(options.range.raw.from, false, options.timezone); + const end = this.convertToTSDBTime(options.range.raw.to, true, options.timezone); + const qs: any[] = []; + + each(options.targets, (target) => { + if (!target.metric) { + return; + } + qs.push(this.convertTargetToQuery(target, options, this.tsdbVersion)); + }); + + const queries = compact(qs); + + // No valid targets, return the empty result to save a round trip. + if (isEmpty(queries)) { + return of({ data: [] }); + } + + const groupByTags: any = {}; + each(queries, (query) => { + if (query.filters && query.filters.length > 0) { + each(query.filters, (val) => { + groupByTags[val.tagk] = true; + }); + } else { + each(query.tags, (val, key) => { + groupByTags[key] = true; + }); + } + }); + + options.targets = filter(options.targets, (query) => { + return query.hide !== true; + }); + + return this.performTimeSeriesQuery(queries, start, end).pipe( + catchError((err) => { + // Throw the error message here instead of the whole object to workaround the error parsing error. + throw err?.data?.error?.message || 'Error performing time series query.'; + }), + map((response) => { + const metricToTargetMapping = this.mapMetricsToTargets(response.data, options, this.tsdbVersion); + const result = _map(response.data, (metricData: any, index: number) => { + index = metricToTargetMapping[index]; + if (index === -1) { + index = 0; + } + this._saveTagKeys(metricData); + + return this.transformMetricData( + metricData, + groupByTags, + options.targets[index], + options, + this.tsdbResolution + ); + }); + return { data: result }; + }) + ); + } + + annotationQuery(options: any): Promise { + const start = this.convertToTSDBTime(options.rangeRaw.from, false, options.timezone); + const end = this.convertToTSDBTime(options.rangeRaw.to, true, options.timezone); + const qs = []; + const eventList: any[] = []; + + qs.push({ aggregator: 'sum', metric: options.annotation.target }); + + const queries = compact(qs); + + return lastValueFrom( + this.performTimeSeriesQuery(queries, start, end).pipe( + map((results) => { + if (results.data[0]) { + let annotationObject = results.data[0].annotations; + if (options.annotation.isGlobal) { + annotationObject = results.data[0].globalAnnotations; + } + if (annotationObject) { + each(annotationObject, (annotation) => { + const event = { + text: annotation.description, + time: Math.floor(annotation.startTime) * 1000, + annotation: options.annotation, + }; + + eventList.push(event); + }); + } + } + return eventList; + }) + ) + ); + } + + targetContainsTemplate(target: any) { + if (target.filters && target.filters.length > 0) { + for (let i = 0; i < target.filters.length; i++) { + if (this.templateSrv.variableExists(target.filters[i].filter)) { + return true; + } + } + } + + if (target.tags && Object.keys(target.tags).length > 0) { + for (const tagKey in target.tags) { + if (this.templateSrv.variableExists(target.tags[tagKey])) { + return true; + } + } + } + + return false; + } + + performTimeSeriesQuery(queries: any[], start: any, end: any): Observable { + let msResolution = false; + if (this.tsdbResolution === 2) { + msResolution = true; + } + const reqBody: any = { + start: start, + queries: queries, + msResolution: msResolution, + globalAnnotations: true, + }; + if (this.tsdbVersion === 3) { + reqBody.showQuery = true; + } + + // Relative queries (e.g. last hour) don't include an end time + if (end) { + reqBody.end = end; + } + + const options = { + method: 'POST', + url: this.url + '/api/query', + data: reqBody, + }; + + this._addCredentialOptions(options); + return getBackendSrv().fetch(options); + } + + suggestTagKeys(metric: string | number) { + return Promise.resolve(this.tagKeys[metric] || []); + } + + _saveTagKeys(metricData: { tags: {}; aggregateTags: any; metric: string | number }) { + const tagKeys = Object.keys(metricData.tags); + each(metricData.aggregateTags, (tag) => { + tagKeys.push(tag); + }); + + this.tagKeys[metricData.metric] = tagKeys; + } + + _performSuggestQuery(query: string, type: string): Observable { + return this._get('/api/suggest', { type, q: query, max: this.lookupLimit }).pipe( + map((result: any) => { + return result.data; + }) + ); + } + + _performMetricKeyValueLookup(metric: string, keys: any): Observable { + if (!metric || !keys) { + return of([]); + } + + const keysArray = keys.split(',').map((key: any) => { + return key.trim(); + }); + const key = keysArray[0]; + let keysQuery = key + '=*'; + + if (keysArray.length > 1) { + keysQuery += ',' + keysArray.splice(1).join(','); + } + + const m = metric + '{' + keysQuery + '}'; + + return this._get('/api/search/lookup', { m: m, limit: this.lookupLimit }).pipe( + map((result: any) => { + result = result.data.results; + const tagvs: any[] = []; + each(result, (r) => { + if (tagvs.indexOf(r.tags[key]) === -1) { + tagvs.push(r.tags[key]); + } + }); + return tagvs; + }) + ); + } + + _performMetricKeyLookup(metric: any): Observable { + if (!metric) { + return of([]); + } + + return this._get('/api/search/lookup', { m: metric, limit: 1000 }).pipe( + map((result: any) => { + result = result.data.results; + const tagks: any[] = []; + each(result, (r) => { + each(r.tags, (tagv, tagk) => { + if (tagks.indexOf(tagk) === -1) { + tagks.push(tagk); + } + }); + }); + return tagks; + }) + ); + } + + _get( + relativeUrl: string, + params?: { type?: string; q?: string; max?: number; m?: any; limit?: number } + ): Observable { + const options = { + method: 'GET', + url: this.url + relativeUrl, + params: params, + }; + + this._addCredentialOptions(options); + + return getBackendSrv().fetch(options); + } + + _addCredentialOptions(options: any) { + if (this.basicAuth || this.withCredentials) { + options.withCredentials = true; + } + if (this.basicAuth) { + options.headers = { Authorization: this.basicAuth }; + } + } + + metricFindQuery(query: string) { + if (!query) { + return Promise.resolve([]); + } + + let interpolated; + try { + interpolated = this.templateSrv.replace(query, {}, 'distributed'); + } catch (err) { + return Promise.reject(err); + } + + const responseTransform = (result: any) => { + return _map(result, (value) => { + return { text: value }; + }); + }; + + const metricsRegex = /metrics$(.*)$/; + const tagNamesRegex = /tag_names$(.*)$/; + const tagValuesRegex = /tag_values$(.*?),\s?(.*)$/; + const tagNamesSuggestRegex = /suggest_tagk$(.*)$/; + const tagValuesSuggestRegex = /suggest_tagv$(.*)$/; + + const metricsQuery = interpolated.match(metricsRegex); + if (metricsQuery) { + return lastValueFrom(this._performSuggestQuery(metricsQuery[1], 'metrics').pipe(map(responseTransform))); + } + + const tagNamesQuery = interpolated.match(tagNamesRegex); + if (tagNamesQuery) { + return lastValueFrom(this._performMetricKeyLookup(tagNamesQuery[1]).pipe(map(responseTransform))); + } + + const tagValuesQuery = interpolated.match(tagValuesRegex); + if (tagValuesQuery) { + return lastValueFrom( + this._performMetricKeyValueLookup(tagValuesQuery[1], tagValuesQuery[2]).pipe(map(responseTransform)) + ); + } + + const tagNamesSuggestQuery = interpolated.match(tagNamesSuggestRegex); + if (tagNamesSuggestQuery) { + return lastValueFrom(this._performSuggestQuery(tagNamesSuggestQuery[1], 'tagk').pipe(map(responseTransform))); + } + + const tagValuesSuggestQuery = interpolated.match(tagValuesSuggestRegex); + if (tagValuesSuggestQuery) { + return lastValueFrom(this._performSuggestQuery(tagValuesSuggestQuery[1], 'tagv').pipe(map(responseTransform))); + } + + return Promise.resolve([]); + } + + testDatasource() { + return lastValueFrom( + this._performSuggestQuery('cpu', 'metrics').pipe( + map(() => { + return { status: 'success', message: 'Data source is working' }; + }) + ) + ); + } + + getAggregators() { + if (this.aggregatorsPromise) { + return this.aggregatorsPromise; + } + + this.aggregatorsPromise = lastValueFrom( + this._get('/api/aggregators').pipe( + map((result: any) => { + if (result.data && isArray(result.data)) { + return result.data.sort(); + } + return []; + }) + ) + ); + return this.aggregatorsPromise; + } + + getFilterTypes() { + if (this.filterTypesPromise) { + return this.filterTypesPromise; + } + + this.filterTypesPromise = lastValueFrom( + this._get('/api/config/filters').pipe( + map((result: any) => { + if (result.data) { + return Object.keys(result.data).sort(); + } + return []; + }) + ) + ); + return this.filterTypesPromise; + } + + transformMetricData(md: { dps: any }, groupByTags: any, target: any, options: any, tsdbResolution: number) { + const metricLabel = this.createMetricLabel(md, target, groupByTags, options); + const dps: any[] = []; + + // TSDB returns datapoints has a hash of ts => value. + // Can't use pairs(invert()) because it stringifies keys/values + each(md.dps, (v: any, k: number) => { + if (tsdbResolution === 2) { + dps.push([v, k * 1]); + } else { + dps.push([v, k * 1000]); + } + }); + + return { target: metricLabel, datapoints: dps }; + } + + createMetricLabel( + md: { dps?: any; tags?: any; metric?: any }, + target: { alias: string }, + groupByTags: any, + options: { scopedVars: any } + ) { + if (target.alias) { + const scopedVars = clone(options.scopedVars || {}); + each(md.tags, (value, key) => { + scopedVars['tag_' + key] = { value: value }; + }); + return this.templateSrv.replace(target.alias, scopedVars); + } + + let label = md.metric; + const tagData: any[] = []; + + if (!isEmpty(md.tags)) { + each(toPairs(md.tags), (tag) => { + if (has(groupByTags, tag[0])) { + tagData.push(tag[0] + '=' + tag[1]); + } + }); + } + + if (!isEmpty(tagData)) { + label += '{' + tagData.join(', ') + '}'; + } + + return label; + } + + convertTargetToQuery(target: any, options: any, tsdbVersion: number) { + if (!target.metric || target.hide) { + return null; + } + + const query: any = { + metric: this.templateSrv.replace(target.metric, options.scopedVars, 'pipe'), + aggregator: 'avg', + }; + + if (target.aggregator) { + query.aggregator = this.templateSrv.replace(target.aggregator); + } + + if (target.shouldComputeRate) { + query.rate = true; + query.rateOptions = { + counter: !!target.isCounter, + }; + + if (target.counterMax && target.counterMax.length) { + query.rateOptions.counterMax = parseInt(target.counterMax, 10); + } + + if (target.counterResetValue && target.counterResetValue.length) { + query.rateOptions.resetValue = parseInt(target.counterResetValue, 10); + } + + if (tsdbVersion >= 2) { + query.rateOptions.dropResets = + !query.rateOptions.counterMax && (!query.rateOptions.ResetValue || query.rateOptions.ResetValue === 0); + } + } + + if (!target.disableDownsampling) { + let interval = this.templateSrv.replace(target.downsampleInterval || options.interval); + + if (interval.match(/\.[0-9]+s/)) { + interval = parseFloat(interval) * 1000 + 'ms'; + } + + query.downsample = interval + '-' + target.downsampleAggregator; + + if (target.downsampleFillPolicy && target.downsampleFillPolicy !== 'none') { + query.downsample += '-' + target.downsampleFillPolicy; + } + } + + if (target.filters && target.filters.length > 0) { + query.filters = angular.copy(target.filters); + if (query.filters) { + for (const filterKey in query.filters) { + query.filters[filterKey].filter = this.templateSrv.replace( + query.filters[filterKey].filter, + options.scopedVars, + 'pipe' + ); + } + } + } else { + query.tags = angular.copy(target.tags); + if (query.tags) { + for (const tagKey in query.tags) { + query.tags[tagKey] = this.templateSrv.replace(query.tags[tagKey], options.scopedVars, 'pipe'); + } + } + } + + if (target.explicitTags) { + query.explicitTags = true; + } + + return query; + } + + mapMetricsToTargets(metrics: any, options: any, tsdbVersion: number) { + let interpolatedTagValue, arrTagV; + return _map(metrics, (metricData) => { + if (tsdbVersion === 3) { + return metricData.query.index; + } else { + return findIndex(options.targets as any[], (target) => { + if (target.filters && target.filters.length > 0) { + return target.metric === metricData.metric; + } else { + return ( + target.metric === metricData.metric && + every(target.tags, (tagV, tagK) => { + interpolatedTagValue = this.templateSrv.replace(tagV, options.scopedVars, 'pipe'); + arrTagV = interpolatedTagValue.split('|'); + return includes(arrTagV, metricData.tags[tagK]) || interpolatedTagValue === '*'; + }) + ); + } + }); + } + }); + } + + interpolateVariablesInQueries(queries: OpenTsdbQuery[], scopedVars: ScopedVars): OpenTsdbQuery[] { + if (!queries.length) { + return queries; + } + + return queries.map((query) => ({ + ...query, + metric: this.templateSrv.replace(query.metric, scopedVars), + })); + } + + convertToTSDBTime(date: any, roundUp: any, timezone: any) { + if (date === 'now') { + return null; + } + + date = dateMath.parse(date, roundUp, timezone); + return date.valueOf(); + } +} diff --git a/public/app/plugins/datasource/opentsdb/img/opentsdb_logo.png b/public/app/plugins/datasource/opentsdb/img/opentsdb_logo.png new file mode 100644 index 00000000..081459ab Binary files /dev/null and b/public/app/plugins/datasource/opentsdb/img/opentsdb_logo.png differ diff --git a/public/app/plugins/datasource/opentsdb/module.ts b/public/app/plugins/datasource/opentsdb/module.ts new file mode 100644 index 00000000..768025c0 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/module.ts @@ -0,0 +1,13 @@ +import OpenTsDatasource from './datasource'; +import { OpenTsQueryCtrl } from './query_ctrl'; +import { DataSourcePlugin } from '@grafana/data'; +import { ConfigEditor } from './components/ConfigEditor'; + +class AnnotationsQueryCtrl { + static templateUrl = 'partials/annotations.editor.html'; +} + +export const plugin = new DataSourcePlugin(OpenTsDatasource) + .setQueryCtrl(OpenTsQueryCtrl) + .setConfigEditor(ConfigEditor) + .setAnnotationQueryCtrl(AnnotationsQueryCtrl); diff --git a/public/app/plugins/datasource/opentsdb/partials/annotations.editor.html b/public/app/plugins/datasource/opentsdb/partials/annotations.editor.html new file mode 100644 index 00000000..91467205 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/partials/annotations.editor.html @@ -0,0 +1,7 @@ +

+ OpenTSDB metrics query + +

+ +

diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html new file mode 100644 index 00000000..37421c38 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html @@ -0,0 +1,264 @@ + +

+ + Metric + + + + + + +

+ + Aggregator + + + + +

+ +

+ + Alias: + + Use patterns like $tag_tagname to replace part of the alias for a tag value + + + +

+ +

+ Down sample + + + blank for auto, or for example 1m + +

+ +

+ Aggregator +

+ +

+ Fill +

+ +

+ + + + +

+ +

+ + + Filters + + Filters does not work with tags, either of the two will work but not both. + + + +

+ {{fil.tagk}} = {{fil.type}}({{fil.filter}}) , groupBy = {{fil.groupBy}} + + + + + + +

+ + + + + +

+ +

+ + +

+ +

+ Type +

+ +

+ + +

+ + + + +

+ + + + + + + add filter + + + + +

+ +

+ + Tags + + Please use filters, tags are deprecated in opentsdb 2.2 + + +

+ +

+ + {{key}} = {{value}} + + + + + + + +

+ +

+ + + +

+ +

+ + + + + + + + + + + + + add tag + + +

+ +

+ + + + + + + +

+ Counter Max + + + + Reset Value + + +

+ +

+ + +

+ +

+ + diff --git a/public/app/plugins/datasource/opentsdb/plugin.json b/public/app/plugins/datasource/opentsdb/plugin.json new file mode 100644 index 00000000..a79384cf --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/plugin.json @@ -0,0 +1,24 @@ +{ + "type": "datasource", + "name": "OpenTSDB", + "id": "opentsdb", + "category": "tsdb", + + "metrics": true, + "defaultMatchFormat": "pipe", + "annotations": true, + "alerting": true, + "backend": true, + + "info": { + "description": "Open source time series database", + "author": { + "name": "Grafana Labs", + "url": "https://grafana.com" + }, + "logos": { + "small": "img/opentsdb_logo.png", + "large": "img/opentsdb_logo.png" + } + } +} diff --git a/public/app/plugins/datasource/opentsdb/query_ctrl.ts b/public/app/plugins/datasource/opentsdb/query_ctrl.ts new file mode 100644 index 00000000..be0d7895 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/query_ctrl.ts @@ -0,0 +1,222 @@ +import { map, size, has } from 'lodash'; +import { QueryCtrl } from 'app/plugins/sdk'; +import { auto } from 'angular'; +import { textUtil, rangeUtil } from '@grafana/data'; + +export class OpenTsQueryCtrl extends QueryCtrl { + static templateUrl = 'partials/query.editor.html'; + aggregators: any; + fillPolicies: any; + filterTypes: any; + tsdbVersion: any; + aggregator: any; + downsampleInterval: any; + downsampleAggregator: any; + downsampleFillPolicy: any; + errors: any; + suggestMetrics: any; + suggestTagKeys: any; + suggestTagValues: any; + addTagMode = false; + addFilterMode = false; + + /** @ngInject */ + constructor($scope: any, $injector: auto.IInjectorService) { + super($scope, $injector); + + this.errors = this.validateTarget(); + this.aggregators = ['avg', 'sum', 'min', 'max', 'dev', 'zimsum', 'mimmin', 'mimmax']; + this.fillPolicies = ['none', 'nan', 'null', 'zero']; + this.filterTypes = [ + 'wildcard', + 'iliteral_or', + 'not_iliteral_or', + 'not_literal_or', + 'iwildcard', + 'literal_or', + 'regexp', + ]; + + this.tsdbVersion = this.datasource.tsdbVersion; + + if (!this.target.aggregator) { + this.target.aggregator = 'sum'; + } + + if (!this.target.downsampleAggregator) { + this.target.downsampleAggregator = 'avg'; + } + + if (!this.target.downsampleFillPolicy) { + this.target.downsampleFillPolicy = 'none'; + } + + this.datasource.getAggregators().then((aggs: { length: number }) => { + if (aggs.length !== 0) { + this.aggregators = aggs; + } + }); + + this.datasource.getFilterTypes().then((filterTypes: { length: number }) => { + if (filterTypes.length !== 0) { + this.filterTypes = filterTypes; + } + }); + + // needs to be defined here as it is called from typeahead + this.suggestMetrics = (query: string, callback: any) => { + this.datasource + .metricFindQuery('metrics(' + query + ')') + .then(this.getTextValues) + .then(callback); + }; + + this.suggestTagKeys = (query: any, callback: any) => { + this.datasource.suggestTagKeys(this.target.metric).then(callback); + }; + + this.suggestTagValues = (query: string, callback: any) => { + this.datasource + .metricFindQuery('suggest_tagv(' + query + ')') + .then(this.getTextValues) + .then(callback); + }; + } + + targetBlur() { + this.errors = this.validateTarget(); + this.refresh(); + } + + getTextValues(metricFindResult: any) { + return map(metricFindResult, (value) => { + return textUtil.escapeHtml(value.text); + }); + } + + addTag() { + if (this.target.filters && this.target.filters.length > 0) { + this.errors.tags = 'Please remove filters to use tags, tags and filters are mutually exclusive.'; + } + + if (!this.addTagMode) { + this.addTagMode = true; + return; + } + + if (!this.target.tags) { + this.target.tags = {}; + } + + this.errors = this.validateTarget(); + + if (!this.errors.tags) { + this.target.tags[this.target.currentTagKey] = this.target.currentTagValue; + this.target.currentTagKey = ''; + this.target.currentTagValue = ''; + this.targetBlur(); + } + + this.addTagMode = false; + } + + removeTag(key: string | number) { + delete this.target.tags[key]; + this.targetBlur(); + } + + editTag(key: string | number, value: any) { + this.removeTag(key); + this.target.currentTagKey = key; + this.target.currentTagValue = value; + this.addTag(); + } + + closeAddTagMode() { + this.addTagMode = false; + return; + } + + addFilter() { + if (this.target.tags && size(this.target.tags) > 0) { + this.errors.filters = 'Please remove tags to use filters, tags and filters are mutually exclusive.'; + } + + if (!this.addFilterMode) { + this.addFilterMode = true; + return; + } + + if (!this.target.filters) { + this.target.filters = []; + } + + if (!this.target.currentFilterType) { + this.target.currentFilterType = 'iliteral_or'; + } + + if (!this.target.currentFilterGroupBy) { + this.target.currentFilterGroupBy = false; + } + + this.errors = this.validateTarget(); + + if (!this.errors.filters) { + const currentFilter = { + type: this.target.currentFilterType, + tagk: this.target.currentFilterKey, + filter: this.target.currentFilterValue, + groupBy: this.target.currentFilterGroupBy, + }; + this.target.filters.push(currentFilter); + this.target.currentFilterType = 'literal_or'; + this.target.currentFilterKey = ''; + this.target.currentFilterValue = ''; + this.target.currentFilterGroupBy = false; + this.targetBlur(); + } + + this.addFilterMode = false; + } + + removeFilter(index: number) { + this.target.filters.splice(index, 1); + this.targetBlur(); + } + + editFilter(fil: { tagk: any; filter: any; type: any; groupBy: any }, index: number) { + this.removeFilter(index); + this.target.currentFilterKey = fil.tagk; + this.target.currentFilterValue = fil.filter; + this.target.currentFilterType = fil.type; + this.target.currentFilterGroupBy = fil.groupBy; + this.addFilter(); + } + + closeAddFilterMode() { + this.addFilterMode = false; + return; + } + + validateTarget() { + const errs: any = {}; + + if (this.target.shouldDownsample) { + try { + if (this.target.downsampleInterval) { + rangeUtil.describeInterval(this.target.downsampleInterval); + } else { + errs.downsampleInterval = "You must supply a downsample interval (e.g. '1m' or '1h')."; + } + } catch (err) { + errs.downsampleInterval = err.message; + } + } + + if (this.target.tags && has(this.target.tags, this.target.currentTagKey)) { + errs.tags = "Duplicate tag key '" + this.target.currentTagKey + "'."; + } + + return errs; + } +} diff --git a/public/app/plugins/datasource/opentsdb/specs/datasource.test.ts b/public/app/plugins/datasource/opentsdb/specs/datasource.test.ts new file mode 100644 index 00000000..a7b05d19 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/specs/datasource.test.ts @@ -0,0 +1,141 @@ +import OpenTsDatasource from '../datasource'; +import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__ +import { OpenTsdbQuery } from '../types'; +import { createFetchResponse } from '../../../../../test/helpers/createFetchResponse'; +import { of } from 'rxjs'; + +jest.mock('@grafana/runtime', () => ({ + ...((jest.requireActual('@grafana/runtime') as unknown) as object), + getBackendSrv: () => backendSrv, +})); + +const metricFindQueryData = [ + { + target: 'prod1.count', + datapoints: [ + [10, 1], + [12, 1], + ], + }, +]; + +describe('opentsdb', () => { + function getTestcontext({ data = metricFindQueryData }: { data?: any } = {}) { + jest.clearAllMocks(); + const fetchMock = jest.spyOn(backendSrv, 'fetch'); + fetchMock.mockImplementation(() => of(createFetchResponse(data))); + + const instanceSettings = { url: '', jsonData: { tsdbVersion: 1 } }; + const replace = jest.fn((value) => value); + const templateSrv: any = { + replace, + }; + + const ds = new OpenTsDatasource(instanceSettings, templateSrv); + + return { ds, templateSrv, fetchMock }; + } + + describe('When performing metricFindQuery', () => { + it('metrics() should generate api suggest query', async () => { + const { ds, fetchMock } = getTestcontext(); + + const results = await ds.metricFindQuery('metrics(pew)'); + + expect(fetchMock).toHaveBeenCalledTimes(1); + expect(fetchMock.mock.calls[0][0].url).toBe('/api/suggest'); + expect(fetchMock.mock.calls[0][0].params?.type).toBe('metrics'); + expect(fetchMock.mock.calls[0][0].params?.q).toBe('pew'); + expect(results).not.toBe(null); + }); + + it('tag_names(cpu) should generate lookup query', async () => { + const { ds, fetchMock } = getTestcontext(); + + const results = await ds.metricFindQuery('tag_names(cpu)'); + + expect(fetchMock).toHaveBeenCalledTimes(1); + expect(fetchMock.mock.calls[0][0].url).toBe('/api/search/lookup'); + expect(fetchMock.mock.calls[0][0].params?.m).toBe('cpu'); + expect(results).not.toBe(null); + }); + + it('tag_values(cpu, test) should generate lookup query', async () => { + const { ds, fetchMock } = getTestcontext(); + + const results = await ds.metricFindQuery('tag_values(cpu, hostname)'); + + expect(fetchMock).toHaveBeenCalledTimes(1); + expect(fetchMock.mock.calls[0][0].url).toBe('/api/search/lookup'); + expect(fetchMock.mock.calls[0][0].params?.m).toBe('cpu{hostname=*}'); + expect(results).not.toBe(null); + }); + + it('tag_values(cpu, test) should generate lookup query', async () => { + const { ds, fetchMock } = getTestcontext(); + + const results = await ds.metricFindQuery('tag_values(cpu, hostname, env=$env)'); + + expect(fetchMock).toHaveBeenCalledTimes(1); + expect(fetchMock.mock.calls[0][0].url).toBe('/api/search/lookup'); + expect(fetchMock.mock.calls[0][0].params?.m).toBe('cpu{hostname=*,env=$env}'); + expect(results).not.toBe(null); + }); + + it('tag_values(cpu, test) should generate lookup query', async () => { + const { ds, fetchMock } = getTestcontext(); + + const results = await ds.metricFindQuery('tag_values(cpu, hostname, env=$env, region=$region)'); + + expect(fetchMock).toHaveBeenCalledTimes(1); + expect(fetchMock.mock.calls[0][0].url).toBe('/api/search/lookup'); + expect(fetchMock.mock.calls[0][0].params?.m).toBe('cpu{hostname=*,env=$env,region=$region}'); + expect(results).not.toBe(null); + }); + + it('suggest_tagk() should generate api suggest query', async () => { + const { ds, fetchMock } = getTestcontext(); + + const results = await ds.metricFindQuery('suggest_tagk(foo)'); + + expect(fetchMock).toHaveBeenCalledTimes(1); + expect(fetchMock.mock.calls[0][0].url).toBe('/api/suggest'); + expect(fetchMock.mock.calls[0][0].params?.type).toBe('tagk'); + expect(fetchMock.mock.calls[0][0].params?.q).toBe('foo'); + expect(results).not.toBe(null); + }); + + it('suggest_tagv() should generate api suggest query', async () => { + const { ds, fetchMock } = getTestcontext(); + + const results = await ds.metricFindQuery('suggest_tagv(bar)'); + + expect(fetchMock).toHaveBeenCalledTimes(1); + expect(fetchMock.mock.calls[0][0].url).toBe('/api/suggest'); + expect(fetchMock.mock.calls[0][0].params?.type).toBe('tagv'); + expect(fetchMock.mock.calls[0][0].params?.q).toBe('bar'); + expect(results).not.toBe(null); + }); + }); + + describe('When interpolating variables', () => { + it('should return an empty array if no queries are provided', () => { + const { ds } = getTestcontext(); + expect(ds.interpolateVariablesInQueries([], {})).toHaveLength(0); + }); + + it('should replace correct variables', () => { + const { ds, templateSrv } = getTestcontext(); + const variableName = 'someVar'; + const logQuery: OpenTsdbQuery = { + refId: 'someRefId', + metric: `$${variableName}`, + }; + + ds.interpolateVariablesInQueries([logQuery], {}); + + expect(templateSrv.replace).toHaveBeenCalledWith('$someVar', {}); + expect(templateSrv.replace).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/public/app/plugins/datasource/opentsdb/specs/query_ctrl.test.ts b/public/app/plugins/datasource/opentsdb/specs/query_ctrl.test.ts new file mode 100644 index 00000000..e5744707 --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/specs/query_ctrl.test.ts @@ -0,0 +1,93 @@ +import { OpenTsQueryCtrl } from '../query_ctrl'; + +describe('OpenTsQueryCtrl', () => { + const ctx = { + target: { target: '' }, + datasource: { + tsdbVersion: '', + getAggregators: () => Promise.resolve([]), + getFilterTypes: () => Promise.resolve([]), + }, + } as any; + + ctx.panelCtrl = { + panel: { + targets: [ctx.target], + }, + refresh: () => {}, + }; + + OpenTsQueryCtrl.prototype = Object.assign(OpenTsQueryCtrl.prototype, ctx); + + beforeEach(() => { + ctx.ctrl = new OpenTsQueryCtrl({}, {} as any); + }); + + describe('init query_ctrl variables', () => { + it('filter types should be initialized', () => { + expect(ctx.ctrl.filterTypes.length).toBe(7); + }); + + it('aggregators should be initialized', () => { + expect(ctx.ctrl.aggregators.length).toBe(8); + }); + + it('fill policy options should be initialized', () => { + expect(ctx.ctrl.fillPolicies.length).toBe(4); + }); + }); + + describe('when adding filters and tags', () => { + it('addTagMode should be false when closed', () => { + ctx.ctrl.addTagMode = true; + ctx.ctrl.closeAddTagMode(); + expect(ctx.ctrl.addTagMode).toBe(false); + }); + + it('addFilterMode should be false when closed', () => { + ctx.ctrl.addFilterMode = true; + ctx.ctrl.closeAddFilterMode(); + expect(ctx.ctrl.addFilterMode).toBe(false); + }); + + it('removing a tag from the tags list', () => { + ctx.ctrl.target.tags = { tagk: 'tag_key', tagk2: 'tag_value2' }; + ctx.ctrl.removeTag('tagk'); + expect(Object.keys(ctx.ctrl.target.tags).length).toBe(1); + }); + + it('removing a filter from the filters list', () => { + ctx.ctrl.target.filters = [ + { + tagk: 'tag_key', + filter: 'tag_value2', + type: 'wildcard', + groupBy: true, + }, + ]; + ctx.ctrl.removeFilter(0); + expect(ctx.ctrl.target.filters.length).toBe(0); + }); + + it('adding a filter when tags exist should generate error', () => { + ctx.ctrl.target.tags = { tagk: 'tag_key', tagk2: 'tag_value2' }; + ctx.ctrl.addFilter(); + expect(ctx.ctrl.errors.filters).toBe( + 'Please remove tags to use filters, tags and filters are mutually exclusive.' + ); + }); + + it('adding a tag when filters exist should generate error', () => { + ctx.ctrl.target.filters = [ + { + tagk: 'tag_key', + filter: 'tag_value2', + type: 'wildcard', + groupBy: true, + }, + ]; + ctx.ctrl.addTag(); + expect(ctx.ctrl.errors.tags).toBe('Please remove filters to use tags, tags and filters are mutually exclusive.'); + }); + }); +}); diff --git a/public/app/plugins/datasource/opentsdb/types.ts b/public/app/plugins/datasource/opentsdb/types.ts new file mode 100644 index 00000000..4a5cf58e --- /dev/null +++ b/public/app/plugins/datasource/opentsdb/types.ts @@ -0,0 +1,11 @@ +import { DataQuery, DataSourceJsonData } from '@grafana/data'; + +export interface OpenTsdbQuery extends DataQuery { + metric?: any; +} + +export interface OpenTsdbOptions extends DataSourceJsonData { + tsdbVersion: number; + tsdbResolution: number; + lookupLimit: number; +} diff --git a/public/app/plugins/datasource/postgres/README.md b/public/app/plugins/datasource/postgres/README.md new file mode 100644 index 00000000..38a7a112 --- /dev/null +++ b/public/app/plugins/datasource/postgres/README.md @@ -0,0 +1,12 @@ +# Grafana PostgreSQL Data Source - Native Plugin + +Grafana ships with a built-in PostgreSQL data source plugin that allows you to query and visualize data from a PostgreSQL compatible database. + +## Adding the data source + +1. Open the side menu by clicking the Grafana icon in the top header. +2. In the side menu under the Dashboards link you should find a link named Data Sources. +3. Click the + Add data source button in the top header. +4. Select PostgreSQL from the Type dropdown. + +[http://docs.grafana.org/features/datasources/postgres/](http://docs.grafana.org/features/datasources/postgres/) diff --git a/public/app/plugins/datasource/postgres/config_ctrl.ts b/public/app/plugins/datasource/postgres/config_ctrl.ts new file mode 100644 index 00000000..f13a0ab0 --- /dev/null +++ b/public/app/plugins/datasource/postgres/config_ctrl.ts @@ -0,0 +1,92 @@ +import { find } from 'lodash'; +import { + createChangeHandler, + createResetHandler, + PasswordFieldEnum, +} from '../../../features/datasources/utils/passwordHandlers'; +import DatasourceSrv from 'app/features/plugins/datasource_srv'; + +export class PostgresConfigCtrl { + static templateUrl = 'partials/config.html'; + + // Set through angular bindings + declare current: any; + + datasourceSrv: any; + showTimescaleDBHelp: boolean; + onPasswordReset: ReturnType; + onPasswordChange: ReturnType; + + /** @ngInject */ + constructor($scope: any, datasourceSrv: DatasourceSrv) { + this.current = $scope.ctrl.current; + this.datasourceSrv = datasourceSrv; + this.current.jsonData.sslmode = this.current.jsonData.sslmode || 'verify-full'; + this.current.jsonData.tlsConfigurationMethod = this.current.jsonData.tlsConfigurationMethod || 'file-path'; + this.current.jsonData.postgresVersion = this.current.jsonData.postgresVersion || 903; + this.showTimescaleDBHelp = false; + this.autoDetectFeatures(); + this.onPasswordReset = createResetHandler(this, PasswordFieldEnum.Password); + this.onPasswordChange = createChangeHandler(this, PasswordFieldEnum.Password); + this.tlsModeMapping(); + } + + autoDetectFeatures() { + if (!this.current.id) { + return; + } + + this.datasourceSrv.loadDatasource(this.current.name).then((ds: any) => { + return ds.getVersion().then((version: any) => { + version = Number(version[0].text); + + // timescaledb is only available for 9.6+ + if (version >= 906) { + ds.getTimescaleDBVersion().then((version: any) => { + if (version.length === 1) { + this.current.jsonData.timescaledb = true; + } + }); + } + + const major = Math.trunc(version / 100); + const minor = version % 100; + let name = String(major); + if (version < 1000) { + name = String(major) + '.' + String(minor); + } + if (!find(this.postgresVersions, (p: any) => p.value === version)) { + this.postgresVersions.push({ name: name, value: version }); + } + this.current.jsonData.postgresVersion = version; + }); + }); + } + + toggleTimescaleDBHelp() { + this.showTimescaleDBHelp = !this.showTimescaleDBHelp; + } + + tlsModeMapping() { + if (this.current.jsonData.sslmode === 'disable') { + this.current.jsonData.tlsAuth = false; + this.current.jsonData.tlsAuthWithCACert = false; + this.current.jsonData.tlsSkipVerify = true; + } else { + this.current.jsonData.tlsAuth = true; + this.current.jsonData.tlsAuthWithCACert = true; + this.current.jsonData.tlsSkipVerify = false; + } + } + + // the value portion is derived from postgres server_version_num/100 + postgresVersions = [ + { name: '9.3', value: 903 }, + { name: '9.4', value: 904 }, + { name: '9.5', value: 905 }, + { name: '9.6', value: 906 }, + { name: '10', value: 1000 }, + { name: '11', value: 1100 }, + { name: '12+', value: 1200 }, + ]; +} diff --git a/public/app/plugins/datasource/postgres/datasource.ts b/public/app/plugins/datasource/postgres/datasource.ts new file mode 100644 index 00000000..04ad4c22 --- /dev/null +++ b/public/app/plugins/datasource/postgres/datasource.ts @@ -0,0 +1,202 @@ +import { map as _map } from 'lodash'; +import { lastValueFrom, of } from 'rxjs'; +import { map, catchError } from 'rxjs/operators'; +import { BackendDataSourceResponse, DataSourceWithBackend, FetchResponse, getBackendSrv } from '@grafana/runtime'; +import { AnnotationEvent, DataSourceInstanceSettings, MetricFindValue, ScopedVars } from '@grafana/data'; + +import ResponseParser from './response_parser'; +import PostgresQueryModel from 'app/plugins/datasource/postgres/postgres_query_model'; +import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv'; +import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'; +//Types +import { PostgresOptions, PostgresQuery, PostgresQueryForInterpolation } from './types'; +import { getSearchFilterScopedVar } from '../../../features/variables/utils'; +import { toTestingStatus } from '@grafana/runtime/src/utils/queryResponse'; + +export class PostgresDatasource extends DataSourceWithBackend { + id: any; + name: any; + jsonData: any; + responseParser: ResponseParser; + queryModel: PostgresQueryModel; + interval: string; + + constructor( + instanceSettings: DataSourceInstanceSettings, + private readonly templateSrv: TemplateSrv = getTemplateSrv(), + private readonly timeSrv: TimeSrv = getTimeSrv() + ) { + super(instanceSettings); + this.name = instanceSettings.name; + this.id = instanceSettings.id; + this.jsonData = instanceSettings.jsonData; + this.responseParser = new ResponseParser(); + this.queryModel = new PostgresQueryModel({}); + const settingsData = instanceSettings.jsonData || ({} as PostgresOptions); + this.interval = settingsData.timeInterval || '1m'; + } + + interpolateVariable = (value: string | string[], variable: { multi: any; includeAll: any }) => { + if (typeof value === 'string') { + if (variable.multi || variable.includeAll) { + return this.queryModel.quoteLiteral(value); + } else { + return value; + } + } + + if (typeof value === 'number') { + return value; + } + + const quotedValues = _map(value, (v) => { + return this.queryModel.quoteLiteral(v); + }); + return quotedValues.join(','); + }; + + interpolateVariablesInQueries( + queries: PostgresQueryForInterpolation[], + scopedVars: ScopedVars + ): PostgresQueryForInterpolation[] { + let expandedQueries = queries; + if (queries && queries.length > 0) { + expandedQueries = queries.map((query) => { + const expandedQuery = { + ...query, + datasource: this.getRef(), + rawSql: this.templateSrv.replace(query.rawSql, scopedVars, this.interpolateVariable), + rawQuery: true, + }; + return expandedQuery; + }); + } + return expandedQueries; + } + + filterQuery(query: PostgresQuery): boolean { + return !query.hide; + } + + applyTemplateVariables(target: PostgresQuery, scopedVars: ScopedVars): Record { + const queryModel = new PostgresQueryModel(target, this.templateSrv, scopedVars); + return { + refId: target.refId, + datasource: this.getRef(), + rawSql: queryModel.render(this.interpolateVariable as any), + format: target.format, + }; + } + + async annotationQuery(options: any): Promise { + if (!options.annotation.rawQuery) { + return Promise.reject({ + message: 'Query missing in annotation definition', + }); + } + + const query = { + refId: options.annotation.name, + datasource: this.getRef(), + rawSql: this.templateSrv.replace(options.annotation.rawQuery, options.scopedVars, this.interpolateVariable), + format: 'table', + }; + + return lastValueFrom( + getBackendSrv() + .fetch({ + url: '/api/ds/query', + method: 'POST', + data: { + from: options.range.from.valueOf().toString(), + to: options.range.to.valueOf().toString(), + queries: [query], + }, + requestId: options.annotation.name, + }) + .pipe( + map( + async (res: FetchResponse) => + await this.responseParser.transformAnnotationResponse(options, res.data) + ) + ) + ); + } + + metricFindQuery(query: string, optionalOptions: any): Promise { + let refId = 'tempvar'; + if (optionalOptions && optionalOptions.variable && optionalOptions.variable.name) { + refId = optionalOptions.variable.name; + } + + const rawSql = this.templateSrv.replace( + query, + getSearchFilterScopedVar({ query, wildcardChar: '%', options: optionalOptions }), + this.interpolateVariable + ); + + const interpolatedQuery = { + refId: refId, + datasource: this.getRef(), + rawSql, + format: 'table', + }; + + const range = this.timeSrv.timeRange(); + + return lastValueFrom( + getBackendSrv() + .fetch({ + url: '/api/ds/query', + method: 'POST', + data: { + from: range.from.valueOf().toString(), + to: range.to.valueOf().toString(), + queries: [interpolatedQuery], + }, + requestId: refId, + }) + .pipe( + map((rsp) => { + return this.responseParser.transformMetricFindResponse(rsp); + }), + catchError((err) => { + return of([]); + }) + ) + ); + } + + getVersion(): Promise { + return this.metricFindQuery("SELECT current_setting('server_version_num')::int/100", {}); + } + + getTimescaleDBVersion(): Promise { + return this.metricFindQuery("SELECT extversion FROM pg_extension WHERE extname = 'timescaledb'", {}); + } + + testDatasource(): Promise { + return this.metricFindQuery('SELECT 1', {}) + .then(() => { + return { status: 'success', message: 'Database Connection OK' }; + }) + .catch((err: any) => { + return toTestingStatus(err); + }); + } + + targetContainsTemplate(target: any) { + let rawSql = ''; + + if (target.rawQuery) { + rawSql = target.rawSql; + } else { + const query = new PostgresQueryModel(target); + rawSql = query.buildQuery(); + } + + rawSql = rawSql.replace('$__', ''); + + return this.templateSrv.variableExists(rawSql); + } +} diff --git a/public/app/plugins/datasource/postgres/img/postgresql_logo.svg b/public/app/plugins/datasource/postgres/img/postgresql_logo.svg new file mode 100644 index 00000000..e79f8bfc --- /dev/null +++ b/public/app/plugins/datasource/postgres/img/postgresql_logo.svg @@ -0,0 +1,22 @@ + + + + diff --git a/public/app/plugins/datasource/postgres/meta_query.ts b/public/app/plugins/datasource/postgres/meta_query.ts new file mode 100644 index 00000000..5ba0154e --- /dev/null +++ b/public/app/plugins/datasource/postgres/meta_query.ts @@ -0,0 +1,168 @@ +import QueryModel from './postgres_query_model'; + +export class PostgresMetaQuery { + constructor(private target: { table: string; timeColumn: string }, private queryModel: QueryModel) {} + + getOperators(datatype: string) { + switch (datatype) { + case 'float4': + case 'float8': { + return ['=', '!=', '<', '<=', '>', '>=']; + } + case 'text': + case 'varchar': + case 'char': { + return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE', '~', '~*', '!~', '!~*']; + } + default: { + return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN']; + } + } + } + + // quote identifier as literal to use in metadata queries + quoteIdentAsLiteral(value: string) { + return this.queryModel.quoteLiteral(this.queryModel.unquoteIdentifier(value)); + } + + findMetricTable() { + // query that returns first table found that has a timestamp(tz) column and a float column + let query = ` +SELECT + quote_ident(table_name) as table_name, + ( SELECT + quote_ident(column_name) as column_name + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name IN ('timestamptz','timestamp') + ORDER BY ordinal_position LIMIT 1 + ) AS time_column, + ( SELECT + quote_ident(column_name) AS column_name + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name='float8' + ORDER BY ordinal_position LIMIT 1 + ) AS value_column +FROM information_schema.tables t +WHERE `; + query += this.buildSchemaConstraint(); + query += ` AND + EXISTS + ( SELECT 1 + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name IN ('timestamptz','timestamp') + ) AND + EXISTS + ( SELECT 1 + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name='float8' + ) +LIMIT 1 +;`; + return query; + } + + buildSchemaConstraint() { + const query = ` +table_schema IN ( + SELECT + CASE WHEN trim(s[i]) = '"$user"' THEN user ELSE trim(s[i]) END + FROM + generate_series( + array_lower(string_to_array(current_setting('search_path'),','),1), + array_upper(string_to_array(current_setting('search_path'),','),1) + ) as i, + string_to_array(current_setting('search_path'),',') s +)`; + return query; + } + + buildTableConstraint(table: string) { + let query = ''; + + // check for schema qualified table + if (table.includes('.')) { + const parts = table.split('.'); + query = 'table_schema = ' + this.quoteIdentAsLiteral(parts[0]); + query += ' AND table_name = ' + this.quoteIdentAsLiteral(parts[1]); + return query; + } else { + query = this.buildSchemaConstraint(); + query += ' AND table_name = ' + this.quoteIdentAsLiteral(table); + + return query; + } + } + + buildTableQuery() { + let query = 'SELECT quote_ident(table_name) FROM information_schema.tables WHERE '; + query += this.buildSchemaConstraint(); + query += ' ORDER BY table_name'; + return query; + } + + buildColumnQuery(type?: string) { + let query = 'SELECT quote_ident(column_name) FROM information_schema.columns WHERE '; + query += this.buildTableConstraint(this.target.table); + + switch (type) { + case 'time': { + query += + " AND data_type IN ('timestamp without time zone','timestamp with time zone','bigint','integer','double precision','real')"; + break; + } + case 'metric': { + query += " AND data_type IN ('text','character','character varying')"; + break; + } + case 'value': { + query += " AND data_type IN ('bigint','integer','double precision','real')"; + query += ' AND column_name <> ' + this.quoteIdentAsLiteral(this.target.timeColumn); + break; + } + case 'group': { + query += " AND data_type IN ('text','character','character varying','uuid')"; + break; + } + } + + query += ' ORDER BY column_name'; + + return query; + } + + buildValueQuery(column: string) { + let query = 'SELECT DISTINCT quote_literal(' + column + ')'; + query += ' FROM ' + this.target.table; + query += ' WHERE $__timeFilter(' + this.target.timeColumn + ')'; + query += ' AND ' + column + ' IS NOT NULL'; + query += ' ORDER BY 1 LIMIT 100'; + return query; + } + + buildDatatypeQuery(column: string) { + let query = 'SELECT udt_name FROM information_schema.columns WHERE '; + query += this.buildTableConstraint(this.target.table); + query += ' AND column_name = ' + this.quoteIdentAsLiteral(column); + return query; + } + + buildAggregateQuery() { + let query = 'SELECT DISTINCT proname FROM pg_aggregate '; + query += 'INNER JOIN pg_proc ON pg_aggregate.aggfnoid = pg_proc.oid '; + query += 'INNER JOIN pg_type ON pg_type.oid=pg_proc.prorettype '; + query += "WHERE pronargs=1 AND typname IN ('float8') AND aggkind='n' ORDER BY 1"; + return query; + } +} diff --git a/public/app/plugins/datasource/postgres/mode-sql.js b/public/app/plugins/datasource/postgres/mode-sql.js new file mode 100644 index 00000000..2a6d8973 --- /dev/null +++ b/public/app/plugins/datasource/postgres/mode-sql.js @@ -0,0 +1,114 @@ +ace.define( + 'ace/mode/sql_highlight_rules', + ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'], + function (require, exports, module) { + 'use strict'; + + var oop = require('../lib/oop'); + var TextHighlightRules = require('./text_highlight_rules').TextHighlightRules; + + var SqlHighlightRules = function () { + var keywords = + 'select|insert|update|delete|from|where|and|or|group|by|order|limit|offset|having|as|case|' + + 'when|else|end|type|left|right|join|on|outer|desc|asc|union|create|table|primary|key|if|' + + 'foreign|not|references|default|null|inner|cross|natural|database|drop|grant'; + + var builtinConstants = 'true|false'; + + var builtinFunctions = + 'avg|count|first|last|max|min|sum|upper|lower|substring|char_length|round|rank|now|' + 'coalesce'; + + var dataTypes = + 'int|int2|int4|int8|numeric|decimal|date|varchar|char|bigint|float|bool|bytea|text|timestamp|' + + 'time|money|real|integer'; + + var keywordMapper = this.createKeywordMapper( + { + 'support.function': builtinFunctions, + keyword: keywords, + 'constant.language': builtinConstants, + 'storage.type': dataTypes, + }, + 'identifier', + true + ); + + this.$rules = { + start: [ + { + token: 'comment', + regex: '--.*$', + }, + { + token: 'comment', + start: '/\\*', + end: '\\*/', + }, + { + token: 'string', // " string + regex: '".*?"', + }, + { + token: 'string', // ' string + regex: "'.*?'", + }, + { + token: 'constant.numeric', // float + regex: '[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b', + }, + { + token: keywordMapper, + regex: '[a-zA-Z_$][a-zA-Z0-9_$]*\\b', + }, + { + token: 'keyword.operator', + regex: '\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|=', + }, + { + token: 'paren.lparen', + regex: '[\$]', + }, + { + token: 'paren.rparen', + regex: '[\$]', + }, + { + token: 'text', + regex: '\\s+', + }, + ], + }; + this.normalizeRules(); + }; + + oop.inherits(SqlHighlightRules, TextHighlightRules); + + exports.SqlHighlightRules = SqlHighlightRules; + } +); + +ace.define( + 'ace/mode/sql', + ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/sql_highlight_rules'], + function (require, exports, module) { + 'use strict'; + + var oop = require('../lib/oop'); + var TextMode = require('./text').Mode; + var SqlHighlightRules = require('./sql_highlight_rules').SqlHighlightRules; + + var Mode = function () { + this.HighlightRules = SqlHighlightRules; + this.$behaviour = this.$defaultBehaviour; + }; + oop.inherits(Mode, TextMode); + + (function () { + this.lineCommentStart = '--'; + + this.$id = 'ace/mode/sql'; + }.call(Mode.prototype)); + + exports.Mode = Mode; + } +); diff --git a/public/app/plugins/datasource/postgres/module.ts b/public/app/plugins/datasource/postgres/module.ts new file mode 100644 index 00000000..52ddcfb4 --- /dev/null +++ b/public/app/plugins/datasource/postgres/module.ts @@ -0,0 +1,32 @@ +import { PostgresDatasource } from './datasource'; +import { PostgresQueryCtrl } from './query_ctrl'; +import { PostgresConfigCtrl } from './config_ctrl'; +import { PostgresQuery } from './types'; +import { DataSourcePlugin } from '@grafana/data'; + +const defaultQuery = `SELECT + extract(epoch from time_column) AS time, + text_column as text, + tags_column as tags +FROM + metric_table +WHERE + $__timeFilter(time_column) +`; + +class PostgresAnnotationsQueryCtrl { + static templateUrl = 'partials/annotations.editor.html'; + + declare annotation: any; + + /** @ngInject */ + constructor($scope: any) { + this.annotation = $scope.ctrl.annotation; + this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery; + } +} + +export const plugin = new DataSourcePlugin(PostgresDatasource) + .setQueryCtrl(PostgresQueryCtrl) + .setConfigCtrl(PostgresConfigCtrl) + .setAnnotationQueryCtrl(PostgresAnnotationsQueryCtrl); diff --git a/public/app/plugins/datasource/postgres/partials/annotations.editor.html b/public/app/plugins/datasource/postgres/partials/annotations.editor.html new file mode 100644 index 00000000..bc2a209a --- /dev/null +++ b/public/app/plugins/datasource/postgres/partials/annotations.editor.html @@ -0,0 +1,56 @@ +

+ +

+ + Show Help + + + +

+ +

Annotation Query Format
+An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the time column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
+
+- column with alias: time for the annotation event time. Use epoch time or any native date data type.
+- column with alias: timeend for the annotation event time-end. Use epoch time or any native date data type.
+- column with alias: text for the annotation text
+- column with alias: tags for annotation tags. This is a comma separated string of tags e.g. 'tag1,tag2'
+
+
+Macros:
+- $__time(column) -> column as "time"
+- $__timeEpoch -> extract(epoch from column) as "time"
+- $__timeFilter(column) -> column BETWEEN '2017-04-21T05:01:17Z' AND '2017-04-21T05:01:17Z'
+- $__unixEpochFilter(column) ->  column >= 1492750877 AND column <= 1492750877
+- $__unixEpochNanoFilter(column) ->  column >= 1494410783152415214 AND column <= 1494497183142514872
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() ->  '2017-04-21T05:01:17Z'
+- $__timeTo() ->  '2017-04-21T05:01:17Z'
+- $__unixEpochFrom() ->  1492750877
+- $__unixEpochTo() ->  1492750877
+- $__unixEpochNanoFrom() ->  1494410783152415214
+- $__unixEpochNanoTo() ->  1494497183142514872
+

diff --git a/public/app/plugins/datasource/postgres/partials/config.html b/public/app/plugins/datasource/postgres/partials/config.html new file mode 100644 index 00000000..9bff000e --- /dev/null +++ b/public/app/plugins/datasource/postgres/partials/config.html @@ -0,0 +1,195 @@ + +

PostgreSQL Connection

+ +

+ Host + +

+ +

+ Database + +

+ +

+ User + +

+ +

+ TLS/SSL Mode +

+ + + This option determines whether or with what priority a secure TLS/SSL TCP/IP connection will be negotiated with the server. + +

+ +

+ TLS/SSL Method +

+ + + This option determines how TLS/SSL certifications are configured. Selecting File system path will allow + you to configure certificates by specifying paths to existing certificates on the local file system where + Grafana is running. Be sure that the file is readable by the user executing the Grafana process.

+ + Selecting Certificate content will allow you to configure certificates by specifying its content. + The content will be stored encrypted in Grafana's database. When connecting to the database the certificates + will be written as files to Grafana's configured data path on the local file system. + +

+ +

TLS/SSL Auth Details

+ TLS/SSL Root Certificate + + + If the selected TLS/SSL mode requires a server root certificate, provide the path to the file here. + +

+ TLS/SSL Client Certificate + + + To authenticate with an TLS/SSL client certificate, provide the path to the file here. + Be sure that the file is readable by the user executing the grafana process. + +

+ TLS/SSL Client Key + + + To authenticate with a client TLS/SSL certificate, provide the path to the corresponding key file here. + Be sure that the file is only readable by the user executing the grafana process. + +

+ + + +Connection limits + +

+ Max lifetime + + + The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever. + +

+ +

PostgreSQL details

+ +

+ + Version + + This option controls what functions are available in the PostgreSQL query builder. + + + + + +

+ + + Help + + + +

+ +

+ Min time interval + + + A lower limit for the auto group by time interval. Recommended to be set to write frequency, + for example 1m if your data is written every minute. + +

+ TimescaleDB is a + time-series database built as a PostgreSQL extension. If enabled, Grafana will use time_bucket in + the $__timeGroup macro and display TimescaleDB specific aggregate functions in the query builder. +

+ +

User Permission

+ The database user should only be granted SELECT permissions on the specified database & tables you want to query. + Grafana does not validate that queries are safe so queries can contain any SQL statement. For example, statements + like DELETE FROM user; and DROP TABLE user; would be executed. To protect against this we + Highly recommmend you create a specific PostgreSQL user with restricted permissions. +

diff --git a/public/app/plugins/datasource/postgres/partials/query.editor.html b/public/app/plugins/datasource/postgres/partials/query.editor.html new file mode 100644 index 00000000..13bba6a0 --- /dev/null +++ b/public/app/plugins/datasource/postgres/partials/query.editor.html @@ -0,0 +1,191 @@ + + +

+ + +

+ +

+ FROM + + + Time column + + + + Metric column + Column to be used as metric name for the value column. + + +

+ +

+ + SELECT + +

+ +

+ + +

+ +

+ WHERE +

+ +

+ + +

+ +

+ + GROUP BY + + + + +

+ +

+ Format as +

+ +

+ + Query Builder + Edit SQL + +

+ + Show Help + + + +

+ + Generated SQL + + + +

+ + +

Time series:
+- return column named time (UTC in seconds or timestamp)
+- return column(s) with numeric datatype as values
+Optional:
+  - return column named metric to represent the series name.
+  - If multiple value columns are returned the metric column is used as prefix.
+  - If no column named metric is found the column name of the value column is used as series name
+
+Resultsets of time series queries need to be sorted by time.
+
+Table:
+- return any set of columns
+
+Macros:
+- $__time(column) -> column as "time"
+- $__timeEpoch -> extract(epoch from column) as "time"
+- $__timeFilter(column) -> column BETWEEN '2017-04-21T05:01:17Z' AND '2017-04-21T05:01:17Z'
+- $__unixEpochFilter(column) ->  column >= 1492750877 AND column <= 1492750877
+- $__unixEpochNanoFilter(column) ->  column >= 1494410783152415214 AND column <= 1494497183142514872
+- $__timeGroup(column,'5m'[, fillvalue]) -> (extract(epoch from column)/300)::bigint*300
+     by setting fillvalue grafana will fill in missing values according to the interval
+     fillvalue can be either a literal value, NULL or previous; previous will fill in the previous seen value or NULL if none has been seen yet
+- $__timeGroupAlias(column,'5m') -> (extract(epoch from column)/300)::bigint*300 AS "time"
+- $__unixEpochGroup(column,'5m') -> floor(column/300)*300
+- $__unixEpochGroupAlias(column,'5m') -> floor(column/300)*300 AS "time"
+
+Example of group by and order by with $__timeGroup:
+SELECT
+  $__timeGroup(date_time_col, '1h'),
+  sum(value) as value
+FROM yourtable
+GROUP BY time
+ORDER BY time
+
+Or build your own conditionals using these macros which just return the values:
+- $__timeFrom() ->  '2017-04-21T05:01:17Z'
+- $__timeTo() ->  '2017-04-21T05:01:17Z'
+- $__unixEpochFrom() ->  1492750877
+- $__unixEpochTo() ->  1492750877
+- $__unixEpochNanoFrom() ->  1494410783152415214
+- $__unixEpochNanoTo() ->  1494497183142514872
+

+ + + +

{{ctrl.lastQueryMeta.executedQueryString}}

+ +

{{ctrl.lastQueryError}}

+ + diff --git a/public/app/plugins/datasource/postgres/plugin.json b/public/app/plugins/datasource/postgres/plugin.json new file mode 100644 index 00000000..48b43720 --- /dev/null +++ b/public/app/plugins/datasource/postgres/plugin.json @@ -0,0 +1,27 @@ +{ + "type": "datasource", + "name": "PostgreSQL", + "id": "postgres", + "category": "sql", + + "info": { + "description": "Data source for PostgreSQL and compatible databases", + "author": { + "name": "Grafana Labs", + "url": "https://grafana.com" + }, + "logos": { + "small": "img/postgresql_logo.svg", + "large": "img/postgresql_logo.svg" + } + }, + + "alerting": true, + "annotations": true, + "metrics": true, + "backend": true, + + "queryOptions": { + "minInterval": true + } +} diff --git a/public/app/plugins/datasource/postgres/postgres_query_model.ts b/public/app/plugins/datasource/postgres/postgres_query_model.ts new file mode 100644 index 00000000..0fce8b38 --- /dev/null +++ b/public/app/plugins/datasource/postgres/postgres_query_model.ts @@ -0,0 +1,297 @@ +import { find, map } from 'lodash'; +import { TemplateSrv } from '@grafana/runtime'; +import { ScopedVars } from '@grafana/data'; + +export default class PostgresQueryModel { + target: any; + templateSrv: any; + scopedVars: any; + + /** @ngInject */ + constructor(target: any, templateSrv?: TemplateSrv, scopedVars?: ScopedVars) { + this.target = target; + this.templateSrv = templateSrv; + this.scopedVars = scopedVars; + + target.format = target.format || 'time_series'; + target.timeColumn = target.timeColumn || 'time'; + target.metricColumn = target.metricColumn || 'none'; + + target.group = target.group || []; + target.where = target.where || [{ type: 'macro', name: '$__timeFilter', params: [] }]; + target.select = target.select || [[{ type: 'column', params: ['value'] }]]; + + // handle pre query gui panels gracefully + if (!('rawQuery' in this.target)) { + if ('rawSql' in target) { + // pre query gui panel + target.rawQuery = true; + } else { + // new panel + target.rawQuery = false; + } + } + + // give interpolateQueryStr access to this + this.interpolateQueryStr = this.interpolateQueryStr.bind(this); + } + + // remove identifier quoting from identifier to use in metadata queries + unquoteIdentifier(value: string) { + if (value[0] === '"' && value[value.length - 1] === '"') { + return value.substring(1, value.length - 1).replace(/""/g, '"'); + } else { + return value; + } + } + + quoteIdentifier(value: any) { + return '"' + String(value).replace(/"/g, '""') + '"'; + } + + quoteLiteral(value: any) { + return "'" + String(value).replace(/'/g, "''") + "'"; + } + + escapeLiteral(value: any) { + return String(value).replace(/'/g, "''"); + } + + hasTimeGroup() { + return find(this.target.group, (g: any) => g.type === 'time'); + } + + hasMetricColumn() { + return this.target.metricColumn !== 'none'; + } + + interpolateQueryStr(value: any, variable: { multi: any; includeAll: any }, defaultFormatFn: any) { + // if no multi or include all do not regexEscape + if (!variable.multi && !variable.includeAll) { + return this.escapeLiteral(value); + } + + if (typeof value === 'string') { + return this.quoteLiteral(value); + } + + const escapedValues = map(value, this.quoteLiteral); + return escapedValues.join(','); + } + + render(interpolate?: any) { + const target = this.target; + + // new query with no table set yet + if (!this.target.rawQuery && !('table' in this.target)) { + return ''; + } + + if (!target.rawQuery) { + target.rawSql = this.buildQuery(); + } + + if (interpolate) { + return this.templateSrv.replace(target.rawSql, this.scopedVars, this.interpolateQueryStr); + } else { + return target.rawSql; + } + } + + hasUnixEpochTimecolumn() { + return ['int4', 'int8', 'float4', 'float8', 'numeric'].indexOf(this.target.timeColumnType) > -1; + } + + buildTimeColumn(alias = true) { + const timeGroup = this.hasTimeGroup(); + let query; + let macro = '$__timeGroup'; + + if (timeGroup) { + let args; + if (timeGroup.params.length > 1 && timeGroup.params[1] !== 'none') { + args = timeGroup.params.join(','); + } else { + args = timeGroup.params[0]; + } + if (this.hasUnixEpochTimecolumn()) { + macro = '$__unixEpochGroup'; + } + if (alias) { + macro += 'Alias'; + } + query = macro + '(' + this.target.timeColumn + ',' + args + ')'; + } else { + query = this.target.timeColumn; + if (alias) { + query += ' AS "time"'; + } + } + + return query; + } + + buildMetricColumn() { + if (this.hasMetricColumn()) { + return this.target.metricColumn + ' AS metric'; + } + + return ''; + } + + buildValueColumns() { + let query = ''; + for (const column of this.target.select) { + query += ',\n ' + this.buildValueColumn(column); + } + + return query; + } + + buildValueColumn(column: any) { + let query = ''; + + const columnName: any = find(column, (g: any) => g.type === 'column'); + query = columnName.params[0]; + + const aggregate: any = find(column, (g: any) => g.type === 'aggregate' || g.type === 'percentile'); + const windows: any = find(column, (g: any) => g.type === 'window' || g.type === 'moving_window'); + + if (aggregate) { + const func = aggregate.params[0]; + switch (aggregate.type) { + case 'aggregate': + if (func === 'first' || func === 'last') { + query = func + '(' + query + ',' + this.target.timeColumn + ')'; + } else { + query = func + '(' + query + ')'; + } + break; + case 'percentile': + query = func + '(' + aggregate.params[1] + ') WITHIN GROUP (ORDER BY ' + query + ')'; + break; + } + } + + if (windows) { + const overParts = []; + if (this.hasMetricColumn()) { + overParts.push('PARTITION BY ' + this.target.metricColumn); + } + overParts.push('ORDER BY ' + this.buildTimeColumn(false)); + + const over = overParts.join(' '); + let curr: string; + let prev: string; + switch (windows.type) { + case 'window': + switch (windows.params[0]) { + case 'delta': + curr = query; + prev = 'lag(' + curr + ') OVER (' + over + ')'; + query = curr + ' - ' + prev; + break; + case 'increase': + curr = query; + prev = 'lag(' + curr + ') OVER (' + over + ')'; + query = '(CASE WHEN ' + curr + ' >= ' + prev + ' THEN ' + curr + ' - ' + prev; + query += ' WHEN ' + prev + ' IS NULL THEN NULL ELSE ' + curr + ' END)'; + break; + case 'rate': + let timeColumn = this.target.timeColumn; + if (aggregate) { + timeColumn = 'min(' + timeColumn + ')'; + } + + curr = query; + prev = 'lag(' + curr + ') OVER (' + over + ')'; + query = '(CASE WHEN ' + curr + ' >= ' + prev + ' THEN ' + curr + ' - ' + prev; + query += ' WHEN ' + prev + ' IS NULL THEN NULL ELSE ' + curr + ' END)'; + query += '/extract(epoch from ' + timeColumn + ' - lag(' + timeColumn + ') OVER (' + over + '))'; + break; + default: + query = windows.params[0] + '(' + query + ') OVER (' + over + ')'; + break; + } + break; + case 'moving_window': + query = windows.params[0] + '(' + query + ') OVER (' + over + ' ROWS ' + windows.params[1] + ' PRECEDING)'; + break; + } + } + + const alias: any = find(column, (g: any) => g.type === 'alias'); + if (alias) { + query += ' AS ' + this.quoteIdentifier(alias.params[0]); + } + + return query; + } + + buildWhereClause() { + let query = ''; + const conditions = map(this.target.where, (tag, index) => { + switch (tag.type) { + case 'macro': + return tag.name + '(' + this.target.timeColumn + ')'; + break; + case 'expression': + return tag.params.join(' '); + break; + } + }); + + if (conditions.length > 0) { + query = '\nWHERE\n ' + conditions.join(' AND\n '); + } + + return query; + } + + buildGroupClause() { + let query = ''; + let groupSection = ''; + + for (let i = 0; i < this.target.group.length; i++) { + const part = this.target.group[i]; + if (i > 0) { + groupSection += ', '; + } + if (part.type === 'time') { + groupSection += '1'; + } else { + groupSection += part.params[0]; + } + } + + if (groupSection.length) { + query = '\nGROUP BY ' + groupSection; + if (this.hasMetricColumn()) { + query += ',2'; + } + } + return query; + } + + buildQuery() { + let query = 'SELECT'; + + query += '\n ' + this.buildTimeColumn(); + if (this.hasMetricColumn()) { + query += ',\n ' + this.buildMetricColumn(); + } + query += this.buildValueColumns(); + + query += '\nFROM ' + this.target.table; + + query += this.buildWhereClause(); + query += this.buildGroupClause(); + + query += '\nORDER BY 1'; + if (this.hasMetricColumn()) { + query += ',2'; + } + + return query; + } +} diff --git a/public/app/plugins/datasource/postgres/query_ctrl.ts b/public/app/plugins/datasource/postgres/query_ctrl.ts new file mode 100644 index 00000000..5a1460c5 --- /dev/null +++ b/public/app/plugins/datasource/postgres/query_ctrl.ts @@ -0,0 +1,673 @@ +import { clone, filter, find, findIndex, indexOf, map } from 'lodash'; +import appEvents from 'app/core/app_events'; +import { PostgresMetaQuery } from './meta_query'; +import { QueryCtrl } from 'app/plugins/sdk'; +import { SqlPart } from 'app/angular/components/sql_part/sql_part'; +import PostgresQueryModel from './postgres_query_model'; +import sqlPart from './sql_part'; +import { auto } from 'angular'; +import { PanelEvents, QueryResultMeta } from '@grafana/data'; +import { VariableWithMultiSupport } from 'app/features/variables/types'; +import { TemplateSrv } from '@grafana/runtime'; +import { ShowConfirmModalEvent } from 'app/types/events'; + +const defaultQuery = `SELECT + $__time(time_column), + value1 +FROM + metric_table +WHERE + $__timeFilter(time_column) +`; + +export class PostgresQueryCtrl extends QueryCtrl { + static templateUrl = 'partials/query.editor.html'; + + formats: any[]; + queryModel: PostgresQueryModel; + metaBuilder: PostgresMetaQuery; + lastQueryMeta?: QueryResultMeta; + lastQueryError?: string; + showHelp = false; + tableSegment: any; + whereAdd: any; + timeColumnSegment: any; + metricColumnSegment: any; + selectMenu: any[] = []; + selectParts: SqlPart[][] = [[]]; + groupParts: SqlPart[] = []; + whereParts: SqlPart[] = []; + groupAdd: any; + + /** @ngInject */ + constructor( + $scope: any, + $injector: auto.IInjectorService, + private templateSrv: TemplateSrv, + private uiSegmentSrv: any + ) { + super($scope, $injector); + this.target = this.target; + this.queryModel = new PostgresQueryModel(this.target, templateSrv, this.panel.scopedVars); + this.metaBuilder = new PostgresMetaQuery(this.target, this.queryModel); + this.updateProjection(); + + this.formats = [ + { text: 'Time series', value: 'time_series' }, + { text: 'Table', value: 'table' }, + ]; + + if (!this.target.rawSql) { + // special handling when in table panel + if (this.panelCtrl.panel.type === 'table') { + this.target.format = 'table'; + this.target.rawSql = 'SELECT 1'; + this.target.rawQuery = true; + } else { + this.target.rawSql = defaultQuery; + this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then((result: any) => { + if (result.length > 0) { + this.target.table = result[0].text; + let segment = this.uiSegmentSrv.newSegment(this.target.table); + this.tableSegment.html = segment.html; + this.tableSegment.value = segment.value; + + this.target.timeColumn = result[1].text; + segment = this.uiSegmentSrv.newSegment(this.target.timeColumn); + this.timeColumnSegment.html = segment.html; + this.timeColumnSegment.value = segment.value; + + this.target.timeColumnType = 'timestamp'; + this.target.select = [[{ type: 'column', params: [result[2].text] }]]; + this.updateProjection(); + this.updateRawSqlAndRefresh(); + } + }); + } + } + + if (!this.target.table) { + this.tableSegment = uiSegmentSrv.newSegment({ value: 'select table', fake: true }); + } else { + this.tableSegment = uiSegmentSrv.newSegment(this.target.table); + } + + this.timeColumnSegment = uiSegmentSrv.newSegment(this.target.timeColumn); + this.metricColumnSegment = uiSegmentSrv.newSegment(this.target.metricColumn); + + this.buildSelectMenu(); + this.whereAdd = this.uiSegmentSrv.newPlusButton(); + this.groupAdd = this.uiSegmentSrv.newPlusButton(); + + this.panelCtrl.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this), $scope); + this.panelCtrl.events.on(PanelEvents.dataError, this.onDataError.bind(this), $scope); + } + + updateRawSqlAndRefresh() { + if (!this.target.rawQuery) { + this.target.rawSql = this.queryModel.buildQuery(); + } + + this.panelCtrl.refresh(); + } + + updateProjection() { + this.selectParts = map(this.target.select, (parts: any) => { + return map(parts, sqlPart.create).filter((n) => n); + }); + this.whereParts = map(this.target.where, sqlPart.create).filter((n) => n); + this.groupParts = map(this.target.group, sqlPart.create).filter((n) => n); + } + + updatePersistedParts() { + this.target.select = map(this.selectParts, (selectParts) => { + return map(selectParts, (part: any) => { + return { type: part.def.type, datatype: part.datatype, params: part.params }; + }); + }); + this.target.where = map(this.whereParts, (part: any) => { + return { type: part.def.type, datatype: part.datatype, name: part.name, params: part.params }; + }); + this.target.group = map(this.groupParts, (part: any) => { + return { type: part.def.type, datatype: part.datatype, params: part.params }; + }); + } + + buildSelectMenu() { + this.selectMenu = []; + const aggregates = { + text: 'Aggregate Functions', + value: 'aggregate', + submenu: [ + { text: 'Average', value: 'avg' }, + { text: 'Count', value: 'count' }, + { text: 'Maximum', value: 'max' }, + { text: 'Minimum', value: 'min' }, + { text: 'Sum', value: 'sum' }, + { text: 'Standard deviation', value: 'stddev' }, + { text: 'Variance', value: 'variance' }, + ], + }; + + // first and last aggregate are timescaledb specific + if (this.datasource.jsonData.timescaledb === true) { + aggregates.submenu.push({ text: 'First', value: 'first' }); + aggregates.submenu.push({ text: 'Last', value: 'last' }); + } + + this.selectMenu.push(aggregates); + + // ordered set aggregates require postgres 9.4+ + if (this.datasource.jsonData.postgresVersion >= 904) { + const aggregates2 = { + text: 'Ordered-Set Aggregate Functions', + value: 'percentile', + submenu: [ + { text: 'Percentile (continuous)', value: 'percentile_cont' }, + { text: 'Percentile (discrete)', value: 'percentile_disc' }, + ], + }; + this.selectMenu.push(aggregates2); + } + + const windows = { + text: 'Window Functions', + value: 'window', + submenu: [ + { text: 'Delta', value: 'delta' }, + { text: 'Increase', value: 'increase' }, + { text: 'Rate', value: 'rate' }, + { text: 'Sum', value: 'sum' }, + { text: 'Moving Average', value: 'avg', type: 'moving_window' }, + ], + }; + this.selectMenu.push(windows); + + this.selectMenu.push({ text: 'Alias', value: 'alias' }); + this.selectMenu.push({ text: 'Column', value: 'column' }); + } + + toggleEditorMode() { + if (this.target.rawQuery) { + appEvents.publish( + new ShowConfirmModalEvent({ + title: 'Warning', + text2: 'Switching to query builder may overwrite your raw SQL.', + icon: 'exclamation-triangle', + yesText: 'Switch', + onConfirm: () => { + // This could be called from React, so wrap in $evalAsync. + // Will then either run as part of the current digest cycle or trigger a new one. + this.$scope.$evalAsync(() => { + this.target.rawQuery = !this.target.rawQuery; + }); + }, + }) + ); + } else { + // This could be called from React, so wrap in $evalAsync. + // Will then either run as part of the current digest cycle or trigger a new one. + this.$scope.$evalAsync(() => { + this.target.rawQuery = !this.target.rawQuery; + }); + } + } + + resetPlusButton(button: { html: any; value: any; type: any; fake: any }) { + const plusButton = this.uiSegmentSrv.newPlusButton(); + button.html = plusButton.html; + button.value = plusButton.value; + button.type = plusButton.type; + button.fake = plusButton.fake; + } + + getTableSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildTableQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + + tableChanged() { + this.target.table = this.tableSegment.value; + this.target.where = []; + this.target.group = []; + this.updateProjection(); + + const segment = this.uiSegmentSrv.newSegment('none'); + this.metricColumnSegment.html = segment.html; + this.metricColumnSegment.value = segment.value; + this.target.metricColumn = 'none'; + + const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then((result: any) => { + // check if time column is still valid + if (result.length > 0 && !find(result, (r: any) => r.text === this.target.timeColumn)) { + const segment = this.uiSegmentSrv.newSegment(result[0].text); + this.timeColumnSegment.html = segment.html; + this.timeColumnSegment.value = segment.value; + } + return this.timeColumnChanged(false); + }); + const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then((result: any) => { + if (result.length > 0) { + this.target.select = [[{ type: 'column', params: [result[0].text] }]]; + this.updateProjection(); + } + }); + + Promise.all([task1, task2]).then(() => { + this.updateRawSqlAndRefresh(); + }); + } + + getTimeColumnSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('time')) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + + timeColumnChanged(refresh?: boolean) { + this.target.timeColumn = this.timeColumnSegment.value; + return this.datasource + .metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)) + .then((result: any) => { + if (result.length === 1) { + if (this.target.timeColumnType !== result[0].text) { + this.target.timeColumnType = result[0].text; + } + let partModel; + if (this.queryModel.hasUnixEpochTimecolumn()) { + partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] }); + } else { + partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] }); + } + + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } + } + + this.updatePersistedParts(); + if (refresh !== false) { + this.updateRawSqlAndRefresh(); + } + }); + } + + getMetricColumnSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('metric')) + .then(this.transformToSegments({ addNone: true })) + .catch(this.handleQueryError.bind(this)); + } + + metricColumnChanged() { + this.target.metricColumn = this.metricColumnSegment.value; + this.updateRawSqlAndRefresh(); + } + + onDataReceived(dataList: any) { + this.lastQueryError = undefined; + this.lastQueryMeta = dataList[0]?.meta; + } + + onDataError(err: any) { + if (err.data && err.data.results) { + const queryRes = err.data.results[this.target.refId]; + if (queryRes) { + this.lastQueryError = queryRes.error; + } + } + } + + transformToSegments(config: { addNone?: any; addTemplateVars?: any; templateQuoter?: any }) { + return (results: any) => { + const segments = map(results, (segment) => { + return this.uiSegmentSrv.newSegment({ + value: segment.text, + expandable: segment.expandable, + }); + }); + + if (config.addTemplateVars) { + for (const variable of this.templateSrv.getVariables()) { + let value; + value = '$' + variable.name; + if (config.templateQuoter && ((variable as unknown) as VariableWithMultiSupport).multi === false) { + value = config.templateQuoter(value); + } + + segments.unshift( + this.uiSegmentSrv.newSegment({ + type: 'template', + value: value, + expandable: true, + }) + ); + } + } + + if (config.addNone) { + segments.unshift(this.uiSegmentSrv.newSegment({ type: 'template', value: 'none', expandable: true })); + } + + return segments; + }; + } + + findAggregateIndex(selectParts: any) { + return findIndex(selectParts, (p: any) => p.def.type === 'aggregate' || p.def.type === 'percentile'); + } + + findWindowIndex(selectParts: any) { + return findIndex(selectParts, (p: any) => p.def.type === 'window' || p.def.type === 'moving_window'); + } + + addSelectPart(selectParts: any[], item: { value: any }, subItem: { type: any; value: any }) { + let partType = item.value; + if (subItem && subItem.type) { + partType = subItem.type; + } + let partModel = sqlPart.create({ type: partType }); + if (subItem) { + partModel.params[0] = subItem.value; + } + let addAlias = false; + + switch (partType) { + case 'column': + const parts = map(selectParts, (part: any) => { + return sqlPart.create({ type: part.def.type, params: clone(part.params) }); + }); + this.selectParts.push(parts); + break; + case 'percentile': + case 'aggregate': + // add group by if no group by yet + if (this.target.group.length === 0) { + this.addGroup('time', '$__interval'); + } + const aggIndex = this.findAggregateIndex(selectParts); + if (aggIndex !== -1) { + // replace current aggregation + selectParts[aggIndex] = partModel; + } else { + selectParts.splice(1, 0, partModel); + } + if (!find(selectParts, (p: any) => p.def.type === 'alias')) { + addAlias = true; + } + break; + case 'moving_window': + case 'window': + const windowIndex = this.findWindowIndex(selectParts); + if (windowIndex !== -1) { + // replace current window function + selectParts[windowIndex] = partModel; + } else { + const aggIndex = this.findAggregateIndex(selectParts); + if (aggIndex !== -1) { + selectParts.splice(aggIndex + 1, 0, partModel); + } else { + selectParts.splice(1, 0, partModel); + } + } + if (!find(selectParts, (p: any) => p.def.type === 'alias')) { + addAlias = true; + } + break; + case 'alias': + addAlias = true; + break; + } + + if (addAlias) { + // set initial alias name to column name + partModel = sqlPart.create({ type: 'alias', params: [selectParts[0].params[0].replace(/"/g, '')] }); + if (selectParts[selectParts.length - 1].def.type === 'alias') { + selectParts[selectParts.length - 1] = partModel; + } else { + selectParts.push(partModel); + } + } + + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + } + + removeSelectPart(selectParts: any, part: { def: { type: string } }) { + if (part.def.type === 'column') { + // remove all parts of column unless its last column + if (this.selectParts.length > 1) { + const modelsIndex = indexOf(this.selectParts, selectParts); + this.selectParts.splice(modelsIndex, 1); + } + } else { + const partIndex = indexOf(selectParts, part); + selectParts.splice(partIndex, 1); + } + + this.updatePersistedParts(); + } + + handleSelectPartEvent(selectParts: any, part: { def: any }, evt: { name: any }) { + switch (evt.name) { + case 'get-param-options': { + switch (part.def.type) { + case 'aggregate': + return this.datasource + .metricFindQuery(this.metaBuilder.buildAggregateQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + case 'column': + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('value')) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + break; + } + case 'action': { + this.removeSelectPart(selectParts, part); + this.updateRawSqlAndRefresh(); + break; + } + case 'get-part-actions': { + return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + handleGroupPartEvent(part: any, index: any, evt: { name: any }) { + switch (evt.name) { + case 'get-param-options': { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + break; + } + case 'action': { + this.removeGroup(part, index); + this.updateRawSqlAndRefresh(); + break; + } + case 'get-part-actions': { + return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + addGroup(partType: string, value: string) { + let params = [value]; + if (partType === 'time') { + params = ['$__interval', 'none']; + } + const partModel = sqlPart.create({ type: partType, params: params }); + + if (partType === 'time') { + // put timeGroup at start + this.groupParts.splice(0, 0, partModel); + } else { + this.groupParts.push(partModel); + } + + // add aggregates when adding group by + for (const selectParts of this.selectParts) { + if (!selectParts.some((part) => part.def.type === 'aggregate')) { + const aggregate = sqlPart.create({ type: 'aggregate', params: ['avg'] }); + selectParts.splice(1, 0, aggregate); + if (!selectParts.some((part) => part.def.type === 'alias')) { + const alias = sqlPart.create({ type: 'alias', params: [selectParts[0].part.params[0]] }); + selectParts.push(alias); + } + } + } + + this.updatePersistedParts(); + } + + removeGroup(part: { def: { type: string } }, index: number) { + if (part.def.type === 'time') { + // remove aggregations + this.selectParts = map(this.selectParts, (s: any) => { + return filter(s, (part: any) => { + if (part.def.type === 'aggregate' || part.def.type === 'percentile') { + return false; + } + return true; + }); + }); + } + + this.groupParts.splice(index, 1); + this.updatePersistedParts(); + } + + handleWherePartEvent(whereParts: any, part: any, evt: any, index: any) { + switch (evt.name) { + case 'get-param-options': { + switch (evt.param.name) { + case 'left': + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + case 'right': + if (['int4', 'int8', 'float4', 'float8', 'timestamp', 'timestamptz'].indexOf(part.datatype) > -1) { + // don't do value lookups for numerical fields + return Promise.resolve([]); + } else { + return this.datasource + .metricFindQuery(this.metaBuilder.buildValueQuery(part.params[0])) + .then( + this.transformToSegments({ + addTemplateVars: true, + templateQuoter: (v: string) => { + return this.queryModel.quoteLiteral(v); + }, + }) + ) + .catch(this.handleQueryError.bind(this)); + } + case 'op': + return Promise.resolve(this.uiSegmentSrv.newOperators(this.metaBuilder.getOperators(part.datatype))); + default: + return Promise.resolve([]); + } + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(part.params[0])).then((d: any) => { + if (d.length === 1) { + part.datatype = d[0].text; + } + }); + this.updateRawSqlAndRefresh(); + break; + } + case 'action': { + // remove element + whereParts.splice(index, 1); + this.updatePersistedParts(); + this.updateRawSqlAndRefresh(); + break; + } + case 'get-part-actions': { + return Promise.resolve([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + getWhereOptions() { + const options = []; + if (this.queryModel.hasUnixEpochTimecolumn()) { + options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__unixEpochFilter' })); + } else { + options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__timeFilter' })); + } + options.push(this.uiSegmentSrv.newSegment({ type: 'expression', value: 'Expression' })); + return Promise.resolve(options); + } + + addWhereAction(part: any, index: any) { + switch (this.whereAdd.type) { + case 'macro': { + const partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] }); + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } + break; + } + default: { + this.whereParts.push(sqlPart.create({ type: 'expression', params: ['value', '=', 'value'] })); + } + } + + this.updatePersistedParts(); + this.resetPlusButton(this.whereAdd); + this.updateRawSqlAndRefresh(); + } + + getGroupOptions() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('group')) + .then((tags: any) => { + const options = []; + if (!this.queryModel.hasTimeGroup()) { + options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' })); + } + for (const tag of tags) { + options.push(this.uiSegmentSrv.newSegment({ type: 'column', value: tag.text })); + } + return options; + }) + .catch(this.handleQueryError.bind(this)); + } + + addGroupAction() { + this.addGroup(this.groupAdd.type, this.groupAdd.value); + this.resetPlusButton(this.groupAdd); + this.updateRawSqlAndRefresh(); + } + + handleQueryError(err: any): any[] { + this.error = err.message || 'Failed to issue metric query'; + return []; + } +} diff --git a/public/app/plugins/datasource/postgres/response_parser.ts b/public/app/plugins/datasource/postgres/response_parser.ts new file mode 100644 index 00000000..83ecc223 --- /dev/null +++ b/public/app/plugins/datasource/postgres/response_parser.ts @@ -0,0 +1,74 @@ +import { AnnotationEvent, DataFrame, MetricFindValue } from '@grafana/data'; +import { BackendDataSourceResponse, FetchResponse, toDataQueryResponse } from '@grafana/runtime'; + +export default class ResponseParser { + transformMetricFindResponse(raw: FetchResponse): MetricFindValue[] { + const frames = toDataQueryResponse(raw).data as DataFrame[]; + + if (!frames || !frames.length) { + return []; + } + + const frame = frames[0]; + + const values: MetricFindValue[] = []; + const textField = frame.fields.find((f) => f.name === '__text'); + const valueField = frame.fields.find((f) => f.name === '__value'); + + if (textField && valueField) { + for (let i = 0; i < textField.values.length; i++) { + values.push({ text: '' + textField.values.get(i), value: '' + valueField.values.get(i) }); + } + } else { + values.push( + ...frame.fields + .flatMap((f) => f.values.toArray()) + .map((v) => ({ + text: v, + })) + ); + } + + return Array.from(new Set(values.map((v) => v.text))).map((text) => ({ + text, + value: values.find((v) => v.text === text)?.value, + })); + } + + async transformAnnotationResponse(options: any, data: BackendDataSourceResponse): Promise { + const frames = toDataQueryResponse({ data: data }).data as DataFrame[]; + if (!frames || !frames.length) { + return []; + } + const frame = frames[0]; + const timeField = frame.fields.find((f) => f.name === 'time'); + + if (!timeField) { + throw new Error('Missing mandatory time column (with time column alias) in annotation query'); + } + + const timeEndField = frame.fields.find((f) => f.name === 'timeend'); + const textField = frame.fields.find((f) => f.name === 'text'); + const tagsField = frame.fields.find((f) => f.name === 'tags'); + + const list: AnnotationEvent[] = []; + for (let i = 0; i < frame.length; i++) { + const timeEnd = timeEndField && timeEndField.values.get(i) ? Math.floor(timeEndField.values.get(i)) : undefined; + list.push({ + annotation: options.annotation, + time: Math.floor(timeField.values.get(i)), + timeEnd, + text: textField && textField.values.get(i) ? textField.values.get(i) : '', + tags: + tagsField && tagsField.values.get(i) + ? tagsField.values + .get(i) + .trim() + .split(/\s*,\s*/) + : [], + }); + } + + return list; + } +} diff --git a/public/app/plugins/datasource/postgres/specs/datasource.test.ts b/public/app/plugins/datasource/postgres/specs/datasource.test.ts new file mode 100644 index 00000000..f1eba1b3 --- /dev/null +++ b/public/app/plugins/datasource/postgres/specs/datasource.test.ts @@ -0,0 +1,671 @@ +import { of } from 'rxjs'; +import { TestScheduler } from 'rxjs/testing'; +import { FetchResponse } from '@grafana/runtime'; +import { + dataFrameToJSON, + DataQueryRequest, + DataSourceInstanceSettings, + dateTime, + MutableDataFrame, + toUtc, +} from '@grafana/data'; + +import { PostgresDatasource } from '../datasource'; +import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__ +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { initialCustomVariableModelState } from '../../../../features/variables/custom/reducer'; +import { TimeSrv } from '../../../../features/dashboard/services/TimeSrv'; +import { PostgresOptions, PostgresQuery } from '../types'; + +jest.mock('@grafana/runtime', () => ({ + ...((jest.requireActual('@grafana/runtime') as unknown) as object), + getBackendSrv: () => backendSrv, +})); + +jest.mock('@grafana/runtime/src/services', () => ({ + ...((jest.requireActual('@grafana/runtime/src/services') as unknown) as object), + getBackendSrv: () => backendSrv, + getDataSourceSrv: () => { + return { + getInstanceSettings: () => ({ id: 8674 }), + }; + }, +})); + +describe('PostgreSQLDatasource', () => { + const fetchMock = jest.spyOn(backendSrv, 'fetch'); + const setupTestContext = (data: any) => { + jest.clearAllMocks(); + fetchMock.mockImplementation(() => of(createFetchResponse(data))); + const instanceSettings = ({ + jsonData: { + defaultProject: 'testproject', + }, + } as unknown) as DataSourceInstanceSettings; + const templateSrv: TemplateSrv = new TemplateSrv(); + const raw = { + from: toUtc('2018-04-25 10:00'), + to: toUtc('2018-04-25 11:00'), + }; + const timeSrvMock = ({ + timeRange: () => ({ + from: raw.from, + to: raw.to, + raw: raw, + }), + } as unknown) as TimeSrv; + const variable = { ...initialCustomVariableModelState }; + const ds = new PostgresDatasource(instanceSettings, templateSrv, timeSrvMock); + + return { ds, templateSrv, timeSrvMock, variable }; + }; + + // https://rxjs-dev.firebaseapp.com/guide/testing/marble-testing + const runMarbleTest = (args: { + options: any; + values: { [marble: string]: FetchResponse }; + marble: string; + expectedValues: { [marble: string]: any }; + expectedMarble: string; + }) => { + const { expectedValues, expectedMarble, options, values, marble } = args; + const scheduler: TestScheduler = new TestScheduler((actual, expected) => { + expect(actual).toEqual(expected); + }); + + const { ds } = setupTestContext({}); + + scheduler.run(({ cold, expectObservable }) => { + const source = cold(marble, values); + jest.clearAllMocks(); + fetchMock.mockImplementation(() => source); + + const result = ds.query(options); + expectObservable(result).toBe(expectedMarble, expectedValues); + }); + }; + + describe('When performing a time series query', () => { + it('should transform response correctly', () => { + const options = { + range: { + from: dateTime(1432288354), + to: dateTime(1432288401), + }, + targets: [ + { + format: 'time_series', + rawQuery: true, + rawSql: 'select time, metric from grafana_metric', + refId: 'A', + datasource: 'gdev-ds', + }, + ], + }; + const response = { + results: { + A: { + refId: 'A', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'time', values: [1599643351085] }, + { name: 'metric', values: [30.226249741223704], labels: { metric: 'America' } }, + ], + meta: { + executedQueryString: 'select time, metric from grafana_metric', + }, + }) + ), + ], + }, + }, + }; + + const values = { a: createFetchResponse(response) }; + const marble = '-a|'; + const expectedMarble = '-a|'; + const expectedValues = { + a: { + data: [ + { + fields: [ + { + config: {}, + entities: {}, + name: 'time', + type: 'time', + values: { + buffer: [1599643351085], + }, + }, + { + config: {}, + entities: {}, + labels: { + metric: 'America', + }, + name: 'metric', + type: 'number', + values: { + buffer: [30.226249741223704], + }, + }, + ], + length: 1, + meta: { + executedQueryString: 'select time, metric from grafana_metric', + }, + name: undefined, + refId: 'A', + }, + ], + state: 'Done', + }, + }; + + runMarbleTest({ options, marble, values, expectedMarble, expectedValues }); + }); + }); + + describe('When performing a table query', () => { + it('should transform response correctly', () => { + const options = { + range: { + from: dateTime(1432288354), + to: dateTime(1432288401), + }, + targets: [ + { + format: 'table', + rawQuery: true, + rawSql: 'select time, metric, value from grafana_metric', + refId: 'A', + datasource: 'gdev-ds', + }, + ], + }; + const response = { + results: { + A: { + refId: 'A', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'time', values: [1599643351085] }, + { name: 'metric', values: ['America'] }, + { name: 'value', values: [30.226249741223704] }, + ], + meta: { + executedQueryString: 'select time, metric, value from grafana_metric', + }, + }) + ), + ], + }, + }, + }; + + const values = { a: createFetchResponse(response) }; + const marble = '-a|'; + const expectedMarble = '-a|'; + const expectedValues = { + a: { + data: [ + { + fields: [ + { + config: {}, + entities: {}, + name: 'time', + type: 'time', + values: { + buffer: [1599643351085], + }, + }, + { + config: {}, + entities: {}, + name: 'metric', + type: 'string', + values: { + buffer: ['America'], + }, + }, + { + config: {}, + entities: {}, + name: 'value', + type: 'number', + values: { + buffer: [30.226249741223704], + }, + }, + ], + length: 1, + meta: { + executedQueryString: 'select time, metric, value from grafana_metric', + }, + name: undefined, + refId: 'A', + }, + ], + state: 'Done', + }, + }; + + runMarbleTest({ options, marble, values, expectedMarble, expectedValues }); + }); + }); + + describe('When performing a query with hidden target', () => { + it('should return empty result and backendSrv.fetch should not be called', async () => { + const options = ({ + range: { + from: dateTime(1432288354), + to: dateTime(1432288401), + }, + targets: [ + { + format: 'table', + rawQuery: true, + rawSql: 'select time, metric, value from grafana_metric', + refId: 'A', + datasource: 'gdev-ds', + hide: true, + }, + ], + } as unknown) as DataQueryRequest; + + const { ds } = setupTestContext({}); + + await expect(ds.query(options)).toEmitValuesWith((received) => { + expect(received[0]).toEqual({ data: [] }); + expect(fetchMock).not.toHaveBeenCalled(); + }); + }); + }); + + describe('When performing annotationQuery', () => { + let results: any; + const annotationName = 'MyAnno'; + const options = { + annotation: { + name: annotationName, + rawQuery: 'select time, title, text, tags from table;', + }, + range: { + from: dateTime(1432288354), + to: dateTime(1432288401), + }, + }; + const response = { + results: { + MyAnno: { + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'time', values: [1432288355, 1432288390, 1432288400] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + { name: 'tags', values: ['TagA,TagB', ' TagB , TagC', null] }, + ], + }) + ), + ], + }, + }, + }; + + beforeEach(async () => { + const { ds } = setupTestContext(response); + results = await ds.annotationQuery(options); + }); + + it('should return annotation list', async () => { + expect(results.length).toBe(3); + + expect(results[0].text).toBe('some text'); + expect(results[0].tags[0]).toBe('TagA'); + expect(results[0].tags[1]).toBe('TagB'); + + expect(results[1].tags[0]).toBe('TagB'); + expect(results[1].tags[1]).toBe('TagC'); + + expect(results[2].tags.length).toBe(0); + }); + }); + + describe('When performing metricFindQuery that returns multiple string fields', () => { + it('should return list of all string field values', async () => { + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'title', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + const { ds } = setupTestContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results.length).toBe(6); + expect(results[0].text).toBe('aTitle'); + expect(results[5].text).toBe('some text3'); + }); + }); + + describe('When performing metricFindQuery with $__searchFilter and a searchFilter is given', () => { + it('should return list of all column values', async () => { + const query = "select title from atable where title LIKE '$__searchFilter'"; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'title', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + const { ds } = setupTestContext(response); + const results = await ds.metricFindQuery(query, { searchFilter: 'aTit' }); + + expect(fetchMock).toBeCalledTimes(1); + expect(fetchMock.mock.calls[0][0].data.queries[0].rawSql).toBe( + "select title from atable where title LIKE 'aTit%'" + ); + expect(results).toEqual([ + { text: 'aTitle' }, + { text: 'aTitle2' }, + { text: 'aTitle3' }, + { text: 'some text' }, + { text: 'some text2' }, + { text: 'some text3' }, + ]); + }); + }); + + describe('When performing metricFindQuery with $__searchFilter but no searchFilter is given', () => { + it('should return list of all column values', async () => { + const query = "select title from atable where title LIKE '$__searchFilter'"; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'title', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + { name: 'text', values: ['some text', 'some text2', 'some text3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + + const { ds } = setupTestContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(fetchMock).toBeCalledTimes(1); + expect(fetchMock.mock.calls[0][0].data.queries[0].rawSql).toBe("select title from atable where title LIKE '%'"); + expect(results).toEqual([ + { text: 'aTitle' }, + { text: 'aTitle2' }, + { text: 'aTitle3' }, + { text: 'some text' }, + { text: 'some text2' }, + { text: 'some text3' }, + ]); + }); + }); + + describe('When performing metricFindQuery with key, value columns', () => { + it('should return list of as text, value', async () => { + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: '__value', values: ['value1', 'value2', 'value3'] }, + { name: '__text', values: ['aTitle', 'aTitle2', 'aTitle3'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + const { ds } = setupTestContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results).toEqual([ + { text: 'aTitle', value: 'value1' }, + { text: 'aTitle2', value: 'value2' }, + { text: 'aTitle3', value: 'value3' }, + ]); + }); + }); + + describe('When performing metricFindQuery without key, value columns', () => { + it('should return list of all field values as text', async () => { + const query = 'select id, values from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: 'id', values: [1, 2, 3] }, + { name: 'values', values: ['test1', 'test2', 'test3'] }, + ], + meta: { + executedQueryString: 'select id, values from atable', + }, + }) + ), + ], + }, + }, + }; + const { ds } = setupTestContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results).toEqual([ + { text: 1 }, + { text: 2 }, + { text: 3 }, + { text: 'test1' }, + { text: 'test2' }, + { text: 'test3' }, + ]); + }); + }); + + describe('When performing metricFindQuery with key, value columns and with duplicate keys', () => { + it('should return list of unique keys', async () => { + const query = 'select * from atable'; + const response = { + results: { + tempvar: { + refId: 'tempvar', + frames: [ + dataFrameToJSON( + new MutableDataFrame({ + fields: [ + { name: '__text', values: ['aTitle', 'aTitle', 'aTitle'] }, + { name: '__value', values: ['same', 'same', 'diff'] }, + ], + meta: { + executedQueryString: 'select * from atable', + }, + }) + ), + ], + }, + }, + }; + const { ds } = setupTestContext(response); + const results = await ds.metricFindQuery(query, {}); + + expect(results).toEqual([{ text: 'aTitle', value: 'same' }]); + }); + }); + + describe('When interpolating variables', () => { + describe('and value is a string', () => { + it('should return an unquoted value', () => { + const { ds, variable } = setupTestContext({}); + expect(ds.interpolateVariable('abc', variable)).toEqual('abc'); + }); + }); + + describe('and value is a number', () => { + it('should return an unquoted value', () => { + const { ds, variable } = setupTestContext({}); + expect(ds.interpolateVariable((1000 as unknown) as string, variable)).toEqual(1000); + }); + }); + + describe('and value is an array of strings', () => { + it('should return comma separated quoted values', () => { + const { ds, variable } = setupTestContext({}); + expect(ds.interpolateVariable(['a', 'b', 'c'], variable)).toEqual("'a','b','c'"); + }); + }); + + describe('and variable allows multi-value and is a string', () => { + it('should return a quoted value', () => { + const { ds, variable } = setupTestContext({}); + variable.multi = true; + expect(ds.interpolateVariable('abc', variable)).toEqual("'abc'"); + }); + }); + + describe('and variable contains single quote', () => { + it('should return a quoted value', () => { + const { ds, variable } = setupTestContext({}); + variable.multi = true; + expect(ds.interpolateVariable("a'bc", variable)).toEqual("'a''bc'"); + expect(ds.interpolateVariable("a'b'c", variable)).toEqual("'a''b''c'"); + }); + }); + + describe('and variable allows all and is a string', () => { + it('should return a quoted value', () => { + const { ds, variable } = setupTestContext({}); + variable.includeAll = true; + expect(ds.interpolateVariable('abc', variable)).toEqual("'abc'"); + }); + }); + }); + + describe('targetContainsTemplate', () => { + it('given query that contains template variable it should return true', () => { + const rawSql = `SELECT + $__timeGroup("createdAt",'$summarize'), + avg(value) as "value", + hostname as "metric" + FROM + grafana_metric + WHERE + $__timeFilter("createdAt") AND + measurement = 'logins.count' AND + hostname IN($host) + GROUP BY time, metric + ORDER BY time`; + const query = { + rawSql, + rawQuery: true, + }; + const { templateSrv, ds } = setupTestContext({}); + + templateSrv.init([ + { type: 'query', name: 'summarize', current: { value: '1m' } }, + { type: 'query', name: 'host', current: { value: 'a' } }, + ]); + + expect(ds.targetContainsTemplate(query)).toBeTruthy(); + }); + + it('given query that only contains global template variable it should return false', () => { + const rawSql = `SELECT + $__timeGroup("createdAt",'$__interval'), + avg(value) as "value", + hostname as "metric" + FROM + grafana_metric + WHERE + $__timeFilter("createdAt") AND + measurement = 'logins.count' + GROUP BY time, metric + ORDER BY time`; + const query = { + rawSql, + rawQuery: true, + }; + const { templateSrv, ds } = setupTestContext({}); + + templateSrv.init([ + { type: 'query', name: 'summarize', current: { value: '1m' } }, + { type: 'query', name: 'host', current: { value: 'a' } }, + ]); + + expect(ds.targetContainsTemplate(query)).toBeFalsy(); + }); + }); +}); + +const createFetchResponse = (data: T): FetchResponse => ({ + data, + status: 200, + url: 'http://localhost:3000/api/query', + config: { url: 'http://localhost:3000/api/query' }, + type: 'basic', + statusText: 'Ok', + redirected: false, + headers: ({} as unknown) as Headers, + ok: true, +}); diff --git a/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts new file mode 100644 index 00000000..e2057b6a --- /dev/null +++ b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts @@ -0,0 +1,174 @@ +import PostgresQueryModel from '../postgres_query_model'; +import { TemplateSrv } from 'app/features/templating/template_srv'; + +describe('PostgresQuery', () => { + // @ts-ignore + const templateSrv: TemplateSrv = { + replace: jest.fn((text) => text) as any, + }; + + describe('When initializing', () => { + it('should not be in SQL mode', () => { + const query = new PostgresQueryModel({}, templateSrv); + expect(query.target.rawQuery).toBe(false); + }); + it('should be in SQL mode for pre query builder queries', () => { + const query = new PostgresQueryModel({ rawSql: 'SELECT 1' }, templateSrv); + expect(query.target.rawQuery).toBe(true); + }); + }); + + describe('When generating time column SQL', () => { + const query = new PostgresQueryModel({}, templateSrv); + + query.target.timeColumn = 'time'; + expect(query.buildTimeColumn()).toBe('time AS "time"'); + query.target.timeColumn = '"time"'; + expect(query.buildTimeColumn()).toBe('"time" AS "time"'); + }); + + describe('When generating time column SQL with group by time', () => { + let query = new PostgresQueryModel( + { timeColumn: 'time', group: [{ type: 'time', params: ['5m', 'none'] }] }, + templateSrv + ); + expect(query.buildTimeColumn()).toBe('$__timeGroupAlias(time,5m)'); + expect(query.buildTimeColumn(false)).toBe('$__timeGroup(time,5m)'); + + query = new PostgresQueryModel( + { timeColumn: 'time', group: [{ type: 'time', params: ['5m', 'NULL'] }] }, + templateSrv + ); + expect(query.buildTimeColumn()).toBe('$__timeGroupAlias(time,5m,NULL)'); + + query = new PostgresQueryModel( + { timeColumn: 'time', timeColumnType: 'int4', group: [{ type: 'time', params: ['5m', 'none'] }] }, + templateSrv + ); + expect(query.buildTimeColumn()).toBe('$__unixEpochGroupAlias(time,5m)'); + expect(query.buildTimeColumn(false)).toBe('$__unixEpochGroup(time,5m)'); + }); + + describe('When generating metric column SQL', () => { + const query = new PostgresQueryModel({}, templateSrv); + + query.target.metricColumn = 'host'; + expect(query.buildMetricColumn()).toBe('host AS metric'); + query.target.metricColumn = '"host"'; + expect(query.buildMetricColumn()).toBe('"host" AS metric'); + }); + + describe('When generating value column SQL', () => { + const query = new PostgresQueryModel({}, templateSrv); + + let column = [{ type: 'column', params: ['value'] }]; + expect(query.buildValueColumn(column)).toBe('value'); + column = [ + { type: 'column', params: ['value'] }, + { type: 'alias', params: ['alias'] }, + ]; + expect(query.buildValueColumn(column)).toBe('value AS "alias"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'aggregate', params: ['max'] }, + ]; + expect(query.buildValueColumn(column)).toBe('max(v) AS "a"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'window', params: ['increase'] }, + ]; + expect(query.buildValueColumn(column)).toBe( + '(CASE WHEN v >= lag(v) OVER (ORDER BY time) ' + + 'THEN v - lag(v) OVER (ORDER BY time) ' + + 'WHEN lag(v) OVER (ORDER BY time) IS NULL THEN NULL ELSE v END) AS "a"' + ); + }); + + describe('When generating value column SQL with metric column', () => { + const query = new PostgresQueryModel({}, templateSrv); + query.target.metricColumn = 'host'; + + let column = [{ type: 'column', params: ['value'] }]; + expect(query.buildValueColumn(column)).toBe('value'); + column = [ + { type: 'column', params: ['value'] }, + { type: 'alias', params: ['alias'] }, + ]; + expect(query.buildValueColumn(column)).toBe('value AS "alias"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'aggregate', params: ['max'] }, + ]; + expect(query.buildValueColumn(column)).toBe('max(v) AS "a"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'window', params: ['increase'] }, + ]; + expect(query.buildValueColumn(column)).toBe( + '(CASE WHEN v >= lag(v) OVER (PARTITION BY host ORDER BY time) ' + + 'THEN v - lag(v) OVER (PARTITION BY host ORDER BY time) ' + + 'WHEN lag(v) OVER (PARTITION BY host ORDER BY time) IS NULL THEN NULL ELSE v END) AS "a"' + ); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'aggregate', params: ['max'] }, + { type: 'window', params: ['increase'] }, + ]; + expect(query.buildValueColumn(column)).toBe( + '(CASE WHEN max(v) >= lag(max(v)) OVER (PARTITION BY host ORDER BY time) ' + + 'THEN max(v) - lag(max(v)) OVER (PARTITION BY host ORDER BY time) ' + + 'WHEN lag(max(v)) OVER (PARTITION BY host ORDER BY time) IS NULL THEN NULL ELSE max(v) END) AS "a"' + ); + }); + + describe('When generating WHERE clause', () => { + const query = new PostgresQueryModel({ where: [] }, templateSrv); + + expect(query.buildWhereClause()).toBe(''); + + query.target.timeColumn = 't'; + query.target.where = [{ type: 'macro', name: '$__timeFilter' }]; + expect(query.buildWhereClause()).toBe('\nWHERE\n $__timeFilter(t)'); + + query.target.where = [{ type: 'expression', params: ['v', '=', '1'] }]; + expect(query.buildWhereClause()).toBe('\nWHERE\n v = 1'); + + query.target.where = [ + { type: 'macro', name: '$__timeFilter' }, + { type: 'expression', params: ['v', '=', '1'] }, + ]; + expect(query.buildWhereClause()).toBe('\nWHERE\n $__timeFilter(t) AND\n v = 1'); + }); + + describe('When generating GROUP BY clause', () => { + const query = new PostgresQueryModel({ group: [], metricColumn: 'none' }, templateSrv); + + expect(query.buildGroupClause()).toBe(''); + query.target.group = [{ type: 'time', params: ['5m'] }]; + expect(query.buildGroupClause()).toBe('\nGROUP BY 1'); + query.target.metricColumn = 'm'; + expect(query.buildGroupClause()).toBe('\nGROUP BY 1,2'); + }); + + describe('When generating complete statement', () => { + const target: any = { + timeColumn: 't', + table: 'table', + select: [[{ type: 'column', params: ['value'] }]], + where: [], + }; + let result = 'SELECT\n t AS "time",\n value\nFROM table\nORDER BY 1'; + const query = new PostgresQueryModel(target, templateSrv); + + expect(query.buildQuery()).toBe(result); + + query.target.metricColumn = 'm'; + result = 'SELECT\n t AS "time",\n m AS metric,\n value\nFROM table\nORDER BY 1,2'; + expect(query.buildQuery()).toBe(result); + }); +}); diff --git a/public/app/plugins/datasource/postgres/sql_part.ts b/public/app/plugins/datasource/postgres/sql_part.ts new file mode 100644 index 00000000..17d78995 --- /dev/null +++ b/public/app/plugins/datasource/postgres/sql_part.ts @@ -0,0 +1,137 @@ +import { SqlPartDef, SqlPart } from 'app/angular/components/sql_part/sql_part'; + +const index: any[] = []; + +function createPart(part: any): any { + const def = index[part.type]; + if (!def) { + return null; + } + + return new SqlPart(part, def); +} + +function register(options: any) { + index[options.type] = new SqlPartDef(options); +} + +register({ + type: 'column', + style: 'label', + params: [{ type: 'column', dynamicLookup: true }], + defaultParams: ['value'], +}); + +register({ + type: 'expression', + style: 'expression', + label: 'Expr:', + params: [ + { name: 'left', type: 'string', dynamicLookup: true }, + { name: 'op', type: 'string', dynamicLookup: true }, + { name: 'right', type: 'string', dynamicLookup: true }, + ], + defaultParams: ['value', '=', 'value'], +}); + +register({ + type: 'macro', + style: 'label', + label: 'Macro:', + params: [], + defaultParams: [], +}); + +register({ + type: 'aggregate', + style: 'label', + params: [ + { + name: 'name', + type: 'string', + options: ['avg', 'count', 'min', 'max', 'sum', 'stddev', 'variance'], + }, + ], + defaultParams: ['avg'], +}); + +register({ + type: 'percentile', + label: 'Aggregate:', + style: 'label', + params: [ + { + name: 'name', + type: 'string', + options: ['percentile_cont', 'percentile_disc'], + }, + { + name: 'fraction', + type: 'number', + options: ['0.5', '0.75', '0.9', '0.95', '0.99'], + }, + ], + defaultParams: ['percentile_cont', '0.95'], +}); + +register({ + type: 'alias', + style: 'label', + params: [{ name: 'name', type: 'string', quote: 'double' }], + defaultParams: ['alias'], +}); + +register({ + type: 'time', + style: 'function', + label: 'time', + params: [ + { + name: 'interval', + type: 'interval', + options: ['$__interval', '1s', '10s', '1m', '5m', '10m', '15m', '1h'], + }, + { + name: 'fill', + type: 'string', + options: ['none', 'NULL', 'previous', '0'], + }, + ], + defaultParams: ['$__interval', 'none'], +}); + +register({ + type: 'window', + style: 'label', + params: [ + { + name: 'function', + type: 'string', + options: ['delta', 'increase', 'rate', 'sum'], + }, + ], + defaultParams: ['increase'], +}); + +register({ + type: 'moving_window', + style: 'label', + label: 'Moving Window:', + params: [ + { + name: 'function', + type: 'string', + options: ['avg'], + }, + { + name: 'window_size', + type: 'number', + options: ['3', '5', '7', '10', '20'], + }, + ], + defaultParams: ['avg', '5'], +}); + +export default { + create: createPart, +}; diff --git a/public/app/plugins/datasource/postgres/types.ts b/public/app/plugins/datasource/postgres/types.ts new file mode 100644 index 00000000..8a9c6798 --- /dev/null +++ b/public/app/plugins/datasource/postgres/types.ts @@ -0,0 +1,21 @@ +import { DataQuery, DataSourceJsonData } from '@grafana/data'; + +export interface PostgresQueryForInterpolation { + alias?: any; + format?: any; + rawSql?: any; + refId: any; + hide?: any; +} + +export interface PostgresOptions extends DataSourceJsonData { + timeInterval: string; +} + +export type ResultFormat = 'time_series' | 'table'; + +export interface PostgresQuery extends DataQuery { + alias?: string; + format?: ResultFormat; + rawSql?: any; +} diff --git a/public/app/plugins/datasource/prometheus/README.md b/public/app/plugins/datasource/prometheus/README.md new file mode 100644 index 00000000..9b7fa07c --- /dev/null +++ b/public/app/plugins/datasource/prometheus/README.md @@ -0,0 +1,7 @@ +# Prometheus Data Source - Native Plugin + +Grafana ships with **built in** support for Prometheus, the open-source service monitoring system and time series database. + +Read more about it here: + +[http://docs.grafana.org/datasources/prometheus/](http://docs.grafana.org/datasources/prometheus/) diff --git a/public/app/plugins/datasource/prometheus/add_label_to_query.test.ts b/public/app/plugins/datasource/prometheus/add_label_to_query.test.ts new file mode 100644 index 00000000..e4fb6ab6 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/add_label_to_query.test.ts @@ -0,0 +1,129 @@ +import { addLabelToQuery, addLabelToSelector } from './add_label_to_query'; + +describe('addLabelToQuery()', () => { + it('should add label to simple query', () => { + expect(() => { + addLabelToQuery('foo', '', ''); + }).toThrow(); + expect(addLabelToQuery('foo', 'bar', 'baz')).toBe('foo{bar="baz"}'); + expect(addLabelToQuery('foo{}', 'bar', 'baz')).toBe('foo{bar="baz"}'); + expect(addLabelToQuery('foo{x="yy"}', 'bar', 'baz')).toBe('foo{bar="baz",x="yy"}'); + expect(addLabelToQuery('metric > 0.001', 'foo', 'bar')).toBe('metric{foo="bar"} > 0.001'); + }); + + it('should add custom operator', () => { + expect(addLabelToQuery('foo{}', 'bar', 'baz', '!=')).toBe('foo{bar!="baz"}'); + expect(addLabelToQuery('foo{x="yy"}', 'bar', 'baz', '!=')).toBe('foo{bar!="baz",x="yy"}'); + }); + + it('should not modify ranges', () => { + expect(addLabelToQuery('rate(metric[1m])', 'foo', 'bar')).toBe('rate(metric{foo="bar"}[1m])'); + }); + + it('should detect in-order function use', () => { + expect(addLabelToQuery('sum by (xx) (foo)', 'bar', 'baz')).toBe('sum by (xx) (foo{bar="baz"})'); + }); + + it('should convert number Infinity to +Inf', () => { + expect( + addLabelToQuery('sum(rate(prometheus_tsdb_compaction_chunk_size_bytes_bucket[5m])) by (le)', 'le', Infinity) + ).toBe('sum(rate(prometheus_tsdb_compaction_chunk_size_bytes_bucket{le="+Inf"}[5m])) by (le)'); + }); + + it('should handle selectors with punctuation', () => { + expect(addLabelToQuery('foo{instance="my-host.com:9100"}', 'bar', 'baz')).toBe( + 'foo{bar="baz",instance="my-host.com:9100"}' + ); + expect(addLabelToQuery('foo:metric:rate1m', 'bar', 'baz')).toBe('foo:metric:rate1m{bar="baz"}'); + expect(addLabelToQuery('avg(foo:metric:rate1m{a="b"})', 'bar', 'baz')).toBe( + 'avg(foo:metric:rate1m{a="b",bar="baz"})' + ); + expect(addLabelToQuery('foo{list="a,b,c"}', 'bar', 'baz')).toBe('foo{bar="baz",list="a,b,c"}'); + }); + + it('should work on arithmetical expressions', () => { + expect(addLabelToQuery('foo + foo', 'bar', 'baz')).toBe('foo{bar="baz"} + foo{bar="baz"}'); + expect(addLabelToQuery('foo{x="yy"} + metric', 'bar', 'baz')).toBe('foo{bar="baz",x="yy"} + metric{bar="baz"}'); + expect(addLabelToQuery('avg(foo) + sum(xx_yy)', 'bar', 'baz')).toBe('avg(foo{bar="baz"}) + sum(xx_yy{bar="baz"})'); + expect(addLabelToQuery('foo{x="yy"} * metric{y="zz",a="bb"} * metric2', 'bar', 'baz')).toBe( + 'foo{bar="baz",x="yy"} * metric{a="bb",bar="baz",y="zz"} * metric2{bar="baz"}' + ); + }); + + it('should not add duplicate labels to a query', () => { + expect(addLabelToQuery(addLabelToQuery('foo{x="yy"}', 'bar', 'baz', '!='), 'bar', 'baz', '!=')).toBe( + 'foo{bar!="baz",x="yy"}' + ); + expect(addLabelToQuery(addLabelToQuery('rate(metric[1m])', 'foo', 'bar'), 'foo', 'bar')).toBe( + 'rate(metric{foo="bar"}[1m])' + ); + expect(addLabelToQuery(addLabelToQuery('foo{list="a,b,c"}', 'bar', 'baz'), 'bar', 'baz')).toBe( + 'foo{bar="baz",list="a,b,c"}' + ); + expect(addLabelToQuery(addLabelToQuery('avg(foo) + sum(xx_yy)', 'bar', 'baz'), 'bar', 'baz')).toBe( + 'avg(foo{bar="baz"}) + sum(xx_yy{bar="baz"})' + ); + }); + + it('should not remove filters', () => { + expect(addLabelToQuery('{x="y"} |="yy"', 'bar', 'baz')).toBe('{bar="baz",x="y"} |="yy"'); + expect(addLabelToQuery('{x="y"} |="yy" !~"xx"', 'bar', 'baz')).toBe('{bar="baz",x="y"} |="yy" !~"xx"'); + }); + + it('should add label to query properly with Loki datasource', () => { + expect(addLabelToQuery('{job="grafana"} |= "foo-bar"', 'filename', 'test.txt', undefined, true)).toBe( + '{filename="test.txt",job="grafana"} |= "foo-bar"' + ); + }); + + it('should add labels to metrics with logical operators', () => { + expect(addLabelToQuery('foo_info or bar_info', 'bar', 'baz')).toBe('foo_info{bar="baz"} or bar_info{bar="baz"}'); + expect(addLabelToQuery('foo_info and bar_info', 'bar', 'baz')).toBe('foo_info{bar="baz"} and bar_info{bar="baz"}'); + }); + + it('should not add ad-hoc filter to template variables', () => { + expect(addLabelToQuery('sum(rate({job="foo"}[2m])) by (value $variable)', 'bar', 'baz')).toBe( + 'sum(rate({bar="baz",job="foo"}[2m])) by (value $variable)' + ); + }); + + it('should not add ad-hoc filter to range', () => { + expect(addLabelToQuery('avg(rate((my_metric{job="foo"} > 0)[3h:])) by (label)', 'bar', 'baz')).toBe( + 'avg(rate((my_metric{bar="baz",job="foo"} > 0)[3h:])) by (label)' + ); + }); + it('should not add ad-hoc filter to labels in label list provided with the group modifier', () => { + expect( + addLabelToQuery( + 'max by (id, name, type) (my_metric{type=~"foo|bar|baz-test"}) * on(id) group_right(id, type, name) sum by (id) (my_metric) * 1000', + 'bar', + 'baz' + ) + ).toBe( + 'max by (id, name, type) (my_metric{bar="baz",type=~"foo|bar|baz-test"}) * on(id) group_right(id, type, name) sum by (id) (my_metric{bar="baz"}) * 1000' + ); + }); + it('should not add ad-hoc filter to labels in label list provided with the group modifier', () => { + expect(addLabelToQuery('rate(my_metric[${__range_s}s])', 'bar', 'baz')).toBe( + 'rate(my_metric{bar="baz"}[${__range_s}s])' + ); + }); + it('should not add ad-hoc filter to labels to math operations', () => { + expect(addLabelToQuery('count(my_metric{job!="foo"} < (5*1024*1024*1024) or vector(0)) - 1', 'bar', 'baz')).toBe( + 'count(my_metric{bar="baz",job!="foo"} < (5*1024*1024*1024) or vector(0)) - 1' + ); + }); +}); + +describe('addLabelToSelector()', () => { + test('should add a label to an empty selector', () => { + expect(addLabelToSelector('{}', 'foo', 'bar')).toBe('{foo="bar"}'); + expect(addLabelToSelector('', 'foo', 'bar')).toBe('{foo="bar"}'); + }); + test('should add a label to a selector', () => { + expect(addLabelToSelector('{foo="bar"}', 'baz', '42')).toBe('{baz="42",foo="bar"}'); + }); + test('should add a label to a selector with custom operator', () => { + expect(addLabelToSelector('{}', 'baz', '42', '!=')).toBe('{baz!="42"}'); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/add_label_to_query.ts b/public/app/plugins/datasource/prometheus/add_label_to_query.ts new file mode 100644 index 00000000..8f466050 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/add_label_to_query.ts @@ -0,0 +1,129 @@ +import { chain, isEqual } from 'lodash'; +import { OPERATORS, LOGICAL_OPERATORS, PROM_KEYWORDS } from './promql'; + +const builtInWords = [...PROM_KEYWORDS, ...OPERATORS, ...LOGICAL_OPERATORS]; + +// We want to extract all possible metrics and also keywords +const metricsAndKeywordsRegexp = /([A-Za-z:][\w:]*)\b(?![\]{=!",])/g; +// Safari currently doesn't support negative lookbehind. When it does, we should refactor this. +// We are creating 2 matching groups. (\$) is for the Grafana's variables such as ${__rate_s}. We want to ignore +// ${__rate_s} and not add variable to it. +const selectorRegexp = /(\$)?{([^{]*)}/g; + +export function addLabelToQuery( + query: string, + key: string, + value: string | number, + operator?: string, + hasNoMetrics?: boolean +): string { + if (!key || !value) { + throw new Error('Need label to add to query.'); + } + + // We need to make sure that we convert the value back to string because it may be a number + const transformedValue = value === Infinity ? '+Inf' : value.toString(); + + // Add empty selectors to bare metric names + let previousWord: string; + + query = query.replace(metricsAndKeywordsRegexp, (match, word, offset) => { + const isMetric = isWordMetric(query, word, offset, previousWord, hasNoMetrics); + previousWord = word; + + return isMetric ? `${word}{}` : word; + }); + + // Adding label to existing selectors + let match = selectorRegexp.exec(query); + const parts = []; + let lastIndex = 0; + let suffix = ''; + + while (match) { + const prefix = query.slice(lastIndex, match.index); + lastIndex = match.index + match[2].length + 2; + suffix = query.slice(match.index + match[0].length); + // If we matched 1st group, we know it is Grafana's variable and we don't want to add labels + if (match[1]) { + parts.push(prefix); + parts.push(match[0]); + } else { + // If we didn't match first group, we are inside selector and we want to add labels + const selector = match[2]; + const selectorWithLabel = addLabelToSelector(selector, key, transformedValue, operator); + parts.push(prefix, selectorWithLabel); + } + + match = selectorRegexp.exec(query); + } + + parts.push(suffix); + return parts.join(''); +} + +const labelRegexp = /(\w+)\s*(=|!=|=~|!~)\s*("[^"]*")/g; + +export function addLabelToSelector(selector: string, labelKey: string, labelValue: string, labelOperator?: string) { + const parsedLabels = []; + + // Split selector into labels + if (selector) { + let match = labelRegexp.exec(selector); + while (match) { + parsedLabels.push({ key: match[1], operator: match[2], value: match[3] }); + match = labelRegexp.exec(selector); + } + } + + // Add new label + const operatorForLabelKey = labelOperator || '='; + parsedLabels.push({ key: labelKey, operator: operatorForLabelKey, value: `"${labelValue}"` }); + + // Sort labels by key and put them together + const formatted = chain(parsedLabels) + .uniqWith(isEqual) + .compact() + .sortBy('key') + .map(({ key, operator, value }) => `${key}${operator}${value}`) + .value() + .join(','); + + return `{${formatted}}`; +} + +function isPositionInsideChars(text: string, position: number, openChar: string, closeChar: string) { + const nextSelectorStart = text.slice(position).indexOf(openChar); + const nextSelectorEnd = text.slice(position).indexOf(closeChar); + return nextSelectorEnd > -1 && (nextSelectorStart === -1 || nextSelectorStart > nextSelectorEnd); +} + +function isWordMetric(query: string, word: string, offset: number, previousWord: string, hasNoMetrics?: boolean) { + const insideSelector = isPositionInsideChars(query, offset, '{', '}'); + // Handle "sum by (key) (metric)" + const previousWordIsKeyWord = previousWord && OPERATORS.indexOf(previousWord) > -1; + // Check for colon as as "word boundary" symbol + const isColonBounded = word.endsWith(':'); + // Check for words that start with " which means that they are not metrics + const startsWithQuote = query[offset - 1] === '"'; + // Check for template variables + const isTemplateVariable = query[offset - 1] === '$'; + // Check for time units + const isTimeUnit = ['s', 'm', 'h', 'd', 'w'].includes(word) && Boolean(Number(query[offset - 1])); + + if ( + !hasNoMetrics && + !insideSelector && + !isColonBounded && + !previousWordIsKeyWord && + !startsWithQuote && + !isTemplateVariable && + !isTimeUnit && + builtInWords.indexOf(word) === -1 + ) { + return true; + } + return false; +} + +export default addLabelToQuery; diff --git a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx new file mode 100644 index 00000000..c0e7c273 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { QueryEditorHelpProps } from '@grafana/data'; +import { PromQuery } from '../types'; + +const CHEAT_SHEET_ITEMS = [ + { + title: 'Request Rate', + expression: 'rate(http_request_total[5m])', + label: + 'Given an HTTP request counter, this query calculates the per-second average request rate over the last 5 minutes.', + }, + { + title: '95th Percentile of Request Latencies', + expression: 'histogram_quantile(0.95, sum(rate(prometheus_http_request_duration_seconds_bucket[5m])) by (le))', + label: 'Calculates the 95th percentile of HTTP request rate over 5 minute windows.', + }, + { + title: 'Alerts Firing', + expression: 'sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h])) by (alertname))', + label: 'Sums up the alerts that have been firing over the last 24 hours.', + }, + { + title: 'Step', + label: + 'Defines the graph resolution using a duration format (15s, 1m, 3h, ...). Small steps create high-resolution graphs but can be slow over larger time ranges. Using a longer step lowers the resolution and smooths the graph by producing fewer datapoints. If no step is given the resolution is calculated automatically.', + }, +]; + +const PromCheatSheet = (props: QueryEditorHelpProps) => ( +

PromQL Cheat Sheet

+ {CHEAT_SHEET_ITEMS.map((item, index) => ( +

{item.title}

+ {item.expression ? ( +

props.onClickExample({ refId: 'A', expr: item.expression })} + > + {item.expression} +

+ ) : null} +

{item.label}

+ ))} +

+); + +export default PromCheatSheet; diff --git a/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx b/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx new file mode 100644 index 00000000..fb125be0 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx @@ -0,0 +1,77 @@ +import { GrafanaTheme2 } from '@grafana/data'; +import { IconButton, InlineLabel, Tooltip, useStyles2 } from '@grafana/ui'; +import { css, cx } from '@emotion/css'; +import React, { useEffect, useState } from 'react'; +import { usePrevious } from 'react-use'; +import { PrometheusDatasource } from '../datasource'; +import { PromQuery } from '../types'; + +interface Props { + onChange: (exemplar: boolean) => void; + datasource: PrometheusDatasource; + query: PromQuery; + 'data-testid'?: string; +} + +export function PromExemplarField({ datasource, onChange, query, ...rest }: Props) { + const [error, setError] = useState(null); + const styles = useStyles2(getStyles); + const prevError = usePrevious(error); + + useEffect(() => { + if (!datasource.exemplarsAvailable) { + setError('Exemplars for this query are not available'); + onChange(false); + } else if (query.instant && !query.range) { + setError('Exemplars are not available for instant queries'); + onChange(false); + } else { + setError(null); + // If error is cleared, we want to change exemplar to true + if (prevError && !error) { + onChange(true); + } + } + }, [datasource.exemplarsAvailable, query.instant, query.range, onChange, prevError, error]); + + const iconButtonStyles = cx( + { + [styles.activeIcon]: !!query.exemplar, + }, + styles.eyeIcon + ); + + return ( + + +

+ Exemplars + { + onChange(!query.exemplar); + }} + /> +

+ + + ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + eyeIcon: css` + margin-left: ${theme.spacing(2)}; + `, + activeIcon: css` + color: ${theme.colors.primary.main}; + `, + iconWrapper: css` + display: flex; + align-items: center; + `, + }; +} diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx new file mode 100644 index 00000000..8ca87275 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { PromExploreExtraFieldProps, PromExploreExtraField, testIds } from './PromExploreExtraField'; + +const setup = (propOverrides?: PromExploreExtraFieldProps) => { + const query = { exemplar: false }; + const datasource = {}; + const onChange = jest.fn(); + const onRunQuery = jest.fn(); + + const props: any = { + onChange, + onRunQuery, + query, + datasource, + }; + + Object.assign(props, propOverrides); + + return render(); +}; + +describe('PromExploreExtraField', () => { + it('should render step field', () => { + setup(); + expect(screen.getByTestId(testIds.stepField)).toBeInTheDocument(); + }); + + it('should render query type field', () => { + setup(); + expect(screen.getByTestId(testIds.queryTypeField)).toBeInTheDocument(); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx new file mode 100644 index 00000000..37dce028 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx @@ -0,0 +1,130 @@ +import React, { memo, useCallback } from 'react'; +import { usePrevious } from 'react-use'; +import { isEqual } from 'lodash'; +import { css, cx } from '@emotion/css'; +import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui'; +import { PromQuery } from '../types'; +import { PromExemplarField } from './PromExemplarField'; +import { PrometheusDatasource } from '../datasource'; + +export interface PromExploreExtraFieldProps { + query: PromQuery; + onChange: (value: PromQuery) => void; + onRunQuery: () => void; + datasource: PrometheusDatasource; +} + +export const PromExploreExtraField: React.FC = memo( + ({ query, datasource, onChange, onRunQuery }) => { + const rangeOptions = [ + { value: 'range', label: 'Range', description: 'Run query over a range of time.' }, + { + value: 'instant', + label: 'Instant', + description: 'Run query against a single point in time. For this query, the "To" time is used.', + }, + { value: 'both', label: 'Both', description: 'Run an Instant query and a Range query.' }, + ]; + + const prevQuery = usePrevious(query); + + const onExemplarChange = useCallback( + (exemplar: boolean) => { + if (!isEqual(query, prevQuery) || exemplar !== query.exemplar) { + onChange({ ...query, exemplar }); + } + }, + [prevQuery, query, onChange] + ); + + function onChangeQueryStep(interval: string) { + onChange({ ...query, interval }); + } + + function onStepChange(e: React.SyntheticEvent) { + if (e.currentTarget.value !== query.interval) { + onChangeQueryStep(e.currentTarget.value); + } + } + + function onReturnKeyDown(e: React.KeyboardEvent) { + if (e.key === 'Enter' && e.shiftKey) { + onRunQuery(); + } + } + + function onQueryTypeChange(queryType: string) { + let nextQuery; + if (queryType === 'instant') { + nextQuery = { ...query, instant: true, range: false }; + } else if (queryType === 'range') { + nextQuery = { ...query, instant: false, range: true }; + } else { + nextQuery = { ...query, instant: true, range: true }; + } + onChange(nextQuery); + } + + return ( +

+ {/*Query type field*/} +

+ Query type + + +

+ {/*Step field*/} +

+ + Min step + + +

+ + +

+ ); + } +); + +PromExploreExtraField.displayName = 'PromExploreExtraField'; + +export const testIds = { + extraFieldEditor: 'prom-editor-extra-field', + stepField: 'prom-editor-extra-field-step', + queryTypeField: 'prom-editor-extra-field-query-type', +}; diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx new file mode 100644 index 00000000..aeb454bc --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.test.tsx @@ -0,0 +1,141 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import PromExploreQueryEditor, { testIds } from './PromExploreQueryEditor'; +import { testIds as extraFieldTestIds } from './PromExploreExtraField'; +import { PrometheusDatasource } from '../datasource'; +import { PromQuery } from '../types'; +import { LoadingState, PanelData, toUtc, TimeRange } from '@grafana/data'; + +// the monaco-based editor uses lazy-loading and that does not work +// well with this test, and we do not need the monaco-related +// functionality in this test anyway, so we mock it out. +jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => { + const fakeQueryField = () =>

prometheus query field

; + return { + MonacoQueryFieldWrapper: fakeQueryField, + }; +}); + +const setup = (propOverrides?: object) => { + const datasourceMock: unknown = { + languageProvider: { + syntax: () => {}, + getLabelKeys: () => [], + metrics: [], + start: () => Promise.resolve([]), + }, + getInitHints: () => [], + exemplarsAvailable: true, + }; + const datasource: PrometheusDatasource = datasourceMock as PrometheusDatasource; + const onRunQuery = jest.fn(); + const onChange = jest.fn(); + const query: PromQuery = { expr: '', refId: 'A', interval: '1s', exemplar: true }; + const range: TimeRange = { + from: toUtc('2020-01-01', 'YYYY-MM-DD'), + to: toUtc('2020-01-02', 'YYYY-MM-DD'), + raw: { + from: toUtc('2020-01-01', 'YYYY-MM-DD'), + to: toUtc('2020-01-02', 'YYYY-MM-DD'), + }, + }; + const data: PanelData = { + state: LoadingState.NotStarted, + series: [], + request: { + requestId: '1', + dashboardId: 1, + intervalMs: 1000, + interval: '1s', + panelId: 1, + range: { + from: toUtc('2020-01-01', 'YYYY-MM-DD'), + to: toUtc('2020-01-02', 'YYYY-MM-DD'), + raw: { + from: toUtc('2020-01-01', 'YYYY-MM-DD'), + to: toUtc('2020-01-02', 'YYYY-MM-DD'), + }, + }, + scopedVars: {}, + targets: [], + timezone: 'GMT', + app: 'Grafana', + startTime: 0, + }, + timeRange: { + from: toUtc('2020-01-01', 'YYYY-MM-DD'), + to: toUtc('2020-01-02', 'YYYY-MM-DD'), + raw: { + from: toUtc('2020-01-01', 'YYYY-MM-DD'), + to: toUtc('2020-01-02', 'YYYY-MM-DD'), + }, + }, + }; + const history: any[] = []; + const exploreMode = 'Metrics'; + + const props: any = { + query, + data, + range, + datasource, + exploreMode, + history, + onChange, + onRunQuery, + }; + + Object.assign(props, propOverrides); + + return ; +}; + +describe('PromExploreQueryEditor', () => { + it('should render component', () => { + render(setup()); + expect(screen.getByTestId(testIds.editor)).toBeInTheDocument(); + }); + + it('should render PromQueryField with ExtraFieldElement', async () => { + render(setup()); + expect(screen.getByTestId(extraFieldTestIds.extraFieldEditor)).toBeInTheDocument(); + }); + + it('should set default value for expr if it is undefined', async () => { + const onChange = jest.fn(); + const query = { expr: undefined, exemplar: false, instant: false, range: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ expr: '' })); + }); + + it('should set default value for exemplars if it is undefined', async () => { + const onChange = jest.fn(); + const query = { expr: '', instant: false, range: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ exemplar: true })); + }); + + it('should set default value for instant and range if expr is falsy', async () => { + const onChange = jest.fn(); + let query = { expr: '', exemplar: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ instant: true, range: true })); + }); + + it('should not set default value for instant and range with truthy expr', async () => { + const onChange = jest.fn(); + let query = { expr: 'foo', exemplar: true }; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(0); + }); + + it('should add default values for multiple missing values', async () => { + const onChange = jest.fn(); + let query = {}; + render(setup({ onChange, query })); + expect(onChange).toHaveBeenCalledTimes(3); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx new file mode 100644 index 00000000..a953e1b9 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx @@ -0,0 +1,51 @@ +import React, { memo, FC, useEffect } from 'react'; +import { QueryEditorProps, CoreApp } from '@grafana/data'; +import { PrometheusDatasource } from '../datasource'; +import { PromQuery, PromOptions } from '../types'; +import PromQueryField from './PromQueryField'; +import { PromExploreExtraField } from './PromExploreExtraField'; + +export type Props = QueryEditorProps; + +export const PromExploreQueryEditor: FC = (props: Props) => { + const { range, query, data, datasource, history, onChange, onRunQuery } = props; + + // Setting default values + useEffect(() => { + if (query.expr === undefined) { + onChange({ ...query, expr: '' }); + } + if (query.exemplar === undefined) { + onChange({ ...query, exemplar: true }); + } + + // Override query type to "Both" only for new queries (no query.expr). + if (!query.instant && !query.range && !query.expr) { + onChange({ ...query, instant: true, range: true }); + } + }, [onChange, query]); + + return ( + {}} + history={history} + data={data} + data-testid={testIds.editor} + ExtraFieldElement={ + + } + /> + ); +}; + +export default memo(PromExploreQueryEditor); + +export const testIds = { + editor: 'prom-editor-explore', +}; diff --git a/public/app/plugins/datasource/prometheus/components/PromLink.test.tsx b/public/app/plugins/datasource/prometheus/components/PromLink.test.tsx new file mode 100644 index 00000000..4fb1bfae --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromLink.test.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { PanelData } from '@grafana/data'; +import { PromQuery } from '../types'; +import { PrometheusDatasource } from '../datasource'; +import PromLink from './PromLink'; + +jest.mock('@grafana/data', () => ({ + ...(jest.requireActual('@grafana/data') as any), + rangeUtil: { + intervalToSeconds: jest.fn(() => 15), + }, +})); + +const getPanelData = (panelDataOverrides?: Partial) => { + const panelData = { + request: { + scopedVars: [{ __interval: { text: '15s', value: '15s' } }], + targets: [ + { refId: 'A', datasource: 'prom1' }, + { refId: 'B', datasource: 'prom2' }, + ], + range: { + to: { + utc: () => ({ + format: jest.fn(), + }), + }, + }, + }, + }; + + return Object.assign(panelData, panelDataOverrides) as PanelData; +}; + +const getDataSource = (datasourceOverrides?: Partial) => { + const datasource = { + getPrometheusTime: () => 123, + createQuery: () => ({ expr: 'up', step: 15 }), + directUrl: 'prom1', + getRateIntervalScopedVariable: jest.fn(() => ({ __rate_interval: { text: '60s', value: '60s' } })), + }; + + return (Object.assign(datasource, datasourceOverrides) as unknown) as PrometheusDatasource; +}; + +const getDataSourceWithCustomQueryParameters = (datasourceOverrides?: Partial) => { + const datasource = { + getPrometheusTime: () => 124, + createQuery: () => ({ expr: 'up', step: 20 }), + directUrl: 'prom3', + getRateIntervalScopedVariable: jest.fn(() => ({ __rate_interval: { text: '60s', value: '60s' } })), + customQueryParameters: new URLSearchParams('g0.foo=1'), + }; + + return (Object.assign(datasource, datasourceOverrides) as unknown) as PrometheusDatasource; +}; + +describe('PromLink', () => { + it('should show correct link for 1 component', async () => { + render( +

+ +

+ ); + expect(screen.getByText('Prometheus')).toHaveAttribute( + 'href', + 'prom1/graph?g0.expr=up&g0.range_input=0s&g0.end_input=undefined&g0.step_input=15&g0.tab=0' + ); + }); + it('should show different link when there are 2 components with the same panel data', () => { + render( +

+ + +

+ ); + const promLinkButtons = screen.getAllByText('Prometheus'); + expect(promLinkButtons[0]).toHaveAttribute( + 'href', + 'prom1/graph?g0.expr=up&g0.range_input=0s&g0.end_input=undefined&g0.step_input=15&g0.tab=0' + ); + expect(promLinkButtons[1]).toHaveAttribute( + 'href', + 'prom2/graph?g0.expr=up&g0.range_input=0s&g0.end_input=undefined&g0.step_input=15&g0.tab=0' + ); + }); + it('should create sanitized link', async () => { + render( +

+ +

+ ); + expect(screen.getByText('Prometheus')).toHaveAttribute('href', 'about:blank'); + }); + it('should add custom query parameters when it is configured', async () => { + render( +

+ +

+ ); + expect(screen.getByText('Prometheus')).toHaveAttribute( + 'href', + 'prom3/graph?g0.foo=1&g0.expr=up&g0.range_input=0s&g0.end_input=undefined&g0.step_input=20&g0.tab=0' + ); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/components/PromLink.tsx b/public/app/plugins/datasource/prometheus/components/PromLink.tsx new file mode 100644 index 00000000..f50189ed --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromLink.tsx @@ -0,0 +1,82 @@ +import { map } from 'lodash'; +import React, { FC, useEffect, useState, memo } from 'react'; + +import { PrometheusDatasource } from '../datasource'; +import { PromQuery } from '../types'; +import { DataQueryRequest, PanelData, ScopedVars, textUtil, rangeUtil } from '@grafana/data'; + +interface Props { + datasource: PrometheusDatasource; + query: PromQuery; + panelData?: PanelData; +} + +const PromLink: FC = ({ panelData, query, datasource }) => { + const [href, setHref] = useState(''); + + useEffect(() => { + if (panelData) { + const getExternalLink = () => { + if (!panelData.request) { + return ''; + } + + const { + request: { range, interval, scopedVars }, + } = panelData; + + const start = datasource.getPrometheusTime(range.from, false); + const end = datasource.getPrometheusTime(range.to, true); + const rangeDiff = Math.ceil(end - start); + const endTime = range.to.utc().format('YYYY-MM-DD HH:mm'); + + const enrichedScopedVars: ScopedVars = { + ...scopedVars, + // As we support $__rate_interval variable in min step, we need add it to scopedVars + ...datasource.getRateIntervalScopedVariable( + rangeUtil.intervalToSeconds(interval), + rangeUtil.intervalToSeconds(datasource.interval) + ), + }; + + const options = { + interval, + scopedVars: enrichedScopedVars, + } as DataQueryRequest; + + const customQueryParameters: { [key: string]: string } = {}; + if (datasource.customQueryParameters) { + for (const [k, v] of datasource.customQueryParameters) { + customQueryParameters[k] = v; + } + } + + const queryOptions = datasource.createQuery(query, options, start, end); + + const expr = { + ...customQueryParameters, + 'g0.expr': queryOptions.expr, + 'g0.range_input': rangeDiff + 's', + 'g0.end_input': endTime, + 'g0.step_input': queryOptions.step, + 'g0.tab': 0, + }; + + const args = map(expr, (v: string, k: string) => { + return k + '=' + encodeURIComponent(v); + }).join('&'); + return `${datasource.directUrl}/graph?${args}`; + }; + + setHref(getExternalLink()); + } + }, [datasource, panelData, query]); + + return ( + + Prometheus + + ); +}; + +export default memo(PromLink); diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.test.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.test.tsx new file mode 100644 index 00000000..988b2541 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.test.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { dateTime, CoreApp } from '@grafana/data'; +import { screen, render } from '@testing-library/react'; + +import { PromQueryEditor, testIds } from './PromQueryEditor'; +import { PrometheusDatasource } from '../datasource'; +import { PromQuery } from '../types'; + +jest.mock('app/features/dashboard/services/TimeSrv', () => { + return { + getTimeSrv: () => ({ + timeRange: () => ({ + from: dateTime(), + to: dateTime(), + }), + }), + }; +}); + +jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => { + const fakeQueryField = () =>

prometheus query field

; + return { + MonacoQueryFieldWrapper: fakeQueryField, + }; +}); + +const setup = (propOverrides?: object) => { + const datasourceMock: unknown = { + createQuery: jest.fn((q) => q), + getPrometheusTime: jest.fn((date, roundup) => 123), + languageProvider: { + start: () => Promise.resolve([]), + syntax: () => {}, + getLabelKeys: () => [], + metrics: [], + }, + getInitHints: () => [], + }; + const datasource: PrometheusDatasource = datasourceMock as PrometheusDatasource; + const onRunQuery = jest.fn(); + const onChange = jest.fn(); + const query: PromQuery = { expr: '', refId: 'A' }; + + const props: any = { + datasource, + onChange, + onRunQuery, + query, + }; + + Object.assign(props, propOverrides); + + return render(); +}; + +describe('Render PromQueryEditor with basic options', () => { + it('should render editor', () => { + setup(); + expect(screen.getByTestId(testIds.editor)).toBeInTheDocument(); + }); + + it('should render exemplar editor for dashboard', () => { + setup({ app: CoreApp.Dashboard }); + expect(screen.getByTestId(testIds.editor)).toBeInTheDocument(); + expect(screen.getByTestId(testIds.exemplar)).toBeInTheDocument(); + }); + + it('should not render exemplar editor for unified alerting', () => { + setup({ app: CoreApp.UnifiedAlerting }); + expect(screen.getByTestId(testIds.editor)).toBeInTheDocument(); + expect(screen.queryByTestId(testIds.exemplar)).not.toBeInTheDocument(); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx new file mode 100644 index 00000000..4301778a --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx @@ -0,0 +1,224 @@ +import { map } from 'lodash'; +import React, { PureComponent } from 'react'; + +// Types +import { InlineFormLabel, LegacyForms, Select } from '@grafana/ui'; +import { CoreApp, SelectableValue } from '@grafana/data'; +import { PromQuery } from '../types'; + +import PromQueryField from './PromQueryField'; +import PromLink from './PromLink'; +import { PromExemplarField } from './PromExemplarField'; +import { PromQueryEditorProps } from './types'; + +const { Switch } = LegacyForms; + +const FORMAT_OPTIONS: Array> = [ + { label: 'Time series', value: 'time_series' }, + { label: 'Table', value: 'table' }, + { label: 'Heatmap', value: 'heatmap' }, +]; + +const INTERVAL_FACTOR_OPTIONS: Array> = map([1, 2, 3, 4, 5, 10], (value: number) => ({ + value, + label: '1/' + value, +})); + +interface State { + legendFormat?: string; + formatOption: SelectableValue; + interval?: string; + intervalFactorOption: SelectableValue; + instant: boolean; + exemplar: boolean; +} + +export class PromQueryEditor extends PureComponent { + // Query target to be modified and used for queries + query: PromQuery; + + constructor(props: PromQueryEditorProps) { + super(props); + // Use default query to prevent undefined input values + const defaultQuery: Partial = { + expr: '', + legendFormat: '', + interval: '', + // Set exemplar to false for alerting queries + exemplar: props.app === CoreApp.UnifiedAlerting ? false : true, + }; + const query = Object.assign({}, defaultQuery, props.query); + this.query = query; + // Query target properties that are fully controlled inputs + this.state = { + // Fully controlled text inputs + interval: query.interval, + legendFormat: query.legendFormat, + // Select options + formatOption: FORMAT_OPTIONS.find((option) => option.value === query.format) || FORMAT_OPTIONS[0], + intervalFactorOption: + INTERVAL_FACTOR_OPTIONS.find((option) => option.value === query.intervalFactor) || INTERVAL_FACTOR_OPTIONS[0], + // Switch options + instant: Boolean(query.instant), + exemplar: Boolean(query.exemplar), + }; + } + + onFieldChange = (query: PromQuery, override?: any) => { + this.query.expr = query.expr; + }; + + onFormatChange = (option: SelectableValue) => { + this.query.format = option.value; + this.setState({ formatOption: option }, this.onRunQuery); + }; + + onInstantChange = (e: React.SyntheticEvent) => { + const instant = (e.target as HTMLInputElement).checked; + this.query.instant = instant; + this.setState({ instant }, this.onRunQuery); + }; + + onIntervalChange = (e: React.SyntheticEvent) => { + const interval = e.currentTarget.value; + this.query.interval = interval; + this.setState({ interval }); + }; + + onIntervalFactorChange = (option: SelectableValue) => { + this.query.intervalFactor = option.value; + this.setState({ intervalFactorOption: option }, this.onRunQuery); + }; + + onLegendChange = (e: React.SyntheticEvent) => { + const legendFormat = e.currentTarget.value; + this.query.legendFormat = legendFormat; + this.setState({ legendFormat }); + }; + + onExemplarChange = (isEnabled: boolean) => { + this.query.exemplar = isEnabled; + this.setState({ exemplar: isEnabled }, this.onRunQuery); + }; + + onRunQuery = () => { + const { query } = this; + // Change of query.hide happens outside of this component and is just passed as prop. We have to update it when running queries. + const { hide } = this.props.query; + this.props.onChange({ ...query, hide }); + this.props.onRunQuery(); + }; + + render() { + const { datasource, query, range, data } = this.props; + const { formatOption, instant, interval, intervalFactorOption, legendFormat } = this.state; + //We want to hide exemplar field for unified alerting as exemplars in alerting don't make sense and are source of confusion + const showExemplarField = this.props.app !== CoreApp.UnifiedAlerting; + + return ( + +

+ + Legend + + +

+ +

+ + An additional lower limit for the step parameter of the Prometheus query and for the{' '} + $__interval and $__rate_interval variables. The limit is absolute and not + modified by the "Resolution" setting. + + } + > + Min step + + +

+ +

Resolution

+ + + + + + +

+ {showExemplarField && ( + + )} + + } + /> + ); + } +} + +export const testIds = { + editor: 'prom-editor', + exemplar: 'exemplar-editor', +}; diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx new file mode 100644 index 00000000..b5079614 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { render, RenderResult } from '@testing-library/react'; +import { PromQueryEditorByApp } from './PromQueryEditorByApp'; +import { CoreApp } from '@grafana/data'; +import { noop } from 'lodash'; +import { PrometheusDatasource } from '../datasource'; +import { testIds as alertingTestIds } from './PromQueryEditorForAlerting'; +import { testIds as regularTestIds } from './PromQueryEditor'; + +// the monaco-based editor uses lazy-loading and that does not work +// well with this test, and we do not need the monaco-related +// functionality in this test anyway, so we mock it out. +jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => { + const fakeQueryField = () =>

prometheus query field

; + return { + MonacoQueryFieldWrapper: fakeQueryField, + }; +}); + +function setup(app: CoreApp): RenderResult { + const dataSource = ({ + createQuery: jest.fn((q) => q), + getInitHints: () => [], + getPrometheusTime: jest.fn((date, roundup) => 123), + languageProvider: { + start: () => Promise.resolve([]), + syntax: () => {}, + getLabelKeys: () => [], + metrics: [], + }, + } as unknown) as PrometheusDatasource; + + return render( + + ); +} + +describe('PromQueryEditorByApp', () => { + it('should render simplified query editor for cloud alerting', () => { + const { getByTestId, queryByTestId } = setup(CoreApp.CloudAlerting); + + expect(getByTestId(alertingTestIds.editor)).toBeInTheDocument(); + expect(queryByTestId(regularTestIds.editor)).toBeNull(); + }); + + it('should render regular query editor for unkown apps', () => { + const { getByTestId, queryByTestId } = setup(CoreApp.Unknown); + + expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); + expect(queryByTestId(alertingTestIds.editor)).toBeNull(); + }); + + it('should render regular query editor for explore', () => { + const { getByTestId, queryByTestId } = setup(CoreApp.Explore); + + expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); + expect(queryByTestId(alertingTestIds.editor)).toBeNull(); + }); + + it('should render regular query editor for dashboard', () => { + const { getByTestId, queryByTestId } = setup(CoreApp.Dashboard); + + expect(getByTestId(regularTestIds.editor)).toBeInTheDocument(); + expect(queryByTestId(alertingTestIds.editor)).toBeNull(); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx new file mode 100644 index 00000000..f3c5c563 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; +import { CoreApp } from '@grafana/data'; +import { PromQueryEditorProps } from './types'; +import { PromQueryEditor } from './PromQueryEditor'; +import { PromQueryEditorForAlerting } from './PromQueryEditorForAlerting'; + +export function PromQueryEditorByApp(props: PromQueryEditorProps) { + const { app } = props; + + switch (app) { + case CoreApp.CloudAlerting: + return ; + default: + return ; + } +} + +export default memo(PromQueryEditorByApp); diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx new file mode 100644 index 00000000..effb68b1 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import PromQueryField from './PromQueryField'; +import { PromQueryEditorProps } from './types'; + +export function PromQueryEditorForAlerting(props: PromQueryEditorProps) { + const { datasource, query, range, data, onChange, onRunQuery } = props; + + return ( + + ); +} + +export const testIds = { + editor: 'prom-editor-cloud-alerting', +}; diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx new file mode 100644 index 00000000..dc0a78aa --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx @@ -0,0 +1,179 @@ +// @ts-ignore +import RCCascader from 'rc-cascader'; +import React from 'react'; +import PromQlLanguageProvider from '../language_provider'; +import PromQueryField from './PromQueryField'; +import { DataSourceInstanceSettings, PanelData, LoadingState, DataFrame } from '@grafana/data'; +import { PromOptions } from '../types'; +import { render, screen } from '@testing-library/react'; + +// the monaco-based editor uses lazy-loading and that does not work +// well with this test, and we do not need the monaco-related +// functionality in this test anyway, so we mock it out. +jest.mock('./monaco-query-field/MonacoQueryFieldWrapper', () => { + const fakeQueryField = () =>

prometheus query field

; + return { + MonacoQueryFieldWrapper: fakeQueryField, + }; +}); + +describe('PromQueryField', () => { + beforeAll(() => { + // @ts-ignore + window.getSelection = () => {}; + }); + + it('renders metrics chooser regularly if lookups are not disabled in the datasource settings', () => { + const datasource = ({ + languageProvider: { + start: () => Promise.resolve([]), + syntax: () => {}, + getLabelKeys: () => [], + metrics: [], + }, + getInitHints: () => [], + } as unknown) as DataSourceInstanceSettings; + + const queryField = render( + {}} + onChange={() => {}} + history={[]} + /> + ); + + expect(queryField.getAllByRole('button')).toHaveLength(1); + }); + + it('renders a disabled metrics chooser if lookups are disabled in datasource settings', () => { + const datasource = ({ + languageProvider: { + start: () => Promise.resolve([]), + syntax: () => {}, + getLabelKeys: () => [], + metrics: [], + }, + getInitHints: () => [], + } as unknown) as DataSourceInstanceSettings; + const queryField = render( + {}} + onChange={() => {}} + history={[]} + /> + ); + + const bcButton = queryField.getByRole('button'); + expect(bcButton).toBeDisabled(); + }); + + it('renders an initial hint if no data and initial hint provided', () => { + const datasource = ({ + languageProvider: { + start: () => Promise.resolve([]), + syntax: () => {}, + getLabelKeys: () => [], + metrics: [], + }, + getInitHints: () => [{ label: 'Initial hint', type: 'INFO' }], + } as unknown) as DataSourceInstanceSettings; + render( + {}} + onChange={() => {}} + history={[]} + /> + ); + expect(screen.getByText('Initial hint')).toBeInTheDocument(); + }); + + it('renders query hint if data, query hint and initial hint provided', () => { + const datasource = ({ + languageProvider: { + start: () => Promise.resolve([]), + syntax: () => {}, + getLabelKeys: () => [], + metrics: [], + }, + getInitHints: () => [{ label: 'Initial hint', type: 'INFO' }], + getQueryHints: () => [{ label: 'Query hint', type: 'INFO' }], + } as unknown) as DataSourceInstanceSettings; + render( + {}} + onChange={() => {}} + history={[]} + data={ + { + series: [{ name: 'test name' }] as DataFrame[], + state: LoadingState.Done, + } as PanelData + } + /> + ); + expect(screen.getByText('Query hint')).toBeInTheDocument(); + expect(screen.queryByText('Initial hint')).not.toBeInTheDocument(); + }); + + it('refreshes metrics when the data source changes', async () => { + const defaultProps = { + query: { expr: '', refId: '' }, + onRunQuery: () => {}, + onChange: () => {}, + history: [], + }; + const metrics = ['foo', 'bar']; + const queryField = render( + [], + }} + {...defaultProps} + /> + ); + + const changedMetrics = ['baz', 'moo']; + queryField.rerender( + + ); + + // If we check the label browser right away it should be in loading state + let labelBrowser = screen.getByRole('button'); + expect(labelBrowser.textContent).toContain('Loading'); + }); +}); + +function makeLanguageProvider(options: { metrics: string[][] }) { + const metricsStack = [...options.metrics]; + return ({ + histogramMetrics: [] as any, + metrics: [], + metricsMetadata: {}, + lookupsDisabled: false, + getLabelKeys: () => [], + start() { + this.metrics = metricsStack.shift(); + return Promise.resolve([]); + }, + } as any) as PromQlLanguageProvider; +} diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx new file mode 100644 index 00000000..8de43579 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx @@ -0,0 +1,336 @@ +import React, { ReactNode } from 'react'; + +import { Plugin } from 'slate'; +import { + SlatePrism, + TypeaheadInput, + TypeaheadOutput, + BracesPlugin, + DOMUtil, + SuggestionsState, + Icon, +} from '@grafana/ui'; + +import { LanguageMap, languages as prismLanguages } from 'prismjs'; + +// dom also includes Element polyfills +import { PromQuery, PromOptions } from '../types'; +import { roundMsToMin } from '../language_utils'; +import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/CancelablePromise'; +import { QueryEditorProps, QueryHint, isDataFrame, toLegacyResponseData, TimeRange, CoreApp } from '@grafana/data'; +import { PrometheusDatasource } from '../datasource'; +import { PrometheusMetricsBrowser } from './PrometheusMetricsBrowser'; +import { MonacoQueryFieldWrapper } from './monaco-query-field/MonacoQueryFieldWrapper'; +import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider'; + +export const RECORDING_RULES_GROUP = '__recording_rules__'; +const LAST_USED_LABELS_KEY = 'grafana.datasources.prometheus.browser.labels'; + +function getChooserText(metricsLookupDisabled: boolean, hasSyntax: boolean, hasMetrics: boolean) { + if (metricsLookupDisabled) { + return '(Disabled)'; + } + + if (!hasSyntax) { + return 'Loading metrics...'; + } + + if (!hasMetrics) { + return '(No metrics found)'; + } + + return 'Metrics browser'; +} + +export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: SuggestionsState): string { + // Modify suggestion based on context + switch (typeaheadContext) { + case 'context-labels': { + const nextChar = DOMUtil.getNextCharacter(); + if (!nextChar || nextChar === '}' || nextChar === ',') { + suggestion += '='; + } + break; + } + + case 'context-label-values': { + // Always add quotes and remove existing ones instead + if (!typeaheadText.match(/^(!?=~?"|")/)) { + suggestion = `"${suggestion}`; + } + if (DOMUtil.getNextCharacter() !== '"') { + suggestion = `${suggestion}"`; + } + break; + } + + default: + } + return suggestion; +} + +interface PromQueryFieldProps extends QueryEditorProps { + ExtraFieldElement?: ReactNode; + 'data-testid'?: string; +} + +interface PromQueryFieldState { + labelBrowserVisible: boolean; + syntaxLoaded: boolean; + hint: QueryHint | null; +} + +class PromQueryField extends React.PureComponent { + plugins: Plugin[]; + declare languageProviderInitializationPromise: CancelablePromise; + + constructor(props: PromQueryFieldProps, context: React.Context) { + super(props, context); + + this.plugins = [ + BracesPlugin(), + SlatePrism( + { + onlyIn: (node: any) => node.type === 'code_block', + getSyntax: (node: any) => 'promql', + }, + { ...(prismLanguages as LanguageMap), promql: this.props.datasource.languageProvider.syntax } + ), + ]; + + this.state = { + labelBrowserVisible: false, + syntaxLoaded: false, + hint: null, + }; + } + + componentDidMount() { + if (this.props.datasource.languageProvider) { + this.refreshMetrics(); + } + this.refreshHint(); + } + + componentWillUnmount() { + if (this.languageProviderInitializationPromise) { + this.languageProviderInitializationPromise.cancel(); + } + } + + componentDidUpdate(prevProps: PromQueryFieldProps) { + const { + data, + datasource: { languageProvider }, + range, + } = this.props; + + if (languageProvider !== prevProps.datasource.languageProvider) { + // We reset this only on DS change so we do not flesh loading state on every rangeChange which happens on every + // query run if using relative range. + this.setState({ + syntaxLoaded: false, + }); + } + + const changedRangeToRefresh = this.rangeChangedToRefresh(range, prevProps.range); + // We want to refresh metrics when language provider changes and/or when range changes (we round up intervals to a minute) + if (languageProvider !== prevProps.datasource.languageProvider || changedRangeToRefresh) { + this.refreshMetrics(); + } + + if (data && prevProps.data && prevProps.data.series !== data.series) { + this.refreshHint(); + } + } + + refreshHint = () => { + const { datasource, query, data } = this.props; + const initHints = datasource.getInitHints(); + const initHint = initHints.length > 0 ? initHints[0] : null; + + if (!data || data.series.length === 0) { + this.setState({ + hint: initHint, + }); + return; + } + + const result = isDataFrame(data.series[0]) ? data.series.map(toLegacyResponseData) : data.series; + const queryHints = datasource.getQueryHints(query, result); + let queryHint = queryHints.length > 0 ? queryHints[0] : null; + + this.setState({ hint: queryHint ?? initHint }); + }; + + refreshMetrics = async () => { + const { + datasource: { languageProvider }, + } = this.props; + + this.languageProviderInitializationPromise = makePromiseCancelable(languageProvider.start()); + + try { + const remainingTasks = await this.languageProviderInitializationPromise.promise; + await Promise.all(remainingTasks); + this.onUpdateLanguage(); + } catch (err) { + if (!err.isCanceled) { + throw err; + } + } + }; + + rangeChangedToRefresh(range?: TimeRange, prevRange?: TimeRange): boolean { + if (range && prevRange) { + const sameMinuteFrom = roundMsToMin(range.from.valueOf()) === roundMsToMin(prevRange.from.valueOf()); + const sameMinuteTo = roundMsToMin(range.to.valueOf()) === roundMsToMin(prevRange.to.valueOf()); + // If both are same, don't need to refresh. + return !(sameMinuteFrom && sameMinuteTo); + } + return false; + } + + /** + * TODO #33976: Remove this, add histogram group (query = `histogram_quantile(0.95, sum(rate(${metric}[5m])) by (le))`;) + */ + onChangeLabelBrowser = (selector: string) => { + this.onChangeQuery(selector, true); + this.setState({ labelBrowserVisible: false }); + }; + + onChangeQuery = (value: string, override?: boolean) => { + // Send text change to parent + const { query, onChange, onRunQuery } = this.props; + if (onChange) { + const nextQuery: PromQuery = { ...query, expr: value }; + onChange(nextQuery); + + if (override && onRunQuery) { + onRunQuery(); + } + } + }; + + onClickChooserButton = () => { + this.setState((state) => ({ labelBrowserVisible: !state.labelBrowserVisible })); + }; + + onClickHintFix = () => { + const { datasource, query, onChange, onRunQuery } = this.props; + const { hint } = this.state; + + onChange(datasource.modifyQuery(query, hint!.fix!.action)); + onRunQuery(); + }; + + onUpdateLanguage = () => { + const { + datasource: { languageProvider }, + } = this.props; + const { metrics } = languageProvider; + + if (!metrics) { + return; + } + + this.setState({ syntaxLoaded: true }); + }; + + onTypeahead = async (typeahead: TypeaheadInput): Promise => { + const { + datasource: { languageProvider }, + } = this.props; + + if (!languageProvider) { + return { suggestions: [] }; + } + + const { history } = this.props; + const { prefix, text, value, wrapperClasses, labelKey } = typeahead; + + const result = await languageProvider.provideCompletionItems( + { text, value, prefix, wrapperClasses, labelKey }, + { history } + ); + + return result; + }; + + render() { + const { + datasource, + datasource: { languageProvider }, + query, + ExtraFieldElement, + history = [], + } = this.props; + + const { labelBrowserVisible, syntaxLoaded, hint } = this.state; + const hasMetrics = languageProvider.metrics.length > 0; + const chooserText = getChooserText(datasource.lookupsDisabled, syntaxLoaded, hasMetrics); + const buttonDisabled = !(syntaxLoaded && hasMetrics); + + return ( + storageKey={LAST_USED_LABELS_KEY} defaultValue={[]}> + {(lastUsedLabels, onLastUsedLabelsSave, onLastUsedLabelsDelete) => { + return ( + <> +

+ + +

+ +

+ {labelBrowserVisible && ( +

+ +

+ )} + + {ExtraFieldElement} + {hint ? ( +

+ {hint.label}{' '} + {hint.fix ? ( + + {hint.fix.label} + + ) : null} +

+ ) : null} + + ); + }} + + ); + } +} + +export default PromQueryField; diff --git a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx new file mode 100644 index 00000000..367d86d2 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx @@ -0,0 +1,313 @@ +import React from 'react'; +import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { getTheme } from '@grafana/ui'; +import { + buildSelector, + facetLabels, + SelectableLabel, + UnthemedPrometheusMetricsBrowser, + BrowserProps, +} from './PrometheusMetricsBrowser'; +import PromQlLanguageProvider from '../language_provider'; + +describe('buildSelector()', () => { + it('returns an empty selector for no labels', () => { + expect(buildSelector([])).toEqual('{}'); + }); + it('returns an empty selector for selected labels with no values', () => { + const labels: SelectableLabel[] = [{ name: 'foo', selected: true }]; + expect(buildSelector(labels)).toEqual('{}'); + }); + it('returns an empty selector for one selected label with no selected values', () => { + const labels: SelectableLabel[] = [{ name: 'foo', selected: true, values: [{ name: 'bar' }] }]; + expect(buildSelector(labels)).toEqual('{}'); + }); + it('returns a simple selector from a selected label with a selected value', () => { + const labels: SelectableLabel[] = [{ name: 'foo', selected: true, values: [{ name: 'bar', selected: true }] }]; + expect(buildSelector(labels)).toEqual('{foo="bar"}'); + }); + it('metric selector without labels', () => { + const labels: SelectableLabel[] = [{ name: '__name__', selected: true, values: [{ name: 'foo', selected: true }] }]; + expect(buildSelector(labels)).toEqual('foo{}'); + }); + it('selector with multiple metrics', () => { + const labels: SelectableLabel[] = [ + { + name: '__name__', + selected: true, + values: [ + { name: 'foo', selected: true }, + { name: 'bar', selected: true }, + ], + }, + ]; + expect(buildSelector(labels)).toEqual('{__name__=~"foo|bar"}'); + }); + it('metric selector with labels', () => { + const labels: SelectableLabel[] = [ + { name: '__name__', selected: true, values: [{ name: 'foo', selected: true }] }, + { name: 'bar', selected: true, values: [{ name: 'baz', selected: true }] }, + ]; + expect(buildSelector(labels)).toEqual('foo{bar="baz"}'); + }); +}); + +describe('facetLabels()', () => { + const possibleLabels = { + cluster: ['dev'], + namespace: ['alertmanager'], + }; + const labels: SelectableLabel[] = [ + { name: 'foo', selected: true, values: [{ name: 'bar' }] }, + { name: 'cluster', values: [{ name: 'dev' }, { name: 'ops' }, { name: 'prod' }] }, + { name: 'namespace', values: [{ name: 'alertmanager' }] }, + ]; + + it('returns no labels given an empty label set', () => { + expect(facetLabels([], {})).toEqual([]); + }); + + it('marks all labels as hidden when no labels are possible', () => { + const result = facetLabels(labels, {}); + expect(result.length).toEqual(labels.length); + expect(result[0].hidden).toBeTruthy(); + expect(result[0].values).toBeUndefined(); + }); + + it('keeps values as facetted when they are possible', () => { + const result = facetLabels(labels, possibleLabels); + expect(result.length).toEqual(labels.length); + expect(result[0].hidden).toBeTruthy(); + expect(result[0].values).toBeUndefined(); + expect(result[1].hidden).toBeFalsy(); + expect(result[1].values!.length).toBe(1); + expect(result[1].values![0].name).toBe('dev'); + }); + + it('does not facet out label values that are currently being facetted', () => { + const result = facetLabels(labels, possibleLabels, 'cluster'); + expect(result.length).toEqual(labels.length); + expect(result[0].hidden).toBeTruthy(); + expect(result[1].hidden).toBeFalsy(); + // 'cluster' is being facetted, should show all 3 options even though only 1 is possible + expect(result[1].values!.length).toBe(3); + expect(result[2].values!.length).toBe(1); + }); +}); + +describe('PrometheusMetricsBrowser', () => { + const setupProps = (): BrowserProps => { + const mockLanguageProvider = { + start: () => Promise.resolve(), + getLabelValues: (name: string) => { + switch (name) { + case 'label1': + return ['value1-1', 'value1-2']; + case 'label2': + return ['value2-1', 'value2-2']; + case 'label3': + return ['value3-1', 'value3-2']; + } + return []; + }, + fetchSeriesLabels: (selector: string) => { + switch (selector) { + case '{label1="value1-1"}': + return { label1: ['value1-1'], label2: ['value2-1'], label3: ['value3-1'] }; + case '{label1=~"value1-1|value1-2"}': + return { label1: ['value1-1', 'value1-2'], label2: ['value2-1'], label3: ['value3-1', 'value3-2'] }; + } + // Allow full set by default + return { + label1: ['value1-1', 'value1-2'], + label2: ['value2-1', 'value2-2'], + }; + }, + getLabelKeys: () => ['label1', 'label2', 'label3'], + }; + + const defaults: BrowserProps = { + theme: getTheme(), + onChange: () => {}, + autoSelect: 0, + languageProvider: (mockLanguageProvider as unknown) as PromQlLanguageProvider, + lastUsedLabels: [], + storeLastUsedLabels: () => {}, + deleteLastUsedLabels: () => {}, + }; + + return defaults; + }; + + // Clear label selection manually because it's saved in localStorage + afterEach(() => { + const clearBtn = screen.getByLabelText('Selector clear button'); + userEvent.click(clearBtn); + }); + + it('renders and loader shows when empty, and then first set of labels', async () => { + const props = setupProps(); + render(); + // Loading appears and dissappears + screen.getByText(/Loading labels/); + await waitFor(() => { + expect(screen.queryByText(/Loading labels/)).not.toBeInTheDocument(); + }); + // Initial set of labels is available and not selected + expect(screen.queryByRole('option', { name: 'label1' })).toBeInTheDocument(); + expect(screen.queryByRole('option', { name: 'label1', selected: true })).not.toBeInTheDocument(); + expect(screen.queryByRole('option', { name: 'label2' })).toBeInTheDocument(); + expect(screen.queryByRole('option', { name: 'label2', selected: true })).not.toBeInTheDocument(); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); + }); + + it('allows label and value selection/deselection', async () => { + const props = setupProps(); + render(); + // Selecting label2 + const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); + expect(screen.queryByRole('list', { name: /Values/ })).not.toBeInTheDocument(); + userEvent.click(label2); + expect(screen.queryByRole('option', { name: /label2/, selected: true })).toBeInTheDocument(); + // List of values for label2 appears + expect(await screen.findAllByRole('list')).toHaveLength(1); + expect(screen.queryByLabelText(/Values for/)).toHaveTextContent('label2'); + expect(screen.queryByRole('option', { name: 'value2-1' })).toBeInTheDocument(); + expect(screen.queryByRole('option', { name: 'value2-2' })).toBeInTheDocument(); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); + // Selecting label1, list for its values appears + const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); + userEvent.click(label1); + expect(screen.queryByRole('option', { name: /label1/, selected: true })).toBeInTheDocument(); + await screen.findByLabelText('Values for label1'); + expect(await screen.findAllByRole('list', { name: /Values/ })).toHaveLength(2); + // Selecting value2-2 of label2 + const value = await screen.findByRole('option', { name: 'value2-2', selected: false }); + userEvent.click(value); + await screen.findByRole('option', { name: 'value2-2', selected: true }); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{label2="value2-2"}'); + // Selecting value2-1 of label2, both values now selected + const value2 = await screen.findByRole('option', { name: 'value2-1', selected: false }); + userEvent.click(value2); + // await screen.findByRole('option', {name: 'value2-1', selected: true}); + await screen.findByText('{label2=~"value2-1|value2-2"}'); + // Deselecting value2-2, one value should remain + const selectedValue = await screen.findByRole('option', { name: 'value2-2', selected: true }); + userEvent.click(selectedValue); + await screen.findByRole('option', { name: 'value2-1', selected: true }); + await screen.findByRole('option', { name: 'value2-2', selected: false }); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{label2="value2-1"}'); + }); + + it('allows label selection from multiple labels', async () => { + const props = setupProps(); + render(); + + // Selecting label2 + const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); + userEvent.click(label2); + // List of values for label2 appears + expect(await screen.findAllByRole('list')).toHaveLength(1); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); + // Selecting label1, list for its values appears + const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); + userEvent.click(label1); + await screen.findByLabelText('Values for label1'); + expect(await screen.findAllByRole('list', { name: /Values/ })).toHaveLength(2); + // Selecting value2-1 of label2 + const value2 = await screen.findByRole('option', { name: 'value2-1', selected: false }); + userEvent.click(value2); + await screen.findByText('{label2="value2-1"}'); + + // Selecting value from label1 for combined selector + const value1 = await screen.findByRole('option', { name: 'value1-2', selected: false }); + userEvent.click(value1); + await screen.findByRole('option', { name: 'value1-2', selected: true }); + await screen.findByText('{label1="value1-2",label2="value2-1"}'); + // Deselect label1 should remove label and value + const selectedLabel = (await screen.findAllByRole('option', { name: /label1/, selected: true }))[0]; + userEvent.click(selectedLabel); + await screen.findByRole('option', { name: /label1/, selected: false }); + expect(await screen.findAllByRole('list', { name: /Values/ })).toHaveLength(1); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{label2="value2-1"}'); + }); + + it('allows clearing the label selection', async () => { + const props = setupProps(); + render(); + + // Selecting label2 + const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); + userEvent.click(label2); + // List of values for label2 appears + expect(await screen.findAllByRole('list')).toHaveLength(1); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); + // Selecting label1, list for its values appears + const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); + userEvent.click(label1); + await screen.findByLabelText('Values for label1'); + expect(await screen.findAllByRole('list', { name: /Values/ })).toHaveLength(2); + // Selecting value2-1 of label2 + const value2 = await screen.findByRole('option', { name: 'value2-1', selected: false }); + userEvent.click(value2); + await screen.findByText('{label2="value2-1"}'); + + // Clear selector + const clearBtn = screen.getByLabelText('Selector clear button'); + userEvent.click(clearBtn); + await screen.findByRole('option', { name: /label2/, selected: false }); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); + }); + + it('filters values by input text', async () => { + const props = setupProps(); + render(); + // Selecting label2 and label1 + const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); + userEvent.click(label2); + const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); + userEvent.click(label1); + await screen.findByLabelText('Values for label1'); + await screen.findByLabelText('Values for label2'); + expect(await screen.findAllByRole('option', { name: /value/ })).toHaveLength(4); + // Typing '1' to filter for values + userEvent.type(screen.getByLabelText('Filter expression for label values'), '1'); + expect(screen.getByLabelText('Filter expression for label values')).toHaveValue('1'); + expect(await screen.findAllByRole('option', { name: /value/ })).toHaveLength(3); + expect(screen.queryByRole('option', { name: 'value2-2' })).not.toBeInTheDocument(); + }); + + it('facets labels', async () => { + const props = setupProps(); + render(); + // Selecting label2 and label1 + const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); + userEvent.click(label2); + const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); + userEvent.click(label1); + await screen.findByLabelText('Values for label1'); + await screen.findByLabelText('Values for label2'); + expect(await screen.findAllByRole('option', { name: /value/ })).toHaveLength(4); + expect(screen.queryByRole('option', { name: /label3/ })).toHaveTextContent('label3'); + // Click value1-1 which triggers facetting for value3-x, and still show all value1-x + const value1 = await screen.findByRole('option', { name: 'value1-1', selected: false }); + userEvent.click(value1); + await waitForElementToBeRemoved(screen.queryByRole('option', { name: 'value2-2' })); + expect(screen.queryByRole('option', { name: 'value1-2' })).toBeInTheDocument(); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{label1="value1-1"}'); + expect(screen.queryByRole('option', { name: /label3/ })).toHaveTextContent('label3 (1)'); + // Click value1-2 for which facetting will allow more values for value3-x + const value12 = await screen.findByRole('option', { name: 'value1-2', selected: false }); + userEvent.click(value12); + await screen.findByRole('option', { name: 'value1-2', selected: true }); + await screen.findByRole('option', { name: /label3/, selected: false }); + userEvent.click(screen.getByRole('option', { name: /label3/ })); + await screen.findByLabelText('Values for label3'); + expect(screen.queryByRole('option', { name: 'value1-1', selected: true })).toBeInTheDocument(); + expect(screen.queryByRole('option', { name: 'value1-2', selected: true })).toBeInTheDocument(); + expect(screen.queryByLabelText('selector')).toHaveTextContent('{label1=~"value1-1|value1-2"}'); + expect(screen.queryAllByRole('option', { name: /label3/ })[0]).toHaveTextContent('label3 (2)'); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx new file mode 100644 index 00000000..eaa70ee0 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx @@ -0,0 +1,657 @@ +import React, { ChangeEvent } from 'react'; +import { + Button, + HorizontalGroup, + Input, + Label, + LoadingPlaceholder, + stylesFactory, + withTheme, + BrowserLabel as PromLabel, +} from '@grafana/ui'; +import PromQlLanguageProvider from '../language_provider'; +import { escapeLabelValueInExactSelector, escapeLabelValueInRegexSelector } from '../language_utils'; +import { css, cx } from '@emotion/css'; +import { FixedSizeList } from 'react-window'; + +import { GrafanaTheme } from '@grafana/data'; + +// Hard limit on labels to render +const EMPTY_SELECTOR = '{}'; +const METRIC_LABEL = '__name__'; +const LIST_ITEM_SIZE = 25; + +export interface BrowserProps { + languageProvider: PromQlLanguageProvider; + onChange: (selector: string) => void; + theme: GrafanaTheme; + autoSelect?: number; + hide?: () => void; + lastUsedLabels: string[]; + storeLastUsedLabels: (labels: string[]) => void; + deleteLastUsedLabels: () => void; +} + +interface BrowserState { + labels: SelectableLabel[]; + labelSearchTerm: string; + metricSearchTerm: string; + status: string; + error: string; + validationStatus: string; + valueSearchTerm: string; +} + +interface FacettableValue { + name: string; + selected?: boolean; + details?: string; +} + +export interface SelectableLabel { + name: string; + selected?: boolean; + loading?: boolean; + values?: FacettableValue[]; + hidden?: boolean; + facets?: number; +} + +export function buildSelector(labels: SelectableLabel[]): string { + let singleMetric = ''; + const selectedLabels = []; + for (const label of labels) { + if ((label.name === METRIC_LABEL || label.selected) && label.values && label.values.length > 0) { + const selectedValues = label.values.filter((value) => value.selected).map((value) => value.name); + if (selectedValues.length > 1) { + selectedLabels.push(`${label.name}=~"${selectedValues.map(escapeLabelValueInRegexSelector).join('|')}"`); + } else if (selectedValues.length === 1) { + if (label.name === METRIC_LABEL) { + singleMetric = selectedValues[0]; + } else { + selectedLabels.push(`${label.name}="${escapeLabelValueInExactSelector(selectedValues[0])}"`); + } + } + } + } + return [singleMetric, '{', selectedLabels.join(','), '}'].join(''); +} + +export function facetLabels( + labels: SelectableLabel[], + possibleLabels: Record, + lastFacetted?: string +): SelectableLabel[] { + return labels.map((label) => { + const possibleValues = possibleLabels[label.name]; + if (possibleValues) { + let existingValues: FacettableValue[]; + if (label.name === lastFacetted && label.values) { + // Facetting this label, show all values + existingValues = label.values; + } else { + // Keep selection in other facets + const selectedValues: Set = new Set( + label.values?.filter((value) => value.selected).map((value) => value.name) || [] + ); + // Values for this label have not been requested yet, let's use the facetted ones as the initial values + existingValues = possibleValues.map((value) => ({ name: value, selected: selectedValues.has(value) })); + } + return { + ...label, + loading: false, + values: existingValues, + hidden: !possibleValues, + facets: existingValues.length, + }; + } + + // Label is facetted out, hide all values + return { ...label, loading: false, hidden: !possibleValues, values: undefined, facets: 0 }; + }); +} + +const getStyles = stylesFactory((theme: GrafanaTheme) => ({ + wrapper: css` + background-color: ${theme.colors.bg2}; + padding: ${theme.spacing.sm}; + width: 100%; + `, + list: css` + margin-top: ${theme.spacing.sm}; + display: flex; + flex-wrap: wrap; + max-height: 200px; + overflow: auto; + align-content: flex-start; + `, + section: css` + & + & { + margin: ${theme.spacing.md} 0; + } + position: relative; + `, + selector: css` + font-family: ${theme.typography.fontFamily.monospace}; + margin-bottom: ${theme.spacing.sm}; + `, + status: css` + padding: ${theme.spacing.xs}; + color: ${theme.colors.textSemiWeak}; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* using absolute positioning because flex interferes with ellipsis */ + position: absolute; + width: 50%; + right: 0; + text-align: right; + transition: opacity 100ms linear; + opacity: 0; + `, + statusShowing: css` + opacity: 1; + `, + error: css` + color: ${theme.palette.brandDanger}; + `, + valueList: css` + margin-right: ${theme.spacing.sm}; + `, + valueListWrapper: css` + border-left: 1px solid ${theme.colors.border2}; + margin: ${theme.spacing.sm} 0; + padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.sm}; + `, + valueListArea: css` + display: flex; + flex-wrap: wrap; + margin-top: ${theme.spacing.sm}; + `, + valueTitle: css` + margin-left: -${theme.spacing.xs}; + margin-bottom: ${theme.spacing.sm}; + `, + validationStatus: css` + padding: ${theme.spacing.xs}; + margin-bottom: ${theme.spacing.sm}; + color: ${theme.colors.textStrong}; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + `, +})); + +/** + * TODO #33976: Remove duplicated code. The component is very similar to LokiLabelBrowser.tsx. Check if it's possible + * to create a single, generic component. + */ +export class UnthemedPrometheusMetricsBrowser extends React.Component { + valueListsRef = React.createRef(); + state: BrowserState = { + labels: [] as SelectableLabel[], + labelSearchTerm: '', + metricSearchTerm: '', + status: 'Ready', + error: '', + validationStatus: '', + valueSearchTerm: '', + }; + + onChangeLabelSearch = (event: ChangeEvent) => { + this.setState({ labelSearchTerm: event.target.value }); + }; + + onChangeMetricSearch = (event: ChangeEvent) => { + this.setState({ metricSearchTerm: event.target.value }); + }; + + onChangeValueSearch = (event: ChangeEvent) => { + this.setState({ valueSearchTerm: event.target.value }); + }; + + onClickRunQuery = () => { + const selector = buildSelector(this.state.labels); + this.props.onChange(selector); + }; + + onClickRunRateQuery = () => { + const selector = buildSelector(this.state.labels); + const query = `rate(${selector}[$__interval])`; + this.props.onChange(query); + }; + + onClickClear = () => { + this.setState((state) => { + const labels: SelectableLabel[] = state.labels.map((label) => ({ + ...label, + values: undefined, + selected: false, + loading: false, + hidden: false, + facets: undefined, + })); + return { + labels, + labelSearchTerm: '', + metricSearchTerm: '', + status: '', + error: '', + validationStatus: '', + valueSearchTerm: '', + }; + }); + this.props.deleteLastUsedLabels(); + // Get metrics + this.fetchValues(METRIC_LABEL, EMPTY_SELECTOR); + }; + + onClickLabel = (name: string, value: string | undefined, event: React.MouseEvent) => { + const label = this.state.labels.find((l) => l.name === name); + if (!label) { + return; + } + // Toggle selected state + const selected = !label.selected; + let nextValue: Partial = { selected }; + if (label.values && !selected) { + // Deselect all values if label was deselected + const values = label.values.map((value) => ({ ...value, selected: false })); + nextValue = { ...nextValue, facets: 0, values }; + } + // Resetting search to prevent empty results + this.setState({ labelSearchTerm: '' }); + this.updateLabelState(name, nextValue, '', () => this.doFacettingForLabel(name)); + }; + + onClickValue = (name: string, value: string | undefined, event: React.MouseEvent) => { + const label = this.state.labels.find((l) => l.name === name); + if (!label || !label.values) { + return; + } + // Resetting search to prevent empty results + this.setState({ labelSearchTerm: '' }); + // Toggling value for selected label, leaving other values intact + const values = label.values.map((v) => ({ ...v, selected: v.name === value ? !v.selected : v.selected })); + this.updateLabelState(name, { values }, '', () => this.doFacetting(name)); + }; + + onClickMetric = (name: string, value: string | undefined, event: React.MouseEvent) => { + // Finding special metric label + const label = this.state.labels.find((l) => l.name === name); + if (!label || !label.values) { + return; + } + // Resetting search to prevent empty results + this.setState({ metricSearchTerm: '' }); + // Toggling value for selected label, leaving other values intact + const values = label.values.map((v) => ({ + ...v, + selected: v.name === value || v.selected ? !v.selected : v.selected, + })); + // Toggle selected state of special metrics label + const selected = values.some((v) => v.selected); + this.updateLabelState(name, { selected, values }, '', () => this.doFacetting(name)); + }; + + onClickValidate = () => { + const selector = buildSelector(this.state.labels); + this.validateSelector(selector); + }; + + updateLabelState(name: string, updatedFields: Partial, status = '', cb?: () => void) { + this.setState((state) => { + const labels: SelectableLabel[] = state.labels.map((label) => { + if (label.name === name) { + return { ...label, ...updatedFields }; + } + return label; + }); + // New status overrides errors + const error = status ? '' : state.error; + return { labels, status, error, validationStatus: '' }; + }, cb); + } + + componentDidMount() { + const { languageProvider, lastUsedLabels } = this.props; + if (languageProvider) { + const selectedLabels: string[] = lastUsedLabels; + languageProvider.start().then(() => { + let rawLabels: string[] = languageProvider.getLabelKeys(); + // Get metrics + this.fetchValues(METRIC_LABEL, EMPTY_SELECTOR); + // Auto-select previously selected labels + const labels: SelectableLabel[] = rawLabels.map((label, i, arr) => ({ + name: label, + selected: selectedLabels.includes(label), + loading: false, + })); + // Pre-fetch values for selected labels + this.setState({ labels }, () => { + this.state.labels.forEach((label) => { + if (label.selected) { + this.fetchValues(label.name, EMPTY_SELECTOR); + } + }); + }); + }); + } + } + + doFacettingForLabel(name: string) { + const label = this.state.labels.find((l) => l.name === name); + if (!label) { + return; + } + const selectedLabels = this.state.labels.filter((label) => label.selected).map((label) => label.name); + this.props.storeLastUsedLabels(selectedLabels); + if (label.selected) { + // Refetch values for newly selected label... + if (!label.values) { + this.fetchValues(name, buildSelector(this.state.labels)); + } + } else { + // Only need to facet when deselecting labels + this.doFacetting(); + } + } + + doFacetting = (lastFacetted?: string) => { + const selector = buildSelector(this.state.labels); + if (selector === EMPTY_SELECTOR) { + // Clear up facetting + const labels: SelectableLabel[] = this.state.labels.map((label) => { + return { ...label, facets: 0, values: undefined, hidden: false }; + }); + this.setState({ labels }, () => { + // Get fresh set of values + this.state.labels.forEach( + (label) => (label.selected || label.name === METRIC_LABEL) && this.fetchValues(label.name, selector) + ); + }); + } else { + // Do facetting + this.fetchSeries(selector, lastFacetted); + } + }; + + async fetchValues(name: string, selector: string) { + const { languageProvider } = this.props; + this.updateLabelState(name, { loading: true }, `Fetching values for ${name}`); + try { + let rawValues = await languageProvider.getLabelValues(name); + // If selector changed, clear loading state and discard result by returning early + if (selector !== buildSelector(this.state.labels)) { + this.updateLabelState(name, { loading: false }); + return; + } + const values: FacettableValue[] = []; + const { metricsMetadata } = languageProvider; + for (const labelValue of rawValues) { + const value: FacettableValue = { name: labelValue }; + // Adding type/help text to metrics + if (name === METRIC_LABEL && metricsMetadata) { + const meta = metricsMetadata[labelValue]; + if (meta) { + value.details = `(${meta.type}) ${meta.help}`; + } + } + values.push(value); + } + this.updateLabelState(name, { values, loading: false }); + } catch (error) { + console.error(error); + } + } + + async fetchSeries(selector: string, lastFacetted?: string) { + const { languageProvider } = this.props; + if (lastFacetted) { + this.updateLabelState(lastFacetted, { loading: true }, `Facetting labels for ${selector}`); + } + try { + const possibleLabels = await languageProvider.fetchSeriesLabels(selector, true); + // If selector changed, clear loading state and discard result by returning early + if (selector !== buildSelector(this.state.labels)) { + if (lastFacetted) { + this.updateLabelState(lastFacetted, { loading: false }); + } + return; + } + if (Object.keys(possibleLabels).length === 0) { + this.setState({ error: `Empty results, no matching label for ${selector}` }); + return; + } + const labels: SelectableLabel[] = facetLabels(this.state.labels, possibleLabels, lastFacetted); + this.setState({ labels, error: '' }); + if (lastFacetted) { + this.updateLabelState(lastFacetted, { loading: false }); + } + } catch (error) { + console.error(error); + } + } + + async validateSelector(selector: string) { + const { languageProvider } = this.props; + this.setState({ validationStatus: `Validating selector ${selector}`, error: '' }); + const streams = await languageProvider.fetchSeries(selector); + this.setState({ validationStatus: `Selector is valid (${streams.length} series found)` }); + } + + render() { + const { theme } = this.props; + const { labels, labelSearchTerm, metricSearchTerm, status, error, validationStatus, valueSearchTerm } = this.state; + const styles = getStyles(theme); + if (labels.length === 0) { + return ( +

+ +

+ ); + } + + // Filter metrics + let metrics = labels.find((label) => label.name === METRIC_LABEL); + if (metrics && metricSearchTerm) { + metrics = { + ...metrics, + values: metrics.values?.filter((value) => value.selected || value.name.includes(metricSearchTerm)), + }; + } + + // Filter labels + let nonMetricLabels = labels.filter((label) => !label.hidden && label.name !== METRIC_LABEL); + if (labelSearchTerm) { + nonMetricLabels = nonMetricLabels.filter((label) => label.selected || label.name.includes(labelSearchTerm)); + } + + // Filter non-metric label values + let selectedLabels = nonMetricLabels.filter((label) => label.selected && label.values); + if (valueSearchTerm) { + selectedLabels = selectedLabels.map((label) => ({ + ...label, + values: label.values?.filter((value) => value.selected || value.name.includes(valueSearchTerm)), + })); + } + const selector = buildSelector(this.state.labels); + const empty = selector === EMPTY_SELECTOR; + const metricCount = metrics?.values?.length || 0; + + return ( +

+ +

+ 1. Select a metric +

+ +

+ (metrics!.values as FacettableValue[])[i].name} + width={300} + className={styles.valueList} + > + {({ index, style }) => { + const value = metrics?.values?.[index]; + if (!value) { + return null; + } + return ( +

+ +

+ ); + }} + +

+ +

+ + 2. Select labels to search in + +

+ +

+ {/* Using fixed height here to prevent jumpy layout */} +

+ {nonMetricLabels.map((label) => ( +

+ + 3. Select (multiple) values for your labels + +

+ +

+ {selectedLabels.map((label) => ( +

+ (label.values as FacettableValue[])[i].name} + width={200} + className={styles.valueList} + > + {({ index, style }) => { + const value = label.values?.[index]; + if (!value) { + return null; + } + return ( +

+ +

+ ); + }} + +

+ ))} +

+ + +

+ 4. Resulting selector +

+ {selector} +

+ {validationStatus &&

{validationStatus}

} + + + + + +

+ {error || status} +

+ +

+ ); + } +} + +export const PrometheusMetricsBrowser = withTheme(UnthemedPrometheusMetricsBrowser); diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx new file mode 100644 index 00000000..cadab747 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx @@ -0,0 +1,211 @@ +import React, { useRef, useEffect } from 'react'; +import { useTheme2, ReactMonacoEditor, Monaco, monacoTypes } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { css } from '@emotion/css'; +import { useLatest } from 'react-use'; +import { promLanguageDefinition } from 'monaco-promql'; +import { selectors } from '@grafana/e2e-selectors'; +import { getCompletionProvider, getSuggestOptions } from './monaco-completion-provider'; +import { Props } from './MonacoQueryFieldProps'; +import { getOverrideServices } from './getOverrideServices'; + +const options: monacoTypes.editor.IStandaloneEditorConstructionOptions = { + codeLens: false, + contextmenu: false, + // we need `fixedOverflowWidgets` because otherwise in grafana-dashboards + // the popup is clipped by the panel-visualizations. + fixedOverflowWidgets: true, + folding: false, + fontSize: 14, + lineDecorationsWidth: 8, // used as "padding-left" + lineNumbers: 'off', + minimap: { enabled: false }, + overviewRulerBorder: false, + overviewRulerLanes: 0, + padding: { + // these numbers were picked so that visually this matches the previous version + // of the query-editor the best + top: 4, + bottom: 5, + }, + renderLineHighlight: 'none', + scrollbar: { + vertical: 'hidden', + verticalScrollbarSize: 8, // used as "padding-right" + horizontal: 'hidden', + horizontalScrollbarSize: 0, + }, + scrollBeyondLastLine: false, + suggest: getSuggestOptions(), + suggestFontSize: 12, + wordWrap: 'on', +}; + +// this number was chosen by testing various values. it might be necessary +// because of the width of the border, not sure. +//it needs to do 2 things: +// 1. when the editor is single-line, it should make the editor height be visually correct +// 2. when the editor is multi-line, the editor should not be "scrollable" (meaning, +// you do a scroll-movement in the editor, and it will scroll the content by a couple pixels +// up & down. this we want to avoid) +const EDITOR_HEIGHT_OFFSET = 2; + +const PROMQL_LANG_ID = promLanguageDefinition.id; + +// we must only run the promql-setup code once +let PROMQL_SETUP_STARTED = false; + +function ensurePromQL(monaco: Monaco) { + if (PROMQL_SETUP_STARTED === false) { + PROMQL_SETUP_STARTED = true; + const { aliases, extensions, mimetypes, loader } = promLanguageDefinition; + monaco.languages.register({ id: PROMQL_LANG_ID, aliases, extensions, mimetypes }); + + loader().then((mod) => { + monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, mod.language); + monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, mod.languageConfiguration); + }); + } +} + +const getStyles = (theme: GrafanaTheme2) => { + return { + container: css` + border-radius: ${theme.shape.borderRadius()}; + border: 1px solid ${theme.components.input.borderColor}; + `, + }; +}; + +const MonacoQueryField = (props: Props) => { + // we need only one instance of `overrideServices` during the lifetime of the react component + const overrideServicesRef = useRef(getOverrideServices()); + const containerRef = useRef(null); + const { languageProvider, history, onBlur, onRunQuery, initialValue } = props; + + const lpRef = useLatest(languageProvider); + const historyRef = useLatest(history); + const onRunQueryRef = useLatest(onRunQuery); + const onBlurRef = useLatest(onBlur); + + const autocompleteDisposeFun = useRef<(() => void) | null>(null); + + const theme = useTheme2(); + const styles = getStyles(theme); + + useEffect(() => { + // when we unmount, we unregister the autocomplete-function, if it was registered + return () => { + autocompleteDisposeFun.current?.(); + }; + }, []); + + return ( +

+ { + ensurePromQL(monaco); + }} + onMount={(editor, monaco) => { + // we setup on-blur + editor.onDidBlurEditorWidget(() => { + onBlurRef.current(editor.getValue()); + }); + + // we construct a DataProvider object + const getSeries = (selector: string) => lpRef.current.getSeries(selector); + + const getHistory = () => + Promise.resolve(historyRef.current.map((h) => h.query.expr).filter((expr) => expr !== undefined)); + + const getAllMetricNames = () => { + const { metrics, metricsMetadata } = lpRef.current; + const result = metrics.map((m) => { + const metaItem = metricsMetadata?.[m]; + return { + name: m, + help: metaItem?.help ?? '', + type: metaItem?.type ?? '', + }; + }); + + return Promise.resolve(result); + }; + + const getAllLabelNames = () => Promise.resolve(lpRef.current.getLabelKeys()); + + const getLabelValues = (labelName: string) => lpRef.current.getLabelValues(labelName); + + const dataProvider = { getSeries, getHistory, getAllMetricNames, getAllLabelNames, getLabelValues }; + const completionProvider = getCompletionProvider(monaco, dataProvider); + + // completion-providers in monaco are not registered directly to editor-instances, + // they are registerd to languages. this makes it hard for us to have + // separate completion-providers for every query-field-instance + // (but we need that, because they might connect to different datasources). + // the trick we do is, we wrap the callback in a "proxy", + // and in the proxy, the first thing is, we check if we are called from + // "our editor instance", and if not, we just return nothing. if yes, + // we call the completion-provider. + const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = { + ...completionProvider, + provideCompletionItems: (model, position, context, token) => { + // if the model-id does not match, then this call is from a different editor-instance, + // not "our instance", so return nothing + if (editor.getModel()?.id !== model.id) { + return { suggestions: [] }; + } + return completionProvider.provideCompletionItems(model, position, context, token); + }, + }; + + const { dispose } = monaco.languages.registerCompletionItemProvider( + PROMQL_LANG_ID, + filteringCompletionProvider + ); + + autocompleteDisposeFun.current = dispose; + // this code makes the editor resize itself so that the content fits + // (it will grow taller when necessary) + // FIXME: maybe move this functionality into CodeEditor, like: + // + const updateElementHeight = () => { + const containerDiv = containerRef.current; + if (containerDiv !== null) { + const pixelHeight = editor.getContentHeight(); + containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`; + containerDiv.style.width = '100%'; + const pixelWidth = containerDiv.clientWidth; + editor.layout({ width: pixelWidth, height: pixelHeight }); + } + }; + + editor.onDidContentSizeChange(updateElementHeight); + updateElementHeight(); + + // handle: shift + enter + // FIXME: maybe move this functionality into CodeEditor? + editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => { + onRunQueryRef.current(editor.getValue()); + }); + }} + /> +

+ ); +}; + +// we will lazy-load this module using React.lazy, +// and that only supports default-exports, +// so we have to default-export this, even if +// it is agains the style-guidelines. + +export default MonacoQueryField; diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldLazy.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldLazy.tsx new file mode 100644 index 00000000..2dee83c6 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldLazy.tsx @@ -0,0 +1,12 @@ +import React, { Suspense } from 'react'; +import { Props } from './MonacoQueryFieldProps'; + +const Field = React.lazy(() => import(/* webpackChunkName: "prom-query-field" */ './MonacoQueryField')); + +export const MonacoQueryFieldLazy = (props: Props) => { + return ( + + + + ); +}; diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts new file mode 100644 index 00000000..9c8f95e4 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts @@ -0,0 +1,15 @@ +import { HistoryItem } from '@grafana/data'; +import { PromQuery } from '../../types'; +import type PromQlLanguageProvider from '../../language_provider'; + +// we need to store this in a separate file, +// because we have an async-wrapper around, +// the react-component, and it needs the same +// props as the sync-component. +export type Props = { + initialValue: string; + languageProvider: PromQlLanguageProvider; + history: Array>; + onRunQuery: (value: string) => void; + onBlur: (value: string) => void; +}; diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx new file mode 100644 index 00000000..398a43ec --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx @@ -0,0 +1,33 @@ +import React, { useRef } from 'react'; +import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy'; +import { Props as MonacoProps } from './MonacoQueryFieldProps'; + +type Props = Omit & { + onChange: (query: string) => void; + onRunQuery: () => void; + runQueryOnBlur: boolean; +}; + +export const MonacoQueryFieldWrapper = (props: Props) => { + const lastRunValueRef = useRef(null); + const { runQueryOnBlur, onRunQuery, onChange, ...rest } = props; + + const handleRunQuery = (value: string) => { + lastRunValueRef.current = value; + onChange(value); + onRunQuery(); + }; + + const handleBlur = (value: string) => { + if (runQueryOnBlur) { + // run handleRunQuery only if the current value is different from the last-time-executed value + if (value !== lastRunValueRef.current) { + handleRunQuery(value); + } + } else { + onChange(value); + } + }; + + return ; +}; diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/getOverrideServices.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/getOverrideServices.ts new file mode 100644 index 00000000..b3bc45a3 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/getOverrideServices.ts @@ -0,0 +1,116 @@ +import { monacoTypes } from '@grafana/ui'; + +// this thing here is a workaround in a way. +// what we want to achieve, is that when the autocomplete-window +// opens, the "second, extra popup" with the extra help, +// also opens automatically. +// but there is no API to achieve it. +// the way to do it is to implement the `storageService` +// interface, and provide our custom implementation, +// which will default to `true` for the correct string-key. +// unfortunately, while the typescript-interface exists, +// it is not exported from monaco-editor, +// so we cannot rely on typescript to make sure +// we do it right. all we can do is to manually +// lookup the interface, and make sure we code our code right. +// our code is a "best effort" approach, +// i am not 100% how the `scope` and `target` things work, +// but so far it seems to work ok. +// i would use an another approach, if there was one available. + +function makeStorageService() { + // we need to return an object that fulfills this interface: + // https://github.com/microsoft/vscode/blob/ff1e16eebb93af79fd6d7af1356c4003a120c563/src/vs/platform/storage/common/storage.ts#L37 + // unfortunately it is not export from monaco-editor + + const strings = new Map(); + + // we want this to be true by default + strings.set('expandSuggestionDocs', true.toString()); + + return { + // we do not implement the on* handlers + onDidChangeValue: (data: unknown): void => undefined, + onDidChangeTarget: (data: unknown): void => undefined, + onWillSaveState: (data: unknown): void => undefined, + + get: (key: string, scope: unknown, fallbackValue?: string): string | undefined => { + return strings.get(key) ?? fallbackValue; + }, + + getBoolean: (key: string, scope: unknown, fallbackValue?: boolean): boolean | undefined => { + const val = strings.get(key); + if (val !== undefined) { + // the interface-docs say the value will be converted + // to a boolean but do not specify how, so we improvise + return val === 'true'; + } else { + return fallbackValue; + } + }, + + getNumber: (key: string, scope: unknown, fallbackValue?: number): number | undefined => { + const val = strings.get(key); + if (val !== undefined) { + return parseInt(val, 10); + } else { + return fallbackValue; + } + }, + + store: ( + key: string, + value: string | boolean | number | undefined | null, + scope: unknown, + target: unknown + ): void => { + // the interface-docs say if the value is nullish, it should act as delete + if (value === null || value === undefined) { + strings.delete(key); + } else { + strings.set(key, value.toString()); + } + }, + + remove: (key: string, scope: unknown): void => { + strings.delete(key); + }, + + keys: (scope: unknown, target: unknown): string[] => { + return Array.from(strings.keys()); + }, + + logStorage: (): void => { + console.log('logStorage: not implemented'); + }, + + migrate: (): Promise => { + // we do not implement this + return Promise.resolve(undefined); + }, + + isNew: (scope: unknown): boolean => { + // we create a new storage for every session, we do not persist it, + // so we return `true`. + return true; + }, + + flush: (reason?: unknown): Promise => { + // we do not implement this + return Promise.resolve(undefined); + }, + }; +} + +let overrideServices: monacoTypes.editor.IEditorOverrideServices | null = null; + +export function getOverrideServices(): monacoTypes.editor.IEditorOverrideServices { + // only have one instance of this for every query editor + if (overrideServices === null) { + overrideServices = { + storageService: makeStorageService(), + }; + } + + return overrideServices; +} diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/completions.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/completions.ts new file mode 100644 index 00000000..53035523 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/completions.ts @@ -0,0 +1,209 @@ +import type { Situation, Label } from './situation'; +import { NeverCaseError } from './util'; +// FIXME: we should not load this from the "outside", but we cannot do that while we have the "old" query-field too +import { FUNCTIONS } from '../../../promql'; +import { escapeLabelValueInExactSelector } from '../../../language_utils'; + +export type CompletionType = 'HISTORY' | 'FUNCTION' | 'METRIC_NAME' | 'DURATION' | 'LABEL_NAME' | 'LABEL_VALUE'; + +type Completion = { + type: CompletionType; + label: string; + insertText: string; + detail?: string; + documentation?: string; + triggerOnInsert?: boolean; +}; + +type Metric = { + name: string; + help: string; + type: string; +}; + +export type DataProvider = { + getHistory: () => Promise; + getAllMetricNames: () => Promise; + getAllLabelNames: () => Promise; + getLabelValues: (labelName: string) => Promise; + getSeries: (selector: string) => Promise>; +}; + +// we order items like: history, functions, metrics + +async function getAllMetricNamesCompletions(dataProvider: DataProvider): Promise { + const metrics = await dataProvider.getAllMetricNames(); + return metrics.map((metric) => ({ + type: 'METRIC_NAME', + label: metric.name, + insertText: metric.name, + detail: `${metric.name} : ${metric.type}`, + documentation: metric.help, + })); +} + +const FUNCTION_COMPLETIONS: Completion[] = FUNCTIONS.map((f) => ({ + type: 'FUNCTION', + label: f.label, + insertText: f.insertText ?? '', // i don't know what to do when this is nullish. it should not be. + detail: f.detail, + documentation: f.documentation, +})); + +async function getAllFunctionsAndMetricNamesCompletions(dataProvider: DataProvider): Promise { + const metricNames = await getAllMetricNamesCompletions(dataProvider); + return [...FUNCTION_COMPLETIONS, ...metricNames]; +} + +const DURATION_COMPLETIONS: Completion[] = [ + '$__interval', + '$__range', + '$__rate_interval', + '1m', + '5m', + '10m', + '30m', + '1h', + '1d', +].map((text) => ({ + type: 'DURATION', + label: text, + insertText: text, +})); + +async function getAllHistoryCompletions(dataProvider: DataProvider): Promise { + // function getAllHistoryCompletions(queryHistory: PromHistoryItem[]): Completion[] { + // NOTE: the typescript types are wrong. historyItem.query.expr can be undefined + const allHistory = await dataProvider.getHistory(); + // FIXME: find a better history-limit + return allHistory.slice(0, 10).map((expr) => ({ + type: 'HISTORY', + label: expr, + insertText: expr, + })); +} + +function makeSelector(metricName: string | undefined, labels: Label[]): string { + const allLabels = [...labels]; + + // we transform the metricName to a label, if it exists + if (metricName !== undefined) { + allLabels.push({ name: '__name__', value: metricName, op: '=' }); + } + + const allLabelTexts = allLabels.map( + (label) => `${label.name}${label.op}"${escapeLabelValueInExactSelector(label.value)}"` + ); + + return `{${allLabelTexts.join(',')}}`; +} + +async function getLabelNames( + metric: string | undefined, + otherLabels: Label[], + dataProvider: DataProvider +): Promise { + if (metric === undefined && otherLabels.length === 0) { + // if there is no filtering, we have to use a special endpoint + return dataProvider.getAllLabelNames(); + } else { + const selector = makeSelector(metric, otherLabels); + const data = await dataProvider.getSeries(selector); + const possibleLabelNames = Object.keys(data); // all names from prometheus + const usedLabelNames = new Set(otherLabels.map((l) => l.name)); // names used in the query + return possibleLabelNames.filter((l) => !usedLabelNames.has(l)); + } +} + +async function getLabelNamesForCompletions( + metric: string | undefined, + suffix: string, + triggerOnInsert: boolean, + otherLabels: Label[], + dataProvider: DataProvider +): Promise { + const labelNames = await getLabelNames(metric, otherLabels, dataProvider); + return labelNames.map((text) => ({ + type: 'LABEL_NAME', + label: text, + insertText: `${text}${suffix}`, + triggerOnInsert, + })); +} + +async function getLabelNamesForSelectorCompletions( + metric: string | undefined, + otherLabels: Label[], + dataProvider: DataProvider +): Promise { + return getLabelNamesForCompletions(metric, '=', true, otherLabels, dataProvider); +} +async function getLabelNamesForByCompletions( + metric: string | undefined, + otherLabels: Label[], + dataProvider: DataProvider +): Promise { + return getLabelNamesForCompletions(metric, '', false, otherLabels, dataProvider); +} + +async function getLabelValues( + metric: string | undefined, + labelName: string, + otherLabels: Label[], + dataProvider: DataProvider +): Promise { + if (metric === undefined && otherLabels.length === 0) { + // if there is no filtering, we have to use a special endpoint + return dataProvider.getLabelValues(labelName); + } else { + const selector = makeSelector(metric, otherLabels); + const data = await dataProvider.getSeries(selector); + return data[labelName] ?? []; + } +} + +async function getLabelValuesForMetricCompletions( + metric: string | undefined, + labelName: string, + betweenQuotes: boolean, + otherLabels: Label[], + dataProvider: DataProvider +): Promise { + const values = await getLabelValues(metric, labelName, otherLabels, dataProvider); + return values.map((text) => ({ + type: 'LABEL_VALUE', + label: text, + insertText: betweenQuotes ? text : `"${text}"`, // FIXME: escaping strange characters? + })); +} + +export async function getCompletions(situation: Situation, dataProvider: DataProvider): Promise { + switch (situation.type) { + case 'IN_DURATION': + return DURATION_COMPLETIONS; + case 'IN_FUNCTION': + return getAllFunctionsAndMetricNamesCompletions(dataProvider); + case 'AT_ROOT': { + return getAllFunctionsAndMetricNamesCompletions(dataProvider); + } + case 'EMPTY': { + const metricNames = await getAllMetricNamesCompletions(dataProvider); + const historyCompletions = await getAllHistoryCompletions(dataProvider); + return [...historyCompletions, ...FUNCTION_COMPLETIONS, ...metricNames]; + } + case 'IN_LABEL_SELECTOR_NO_LABEL_NAME': + return getLabelNamesForSelectorCompletions(situation.metricName, situation.otherLabels, dataProvider); + case 'IN_GROUPING': + return getLabelNamesForByCompletions(situation.metricName, situation.otherLabels, dataProvider); + case 'IN_LABEL_SELECTOR_WITH_LABEL_NAME': + return getLabelValuesForMetricCompletions( + situation.metricName, + situation.labelName, + situation.betweenQuotes, + situation.otherLabels, + dataProvider + ); + default: + throw new NeverCaseError(situation); + } +} diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/index.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/index.ts new file mode 100644 index 00000000..3075a9b4 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/index.ts @@ -0,0 +1,101 @@ +import type { Monaco, monacoTypes } from '@grafana/ui'; + +import { getSituation } from './situation'; +import { getCompletions, DataProvider, CompletionType } from './completions'; +import { NeverCaseError } from './util'; + +export function getSuggestOptions(): monacoTypes.editor.ISuggestOptions { + return { + // monaco-editor sometimes provides suggestions automatically, i am not + // sure based on what, seems to be by analyzing the words already + // written. + // to try it out: + // - enter `go_goroutines{job~` + // - have the cursor at the end of the string + // - press ctrl-enter + // - you will get two suggestions + // those were not provided by grafana, they are offered automatically. + // i want to remove those. the only way i found is: + // - every suggestion-item has a `kind` attribute, + // that controls the icon to the left of the suggestion. + // - items auto-generated by monaco have `kind` set to `text`. + // - we make sure grafana-provided suggestions do not have `kind` set to `text`. + // - and then we tell monaco not to show suggestions of kind `text` + showWords: false, + }; +} + +function getMonacoCompletionItemKind(type: CompletionType, monaco: Monaco): monacoTypes.languages.CompletionItemKind { + switch (type) { + case 'DURATION': + return monaco.languages.CompletionItemKind.Unit; + case 'FUNCTION': + return monaco.languages.CompletionItemKind.Variable; + case 'HISTORY': + return monaco.languages.CompletionItemKind.Snippet; + case 'LABEL_NAME': + return monaco.languages.CompletionItemKind.Enum; + case 'LABEL_VALUE': + return monaco.languages.CompletionItemKind.EnumMember; + case 'METRIC_NAME': + return monaco.languages.CompletionItemKind.Constructor; + default: + throw new NeverCaseError(type); + } +} +export function getCompletionProvider( + monaco: Monaco, + dataProvider: DataProvider +): monacoTypes.languages.CompletionItemProvider { + const provideCompletionItems = ( + model: monacoTypes.editor.ITextModel, + position: monacoTypes.Position + ): monacoTypes.languages.ProviderResult => { + const word = model.getWordAtPosition(position); + const range = + word != null + ? monaco.Range.lift({ + startLineNumber: position.lineNumber, + endLineNumber: position.lineNumber, + startColumn: word.startColumn, + endColumn: word.endColumn, + }) + : monaco.Range.fromPositions(position); + // documentation says `position` will be "adjusted" in `getOffsetAt` + // i don't know what that means, to be sure i clone it + const positionClone = { + column: position.column, + lineNumber: position.lineNumber, + }; + const offset = model.getOffsetAt(positionClone); + const situation = getSituation(model.getValue(), offset); + const completionsPromise = situation != null ? getCompletions(situation, dataProvider) : Promise.resolve([]); + return completionsPromise.then((items) => { + // monaco by-default alphabetically orders the items. + // to stop it, we use a number-as-string sortkey, + // so that monaco keeps the order we use + const maxIndexDigits = items.length.toString().length; + const suggestions: monacoTypes.languages.CompletionItem[] = items.map((item, index) => ({ + kind: getMonacoCompletionItemKind(item.type, monaco), + label: item.label, + insertText: item.insertText, + detail: item.detail, + documentation: item.documentation, + sortText: index.toString().padStart(maxIndexDigits, '0'), // to force the order we have + range, + command: item.triggerOnInsert + ? { + id: 'editor.action.triggerSuggest', + title: '', + } + : undefined, + })); + return { suggestions }; + }); + }; + + return { + triggerCharacters: ['{', ',', '[', '(', '=', '~', ' ', '"'], + provideCompletionItems, + }; +} diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/situation.test.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/situation.test.ts new file mode 100644 index 00000000..8c7be6b5 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/situation.test.ts @@ -0,0 +1,185 @@ +import { getSituation, Situation } from './situation'; + +// we use the `^` character as the cursor-marker in the string. +function assertSituation(situation: string, expectedSituation: Situation | null) { + // first we find the cursor-position + const pos = situation.indexOf('^'); + if (pos === -1) { + throw new Error('cursor missing'); + } + + // we remove the cursor-marker from the string + const text = situation.replace('^', ''); + + // sanity check, make sure no more cursor-markers remain + if (text.indexOf('^') !== -1) { + throw new Error('multiple cursors'); + } + + const result = getSituation(text, pos); + + if (expectedSituation === null) { + expect(result).toStrictEqual(null); + } else { + expect(result).toMatchObject(expectedSituation); + } +} + +describe('situation', () => { + it('handles things', () => { + assertSituation('^', { + type: 'EMPTY', + }); + + assertSituation('sum(one) / ^', { + type: 'AT_ROOT', + }); + + assertSituation('sum(^)', { + type: 'IN_FUNCTION', + }); + + assertSituation('sum(one) / sum(^)', { + type: 'IN_FUNCTION', + }); + + assertSituation('something{}[^]', { + type: 'IN_DURATION', + }); + + assertSituation('something{label~^}', null); + }); + + it('handles label names', () => { + assertSituation('something{^}', { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + metricName: 'something', + otherLabels: [], + }); + + assertSituation('sum(something) by (^)', { + type: 'IN_GROUPING', + metricName: 'something', + otherLabels: [], + }); + + assertSituation('sum by (^) (something)', { + type: 'IN_GROUPING', + metricName: 'something', + otherLabels: [], + }); + + assertSituation('something{one="val1",two!="val2",three=~"val3",four!~"val4",^}', { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + metricName: 'something', + otherLabels: [ + { name: 'one', value: 'val1', op: '=' }, + { name: 'two', value: 'val2', op: '!=' }, + { name: 'three', value: 'val3', op: '=~' }, + { name: 'four', value: 'val4', op: '!~' }, + ], + }); + + assertSituation('{^}', { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + otherLabels: [], + }); + + assertSituation('{one="val1",^}', { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + otherLabels: [{ name: 'one', value: 'val1', op: '=' }], + }); + + // single-quoted label-values with escape + assertSituation("{one='val\\'1',^}", { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + otherLabels: [{ name: 'one', value: "val'1", op: '=' }], + }); + + // double-quoted label-values with escape + assertSituation('{one="val\\"1",^}', { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + otherLabels: [{ name: 'one', value: 'val"1', op: '=' }], + }); + + // backticked label-values with escape (the escape should not be interpreted) + assertSituation('{one=`val\\"1`,^}', { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + otherLabels: [{ name: 'one', value: 'val\\"1', op: '=' }], + }); + }); + + it('handles label values', () => { + assertSituation('something{job=^}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName: 'something', + labelName: 'job', + betweenQuotes: false, + otherLabels: [], + }); + + assertSituation('something{job!=^}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName: 'something', + labelName: 'job', + betweenQuotes: false, + otherLabels: [], + }); + + assertSituation('something{job=~^}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName: 'something', + labelName: 'job', + betweenQuotes: false, + otherLabels: [], + }); + + assertSituation('something{job!~^}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName: 'something', + labelName: 'job', + betweenQuotes: false, + otherLabels: [], + }); + + assertSituation('something{job=^,host="h1"}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName: 'something', + labelName: 'job', + betweenQuotes: false, + otherLabels: [{ name: 'host', value: 'h1', op: '=' }], + }); + + assertSituation('something{job="j1",host="^"}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName: 'something', + labelName: 'host', + betweenQuotes: true, + otherLabels: [{ name: 'job', value: 'j1', op: '=' }], + }); + + assertSituation('something{job="j1"^}', null); + assertSituation('something{job="j1" ^ }', null); + assertSituation('something{job="j1" ^ , }', null); + + assertSituation('{job=^,host="h1"}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + labelName: 'job', + betweenQuotes: false, + otherLabels: [{ name: 'host', value: 'h1', op: '=' }], + }); + + assertSituation('something{one="val1",two!="val2",three=^,four=~"val4",five!~"val5"}', { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName: 'something', + labelName: 'three', + betweenQuotes: false, + otherLabels: [ + { name: 'one', value: 'val1', op: '=' }, + { name: 'two', value: 'val2', op: '!=' }, + { name: 'four', value: 'val4', op: '=~' }, + { name: 'five', value: 'val5', op: '!~' }, + ], + }); + }); +}); diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/situation.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/situation.ts new file mode 100644 index 00000000..cef10093 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/situation.ts @@ -0,0 +1,543 @@ +import { parser } from 'lezer-promql'; +import type { Tree, SyntaxNode } from 'lezer-tree'; +import { NeverCaseError } from './util'; + +type Direction = 'parent' | 'firstChild' | 'lastChild' | 'nextSibling'; +type NodeTypeName = + | '⚠' // this is used as error-name + | 'AggregateExpr' + | 'AggregateModifier' + | 'FunctionCallBody' + | 'GroupingLabels' + | 'Identifier' + | 'LabelMatcher' + | 'LabelMatchers' + | 'LabelMatchList' + | 'LabelName' + | 'MetricIdentifier' + | 'PromQL' + | 'StringLiteral' + | 'VectorSelector' + | 'MatrixSelector' + | 'MatchOp' + | 'EqlSingle' + | 'Neq' + | 'EqlRegex' + | 'NeqRegex'; + +type Path = Array<[Direction, NodeTypeName]>; + +function move(node: SyntaxNode, direction: Direction): SyntaxNode | null { + switch (direction) { + case 'parent': + return node.parent; + case 'firstChild': + return node.firstChild; + case 'lastChild': + return node.lastChild; + case 'nextSibling': + return node.nextSibling; + default: + throw new NeverCaseError(direction); + } +} + +function walk(node: SyntaxNode, path: Path): SyntaxNode | null { + let current: SyntaxNode | null = node; + for (const [direction, expectedType] of path) { + current = move(current, direction); + if (current === null) { + // we could not move in the direction, we stop + return null; + } + if (current.type.name !== expectedType) { + // the reached node has wrong type, we stop + return null; + } + } + return current; +} + +function getNodeText(node: SyntaxNode, text: string): string { + return text.slice(node.from, node.to); +} + +function parsePromQLStringLiteral(text: string): string { + // if it is a string-literal, it is inside quotes of some kind + const inside = text.slice(1, text.length - 1); + + // FIXME: support https://prometheus.io/docs/prometheus/latest/querying/basics/#string-literals + // FIXME: maybe check other promql code, if all is supported or not + + // for now we do only some very simple un-escaping + + // we start with double-quotes + if (text.startsWith('"') && text.endsWith('"')) { + // NOTE: this is not 100% perfect, we only unescape the double-quote, + // there might be other characters too + return inside.replace(/\\"/, '"'); + } + + // then single-quote + if (text.startsWith("'") && text.endsWith("'")) { + // NOTE: this is not 100% perfect, we only unescape the single-quote, + // there might be other characters too + return inside.replace(/\\'/, "'"); + } + + // then backticks + if (text.startsWith('`') && text.endsWith('`')) { + return inside; + } + + throw new Error('FIXME: invalid string literal'); +} + +type LabelOperator = '=' | '!=' | '=~' | '!~'; + +export type Label = { + name: string; + value: string; + op: LabelOperator; +}; + +export type Situation = + | { + type: 'IN_FUNCTION'; + } + | { + type: 'AT_ROOT'; + } + | { + type: 'EMPTY'; + } + | { + type: 'IN_DURATION'; + } + | { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME'; + metricName?: string; + otherLabels: Label[]; + } + | { + type: 'IN_GROUPING'; + metricName: string; + otherLabels: Label[]; + } + | { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME'; + metricName?: string; + labelName: string; + betweenQuotes: boolean; + otherLabels: Label[]; + }; + +type Resolver = { + path: NodeTypeName[]; + fun: (node: SyntaxNode, text: string, pos: number) => Situation | null; +}; + +function isPathMatch(resolverPath: string[], cursorPath: string[]): boolean { + return resolverPath.every((item, index) => item === cursorPath[index]); +} + +const ERROR_NODE_NAME: NodeTypeName = '⚠'; // this is used as error-name + +const RESOLVERS: Resolver[] = [ + { + path: ['LabelMatchers', 'VectorSelector'], + fun: resolveLabelKeysWithEquals, + }, + { + path: ['PromQL'], + fun: resolveTopLevel, + }, + { + path: ['FunctionCallBody'], + fun: resolveInFunction, + }, + { + path: ['StringLiteral', 'LabelMatcher'], + fun: resolveLabelMatcher, + }, + { + path: [ERROR_NODE_NAME, 'LabelMatcher'], + fun: resolveLabelMatcher, + }, + { + path: [ERROR_NODE_NAME, 'MatrixSelector'], + fun: resolveDurations, + }, + { + path: ['GroupingLabels'], + fun: resolveLabelsForGrouping, + }, +]; + +const LABEL_OP_MAP = new Map([ + ['EqlSingle', '='], + ['EqlRegex', '=~'], + ['Neq', '!='], + ['NeqRegex', '!~'], +]); + +function getLabelOp(opNode: SyntaxNode): LabelOperator | null { + const opChild = opNode.firstChild; + if (opChild === null) { + return null; + } + + return LABEL_OP_MAP.get(opChild.name) ?? null; +} + +function getLabel(labelMatcherNode: SyntaxNode, text: string): Label | null { + if (labelMatcherNode.type.name !== 'LabelMatcher') { + return null; + } + + const nameNode = walk(labelMatcherNode, [['firstChild', 'LabelName']]); + + if (nameNode === null) { + return null; + } + + const opNode = walk(nameNode, [['nextSibling', 'MatchOp']]); + if (opNode === null) { + return null; + } + + const op = getLabelOp(opNode); + if (op === null) { + return null; + } + + const valueNode = walk(labelMatcherNode, [['lastChild', 'StringLiteral']]); + + if (valueNode === null) { + return null; + } + + const name = getNodeText(nameNode, text); + const value = parsePromQLStringLiteral(getNodeText(valueNode, text)); + + return { name, value, op }; +} +function getLabels(labelMatchersNode: SyntaxNode, text: string): Label[] { + if (labelMatchersNode.type.name !== 'LabelMatchers') { + return []; + } + + let listNode: SyntaxNode | null = walk(labelMatchersNode, [['firstChild', 'LabelMatchList']]); + + const labels: Label[] = []; + + while (listNode !== null) { + const matcherNode = walk(listNode, [['lastChild', 'LabelMatcher']]); + if (matcherNode === null) { + // unexpected, we stop + return []; + } + + const label = getLabel(matcherNode, text); + if (label !== null) { + labels.push(label); + } + + // there might be more labels + listNode = walk(listNode, [['firstChild', 'LabelMatchList']]); + } + + // our labels-list is last-first, so we reverse it + labels.reverse(); + + return labels; +} + +function getNodeChildren(node: SyntaxNode): SyntaxNode[] { + let child: SyntaxNode | null = node.firstChild; + const children: SyntaxNode[] = []; + while (child !== null) { + children.push(child); + child = child.nextSibling; + } + return children; +} + +function getNodeInSubtree(node: SyntaxNode, typeName: NodeTypeName): SyntaxNode | null { + // first we try the current node + if (node.type.name === typeName) { + return node; + } + + // then we try the children + const children = getNodeChildren(node); + for (const child of children) { + const n = getNodeInSubtree(child, typeName); + if (n !== null) { + return n; + } + } + + return null; +} + +function resolveLabelsForGrouping(node: SyntaxNode, text: string, pos: number): Situation | null { + const aggrExpNode = walk(node, [ + ['parent', 'AggregateModifier'], + ['parent', 'AggregateExpr'], + ]); + if (aggrExpNode === null) { + return null; + } + const bodyNode = aggrExpNode.getChild('FunctionCallBody'); + if (bodyNode === null) { + return null; + } + + const metricIdNode = getNodeInSubtree(bodyNode, 'MetricIdentifier'); + if (metricIdNode === null) { + return null; + } + + const idNode = walk(metricIdNode, [['firstChild', 'Identifier']]); + if (idNode === null) { + return null; + } + + const metricName = getNodeText(idNode, text); + return { + type: 'IN_GROUPING', + metricName, + otherLabels: [], + }; +} + +function resolveLabelMatcher(node: SyntaxNode, text: string, pos: number): Situation | null { + // we can arrive here in two situation. `node` is either: + // - a StringNode (like in `{job="^"}`) + // - or an error node (like in `{job=^}`) + const inStringNode = !node.type.isError; + + const parent = walk(node, [['parent', 'LabelMatcher']]); + if (parent === null) { + return null; + } + + const labelNameNode = walk(parent, [['firstChild', 'LabelName']]); + if (labelNameNode === null) { + return null; + } + + const labelName = getNodeText(labelNameNode, text); + + // now we need to go up, to the parent of LabelMatcher, + // there can be one or many `LabelMatchList` parents, we have + // to go through all of them + + const firstListNode = walk(parent, [['parent', 'LabelMatchList']]); + if (firstListNode === null) { + return null; + } + + let listNode = firstListNode; + + // we keep going through the parent-nodes + // as long as they are LabelMatchList. + // as soon as we reawch LabelMatchers, we stop + let labelMatchersNode: SyntaxNode | null = null; + while (labelMatchersNode === null) { + const p = listNode.parent; + if (p === null) { + return null; + } + + const { name } = p.type; + + switch (name) { + case 'LabelMatchList': + //we keep looping + listNode = p; + continue; + case 'LabelMatchers': + // we reached the end, we can stop the loop + labelMatchersNode = p; + continue; + default: + // we reached some other node, we stop + return null; + } + } + + // now we need to find the other names + const allLabels = getLabels(labelMatchersNode, text); + + // we need to remove "our" label from all-labels, if it is in there + const otherLabels = allLabels.filter((label) => label.name !== labelName); + + const metricNameNode = walk(labelMatchersNode, [ + ['parent', 'VectorSelector'], + ['firstChild', 'MetricIdentifier'], + ['firstChild', 'Identifier'], + ]); + + if (metricNameNode === null) { + // we are probably in a situation without a metric name + return { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + labelName, + betweenQuotes: inStringNode, + otherLabels, + }; + } + + const metricName = getNodeText(metricNameNode, text); + + return { + type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', + metricName, + labelName, + betweenQuotes: inStringNode, + otherLabels, + }; +} + +function resolveTopLevel(node: SyntaxNode, text: string, pos: number): Situation { + return { + type: 'AT_ROOT', + }; +} + +function resolveInFunction(node: SyntaxNode, text: string, pos: number): Situation { + return { + type: 'IN_FUNCTION', + }; +} + +function resolveDurations(node: SyntaxNode, text: string, pos: number): Situation { + return { + type: 'IN_DURATION', + }; +} + +function subTreeHasError(node: SyntaxNode): boolean { + return getNodeInSubtree(node, ERROR_NODE_NAME) !== null; +} + +function resolveLabelKeysWithEquals(node: SyntaxNode, text: string, pos: number): Situation | null { + // for example `something{^}` + + // there are some false positives that can end up in this situation, that we want + // to eliminate: + // `something{a~^}` (if this subtree contains any error-node, we stop) + if (subTreeHasError(node)) { + return null; + } + + // next false positive: + // `something{a="1"^}` + const child = walk(node, [['firstChild', 'LabelMatchList']]); + if (child !== null) { + // means the label-matching part contains at least one label already. + // + // in this case, we will need to have a `,` character at the end, + // to be able to suggest adding the next label. + // the area between the end-of-the-child-node and the cursor-pos + // must contain a `,` in this case. + const textToCheck = text.slice(child.to, pos); + + if (!textToCheck.includes(',')) { + return null; + } + } + + const metricNameNode = walk(node, [ + ['parent', 'VectorSelector'], + ['firstChild', 'MetricIdentifier'], + ['firstChild', 'Identifier'], + ]); + + const otherLabels = getLabels(node, text); + + if (metricNameNode === null) { + // we are probably in a situation without a metric name. + return { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + otherLabels, + }; + } + + const metricName = getNodeText(metricNameNode, text); + + return { + type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', + metricName, + otherLabels, + }; +} + +// we find the first error-node in the tree that is at the cursor-position. +// NOTE: this might be too slow, might need to optimize it +// (ideas: we do not need to go into every subtree, based on from/to) +// also, only go to places that are in the sub-tree of the node found +// by default by lezer. problem is, `next()` will go upward too, +// and we do not want to go higher than our node +function getErrorNode(tree: Tree, pos: number): SyntaxNode | null { + const cur = tree.cursor(pos); + while (true) { + if (cur.from === pos && cur.to === pos) { + const { node } = cur; + if (node.type.isError) { + return node; + } + } + + if (!cur.next()) { + break; + } + } + return null; +} + +export function getSituation(text: string, pos: number): Situation | null { + // there is a special-case when we are at the start of writing text, + // so we handle that case first + + if (text === '') { + return { + type: 'EMPTY', + }; + } + + /* + PromQL +Expr +VectorSelector +LabelMatchers +*/ + const tree = parser.parse(text); + + // if the tree contains error, it is very probable that + // our node is one of those error-nodes. + // also, if there are errors, the node lezer finds us, + // might not be the best node. + // so first we check if there is an error-node at the cursor-position + const maybeErrorNode = getErrorNode(tree, pos); + + const cur = maybeErrorNode != null ? maybeErrorNode.cursor : tree.cursor(pos); + const currentNode = cur.node; + + const names = [cur.name]; + while (cur.parent()) { + names.push(cur.name); + } + + for (let resolver of RESOLVERS) { + // i do not use a foreach because i want to stop as soon + // as i find something + if (isPathMatch(resolver.path, names)) { + return resolver.fun(currentNode, text, pos); + } + } + + return null; +} diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/util.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/util.ts new file mode 100644 index 00000000..35babca0 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/monaco-completion-provider/util.ts @@ -0,0 +1,25 @@ +// this helper class is used to make typescript warn you when you forget +// a case-block in a switch statement. +// example code that triggers the typescript-error: +// +// const x:'A'|'B'|'C' = 'A'; +// +// switch(x) { +// case 'A': +// // something +// case 'B': +// // something +// default: +// throw new NeverCaseError(x); +// } +// +// +// typescript will show an error in this case, +// when you add the missing `case 'C'` code, +// the problem will be fixed. + +export class NeverCaseError extends Error { + constructor(value: never) { + super('should never happen'); + } +} diff --git a/public/app/plugins/datasource/prometheus/components/types.ts b/public/app/plugins/datasource/prometheus/components/types.ts new file mode 100644 index 00000000..b7bb280c --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/types.ts @@ -0,0 +1,5 @@ +import { QueryEditorProps } from '@grafana/data'; +import { PrometheusDatasource } from '../datasource'; +import { PromOptions, PromQuery } from '../types'; + +export type PromQueryEditorProps = QueryEditorProps

{args.H1Text}

+ {href ? ( + + {children} + + ) : onClick ? ( + + {children} + + ) : ( + <>{children} + )} +

Alerting

Add Permission For

Permissions

Unable to find application file

Grafana has likely been updated. Please try reloading the page.

{infoBoxTitle}

Sorry for the inconvenience

{Branding.LoginTitle}

{Branding.GetLoginSubTitle()}

Node Graph

{title}

{breadcrumbsResult}

Add Permission For

What are Permissions?

Loading help...

'Error occurred when loading help'

Trace to logs

{header}

{subheader}

LDAP Synchronisation

Organizations

Permissions

User information

Sessions

LDAP Connection

Test user mapping

+ LDAP Synchronisation + + Bulk-sync now + {isSyncing && } + +

+ {rule.name} +

Add API Key

NOT FOUND:

You have changed a folder, please save to view permissions.

Permissions

+ + {title} + + {isEditing && ( + + Edit + + )} +

+ General +

JSON Model

{a.title}

Annotation Query Format

MS SQL connection

Connection limits

MS SQL details

User Permission

Annotation Query Format

MySQL Connection

MySQL details

User Permission

OpenTSDB settings

Annotation Query Format

PostgreSQL Connection

TLS/SSL Auth Details

PostgreSQL details

User Permission

PromQL Cheat Sheet

Azure Authentication

Azure Configuration

Exemplars

Field formatsFor title and text fields, use either the name or a pattern. For example, {{instance}} is replaced with label value for the label instance.

Other options

Tempo Cheat Sheet

Search

Service Graph

+ {href ? ( + + {children} + + ) : onClick ? ( + + ) : ( + <>{children} + )} +

+ LDAP Synchronisation + +