Allow to use custom Jaeger UI distributive

.github/workflows/update-jaeger.yml → .github/workflows/update-dependencies.yml

@@ -1,14 +1,14 @@
-name: Update Jaeger dependencies
+name: Update dependencies
 
 on:
   repository_dispatch:
-    types: [update-jaeger]
+    types: [update-dependencies]
 
 jobs:
-  update-jaeger:
+  update-dependencies:
     runs-on: ubuntu-latest
     env:
-      BRANCH_NAME: update-jaeger
+      BRANCH_NAME: update-dependencies
     steps:
       - uses: actions/checkout@v4
         with:
@@ -22,7 +22,7 @@ jobs:
       - name: Update dependencies.json
         run: |
           echo '${{ toJson(github.event.client_payload) }}' > ./dependencies_diff.json
-          npm run update-jaeger
+          npm run update-dependencies
 
       - name: Commit, push changes and create PR
         env:
@@ -32,6 +32,6 @@ jobs:
           git config user.email "github-actions[bot]@users.noreply.github.com"
           git checkout -b ${{ env.BRANCH_NAME }}
           git add dependencies.json
-          git commit -m "Update Jaeger dependencies"
+          git commit -m "Update dependencies"
           git push origin ${{ env.BRANCH_NAME }}
           gh pr create -f -B main

.gitignore

@@ -4,4 +4,5 @@ jaeger-ui/
 node_modules/
 storybook-static/
 .DS_Store
-.eslintcache
+.env
+.eslintcache

.storybook/preview.tsx

@@ -1,5 +1,4 @@
-import type { Preview } from "@storybook/react";
-import { StoryFn } from "@storybook/react";
+import type { Preview, StoryFn } from "@storybook/react";
 // TODO: remove React import due to new JSX transform
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { useEffect, useState } from "react";
@@ -11,7 +10,7 @@ import {
 } from "../src/api";
 import { App, THEMES } from "../src/components/common/App";
 import { dispatcher } from "../src/dispatcher";
-import { Theme } from "../src/globals";
+import type { Theme } from "../src/globals";
 
 const preview: Preview = {
   decorators: [

.vscode/extensions.json

@@ -4,8 +4,8 @@
     "davidanson.vscode-markdownlint",
     "esbenp.prettier-vscode",
     "Orta.vscode-jest",
+    "streetsidesoftware.code-spell-checker",
     "stylelint.vscode-stylelint",
-    "styled-components.vscode-styled-components",
-    "streetsidesoftware.code-spell-checker"
+    "styled-components.vscode-styled-components"
   ]
 }

.vscode/settings.json

@@ -1,10 +1,4 @@
 {
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": "explicit"
-  },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "stylelint.validate": ["typescript"],
   "cSpell.words": [
     "borderless",
     "checkmark",
@@ -22,5 +16,12 @@
     "undismiss",
     "zustand"
   ],
-  "jest.runMode": "on-demand"
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "jest.runMode": "on-demand",
+  "stylelint.validate": ["typescript"],
+  "typescript.preferences.preferTypeOnlyAutoImports": true
 }

README.md

@@ -1,22 +1,47 @@
 # Digma UI
 
-## Deployment
-
 Install dependencies:
 
 ```shell
 npm ci
 ```
 
+Run linter checks:
+
+```shell
+npm run lint
+```
+
+Run tests:
+
+```shell
+npm run test
+```
+
 Build package:
 
 ```shell
-npm run build:prod
+npm run build:{platform}:prod
 ```
 
