AlertTab: some ui updates (#23971)

* updated the alerting tab.

* changed so we use a confirm button.

* removed uncommeneted import.

* Change to secondary buttons

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* trying to fix issue with panel of undefined.

* Fix prettier

* Update public/app/features/alerting/AlertTab.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/features/alerting/AlertTab.tsx

@@ -1,14 +1,11 @@
 import React, { PureComponent } from 'react';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { css } from 'emotion';
-import { Alert, Button, IconName } 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 appEvents from 'app/core/app_events';
 import { getAlertingValidationMessage } from './getAlertingValidationMessage';
 
-import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
 import 'app/features/alerting/AlertTabCtrl';
@@ -16,7 +13,7 @@ import 'app/features/alerting/AlertTabCtrl';
 import { DashboardModel } from '../dashboard/state/DashboardModel';
 import { PanelModel } from '../dashboard/state/PanelModel';
 import { TestRuleResult } from './TestRuleResult';
-import { AppNotificationSeverity, CoreEvents, StoreState } from 'app/types';
+import { AppNotificationSeverity, StoreState } from 'app/types';
 import { updateLocation } from 'app/core/actions';
 import { PanelEditorTabId } from '../dashboard/components/PanelEditor/types';
 
@@ -37,6 +34,9 @@ export type Props = OwnProps & ConnectedProps & DispatchProps;
 
 interface State {
   validatonMessage: string;
+  showStateHistory: boolean;
+  showDeleteConfirmation: boolean;
+  showTestRule: boolean;
 }
 
 class UnConnectedAlertTab extends PureComponent<Props, State> {
@@ -46,6 +46,9 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
 
   state: State = {
     validatonMessage: '',
+    showStateHistory: false,
+    showDeleteConfirmation: false,
+    showTestRule: false,
   };
 
   componentDidMount() {
@@ -103,57 +106,6 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
     }
   }
 
-  stateHistory = (): EditorToolbarView => {
-    const { panel, dashboard } = this.props;
-
-    return {
-      title: 'State history',
-      render: () => {
-        return (
-          <StateHistory
-            dashboard={dashboard}
-            panelId={panel.editSourceId ?? panel.id}
-            onRefresh={this.panelCtrl.refresh}
-          />
-        );
-      },
-    };
-  };
-
-  deleteAlert = (): EditorToolbarView => {
-    const { panel } = this.props;
-    return {
-      title: 'Delete',
-      btnType: 'danger',
-      onClick: () => {
-        appEvents.emit(CoreEvents.showConfirmModal, {
-          title: 'Delete Alert',
-          text: 'Are you sure you want to delete this alert rule?',
-          text2: 'You need to save dashboard for the delete to take effect',
-          icon: 'trash-alt',
-          yesText: 'Delete',
-          onConfirm: () => {
-            delete panel.alert;
-            panel.thresholds = [];
-            this.panelCtrl.alertState = null;
-            this.panelCtrl.render();
-            this.forceUpdate();
-          },
-        });
-      },
-    };
-  };
-
-  renderTestRuleResult = () => {
-    const { dashboard, panel } = this.props;
-    return <TestRuleResult panel={panel} dashboard={dashboard} />;
-  };
-
-  testRule = (): EditorToolbarView => ({
-    title: 'Test Rule',
-    render: () => this.renderTestRuleResult(),
-  });
-
   onAddAlert = () => {
     this.panelCtrl._enableAlert();
     this.component.digest();
@@ -165,6 +117,11 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
     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;
 
@@ -186,6 +143,74 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
     );
   };
 
+  renderTestRule = () => {
+    if (!this.state.showTestRule) {
+      return null;
+    }
+
+    const { panel, dashboard } = this.props;
+    const onDismiss = () => this.onToggleModal('showTestRule');
+
+    return (
+      <Modal isOpen={true} icon="bug" title="Testing rule" onDismiss={onDismiss} onClickBackdrop={onDismiss}>
+        <TestRuleResult panel={panel} dashboard={dashboard} />
+      </Modal>
+    );
+  };
+
+  renderDeleteConfirmation = () => {
+    if (!this.state.showDeleteConfirmation) {
+      return null;
+    }
+
+    const { panel } = this.props;
+    const onDismiss = () => this.onToggleModal('showDeleteConfirmation');
+
+    return (
+      <ConfirmModal
+        isOpen={true}
+        icon="trash-alt"
+        title="Delete"
+        body={
+          <div>
+            Are you sure you want to delete this alert rule?
+            <br />
+            <small>You need to save dashboard for the delete to take effect.</small>
+          </div>
+        }
+        confirmText="Delete Alert"
+        onDismiss={onDismiss}
+        onConfirm={() => {
+          delete panel.alert;
+          panel.thresholds = [];
+          this.panelCtrl.alertState = null;
+          this.panelCtrl.render();
+          this.component.digest();
+          onDismiss();
+        }}
+      />
+    );
+  };
+
+  renderStateHistory = () => {
+    if (!this.state.showStateHistory) {
+      return null;
+    }
+
+    const { panel, dashboard } = this.props;
+    const onDismiss = () => this.onToggleModal('showStateHistory');
+
+    return (
+      <Modal isOpen={true} icon="history" title="State history" onDismiss={onDismiss} onClickBackdrop={onDismiss}>
+        <StateHistory
+          dashboard={dashboard}
+          panelId={panel.editSourceId ?? panel.id}
+          onRefresh={() => this.panelCtrl.refresh()}
+        />
+      </Modal>
+    );
+  };
+
   render() {
     const { alert, transformations } = this.props.panel;
     const { validatonMessage } = this.state;
@@ -195,8 +220,6 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
       return this.renderValidationMessage();
     }
 
