fix(striker-ui): suggest default BCN, SN, IFN IPs for each subnode in create manifest

striker-ui/components/ManageManifest/AddManifestInputGroup.tsx

@@ -57,6 +57,10 @@ const AddManifestInputGroup = <
   const { networks: previousNetworkList = DEFAULT_NETWORK_LIST } =
     previousNetworkConfig;
 
+  const [anSequence, setAnSequence] = useState<number>(
+    previousAnId?.sequence ?? 0,
+  );
+
   const [networkList, setNetworkList] =
     useState<ManifestNetworkList>(previousNetworkList);
 
@@ -67,7 +71,17 @@ const AddManifestInputGroup = <
 
   return (
     <FlexBox>
-      <AnIdInputGroup formUtils={formUtils} previous={previousAnId} />
+      <AnIdInputGroup
+        formUtils={formUtils}
+        onSequenceChange={(event) => {
+          const {
+            target: { value },
+          } = event;
+
+          setAnSequence(Number(value));
+        }}
+        previous={previousAnId}
+      />
       <AnNetworkConfigInputGroup
         formUtils={formUtils}
         networkListEntries={networkListEntries}
@@ -75,6 +89,7 @@ const AddManifestInputGroup = <
         setNetworkList={setNetworkList}
       />
       <AnHostConfigInputGroup
+        anSequence={anSequence}
         formUtils={formUtils}
         knownFences={knownFences}
         knownUpses={knownUpses}

striker-ui/components/ManageManifest/AnHostConfigInputGroup.tsx

@@ -1,3 +1,4 @@
+import { Netmask } from 'netmask';
 import { ReactElement, useMemo } from 'react';
 
 import AnHostInputGroup from './AnHostInputGroup';
@@ -19,7 +20,39 @@ const DEFAULT_HOST_LIST: ManifestHostList = {
   },
 };
 
