Fixed routing for index lifecycle management

elastic · May 22, 2020 · 7ade6a9 · 7ade6a9
1 parent 02bd880
commit 7ade6a9
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 36 deletions.
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/app.tsx b/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>

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/index.tsx b/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

diff --git a/...plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js b/...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 () => {

diff --git a/...nagement/public/application/sections/policy_table/components/policy_table/policy_table.js b/...nagement/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}`)}`,
+          });
         },
       });
     }

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/navigation.ts b/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)}`);
 };
diff --git a/...cycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.js b/...cycle_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"

diff --git a/...lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.js b/...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;
       }

diff --git a/x-pack/plugins/index_lifecycle_management/public/extend_index_management/index.js b/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) => {

diff --git a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx b/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);
         },
       });
 

diff --git a/x-pack/plugins/index_management/public/application/app_context.tsx b/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;

diff --git a/x-pack/plugins/index_management/public/application/mount_management_section.ts b/x-pack/plugins/index_management/public/application/mount_management_section.ts
@@ -32,14 +32,15 @@ export async function mountManagementSection(
 ) {
   const { element, setBreadcrumbs, history } = params;
   const [core] = await coreSetup.getStartServices();
-  const { docLinks, fatalErrors } = core;
+  const { docLinks, fatalErrors, application } = core;
 
   breadcrumbService.setup(setBreadcrumbs);
   documentationService.setup(docLinks);
 
   const appDependencies: AppDependencies = {
     core: {
       fatalErrors,
+      getUrlForApp: application.getUrlForApp,
     },
     plugins: {
       usageCollection,

diff --git a/...ex_management/public/application/sections/home/index_list/detail_panel/summary/summary.js b/...ex_management/public/application/sections/home/index_list/detail_panel/summary/summary.js
@@ -54,14 +54,14 @@ const getHeaders = () => {
 };
 
 export class Summary extends React.PureComponent {
-  getAdditionalContent(extensionsService) {
+  getAdditionalContent(extensionsService, getUrlForApp) {
     const { index } = this.props;
     const extensions = extensionsService.summaries;
     return extensions.map((summaryExtension, i) => {
       return (
         <Fragment key={`summaryExtension-${i}`}>
           <EuiHorizontalRule />
-          {summaryExtension(index)}
+          {summaryExtension(index, getUrlForApp)}
         </Fragment>
       );
     });
@@ -103,9 +103,12 @@ export class Summary extends React.PureComponent {
   render() {
     return (
       <AppContextConsumer>
-        {({ services }) => {
+        {({ services, core }) => {
           const { left, right } = this.buildRows();
-          const additionalContent = this.getAdditionalContent(services.extensionsService);
+          const additionalContent = this.getAdditionalContent(
+            services.extensionsService,
+            core.getUrlForApp
+          );
 
           return (
             <Fragment>

diff --git a/...ication/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js b/...ication/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
@@ -46,7 +46,7 @@ export class IndexActionsContextMenu extends Component {
   confirmAction = (isActionConfirmed) => {
     this.setState({ isActionConfirmed });
   };
-  panels({ services: { extensionsService } }) {
+  panels({ services: { extensionsService }, core: { getUrlForApp } }) {
     const {
       closeIndices,
       openIndices,
@@ -214,6 +214,7 @@ export class IndexActionsContextMenu extends Component {
       const actionExtensionDefinition = actionExtension({
         indices,
         reloadIndices,
+        getUrlForApp,
       });
       if (actionExtensionDefinition) {
         const {