Merge pull request #747 from nasa/develop

PR for release to master v1.8.0

.eslintrc

@@ -10,7 +10,7 @@
     "react-hooks"
   ],
   "parserOptions": {
-    "ecmaVersion": 8,
+    "ecmaVersion": 2018,
     "ecmaFeatures": {
       "jsx": true
     }

.gitignore

@@ -1,17 +1,18 @@
-node_modules
-.tmp
-**/npm-debug.log
-.DS_Store
+*.log
 *.swp
-dist
+.DS_Store
+.envrc
+.idea/
+.tmp/
+.vscode/
 app/src/js/config/local.js
-gulp-cache
-/artifacts
-/tmp/
-/docker/html/
-yarn.lock
+artifacts/
+cypress/screenshots/
+cypress/videos/
+dist/
+docker/html/
+gulp-cache/
+node_modules/
 test/fake-api/db/*.json
-cypress/screenshots
-cypress/videos
-.vscode
-.idea/
+tmp/
+yarn.lock

CHANGELOG.md

@@ -7,15 +7,96 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [v1.8.0]
+
+### Added
+
+- **CUMULUS-1515**
+  - filter capability to workflow overview page.
+
+- **CUMULUS-1526**
+  - Add a copy rule button
+
+- **CUMULUS-1538**
+  - Add ability to expand size of visual on execution details page
+
+- **CUMULUS-1646**
+  - Add 'Results Per Page' dropdown for tables that use pagination
+
+- **CUMULUS-1677**
+  - Updates the user experience when re-ingesting granules. Adds Modal flow for better understanding.
+
+- **CUMULUS-1798**
+  - Add a refresh button
+  - Add individual cancel buttons for date time range inputs
+
+- **CUMULUS-1822**
+  - Added dynamic form validation as user types
+
+### Changed
+
+- **CUMULUS-1460**
+  - Update dashboard headers overall
+  - Move remaining "add" buttons to body content
+
+- **CUMULUS-1467**
+  - Change the metrics section on the home page to update based on datepicker time period.
+
+- **CUMULUS-1509**
+  - Update styles on grnaules page
+
+- **CUMULUS-1525**
+  - Style changes for rules overview page
+
+- **CUMULUS-1527**
+  - Style changes for individual rule page
+
+- **CUMULUS-1528**
+  - Change add/copy rule form from raw JSON input to individual form fields.
+    Workflow, Provider, and Collection inputs are now dropdowns populated with
+    currently available items.
+
+- **CUMULUS-1537**
+  - Update execution details page format
+  - Move execution input and output json to modal
+
+- **CUMULUS-1538**
+  - Update executions details page styles
+
+- **CUMULUS-1787**
+  - Changes `listCollections` action to hit `/collections/active` endpoint when timefilters are present (requires Cumulus API v1.22.1)
+
+- **CUMULUS-1798**
+  - Change the 12HR/24HR Format selector from radio to dropdown
+  - Hide clock component in react-datetime-picker
+
+- **CUMULUS-1790**
+  - Changes default values and visuals for home page's datepicker. When the page loads, it defauls to display "Recent" data, which is the previous 24 hours with no end time.
+
+### Fixed
+
+- **CUMULUS-1813**
+  - Fixed CSS for graph on Execution status page
+  - Removed Datepicker from Execution status page
+
+- **CUMULUS-1822**
+  - Fixed no user feedback/errors when submitting a blank form
+
 ## [v1.7.2] - 2020-03-16
 
 ### Added
 
+- **CUMULUS-1535**
+  - Adds a confirmation modal when editing a rule
+
 - **CUMULUS-1758**
   - Adds the ability to resize table columns
 
 ### Changed
 
+- **CUMULUS-1693**
+  - Updates the bulk delete collection flow
+
 - **CUMULUS-1758**
   - Updates table implementation to use [react-table](https://github.com/tannerlinsley/react-table)
 
@@ -271,7 +352,8 @@ Fix for serving the dashboard through the Cumulus API.
 
 - Versioning and changelog [CUMULUS-197] by @kkelly51
 
-[Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.2...HEAD
+[Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v1.8.0...HEAD
+[v1.8.0]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.2...v1.8.0
 [v1.7.2]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.1...v1.7.2
 [v1.7.1]: https://github.com/nasa/cumulus-dashboard/compare/v1.7.0...v1.7.1
 [v1.7.0]: https://github.com/nasa/cumulus-dashboard/compare/v1.6.1...v1.7.0

CONTRIBUTING.md

@@ -14,7 +14,7 @@ If you want to submit your own contributions, follow these steps:
 
 * Fork the Cumulus Dashboard repo
 * Create a new branch from the branch you'd like to contribute to
-* If an issue does't already exist, submit one (see above)
+* If an issue doesn't already exist, submit one (see above)
 * [Create a pull request](https://help.github.com/articles/creating-a-pull-request/) from your fork into the target branch of the nasa/cumulus-dashboard repo
 * Be sure to [mention the corresponding issue number](https://help.github.com/articles/closing-issues-using-keywords/) in the PR description, i.e. "Fixes Issue #10"
 * If your contribution requires a specific version of the Cumulus API, bump (or add) the version in `app/src/js/config/index.js`.

README.md

@@ -23,21 +23,22 @@ The information needed to configure the dashboard is stored at `app/src/js/confi
 
 The following environment variables override the default values in `config.js`:
 
-| Env Name | Description |
-| -------- | ----------- |
-| HIDE_PDR | whether to hide the PDR menu, default to true |
-| DAAC\_NAME    | e.g. LPDAAC, default to Local |
-| STAGE | e.g. UAT, default to development |
-| LABELS | gitc or daac localization (defaults to daac) |
-| APIROOT | the API URL. This must be set by the user as it defaults to example.com |
-| AUTH_METHOD | The type of authorization method protecting the Cumulus API.  [launchpad or earthdata] Default: earthdata  |
-| ENABLE\_RECOVERY | If true, adds recovery options to the granule and collection pages. default: false |
-| KIBANAROOT | \<optional\> Should point to a Kibana endpoint. Must be set to examine distribution metrics details. |
-| SHOW\_TEA\_METRICS | \<optional\> display metrics from Thin Egress Application (TEA). default: true |
-| SHOW\_DISTRIBUTION\_API\_METRICS | \<optional\> Display metrics from Cumulus Distribution API. default: false |
-| ESROOT | \<optional\> Should point to an Elasticsearch endpoint. Must be set for distribution metrics to be displayed. |
-| ES\_USER | \<optional\> Elasticsearch username, needed when protected by basic authorization |
-| ES\_PASSWORD | \<optional\> Elasticsearch password,needed when protected by basic authorization |
+| Env Name | Description | Default |
+| -------- | ----------- | -------- |
+| HIDE\_PDR | Whether to hide the PDR menu. | *true* |
+| AWS\_REGION | Region in which Cumulus API is running. | *us-west-2*  |
+| DAAC\_NAME    | e.g. LPDAAC, | *Local* |
+| STAGE | e.g. PROD, UAT, | *development* |
+| LABELS | gitc or daac localization. | *daac* |
+| APIROOT | the API URL. This must be set by the user. | *example.com* |
+| AUTH_METHOD | The type of authorization method protecting the Cumulus API.  [launchpad or earthdata] | *earthdata*  |
+| ENABLE\_RECOVERY | If true, adds recovery options to the granule and collection pages. | *false* |
+| KIBANAROOT | \<optional\> Should point to a Kibana endpoint. Must be set to examine distribution metrics details. | |
+| SHOW\_TEA\_METRICS | \<optional\> display metrics from Thin Egress Application (TEA). | *true* |
+| SHOW\_DISTRIBUTION\_API\_METRICS | \<optional\> Display metrics from Cumulus Distribution API.| *false* |
+| ESROOT | \<optional\> Should point to an Elasticsearch endpoint. Must be set for distribution metrics to be displayed. | |
+| ES\_USER | \<optional\> Elasticsearch username, needed when protected by basic authorization | |
+| ES\_PASSWORD | \<optional\> Elasticsearch password,needed when protected by basic authorization | |
 
 
 ## Building or running locally
@@ -76,7 +77,7 @@ To build the dashboard:
 
 #### Build the dashboard to be served by the Cumulus API.
 
-With the Cumulus API it is possible to [serve the dashboard from an s3 Bucket](https://nasa.github.io/cumulus-api/#serve-the-dashboard-from-a-bucket).  If you wish to do this, you must build the dashboard with the environment variable `SERVED_BY_CUMULUS_API` set to `true`.  This configures the dashboard to work from the Cumulus `dashboard` endpoint.
+With the Cumulus API it is possible to [serve the dashboard from an s3 Bucket](https://nasa.github.io/cumulus-api/#serve-the-dashboard-from-a-bucket).  If you wish to do this, you must build the dashboard with the environment variable `SERVED_BY_CUMULUS_API` set to `true`.  This configures the dashboard to work from the Cumulus `dashboard` endpoint.  This option should be considered when you can't serve the dashboard from behind CloudFront, for example in NGAP sandbox environments.  If you wish to serve the dashboard from behind [CloudFront](https://aws.amazon.com/cloudfront/).  Build a `dist` with your configuration for `APIROOT` and omitting `SERVED_BY_CUMULUS_API` and follow the cumulus operator docs on [serving the dashboard from CloudFront](https://nasa.github.io/cumulus/docs/next/operator-docs/serve-dashboard-from-cloudfront).
 
 The compiled files will be placed in the `dist` directory.
 
@@ -120,7 +121,7 @@ These are started and stopped with the commands:
   $ npm run start-localstack
   $ 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. `[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. `[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`.
 
 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
@@ -134,7 +135,7 @@ The cumulusapi docker service is started and stopped:
   $ npm run start-cumulusapi
   $ npm run stop-cumulusapi
 ```
-Then you can run the dashboard locally (without docker) `[APIROOT=http://localhost:5001] npm run serve` and open cypress tests `npm run cypress`.
+Then you can run the dashboard locally (without docker) `[SHOW_DISTRIBUTION_API_METRICS=true ESROOT=http://example.com APIROOT=http://localhost:5001] npm run serve` and open cypress tests `npm run cypress`.
 
 
 The docker compose stack also includes a command to let a developer start all development containers with a single command.
@@ -277,7 +278,7 @@ Serve the cumulus API (separate terminal)
 
 Serve the dashboard web application (another terminal)
 ```bash
-  $ [APIROOT=http://localhost:5001] npm run serve
+  $ [SHOW_DISTRIBUTION_API_METRICS=true ESROOT=http://example.com APIROOT=http://localhost:5001] npm run serve
 ```
 
 If you're just testing dashboard code, you can generally run all of the above commands as a single docker-compose stack.

app/src/css/_badges.scss

@@ -0,0 +1,33 @@
+.num--title {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 4px;
+  padding: 0.3em .5em .5em .5em;
+  margin-left: 10px;
+  background: $ocean-blue;
+  color: $white;
+  line-height: .8;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+  font-size: 1em;
+  font-weight: $base-font-regular;
+  -webkit-font-smoothing: antialiased;
+  transition: background-color 0.2s linear;
+}
+
+.status--badge {
+  padding: .5em;
+  border-radius: 4px;
+  margin-left: 5px;
+  color: $white;
+  text-transform: uppercase;
+  font-weight: $base-font-regular;
+  display: inline-block;
+    &__enabled {
+      background-color: #30AD66;
+    }
+    &__disabled {
+      background-color: #36342D;
+  }
+}
+

app/src/css/_base.scss

@@ -114,7 +114,6 @@ a:active {
 
 .link--learn-more {
   margin-top: 1em;
-  display: inline-block;
   float: right;
 }
 
@@ -165,6 +164,7 @@ a:active {
 .header {
   background-color: $ocean-blue;
   border-bottom: 1px solid rgba(255, 255, 255, .06);
+  z-index: 2;
 
   h1 {
     float: left;
@@ -391,17 +391,25 @@ a:active {
 
 .page__section {
   @extend .clearfix;
-  &:last-of-type {
+  /*&:last-of-type {
   margin-bottom: 3em; 
-  }
+  }*/
 }
 
 .page_section__overview {
   margin-top: 25px;
 }
 
