[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.
This commit is contained in:
parent
f6890d4416
commit
8d00dc64d7
|
@ -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 (
|
||||
|
|
|
@ -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))}
|
||||
|
|
|
@ -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',
|
||||
{
|
||||
|
|
|
@ -48,6 +48,7 @@ export const LogEntryCategoriesSetupContent: React.FunctionComponent = () => {
|
|||
endTime,
|
||||
isValidating,
|
||||
validatedIndices,
|
||||
setupStatus,
|
||||
setValidatedIndices,
|
||||
validationErrors,
|
||||
}),
|
||||
|
|
|
@ -48,6 +48,7 @@ export const LogEntryRateSetupContent: React.FunctionComponent = () => {
|
|||
endTime,
|
||||
isValidating,
|
||||
validatedIndices,
|
||||
setupStatus,
|
||||
setValidatedIndices,
|
||||
validationErrors,
|
||||
}),
|
||||
|
|
Loading…
Reference in a new issue