[ML] Fix Single Metric Viewer not loading if job is metric with no partition (#83880)

qn895 · qn895 · commit b8a4e75f4de2 · 2020-11-20T09:33:20.000-06:00
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/plot_function_controls/plot_function_controls.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/plot_function_controls/plot_function_controls.tsx
@@ -38,12 +38,14 @@ export const PlotByFunctionControls = ({
   selectedDetectorIndex,
   selectedJobId,
   selectedEntities,
+  entityControlsCount,
 }: {
   functionDescription: undefined | string;
   setFunctionDescription: (func: string) => void;
   selectedDetectorIndex: number;
   selectedJobId: string;
   selectedEntities: Record<string, any>;
+  entityControlsCount: number;
 }) => {
   const toastNotificationService = useToastNotificationService();
 
@@ -73,9 +75,12 @@ export const PlotByFunctionControls = ({
       return;
     }
     const selectedJob = mlJobService.getJob(selectedJobId);
+    // if no controls, it's okay to fetch
+    // if there are series controls, only fetch if user has selected something
+    const validEntities =
+      entityControlsCount === 0 || (entityControlsCount > 0 && selectedEntities !== undefined);
     if (
-      // set if only entity controls are picked
-      selectedEntities !== undefined &&
+      validEntities &&
       functionDescription === undefined &&
       isMetricDetector(selectedJob, selectedDetectorIndex)
     ) {
@@ -95,6 +100,7 @@ export const PlotByFunctionControls = ({
     selectedEntities,
     selectedJobId,
     functionDescription,
+    entityControlsCount,
   ]);
 
   if (functionDescription === undefined) return null;
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/series_controls/series_controls.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/series_controls/series_controls.tsx
@@ -28,6 +28,7 @@ import { useStorage } from '../../../contexts/ml/use_storage';
 import { EntityFieldType } from '../../../../../common/types/anomalies';
 import { FieldDefinition } from '../../../services/results_service/result_service_rx';
 import { getViewableDetectors } from '../../timeseriesexplorer_utils/get_viewable_detectors';
+import { PlotByFunctionControls } from '../plot_function_controls';
 
 function getEntityControlOptions(fieldValues: FieldDefinition['values']): ComboBoxOption[] {
   if (!Array.isArray(fieldValues)) {
@@ -67,6 +68,8 @@ interface SeriesControlsProps {
   bounds: any;
   appStateHandler: Function;
   selectedEntities: Record<string, any>;
+  functionDescription: string;
+  setFunctionDescription: (func: string) => void;
 }
 
 /**
@@ -79,6 +82,8 @@ export const SeriesControls: FC<SeriesControlsProps> = ({
   appStateHandler,
   children,
   selectedEntities,
+  functionDescription,
+  setFunctionDescription,
 }) => {
   const {
     services: {
@@ -306,6 +311,15 @@ export const SeriesControls: FC<SeriesControlsProps> = ({
             />
           );
         })}
+        <PlotByFunctionControls
+          selectedJobId={selectedJobId}
+          selectedDetectorIndex={selectedDetectorIndex}
+          selectedEntities={selectedEntities}
+          functionDescription={functionDescription}
+          setFunctionDescription={setFunctionDescription}
+          entityControlsCount={entityControls.length}
+        />
+
         {children}
       </EuiFlexGroup>
     </div>
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -81,7 +81,6 @@ import { ANOMALY_DETECTION_DEFAULT_TIME_RANGE } from '../../../common/constants/
 import { getControlsForDetector } from './get_controls_for_detector';
 import { SeriesControls } from './components/series_controls';
 import { TimeSeriesChartWithTooltips } from './components/timeseries_chart/timeseries_chart_with_tooltip';
-import { PlotByFunctionControls } from './components/plot_function_controls';
 import { aggregationTypeTransform } from '../../../common/util/anomaly_utils';
 import { isMetricDetector } from './get_function_description';
 import { getViewableDetectors } from './timeseriesexplorer_utils/get_viewable_detectors';
@@ -1013,15 +1012,9 @@ export class TimeSeriesExplorer extends React.Component {
           selectedDetectorIndex={selectedDetectorIndex}
           selectedEntities={this.props.selectedEntities}
           bounds={bounds}
+          functionDescription={this.props.functionDescription}
+          setFunctionDescription={this.setFunctionDescription}
         >
-          <PlotByFunctionControls
-            selectedJobId={selectedJobId}
-            selectedDetectorIndex={selectedDetectorIndex}
-            selectedEntities={this.props.selectedEntities}
-            functionDescription={this.props.functionDescription}
-            setFunctionDescription={this.setFunctionDescription}
-          />
-
           {arePartitioningFieldsProvided && (
             <EuiFlexItem style={{ textAlign: 'right' }}>
               <EuiFormRow hasEmptyLabelSpace style={{ maxWidth: '100%' }}>
