Merge pull request #1634 from devtron-labs/fix-argo-app-stream-api

mukultayal135 · web-flow · commit 872affd65cde · 2024-02-26T13:12:49.000+05:30
fix: argo app stream api
diff --git a/src/components/app/details/appDetails/AppDetails.tsx b/src/components/app/details/appDetails/AppDetails.tsx
@@ -49,7 +49,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,
@@ -228,7 +228,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 +578,6 @@ export const Details: React.FC<DetailsType> = ({
                     <DeletedAppComponent
                         resourceTreeFetchTimeOut={resourceTreeFetchTimeOut}
                         showApplicationDetailedModal={showApplicationDetailedModal}
-                        appStreamData={streamData}
                     />
                 ) : (
                     <AppNotConfigured
@@ -622,7 +620,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}
@@ -676,15 +673,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 +771,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} />
diff --git a/src/components/app/details/appDetails/DeploymentStatusBreakdown.tsx b/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}
                         />
                     </>
                 ) : (
diff --git a/src/components/app/details/appDetails/DeploymentStatusDetailModal.tsx b/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}
                         />
                     )}
diff --git a/src/components/app/details/appDetails/DeploymentStatusDetailRow.tsx b/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>
             )
diff --git a/src/components/app/details/appDetails/IssuesCard.tsx b/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,
@@ -22,7 +22,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 = ({ cardLoading, setErrorsList, toggleIssuesModal, setDetailed }: 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)
diff --git a/src/components/app/details/appDetails/SourceInfo.tsx b/src/components/app/details/appDetails/SourceInfo.tsx
@@ -25,7 +25,6 @@ const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadC
 
 export const SourceInfo = ({
     appDetails,
-    appStreamData,
     setDetailed = null,
     environment,
     environments,
@@ -231,7 +230,6 @@ export const SourceInfo = ({
                     {isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
                     {!loadingResourceTree && (
                         <IssuesCard
-                            appStreamData={appStreamData}
                             cardLoading={cardLoading}
                             toggleIssuesModal={toggleIssuesModal}
                             setErrorsList={setErrorsList}
diff --git a/src/components/app/details/appDetails/appDetails.type.ts b/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, OptionType } from '../../types'
 import { SyncErrorType, AppDetails } from '../../../v2/appDetails/appDetails.type'
 
 export enum AppMetricsTab {
@@ -100,15 +100,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 +137,6 @@ export interface DeploymentStatusDetailRowType {
     type: string
     hideVerticalConnector?: boolean
     deploymentDetailedData: DeploymentStatusDetailsBreakdownDataType
-    streamData?: AppStreamData
 }
 
 export interface ErrorInfoStatusBarType {
@@ -213,7 +210,6 @@ export interface DeploymentStatusCardType {
 }
 
 export interface IssuesCardType {
-    appStreamData?: AppStreamData
     cardLoading?: boolean
     setErrorsList: React.Dispatch<React.SetStateAction<ErrorItem[]>>
     toggleIssuesModal?: React.Dispatch<React.SetStateAction<boolean>>
diff --git a/src/components/app/details/cdDetails/DeploymentDetailSteps.tsx b/src/components/app/details/cdDetails/DeploymentDetailSteps.tsx
@@ -143,7 +143,6 @@ export default function DeploymentDetailSteps({
             )}
             <DeploymentStatusDetailBreakdown
                 deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
-                streamData={null}
                 isVirtualEnvironment={isVirtualEnv.current}
             />
         </div>
diff --git a/src/components/app/types.ts b/src/components/app/types.ts
@@ -520,7 +520,6 @@ export interface TagChipsContainerType {
 }
 export interface SourceInfoType {
     appDetails: AppDetails
-    appStreamData?: AppStreamData
     setDetailed?: React.Dispatch<React.SetStateAction<boolean>>
     environment: AppEnvironment
     environments: AppEnvironment[]
diff --git a/src/components/v2/appDetails/AppDetails.component.tsx b/src/components/v2/appDetails/AppDetails.component.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import './appDetails.scss'
 import { useLocation, useParams } from 'react-router'
 import { DeploymentAppTypes, Progressing } from '@devtron-labs/devtron-fe-common-lib'
-import { AppDetailsComponentType, AppStreamData, AppType } from './appDetails.type'
+import { AppDetailsComponentType, AppType } from './appDetails.type'
 import IndexStore from './index.store'
 import EnvironmentStatusComponent from './sourceInfo/environmentStatus/EnvironmentStatus.component'
 import EnvironmentSelectorComponent from './sourceInfo/EnvironmentSelector.component'
@@ -39,7 +39,6 @@ const AppDetailsComponent = ({
     loadingResourceTree,
 }: AppDetailsComponentType) => {
     const params = useParams<{ appId: string; envId: string; nodeType: string }>()
-    const [streamData] = useState<AppStreamData>(null)
     const [appDetails] = useSharedState(IndexStore.getAppDetails(), IndexStore.getAppDetailsObservable())
     const isVirtualEnv = useRef(appDetails?.isVirtualEnvironment)
     const location = useLocation()
@@ -174,7 +173,6 @@ const AppDetailsComponent = ({
                 />
                 {!appDetails.deploymentAppDeleteRequest && (
                     <EnvironmentStatusComponent
-                        appStreamData={streamData}
                         loadingDetails={loadingDetails || !appDetails?.appType}
                         loadingResourceTree={loadingResourceTree || !appDetails?.appType}
                         deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
@@ -204,7 +202,6 @@ const AppDetailsComponent = ({
                 <DeploymentStatusDetailModal
                     appName={appDetails.appName}
                     environmentName={appDetails.environmentName}
-                    streamData={streamData}
                     deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
                     isVirtualEnvironment={isVirtualEnv.current}
                     isLoading={isInitialTimelineDataLoading}
diff --git a/src/components/v2/appDetails/SyncError.component.tsx b/src/components/v2/appDetails/SyncError.component.tsx
@@ -22,7 +22,7 @@ import { ClusterConnectionResponse } from '../../app/details/appDetails/appDetai
 import { TOAST_INFO } from '../../../config/constantMessaging'
 import ClusterNotReachableDailog from '../../common/ClusterNotReachableDailog/ClusterNotReachableDialog'
 
-const SyncErrorComponent: React.FC<SyncErrorType> = ({ appStreamData, showApplicationDetailedModal }) => {
+const SyncErrorComponent: React.FC<SyncErrorType> = ({showApplicationDetailedModal }) => {
     const [collapsed, toggleCollapsed] = useState<boolean>(true)
     const [isImagePullBackOff, setIsImagePullBackOff] = useState(false)
     const [clusterConnectionError, setClusterConnectionError] = useState<boolean>(false)
@@ -32,7 +32,7 @@ const SyncErrorComponent: React.FC<SyncErrorType> = ({ appStreamData, showApplic
     const [nonCascadeDeleteDialog, showNonCascadeDeleteDialog] = useState<boolean>(false)
     const [forceDeleteDialog, showForceDeleteDialog] = useState(false)
     const appDetails = IndexStore.getAppDetails()
-    const conditions = appStreamData?.result?.application?.status?.conditions || []
+    const conditions = appDetails?.resourceTree?.conditions || []
 
     const verifyDeployedClusterConnectionStatus = async (): Promise<void> => {
         await getClusterConnectionStatus(appDetails.environmentId).then((response: ClusterConnectionResponse) => {
diff --git a/src/components/v2/appDetails/appDetails.type.ts b/src/components/v2/appDetails/appDetails.type.ts
@@ -223,6 +223,8 @@ export interface ResourceTree {
     nodes: Array<Node>
     podMetadata: Array<PodMetaData>
     status: string
+    resourcesSyncResult?: Record<string,string>
+
 }
 
 export interface PodMetaData {
@@ -467,7 +469,6 @@ export interface LogState {
 
 export interface AppStatusDetailType {
     close: () => void
-    appStreamData: any
     showAppStatusMessage?: boolean
     title?: string
     appStatus?: string
@@ -481,7 +482,6 @@ export interface StatusFilterButtonType {
 }
 
 export interface SyncErrorType {
-    appStreamData: AppStreamData
     showApplicationDetailedModal?: () => void
 }
 
diff --git a/src/components/v2/appDetails/sourceInfo/environment.type.ts b/src/components/v2/appDetails/sourceInfo/environment.type.ts
@@ -1,9 +1,8 @@
 import { DeploymentStatusDetailsBreakdownDataType } from '../../../app/details/appDetails/appDetails.type'
 import { HelmReleaseStatus } from '../../../external-apps/ExternalAppService'
-import { AppDetails, AppStreamData } from '../appDetails.type'
+import { AppDetails } from '../appDetails.type'
 
 export interface EnvironmentStatusComponentType {
-    appStreamData: any
     loadingDetails: boolean
     loadingResourceTree: boolean
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
@@ -32,7 +31,6 @@ export interface NodeStreamMap {
 }
 
 export interface AppStatusDetailsChartType {
-    appStreamData: AppStreamData
     filterRemoveHealth?: boolean
     showFooter: boolean
 }
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/AppStatusDetailModal.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/AppStatusDetailModal.tsx
@@ -13,7 +13,6 @@ import { Drawer } from '@devtron-labs/devtron-fe-common-lib'
 
 const AppStatusDetailModal = ({
     close,
-    appStreamData,
     showAppStatusMessage,
     title,
     appStatus,
@@ -146,7 +145,7 @@ const AppStatusDetailModal = ({
                             {APP_STATUS_CUSTOM_MESSAGES[_appDetails.resourceTree?.status.toUpperCase()]}
                         </div>
                     )}
-                    <AppStatusDetailsChart appStreamData={appStreamData} showFooter={showFooter} />
+                    <AppStatusDetailsChart showFooter={showFooter} />
                 </div>
             </div>
         </Drawer>
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/AppStatusDetailsChart.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/AppStatusDetailsChart.tsx
@@ -1,36 +1,18 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { ReactComponent as InfoIcon } from '../../../../../assets/icons/info-filled.svg'
 import { ReactComponent as Chat } from '../../../../../assets/icons/ic-chat-circle-dots.svg'
 import { APP_STATUS_HEADERS, DEPLOYMENT_STATUS } from '../../../../../config'
 import { StatusFilterButtonComponent } from '../../k8Resource/StatusFilterButton.component'
 import IndexStore from '../../index.store'
-import { AppStatusDetailsChartType, NodeStreamMap } from '../environment.type'
+import { AppStatusDetailsChartType } from '../environment.type'
 import { AggregatedNodes } from '../../../../app/types'
 import { aggregateNodes } from '../../../../app/details/appDetails/utils'
 import { STATUS_SORTING_ORDER } from './constants'
 
-export default function AppStatusDetailsChart({
-    appStreamData,
-    filterRemoveHealth = false,
-    showFooter,
-}: AppStatusDetailsChartType) {
+export default function AppStatusDetailsChart({ filterRemoveHealth = false, showFooter }: AppStatusDetailsChartType) {
     const _appDetails = IndexStore.getAppDetails()
-    const [nodeStatusMap, setNodeStatusMap] = useState<Map<string, NodeStreamMap>>()
     const [currentFilter, setCurrentFilter] = useState('')
 
-    useEffect(() => {
-        try {
-            const stats = appStreamData.result.application.status.operationState.syncResult.resources.reduce(
-                (agg, curr) => {
-                    agg.set(`${curr.kind}/${curr.name}`, curr)
-                    return agg
-                },
-                new Map(),
-            )
-            setNodeStatusMap(stats)
-        } catch (error) {}
-    }, [appStreamData])
-
     const nodes: AggregatedNodes = useMemo(() => {
         return aggregateNodes(_appDetails.resourceTree?.nodes || [], _appDetails.resourceTree?.podMetadata || [])
     }, [_appDetails])
@@ -58,9 +40,11 @@ export default function AppStatusDetailsChart({
     }
 
     function getNodeMessage(kind: string, name: string) {
-        if (nodeStatusMap && nodeStatusMap.has(`${kind}/${name}`)) {
-            const { message } = nodeStatusMap.get(`${kind}/${name}`)
-            return message
+        if (
+            _appDetails.resourceTree?.resourcesSyncResult &&
+            _appDetails.resourceTree?.resourcesSyncResult.hasOwnProperty(`${kind}/${name}`)
+        ) {
+            return _appDetails.resourceTree.resourcesSyncResult[`${kind}/${name}`]
         }
         return ''
     }
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx
diff --git a/src/components/v2/devtronStackManager/DevtronStackManager.tsx b/src/components/v2/devtronStackManager/DevtronStackManager.tsx
diff --git a/src/components/v2/devtronStackManager/DevtronStackManager.utils.ts b/src/components/v2/devtronStackManager/DevtronStackManager.utils.ts

Original file line number	Diff line number	Diff line change
`@@ -520,7 +520,6 @@ export interface TagChipsContainerType {`
`520`	`520`	`}`
`521`	`521`	`export interface SourceInfoType {`
`522`	`522`	`appDetails: AppDetails`
`523`		`- appStreamData?: AppStreamData`
`524`	`523`	`setDetailed?: React.Dispatch<React.SetStateAction<boolean>>`
`525`	`524`	`environment: AppEnvironment`
`526`	`525`	`environments: AppEnvironment[]`