feat: Integration of helm issue card for App Details for pre/post hooks

src/components/app/details/appDetails/AppDetails.tsx

@@ -10,6 +10,7 @@ import {
     DeploymentAppTypes,
     useSearchString,
     useAsync,
+    Host,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -49,7 +50,7 @@ import { ReactComponent as StopButton } from '../../../../assets/icons/ic-stop.s
 import { ReactComponent as ForwardArrow } from '../../../../assets/icons/ic-arrow-forward.svg'
 
 import { SourceInfo } from './SourceInfo'
-import { AppStreamData, Application, Nodes, AggregatedNodes, NodeDetailTabs } from '../../types'
+import { Application, Nodes, AggregatedNodes, NodeDetailTabs } from '../../types'
 import {
     aggregateNodes,
     getSelectedNodeItems,
@@ -68,6 +69,7 @@ import {
     importComponentFromFELibrary,
     sortObjectArrayAlphabetically,
     sortOptionsByValue,
+    useEventSource,
 } from '../../../common/helpers/Helpers'
 import { AppLevelExternalLinks } from '../../../externalLinks/ExternalLinks.component'
 import { getExternalLinks } from '../../../externalLinks/ExternalLinks.service'
@@ -227,8 +229,6 @@ export const Details: React.FC<DetailsType> = ({
 }) => {
     const params = useParams<{ appId: string; envId: string }>()
     const location = useLocation()
-    // fixme: the state is not being set anywhere and just being drilled down
-    const [streamData] = useState<AppStreamData>(null)
     const [detailedStatus, toggleDetailedStatus] = useState<boolean>(false)
     const [resourceTreeFetchTimeOut, setResourceTreeFetchTimeOut] = useState<boolean>(false)
     const [urlInfo, setUrlInfo] = useState<boolean>(false)
@@ -579,7 +579,6 @@ export const Details: React.FC<DetailsType> = ({
                     <DeletedAppComponent
                         resourceTreeFetchTimeOut={resourceTreeFetchTimeOut}
                         showApplicationDetailedModal={showApplicationDetailedModal}
-                        appStreamData={streamData}
                     />
                 ) : (
                     <AppNotConfigured
@@ -622,7 +621,6 @@ export const Details: React.FC<DetailsType> = ({
             <div className="w-100 pt-16 pr-20 pb-16 pl-20 app-info-bg-gradient">
                 <SourceInfo
                     appDetails={appDetails}
-                    appStreamData={streamData}
                     setDetailed={toggleDetailedStatus}
                     environment={environment}
                     environments={environments}
@@ -641,6 +639,7 @@ export const Details: React.FC<DetailsType> = ({
                     envId={appDetails?.environmentId}
                     ciArtifactId={appDetails?.ciArtifactId}
                     setErrorsList={setErrorsList}
+                    errorList={errorsList}
                 />
             </div>
             {!loadingDetails && !loadingResourceTree && !appDetails?.deploymentAppDeleteRequest ? (
@@ -676,15 +675,13 @@ export const Details: React.FC<DetailsType> = ({
             {detailedStatus && (
                 <AppStatusDetailModal
                     close={hideAppDetailsStatus}
-                    appStreamData={streamData}
                     showAppStatusMessage={false}
                 />
             )}
             {location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM) && (
                 <DeploymentStatusDetailModal
                     appName={appDetails?.appName}
                     environmentName={appDetails?.environmentName}
-                    streamData={streamData}
                     deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
                     isVirtualEnvironment={isVirtualEnvRef.current}
                     isLoading={isInitialTimelineDataLoading}
@@ -776,15 +773,13 @@ export const Details: React.FC<DetailsType> = ({
 const DeletedAppComponent: React.FC<DeletedAppComponentType> = ({
     resourceTreeFetchTimeOut,
     showApplicationDetailedModal,
-    appStreamData,
 }) => {
     if (resourceTreeFetchTimeOut) {
         return (
             <>
                 <div className="mt-16 mb-9">
                     <SyncErrorComponent
                         showApplicationDetailedModal={showApplicationDetailedModal}
-                        appStreamData={appStreamData}
                     />
                 </div>
                 <EmptyK8sResourceComponent emptyStateMessage={RESOURCES_NOT_FOUND} />

src/components/app/details/appDetails/DeploymentStatusBreakdown.tsx

@@ -10,7 +10,6 @@ import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
 
 export default function DeploymentStatusDetailBreakdown({
     deploymentStatusDetailsBreakdownData,
-    streamData,
     isVirtualEnvironment,
 }: DeploymentStatusDetailBreakdownType) {
     const _appDetails = IndexStore.getAppDetails()
@@ -71,7 +70,6 @@ export default function DeploymentStatusDetailBreakdown({
                             type={TIMELINE_STATUS.APP_HEALTH}
                             hideVerticalConnector
                             deploymentDetailedData={deploymentStatusDetailsBreakdownData}
-                            streamData={streamData}
                         />
                     </>
                 ) : (

src/components/app/details/appDetails/DeploymentStatusDetailModal.tsx

@@ -9,7 +9,6 @@ import { Drawer, Progressing } from '@devtron-labs/devtron-fe-common-lib'
 export default function DeploymentStatusDetailModal({
     appName,
     environmentName,
-    streamData,
     deploymentStatusDetailsBreakdownData,
     isVirtualEnvironment,
     isLoading,
@@ -93,7 +92,6 @@ export default function DeploymentStatusDetailModal({
                     ) : (
                         <DeploymentStatusDetailBreakdown
                             deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
-                            streamData={streamData}
                             isVirtualEnvironment={isVirtualEnvironment}
                         />
                     )}

src/components/app/details/appDetails/DeploymentStatusDetailRow.tsx

@@ -27,8 +27,7 @@ import { statusIcon } from '../../config'
 export const DeploymentStatusDetailRow = ({
     type,
     hideVerticalConnector,
-    deploymentDetailedData,
-    streamData,
+    deploymentDetailedData
 }: DeploymentStatusDetailRowType) => {
     const { appId, envId } = useParams<{ appId: string; envId: string }>()
     const statusBreakDownType = deploymentDetailedData.deploymentStatusBreakdown[type]
@@ -49,7 +48,6 @@ export const DeploymentStatusDetailRow = ({
             showError(error)
         }
     }
-
     const toggleDropdown = () => {
         toggleCollapsed(!collapsed)
     }
@@ -145,7 +143,10 @@ export const DeploymentStatusDetailRow = ({
                         </div>
                     )}
                     <div>
-                        <AppStatusDetailsChart appStreamData={streamData} filterRemoveHealth showFooter={false} />
+                        <AppStatusDetailsChart
+                            filterRemoveHealth
+                            showFooter={false}
+                        />
                     </div>
                 </div>
             )

src/components/app/details/appDetails/IssuesCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect } from 'react'
 import Tippy from '@tippyjs/react'
 import {
     DeploymentAppTypes,
@@ -9,8 +9,6 @@ import {
     ForceDeleteDialog,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { toast } from 'react-toastify'
-import { ReactComponent as Question } from '../../../../assets/icons/ic-help-outline.svg'
-import { ReactComponent as ErrorIcon } from '../../../../assets/icons/ic-warning.svg'
 import { deleteArgoCDAppWithNonCascade, getClusterConnectionStatus } from './appDetails.service'
 import { ClusterConnectionResponse, ErrorItem, IssuesCardType } from './appDetails.type'
 import { TOAST_INFO } from '../../../../config/constantMessaging'
@@ -21,8 +19,10 @@ import { AppDetailsErrorType } from '../../../../config'
 import IndexStore from '../../../v2/appDetails/index.store'
 import { renderErrorHeaderMessage } from '../../../common/error/error.utils'
 import LoadingCard from './LoadingCard'
+import { ReactComponent as Question } from '../../../../assets/icons/ic-help-outline.svg'
+import { ReactComponent as ErrorIcon } from '../../../../assets/icons/ic-warning.svg'
 
-const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesModal, setDetailed }: IssuesCardType) => {
+const IssuesCard = ({cardLoading, setErrorsList, toggleIssuesModal, setDetailed, releaseStatus, errorList }: IssuesCardType) => {
     const [forceDeleteDialog, showForceDeleteDialog] = useState(false)
     const [nonCascadeDeleteDialog, showNonCascadeDeleteDialog] = useState(false)
     const [clusterConnectionError, setClusterConnectionError] = useState(false)
@@ -31,8 +31,8 @@ const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesMod
     const [forceDeleteDialogMessage, setForceDeleteDialogMessage] = useState('')
     const [isImagePullBackOff, setIsImagePullBackOff] = useState(false)
 
-    const conditions = useMemo(() => appStreamData?.result?.application?.status?.conditions || [], [appStreamData])
-    const appDetails = useMemo(() => IndexStore.getAppDetails(), [])
+    const appDetails = IndexStore.getAppDetails()
+    const conditions = appDetails?.resourceTree?.conditions || []
 
     const showIssuesListingModal = () => {
         toggleIssuesModal(true)
@@ -116,8 +116,6 @@ const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesMod
         await nonCascadeDeleteArgoCDApp(false)
     }
 
-    const errorCounter = conditions?.length + (isImagePullBackOff ? 1 : 0) + (clusterConnectionError ? 1 : 0)
-
     const handleForceDelete = () => {
         nonCascadeDeleteArgoCDApp(true)
     }
@@ -138,20 +136,30 @@ const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesMod
             })
         }
 
-        conditions?.forEach((condition) => {
+        // Error message For helm apps only
+        if (releaseStatus) {
             errorsList.push({
-                error: condition.type,
-                message: condition.message,
+                error: releaseStatus.status,
+                message: releaseStatus.description,
             })
-        })
+        }
+
+        // Error message For Argo apps only
+        if (conditions?.length) {
+            conditions.forEach((condition) => {
+                errorsList.push({
+                    error: condition.type,
+                    message: condition.message,
+                })
+            })
+        }
 
         if (isImagePullBackOff && !appDetails.externalCi) {
             errorsList.push({
                 error: 'ImagePullBackOff',
                 message: renderErrorHeaderMessage(appDetails, 'sync-error', showApplicationDetailedModal),
             })
         }
-
         return errorsList
     }
 
@@ -169,9 +177,6 @@ const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesMod
         appDetails.clusterName,
     ])
 
-    const getErrorCountText = () => {
-        return errorCounter > 1 ? `${errorCounter} Errors` : `${errorCounter} Error`
-    }
 
     if (!appDetails || (conditions?.length === 0 && !isImagePullBackOff && !clusterConnectionError)) {
         return null
@@ -203,7 +208,9 @@ const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesMod
                         </Tippy>
                     </div>
                     <div className="flex fs-12 fw-4">
-                        <div className="fs-13 fw-6  lh-20 f-degraded">{getErrorCountText()}</div>
+                        <div className="fs-13 fw-6  lh-20 f-degraded">
+                            {errorList.length} {errorList.length > 1 ? 'Errors' : 'Error'}
+                        </div>
                     </div>
                 </div>
                 <ErrorIcon className="form__icon--error icon-dim-24" />

src/components/app/details/appDetails/IssuesListingModal.tsx

@@ -27,7 +27,7 @@ const IssuesListingModal = ({ errorsList, closeIssuesListingModal }: IssuesListi
         return errorsList?.map((errorItem) => {
             return (
                 <div className="issues-listing-modal__body__row">
-                    <div className="issues-listing-modal__body__row__col-1">{errorItem.error}</div>
+                    <div className="issues-listing-modal__body__row__col-1 dc__capitalize">{errorItem.error}</div>
                     <div className="issues-listing-modal__body__row__col-2">{errorItem.message}</div>
                 </div>
             )

src/components/app/details/appDetails/SourceInfo.tsx

@@ -25,7 +25,6 @@ const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadC
 
 export const SourceInfo = ({
     appDetails,
-    appStreamData,
     setDetailed = null,
     environment,
     environments,
@@ -44,6 +43,7 @@ export const SourceInfo = ({
     envId,
     ciArtifactId,
     setErrorsList,
+    errorList,
 }: SourceInfoType) => {
     const [showVulnerabilitiesCard, setShowVulnerabilitiesCard] = useState<boolean>(false)
     const isdeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
@@ -231,11 +231,12 @@ export const SourceInfo = ({
                     {isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
                     {!loadingResourceTree && (
                         <IssuesCard
-                            appStreamData={appStreamData}
                             cardLoading={cardLoading}
                             toggleIssuesModal={toggleIssuesModal}
                             setErrorsList={setErrorsList}
                             setDetailed={setDetailed}
+                            releaseStatus={appDetails.resourceTree?.releaseStatus}
+                            errorList={errorList}
                         />
                     )}
                     <DeploymentStatusCard

src/components/app/details/appDetails/appDetails.type.ts

@@ -1,6 +1,7 @@
 import { ResponseType } from '@devtron-labs/devtron-fe-common-lib'
-import { AggregatedNodes, AppStreamData, OptionType } from '../../types'
-import { SyncErrorType, AppDetails } from '../../../v2/appDetails/appDetails.type'
+import { AggregatedNodes, AppStreamData, OptionType, ReleaseStatusType } from '../../types'
+import { SyncErrorType } from '../../../v2/appDetails/appDetails.type'
+import { AppDetails } from '../../../v2/appDetails/appDetails.type'
 
 export enum AppMetricsTab {
     Aggregate = 'aggregate',
@@ -100,15 +101,13 @@ export interface DeploymentStatusDetailsBreakdownDataType {
 
 export interface DeploymentStatusDetailBreakdownType {
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
-    streamData?: AppStreamData
     isVirtualEnvironment?: boolean
 }
 
 export interface DeploymentStatusDetailModalType {
     appName: string
     environmentName: string
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
-    streamData: AppStreamData
     isVirtualEnvironment: boolean
     /**
      * Loading state for the timeline data
@@ -139,7 +138,6 @@ export interface DeploymentStatusDetailRowType {
     type: string
     hideVerticalConnector?: boolean
     deploymentDetailedData: DeploymentStatusDetailsBreakdownDataType
-    streamData?: AppStreamData
 }
 
 export interface ErrorInfoStatusBarType {
@@ -212,12 +210,19 @@ export interface DeploymentStatusCardType {
     refetchDeploymentStatus: (showTimeline?: boolean) => void
 }
 
+export interface ConditionType{
+    lastTransitionTime: string
+    message: string
+    type: string
+}
+
 export interface IssuesCardType {
-    appStreamData?: AppStreamData
     cardLoading?: boolean
     setErrorsList: React.Dispatch<React.SetStateAction<ErrorItem[]>>
     toggleIssuesModal?: React.Dispatch<React.SetStateAction<boolean>>
     setDetailed?: React.Dispatch<React.SetStateAction<boolean>>
+    releaseStatus?: ReleaseStatusType
+    errorList?: ErrorItem[]
 }
 
 export interface SecurityVulnerabilityCardType {

src/components/app/details/cdDetails/DeploymentDetailSteps.tsx

@@ -143,7 +143,6 @@ export default function DeploymentDetailSteps({
             )}
             <DeploymentStatusDetailBreakdown
                 deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
-                streamData={null}
                 isVirtualEnvironment={isVirtualEnv.current}
             />
         </div>

src/components/app/types.ts

@@ -57,6 +57,11 @@ export interface AddNewAppState {
     createAppLoader: boolean
 }
 
+export interface ReleaseStatusType {
+    description: string
+    message: string
+    status: string
+}
 export interface AppDetails {
     appId: number
     appName: string
@@ -137,6 +142,7 @@ interface ResourceTree {
     status: string
     podMetadata: PodMetadatum[]
     conditions?: any
+    releaseStatus?: ReleaseStatusType
 }
 
 export interface PodMetadatum {
@@ -520,7 +526,6 @@ export interface TagChipsContainerType {
 }
 export interface SourceInfoType {
     appDetails: AppDetails
-    appStreamData?: AppStreamData
     setDetailed?: React.Dispatch<React.SetStateAction<boolean>>
     environment: AppEnvironment
     environments: AppEnvironment[]
@@ -543,6 +548,7 @@ export interface SourceInfoType {
     envId?: number | string
     ciArtifactId?: number
     setErrorsList?: React.Dispatch<React.SetStateAction<ErrorItem[]>>
+    errorList?: ErrorItem[]
 }
 
 export interface EnvironmentListMinType {