[Logs UI] Disable ML job setup form while setup is pending (#54705)

This disables the configuration for in the log rate and categories setup screens while the setup process is ongoing.
elastic · Jan 14, 2020 · ce61b78 · ce61b78
1 parent 5986c82
commit ce61b78
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/...nts/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx b/...nts/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx
@@ -13,11 +13,12 @@ import { LoadingOverlayWrapper } from '../../../loading_overlay_wrapper';
 import { ValidatedIndex, ValidationIndicesUIError } from './validation';
 
 export const AnalysisSetupIndicesForm: React.FunctionComponent<{
+  disabled?: boolean;
   indices: ValidatedIndex[];
   isValidating: boolean;
   onChangeSelectedIndices: (selectedIndices: ValidatedIndex[]) => void;
   valid: boolean;
-}> = ({ indices, isValidating, onChangeSelectedIndices, valid }) => {
+}> = ({ disabled = false, indices, isValidating, onChangeSelectedIndices, valid }) => {
   const handleCheckboxChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       onChangeSelectedIndices(
@@ -40,7 +41,7 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
             label={<EuiCode>{index.name}</EuiCode>}
             onChange={handleCheckboxChange}
             checked={index.validity === 'valid' && index.isSelected}
-            disabled={index.validity === 'invalid'}
+            disabled={disabled || index.validity === 'invalid'}
           />
         );
 
@@ -52,7 +53,7 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
           </div>
         );
       }),
-    [handleCheckboxChange, indices]
+    [disabled, handleCheckboxChange, indices]
   );
 
   return (

diff --git a/...s/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx b/...s/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx
@@ -46,11 +46,12 @@ function selectedDateToParam(selectedDate: Moment | null) {
 }
 
 export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
+  disabled?: boolean;
   setStartTime: (startTime: number | undefined) => void;
   setEndTime: (endTime: number | undefined) => void;
   startTime: number | undefined;
   endTime: number | undefined;
-}> = ({ setStartTime, setEndTime, startTime, endTime }) => {
+}> = ({ disabled = false, setStartTime, setEndTime, startTime, endTime }) => {
   const now = useMemo(() => moment(), []);
   const selectedEndTimeIsToday = !endTime || moment(endTime).isSame(now, 'day');
   const startTimeValue = useMemo(() => {
@@ -86,9 +87,11 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
       >
         <EuiFlexGroup gutterSize="s">
           <EuiFormControlLayout
-            clear={startTime ? { onClick: () => setStartTime(undefined) } : undefined}
+            clear={startTime && !disabled ? { onClick: () => setStartTime(undefined) } : undefined}
+            isDisabled={disabled}
           >
             <FixedDatePicker
+              disabled={disabled}
               showTimeSelect
               selected={startTimeValue}
               onChange={date => setStartTime(selectedDateToParam(date))}
@@ -107,9 +110,11 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
       >
         <EuiFlexGroup gutterSize="s">
           <EuiFormControlLayout
-            clear={endTime ? { onClick: () => setEndTime(undefined) } : undefined}
+            clear={endTime && !disabled ? { onClick: () => setEndTime(undefined) } : undefined}
+            isDisabled={disabled}
           >
             <FixedDatePicker
+              disabled={disabled}
               showTimeSelect
               selected={endTimeValue}
               onChange={date => setEndTime(selectedDateToParam(date))}

diff --git a/...ents/logging/log_analysis_setup/initial_configuration_step/initial_configuration_step.tsx b/...ents/logging/log_analysis_setup/initial_configuration_step/initial_configuration_step.tsx
@@ -8,8 +8,9 @@ import { EuiSpacer, EuiForm, EuiCallOut } from '@elastic/eui';
 import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { SetupStatus } from '../../../../../common/log_analysis';
 import { AnalysisSetupIndicesForm } from './analysis_setup_indices_form';
 import { AnalysisSetupTimerangeForm } from './analysis_setup_timerange_form';
 import { ValidatedIndex, ValidationIndicesUIError } from './validation';
@@ -21,6 +22,7 @@ interface InitialConfigurationStepProps {
   endTime: number | undefined;
   isValidating: boolean;
   validatedIndices: ValidatedIndex[];
+  setupStatus: SetupStatus;
   setValidatedIndices: (selectedIndices: ValidatedIndex[]) => void;
   validationErrors?: ValidationIndicesUIError[];
 }
@@ -39,20 +41,25 @@ export const InitialConfigurationStep: React.FunctionComponent<InitialConfigurat
   endTime,
   isValidating,
   validatedIndices,
+  setupStatus,
   setValidatedIndices,
   validationErrors = [],
 }: InitialConfigurationStepProps) => {
+  const disabled = useMemo(() => !editableFormStatus.includes(setupStatus), [setupStatus]);
+
   return (
     <>
       <EuiSpacer size="m" />
       <EuiForm>
         <AnalysisSetupTimerangeForm
+          disabled={disabled}
           setStartTime={setStartTime}
           setEndTime={setEndTime}
           startTime={startTime}
           endTime={endTime}
         />
         <AnalysisSetupIndicesForm
+          disabled={disabled}
           indices={validatedIndices}
           isValidating={isValidating}
           onChangeSelectedIndices={setValidatedIndices}
@@ -65,6 +72,13 @@ export const InitialConfigurationStep: React.FunctionComponent<InitialConfigurat
   );
 };
 
+const editableFormStatus = [
+  'required',
+  'requiredForReconfiguration',
+  'requiredForUpdate',
+  'failed',
+];
+
 const errorCalloutTitle = i18n.translate(
   'xpack.infra.analysisSetup.steps.initialConfigurationStep.errorCalloutTitle',
   {

diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_categories/page_setup_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_categories/page_setup_content.tsx
@@ -48,6 +48,7 @@ export const LogEntryCategoriesSetupContent: React.FunctionComponent = () => {
         endTime,
         isValidating,
         validatedIndices,
+        setupStatus,
         setValidatedIndices,
         validationErrors,
       }),

diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_setup_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_setup_content.tsx
@@ -48,6 +48,7 @@ export const LogEntryRateSetupContent: React.FunctionComponent = () => {
         endTime,
         isValidating,
         validatedIndices,
+        setupStatus,
         setValidatedIndices,
         validationErrors,
       }),