adding dashboard nextjs app

.github/workflows/dashboard-deployment.yml

@@ -0,0 +1,166 @@
+name: Dashboard Deployment
+on:
+  push:
+    branches:
+      - 'main'
+    paths:
+      - 'dashboard/**'
+      - '!dashboard/**.md'
+      - '.github/workflows/dashboard-deployment.yml'
+
+env:
+  CONTAINER_REGISTRY_LOCATION: europe-west1
+  CONTAINER_REGISTRY: cr-webapps
+  CONTAINER_NAME: dashboard
+  CR_LOCATION: europe-west1
+  CR_SERVICE: dashboard
+
+jobs:
+  lint-typecheck:
+    name: Lint & Type Check
+    runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: read
+      contents: read
+    defaults:
+      run:
+        working-directory: dashboard
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+      - name: Setup Nodejs Environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+          cache-dependency-path: 'dashboard/yarn.lock'
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile
+      - name: Lint
+        run: yarn lint:nofix --output-file eslint_report.json --format json
+        continue-on-error: true
+      - name: Type Check
+        run: yarn tsc > typescript.log
+        continue-on-error: true
+      - name: Annotate Code
+        uses: DerLev/eslint-annotations@v1
+        with:
+          eslint-report: dashboard/eslint_report.json
+          typescript-log: dashboard/typescript.log
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          error-on-warn: true
+          status-check-name: Annotations
+          fail-in-pr: false
+          add-notice-with-url: false
+
+  delete-outdated-ar:
+    name: Delete outdated Container Images from Artifact Registry
+    runs-on: ubuntu-latest
+    needs: lint-typecheck
+    permissions:
+      id-token: write
+    steps:
+      - name: Prevent Auth from printing warning
+        run: echo "Shut up!" > dont_warn.txt
+      - name: Authenticate to Google Cloud
+        id: auth
+        uses: google-github-actions/auth@v1
+        with:
+          workload_identity_provider: ${{ secrets.GCP_WIF_PROVIDER }}
+          service_account: ${{ secrets.GCP_SA_EMAIL }}
+      - name: Cleanup Artifact Registry
+        uses: docker://europe-docker.pkg.dev/gcr-cleaner/gcr-cleaner/gcr-cleaner-cli
+        with:
+          args: >-
+            -repo=${{ env.CONTAINER_REGISTRY_LOCATION }}-docker.pkg.dev/${{ vars.GCP_PROJECT_ID }}/${{ env.CONTAINER_REGISTRY }}/${{ env.CONTAINER_NAME }}
+            -keep=6
+            -tag-filter-any=.*
+  
+  delete-outdated-cr:
+    name: Delete outdated Cloud Run Revisions
+    runs-on: ubuntu-latest
+    needs: lint-typecheck
+    permissions:
+      id-token: write
+    steps:
+      - name: Authenticate to Google Cloud
+        id: auth
+        uses: google-github-actions/auth@v1
+        with:
+          workload_identity_provider: ${{ secrets.GCP_WIF_PROVIDER }}
+          service_account: ${{ secrets.GCP_SA_EMAIL }}
+          token_format: access_token
+          access_token_lifetime: 60s
+          create_credentials_file: false
+      - name: Only leave the 2 most recent Revisions
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const response = await fetch("https://run.googleapis.com/v2/projects/${{ vars.GCP_PROJECT_ID }}/locations/${{ env.CR_LOCATION }}/services/${{ env.CR_SERVICE }}/revisions", { headers: { 'Authorization': "Bearer ${{ steps.auth.outputs.access_token }}" } })
+              .then(res => res.json());
+            
+            const toBeDeleted = response.revisions.sort((a, b) => (new Date(b.createTime) - new Date(a.createTime))).slice(2);
+            const deletionPromises = [];
+            for(const revision of toBeDeleted) {
+              deletionPromises.push(fetch(`https://run.googleapis.com/v2/${revision.name}`, { method: 'DELETE', headers: { 'Authorization': "Bearer ${{ steps.auth.outputs.access_token }}" } }));
+            }
+            
+            await Promise.all(deletionPromises);
+  
+  build-deploy:
+    name: Build Container & Deploy on Cloud Run
+    runs-on: ubuntu-latest
+    needs: [delete-outdated-ar, delete-outdated-cr]
+    permissions:
+      contents: read
+      id-token: write
+    environment: Production Dashboard
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Authenticate to Google Cloud
+        id: auth
+        uses: google-github-actions/auth@v1
+        with:
+          workload_identity_provider: ${{ secrets.GCP_WIF_PROVIDER }}
+          service_account: ${{ secrets.GCP_SA_EMAIL }}
+          token_format: access_token
+          access_token_lifetime: 600s
+      - name: Login to GCP Artifact Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.CONTAINER_REGISTRY_LOCATION }}-docker.pkg.dev
+          username: oauth2accesstoken
+          password: ${{ steps.auth.outputs.access_token }}
+      - name: Extract Metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.CONTAINER_REGISTRY_LOCATION }}-docker.pkg.dev/${{ vars.GCP_PROJECT_ID }}/${{ env.CONTAINER_REGISTRY }}/${{ env.CONTAINER_NAME }}
+          tags: |
+            type=raw,value=latest
+            type=sha,prefix=,format=long
+      - name: Build and Push Docker Image
+        uses: docker/build-push-action@v4
+        with:
+          context: dashboard/
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha,scope=$GITHUB_REF_NAME-dashboard
+          cache-to: type=gha,mode=max,scope=$GITHUB_REF_NAME-dashboard
+      - name: Set up Cloud SDK
+        uses: google-github-actions/setup-gcloud@v1
+      - name: Get short commit SHA
+        id: commit_sha
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const sha = "${{ github.sha }}"
+            const shortSha = sha.substring(0, 7)
+            core.setOutput('shortSha', shortSha)
+      - name: Create new Cloud Run Revision
+        run: gcloud run deploy ${{ env.CR_SERVICE }} --image ${{ env.CONTAINER_REGISTRY_LOCATION }}-docker.pkg.dev/${{ vars.GCP_PROJECT_ID }}/${{ env.CONTAINER_REGISTRY }}/${{ env.CONTAINER_NAME }}:${{ github.sha }} --region ${{ env.CR_LOCATION }} --tag sha-${{ steps.commit_sha.outputs.shortSha }}

dashboard/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

dashboard/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": 0,
+    "no-console": 1,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "react-hooks/rules-of-hooks": 0
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "unused-imports"
+  ],
+  "parser": "@typescript-eslint/parser"
+}

dashboard/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

dashboard/.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+.next/

dashboard/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

dashboard/Dockerfile

@@ -0,0 +1,54 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+# RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* ./
+RUN yarn --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME localhost
+
+CMD ["node", "server.js"]

dashboard/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.