Merge pull request #2255 from devtron-labs/feat/manual-chunking

feat: add support for manual chunking and auto generate service worker

Author: eshankvaish

.env

@@ -42,7 +42,7 @@ LOGIN_DT_LOGO=
 SIDEBAR_DT_LOGO=
 ENABLE_EXTERNAL_ARGO_CD=false
 API_BATCH_SIZE=20
-SERVICE_WORKER_TIMEOUT='1'
+SERVICE_WORKER_TIMEOUT='3'
 ENABLE_RESOURCE_SCAN=false
 FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE=false
 ENABLE_RESOURCE_SCAN_V2=false

index.html

@@ -30,14 +30,9 @@
         <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="theme-color" content="#0066cc" />
         <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="/manifest.json" />
-
+        <meta name="description" content="Easily containerize your application to move it to Kubernetes in the cloud or in your own data center. Build, test, secure, deploy, and manage your applications on Kubernetes using open-source software." />
         <title>Devtron</title>
     </head>
 

manifest.json

@@ -1,10 +1,10 @@
 {
     "name": "dashboard",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.1.7",
+        "@devtron-labs/devtron-fe-common-lib": "1.2.2",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -57,10 +57,10 @@
         "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
         "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "start": "vite --open",
-        "build": "NODE_OPTIONS=--max_old_space_size=4096 vite build",
+        "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build",
         "serve": "vite preview",
-        "build-light": "NODE_OPTIONS=--max_old_space_size=4096 GENERATE_SOURCEMAP=false vite build",
-        "build-k8s-app": "NODE_OPTIONS=--max_old_space_size=4096 GENERATE_SOURCEMAP=false VITE_K8S_CLIENT=true vite build",
+        "build-light": "NODE_OPTIONS=--max_old_space_size=8192 GENERATE_SOURCEMAP=false vite build",
+        "build-k8s-app": "NODE_OPTIONS=--max_old_space_size=8192 GENERATE_SOURCEMAP=false VITE_K8S_CLIENT=true vite build",
         "test": "vitest test",
         "test-coverage:watch": "npm run test -- --coverage",
         "test-coverage": "npm run test -- --coverage --watchAll=false",
@@ -115,26 +115,21 @@
         "husky": "^7.0.4",
         "jest-extended": "^2.0.0",
         "jest-junit": "^13.0.0",
-        "jsdom-worker": "^0.2.1",
         "lint-staged": "12.5.0",
         "mock-socket": "^9.2.1",
         "prettier": "^3.1.1",
         "react-test-render": "^1.1.2",
         "sass": "^1.69.7",
+        "sharp": "^0.33.5",
         "storybook": "^8.4.2",
+        "svgo": "^3.3.2",
         "ts-jest": "29.2.5",
         "ts-node": "10.9.2",
         "typescript": "5.5.4",
-        "vite-plugin-pwa": "0.20.5",
+        "vite-plugin-image-optimizer": "^1.1.8",
+        "vite-plugin-pwa": "^0.21.1",
         "vite-tsconfig-paths": "5.0.1",
-        "vitest": "2.0.5",
-        "workbox-core": "7.1.0",
-        "workbox-navigation-preload": "7.1.0",
-        "workbox-precaching": "7.1.0",
-        "workbox-routing": "7.1.0",
-        "workbox-strategies": "7.1.0",
-        "workbox-window": "7.1.0",
-        "worker-loader": "3.0.8"
+        "vitest": "2.0.5"
     },
     "jest": {
         "collectCoverageFrom": [

package.json

@@ -27,6 +27,7 @@ import {
     URLS as CommonURLS,
     ToastManager,
     ToastVariantType,
+    API_STATUS_CODES,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICSparkles } from '@Icons/ic-sparkles.svg'
 import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
@@ -189,20 +190,25 @@ export default function App() {
             return parsedTimeout
         }
 
-        return 1
+        return 3
     })()
 
     const {
-        needRefresh: [needRefresh],
+        needRefresh: [doesNeedRefresh],
         updateServiceWorker,
     } = useRegisterSW({
-        onRegisteredSW(swUrl, r) {
+        onRegisteredSW(swUrl, swRegistration) {
             console.log(`Service Worker at: ${swUrl}`)
-            r &&
+            swRegistration &&
                 setInterval(
                     async () => {
-                        if (!(!r.installing && navigator)) return
-                        if ('connection' in navigator && !navigator.onLine) return
+                        if (
+                            swRegistration.installing ||
+                            !navigator ||
+                            ('connection' in navigator && !navigator.onLine)
+                        ) {
+                            return
+                        }
 
                         try {
                             const resp = await fetch(swUrl, {
@@ -212,7 +218,9 @@ export default function App() {
                                     'cache-control': 'no-cache',
                                 },
                             })
-                            if (resp?.status === 200) await r.update()
+                            if (resp?.status === API_STATUS_CODES.OK) {
+                                await swRegistration.update()
+                            }
                         } catch {
                             // Do nothing
                         }
@@ -223,25 +231,20 @@ export default function App() {
         onRegisterError(error) {
             console.log('SW registration error', error)
         },
+        onNeedRefresh() {
+            handleNeedRefresh()
+        },
     })
 
-    function update() {
+    function handleAppUpdate() {
+        if (ToastManager.isToastActive(updateToastRef.current)) {
+            ToastManager.dismissToast(updateToastRef.current)
+        }
+
         updateServiceWorker(true)
     }
 
-    useEffect(() => {
-        if (window.isSecureContext && navigator.serviceWorker) {
-            // check for sw updates on page change
-            navigator.serviceWorker.getRegistrations().then((regs) => regs.forEach((reg) => reg.update()))
-            if (needRefresh) {
-                update()
-            } else if (ToastManager.isToastActive(updateToastRef.current)) {
-                ToastManager.dismissToast(updateToastRef.current)
-            }
-        }
-    }, [location])
-
-    function onUpdate() {
+    function handleNeedRefresh() {
         if (ToastManager.isToastActive(updateToastRef.current)) {
             ToastManager.dismissToast(updateToastRef.current)
         }
@@ -254,7 +257,7 @@ export default function App() {
                 buttonProps: {
                     text: 'Reload',
                     dataTestId: 'reload-btn',
-                    onClick: update,
+                    onClick: handleAppUpdate,
                     startIcon: <ICArrowClockwise />,
                 },
                 icon: <ICSparkles />,
@@ -270,10 +273,18 @@ export default function App() {
     }
 
     useEffect(() => {
-        if (needRefresh) {
-            onUpdate()
+        if (window.isSecureContext && navigator.serviceWorker) {
+            // check for sw updates on page change
+            navigator.serviceWorker
+                .getRegistrations()
+                .then((registrations) => registrations.forEach((reg) => reg.update()))
+            if (doesNeedRefresh) {
+                handleAppUpdate()
+            } else if (ToastManager.isToastActive(updateToastRef.current)) {
+                ToastManager.dismissToast(updateToastRef.current)
+            }
         }
-    }, [needRefresh])
+    }, [location])
 
     useEffect(() => {
         if (!bgUpdated) {

src/App.tsx

@@ -69,7 +69,10 @@ export interface BulkCDDetailTypeResponse {
     uniqueReleaseTags: string[]
 }
 
-export interface BulkCDDetailType extends BulkTriggerAppDetailType, Pick<CDMaterialProps, 'isTriggerBlockedDueToPlugin' | 'configurePluginURL' | 'consequence'>, Partial<Pick<CommonNodeAttr, 'showPluginWarning'>> {
+export interface BulkCDDetailType
+    extends BulkTriggerAppDetailType,
+        Pick<CDMaterialProps, 'isTriggerBlockedDueToPlugin' | 'configurePluginURL' | 'consequence'>,
+        Partial<Pick<CommonNodeAttr, 'showPluginWarning'>> {
     cdPipelineName?: string
     cdPipelineId?: string
     stageType?: DeploymentNodeType
@@ -113,6 +116,7 @@ export interface BulkCITriggerType extends BulkRuntimeParamsType {
     onClickTriggerBulkCI: (appIgnoreCache: Record<number, boolean>, appsToRetry?: Record<string, boolean>) => void
     getWebhookPayload: (id, webhookTimeStampOrder: typeof TIME_STAMP_ORDER) => void
     webhookPayloads: WebhookPayloadType
+    setWebhookPayloads: React.Dispatch<React.SetStateAction<WebhookPayloadType>>
     isWebhookPayloadLoading: boolean
     isShowRegexModal: (_appId: number, ciNodeId: number, inputMaterialList: any[]) => boolean
     responseList: ResponseRowType[]
@@ -316,7 +320,7 @@ export interface AppGroupDetailDefaultType {
     isVirtualEnv?: boolean
     envName?: string
     description?: string
-    getAppListData?: () => Promise<void>
+    getAppListData?: () => Promise<OptionType[]>
     handleSaveDescription?: (description: string) => Promise<void>
 }
 
@@ -609,11 +613,4 @@ export enum AppGroupUrlFilters {
 
 export interface AppGroupUrlFiltersType extends Record<AppGroupUrlFilters, string[]> {}
 
-export interface SetFiltersInLocalStorageParamsType {
-    filterParentType: FilterParentType,
-    resourceId: string,
-    resourceList: MultiValue<OptionType>,
-    groupList: MultiValue<GroupOptionType>,
-}
-
-export type AppEnvLocalStorageKeyType = `${string}__filter`
+export type AppEnvLocalStorageKeyType = `${string}__filter`

src/components/ApplicationGroup/AppGroup.types.ts

@@ -32,12 +32,8 @@ import {
     CDWorkflowStatusType,
     CIWorkflowStatusType,
     ProcessWorkFlowStatusType,
-    FilterParentType,
-    SetFiltersInLocalStorageParamsType,
-    AppEnvLocalStorageKeyType,
 } from './AppGroup.types'
 import { getParsedBranchValuesForPlugin } from '@Components/common'
-import { APP_GROUP_LOCAL_STORAGE_KEY, ENV_GROUP_LOCAL_STORAGE_KEY } from './Constants'
 
 let timeoutId
 
@@ -296,24 +292,3 @@ export const processConsequenceData = (data: BlockedStateData): ConsequenceType
 export const parseSearchParams = (searchParams: URLSearchParams) => ({
     [AppGroupUrlFilters.cluster]: searchParams.getAll(AppGroupUrlFilters.cluster),
 })
-
-export const getAppFilterLocalStorageKey = (filterParentType: FilterParentType): AppEnvLocalStorageKeyType =>
-    filterParentType === FilterParentType.app ? ENV_GROUP_LOCAL_STORAGE_KEY : APP_GROUP_LOCAL_STORAGE_KEY
-
-export const setFilterInLocalStorage = ({
-    filterParentType,
-    resourceId,
-    resourceList,
-    groupList,
-}: SetFiltersInLocalStorageParamsType) => {
-    const localStorageKey = getAppFilterLocalStorageKey(filterParentType)
-    try {
-        const localStorageValue = localStorage.getItem(localStorageKey)
-        const localStoredMap = new Map(localStorageValue ? JSON.parse(localStorageValue) : null)
-        localStoredMap.set(resourceId, [resourceList, groupList])
-        // Set filter in local storage as Array from Map of resourceId vs [selectedAppList, selectedGroupFilter]
-        localStorage.setItem(localStorageKey, JSON.stringify(Array.from(localStoredMap)))
-    } catch {
-        localStorage.setItem(localStorageKey, '')
-    }
-}

src/components/ApplicationGroup/AppGroup.utils.ts

@@ -19,7 +19,7 @@ import { components } from 'react-select'
 import { ComponentSizeType, ConditionalWrap, TabGroup } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { useAppGroupAppFilterContext } from './AppGroupDetailsRoute'
-import { getOptionBGClass, setFilterInLocalStorage } from './AppGroup.utils'
+import { getOptionBGClass } from './AppGroup.utils'
 import { ReactComponent as ShowIconFilter } from '../../assets/icons/ic-group-filter.svg'
 import { ReactComponent as ShowIconFilterApplied } from '../../assets/icons/ic-group-filter-applied.svg'
 import { ReactComponent as Search } from '../../assets/icons/ic-search.svg'
@@ -31,6 +31,7 @@ import { ReactComponent as CheckIcon } from '../../assets/icons/ic-check.svg'
 import { AppGroupAppFilterContextType, FilterParentType } from './AppGroup.types'
 import { AppFilterTabs } from './Constants'
 import { ShortcutKeyBadge } from '@Components/common/formFields/Widgets/Widgets'
+import { setAppGroupFilterInLocalStorage } from '@Components/common'
 
 export const ValueContainer = (props): JSX.Element => {
     const {
@@ -183,7 +184,7 @@ export const MenuList = (props: any): JSX.Element => {
     const clearSelection = (): void => {
         setSelectedAppList([])
         setSelectedGroupFilter([])
-        setFilterInLocalStorage({ filterParentType, resourceId, resourceList: [], groupList: [] })
+        setAppGroupFilterInLocalStorage({ filterParentType, resourceId, resourceList: [], groupList: [] })
     }
     const onTabChange = (e): void => {
         setSelectedFilterTab(e.currentTarget.dataset.selectedTab)