+const guessHostIpOnNetwork = ({
+  anSeq,
+  minIp,
+  offset3 = 10,
+  step3 = 2,
+  subnetMask,
+  subSeq,
+}: {
+  anSeq: number;
+  minIp: string;
+  offset3?: number;
+  step3?: number;
+  subnetMask: string;
+  subSeq: number;
+}): string => {
+  try {
+    const block = new Netmask(`${minIp}/${subnetMask}`);
+
+    if (block.bitmask !== 16) {
+      return `${block.base.replace(/\.0/g, '')}.`;
+    }
+
+    const third = (anSeq - 1) * step3 + offset3;
+    const fourth = subSeq;
+
+    return minIp.replace(/^((\d+\.){2})\d+\.\d+$/, `$1${third}.${fourth}`);
+  } catch (error) {
+    return '';
+  }
+};
+
 const AnHostConfigInputGroup = <M extends MapToInputTestID>({
+  anSequence,
   formUtils,
   knownFences = {},
   knownUpses = {},
@@ -64,10 +97,25 @@ const AnHostConfigInputGroup = <M extends MapToInputTestID>({
             {},
           );
           const networks = networkListEntries.reduce<ManifestHostNetworkList>(
-            (networkList, [networkId, { networkNumber, networkType }]) => {
+            (
-              const { [networkId]: { networkIp = '' } = {} } =
+              networkList,
+              [
+                networkId,
+                { networkMinIp, networkNumber, networkSubnetMask, networkType },
+              ],
+            ) => {
+              let { [networkId]: { networkIp = '' } = {} } =
                 previousNetworkList;
 
+              if (!networkIp) {
+                networkIp = guessHostIpOnNetwork({
+                  anSeq: anSequence,
+                  minIp: networkMinIp,
+                  subnetMask: networkSubnetMask,
+                  subSeq: hostNumber,
+                });
+              }
+
               networkList[networkId] = {
                 networkIp,
                 networkNumber,
@@ -110,6 +158,7 @@ const AnHostConfigInputGroup = <M extends MapToInputTestID>({
         {},
       ),
     [
+      anSequence,
       formUtils,
       hostListEntries,
       knownFenceListValues,

striker-ui/components/ManageManifest/AnIdInputGroup.tsx

@@ -1,4 +1,5 @@
-import { ReactElement } from 'react';
+import { debounce } from 'lodash';
+import { ReactElement, useMemo } from 'react';
 
 import Grid from '../Grid';
 import InputWithRef from '../InputWithRef';
@@ -26,109 +27,123 @@ const AnIdInputGroup = <
       | typeof INPUT_ID_AI_SEQUENCE]: string;
   },
 >({
+  debounceWait = 500,
   formUtils: {
     buildFinishInputTestBatchFunction,
     buildInputFirstRenderFunction,
     setMessage,
   },
+  onSequenceChange,
   previous: {
     domain: previousDomain,
     prefix: previousPrefix,
     sequence: previousSequence,
   } = {},
-}: AnIdInputGroupProps<M>): ReactElement => (
+}: AnIdInputGroupProps<M>): ReactElement => {
-  <Grid
+  const debounceSequenceChangeHandler = useMemo(
-    columns={{ xs: 1, sm: 2, md: 3 }}
+    () => onSequenceChange && debounce(onSequenceChange, debounceWait),
-    layout={{
+    [debounceWait, onSequenceChange],
-      'an-id-input-cell-prefix': {
+  );
-        children: (
+
-          <InputWithRef
+  return (
-            input={
+    <Grid
-              <OutlinedInputWithLabel
+      columns={{ xs: 1, sm: 2, md: 3 }}
-                id={INPUT_ID_AI_PREFIX}
+      layout={{
-                label={INPUT_LABEL_AI_PREFIX}
+        'an-id-input-cell-prefix': {
-                value={previousPrefix}
+          children: (
-              />
+            <InputWithRef
-            }
+              input={
-            inputTestBatch={buildPeacefulStringTestBatch(
+                <OutlinedInputWithLabel
-              INPUT_LABEL_AI_PREFIX,
+                  id={INPUT_ID_AI_PREFIX}
-              () => {
+                  label={INPUT_LABEL_AI_PREFIX}
-                setMessage(INPUT_ID_AI_PREFIX);
+                  value={previousPrefix}
-              },
+                />
-              {
+              }
-                onFinishBatch:
+              inputTestBatch={buildPeacefulStringTestBatch(
-                  buildFinishInputTestBatchFunction(INPUT_ID_AI_PREFIX),
+                INPUT_LABEL_AI_PREFIX,
-              },
+                () => {
-              (message) => {
+                  setMessage(INPUT_ID_AI_PREFIX);
-                setMessage(INPUT_ID_AI_PREFIX, { children: message });
+                },
-              },
+                {
-            )}
+                  onFinishBatch:
-            onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_PREFIX)}
+                    buildFinishInputTestBatchFunction(INPUT_ID_AI_PREFIX),
-            required
+                },
-          />
+                (message) => {
-        ),
+                  setMessage(INPUT_ID_AI_PREFIX, { children: message });
-      },
+                },
-      'an-id-input-cell-domain': {
+              )}
-        children: (
+              onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_PREFIX)}
-          <InputWithRef
+              required
-            input={
+            />
-              <OutlinedInputWithLabel
+          ),
-                id={INPUT_ID_AI_DOMAIN}
+        },
-                label={INPUT_LABEL_AI_DOMAIN}
+        'an-id-input-cell-domain': {
-                value={previousDomain}
+          children: (
-              />
+            <InputWithRef
-            }
+              input={
-            inputTestBatch={buildPeacefulStringTestBatch(
+                <OutlinedInputWithLabel
-              INPUT_LABEL_AI_DOMAIN,
+                  id={INPUT_ID_AI_DOMAIN}
-              () => {
+                  label={INPUT_LABEL_AI_DOMAIN}
-                setMessage(INPUT_ID_AI_DOMAIN);
+                  value={previousDomain}
-              },
+                />
-              {
+              }
-                onFinishBatch:
+              inputTestBatch={buildPeacefulStringTestBatch(
-                  buildFinishInputTestBatchFunction(INPUT_ID_AI_DOMAIN),
+                INPUT_LABEL_AI_DOMAIN,
-              },
+                () => {
-              (message) => {
+                  setMessage(INPUT_ID_AI_DOMAIN);
-                setMessage(INPUT_ID_AI_DOMAIN, { children: message });
+                },
-              },
+                {
-            )}
+                  onFinishBatch:
-            onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_DOMAIN)}
+                    buildFinishInputTestBatchFunction(INPUT_ID_AI_DOMAIN),
-            required
+                },
-          />
+                (message) => {
-        ),
+                  setMessage(INPUT_ID_AI_DOMAIN, { children: message });
-      },
+                },
-      'an-id-input-cell-sequence': {
+              )}
-        children: (
+              onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_DOMAIN)}
-          <InputWithRef
+              required
-            input={
+            />
-              <OutlinedInputWithLabel
+          ),
-                id={INPUT_ID_AI_SEQUENCE}
+        },
-                label={INPUT_LABEL_AI_SEQUENCE}
+        'an-id-input-cell-sequence': {
-                value={previousSequence}
+          children: (
-              />
+            <InputWithRef
-            }
+              createInputOnChangeHandlerOptions={{
-            inputTestBatch={buildNumberTestBatch(
+                postSet: debounceSequenceChangeHandler,
-              INPUT_LABEL_AI_SEQUENCE,
+              }}
-              () => {
+              input={
-                setMessage(INPUT_ID_AI_SEQUENCE);
+                <OutlinedInputWithLabel
-              },
+                  id={INPUT_ID_AI_SEQUENCE}
-              {
+                  label={INPUT_LABEL_AI_SEQUENCE}
-                onFinishBatch:
+                  value={previousSequence}
-                  buildFinishInputTestBatchFunction(INPUT_ID_AI_SEQUENCE),
+                />
-              },
+              }
-              (message) => {
+              inputTestBatch={buildNumberTestBatch(
-                setMessage(INPUT_ID_AI_SEQUENCE, { children: message });
+                INPUT_LABEL_AI_SEQUENCE,
-              },
+                () => {
-            )}
+                  setMessage(INPUT_ID_AI_SEQUENCE);
-            onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_SEQUENCE)}
+                },
-            required
+                {
-            valueType="number"
+                  onFinishBatch:
-          />
+                    buildFinishInputTestBatchFunction(INPUT_ID_AI_SEQUENCE),
-        ),
+                },
-      },
+                (message) => {
-    }}
+                  setMessage(INPUT_ID_AI_SEQUENCE, { children: message });
-    spacing="1em"
+                },
-  />
+              )}
-);
+              onFirstRender={buildInputFirstRenderFunction(
+                INPUT_ID_AI_SEQUENCE,
+              )}
+              required
+              valueType="number"
+            />
+          ),
+        },
+      }}
+      spacing="1em"
+    />
+  );
+};
 
 export { INPUT_ID_AI_DOMAIN, INPUT_ID_AI_PREFIX, INPUT_ID_AI_SEQUENCE };
 

striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx

@@ -124,6 +124,26 @@ const AnNetworkConfigInputGroup = <
     [setNetworkList],
   );
 
+  const setNetworkProp = useCallback(
+    <P extends keyof ManifestNetwork>(
+      nkey: string,
+      pkey: P,
+      value: ManifestNetwork[P],
+    ) =>
+      setNetworkList((previous) => {
+        const nyu = { ...previous };
+
+        const { [nkey]: nw } = nyu;
+
+        if (nw) {
+          nw[pkey] = value;
+        }
+
+        return nyu;
+      }),
+    [setNetworkList],
+  );
+
   const handleNetworkTypeChange = useCallback<AnNetworkTypeChangeEventHandler>(
     (
       { networkId: targetId, networkType: previousType },
@@ -243,6 +263,14 @@ const AnNetworkConfigInputGroup = <
               networkType={networkType}
               networkTypeOptions={networkTypeOptions}
               onClose={handleNetworkRemove}
+              onNetworkMinIpChange={(
+                { networkId: nid },
+                { target: { value } },
+              ) => setNetworkProp(nid, 'networkMinIp', value)}
+              onNetworkSubnetMaskChange={(
+                { networkId: nid },
+                { target: { value } },
+              ) => setNetworkProp(nid, 'networkSubnetMask', value)}
               onNetworkTypeChange={handleNetworkTypeChange}
               previous={{
                 gateway: networkGateway,
@@ -265,11 +293,12 @@ const AnNetworkConfigInputGroup = <
 
     return result;
   }, [
-    formUtils,
     networkListEntries,
+    formUtils,
     networkTypeOptions,
     handleNetworkRemove,
     handleNetworkTypeChange,
+    setNetworkProp,
   ]);
 
   return (

striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx

@@ -1,3 +1,4 @@
+import { debounce } from 'lodash';
 import { ReactElement, ReactNode, useMemo } from 'react';
 
 import NETWORK_TYPES from '../../lib/consts/NETWORK_TYPES';
@@ -77,6 +78,7 @@ const buildInputIdANSubnetMask = (networkId: string): string =>
   `${INPUT_ID_PREFIX_AN_NETWORK}-${networkId}-subnet-mask`;
 
 const AnNetworkInputGroup = <M extends MapToInputTestID>({
+  debounceWait = 500,
   formUtils: {
     buildFinishInputTestBatchFunction,
     buildInputFirstRenderFunction,
@@ -91,6 +93,9 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
   networkType,
   networkTypeOptions,
   onClose,
+  onNetworkGatewayChange,
+  onNetworkMinIpChange,
+  onNetworkSubnetMaskChange,
   onNetworkTypeChange,
   previous: {
     gateway: previousGateway,
@@ -146,6 +151,24 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
     [isShowGateway],
   );
 
+  const debounceNetworkGatewayChangeHandler = useMemo(
+    () =>
+      onNetworkGatewayChange && debounce(onNetworkGatewayChange, debounceWait),
+    [debounceWait, onNetworkGatewayChange],
+  );
+
+  const debounceNetworkMinIpChangeHandler = useMemo(
+    () => onNetworkMinIpChange && debounce(onNetworkMinIpChange, debounceWait),
+    [debounceWait, onNetworkMinIpChange],
+  );
+
+  const debounceNetworkSubnetMaskChangeHandler = useMemo(
+    () =>
+      onNetworkSubnetMaskChange &&
+      debounce(onNetworkSubnetMaskChange, debounceWait),
+    [debounceWait, onNetworkSubnetMaskChange],
+  );
+
   const closeButtonElement = useMemo<ReactNode>(
     () =>
       isShowCloseButton && (
@@ -172,6 +195,14 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
     if (isShowGateway && inputIdGateway) {
       result = (
         <InputWithRef
+          createInputOnChangeHandlerOptions={{
+            postSet: (...args) =>
+              debounceNetworkGatewayChangeHandler?.call(
+                null,
+                { networkId, networkType },
+                ...args,
+              ),
+          }}
           input={
             <OutlinedInputWithLabel
               baseInputProps={{
@@ -213,6 +244,8 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
     buildFinishInputTestBatchFunction,
     buildInputFirstRenderFunction,
     buildInputUnmountFunction,
+    debounceNetworkGatewayChangeHandler,
+    networkType,
     setMessage,
   ]);
 
@@ -256,6 +289,14 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
             [inputCellIdIp]: {
               children: (
                 <InputWithRef
+                  createInputOnChangeHandlerOptions={{
+                    postSet: (...args) =>
+                      debounceNetworkMinIpChangeHandler?.call(
+                        null,
+                        { networkId, networkType },
+                        ...args,
+                      ),
+                  }}
                   input={
                     <OutlinedInputWithLabel
                       baseInputProps={{
@@ -289,6 +330,14 @@ const AnNetworkInputGroup = <M extends MapToInputTestID>({
             [inputCellIdSubnetMask]: {
               children: (
                 <InputWithRef
+                  createInputOnChangeHandlerOptions={{
+                    postSet: (...args) =>
+                      debounceNetworkSubnetMaskChangeHandler?.call(
+                        null,
+                        { networkId, networkType },
+                        ...args,
+                      ),
+                  }}
                   input={
                     <OutlinedInputWithLabel
                       baseInputProps={{

striker-ui/components/ManageManifest/ManageManifestPanel.tsx

@@ -47,6 +47,8 @@ import useFormUtils from '../../hooks/useFormUtils';
 import useIsFirstRender from '../../hooks/useIsFirstRender';
 import useProtectedState from '../../hooks/useProtectedState';
 
+const REQ_BODY_MAX_DEPTH = 6;
+
 const getFormData = (
   ...[{ target }]: DivFormEventHandlerParameters
 ): APIBuildManifestRequestBody => {
@@ -262,7 +264,7 @@ const ManageManifestPanel: FC = () => {
 
         setConfirmDialogProps({
           actionProceedText: 'Add',
-          content: <FormSummary entries={body} />,
+          content: <FormSummary entries={body} maxDepth={REQ_BODY_MAX_DEPTH} />,
           onProceedAppend: () => {
             submitForm({
               body,
@@ -311,7 +313,7 @@ const ManageManifestPanel: FC = () => {
 
         setConfirmDialogProps({
           actionProceedText: 'Edit',
-          content: <FormSummary entries={body} />,
+          content: <FormSummary entries={body} maxDepth={REQ_BODY_MAX_DEPTH} />,
           onProceedAppend: () => {
             submitForm({
               body,
@@ -605,6 +607,7 @@ const ManageManifestPanel: FC = () => {
         {...confirmDialogProps}
         ref={confirmDialogRef}
         scrollContent
+        wide
       />
     </>
   );

striker-ui/types/ManageManifest.d.ts

@@ -74,6 +74,10 @@ type MapToManifestFormInputHandler = Record<string, ManifestFormInputHandler>;
 /** ---------- Component types ---------- */
 
 type AnIdInputGroupOptionalProps = {
+  debounceWait?: number;
+  onSequenceChange?: import('react').ChangeEventHandler<
+    HTMLInputElement | HTMLTextAreaElement
+  >;
   previous?: Partial<ManifestAnId>;
 };
 
@@ -86,21 +90,32 @@ type AnNetworkEventHandlerPreviousArgs = {
   networkId: string;
 } & Pick<ManifestNetwork, 'networkType'>;
 
-type AnNetworkCloseEventHandler = (
+type AnNetworkChangeEventHandler<Handler> = (
   args: AnNetworkEventHandlerPreviousArgs,
-  ...handlerArgs: Parameters<IconButtonMouseEventHandler>
+  ...handlerArgs: Parameters<Handler>
-) => ReturnType<IconButtonMouseEventHandler>;
+) => ReturnType<Handler>;
 
-type AnNetworkTypeChangeEventHandler = (
+type AnNetworkCloseEventHandler =
-  args: AnNetworkEventHandlerPreviousArgs,
+  AnNetworkChangeEventHandler<IconButtonMouseEventHandler>;
-  ...handlerArgs: Parameters<SelectChangeEventHandler>
+
-) => ReturnType<SelectChangeEventHandler>;
+type AnNetworkTypeChangeEventHandler =
+  AnNetworkChangeEventHandler<SelectChangeEventHandler>;
 
 type AnNetworkInputGroupOptionalProps = {
+  debounceWait?: number;
   inputGatewayLabel?: string;
   inputMinIpLabel?: string;
   inputSubnetMaskLabel?: string;
   onClose?: AnNetworkCloseEventHandler;
+  onNetworkGatewayChange?: AnNetworkChangeEventHandler<
+    import('react').ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  >;
+  onNetworkMinIpChange?: AnNetworkChangeEventHandler<
+    import('react').ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  >;
+  onNetworkSubnetMaskChange?: AnNetworkChangeEventHandler<
+    import('react').ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  >;
   onNetworkTypeChange?: AnNetworkTypeChangeEventHandler;
   previous?: {
     gateway?: string;
@@ -155,6 +170,7 @@ type AnHostConfigInputGroupOptionalProps = {
 
 type AnHostConfigInputGroupProps<M extends MapToInputTestID> =
   AnHostConfigInputGroupOptionalProps & {
+    anSequence: number;
     formUtils: FormUtils<M>;
     networkListEntries: Array<[string, ManifestNetwork]>;
   };