Merge branch 'develop' of github.com:devtron-labs/dashboard into feat/combined-ci-cd-pipeline

Author: RohitRaj011

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         cache: 'yarn'
 
     - name: Install dependencies
-      run: yarn install --frozen-lockfile
+      run: yarn install --immutable
 
     - name: Check linting issues
       run: yarn lint

.nvmrc

@@ -1 +1 @@
-v20.11.0
+v22

.yarn/releases/yarn-4.9.2.cjs

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

.yarnrc.yml

@@ -1,11 +1,17 @@
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 
-COPY package.json yarn.lock .
+RUN corepack enable yarn && \
+    yarn set version 4.9.2
+
+COPY package.json .
+COPY yarn.lock .
+COPY .yarn/ .yarn/
+COPY .yarnrc.yml ./
 
 RUN apk add --no-cache git
-RUN yarn install --frozen-lockfile --network-timeout 600000
+RUN yarn install --immutable --network-timeout 600000
 
 COPY . .
 

Dockerfile

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.15.3-beta-0",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.3-pre-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -14,7 +14,6 @@
         "@sentry/tracing": "7.50.0",
         "@tippyjs/react": "4.2.6",
         "@typeform/embed-react": "2.20.0",
-        "@vitejs/plugin-react": "4.3.1",
         "command-line-parser": "^0.2.10",
         "compute-histogram": "^0.9.11",
         "dayjs": "^1.11.8",
@@ -39,9 +38,6 @@
         "rxjs": "^7.5.4",
         "sockjs-client": "1.6.1",
         "tippy.js": "^6.3.7",
-        "vite": "5.4.19",
-        "vite-plugin-require-transform": "1.0.21",
-        "vite-plugin-svgr": "^2.4.0",
         "xterm": "^4.19.0",
         "xterm-addon-fit": "^0.5.0",
         "xterm-addon-search": "^0.9.0",
@@ -87,6 +83,7 @@
         "@types/recompose": "^0.30.10",
         "@typescript-eslint/eslint-plugin": "8.3.0",
         "@typescript-eslint/parser": "8.3.0",
+        "@vitejs/plugin-react": "4.5.2",
         "env-cmd": "10.1.0",
         "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
@@ -115,9 +112,11 @@
         "ts-jest": "29.2.5",
         "ts-node": "10.9.2",
         "typescript": "5.5.4",
-        "vite-plugin-compression2": "^1.3.3",
-        "vite-plugin-image-optimizer": "^1.1.8",
+        "vite": "6.3.5",
+        "vite-plugin-compression2": "2.0.1",
         "vite-plugin-pwa": "^0.21.1",
+        "vite-plugin-require-transform": "1.0.21",
+        "vite-plugin-svgr": "^2.4.0",
         "vite-tsconfig-paths": "5.0.1"
     },
     "jest": {
@@ -139,5 +138,6 @@
         "rollup": "^4.22.4",
         "path-to-regexp": "^1.9.0",
         "cross-spawn": "^7.0.5"
-    }
+    },
+    "packageManager": "[email protected]"
 }

package.json

@@ -21,6 +21,8 @@ import ReactSelect, { Props as SelectProps, SelectInstance } from 'react-select'
 import {
     APP_SELECTOR_STYLES,
     AppSelectorDropdownIndicator,
+    Badge,
+    ComponentSizeType,
     DocLink,
     DocLinkProps,
     Icon,
@@ -114,7 +116,7 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
                 }}
             />
 