+.page__section__header-wrapper {
+  margin-bottom: 1em;
+}
+
+.page_section.metrics--overview .heading__wrapper--border {
+  margin-top: 0em;
+}
+
 .page__section.datetime{
-  margin-bottom: 8em;
+  margin-bottom: 7.5em;
 }
 
 .collection__options--top ul{
@@ -414,17 +422,15 @@ a:active {
 }
 
 .page__section__controls{
-  margin-bottom: 2em;
+  margin-bottom: 1.5em !important;
 }
 
 .page__section--small {
   margin-bottom: 2em;
 }
 
 .page__section--top{
-  /*margin-bottom: 25px;*/
   padding: 25px 0 25px 0;
-  /*border-top: 1px solid #E2DFDF;*/
   background-color: #1E6B9D;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
 }
@@ -606,17 +612,17 @@ a:active {
 
 .status--process {
   margin-top: 1.5em;
+  font-weight: $base-font-semibold;
   dd, dt {
     display: inline-block;
     font-size: .9em;
   }
   dd {
     font-weight: $base-font-semibold;
-    margin-bottom: 10px;
   }
   dt {
-    color: $grey;
     margin-right: 0.5em;
+    color: $dark-grey;
   }
   .running,
   .enabled {
@@ -640,6 +646,21 @@ a:active {
       background-color: $error-red;
     }
   }
+
+  .execution-status {
+    &-succeeded {
+      color: $light-green;
+    }
+
+    &-running {
+      color: $yellow;
+    }
+
+    &-failed {
+      color: $error-red;
+    }
+  }
+
 }
 
 .app__target--container {
@@ -684,6 +705,14 @@ a:active {
   }
 }
 
+.Collapsible__trigger {
+  align-self: flex-start;
+  cursor: pointer;
+  margin: 1em 0;
+  color: $ocean-blue;
+  border-bottom: 1px solid rgba(34, 118, 172, .2);
+}
+
 /**************************************************
   Footer
 **************************************************/