Merge pull request #2394 from devtron-labs/feat/build-time-breakdown

feat: build time breakdown
devtron-labs · Feb 7, 2025 · e540b7a · e540b7a
2 parents ab05995 + 9da25b0
commit e540b7a
Show file tree

Hide file tree

Showing 16 changed files with 185 additions and 201 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.6.12",
+        "@devtron-labs/devtron-fe-common-lib": "1.6.13",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

diff --git a/src/components/ApplicationGroup/AppGroup.utils.ts b/src/components/ApplicationGroup/AppGroup.utils.ts
@@ -25,6 +25,7 @@ import {
     CIMaterialType,
     SourceTypeMap,
     DEPLOYMENT_STATUS,
+    WorkflowStatusEnum,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { getParsedBranchValuesForPlugin } from '@Components/common'
 import { DEFAULT_GIT_BRANCH_VALUE, DOCKER_FILE_ERROR_TITLE, SOURCE_NOT_CONFIGURED, URLS } from '../../config'
@@ -55,7 +56,12 @@ export const processWorkflowStatuses = (
                 status: pipeline.ciStatus,
                 storageConfigured: pipeline.storageConfigured || false,
             }
-            if (!cicdInProgress && (pipeline.ciStatus === 'Starting' || pipeline.ciStatus === 'Running')) {
+            if (
+                !cicdInProgress &&
+                (pipeline.ciStatus === WorkflowStatusEnum.STARTING ||
+                    pipeline.ciStatus === WorkflowStatusEnum.RUNNING ||
+                    pipeline.ciStatus === WorkflowStatusEnum.WAITING_TO_START)
+            ) {
                 cicdInProgress = true
             }
         })
@@ -73,11 +79,13 @@ export const processWorkflowStatuses = (
             }
             if (
                 !cicdInProgress &&
-                (pipeline.pre_status === 'Starting' ||
-                    pipeline.pre_status === 'Running' ||
-                    pipeline.deploy_status === 'Progressing' ||
-                    pipeline.post_status === 'Starting' ||
-                    pipeline.post_status === 'Running')
+                (pipeline.pre_status === WorkflowStatusEnum.STARTING ||
+                    pipeline.pre_status === WorkflowStatusEnum.RUNNING ||
+                    pipeline.pre_status === WorkflowStatusEnum.WAITING_TO_START ||
+                    pipeline.deploy_status === WorkflowStatusEnum.PROGRESSING ||
+                    pipeline.post_status === WorkflowStatusEnum.STARTING ||
+                    pipeline.post_status === WorkflowStatusEnum.RUNNING ||
+                    pipeline.post_status === WorkflowStatusEnum.WAITING_TO_START)
             ) {
                 cicdInProgress = true
             }
@@ -322,8 +330,8 @@ export const getAppGroupDeploymentHistoryLink = (
     }
     if (redirectToAppGroup) {
         // It will redirect to application group deployment history in case of same environment
-        return `${URLS.APPLICATION_GROUP}/${envId}/${URLS.APP_CD_DETAILS}/${appId}/${pipelineId}${type ?`?type=${type}` : ''}`
+        return `${URLS.APPLICATION_GROUP}/${envId}/${URLS.APP_CD_DETAILS}/${appId}/${pipelineId}${type ? `?type=${type}` : ''}`
         // It will redirect to application deployment history in case of other environments
     }
-    return `${URLS.APP}/${appId}/${URLS.APP_CD_DETAILS}/${envId}/${pipelineId}${type ?`?type=${type}` : ''}`
+    return `${URLS.APP}/${appId}/${URLS.APP_CD_DETAILS}/${envId}/${pipelineId}${type ? `?type=${type}` : ''}`
 }
diff --git a/src/components/app/Overview/Overview.tsx b/src/components/app/Overview/Overview.tsx
@@ -31,6 +31,8 @@ import {
     EditableTextArea,
     ToastManager,
     ToastVariantType,
+    WorkflowStatusEnum,
+    getWorkflowNodeStatusTitle,
 } from '@devtron-labs/devtron-fe-common-lib'
 import ReactGA from 'react-ga4'
 import { getGitProviderIcon, handleUTCTime, importComponentFromFELibrary } from '../../common'
