Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 66x | import { Alert, Button, Modal } from "antd";
import React, { FunctionComponent, useState } from "react";
import { useTranslation, Trans } from "react-i18next";
import { SaveOutlined, EditOutlined, FormOutlined } from "@ant-design/icons";
import { MiddleStepExecContextProps } from "@props/RecordProps";
import CodeEditor from "../fields/CodeEditor";
interface MiddleStepExecInstructionProps {
setCurrentTab: (tab: string) => void;
executeCallback: (isFinalRound: boolean) => void;
middleStepExecContext: MiddleStepExecContextProps;
setFineTuningResult: (result: string) => void;
zIndex: number;
}
const MiddleStepExecInstruction: FunctionComponent<MiddleStepExecInstructionProps> = ({
setCurrentTab,
executeCallback,
middleStepExecContext,
setFineTuningResult,
zIndex
}) => {
const { t } = useTranslation();
const [isModalVisible, setIsModalVisible] = useState(false);
const [fineTuningResult, setFineTuningResultState] = useState(
middleStepExecContext?.result?.execResult ?? "");
const handleOk = (): void => {
setFineTuningResult(fineTuningResult);
setIsModalVisible(false);
};
const handleCancel = (): void => {
setIsModalVisible(false);
};
return (
(<Alert
message={t('alertMessage')}
showIcon={true}
type="info"
className="middle-step-exec-instruction action-message-info"
description={
<>
<Trans i18nKey="alertDescriptionPart1" />
<span style={{ color: "red", fontWeight: 900 }}>
<Trans i18nKey="alertDescriptionPart2" />
</span>
<ul>
<li>{t('alertDescriptionSatisfaction')}</li>
<li>
{t('alertDescriptionTuning')}
<Button
size="small"
type="default"
icon={<EditOutlined />}
onClick={() => setIsModalVisible(true)}
>
{t('editResult')}
</Button>
{t('alertDescriptionSystemSave')}
</li>
<li>
{t('alertDescriptionModify')}
<Button
size="small"
type="default"
onClick={() => setCurrentTab("ptab")}
icon={<FormOutlined />}
>
{t('resetParameters')}
</Button>
{t('alertDescriptionRunAgain')}
</li>
</ul>
<div style={{ textAlign: "center", width: "100%", margin: "auto" }}>
<Button
size="middle"
type="primary"
onClick={() => executeCallback(true)}
icon={<SaveOutlined />}
>
{t("Save")}
</Button>
</div>
<Modal
title={t("fineTuningResult")}
open={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
zIndex={zIndex + 1}
width="62vw"
className="fine-tuning-result-modal"
>
<CodeEditor
value={fineTuningResult}
onChange={(val: string) => setFineTuningResultState(val)}
name="finalResultEditor"
updatable={true}
zIndex={1}
width="100%"
height={"200"}
/>
</Modal>
</>
}
></Alert>)
);
};
export default MiddleStepExecInstruction;
|