Skip to content

Commit 199b24a

Browse files
krystian-panek-vmltechkrystian-panek-vmltech
committed
Abort button bugfix
1 parent 30beece commit 199b24a

File tree

2 files changed

+87
-85
lines changed

2 files changed

+87
-85
lines changed

‎ui.frontend/src/components/ExecutionAbortButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const ExecutionAbortButton: React.FC<ExecutionAbortButtonProps> = ({ execution,
6161
};
6262

6363
return (
64-
<Button variant="negative" isDisabled={!execution || isAborting} onPress={onAbort}>
64+
<Button variant="negative" isDisabled={!execution || !isExecutionPending(execution.status) || isAborting} onPress={onAbort}>
6565
<Cancel />
6666
<Text>Abort</Text>
6767
</Button>

‎ui.frontend/src/pages/ExecutionView.tsx

+86-84
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,16 @@ import Print from '@spectrum-icons/workflow/Print';
99
import { useContext, useEffect, useState } from 'react';
1010
import { useParams } from 'react-router-dom';
1111
import { AppContext } from '../AppContext.tsx';
12-
import ExecutableValue from '../components/ExecutableValue.tsx';
13-
import ExecutionStatusBadge from '../components/ExecutionStatusBadge.tsx';
14-
import ImmersiveEditor from '../components/ImmersiveEditor.tsx';
12+
import ExecutableValue from '../components/ExecutableValue';
13+
import ExecutionStatusBadge from '../components/ExecutionStatusBadge';
14+
import ImmersiveEditor from '../components/ImmersiveEditor';
1515
import { toastRequest } from '../utils/api';
1616
import {Execution, ExecutionOutput, isExecutionPending} from '../utils/api.types';
1717
import { useFormatter } from '../utils/hooks/formatter';
1818
import { useNavigationTab } from '../utils/hooks/navigation';
19-
import ExecutionProgressBar from "../components/ExecutionProgressBar.tsx";
20-
import ExecutionCopyOutputButton from "../components/ExecutionCopyOutputButton.tsx";
19+
import ExecutionProgressBar from "../components/ExecutionProgressBar";
20+
import ExecutionCopyOutputButton from "../components/ExecutionCopyOutputButton";
21+
import ExecutionAbortButton from "../components/ExecutionAbortButton";
2122

2223
const toastTimeout = 3000;
2324

@@ -95,90 +96,91 @@ const ExecutionView = () => {
9596
};
9697

9798
return (
98-
<Flex direction="column" flex="1" gap="size-400">
99-
<Tabs flex="1" aria-label="Executions" selectedKey={selectedTab} onSelectionChange={handleTabChange}>
100-
<TabList>
101-
<Item key="details">
102-
<History />
103-
<Text>Execution</Text>
104-
</Item>
105-
<Item key="code" aria-label="Code">
106-
<FileCode />
107-
<Text>Code</Text>
108-
</Item>
109-
<Item key="output" aria-label="Execution">
110-
<Print />
111-
<Text>Output</Text>
112-
</Item>
113-
</TabList>
114-
<TabPanels flex="1" UNSAFE_style={{ display: 'flex' }}>
115-
<Item key="details">
116-
<Flex direction="column" flex="1" gap="size-200" marginY="size-100">
117-
<View backgroundColor="gray-50" padding="size-200" borderRadius="medium" borderColor="dark" borderWidth="thin">
118-
<Flex direction="row" justifyContent="space-between" gap="size-200">
119-
<LabeledValue label="ID" value={execution.id} />
120-
<Field label="Status">
99+
<Flex direction="column" flex="1" gap="size-400">
100+
<Tabs flex="1" aria-label="Executions" selectedKey={selectedTab} onSelectionChange={handleTabChange}>
101+
<TabList>
102+
<Item key="details">
103+
<History />
104+
<Text>Execution</Text>
105+
</Item>
106+
<Item key="code" aria-label="Code">
107+
<FileCode />
108+
<Text>Code</Text>
109+
</Item>
110+
<Item key="output" aria-label="Execution">
111+
<Print />
112+
<Text>Output</Text>
113+
</Item>
114+
</TabList>
115+
<TabPanels flex="1" UNSAFE_style={{ display: 'flex' }}>
116+
<Item key="details">
117+
<Flex direction="column" flex="1" gap="size-200" marginY="size-100">
118+
<View backgroundColor="gray-50" padding="size-200" borderRadius="medium" borderColor="dark" borderWidth="thin">
119+
<Flex direction="row" justifyContent="space-between" gap="size-200">
120+
<LabeledValue label="ID" value={execution.id} />
121+
<Field label="Status">
122+
<div>
123+
<ExecutionStatusBadge value={execution.status} />
124+
</div>
125+
</Field>
126+
</Flex>
127+
</View>
128+
<View backgroundColor="gray-50" padding="size-200" borderRadius="medium" borderColor="dark" borderWidth="thin">
129+
<Field label="Executable" width="100%">
121130
<div>
122-
<ExecutionStatusBadge value={execution.status} />
131+
<ExecutableValue value={execution.executable} />
123132
</div>
124133
</Field>
134+
</View>
135+
<View backgroundColor="gray-50" padding="size-200" borderRadius="medium" borderColor="dark" borderWidth="thin">
136+
<Flex direction="row" justifyContent="space-between" gap="size-200">
137+
<LabeledValue label="Started At" value={execution.startDate ? formatter.dateExplained(execution.startDate) : '—'} />
138+
<LabeledValue label="Duration" value={formatter.durationExplained(execution.duration)} />
139+
<LabeledValue label="Ended At" value={execution.endDate ? formatter.dateExplained(execution.endDate) : '—'} />
140+
</Flex>
141+
</View>
142+
</Flex>
143+
</Item>
144+
<Item key="code">
145+
<Flex direction="column" flex="1" gap="size-200" marginY="size-100">
146+
<View>
147+
<Flex justifyContent="space-between" alignItems="center">
148+
<ButtonGroup>
149+
<Button variant="secondary" isDisabled={!executionOutput} onPress={onCopyExecutableCode}>
150+
<Copy />
151+
<Text>Copy</Text>
152+
</Button>
153+
</ButtonGroup>
154+
</Flex>
155+
</View>
156+
<ImmersiveEditor id="execution-view" value={execution.executable.content} language="groovy" readOnly />
157+
</Flex>
158+
</Item>
159+
<Item key="output">
160+
<Flex direction="column" flex="1" gap="size-200" marginY="size-100">
161+
<Flex direction="row" justifyContent="space-between" alignItems="center">
162+
<Flex flex="1" alignItems="center">
163+
<ButtonGroup>
164+
<ExecutionAbortButton execution={execution} onComplete={setExecution} />
165+
<ExecutionCopyOutputButton output={executionOutput}/>
166+
</ButtonGroup>
167+
<Switch isSelected={autoscrollOutput} isDisabled={!isExecutionPending(execution.status)} marginStart={20} onChange={() => setAutoscrollOutput((prev) => !prev)}>
168+
<Text>Autoscroll</Text>
169+
</Switch>
170+
</Flex>
171+
<Flex flex="1" justifyContent="center" alignItems="center">
172+
<ExecutionProgressBar execution={execution}/>
173+
</Flex>
174+
<Flex flex="1" justifyContent="end" alignItems="center">
175+
&nbsp;
176+
</Flex>
125177
</Flex>
126-
</View>
127-
<View backgroundColor="gray-50" padding="size-200" borderRadius="medium" borderColor="dark" borderWidth="thin">
128-
<Field label="Executable" width="100%">
129-
<div>
130-
<ExecutableValue value={execution.executable} />
131-
</div>
132-
</Field>
133-
</View>
134-
<View backgroundColor="gray-50" padding="size-200" borderRadius="medium" borderColor="dark" borderWidth="thin">
135-
<Flex direction="row" justifyContent="space-between" gap="size-200">
136-
<LabeledValue label="Started At" value={execution.startDate ? formatter.dateExplained(execution.startDate) : '—'} />
137-
<LabeledValue label="Duration" value={formatter.durationExplained(execution.duration)} />
138-
<LabeledValue label="Ended At" value={execution.endDate ? formatter.dateExplained(execution.endDate) : '—'} />
139-
</Flex>
140-
</View>
141-
</Flex>
142-
</Item>
143-
<Item key="code">
144-
<Flex direction="column" flex="1" gap="size-200" marginY="size-100">
145-
<View>
146-
<Flex justifyContent="space-between" alignItems="center">
147-
<ButtonGroup>
148-
<Button variant="secondary" isDisabled={!executionOutput} onPress={onCopyExecutableCode}>
149-
<Copy />
150-
<Text>Copy</Text>
151-
</Button>
152-
</ButtonGroup>
153-
</Flex>
154-
</View>
155-
<ImmersiveEditor id="execution-view" value={execution.executable.content} language="groovy" readOnly />
156-
</Flex>
157-
</Item>
158-
<Item key="output">
159-
<Flex direction="column" flex="1" gap="size-200" marginY="size-100">
160-
<Flex direction="row" justifyContent="space-between" alignItems="center">
161-
<Flex flex="1" alignItems="center">
162-
<ButtonGroup>
163-
<ExecutionCopyOutputButton output={executionOutput}/>
164-
</ButtonGroup>
165-
<Switch isSelected={autoscrollOutput} isDisabled={!isExecutionPending(execution.status)} marginStart={20} onChange={() => setAutoscrollOutput((prev) => !prev)}>
166-
<Text>Autoscroll</Text>
167-
</Switch>
168-
</Flex>
169-
<Flex flex="1" justifyContent="center" alignItems="center">
170-
<ExecutionProgressBar execution={execution}/>
171-
</Flex>
172-
<Flex flex="1" justifyContent="end" alignItems="center">
173-
&nbsp;
174-
</Flex>
178+
<ImmersiveEditor id="execution-output" value={executionOutput} readOnly scrollToBottomOnUpdate={autoscrollOutput} />
175179
</Flex>
176-
<ImmersiveEditor id="execution-output" value={executionOutput} readOnly scrollToBottomOnUpdate={autoscrollOutput} />
177-
</Flex>
178-
</Item>
179-
</TabPanels>
180-
</Tabs>
181-
</Flex>
180+
</Item>
181+
</TabPanels>
182+
</Tabs>
183+
</Flex>
182184
);
183185
};
184186

0 commit comments

Comments
 (0)