Merge pull request #1380 from devtron-labs/feat-async-install-devtron

feat: handled additional deployment states

Author: Ash-exp

src/assets/icons/ic-clock.svg

@@ -9,11 +9,13 @@ export const Colors = {
 export const statusColor = {
     suspended: '#ffaa00',
     unknown: 'var(--N700)',
+    queued: 'var(--N700)',
     degraded: 'var(--R500)',
     healthy: 'var(--G500)',
     notdeployed: 'var(--N500)',
     missing: 'var(--N700)',
     progressing: "var(--orange)",
+    initiating: "var(--orange)",
     starting: "#FF7E5B",
     succeeded: '#1dad70',
     running: '#FF7E5B',
@@ -28,8 +30,10 @@ export const statusColor = {
 
 export const statusIcon = {
     failed:'failed',
+    queued:'queued',
     suspended: 'suspended',
     starting: "progressing",
+    initiating: "progressing",
     unknown: 'unknown',
     degraded: 'degraded',
     healthy: 'healthy',

src/components/app/config.tsx

@@ -28,6 +28,7 @@ function DeploymentStatusCard({
             search: DEPLOYMENT_STATUS_QUERY_PARAM,
         })
     }
+    const ProgressingStateList:string[] = [DEPLOYMENT_STATUS.INPROGRESS, DEPLOYMENT_STATUS.STARTING, DEPLOYMENT_STATUS.INITIATING]
     const renderDeploymentStatus = () => {
         return (
             <>
@@ -51,7 +52,7 @@ function DeploymentStatusCard({
                         <span
                             data-testid="deployment-status-name"
                             className={`app-summary__status-name fs-14 mr-8 fw-6 f-${deploymentStatusDetailsBreakdownData?.deploymentStatus?.toLowerCase()} ${
-                                deploymentStatusDetailsBreakdownData?.deploymentStatus === DEPLOYMENT_STATUS.INPROGRESS
+                                ProgressingStateList.includes(deploymentStatusDetailsBreakdownData?.deploymentStatus)
                                     ? 'dc__loading-dots'
                                     : ''
                             }`}

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

@@ -759,6 +759,8 @@ table.pod__table td:last-child {
             color: var(--green);
         }
 
+        &.f-starting,
+        &.f-initiating,
         &.f-suspended,
         &.f-switchedtoactiveservice {
             color: var(--orange);

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

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
-import { showError, Progressing, ConfirmationDialog, not } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, Progressing, ConfirmationDialog, not, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
 import { createGitCommitUrl, asyncWrap } from '../../../common'
 import { toast } from 'react-toastify'
+import Tippy from '@tippyjs/react'
 import { useRouteMatch, useLocation, useParams } from 'react-router'
 import { statusColor as colorMap } from '../../config'
 import { Moment12HourFormat, ZERO_TIME_STRING } from '../../../../config'
@@ -134,7 +135,18 @@ const WorkerStatus = React.memo(({ message, podStatus, stage }: WorkerStatusType
                         </div>
                     )}
                 </div>
-                {message && <div className="fs-12 cn-7">{message}</div>}
+                {message && (
+                    <Tippy
+                        theme={TippyTheme.black}
+                        className="default-tt"
+                        arrow={false}
+                        placement="bottom-start"
+                        animation="shift-toward-subtle"
+                        content={message}
+                    >
+                        <div className="fs-12 cn-7 dc__ellipsis-right__2nd-line">{message}</div>
+                    </Tippy>
+                )}
             </div>
         </>
     )

src/components/app/details/cicdHistory/TriggerDetails.tsx

@@ -290,4 +290,6 @@ export const PROGRESSING_STATUS = {
     [TERMINAL_STATUS_MAP.RUNNING]: 'running',
     [TERMINAL_STATUS_MAP.PROGRESSING]: 'progressing',
     [TERMINAL_STATUS_MAP.STARTING]: 'starting',
+    [TERMINAL_STATUS_MAP.INITIATING]: 'initiating',
+    [TERMINAL_STATUS_MAP.QUEUED]: 'queued',
 }

src/components/app/details/cicdHistory/types.tsx

@@ -32,6 +32,8 @@
     color: var(--green);
 }
 
+.f-starting,
+.f-initiating,
 .f-suspended,
 .f-switchedtoactiveservice {
     color: var(--orange);
@@ -64,6 +66,7 @@
     color: var(--yellow);
 }
 
+.f-queued,
 .f-missing,
 .f-unknown {
     color: var(--N700);

src/components/v2/appDetails/sourceInfo/environmentStatus/environmentStatus.scss

@@ -609,6 +609,8 @@ export const TERMINAL_STATUS_MAP = {
     RUNNING: 'running',
     PROGRESSING: 'progressing',
     STARTING: 'starting',
+    INITIATING: 'initiating',
+    QUEUED: 'queued',
     FAILED: 'failed',
     ERROR: 'error',
     CANCELLED: 'cancelled',
@@ -726,7 +728,10 @@ export const DEPLOYMENT_STATUS = {
     UNABLE_TO_FETCH: 'unable_to_fetch',
     INPROGRESS: 'inprogress',
     PROGRESSING: 'progressing',
+    STARTING: 'starting',
+    INITIATING: 'initiating',
     SUPERSEDED: 'superseded',
+    QUEUED: 'queued',
     UNKNOWN: 'unknown',
 }
 

src/config/constants.ts

@@ -699,6 +699,8 @@ button.anchor {
         color: var(--G500);
     }
 
+    &.f-starting,
+    &.f-initiating,
     &.f-suspended,
     &.f-switchedtoactiveservice,
     &.f-containercreating,
@@ -1113,6 +1115,7 @@ button.anchor {
     width: 24px;
     z-index: 2;
 
+    &.queued,
     &.pending {
         background: url('../assets/icons/ic-clock.svg'), $background;
         background-size: contain, contain;
@@ -1174,6 +1177,7 @@ button.anchor {
         background-size: contain, contain;
     }
 
+    &.initiating,
     &.progressing,
     &.running,
     &.request_accepted,

src/css/base.scss

@@ -41,6 +41,10 @@
     background-image: url('../assets/icons/appstatus/notdeployed.svg');
 }
 
+.queued {
+    background-image: url('../assets/icons/ic-clock.svg');
+}
+
 .suspended {
     background-image: url('../assets/icons/appstatus/suspended.svg');
 }