Merge pull request #1488 from devtron-labs/fix/issues-card-refactor

prajjwal-devtron · web-flow · commit 1cc752f3c3d6 · 2023-11-28T12:03:35.000+05:30
fix: UAT fixed for app details cards
diff --git a/src/components/app/details/appDetails/AppDetails.tsx b/src/components/app/details/appDetails/AppDetails.tsx
@@ -614,7 +614,7 @@ export const Details: React.FC<DetailsType> = ({
 
     return (
         <React.Fragment>
-            <div className="w-100 pt-16 pr-20 pb-16 pl-20">
+            <div className="w-100 pt-16 pr-20 pb-16 pl-20 app-info-bg-gradient">
                 <SourceInfo
                     appDetails={appDetails}
                     appStreamData={streamData}
diff --git a/src/components/app/details/appDetails/AppMetrics.tsx b/src/components/app/details/appDetails/AppMetrics.tsx
@@ -212,7 +212,6 @@ export const AppMetrics: React.FC<{ appName: string, environment, podMap: Map<st
         return (
             <AppMetricsEmptyState
                 isLoading={datasource.isLoading}
-                addSpace={addSpace}
                 isConfigured={datasource.isConfigured}
                 isHealthy={datasource.isHealthy}
                 hostURLConfig={hostURLConfig}
@@ -445,7 +444,7 @@ function MonitoringModuleNotInstalled({ addSpace }: { addSpace: string }) {
     )
 }
 
-function AppMetricsEmptyState({ isLoading, isConfigured, isHealthy, hostURLConfig, addSpace }) {
+function AppMetricsEmptyState({ isLoading, isConfigured, isHealthy, hostURLConfig }) {
     const [collapsed, toggleCollapsed] = useState<boolean>(true);
 
     const toggleHeader = () => {
@@ -460,7 +459,7 @@ function AppMetricsEmptyState({ isLoading, isConfigured, isHealthy, hostURLConfi
         subtitle = 'Datasource configuration is incorrect or prometheus is not healthy. Please review configuration and try reloading this page.';
     }
     return (
-        <div className={`app-metrics-graph__empty-state-wrapper bcn-0 w-100 pt-18 pb-18 pl-20 pr-20 cursor ${addSpace}`}>
+        <div className="app-metrics-graph__empty-state-wrapper bcn-0 w-100 pt-18 pb-18 pl-20 pr-20 cursor" >
             <div  onClick={toggleHeader} className="flex left w-100 lh-20">
                 <span className="fs-14 fw-6 cn-7 flex left mr-16">
                     <GraphIcon className="mr-8 fcn-7 icon-dim-20" />
diff --git a/src/components/app/details/appDetails/AppStatusCard.tsx b/src/components/app/details/appDetails/AppStatusCard.tsx
@@ -68,7 +68,7 @@ const AppStatusCard = ({ appDetails, status, cardLoading, setDetailed, message }
                 </div>
                 <div className="flex br-4">
                     <figure
-                        className={`${status.toLowerCase()} dc__app-summary__icon h-24 w-24`}
+                        className={`${status.toLowerCase()} h-24 w-24`}
                         style={{ margin: 'auto', backgroundSize: 'contain, contain' }}
                     ></figure>
                 </div>
diff --git a/src/components/app/details/appDetails/DeployedCommitCard.tsx b/src/components/app/details/appDetails/DeployedCommitCard.tsx
@@ -56,7 +56,7 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
                     </div>
                     <div className="flex fs-12 fw-4">
                         <CommitIcon className="icon-dim-20" />
-                        <div className="dc__ellipsis-right cn-7 ml-2 fw-4 fs-12">{commitId}</div>
+                        <div className="dc__ellipsis-right cn-7 ml-2 fw-4 fs-12 dc__ff-monospace">{commitId}</div>
                     </div>
                 </div>
                 <GitHub className="github-icon" />
diff --git a/src/components/app/details/appDetails/DeploymentStatusCard.tsx b/src/components/app/details/appDetails/DeploymentStatusCard.tsx
@@ -67,7 +67,7 @@ function DeploymentStatusCard({
                 </div>
                 <div className="app-details-info-card__bottom-container dc__content-space">
                     <div className="app-details-info-card__bottom-container__message fs-12 fw-4">
-                        <span className="fs-13 mr-5 fw-6">
+                        <span className="fs-12 mr-5 fw-6">
                             {validateMomentDate(deploymentTriggerTime, 'YYYY-MM-DDTHH:mm:ssZ')}
                         </span>
                         by {triggeredBy || '-'}
diff --git a/src/components/app/details/appDetails/IssuesCard.tsx b/src/components/app/details/appDetails/IssuesCard.tsx
@@ -51,27 +51,16 @@ const IssuesCard = ({ appStreamData, cardLoading, setErrorsList, toggleIssuesMod
 
     useEffect(() => {
         if (appDetails.appType === AppType.DEVTRON_APP && appDetails.resourceTree?.nodes?.length) {
-            for (let index = 0; index < appDetails.resourceTree.nodes.length; index++) {
-                const node = appDetails.resourceTree.nodes[index]
-                let _isImagePullBackOff = false
-                if (node.info?.length) {
-                    for (let index = 0; index < node.info.length; index++) {
-                        const info = node.info[index]
-                        if (
-                            info.value &&
-                            (info.value.toLowerCase() === AppDetailsErrorType.ERRIMAGEPULL ||
-                                info.value.toLowerCase() === AppDetailsErrorType.IMAGEPULLBACKOFF)
-                        ) {
-                            _isImagePullBackOff = true
-                            break
-                        }
-                    }
-
-                    if (_isImagePullBackOff) {
-                        setIsImagePullBackOff(true)
-                        break
-                    }
-                }
+            const hasImagePullBackOff = appDetails.resourceTree.nodes.some((node) => {
+                return node.info?.some((info) =>
+                    info.value &&
+                    (info.value.toLowerCase() === AppDetailsErrorType.ERRIMAGEPULL ||
+                        info.value.toLowerCase() === AppDetailsErrorType.IMAGEPULLBACKOFF)
+                );
+            });
+    
+            if (hasImagePullBackOff) {
+                setIsImagePullBackOff(true);
             }
         }
     }, [appDetails])
diff --git a/src/components/app/details/appDetails/SourceInfo.tsx b/src/components/app/details/appDetails/SourceInfo.tsx
@@ -6,7 +6,6 @@ import { URLS } from '../../../../config'
 import { EnvSelector } from './AppDetails'
 import { DeploymentAppTypeNameMapping } from '../../../../config/constantMessaging'
 import { ReactComponent as ScaleDown } from '../../../../assets/icons/ic-scale-down.svg'
-import { ReactComponent as CommitIcon } from '../../../../assets/icons/ic-code-commit.svg'
 import { useParams } from 'react-router'
 import { Nodes, SourceInfoType } from '../../types'
 import Tippy from '@tippyjs/react'
@@ -129,16 +128,6 @@ export function SourceInfo({
                                         URLs
                                     </button>
                                 )}
-                                {appDetails?.dataSource !== 'EXTERNAL' && showCommitInfo && (
-                                    <button
-                                        className="cta cta-with-img small cancel fs-12 fw-6 mr-6"
-                                        onClick={onClickShowCommitInfo}
-                                        data-testid="app-details-commit-info"
-                                    >
-                                        <CommitIcon className="icon-dim-16 mr-6" />
-                                        commit info
-                                    </button>
-                                )}
                                 {!isVirtualEnvironment && showHibernateModal && (
                                     <ConditionalWrap
                                         condition={appDetails?.userApprovalConfig?.length > 0}
diff --git a/src/components/app/details/appDetails/appDetails.scss b/src/components/app/details/appDetails/appDetails.scss
@@ -1688,8 +1688,7 @@ table.resource-tree {
 }
 
 .app-metrics-graph__empty-state-wrapper {
-    border-bottom: solid 1px var(--N200);
-    border-top: solid 1px var(--N200);
+    border-bottom: solid 1px var(--N100);
 }
 
 .app-metrics-graph__empty-state {
@@ -1914,6 +1913,7 @@ table.resource-tree {
     align-items: flex-start;
     flex-direction: column;
     overflow: hidden;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.20);
 
     &__top-container {
         align-items: flex-start;
diff --git a/src/components/v2/appDetails/AppDetails.component.tsx b/src/components/v2/appDetails/AppDetails.component.tsx
@@ -5,7 +5,6 @@ import { AppStreamData, AppType } from './appDetails.type'
 import IndexStore from './index.store'
 import EnvironmentStatusComponent from './sourceInfo/environmentStatus/EnvironmentStatus.component'
 import EnvironmentSelectorComponent from './sourceInfo/EnvironmentSelector.component'
-import SyncErrorComponent from './SyncError.component'
 import { importComponentFromFELibrary, useEventSource } from '../../common'
 import { AppLevelExternalLinks } from '../../externalLinks/ExternalLinks.component'
 import NodeTreeDetailTab from './NodeTreeDetailTab'
@@ -183,7 +182,7 @@ const AppDetailsComponent = ({
 
     return (
         <div className="helm-details" data-testid="app-details-wrapper">
-            <div>
+            <div className="app-info-bg-gradient">
                 <EnvironmentSelectorComponent
                     isExternalApp={isExternalApp}
                     _init={_init}
@@ -202,8 +201,6 @@ const AppDetailsComponent = ({
                     />
                 )}
             </div>
-
-            <SyncErrorComponent appStreamData={streamData} />
             {!appDetails.deploymentAppDeleteRequest && (
                 <AppLevelExternalLinks
                     helmAppDetails={appDetails}
diff --git a/src/components/v2/appDetails/appDetails.scss b/src/components/v2/appDetails/appDetails.scss
@@ -18,8 +18,12 @@
 }
 /* End: Container height fixes */
 
-.helm-details{
-  display: flex;
-  flex-direction: column;
-  flex: 1
-}
+.helm-details {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.app-info-bg-gradient {
+    background: linear-gradient(to top, #ffffff 0, #ffffff 50px, var(--window-bg) 50px);
+}
diff --git a/src/components/v2/appDetails/k8Resource/NodeTreeTabList.scss b/src/components/v2/appDetails/k8Resource/NodeTreeTabList.scss
@@ -1,5 +1,7 @@
 .resource-tree-wrapper {
     box-shadow: inset 0 -1px 0 0 var(--N200);
+    background-color: white;
+    padding-top: 12px;
 
     .resource-tree-tab {
         border-top: 1px solid var(--N200);
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/ChartUsedCard.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/ChartUsedCard.tsx
@@ -9,7 +9,6 @@ import { ChartUsedCardType } from '../environment.type'
 import LoadingCard from '../../../../app/details/appDetails/LoadingCard'
 
 const ChartUsedCard = ({ appDetails, notes, onClickShowNotes, cardLoading }: ChartUsedCardType) => {
-    
     if (cardLoading) return <LoadingCard />
 
     return (
@@ -18,7 +17,7 @@ const ChartUsedCard = ({ appDetails, notes, onClickShowNotes, cardLoading }: Cha
             className="app-details-info-card pointer flex left bcn-0 br-8 mr-12 lh-20 w-200"
         >
             <div className="app-details-info-card__top-container flex">
-                <div className="app-details-info-card__top-container__content">
+                <div className="app-details-info-card__top-container__content dc__ellipsis-right">
                     <div className="app-details-info-card__top-container__content__title-wrapper">
                         <div className="fs-12 fw-4 cn-7 mr-5" data-testid="chart-used-heading">
                             Chart used
@@ -43,7 +42,11 @@ const ChartUsedCard = ({ appDetails, notes, onClickShowNotes, cardLoading }: Cha
                     </div>
                 </div>
                 {appDetails.chartAvatar ? (
-                    <img src={appDetails.chartAvatar} alt={appDetails.appStoreAppName} className="icon-dim-24"/>
+                    <img
+                        src={appDetails.chartAvatar}
+                        alt={appDetails.appStoreAppName}
+                        className="dc__chart-grid-item__icon icon-dim-24"
+                    />
                 ) : (
                     <DefaultChart className="icon-dim-24" />
                 )}
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx
@@ -18,6 +18,9 @@ import DeploymentStatusCard from '../../../../app/details/appDetails/DeploymentS
 import ChartUsedCard from './ChartUsedCard'
 import LastUpdatedCard from '../../../../app/details/appDetails/LastUpdatedCard'
 import LoadingCard from '../../../../app/details/appDetails/LoadingCard'
+import IssuesCard from '../../../../app/details/appDetails/IssuesCard'
+import { ErrorItem } from '../../../../app/details/appDetails/appDetails.type'
+import IssuesListingModal from '../../../../app/details/appDetails/IssuesListingModal'
 
 const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
 
@@ -40,6 +43,8 @@ function EnvironmentStatusComponent({
     const history = useHistory()
     const params = useParams<{ appId: string; envId: string }>()
     const [, notesResult] = useAsync(() => getInstalledChartNotesDetail(+params.appId, +params.envId), [])
+    const [errorsList, setErrorsList] = useState<ErrorItem[]>([])
+    const [showIssuesModal, toggleIssuesModal] = useState<boolean>(false)
 
     const onClickUpgrade = () => {
         let _url = `${url.split('/').slice(0, -1).join('/')}/${URLS.APP_VALUES}`
@@ -71,6 +76,18 @@ function EnvironmentStatusComponent({
         )
     }
 
+    const renderIssuesCard = () => {
+        return (
+            <IssuesCard
+                appStreamData={appStreamData}
+                cardLoading={cardLoading}
+                setErrorsList={setErrorsList}
+                toggleIssuesModal={toggleIssuesModal}
+                setDetailed={setShowAppStatusDetail}
+            />
+        )
+    }
+
     const onClickShowNotes = () => {
         setShowNotes(true)
     }
@@ -140,7 +157,7 @@ function EnvironmentStatusComponent({
     const renderUpgraderChartBlock = () => {
         return (
             appDetails?.deprecated && (
-                <div className="app-status-card er-2 bw-1 bcr-1 br-8 pt-16 pl-16 pb-16 pr-16 mr-12  ">
+                <div className="chart-upgrade-card er-2 bw-1 bcr-1 br-8 pt-16 pl-16 pb-16 pr-16 mr-12  ">
                     <div className="cn-9 flex left">
                         <span>Chart deprecated</span>
                         <Alert className="icon-dim-16 ml-4" />
@@ -161,6 +178,7 @@ function EnvironmentStatusComponent({
             ) : (
                 <div className="flex left ml-20 mb-16 lh-20">
                     {isVirtualEnvironment ? renderGeneratedManifestDownloadCard() : renderStatusBlock()}
+                    {renderIssuesCard()}
                     {renderHelmConfigApplyStatusBlock()}
                     {renderLastUpdatedBlock()}
                     {renderChartUsedBlock()}
@@ -176,6 +194,9 @@ function EnvironmentStatusComponent({
                     showAppStatusMessage={showHibernationStatusMessage}
                 />
             )}
+            {showIssuesModal && (
+                <IssuesListingModal errorsList={errorsList} closeIssuesListingModal={() => toggleIssuesModal(false)} />
+            )}
             {showNotes && (
                 <NotesDrawer
                     notes={notes}
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard.tsx
@@ -30,7 +30,7 @@ function HelmAppConfigApplyStatusCard({ releaseStatus, cardLoading }: HelmAppCon
                 </div>
                 <div className="flex br-4">
                     <figure
-                        className={`${releaseStatus['status'].toLowerCase()} dc__app-summary__icon ml-8 icon-dim-24`}
+                        className={`${releaseStatus['status'].toLowerCase()}  ml-8 icon-dim-24`}
                     ></figure>
                 </div>
             </div>
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/environmentStatus.scss b/src/components/v2/appDetails/sourceInfo/environmentStatus/environmentStatus.scss
@@ -1,4 +1,4 @@
-.app-status-card {
+.chart-upgrade-card{
     min-width: 150px;
     min-height: 92px;
 }
@@ -120,13 +120,6 @@ svg.app-notes__icon {
     overflow-wrap: break-word;
 }
 
-.app-status-card__divider {
-    width: 1px;
-    height: 12px;
-    background-color: var(--N200);
-    margin: 0 8px;
-}
-
 .app-status-detail-modal {
     .app-status-row {
         display: grid;

Original file line number	Diff line number	Diff line change
`@@ -1688,8 +1688,7 @@ table.resource-tree {`
`1688`	`1688`	`}`
`1689`	`1689`
`1690`	`1690`	`.app-metrics-graph__empty-state-wrapper {`
`1691`		`- border-bottom: solid 1px var(--N200);`
`1692`		`- border-top: solid 1px var(--N200);`
	`1691`	`+ border-bottom: solid 1px var(--N100);`
`1693`	`1692`	`}`
`1694`	`1693`
`1695`	`1694`	`.app-metrics-graph__empty-state {`
`@@ -1914,6 +1913,7 @@ table.resource-tree {`
`1914`	`1913`	`align-items: flex-start;`
`1915`	`1914`	`flex-direction: column;`
`1916`	`1915`	`overflow: hidden;`
	`1916`	`+ box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.20);`
`1917`	`1917`
`1918`	`1918`	`&__top-container {`
`1919`	`1919`	`align-items: flex-start;`