Skip to content

Commit c618794

Browse files
cezudascezudas
authored
Implement create benchmark wizard step (#2008)
Fixes OPS-3696. https://www.loom.com/share/c192f82abd15472fb77d11e3551cca7d
1 parent 10ad42c commit c618794

11 files changed

Lines changed: 395 additions & 59 deletions

File tree

‎packages/react-ui/src/app/features/benchmark/benchmark-api.ts‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
BenchmarkCreationResult,
23
BenchmarkWizardRequest,
34
BenchmarkWizardStepResponse,
45
} from '@openops/shared';
@@ -14,4 +15,32 @@ const getWizardStep = (
1415
request,
1516
);
1617

17-
export const benchmarkApi = { getWizardStep };
18+
// TODO: Remove mock and connect to real endpoint once backend is ready
19+
const createBenchmark = (
20+
provider: string,
21+
_benchmarkConfiguration: Record<string, string[]>,
22+
): Promise<BenchmarkCreationResult> =>
23+
new Promise((resolve) =>
24+
setTimeout(
25+
() =>
26+
resolve({
27+
benchmarkId: 'mock-benchmark-id',
28+
folderId: 'mock-folder-id',
29+
provider,
30+
workflows: [],
31+
webhookPayload: {
32+
webhookBaseUrl: '',
33+
workflows: [],
34+
cleanupWorkflows: [],
35+
accounts: [],
36+
regions: [],
37+
},
38+
}),
39+
1000,
40+
),
41+
);
42+
43+
export const benchmarkApi = {
44+
getWizardStep,
45+
createBenchmark,
46+
};

‎packages/react-ui/src/app/features/benchmark/components/benchmark-wizard-footer.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {
2+
Button,
3+
StepCounter,
4+
WizardNext,
5+
WizardPrevious,
6+
} from '@openops/components/ui';
7+
import {
8+
BenchmarkCreationResult,
9+
BenchmarkWizardStepResponse,
10+
} from '@openops/shared';
11+
import { t } from 'i18next';
12+
13+
import { WizardPhase } from '../use-benchmark-wizard-navigation';
14+
import { ViewBenchmarkWorkflowsButton } from './view-benchmark-workflows-button';
15+
16+
interface BenchmarkWizardFooterProps {
17+
wizardPhase: WizardPhase;
18+
currentStepResponse: BenchmarkWizardStepResponse | null;
19+
benchmarkCreationResult: BenchmarkCreationResult | null;
20+
isNextDisabled: boolean;
21+
handleNextFromInitial: () => Promise<void>;
22+
handleNextFromProviderStep: () => Promise<void>;
23+
handlePrevious: () => void;
24+
handleEditSetup: () => void;
25+
}
26+
27+
export const BenchmarkWizardFooter = ({
28+
wizardPhase,
29+
currentStepResponse,
30+
benchmarkCreationResult,
31+
isNextDisabled,
32+
handleNextFromInitial,
33+
handleNextFromProviderStep,
34+
handlePrevious,
35+
handleEditSetup,
36+
}: BenchmarkWizardFooterProps) => {
37+
if (wizardPhase === 'benchmark-ready') {
38+
return (
39+
<div className="flex-1 flex gap-2 justify-end">
40+
<Button variant="outline" size="sm" onClick={handleEditSetup}>
41+
{t('Edit setup')}
42+
</Button>
43+
{benchmarkCreationResult && (
44+
<ViewBenchmarkWorkflowsButton
45+
folderId={benchmarkCreationResult.folderId}
46+
/>
47+
)}
48+
<Button size="sm" disabled>
49+
{t('Run now')}
50+
</Button>
51+
</div>
52+
);
53+
}
54+
55+
if (wizardPhase === 'provider-step') {
56+
return (
57+
<>
58+
<WizardPrevious onPrevious={handlePrevious} />
59+
{currentStepResponse && (
60+
<StepCounter
61+
current={currentStepResponse.stepIndex}
62+
total={currentStepResponse.totalSteps}
63+
/>
64+
)}
65+
<WizardNext
66+
onNext={handleNextFromProviderStep}
67+
disabled={isNextDisabled}
68+
/>
69+
</>
70+
);
71+
}
72+
73+
return (
74+
<>
75+
<div className="flex-1" />
76+
<WizardNext onNext={handleNextFromInitial} disabled={isNextDisabled} />
77+
</>
78+
);
79+
};

