seeder-st2110-components 1.0.2 → 1.0.3

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, memo, useMemo, useRef } from 'react';
 import { useWebSocket, useInterval } from 'ahooks';
-import { Tooltip, Space, Flex, Divider, App, Modal, Form, Input, Alert, message, Dropdown, Spin } from 'antd';
+import { Tooltip, Space, Flex, Divider, App, Modal, Form, Input, Alert, message, Dropdown, Spin, InputNumber, ConfigProvider, Badge, Switch, Select, Typography } from 'antd';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LoadingOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import axios from 'axios';
@@ -1974,5 +1974,504 @@ SystemOperations.propTypes = {
   okText: PropTypes.string
 };
 
-export { AuthorizationModal, SystemOperations, UpgradeManager, useAuth, useHardwareUsage, useHardwareWebSocket, useSystemOperations, useUpgrade };
+const defaultFieldConfigs = {
+  clock_class: {
+    label: 'Clock Class',
+    formType: 'select',
+    options: [{
+      value: 6,
+      label: 'Atomic Clock (6)'
+    }, {
+      value: 7,
+      label: 'GPS (7)'
+    }, {
+      value: 248,
+      label: 'Slave-Only (248)'
+    }],
+    readOnly: true
+  },
+  clock_accuracy: {
+    label: 'Clock Accuracy',
+    formType: 'number',
+    readOnly: true
+  },
+  offset_scaled_log_variance: {
+    label: 'Offset Scaled Log Variance',
+    formType: 'number',
+    readOnly: true
+  },
+  grandmaster_priority1: {
+    label: 'Priority 1',
+    formType: 'number',
+    readOnly: true
+  },
+  grandmaster_priority2: {
+    label: 'Priority 2',
+    formType: 'number',
+    readOnly: true
+  },
+  grandmaster_identity: {
+    label: 'Grandmaster Identity',
+    formType: 'text',
+    readOnly: true
+  },
+  master_port_id: {
+    label: 'Port Identity',
+    formType: 'text',
+    readOnly: true
+  },
+  t1_domain_number: {
+    label: 'Domain',
+    formType: 'number',
+    min: 0,
+    max: 127,
+    readOnly: false
+  },
+  master_utc_offset: {
+    label: 'UTC Offset',
+    formType: 'number',
+    readOnly: true
+  },
+  is_connected: {
+    label: 'Connected Status',
+    formType: 'badge',
+    statusMap: {
+      0: {
+        text: 'Disconnected',
+        color: 'red'
+      },
+      1: {
+        text: 'Connected',
+        color: 'green'
+      }
+    }
+  },
+  is_locked: {
+    label: 'Locked Status',
+    formType: 'badge',
+    statusMap: {
+      0: {
+        text: 'Unlocked',
+        color: 'red'
+      },
+      1: {
+        text: 'Locked',
+        color: 'green'
+      }
+    }
+  }
+};
+
+// 默认字段顺序
+const defaultFieldOrder = ['t1_domain_number', 'grandmaster_priority1', 'grandmaster_priority2', 'grandmaster_identity', 'master_port_id', 'clock_class', 'clock_accuracy', 'offset_scaled_log_variance', 'master_utc_offset', 'is_connected', 'is_locked'];
+
+/**
+ * 转换PTP状态为表单字段数组
+ * @param {Object} ptpStatus PTP状态对象
+ * @param {Object} fieldConfigs 字段配置
+ * @param {Array} fieldOrder 字段顺序
+ * @returns {Array} 表单字段数组
+ */
+function convertPtpStatusToArray(ptpStatus, fieldConfigs, fieldOrder) {
+  return fieldOrder.filter(key => key in ptpStatus).map(key => {
+    const config = fieldConfigs[key] || {
+      label: key,
+      formType: 'text'
+    };
+    const value = ptpStatus[key];
+    return {
+      key,
+      value,
+      ...config,
+      rawData: ptpStatus
+    };
+  });
+}
+const PtpModal = _ref => {
+  let {
+    open,
+    onClose,
+    getPtpInfo,
+    updatePtpInfo,
+    fieldConfigs = defaultFieldConfigs,
+    fieldOrder = defaultFieldOrder,
+    modalProps = {},
+    formProps = {}
+  } = _ref;
+  const [ptpStatus, setPtpStatus] = useState(null);
+  const [form] = Form.useForm();
+  const {
+    message
+  } = App.useApp();
+  useEffect(() => {
+    if (open) {
+      getPtpInfo().then(data => {
+        if (data?.[0]) {
+          setPtpStatus(data[0]);
+          form.setFieldsValue(data[0]);
+        }
+      });
+    }
+  }, [open, form, getPtpInfo]);
+  const ptpStatusArray = useMemo(() => {
+    if (!ptpStatus) return [];
+    return convertPtpStatusToArray(ptpStatus, fieldConfigs, fieldOrder);
+  }, [ptpStatus]);
+  const handleValueChange = changedValues => {
+    if ('t1_domain_number' in changedValues) {
+      setPtpStatus(prev => ({
+        ...prev,
+        t1_domain_number: changedValues.t1_domain_number
+      }));
+    }
+  };
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const response = await updatePtpInfo(values);
+      if (response) {
+        message.success('Success');
+        setTimeout(() => {
+          onClose();
+        }, 1500);
+      }
+    } catch (error) {
+      console.error('Update failed:', error);
+    }
+  };
+  const renderFormItem = item => {
+    switch (item.formType) {
+      case 'select':
+        return /*#__PURE__*/jsx(Select, {
+          options: item.options,
+          disabled: item.readOnly
+        });
+      case 'switch':
+        return /*#__PURE__*/jsx(Switch, {});
+      case 'badge':
+        const normalizedValue = typeof item.value === 'boolean' ? item.value ? 1 : 0 : item.value;
+        const status = item.statusMap?.[normalizedValue] || {
+          text: 'Unknown',
+          color: 'gray'
+        };
+        return /*#__PURE__*/jsx(ConfigProvider, {
+          theme: {
+            components: {
+              Badge: {
+                statusSize: 10
+              }
+            }
+          },
+          children: /*#__PURE__*/jsx(Badge, {
+            color: status.color,
+            text: status.text
+          })
+        });
+      case 'number':
+        return /*#__PURE__*/jsx(InputNumber, {
+          disabled: item.readOnly,
+          controls: false,
+          keyboard: false,
+          min: item.min ?? Number.MIN_SAFE_INTEGER,
+          max: item.max ?? Number.MAX_SAFE_INTEGER
+        });
+      default:
+        return /*#__PURE__*/jsx(Input, {
+          disabled: item.readOnly
+        });
+    }
+  };
+  if (!open || !ptpStatus) return null;
+
+  // 合并默认模态框属性和传入的属性
+  const mergedModalProps = {
+    title: "PTP",
+    width: 650,
+    open,
+    okText: "Apply",
+    cancelText: "Close",
+    onCancel: onClose,
+    onOk: handleSubmit,
+    ...modalProps
+  };
+
+  // 合并默认表单属性和传入的属性
+  const mergedFormProps = {
+    form: form,
+    name: "ptpForm",
+    labelCol: {
+      span: 8
+    },
+    wrapperCol: {
+      span: 16
+    },
+    autoComplete: "off",
+    onValuesChange: handleValueChange,
+    ...formProps
+  };
+  return /*#__PURE__*/jsx(Modal, {
+    ...mergedModalProps,
+    children: /*#__PURE__*/jsx(Form, {
+      ...mergedFormProps,
+      children: ptpStatusArray.map(item => /*#__PURE__*/jsx(Form.Item, {
+        label: item.label,
+        name: item.key,
+        initialValue: item.value,
+        children: renderFormItem(item)
+      }, item.key))
+    })
+  });
+};
+var PtpModal$1 = /*#__PURE__*/memo(PtpModal);
+
+const NetworkFieldGroup = _ref => {
+  let {
+    prefix,
+    interfaces,
+    fieldConfig = {}
+  } = _ref;
+  const defaultFieldConfig = {
+    name: {
+      label: "Name",
+      enabled: true
+    },
+    ip: {
+      label: "IP Address",
+      enabled: true
+    },
+    netmask: {
+      label: "Netmask",
+      enabled: prefix === "LAN"
+    }
+  };
+  const mergedFieldConfig = {
+    ...defaultFieldConfig,
+    ...fieldConfig
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Typography.Title, {
+      level: 5,
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 16
+      },
+      children: prefix
+    }), interfaces.map((iface, index) => /*#__PURE__*/jsxs("div", {
+      children: [mergedFieldConfig.name.enabled && /*#__PURE__*/jsx(Form.Item, {
+        label: mergedFieldConfig.name.label,
+        name: [prefix, index, "display_name"],
+        children: /*#__PURE__*/jsx(Input, {
+          disabled: true
+        })
+      }), mergedFieldConfig.ip.enabled && /*#__PURE__*/jsx(Form.Item, {
+        label: mergedFieldConfig.ip.label,
+        name: [prefix, index, "ip_address"],
+        children: /*#__PURE__*/jsx(Input, {})
+      }), mergedFieldConfig.netmask.enabled && /*#__PURE__*/jsx(Form.Item, {
+        label: mergedFieldConfig.netmask.label,
+        name: [prefix, index, "netmask"],
+        children: /*#__PURE__*/jsx(Input, {})
+      }), index < interfaces.length - 1 && /*#__PURE__*/jsx(Divider, {
+        style: {
+          marginBlock: 16
+        }
+      })]
+    }, iface.id || index))]
+  });
+};
+const NetworkSettingsModal = _ref2 => {
+  let {
+    open,
+    onClose,
+    getLanConfig,
+    getSysConfig,
+    updateLanConfig,
+    updateSysConfig,
+    restart,
+    modalProps = {},
+    formProps = {},
+    fieldConfig = {},
+    sections = ['LAN', 'QSFP']
+  } = _ref2;
+  const {
+    message,
+    modal
+  } = App.useApp();
+  const [form] = Form.useForm();
+  const [st2110Interfaces, setSt2110Interfaces] = useState([]);
+  const [lanConfigs, setLanConfigs] = useState([]);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  useEffect(() => {
+    const fetchInitialData = async () => {
+      try {
+        const promises = [];
+        if (sections.includes('LAN')) {
+          promises.push(getLanConfig());
+        }
+        if (sections.includes('QSFP')) {
+          promises.push(getSysConfig());
+        }
+        const results = await Promise.allSettled(promises);
+        if (sections.includes('LAN')) {
+          const lanResult = results[sections.indexOf('LAN')];
+          if (lanResult.status === 'fulfilled') {
+            setLanConfigs(lanResult.value);
+          }
+        }
+        if (sections.includes('QSFP')) {
+          const sysResult = results[sections.indexOf('QSFP')];
+          if (sysResult.status === 'fulfilled' && sysResult.value) {
+            setSt2110Interfaces(sysResult.value.st2110_interfaces || []);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to fetch data:', error);
+      }
+    };
+    if (open) {
+      fetchInitialData();
+    }
+  }, [open, getLanConfig, getSysConfig, sections]);
+
+  // 动态初始值配置
+  const initialValues = useMemo(() => {
+    const values = {};
+    if (sections.includes('LAN')) {
+      values.LAN = lanConfigs.map(config => ({
+        connection_id: config.connection_id,
+        display_name: config.display_name,
+        ip_address: config.ip_address,
+        netmask: config.netmask
+      })) ?? [];
+    }
+    if (sections.includes('QSFP')) {
+      values.QSFP = st2110Interfaces?.map(iface => ({
+        id: iface.id,
+        display_name: iface.display_name,
+        ip_address: iface.ip_address
+      })) ?? [];
+    }
+    return values;
+  }, [lanConfigs, st2110Interfaces, sections]);
+  const handleSuccess = async function () {
+    let isPopup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let messageText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Success';
+    message.success(messageText);
+    if (isPopup) {
+      try {
+        const updatedConfig = await getSysConfig();
+        if (updatedConfig && updatedConfig.is_restart_required) {
+          modal.confirm({
+            icon: /*#__PURE__*/jsx(ExclamationCircleFilled, {}),
+            title: "Configuration modified. Restart to apply changes?",
+            cancelText: "No",
+            okText: "Yes",
+            onOk: () => restart()
+          });
+        }
+      } catch (error) {
+        console.error('Failed to check restart status:', error);
+      }
+    }
+    onClose();
+  };
+  const handleSubmit = async () => {
+    setSubmitLoading(true);
+    try {
+      const values = await form.validateFields();
+      const updatePromises = [];
+
+      // 更新LAN配置
+      if (sections.includes('LAN') && values.LAN) {
+        const lanData = values.LAN.map((item, index) => ({
+          connection_id: lanConfigs[index]?.connection_id,
+          ip_address: item.ip_address,
+          netmask: item.netmask
+        }));
+        updatePromises.push(updateLanConfig(lanData));
+      }
+
+      // 更新QSFP配置
+      if (sections.includes('QSFP') && values.QSFP) {
+        const st2110Data = {
+          st2110_interfaces: values.QSFP.map((item, index) => ({
+            id: st2110Interfaces?.[index]?.id,
+            ip_address: item.ip_address,
+            enable_rx_video_demand_start: st2110Interfaces?.[index]?.enable_rx_video_demand_start
+          }))
+        };
+        updatePromises.push(updateSysConfig(st2110Data));
+      }
+      const results = await Promise.allSettled(updatePromises);
+
+      // 检查所有更新是否成功
+      const allSucceeded = results.every(result => result.status === 'fulfilled');
+      if (allSucceeded) {
+        handleSuccess();
+      } else {
+        message.error('Some configurations failed to update');
+      }
+    } catch (error) {
+      console.error('Failed to update configurations: ', error);
+      message.error('Failed to update configurations');
+    } finally {
+      setSubmitLoading(false);
+    }
+  };
+
+  // 合并默认模态框属性和传入的属性
+  const mergedModalProps = {
+    title: "Network Settings",
+    width: 650,
+    open,
+    confirmLoading: submitLoading,
+    onOk: handleSubmit,
+    onCancel: onClose,
+    okText: "Apply",
+    cancelText: "Close",
+    centered: true,
+    styles: {
+      body: {
+        padding: "16px 24px 8px 24px"
+      }
+    },
+    ...modalProps
+  };
+
+  // 合并默认表单属性和传入的属性
+  const mergedFormProps = {
+    form: form,
+    initialValues: initialValues,
+    labelCol: {
+      span: 6
+    },
+    wrapperCol: {
+      span: 18
+    },
+    autoComplete: "off",
+    ...formProps
+  };
+  return /*#__PURE__*/jsx(Modal, {
+    ...mergedModalProps,
+    children: /*#__PURE__*/jsxs(Form, {
+      ...mergedFormProps,
+      children: [sections.includes('LAN') && initialValues.LAN && initialValues.LAN.length > 0 && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(NetworkFieldGroup, {
+          prefix: "LAN",
+          interfaces: initialValues.LAN,
+          fieldConfig: fieldConfig.LAN
+        }), sections.includes('QSFP') && /*#__PURE__*/jsx(Divider, {})]
+      }), sections.includes('QSFP') && initialValues.QSFP && initialValues.QSFP.length > 0 && /*#__PURE__*/jsx(NetworkFieldGroup, {
+        prefix: "QSFP",
+        interfaces: initialValues.QSFP,
+        fieldConfig: fieldConfig.QSFP
+      })]
+    })
+  });
+};
+var NetworkSettingsModal$1 = /*#__PURE__*/memo(NetworkSettingsModal);
+
+export { AuthorizationModal, NetworkSettingsModal$1 as NetworkSettingsModal, PtpModal$1 as PtpModal, SystemOperations, UpgradeManager, useAuth, useHardwareUsage, useHardwareWebSocket, useSystemOperations, useUpgrade };
 //# sourceMappingURL=index.esm.js.map