Merge branch 'main' into custom-input-v2

Author: shivani170

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

@@ -3,7 +3,6 @@ import {
     showError,
     Progressing,
     ConfirmationDialog,
-    Host,
     noop,
     stopPropagation,
     multiSelectStyles,
@@ -24,7 +23,7 @@ import {
     HELM_DEPLOYMENT_STATUS_TEXT,
     RESOURCES_NOT_FOUND,
 } from '../../../../config'
-import { NavigationArrow, useAppContext, useEventSource, FragmentHOC, ScanDetailsModal } from '../../../common'
+import { NavigationArrow, useAppContext, FragmentHOC, ScanDetailsModal } from '../../../common'
 import { CustomValueContainer, groupHeaderStyle, GroupHeading, Option } from './../../../v2/common/ReactSelect.utils'
 import {
     getAppConfigStatus,
@@ -139,8 +138,10 @@ export default function AppDetail({ filteredEnvIds }: { filteredEnvIds?: string
 
                 // Set the URL and push to navigation stack
                 if (selectedEnvId) {
-                    const newUrl = getAppDetailsURL(params.appId, selectedEnvId)
-                    push(newUrl)
+                    if (String(selectedEnvId) !== String(params.envId)) {
+                        const newUrl = getAppDetailsURL(params.appId, selectedEnvId)
+                        push(newUrl)
+                    }
                 } else {
                     setEnvironmentId(null)
                 }
@@ -224,7 +225,8 @@ export const Details: React.FC<DetailsType> = ({
 }) => {
     const params = useParams<{ appId: string; envId: string }>()
     const location = useLocation()
-    const [streamData, setStreamData] = useState<AppStreamData>(null)
+    // 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)
@@ -246,13 +248,15 @@ export const Details: React.FC<DetailsType> = ({
     })
     const [loadingDetails, setLoadingDetails] = useState(true)
     const [loadingResourceTree, setLoadingResourceTree] = useState(true)
+    // State to track the loading state for the timeline data when the detailed status modal opens
+    const [isInitialTimelineDataLoading, setIsInitialTimelineDataLoading] = useState(true)
     const [errorsList, setErrorsList] = useState<ErrorItem[]>([])
     const appDetailsRef = useRef(null)
     const appDetailsRequestRef = useRef(null)
-    const deploymentModalShownRef = useRef(false)
     const { envId } = useParams<{ appId: string; envId?: string }>()
     const pollResourceTreeRef = useRef(true)
     const appDetailsAbortRef = useRef(null)
+    const shouldFetchTimelineRef = useRef(false)
 
     const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
         useState<DeploymentStatusDetailsBreakdownDataType>({
@@ -267,26 +271,18 @@ 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])
 
     useEffect(() => {
-        if (location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)) {
-            deploymentModalShownRef.current = true
-        } else {
-            deploymentModalShownRef.current = false
+        const isModalOpen = location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)
+        // Reset the loading state when the modal is closed
+        if (shouldFetchTimelineRef.current && !isModalOpen) {
+            setIsInitialTimelineDataLoading(true)
         }
+        // The timeline should be fetched by default if the modal is open
+        shouldFetchTimelineRef.current = isModalOpen
     }, [location.search])
 
     const clearDeploymentStatusTimer = useCallback((): void => {
@@ -304,15 +300,6 @@ export const Details: React.FC<DetailsType> = ({
 
             clearDeploymentStatusTimer()
 
-            if (
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.HEALTHY ||
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.TIMED_OUT ||
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.SUPERSEDED ||
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.SUCCEEDED
-            ) {
-                deploymentModalShownRef.current = false
-            }
-
             if (processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.INPROGRESS) {
                 deploymentStatusTimer = setTimeout(() => {
                     getDeploymentDetailStepsData()
@@ -327,24 +314,29 @@ export const Details: React.FC<DetailsType> = ({
             processDeploymentStatusDetailsData,
             clearDeploymentStatusTimer,
             DEPLOYMENT_STATUS,
-            deploymentModalShownRef,
             setDeploymentStatusDetailsBreakdownData,
         ],
     )
 
     const getDeploymentDetailStepsData = useCallback(
         (showTimeline?: boolean): void => {
+            const shouldFetchTimeline = showTimeline ?? shouldFetchTimelineRef.current
+
             // Deployments status details for Devtron apps
-            getDeploymentStatusDetail(params.appId, params.envId, showTimeline ?? deploymentModalShownRef.current).then(
+            getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline).then(
                 (deploymentStatusDetailRes) => {
                     processDeploymentStatusData(deploymentStatusDetailRes.result)
+                    // Update the loading status if the modal is open
+                    if (shouldFetchTimeline) {
+                        setIsInitialTimelineDataLoading(false)
+                    }
                 },
             )
         },
         [
             params.appId,
             params.envId,
-            deploymentModalShownRef.current,
+            shouldFetchTimelineRef.current,
             getDeploymentStatusDetail,
             processDeploymentStatusData,
         ],
@@ -437,7 +429,9 @@ export const Details: React.FC<DetailsType> = ({
     }
 
     function _getDeploymentStatusDetail(deploymentAppType: DeploymentAppTypes) {
-        getDeploymentStatusDetail(params.appId, params.envId, deploymentModalShownRef.current)
+        const shouldFetchTimeline = shouldFetchTimelineRef.current
+
+        getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline)
             .then((deploymentStatusDetailRes) => {
                 if (deploymentStatusDetailRes.result) {
                     if (deploymentAppType === DeploymentAppTypes.HELM) {
@@ -456,6 +450,9 @@ export const Details: React.FC<DetailsType> = ({
                     } else {
                         processDeploymentStatusData(deploymentStatusDetailRes.result)
                     }
+                    if (shouldFetchTimeline) {
+                        setIsInitialTimelineDataLoading(false)
+                    }
                 }
             })
             .catch(noop)
@@ -687,6 +684,7 @@ export const Details: React.FC<DetailsType> = ({
                     streamData={streamData}
                     deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
                     isVirtualEnvironment={isVirtualEnvRef.current}
+                    isLoading={isInitialTimelineDataLoading}
                 />
             )}
             {showScanDetailsModal && (

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

@@ -46,6 +46,17 @@ export default function DeploymentStatusDetailBreakdown({
                             type={TIMELINE_STATUS.GIT_COMMIT}
                             deploymentDetailedData={deploymentStatusDetailsBreakdownData}
                         />
+
+                        <ErrorInfoStatusBar
+                            type={TIMELINE_STATUS.ARGOCD_SYNC}
+                            nonDeploymentError={deploymentStatusDetailsBreakdownData.nonDeploymentError}
+                            errorMessage={deploymentStatusDetailsBreakdownData.deploymentError}
+                        />
+                        <DeploymentStatusDetailRow
+                            type={TIMELINE_STATUS.ARGOCD_SYNC}
+                            deploymentDetailedData={deploymentStatusDetailsBreakdownData}
+                        />
+
                         <ErrorInfoStatusBar
                             type={TIMELINE_STATUS.KUBECTL_APPLY}
                             nonDeploymentError={deploymentStatusDetailsBreakdownData.nonDeploymentError}
@@ -55,6 +66,7 @@ export default function DeploymentStatusDetailBreakdown({
                             type={TIMELINE_STATUS.KUBECTL_APPLY}
                             deploymentDetailedData={deploymentStatusDetailsBreakdownData}
                         />
+
                         <DeploymentStatusDetailRow
                             type={TIMELINE_STATUS.APP_HEALTH}
                             hideVerticalConnector={true}

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

@@ -87,8 +87,8 @@ function DeploymentStatusCard({
 
     const onClickLastDeploymentStatus = (e) => {
         if (!hideDetails) {
-            refetchDeploymentStatus(true)
             showDeploymentDetailedStatus(e)
+            refetchDeploymentStatus(true)
         }
     }
 

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

@@ -4,21 +4,22 @@ import DeploymentStatusDetailBreakdown from './DeploymentStatusBreakdown'
 import { DeploymentStatusDetailModalType } from './appDetails.type'
 import { useHistory } from 'react-router-dom'
 import './appDetails.scss'
-import { Drawer } from '@devtron-labs/devtron-fe-common-lib'
+import { Drawer, Progressing } from '@devtron-labs/devtron-fe-common-lib'
 
 export default function DeploymentStatusDetailModal({
     appName,
     environmentName,
     streamData,
     deploymentStatusDetailsBreakdownData,
-    isVirtualEnvironment
+    isVirtualEnvironment,
+    isLoading,
 }: DeploymentStatusDetailModalType) {
     const history = useHistory()
     const appStatusDetailRef = useRef<HTMLDivElement>(null)
 
     const closeStatusModal = () => {
         history.replace({
-            search: ''
+            search: '',
         })
     }
 
@@ -29,10 +30,7 @@ export default function DeploymentStatusDetailModal({
         }
     }
     const outsideClickHandler = (evt): void => {
-        if (
-            appStatusDetailRef.current &&
-            !appStatusDetailRef.current.contains(evt.target)
-        ) {
+        if (appStatusDetailRef.current && !appStatusDetailRef.current.contains(evt.target)) {
             closeStatusModal()
         }
     }
@@ -53,19 +51,35 @@ export default function DeploymentStatusDetailModal({
 
     return (
         <Drawer position="right" width="1024px">
-            <div className="deployment-status-breakdown-modal-container bcn-0" data-testid="deployment-status-drawer" ref={appStatusDetailRef}>
+            <div
+                className="deployment-status-breakdown-modal-container bcn-0"
+                data-testid="deployment-status-drawer"
+                ref={appStatusDetailRef}
+            >
                 <div className="dc__box-shadow pb-12 pt-12 bcn-0">
-                    <div className="title flex dc__content-space pl-20 pr-20 " data-testid="app-status-cross">
+                    <div
+                        className="title flex dc__content-space pl-20 pr-20 show-shimmer-loading"
+                        data-testid="app-status-cross"
+                    >
                         <div>
-                            <div className="cn-9 fs-16 fw-6">
-                                Deployment status: {appName} / {environmentName}
+                            <div className="cn-9 fs-16 fw-6 flexbox flex-align-center">
+                                Deployment status:&nbsp;
+                                {appName ?? <span className="child child-shimmer-loading w-120 h-20 mt-0-imp" />}
+                                &nbsp;/&nbsp;
+                                {environmentName ?? (
+                                    <span className="child child-shimmer-loading w-120 h-20 mt-0-imp" />
+                                )}
                             </div>
                             <div className="flexbox">
-                                <span
-                                    className={`app-summary__status-name fs-13 fw-6 f-${deploymentStatusDetailsBreakdownData.deploymentStatus}`}
-                                >
-                                    {deploymentStatusDetailsBreakdownData.deploymentStatusText}
-                                </span>
+                                {isLoading ? (
+                                    <span className="child child-shimmer-loading w-120 h-20" />
+                                ) : (
+                                    <span
+                                        className={`app-summary__status-name fs-13 fw-6 f-${deploymentStatusDetailsBreakdownData.deploymentStatus}`}
+                                    >
+                                        {deploymentStatusDetailsBreakdownData.deploymentStatusText}
+                                    </span>
+                                )}
                             </div>
                         </div>
                         <span className="cursor" onClick={closeStatusModal}>
@@ -74,11 +88,15 @@ export default function DeploymentStatusDetailModal({
                     </div>
                 </div>
                 <div className="bcn-1 dc__overflow-scroll pb-20 deployment-status-breakdown">
-                    <DeploymentStatusDetailBreakdown
-                        deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
-                        streamData={streamData}
-                        isVirtualEnvironment={isVirtualEnvironment}
-                    />
+                    {isLoading ? (
+                        <Progressing />
+                    ) : (
+                        <DeploymentStatusDetailBreakdown
+                            deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
+                            streamData={streamData}
+                            isVirtualEnvironment={isVirtualEnvironment}
+                        />
+                    )}
                 </div>
             </div>
         </Drawer>

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

@@ -77,8 +77,8 @@ export function DeploymentStatusDetailRow({
                         <div className="">
                             {deploymentDetailedData.deploymentStatusBreakdown[
                                 TIMELINE_STATUS.KUBECTL_APPLY
-                            ].kubeList?.map((items) => (
-                                <div className="flex left lh-20 mb-8">
+                            ].kubeList?.map((items, index) => (
+                                <div className="flex left lh-20 mb-8" key={`item-${index}`}>
                                     {renderIcon(items.icon)}
                                     <span className="ml-12">{items.message}</span>
                                 </div>
@@ -226,19 +226,20 @@ export function DeploymentStatusDetailRow({
                     {((type === TIMELINE_STATUS.KUBECTL_APPLY && statusBreakDownType.kubeList?.length) ||
                         (type === TIMELINE_STATUS.APP_HEALTH &&
                             appHealthDropDownlist.includes(statusBreakDownType.icon)) ||
-                        (type === TIMELINE_STATUS.GIT_COMMIT && statusBreakDownType.icon === 'failed')) && (
-                        <DropDownIcon
-                            style={{ marginLeft: 'auto', ['--rotateBy' as any]: `${180 * Number(!collapsed)}deg` }}
-                            className="icon-dim-24 rotate pointer"
-                            onClick={toggleDropdown}
-                            data-testid="steps-deployment-history-dropdown"
-                        />
-                    )}
+                        ((type === TIMELINE_STATUS.GIT_COMMIT || type === TIMELINE_STATUS.ARGOCD_SYNC) && statusBreakDownType.icon === 'failed')) && (
+                            <DropDownIcon
+                                style={{ marginLeft: 'auto', ['--rotateBy' as any]: `${180 * Number(!collapsed)}deg` }}
+                                className="icon-dim-24 rotate pointer"
+                                onClick={toggleDropdown}
+                                data-testid="steps-deployment-history-dropdown"
+                            />
+                        )}
                 </div>
                 {isHelmManifestPushFailed && renderErrorInfoBar()}
             </div>
 
             {type === TIMELINE_STATUS.GIT_COMMIT && renderDetailedData()}
+            {type === TIMELINE_STATUS.ARGOCD_SYNC && renderDetailedData()}
             {type === TIMELINE_STATUS.KUBECTL_APPLY && renderDetailedData()}
             {type === TIMELINE_STATUS.APP_HEALTH && renderDetailChart()}
             {!hideVerticalConnector && <div className="vertical-connector"></div>}

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

@@ -92,6 +92,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
     deploymentStatusBreakdown: {
         DEPLOYMENT_INITIATED: DeploymentStatusDetailRow
         GIT_COMMIT?: DeploymentStatusDetailRow
+        ARGOCD_SYNC?: DeploymentStatusDetailRow
         KUBECTL_APPLY?: DeploymentStatusDetailRow
         APP_HEALTH?: DeploymentStatusDetailRow
         HELM_PACKAGE_GENERATED?: DeploymentStatusDetailRow
@@ -110,6 +111,10 @@ export interface DeploymentStatusDetailModalType {
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
     streamData: AppStreamData
     isVirtualEnvironment: boolean
+    /**
+     * Loading state for the timeline data
+     */
+    isLoading: boolean
 }
 
 export interface ModuleConfigResponse extends ResponseType {