14
14
* limitations under the License.
15
15
*/
16
16
17
- import React , { useEffect , useRef } from 'react'
17
+ import React , { memo , useEffect , useRef } from 'react'
18
18
import TippyHeadless from '@tippyjs/react/headless'
19
19
import ReactGA from 'react-ga4'
20
20
import { useHistory , useParams , useRouteMatch , generatePath , useLocation , NavLink } from 'react-router-dom'
21
21
import ReactSelect , { components } from 'react-select'
22
22
import moment from 'moment'
23
+ import { ReactComponent as ICArrowBackward } from '@Icons/ic-arrow-backward.svg'
24
+ import { ReactComponent as ICDocker } from '@Icons/ic-docker.svg'
25
+ import { ReactComponent as ICCalendar } from '@Icons/ic-calendar.svg'
26
+ import { ReactComponent as ICUserCircle } from '@Icons/ic-user-circle.svg'
27
+ import { ReactComponent as ICGithub } from '@Icons/ic-github.svg'
28
+ import { ReactComponent as ICBranch } from '@Icons/ic-branch.svg'
23
29
import {
24
30
SidebarType ,
25
31
CICDSidebarFilterOptionType ,
26
32
HistoryComponentType ,
27
33
HistorySummaryCardType ,
28
- SummaryTooltipCardType ,
34
+ DeploymentSummaryTooltipCardType ,
29
35
FetchIdDataStatus ,
36
+ BuildAndTaskSummaryTooltipCardProps ,
30
37
} from './types'
31
38
import { getCustomOptionSelectionStyle } from '../ReactSelect'
32
39
import { DetectBottom } from '../DetectBottom'
@@ -36,23 +43,106 @@ import {
36
43
SourceTypeMap ,
37
44
createGitCommitUrl ,
38
45
DropdownIndicator ,
46
+ Tooltip ,
39
47
} from '../../../Common'
40
- import { ReactComponent as ICArrowBackward } from '../../../Assets/Icon/ic-arrow-backward.svg'
41
- import { ReactComponent as ICDocker } from '../../../Assets/Icon/ic-docker.svg'
42
48
import { GitTriggers } from '../../types'
43
49
import { CiPipelineSourceConfig } from './CiPipelineSourceConfig'
44
- import { HISTORY_LABEL , FILTER_STYLE , statusColor as colorMap } from './constants'
45
- import { getHistoryItemStatusIconFromWorkflowStages , getTriggerStatusIcon , getWorkflowNodeStatusTitle } from './utils'
50
+ import { HISTORY_LABEL , FILTER_STYLE , statusColor as colorMap , DEFAULT_CLUSTER_ID } from './constants'
51
+ import {
52
+ getFormattedTriggerTime ,
53
+ getHistoryItemStatusIconFromWorkflowStages ,
54
+ getTriggerStatusIcon ,
55
+ getWorkflowNodeStatusTitle ,
56
+ sanitizeWorkflowExecutionStages ,
57
+ } from './utils'
58
+ import { WorkerStatus } from './TriggerOutput'
59
+
60
+ const GitTriggerList = memo (
61
+ ( {
62
+ ciMaterials,
63
+ gitTriggers,
64
+ addMarginTop,
65
+ } : Pick < DeploymentSummaryTooltipCardType , 'ciMaterials' | 'gitTriggers' > & {
66
+ addMarginTop ?: boolean
67
+ } ) : JSX . Element => (
68
+ // eslint-disable-next-line react/jsx-no-useless-fragment
69
+ < >
70
+ { Object . keys ( gitTriggers ?? { } ) . length > 0 &&
71
+ ciMaterials ?. map ( ( ciMaterial ) => {
72
+ const gitDetail : GitTriggers = gitTriggers [ ciMaterial . id ]
73
+ const sourceType = gitDetail ?. CiConfigureSourceType
74
+ ? gitDetail . CiConfigureSourceType
75
+ : ciMaterial ?. type
76
+ const sourceValue = gitDetail ?. CiConfigureSourceValue
77
+ ? gitDetail . CiConfigureSourceValue
78
+ : ciMaterial ?. value
79
+ const gitMaterialUrl = gitDetail ?. GitRepoUrl ? gitDetail . GitRepoUrl : ciMaterial ?. url
80
+ if ( sourceType !== SourceTypeMap . WEBHOOK && ! gitDetail ) {
81
+ return null
82
+ }
83
+ return (
84
+ < div className = { `${ addMarginTop ? 'mt-22' : '' } ci-material-detail"` } key = { ciMaterial . id } >
85
+ { sourceType === SourceTypeMap . WEBHOOK ? (
86
+ < div className = "flex left column" >
87
+ < CiPipelineSourceConfig
88
+ sourceType = { sourceType }
89
+ sourceValue = { sourceValue }
90
+ showTooltip = { false }
91
+ />
92
+ </ div >
93
+ ) : (
94
+ < div className = "flexbox-col dc__gap-8" >
95
+ < div className = "flexbox dc__gap-4" >
96
+ < ICGithub className = "icon-dim-20 dc__no-shrink" />
97
+
98
+ { gitDetail ?. GitRepoName && (
99
+ < >
100
+ < Tooltip content = { gitDetail . GitRepoName } >
101
+ < span className = "cn-9 fs-13 fw-6 lh-20" >
102
+ { gitDetail . GitRepoName }
103
+ </ span >
104
+ </ Tooltip >
105
+
106
+ < span className = "cn-5 fs-13 fw-4 lh-20 dc__no-shrink" > /</ span >
107
+ </ >
108
+ ) }
109
+
110
+ < a
111
+ href = { createGitCommitUrl ( gitMaterialUrl , gitDetail . Commit ) }
112
+ target = "_blank"
113
+ rel = "noopener noreferrer"
114
+ className = "anchor flexbox dc__gap-2"
115
+ >
116
+ < ICBranch className = "icon-dim-12 dc__no-shrink fcn-7" />
117
+ { sourceValue }
118
+ </ a >
119
+ </ div >
46
120
47
- const SummaryTooltipCard = React . memo (
121
+ { gitDetail ?. Message && (
122
+ < Tooltip content = { gitDetail . Message } >
123
+ < p className = "m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate--clamp-3" >
124
+ { gitDetail . Message }
125
+ </ p >
126
+ </ Tooltip >
127
+ ) }
128
+ </ div >
129
+ ) }
130
+ </ div >
131
+ )
132
+ } ) }
133
+ </ >
134
+ ) ,
135
+ )
136
+
137
+ const DeploymentSummaryTooltipCard = memo (
48
138
( {
49
139
status,
50
140
startedOn,
51
141
triggeredBy,
52
142
triggeredByEmail,
53
143
ciMaterials,
54
144
gitTriggers,
55
- } : SummaryTooltipCardType ) : JSX . Element => (
145
+ } : DeploymentSummaryTooltipCardType ) : JSX . Element => (
56
146
< div className = "build-card-popup p-16 br-4 w-400 bg__primary mxh-300 dc__overflow-scroll" >
57
147
< span className = "fw-6 fs-16 mb-4" style = { { color : colorMap [ status . toLowerCase ( ) ] } } >
58
148
{ getWorkflowNodeStatusTitle ( status ) }
@@ -63,54 +153,57 @@ const SummaryTooltipCard = React.memo(
63
153
< div className = "dc__bullet ml-6 mr-6" />
64
154
< div > { triggeredBy === 1 ? 'auto trigger' : triggeredByEmail } </ div >
65
155
</ div >
66
- { Object . keys ( gitTriggers ?? { } ) . length > 0 &&
67
- ciMaterials ?. map ( ( ciMaterial ) => {
68
- const gitDetail : GitTriggers = gitTriggers [ ciMaterial . id ]
69
- const sourceType = gitDetail ?. CiConfigureSourceType
70
- ? gitDetail . CiConfigureSourceType
71
- : ciMaterial ?. type
72
- const sourceValue = gitDetail ?. CiConfigureSourceValue
73
- ? gitDetail . CiConfigureSourceValue
74
- : ciMaterial ?. value
75
- const gitMaterialUrl = gitDetail ?. GitRepoUrl ? gitDetail . GitRepoUrl : ciMaterial ?. url
76
- if ( sourceType !== SourceTypeMap . WEBHOOK && ! gitDetail ) {
77
- return null
78
- }
79
- return (
80
- < div className = "mt-22 ci-material-detail" key = { ciMaterial . id } >
81
- { sourceType === SourceTypeMap . WEBHOOK ? (
82
- < div className = "flex left column" >
83
- < CiPipelineSourceConfig
84
- sourceType = { sourceType }
85
- sourceValue = { sourceValue }
86
- showTooltip = { false }
87
- />
88
- </ div >
89
- ) : (
90
- < >
91
- < div className = "dc__git-logo" > </ div >
92
- < div className = "flex left column" >
93
- < a
94
- href = { createGitCommitUrl ( gitMaterialUrl , gitDetail . Commit ) }
95
- target = "_blank"
96
- rel = "noopener noreferrer"
97
- className = "fs-12 fw-6 cn-9 pointer"
98
- >
99
- /{ sourceValue }
100
- </ a >
101
- < p className = "fs-12 cn-7" > { gitDetail ?. Message } </ p >
102
- </ div >
103
- </ >
104
- ) }
105
- </ div >
106
- )
107
- } ) }
156
+
157
+ < GitTriggerList addMarginTop ciMaterials = { ciMaterials } gitTriggers = { gitTriggers } />
108
158
</ div >
109
159
</ div >
110
160
) ,
111
161
)
112
162
113
- const ViewAllCardsTile = React . memo (
163
+ const BuildAndTaskSummaryTooltipCard = memo (
164
+ ( {
165
+ workflowExecutionStages,
166
+ triggeredByEmail,
167
+ namespace,
168
+ podName,
169
+ stage,
170
+ gitTriggers,
171
+ ciMaterials,
172
+ } : BuildAndTaskSummaryTooltipCardProps ) : JSX . Element => {
173
+ const executionInfo = sanitizeWorkflowExecutionStages ( workflowExecutionStages )
174
+
175
+ return (
176
+ < div className = "build-card-popup p-16 br-4 w-350 bg__primary mxh-300 dc__overflow-auto flexbox-col dc__gap-16" >
177
+ { /* Info section */ }
178
+ < div className = "dc__icon-text-layout" >
179
+ < ICCalendar className = "fcn-7 icon-dim-20 dc__no-shrink" />
180
+ < time className = "cn-9 fs-12 cn-9 fw-4 lh-20" >
181
+ { executionInfo ?. triggeredOn ? getFormattedTriggerTime ( executionInfo . triggeredOn ) : '--' }
182
+ </ time >
183
+
184
+ < ICUserCircle className = "fcn-7 icon-dim-20 dc__no-shrink" />
185
+ < Tooltip content = { triggeredByEmail } >
186
+ < span className = "cn-9 fs-12 fw-4 lh-20 dc__truncate" > { triggeredByEmail } </ span >
187
+ </ Tooltip >
188
+
189
+ < WorkerStatus
190
+ message = { executionInfo ?. workerDetails ?. message }
191
+ podStatus = { executionInfo ?. workerDetails ?. status }
192
+ stage = { stage }
193
+ finishedOn = { executionInfo ?. workerDetails ?. endTime }
194
+ clusterId = { executionInfo ?. workerDetails ?. clusterId || DEFAULT_CLUSTER_ID }
195
+ workerPodName = { podName }
196
+ namespace = { namespace }
197
+ />
198
+ </ div >
199
+
200
+ < GitTriggerList gitTriggers = { gitTriggers } ciMaterials = { ciMaterials } />
201
+ </ div >
202
+ )
203
+ } ,
204
+ )
205
+
206
+ const ViewAllCardsTile = memo (
114
207
( { handleViewAllHistory } : { handleViewAllHistory : ( ) => void } ) : JSX . Element => (
115
208
< div className = "flex pt-12 pb-12 pl-16 pr-16 dc__gap-16 dc__align-self-stretch" >
116
209
< button
@@ -129,7 +222,7 @@ const ViewAllCardsTile = React.memo(
129
222
) ,
130
223
)
131
224
132
- const HistorySummaryCard = React . memo (
225
+ const HistorySummaryCard = memo (
133
226
( {
134
227
id,
135
228
status,
@@ -145,6 +238,8 @@ const HistorySummaryCard = React.memo(
145
238
renderRunSource,
146
239
runSource,
147
240
resourceId,
241
+ podName,
242
+ namespace,
148
243
workflowExecutionStages,
149
244
} : HistorySummaryCardType ) : JSX . Element => {
150
245
const { path, params } = useRouteMatch ( )
@@ -193,16 +288,28 @@ const HistorySummaryCard = React.memo(
193
288
< TippyHeadless
194
289
placement = "right"
195
290
interactive
196
- render = { ( ) => (
197
- < SummaryTooltipCard
198
- status = { status }
199
- startedOn = { startedOn }
200
- triggeredBy = { triggeredBy }
201
- triggeredByEmail = { triggeredByEmail }
202
- ciMaterials = { ciMaterials }
203
- gitTriggers = { gitTriggers }
204
- />
205
- ) }
291
+ render = { ( ) =>
292
+ isCDType ? (
293
+ < DeploymentSummaryTooltipCard
294
+ status = { status }
295
+ startedOn = { startedOn }
296
+ triggeredBy = { triggeredBy }
297
+ triggeredByEmail = { triggeredByEmail }
298
+ ciMaterials = { ciMaterials }
299
+ gitTriggers = { gitTriggers }
300
+ />
301
+ ) : (
302
+ < BuildAndTaskSummaryTooltipCard
303
+ workflowExecutionStages = { workflowExecutionStages }
304
+ triggeredByEmail = { triggeredByEmail }
305
+ namespace = { namespace }
306
+ podName = { podName }
307
+ stage = { stage }
308
+ gitTriggers = { gitTriggers }
309
+ ciMaterials = { ciMaterials }
310
+ />
311
+ )
312
+ }
206
313
>
207
314
{ children }
208
315
</ TippyHeadless >
@@ -397,6 +504,8 @@ const Sidebar = React.memo(
397
504
renderRunSource = { renderRunSource }
398
505
resourceId = { resourceId }
399
506
workflowExecutionStages = { triggerDetails . workflowExecutionStages }
507
+ podName = { triggerDetails . podName }
508
+ namespace = { triggerDetails . namespace }
400
509
/>
401
510
) ) }
402
511
{ hasMore && ( fetchIdData === FetchIdDataStatus . SUSPEND || ! fetchIdData ) && (
0 commit comments