feat: implement AppStatusBody component and integrate into AppStatusModal

Author: AbhishekA1509

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -0,0 +1,60 @@
+import { ComponentProps, ReactNode, useMemo } from 'react'
+
+import { Tooltip } from '@Common/Tooltip'
+
+import { ShowMoreText } from '../ShowMoreText'
+import { AppStatus } from '../StatusComponent'
+import { APP_STATUS_CUSTOM_MESSAGES } from './constants'
+import { AppStatusModalProps } from './types'
+import { getAppStatusMessageFromAppDetails } from './utils'
+
+const InfoCardItem = ({ heading, value, isLast = false }: { heading: string; value: ReactNode; isLast?: boolean }) => (
+    <div
+        className={`py-12 px-16 flexbox dc__align-items-center dc__gap-16 ${!isLast ? 'border__secondary--bottom' : ''}`}
+    >
+        <Tooltip content={heading}>
+            <h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate">{heading}</h3>
+        </Tooltip>
+
+        {typeof value === 'string' ? <ShowMoreText textClass="cn-9 fs-13 fw-4 lh-1-5" text={value} /> : value}
+    </div>
+)
+
+export const AppStatusBody = ({ appDetails, type }: Pick<AppStatusModalProps, 'appDetails' | 'type'>) => {
+    const message = useMemo(() => getAppStatusMessageFromAppDetails(appDetails), [appDetails])
+    const customMessage = APP_STATUS_CUSTOM_MESSAGES[appDetails.resourceTree?.status?.toUpperCase()]
+
+    const infoCardItems: (Omit<ComponentProps<typeof InfoCardItem>, 'isLast'> & { id: number })[] = [
+        {
+            id: 1,
+            heading: type !== 'stack-manager' ? 'Application Status' : 'Status',
+            value: <AppStatus status={appDetails.resourceTree?.status?.toUpperCase() || appDetails.appStatus} />,
+        },
+        message && {
+            id: 2,
+            heading: 'Message',
+            value: message,
+        },
+        customMessage && {
+            id: 3,
+            heading: 'Message',
+            value: customMessage,
+        },
+    ]
+
+    return (
+        <div className="flexbox-col dc__gap-16">
+            {/* Info card */}
+            <div className="flexbox-col br-8 border__primary bg__primary shadow__card--secondary">
+                {infoCardItems.map((item, index) => (
+                    <InfoCardItem
+                        key={item.id}
+                        heading={item.heading}
+                        value={item.value}
+                        isLast={index === infoCardItems.length - 1}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}

src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx

@@ -3,9 +3,10 @@ import { ComponentSizeType } from '@Shared/constants'
 
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
+import { AppStatusBody } from './AppStatusBody'
 import { AppStatusModalProps } from './types'
 
-const AppStatusModal = ({ title, handleClose }: AppStatusModalProps) => (
+const AppStatusModal = ({ title, handleClose, type, appDetails }: AppStatusModalProps) => (
     <Drawer position="right" width="1024px" onClose={handleClose} onEscape={handleClose}>
         <div
             className="flexbox-col dc__content-space h-100 border__primary--left bg__modal--primary shadow__modal"
@@ -28,7 +29,9 @@ const AppStatusModal = ({ title, handleClose }: AppStatusModalProps) => (
                 </div>
             </div>
 
-            <div className="flexbox-col flex-grow-1 dc__overflow-auto p-20 dc__gap-16" />
+            <div className="flexbox-col flex-grow-1 dc__overflow-auto p-20 dc__gap-16">
+                <AppStatusBody appDetails={appDetails} type={type} />
+            </div>
         </div>
     </Drawer>
 )

src/Shared/Components/AppStatusModal/constants.ts

@@ -0,0 +1,5 @@
+export const APP_STATUS_CUSTOM_MESSAGES = {
+    HIBERNATED: "This application's workloads are scaled down to 0 replicas",
+    'PARTIALLY HIBERNATED': "Some of this application's workloads are scaled down to 0 replicas.",
+    INTEGRATION_INSTALLING: 'The installation will complete when status for all the below resources become HEALTHY.',
+}

src/Shared/Components/AppStatusModal/types.ts

@@ -1,6 +1,17 @@
 import { ReactNode } from 'react'
 
+import { AppDetails } from '@Shared/types'
+
 export interface AppStatusModalProps {
     title: ReactNode
     handleClose: () => void
+    type: 'devtron-app' | 'external-apps' | 'stack-manager' | 'release'
+    /**
+     * If not given
+     */
+    handleShowConfigDriftModal?: () => void
+    /**
+     * If given would not poll for app details and resource tree, Polling for gitops timeline would still be done
+     */
+    appDetails?: AppDetails
 }

src/Shared/Components/AppStatusModal/utils.ts

@@ -0,0 +1,31 @@
+import { aggregateNodes } from '@Shared/Helpers'
+import { AppDetails } from '@Shared/types'
+
+import { AggregatedNodes } from '../CICDHistory'
+
+export const getAppStatusMessageFromAppDetails = (appDetails: AppDetails): string => {
+    if (!appDetails?.resourceTree) {
+        return ''
+    }
+
+    const nodes: AggregatedNodes = aggregateNodes(
+        appDetails.resourceTree.nodes || [],
+        appDetails.resourceTree.podMetadata || [],
+    )
+
+    const { conditions } = appDetails.resourceTree
+    const rollout = nodes?.nodes?.Rollout?.entries()?.next()?.value?.[1]
+
+    if (Array.isArray(conditions) && conditions.length > 0 && conditions[0].message) {
+        return conditions[0].message
+    }
+
+    if (rollout?.health?.message) {
+        return rollout.health.message
+    }
+    if (appDetails.FluxAppStatusDetail) {
+        return appDetails.FluxAppStatusDetail.message
+    }
+
+    return ''
+}