@@ -376,11 +378,13 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
         switch (status) {
             case 'Succeeded':
                 return <SucceededIcon className="dc__app-summary__icon icon-dim-16 mr-6" />
+            case WorkflowStatusEnum.TIMED_OUT:
             case 'Failed':
             case 'Error':
                 return <FailedIcon className="dc__app-summary__icon icon-dim-16 mr-6" />
             case 'InProgress':
                 return <InProgressIcon className="dc__app-summary__icon icon-dim-16 mr-6" />
+            case WorkflowStatusEnum.WAITING_TO_START:
             case 'Starting':
                 return <div className="dc__app-summary__icon icon-dim-16 mr-6 progressing" />
             case 'Running':
@@ -435,11 +439,7 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
                                 className="mr-16 w-150 h-20 m-tb-8 fs-13 cn-9 flex dc__content-start"
                             >
                                 {getStatusIcon(jobPipeline.status)}
-                                {jobPipeline.status === 'CANCELLED' ? (
-                                    <div>Aborted</div>
-                                ) : (
-                                    <div>{jobPipeline.status}</div>
-                                )}
+                                {getWorkflowNodeStatusTitle(jobPipeline.status)}
                             </div>
                             <div
                                 data-testid={`${jobPipeline.environmentName}-${index}`}

diff --git a/src/components/app/config.tsx b/src/components/app/config.tsx
@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-export const Colors = {
-    yellow: 'var(--O500)',
+import { WorkflowStatusEnum } from '@devtron-labs/devtron-fe-common-lib'
+
+const Colors = {
     red: 'var(--R500)',
     green: 'var(--G500)',
     orange: 'var(--O500)',
@@ -36,12 +37,14 @@ export const CI_PIPELINE_VIEW = {
 
 export const TriggerStatus = {
     pending: Colors.orange,
-    starting: Colors.yellow,
-    running: Colors.yellow,
+    starting: Colors.orange,
+    running: Colors.orange,
     succeeded: Colors.green,
     failed: Colors.red,
     error: Colors.red,
-    cancelled: Colors.gray,
+    cancelled: Colors.red,
+    [WorkflowStatusEnum.TIMED_OUT.toLowerCase()]: Colors.red,
     notbuilt: Colors.gray,
     nottriggered: Colors.gray,
+    [WorkflowStatusEnum.WAITING_TO_START.toLowerCase()]: Colors.orange,
 }
diff --git a/src/components/app/details/cIDetails/CIDetails.tsx b/src/components/app/details/cIDetails/CIDetails.tsx
@@ -440,10 +440,12 @@ export const Details = ({
                         podStatus={triggerDetails.podStatus}
                         stage={triggerDetails.stage}
                         artifact={triggerDetails.artifact}
+                        namespace={triggerDetails.namespace}
                         environmentName={triggerDetails.environmentName}
                         isJobView={isJobView}
                         workerPodName={triggerDetails.podName}
                         renderDeploymentHistoryTriggerMetaText={renderDeploymentHistoryTriggerMetaText}
+                        workflowExecutionStages={triggerDetails.workflowExecutionStages}
                     />
                     <div className="dc__border-bottom pl-50 pr-20 dc__position-sticky dc__top-0 bg__primary dc__zi-3">
                         <TabGroup
@@ -661,7 +663,7 @@ const SecurityTab = ({ artifactId, status, appIdFromParent }: SecurityTabType) =
         return <CIRunningView isSecurityTab />
     }
 
-    if (!artifactId || ['failed', 'cancelled'].includes(status.toLowerCase())) {
+    if (!artifactId) {
         return (
             <GenericEmptyState
                 title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsGenerated}

diff --git a/src/components/app/details/cIDetails/ciDetails.scss b/src/components/app/details/cIDetails/ciDetails.scss
@@ -127,16 +127,6 @@
     border-bottom: 1px solid var(--N100);
 }
 
-.build-card-popup {
-    box-shadow: 0 2px 4px -1px rgba(0, 56, 112, 0.3);
-
-    .ci-material-detail {
-        display: grid;
-        grid-template-columns: 20px 1fr;
-        column-gap: 8px;
-    }
-}
-
 .ci-details__build-card-container {
     text-decoration: unset;
     padding: 0 16px;

diff --git a/src/components/app/details/triggerView/workflow/nodes/TriggerLinkedCINode.tsx b/src/components/app/details/triggerView/workflow/nodes/TriggerLinkedCINode.tsx
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { RouteComponentProps, Link } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
-import link from '../../../../../../assets/icons/ic-link.svg'
-import { ReactComponent as ICLinkedCINode } from '../../../../../../assets/icons/ic-node-build-linked.svg'
+import { getWorkflowNodeStatusTitle } from '@devtron-labs/devtron-fe-common-lib'
+import link from '@Icons/ic-link.svg'
+import { ReactComponent as ICLinkedCINode } from '@Icons/ic-node-build-linked.svg'
 import { TriggerStatus } from '../../../../config'
 import { DEFAULT_STATUS, URLS } from '../../../../../../config'
 
@@ -78,7 +79,7 @@ export class TriggerLinkedCINode extends Component<CINodeProps> {
                 className="dc__cd-trigger-status"
                 style={{ color: TriggerStatus[status] }}
             >
-                {this.props.status}
+                {getWorkflowNodeStatusTitle(this.props.status)}
                 {!this.props.fromAppGrouping && (
                     <>
                         {this.props.status && <span className="mr-5 ml-5">/</span>}

diff --git a/src/components/app/details/triggerView/workflow/nodes/triggerCINode.tsx b/src/components/app/details/triggerView/workflow/nodes/triggerCINode.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { RouteComponentProps, Link } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
-import { CIMaterialType, ConsequenceType } from '@devtron-labs/devtron-fe-common-lib'
+import { CIMaterialType, ConsequenceType, getWorkflowNodeStatusTitle } from '@devtron-labs/devtron-fe-common-lib'
 import { TriggerStatus } from '../../../../config'
 import { BUILD_STATUS, DEFAULT_STATUS, URLS } from '../../../../../../config'
 import { ReactComponent as IcLink } from '../../../../../../assets/icons/ic-link.svg'
@@ -106,7 +106,7 @@ export class TriggerCINode extends Component<TriggerCINodeProps> {
                 className="dc__cd-trigger-status mb-6"
                 style={{ color: TriggerStatus[status] }}
             >
-                {this.props.status && this.props.status.toLowerCase() === 'cancelled' ? 'ABORTED' : this.props.status}
+                {getWorkflowNodeStatusTitle(this.props.status)}
                 {this.props.status && <span className="mr-5 ml-5">/</span>}
                 <Link
                     data-testid={`ci-trigger-select-details-button-${this.props.title}`}

diff --git a/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx b/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx
@@ -16,7 +16,7 @@
 
 import { Component } from 'react'
 import { Link } from 'react-router-dom'
-import { DeploymentAppTypes, stopPropagation } from '@devtron-labs/devtron-fe-common-lib'
+import { DeploymentAppTypes, stopPropagation, getWorkflowNodeStatusTitle } from '@devtron-labs/devtron-fe-common-lib'
 import { TriggerPrePostCDNodeProps, TriggerPrePostCDNodeState } from '../../types'
 import { TriggerStatus } from '../../../../config'
 import { BUILD_STATUS, URLS, DEFAULT_STATUS } from '../../../../../../config'
@@ -45,7 +45,7 @@ export class TriggerPrePostCDNode extends Component<TriggerPrePostCDNodeProps, T
                 this.props.id,
                 this.props.match.params.envId === this.props.environmentId.toString(),
                 '',
-                this.props.type
+                this.props.type,
             )
         }
         return `${this.props.match.url.replace(URLS.APP_TRIGGER, URLS.APP_CD_DETAILS)}/${this.props.environmentId}/${
@@ -63,7 +63,7 @@ export class TriggerPrePostCDNode extends Component<TriggerPrePostCDNodeProps, T
             return (
                 <div className="dc__cd-trigger-status" style={{ color: TriggerStatus[status] }}>
                     <span data-testid={`${this.props.title}-trigger-status-${this.props.index}`}>
-                        {this.props.status}
+                        {getWorkflowNodeStatusTitle(this.props.status)}
                     </span>
                     <>
                         {this.props.status && <span className="mr-5 ml-5">/</span>}

diff --git a/src/components/common/helpers/Helpers.tsx b/src/components/common/helpers/Helpers.tsx
@@ -19,7 +19,6 @@ import {
     showError,
     OptionType,
     DeploymentAppTypes,
-    APIOptions,
     useWindowSize,
     APPROVAL_MODAL_TYPE,
     YAMLStringify,
@@ -31,7 +30,7 @@ import {
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
-import { Link, PromptProps } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import ReactGA from 'react-ga4'
 import { getDateInMilliseconds } from '../../../Pages/GlobalConfigurations/Authorization/APITokens/apiToken.utils'
 import { ClusterImageList, ImageList, SelectGroupType } from '../../ClusterNodes/types'
@@ -45,11 +44,6 @@ import { getAggregator } from '../../app/details/appDetails/utils'
 import { JUMP_TO_KIND_SHORT_NAMES, SIDEBAR_KEYS } from '../../ResourceBrowser/Constants'
 import { AUTO_SELECT } from '../../ClusterNodes/constants'
 import { PATTERNS } from '../../../config/constants'
-import { ReactComponent as GitLab } from '../../../assets/icons/git/gitlab.svg'
-import { ReactComponent as Git } from '../../../assets/icons/git/git.svg'
-import { ReactComponent as GitHub } from '../../../assets/icons/git/github.svg'
-import { ReactComponent as BitBucket } from '../../../assets/icons/git/bitbucket.svg'
-import { ReactComponent as ICAWSCodeCommit } from '../../../assets/icons/ic-aws-codecommit.svg'
 import { AppEnvLocalStorageKeyType, FilterParentType } from '@Components/ApplicationGroup/AppGroup.types'
 import { APP_GROUP_LOCAL_STORAGE_KEY, ENV_GROUP_LOCAL_STORAGE_KEY } from '@Components/ApplicationGroup/Constants'
 import { GetAndSetAppGroupFiltersParamsType, SetFiltersInLocalStorageParamsType } from './types'
@@ -1132,30 +1126,6 @@ export const getPluginIdsFromBuildStage = (
 
     return pluginIds
 }
-// Should contain git-codecommit.*.amazonaws.com
-export const isAWSCodeCommitURL = (url: string = ''): boolean => {
-    return url.includes('git-codecommit.') && url.includes('.amazonaws.com')
-}
-
-export const renderMaterialIcon = (url: string = '') => {
-    if (url.includes('gitlab')) {
-        return <GitLab className="dc__vertical-align-middle icon-dim-20" />
-    }
-
-    if (url.includes('github')) {
-        return <GitHub className="dc__vertical-align-middle icon-dim-20 fcn-8" />
-    }
-
-    if (url.includes('bitbucket')) {
-        return <BitBucket className="dc__vertical-align-middle icon-dim-20" />
-    }
-
-    if (isAWSCodeCommitURL(url)) {
-        return <ICAWSCodeCommit className="dc__vertical-align-middle icon-dim-18" />
-    }
-
-    return <Git className="dc__vertical-align-middle icon-dim-20" />
-}
 
 export const getSeverityWithCount = (severityCount: SeverityCount) => {
     if (severityCount.critical) {

diff --git a/src/components/gitProvider/GitProvider.tsx b/src/components/gitProvider/GitProvider.tsx
@@ -32,6 +32,7 @@ import {
     ToastManager,
     SelectPicker,
     ComponentSizeType,
+    renderMaterialIcon,
     ERROR_STATUS_CODE,
     Button,
     ButtonStyleType,
@@ -51,7 +52,6 @@ import {
     handleOnBlur,
     handleOnFocus,
     parsePassword,
-    renderMaterialIcon,
     TLSConnectionForm,
 } from '@Components/common'
 import { getGitHostList, getGitProviderList } from '../../services/service'

diff --git a/src/components/material/CreateMaterial.tsx b/src/components/material/CreateMaterial.tsx
@@ -15,11 +15,10 @@
  */
 
 import { Component } from 'react'
-import { showError, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, ToastManager, ToastVariantType, isAWSCodeCommitURL } from '@devtron-labs/devtron-fe-common-lib'
 import { createMaterial } from './material.service'
 import { MaterialView } from './MaterialView'
 import { CreateMaterialState } from './material.types'
-import { isAWSCodeCommitURL } from '../common'
 
 interface CreateMaterialProps {
     appId: number

diff --git a/src/components/material/MaterialView.tsx b/src/components/material/MaterialView.tsx
@@ -27,6 +27,8 @@ import {
     SelectPicker,
     ComponentSizeType,
     SelectPickerProps,
+    renderMaterialIcon,
+    isAWSCodeCommitURL,
     Button,
     ButtonStyleType,
     ButtonVariantType,
@@ -44,7 +46,7 @@ import { ReactComponent as ICHelpOutline } from '../../assets/icons/ic-help-outl
 import { ReactComponent as Help } from '../../assets/icons/ic-help.svg'
 import { ReactComponent as Check } from '../../assets/icons/ic-check-circle-green.svg'
 import { ReactComponent as Wrong } from '../../assets/icons/ic-close-circle.svg'
-import { isAWSCodeCommitURL, renderMaterialIcon, sortObjectArrayAlphabetically } from '../common/helpers/Helpers'
+import { sortObjectArrayAlphabetically } from '../common/helpers/Helpers'
 import { deleteMaterial } from './material.service'
 import {
     DeleteComponentsName,

diff --git a/src/components/material/UpdateMaterial.tsx b/src/components/material/UpdateMaterial.tsx
@@ -15,11 +15,10 @@
  */
 
 import React, { Component } from 'react'
-import { showError, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, ToastManager, ToastVariantType, isAWSCodeCommitURL } from '@devtron-labs/devtron-fe-common-lib'
 import { updateMaterial } from './material.service'
 import { GitMaterialType, UpdateMaterialState } from './material.types'
 import { MaterialView } from './MaterialView'
-import { isAWSCodeCommitURL } from '../common'
 
 interface UpdateMaterialProps {
     appId: number

diff --git a/src/css/base.scss b/src/css/base.scss
@@ -2178,6 +2178,10 @@ button.anchor {
     &--n7 {
         border-left: solid 1px var(--N700);
     }
+
+    &--n3 {
+        border-left: solid 1px var(--N300);
+    }
 }
 
 .dc__border-left-n0 {
@@ -5038,6 +5042,12 @@ textarea::placeholder {
     display: grid;
 }
 
+.dc__icon-text-layout {
+    display: grid;
+    grid-template-columns: 20px 1fr;
+    gap: 4px;
+}
+
 .dc__contents {
     display: contents;
 }