Skip to content

Commit 9a95692

Browse files
AbhishekA1509AbhishekA1509
committed
fix: Improve styling and logs stage accordion
1 parent eb25035 commit 9a95692

File tree

4 files changed

+59
-34
lines changed

4 files changed

+59
-34
lines changed

‎src/Shared/Components/CICDHistory/LogStageAccordion.tsx

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import { LogStageAccordionProps } from './types'
44
import { getStageStatusIcon } from './utils'
55
import { ReactComponent as ICCaretDown } from '../../../Assets/Icon/ic-caret-down.svg'
66

7+
const LogsItemContainer = ({ children }: { children: React.ReactNode }) => (
8+
<div className="display-grid dc__column-gap-10 dc__align-start logs-renderer__log-item">{children}</div>
9+
)
10+
711
const LogStageAccordion = ({
812
stage,
913
isOpen,
@@ -14,6 +18,7 @@ const LogStageAccordion = ({
1418
handleStageClose,
1519
handleStageOpen,
1620
accordionIndex,
21+
areEventsProgressing,
1722
}: LogStageAccordionProps) => {
1823
const handleAccordionToggle = () => {
1924
if (isOpen) {
@@ -26,23 +31,22 @@ const LogStageAccordion = ({
2631
return (
2732
<div className="flexbox-col dc__gap-8">
2833
<button
29-
className="flexbox dc__transparent dc__content-space py-6 px-8 br-4 dc__align-items-center dc__select-text logs-renderer__stage-accordion-hover dc__position-sticky dc__zi-1 dc__top-40"
30-
style={{
31-
backgroundColor: isOpen ? '#2C3354' : '#0C1021',
32-
}}
34+
className={`flexbox dc__transparent dc__content-space py-6 px-8 br-4 dc__align-items-center dc__select-text logs-renderer__stage-accordion ${
35+
isOpen ? 'logs-renderer__stage-accordion--open-stage' : ''
36+
} dc__position-sticky dc__zi-1 dc__top-40`}
3337
type="button"
3438
role="tab"
3539
onClick={handleAccordionToggle}
3640
>
3741
<div className="flexbox dc__gap-8 dc__transparent dc__align-items-center">
3842
<ICCaretDown
39-
className={`icon-dim-16 dc__no-shrink dc__transition--transform scn-6 ${!isOpen ? 'dc__flip-n90 dc__opacity-0_5' : ''}`}
43+
className={`icon-dim-16 dc__no-shrink dc__transition--transform scn-0 ${!isOpen ? 'dc__flip-n90 dc__opacity-0_5' : ''}`}
4044
/>
4145

4246
<div className="flexbox dc__gap-12 dc__align-items-center">
4347
{getStageStatusIcon(status)}
4448

45-
<h3 className="m-0 cn-0 fs-13 fw-6 lh-20 dc__word-break">{stage}</h3>
49+
<h3 className="m-0 cn-0 fs-13 fw-4 lh-20 dc__word-break">{stage}</h3>
4650
</div>
4751
</div>
4852

@@ -52,21 +56,29 @@ const LogStageAccordion = ({
5256
{isOpen && (
5357
<div className="flexbox-col dc__gap-4">
5458
{logs.map((log: string, logsIndex: number) => (
55-
<div
56-
className="flex top left pl-24 dc__gap-10 lh-20"
59+
<LogsItemContainer
5760
// eslint-disable-next-line react/no-array-index-key
5861
key={`logs-${stage}-${startTime}-${logsIndex}`}
5962
>
60-
<span className="cn-4 col-2">{logsIndex + 1}</span>
63+
<span className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14">
64+
{logsIndex + 1}
65+
</span>
6166
<p
62-
className="mono fs-14 mb-0-imp cn-0 dc__word-break"
67+
className="mono fs-14 mb-0-imp cn-0 dc__word-break lh-20"
6368
// eslint-disable-next-line react/no-danger
6469
dangerouslySetInnerHTML={{
6570
__html: DOMPurify.sanitize(log),
6671
}}
6772
/>
68-
</div>
73+
</LogsItemContainer>
6974
))}
75+
76+
{areEventsProgressing && (
77+
<LogsItemContainer>
78+
<span />
79+
<div className="dc__loading-dots cn-0" />
80+
</LogsItemContainer>
81+
)}
7082
</div>
7183
)}
7284
</div>

‎src/Shared/Components/CICDHistory/LogsRenderer.scss

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,23 @@
2424
}
2525
}
2626

27-
// TODO: Sync with product to replace this placeholder
28-
&__stage-accordion-hover {
27+
&__stage-accordion {
28+
background-color: #0C1021;
29+
30+
&:not(&--open-stage):hover {
31+
background-color: rgba(44, 51, 84, 0.5);
32+
}
33+
34+
&--open-stage {
35+
background-color: #2C3354;
36+
}
37+
38+
}
39+
40+
&__log-item {
41+
grid-template-columns: 34px auto;
2942
&:hover {
30-
background-color: #2C3354 !important;
43+
background-color: rgba(255, 255, 255, 0.1);
3144
}
3245
}
3346

‎src/Shared/Components/CICDHistory/LogsRenderer.tsx

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -389,32 +389,36 @@ export const LogsRenderer = ({
389389
if (areStagesAvailable) {
390390
return (
391391
<div
392-
className="flexbox-col dc__gap-8"
392+
className="flexbox-col pb-20"
393393
data-testid="check-logs-detail"
394394
style={{
395395
backgroundColor: '#0C1021',
396396
}}
397397
>
398398
<div
399-
className="flexbox pl-12 logs-renderer__search-bar logs-renderer__filters-border-bottom dc__position-sticky dc__top-0 dc__zi-2"
400-
// Doing this since we have binded 'f' with full screen and SearchVar has not exposed event on search, so on pressing f it goes to full screen
401-
onKeyDown={stopPropagation}
399+
className="flexbox-col pb-7 dc__position-sticky dc__top-0 dc__zi-2"
402400
style={{
403401
backgroundColor: '#0C1021',
404402
}}
405403
>
406-
<SearchBar
407-
noBackgroundAndBorder
408-
containerClassName="w-100"
409-
inputProps={{
410-
placeholder: 'Search logs',
411-
}}
412-
handleEnter={handleSearchEnter}
413-
initialSearchText={searchKey}
414-
/>
404+
<div
405+
className="flexbox logs-renderer__search-bar logs-renderer__filters-border-bottom pl-12"
406+
// Doing this since we have binded 'f' with full screen and SearchVar has not exposed event on search, so on pressing f it goes to full screen
407+
onKeyDown={stopPropagation}
408+
>
409+
<SearchBar
410+
noBackgroundAndBorder
411+
containerClassName="w-100"
412+
inputProps={{
413+
placeholder: 'Search logs',
414+
}}
415+
handleEnter={handleSearchEnter}
416+
initialSearchText={searchKey}
417+
/>
418+
</div>
415419
</div>
416420

417-
<div className="flexbox-col px-12 dc__gap-8">
421+
<div className="flexbox-col px-12 dc__gap-4">
418422
{stageList.map(({ stage, isOpen, logs, endTime, startTime, status }, index) => (
419423
<LogStageAccordion
420424
key={`${stage}-${startTime}-log-stage-accordion`}
@@ -427,15 +431,10 @@ export const LogsRenderer = ({
427431
handleStageClose={handleStageClose}
428432
handleStageOpen={handleStageOpen}
429433
accordionIndex={index}
434+
areEventsProgressing={areEventsProgressing}
430435
/>
431436
))}
432437
</div>
433-
434-
{areEventsProgressing && (
435-
<div className="flex left event-source-status pl-24">
436-
<Progressing />
437-
</div>
438-
)}
439438
</div>
440439
)
441440
}

‎src/Shared/Components/CICDHistory/types.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -697,6 +697,7 @@ export interface LogStageAccordionProps extends StageDetailType {
697697
handleStageClose: (index: number) => void
698698
handleStageOpen: (index: number) => void
699699
accordionIndex: number
700+
areEventsProgressing: boolean
700701
}
701702

702703
export interface CreateMarkupReturnType {

0 commit comments

Comments
 (0)