From 08ac2959a4d17a58aaf1f64738d1e442c6de93eb Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 10 Jan 2019 21:47:09 +0000
Subject: [PATCH] Moving to grafana ui, fix issue with TestRuleResult

---
 .../LoadingPlaceholder/LoadingPlaceholder.tsx | 11 ++++++++++
 packages/grafana-ui/src/components/index.ts   |  1 +
 public/app/features/alerting/AlertTab.tsx     | 21 ++++++-------------
 .../features/alerting/TestRuleButton.test.tsx |  6 +++---
 ...{TestRuleButton.tsx => TestRuleResult.tsx} |  6 ++++--
 .../dashboard/dashgrid/QueriesTab.tsx         | 11 +++-------
 6 files changed, 28 insertions(+), 28 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
 rename public/app/features/alerting/{TestRuleButton.tsx => TestRuleResult.tsx} (86%)

diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
new file mode 100644
index 00000000000..01048014f8a
--- /dev/null
+++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
@@ -0,0 +1,11 @@
+import React, { SFC } from 'react';
+
+interface LoadingPlaceholderProps {
+  text: string;
+}
+
+export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
+  <div className="gf-form-group">
+    {text} <i className="fa fa-spinner fa-spin" />
+  </div>
+);
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index abb1cf1b34c..6fa7de62572 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -2,3 +2,4 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
+export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
index 5623fac95c1..0520cd5e6e8 100644
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -1,11 +1,12 @@
 // Libraries
-import React, { PureComponent, SFC } from 'react';
+import React, { PureComponent } from 'react';
 
 // Services & Utils
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import appEvents from 'app/core/app_events';
 
 // Components
+import { LoadingPlaceholder } from '@grafana/ui';
 import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
@@ -14,7 +15,7 @@ import 'app/features/alerting/AlertTabCtrl';
 // Types
 import { DashboardModel } from '../dashboard/dashboard_model';
 import { PanelModel } from '../dashboard/panel_model';
-import { TestRuleButton } from './TestRuleButton';
+import { TestRuleResult } from './TestRuleResult';
 
 interface Props {
   angularPanel?: AngularComponent;
@@ -22,16 +23,6 @@ interface Props {
   panel: PanelModel;
 }
 
-interface LoadingPlaceholderProps {
-  text: string;
-}
-
-const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
-  <div className="gf-form-group">
-    {text} <i className="fa fa-spinner fa-spin" />
-  </div>
-);
-
 export class AlertTab extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
@@ -120,14 +111,14 @@ export class AlertTab extends PureComponent<Props> {
     };
   };
 
-  renderTestRuleButton = () => {
+  renderTestRuleResult = () => {
     const { panel, dashboard } = this.props;
-    return <TestRuleButton panelId={panel.id} dashboard={dashboard} LoadingPlaceholder={LoadingPlaceholder} />;
+    return <TestRuleResult panelId={panel.id} dashboard={dashboard} LoadingPlaceholder={LoadingPlaceholder} />;
   };
 
   testRule = (): EditorToolbarView => ({
     title: 'Test Rule',
-    render: () => this.renderTestRuleButton(),
+    render: () => this.renderTestRuleResult(),
   });
 
   onAddAlert = () => {
diff --git a/public/app/features/alerting/TestRuleButton.test.tsx b/public/app/features/alerting/TestRuleButton.test.tsx
index ae3b570cf43..b762ebf2579 100644
--- a/public/app/features/alerting/TestRuleButton.test.tsx
+++ b/public/app/features/alerting/TestRuleButton.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DashboardModel } from '../dashboard/dashboard_model';
-import { Props, TestRuleButton } from './TestRuleButton';
+import { Props, TestRuleResult } from './TestRuleResult';
 
 jest.mock('app/core/services/backend_srv', () => ({
   getBackendSrv: () => ({
@@ -18,9 +18,9 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<TestRuleButton {...props} />);
+  const wrapper = shallow(<TestRuleResult {...props} />);
 
-  return { wrapper, instance: wrapper.instance() as TestRuleButton };
+  return { wrapper, instance: wrapper.instance() as TestRuleResult };
 };
 
 describe('Render', () => {
diff --git a/public/app/features/alerting/TestRuleButton.tsx b/public/app/features/alerting/TestRuleResult.tsx
similarity index 86%
rename from public/app/features/alerting/TestRuleButton.tsx
rename to public/app/features/alerting/TestRuleResult.tsx
index f9927b1a182..e55dd6aae51 100644
--- a/public/app/features/alerting/TestRuleButton.tsx
+++ b/public/app/features/alerting/TestRuleResult.tsx
@@ -14,7 +14,7 @@ interface State {
   testRuleResponse: {};
 }
 
-export class TestRuleButton extends PureComponent<Props, State> {
+export class TestRuleResult extends PureComponent<Props, State> {
   readonly state: State = {
     isLoading: false,
     testRuleResponse: {},
@@ -27,8 +27,10 @@ export class TestRuleButton extends PureComponent<Props, State> {
   async testRule() {
     const { panelId, dashboard } = this.props;
     const payload = { dashboard: dashboard.getSaveModelClone(), panelId };
+
+    this.setState({ isLoading: true });
     const testRuleResponse = await getBackendSrv().post(`/api/alerts/test`, payload);
-    this.setState(prevState => ({ ...prevState, isLoading: false, testRuleResponse }));
+    this.setState({ isLoading: false, testRuleResponse });
   }
 
   render() {
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index 77ab64b1dba..eab7a95d471 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -1,15 +1,16 @@
 // Libraries
-import React, { PureComponent, SFC } from 'react';
+import React, { PureComponent } from 'react';
 import _ from 'lodash';
 
 // Components
 import 'app/features/panel/metrics_tab';
-import { EditorTabBody, EditorToolbarView} from './EditorTabBody';
+import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
 import { PanelOptionSection } from './PanelOptionSection';
+import { LoadingPlaceholder } from '@grafana/ui';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -36,12 +37,6 @@ interface State {
   isAddingMixed: boolean;
 }
 
-interface LoadingPlaceholderProps {
-  text: string;
-}
-
-const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => <h2>{text}</h2>;
-
 export class QueriesTab extends PureComponent<Props, State> {
   element: HTMLElement;
   component: AngularComponent;