Tt 513 create ci/cd pipeline in timer tracker UI to deploy changes for both environments

.github/workflows/time-tracker-ui-cd-prod.yml

@@ -0,0 +1,54 @@
+name: time-tracker-ui-cd-prod
+
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  cd:
+    runs-on: ubuntu-latest
+    env:
+        TF_WORKSPACE: prod
+        WORKING_DIR: infrastructure/
+        ARM_CLIENT_ID: ${{secrets.TF_ARM_CLIENT_ID}}
+        ARM_CLIENT_SECRET: ${{secrets.TF_ARM_CLIENT_SECRET}}
+        ARM_SUBSCRIPTION_ID: ${{secrets.TF_ARM_SUBSCRIPTION_ID}}
+        ARM_TENANT_ID: ${{secrets.TF_ARM_TENANT_ID}}
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Get the release_version
+      run: |
+        echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+        echo $RELEASE_VERSION
+
+    - name: Login to azure
+      uses: Azure/login@v1
+      with:
+        creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+    - name: Build the docker image
+      run: make build
+
+    - name: Publish docker image to prod azure container registry
+      run: |
+        make login publish acr=timetrackerserviceprodregistry image_tag=$RELEASE_VERSION
+
+    - name: Setup terraform
+      uses: hashicorp/setup-terraform@v1
+
+    - name: Authenticate with the TF modules repository
+      uses: webfactory/[email protected]
+      with:
+        ssh-private-key: ${{ secrets.INFRA_TERRAFORM_MODULES_SSH_PRIV_KEY }}
+
+    - name: Terraform Init
+      working-directory: ${{ env.WORKING_DIR }}
+      run: terraform init
+
+    - name: Terraform Apply
+      working-directory: ${{ env.WORKING_DIR }}
+      run: terraform apply -lock=false -var-file="${{ env.TF_WORKSPACE }}.tfvars" -var "image_tag=$RELEASE_VERSION" -auto-approve

.github/workflows/time-tracker-ui-cd-stage.yml

@@ -0,0 +1,53 @@
+name: time-tracker-ui-cd-stage
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  cd:
+    runs-on: ubuntu-latest
+    env:
+        TF_WORKSPACE: stage
+        WORKING_DIR: infrastructure/
+        ARM_CLIENT_ID: ${{secrets.TF_ARM_CLIENT_ID}}
+        ARM_CLIENT_SECRET: ${{secrets.TF_ARM_CLIENT_SECRET}}
+        ARM_SUBSCRIPTION_ID: ${{secrets.TF_ARM_SUBSCRIPTION_ID}}
+        ARM_TENANT_ID: ${{secrets.TF_ARM_TENANT_ID}}
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Get the release_version
+      run: |
+        echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+        echo $RELEASE_VERSION
+
+    - name: Login to azure
+      uses: Azure/login@v1
+      with:
+        creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+    - name: Build the docker image
+      run: make build
+
+    - name: Publish docker image to stage azure container registry
+      run: |
+        make login publish acr=timetrackerservicestageregistry image_tag=$RELEASE_VERSION
+
+    - name: Setup terraform
+      uses: hashicorp/setup-terraform@v1
+
+    - name: Authenticate with the TF modules repository
+      uses: webfactory/[email protected]
+      with:
+        ssh-private-key: ${{ secrets.INFRA_TERRAFORM_MODULES_SSH_PRIV_KEY }}
+
+    - name: Terraform Init
+      working-directory: ${{ env.WORKING_DIR }}
+      run: terraform init
+
+    - name: Terraform Apply
+      working-directory: ${{ env.WORKING_DIR }}
+      run: terraform apply -lock=false -var-file="${{ env.TF_WORKSPACE }}.tfvars" -var "image_tag=$RELEASE_VERSION" -auto-approve

.github/workflows/time-tracker-ui-ci.yml

