From 7be90742ed71b4327789ad36753f0e69195dd295 Mon Sep 17 00:00:00 2001 From: Jorge Samuel Mendes de Jesus Date: Mon, 19 Apr 2021 16:37:42 +0200 Subject: [PATCH 1/6] Dockerfile/K8s implementation, prod/dev run (#24) --- .dockerignore | 16 +++++++++++++++ .env.default | 4 ++-- .gitignore | 5 +++++ Dockerfile | 29 ++++++++++++++++++++++++++ README.md | 37 +++++++++++++++++++++++++++------- components/footer/component.js | 2 +- components/map/constants.js | 2 +- index.js | 1 + run.sh | 32 +++++++++++++++++++++++++++++ 9 files changed, 117 insertions(+), 11 deletions(-) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100755 run.sh diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..329282c --- /dev/null +++ b/.dockerignore @@ -0,0 +1,16 @@ +# ignore folder on copy (more for local build) +*.md +.git +.cache +.history +node_modules +npm-debug.log +.prettierrc +.gitignore +.github +.git +.eslintrc +.env.default +.editorconfig +.dockerignore +.env diff --git a/.env.default b/.env.default index 7c1e2ce..eafb378 100644 --- a/.env.default +++ b/.env.default @@ -1,11 +1,11 @@ -PORT=3000 +PORT=3001 MAPBOX_API_KEY= API_URL= ANALYSIS_API_URL= -DEPLOYMENT_KEY= GOOGLE_ANALYTICS_KEY= AWS_REGION= AWS_BUCKET_NAME= AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY= AWS_MAX_Z_TILE_STORAGE= +DEPLOYMENT_KEY= diff --git a/.gitignore b/.gitignore index 756b8f6..d89545e 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,8 @@ yarn-error.log* # keys gee.key.json + +#VScode +.history/ + + diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..ede5796 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,29 @@ +FROM docker.io/debian:stable-slim@sha256:a939c03c4d3e3f53e3ef4ef6e75cb681a3ad56537842f95bf89755da86559b13 + +# Source: https://www.kabisa.nl/tech/nvm-in-docker/ +# docker build --force-rm --no-cache -t soils-revealed:latest . +# docker run -p3001:3001 --env-file .env soils-revealed:latest + +SHELL ["/bin/bash","-l","-c"] +ENV DEBIAN_FRONTEND noninteractive + +RUN apt-get update \ + && apt-get install -y tini curl \ + && rm -rf /var/lib/apt/lists/* + +RUN mkdir /soils-revealed +WORKDIR /soils-revealed +COPY . . + +RUN curl --silent -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash +RUN nvm install && nvm use +RUN echo -e "Implementing node: $(node --version)\nFrom: $(which node)" + +RUN npm install -g yarn +RUN npm install -g pm2 +RUN yarn install --frozen-lockfile + +RUN DEPLOYMENT_KEY=$(date +%s) && echo "DEPLOYMENT_KEY=$DEPLOYMENT_KEY" > .env + +ENTRYPOINT ["/usr/bin/tini","-g","--"] +CMD ["/soils-revealed/run.sh","production"] diff --git a/README.md b/README.md index a21af21..97ab754 100644 --- a/README.md +++ b/README.md @@ -17,14 +17,15 @@ In order to start modifying the app, please make sure to correctly configure you 5. Use the correct Node.js version for this app by running `nvm use`; if you didn't install NVM (step 2), then manually install the Node.js version described in `.nvmrc` 6. Install the dependencies: `yarn` 7. Create a `.env` file at the root of the project by copying `.env.default` and giving a value for each of the variables (see next section for details) -8. Create a `gee.key.json` file at the root of the project with the Google Earth Engine's private key inside +8. Create a gee.key.json file at the root of the project with the Google Earth Engine's private key inside. + 9. Run the server: `yarn dev` You can access a hot-reloaded version of the app on [http://localhost:3000](http://localhost:3000). The application is built using [React](https://reactjs.org/) and the framework [Next.js](https://nextjs.org/). The styles use [Sass](https://sass-lang.com/) and the [Bootstrap](https://getbootstrap.com/) framework. -A continuous deployment system is in place. Each time you push to the `master` branch, the application is deployed to production through a GitHub Action defined in `.github/workflows/production.yml`. Each time you push to `develop`, the application is deployed to staging through an action defined in `.github/workflows/staging.yml`. You can see the status of the build in the “Actions” tab of the repository on GitHub. +A continuous deployment system is in place. Each time you push to the `master` branch, the application is deployed to production. Github will trigger an event on google cloud run and make a deployment. The same for the `develop` branch. ## Environment variables @@ -47,15 +48,37 @@ Below is a description of each of the keys. ## Deployment -As explained before, the application is automatically deployed to staging when pushing new changes to the `develop` branch, and deployed to production when pushing changes to `master`. This is achieved through GitHub Actions defined in `.github/workflows`. +### Local computer + +It is possible to run a local test deployment using the docker image. Docker implement an agnostic build and then during run it will pickup the container's env variables, and properly set the system + +`run.sh` accepts 2 arguments: production or develop. Production argument will run `yarn start` and the code will production ready, while `develop` runs nodejs in development mode, necessary if you are testing content and changes. + +```bash +docker build --force-rm --no-cache -t soils-revealed:latest . +docker run -p3001:3001 --env-file .env soils-revealed:latest /soils-revealed/run.sh production +``` + +**Note:** We have created a `.env` file on the project root with all variables, and this will be used to run nodejs in production mode. This is a deployment to test nodejs in production mode. + +**Note:** Dockerfile has `CMD` implementing production. + + +### Google GKE -When an action is executed, it connects via SSH to the server hosting the application. The server's credentials are stored in GitHub's “secrets” vault. A script is then executed: the running instance of the application is stopped, the code is pulled, the correct version of node is selected, the dependencies are installed, a local `.env` file is generated, a local `gee.key.json` file is generated, and the application is restarted. +Public deployment is based on Google Cloud build and Google GKE (Kubernetes). Up on push to `master` or `develop`, the following steps will happen: -The `.env` file is programmatically generated on the server because it differs for each environment. Some of the keys are hard coded in the `.github/workflows/XXX.yml` file and others are pulled from GitHub's “secrets” vault. +1. Github will trigger a Google Cloud run trigger +2. Google cloud will pull the branch content. +3. Docker build will be initicated. +4. After completed Docker image is stored on a private repository. +5. Image will then be deplyed into the soils-revealed cluster. +6. GKE contains a specific `ConfigMap` with all .env necessary for deployment. +7. `gee.key.json` is added to the pods using a `ConfigMap` mount -The `gee.key.json` file contains the credentials for the Google Earth Engine library. It is also programmatically generated as its value is stored in GitHub's “secrets” vault. +GKE will implement the available Dockerfile. -Overall, deploying to either environment takes between 1 to 2 minutes to complete. +Overall, deploying to either environment takes between 5 to 10 minutes to complete. ## Architecture diff --git a/components/footer/component.js b/components/footer/component.js index 0151bbd..4708091 100644 --- a/components/footer/component.js +++ b/components/footer/component.js @@ -42,7 +42,7 @@ const Footer = () => {
  • - + Contact
    • diff --git a/components/map/constants.js b/components/map/constants.js index 5dbdeb9..2457ebe 100644 --- a/components/map/constants.js +++ b/components/map/constants.js @@ -1082,7 +1082,7 @@ exports.LAYERS = { 'soc-experimental': { label: 'Soil organic carbon experimental approach', description: - 'These maps display soil organic carbon in Argentina in any year between 1982 and 2017. You can toggle between soil organic carbon concentration and soil organic carbon stock, as well as between soil organic carbon maps for any given year and change maps between years. Selecting “Change” will display where Argentina has experienced a gain in soil organic carbon and which parts a loss for a chosen time period. To produce these maps, we used a novel machine learning algorithm based on field samples to map soil organic carbon over space and time.\n\nA global implementation of this approach is in process. If you would like to join this effort, please [contact us](mailto:soilsrevealed@tnc.org), and join our growing partnership.', + 'These maps display soil organic carbon in Argentina in any year between 1982 and 2017. You can toggle between soil organic carbon concentration and soil organic carbon stock, as well as between soil organic carbon maps for any given year and change maps between years. Selecting “Change” will display where Argentina has experienced a gain in soil organic carbon and which parts a loss for a chosen time period. To produce these maps, we used a novel machine learning algorithm based on field samples to map soil organic carbon over space and time.\n\nA global implementation of this approach is in process. If you would like to join this effort, please [contact us](mailto:info@soilsrevealed.org), and join our growing partnership.', group: 'soc', attributions: [], bbox: [ diff --git a/index.js b/index.js index 66b4c51..a2f920b 100644 --- a/index.js +++ b/index.js @@ -36,6 +36,7 @@ const handle = app.getRequestHandler(); // Initialize GEE let geePrivateKey; try { + geePrivateKey = require('./gee.key.json'); ee.data.authenticateViaPrivateKey( geePrivateKey, diff --git a/run.sh b/run.sh new file mode 100755 index 0000000..f7af374 --- /dev/null +++ b/run.sh @@ -0,0 +1,32 @@ +#!/usr/bin/env bash + +yarn_build () { + echo -e "Using: $(cat .env)" + source /root/.nvm/nvm.sh + echo -e "Preparing .env file" + echo -e "PORT=$PORT\nMAPBOX_API_KEY=$MAPBOX_API_KEY\nAPI_URL=$API_URL\nANALYSIS_API_URL=$ANALYSIS_API_URL\nGOOGLE_ANALYTICS_KEY=$GOOGLE_ANALYTICS_KEY\nAWS_REGION=$AWS_REGION\nAWS_BUCKET_NAME=$AWS_BUCKET_NAME\nAWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID\nAWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY\nAWS_MAX_Z_TILE_STORAGE=$AWS_MAX_Z_TILE_STORAGE" >> .env + echo -e "Initiating yarn build" + + yarn build + +} + + +case "$1" in + production) + yarn_build + exec pm2 start --no-daemon yarn -- start + ;; + develop) + yarn_build + exec node index.js + ;; + *) + echo >&2 "Invalid option: $@ \n either production or develop"; exit 1 + ;; +esac + +#node index.js +#yarn start +#exec pm2 start --no-daemon yarn -- start + From 1ae308776dcc93173d1b9dbf0908c00cb69e332b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= Date: Fri, 30 Apr 2021 08:32:09 +0200 Subject: [PATCH 2/6] Delete the GitHub Actions The app will now be built with ISRIC's Google Cloud account --- .github/workflows/production.yml | 61 -------------------------------- .github/workflows/staging.yml | 61 -------------------------------- 2 files changed, 122 deletions(-) delete mode 100644 .github/workflows/production.yml delete mode 100644 .github/workflows/staging.yml diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml deleted file mode 100644 index 81c7fa3..0000000 --- a/.github/workflows/production.yml +++ /dev/null @@ -1,61 +0,0 @@ -name: Production build - -on: - push: - branches: - - master - -jobs: - deploy: - runs-on: ubuntu-latest - - steps: - - name: Run SSH commands - # Documentation: https://github.com/marketplace/actions/ssh-remote-commands - uses: appleboy/ssh-action@master - env: - NODE_PORT: 3000 - MAPBOX_API_KEY: pk.eyJ1IjoidG5jc29pbHNjaWVuY2UiLCJhIjoiY2s5Y3dweXg0MDBlZjNkbXE5ZGk4Y294biJ9.nGYVoUKe7Z8MJoi5GwCGjg - API_URL: http://35.233.41.65/user/skydipper/api/v2 - ANALYSIS_API_URL: https://soilsrevealed.org/api/v1/analysis - GEE_KEY: ${{ secrets.GEE_KEY }} - GOOGLE_ANALYTICS_KEY: UA-179817360-1 - AWS_REGION: ${{ secrets.AWS_REGION }} - AWS_BUCKET_NAME: ${{ secrets.AWS_BUCKET_NAME }} - AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} - AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - AWS_MAX_Z_TILE_STORAGE: 5 - with: - host: ${{ secrets.SSH_HOST }} - key: ${{ secrets.SSH_KEY }} - port: ${{ secrets.SSH_PORT }} - username: ${{ secrets.SSH_USER }} - envs: NODE_PORT,MAPBOX_API_KEY,API_URL,ANALYSIS_API_URL,GEE_KEY,GOOGLE_ANALYTICS_KEY,AWS_REGION,AWS_BUCKET_NAME,AWS_ACCESS_KEY_ID,AWS_SECRET_ACCESS_KEY,AWS_MAX_Z_TILE_STORAGE - script: | - echo '> Source nvm' - export NVM_DIR=~/.nvm - source ~/.nvm/nvm.sh - echo '> Export the path' - export PATH=$PATH:/home/ubuntu/.nvm/versions/node/v12.16.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin - echo '> Kill previous node server' - pm2 stop production - echo '> Open production folder' - cd ~/soils-revealed - echo '> Pull from git' - git fetch origin master - git reset --hard origin/master - echo '> Use correct node version' - nvm install - nvm use - echo '> Install dependencies' - yarn install --frozen-lockfile - echo '> Generate a deployment key' - DEPLOYMENT_KEY=`date +%s` - echo '> Create .env file' - echo -e "PORT=$NODE_PORT\nMAPBOX_API_KEY=$MAPBOX_API_KEY\nAPI_URL=$API_URL\nANALYSIS_API_URL=$ANALYSIS_API_URL\nDEPLOYMENT_KEY=$DEPLOYMENT_KEY\nGOOGLE_ANALYTICS_KEY=$GOOGLE_ANALYTICS_KEY\nAWS_REGION=$AWS_REGION\nAWS_BUCKET_NAME=$AWS_BUCKET_NAME\nAWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID\nAWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY\nAWS_MAX_Z_TILE_STORAGE=$AWS_MAX_Z_TILE_STORAGE" > .env - echo '> Create gee.key.json file' - echo $GEE_KEY > gee.key.json - echo '> Build the app' - yarn build - echo '> Run the server' - pm2 start production diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml deleted file mode 100644 index b102368..0000000 --- a/.github/workflows/staging.yml +++ /dev/null @@ -1,61 +0,0 @@ -name: Staging build - -on: - push: - branches: - - develop - -jobs: - deploy: - runs-on: ubuntu-latest - - steps: - - name: Run SSH commands - # Documentation: https://github.com/marketplace/actions/ssh-remote-commands - uses: appleboy/ssh-action@master - env: - NODE_PORT: 3001 - MAPBOX_API_KEY: pk.eyJ1IjoidG5jc29pbHNjaWVuY2UiLCJhIjoiY2s5Y3dweXg0MDBlZjNkbXE5ZGk4Y294biJ9.nGYVoUKe7Z8MJoi5GwCGjg - API_URL: http://35.233.41.65/user/skydipper/api/v2 - ANALYSIS_API_URL: https://soilsrevealed.org/api/v1/analysis - GEE_KEY: ${{ secrets.GEE_KEY }} - GOOGLE_ANALYTICS_KEY: - AWS_REGION: ${{ secrets.AWS_REGION }} - AWS_BUCKET_NAME: ${{ secrets.AWS_BUCKET_NAME }} - AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} - AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - AWS_MAX_Z_TILE_STORAGE: 5 - with: - host: ${{ secrets.SSH_HOST }} - key: ${{ secrets.SSH_KEY }} - port: ${{ secrets.SSH_PORT }} - username: ${{ secrets.SSH_USER }} - envs: NODE_PORT,MAPBOX_API_KEY,API_URL,ANALYSIS_API_URL,GEE_KEY,GOOGLE_ANALYTICS_KEY,AWS_REGION,AWS_BUCKET_NAME,AWS_ACCESS_KEY_ID,AWS_SECRET_ACCESS_KEY,AWS_MAX_Z_TILE_STORAGE - script: | - echo '> Source nvm' - export NVM_DIR=~/.nvm - source ~/.nvm/nvm.sh - echo '> Export the path' - export PATH=$PATH:/home/ubuntu/.nvm/versions/node/v12.16.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin - echo '> Kill previous node server' - pm2 stop staging - echo '> Open staging folder' - cd ~/soils-revealed-staging - echo '> Pull from git' - git fetch origin develop - git reset --hard origin/develop - echo '> Use correct node version' - nvm install - nvm use - echo '> Install dependencies' - yarn install --frozen-lockfile - echo '> Generate a deployment key' - DEPLOYMENT_KEY=`date +%s` - echo '> Create .env file' - echo -e "PORT=$NODE_PORT\nMAPBOX_API_KEY=$MAPBOX_API_KEY\nAPI_URL=$API_URL\nANALYSIS_API_URL=$ANALYSIS_API_URL\nDEPLOYMENT_KEY=$DEPLOYMENT_KEY\nGOOGLE_ANALYTICS_KEY=$GOOGLE_ANALYTICS_KEY\nAWS_REGION=$AWS_REGION\nAWS_BUCKET_NAME=$AWS_BUCKET_NAME\nAWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID\nAWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY\nAWS_MAX_Z_TILE_STORAGE=$AWS_MAX_Z_TILE_STORAGE" > .env - echo '> Create gee.key.json file' - echo $GEE_KEY > gee.key.json - echo '> Build the app' - yarn build - echo '> Run the server' - pm2 start staging From d58b3c461d1cfee64ac86e30550ef3789d5c628d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= Date: Fri, 28 May 2021 11:27:01 +0200 Subject: [PATCH 3/6] google search verification file added (#31) --- google5dcefa970456a1f5.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 google5dcefa970456a1f5.html diff --git a/google5dcefa970456a1f5.html b/google5dcefa970456a1f5.html new file mode 100644 index 0000000..f01a71b --- /dev/null +++ b/google5dcefa970456a1f5.html @@ -0,0 +1 @@ +google-site-verification: google5dcefa970456a1f5.html From 73e0c7e30aa14b13f5ef42b5a72381377bb31ffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Luena=20Rodr=C3=ADguez?= Date: Sun, 6 Jun 2021 11:50:41 +0200 Subject: [PATCH 4/6] Modal to recruit user (airtable) (#30) * Modal to recruit user (airtable) * airtable: prevent giving a description if 'other' field is not selected * mobile fixes * updates in user recruitment modal * Updated env variable structure * cloudbuild configuration - automatic deployment Co-authored-by: Jorge S. Mendes de Jesus --- .cloudbuild.yaml | 29 +++++ .dockerignore | 2 + .env.default | 2 + README.md | 16 +-- components/explore/component.js | 11 ++ components/forms/radio/index.js | 5 +- components/user-modal/component.js | 95 ++++++++++++++ components/user-modal/content/constants.js | 22 ++++ components/user-modal/content/step1.js | 140 +++++++++++++++++++++ components/user-modal/content/step2.js | 78 ++++++++++++ components/user-modal/index.js | 1 + components/user-modal/style.scss | 65 ++++++++++ package.json | 3 +- run.sh | 17 ++- utils/airtable.js | 35 ++++++ yarn.lock | 28 ++++- 16 files changed, 536 insertions(+), 13 deletions(-) create mode 100644 .cloudbuild.yaml create mode 100644 components/user-modal/component.js create mode 100644 components/user-modal/content/constants.js create mode 100644 components/user-modal/content/step1.js create mode 100644 components/user-modal/content/step2.js create mode 100644 components/user-modal/index.js create mode 100644 components/user-modal/style.scss create mode 100644 utils/airtable.js diff --git a/.cloudbuild.yaml b/.cloudbuild.yaml new file mode 100644 index 0000000..7837d15 --- /dev/null +++ b/.cloudbuild.yaml @@ -0,0 +1,29 @@ +steps: + - id: 'build-image' + name: 'gcr.io/cloud-builders/docker' + args: + - 'build' + - '-t' + - 'eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME:$SHORT_SHA' + - '-t' + - 'eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME:latest' + - '.' + - '-f' + - './Dockerfile' + timeout: 1200s + - id: 'push-to-registry' + name: 'gcr.io/cloud-builders/docker' + args: + - 'push' + - 'eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME' + - id: 'deploy-to-gke' + name: 'gcr.io/cloud-builders/gcloud' + env: + - 'KUBECONFIG=/.kube/config' + entrypoint: 'bash' + args: + - '-c' + - | + gcloud container clusters get-credentials soils-revealed-cluster --project=$PROJECT_ID --zone=europe-west4-a + kubectl set image deployment/$REPO_NAME --namespace=$BRANCH_NAME soils-revealed=eu.gcr.io/$PROJECT_ID/$REPO_NAME/$BRANCH_NAME/$REPO_NAME:$SHORT_SHA + kubectl rollout restart deployment $REPO_NAME --namespace=$BRANCH_NAME diff --git a/.dockerignore b/.dockerignore index 329282c..9eadd8e 100644 --- a/.dockerignore +++ b/.dockerignore @@ -14,3 +14,5 @@ npm-debug.log .editorconfig .dockerignore .env +.Dockerfile +.cloudbuild.yaml diff --git a/.env.default b/.env.default index eafb378..cbda645 100644 --- a/.env.default +++ b/.env.default @@ -9,3 +9,5 @@ AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY= AWS_MAX_Z_TILE_STORAGE= DEPLOYMENT_KEY= +AIRTABLE_API_KEY= +AIRTABLE_USER_ID= diff --git a/README.md b/README.md index 97ab754..033cd36 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,9 @@ Below is a description of each of the keys. | AWS_ACCESS_KEY_ID | Access key ID of the AWS server storing the tiles of the soils layers | | AWS_SECRET_ACCESS_KEY | Secret access key of the AWS server storing the tiles of the soils layers | | AWS_MAX_Z_TILE_STORAGE | Maximum zoom at which tiles generated on-the-fly will be saved in the AWS S3 bucket | +| AIRTABLE_API_KEY | Secret access key for [Airtable](https://airtable.com/) | +| AIRTABLE_USER_ID | Airtable User ID | + ## Deployment @@ -66,19 +69,18 @@ docker run -p3001:3001 --env-file .env soils-revealed:latest /soils-revealed/run ### Google GKE -Public deployment is based on Google Cloud build and Google GKE (Kubernetes). Up on push to `master` or `develop`, the following steps will happen: +Public deployment is based on Google Cloud build and file `.cloudbuild.yaml`. Up on push to `master` or `develop`, the following steps will happen: 1. Github will trigger a Google Cloud run trigger 2. Google cloud will pull the branch content. -3. Docker build will be initicated. -4. After completed Docker image is stored on a private repository. -5. Image will then be deplyed into the soils-revealed cluster. +3. Docker build will be iniciated, using `Dockerfile` and `.cloudbuild.yaml` +4. After completed Docker image is stored on a private repository, using tags `latest` and `$SHORT_SHA` +5. Google Cloud build will update the image on GKE and make a `kubectl rollout restart` 6. GKE contains a specific `ConfigMap` with all .env necessary for deployment. 7. `gee.key.json` is added to the pods using a `ConfigMap` mount + -GKE will implement the available Dockerfile. - -Overall, deploying to either environment takes between 5 to 10 minutes to complete. +Overall, deploying to either environment takes between 5 to 10 minutes to complete. If deployment is not successful GKE will continue implementing the previous deployment. ## Architecture diff --git a/components/explore/component.js b/components/explore/component.js index fe1ba2b..e0a9d70 100644 --- a/components/explore/component.js +++ b/components/explore/component.js @@ -6,6 +6,7 @@ import throttle from 'lodash/debounce'; import { Router } from 'lib/routes'; import { logEvent } from 'utils/analytics'; +import { isFirstVisit } from 'utils/explore'; import { useHasMounted, useDesktop } from 'utils/hooks'; import { toggleBasemap, toggleLabels, toggleRoads } from 'utils/map'; import { @@ -28,6 +29,7 @@ import InfoModal from './info-modal'; import InteractiveFeaturePopup from './interactive-feature-popup'; import DrawBoard from './draw-board'; import MapContainer from './map-container'; +import UserModal from 'components/user-modal'; import './style.scss'; @@ -76,6 +78,14 @@ const Explore = ({ const [interactiveFeatures, setInteractiveFeatures] = useState(null); const [showTour, setShowTour] = useState(false); + // User recruitment modal. This modal should appear just the first time the user + // visits the map section + const [userModalOpen, setUserModalOpen] = useState(isFirstVisit()); + + const handleModalClose = () => { + setUserModalOpen(false); + }; + // When the user clicks the popup's button that triggers its close, the map also receives the // event and it opens a new popup right after // This is a bug of react-map-gl's library @@ -222,6 +232,7 @@ const Explore = ({ className="c-explore" style={isDesktop ? { backgroundColor: BASEMAPS[basemap].backgroundColor } : undefined} > + {isDesktop && ( <> {showTour && } diff --git a/components/forms/radio/index.js b/components/forms/radio/index.js index b8db140..d5302eb 100644 --- a/components/forms/radio/index.js +++ b/components/forms/radio/index.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import './style.scss'; -const Radio = ({ id, name, disabled, checked, onChange, children, className }) => ( +const Radio = ({ id, name, disabled, checked, onChange, children, className, required }) => (
    ); + Radio.propTypes = { id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, diff --git a/components/user-modal/style.scss b/components/user-modal/style.scss index eae02b9..1e9797a 100644 --- a/components/user-modal/style.scss +++ b/components/user-modal/style.scss @@ -63,3 +63,4 @@ } } + diff --git a/utils/explore.js b/utils/explore.js index cba04b6..48c2e24 100644 --- a/utils/explore.js +++ b/utils/explore.js @@ -22,3 +22,26 @@ export const isFirstVisit = () => { return isFirstVisit; }; + +/* This function tracks the first time the app shows the recruitment modal to users */ + +export const isModalShown = () => { + let modalShown = true; + + try { + const storedValue = localStorage.getItem('showUserRecruitmentModal'); + modalShown = storedValue !== 'false'; + } catch (e) { + console.error('Unable to access the localStorage.'); + } + + if (modalShown) { + try { + localStorage.setItem('showUserRecruitmentModal', 'false'); + } catch (e) { + console.error('Unable to access the localStorage.'); + } + } + + return modalShown; +};