feat: bulk operations (restart & delete) in resource browser

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.5",
+    "version": "0.6.2-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Api.ts

@@ -264,4 +264,4 @@ export const abortPreviousRequests = <T>(
  */
 export const getIsRequestAborted = (error) =>
     // The 0 code is common for aborted and blocked requests
-    error && error.code === 0 && error.message.search('abort|aborted')
+    error && error.code === 0 && error.message.search('abort|aborted') > -1

src/Pages/ResourceBrowser/ResourceBrowser.Types.ts

@@ -15,6 +15,7 @@
  */
 
 import { NodeType, Nodes } from '@Shared/types'
+import { RefObject } from 'react'
 
 export interface GVKType {
     Group: string
@@ -38,3 +39,30 @@ export interface K8SObjectBaseType {
     name: string
     isExpanded: boolean
 }
+
+export interface BulkSelectionActionWidgetProps {
+    count: number
+    handleOpenBulkDeleteModal: () => void
+    handleClearBulkSelection: () => void
+    handleOpenRestartWorkloadModal: () => void
+    parentRef: RefObject<HTMLDivElement>
+    showBulkRestartOption: boolean
+}
+
+export interface BulkOperation {
+    name: string
+    operation: (signal: AbortSignal, data?: unknown) => Promise<void>
+}
+
+export type BulkOperationModalProps = {
+    operationType: 'restart' | 'delete'
+    clusterName: string
+    operations: NonNullable<BulkOperation[]>
+    handleModalClose: () => void
+    resourceKind: string
+    handleReloadDataAfterBulkOperation?: () => void
+    hideResultsDrawer?: boolean
+    shouldAllowForceOperation?: true
+}
+
+export type BulkOperationModalState = BulkOperationModalProps['operationType'] | 'closed'

src/Shared/API/APIQueuing.ts

@@ -54,10 +54,14 @@ const eachCall = (batchConfig, functionCalls, resolve, reject, shouldRejectOnErr
  */
 const ApiQueuingWithBatch = <T>(
     functionCalls,
-    httpProtocol: string,
     shouldRejectOnError: boolean = false,
     batchSize: number = window._env_.API_BATCH_SIZE,
 ): Promise<ApiQueuingWithBatchResponseItem<T>[]> => {
+    const httpProtocol = (window.performance.getEntriesByType('resource') as PerformanceResourceTiming[]).reduce(
+        (fallbackProtocol, entry) => entry.nextHopProtocol ?? fallbackProtocol,
+        'http/1.0',
+    )
+
     if (!batchSize || batchSize <= 0) {
         // eslint-disable-next-line no-param-reassign
         batchSize = ['http/0.9', 'http/1.0', 'http/1.1'].indexOf(httpProtocol) !== -1 ? 5 : 30

src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx

@@ -30,7 +30,7 @@ import {
     UseBulkSelectionProps,
     UseBulkSelectionReturnType,
 } from './types'
-import { CHECKBOX_VALUE, noop } from '../../../Common'
+import { CHECKBOX_VALUE, noop, useEffectAfterMount } from '../../../Common'
 
 // giving type any here since not exporting this context, rather using it through useBulkSelection hook which is typed
 const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
@@ -39,6 +39,7 @@ const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
     isChecked: false,
     checkboxValue: CHECKBOX_VALUE.CHECKED,
     isBulkSelectionApplied: false,
+    setIdentifiers: noop,
     getSelectedIdentifiersCount: noop,
 })
 
@@ -52,10 +53,17 @@ export const useBulkSelection = <T,>() => {
 
 export const BulkSelectionProvider = <T,>({
     children,
-    identifiers,
+    identifiers = null,
     getSelectAllDialogStatus,
 }: UseBulkSelectionProps<T>) => {
     const [selectedIdentifiers, setSelectedIdentifiers] = useState<T>({} as T)
+    const [identifiersOnCurrentPage, setIdentifiersOnCurrentPage] = useState(identifiers ?? ({} as T))
+
+    useEffectAfterMount(() => {
+        if (identifiers) {
+            setIdentifiersOnCurrentPage(identifiers)
+        }
+    }, [identifiers])
 
     const isBulkSelectionApplied = selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
 
@@ -96,7 +104,7 @@ export const BulkSelectionProvider = <T,>({
                     variant: ToastVariantType.info,
                     description: CLEAR_SELECTIONS_WARNING,
                 })
-                setIdentifiersAfterClear(identifiers, selectedIds)
+                setIdentifiersAfterClear(identifiersOnCurrentPage, selectedIds)
                 break
             }
 
@@ -137,7 +145,7 @@ export const BulkSelectionProvider = <T,>({
                     })
                 }
 
-                setIdentifiersAfterPageSelection(identifiers)
+                setIdentifiersAfterPageSelection(identifiersOnCurrentPage)
                 break
             }
 
@@ -169,7 +177,7 @@ export const BulkSelectionProvider = <T,>({
         }
 
         // if all the identifiers are selected then CHECKED else intermediate
-        const areAllPresentIdentifiersSelected = Object.keys(identifiers).every(
+        const areAllPresentIdentifiersSelected = Object.keys(identifiersOnCurrentPage).every(
             (identifierId) => selectedIdentifiers[identifierId],
         )
 
@@ -196,8 +204,17 @@ export const BulkSelectionProvider = <T,>({
             checkboxValue,
             isBulkSelectionApplied,
             getSelectedIdentifiersCount,
+            setIdentifiers: setIdentifiersOnCurrentPage,
         }),
-        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount],
+        [
+            selectedIdentifiers,
+            handleBulkSelection,
+            isChecked,
+            checkboxValue,
+            getSelectedIdentifiersCount,
+            identifiersOnCurrentPage,
+            isBulkSelectionApplied,
+        ],
     )
 
     return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>

src/Shared/Components/BulkSelection/types.tsx

@@ -44,6 +44,7 @@ export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxV
     handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void
     isBulkSelectionApplied: boolean
     getSelectedIdentifiersCount: () => number
+    setIdentifiers: React.Dispatch<React.SetStateAction<T>>
 }
 
 export interface BulkSelectionProps {
@@ -72,14 +73,16 @@ export enum SelectAllDialogStatus {
 export type BulkSelectionIdentifiersType<T> = Record<string | number, T>
 
 export interface UseBulkSelectionProps<T> {
-    /**
-     * Response from API, assuming structure to be array of objects with key and values
-     * This will the given ids on current page
-     */
-    identifiers: T
     /**
      * Act as buffer between select all across pages and select all on page state
      */
     getSelectAllDialogStatus: () => SelectAllDialogStatus
+    /**
+     * Response from API, assuming structure to be array of objects with key and values
+     * This will the given ids on current page.
+     *
+     * NOTE!: Please wrap this value with a useMemo since it goes into useEffect dependency
+     */
+    identifiers?: T
     children?: React.ReactNode
 }

src/Shared/Components/Security/SecurityModal/config/ImageScan.tsx

@@ -115,12 +115,12 @@ const getVulnerabilitiesDetailData = (
     return getGroupedVulnerabilitiesDetailData(element, setDetailViewData, hidePolicy)
 }
 
-const getImageScanProgressingState = (status: StatusType['status']) => {
+export const getProgressingStateForStatus = (status: StatusType['status']) => {
     switch (status) {
         case 'Completed':
-            return <ICSuccess className="icon-dim-16" />
+            return <ICSuccess className="icon-dim-16 dc__no-shrink" />
         case 'Failed':
-            return <ICError className="icon-dim-16 ic-error-cross-red" />
+            return <ICError className="icon-dim-16 ic-error-cross-red dc__no-shrink" />
         case 'Progressing':
             return (
                 <Progressing
@@ -182,7 +182,7 @@ const getVulnerabilitiesData = (
                   {
                       component: (
                           <div className="flexbox dc__align-items-center dc__gap-4">
-                              {getImageScanProgressingState(element.status)}
+                              {getProgressingStateForStatus(element.status)}
                               <span>{getTimeString(element.StartedOn, element.status)}</span>
                           </div>
                       ),
@@ -281,7 +281,7 @@ const getLicenseData = (
                   {
                       component: (
                           <div className="flexbox dc__align-items-center dc__gap-4">
-                              {getImageScanProgressingState(element.status)}
+                              {getProgressingStateForStatus(element.status)}
                               <span>{getTimeString(element.StartedOn, element.status)}</span>
                           </div>
                       ),

src/Shared/Components/Security/SecurityModal/config/index.ts

@@ -5,3 +5,4 @@
 export { getTableData } from './Table'
 export { getInfoCardData } from './InfoCard'
 export { SIDEBAR_DATA } from './Sidebar'
+export { getProgressingStateForStatus } from './ImageScan'

src/Shared/Components/Security/SecurityModal/index.ts

@@ -19,6 +19,6 @@ export type {
     GetResourceScanDetailsPayloadType,
     GetResourceScanDetailsResponseType,
 } from './types'
-export { SIDEBAR_DATA } from './config'
+export { SIDEBAR_DATA, getProgressingStateForStatus } from './config'
 export { CATEGORY_LABELS } from './constants'
 export { getExecutionDetails } from './service'

src/index.ts

@@ -86,6 +86,7 @@ export interface customEnv {
     FEATURE_PROMO_EMBEDDED_BUTTON_TEXT?: string
     FEATURE_PROMO_EMBEDDED_MODAL_TITLE?: string
     FEATURE_PROMO_EMBEDDED_IFRAME_URL?: string
+    FEATURE_BULK_RESTART_WORKLOADS_FROM_RB: string
 }
 declare global {
     interface Window {