‎packages/react-ui/src/app/features/benchmark/components/benchmark-wizard.tsx‎

Lines changed: 58 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import {
2-
StepCounter,
2+
BenchmarkCreatingPlaceholder,
3+
BenchmarkReadyStep,
34
Wizard,
45
WizardClose,
56
WizardContent,
67
WizardFooter,
78
WizardHeader,
8-
WizardNext,
9-
WizardPrevious,
109
WizardStep,
1110
WizardTitle,
1211
} from '@openops/components/ui';
12+
import { BenchmarkCreationResult } from '@openops/shared';
1313
import { t } from 'i18next';
1414
import { noop } from 'lodash-es';
1515
import { useCallback, useState } from 'react';
@@ -20,11 +20,13 @@ import { CreateOrEditConnectionDialog } from '@/app/features/connections/compone
2020
import { CloudProvider, getProviderByValue } from '../cloud-providers';
2121
import { useBenchmarkWizardNavigation } from '../use-benchmark-wizard-navigation';
2222
import { useProviderConnections } from '../use-provider-connections';
23+
import { BenchmarkWizardFooter } from './benchmark-wizard-footer';
2324
import { DynamicBenchmarkStep } from './dynamic-benchmark-step/dynamic-benchmark-step';
2425
import { InitialBenchmarkStep } from './initial-benchmark-step';
2526

2627
interface BenchmarkWizardProps {
2728
onClose: () => void;
29+
onBenchmarkCreated?: (result: BenchmarkCreationResult) => void;
2830
}
2931

