diff --git a/striker-ui/components/GeneralInitForm.tsx b/striker-ui/components/GeneralInitForm.tsx index d1739239..5b3f9957 100644 --- a/striker-ui/components/GeneralInitForm.tsx +++ b/striker-ui/components/GeneralInitForm.tsx @@ -3,6 +3,7 @@ import { forwardRef, ReactNode, useCallback, + useEffect, useImperativeHandle, useMemo, useRef, @@ -92,8 +93,12 @@ const buildHostName = ({ const GeneralInitForm = forwardRef< GeneralInitFormForwardedRefContent, - { toggleSubmitDisabled?: ToggleSubmitDisabledFunction } ->(({ toggleSubmitDisabled }, ref) => { + { + expectHostDetail?: boolean; + hostDetail?: APIHostDetail; + toggleSubmitDisabled?: ToggleSubmitDisabledFunction; + } +>(({ expectHostDetail = false, hostDetail, toggleSubmitDisabled }, ref) => { const [helpMessage, setHelpMessage] = useState(); const [isShowOrganizationPrefixSuggest, setIsShowOrganizationPrefixSuggest] = useState(false); @@ -103,6 +108,8 @@ const GeneralInitForm = forwardRef< useState(true); const [isValidateDomain, setIsValidateDomain] = useState(true); + const readHostDetailRef = useRef(true); + const adminPasswordInputRef = useRef>({}); const confirmAdminPasswordInputRef = useRef< InputForwardedRefContent<'string'> @@ -491,6 +498,26 @@ const GeneralInitForm = forwardRef< [isValidateDomain, testInputToToggleSubmitDisabled], ); + useEffect(() => { + if (expectHostDetail && hostDetail && readHostDetailRef.current) { + readHostDetailRef.current = false; + + const { + domain: pDomain, + hostName: pHostName, + organization: pOrganization, + prefix: pPrefix, + sequence: pSequence, + } = hostDetail; + + organizationNameInputRef.current.setValue?.call(null, pOrganization); + organizationPrefixInputRef.current.setValue?.call(null, pPrefix); + hostNumberInputRef.current.setValue?.call(null, pSequence); + domainNameInputRef.current.setValue?.call(null, pDomain); + hostNameInputRef.current.setValue?.call(null, pHostName); + } + }, [expectHostDetail, hostDetail]); + useImperativeHandle(ref, () => ({ get: () => ({ adminPassword: adminPasswordInputRef.current.getValue?.call(null), @@ -829,7 +856,12 @@ const GeneralInitForm = forwardRef< ); }); -GeneralInitForm.defaultProps = { toggleSubmitDisabled: undefined }; +GeneralInitForm.defaultProps = { + expectHostDetail: false, + hostDetail: undefined, + toggleSubmitDisabled: undefined, +}; + GeneralInitForm.displayName = 'GeneralInitForm'; export type { GeneralInitFormForwardedRefContent, GeneralInitFormValues }; diff --git a/striker-ui/components/NetworkInitForm.tsx b/striker-ui/components/NetworkInitForm.tsx index 8f5d5b74..9f3e9192 100644 --- a/striker-ui/components/NetworkInitForm.tsx +++ b/striker-ui/components/NetworkInitForm.tsx @@ -621,7 +621,7 @@ const NetworkInitForm = forwardRef< const gatewayInputRef = useRef>({}); /** Avoid state here to prevent triggering multiple renders when reading * host detail. */ - const isReadHostDetailRef = useRef(false); + const readHostDetailRef = useRef(true); const messageGroupRef = useRef({}); const { @@ -1183,9 +1183,9 @@ const NetworkInitForm = forwardRef< Object.keys(networkInterfaceInputMap).length > 0 && expectHostDetail && hostDetail && - !isReadHostDetailRef.current + readHostDetailRef.current ) { - isReadHostDetailRef.current = true; + readHostDetailRef.current = false; const applied: string[] = []; const inputs = Object.values(previousNetworks).reduce( diff --git a/striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx b/striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx index 5fe239d5..c871e772 100644 --- a/striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx +++ b/striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx @@ -130,7 +130,9 @@ const SimpleOperationsPanel: FC = ({ - Reconfigure striker + + Reconfigure striker + { + const { + isReady, + query: { re }, + } = useRouter(); + const [submitMessage, setSubmitMessage] = useState(); const [requestBody, setRequestBody] = useState< (GeneralInitFormValues & NetworkInitFormValues) | undefined @@ -42,12 +49,20 @@ const StrikerInitForm: FC = () => { useState(false); const [isSubmittingForm, setIsSubmittingForm] = useState(false); + const [hostDetail, setHostDetail] = useProtectedState< + APIHostDetail | undefined + >(undefined); + + const allowGetHostDetail = useRef(true); + const generalInitFormRef = useRef({}); const networkInitFormRef = useRef({}); const jobIconRef = useRef({}); const jobSummaryRef = useRef({}); + const reconfig = useMemo(() => Boolean(re), [re]); + const buildSubmitSection = useMemo( () => isSubmittingForm ? ( @@ -74,15 +89,50 @@ const StrikerInitForm: FC = () => { [isDisableSubmit, isSubmittingForm], ); + const panelTitle = useMemo(() => { + let title = 'Loading...'; + + if (isReady) { + title = reconfig + ? `Reconfigure ${hostDetail?.shortHostName ?? 'striker'}` + : 'Initialize striker'; + } + + return title; + }, [hostDetail?.shortHostName, isReady, reconfig]); + const toggleSubmitDisabled = useCallback((...testResults: boolean[]) => { setIsDisableSubmit(!testResults.every((testResult) => testResult)); }, []); + useEffect(() => { + if (isReady) { + if (reconfig && allowGetHostDetail.current) { + allowGetHostDetail.current = false; + + api + .get('/host/local') + .then(({ data }) => { + setHostDetail(data); + }) + .catch((error) => { + const emsg = handleAPIError(error); + + emsg.children = ( + <>Failed to get host detail data. {emsg.children} + ); + + setSubmitMessage(emsg); + }); + } + } + }, [isReady, reconfig, setHostDetail]); + return ( <> - + {panelTitle} { jobSummaryRef.current.setAnchor?.call(null, currentTarget); @@ -95,6 +145,8 @@ const StrikerInitForm: FC = () => { { if (testResult !== isGeneralInitFormValid) { @@ -104,6 +156,8 @@ const StrikerInitForm: FC = () => { }} /> { if (testResult !== isNetworkInitFormValid) {