injecting app dependencies

x-pack/legacy/plugins/ml/index.ts

@@ -41,7 +41,7 @@ export const ml = (kibana: any) => {
         main: 'plugins/ml/legacy',
       },
       styleSheetPaths: resolve(__dirname, 'public/application/index.scss'),
-      // hacks: ['plugins/ml/hacks/toggle_app_link_in_nav'],
+      hacks: ['plugins/ml/application/hacks/toggle_app_link_in_nav'],
       savedObjectSchemas: {
         'ml-telemetry': {
           isNamespaceAgnostic: true,

x-pack/legacy/plugins/ml/public/application/app.tsx

@@ -17,6 +17,7 @@ import 'uiExports/savedObjectTypes';
 
 import 'ui/autoload/all';
 import { I18nContext } from 'ui/i18n';
+import { IndexPatterns } from 'ui/index_patterns';
 
 // import { UiSettingsClientContract } from 'src/core/public';
 // needed to make syntax highlighting work in ace editors
@@ -51,14 +52,19 @@ export interface MlDependencies extends AppMountParameters {
   indexPatterns: DataStart['indexPatterns']['indexPatterns'];
 }
 
-const App: FC<{ basename: string; context: AppMountContext }> = ({ basename, context }) => {
+const App: FC<{ basename: string; context: AppMountContext; indexPatterns: IndexPatterns }> = ({
+  basename,
+  context,
+  indexPatterns,
+}) => {
   const config = (context.core.uiSettings as never) as KibanaConfigTypeFix; // TODO - make this UiSettingsClientContract, get rid of KibanaConfigTypeFix
 
   return (
     <MlRouter
       basename={basename}
       config={config}
       setBreadCrumbs={context.core.chrome.setBreadcrumbs}
+      indexPatterns={indexPatterns}
     />
   );
 };
@@ -68,7 +74,10 @@ export const renderApp = (
   { appBasePath, element, indexPatterns }: MlDependencies
 ) => {
   const basename = `${appBasePath}#`;
-  ReactDOM.render(<App basename={basename} context={context} />, element);
+  ReactDOM.render(
+    <App basename={basename} context={context} indexPatterns={indexPatterns} />,
+    element
+  );
 
   return () => ReactDOM.unmountComponentAtNode(element);
 };

x-pack/legacy/plugins/ml/public/application/routing/resolvers.ts

@@ -10,18 +10,19 @@ import { checkGetJobsPrivilege } from '../privilege/check_privilege';
 import { getMlNodeCount } from '../ml_nodes_check/check_ml_nodes';
 // import { getJobManagementBreadcrumbs } from './jobs/breadcrumbs';
 import { loadMlServerInfo } from '../services/ml_server_info';
+import { PageDependencies } from './router';
 
 export interface Resolvers {
   [name: string]: () => Promise<any>;
 }
 export interface ResolverResults {
   [name: string]: any;
 }
-export const basicResolvers: Resolvers = {
+export const basicResolvers = (deps: PageDependencies): Resolvers => ({
   checkFullLicense,
   getMlNodeCount,
   loadMlServerInfo,
-  loadIndexPatterns,
+  loadIndexPatterns: () => loadIndexPatterns(deps.indexPatterns),
   checkGetJobsPrivilege,
   // getJobManagementBreadcrumbs(),
-};
+});

x-pack/legacy/plugins/ml/public/application/routing/router.tsx

@@ -5,25 +5,42 @@
  */
 
 import React, { FC, useEffect, useState } from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, RouteProps } from 'react-router-dom';
+import { Location } from 'history';
 import { I18nContext } from 'ui/i18n';
 import { SavedSearch } from 'src/legacy/core_plugins/kibana/public/discover/types';
 
+import { IndexPatterns } from 'ui/index_patterns';
 import { getIndexPatternById, getFullIndexPatterns } from '../util/index_utils';
 import { createSearchItems } from '../jobs/new_job/utils/new_job_utils';
 import { ResolverResults, Resolvers } from './resolvers';
-import { KibanaContext, KibanaConfigTypeFix } from '../contexts/kibana';
+import { KibanaContext, KibanaConfigTypeFix, KibanaContextValue } from '../contexts/kibana';
 import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
 
 import * as routes from './routes';
 
+// custom RouteProps making location non-optional
+interface MlRouteProps extends RouteProps {
+  location: Location;
+}
+
 export interface MlRoute {
   path: string;
-  render(props: any, config: any): JSX.Element;
+  render(props: MlRouteProps, config: KibanaConfigTypeFix, deps: PageDependencies): JSX.Element;
   breadcrumbs: ChromeBreadcrumb[];
 }
 
-export const PageLoader: FC<{ context: any }> = ({ context, children }) => {
+export interface PageProps {
+  location: Location;
+  config: KibanaConfigTypeFix;
+  deps: PageDependencies;
+}
+
+export interface PageDependencies {
+  indexPatterns: IndexPatterns;
+}
+
+export const PageLoader: FC<{ context: KibanaContextValue }> = ({ context, children }) => {
   return context === null ? null : (
     <I18nContext>
       <KibanaContext.Provider value={context}>{children}</KibanaContext.Provider>
@@ -35,7 +52,8 @@ export const MlRouter: FC<{
   basename: string;
   config: KibanaConfigTypeFix;
   setBreadCrumbs: any;
-}> = ({ basename, config, setBreadCrumbs }) => {
+  indexPatterns: IndexPatterns;
+}> = ({ basename, config, setBreadCrumbs, indexPatterns }) => {
   return (
     <Router basename={basename}>
       <div>
@@ -46,7 +64,7 @@ export const MlRouter: FC<{
             exact
             render={props => {
               setBreadCrumbs(route.breadcrumbs);
-              return route.render(props, config);
+              return route.render(props, config, { indexPatterns });
             }}
           />
         ))}
@@ -59,7 +77,7 @@ export const useResolver = (
   index: string | undefined,
   config: KibanaConfigTypeFix,
   resolvers: Resolvers
-) => {
+): { context: KibanaContextValue; results: ResolverResults } => {
   const funcNames = Object.keys(resolvers); // Object.entries gets this wrong?!
   const funcs = Object.values(resolvers); // Object.entries gets this wrong?!
   const tempResults = funcNames.reduce((p, c) => {

x-pack/legacy/plugins/ml/public/application/routing/routes/access_denied.tsx

@@ -6,8 +6,7 @@
 
 import React, { FC } from 'react';
 import { i18n } from '@kbn/i18n';
-import { MlRoute, PageLoader } from '../router';
-import { useResolver } from '../router';
+import { MlRoute, PageLoader, useResolver } from '../router';
 import { KibanaConfigTypeFix } from '../../contexts/kibana';
 import { Page } from '../../access_denied';
 
@@ -22,7 +21,7 @@ const breadcrumbs = [
 
 export const accessDeniedRoute: MlRoute = {
   path: '/access-denied',
-  render: (props: any, config: any) => <PageWrapper config={config} />,
+  render: (props, config) => <PageWrapper config={config} />,
   breadcrumbs,
 };
 

x-pack/legacy/plugins/ml/public/application/routing/routes/data_frame_analytics/analytics_job_exploration.tsx

@@ -10,8 +10,7 @@ import { decode } from 'rison-node';
 
 // @ts-ignore
 import queryString from 'query-string';
-import { MlRoute, PageLoader } from '../../router';
-import { useResolver } from '../../router';
+import { MlRoute, PageLoader, useResolver, PageProps } from '../../router';
 import { basicResolvers } from '../../resolvers';
 import { Page } from '../../../data_frame_analytics/pages/analytics_exploration';
 import { ANALYSIS_CONFIG_TYPE } from '../../../data_frame_analytics/common/analytics';
@@ -30,12 +29,12 @@ const breadcrumbs = [
 
 export const analyticsJobExplorationRoute: MlRoute = {
   path: '/data_frame_analytics/exploration',
-  render: (props: any, config: any) => <PageWrapper config={config} {...props} />,
+  render: (props, config, deps) => <PageWrapper config={config} {...props} deps={deps} />,
   breadcrumbs,
 };
 
-const PageWrapper: FC<{ location: any; config: any }> = ({ location, config }) => {
-  const { context } = useResolver('', config, basicResolvers);
+const PageWrapper: FC<PageProps> = ({ location, config, deps }) => {
+  const { context } = useResolver('', config, basicResolvers(deps));
   const { _g } = queryString.parse(location.search);
   let globalState: any = null;
   try {

x-pack/legacy/plugins/ml/public/application/routing/routes/data_frame_analytics/analytics_jobs_list.tsx

@@ -7,8 +7,7 @@
 import React, { FC } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { MlRoute, PageLoader } from '../../router';
-import { useResolver } from '../../router';
+import { MlRoute, PageLoader, useResolver, PageProps } from '../../router';
 import { basicResolvers } from '../../resolvers';
 import { Page } from '../../../data_frame_analytics/pages/analytics_management';
 import { ML_BREADCRUMB } from '../../breadcrumbs';
@@ -25,12 +24,12 @@ const breadcrumbs = [
 
 export const analyticsJobsListRoute: MlRoute = {
   path: '/data_frame_analytics',
-  render: (props: any, config: any) => <PageWrapper config={config} {...props} />,
+  render: (props, config, deps) => <PageWrapper config={config} {...props} deps={deps} />,
   breadcrumbs,
 };
 
-const PageWrapper: FC<{ location: any; config: any }> = ({ location, config }) => {
-  const { context } = useResolver('', config, basicResolvers);
+const PageWrapper: FC<PageProps> = ({ location, config, deps }) => {
+  const { context } = useResolver('', config, basicResolvers(deps));
   return (
     <PageLoader context={context}>
       <Page />

x-pack/legacy/plugins/ml/public/application/routing/routes/datavisualizer/datavisualizer.tsx

@@ -13,8 +13,7 @@ import React, { FC } from 'react';
 
 // @ts-ignore
 import queryString from 'query-string';
-import { MlRoute, PageLoader } from '../../router';
-import { useResolver } from '../../router';
+import { MlRoute, PageLoader, useResolver, PageProps } from '../../router';
 import { DatavisualizerSelector } from '../../../datavisualizer';
 
 import { checkBasicLicense } from '../../../license/check_license';
@@ -25,11 +24,11 @@ const breadcrumbs = [ML_BREADCRUMB, DATA_VISUALIZER_BREADCRUMB];
 
 export const selectorRoute: MlRoute = {
   path: '/datavisualizer',
-  render: (props: any, config: any) => <PageWrapper config={config} {...props} />,
+  render: (props, config, deps) => <PageWrapper config={config} {...props} deps={deps} />,
   breadcrumbs,
 };
 
-const PageWrapper: FC<{ location: any; config: any }> = ({ location, config }) => {
+const PageWrapper: FC<PageProps> = ({ location, config }) => {
   const { index } = queryString.parse(location.search);
   const { context } = useResolver(index, config, {
     checkBasicLicense,

x-pack/legacy/plugins/ml/public/application/routing/routes/datavisualizer/file_based.tsx

@@ -14,8 +14,7 @@ import { i18n } from '@kbn/i18n';
 
 // @ts-ignore
 import queryString from 'query-string';
-import { MlRoute, PageLoader } from '../../router';
-import { useResolver } from '../../router';
+import { MlRoute, PageLoader, useResolver, PageProps } from '../../router';
 import { FileDataVisualizerPage } from '../../../datavisualizer/file_based';
 
 import { checkBasicLicense } from '../../../license/check_license';
@@ -38,15 +37,15 @@ const breadcrumbs = [
 
 export const fileBasedRoute: MlRoute = {
   path: '/filedatavisualizer',
-  render: (props: any, config: any) => <PageWrapper config={config} {...props} />,
+  render: (props, config, deps) => <PageWrapper config={config} {...props} deps={deps} />,
   breadcrumbs,
 };
 
-const PageWrapper: FC<{ location: any; config: any }> = ({ location, config }) => {
+const PageWrapper: FC<PageProps> = ({ location, config, deps }) => {
   const { index } = queryString.parse(location.search);
   const { context } = useResolver(index, config, {
     checkBasicLicense,
-    loadIndexPatterns,
+    loadIndexPatterns: () => loadIndexPatterns(deps.indexPatterns),
     checkFindFileStructurePrivilege,
     getMlNodeCount,
   });

x-pack/legacy/plugins/ml/public/application/routing/routes/datavisualizer/index_based.tsx

@@ -9,8 +9,7 @@ import { i18n } from '@kbn/i18n';
 
 // @ts-ignore
 import queryString from 'query-string';
-import { MlRoute, PageLoader } from '../../router';
-import { useResolver } from '../../router';
+import { MlRoute, PageLoader, useResolver, PageProps } from '../../router';
 import { Page } from '../../../datavisualizer/index_based';
 
 import { checkBasicLicense } from '../../../license/check_license';
@@ -32,15 +31,15 @@ const breadcrumbs = [
 
 export const indexBasedRoute: MlRoute = {
   path: '/jobs/new_job/datavisualizer',
-  render: (props: any, config: any) => <PageWrapper config={config} {...props} />,
+  render: (props, config, deps) => <PageWrapper config={config} {...props} deps={deps} />,
   breadcrumbs,
 };
 
-const PageWrapper: FC<{ location: any; config: any }> = ({ location, config }) => {
+const PageWrapper: FC<PageProps> = ({ location, config, deps }) => {
   const { index } = queryString.parse(location.search);
   const { context } = useResolver(index, config, {
     checkBasicLicense,
-    loadIndexPatterns,
+    loadIndexPatterns: () => loadIndexPatterns(deps.indexPatterns),
     checkGetJobsPrivilege,
     checkMlNodesAvailable,
   });

x-pack/legacy/plugins/ml/public/application/routing/routes/explorer.tsx

@@ -13,8 +13,7 @@ import { Subscription } from 'rxjs';
 import queryString from 'query-string';
 import { timefilter } from 'ui/timefilter';
 // import { AppState as IAppState, AppStateClass } from 'ui/state_management/app_state';
-import { MlRoute, PageLoader } from '../router';
-import { useResolver } from '../router';
+import { MlRoute, PageLoader, useResolver, PageProps } from '../router';
 import { basicResolvers } from '../resolvers';
 import { Explorer } from '../../explorer';
 import { mlJobService } from '../../services/job_service';
@@ -42,14 +41,14 @@ const breadcrumbs = [
 
 export const explorerRoute: MlRoute = {
   path: '/explorer',
-  render: (props: any, config: any) => <PageWrapper config={config} {...props} />,
+  render: (props, config, deps) => <PageWrapper config={config} {...props} deps={deps} />,
   breadcrumbs,
 };
 
-const PageWrapper: FC<{ location: any; config: any }> = ({ location, config }) => {
+const PageWrapper: FC<PageProps> = ({ location, config, deps }) => {
   const { index } = queryString.parse(location.search);
   const { context } = useResolver(index, config, {
-    ...basicResolvers,
+    ...basicResolvers(deps),
     jobs: mlJobService.loadJobsWrapper,
   });
   const { _a, _g } = queryString.parse(location.search);
@@ -58,21 +57,22 @@ const PageWrapper: FC<{ location: any; config: any }> = ({ location, config }) =
   try {
     appState = decode(_a);
     globalState = decode(_g);
-
-    appState.mlTimeSeriesExplorer = {};
-    appState.fetch = () => {};
-    appState.on = () => {};
-    appState.off = () => {};
-    appState.save = () => {};
-    globalState.fetch = () => {};
-    globalState.on = () => {};
-    globalState.off = () => {};
-    globalState.save = () => {};
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.error('Could not parse global state');
-    window.location.href = '#data_frame_analytics';
+    // console.error('Could not parse global state');
+    // window.location.href = '#data_frame_analytics';
+    // globalState = {};
+    // appState = {};
   }
+  appState.mlTimeSeriesExplorer = {};
+  appState.fetch = () => {};
+  appState.on = () => {};
+  appState.off = () => {};
+  appState.save = () => {};
+  globalState.fetch = () => {};
+  globalState.on = () => {};
+  globalState.off = () => {};
+  globalState.save = () => {};
 
   return (
     <PageLoader context={context}>
@@ -125,10 +125,12 @@ const ExplorerWrapper: FC<{ globalState: any; appState: any }> = ({ globalState,
     subscribeAppStateToObservable(AppState, 'mlSelectSeverity', severity$, () => {})
   );
 
-  timefilter.setTime({
-    from: globalState.time.from,
-    to: globalState.time.to,
-  });
+  if (globalState.time) {
+    timefilter.setTime({
+      from: globalState.time.from,
+      to: globalState.time.to,
+    });
+  }
 
   useEffect(() => {
     return () => {