feat: Environment Overview

RohitRaj011 · RohitRaj011 · commit 0b7b85157a18 · 2025-05-19T13:47:54.000+05:30
- add BulkSelection Widget
  - add manage traffic button &amp; menu item
  - improve layout structure (UI)
  - improve code structure
  - code optimization
diff --git a/.eslintignore b/.eslintignore
@@ -24,7 +24,6 @@ src/components/ApplicationGroup/Details/EnvCIDetails/EnvCIDetails.tsx
 src/components/ApplicationGroup/Details/EnvCIDetails/__test__/EnvCIDetails.test.tsx
 src/components/ApplicationGroup/Details/EnvironmentConfig/__test__/ApplicationRoutes.test.tsx
 src/components/ApplicationGroup/Details/EnvironmentConfig/__test__/EnvConfig.test.tsx
-src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx
 src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateModal.tsx
 src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusListDrawer.tsx
 src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateStatusRow.tsx
diff --git a/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverview.constants.ts b/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverview.constants.ts
@@ -45,3 +45,5 @@ export const EnvironmentOverviewTableHeaderValues: Record<keyof typeof Environme
     DEPLOYED_BY: 'DEPLOYED BY',
     STATUS: null,
 }
+
+export const ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER = 'environment-overview-drag-selector'
diff --git a/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewBulkSelectionActionWidget.tsx b/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewBulkSelectionActionWidget.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { useEffect } from 'react'
+
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    DraggableButton,
+    DraggablePositionVariant,
+    DraggableWrapper,
+    Icon,
+    useRegisterShortcut,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER } from './EnvironmentOverview.constants'
+import { EnvironmentOverviewPopupMenu } from './EnvironmentOverviewPopupMenu'
+import { EnvironmentOverviewBulkSelectionWidgetProps } from './EnvironmentOverviewTable.types'
+
+export const EnvironmentOverviewBulkSelectionWidget = ({
+    count,
+    onClose,
+    parentRef,
+    popUpMenuItems,
+    children,
+}: EnvironmentOverviewBulkSelectionWidgetProps) => {
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
+    useEffect(() => {
+        registerShortcut({ keys: ['Escape'], callback: onClose })
+
+        return () => {
+            unregisterShortcut(['Escape'])
+        }
+    }, [])
+
+    return (
+        <DraggableWrapper
+            dragSelector={`.${ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER}`}
+            positionVariant={DraggablePositionVariant.PARENT_BOTTOM_CENTER}
+            zIndex="calc(var(--modal-index) - 1)"
+            parentRef={parentRef}
+        >
+            <div className="bulk-selection-widget br-8 pl-7 pr-11 py-11 flex dc__gap-8">
+                <DraggableButton dragClassName={ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER} />
+                <div className="flex dc__gap-8 fs-13 lh-20 fw-6">
+                    <span className="bcb-5 br-4 px-6 cn-0">{count}</span>
+                    <span className="cn-9">Selected</span>
+                </div>
+                <div className="w-1 h-20 bcb-1" />
+                {children}
+                <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />
+                <div className="w-1 h-20 bcb-1" />
+                <Button
+                    icon={<Icon name="ic-close-large" color={null} />}
+                    dataTestId="environment-overview-table-action-widget-close"
+                    style={ButtonStyleType.negativeGrey}
+                    variant={ButtonVariantType.borderLess}
+                    ariaLabel="Clear selection(s)"
+                    size={ComponentSizeType.small}
+                    onClick={onClose}
+                    showAriaLabelInTippy={false}
+                />
+            </div>
+        </DraggableWrapper>
+    )
+}
diff --git a/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewPopupMenu.tsx b/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewPopupMenu.tsx
@@ -0,0 +1,51 @@
+// TODO: Replace this with ActionMenu component
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    Icon,
+    PopupMenu,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { EnvironmentOverviewTableRow } from './EnvironmentOverviewTable.types'
+
+export const EnvironmentOverviewPopupMenu = ({
+    popUpMenuItems,
+}: Pick<EnvironmentOverviewTableRow, 'popUpMenuItems'>) => (
+    <PopupMenu autoClose>
+        <PopupMenu.Button isKebab rootClassName="p-0 dc__no-border cursor">
+            <Button
+                icon={<Icon name="ic-more-vertical" color={null} />}
+                dataTestId="environment-overview-pop-up-menu"
+                style={ButtonStyleType.neutral}
+                variant={ButtonVariantType.borderLess}
+                ariaLabel="environment-overview-pop-up-menu"
+                size={ComponentSizeType.xs}
+                showAriaLabelInTippy={false}
+            />
+        </PopupMenu.Button>
+        <PopupMenu.Body rootClassName="dc__border py-4 w-180">
+            {popUpMenuItems.map((popUpMenuItem) => {
+                if ('label' in popUpMenuItem) {
+                    const { label, onClick, disabled, iconName } = popUpMenuItem
+
+                    return (
+                        <button
+                            key={label}
+                            type="button"
+                            className={`dc__transparent w-100 py-6 px-8 flexbox dc__align-items-center dc__gap-8 ${disabled ? ' dc__opacity-0_5 cursor-not-allowed' : 'dc__hover-n50'}`}
+                            onClick={onClick}
+                            disabled={disabled}
+                        >
+                            {iconName && <Icon name={iconName} color="N800" />}
+                            <span className="dc__truncate cn-9 fs-13 lh-20">{label}</span>
+                        </button>
+                    )
+                }
+
+                return popUpMenuItem
+            })}
+        </PopupMenu.Body>
+    </PopupMenu>
+)
diff --git a/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx b/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.component.tsx
@@ -25,7 +25,6 @@ import {
     getRandomColor,
     handleRelativeDateSorting,
     ImageChipCell,
-    PopupMenu,
     processDeployedTime,
     RegistryType,
     SortableTableHeaderCell,
@@ -38,56 +37,18 @@ import {
 import { ReactComponent as ICActivity } from '@Icons/ic-activity.svg'
 import { ReactComponent as ICArrowLineDown } from '@Icons/ic-arrow-line-down.svg'
 import { ReactComponent as DevtronIcon } from '@Icons/ic-devtron-app.svg'
-import { ReactComponent as ICMoreOption } from '@Icons/ic-more-option.svg'
 
 import {
     EnvironmentOverviewTableHeaderFixedKeys,
     EnvironmentOverviewTableHeaderValues,
     EnvironmentOverviewTableHeaderVariableKeys,
     EnvironmentOverviewTableSortableKeys,
 } from './EnvironmentOverview.constants'
-import {
-    EnvironmentOverviewTableProps,
-    EnvironmentOverviewTableRow,
-    EnvironmentOverviewTableRowData,
-} from './EnvironmentOverviewTable.types'
+import { EnvironmentOverviewPopupMenu } from './EnvironmentOverviewPopupMenu'
+import { EnvironmentOverviewTableProps, EnvironmentOverviewTableRowData } from './EnvironmentOverviewTable.types'
 
 import './EnvironmentOverviewTable.scss'
 
-const renderPopUpMenu = (items: EnvironmentOverviewTableRow['popUpMenuItems']) => (
-    <PopupMenu autoClose>
-        <PopupMenu.Button isKebab rootClassName="p-4 flex dc__no-border cursor">
-            <ICMoreOption className="icon-dim-16 fcn-6 rotateBy--90" />
-        </PopupMenu.Button>
-        <PopupMenu.Body rootClassName="dc__border py-4 w-180">
-            {items.map((popUpMenuItem) => {
-                if ('label' in popUpMenuItem) {
-                    const { label, onClick, disabled, Icon, iconType = 'fill' } = popUpMenuItem
-
-                    return (
-                        <button
-                            key={label}
-                            type="button"
-                            className={`dc__transparent w-100 py-6 px-8 flexbox dc__align-items-center dc__gap-8 ${disabled ? ' dc__opacity-0_5 cursor-not-allowed' : 'dc__hover-n50'}`}
-                            onClick={onClick}
-                            disabled={disabled}
-                        >
-                            {Icon && (
-                                <Icon
-                                    className={`icon-dim-16 ${iconType === 'fill' ? 'fcn-7' : ''} ${iconType === 'stroke' ? 'scn-7' : ''}`}
-                                />
-                            )}
-                            <span className="dc__truncate cn-9 fs-13 lh-20">{label}</span>
-                        </button>
-                    )
-                }
-
-                return popUpMenuItem
-            })}
-        </PopupMenu.Body>
-    </PopupMenu>
-)
-
 export const EnvironmentOverviewTable = ({
     rows = [],
     isVirtualEnv,
@@ -231,7 +192,7 @@ export const EnvironmentOverviewTable = ({
                                 {name}
                             </Link>
                         </Tooltip>
-                        {!!popUpMenuItems?.length && renderPopUpMenu(popUpMenuItems)}
+                        {!!popUpMenuItems?.length && <EnvironmentOverviewPopupMenu popUpMenuItems={popUpMenuItems} />}
                     </div>
                 </div>
                 <div
diff --git a/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.types.ts b/src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewTable.types.ts
@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { FunctionComponent, MouseEvent, ReactElement, SVGProps } from 'react'
+import { MouseEvent, MutableRefObject, PropsWithChildren, ReactElement } from 'react'
+
+import { IconName } from '@devtron-labs/devtron-fe-common-lib'
 
 import { EnvironmentOverviewTableHeaderKeys } from './EnvironmentOverview.constants'
 
@@ -32,8 +34,7 @@ export interface EnvironmentOverviewTableRowData {
 export type EnvironmentOverviewTablePopUpMenuItem =
     | {
           label: string
-          Icon?: FunctionComponent<SVGProps<SVGSVGElement>>
-          iconType?: 'fill' | 'stroke'
+          iconName?: IconName
           disabled?: boolean
           onClick?: (event: MouseEvent<HTMLButtonElement>) => void
       }
@@ -54,3 +55,11 @@ export interface EnvironmentOverviewTableProps {
     isVirtualEnv?: boolean
     onCheckboxSelect: (id: EnvironmentOverviewTableRowData['id'], isChecked: boolean, isAllChecked: boolean) => void
 }
+
+export interface EnvironmentOverviewBulkSelectionWidgetProps
+    extends PropsWithChildren<{
+            count: number
+            onClose: () => void
+            parentRef: MutableRefObject<HTMLDivElement>
+        }>,
+        Pick<EnvironmentOverviewTableRow, 'popUpMenuItems'> {}
diff --git a/src/Pages/Shared/EnvironmentOverviewTable/index.ts b/src/Pages/Shared/EnvironmentOverviewTable/index.ts
@@ -15,5 +15,6 @@
  */
 
 export { EnvironmentOverviewTableSortableKeys } from './EnvironmentOverview.constants'
+export * from './EnvironmentOverviewBulkSelectionActionWidget'
 export * from './EnvironmentOverviewTable.component'
 export * from './EnvironmentOverviewTable.types'
diff --git a/src/components/ApplicationGroup/AppGroup.utils.ts b/src/components/ApplicationGroup/AppGroup.utils.ts
@@ -35,6 +35,7 @@ import {
     CDWorkflowStatusType,
     CIWorkflowStatusType,
     ProcessWorkFlowStatusType,
+    AppGroupListType,
 } from './AppGroup.types'
 
 let timeoutId
@@ -335,3 +336,39 @@ export const getAppGroupDeploymentHistoryLink = (
     }
     return `${URLS.APP}/${appId}/${URLS.APP_CD_DETAILS}/${envId}/${pipelineId}${type ? `?type=${type}` : ''}`
 }
+
+export const parseAppListData = (
+    data: AppGroupListType,
+    statusRecord: Record<string, { status: string; pipelineId: number }>,
+) => {
+    const parsedData = {
+        environment: data.environmentName,
+        namespace: data.namespace || '-',
+        cluster: data.clusterName,
+        appInfoList: [],
+    }
+
+    data?.apps?.forEach((app) => {
+        const appInfo = {
+            appId: app.appId,
+            application: app.appName,
+            appStatus: app.appStatus,
+            deploymentStatus: statusRecord[app.appId].status,
+            pipelineId: statusRecord[app.appId].pipelineId,
+            lastDeployed: app.lastDeployedTime,
+            lastDeployedBy: app.lastDeployedBy,
+            lastDeployedImage: app.lastDeployedImage,
+            commits: app.commits,
+            ciArtifactId: app.ciArtifactId,
+        }
+        parsedData.appInfoList.push(appInfo)
+    })
+
+    return parsedData
+}
+
+export const getDeploymentHistoryLink = (appId: number, pipelineId: number, envId: string) =>
+    `${URLS.APPLICATION_GROUP}/${envId}/cd-details/${appId}/${pipelineId}/`
+
+export const getAppRedirectLink = (appId: number, envId: number) =>
+    `${URLS.APPLICATION_GROUP}/${envId}${URLS.DETAILS}/${appId}`
diff --git a/src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx b/src/components/ApplicationGroup/Details/EnvironmentOverview/EnvironmentOverview.tsx

Original file line number	Diff line number	Diff line change
`@@ -45,3 +45,5 @@ export const EnvironmentOverviewTableHeaderValues: Record<keyof typeof Environme`
`45`	`45`	`DEPLOYED_BY: 'DEPLOYED BY',`
`46`	`46`	`STATUS: null,`
`47`	`47`	`}`
	`48`	`+`
	`49`	`+export const ENVIRONMENT_OVERVIEW_DRAG_SELECTOR_IDENTIFIER = 'environment-overview-drag-selector'`