(
Alert.displayName = 'Alert';
-const getStyles = (theme: GrafanaTheme2, severity: AlertVariant, elevated?: boolean, bottomSpacing?: number) => {
+const getStyles = (
+ theme: GrafanaTheme2,
+ severity: AlertVariant,
+ elevated?: boolean,
+ bottomSpacing?: number,
+ topSpacing?: number
+) => {
const color = theme.colors[severity];
const borderRadius = theme.shape.borderRadius();
@@ -92,6 +110,7 @@ const getStyles = (theme: GrafanaTheme2, severity: AlertVariant, elevated?: bool
background: ${theme.colors.background.secondary};
box-shadow: ${elevated ? theme.shadows.z3 : theme.shadows.z1};
margin-bottom: ${theme.spacing(bottomSpacing ?? 2)};
+ margin-top: ${theme.spacing(topSpacing ?? 0)};
&:before {
content: '';
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
index 94b995ccc99..16efc2b43c3 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { shallow } from 'enzyme';
-import { BigValue, Props, BigValueColorMode, BigValueGraphMode } from './BigValue';
+import { render, screen } from '@testing-library/react';
+import { BigValue, BigValueColorMode, BigValueGraphMode, Props } from './BigValue';
import { createTheme } from '@grafana/data';
function getProps(propOverrides?: Partial
): Props {
@@ -21,22 +21,12 @@ function getProps(propOverrides?: Partial): Props {
return props;
}
-const setup = (propOverrides?: object) => {
- const props = getProps(propOverrides);
- const wrapper = shallow();
- const instance = wrapper.instance() as BigValue;
-
- return {
- instance,
- wrapper,
- };
-};
-
describe('BigValue', () => {
describe('Render with basic options', () => {
it('should render', () => {
- const { wrapper } = setup();
- expect(wrapper).toMatchSnapshot();
+ render();
+
+ expect(screen.getByText('25')).toBeInTheDocument();
});
});
});
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
index ff222b5d60e..864c2547199 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
@@ -1,8 +1,6 @@
-// Library
import React, { PureComponent } from 'react';
import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, TextDisplayOptions } from '@grafana/data';
-// Types
import { Themeable2 } from '../../types';
import { buildLayout } from './BigValueLayout';
import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
diff --git a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap b/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
deleted file mode 100644
index 5acf66fb54e..00000000000
--- a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BigValue Render with basic options should render 1`] = `
-
-`;
diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.test.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.test.tsx
index 633902d32df..1e2a72d8f81 100644
--- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.test.tsx
+++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.test.tsx
@@ -1,33 +1,39 @@
import React from 'react';
-import { render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
import { CallToActionCard } from './CallToActionCard';
+import { expect } from '../../../../../public/test/lib/common';
describe('CallToActionCard', () => {
describe('rendering', () => {
- it('when no message and footer provided', () => {
- const tree = render(Click me} />);
- expect(tree).toMatchSnapshot();
+ it('should render callToActionElement', () => {
+ render(Click me} />);
+ expect(screen.getByRole('link', { name: 'Click me' })).toBeInTheDocument();
});
- it('when message and no footer provided', () => {
- const tree = render(
- Click me}
- />
+ it('should render message when provided', () => {
+ render(
+ Click me} />
);
- expect(tree).toMatchSnapshot();
+ expect(screen.getByText('Click button below')).toBeInTheDocument();
});
- it('when message and footer provided', () => {
- const tree = render(
+ it('should render footer when provided', () => {
+ render(
+ Click me} />
+ );
+ expect(screen.getByText('footer content')).toBeInTheDocument();
+ });
+
+ it('should render both message and footer when provided', () => {
+ render(
Click me}
/>
);
- expect(tree).toMatchSnapshot();
+ expect(screen.getByText('Click button below')).toBeInTheDocument();
+ expect(screen.getByText('footer content')).toBeInTheDocument();
});
});
});
diff --git a/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap b/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
deleted file mode 100644
index 511fd516da3..00000000000
--- a/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
+++ /dev/null
@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CallToActionCard rendering when message and footer provided 1`] = `
-
-
- Click button bellow
-
-
- Click me
-
-
- footer content
-
-
-
-
- | Name |
- Role |
- |
+ return (
+
+
+
+
+
+ | Name |
+ Role |
+ |
+
+
+
+ {orgs.map((org) => (
+
+ | {org.name} |
+ {org.role} |
+
+ {org.orgId === currentOrgId ? (
+
+ ) : (
+
+ )}
+ |
-
-
- {orgs.map((org) => (
-
- | {org.name} |
- {org.role} |
-
- {org.orgId === currentOrgId ? (
-
- ) : (
-
- )}
- |
-
- ))}
-
-
-
-
- );
- }
+ ))}
+
+
+
+
+ );
}
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
index 146b21f9e68..4004424e07f 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
@@ -4,6 +4,7 @@ import { GrafanaTheme } from '@grafana/data';
import { css, cx } from '@emotion/css';
import { useUpdateEffect } from 'react-use';
import { Draggable } from 'react-beautiful-dnd';
+import { reportInteraction } from '@grafana/runtime';
interface QueryOperationRowProps {
index: number;
@@ -47,6 +48,24 @@ export const QueryOperationRow: React.FC = ({
setIsContentVisible(!isContentVisible);
}, [isContentVisible, setIsContentVisible]);
+ const reportDragMousePosition = useCallback((e) => {
+ // When drag detected react-beautiful-dnd will preventDefault the event
+ // Ref: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md#a-mouse-drag-has-started-and-the-user-is-now-dragging
+ if (e.defaultPrevented) {
+ const rect = e.currentTarget.getBoundingClientRect();
+ var x = e.clientX - rect.left;
+ var y = e.clientY - rect.top;
+
+ // report relative mouse position within the header element
+ reportInteraction('query_row_reorder_drag_position', {
+ x: x / rect.width,
+ y: y / rect.height,
+ width: rect.width,
+ height: rect.height,
+ });
+ }
+ }, []);
+
useUpdateEffect(() => {
if (isContentVisible) {
if (onOpen) {
@@ -106,7 +125,9 @@ export const QueryOperationRow: React.FC = ({
return (
<>
-
{rowHeader}
+
+ {rowHeader}
+
{isContentVisible &&
{children}
}
No stats found.
)}
- {config.featureToggles.dashboardPreviews && }
+ {config.featureToggles.dashboardPreviews && config.featureToggles.dashboardPreviewsAdmin && }
);
};
diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
index 3348293a19e..2c75d68fc49 100644
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -2,13 +2,10 @@ import React, { PureComponent } from 'react';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
import { Alert, Button, ConfirmModal, Container, CustomScrollbar, HorizontalGroup, IconName, Modal } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
-import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
+import { AngularComponent, config, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
import { getAlertingValidationMessage } from './getAlertingValidationMessage';
-
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import StateHistory from './StateHistory';
-import 'app/features/alerting/AlertTabCtrl';
-
import { DashboardModel } from '../dashboard/state/DashboardModel';
import { PanelModel } from '../dashboard/state/PanelModel';
import { TestRuleResult } from './TestRuleResult';
@@ -57,8 +54,14 @@ class UnConnectedAlertTab extends PureComponent {
showTestRule: false,
};
- componentDidMount() {
- this.loadAlertTab();
+ async componentDidMount() {
+ if (config.angularSupportEnabled) {
+ await import(/* webpackChunkName: "AlertTabCtrl" */ 'app/features/alerting/AlertTabCtrl');
+ this.loadAlertTab();
+ } else {
+ // TODO probably need to migrate AlertTab to react
+ alert('Angular support disabled, legacy alerting cannot function without angular support');
+ }
}
onAngularPanelUpdated = () => {
diff --git a/public/app/features/alerting/unified/api/alertmanager.ts b/public/app/features/alerting/unified/api/alertmanager.ts
index 25cd0320f56..9986590701c 100644
--- a/public/app/features/alerting/unified/api/alertmanager.ts
+++ b/public/app/features/alerting/unified/api/alertmanager.ts
@@ -13,6 +13,7 @@ import {
TestReceiversAlert,
TestReceiversPayload,
TestReceiversResult,
+ ExternalAlertmanagerConfig,
} from 'app/plugins/datasource/alertmanager/types';
import { lastValueFrom } from 'rxjs';
import { getDatasourceAPIId, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
@@ -222,11 +223,11 @@ function getReceiverResultError(receiversResult: TestReceiversResult) {
.join('; ');
}
-export async function addAlertManagers(alertManagers: string[]): Promise {
+export async function addAlertManagers(alertManagerConfig: ExternalAlertmanagerConfig): Promise {
await lastValueFrom(
getBackendSrv().fetch({
method: 'POST',
- data: { alertmanagers: alertManagers },
+ data: alertManagerConfig,
url: '/api/v1/ngalert/admin_config',
showErrorAlert: false,
showSuccessAlert: false,
@@ -247,9 +248,9 @@ export async function fetchExternalAlertmanagers(): Promise {
+export async function fetchExternalAlertmanagerConfig(): Promise {
const result = await lastValueFrom(
- getBackendSrv().fetch<{ alertmanagers: string[] }>({
+ getBackendSrv().fetch({
method: 'GET',
url: '/api/v1/ngalert/admin_config',
showErrorAlert: false,
diff --git a/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx b/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx
index 82b258803bb..aabb017f588 100644
--- a/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx
+++ b/public/app/features/alerting/unified/components/admin/AddAlertManagerModal.tsx
@@ -1,19 +1,17 @@
import React, { FC, useMemo } from 'react';
import { css, cx } from '@emotion/css';
-import { useDispatch } from 'react-redux';
import { GrafanaTheme2 } from '@grafana/data';
import { Button, Field, FieldArray, Form, Icon, Input, Modal, useStyles2 } from '@grafana/ui';
-import { addExternalAlertmanagersAction } from '../../state/actions';
import { AlertmanagerUrl } from 'app/plugins/datasource/alertmanager/types';
interface Props {
onClose: () => void;
alertmanagers: AlertmanagerUrl[];
+ onChangeAlertmanagerConfig: (alertmanagers: string[]) => void;
}
-export const AddAlertManagerModal: FC = ({ alertmanagers, onClose }) => {
+export const AddAlertManagerModal: FC = ({ alertmanagers, onChangeAlertmanagerConfig, onClose }) => {
const styles = useStyles2(getStyles);
- const dispatch = useDispatch();
const defaultValues: Record = useMemo(
() => ({
alertmanagers: alertmanagers,
@@ -29,7 +27,7 @@ export const AddAlertManagerModal: FC = ({ alertmanagers, onClose }) => {
);
const onSubmit = (values: Record) => {
- dispatch(addExternalAlertmanagersAction(values.alertmanagers.map((am) => cleanAlertmanagerUrl(am.url))));
+ onChangeAlertmanagerConfig(values.alertmanagers.map((am) => cleanAlertmanagerUrl(am.url)));
onClose();
};
diff --git a/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
index 9bb29cac46d..efcbccf9ab6 100644
--- a/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
+++ b/public/app/features/alerting/unified/components/admin/ExternalAlertmanagers.tsx
@@ -1,8 +1,18 @@
import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { css } from '@emotion/css';
+import { useDispatch, useSelector } from 'react-redux';
+import { css, cx } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
-import { Button, ConfirmModal, HorizontalGroup, Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import {
+ Button,
+ ConfirmModal,
+ Field,
+ HorizontalGroup,
+ Icon,
+ RadioButtonGroup,
+ Tooltip,
+ useStyles2,
+ useTheme2,
+} from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { AddAlertManagerModal } from './AddAlertManagerModal';
import {
@@ -11,13 +21,25 @@ import {
fetchExternalAlertmanagersConfigAction,
} from '../../state/actions';
import { useExternalAmSelector } from '../../hooks/useExternalAmSelector';
+import { StoreState } from 'app/types/store';
+
+const alertmanagerChoices = [
+ { value: 'internal', label: 'Only Internal' },
+ { value: 'external', label: 'Only External' },
+ { value: 'all', label: 'Both internal and external' },
+];
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();
+ const alertmanagersChoice = useSelector(
+ (state: StoreState) => state.unifiedAlerting.externalAlertmanagers.alertmanagerConfig.result?.alertmanagersChoice
+ );
+ const theme = useTheme2();
useEffect(() => {
dispatch(fetchExternalAlertmanagersAction());
@@ -37,10 +59,12 @@ export const ExternalAlertmanagers = () => {
.map((am) => {
return am.url;
});
- dispatch(addExternalAlertmanagersAction(newList));
+ dispatch(
+ addExternalAlertmanagersAction({ alertmanagers: newList, alertmanagersChoice: alertmanagersChoice ?? 'all' })
+ );
setDeleteModalState({ open: false, index: 0 });
},
- [externalAlertManagers, dispatch]
+ [externalAlertManagers, dispatch, alertmanagersChoice]
);
const onEdit = useCallback(() => {
@@ -70,16 +94,26 @@ export const ExternalAlertmanagers = () => {
}));
}, [setModalState]);
+ const onChangeAlertmanagerChoice = (alertmanagersChoice: string) => {
+ dispatch(
+ addExternalAlertmanagersAction({ alertmanagers: externalAlertManagers.map((am) => am.url), alertmanagersChoice })
+ );
+ };
+
+ const onChangeAlertmanagers = (alertmanagers: string[]) => {
+ dispatch(addExternalAlertmanagersAction({ alertmanagers, alertmanagersChoice: alertmanagersChoice ?? 'all' }));
+ };
+
const getStatusColor = (status: string) => {
switch (status) {
case 'active':
- return 'green';
+ return theme.colors.success.main;
case 'pending':
- return 'yellow';
+ return theme.colors.warning.main;
default:
- return 'red';
+ return theme.colors.error.main;
}
};
@@ -107,49 +141,63 @@ export const ExternalAlertmanagers = () => {
buttonIcon="bell-slash"
/>
) : (
-
-
-
- | Url |
- Status |
- Action |
-
-
-
- {externalAlertManagers?.map((am, index) => {
- return (
-
- |
- {am.url}
- {am.actualUrl ? (
-
-
-
- ) : null}
- |
-
-
- |
-
-
-
-
-
- |
-
- );
- })}
-
-
+ <>
+
+
+
+ | Url |
+ Status |
+ Action |
+
+
+
+ {externalAlertManagers?.map((am, index) => {
+ return (
+
+ |
+ {am.url}
+ {am.actualUrl ? (
+
+
+
+ ) : null}
+ |
+
+
+ |
+
+
+
+
+
+ |
+
+ );
+ })}
+
+
+
+
+ onChangeAlertmanagerChoice(value!)}
+ />
+
+
+
)}
{
onConfirm={() => onDelete(deleteModalState.index)}
onDismiss={() => setDeleteModalState({ open: false, index: 0 })}
/>
- {modalState.open && }
+ {modalState.open && (
+
+ )}