[ML] Fix slow calendar creation UI (#104248) (#104331)

* [ML] Fix slow calendar creation UI * updating jest snapshots * updaing jest tests * fixing functional tests Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: James Gowdy <jgowdy@elastic.co>
elastic · Jul 5, 2021 · ff2daed · ff2daed
1 parent a65dee9
commit ff2daed
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 17 deletions.
diff --git a/...ins/ml/public/application/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap b/...ins/ml/public/application/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap
diff --git a/...pplication/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/...pplication/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.js
@@ -69,6 +69,7 @@ export const CalendarForm = ({
   showImportModal,
   onJobSelection,
   saving,
+  loading,
   selectedGroupOptions,
   selectedJobOptions,
   showNewEventModal,
@@ -83,7 +84,11 @@ export const CalendarForm = ({
   const helpText = isNewCalendarIdValid === true && !isEdit ? msg : undefined;
   const error = isNewCalendarIdValid === false && !isEdit ? [msg] : undefined;
   const saveButtonDisabled =
-    canCreateCalendar === false || saving || !isNewCalendarIdValid || calendarId === '';
+    canCreateCalendar === false ||
+    saving ||
+    !isNewCalendarIdValid ||
+    calendarId === '' ||
+    loading === true;
   const redirectToCalendarsManagementPage = useCreateAndNavigateToMlLink(ML_PAGES.CALENDARS_MANAGE);
 
   return (
@@ -116,7 +121,7 @@ export const CalendarForm = ({
               name="calendarId"
               value={calendarId}
               onChange={onCalendarIdChange}
-              disabled={isEdit === true || saving === true}
+              disabled={isEdit === true || saving === true || loading === true}
               data-test-subj="mlCalendarIdInput"
             />
           </EuiFormRow>
@@ -133,7 +138,7 @@ export const CalendarForm = ({
               name="description"
               value={description}
               onChange={onDescriptionChange}
-              disabled={isEdit === true || saving === true}
+              disabled={isEdit === true || saving === true || loading === true}
               data-test-subj="mlCalendarDescriptionInput"
             />
           </EuiFormRow>
@@ -152,7 +157,7 @@ export const CalendarForm = ({
         }
         checked={isGlobalCalendar}
         onChange={onGlobalCalendarChange}
-        disabled={saving === true || canCreateCalendar === false}
+        disabled={saving === true || canCreateCalendar === false || loading === true}
         data-test-subj="mlCalendarApplyToAllJobsSwitch"
       />
 
@@ -172,7 +177,7 @@ export const CalendarForm = ({
               options={jobIds}
               selectedOptions={selectedJobOptions}
               onChange={onJobSelection}
-              isDisabled={saving === true || canCreateCalendar === false}
+              isDisabled={saving === true || canCreateCalendar === false || loading === true}
               data-test-subj="mlCalendarJobSelection"
             />
           </EuiFormRow>
@@ -190,7 +195,7 @@ export const CalendarForm = ({
               options={groupIds}
               selectedOptions={selectedGroupOptions}
               onChange={onGroupSelection}
-              isDisabled={saving === true || canCreateCalendar === false}
+              isDisabled={saving === true || canCreateCalendar === false || loading === true}
               data-test-subj="mlCalendarJobGroupSelection"
             />
           </EuiFormRow>
@@ -215,6 +220,8 @@ export const CalendarForm = ({
           onDeleteClick={onEventDelete}
           showImportModal={showImportModal}
           showNewEventModal={showNewEventModal}
+          loading={loading}
+          saving={saving}
           showSearchBar
         />
       </EuiFormRow>
@@ -272,6 +279,7 @@ CalendarForm.propTypes = {
   showImportModal: PropTypes.func.isRequired,
   onJobSelection: PropTypes.func.isRequired,
   saving: PropTypes.bool.isRequired,
+  loading: PropTypes.bool.isRequired,
   selectedGroupOptions: PropTypes.array.isRequired,
   selectedJobOptions: PropTypes.array.isRequired,
   showNewEventModal: PropTypes.func.isRequired,

diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/events_table/events_table.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/events_table/events_table.js
@@ -15,14 +15,14 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
 
-function DeleteButton({ onClick, canDeleteCalendar, testSubj }) {
+function DeleteButton({ onClick, testSubj, disabled }) {
   return (
     <Fragment>
       <EuiButtonEmpty
         size="xs"
         color="danger"
         onClick={onClick}
-        isDisabled={canDeleteCalendar === false}
+        isDisabled={disabled}
         data-test-subj={testSubj}
       >
         <FormattedMessage
@@ -42,6 +42,8 @@ export const EventsTable = ({
   showSearchBar,
   showImportModal,
   showNewEventModal,
+  loading,
+  saving,
 }) => {
   const sorting = {
     sort: {
@@ -93,7 +95,7 @@ export const EventsTable = ({
       render: (event) => (
         <DeleteButton
           testSubj="mlCalendarEventDeleteButton"
-          canDeleteCalendar={canDeleteCalendar}
+          disabled={canDeleteCalendar === false || saving === true || loading === true}
           onClick={() => {
             onDeleteClick(event.event_id);
           }}
@@ -105,7 +107,7 @@ export const EventsTable = ({
   const search = {
     toolsRight: [
       <EuiButton
-        isDisabled={canCreateCalendar === false}
+        isDisabled={canCreateCalendar === false || saving === true || loading === true}
         key="ml_new_event"
         data-test-subj="mlCalendarNewEventButton"
         size="s"
@@ -118,7 +120,7 @@ export const EventsTable = ({
         />
       </EuiButton>,
       <EuiButton
-        isDisabled={canCreateCalendar === false}
+        isDisabled={canCreateCalendar === false || saving === true || loading === true}
         key="ml_import_event"
         data-test-subj="mlCalendarImportEventsButton"
         size="s"
@@ -164,6 +166,8 @@ EventsTable.propTypes = {
   showImportModal: PropTypes.func,
   showNewEventModal: PropTypes.func,
   showSearchBar: PropTypes.bool,
+  loading: PropTypes.bool,
+  saving: PropTypes.bool,
 };
 
 EventsTable.defaultProps = {

diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/new_calendar.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/new_calendar.js
@@ -325,6 +325,7 @@ class NewCalendarUI extends Component {
       groupIdOptions,
       jobIdOptions,
       saving,
+      loading,
       selectedCalendar,
       selectedJobOptions,
       selectedGroupOptions,
@@ -377,6 +378,7 @@ class NewCalendarUI extends Component {
                 showImportModal={this.showImportModal}
                 onJobSelection={this.onJobSelection}
                 saving={saving}
+                loading={loading}
                 selectedGroupOptions={selectedGroupOptions}
                 selectedJobOptions={selectedJobOptions}
                 onCreateGroupOption={this.onCreateGroupOption}

diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/new_calendar.test.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/new_calendar.test.js
@@ -132,24 +132,22 @@ describe('NewCalendar', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('Import modal shown on Import Events button click', () => {
+  test('Import modal button is disabled', () => {
     const wrapper = mountWithIntl(<NewCalendar {...props} />);
 
     const importButton = wrapper.find('[data-test-subj="mlCalendarImportEventsButton"]');
     const button = importButton.find('EuiButton');
-    button.simulate('click');
-
-    expect(wrapper.state('isImportModalVisible')).toBe(true);
+    expect(button.prop('isDisabled')).toBe(true);
   });
 
-  test('New event modal shown on New event button click', () => {
+  test('New event modal button is disabled', () => {
     const wrapper = mountWithIntl(<NewCalendar {...props} />);
 
     const importButton = wrapper.find('[data-test-subj="mlCalendarNewEventButton"]');
     const button = importButton.find('EuiButton');
     button.simulate('click');
 
-    expect(wrapper.state('isNewEventModalVisible')).toBe(true);
+    expect(button.prop('isDisabled')).toBe(true);
   });
 
   test('isDuplicateId returns true if form calendar id already exists in calendars', () => {

diff --git a/x-pack/test/functional/apps/ml/settings/calendar_creation.ts b/x-pack/test/functional/apps/ml/settings/calendar_creation.ts
@@ -46,6 +46,8 @@ export default function ({ getService }: FtrProviderContext) {
       await ml.settingsCalendar.assertCreateCalendarButtonEnabled(true);
       await ml.settingsCalendar.navigateToCalendarCreationPage();
 
+      await ml.settingsCalendar.waitForFormEnabled();
+
       await ml.testExecution.logTestStep('calendar creation sets calendar to apply to all jobs');
       await ml.settingsCalendar.toggleApplyToAllJobsSwitch(true);
       await ml.settingsCalendar.assertJobSelectionNotExists();
@@ -79,6 +81,8 @@ export default function ({ getService }: FtrProviderContext) {
       await ml.settingsCalendar.assertCreateCalendarButtonEnabled(true);
       await ml.settingsCalendar.navigateToCalendarCreationPage();
 
+      await ml.settingsCalendar.waitForFormEnabled();
+
       await ml.testExecution.logTestStep(
         'calendar creation verifies the job selection and job group section are displayed'
       );

diff --git a/x-pack/test/functional/services/ml/settings_calendar.ts b/x-pack/test/functional/services/ml/settings_calendar.ts
@@ -214,6 +214,11 @@ export function MachineLearningSettingsCalendarProvider(
       );
     },
 
+    async waitForFormEnabled() {
+      // @ts-expect-error null is acceptable for a disabled attribute that no longer exists.
+      await testSubjects.waitForAttributeToChange('mlCalendarIdInput', 'disabled', null);
+    },
+
     async assertCalendarRowExists(calendarId: string) {
       await testSubjects.existOrFail(this.calendarRowSelector(calendarId));
     },