Skip to content

Commit 5de07c3

Browse files
srdjan-harnessabhinavrastogi-harnesscxraminaandrewgolovanoviatopilskii
authored
react18 branch changes (#1074)
* add Chat .Header component (#1015) * add chat header component * update chat preview * fix chat types * fix lint and ts * fix lint and ts * fix lint and ts * fix lint and ts * feat: design systems graph refactoring (#1020) * feat: design systems graph refactoring * feat: design systems graph refactoring * feat: design systems graph refactoring * Update shared-style-variables.css upd for pipeline cards colors * Update shared-style-variables.css * Update shared-style-variables.css (#1021) * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * fix: minor changes --------- Co-authored-by: Anastasia Ramina <[email protected]> Co-authored-by: Andrew Golovanov <[email protected]> * fix: style add button (#1026) * Pipeline graph globalData - to distingvish between edit and execution (#1028) * delete edgeClassName * add globalData to distinguish between edit and execution * slack and docker icons (#1024) Co-authored-by: Abhinav Rastogi <[email protected]> * remove duplicate variables from bad rebase * Update shared-style-variables.css (#1035) Changed dark-std-std to dark-std-low and updated dark-std-std with tokens from high version * Type error fix 2 (#1039) * type error fix * bump version * fix repo summary filenames color * reset zoom fix (#1041) * feat: update execution-logs design (#1040) * feat: update execution-logs design * fix: fixes after rebasing * fix: fixes after merge and update logs drawer * fix type issues * update pipeline studio footer * update icons (#1055) * Update shared-style-variables.css (#1054) * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css * fix: styles for yaml toggle (#1056) * add canvas zoom buttons, change fit icon * refactor: improve ChatDiffViewer styling and border layout (#1058) * feat: blink dot, success state, timers (#1057) * feat: blink dot, success state, timers * fix: lint/tsc * feat: update execution-logs design (#1040) * feat: update execution-logs design * fix: fixes after rebasing * fix: fixes after merge and update logs drawer * fix execution header. bump alpha.14 * fix execution header spacing * remove connector gradient. bump alpha.16 * fix: timer, architecture (#1059) * chore: rebase * chore: rebase * chore * Update shared-style-variables.css (#1061) * Update shared-style-variables.css fixed one token in dark mode * Update shared-style-variables.css * chore: remove empty line in shared-style-variables.css * Update shared-style-variables.css * Update shared-style-variables.css --------- Co-authored-by: Andrew Golovanov <[email protected]> * feat: add widget gradient color variables for light and dark themes (#1062) * feat: add widget gradient color variables for light and dark themes * fix: minor changes * fix: minor changes * fix: light-prot-std colors for labels (#1064) * Update shared-style-variables.css (#1063) * Update shared-style-variables.css upd colors and gradient token steps options * Update shared-style-variables.css * Update shared-style-variables.css * fix pipeline graph scale calculation; improvements (#1067) * Update shared-style-variables.css (#1068) changes for light mode * fix: fix border color pipeline studio, fix tree view of execution details (#1069) * Revert react 18 specific changes --------- Co-authored-by: Abhinav Rastogi <[email protected]> Co-authored-by: Anastasia Ramina <[email protected]> Co-authored-by: Andrew Golovanov <[email protected]> Co-authored-by: Ilya Topilskii <[email protected]> Co-authored-by: Sanskar <[email protected]> Co-authored-by: Alex <[email protected]>
1 parent 28daa48 commit 5de07c3

File tree

97 files changed

+1987
-778
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+1987
-778
lines changed

‎apps/design-system/src/subjects/views/execution/execution-graph.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@ export const ExecutionGraphView = () => {
77
<div className="flex h-full flex-col">
88
<ExecutionTabs />
99
<ExecutionHeader
10+
className="border-borders-4 border-b"
1011
commitName="8fbru3ix"
1112
branchName="master"
1213
title={{ number: '311. ', title: 'Alerting docs: adds sns integration' }}
1314
storage="0 B"
1415
storageAverage="0 B / 250 MB"
1516
simpleOperation="27/100k"
16-
advancedOperations="2/50k"
17-
dataTransfer="4.21 kB/5 GB"
1817
branch="master"
1918
commit="b8bruh99h"
2019
status={ExecutionState.RUNNING}

‎apps/design-system/src/subjects/views/execution/execution-logs.tsx

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCallback, useEffect, useState } from 'react'
1+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
22

33
import { useAnimateTree } from '@/hooks/useAnimateTree'
44
import { useLogs } from '@/hooks/useLogs'
@@ -30,6 +30,11 @@ export const ExecutionLogsView = () => {
3030
const [enableStream, setEnableStream] = useState(false)
3131
const [logs, setLogs] = useState<LivelogLine[]>([])
3232
const [selectedStep, setSelectedStep] = useState<TreeViewElement | null | undefined>(null)
33+
const [status, setStatus] = useState<ExecutionState>(ExecutionState.RUNNING)
34+
const [elapsedTime, setElapsedTime] = useState('00:00')
35+
const [createdTimeElapsed, setCreatedTimeElapsed] = useState('00:00')
36+
const createdStartRef = useRef<number>(Date.now())
37+
const elapsedStartRef = useRef<number>(Date.now())
3338

3439
const { updatedElements, currentNode } = useAnimateTree({ elements, delay: 2 }) // Animates the execution tree
3540

@@ -56,34 +61,73 @@ export const ExecutionLogsView = () => {
5661
}
5762
}, [selectedStep])
5863

59-
const updateHighLevelStatus = (elements: TreeViewElement[]) => {
60-
if (elements.every(node => node.status === ExecutionState.SUCCESS)) {
61-
return ExecutionState.SUCCESS
62-
}
63-
return ExecutionState.RUNNING
64+
const isAllSuccess = useMemo(
65+
() => updatedElements.every(node => node.status === ExecutionState.SUCCESS),
66+
[updatedElements]
67+
)
68+
69+
useEffect(() => {
70+
setStatus(isAllSuccess ? ExecutionState.SUCCESS : ExecutionState.RUNNING)
71+
}, [isAllSuccess])
72+
73+
const formatTime = (seconds: number) => {
74+
const minutes = Math.floor(seconds / 60)
75+
const secs = seconds % 60
76+
return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
6477
}
6578

79+
// Created timer (always counts up from 0)
80+
useEffect(() => {
81+
createdStartRef.current = Date.now()
82+
83+
const interval = setInterval(() => {
84+
const now = Date.now()
85+
const totalDiff = Math.floor((now - createdStartRef.current) / 1000)
86+
setCreatedTimeElapsed(formatTime(totalDiff))
87+
}, 1000)
88+
89+
return () => clearInterval(interval)
90+
}, [])
91+
92+
// Elapsed timer (stops when status changes to success)
93+
useEffect(() => {
94+
elapsedStartRef.current = Date.now()
95+
96+
const interval = setInterval(() => {
97+
if (status === 'success') return
98+
99+
const now = Date.now()
100+
const elapsedDiff = Math.floor((now - elapsedStartRef.current) / 1000)
101+
setElapsedTime(formatTime(elapsedDiff))
102+
}, 1000)
103+
104+
return () => clearInterval(interval)
105+
}, [status])
106+
66107
return (
67108
<div className="flex h-full flex-col">
68109
<ExecutionTabs />
69110
<ExecutionHeader
70111
commitName="8fbru3ix"
71112
branchName="master"
72-
title={{ number: '311. ', title: 'Alerting docs: adds sns integration' }}
113+
title={{
114+
number: '311. ',
115+
title: 'Alerting docs: adds sns integration'
116+
}}
73117
storage="0 B"
74118
storageAverage="0 B / 250 MB"
75119
simpleOperation="27/100k"
76120
advancedOperations="2/50k"
77121
dataTransfer="4.21 kB/5 GB"
78122
branch="master"
79123
commit="b8bruh99h"
80-
status={updateHighLevelStatus(updatedElements)}
81-
buildTime="1h 30m"
82-
createdTime="10 mins ago"
124+
status={status}
125+
buildTime={elapsedTime}
126+
createdTime={createdTimeElapsed}
83127
pipelineName="build scan push test - k8s - Clone 2"
84128
/>
85-
<div className="grid h-[inherit]" style={{ gridTemplateColumns: '1fr 3fr' }}>
86-
<div className="flex flex-col gap-4 border border-r-0 border-t-0 border-white/10 pt-4">
129+
<div className="border-borders-4 grid h-[inherit] border-t" style={{ gridTemplateColumns: '1fr 3fr' }}>
130+
<div className="border-borders-4 flex h-[calc(100vh-226px)] flex-col gap-4 border-r">
87131
<ExecutionTree
88132
defaultSelectedId={currentNode?.id ?? selectedStep?.id ?? elements[0].id}
89133
elements={updatedElements}
@@ -92,7 +136,7 @@ export const ExecutionLogsView = () => {
92136
}}
93137
/>
94138
</div>
95-
<div className="flex flex-col gap-4 border border-t-0 border-white/10">
139+
<div className="border-borders-4 flex flex-col gap-4">
96140
<ExecutionInfo useLogsStore={useLogsStore} onCopy={() => {}} onDownload={() => {}} onEdit={() => {}} />
97141
</div>
98142
</div>

‎apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Button, Drawer, Icon, PipelineNodes } from '@harnessio/ui/components'
1818

1919
import '@harnessio/pipeline-graph/dist/index.css'
2020

21-
import { ExecutionInfo, LivelogLine } from '@harnessio/ui/views'
21+
import { ExecutionHeader, ExecutionInfo, ExecutionState, LivelogLine } from '@harnessio/ui/views'
2222

2323
import { logs } from './mocks/mock-data'
2424

@@ -78,19 +78,28 @@ export function StepNodeComponent({
7878
return (
7979
<Drawer.Root direction="right">
8080
<Drawer.Trigger asChild>{stepNode}</Drawer.Trigger>
81-
<Drawer.Content className="flex h-full w-1/2 flex-col justify-between">
81+
<Drawer.Content className="bg-background-1 border-borders-5 size-full max-w-2xl rounded-none border-l p-0 ">
8282
<Drawer.Header>
83-
<Drawer.Title>Logs</Drawer.Title>
84-
<Drawer.Description>{`View ${name} execution logs`}</Drawer.Description>
83+
<ExecutionHeader
84+
commitName="8fbru3ix"
85+
branchName="master"
86+
title={{ title: 'npm_build' }}
87+
status={ExecutionState.RUNNING}
88+
buildTime="1h 30m"
89+
startedTime="10 mins ago"
90+
delegateType="cloud"
91+
pipelineName="npm_build"
92+
/>
8593
</Drawer.Header>
86-
<div>
87-
<ExecutionInfo useLogsStore={() => ({ logs })} onCopy={() => {}} onDownload={() => {}} onEdit={() => {}} />
94+
<div className="border-borders-4 mt-1 border-t pt-3">
95+
<ExecutionInfo
96+
isDrawer
97+
useLogsStore={() => ({ logs })}
98+
onCopy={() => {}}
99+
onDownload={() => {}}
100+
onEdit={() => {}}
101+
/>
88102
</div>
89-
<Drawer.Footer>
90-
<Drawer.Close>
91-
<Button variant="outline">Close</Button>
92-
</Drawer.Close>
93-
</Drawer.Footer>
94103
</Drawer.Content>
95104
</Drawer.Root>
96105
)
@@ -361,7 +370,7 @@ const data: AnyContainerNodeType[] = [
361370
const PipelineExecutionGraph = () => {
362371
return (
363372
<CanvasProvider>
364-
<PipelineGraph data={data} nodes={nodes} config={{ edgeClassName: 'stroke-borders-2', mode: 'Execution' }} />
373+
<PipelineGraph data={data} nodes={nodes} config={{ mode: 'Execution' }} />
365374
</CanvasProvider>
366375
)
367376
}

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-add-in-node-context-menu.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const StageGroupAddInNodeContextMenu = () => {
2121
style={{ left: `${contextMenuData?.position.x}px`, top: `${contextMenuData?.position.y}px` }}
2222
>
2323
<DropdownMenu.Item
24-
key="add"
24+
key={`add-${YamlEntityType.Stage}`}
2525
className="flex items-center gap-1.5"
2626
onSelect={() => {
2727
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.Stage)
@@ -32,7 +32,7 @@ export const StageGroupAddInNodeContextMenu = () => {
3232
</DropdownMenu.Item>
3333
<DropdownMenu.Separator />
3434
<DropdownMenu.Item
35-
key="add"
35+
key={`add-${YamlEntityType.SerialStageGroup}`}
3636
className="flex items-center gap-1.5"
3737
onSelect={() => {
3838
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.SerialStageGroup)
@@ -42,7 +42,7 @@ export const StageGroupAddInNodeContextMenu = () => {
4242
<Text wrap="nowrap">Add Serial group</Text>
4343
</DropdownMenu.Item>
4444
<DropdownMenu.Item
45-
key="add"
45+
key={`add-${YamlEntityType.ParallelStageGroup}`}
4646
className="flex items-center gap-1.5"
4747
onSelect={() => {
4848
onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.ParallelStageGroup)

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-node-context-menu.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const StageGroupNodeContextMenu = () => {
3333
</DropdownMenu.Item>
3434
<DropdownMenu.Separator />
3535
<DropdownMenu.Item
36-
key="add"
36+
key={`add-${YamlEntityType.SerialStageGroup}-before`}
3737
className="flex items-center gap-1.5"
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.SerialStageGroup)
@@ -43,7 +43,7 @@ export const StageGroupNodeContextMenu = () => {
4343
<Text wrap="nowrap">Add Serial Stages Group before</Text>
4444
</DropdownMenu.Item>
4545
<DropdownMenu.Item
46-
key="add"
46+
key={`add-${YamlEntityType.SerialStageGroup}-after`}
4747
className="flex items-center gap-1.5"
4848
onSelect={() => {
4949
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.SerialStageGroup)
@@ -54,7 +54,7 @@ export const StageGroupNodeContextMenu = () => {
5454
</DropdownMenu.Item>
5555
<DropdownMenu.Separator />
5656
<DropdownMenu.Item
57-
key="add"
57+
key={`add-${YamlEntityType.ParallelStageGroup}-before`}
5858
className="flex items-center gap-1.5"
5959
onSelect={() => {
6060
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.ParallelStageGroup)
@@ -64,7 +64,7 @@ export const StageGroupNodeContextMenu = () => {
6464
<Text wrap="nowrap">Add Parallel Stages Group before</Text>
6565
</DropdownMenu.Item>
6666
<DropdownMenu.Item
67-
key="add"
67+
key={`add-${YamlEntityType.ParallelStageGroup}-after`}
6868
className="flex items-center gap-1.5"
6969
onSelect={() => {
7070
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.ParallelStageGroup)

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-node-context-menu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
3333
</DropdownMenu.Item>
3434
<DropdownMenu.Separator />
3535
<DropdownMenu.Item
36-
key="add"
36+
key="add-before"
3737
className="flex items-center gap-1.5"
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.Stage) // TODO what to add
@@ -43,7 +43,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
4343
<Text wrap="nowrap">Add stage before</Text>
4444
</DropdownMenu.Item>
4545
<DropdownMenu.Item
46-
key="add"
46+
key="add-after"
4747
className="flex items-center gap-1.5"
4848
onSelect={() => {
4949
onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.Stage) // TODO what to add

‎apps/design-system/src/subjects/views/pipeline-edit/context-menu/step-group-node-context-menu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const StepGroupNodeContextMenu = () => {
3333
</DropdownMenu.Item>
3434
<DropdownMenu.Separator />
3535
<DropdownMenu.Item
36-
key="add"
36+
key="add-before"
3737
className="flex items-center gap-1.5"
3838
onSelect={() => {
3939
onAddIntention(contextMenuData.nodeData, 'before')
@@ -43,7 +43,7 @@ export const StepGroupNodeContextMenu = () => {
4343
<Text wrap="nowrap">Add Step/Group before</Text>
4444
</DropdownMenu.Item>
4545
<DropdownMenu.Item
46-
key="add"
46+
key="add-after"
4747
className="flex items-center gap-1.5"
4848
onSelect={() => {
4949
onAddIntention(contextMenuData.nodeData, 'after')

‎apps/design-system/src/subjects/views/pipeline-edit/mocks/demoExecutionMock.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export const demoExecutionMock = [
44
{
55
type: 'Start',
66
config: {
7-
width: 40,
8-
height: 40,
7+
width: 36,
8+
height: 36,
99
hideDeleteButton: true,
1010
hideBeforeAdd: true,
1111
hideLeftPort: true
@@ -188,7 +188,7 @@ export const demoExecutionMock = [
188188
yamlPath: 'pipeline.stages.1.steps.0',
189189
yamlEntityType: 'Step',
190190
name: 'docker',
191-
icon: <Icon className="size-6" name={'harness-plugin'} />,
191+
icon: <Icon className="size-6" name={'docker'} />,
192192
selected: false,
193193
state: 'warning',
194194
warningMessage: 'Timeout'
@@ -209,7 +209,7 @@ export const demoExecutionMock = [
209209
yamlPath: 'pipeline.stages.1.steps.1',
210210
yamlEntityType: 'Step',
211211
name: 'Step 2',
212-
icon: <Icon className="size-6" name={'harness-plugin'} />,
212+
icon: <Icon className="size-6" name={'slack'} />,
213213
selected: false,
214214
state: 'success'
215215
},
@@ -223,8 +223,8 @@ export const demoExecutionMock = [
223223
{
224224
type: 'End',
225225
config: {
226-
width: 40,
227-
height: 40,
226+
width: 36,
227+
height: 36,
228228
hideDeleteButton: true,
229229
hideAfterAdd: true,
230230
hideRightPort: true

‎apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-stage-group-content-node.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
66
import { StageGroupAddInNodeContextMenu } from '../context-menu/stage-group-add-in-node-context-menu'
77
import { StageGroupNodeContextMenu } from '../context-menu/stage-group-node-context-menu'
88
import { PipelineNodes } from '../pipeline-nodes'
9+
import { GlobalData } from '../types/common'
910

1011
export interface CustomParallelStageGroupContentNodeDataType extends CommonNodeDataType {
1112
icon?: React.ReactElement
@@ -22,7 +23,10 @@ export function CustomParallelStageGroupContentNode(props: {
2223
const { node, children, collapsed, isFirst, parentNodeType } = props
2324
const data = node.data as CustomParallelStageGroupContentNodeDataType
2425

25-
const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
26+
const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
27+
usePipelineStudioNodeContext<GlobalData>()
28+
29+
const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
2630

2731
const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
2832

@@ -35,6 +39,8 @@ export function CustomParallelStageGroupContentNode(props: {
3539
isFirst={isFirst}
3640
parentNodeType={parentNodeType}
3741
node={node}
42+
hideContextMenu={hideContextMenu}
43+
hideFloatingButtons={hideFloatingButtons}
3844
onAddInClick={e => {
3945
e.stopPropagation()
4046
showContextMenu(StageGroupAddInNodeContextMenu, data, e.currentTarget, true)

‎apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-step-group-content-node.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
55

66
import { StepGroupNodeContextMenu } from '../context-menu/step-group-node-context-menu'
77
import { PipelineNodes } from '../pipeline-nodes'
8+
import { GlobalData } from '../types/common'
89

910
export interface CustomParallelStepGroupContentNodeDataType extends CommonNodeDataType {
1011
icon?: React.ReactElement
@@ -21,7 +22,10 @@ export function CustomParallelStepGroupContentNode(props: {
2122
const { node, children, collapsed, isFirst, parentNodeType } = props
2223
const data = node.data as CustomParallelStepGroupContentNodeDataType
2324

24-
const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
25+
const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
26+
usePipelineStudioNodeContext<GlobalData>()
27+
28+
const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
2529

2630
const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
2731

@@ -34,6 +38,8 @@ export function CustomParallelStepGroupContentNode(props: {
3438
isFirst={isFirst}
3539
parentNodeType={parentNodeType}
3640
node={node}
41+
hideContextMenu={hideContextMenu}
42+
hideFloatingButtons={hideFloatingButtons}
3743
onAddInClick={e => {
3844
e.stopPropagation()
3945
onAddIntention(data, 'in')

0 commit comments

Comments
 (0)