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 { fetchAppDetailsInTime, fetchResourceTreeInTime } from '../../service'
 import {
@@ -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'
@@ -225,8 +227,7 @@ 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 [streamData, setStreamData] = useState<AppStreamData>(null)
     const [detailedStatus, toggleDetailedStatus] = useState<boolean>(false)
     const [resourceTreeFetchTimeOut, setResourceTreeFetchTimeOut] = useState<boolean>(false)
     const [urlInfo, setUrlInfo] = useState<boolean>(false)
@@ -271,6 +272,17 @@ export const Details: React.FC<DetailsType> = ({
     const interval = window._env_.DEVTRON_APP_DETAILS_POLLING_INTERVAL || 30000
     appDetailsRequestRef.current = appDetails?.deploymentAppDeleteRequest
 
+
+    const syncSSE = useEventSource(
+        `${Host}/api/v1/applications/stream?name=${appDetails?.appName}-${appDetails?.environmentName}`,
+        [params.appId, params.envId],
+        appDetails &&
+            !!appDetails.appName &&
+            !!appDetails.environmentName &&
+            appDetails.deploymentAppType !== DeploymentAppTypes.HELM,
+        (event) => setStreamData(JSON.parse(event.data)),
+    )
+
     const aggregatedNodes: AggregatedNodes = useMemo(() => {
         return aggregateNodes(appDetails?.resourceTree?.nodes || [], appDetails?.resourceTree?.podMetadata || [])
     }, [appDetails])
@@ -638,6 +650,7 @@ export const Details: React.FC<DetailsType> = ({
                     envId={appDetails?.environmentId}
                     ciArtifactId={appDetails?.ciArtifactId}
                     setErrorsList={setErrorsList}
+                    errorList={errorsList}
                 />
             </div>
             {!loadingDetails && !loadingResourceTree && !appDetails?.deploymentAppDeleteRequest ? (

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

@@ -23,7 +23,7 @@ import IndexStore from '../../../v2/appDetails/index.store'
 import { renderErrorHeaderMessage } from '../../../common/error/error.utils'
 import LoadingCard from './LoadingCard'
 
-const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesModal, setDetailed }: IssuesCardType) => {
+const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesModal, setDetailed, releaseStatus, errorList }: IssuesCardType) => {
     const [forceDeleteDialog, showForceDeleteDialog] = useState(false)
     const [nonCascadeDeleteDialog, showNonCascadeDeleteDialog] = useState(false)
     const [clusterConnectionError, setClusterConnectionError] = useState(false)
@@ -33,8 +33,8 @@ const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesMod
     const [isImagePullBackOff, setIsImagePullBackOff] = useState(false)
 
     const conditions = useMemo(() => appStreamData?.result?.application?.status?.conditions || [], [appStreamData])
-    const appDetails = useMemo(() => IndexStore.getAppDetails(), [])
 
+    const appDetails = useMemo(() => IndexStore.getAppDetails(), [])
     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 (appDetails.deploymentAppType === DeploymentAppTypes.HELM && releaseStatus) {
             errorsList.push({
-                error: condition.type,
-                message: condition.message,
+                error: releaseStatus.status,
+                message: releaseStatus.description,
             })
-        })
+        }
+
+        // Error message For Argo apps only
+        if (appDetails.deploymentAppType === DeploymentAppTypes.GITOPS && 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
@@ -199,7 +204,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

@@ -44,6 +44,7 @@ export function SourceInfo({
     envId,
     ciArtifactId,
     setErrorsList,
+    errorList,
 }: SourceInfoType) {
     const [showVulnerabilitiesCard, setShowVulnerabilitiesCard] = useState<boolean>(false)
     const isdeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
@@ -234,6 +235,8 @@ export function SourceInfo({
                             toggleIssuesModal={toggleIssuesModal}
                             setErrorsList={setErrorsList}
                             setDetailed={setDetailed}
+                            releaseStatus={appDetails.resourceTree?.releaseStatus}
+                            errorList={errorList}
                         />
                     )}
                     <DeploymentStatusCard

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

@@ -1,5 +1,5 @@
 import { ResponseType } from '@devtron-labs/devtron-fe-common-lib'
-import { AggregatedNodes, AppStreamData, OptionType } from '../../types'
+import { AggregatedNodes, AppStreamData, OptionType, ReleaseStatusType } from '../../types'
 import { SyncErrorType } from '../../../v2/appDetails/appDetails.type'
 import { AppDetails } from '../../../v2/appDetails/appDetails.type'
 
@@ -213,12 +213,21 @@ 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
+    conditions?: ConditionType[]
+    errorList?: ErrorItem[]
 }
 
 export interface SecurityVulnerabilityCardType {

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 {
@@ -548,6 +554,7 @@ export interface SourceInfoType {
   envId?: number | string
   ciArtifactId?: number 
   setErrorsList?: React.Dispatch<React.SetStateAction<ErrorItem[]>>
+  errorList?: ErrorItem[]
 }
 
 export interface EnvironmentListMinType {