Merge pull request #2095 from devtron-labs/feat/isolated-app-details

feat: update the info for airgapped env

Author: eshankvaish

src/assets/icons/ic-camera.svg

@@ -32,6 +32,7 @@ import {
     aggregateNodes,
     ArtifactInfoModal,
     ReleaseMode,
+    handleUTCTime,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link, useParams, useHistory, useRouteMatch, generatePath, Route, useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -294,6 +295,7 @@ export const Details: React.FC<DetailsType> = ({
     const appDetailsAbortRef = useRef(null)
     const shouldFetchTimelineRef = useRef(false)
 
+
     const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
         useState<DeploymentStatusDetailsBreakdownDataType>({
             ...(isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
@@ -354,6 +356,7 @@ export const Details: React.FC<DetailsType> = ({
         ],
     )
 
+    // This is called only when timeline modal is open
     const getDeploymentDetailStepsData = useCallback(
         (showTimeline?: boolean): void => {
             const shouldFetchTimeline = showTimeline ?? shouldFetchTimelineRef.current
@@ -423,7 +426,10 @@ export const Details: React.FC<DetailsType> = ({
                 }
                 IndexStore.publishAppDetails(appDetailsRef.current, AppType.DEVTRON_APP)
                 setAppDetails(appDetailsRef.current)
-                _getDeploymentStatusDetail(appDetailsRef.current.deploymentAppType)
+
+                const isIsolatedEnv = isVirtualEnvRef.current && !!appDetailsRef.current.resourceTree
+
+                _getDeploymentStatusDetail(appDetailsRef.current.deploymentAppType, isIsolatedEnv, isIsolatedEnv ? appDetailsRef.current?.resourceTree?.wfrId : null)
 
                 if (fetchExternalLinks && response.result?.clusterId) {
                     getExternalLinksAndTools(response.result.clusterId)
@@ -468,13 +474,15 @@ export const Details: React.FC<DetailsType> = ({
             })
     }
 
-    function _getDeploymentStatusDetail(deploymentAppType: DeploymentAppTypes) {
+    function _getDeploymentStatusDetail(deploymentAppType: DeploymentAppTypes, isIsolatedEnv: boolean, triggerIdToFetch?: number) {
         const shouldFetchTimeline = shouldFetchTimelineRef.current
 
-        getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline)
+        // triggerIdToFetch represents the wfrId to fetch for any specific deployment
+        getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline, triggerIdToFetch?.toString())
             .then((deploymentStatusDetailRes) => {
                 if (deploymentStatusDetailRes.result) {
-                    if (deploymentAppType === DeploymentAppTypes.HELM) {
+                    // Timelines are not applicable for helm deployments and air gapped envs
+                    if (deploymentAppType === DeploymentAppTypes.HELM || isIsolatedEnv) {
                         setDeploymentStatusDetailsBreakdownData({
                             ...deploymentStatusDetailsBreakdownData,
                             deploymentStatus:

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

@@ -14,18 +14,21 @@
  * limitations under the License.
  */
 
-// @ts-nocheck - @TODO: Remove this by fixing the type issues
-import React, { useEffect, useMemo, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
+import moment from 'moment'
 import {
     ConditionalWrap,
+    DATE_TIME_FORMATS,
     DeploymentAppTypes,
     getIsManualApprovalConfigured,
+    handleUTCTime,
     ReleaseMode,
     showError,
     Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
+import { ReactComponent as ICCamera } from '@Icons/ic-camera.svg'
 import { URLS } from '../../../../config'
 import { EnvSelector } from './AppDetails'
 import { DeploymentAppTypeNameMapping } from '../../../../config/constantMessaging'
@@ -44,7 +47,6 @@ import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows
 import { ReactComponent as LinkIcon } from '../../../../assets/icons/ic-link.svg'
 import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-dots.svg'
 import { ReactComponent as ScaleDown } from '../../../../assets/icons/ic-scale-down.svg'
-import { ConfigApplyStatusCard } from './ConfigApplyStatusCard'
 import HelmAppConfigApplyStatusCard from '@Components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard'
 
 const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
@@ -83,6 +85,7 @@ export const SourceInfo = ({
     // helmMigratedAppNotTriggered means the app is migrated from a helm release and has not been deployed yet i.e. CD Pipeline has not been triggered
     const helmMigratedAppNotTriggered =
         appDetails?.releaseMode === ReleaseMode.MIGRATE_HELM && !appDetails?.isPipelineTriggered
+    const isIsolatedEnv = isVirtualEnvironment && !!appDetails?.resourceTree
 
     if (
         ['progressing', 'degraded'].includes(status?.toLowerCase()) &&
@@ -167,6 +170,10 @@ export const SourceInfo = ({
     const renderDevtronAppsEnvironmentSelector = (environment) => {
         // If moving to a component then move getIsApprovalConfigured with it as well with memoization.
         const isApprovalConfigured = getIsApprovalConfigured()
+        const relativeSnapshotTime = appDetails?.resourceTree?.lastSnapshotTime ? handleUTCTime(
+            appDetails.resourceTree.lastSnapshotTime,
+            true,
+        ) : ''
 
         return (
             <div className="flex left w-100">
@@ -183,17 +190,42 @@ export const SourceInfo = ({
                         }`}
                     >
                         <div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
-                            <DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} />
+                            {/* TODO: verify what appType needs to be passed */}
+                            <DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} appType={null} />
                         </div>
                     </Tooltip>
                 )}
                 {isdeploymentAppDeleting && (
-                    <div data-testid="deleteing-argocd-pipeline">
+                    <div data-testid="deleteing-argocd-pipeline" className="flex left">
                         <Trash className="icon-dim-16 mr-8 ml-12" />
                         <span className="cr-5 fw-6">Deleting deployment pipeline </span>
                         <span className="dc__loading-dots cr-5" />
                     </div>
                 )}
+                {/* Last snapshot time */}
+                {isIsolatedEnv && relativeSnapshotTime && (
+                    <Tooltip
+                        content={
+                            <div className="fw-4 lh-18 flexbox-col dc__ga-2">
+                                <h6 className="fs-12 fw-6 cn-0 m-0">Last snapshot received</h6>
+                                <p className="m-0 fs-12 cn-50">
+                                    {moment(appDetails.resourceTree.lastSnapshotTime).format(
+                                        DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT,
+                                    )}
+                                </p>
+                            </div>
+                        }
+                        alwaysShowTippyOnHover
+                    >
+                        <div className="flex left">
+                            <div className="dc__divider h-20 mr-8 ml-8" />
+                            <div className="flex left dc__gap-6 px-8 py-4">
+                                <ICCamera className="scn-9 dc__no-shrink icon-dim-16" />
+                                <p className="m-0 fs-13 fw-4 lh-20 cn-9 dc__truncate">{relativeSnapshotTime}</p>
+                            </div>
+                        </div>
+                    </Tooltip>
+                )}
                 {!loadingResourceTree && environment && (
                     <>
                         {!isdeploymentAppDeleting && (
@@ -231,7 +263,7 @@ export const SourceInfo = ({
                                         <button
                                             data-testid="app-details-rotate-pods-modal-button"
                                             className="cta cta-with-img small cancel fs-12 fw-6 mr-6"
-                                            onClick={setRotateModal}
+                                            onClick={() => setRotateModal(true)}
                                             disabled={isApprovalConfigured}
                                         >
                                             <RotateIcon className="icon-dim-16 mr-6 icon-color-n7 scn-4" />
@@ -286,13 +318,15 @@ export const SourceInfo = ({
                   environment && (
                       <div className="flex left w-100">
                           {status && (
-                              <AppStatusCard
-                                  appDetails={appDetails}
-                                  status={status}
-                                  cardLoading={cardLoading}
-                                  setDetailed={setDetailed}
-                                  message={message}
-                              />
+                            <AppStatusCard
+                                // TODO: Fix and remove
+                                // @ts-ignore
+                                appDetails={appDetails}
+                                status={status}
+                                cardLoading={cardLoading}
+                                setDetailed={setDetailed}
+                                message={message}
+                            />
                           )}
                           {!helmMigratedAppNotTriggered && (
                               <>
@@ -304,21 +338,24 @@ export const SourceInfo = ({
                                           setDetailed={setDetailed}
                                       />
                                   )}
-                                  {isVirtualEnvironment && appDetails?.resourceTree && (
+                                  {isIsolatedEnv && (
                                       <HelmAppConfigApplyStatusCard
                                           cardLoading={cardLoading}
                                           releaseStatus={appDetails.resourceTree.releaseStatus}
                                       />
                                   )}
                               </>
                           )}
-                          {isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
+                          {isVirtualEnvironment && !isIsolatedEnv && renderGeneratedManifestDownloadCard()}
                           {!helmMigratedAppNotTriggered && (
                               <>
                                   <DeploymentStatusCard
                                       deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
                                       cardLoading={cardLoading}
-                                      hideDetails={appDetails?.deploymentAppType === DeploymentAppTypes.HELM}
+                                      hideDetails={
+                                          appDetails?.deploymentAppType === DeploymentAppTypes.HELM ||
+                                          isIsolatedEnv
+                                      }
                                       isVirtualEnvironment={isVirtualEnvironment}
                                       refetchDeploymentStatus={refetchDeploymentStatus}
                                   />

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

@@ -232,7 +232,7 @@ export interface SecurityVulnerabilityCardType {
 }
 
 export interface DeployedCommitCardType {
-    showCommitInfoDrawer: () => void
+    showCommitInfoDrawer: (e) => void
     cardLoading?: boolean
     envId: number | string
     ciArtifactId: number

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

@@ -25,6 +25,7 @@ import {
     RuntimeParamsListItemType,
     RuntimeParamsTriggerPayloadType,
     ReleaseMode,
+    HelmReleaseStatus,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { RouteComponentProps } from 'react-router'
 import { AppEnvironment } from '../../services/service.types'
@@ -90,9 +91,14 @@ export interface CDModalProps {
     parentEnvironmentName: string
     ciPipelineId?: number
     isRedirectedFromAppDetails?: boolean
+    deploymentUserActionState?: ACTION_STATE
 }
 
 export interface AppDetails extends CDModalProps {
+    appStoreChartId: number
+    appStoreChartName: string
+    appStoreAppVersion: string
+    appStoreAppName: string
     appId: number
     deploymentAppType?: DeploymentAppTypes
     externalCi?: boolean
@@ -187,6 +193,10 @@ interface ResourceTree {
     status: string
     podMetadata: PodMetadatum[]
     conditions?: any
+    releaseStatus?: HelmReleaseStatus
+    // lastSnapshotTime and wfrId are only available for isolated
+    lastSnapshotTime?: string
+    wfrId?: number
 }
 
 interface Node {