[ML] Replacing angular routing (#51842)

* [ML] Replacing angular routing

* removing old files

* changing overview

* renaming overview route

* adding df analytics routes

* adding timeseriesexplorer route

* removing old files

* adding route for explorer

* adding access denied page

* adding module view or create redirect

* fixing job cloning

* adding breadcrumb system

* removing old breadcrumbs files

* fix include

* enabling management section

* injecting app dependencies

* fixing missed dependencies

* fixing saved searches

* fixing type errors

* removing included data start

* code clean up

* updating translations

* fixing router test failures

* fixing functional tests

* removing last use of SavedSearch

* removing comment

* fixing bug in line chart query

* improving saved search jobs

* fixing data viz functional test

* adding comment

* dealing with time range error

* removing unnecessary chrome imports

* cleaning up code

* moving resolver to own file

* changes based on review

* fixing index data viz on basic license

* fixing edit calendar

* adding create job breadcrumb

* fixing results appstate

* fixing management links

* updating new job constants file

* fixing rebase conflicts

* removing commented out code

* adding additional text to the resolver error

x-pack/legacy/plugins/ml/common/constants/app.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const API_BASE_PATH = '/api/transform/';

x-pack/legacy/plugins/ml/common/constants/feature_flags.ts

@@ -9,6 +9,5 @@
 // indices and aliases exist. Based on that the final setting will be available
 // as an injectedVar on the client side and can be accessed like:
 //
-// import chrome from 'ui/chrome';
-// const mlAnnotationsEnabled = chrome.getInjected('mlAnnotationsEnabled', false);
+
 export const FEATURE_ANNOTATIONS_ENABLED = true;

x-pack/legacy/plugins/ml/common/types/kibana.ts

@@ -6,6 +6,8 @@
 
 // custom edits or fixes for default kibana types which are incomplete
 
+import { SavedObjectAttributes, SimpleSavedObject } from 'kibana/public';
+
 export type IndexPatternTitle = string;
 
 export type callWithRequestType = (action: string, params?: any) => Promise<any>;
@@ -14,3 +16,12 @@ export interface Route {
   id: string;
   k7Breadcrumbs: () => any;
 }
+
+export type IndexPatternSavedObject = SimpleSavedObject<SavedObjectAttributes>;
+export type SavedSearchSavedObject = SimpleSavedObject<SavedObjectAttributes>;
+
+export function isSavedSearchSavedObject(
+  ss: SavedSearchSavedObject | null
+): ss is SavedSearchSavedObject {
+  return ss !== null;
+}

x-pack/legacy/plugins/ml/common/util/job_utils.js

@@ -12,7 +12,7 @@ import numeral from '@elastic/numeral';
 import { ALLOWED_DATA_UNITS, JOB_ID_MAX_LENGTH } from '../constants/validation';
 import { parseInterval } from './parse_interval';
 import { maxLengthValidator } from './validators';
-import { CREATED_BY_LABEL } from '../../public/application/jobs/new_job/common/job_creator/util/constants';
+import { CREATED_BY_LABEL } from '../../common/constants/new_job';
 
 // work out the default frequency based on the bucket_span in seconds
 export function calculateDatafeedFrequencyDefaultSeconds(bucketSpanSeconds) {

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

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

x-pack/legacy/plugins/ml/kibana.json

@@ -0,0 +1,8 @@
+{
+  "id": "ml",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["ml"],
+  "server": true,
+  "ui": true
+}

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

@@ -4,36 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import uiRoutes from 'ui/routes';
-import { I18nContext } from 'ui/i18n';
-// @ts-ignore
-import { uiModules } from 'ui/modules';
-import { AccessDeniedPage } from './page';
-
-const module = uiModules.get('apps/ml', ['react']);
-
-const template = `<access-denied />`;
-
-uiRoutes.when('/access-denied', {
-  template,
-});
-
-module.directive('accessDenied', function() {
-  return {
-    scope: {},
-    restrict: 'E',
-    link: async (scope: ng.IScope, element: ng.IAugmentedJQuery) => {
-      ReactDOM.render(
-        <I18nContext>{React.createElement(AccessDeniedPage)}</I18nContext>,
-        element[0]
-      );
-
-      element.on('$destroy', () => {
-        ReactDOM.unmountComponentAtNode(element[0]);
-        scope.$destroy();
-      });
-    },
-  };
-});
+export { Page } from './page';

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

@@ -21,7 +21,7 @@ import {
 } from '@elastic/eui';
 import { NavigationMenu } from '../components/navigation_menu';
 
-export const AccessDeniedPage = () => (
+export const Page = () => (
   <Fragment>
     <NavigationMenu tabId="access-denied" />
     <EuiPage>

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import ReactDOM from 'react-dom';
+
+import 'uiExports/savedObjectTypes';
+
+import 'ui/autoload/all';
+
+// needed to make syntax highlighting work in ace editors
+import 'ace';
+
+import { AppMountContext, AppMountParameters } from 'kibana/public';
+import {
+  IndexPatternsContract,
+  Plugin as DataPlugin,
+} from '../../../../../../src/plugins/data/public';
+
+import { KibanaConfigTypeFix } from './contexts/kibana';
+
+import { MlRouter } from './routing';
+
+export interface MlDependencies extends AppMountParameters {
+  npData: ReturnType<DataPlugin['start']>;
+  indexPatterns: IndexPatternsContract;
+}
+
+interface AppProps {
+  context: AppMountContext;
+  indexPatterns: IndexPatternsContract;
+}
+
+const App: FC<AppProps> = ({ context, indexPatterns }) => {
+  const config = (context.core.uiSettings as never) as KibanaConfigTypeFix; // TODO - make this UiSettingsClientContract, get rid of KibanaConfigTypeFix
+
+  return (
+    <MlRouter
+      config={config}
+      setBreadcrumbs={context.core.chrome.setBreadcrumbs}
+      indexPatterns={indexPatterns}
+    />
+  );
+};
+
+export const renderApp = (context: AppMountContext, { element, indexPatterns }: MlDependencies) => {
+  ReactDOM.render(<App context={context} indexPatterns={indexPatterns} />, element);
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

x-pack/legacy/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js

@@ -35,7 +35,6 @@ import {
 } from '@elastic/eui/lib/services';
 
 import { formatDate } from '@elastic/eui/lib/services/format';
-import chrome from 'ui/chrome';
 
 import { addItemToRecentlyAccessed } from '../../../util/recently_accessed';
 import { ml } from '../../../services/ml_api_service';
@@ -206,7 +205,7 @@ const AnnotationsTable = injectI18n(class AnnotationsTable extends Component {
 
     const url = `?_g=${_g}&_a=${_a}`;
     addItemToRecentlyAccessed('timeseriesexplorer', job.job_id, url);
-    window.open(`${chrome.getBasePath()}/app/ml#/timeseriesexplorer${url}`, '_self');
+    window.open(`#/timeseriesexplorer${url}`, '_self');
   }
 
   onMouseOverRow = (record) => {

x-pack/legacy/plugins/ml/public/application/components/anomalies_table/links_menu.js

@@ -205,7 +205,7 @@ export const LinksMenu = injectI18n(class LinksMenu extends Component {
     });
 
     // Need to encode the _a parameter in case any entities contain unsafe characters such as '+'.
-    let path = `${chrome.getBasePath()}/app/ml#/timeseriesexplorer`;
+    let path = '#/timeseriesexplorer';
     path += `?_g=${_g}&_a=${encodeURIComponent(_a)}`;
     window.open(path, '_blank');
   }

x-pack/legacy/plugins/ml/public/application/components/data_recognizer/data_recognizer.d.ts

@@ -7,11 +7,11 @@
 import { FC } from 'react';
 
 import { IndexPattern } from 'ui/index_patterns';
-import { SavedSearch } from 'src/legacy/core_plugins/kibana/public/discover/types';
+import { SavedSearchSavedObject } from '../../../../common/types/kibana';
 
 declare const DataRecognizer: FC<{
   indexPattern: IndexPattern;
-  savedSearch?: SavedSearch;
+  savedSearch?: SavedSearchSavedObject | null;
   results: {
     count: number;
     onChange?: Function;

x-pack/legacy/plugins/ml/public/application/components/data_recognizer/recognized_result.js

@@ -20,7 +20,7 @@ export const RecognizedResult = ({
   indexPattern,
   savedSearch
 }) => {
-  const id = (savedSearch === undefined || savedSearch.id === undefined) ?
+  const id = (savedSearch === null) ?
     `index=${indexPattern.id}` :
     `savedSearchId=${savedSearch.id}`;
 

x-pack/legacy/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx

@@ -7,7 +7,6 @@
 import React, { FC, useState } from 'react';
 import { EuiTabs, EuiTab, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import chrome from 'ui/chrome';
 import { TabId } from './navigation_menu';
 
 export interface Tab {
@@ -82,7 +81,7 @@ export const MainTabs: FC<Props> = ({ tabId, disableLinks }) => {
         return (
           <EuiLink
             data-test-subj={testSubject + (id === selectedTabId ? ' selected' : '')}
-            href={`${chrome.getBasePath()}/app/ml#/${defaultPathId}`}
+            href={`#/${defaultPathId}`}
             key={`${id}-key`}
             color="text"
           >

x-pack/legacy/plugins/ml/public/application/components/navigation_menu/tabs.tsx

@@ -7,7 +7,6 @@
 import React, { FC, useState } from 'react';
 import { EuiTabs, EuiTab, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import chrome from 'ui/chrome';
 import { Tab } from './main_tabs';
 import { TabId } from './navigation_menu';
 
@@ -84,7 +83,7 @@ export const Tabs: FC<Props> = ({ tabId, mainTabId, disableLinks }) => {
             data-test-subj={
               TAB_TEST_SUBJECT[id as TAB_TEST_SUBJECTS] + (id === selectedTabId ? ' selected' : '')
             }
-            href={`${chrome.getBasePath()}/app/ml#/${id}`}
+            href={`#/${id}`}
             key={`${id}-key`}
             color="text"
           >

x-pack/legacy/plugins/ml/public/application/contexts/kibana/__mocks__/saved_search.ts

@@ -4,14 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { searchSourceMock } from '../../../../../../../../../src/legacy/ui/public/courier/search_source/mocks';
-import { SearchSourceContract } from '../../../../../../../../../src/legacy/ui/public/courier';
-
-export const savedSearchMock = {
+export const savedSearchMock: any = {
   id: 'the-saved-search-id',
-  title: 'the-saved-search-title',
-  searchSource: searchSourceMock as SearchSourceContract,
-  columns: [],
-  sort: [],
-  destroy: () => {},
+  type: 'search',
+  attributes: {
+    title: 'the-saved-search-title',
+    kibanaSavedObjectMeta: {
+      searchSourceJSON:
+        '{"highlightAll":true,"version":true,"query":{"query":"foo : \\"bar\\" ","language":"kuery"},"filter":[],"indexRefName":"kibanaSavedObjectMeta.searchSourceJSON.index"}',
+    },
+  },
+  references: [
+    {
+      name: 'kibanaSavedObjectMeta.searchSourceJSON.index',
+      type: 'index-pattern',
+      id: 'the-index-pattern-id',
+    },
+  ],
+  migrationVersion: { search: '7.5.0' },
+  error: undefined,
 };

x-pack/legacy/plugins/ml/public/application/contexts/kibana/kibana_context.ts

@@ -7,12 +7,11 @@
 import React from 'react';
 
 import { KibanaConfig } from 'src/legacy/server/kbn_server';
-import { SavedSearch } from 'src/legacy/core_plugins/kibana/public/discover/types';
-
 import {
   IndexPattern,
   IndexPatternsContract,
 } from '../../../../../../../../src/plugins/data/public';
+import { SavedSearchSavedObject } from '../../../../common/types/kibana';
 
 // set() method is missing in original d.ts
 export interface KibanaConfigTypeFix extends KibanaConfig {
@@ -21,8 +20,8 @@ export interface KibanaConfigTypeFix extends KibanaConfig {
 
 export interface KibanaContextValue {
   combinedQuery: any;
-  currentIndexPattern: IndexPattern;
-  currentSavedSearch: SavedSearch;
+  currentIndexPattern: IndexPattern; // TODO this should be IndexPattern or null
+  currentSavedSearch: SavedSearchSavedObject | null;
   indexPatterns: IndexPatternsContract;
   kibanaConfig: KibanaConfigTypeFix;
 }