Add Dashboard app (#246)

Add Dashboard app

Add GitHub workflows
Add HTTP API transport layer
Add Dockerfile with web server

.github/workflows/build.yml

@@ -0,0 +1,27 @@
+name: Lint & build
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build:prod

.github/workflows/release.yml

@@ -0,0 +1,104 @@
+name: Publish release
+
+# Controls when the workflow will run
+on:
+  workflow_dispatch:
+  release:
+    types: [released]
+
+# permissions are needed if pushing to ghcr.io
+permissions:
+  packages: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: npm
+          node-version-file: ".nvmrc"
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build:prod:web
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: build
+          path: dist/
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: nginx-config
+          path: nginx.conf.template
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: dockerfile
+          path: Dockerfile
+
+  download:
+    name: Build and push Docker image
+    needs: [build]
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: jaeger-build
+          path: build
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: nginx-config
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: dockerfile
+
+      # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_DIGMAAI_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_DIGMAAI_TOKEN }}
+
+      - name: Docker meta
+        id: metadata # you'll use this in the next step
+        uses: docker/metadata-action@v4
+        with:
+          # list of Docker images to use as base name for tags
+          images: digmaai/digma-ui
+          # Docker tags based on the following events/attributes
+          tags: |
+            type=schedule
+            type=ref,event=branch
+            type=ref,event=pr
+            type=match,pattern=v(.*),group=1
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
+            # set latest tag for main branch
+            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.metadata.outputs.tags }}
+          labels: ${{ steps.metadata.outputs.labels }}

.storybook/preview-body.html

@@ -16,6 +16,9 @@
   window.assetsRefreshInterval;
   window.assetsSearch = true;
 
+  window.dashboardEnvironment = "SAMPLE_ENV";
+  window.dashboardRefreshInterval;
+
   window.documentationPage = "run-digma-with-docker";
 
   window.insightsRefreshInterval;

Dockerfile

@@ -0,0 +1,7 @@
+FROM nginx:1.25.0
+
+COPY ./dist/ /usr/share/nginx/html/
+COPY ./nginx.conf.template /etc/nginx/conf.d/default.conf.template
+RUN rm /usr/share/nginx/html/index.html
+
+CMD ["/bin/sh" , "-c" , "envsubst '${PLUGIN_API_URL}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"]

assets/assets/index.ejs → assets/index.ejs

@@ -28,10 +28,9 @@
       window.isDigmaEngineRunning;
       window.isDockerInstalled;
       window.isDockerComposeInstalled;
-
-      window.assetsRefreshInterval;
-      window.assetsSearch;
+      <% for (var i = 0; i < environmentVariables.length; i++) { %>
+      window.<%= environmentVariables[i] %>;<% } %>
     </script>
-    <script src="/index.js"></script>
+    <script src="./index.js"></script>
   </body>
 </html>

assets/troubleshooting/index.ejs → assets/index.web.ejs

@@ -15,20 +15,10 @@
     <div id="root"></div>
     <!-- Environment variables -->
     <script>
-      window.digmaApiUrl;
-      window.theme;
-      window.platform;
-      window.ide;
-      window.mainFont;
-      window.codeFont;
-      window.isJaegerEnabled;
-      window.userEmail;
-      window.isObservabilityEnabled;
-      window.isDigmaEngineInstalled;
-      window.isDigmaEngineRunning;
-      window.isDockerInstalled;
-      window.isDockerComposeInstalled;
+      window.platform = "Web";
+      <% for (var i = 0; i < environmentVariables.length; i++) { %>
+      window.<%= environmentVariables[i] %>;<% } %>
     </script>
-    <script src="/index.js"></script>
+    <script src="./index.js"></script>
   </body>
 </html>

nginx.conf.template

@@ -0,0 +1,9 @@
+server {
+  listen 80;
+  root /usr/share/nginx/html;
+  absolute_redirect off;
+
+  location /api/ {
+    proxy_pass ${PLUGIN_API_URL}/;
+  }
+}