Merge pull request #2070 from devtron-labs/fix/restart-error-handling

fix: [PROD] open the restart workload on app group , from second tab we have set the ima ge approver , now from first tab do restart , we are showing initiated and it actually restarts , however it should not #5472

Author: shivani170

src/components/ApplicationGroup/Details/EnvironmentOverview/RestartStatusListDrawer.tsx

@@ -42,7 +42,6 @@ export const RestartStatusListDrawer = ({
 }: RestartStatusListDrawerProps) => {
     const [expandedAppIds, setExpandedAppIds] = useState<number[]>([])
     const [isExpandableButtonClicked, setExpandableButtonClicked] = useState(false)
-
     const hasPartialDeploymentWindowAccess = (appId) =>
         hibernateInfoMap[appId] &&
         hibernateInfoMap[appId].userActionState &&

src/components/ApplicationGroup/Details/EnvironmentOverview/RestartWorkloadModal.tsx

@@ -76,6 +76,7 @@ export const RestartWorkloadModal = ({
     const abortControllerRef = useRef<AbortController>(new AbortController())
     const [showResistanceBox, setShowResistanceBox] = useState(false)
     const [isExpandableButtonClicked, setExpandableButtonClicked] = useState(false)
+
     const { searchParams } = useSearchString()
     const history = useHistory()
     const [showStatusModal, setShowStatusModal] = useState(false)
@@ -506,12 +507,35 @@ export const RestartWorkloadModal = ({
     }
 
     const postRestartPodBatchFunction = (payload) => () =>
-        postRestartWorkloadRotatePods(payload).then((response) => {
-            if (response.result) {
-                // showing the status modal in case batch promise resolved
-                updateBulkRotatePodsMapWithStatusCounts(response, payload.appId)
-            }
-        })
+        postRestartWorkloadRotatePods(payload)
+            .then((response) => {
+                if (response.result) {
+                    // showing the status modal in case batch promise resolved
+                    updateBulkRotatePodsMapWithStatusCounts(response, payload.appId)
+                }
+            })
+            .catch((serverError) => {
+                if (serverError.code === 409) {
+                    serverError.errors.map(({ userMessage }) => {
+                        const _bulkRotatePodsMap = { ...bulkRotatePodsMap }
+                        const _resources: ResourcesMetaDataMap = _bulkRotatePodsMap[payload.appId].resources
+
+                        // Iterate through the Map and update errorResponse
+                        Object.keys(_resources).forEach((kindName) => {
+                            _resources[kindName].containsError = true
+                            _resources[kindName].errorResponse = userMessage
+                        })
+
+                        _bulkRotatePodsMap[payload.appId].failedCount = Object.keys(_resources).length
+                        _bulkRotatePodsMap[payload.appId].errorResponse = userMessage
+                        _bulkRotatePodsMap[payload.appId].resources = _resources
+                        // Updating the state with the modified map
+                        setBulkRotatePodsMap(_bulkRotatePodsMap)
+
+                        return null
+                    })
+                }
+            })
 
     const createFunctionCallsFromRestartPodMap = () => {
         // default case for restart workload for all apps

src/components/app/details/triggerView/CiWebhookDebuggingModal.tsx

@@ -16,7 +16,7 @@
 
 import React, { useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
-import { showError, Progressing, sortCallback, stopPropagation } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, Progressing, sortCallback, stopPropagation, getUrlWithSearchParams } from '@devtron-labs/devtron-fe-common-lib'
 import moment from 'moment'
 import { getCIWebhookPayload } from './ciWebhook.service'
 import { getCIPipelineURL } from '../../../common'
@@ -60,7 +60,7 @@ export default function CiWebhookModal({
                 'noreferrer',
             )
         } else {
-            history.push(`edit/workflow/${workflowId}/ci-pipeline/${ciPipelineId}`)
+            history.push(`/app/${appId}/edit/workflow/${workflowId}/ci-pipeline/${ciPipelineId}`)
         }
     }
 
@@ -267,7 +267,7 @@ export default function CiWebhookModal({
 
     const renderTimeStampDetailedDescription = () => {
         return (
-            <div style={{ height: 'calc(100vh - 75px' }} className="bcn-0 pl-16 mt-20">
+            <div style={{ height: 'calc(100vh - 75px' }} className="bcn-0 px-16 mt-20">
                 <div style={{ background: '#f2f4f7' }}>
                     <div className="cn-9 fs-12 fw-6 pt-12 pl-12">Incoming Payload</div>
                     <div
@@ -286,11 +286,11 @@ export default function CiWebhookModal({
                     >
                         {expandIncomingPayload ? 'Collapse' : 'Expand'}
                     </button>
-                    <div className="cn-9 fw-6 fs-14 flex left">
+                    <div className="cn-9 fw-6 fs-14 flex left dc__content-space">
                         Filter matching results
                         <button
                             type="button"
-                            className="mr-20 dc__transparent dc__align-right"
+                            className="dc__transparent"
                             onClick={() => onEditShowEditableCiModal(ciPipelineId, workflowId)}
                         >
                             {/* Here the CI model requires the CiPipelineId not the CiPipelineMaterialId */}
@@ -358,7 +358,7 @@ export default function CiWebhookModal({
     const renderTimeStampDetailedIncomingModal = () => {
         return (
             <div
-                className={`bcn-0 w-800 bcn-0 dc__position-fixed dc__top-0 dc__right-0 timestamp-detail-container ${
+                className={`bcn-0 w-1024 bcn-0 dc__position-fixed dc__top-0 dc__right-0 timestamp-detail-container ${
                     fromBulkCITrigger ? 'env-modal-width' : ''
                 }`}
                 style={{ zIndex: 100 }}

src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx

@@ -29,6 +29,9 @@ import {
     TabGroup,
     ToastManager,
     ToastVariantType,
+    ShowMoreText,
+    DEPLOYMENT_STATUS,
+    EMPTY_STATE_STATUS,
 } from '@devtron-labs/devtron-fe-common-lib'
 import moment from 'moment'
 import Tippy from '@tippyjs/react'
@@ -37,7 +40,7 @@ import docker from '../../../assets/icons/misc/docker.svg'
 import { ReactComponent as DeployButton } from '../../../assets/icons/ic-deploy.svg'
 import DataNotFound from '../../../assets/img/app-not-deployed.png'
 import { InstalledAppInfo } from '../../external-apps/ExternalAppService'
-import { DEPLOYMENT_STATUS, Moment12HourFormat, SERVER_ERROR_CODES, URLS } from '../../../config'
+import { Moment12HourFormat, SERVER_ERROR_CODES, URLS } from '../../../config'
 import '../../app/details/cIDetails/ciDetails.scss'
 import './chartDeploymentHistory.scss'
 import MessageUI from '../common/message.ui'
@@ -52,14 +55,16 @@ import {
     RollbackReleaseRequest,
 } from './chartDeploymentHistory.service'
 import IndexStore from '../appDetails/index.store'
-import { DEPLOYMENT_HISTORY_TAB, ERROR_EMPTY_SCREEN, EMPTY_STATE_STATUS } from '../../../config/constantMessaging'
+import { DEPLOYMENT_HISTORY_TAB, ERROR_EMPTY_SCREEN } from '../../../config/constantMessaging'
 import { importComponentFromFELibrary } from '../../common'
 import DockerImageDetails from './DockerImageDetails'
 import RollbackConfirmationDialog from './RollbackConfirmationDialog'
 import {
     processVirtualEnvironmentDeploymentData,
     renderDeploymentApprovalInfo,
 } from '../../app/details/cdDetails/utils'
+import { ReactComponent as Rocket} from '@Icons/ic-nav-rocket.svg'
+import {ReactComponent as ICLines } from '@Icons/ic-lines.svg'
 
 const VirtualHistoryArtifact = importComponentFromFELibrary('VirtualHistoryArtifact')
 
@@ -594,12 +599,34 @@ const ChartDeploymentHistory = ({
     }
 
     function renderSelectedDeploymentDetailHeader() {
-        const deployment = deploymentHistoryArr[selectedDeploymentHistoryIndex]
+        const deployment: ChartDeploymentDetail = deploymentHistoryArr[selectedDeploymentHistoryIndex]
+
+        const getViewMessage = () => {
+            const { message } = deployment
+            if (deployment.status.toLowerCase() === DEPLOYMENT_STATUS.FAILED && message) {
+                return (
+                    <div className="trigger-details__grid-helm py-4 dc__grid">
+                        <div className="flex top dc__content-center">
+                            <ICLines className="icon-dim-20 dc__no-shrink scn-7" />
+                        </div>
+
+                        <div className="flex column left">
+                                <div className=" cn-9 fs-13 fw-4 lh-20">
+                                    <span>Message</span>
+                                </div>
+
+                            {/* Need key since using ref inside of this component as useEffect dependency, so there were issues while switching builds */}
+                            {message && <ShowMoreText text={message} key={message} textClass="cn-7" />}
+                        </div>
+                    </div>
+                )
+            }}
 
         return (
-            <div className="trigger-details ml-20 mr-20 pb-20">
+            <div className="trigger-details pb-20">
                 <div className="flex dc__content-space trigger-details__summary">
-                    <div className="flex column left pt-10">
+                    <div className="flex left py-10 px-20 dc__gap-8">
+                        <Rocket className="scn-6 icon-dim-20" />
                         <div className="cn-9 fs-14 fw-6" data-testid="deployed-at-heading">
                             Deployed at
                         </div>
@@ -621,7 +648,9 @@ const ChartDeploymentHistory = ({
                                 <DockerImageDetails deployment={deployment} setShowDockerInfo={setShowDockerInfo} />
                             )}
                         </div>
+
                     </div>
+
                     {!(selectedDeploymentHistoryIndex === 0 || isVirtualEnvironment) && (
                         <Tippy className="default-tt" arrow={false} content="Re-deploy this version">
                             <button
@@ -638,6 +667,8 @@ const ChartDeploymentHistory = ({
                         <DockerListModal dockerList={deployment.dockerImages} closeTab={closeDockerInfoTab} />
                     )}
                 </div>
+                {getViewMessage()}
+
             </div>
         )
     }
@@ -711,7 +742,7 @@ const ChartDeploymentHistory = ({
                         {renderDeploymentCards()}
                     </div>
                 </div>
-                <div className="ci-details__body">{renderSelectedDeploymentDetail()}</div>
+                <div className="ci-details__body dc__overflow-scroll">{renderSelectedDeploymentDetail()}</div>
                 {showRollbackConfirmation && (
                     <RollbackConfirmationDialog
                         deploying={deploying}

src/components/v2/chartDeploymentHistory/DockerImageDetails.tsx

@@ -25,7 +25,7 @@ const DockerImageDetails = ({ deployment, setShowDockerInfo }: DockerImageDetail
     return (
         <>
             {deployment.dockerImages.slice(0, 3).map((dockerImage) => (
-                <div key={dockerImage} className="dc__app-commit__hash ml-10">
+                <div key={dockerImage} className="dc__app-commit__hash">
                     <Tippy arrow className="default-tt" content={dockerImage}>
                         <span className="flex">
                             <DockerIcon className="commit-hash__icon grayscale" />

src/components/v2/chartDeploymentHistory/chartDeploymentHistory.scss

@@ -113,3 +113,10 @@
         max-height: 444px;
     }
 }
+
+.trigger-details {
+    .trigger-details__grid-helm {
+        display: grid;
+        grid-template-columns: 52px 1fr;
+    }
+}

src/components/v2/chartDeploymentHistory/chartDeploymentHistory.service.ts

@@ -43,6 +43,7 @@ export interface ChartDeploymentDetail {
     deployedAt: DeployedAt
     deployedBy: string
     status: string
+    message?: string
 }
 
 export interface RollbackReleaseRequest {

src/css/base.scss

@@ -4904,6 +4904,10 @@ textarea::placeholder {
     grid-template-columns: 50% 50%;
 }
 
+.dc__grid {
+    display: grid;
+}
+
 .cd-material {
     // Replace bulk ci/cd sidebar css with this one when moving a common component
     &__container-with-sidebar {