-    const toolbarItems = alert ? [this.stateHistory(), this.testRule(), this.deleteAlert()] : [];
-
     const model = {
       title: 'Panel has no alert rule defined',
       buttonIcon: 'bell' as IconName,
@@ -205,19 +228,40 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
     };
 
     return (
-      <EditorTabBody toolbarItems={toolbarItems}>
+      <>
-        <div aria-label={selectors.components.AlertTab.content}>
+        <CustomScrollbar autoHeightMin="100%">
-          {alert && hasTransformations && (
+          <Container padding="md">
-            <Alert
+            <div aria-label={selectors.components.AlertTab.content}>
-              severity={AppNotificationSeverity.Error}
+              {alert && hasTransformations && (
-              title="Transformations are not supported in alert queries"
+                <Alert
-            />
+                  severity={AppNotificationSeverity.Error}
-          )}
+                  title="Transformations are not supported in alert queries"
+                />
+              )}
 
-          <div ref={element => (this.element = element)} />
+              <div ref={element => (this.element = element)} />
-          {!alert && !validatonMessage && <EmptyListCTA {...model} />}
+              {alert && (
-        </div>
+                <HorizontalGroup>
-      </EditorTabBody>
+                  <Button onClick={() => this.onToggleModal('showStateHistory')} variant="secondary">
+                    State history
+                  </Button>
+                  <Button onClick={() => this.onToggleModal('showTestRule')} variant="secondary">
+                    Test rule
+                  </Button>
+                  <Button onClick={() => this.onToggleModal('showDeleteConfirmation')} variant="destructive">
+                    Delete
+                  </Button>
+                </HorizontalGroup>
+              )}
+              {!alert && !validatonMessage && <EmptyListCTA {...model} />}
+            </div>
+          </Container>
+        </CustomScrollbar>
+
+        {this.renderTestRule()}
+        {this.renderDeleteConfirmation()}
+        {this.renderStateHistory()}
+      </>
     );
   }
 }

public/app/features/alerting/StateHistory.tsx

@@ -1,11 +1,10 @@
 import React, { PureComponent } from 'react';
 import { getBackendSrv } from '@grafana/runtime';
-import { Icon } from '@grafana/ui';
+import { Icon, ConfirmButton, Button } from '@grafana/ui';
 
 import alertDef from './state/alertDef';
 import { DashboardModel } from '../dashboard/state/DashboardModel';
-import appEvents from '../../core/app_events';
+import { css } from 'emotion';
-import { CoreEvents } from 'app/types';
 
 interface Props {
   dashboard: DashboardModel;
@@ -46,28 +45,16 @@ class StateHistory extends PureComponent<Props, State> {
       });
   }
 
