PanelEditor: Prevents adding transformations in panels with alerts (#27706)

a58a9e8e · Hugo Häggmark · GitHub · 35a145dd · a58a9e8e · a58a9e8e
Commit a58a9e8e authored Sep 23, 2020 by Hugo Häggmark Committed by GitHub Sep 23, 2020
4 changed files
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
 import React, { PureComponent } from 'react';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
-import { css } from 'emotion';
+import { Alert, Button, ConfirmModal, Container, CustomScrollbar, HorizontalGroup, IconName, Modal } from '@grafana/ui';
-import { Alert, Button, IconName, CustomScrollbar, Container, HorizontalGroup, ConfirmModal, Modal } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
 import { getAlertingValidationMessage } from './getAlertingValidationMessage';
@@ -14,8 +13,7 @@ import { DashboardModel } from '../dashboard/state/DashboardModel';
 import { PanelModel } from '../dashboard/state/PanelModel';
 import { TestRuleResult } from './TestRuleResult';
 import { AppNotificationSeverity, StoreState } from 'app/types';
-import { updateLocation } from 'app/core/actions';
+import { PanelNotSupported } from '../dashboard/components/PanelEditor/PanelNotSupported';
-import { PanelEditorTabId } from '../dashboard/components/PanelEditor/types';
 interface OwnProps {
  dashboard: DashboardModel;
@@ -26,14 +24,12 @@ interface ConnectedProps {
  angularPanelComponent?: AngularComponent | null;
 }
-interface DispatchProps {
+interface DispatchProps {}
-  updateLocation: typeof updateLocation;
-}
 export type Props = OwnProps & ConnectedProps & DispatchProps;
 interface State {
-  validatonMessage: string;
+  validationMessage: string;
  showStateHistory: boolean;
  showDeleteConfirmation: boolean;
  showTestRule: boolean;
@@ -45,7 +41,7 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
  panelCtrl: any;
  state: State = {
-    validatonMessage: '',
+    validationMessage: '',
    showStateHistory: false,
    showDeleteConfirmation: false,
    showTestRule: false,
@@ -94,15 +90,15 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
    this.component = loader.load(this.element, scopeProps, template);
-    const validatonMessage = await getAlertingValidationMessage(
+    const validationMessage = await getAlertingValidationMessage(
      panel.transformations,
      panel.targets,
      getDataSourceSrv(),
      panel.datasource
    );
-    if (validatonMessage) {
+    if (validationMessage) {
-      this.setState({ validatonMessage });
+      this.setState({ validationMessage });
    }
  }
@@ -112,37 +108,11 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
    this.forceUpdate();
  };
-  switchToQueryTab = () => {
+  onToggleModal = (prop: keyof Omit<State, 'validationMessage'>) => {
-    const { updateLocation } = this.props;
-    updateLocation({ query: { tab: PanelEditorTabId.Query }, partial: true });
-  };
-  onToggleModal = (prop: keyof Omit<State, 'validatonMessage'>) => {
    const value = this.state[prop];
    this.setState({ ...this.state, [prop]: !value });
  };
-  renderValidationMessage = () => {
-    const { validatonMessage } = this.state;
-    return (
-      <div
-        className={css`
-          width: 508px;
-          margin: 128px auto;
-        `}
-      >
-        <h2>{validatonMessage}</h2>
-        <br />
-        <div className="gf-form-group">
-          <Button size={'md'} variant={'secondary'} icon="arrow-left" onClick={this.switchToQueryTab}>
-            Go back to Queries
-          </Button>
-        </div>
-      </div>
-    );
-  };
  renderTestRule = () => {
    if (!this.state.showTestRule) {
      return null;
@@ -213,11 +183,11 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
  render() {
    const { alert, transformations } = this.props.panel;
-    const { validatonMessage } = this.state;
+    const { validationMessage } = this.state;
    const hasTransformations = transformations && transformations.length > 0;
-    if (!alert && validatonMessage) {
+    if (!alert && validationMessage) {
-      return this.renderValidationMessage();
+      return <PanelNotSupported message={validationMessage} />;
    }
    const model = {
@@ -253,7 +223,7 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
                  </Button>
                </HorizontalGroup>
              )}
-              {!alert && !validatonMessage && <EmptyListCTA {...model} />}
+              {!alert && !validationMessage && <EmptyListCTA {...model} />}
            </div>
          </Container>
        </CustomScrollbar>
@@ -272,6 +242,6 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (
  };
 };
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { updateLocation };
+const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {};
 export const AlertTab = connect(mapStateToProps, mapDispatchToProps)(UnConnectedAlertTab);
--- a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PanelNotSupported, Props } from './PanelNotSupported';
+import { updateLocation } from '../../../../core/actions';
+import { PanelEditorTabId } from './types';
+const setupTestContext = (options: Partial<Props>) => {
+  const defaults: Props = {
+    message: '',
+    dispatch: jest.fn(),
+  };
+  const props = { ...defaults, ...options };
+  render(<PanelNotSupported {...props} />);
+  return { props };
+};
+describe('PanelNotSupported', () => {
+  describe('when component is mounted', () => {
+    it('then the supplied message should be shown', () => {
+      setupTestContext({ message: 'Expected message' });
+      expect(screen.getByRole('heading', { name: /expected message/i })).toBeInTheDocument();
+    });
+    it('then the back to queries button should exist', () => {
+      setupTestContext({ message: 'Expected message' });
+      expect(screen.getByRole('button', { name: /go back to queries/i })).toBeInTheDocument();
+    });
+  });
+  describe('when the back to queries button is clicked', () => {
+    it('then correct action should be dispatched', () => {
+      const {
+        props: { dispatch },
+      } = setupTestContext({});
+      userEvent.click(screen.getByRole('button', { name: /go back to queries/i }));
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledWith(updateLocation({ query: { tab: PanelEditorTabId.Query }, partial: true }));
+    });
+  });
+});
--- a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx
+import React, { FC, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { Dispatch } from 'redux';
+import { Button, VerticalGroup } from '@grafana/ui';
+import { Layout } from '@grafana/ui/src/components/Layout/Layout';
+import { PanelEditorTabId } from './types';
+import { updateLocation } from '../../../../core/actions';
+export interface Props {
+  message: string;
+  dispatch?: Dispatch;
+}
+export const PanelNotSupported: FC<Props> = ({ message, dispatch: propsDispatch }) => {
+  const dispatch = propsDispatch ? propsDispatch : useDispatch();
+  const onBackToQueries = useCallback(() => {
+    dispatch(updateLocation({ query: { tab: PanelEditorTabId.Query }, partial: true }));
+  }, [dispatch]);
+  return (
+    <Layout justify="center" style={{ marginTop: '100px' }}>
+      <VerticalGroup spacing="md">
+        <h2>{message}</h2>
+        <div>
+          <Button size="md" variant="secondary" icon="arrow-left" onClick={onBackToQueries}>
+            Go back to Queries
+          </Button>
+        </div>
+      </VerticalGroup>
+    </Layout>
+  );
+};
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
 import React from 'react';
 import {
+  Alert,
  Button,
  Container,
  CustomScrollbar,
@@ -10,14 +11,14 @@ import {
  VerticalGroup,
 } from '@grafana/ui';
 import {
+  DataFrame,
  DataTransformerConfig,
+  DocsId,
  GrafanaTheme,
+  PanelData,
  SelectableValue,
  standardTransformersRegistry,
  transformDataFrame,
-  DataFrame,
-  PanelData,
-  DocsId,
 } from '@grafana/data';
 import { TransformationOperationRow } from './TransformationOperationRow';
 import { Card, CardProps } from '../../../../core/components/Card/Card';
@@ -27,6 +28,8 @@ import { Unsubscribable } from 'rxjs';
 import { PanelModel } from '../../state';
 import { getDocsLink } from 'app/core/utils/docsLinks';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { PanelNotSupported } from '../PanelEditor/PanelNotSupported';
+import { AppNotificationSeverity } from '../../../../types';
 interface TransformationsEditorProps {
  panel: PanelModel;
@@ -285,14 +288,27 @@ export class TransformationsEditor extends React.PureComponent<TransformationsEd
  }
  render() {
+    const {
+      panel: { alert },
+    } = this.props;
    const { transformations } = this.state;
    const hasTransforms = transformations.length > 0;
+    if (!hasTransforms && alert) {
+      return <PanelNotSupported message="Transformations can't be used on a panel with existing alerts" />;
+    }
    return (
      <CustomScrollbar autoHeightMin="100%">
        <Container padding="md">
          <div aria-label={selectors.components.TransformTab.content}>
+            {hasTransforms && alert ? (
+              <Alert
+                severity={AppNotificationSeverity.Error}
+                title="Transformations can't be used on a panel with alerts"
+              />
+            ) : null}
            {!hasTransforms && this.renderNoAddedTransformsState()}
            {hasTransforms && this.renderTransformationEditors()}
            {hasTransforms && this.renderTransformationSelector()}