-Build of the package will be in the `dist` directory
+Supported `platform` values:
+
+- `jetbrains`
+- `web`
+
+Build of the package will be in the `./dist` directory
+
+## Jaeger UI
+
+The Digma UI distributive includes a [Digma fork of Jaeger UI](https://github.com/digma-ai/jaeger-ui). You can find the linked version in the [./dependencies.json](./dependencies.json) file.
+
+To use a custom build of Jaeger UI during development, create a `.env` file in the root of this repository and add the following line:
+
+```env
+JAEGER_UI_PATH=path/to/jaeger-ui/dist
+```
 
-### Storybook
+## Storybook
 
 ```shell
 npm run storybook

apps.ts

@@ -61,7 +61,7 @@ type AppData = Record<
 export interface WebpackEnv {
   WEBPACK_BUNDLE: true;
   WEBPACK_BUILD: true;
-  platform?: string;
-  compress?: boolean;
-  ["zip-filename-format"]?: string;
+  PLATFORM?: string;
+  COMPRESS?: boolean;
+  ["ZIP_FILE_FORMAT"]?: string;
 }

eslint.config.mjs

@@ -19,6 +19,9 @@ export default tseslint.config(
         tsconfigRootDir: import.meta.dirname,
         ecmaVersion: 2022
       }
+    },
+    rules: {
+      "@typescript-eslint/consistent-type-imports": "error"
     }
   },
   {

package.json

@@ -13,19 +13,19 @@
     "storybook": "storybook dev -p 6006",
     "start": "npm run storybook",
     "build-storybook": "storybook build",
-    "download-jaeger-ui": "node --experimental-transform-types ./scripts/download-jaeger-ui.mts --output jaeger-ui",
-    "update-jaeger": "node --experimental-transform-types ./scripts/update-jaeger.mts",
-    "prebuild": "rimraf dist && npm run download-jaeger-ui",
+    "get-jaeger-ui": "node --experimental-transform-types ./scripts/get-jaeger-ui.mts",
+    "update-dependencies": "node --experimental-transform-types ./scripts/update-dependencies.mts",
+    "prebuild": "rimraf dist && npm run get-jaeger-ui",
     "build:dev": "npm run prebuild && webpack --progress --config webpack.dev.ts",
-    "build:dev:jetbrains": "npm run build:dev --env platform=JetBrains",
-    "build:dev:jetbrains:zip": "npm run build:dev:jetbrains -- --env compress=true --env zip-filename-format=JetBrains",
-    "build:dev:web": "npm run build:dev --env platform=Web",
-    "build:dev:web:zip": "npm run build:dev:web -- --env compress=true",
+    "build:dev:jetbrains": "npm run build:dev --env PLATFORM=JetBrains",
+    "build:dev:jetbrains:zip": "npm run build:dev:jetbrains -- --env COMPRESS=true --env ZIP_FILE_FORMAT=JetBrains",
+    "build:dev:web": "npm run build:dev --env PLATFORM=Web",
+    "build:dev:web:zip": "npm run build:dev:web -- --env COMPRESS=true",
     "build:prod": "npm run prebuild && webpack --progress --config webpack.prod.ts",
-    "build:prod:jetbrains": "npm run build:prod -- --env platform=JetBrains",
-    "build:prod:jetbrains:zip": "npm run build:prod:jetbrains -- --env compress=true --env zip-filename-format=JetBrains",
-    "build:prod:web": "npm run build:prod -- --env platform=Web",
-    "build:prod:web:zip": "npm run build:prod:web -- --env compress=true",
+    "build:prod:jetbrains": "npm run build:prod -- --env PLATFORM=JetBrains",
+    "build:prod:jetbrains:zip": "npm run build:prod:jetbrains -- --env COMPRESS=true --env ZIP_FILE_FORMAT=JetBrains",
+    "build:prod:web": "npm run build:prod -- --env PLATFORM=Web",
+    "build:prod:web:zip": "npm run build:prod:web -- --env COMPRESS=true",
     "precommit": "lint-staged",
     "prepare": "husky"
   },
@@ -66,6 +66,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/adm-zip": "^0.5.7",
     "@types/eslint-config-prettier": "^6.11.3",
+    "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.14",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
@@ -80,11 +81,13 @@
     "babel-plugin-styled-components": "^2.1.4",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
+    "dotenv": "^16.4.7",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "^0.11.1",
+    "fs-extra": "^11.2.0",
     "html-webpack-plugin": "^5.6.3",
     "husky": "^9.0.10",
     "jest": "^29.7.0",