3032
interface ProviderConnectionDialogProps {
@@ -52,7 +54,10 @@ const ProviderConnectionDialog = ({
5254
</DynamicFormValidationProvider>
5355
);
5456

55-
export const BenchmarkWizard = ({ onClose }: BenchmarkWizardProps) => {
57+
export const BenchmarkWizard = ({
58+
onClose,
59+
onBenchmarkCreated,
60+
}: BenchmarkWizardProps) => {
5661
const [connectingProvider, setConnectingProvider] = useState<string | null>(
5762
null,
5863
);
@@ -66,13 +71,18 @@ export const BenchmarkWizard = ({ onClose }: BenchmarkWizardProps) => {
6671
currentStepResponse,
6772
currentSelections,
6873
setCurrentSelections,
74+
isCreatingBenchmark,
75+
benchmarkCreateResult,
6976
isNextDisabled,
7077
handleNextFromInitial,
7178
handleNextFromProviderStep,
7279
handlePrevious,
73-
} = useBenchmarkWizardNavigation(connectedProviders);
80+
handleEditSetup,
81+
} = useBenchmarkWizardNavigation(connectedProviders, onBenchmarkCreated);
7482

7583
const connectingProviderConfig = getProviderByValue(connectingProvider);
84+
const selectedProviderConfig = getProviderByValue(selectedProvider ?? null);
85+
const providerName = selectedProviderConfig?.name ?? '';
7686

7787
const handleConnectionSaved = async () => {
7888
refetchConnections();
@@ -103,49 +113,53 @@ export const BenchmarkWizard = ({ onClose }: BenchmarkWizardProps) => {
103113
</WizardHeader>
104114

105115
<WizardContent className="max-h-[358px]">
106-
<WizardStep value="initial" key="initial">
107-
<InitialBenchmarkStep
108-
selectedProvider={selectedProvider}
109-
onProviderChange={setSelectedProvider}
110-
onConnect={setConnectingProvider}
111-
connectedProviders={connectedProviders}
112-
/>
113-
</WizardStep>
114-
<WizardStep value="provider-step" key="provider-step">
115-
{currentStepResponse && (
116-
<DynamicBenchmarkStep
117-
stepResponse={currentStepResponse}
118-
value={currentSelections}
119-
onValueChange={setCurrentSelections}
120-
/>
121-
)}
122-
</WizardStep>
123-
</WizardContent>
124-
125-
<WizardFooter>
126-
{wizardPhase === 'provider-step' ? (
127-
<>
128-
<WizardPrevious onPrevious={handlePrevious} />
129-
{currentStepResponse && (
130-
<StepCounter
131-
current={currentStepResponse.stepIndex}
132-
total={currentStepResponse.totalSteps}
133-
/>
134-
)}
135-
<WizardNext
136-
onNext={handleNextFromProviderStep}
137-
disabled={isNextDisabled}
138-
/>
139-
</>
116+
{isCreatingBenchmark ? (
117+
<BenchmarkCreatingPlaceholder />
140118
) : (
141119
<>
142-
<div className="flex-1" />
143-
<WizardNext
144-
onNext={handleNextFromInitial}
145-
disabled={isNextDisabled}
146-
/>
120+
<WizardStep value="initial" key="initial">
121+
<InitialBenchmarkStep
122+
selectedProvider={selectedProvider}
123+
onProviderChange={setSelectedProvider}
124+
onConnect={setConnectingProvider}
125+
connectedProviders={connectedProviders}
126+
/>
127+
</WizardStep>
128+
<WizardStep value="provider-step" key="provider-step">
129+
{currentStepResponse && (
130+
<DynamicBenchmarkStep
131+
stepResponse={currentStepResponse}
132+
value={currentSelections}
133+
onValueChange={setCurrentSelections}
134+
/>
135+
)}
136+
</WizardStep>
137+
<WizardStep value="benchmark-ready" key="benchmark-ready">
138+
{benchmarkCreateResult && (
139+
<BenchmarkReadyStep
140+
providerName={providerName}
141+
result={benchmarkCreateResult}
142+
runPhase="idle"
143+
onViewRun={noop}
144+
onResetRun={noop}
145+
/>
146+
)}
147+
</WizardStep>
147148
</>
148149
)}
150+
</WizardContent>
151+
152+
<WizardFooter>
153+
<BenchmarkWizardFooter
154+
wizardPhase={wizardPhase}
155+
currentStepResponse={currentStepResponse}
156+
benchmarkCreationResult={benchmarkCreateResult}
157+
isNextDisabled={isNextDisabled}
158+
handleNextFromInitial={handleNextFromInitial}
159+
handleNextFromProviderStep={handleNextFromProviderStep}
160+
handlePrevious={handlePrevious}
161+
handleEditSetup={handleEditSetup}
162+
/>
149163
</WizardFooter>
150164
</Wizard>
151165
</div>

‎packages/react-ui/src/app/features/benchmark/components/view-benchmark-workflows-button.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Button, FOLDER_ID_PARAM_NAME } from '@openops/components/ui';
2+
import { t } from 'i18next';
3+
import { useNavigate } from 'react-router-dom';
4+
5+
export const ViewBenchmarkWorkflowsButton = ({
6+
folderId,
7+
}: {
8+
folderId: string;
9+
}) => {
10+
const navigate = useNavigate();
11+
return (
12+
<Button
13+
variant="outline"
14+
size="sm"
15+
onClick={() => navigate(`/flows?${FOLDER_ID_PARAM_NAME}=${folderId}`)}
16+
>
17+
{t('View Workflows')}
18+
</Button>
19+
);
20+
};
21+
22+
ViewBenchmarkWorkflowsButton.displayName = 'ViewBenchmarkWorkflowsButton';

0 commit comments

Comments
 (0)