Fixed routing for index lifecycle management

Author: VladLasitsa

x-pack/plugins/index_lifecycle_management/public/application/app.tsx

@@ -6,23 +6,32 @@
 
 import React, { useEffect } from 'react';
 import { Router, Switch, Route, Redirect } from 'react-router-dom';
-import { ScopedHistory } from 'kibana/public';
+import { ScopedHistory, ApplicationStart } from 'kibana/public';
 import { METRIC_TYPE } from '@kbn/analytics';
 
 import { UIM_APP_LOAD } from './constants';
 import { EditPolicy } from './sections/edit_policy';
 import { PolicyTable } from './sections/policy_table';
 import { trackUiMetric } from './services/ui_metric';
 
-export const App = ({ history }: { history: ScopedHistory }) => {
+export const App = ({
+  history,
+  navigateToApp,
+}: {
+  history: ScopedHistory;
+  navigateToApp: ApplicationStart['navigateToApp'];
+}) => {
   useEffect(() => trackUiMetric(METRIC_TYPE.LOADED, UIM_APP_LOAD), []);
 
   return (
     <Router history={history}>
       <Switch>
-        <Redirect exact from="" to="/policies" />
         <Redirect exact from="/" to="/policies" />
-        <Route exact path={`/policies`} component={PolicyTable} />
+        <Route
+          exact
+          path={`/policies`}
+          render={(props) => <PolicyTable {...props} navigateToApp={navigateToApp} />}
+        />
         <Route path={`/policies/edit/:policyName?`} component={EditPolicy} />
       </Switch>
     </Router>

x-pack/plugins/index_lifecycle_management/public/application/index.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
-import { I18nStart, ScopedHistory } from 'kibana/public';
+import { I18nStart, ScopedHistory, ApplicationStart } from 'kibana/public';
 import { UnmountCallback } from 'src/core/public';
 
 import { App } from './app';
@@ -16,12 +16,13 @@ import { indexLifecycleManagementStore } from './store';
 export const renderApp = (
   element: Element,
   I18nContext: I18nStart['Context'],
-  history: ScopedHistory
+  history: ScopedHistory,
+  navigateToApp: ApplicationStart['navigateToApp']
 ): UnmountCallback => {
   render(
     <I18nContext>
       <Provider store={indexLifecycleManagementStore()}>
-        <App history={history} />
+        <App history={history} navigateToApp={navigateToApp} />
       </Provider>
     </I18nContext>,
     element

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js

@@ -36,7 +36,6 @@ import {
 } from '../../constants';
 
 import { toasts } from '../../services/notification';
-import { goToPolicyList } from '../../services/navigation';
 import { findFirstError } from '../../services/find_errors';
 import { LearnMoreLink } from '../components';
 import { NodeAttrsDetails } from './components/node_attrs_details';
@@ -100,7 +99,7 @@ export class EditPolicy extends Component {
 
   backToPolicyList = () => {
     this.props.setSelectedPolicy(null);
-    goToPolicyList();
+    this.props.history.push('/policies');
   };
 
   submit = async () => {

x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/policy_table/policy_table.js

@@ -36,9 +36,8 @@ import {
 } from '@elastic/eui';
 
 import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
-
+import { reactRouterNavigate } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { getIndexListUri } from '../../../../../../../index_management/public';
-import { BASE_PATH } from '../../../../../../common/constants';
 import { UIM_EDIT_CLICK } from '../../../../constants';
 import { getPolicyPath } from '../../../../services/navigation';
 import { flattenPanelTree } from '../../../../services/flatten_panel_tree';
@@ -181,8 +180,9 @@ export class PolicyTable extends Component {
         /* eslint-disable-next-line @elastic/eui/href-or-on-click */
         <EuiLink
           data-test-subj="policyTablePolicyNameLink"
-          href={getPolicyPath(value)}
-          onClick={() => trackUiMetric('click', UIM_EDIT_CLICK)}
+          {...reactRouterNavigate(this.props.history, getPolicyPath(value), () =>
+            trackUiMetric('click', UIM_EDIT_CLICK)
+          )}
         >
           {value}
         </EuiLink>
@@ -201,7 +201,7 @@ export class PolicyTable extends Component {
   renderCreatePolicyButton() {
     return (
       <EuiButton
-        href={`#${BASE_PATH}policies/edit`}
+        {...reactRouterNavigate(this.props.history, '/policies/edit')}
         fill
         iconType="plusInCircle"
         data-test-subj="createPolicyButton"
@@ -253,7 +253,9 @@ export class PolicyTable extends Component {
         name: viewIndicesLabel,
         icon: 'list',
         onClick: () => {
-          window.location.hash = getIndexListUri(`ilm.policy:${policy.name}`);
+          this.props.navigateToApp('management', {
+            path: `/data/index_management${getIndexListUri(`ilm.policy:${policy.name}`)}`,
+          });
         },
       });
     }

x-pack/plugins/index_lifecycle_management/public/application/services/navigation.ts

@@ -4,12 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { BASE_PATH } from '../../../common/constants';
-
-export const goToPolicyList = () => {
-  window.location.hash = `${BASE_PATH}policies`;
-};
-
 export const getPolicyPath = (policyName: string): string => {
-  return encodeURI(`#${BASE_PATH}policies/edit/${encodeURIComponent(policyName)}`);
+  return encodeURI(`/policies/edit/${encodeURIComponent(policyName)}`);
 };

x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.js

@@ -23,7 +23,6 @@ import {
   EuiModalHeaderTitle,
 } from '@elastic/eui';
 
-import { BASE_PATH } from '../../../common/constants';
 import { loadPolicies, addLifecyclePolicyToIndex } from '../../application/services/api';
 import { showApiError } from '../../application/services/api_errors';
 import { toasts } from '../../application/services/notification';
@@ -216,7 +215,7 @@ export class AddLifecyclePolicyConfirmModal extends Component {
   }
   render() {
     const { policies } = this.state;
-    const { indexName, closeModal } = this.props;
+    const { indexName, closeModal, getUrlForApp } = this.props;
     const title = (
       <FormattedMessage
         id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.modalTitle"
@@ -246,7 +245,11 @@ export class AddLifecyclePolicyConfirmModal extends Component {
                 color="warning"
               >
                 <p>
-                  <EuiLink href={`#${BASE_PATH}policies/edit`}>
+                  <EuiLink
+                    href={getUrlForApp('management', {
+                      path: `data/index_lifecycle_management/policies/edit`,
+                    })}
+                  >
                     <FormattedMessage
                       id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.defineLifecyclePolicyLinkText"
                       defaultMessage="Define lifecycle policy"

x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.js

@@ -163,7 +163,15 @@ export class IndexLifecycleSummary extends Component {
       if (fieldName === 'action_time_millis') {
         content = moment(value).format('YYYY-MM-DD HH:mm:ss');
       } else if (fieldName === 'policy') {
-        content = <EuiLink href={getPolicyPath(value)}>{value}</EuiLink>;
+        content = (
+          <EuiLink
+            href={this.props.getUrlForApp('management', {
+              path: `data/index_lifecycle_management/${getPolicyPath(value)}`,
+            })}
+          >
+            {value}
+          </EuiLink>
+        );
       } else {
         content = value;
       }

x-pack/plugins/index_lifecycle_management/public/extend_index_management/index.js

@@ -67,7 +67,7 @@ export const removeLifecyclePolicyActionExtension = ({ indices, reloadIndices })
   };
 };
 
-export const addLifecyclePolicyActionExtension = ({ indices, reloadIndices }) => {
+export const addLifecyclePolicyActionExtension = ({ indices, reloadIndices, getUrlForApp }) => {
   if (indices.length !== 1) {
     return null;
   }
@@ -86,6 +86,7 @@ export const addLifecyclePolicyActionExtension = ({ indices, reloadIndices }) =>
           closeModal={closeModal}
           index={index}
           reloadIndices={reloadIndices}
+          getUrlForApp={getUrlForApp}
         />
       );
     },
@@ -123,8 +124,8 @@ export const ilmBannerExtension = (indices) => {
   };
 };
 
-export const ilmSummaryExtension = (index) => {
-  return <IndexLifecycleSummary index={index} />;
+export const ilmSummaryExtension = (index, getUrlForApp) => {
+  return <IndexLifecycleSummary index={index} getUrlForApp={getUrlForApp} />;
 };
 
 export const ilmFilterExtension = (indices) => {

x-pack/plugins/index_lifecycle_management/public/plugin.tsx

@@ -47,6 +47,7 @@ export class IndexLifecycleManagementPlugin {
           const {
             i18n: { Context: I18nContext },
             docLinks: { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION },
+            application: { navigateToApp },
           } = coreStart;
 
           // Initialize additional services.
@@ -55,7 +56,7 @@ export class IndexLifecycleManagementPlugin {
           );
 
           const { renderApp } = await import('./application');
-          return renderApp(element, I18nContext, history);
+          return renderApp(element, I18nContext, history, navigateToApp);
         },
       });
 

x-pack/plugins/index_management/public/application/app_context.tsx

@@ -18,6 +18,7 @@ const AppContext = createContext<AppDependencies | undefined>(undefined);
 export interface AppDependencies {
   core: {
     fatalErrors: CoreStart['fatalErrors'];
+    getUrlForApp: CoreStart['application']['getUrlForApp'];
   };
   plugins: {
     usageCollection: UsageCollectionSetup;