Feature/docker (#20)

Add GitHub workflow for building the Docker image

---------

Signed-off-by: Shay Keren <[email protected]>
Co-authored-by: Shay Keren <[email protected]>

Author: kshmidt-digma

.dockerignore

@@ -0,0 +1,103 @@
+name: Publish Digma 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 Jaeger UI
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: '16'
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
+      - run: yarn build
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: jaeger-build
+          path: packages/jaeger-ui/build/
+
+      - 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/jaeger-ui
+          # Docker tags based on the following events/attributes
+          tags: |
+            type=schedule
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
+            # set latest tag for digma branch
+            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'digma') }}
+
+      - 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 }}

.github/workflows/release-digma.yml

@@ -1,23 +1,6 @@
-FROM node:16.20.0 AS build
-
-WORKDIR /app
-
-COPY package.json ./
-COPY yarn.lock ./
-COPY packages/jaeger-ui/package.json ./packages/jaeger-ui/
-COPY . .
-RUN yarn install --frozen-lockfile
-# RUN yarn prettier-lint
-# RUN yarn eslint 
-
-WORKDIR /app/packages/jaeger-ui
-
-# RUN yarn test
-RUN yarn build
-
 FROM nginx:1.25.0
 
-COPY --from=build /app/packages/jaeger-ui/build/ /usr/share/nginx/html/
+COPY ./build/ /usr/share/nginx/html/
 COPY ./nginx.conf.template /etc/nginx/conf.d/default.conf.template
 
 CMD ["/bin/sh" , "-c" , "envsubst '${JAEGER_QUERY_URL}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"]

Dockerfile

@@ -43,7 +43,7 @@
     "coverage": "lerna run coverage",
     "eslint": "eslint --cache 'scripts/*.{js,jsx,ts,tsx}' 'packages/*/src/**/*.{js,jsx,ts,tsx}' 'packages/*/*.{js,jsx,ts,tsx}'",
     "fmt": "yarn prettier",
-    "lint": "npm-run-all -ln --parallel prettier-lint tsc-lint eslint check-license",
+    "lint": "npm-run-all -ln --parallel prettier-lint tsc-lint eslint",
     "prepare": "lerna run --stream --sort prepublishOnly",
     "prettier": "prettier --write '{.,scripts}/*.{js,jsx,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(layout.worker.bundled|react-vis).{css,js,jsx,json,md,ts,tsx}' 'packages/*/*.{css,js,jsx,json,md,ts,tsx}'",
     "prettier-lint": "prettier --list-different '{.,scripts}/*.{js,jsx,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(layout.worker.bundled|react-vis).{css,js,jsx,json,md,ts,tsx}' 'packages/*/*.{css,js,jsx,json,md,ts,tsx}'",

package.json

@@ -77,7 +77,9 @@ function getJSON(url, options = {}) {
   });
 }
 
-export const DEFAULT_API_ROOT = isString(window.apiBaseUrl) ? `${window.apiBaseUrl}/api/` : prefixUrl('/api/');
+export const DEFAULT_API_ROOT = isString(window.apiBaseUrl)
+  ? `${window.apiBaseUrl}/api/`
+  : prefixUrl('/api/');
 export const ANALYTICS_ROOT = prefixUrl('/analytics/');
 export const DEFAULT_DEPENDENCY_LOOKBACK = moment.duration(1, 'weeks').asMilliseconds();
 

packages/jaeger-ui/src/api/jaeger.js

@@ -58,7 +58,7 @@ export default class JaegerUIApp extends Component {
     // Navigate to URL provided on app start
     if (isString(window.initialRoutePath) && window.initialRoutePath) {
       const urlToNavigate = window.initialRoutePath;
-      window.initialRoutePath = "";
+      window.initialRoutePath = '';
       history.push(urlToNavigate);
     }
 

packages/jaeger-ui/src/components/App/index.jsx

@@ -47,22 +47,22 @@ const logoUrl = getStaticAssetPath(JaegerLogo);
 // Sanitize query params to filter out ones provided by VS Code
 const sanitizeQueryParams = params => {
   const VS_CODE_PARAMS = [
-    "id",
-    "origin",
-    "swVersion",
-    "extensionId",
-    "platform",
-    "vscode-resource-base-authority",
-    "parentOrigin"
+    'id',
+    'origin',
+    'swVersion',
+    'extensionId',
+    'platform',
+    'vscode-resource-base-authority',
+    'parentOrigin',
   ];
 
   const filteredParams = {};
 
   Object.keys(params).forEach(key => {
     if (!VS_CODE_PARAMS.includes(key)) {
-      filteredParams[key] = params[key]
+      filteredParams[key] = params[key];
     }
-  })
+  });
 
   return filteredParams;
 };

packages/jaeger-ui/src/components/SearchTracePage/index.jsx

@@ -163,7 +163,7 @@ export default function ErrorMessage({
     );
   }
 
-  if (error.message.includes('Failed to fetch')) {
+  if (error.message.includes('Failed to fetch') || error.httpStatus === 502) {
     const isUserDefinedJaegerQueryURL = window.isUserDefinedJaegerQueryURL === true;
     return (
       <DigmaErrorMessage

packages/jaeger-ui/src/components/common/ErrorMessage.tsx

@@ -52,4 +52,4 @@ limitations under the License.
 
 .LoadingIndicator.is-medium {
   font-size: 1.5em;
-}
+}

packages/jaeger-ui/src/components/common/LoadingIndicator.css

@@ -20,10 +20,10 @@ import { getEmbeddedState, VERSION_0 } from '../utils/embedded-url';
 export default function embeddedConfig(state: EmbeddedState | undefined) {
   if (state === undefined) {
     let search = _get(window, 'location.search');
-    
+
     const params = new URLSearchParams(search);
-    if (typeof window.embeddedMode === "boolean" && window.embeddedMode && !params.get("uiEmbed")) {
-      params.set("uiEmbed", VERSION_0);
+    if (typeof window.embeddedMode === 'boolean' && window.embeddedMode && !params.get('uiEmbed')) {
+      params.set('uiEmbed', VERSION_0);
       search = params.toString();
     }