feat: add target platforms support in LogStageAccordion and LogsRenderer components

Author: AbhishekA1509

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

@@ -1,9 +1,12 @@
+import { RefCallback } from 'react'
 import DOMPurify from 'dompurify'
 import { getTimeDifference } from '@Shared/Helpers'
-import { RefCallback } from 'react'
+import { Tooltip } from '@Common/Tooltip'
+import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
+import { ReactComponent as ICStack } from '@Icons/ic-stack.svg'
 import { LogStageAccordionProps } from './types'
 import { getLogSearchIndex, getStageStatusIcon } from './utils'
-import { ReactComponent as ICCaretDown } from '../../../Assets/Icon/ic-caret-down.svg'
+import { TargetPlatformListTooltip } from '../TargetPlatforms'
 
 const LogsItemContainer = ({ children }: { children: React.ReactNode }) => (
     <div className="display-grid dc__column-gap-10 dc__align-start logs-renderer__log-item">{children}</div>
@@ -22,6 +25,7 @@ const LogStageAccordion = ({
     isLoading,
     fullScreenView,
     searchIndex,
+    targetPlatforms,
 }: LogStageAccordionProps) => {
     const handleAccordionToggle = () => {
         if (isOpen) {
@@ -79,7 +83,28 @@ const LogStageAccordion = ({
                     </div>
                 </div>
 
-                {!!endTime && <span className="text__white fs-13 fw-4 lh-20">{getFormattedTimeDifference()}</span>}
+                <div className="flexbox dc__gap-8">
+                    {!!targetPlatforms?.length && (
+                        <>
+                            <Tooltip
+                                content={<TargetPlatformListTooltip targetPlatforms={targetPlatforms} />}
+                                alwaysShowTippyOnHover
+                            >
+                                <div className="flexbox dc__gap-4 dc__align-items-center">
+                                    <ICStack className="scn-0 dc__no-shrink icon-stroke__white icon-dim-12" />
+                                    <span className="text__white fs-13 fw-4 lh-20">
+                                        {targetPlatforms.length}&nbsp;target platform
+                                        {targetPlatforms.length > 1 ? 's' : ''}
+                                    </span>
+                                </div>
+                            </Tooltip>
+
+                            <div className="dc__bullet--white dc__bullet" />
+                        </>
+                    )}
+
+                    {!!endTime && <span className="text__white fs-13 fw-4 lh-20">{getFormattedTimeDifference()}</span>}
+                </div>
             </button>
 
             {isOpen && (

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -19,7 +19,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import AnsiUp from 'ansi_up'
 import DOMPurify from 'dompurify'
 import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants'
-import { escapeRegExp } from '@Shared/Helpers'
+import { escapeRegExp, sanitizeTargetPlatforms } from '@Shared/Helpers'
 import { ReactComponent as ICExpandAll } from '@Icons/ic-expand-all.svg'
 import { ReactComponent as ICCollapseAll } from '@Icons/ic-collapse-all.svg'
 import { ReactComponent as ICArrow } from '@Icons/ic-caret-down.svg'
@@ -311,7 +311,7 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
         const newStageList = streamDataList.reduce((acc, streamItem: string, index) => {
             if (streamItem.startsWith(LOGS_STAGE_IDENTIFIER)) {
                 try {
-                    const { stage, startTime, endTime, status }: StageInfoDTO = JSON.parse(
+                    const { stage, startTime, endTime, status, metadata }: StageInfoDTO = JSON.parse(
                         streamItem.split(LOGS_STAGE_STREAM_SEPARATOR)[1],
                     )
                     const existingStage = acc.find((item) => item.stage === stage && item.startTime === startTime)
@@ -345,6 +345,7 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
                                 !!targetSearchKey,
                             ),
                             status: derivedStatus,
+                            targetPlatforms: sanitizeTargetPlatforms(metadata?.targetPlatforms),
                             logs: [],
                         })
                     }
@@ -557,23 +558,26 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
                     </div>
 
                     <div className="flexbox-col px-12 dc__gap-4">
-                        {stageList.map(({ stage, isOpen, logs, endTime, startTime, status }, index) => (
-                            <LogStageAccordion
-                                key={`${stage}-${startTime}-log-stage-accordion`}
-                                stage={stage}
-                                isOpen={isOpen}
-                                logs={logs}
-                                endTime={endTime}
-                                startTime={startTime}
-                                status={status}
-                                handleStageClose={handleStageClose}
-                                handleStageOpen={handleStageOpen}
-                                stageIndex={index}
-                                isLoading={index === stageList.length - 1 && areEventsProgressing}
-                                fullScreenView={fullScreenView}
-                                searchIndex={searchResults[currentSearchIndex]}
-                            />
-                        ))}
+                        {stageList.map(
+                            ({ stage, isOpen, logs, endTime, startTime, status, targetPlatforms }, index) => (
+                                <LogStageAccordion
+                                    key={`${stage}-${startTime}-log-stage-accordion`}
+                                    stage={stage}
+                                    isOpen={isOpen}
+                                    logs={logs}
+                                    endTime={endTime}
+                                    startTime={startTime}
+                                    targetPlatforms={targetPlatforms}
+                                    status={status}
+                                    handleStageClose={handleStageClose}
+                                    handleStageOpen={handleStageOpen}
+                                    stageIndex={index}
+                                    isLoading={index === stageList.length - 1 && areEventsProgressing}
+                                    fullScreenView={fullScreenView}
+                                    searchIndex={searchResults[currentSearchIndex]}
+                                />
+                            ),
+                        )}
                     </div>
                 </div>
             )

src/Shared/Components/CICDHistory/types.tsx

@@ -30,7 +30,15 @@ import {
     SortingOrder,
 } from '../../../Common'
 import { DeploymentStageType } from '../../constants'
-import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types'
+import {
+    AggregationKeys,
+    GitTriggers,
+    Node,
+    NodeType,
+    ResourceKindType,
+    ResourceVersionType,
+    TargetPlatformsDTO,
+} from '../../types'
 import { TERMINAL_STATUS_MAP } from './constants'
 
 export enum HistoryComponentType {
@@ -747,11 +755,13 @@ export interface StageInfoDTO {
     startTime: string
     endTime?: string
     status?: StageStatusType
+    metadata: Partial<Pick<TargetPlatformsDTO, 'targetPlatforms'>>
 }
 
 export interface StageDetailType extends Pick<StageInfoDTO, 'stage' | 'startTime' | 'endTime' | 'status'> {
     logs: string[]
     isOpen: boolean
+    targetPlatforms?: StageInfoDTO['metadata']['targetPlatforms']
 }
 
 export interface LogStageAccordionProps extends StageDetailType, Pick<LogsRendererType, 'fullScreenView'> {

src/Shared/Components/ImageCard/ImageCard.tsx

@@ -30,7 +30,7 @@ const ImageCard = ({
     materialInfoRootClassName = '',
 }: ImageCardProps) => (
     <div className={`material-history material-history--cd image-tag-parent-card ${rootClassName || ''}`}>
-        <div className="p-12 bg__primary br-4 flexbox-col dc__gap-12">
+        <div className="p-12 bg__primary br-4 flexbox-col">
             <div className="dc__content-space flexbox dc__align-start">
                 <div className="flexbox-col dc__content-start dc__align-start">
                     <SequentialCDCardTitle {...sequentialCDCardTitleProps} />