Merge branch 'main' into helm-appdetails-issue-card

.env

@@ -23,8 +23,7 @@ HIDE_DEPLOYMENT_GROUPS=true
 HIDE_GITOPS_OR_HELM_OPTION=true
 CONFIGURABLE_TIMEOUT=
 HIDE_APPLICATION_GROUPS=true
-REACT_APP_K8S_CLIENT=false
-USE_V2=false
+K8S_CLIENT=false
 CLUSTER_TERMINAL_CONNECTION_POLLING_INTERVAL=7000
 CLUSTER_TERMINAL_CONNECTION_RETRY_COUNT=7
 ENABLE_CHART_SEARCH_IN_HELM_DEPLOY=false

.env.development

@@ -1,3 +1,5 @@
-REACT_APP_ORCHESTRATOR_ROOT="/orchestrator"
-REACT_APP_GRAFANA_ORG_ID=2
-REACT_APP_K8S_CLIENT=false
+VITE_ORCHESTRATOR_ROOT="/orchestrator"
+VITE_GRAFANA_ORG_ID=2
+VITE_K8S_CLIENT=false
+VITE_NODE_ENV="development"
+BASE_URL="/dashboard"

.env.k8sApp

@@ -1,2 +1,2 @@
-HIDE_DISCORD=true
+VITE_HIDE_DISCORD=true
 K8S_CLIENT=true

.env.production

@@ -1,2 +1,4 @@
-REACT_APP_ORCHESTRATOR_ROOT="/orchestrator"
-REACT_APP_GRAFANA_ORG_ID=2
+VITE_ORCHESTRATOR_ROOT="/orchestrator"
+VITE_GRAFANA_ORG_ID=2
+VITE_NODE_ENV="production"
+BASE_URL="/dashboard"

.eslintrc.js

