Merge pull request #1013 from nasa/develop

v7.1.0:  step 9. Create a pull request against the master branch

Author: flamingbear

CHANGELOG.md

@@ -7,7 +7,28 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-## [v7.0.0]
+## [v7.0.1] - 2021-10-19
+
+### Added
+
+- **CUMULUS-2462**
+  - Reingest a granule from granule details page is updated to select a workflow execution arn for reingest.
+  - Batch Reingest and Bulk Reingest Actions are updated to select the workflowName for reingest.
+- **CUMULUS-2585**
+  - Added failed execution step snapshot to execution list
+
+### Changed
+
+- **CUMULUS-NONE**
+  - update development version of @cumulus/api to v9.7.0 to pick up test fixes.
+  - update Cypress to latest version 8.6.0
+
+### Fixed
+
+- **CUMULUS-2643**
+  - Fixed issue with search component that was causing search to be triggered excessively
+
+## [v7.0.0] - 2021-10-04
 
 ## Breaking Changes
 
@@ -991,7 +1012,8 @@ Fix for serving the dashboard through the Cumulus API.
 ### Added
 
 - Versioning and changelog [CUMULUS-197] by @kkelly51
-[Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v7.0.0...HEAD
+[Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v7.1.0...HEAD
+[v7.1.0]: https://github.com/nasa/cumulus-dashboard/compare/v7.0.0...v7.1.0
 [v7.0.0]: https://github.com/nasa/cumulus-dashboard/compare/v6.0.0...v7.0.0
 [v6.0.0]: https://github.com/nasa/cumulus-dashboard/compare/v5.0.0...v6.0.0
 [v5.0.0]: https://github.com/nasa/cumulus-dashboard/compare/v4.0.0...v5.0.0

README.md

@@ -114,9 +114,11 @@ The dashboard uses node v12.18.0. To build/run the dashboard on your local machi
 We use npm for local package management, to install the requirements:
 ```bash
   $ nvm use
-  $ npm install
+  $ npm ci
 ```
 
+Use `$ npm install` when package.json is updated.
+
 To build a dashboard bundle<sup>[1](#bundlefootnote)</sup>:
 
 ```bash
@@ -240,7 +242,7 @@ These are started and stopped with the commands:
   $ npm run stop-localstack
 ```
 
-After these containers are running, you can start a cumulus API locally in a terminal window `npm run serve-api`, the dashboard in another window. `[HIDE_PDR=false SHOW_DISTRIBUTION_API_METRICS=true ESROOT=http://example.com APIROOT=http://localhost:5001] npm run serve` and finally cypress in a third window. `npm run cypress`.
+After these containers are running, you can start a cumulus API locally in a terminal window `npm run serve-api`, the dashboard in another window. `[HIDE_PDR=false SHOW_DISTRIBUTION_API_METRICS=true ENABLE_RECOVERY=true ESROOT=http://example.com ES_CLOUDWATCH_TARGET_PATTERN=cwpattern ES_DISTRIBUTION_TARGET_PATTERN=distpattern APIROOT=http://localhost:5001] npm run serve` and finally cypress in a third window. `npm run cypress`.
 
 Once the Docker app is running, If you would like to see sample data you can seed the database. This will load the same sample data into the application that is used during cypress testing.
 ```bash
@@ -384,6 +386,7 @@ Create and push a new git tag:
 
 ```bash
   $ git checkout master
+  $ git pull origin master
   $ git tag -a v1.x.x -m "Release 1.x.x"
   $ git push origin v1.x.x
 ```

app/src/css/modules/_modals.scss

@@ -173,6 +173,11 @@
     }
   }
 
+  .batch_granules--reingest,
+  .granule--reingest {
+    text-align: left;
+  }
+
   &.bulk_granules {
     &.modal-dialog {
       overflow-y: initial !important;
@@ -184,8 +189,8 @@
 
     .modal-body {
       height: 100px;
-      overflow-y: auto;
       margin-left: 10px;
+      overflow-y: auto;
       text-align: left;
     }
 

app/src/css/modules/_table.scss

@@ -7,12 +7,13 @@
 }
 
 .table {
-  width: 100%;
-  line-height: 1.6em;
-  overflow-x: scroll;
-  border-radius: 8px 8px 0px 0px;
-  scroll-behavior: smooth;
-  // transform: translate3d(0px, -200px, 0px);
+  &:not(.sub-table) {
+    width: 100%;
+    line-height: 1.6em;
+    overflow-x: scroll;
+    border-radius: 8px 8px 0px 0px;
+    scroll-behavior: smooth;
+  }
 
   .content-fit {
     width: fit-content!important;
@@ -44,7 +45,7 @@
   }
 
   .tbody {
-    .tr {
+    & > .tr {
       border-bottom: 1px solid $lightest-grey;
       .td {
         font-size: .86em;
@@ -85,6 +86,13 @@
   }
 }
 
+.sub-table {
+  .thead .th {
+    background-color: $background-white;
+    color: $black;
+  }
+}
+
 .table__header {
   display: flex;
   align-items: center;

app/src/js/actions/index.js

@@ -291,14 +291,15 @@ export const applyRecoveryWorkflowToGranule = (granuleId) => (dispatch) => dispa
     error
   }));
 
-export const reingestGranule = (granuleId) => ({
+export const reingestGranule = (granuleId, meta) => ({
   [CALL_API]: {
     type: types.GRANULE_REINGEST,
     method: 'PUT',
     id: granuleId,
     path: `granules/${granuleId}`,
     data: {
-      action: 'reingest'
+      action: 'reingest',
+      ...meta,
     }
   }
 });
@@ -742,6 +743,7 @@ export const getExecutionStatus = (arn) => ({
   [CALL_API]: {
     type: types.EXECUTION_STATUS,
     method: 'GET',
+    id: arn,
     url: new URL(`executions/status/${arn}`, root).href
   }
 });
@@ -766,10 +768,11 @@ export const listExecutions = (options) => (dispatch, getState) => {
   });
 };
 
-export const listExecutionsByGranule = (payload) => ({
+export const listExecutionsByGranule = (granuleId, payload) => ({
   [CALL_API]: {
     type: types.EXECUTIONS_LIST,
     method: 'POST',
+    id: granuleId,
     path: 'executions/search-by-granules',
     params: { limit: defaultPageLimit },
     data: payload
@@ -781,6 +784,20 @@ export const clearExecutionsFilter = (paramKey) => ({ type: types.CLEAR_EXECUTIO
 export const searchExecutions = (infix) => ({ type: types.SEARCH_EXECUTIONS, infix });
 export const clearExecutionsSearch = () => ({ type: types.CLEAR_EXECUTIONS_SEARCH });
 
+export const getGranulesWorkflows = (payload) => ({
+  [CALL_API]: {
+    type: types.WORKFLOWS_FROM_GRANULES,
+    method: 'POST',
+    path: 'executions/workflows-by-granules',
+    params: { limit: 50 },
+    data: payload
+  }
+});
+
+export const clearGranulesWorkflows = () => ({ type: types.CLEAR_WORKFLOWS_FROM_GRANULES });
+
+export const getGranulesWorkflowsClearError = () => ({ type: types.WORKFLOWS_FROM_GRANULES_CLEAR_ERROR });
+
 export const listOperations = (options) => (dispatch, getState) => {
   const timeFilters = fetchCurrentTimeFilters(getState().datepicker);
   return dispatch({

app/src/js/actions/types.js

@@ -182,6 +182,13 @@ export const EXECUTIONS_LIST = 'EXECUTIONS_LIST';
 export const EXECUTIONS_LIST_INFLIGHT = 'EXECUTIONS_INFLIGHT';
 export const EXECUTIONS_LIST_ERROR = 'EXECUTIONS_LIST_ERROR';
 
+// Granules executions workflows
+export const WORKFLOWS_FROM_GRANULES = 'WORKFLOWS_FROM_GRANULES';
+export const WORKFLOWS_FROM_GRANULES_INFLIGHT = 'WORKFLOWS_FROM_GRANULES_INFLIGHT';
+export const WORKFLOWS_FROM_GRANULES_ERROR = 'WORKFLOWS_FROM_GRANULES_ERROR';
+export const WORKFLOWS_FROM_GRANULES_CLEAR_ERROR = 'WORKFLOWS_FROM_GRANULES_CLEAR_ERROR';
+export const CLEAR_WORKFLOWS_FROM_GRANULES = 'CLEAR_WORKFLOWS_FROM_GRANULES';
+
 // Operations
 export const OPERATIONS = 'OPERATIONS';
 export const OPERATIONS_INFLIGHT = 'OPERATIONS_INFLIGHT';

app/src/js/components/AsyncCommands/AsyncCommands.js

@@ -138,7 +138,7 @@ AsyncCommand.propTypes = {
   disabled: PropTypes.bool,
   element: PropTypes.string,
   confirmAction: PropTypes.bool,
-  confirmText: PropTypes.string,
+  confirmText: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   confirmOptions: PropTypes.array,
   postActionText: PropTypes.string
 };

app/src/js/components/BatchAsyncCommands/BatchAsyncCommands.js

@@ -43,8 +43,10 @@ export class BatchCommand extends React.Component {
       status: null,
       modalOptions: null,
       errorMessage: null,
+      meta: {},
     };
     this.isRunning = false;
+    this.buildId = this.buildId.bind(this);
     this.confirm = this.confirm.bind(this);
     this.cancel = this.cancel.bind(this);
     this.start = this.start.bind(this);
@@ -55,10 +57,20 @@ export class BatchCommand extends React.Component {
     this.isInflight = this.isInflight.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.closeModal = this.closeModal.bind(this);
+    this.updateMeta = this.updateMeta.bind(this);
+  }
+
+  buildId(item) {
+    return (typeof item === 'string') ? item : item.granuleId;
+  }
+
+  updateMeta(meta) {
+    this.setState({ meta: { ...this.state.meta, ...meta } });
   }
 
   closeModal() {
     this.setState({ activeModal: false });
+    this.setState({ meta: {} });
   }
 
   componentDidUpdate() {
@@ -112,18 +124,18 @@ export class BatchCommand extends React.Component {
     if (!Array.isArray(selected) || !selected.length || this.isInflight()) { return false; }
     const q = queue(CONCURRENCY);
     for (let i = 0; i < selected.length; i += 1) {
-      q.add(this.initAction, selected[i]);
+      q.add(this.initAction, this.buildId(selected[i]));
     }
     q.done(this.onComplete);
   }
 
   // save a reference to the callback in state, then init the action
   initAction(id, callback) {
     const { dispatch, action } = this.props;
-    const { callbacks } = this.state;
+    const { callbacks, meta } = this.state;
     callbacks[id] = callback;
     this.setState({ callbacks });
-    return dispatch(action(id));
+    return dispatch(action(id, meta));
   }
 
   // immediately change the UI to show either success or error
@@ -173,7 +185,7 @@ export class BatchCommand extends React.Component {
     if (results && results.length && typeof onSuccess === 'function') { onSuccess(results, errorMessage); }
 
     if (typeof clearError === 'function') {
-      selected.forEach((id) => dispatch(clearError(id)));
+      selected.forEach((item) => dispatch(clearError(this.buildId(item))));
     }
 
     this.setState({ activeModal: false, completed: 0, errorMessage: null, results: null, status: null });
@@ -187,6 +199,7 @@ export class BatchCommand extends React.Component {
     const { selected, history, getModalOptions } = this.props;
     if (typeof getModalOptions === 'function') {
       const modalOptions = getModalOptions({
+        onChange: this.updateMeta,
         selected,
         history,
         closeModal: this.closeModal,

app/src/js/components/Collections/granules.js

@@ -51,6 +51,7 @@ const CollectionGranules = ({
   const view = getView();
   const [workflow, setWorkflow] = useState(workflowOptions[0]);
   const [workflowMeta, setWorkflowMeta] = useState(defaultWorkflowMeta);
+  const [selected, setSelected] = useState([]);
   const query = generateQuery();
   const { dropdowns } = providers;
 
@@ -102,7 +103,7 @@ const CollectionGranules = ({
       },
     };
 
-    return bulkActions(granules, actionConfig);
+    return bulkActions(granules, actionConfig, selected);
   }
 
   function selectWorkflow(_selector, selectedWorkflow) {
@@ -128,6 +129,13 @@ const CollectionGranules = ({
     ];
   }
 
+  function updateSelection(selectedIds, currentSelectedRows) {
+    const allSelectedRows = selected.concat(currentSelectedRows);
+    const selectedRows = selectedIds
+      .map((id) => allSelectedRows.find((g) => id === g.granuleId)).filter(Boolean);
+    setSelected(selectedRows);
+  }
+
   return (
     <div className="page__component">
       <Helmet>
@@ -159,6 +167,7 @@ const CollectionGranules = ({
           tableColumns={tableColumns}
           filterAction={filterGranules}
           filterClear={clearGranulesFilter}
+          onSelect={updateSelection}
           tableId="granules"
         >
           <Search