-  clearHistory = () => {
+  clearHistory = async () => {
-    const { dashboard, onRefresh, panelId } = this.props;
+    const { dashboard, panelId, onRefresh } = this.props;
 
-    appEvents.emit(CoreEvents.showConfirmModal, {
+    await getBackendSrv().post('/api/annotations/mass-delete', {
-      title: 'Delete Alert History',
+      dashboardId: dashboard.id,
-      text: 'Are you sure you want to remove all history & annotations for this alert?',
+      panelId: panelId,
-      icon: 'trash-alt',
-      yesText: 'Yes',
-      onConfirm: () => {
-        getBackendSrv()
-          .post('/api/annotations/mass-delete', {
-            dashboardId: dashboard.id,
-            panelId: panelId,
-          })
-          .then(() => {
-            this.setState({
-              stateHistoryItems: [],
-            });
-            onRefresh();
-          });
-      },
     });
+
+    this.setState({ stateHistoryItems: [] });
+    onRefresh();
   };
 
   render() {
@@ -78,9 +65,17 @@ class StateHistory extends PureComponent<Props, State> {
         {stateHistoryItems.length > 0 && (
           <div className="p-b-1">
             <span className="muted">Last 50 state changes</span>
-            <button className="btn btn-small btn-danger pull-right" onClick={this.clearHistory}>
+            <ConfirmButton onConfirm={this.clearHistory} confirmVariant="destructive" confirmText="Clear">
-              <Icon name="trash-alt" style={{ marginRight: '4px' }} size="xs" /> {` Clear history`}
+              <Button
-            </button>
+                className={css`
+                  direction: ltr;
+                `}
+                variant="destructive"
+                icon="trash-alt"
+              >
+                Clear history
+              </Button>
+            </ConfirmButton>
           </div>
         )}
         <ol className="alert-rule-list">

public/app/features/dashboard/panel_editor/EditorTabBody.tsx

@@ -1,135 +0,0 @@
-import React, { PureComponent } from 'react';
-import { CustomScrollbar, Icon, IconName, PanelOptionsGroup } from '@grafana/ui';
-import { selectors } from '@grafana/e2e-selectors';
-
-import { FadeIn } from 'app/core/components/Animations/FadeIn';
-
-interface Props {
-  children: JSX.Element;
-  renderToolbar?: () => JSX.Element;
-  toolbarItems?: EditorToolbarView[];
-  scrollTop?: number;
-  setScrollTop?: (value: React.MouseEvent<HTMLElement>) => void;
-}
-
-export interface EditorToolbarView {
-  title?: string;
-  heading?: string;
-  icon?: string;
-  disabled?: boolean;
-  onClick?: () => void;
-  render?: () => JSX.Element;
-  action?: () => void;
-  btnType?: 'danger';
-}
-
-interface State {
-  openView?: EditorToolbarView;
-  isOpen: boolean;
-  fadeIn: boolean;
-}
-
-export class EditorTabBody extends PureComponent<Props, State> {
-  static defaultProps: Partial<Props> = {
-    toolbarItems: [],
-  };
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      openView: null,
-      fadeIn: false,
-      isOpen: false,
-    };
-  }
-
-  componentDidMount() {
-    this.setState({ fadeIn: true });
-  }
-
-  onToggleToolBarView = (item: EditorToolbarView) => {
-    this.setState({
-      openView: item,
-      isOpen: this.state.openView !== item || !this.state.isOpen,
-    });
-  };
-
-  onCloseOpenView = () => {
-    this.setState({ isOpen: false });
-  };
-
-  static getDerivedStateFromProps(props: Props, state: State) {
-    if (state.openView) {
-      const activeToolbarItem = props.toolbarItems.find(
-        (item: any) => item.title === state.openView.title && item.icon === state.openView.icon
-      );
-      if (activeToolbarItem) {
-        return {
-          ...state,
-          openView: activeToolbarItem,
-        };
-      }
-    }
-    return state;
-  }
-
-  renderButton(view: EditorToolbarView) {
-    const onClick = () => {
-      if (view.onClick) {
-        view.onClick();
-      }
-
-      if (view.render) {
-        this.onToggleToolBarView(view);
-      }
-    };
-
-    return (
-      <div className="nav-buttons" key={view.title + view.icon}>
-        <button
-          className="btn navbar-button"
-          onClick={onClick}
-          disabled={view.disabled}
-          aria-label={selectors.components.QueryEditorToolbarItem.button(view.title)}
-        >
-          {view.icon && <Icon name={view.icon as IconName} />} {view.title}
-        </button>
-      </div>
-    );
-  }
-
-  renderOpenView(view: EditorToolbarView) {
-    return (
-      <PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
-        {view.render()}
-      </PanelOptionsGroup>
-    );
-  }
-
-  render() {
-    const { children, renderToolbar, toolbarItems, scrollTop, setScrollTop } = this.props;
-    const { openView, fadeIn, isOpen } = this.state;
-
-    return (
-      <>
-        <div className="toolbar">
-          {renderToolbar && renderToolbar()}
-          {toolbarItems.map(item => this.renderButton(item))}
-        </div>
-        <div className="panel-editor__scroll">
-          <CustomScrollbar autoHide={false} scrollTop={scrollTop} setScrollTop={setScrollTop} updateAfterMountMs={300}>
-            <div className="panel-editor__content">
-              <FadeIn in={isOpen} duration={200} unmountOnExit={true}>
-                {openView && this.renderOpenView(openView)}
-              </FadeIn>
-              <FadeIn in={fadeIn} duration={50}>
-                {children}
-              </FadeIn>
-            </div>
-          </CustomScrollbar>
-        </div>
-      </>
-    );
-  }
-}