Merge pull request #2669 from devtron-labs/feat/app-status-modal

feat: update app status modal

Author: AbhishekA1509

package.json

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

src/Shared/index.tsx

@@ -15,14 +15,13 @@
  */
 
 import { useState, useEffect } from 'react'
-import { showError } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, getAIAnalyticsEvents } from '@devtron-labs/devtron-fe-common-lib'
 import { MESSAGING_UI } from '../../config'
 import { EventsTable } from '../v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/EventsTable'
 import { PodEventsType } from '../v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/node.type'
 import MessageUI from '../v2/common/message.ui'
 import { getClusterEvents } from './clusterNodes.service'
 import { ClusterEventsType } from './types'
-import { getAIAnalyticsEvents } from 'src/Shared'
 
 export default function ClusterEvents({ terminalAccessId, reconnectStart, clusterId }: ClusterEventsType) {
     const [events, setEvents] = useState([])

src/Shared/utils.tsx

@@ -17,7 +17,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 import DOMPurify from 'dompurify'
-import { getAIAnalyticsEvents } from 'src/Shared'
 
 import {
     ALL_NAMESPACE_OPTION,
@@ -29,6 +28,7 @@ import {
     ClipboardButton,
     ConditionalWrap,
     GenericFilterEmptyState,
+    getAIAnalyticsEvents,
     GVKType,
     highlightSearchText,
     K8sResourceDetailDataType,

src/components/ClusterNodes/ClusterEvents.tsx

@@ -16,9 +16,8 @@
 
 /* eslint-disable react/no-danger */
 import DOMPurify from 'dompurify'
-import { getAIAnalyticsEvents } from 'src/Shared'
 
-import { highlightSearchText, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
+import { getAIAnalyticsEvents, highlightSearchText, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 

src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx

@@ -16,11 +16,11 @@
 
 import { useMemo, useRef, useState } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
-import { getAIAnalyticsEvents } from 'src/Shared'
 
 import {
     abortPreviousRequests,
     ALL_NAMESPACE_OPTION,
+    getAIAnalyticsEvents,
     getIsRequestAborted,
     Nodes,
     useAsync,

src/components/ResourceBrowser/ResourceList/EventList.tsx

@@ -20,6 +20,7 @@ import { generatePath, Route, useHistory, useLocation, useParams, useRouteMatch
 import {
     ACTION_STATE,
     aggregateNodes,
+    AppStatusModal,
     ArtifactInfoModal,
     Button,
     ButtonComponentType,
@@ -71,7 +72,6 @@ import { AppType, EnvType } from '../../../v2/appDetails/appDetails.type'
 import IndexStore from '../../../v2/appDetails/index.store'
 import { EmptyK8sResourceComponent } from '../../../v2/appDetails/k8Resource/K8Resource.component'
 import NodeTreeDetailTab from '../../../v2/appDetails/NodeTreeDetailTab'
-import AppStatusDetailModal from '../../../v2/appDetails/sourceInfo/environmentStatus/AppStatusDetailModal'
 import RotatePodsModal from '../../../v2/appDetails/sourceInfo/rotatePods/RotatePodsModal.component'
 import SyncErrorComponent from '../../../v2/appDetails/SyncError.component'
 import { TriggerUrlModal } from '../../list/TriggerUrl'
@@ -99,7 +99,6 @@ import { SourceInfo } from './SourceInfo'
 const VirtualAppDetailsEmptyState = importComponentFromFELibrary('VirtualAppDetailsEmptyState')
 const DeploymentWindowStatusModal = importComponentFromFELibrary('DeploymentWindowStatusModal')
 const DeploymentWindowConfirmationDialog = importComponentFromFELibrary('DeploymentWindowConfirmationDialog')
-const ConfigDriftModalRoute = importComponentFromFELibrary('ConfigDriftModalRoute', null, 'function')
 const processVirtualEnvironmentDeploymentData = importComponentFromFELibrary(
     'processVirtualEnvironmentDeploymentData',
     null,
@@ -113,6 +112,9 @@ const getDeploymentWindowProfileMetaData = importComponentFromFELibrary(
     'function',
 )
 
+const ConfigDriftModal = importComponentFromFELibrary('ConfigDriftModal', null, 'function')
+const ExplainWithAIButton = importComponentFromFELibrary('ExplainWithAIButton', null, 'function')
+
 export const AppNotConfigured = ({
     image,
     title,
@@ -243,8 +245,10 @@ const Details: React.FC<DetailsType> = ({
     applications,
 }) => {
     const params = useParams<{ appId: string; envId: string }>()
-    const { path } = useRouteMatch()
     const location = useLocation()
+
+    const appDetailsFromIndexStore = IndexStore.getAppDetails()
+
     // fixme: the state is not being set anywhere and just being drilled down
     const [detailedStatus, toggleDetailedStatus] = useState<boolean>(false)
     const [resourceTreeFetchTimeOut, setResourceTreeFetchTimeOut] = useState<boolean>(false)
@@ -286,7 +290,7 @@ const Details: React.FC<DetailsType> = ({
             deploymentStatus: DEFAULT_STATUS,
             deploymentStatusText: DEFAULT_STATUS_TEXT,
         })
-    const isConfigDriftEnabled: boolean = window._env_.FEATURE_CONFIG_DRIFT_ENABLE && !!ConfigDriftModalRoute
+    const isConfigDriftEnabled: boolean = window._env_.FEATURE_CONFIG_DRIFT_ENABLE && !!ConfigDriftModal
     const isExternalToolAvailable: boolean =
         externalLinksAndTools.externalLinks.length > 0 && externalLinksAndTools.monitoringTools.length > 0
     const interval = Number(window._env_.DEVTRON_APP_DETAILS_POLLING_INTERVAL) || 30000
@@ -776,10 +780,14 @@ const Details: React.FC<DetailsType> = ({
                 renderAppDetails()
             )}
             {detailedStatus && (
-                <AppStatusDetailModal
-                    close={hideAppDetailsStatus}
-                    showAppStatusMessage={false}
-                    showConfigDriftInfo={isConfigDriftEnabled}
+                <AppStatusModal
+                    titleSegments={[appDetailsFromIndexStore.appName, appDetailsFromIndexStore.environmentName]}
+                    handleClose={hideAppDetailsStatus}
+                    type="devtron-app"
+                    appDetails={appDetailsFromIndexStore}
+                    isConfigDriftEnabled={isConfigDriftEnabled}
+                    configDriftModal={ConfigDriftModal}
+                    debugWithAIButton={ExplainWithAIButton}
                 />
             )}
             {location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM) && (
@@ -815,7 +823,6 @@ const Details: React.FC<DetailsType> = ({
             )}
             {appDetails && !!hibernateConfirmationModal && renderHibernateModal()}
             {rotateModal && renderRestartWorkload()}
-            {isConfigDriftEnabled && !isVirtualEnvRef.current && <ConfigDriftModalRoute path={path} />}
         </>
     )
 }

src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

@@ -17,13 +17,12 @@
 import React, { useMemo } from 'react'
 import Tippy from '@tippyjs/react'
 import ReactGA from 'react-ga4'
-import { AppStatus, AppType, StatusType } from '@devtron-labs/devtron-fe-common-lib'
+import { AppStatus, AppType, StatusType, getAIAnalyticsEvents } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICHelpOutline } from '../../../../assets/icons/ic-help-outline.svg'
 import { AppStatusCardType } from './appDetails.type'
 import LoadingCard from './LoadingCard'
 import './appDetails.scss'
 import { importComponentFromFELibrary } from '@Components/common'
-import { getAIAnalyticsEvents } from 'src/Shared'
 
 const ExplainWithAIButton = importComponentFromFELibrary('ExplainWithAIButton', null, 'function')
 
@@ -101,7 +100,7 @@ const AppStatusCard = ({ appDetails, status, cardLoading, setDetailed, message }
                         </Tippy>
                     </div>
                     <div className="flex fs-12 fw-4">
-                        <div className={`fs-13 fw-6 lh-20 f-${status.toLowerCase()}`}>
+                        <div className={`fs-13 fw-6 lh-20 app-summary__status-name f-${status.toLowerCase()}`}>
                             {isHibernated ? 'Hibernating' : status}
                         </div>
                     </div>

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

@@ -224,7 +224,7 @@ const IssuesCard = ({ cardLoading, setErrorsList, toggleIssuesModal, setDetailed
                         </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 app-summary__status-name f-degraded dc__first-letter-capitalize--imp">{getErrorCountText()}</div>
                     </div>
                 </div>
                 <ErrorIcon className="form__icon--error icon-dim-24" />