【GLCC】Higress Console 支持通过表单配置 Wasm 插件

backend/build.sh

@@ -6,6 +6,5 @@ fi
 if [ -n "$DEV" ]; then
     BUILD_ARGS="$BUILD_ARGS -Dapp.build.dev=$DEV"
 fi
-mvn clean package -Dmaven.test.skip=true $BUILD_ARGS
-#./mvnw clean package -Dmaven.test.skip=true $BUILD_ARGS
-#docker build -t higress-console:0.0.1 -f Dockerfile .
+./mvnw clean package -Dmaven.test.skip=true $BUILD_ARGS
+docker build -t higress-console:0.0.1 -f Dockerfile .

frontend/ice.config.mts

@@ -15,8 +15,7 @@ export default defineConfig(() => ({
   },
   proxy: {
     "/api": {
-      //target: "http://demo.higress.io/",
-      target: "http://127.0.0.1:8080/",
+      target: "http://demo.higress.io/",
       changeOrigin: true,
       pathRewrite: { "^/api": "" },
     },

frontend/src/pages/plugin/components/PluginDrawer/ArrayForm/index.tsx

@@ -66,7 +66,7 @@ const EditableCell: React.FC<EditableCellProps> = ({
       const values = await form.validateFields();
       handleSave({ ...record, ...values });
     } catch (errInfo) {
-      console.error('Save failed:', errInfo);
+      console.error('Save failed: ', errInfo);
     }
   };
 
@@ -97,7 +97,6 @@ type EditableTableProps = Parameters<typeof Table>[0];
 
 interface DataType {
   uid: number;
-
 }
 
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
@@ -118,7 +117,7 @@ const ArrayForm: React.FC = ({ array, value, onChange }) => {
   if (array.type === 'object') {
     Object.entries(array.properties).forEach(([key, prop]) => {
       let translatedTitle = prop.title;
-      if (i18next.language === "en-US") {
+      if (i18next.language === "en-US" && prop.hasOwnProperty('x-title-i18n')) {
         translatedTitle = (prop['x-title-i18n'][i18next.language]) ? prop['x-title-i18n'][i18next.language] : key;
       }
       const isRequired = (array.required || []).includes(key);
@@ -138,7 +137,6 @@ const ArrayForm: React.FC = ({ array, value, onChange }) => {
   }
 
   defaultColumns.push({
-    title: t('route.factorGroup.columns.operation'),
     dataIndex: 'operation',
     width: 60,
     render: (_, record: { uid: number }) =>
@@ -193,7 +191,7 @@ const ArrayForm: React.FC = ({ array, value, onChange }) => {
         editable: col.editable,
         dataIndex: col.dataIndex,
         title: col.title,
-        required: col.required,  // 添加 required 属性
+        required: col.required,
         nodeType: col.dataIndex === 'matchType' ? 'select' : 'input',
         handleSave,
       }),
@@ -213,7 +211,6 @@ const ArrayForm: React.FC = ({ array, value, onChange }) => {
       />
       <Button onClick={handleAdd} type="link">
         <PlusOutlined />
-        {t('route.factorGroup.parameter')}
       </Button>
     </div>
   );

frontend/src/pages/plugin/components/PluginDrawer/GlobalPluginDetail.tsx

@@ -82,18 +82,15 @@ const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
     manual: true,
     onSuccess: (res: IPluginData) => {
       setPluginData(res);
-      console.log('config:', res);
       setRawConfigurations(res.rawConfigurations);
       setDefaultValue(res.rawConfigurations);
-      console.log('default_raw:', res.rawConfigurations);
       getConfig(pluginName);
     },
   });
   const { loading: getConfigLoading, run: getConfig } = useRequest(servicesApi.getWasmPluginsConfig, {
     manual: true,
     onSuccess: (res) => {
       setConfigData(res);
-      console.log('res:', res);
       if (!defaultValue) {
         let exampleRaw = res?.schema?.extensions['x-example-raw'];
         if (isChangeExampleRaw) {
@@ -102,7 +99,6 @@ const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
         }
         setRawConfigurations(exampleRaw);
         setDefaultValue(exampleRaw);
-        console.log('default_exam:', exampleRaw);
       }
       form.setFieldsValue({
         enabled: pluginData?.enabled,

frontend/src/pages/plugin/components/PluginDrawer/GlobalPluginDetail_form.tsx → frontend/src/pages/plugin/components/PluginDrawer/GlobalPluginDetailForm.tsx

@@ -9,7 +9,7 @@ import yaml from 'js-yaml'
 
 const { Text } = Typography;
 
-export interface IPluginData {
+export interface PluginData {
   configurations: object;
   enabled: boolean;
   pluginName: string;
@@ -20,16 +20,16 @@ export interface IPluginData {
   version: string;
 }
 
-export interface IPropsData {
+export interface PropsData {
   name?: string;
   category: string;
 }
-export interface IProps {
-  data: IPropsData;
+export interface Props {
+  data: PropsData;
   onSuccess: () => void;
 }
 
-const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
+const GlobalPluginDetailForm = forwardRef((props: Props, ref) => {
   const { data, onSuccess } = props;
   const { name: pluginName = '', category = '' } = data || {};
 
@@ -72,15 +72,15 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
 
   const [form] = Form.useForm();
 
-  const [pluginData, setPluginData] = useState<IPluginData>();
+  const [pluginData, setPluginData] = useState<PluginData>();
   const [schema, setSchema] = useState('');
 
   const [rawConfigurations, setRawConfigurations] = useState('');
   const [defaultValue, setDefaultValue] = useState('');
 
   const { loading: getDataLoading, run: getData } = useRequest(pluginInstancesApi.get, {
     manual: true,
-    onSuccess: (res: IPluginData) => {
+    onSuccess: (res: PluginData) => {
       setPluginData(res);
       setRawConfigurations(res.rawConfigurations);
       setDefaultValue(res.rawConfigurations);
@@ -104,7 +104,6 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
       form.setFieldsValue({
         enabled: pluginData?.enabled,
       });
-
     },
   });
 
@@ -196,31 +195,19 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
   function formValuesToSchema(formValues) {
     const result = {};
     function processFormValues(formValues) {
-      // 创建一个新对象，以避免修改原始对象
       const newFormValues = JSON.parse(JSON.stringify(formValues));
-      // 遍历所有表单字段
       for (const key in newFormValues) {
         if (newFormValues.hasOwnProperty(key)) {
           const value = newFormValues[key];
-          // 检查字段是否为数组
           if (Array.isArray(value)) {
-            // 如果数组中的元素是字典
             if (value.every(item => typeof item === 'object' && !Array.isArray(item))) {
-              // 遍历数组中的每个对象
               const filteredItems = value.filter(item => {
-                // 删除 uid 属性
                 delete item.uid;
-
-                // 如果对象有 Item 属性，并且 Item 值为 null，则删除 Item
                 if ('Item' in item && item.Item === null) {
                   delete item.Item;
                 }
-
-                // 如果删除 Item 后，对象只剩下 uid，则返回 false 表示要删除该项
                 return Object.keys(item).length > 0;
               });
-
-              // 替换原数组
               newFormValues[key] = filteredItems;
             }
           }
@@ -238,12 +225,10 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
       for (let i = 0; i < parts.length - 1; i++) {
         const part = parts[i];
         if (!current[part]) {
-          // 如果当前层级不存在，则创建空对象
           current[part] = {};
         }
         current = current[part];
       }
-      // 设置最后一级的值
       current[parts[parts.length - 1]] = value;
     }
 
@@ -258,11 +243,8 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
 
   function schemaToYaml(obj, indent = ''): string {
     let result = '';
-
     Object.entries(obj).forEach(([key, value]) => {
-      // 忽略名为 'enabled' 的字段
       if (key === 'enabled') return;
-
       if (value === null) {
         result += `${indent}${key}: null\n`;
       } else if (Array.isArray(value)) {
@@ -287,7 +269,7 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
   function schemaToFormValues(yamlString) {
     try {
       const parsedObj = yaml.load(yamlString);
-      let uidCounter = 1; // 初始化 uid 计数器
+      let uidCounter = 1;
       function flattenObject(obj, parentKey = '') {
         let flatResult = {};
         let currentUid = uidCounter;
@@ -313,7 +295,6 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
           } else if (typeof obj[key] === 'object' && obj[key] !== null) {
             Object.assign(flatResult, flattenObject(obj[key], newKey));
           } else if (typeof obj[key] === 'boolean') {
-            // 特殊处理布尔类型
             flatResult[newKey] = obj[key];
           } else {
             flatResult[newKey] = obj[key];
@@ -411,4 +392,4 @@ const GlobalPluginDetail_form = forwardRef((props: IProps, ref) => {
   );
 });
 
-export default GlobalPluginDetail_form;
+export default GlobalPluginDetailForm;

frontend/src/pages/plugin/components/PluginDrawer/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react
 import { useTranslation } from 'react-i18next';
 
 import GlobalPluginDetail from './GlobalPluginDetail';
-import GlobalPluginDetail_form from './GlobalPluginDetail_form'; // 假设这是你要引入的新组件
+import GlobalPluginDetail_form from './GlobalPluginDetailForm';
 import RoutePluginDetail from './RoutePluginDetail';
 
 import { getI18nValue } from '../../utils';
@@ -24,12 +24,12 @@ export default function PluginDrawer(props) {
   const { pluginDrawerRef, routerDetail, onSuccess } = props;
   const routePluginDetailRef = useRef(null);
   const globalPluginDetailRef = useRef(null);
-  const globalPluginDetailFormRef = useRef(null); // 新增的引用
+  const globalPluginDetailFormRef = useRef(null);
 
   const [activePluginData, setActivePluginData] = useState({ title: '', key: '' });
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [isFormView, setIsFormView] = useState(false); // 新增的状态变量
+  const [isFormView, setIsFormView] = useState(false);
 
   const onCloseDrawer = () => {
     setOpen(false);
@@ -93,7 +93,7 @@ export default function PluginDrawer(props) {
             onClick={() => setIsFormView(!isFormView)}
             style={{ marginBottom: '16px' }}
           >
-            {isFormView ? t('switchToYAML') : t('switchToForm')}
+            {isFormView ? 'switchToYAML' : 'switchToForm'}
           </Button>
           {isFormView ? (
             <GlobalPluginDetail_form