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 1/2] 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;

From 2f0ab99ae5e63bc58984b6cc126228962ea38b21 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 10 Jan 2019 22:15:37 +0000
Subject: [PATCH 2/2] Fixing test and small refactor

---
 public/app/features/alerting/AlertTab.tsx           |  3 +--
 ...tRuleButton.test.tsx => TestRuleResult.test.tsx} |  1 -
 public/app/features/alerting/TestRuleResult.tsx     |  3 +--
 .../__snapshots__/TestRuleButton.test.tsx.snap      | 13 -------------
 .../__snapshots__/TestRuleResult.test.tsx.snap      |  7 +++++++
 .../app/features/dashboard/dashgrid/QueriesTab.tsx  |  3 +--
 .../features/dashboard/dashgrid/QueryInspector.tsx  |  3 +--
 7 files changed, 11 insertions(+), 22 deletions(-)
 rename public/app/features/alerting/{TestRuleButton.test.tsx => TestRuleResult.test.tsx} (97%)
 delete mode 100644 public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
 create mode 100644 public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap

diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx
index 0520cd5e6e8..2a1b3d12ecf 100644
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -6,7 +6,6 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
 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';
@@ -113,7 +112,7 @@ export class AlertTab extends PureComponent<Props> {
 
   renderTestRuleResult = () => {
     const { panel, dashboard } = this.props;
-    return <TestRuleResult panelId={panel.id} dashboard={dashboard} LoadingPlaceholder={LoadingPlaceholder} />;
+    return <TestRuleResult panelId={panel.id} dashboard={dashboard} />;
   };
 
   testRule = (): EditorToolbarView => ({
diff --git a/public/app/features/alerting/TestRuleButton.test.tsx b/public/app/features/alerting/TestRuleResult.test.tsx
similarity index 97%
rename from public/app/features/alerting/TestRuleButton.test.tsx
rename to public/app/features/alerting/TestRuleResult.test.tsx
index b762ebf2579..9beb5ade632 100644
--- a/public/app/features/alerting/TestRuleButton.test.tsx
+++ b/public/app/features/alerting/TestRuleResult.test.tsx
@@ -13,7 +13,6 @@ const setup = (propOverrides?: object) => {
   const props: Props = {
     panelId: 1,
     dashboard: new DashboardModel({ panels: [{ id: 1 }] }),
-    LoadingPlaceholder: {},
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/alerting/TestRuleResult.tsx b/public/app/features/alerting/TestRuleResult.tsx
index e55dd6aae51..4014e529597 100644
--- a/public/app/features/alerting/TestRuleResult.tsx
+++ b/public/app/features/alerting/TestRuleResult.tsx
@@ -2,11 +2,11 @@ import React, { PureComponent } from 'react';
 import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { DashboardModel } from '../dashboard/dashboard_model';
+import { LoadingPlaceholder } from '@grafana/ui/src';
 
 export interface Props {
   panelId: number;
   dashboard: DashboardModel;
-  LoadingPlaceholder: any;
 }
 
 interface State {
@@ -35,7 +35,6 @@ export class TestRuleResult extends PureComponent<Props, State> {
 
   render() {
     const { testRuleResponse, isLoading } = this.state;
-    const { LoadingPlaceholder } = this.props;
 
     if (isLoading === true) {
       return <LoadingPlaceholder text="Evaluating rule" />;
diff --git a/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap b/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
deleted file mode 100644
index d1ed3e64e99..00000000000
--- a/public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<JSONFormatter
-  config={
-    Object {
-      "animateOpen": true,
-    }
-  }
-  json={Object {}}
-  open={3}
-/>
-`;
diff --git a/public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap b/public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap
new file mode 100644
index 00000000000..73f85f12354
--- /dev/null
+++ b/public/app/features/alerting/__snapshots__/TestRuleResult.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<Component
+  text="Evaluating rule"
+/>
+`;
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index eab7a95d471..a20f8627fba 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -10,7 +10,6 @@ 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';
@@ -129,7 +128,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
   renderQueryInspector = () => {
     const { panel } = this.props;
-    return <QueryInspector panel={panel} LoadingPlaceholder={LoadingPlaceholder} />;
+    return <QueryInspector panel={panel} />;
   };
 
   renderHelp = () => {
diff --git a/public/app/features/dashboard/dashgrid/QueryInspector.tsx b/public/app/features/dashboard/dashgrid/QueryInspector.tsx
index 090bc220bc0..8e490f6b622 100644
--- a/public/app/features/dashboard/dashgrid/QueryInspector.tsx
+++ b/public/app/features/dashboard/dashgrid/QueryInspector.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
 import appEvents from 'app/core/app_events';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
+import { LoadingPlaceholder } from '@grafana/ui';
 
 interface DsQuery {
   isLoading: boolean;
@@ -10,7 +11,6 @@ interface DsQuery {
 
 interface Props {
   panel: any;
-  LoadingPlaceholder: any;
 }
 
 interface State {
@@ -177,7 +177,6 @@ export class QueryInspector extends PureComponent<Props, State> {
 
   render() {
     const { response, isLoading } = this.state.dsQuery;
-    const { LoadingPlaceholder } = this.props;
     const { isMocking } = this.state;
     const openNodes = this.getNrOfOpenNodes();