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

1 year ago · 8b6b1a64a8
parent 2b90bf3a9f
commit 8b6b1a64a8
7 changed files with 283 additions and 107 deletions
--- a/striker-ui/components/ManageManifest/AddManifestInputGroup.tsx
+++ b/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}
--- a/striker-ui/components/ManageManifest/AnHostConfigInputGroup.tsx
+++ b/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,
--- a/striker-ui/components/ManageManifest/AnIdInputGroup.tsx
+++ b/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 => (
-  <Grid
-    columns={{ xs: 1, sm: 2, md: 3 }}
-    layout={{
-      'an-id-input-cell-prefix': {
-        children: (
-          <InputWithRef
-            input={
-              <OutlinedInputWithLabel
-                id={INPUT_ID_AI_PREFIX}
-                label={INPUT_LABEL_AI_PREFIX}
-                value={previousPrefix}
-              />
-            }
-            inputTestBatch={buildPeacefulStringTestBatch(
-              INPUT_LABEL_AI_PREFIX,
-              () => {
-                setMessage(INPUT_ID_AI_PREFIX);
-              },
-              {
-                onFinishBatch:
-                  buildFinishInputTestBatchFunction(INPUT_ID_AI_PREFIX),
-              },
-              (message) => {
-                setMessage(INPUT_ID_AI_PREFIX, { children: message });
-              },
-            )}
-            onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_PREFIX)}
-            required
-          />
-        ),
-      },
-      'an-id-input-cell-domain': {
-        children: (
-          <InputWithRef
-            input={
-              <OutlinedInputWithLabel
-                id={INPUT_ID_AI_DOMAIN}
-                label={INPUT_LABEL_AI_DOMAIN}
-                value={previousDomain}
-              />
-            }
-            inputTestBatch={buildPeacefulStringTestBatch(
-              INPUT_LABEL_AI_DOMAIN,
-              () => {
-                setMessage(INPUT_ID_AI_DOMAIN);
-              },
-              {
-                onFinishBatch:
-                  buildFinishInputTestBatchFunction(INPUT_ID_AI_DOMAIN),
-              },
-              (message) => {
-                setMessage(INPUT_ID_AI_DOMAIN, { children: message });
-              },
-            )}
-            onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_DOMAIN)}
-            required
-          />
-        ),
-      },
-      'an-id-input-cell-sequence': {
-        children: (
-          <InputWithRef
-            input={
-              <OutlinedInputWithLabel
-                id={INPUT_ID_AI_SEQUENCE}
-                label={INPUT_LABEL_AI_SEQUENCE}
-                value={previousSequence}
-              />
-            }
-            inputTestBatch={buildNumberTestBatch(
-              INPUT_LABEL_AI_SEQUENCE,
-              () => {
-                setMessage(INPUT_ID_AI_SEQUENCE);
-              },
-              {
-                onFinishBatch:
-                  buildFinishInputTestBatchFunction(INPUT_ID_AI_SEQUENCE),
-              },
-              (message) => {
-                setMessage(INPUT_ID_AI_SEQUENCE, { children: message });
-              },
-            )}
-            onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_SEQUENCE)}
-            required
-            valueType="number"
-          />
-        ),
-      },
-    }}
-    spacing="1em"
-  />
-);
+}: AnIdInputGroupProps<M>): ReactElement => {
+  const debounceSequenceChangeHandler = useMemo(
+    () => onSequenceChange && debounce(onSequenceChange, debounceWait),
+    [debounceWait, onSequenceChange],
+  );
+
+  return (
+    <Grid
+      columns={{ xs: 1, sm: 2, md: 3 }}
+      layout={{
+        'an-id-input-cell-prefix': {
+          children: (
+            <InputWithRef
+              input={
+                <OutlinedInputWithLabel
+                  id={INPUT_ID_AI_PREFIX}
+                  label={INPUT_LABEL_AI_PREFIX}
+                  value={previousPrefix}
+                />
+              }
+              inputTestBatch={buildPeacefulStringTestBatch(
+                INPUT_LABEL_AI_PREFIX,
+                () => {
+                  setMessage(INPUT_ID_AI_PREFIX);
+                },
+                {
+                  onFinishBatch:
+                    buildFinishInputTestBatchFunction(INPUT_ID_AI_PREFIX),
+                },
+                (message) => {
+                  setMessage(INPUT_ID_AI_PREFIX, { children: message });
+                },
+              )}
+              onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_PREFIX)}
+              required
+            />
+          ),
+        },
+        'an-id-input-cell-domain': {
+          children: (
+            <InputWithRef
+              input={
+                <OutlinedInputWithLabel
+                  id={INPUT_ID_AI_DOMAIN}
+                  label={INPUT_LABEL_AI_DOMAIN}
+                  value={previousDomain}
+                />
+              }
+              inputTestBatch={buildPeacefulStringTestBatch(
+                INPUT_LABEL_AI_DOMAIN,
+                () => {
+                  setMessage(INPUT_ID_AI_DOMAIN);
+                },
+                {
+                  onFinishBatch:
+                    buildFinishInputTestBatchFunction(INPUT_ID_AI_DOMAIN),
+                },
+                (message) => {
+                  setMessage(INPUT_ID_AI_DOMAIN, { children: message });
+                },
+              )}
+              onFirstRender={buildInputFirstRenderFunction(INPUT_ID_AI_DOMAIN)}
+              required
+            />
+          ),
+        },
+        'an-id-input-cell-sequence': {
+          children: (
+            <InputWithRef
+              createInputOnChangeHandlerOptions={{
+                postSet: debounceSequenceChangeHandler,
+              }}
+              input={
+                <OutlinedInputWithLabel
+                  id={INPUT_ID_AI_SEQUENCE}
+                  label={INPUT_LABEL_AI_SEQUENCE}
+                  value={previousSequence}
+                />
+              }
+              inputTestBatch={buildNumberTestBatch(
+                INPUT_LABEL_AI_SEQUENCE,
+                () => {
+                  setMessage(INPUT_ID_AI_SEQUENCE);
+                },
+                {
+                  onFinishBatch:
+                    buildFinishInputTestBatchFunction(INPUT_ID_AI_SEQUENCE),
+                },
+                (message) => {
+                  setMessage(INPUT_ID_AI_SEQUENCE, { children: message });
+                },
+              )}
+              onFirstRender={buildInputFirstRenderFunction(
+                INPUT_ID_AI_SEQUENCE,
+              )}
+              required
+              valueType="number"
+            />
+          ),
+        },
+      }}
+      spacing="1em"
+    />
+  );
+};

 export { INPUT_ID_AI_DOMAIN, INPUT_ID_AI_PREFIX, INPUT_ID_AI_SEQUENCE };

--- a/striker-ui/components/ManageManifest/AnNetworkConfigInputGroup.tsx
+++ b/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 (
--- a/striker-ui/components/ManageManifest/AnNetworkInputGroup.tsx
+++ b/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={{
--- a/striker-ui/components/ManageManifest/ManageManifestPanel.tsx
+++ b/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
      />
    </>
  );
--- a/striker-ui/types/ManageManifest.d.ts
+++ b/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>
-) => ReturnType<IconButtonMouseEventHandler>;
+  ...handlerArgs: Parameters<Handler>
+) => ReturnType<Handler>;

-type AnNetworkTypeChangeEventHandler = (
-  args: AnNetworkEventHandlerPreviousArgs,
-  ...handlerArgs: Parameters<SelectChangeEventHandler>
-) => ReturnType<SelectChangeEventHandler>;
+type AnNetworkCloseEventHandler =
+  AnNetworkChangeEventHandler<IconButtonMouseEventHandler>;
+
+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]>;
  };