@@ -0,0 +1,137 @@
+name: time-tracker-ui-ci
+
+on:
+  push:
+    branches:
+    - "**"
+
+  pull_request:
+    branches:
+    - "**"
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    env:
+        WORKING_DIR: infrastructure/
+        DB_CONNECTION:  ${{ secrets.DB_CONNECTION }}
+        ARM_CLIENT_ID: ${{secrets.TF_ARM_CLIENT_ID}}
+        ARM_CLIENT_SECRET: ${{secrets.TF_ARM_CLIENT_SECRET}}
+        ARM_SUBSCRIPTION_ID: ${{secrets.TF_ARM_SUBSCRIPTION_ID}}
+        ARM_TENANT_ID: ${{secrets.TF_ARM_TENANT_ID}}
+    strategy:
+      max-parallel: 5
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Authenticate with the TF modules repository
+      uses: webfactory/[email protected]
+      with:
+        ssh-private-key: ${{ secrets.INFRA_TERRAFORM_MODULES_SSH_PRIV_KEY }}
+
+    - name: build docker
+      run: make build
+
+    - name: Inject Secrets
+      env:
+        SCOPES: ${{ secrets.SCOPES }}
+        CLIENT_ID: ${{ secrets.CLIENT_ID }}
+        AUTHORITY: ${{ secrets.AUTHORITY }}
+        STACK_EXCHANGE_ID: ${{ secrets.STACK_EXCHANGE_ID }}
+        STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STACK_EXCHANGE_ACCESS_TOKEN }}
+        AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING }}
+      run: |
+        chmod +x ./scripts/populate-keys.sh
+        sh ./scripts/populate-keys.sh
+
+    - name: Running tests
+      run: |
+        chmod -R 777 ./$home
+        make test
+    - name: Generate coverage report
+      env:
+        CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      run: bash <(curl -s https://codecov.io/bash)
+
+    - name: Setup terraform
+      uses: hashicorp/setup-terraform@v1
+
+    - name: 'Terraform Init'
+      id: init
+      working-directory: ./${{ env.WORKING_DIR }}
+      run: terraform init
+
+    - name: 'Terraform validate'
+      id: validate
+      working-directory: ./${{ env.WORKING_DIR }}
+      run: terraform validate
+
+    - name: Terraform Plan Stage
+      id: plan-stage
+      run: terraform plan -var-file=${{ env.TF_WORKSPACE }}.tfvars -var image_tag=latest -no-color
+      continue-on-error: true
+      working-directory: ./${{ env.WORKING_DIR }}
+      env:
+        TF_WORKSPACE: stage
+
+    - name: Terraform Plan Prod
+      id: plan-prod
+      run: terraform plan -var-file=${{ env.TF_WORKSPACE }}.tfvars -var image_tag=latest -no-color
+      continue-on-error: true
+      working-directory: ./${{ env.WORKING_DIR }}
+      env:
+        TF_WORKSPACE: prod
+
+    - name: Update Pull Request with Stage Plan
+      uses: actions/[email protected]
+      if: github.event_name == 'pull_request'
+      env:
+        PLAN: "terraform\n${{ steps.plan-stage.outputs.stdout }}"
+        TF_WORKSPACE: stage
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          const output = `#### [${{ env.WORKING_DIR }}][${{ env.TF_WORKSPACE }}] Terraform Plan 📖 \`${{ steps.plan-stage.outcome }}\`
+          <details><summary>Show Plan</summary>
+          \`\`\`\n
+          ${process.env.PLAN}
+          \`\`\`
+          </details>
+          *Pusher: @${{ github.actor }}, Action: \`${{ github.event_name }}\`*`;
+          github.issues.createComment({
+            issue_number: context.issue.number,
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            body: output
+          })
+
+    - name: Update Pull Request with Prod Plan
+      uses: actions/[email protected]
+      if: github.event_name == 'pull_request'
+      env:
+        PLAN: "terraform\n${{ steps.plan-prod.outputs.stdout }}"
+        TF_WORKSPACE: prod
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          const output = `#### [${{ env.WORKING_DIR }}][${{ env.TF_WORKSPACE }}] Terraform Plan 📖 \`${{ steps.plan-prod.outcome }}\`
+          <details><summary>Show Plan</summary>
+          \`\`\`\n
+          ${process.env.PLAN}
+          \`\`\`
+          </details>
+          *Pusher: @${{ github.actor }}, Action: \`${{ github.event_name }}\`*`;
+          github.issues.createComment({
+            issue_number: context.issue.number,
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            body: output
+          })
+    - name: Terraform Plan Stage Status
+      if: steps.plan-stage.outcome == 'failure'
+      run: exit 1
+
+    - name: Terraform Plan Prod Status
+      if: steps.plan-prod.outcome == 'failure'
+      run: exit 1

Dockerfile

@@ -2,13 +2,42 @@ FROM node:14 AS development
 
 ENV USERNAME timetracker
 ENV HOME /home/${USERNAME}
+ENV CHROME_BIN /opt/google/chrome/google-chrome
+#Essential tools and xvfb
+RUN apt-get update && apt-get install -y \
+    software-properties-common \
+    unzip \
+    curl \
+    wget \
+    xvfb
+
+#Chrome browser to run the tests
+ARG CHROME_VERSION=65.0.3325.181
+RUN curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add \
+      && wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
+      && dpkg -i google-chrome-stable_current_amd64.deb || true
+RUN apt-get install -y -f \
+      && rm -rf /var/lib/apt/lists/*
+
+#Disable the SUID sandbox so that chrome can launch without being in a privileged container
+RUN dpkg-divert --add --rename --divert /opt/google/chrome/google-chrome.real /opt/google/chrome/google-chrome \
+        && echo "#! /bin/bash\nexec /opt/google/chrome/google-chrome.real --no-sandbox --disable-setuid-sandbox \"\$@\"" > /opt/google/chrome/google-chrome \
+        && chmod 755 /opt/google/chrome/google-chrome
+
+#Chrome Driver
+ARG CHROME_DRIVER_VERSION=2.37
+RUN mkdir -p /opt/selenium \
+        && curl http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -o /opt/selenium/chromedriver_linux64.zip \
+        && cd /opt/selenium; unzip /opt/selenium/chromedriver_linux64.zip; rm -rf chromedriver_linux64.zip; ln -fs /opt/selenium/chromedriver /usr/local/bin/chromedriver;
 
 RUN useradd -ms /bin/bash ${USERNAME}
 
 WORKDIR ${HOME}/time-tracker-ui
 COPY . .
 RUN rm -f .env
 RUN chown ${USERNAME}:${USERNAME} -R ${HOME}/time-tracker-ui
+RUN chmod -R 777 ${HOME}/time-tracker-ui
+
 
 USER ${USERNAME}
 RUN npm cache clean --force && npm install
@@ -37,12 +66,12 @@ RUN chown -R ${USERNAME}:${USERNAME} /var/cache/nginx && \
     chown -R ${USERNAME}:${USERNAME} /etc/nginx/conf.d
 RUN touch /var/run/nginx.pid && chown -R ${USERNAME}:${USERNAME} /var/run/nginx.pid
 
-# FIXME: Actually if we can deploy to azure in port 80 we need a root user 
-# Maybe we can refactor this dockerfile to use root user directly this is not a good approach y 
-# security terms. It's a good practice to have rootless in containers so for this 
-# we can to refactor this dockerfile and the terraform module to deploy in other ports because 
+# FIXME: Actually if we can deploy to azure in port 80 we need a root user
+# Maybe we can refactor this dockerfile to use root user directly this is not a good approach y
+# security terms. It's a good practice to have rootless in containers so for this
+# we can to refactor this dockerfile and the terraform module to deploy in other ports because
 # Ports below 1024 needs root permisions.
- 
+
 # USER ${USERNAME}
 
 EXPOSE 80

Makefile

@@ -39,9 +39,14 @@ remove: ## Delete container timetracker_ui.
 	docker-compose down --volumes --remove-orphans --rmi local
 
 .PHONY: test
-test: ## Run all tests on docker container timetracker_ui.
-	docker-compose --env-file ./.env up -d
-	docker exec -it timetracker_ui bash -c "npm run test"
+test: ## Run all tests on docker container timetracker_ui at the CLI.
+	docker-compose -f docker-compose.yml --env-file ./.env up -d
+	docker exec timetracker_ui bash -c "npm run ci-test"
+
+.PHONY: testdev
+testdev: ## Run all tests on docker container timetracker_ui at the Dev
+	docker-compose -f docker-compose.yml -f docker-compose.dev.yml --env-file ./.env up -d
+	docker exec timetracker_ui bash -c "npm run ci-test"
 
 .PHONY: publish
 publish: require-acr-arg require-image_tag-arg ## Upload a docker image to the stage azure container registry acr=<name_of_the_azure_container_registry> image_tag=<tag_for_the_image>
@@ -66,13 +71,13 @@ remove_prod: ## Delete container timetracker_ui_prod.
 	docker rm timetracker_ui_prod
 
 .PHONY: publish_prod
-publish_prod: require-acr-arg require-image_tag-arg ## Upload a docker image to the prod azure container registry acr=<name_of_the_azure_container_registry> image_tag=<tag_for_the_image>
+publish_prod: ## Upload a docker image to the prod azure container registry acr=<name_of_the_azure_container_registry> image_tag=<tag_for_the_image>
 	docker tag timetracker_ui_prod:latest $(acr).azurecr.io/timetracker_ui:$(image_tag)
 	docker push $(acr).azurecr.io/timetracker_ui:$(image_tag)
 
 .PHONY: login
 login: ## Login in respository of docker images.
-	az acr login --name $(container_registry)
+	az acr login --name $(acr)
 
 .PHONY: release
 release: require-VERSION-arg require-COMMENT-arg ## Creates an pushes a new tag.

docker-compose.dev.yml

@@ -0,0 +1,13 @@
+version: '3.9'
+services:
+  time-tracker-ui:
+    user: root
+    volumes:
+      - ./src:/home/timetracker/time-tracker-ui/src/
+      - ./scripts:/home/timetracker/time-tracker-ui/scripts/
+      - ./e2e:/home/timetracker/time-tracker-ui/e2e/
+      - ./coverage:/home/timetracker/time-tracker-ui/coverage
+      - ./angular.json:/home/timetracker/time-tracker-ui/angular.json
+      - ./karma.conf.js:/home/timetracker/time-tracker-ui/karma.conf.js
+      - ./package.json:/home/timetracker/time-tracker-ui/package.json
+      - ./webpack.config.js:/home/timetracker/time-tracker-ui/webpack.config.js

docker-compose.yml

@@ -11,6 +11,7 @@ services:
       - 4200:4200
       - 9876:9876
     environment:
+      CHROME_BIN: /opt/google/chrome/google-chrome
       AUTHORITY: ${AUTHORITY}
       CLIENT_ID: ${CLIENT_ID}
       SCOPES: ${SCOPES}
@@ -20,12 +21,4 @@ services:
       AUTHORITY_JSON: ${AUTHORITY_JSON}
       CLIENT_ID_JSON: ${CLIENT_ID_JSON}
       SCOPES_JSON: ${SCOPES_JSON}
-    volumes:
-      - ./src:/home/timetracker/time-tracker-ui/src/
-      - ./scripts:/home/timetracker/time-tracker-ui/scripts/
-      - ./e2e:/home/timetracker/time-tracker-ui/e2e/
-      - ./coverage:/home/timetracker/time-tracker-ui/coverage
-      - ./angular.json:/home/timetracker/time-tracker-ui/angular.json
-      - ./karma.conf.js:/home/timetracker/time-tracker-ui/karma.conf.js
-      - ./package.json:/home/timetracker/time-tracker-ui/package.json
-      - ./webpack.config.js:/home/timetracker/time-tracker-ui/webpack.config.js
+