[ML] load module from the component, reset support

elastic · Oct 6, 2019 · 224fa1a · 224fa1a
1 parent c730d0d
commit 224fa1a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/.../legacy/plugins/ml/public/jobs/new_job_new/recognize/components/create_result_callout.tsx b/.../legacy/plugins/ml/public/jobs/new_job_new/recognize/components/create_result_callout.tsx
@@ -13,10 +13,11 @@ import { SAVE_STATE } from '../page';
 interface CreateResultCalloutProps {
   saveState: SAVE_STATE;
   resultsUrl: string;
+  onReset: () => {};
 }
 
 export const CreateResultCallout: FC<CreateResultCalloutProps> = memo(
-  ({ saveState, resultsUrl }) => {
+  ({ saveState, resultsUrl, onReset }) => {
     return (
       <>
         {saveState === SAVE_STATE.SAVED && (
@@ -48,6 +49,7 @@ export const CreateResultCallout: FC<CreateResultCalloutProps> = memo(
                 'xpack.ml.newJi18n(ob.simple.recognize.jobsCreationFailed.resetButtonAriaLabel',
                 { defaultMessage: 'Reset' }
               )}
+              onClick={onReset}
             >
               <FormattedMessage
                 id="xpack.ml.newJob.simple.recognize.jobsCreationFailed.resetButtonLabel"
@@ -73,6 +75,7 @@ export const CreateResultCallout: FC<CreateResultCalloutProps> = memo(
                 'xpack.ml.newJi18n(ob.simple.recognize.jobsCreationFailed.resetButtonAriaLabel',
                 { defaultMessage: 'Reset' }
               )}
+              onClick={onReset}
             >
               <FormattedMessage
                 id="xpack.ml.newJob.simple.recognize.someJobsCreationFailed.resetButtonLabel"

diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/directive.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/directive.tsx
@@ -37,7 +37,7 @@ module.directive('mlRecognizePage', ($injector: InjectorService) => {
       const Private = $injector.get<IPrivate>('Private');
       const $route = $injector.get<any>('$route');
 
-      const recognizeModule = $route.current.locals.module;
+      const moduleId = $route.current.params.id;
       const existingGroupIds: string[] = $route.current.locals.existingJobsAndGroups.groupIds;
 
       const createSearchItems = Private(SearchItemsProvider);
@@ -54,7 +54,7 @@ module.directive('mlRecognizePage', ($injector: InjectorService) => {
       ReactDOM.render(
         <I18nContext>
           <KibanaContext.Provider value={kibanaContext}>
-            {React.createElement(Page, { module: recognizeModule, existingGroupIds })}
+            {React.createElement(Page, { moduleId, existingGroupIds })}
           </KibanaContext.Provider>
         </I18nContext>,
         element[0]

diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, FormEvent, useState, Fragment } from 'react';
+import React, { FC, FormEvent, useState, Fragment, useEffect } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import {
@@ -63,7 +63,7 @@ export interface KibanaObjects {
 }
 
 interface PageProps {
-  module: Module;
+  moduleId: string;
   existingGroupIds: string[];
 }
 
@@ -75,7 +75,7 @@ export enum SAVE_STATE {
   PARTIAL_FAILURE = 'PARTIAL_FAILURE',
 }
 
-export const Page: FC<PageProps> = ({ module, existingGroupIds }) => {
+export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
   const { from, to } = getTimeFilterRange();
 
   // region State
@@ -87,11 +87,9 @@ export const Page: FC<PageProps> = ({ module, existingGroupIds }) => {
     end: to,
   });
   const [useDedicatedIndex, setUseDedicatedIndex] = useState<boolean>(false);
-  const [jobGroups, setJobGroups] = useState<string[]>([
-    ...new Set(flatten(module.jobs.map(({ config: { groups = [] } }) => groups))),
-  ]);
-  const [jobs, setJobs] = useState<ModuleJobUI[]>(module.jobs);
-  const [kibanaObjects, setKibanaObjects] = useState<KibanaObjects>(module.kibana as KibanaObjects);
+  const [jobGroups, setJobGroups] = useState<string[]>([]);
+  const [jobs, setJobs] = useState<ModuleJobUI[]>([]);
+  const [kibanaObjects, setKibanaObjects] = useState<KibanaObjects>({} as KibanaObjects);
   const [saveState, setSaveState] = useState<SAVE_STATE>(SAVE_STATE.NOT_SAVED);
   const [resultsUrl, setResultsUrl] = useState<string>('');
   // endregion
@@ -118,6 +116,25 @@ export const Page: FC<PageProps> = ({ module, existingGroupIds }) => {
   const displayQueryWarning = savedSearch.id !== undefined;
   const tempQuery = savedSearch.id === undefined ? undefined : combinedQuery;
 
+  const loadModule = async () => {
+    try {
+      const response: Module = await ml.getDataRecognizerModule({ moduleId });
+      setJobs(response.jobs);
+      setKibanaObjects(response.kibana as KibanaObjects);
+      setJobGroups([
+        ...new Set(flatten(response.jobs.map(({ config: { groups = [] } }) => groups))),
+      ]);
+      setSaveState(SAVE_STATE.NOT_SAVED);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    loadModule();
+  }, []);
+
   const save = async (event: FormEvent) => {
     event.preventDefault();
     setSaveState(SAVE_STATE.SAVING);
@@ -338,7 +355,11 @@ export const Page: FC<PageProps> = ({ module, existingGroupIds }) => {
                   </EuiTextAlign>
                 </form>
               )}
-              <CreateResultCallout saveState={saveState} resultsUrl={resultsUrl} />
+              <CreateResultCallout
+                saveState={saveState}
+                resultsUrl={resultsUrl}
+                onReset={loadModule}
+              />
             </EuiPanel>
           </EuiFlexItem>
           <EuiFlexItem>