Add start, stop, and delete actions to rollup jobs table and detail p…

…anel (#22235)

x-pack/plugins/rollup/common/constants/crud_app.js

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const CRUD_APP_BASE_PATH = '/management/elasticsearch/index_rollup_jobs/';
+export const CRUD_APP_BASE_PATH = '/management/elasticsearch/rollup_jobs/';

x-pack/plugins/rollup/public/crud_app/app.js

@@ -12,7 +12,7 @@ import { JobList } from './sections';
 export const App = () => (
   <div>
     <Switch>
-      <Route path={CRUD_APP_BASE_PATH} component={JobList} />
+      <Route exact path={CRUD_APP_BASE_PATH} component={JobList} />
     </Switch>
   </div>
 );

x-pack/plugins/rollup/public/crud_app/index.js

@@ -8,6 +8,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
+import { I18nProvider } from '@kbn/i18n/react';
 import { management } from 'ui/management';
 import routes from 'ui/routes';
 
@@ -23,7 +24,7 @@ esSection.register('rollup_jobs', {
   visible: true,
   display: 'Rollup Jobs',
   order: 2,
-  url: `#${CRUD_APP_BASE_PATH}home`
+  url: `#${CRUD_APP_BASE_PATH}`
 });
 
 export const manageAngularLifecycle = ($scope, $route, elem) => {
@@ -44,11 +45,13 @@ export const manageAngularLifecycle = ($scope, $route, elem) => {
 
 const renderReact = async (elem) => {
   render(
-    <Provider store={rollupJobsStore()}>
-      <HashRouter>
-        <App />
-      </HashRouter>
-    </Provider>,
+    <I18nProvider>
+      <Provider store={rollupJobsStore()}>
+        <HashRouter>
+          <App />
+        </HashRouter>
+      </Provider>
+    </I18nProvider>,
     elem
   );
 };

x-pack/plugins/rollup/public/crud_app/sections/components/index.js

@@ -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 { JobActionMenu } from './job_action_menu';

x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/confirm_delete_modal/confirm_delete_modal.js

@@ -0,0 +1,114 @@
+/*
+ * 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, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  EuiConfirmModal,
+  EuiOverlayMask,
+} from '@elastic/eui';
+
+class ConfirmDeleteModalUi extends Component {
+  static propTypes = {
+    isSingleSelection: PropTypes.bool.isRequired,
+    entity: PropTypes.string.isRequired,
+    jobs: PropTypes.array.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+  }
+
+  renderJobs() {
+    const { jobs } = this.props;
+    const jobItems = jobs.map(({ id, status }) => {
+      const statusText = status === 'started' ? ' (started)' : null;
+      return <li key={id}>{id}{statusText}</li>;
+    });
+
+    return <ul>{jobItems}</ul>;
+  }
+
+  render() {
+    const {
+      isSingleSelection,
+      entity,
+      jobs,
+      onCancel,
+      onConfirm,
+      intl,
+    } = this.props;
+
+    let title;
+    let content;
+
+    if (isSingleSelection) {
+      const { id, status } = jobs[0];
+      title = intl.formatMessage({
+        id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.modalTitleSingle',
+        defaultMessage: 'Delete rollup job \'{id}\'?',
+      }, { id });
+
+      if (status === 'started') {
+        content = (
+          <p>
+            <FormattedMessage
+              id="xpack.rollupJobs.jobActionMenu.deleteJob.deleteDescriptionSingleRunning"
+              defaultMessage="This job has been started."
+            />
+          </p>
+        );
+      }
+    } else {
+      title = intl.formatMessage({
+        id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.modalTitleMultiple',
+        defaultMessage: 'Delete {count} rollup jobs?',
+      }, { count: jobs.length });
+
+      content = (
+        <Fragment>
+          <p>
+            <FormattedMessage
+              id="xpack.rollupJobs.jobActionMenu.deleteJob.deleteDescriptionMultiple"
+              defaultMessage="You are about to delete {mergedKeyword}"
+              values={{ mergedKeyword: isSingleSelection ? 'this' : 'these' }}
+            />
+            {' '}
+            {entity}:
+          </p>
+          {this.renderJobs()}
+        </Fragment>
+      );
+    }
+
+    return (
+      <EuiOverlayMask>
+        <EuiConfirmModal
+          title={title}
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+          cancelButtonText={
+            intl.formatMessage({
+              id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.cancelButtonText',
+              defaultMessage: 'Cancel',
+            })
+          }
+          buttonColor="danger"
+          confirmButtonText={
+            intl.formatMessage({
+              id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.confirmButtonText',
+              defaultMessage: 'Delete',
+            })
+          }
+        >
+          {content}
+        </EuiConfirmModal>
+      </EuiOverlayMask>
+    );
+  }
+}
+
+export const ConfirmDeleteModal = injectI18n(ConfirmDeleteModalUi);

x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/confirm_delete_modal/index.js

@@ -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 { ConfirmDeleteModal } from './confirm_delete_modal';

x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/index.js

@@ -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 { JobActionMenu } from './job_action_menu.container';

x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/job_action_menu.container.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { JobActionMenu as JobActionMenuComponent } from './job_action_menu';
+import {
+  startJobs,
+  stopJobs,
+  deleteJobs,
+} from '../../../store/actions';
+
+const mapDispatchToProps = (dispatch, { jobs }) => {
+  const jobIds = jobs.map(job => job.id);
+  return {
+    startJobs: () => {
+      dispatch(startJobs(jobIds));
+    },
+    stopJobs: () => {
+      dispatch(stopJobs(jobIds));
+    },
+    deleteJobs: () => {
+      dispatch(deleteJobs(jobIds));
+    },
+  };
+};
+
+export const JobActionMenu = connect(undefined, mapDispatchToProps)(JobActionMenuComponent);