-            {defaultOption?.isProd && <span className="px-6 py-2 br-4 bcb-1 cb-7 fs-12 lh-16 fw-5">Production</span>}
+            {defaultOption?.isProd && <Badge label="Production" size={ComponentSizeType.xxs} />}
 
             {defaultOption?.value !== String(DEFAULT_CLUSTER_ID) && (
                 <PopupMenu autoClose>

src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx

@@ -30,6 +30,8 @@ import {
     useMainContext,
     SelectPickerOptionType,
     InfoBlock,
+    Badge,
+    SeveritiesDTO,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import { Link } from 'react-router-dom'
@@ -1098,33 +1100,31 @@ export const getPluginIdsFromBuildStage = (
     return pluginIds
 }
 
+const SEVERITY_ORDER = [
+    { key: SeveritiesDTO.CRITICAL, label: 'Critical', variant: 'negative' },
+    { key: SeveritiesDTO.HIGH, label: 'High', variant: 'custom', fontColor: 'R500', bgColor: 'R100' },
+    { key: SeveritiesDTO.MEDIUM, label: 'Medium', variant: 'custom', fontColor: 'O600', bgColor: 'O100' },
+    { key: SeveritiesDTO.LOW, label: 'Low', variant: 'warning' },
+    { key: SeveritiesDTO.UNKNOWN, label: 'Unknown', variant: 'neutral' },
+] as const
+
 export const getSeverityWithCount = (severityCount: SeverityCount) => {
-    if (severityCount.critical) {
-        return (
-            <span className="severity-chip severity-chip--critical dc__w-fit-content">
-                {severityCount.critical} Critical
-            </span>
-        )
-    }
-    if (severityCount.high) {
-        return <span className="severity-chip severity-chip--high dc__w-fit-content">{severityCount.high} High</span>
-    }
-    if (severityCount.medium) {
-        return (
-            <span className="severity-chip severity-chip--medium dc__w-fit-content">{severityCount.medium} Medium</span>
-        )
-    }
-    if (severityCount.low) {
-        return <span className="severity-chip severity-chip--low dc__w-fit-content">{severityCount.low} Low</span>
-    }
-    if (severityCount.unknown) {
-        return (
-            <span className="severity-chip severity-chip--unknown dc__w-fit-content">
-                {severityCount.unknown} Unknown
-            </span>
-        )
+    for (const item of SEVERITY_ORDER) {
+        if (severityCount[item.key]) {
+            if (item.variant === 'custom') {
+                return (
+                    <Badge
+                        label={`${severityCount[item.key]} ${item.label}`}
+                        variant="custom"
+                        fontColor={item.fontColor}
+                        bgColor={item.bgColor}
+                    />
+                )
+            }
+            return <Badge label={`${severityCount[item.key]} ${item.label}`} variant={item.variant} />
+        }
     }
-    return <span className="severity-chip severity-chip--passed dc__w-fit-content">Passed</span>
+    return <Badge label="Passed" variant="positive" />
 }
 
 // FIXME: Ideally whole branch calculations should be in fe-lib

src/components/common/helpers/Helpers.tsx

@@ -4826,55 +4826,6 @@ textarea::placeholder {
     background-color: var(--Y200);
 }
 
-.severity-chip {
-    display: flex;
-    padding: 0px 6px;
-    align-items: center;
-    gap: 4px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px;
-    text-transform: capitalize;
-
-    &--passed {
-        color: var(--G500);
-        border: 1px solid var(--G200);
-        background: var(--G100);
-    }
-
-    &--critical {
-        color: var(--R700);
-        border: 1px solid var(--R700);
-        background: var(--R100);
-    }
-
-    &--high {
-        color: var(--R500);
-        border: 1px solid var(--R200);
-        background: var(--R100);
-    }
-
-    &--medium {
-        color: var(--O600);
-        border: 1px solid var(--O200);
-        background: var(--O100);
-    }
-
-    &--low {
-        color: var(--Y700);
-        border: 1px solid var(--Y200);
-        background: var(--Y100);
-    }
-
-    &--unknown {
-        color: var(--N700);
-        border: 1px solid var(--N200);
-        background: var(--N100);
-    }
-}
-
 .dc__grid-full {
     display: grid;
     grid-template-columns: 100% 0;

src/css/base.scss

@@ -28,7 +28,7 @@ import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfil
 import { VitePWA } from 'vite-plugin-pwa'
 // import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
 import tsconfigPaths from 'vite-tsconfig-paths'
-import { compression } from 'vite-plugin-compression2'
+import { compression, defineAlgorithm } from 'vite-plugin-compression2'
 
 const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`
 const TARGET_URL = 'https://preview.devtron.ai/'
@@ -184,7 +184,7 @@ export default defineConfig(({ mode }) => {
                 svgrOptions: {},
             }),
             compression({
-                algorithm: 'brotliCompress',
+                algorithms: [defineAlgorithm('brotliCompress')],
             }),
             reactVirtualized(),
             requireTransform(),