[INLONG-9938][Dashboard] Support Agent module and package page

inlong-dashboard/src/configs/menus/conf.tsx

@@ -101,6 +101,14 @@ const conf: MenuItemType[] = [
         path: '/system',
         name: i18n.t('configs.menus.ModuleAudit'),
       },
+      {
+        path: '/agentModule',
+        name: i18n.t('configs.menus.agentModule'),
+      },
+      {
+        path: '/agentPackage',
+        name: i18n.t('configs.menus.agentPackage'),
+      },
     ],
   },
 ];

inlong-dashboard/src/configs/routes/conf.ts

@@ -124,6 +124,14 @@ const conf: RouteProps[] = [
       },
     ],
   },
+  {
+    path: '/agentModule',
+    component: () => import('@/ui/pages/AgentModule'),
+  },
+  {
+    path: '/agentPackage',
+    component: () => import('@/ui/pages/AgentPackage'),
+  },
   {
     component: () => import('@/ui/pages/Error/404'),
   },

inlong-dashboard/src/i18n.ts

@@ -38,6 +38,8 @@ const resources = {
       'configs.menus.TenantManagement': 'Tenant Management',
       'configs.menus.SystemOperation': 'Operation',
       'configs.menus.ModuleAudit': 'Module audit',
+      'configs.menus.agentModule': 'Version Management',
+      'configs.menus.agentPackage': 'Package',
     },
   },
   cn: {
@@ -55,6 +57,8 @@ const resources = {
       'configs.menus.TenantManagement': '租户管理',
       'configs.menus.SystemOperation': '系统运维',
       'configs.menus.ModuleAudit': '模块审计',
+      'configs.menus.agentModule': '版本管理',
+      'configs.menus.agentPackage': '安装包',
     },
   },
 };

inlong-dashboard/src/ui/locales/cn.json

@@ -14,6 +14,7 @@
   "basic.Creator": "创建人",
   "basic.Modifier": "修改人",
   "basic.CreateTime": "创建时间",
+  "basic.ModifyTime": "修改时间",
   "basic.Yes": "是",
   "basic.No": "否",
   "basic.Stop": "停止",
@@ -865,5 +866,24 @@
   "pages.ModuleAudit.config.BenchmarkIndicator": "基准指标",
   "pages.ModuleAudit.config.ComparativeIndicators": "对比指标",
   "pages.ModuleAudit.config.InlongGroupId": "数据流组ID",
-  "pages.ModuleAudit.config.InlongStreamId": "数据流ID"
+  "pages.ModuleAudit.config.InlongStreamId": "数据流ID",
+  "pages.ModuleAgent.Agent": "Agent",
+  "pages.ModuleAgent.Installer": "Installer",
+  "pages.ModuleAgent.Create": "新建 Module",
+  "pages.ModuleAgent.Config.Name": "名称",
+  "pages.ModuleAgent.Config.Version": "版本",
+  "pages.ModuleAgent.Config.Package": "安装包",
+  "pages.ModuleAgent.Config.CheckCommand": "检查命令",
+  "pages.ModuleAgent.Config.InstallCommand": "安装命令",
+  "pages.ModuleAgent.Config.StartCommand": "启动命令",
+  "pages.ModuleAgent.Config.StopCommand": "停止命令",
+  "pages.ModuleAgent.Config.UninstallCommand": "卸载命令",
+  "pages.ModuleAgent.Config.Creator": "创建人",
+  "pages.ModuleAgent.Config.Modifier": "修改人",
+  "pages.ModuleAgent.Config.ModifyTime": "修改时间",
+  "pages.PackageAgent.Create": "新建 Package",
+  "pages.PackageAgent.Config.FileName": "文件名称",
+  "pages.PackageAgent.Config.DownloadUrl": "下载地址",
+  "pages.PackageAgent.Config.StoragePath": "存储路径",
+  "pages.PackageAgent.Config.Md5": "MD5"
 }

inlong-dashboard/src/ui/locales/en.json

@@ -14,6 +14,7 @@
   "basic.Creator": "Creator",
   "basic.Modifier": "Modifier",
   "basic.CreateTime": "Create time",
+  "basic.ModifyTime": "Modify time",
   "basic.Yes": "Yes",
   "basic.No": "No",
   "basic.Stop": "Stop",
@@ -865,5 +866,24 @@
   "pages.ModuleAudit.config.BenchmarkIndicator": "Benchmark indicator",
   "pages.ModuleAudit.config.ComparativeIndicators": "Comparative indicator",
   "pages.ModuleAudit.config.InlongGroupId": "Inlong group id",
