Merge pull request #2062 from devtron-labs/feat/airgapped-release

feat: add support for air gapped installation in release

Author: eshankvaish

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.3.21",
+        "@devtron-labs/devtron-fe-common-lib": "0.3.22",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/assets/icons/ic-camera.svg

@@ -34,6 +34,7 @@ import {
     ReleaseMode,
     ToastVariantType,
     ToastManager,
+    handleUTCTime,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link, useParams, useHistory, useRouteMatch, generatePath, Route, useLocation } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
@@ -295,6 +296,7 @@ export const Details: React.FC<DetailsType> = ({
     const appDetailsAbortRef = useRef(null)
     const shouldFetchTimelineRef = useRef(false)
 
+
     const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
         useState<DeploymentStatusDetailsBreakdownDataType>({
             ...(isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
@@ -355,6 +357,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
@@ -424,7 +427,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)
@@ -469,13 +475,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:
@@ -616,7 +624,7 @@ export const Details: React.FC<DetailsType> = ({
     const environmentName = environmentsMap[+envId]
 
     const renderAppDetails = (): JSX.Element => {
-        if (isVirtualEnvRef.current && VirtualAppDetailsEmptyState) {
+        if (!appDetails.resourceTree && isVirtualEnvRef.current && VirtualAppDetailsEmptyState) {
             return <VirtualAppDetailsEmptyState environmentName={environmentName} />
         }
         return (
@@ -626,6 +634,7 @@ export const Details: React.FC<DetailsType> = ({
                 monitoringTools={externalLinksAndTools.monitoringTools}
                 isDevtronApp
                 isDeploymentBlocked={isDeploymentBlocked}
+                isVirtualEnvironment={isVirtualEnvRef.current}
             />
         )
     }

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

@@ -14,17 +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'
@@ -43,6 +47,7 @@ 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 HelmAppConfigApplyStatusCard from '@Components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard'
 
 const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
 const DeploymentWindowStatusCard = importComponentFromFELibrary('DeploymentWindowStatusCard')
@@ -79,6 +84,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()) &&
@@ -139,6 +145,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">
@@ -147,26 +157,50 @@ export const SourceInfo = ({
                     disabled={loadingDetails || loadingResourceTree || (params.envId && !showCommitInfo)}
                 />
                 {appDetails?.deploymentAppType && (
-                    <Tippy
-                        className="default-tt"
-                        arrow={false}
+                    <Tooltip
                         placement="top"
+                        alwaysShowTippyOnHover={!appDetails.isVirtualEnvironment}
                         content={`Deployed using ${
                             isArgoCdApp ? DeploymentAppTypeNameMapping.GitOps : DeploymentAppTypeNameMapping.Helm
                         }`}
                     >
-                        <div className="flex">
-                            <DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} />
+                        <div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
+                            {/* TODO: verify what appType needs to be passed */}
+                            <DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} appType={null} />
                         </div>
-                    </Tippy>
+                    </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 && (
@@ -204,7 +238,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" />
@@ -258,16 +292,17 @@ export const SourceInfo = ({
                 : !isdeploymentAppDeleting &&
                   environment && (
                       <div className="flex left w-100">
-                          {!isVirtualEnvironment && (
-                              <AppStatusCard
-                                  appDetails={appDetails}
-                                  status={status}
-                                  cardLoading={cardLoading}
-                                  setDetailed={setDetailed}
-                                  message={message}
-                              />
+                          {status && (
+                            <AppStatusCard
+                                // TODO: Fix and remove
+                                // @ts-ignore
+                                appDetails={appDetails}
+                                status={status}
+                                cardLoading={cardLoading}
+                                setDetailed={setDetailed}
+                                message={message}
+                            />
                           )}
-                          {isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
                           {!helmMigratedAppNotTriggered && (
                               <>
                                   {!loadingResourceTree && (
@@ -278,10 +313,24 @@ export const SourceInfo = ({
                                           setDetailed={setDetailed}
                                       />
                                   )}
+                                  {isIsolatedEnv && (
+                                      <HelmAppConfigApplyStatusCard
+                                          cardLoading={cardLoading}
+                                          releaseStatus={appDetails.resourceTree.releaseStatus}
+                                      />
+                                  )}
+                              </>
+                          )}
+                          {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

@@ -1927,11 +1927,6 @@ table.resource-tree {
     margin-left: 8px !important;
 }
 
-.app-details-manifest-download-card {
-    overflow: hidden;
-    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
-}
-
 .app-details-info-card {
     align-items: flex-start;
     flex-direction: column;

src/components/app/details/appDetails/appDetails.scss

@@ -239,7 +239,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 {