fix(striker-ui): revise data passing to NetworkInitForm

striker-ui/components/NetworkInitForm.tsx

@@ -581,10 +581,10 @@ NetworkForm.defaultProps = {
 const NetworkInitForm = forwardRef<
   NetworkInitFormForwardedRefContent,
   {
-    targetHostUUID?: string;
+    hostDetail?: APIHostDetail;
     toggleSubmitDisabled?: (testResult: boolean) => void;
   }
->(({ targetHostUUID = 'local', toggleSubmitDisabled }, ref) => {
+>(({ hostDetail: { hostUUID = 'local' } = {}, toggleSubmitDisabled }, ref) => {
   const [dragMousePosition, setDragMousePosition] = useState<{
     x: number;
     y: number;
@@ -604,7 +604,7 @@ const NetworkInitForm = forwardRef<
 
   const { data: networkInterfaces = MOCK_NICS, isLoading } = periodicFetch<
     NetworkInterfaceOverviewMetadata[]
-  >(`${API_BASE_URL}/network-interface/${targetHostUUID}`, {
+  >(`${API_BASE_URL}/network-interface/${hostUUID}`, {
     refreshInterval: 2000,
     onSuccess: (data) => {
       const map = data.reduce<NetworkInterfaceInputMap>((result, metadata) => {
@@ -1385,7 +1385,7 @@ const NetworkInitForm = forwardRef<
 });
 
 NetworkInitForm.defaultProps = {
-  targetHostUUID: 'local',
+  hostDetail: undefined,
   toggleSubmitDisabled: undefined,
 };
 NetworkInitForm.displayName = 'NetworkInitForm';

striker-ui/components/PrepareNetworkForm.tsx

@@ -24,14 +24,8 @@ const PrepareNetworkForm = withRouter(
   }) => {
     const { protect } = useProtect();
 
-    const [dataHostName, setDataHostName] = useProtectedState<
+    const [dataHostDetail, setHostDetail] = useProtectedState<
-      string | undefined
+      APIHostDetail | undefined
-    >(undefined, protect);
-    const [dataHostUUID, setDataHostUUID] = useProtectedState<
-      string | undefined
-    >(undefined, protect);
-    const [dataShortHostName, setDataShortHostName] = useProtectedState<
-      string | undefined
     >(undefined, protect);
     const [fatalErrorMessage, setFatalErrorMessage] = useProtectedState<
       Message | undefined
@@ -41,10 +35,12 @@ const PrepareNetworkForm = withRouter(
     const panelHeaderElement = useMemo(
       () => (
         <PanelHeader>
-          <HeaderText>Prepare network on {dataShortHostName}</HeaderText>
+          <HeaderText>
+            Prepare network on {dataHostDetail?.shortHostName}
+          </HeaderText>
         </PanelHeader>
       ),
-      [dataShortHostName],
+      [dataHostDetail],
     );
     const contentElement = useMemo(() => {
       let result;
@@ -64,12 +60,12 @@ const PrepareNetworkForm = withRouter(
                     formControlProps={{ sx: { maxWidth: '20em' } }}
                     id="prepare-network-host-name"
                     label="Host name"
-                    value={dataHostName}
+                    value={dataHostDetail?.hostName}
                   />
                 }
                 required
               />
-              <NetworkInitForm targetHostUUID={dataHostUUID} />
+              <NetworkInitForm hostDetail={dataHostDetail} />
               <FlexBox row justifyContent="flex-end">
                 <ContainedButton>Prepare network</ContainedButton>
               </FlexBox>
@@ -79,13 +75,7 @@ const PrepareNetworkForm = withRouter(
       }
 
       return result;
-    }, [
+    }, [dataHostDetail, fatalErrorMessage, isLoading, panelHeaderElement]);
-      dataHostName,
-      dataHostUUID,
-      fatalErrorMessage,
-      isLoading,
-      panelHeaderElement,
-    ]);
 
     useEffect(() => {
       if (isReady) {
@@ -98,10 +88,8 @@ const PrepareNetworkForm = withRouter(
                   : queryHostUUID
               }`,
             )
-            .then(({ data: { hostName, hostUUID, shortHostName } }) => {
+            .then(({ data }) => {
-              setDataHostName(hostName);
+              setHostDetail(data);
-              setDataHostUUID(hostUUID);
-              setDataShortHostName(shortHostName);
             })
             .catch((error) => {
               const { children } = handleAPIError(error);
@@ -127,10 +115,8 @@ const PrepareNetworkForm = withRouter(
       fatalErrorMessage,
       isReady,
       queryHostUUID,
-      setDataHostName,
-      setDataHostUUID,
-      setDataShortHostName,
       setFatalErrorMessage,
+      setHostDetail,
       setIsLoading,
     ]);
 

striker-ui/types/APIHost.d.ts

@@ -30,6 +30,7 @@ type APIHostInstallTarget = 'enabled' | 'disabled';
 
 type APIHostDetail = {
   hostName: string;
+  hostType: string;
   hostUUID: string;
   installTarget: APIHostInstallTarget;
   shortHostName: string;