-  "pages.ModuleAudit.config.InlongStreamId": "Inlong stream id"
+  "pages.ModuleAudit.config.InlongStreamId": "Inlong stream id",
+  "pages.ModuleAgent.Agent": "Agent",
+  "pages.ModuleAgent.Installer": "Installer",
+  "pages.ModuleAgent.Create": "Create Module",
+  "pages.ModuleAgent.Config.Name": "Name",
+  "pages.ModuleAgent.Config.Version": "Version",
+  "pages.ModuleAgent.Config.Package": "Package",
+  "pages.ModuleAgent.Config.CheckCommand": "Check Command",
+  "pages.ModuleAgent.Config.InstallCommand": "Install Command",
+  "pages.ModuleAgent.Config.StartCommand": "Start Command",
+  "pages.ModuleAgent.Config.StopCommand": "Stop Command",
+  "pages.ModuleAgent.Config.UninstallCommand": "Uninstall Command",
+  "pages.ModuleAgent.Config.Creator": "Creator",
+  "pages.ModuleAgent.Config.Modifier": "Modifier",
+  "pages.ModuleAgent.Config.ModifyTime": "ModifyTime",
+  "pages.PackageAgent.Create": "Create Package",
+  "pages.PackageAgent.Config.FileName": "File Name",
+  "pages.PackageAgent.Config.DownloadUrl": "Download Url",
+  "pages.PackageAgent.Config.Md5": "MD5",
+  "pages.PackageAgent.Config.StoragePath": "Storage Path"
 }

inlong-dashboard/src/ui/pages/AgentModule/AgentModuleTag.tsx

@@ -0,0 +1,143 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Button, message, Modal } from 'antd';
+import HighTable from '@/ui/components/HighTable';
+import { useRequest } from '@/ui/hooks';
+import { defaultSize } from '@/configs/pagination';
+import { useColumns, getFormContent } from './config';
+import { useLocation } from 'react-router-dom';
+import i18n from '@/i18n';
+import CreateModal from './CreateModal';
+import request from '@/core/utils/request';
+
+interface AgentModalProps {
+  AgentModalType: String;
+}
+
+const Comp: React.FC<AgentModalProps> = ({ AgentModalType }) => {
+  const location = useLocation();
+  const type = location.state || AgentModalType;
+
+  const [query, setQuery] = useState({
+    type: type,
+    keyword: '',
+    pageNum: 1,
+    pageSize: defaultSize,
+  });
+
+  useEffect(() => {
+    setQuery(prev => ({
+      ...prev,
+      type: type,
+    }));
+  }, [type]);
+
+  const [createModal, setCreateModal] = useState<Record<string, unknown>>({
+    open: false,
+  });
+
+  const { data: sourceData = [], run: getList } = useRequest(
+    {
+      url: '/module/list',
+      method: 'POST',
+      data: query,
+    },
+    {
+      refreshDeps: [query],
+    },
+  );
+
+  const pagination = {
+    pageSize: query.pageSize,
+    current: query.pageNum,
+    total: sourceData?.total,
+  };
+
+  const onChange = ({ current: pageNum, pageSize }) => {
+    setQuery(prev => ({
+      ...prev,
+      pageNum,
+      pageSize,
+    }));
+  };
+
+  const onFilter = keyword => {
+    setQuery({
+      ...query,
+      ...keyword,
+    });
+  };
+
+  const openModal = ({ id, type }) => {
+    setCreateModal({ open: true, id, type });
+  };
+
+  const onDelete = async ({ id }) => {
+    Modal.confirm({
+      title: i18n.t('basic.DeleteConfirm'),
+      onOk: async () => {
+        await request({
+          url: `/module/delete/${id}`,
+          method: 'DELETE',
+        });
+        await getList();
+        message.success(i18n.t('basic.DeleteSuccess'));
+      },
+    });
+  };
+
+  const columns = useColumns({ onDelete, openModal });
+
+  return (
+    <>
+      <HighTable
+        filterForm={{
+          content: getFormContent(query),
+          onFilter,
+        }}
+        suffix={
+          <Button type="primary" onClick={() => setCreateModal({ open: true, type })}>
+            {i18n.t('pages.ModuleAgent.Create')}
+          </Button>
+        }
+        table={{
+          columns: columns,
+          dataSource: sourceData?.list,
+          rowKey: 'id',
+          pagination,
+          onChange,
+        }}
+      />
+
+      <CreateModal
+        {...createModal}
+        open={createModal.open as boolean}
+        onOk={async () => {
+          await getList();
+          setCreateModal({ open: false });
+        }}
+        onCancel={() => setCreateModal({ open: false, type })}
+      />
+    </>
+  );
+};
+
+export default Comp;