updates for version 0.5.0 (#1)

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "node": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -1,69 +1,15 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Project dependencies
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# Build directory
+public/
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
+# Autogenerated from scss
+catalog/css/
 
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# dotenv environment variables file
-.env
-
-# gatsby files
-.cache/
-public
-
-# Mac files
 .DS_Store
-
-# Yarn
 yarn-error.log
-.pnp/
-.pnp.js
-# Yarn Integrity file
-.yarn-integrity
+.cache/
+
+# Ignore env files containing secrets

README.md

@@ -1,42 +1,62 @@
-# Cirrus Dashboard
+# FilmDrop Dashboard for Cirrus
 
-Dashboard for Cirrus processing pipeline.
+FilmDrop Dashboard for displaying metrics and workflows found in the Cirrus processing pipeline.
+
+- [Gatsby](https://www.gatsbyjs.org/) for templating and static site generation.
+- Gatsby relies on [React](https://reactjs.org/) as the UI framework
+- The compiled website is uploaded to s3 ad which point it is served
 
 ## Getting Started
 
 ### Requirements
-* node
-* yarn*
-* Environment files
+
+- node
+- yarn*
+- Environment files
 
 *If you don't have yarn installed, you should be okay running the project with npm, but keep in mind the dependencies should be updated using yarn.
 
 #### Environment Files
+
 For local development, you should include an `.env.development` file with the proper configuration.
 
 For production builds, you should include an `.env.production` file with the proper configuration.
 
 ```
 CIRRUS_API_ENDPOINT="[Endpoint]"
+METRICS_API_ENDPOINT="[Endpoint]"
 ```
 
-### Installing Depdencies
+### Installing Dependencies
+
 ```
 yarn install
 ```
 
 ### Development
+
 ```
 yarn develop
 ```
 
 ### Production Builds
+
 ```
 yarn build
 ```
 
+## Deployment
+
+### Links
+
+- Live dev link: <https://dashboard.dev.demo.filmdrop.io>
+- Live prod link: <https://dashboard.demo.filmdrop.io>
+
+Deployment is handled by gitlab ci scripts: `.gitlab-ci.yml`\
+
 ### Deploying cirrus-dashboard into AWS
-```
+
+```bash
 export ENVIRONMENT=Development
 export AWS_REGION=us-east-1
 export AWS_DEFAULT_REGION=us-east-1

gatsby-config.js

@@ -17,6 +17,14 @@ module.exports = {
           '/collections/*'
         ]
       }
-    }
+    },
+    {
+      resolve: 'gatsby-plugin-react-svg',
+      options: {
+        rule: {
+          include: /\.inline\.svg$/,
+        }
+      }
+    }  
   ],
 }

package.json

@@ -1,27 +1,31 @@
 {
   "name": "cirrus-dashboard",
-  "description": "a dashboard for cirrus",
+  "description": "FilmDrop Dashboard for Cirrus",
   "license": "Apache-2.0",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "Element 84, Inc. <[email protected]>",
   "dependencies": {
     "@material-ui/core": "^4.10.2",
-    "axios": "^0.19.2",
-    "gatsby": "^2.23.4",
+    "axios": "^1.1.2",
+    "chart.js": "^3.9.1",
+    "eslint": "^8.28.0",
+    "eslint-plugin-react": "^7.31.11",
+    "gatsby": "^4.0.0",
     "gatsby-plugin-create-client-paths": "^2.3.4",
     "gatsby-plugin-react-helmet": "^3.3.4",
+    "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-resolve-src": "^2.1.0",
-    "gatsby-plugin-sass": "^2.3.4",
-    "gatsby-source-filesystem": "^2.3.11",
-    "node-sass": "^4.14.1",
+    "gatsby-plugin-sass": "^5.24.0",
+    "gatsby-source-filesystem": "^4.14.0",
+    "node-sass": "^7.0.3",
     "numeral": "^2.0.6",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-chartjs-2": "^4.3.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.10.0"
   },
-  "devDependencies": {},
   "keywords": [
     "gatsby",
     "sass",
@@ -31,17 +35,13 @@
     "build": "gatsby build",
     "sonar": "sonar-scanner -Dsonar.projectVersion=$npm_package_version",
     "develop": "gatsby develop",
-    "lint": "Get started linting your code with Eslint and stylelint",
+    "lint": "eslint \"**/*.js\" && echo \"👍  Passed linting\n\"",
     "format": "Get started formatting your code with Eslint, Prettier, and stylelint",
     "start": "yarn develop",
     "serve": "gatsby serve",
     "test": "echo 'Write tests! -> https://gatsby.dev/unit-testing'"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/cirrus-geo/cirrus-dashboard"
-  },
-  "bugs": {
-    "url": "https://github.com/cirrus-geo/cirrus-dashboard/issues"
+  "resolutions": {
+    "remark-mdx": "1.6.22"
   }
 }

sonar-project.properties

@@ -6,3 +6,4 @@ sonar.projectName=cirrus-dashboard
 
 sonar.sources=.
 sonar.sourceEncoding=UTF-8
+

src/assets/stylesheets/application.scss

@@ -8,21 +8,31 @@
 }
 
 body {
-  font-family: Helvetica, Arial, sans-serif;
-  color: $color-gray9;
-  background-color: lighten($color-gray0, 3);
+  font-family: var(--font-primary);
+  color: $color-dashboard-light-gray;
+  background-color: $color-background;
+  line-height: var(--body-line-height);
   padding: 0;
   margin: 0;
 }
 
 .wrapper {
-  min-height: 100vh;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 main {
   display: flex;
   flex-direction: column;
   align-content: center;
+  flex-grow: 1;
+  width: calc(100% - 195px);
+}
+
+@include breakpoint(md) {
+  .wrapper {
+    flex-wrap: nowrap;
+    height: 100vh;
+  }
 }

src/assets/stylesheets/components/__components.scss

@@ -6,4 +6,10 @@
 @import "dashboard-controls";
 @import "data-table";
 @import "footer";
-@import "header";
+@import "header";
+@import "sidebar";
+@import "line-chart";
+@import "bar-chart";
+@import "metrics-controls";
+@import "modal";
+@import "pie-chart";

src/assets/stylesheets/components/_bar-chart.scss

@@ -0,0 +1,67 @@
+.bar-chart {
+  background-color: $color-dashboard-darker-gray;
+  padding: var(--space-lg);
+  max-width: 100%;
+  margin: var(--space-md) 0;
+  overflow: hidden;
+  min-width: 600px;
+
+  .header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: var(--space-lg);
+
+    h2 {
+      margin: 0 1em 0.5em 0;
+    }
+
+    .title {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    ul {
+      list-style-type: none;
+      margin: 0 1em 0 0;
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      color: $color-dashboard-light-gray;
+      font-size: var(--text-md);
+
+      li {
+        padding-left: 0;
+        display: flex;
+        align-items: center;
+        margin: 0 1em 0 0;
+      }
+
+      .legend {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        border-radius: 2px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+@include breakpoint(md) {
+  .bar-chart {
+    .header {
+      flex-wrap: nowrap;
+      align-items: center;
+      h2 {
+        margin-bottom: 0;
+      }
+    }
+  }
+}