[ML] Adding loading indicators to all wizard charts (#43382)

elastic · Aug 19, 2019 · c19a2d5 · c19a2d5
1 parent 9056dc4
commit c19a2d5
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 96 deletions.
diff --git a/...lugins/ml/public/jobs/new_job_new/pages/components/charts/anomaly_chart/anomaly_chart.tsx b/...lugins/ml/public/jobs/new_job_new/pages/components/charts/anomaly_chart/anomaly_chart.tsx
@@ -14,6 +14,7 @@ import { Scatter } from './scatter';
 import { Axes } from '../common/axes';
 import { getXRange } from '../common/utils';
 import { LineChartPoint } from '../../../../common/chart_loader';
+import { LoadingWrapper } from '../loading_wrapper';
 
 export enum CHART_TYPE {
   LINE,
@@ -27,32 +28,32 @@ interface Props {
   anomalyData: Anomaly[];
   height: string;
   width: string;
+  loading?: boolean;
 }
 
 export const AnomalyChart: FC<Props> = ({
   chartType,
-  chartData,
+  chartData = [],
   modelData,
   anomalyData,
   height,
   width,
+  loading = false,
 }) => {
   const data = chartType === CHART_TYPE.SCATTER ? flattenData(chartData) : chartData;
-  if (data.length === 0) {
-    return null;
-  }
-
   const xDomain = getXRange(data);
   return (
     <div style={{ width, height }} data-test-subj="mlAnomalyChart">
-      <Chart>
-        <Settings xDomain={xDomain} tooltip={TooltipType.None} />
-        <Axes chartData={data} />
-        <Anomalies anomalyData={anomalyData} />
-        <ModelBounds modelData={modelData} />
-        {chartType === CHART_TYPE.LINE && <Line chartData={data} />}
-        {chartType === CHART_TYPE.SCATTER && <Scatter chartData={data} />}
-      </Chart>
+      <LoadingWrapper height={height} hasData={data.length > 0} loading={loading}>
+        <Chart>
+          <Settings xDomain={xDomain} tooltip={TooltipType.None} />
+          <Axes chartData={data} />
+          <Anomalies anomalyData={anomalyData} />
+          <ModelBounds modelData={modelData} />
+          {chartType === CHART_TYPE.LINE && <Line chartData={data} />}
+          {chartType === CHART_TYPE.SCATTER && <Scatter chartData={data} />}
+        </Chart>
+      </LoadingWrapper>
     </div>
   );
 };

diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/utils.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/utils.ts
@@ -14,7 +14,11 @@ export function getCustomColor(specId: string, color: string): CustomSeriesColor
   return new Map([[lineDataSeriesColorValues, color]]);
 }
 
-export function getYRange(chartData: any) {
+export function getYRange(chartData: any[]) {
+  if (chartData.length === 0) {
+    return { min: 0, max: 0 };
+  }
+
   let max: number = Number.MIN_VALUE;
   let min: number = Number.MAX_VALUE;
   chartData.forEach((r: any) => {
@@ -32,7 +36,10 @@ export function getYRange(chartData: any) {
   };
 }
 
-export function getXRange(lineChartData: any) {
+export function getXRange(lineChartData: any[]) {
+  if (lineChartData.length === 0) {
+    return { min: 0, max: 0 };
+  }
   return {
     min: lineChartData[0].time,
     max: lineChartData[lineChartData.length - 1].time,

diff --git a/.../ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx b/.../ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx
@@ -10,33 +10,43 @@ import { Axes } from '../common/axes';
 import { getCustomColor } from '../common/utils';
 import { LineChartPoint } from '../../../../common/chart_loader';
 import { EVENT_RATE_COLOR } from '../common/settings';
+import { LoadingWrapper } from '../loading_wrapper';
 
 interface Props {
   eventRateChartData: LineChartPoint[];
   height: string;
   width: string;
   showAxis?: boolean;
+  loading?: boolean;
 }
 
 const SPEC_ID = 'event_rate';
 
-export const EventRateChart: FC<Props> = ({ eventRateChartData, height, width, showAxis }) => {
+export const EventRateChart: FC<Props> = ({
+  eventRateChartData,
+  height,
+  width,
+  showAxis,
+  loading = false,
+}) => {
   return (
     <div style={{ width, height }} data-test-subj="mlEventRateChart">
-      <Chart>
-        {showAxis === true && <Axes />}
+      <LoadingWrapper height={height} hasData={eventRateChartData.length > 0} loading={loading}>
+        <Chart>
+          {showAxis === true && <Axes />}
 
-        <Settings tooltip={TooltipType.None} />
-        <BarSeries
-          id={getSpecId('event_rate')}
-          xScaleType={ScaleType.Time}
-          yScaleType={ScaleType.Linear}
-          xAccessor={'time'}
-          yAccessors={['value']}
-          data={eventRateChartData}
-          customSeriesColors={getCustomColor(SPEC_ID, EVENT_RATE_COLOR)}
-        />
-      </Chart>
+          <Settings tooltip={TooltipType.None} />
+          <BarSeries
+            id={getSpecId('event_rate')}
+            xScaleType={ScaleType.Time}
+            yScaleType={ScaleType.Linear}
+            xAccessor={'time'}
+            yAccessors={['value']}
+            data={eventRateChartData}
+            customSeriesColors={getCustomColor(SPEC_ID, EVENT_RATE_COLOR)}
+          />
+        </Chart>
+      </LoadingWrapper>
     </div>
   );
 };
diff --git a/...egacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/loading_wrapper/index.ts b/...egacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/loading_wrapper/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+export { LoadingWrapper } from './loading_wrapper';
diff --git a/...ns/ml/public/jobs/new_job_new/pages/components/charts/loading_wrapper/loading_wrapper.tsx b/...ns/ml/public/jobs/new_job_new/pages/components/charts/loading_wrapper/loading_wrapper.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC, Fragment } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+
+interface Props {
+  hasData: boolean;
+  height: string;
+  loading?: boolean;
+}
+
+export const LoadingWrapper: FC<Props> = ({ hasData, loading = false, height, children }) => {
+  const opacity = loading === true ? (hasData === true ? 0.3 : 0) : 1;
+
+  return (
+    <Fragment>
+      <div
+        style={{
+          height: '100%',
+          opacity,
+          transition: 'opacity 0.2s',
+        }}
+      >
+        {children}
+      </div>
+      {loading === true && (
+        <EuiFlexGroup
+          justifyContent="spaceAround"
+          alignItems="center"
+          style={{ height, marginTop: `-${height}` }}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </Fragment>
+  );
+};
diff --git a/...new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx b/...new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx
@@ -27,6 +27,7 @@ interface ChartGridProps {
   deleteDetector?: (index: number) => void;
   jobType: JOB_TYPE;
   animate?: boolean;
+  loading?: boolean;
 }
 
 export const ChartGrid: FC<ChartGridProps> = ({
@@ -39,6 +40,7 @@ export const ChartGrid: FC<ChartGridProps> = ({
   anomalyData,
   deleteDetector,
   jobType,
+  loading = false,
 }) => {
   const animateSplit = useAnimateSplit();
 
@@ -53,25 +55,24 @@ export const ChartGrid: FC<ChartGridProps> = ({
       <EuiFlexGrid columns={chartSettings.cols}>
         {aggFieldPairList.map((af, i) => (
           <EuiFlexItem key={i}>
-            {lineChartsData[i] !== undefined && (
-              <Fragment>
-                <DetectorTitle
-                  index={i}
-                  agg={aggFieldPairList[i].agg}
-                  field={aggFieldPairList[i].field}
-                  splitField={splitField}
-                  deleteDetector={deleteDetector}
-                />
-                <AnomalyChart
-                  chartType={CHART_TYPE.LINE}
-                  chartData={lineChartsData[i]}
-                  modelData={modelData[i]}
-                  anomalyData={anomalyData[i]}
-                  height={chartSettings.height}
-                  width={chartSettings.width}
-                />
-              </Fragment>
-            )}
+            <Fragment>
+              <DetectorTitle
+                index={i}
+                agg={aggFieldPairList[i].agg}
+                field={aggFieldPairList[i].field}
+                splitField={splitField}
+                deleteDetector={deleteDetector}
+              />
+              <AnomalyChart
+                chartType={CHART_TYPE.LINE}
+                chartData={lineChartsData[i]}
+                modelData={modelData[i]}
+                anomalyData={anomalyData[i]}
+                height={chartSettings.height}
+                width={chartSettings.width}
+                loading={loading}
+              />
+            </Fragment>
           </EuiFlexItem>
         ))}
       </EuiFlexGrid>

diff --git a/...b_new/pages/components/pick_fields_step/components/multi_metric_view/metric_selection.tsx b/...b_new/pages/components/pick_fields_step/components/multi_metric_view/metric_selection.tsx
@@ -43,6 +43,7 @@ export const MultiMetricDetectors: FC<Props> = ({ isActive, setIsValid }) => {
     jobCreator.aggFieldPairs
   );
   const [lineChartsData, setLineChartsData] = useState<LineChartData>({});
+  const [loadingData, setLoadingData] = useState(false);
   const [modelData, setModelData] = useState<Record<number, ModelItem[]>>([]);
   const [anomalyData, setAnomalyData] = useState<Record<number, Anomaly[]>>([]);
   const [start, setStart] = useState(jobCreator.start);
@@ -152,6 +153,7 @@ export const MultiMetricDetectors: FC<Props> = ({ isActive, setIsValid }) => {
     setChartSettings(cs);
 
     if (aggFieldPairList.length > 0) {
+      setLoadingData(true);
       const resp: LineChartData = await chartLoader.loadLineCharts(
         jobCreator.start,
         jobCreator.end,
@@ -162,24 +164,25 @@ export const MultiMetricDetectors: FC<Props> = ({ isActive, setIsValid }) => {
       );
 
       setLineChartsData(resp);
+      setLoadingData(false);
     }
   }
 
   return (
     <Fragment>
-      {lineChartsData && (
-        <ChartGrid
-          aggFieldPairList={aggFieldPairList}
-          chartSettings={chartSettings}
-          splitField={splitField}
-          fieldValues={fieldValues}
-          lineChartsData={lineChartsData}
-          modelData={modelData}
-          anomalyData={anomalyData}
-          deleteDetector={isActive ? deleteDetector : undefined}
-          jobType={jobCreator.type}
-        />
-      )}
+      <ChartGrid
+        aggFieldPairList={aggFieldPairList}
+        chartSettings={chartSettings}
+        splitField={splitField}
+        fieldValues={fieldValues}
+        lineChartsData={lineChartsData}
+        modelData={modelData}
+        anomalyData={anomalyData}
+        deleteDetector={isActive ? deleteDetector : undefined}
+        jobType={jobCreator.type}
+        loading={loadingData}
+      />
+
       {isActive && (
         <MetricSelector
           fields={fields}

diff --git a/...s/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx b/...s/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx
@@ -29,6 +29,7 @@ interface ChartGridProps {
   deleteDetector?: (index: number) => void;
   jobType: JOB_TYPE;
   fieldValuesPerDetector: DetectorFieldValues;
+  loading?: boolean;
 }
 
 export const ChartGrid: FC<ChartGridProps> = ({
@@ -41,47 +42,47 @@ export const ChartGrid: FC<ChartGridProps> = ({
   deleteDetector,
   jobType,
   fieldValuesPerDetector,
+  loading = false,
 }) => {
   const animateSplit = useAnimateSplit();
 
   return (
     <EuiFlexGrid columns={chartSettings.cols}>
       {aggFieldPairList.map((af, i) => (
         <EuiFlexItem key={i}>
-          {lineChartsData[i] !== undefined && (
-            <Fragment>
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <DetectorTitle
-                    index={i}
-                    agg={aggFieldPairList[i].agg}
-                    field={aggFieldPairList[i].field}
-                    splitField={splitField}
-                    deleteDetector={deleteDetector}
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  {deleteDetector !== undefined && <ByFieldSelector detectorIndex={i} />}
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <SplitCards
-                fieldValues={fieldValuesPerDetector[i] || []}
-                splitField={splitField}
-                numberOfDetectors={aggFieldPairList.length}
-                jobType={jobType}
-                animate={animateSplit}
-              >
-                <AnomalyChart
-                  chartType={CHART_TYPE.SCATTER}
-                  chartData={lineChartsData[i]}
-                  modelData={modelData[i]}
-                  anomalyData={anomalyData[i]}
-                  height={chartSettings.height}
-                  width={chartSettings.width}
+          <Fragment>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <DetectorTitle
+                  index={i}
+                  agg={aggFieldPairList[i].agg}
+                  field={aggFieldPairList[i].field}
+                  splitField={splitField}
+                  deleteDetector={deleteDetector}
                 />
-              </SplitCards>
-            </Fragment>
-          )}
+              </EuiFlexItem>
+              <EuiFlexItem>
+                {deleteDetector !== undefined && <ByFieldSelector detectorIndex={i} />}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <SplitCards
+              fieldValues={fieldValuesPerDetector[i] || []}
+              splitField={splitField}
+              numberOfDetectors={aggFieldPairList.length}
+              jobType={jobType}
+              animate={animateSplit}
+            >
+              <AnomalyChart
+                chartType={CHART_TYPE.SCATTER}
+                chartData={lineChartsData[i]}
+                modelData={modelData[i]}
+                anomalyData={anomalyData[i]}
+                height={chartSettings.height}
+                width={chartSettings.width}
+                loading={loading}
+              />
+            </SplitCards>
+          </Fragment>
         </EuiFlexItem>
       ))}
     </EuiFlexGrid>