@@ -2,7 +2,6 @@ module.exports = {
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint', 'react', 'prettier'],
     env: {
-        commonjs: true,
         browser: true,
         // ESLint 6 supports till ES2020 only
         es2020: true,
@@ -40,6 +39,7 @@ module.exports = {
         // Since we are using typescript, we can disable the no-unused-vars rule for enum,etc
         'no-unused-vars': 'off',
         '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
         'react/jsx-filename-extension': [
             'error',
             {
@@ -111,5 +111,5 @@ module.exports = {
                 extensions: ['.js', '.jsx', '.ts', '.tsx'],
             },
         },
-    },
+    }
 }

.github/workflows/ci.yml

@@ -17,10 +17,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
         cache: 'yarn'

.github/workflows/playwright.yml

@@ -9,8 +9,8 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 16
     - name: Install dependencies
@@ -19,7 +19,7 @@ jobs:
       run: npx playwright install --with-deps
     - name: Run Playwright tests
       run: npx playwright test
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       if: always()
       with:
         name: playwright-report

.github/workflows/test-coverage.yaml

@@ -5,7 +5,7 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: Checkout
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
             - name: Jest coverage report
               uses: ArtiomTr/[email protected]
               id: coverage

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

.nvmrc

@@ -1 +1 @@
-v16.13.0
+v20.11.0

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16 AS builder
+FROM node:20-alpine AS builder
 
 WORKDIR /app
 COPY package.json .
@@ -8,19 +8,19 @@ RUN yarn install --network-timeout 600000
 COPY src/ src
 COPY types/ types
 COPY nginx.conf .
-COPY public/ public/
 COPY tsconfig.json .
+COPY vite.config.ts .
 COPY . .
-RUN echo REACT_APP_GIT_SHA=`git rev-parse --short HEAD` >> .env.production
+#RUN echo REACT_APP_GIT_SHA=`git rev-parse --short HEAD` >> .env.production
 RUN echo `git rev-parse --short HEAD` > health.html
-RUN npm run build
+RUN yarn build
 #RUN apt update -y && apt install jq -y
 #RUN python linter.py | jq -C --tab .
 
 FROM nginx:stable
 
 RUN useradd -ms /bin/bash devtron
-COPY --from=builder /app/build/ /usr/share/nginx/html
+COPY --from=builder /app/dist/ /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf
 COPY ./nginx-default.conf /etc/nginx/conf.d/default.conf
 WORKDIR /usr/share/nginx/html
@@ -32,4 +32,4 @@ RUN chown -R devtron:devtron /usr/share/nginx/html
 # Make our shell script executable
 RUN chmod +x env.sh
 USER devtron
-CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
+CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

README.md

@@ -85,7 +85,7 @@ foo@bar~$ docker run -p 3000:80 -e SENTRY_ENV=my-custom-env -t artifact/tag
 ### Disable sentry error logging during production deployment, default enabled
 
 ```console
-foo@bar~$ docker run -p 3000:80 -e SENTRY_ERROR_ENABLED=false -t artifact/tag
+foo@bar~$ docker run -p 3000:80 -e ENTRY_ERROR_ENABLED=false -t artifact/tag
 ```
 
 ### Disable sentry performance monitoring during production deployment, default enabled
@@ -128,29 +128,29 @@ foo@bar~$ python uploadTestReport.py
 
 ### Development setup with proxy.
 
-#### **`src/setupProxy.js`**
+#### **`vite.config.ts`**
+Update the `vite.config.ts` file to include the proxy configuration.
+In proxy object, add the target URL of the orchestrator and grafana.
 
 ```js
-const { createProxyMiddleware } = require('http-proxy-middleware')
-
-module.exports = function (app) {
-    app.use(
-        '/orchestrator',
-        createProxyMiddleware({
-            target: 'http://demo.devtron.info:32080',
-            changeOrigin: true,
-            logLevel: 'info',
-        }),
-    )
-}
+server: {
+            port: 3000,
+            proxy: {
+                '/orchestrator': {
+                    target: 'https://preview.devtron.ai/',
+                    changeOrigin: true,
+                },
+                '/grafana': 'https://preview.devtron.ai/',
+            },
+        }
 ```
 
 #### **`.env.development`**
 
 ```console
-GRAFANA_ORG_ID=2
+VITE_GRAFANA_ORG_ID=2
 REACT_APP_EDITOR=code
-REACT_APP_ORCHESTRATOR_ROOT=/orchestrator
+VITE_ORCHESTRATOR_ROOT=/orchestrator
 REACT_APP_PASSWORD=argocd-server-74b7b94945-nxxnh
 ```
 
@@ -159,9 +159,9 @@ REACT_APP_PASSWORD=argocd-server-74b7b94945-nxxnh
 #### **`.env.development`**
 
 ```console
-GRAFANA_ORG_ID=2
+VITE_GRAFANA_ORG_ID=2
 REACT_APP_EDITOR=code
-REACT_APP_ORCHESTRATOR_ROOT=http://demo.devtron.info:32080/orchestrator
+VITE_ORCHESTRATOR_ROOT=http://demo.devtron.info:32080/orchestrator
 REACT_APP_PASSWORD=argocd-server-74b7b94945-nxxnh
 ```
 
@@ -191,10 +191,10 @@ First you need to have the backend project up and running and the dashboard repo
 
 -   Run yarn in the dashboard repo root
 -   Open the project in your preferred IDE
--   Open the `setupProxy.js` file
+-   Open the `vite.config.ts` file
 -   Change the target URL of the orchestrator. Replace it with the URL of your orchestrator
 -   Save the file
--   Run `npm run start`
+-   Run `yarn start`
 -   Go to `localhost:3000`
 -   Click Login as administrator
 -   Provide Admin as username and password from Devtron BE

config.md

@@ -15,7 +15,6 @@
 | SENTRY_PERFORMANCE_ENABLED         | false     |  To send persormance sentry      |
 | SENTRY_DSN                         | ''        | SENTRY Data Source Name |
 | SENTRY_TRACES_SAMPLE_RATE          | 0.2       | Rate at which data send to sentry.(min=0 max=1)|
-| USE_V2                             | "true"    | Use the v2 APIs                                 |
 | ENABLE_RESTART_WORKLOAD            | "false"    | Show restart pods option in app details page   |
 | ENABLE_BUILD_CONTEXT               | "true"    | Enable build context in Devtron UI             |
 | FORCE_SECURITY_SCANNING            | "false"   | Force security scanning                         |
@@ -28,9 +27,8 @@
 | LOGIN_PAGE_IMAGE                   | ""         | Login page image url                          |
 | LOGIN_PAGE_IMAGE_BG                | ""         | Login page image background color code        |
 | DEFAULT_CI_TRIGGER_TYPE_MANUAL     | "false"    | Change default trigger behaviour of newly created ci-pipeline to manual |
-| GLOBAL_API_TIMEOUT    |  60000  | Default timeout for all API requests in DASHBOARD  |
-| TRIGGER_API_TIMEOUT   |  60000  | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD  |
+| GLOBAL_API_TIMEOUT                  |  60000  | Default timeout for all API requests in DASHBOARD  |
+| TRIGGER_API_TIMEOUT                 |  60000  | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD  |
 | LOGIN_DT_LOGO                      | ""         | Devtron logo for login page     |
 | SIDEBAR_DT_LOGO                    | ""         | Devtron logo for sidebar        |
-
-# DASHBOARD CONFIG SECRET
+# DASHBOARD CONFIG SECRET

public/index.html → index.html

@@ -3,31 +3,22 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="preload" as="style" href='//fonts.googleapis.com/css?family=Open+Sans' type='text/css'>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
   <link
       href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"
       rel="stylesheet"
   />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-  <script src="%PUBLIC_URL%/env-config.js"></script>
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <script src="/dashboard/env-config.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <meta name="theme-color" content="#06c" />
   <meta name="robots" content="noindex, nofollow" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+  <link rel="manifest" href="/manifest.json" />
 
 
   <title>Devtron</title>
@@ -60,5 +51,5 @@
   if (window.location.origin === "https://preview.devtron.ai")
     title_el.innerHTML = "Devtron Sandbox";
 </script>
-
+<script type="module" src="/src/index.tsx"></script>
 </html>