Merge pull request #14834 from grafana/14793/loading-placeholder-to-grafanaui

Loading placeholder to grafanaui

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>
+);

packages/grafana-ui/src/components/index.ts

@@ -2,6 +2,7 @@ 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';
 export { ColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
 export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';

public/app/features/alerting/AlertTab.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { PureComponent, SFC } from 'react';
+import React, { PureComponent } from 'react';
 
 // Services & Utils
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
@@ -14,7 +14,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 +22,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 +110,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} />;
   };
 
   testRule = (): EditorToolbarView => ({
     title: 'Test Rule',
-    render: () => this.renderTestRuleButton(),
+    render: () => this.renderTestRuleResult(),
   });
 
   onAddAlert = () => {

public/app/features/alerting/TestRuleResult.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: () => ({
@@ -13,14 +13,13 @@ const setup = (propOverrides?: object) => {
   const props: Props = {
     panelId: 1,
     dashboard: new DashboardModel({ panels: [{ id: 1 }] }),
-    LoadingPlaceholder: {},
   };
 
   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', () => {

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 {
@@ -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,13 +27,14 @@ 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() {
     const { testRuleResponse, isLoading } = this.state;
-    const { LoadingPlaceholder } = this.props;
 
     if (isLoading === true) {
       return <LoadingPlaceholder text="Evaluating rule" />;

public/app/features/alerting/__snapshots__/TestRuleButton.test.tsx.snap

@@ -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}
-/>
-`;

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"
+/>
+`;

public/app/features/dashboard/dashgrid/QueriesTab.tsx

@@ -1,10 +1,10 @@
 // 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';
@@ -36,12 +36,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;
@@ -134,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 = () => {

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();