diff --git a/inlong-dashboard/src/configs/menus/conf.tsx b/inlong-dashboard/src/configs/menus/conf.tsx index 29cde12f708..dc660dc62f3 100644 --- a/inlong-dashboard/src/configs/menus/conf.tsx +++ b/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'), + }, ], }, ]; diff --git a/inlong-dashboard/src/configs/routes/conf.ts b/inlong-dashboard/src/configs/routes/conf.ts index a5329e83193..007538d997c 100644 --- a/inlong-dashboard/src/configs/routes/conf.ts +++ b/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'), }, diff --git a/inlong-dashboard/src/i18n.ts b/inlong-dashboard/src/i18n.ts index 6a0d7f6de43..0146bf9320a 100644 --- a/inlong-dashboard/src/i18n.ts +++ b/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': '安装包', }, }, }; diff --git a/inlong-dashboard/src/ui/locales/cn.json b/inlong-dashboard/src/ui/locales/cn.json index f126a8cedf1..69eebbcb5a8 100644 --- a/inlong-dashboard/src/ui/locales/cn.json +++ b/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" } diff --git a/inlong-dashboard/src/ui/locales/en.json b/inlong-dashboard/src/ui/locales/en.json index f206b4f47b9..06a27fb7e83 100644 --- a/inlong-dashboard/src/ui/locales/en.json +++ b/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" } diff --git a/inlong-dashboard/src/ui/pages/AgentModule/AgentModuleTag.tsx b/inlong-dashboard/src/ui/pages/AgentModule/AgentModuleTag.tsx new file mode 100644 index 00000000000..9dd7789a91f --- /dev/null +++ b/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 = ({ 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>({ + 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 ( + <> + setCreateModal({ open: true, type })}> + {i18n.t('pages.ModuleAgent.Create')} + + } + table={{ + columns: columns, + dataSource: sourceData?.list, + rowKey: 'id', + pagination, + onChange, + }} + /> + + { + await getList(); + setCreateModal({ open: false }); + }} + onCancel={() => setCreateModal({ open: false, type })} + /> + + ); +}; + +export default Comp; diff --git a/inlong-dashboard/src/ui/pages/AgentModule/CreateModal.tsx b/inlong-dashboard/src/ui/pages/AgentModule/CreateModal.tsx new file mode 100644 index 00000000000..b9532c1b297 --- /dev/null +++ b/inlong-dashboard/src/ui/pages/AgentModule/CreateModal.tsx @@ -0,0 +1,189 @@ +/* + * 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, { useMemo } from 'react'; +import { Button, message, Modal } from 'antd'; +import i18n from '@/i18n'; +import FormGenerator, { useForm } from '@/ui/components/FormGenerator'; +import { useRequest, useUpdateEffect } from '@/ui/hooks'; +import request from '@/core/utils/request'; +import { ModalProps } from 'antd/es/modal'; + +export interface Props extends ModalProps { + id?: string; + type?: string; +} + +const Comp: React.FC = ({ id, type, ...modalProps }) => { + const [form] = useForm(); + + const content = useMemo(() => { + return [ + { + type: 'input', + label: i18n.t('pages.ModuleAgent.Config.Name'), + name: 'name', + rules: [{ required: true }], + }, + { + type: 'input', + label: i18n.t('pages.ModuleAgent.Config.Version'), + name: 'version', + rules: [{ required: true }], + }, + { + type: 'select', + label: i18n.t('pages.ModuleAgent.Config.Package'), + name: 'packageId', + rules: [{ required: true }], + props: { + showSearch: true, + allowClear: true, + filterOption: false, + options: { + requestAuto: true, + requestTrigger: ['onOpen', 'onSearch'], + requestService: keyword => ({ + url: '/package/list', + method: 'POST', + data: { + keyword, + pageNum: 1, + pageSize: 9999, + type: type, + }, + }), + requestParams: { + formatResult: result => + result?.list?.map(item => ({ + ...item, + label: item.fileName, + value: item.id, + })), + }, + }, + }, + }, + { + type: 'textarea', + label: i18n.t('pages.ModuleAgent.Config.CheckCommand'), + name: 'checkCommand', + props: { + showCount: true, + maxLength: 1000, + }, + }, + { + type: 'textarea', + label: i18n.t('pages.ModuleAgent.Config.InstallCommand'), + name: 'installCommand', + props: { + showCount: true, + maxLength: 1000, + }, + }, + { + type: 'textarea', + label: i18n.t('pages.ModuleAgent.Config.StartCommand'), + name: 'startCommand', + props: { + showCount: true, + maxLength: 1000, + }, + }, + { + type: 'textarea', + label: i18n.t('pages.ModuleAgent.Config.StopCommand'), + name: 'stopCommand', + props: { + showCount: true, + maxLength: 1000, + }, + }, + { + type: 'textarea', + label: i18n.t('pages.ModuleAgent.Config.UninstallCommand'), + name: 'uninstallCommand', + props: { + showCount: true, + maxLength: 1000, + }, + }, + ]; + }, [type]); + + const { data, run: getData } = useRequest( + id => ({ + url: `/module/get/${id}`, + }), + { + manual: true, + onSuccess: result => { + form.setFieldsValue(result); + }, + }, + ); + + const onOk = async () => { + const values = await form.validateFields(); + const isUpdate = Boolean(id); + if (isUpdate) { + values.id = id; + } else { + values.type = type; + } + await request({ + url: isUpdate ? '/module/update' : '/module/save', + method: 'POST', + data: { ...values }, + }); + await modalProps?.onOk(values); + message.success(i18n.t('basic.OperatingSuccess')); + }; + + useUpdateEffect(() => { + if (modalProps.open) { + if (id) { + getData(id); + } + } else { + form.resetFields(); + } + }, [modalProps.open]); + + return ( + modalProps.onCancel(e)}> + {i18n.t('basic.Cancel')} + , + , + ]} + > + + + ); +}; + +export default Comp; diff --git a/inlong-dashboard/src/ui/pages/AgentModule/config.tsx b/inlong-dashboard/src/ui/pages/AgentModule/config.tsx new file mode 100644 index 00000000000..8f6d90a15eb --- /dev/null +++ b/inlong-dashboard/src/ui/pages/AgentModule/config.tsx @@ -0,0 +1,76 @@ +/* + * 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 i18n from '@/i18n'; +import { Button } from 'antd'; +import React from 'react'; +import { timestampFormat } from '@/core/utils'; + +export const useColumns = ({ onDelete, openModal }) => { + const defaultColumns = [ + { + title: i18n.t('pages.ModuleAgent.Config.Name'), + dataIndex: 'name', + }, + { + title: i18n.t('pages.ModuleAgent.Config.Version'), + dataIndex: 'version', + }, + { + title: i18n.t('basic.Creator'), + dataIndex: 'creator', + }, + { + title: i18n.t('basic.Modifier'), + dataIndex: 'modifier', + }, + { + title: i18n.t('basic.ModifyTime'), + dataIndex: 'modifyTime', + render: text => text && timestampFormat(text), + }, + ]; + return defaultColumns.concat([ + { + title: i18n.t('basic.Operating'), + dataIndex: 'action', + render: (text, record) => ( + <> + + + + ), + } as any, + ]); +}; + +export const getFormContent = initialValues => [ + { + type: 'inputsearch', + name: 'keyword', + initialValue: initialValues.keyword, + props: { + allowClear: true, + }, + }, +]; diff --git a/inlong-dashboard/src/ui/pages/AgentModule/index.tsx b/inlong-dashboard/src/ui/pages/AgentModule/index.tsx new file mode 100644 index 00000000000..65356c3a4f0 --- /dev/null +++ b/inlong-dashboard/src/ui/pages/AgentModule/index.tsx @@ -0,0 +1,82 @@ +/* + * 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, { useState } from 'react'; +import i18n from '@/i18n'; +import AgentModalTag from './AgentModuleTag'; +import { Container, PageContainer } from '@/ui/components/PageContainer'; +import { Card } from 'antd'; +import { useHistory, useParams } from '@/ui/hooks'; + +const Comp: React.FC = () => { + const tabList = [ + { + tab: i18n.t('pages.ModuleAgent.Agent'), + key: 'AGENT', + content: , + }, + { + tab: i18n.t('pages.ModuleAgent.Installer'), + key: 'INSTALLER', + content: , + }, + ]; + + const history = useHistory(); + + const { type } = useParams>(); + + const [module, setModule] = useState(type || tabList[0].key); + + const tabListMap = tabList.reduce( + (acc, item) => ({ + ...acc, + [item.key]: item.content, + }), + {}, + ); + + const onTabsChange = value => { + setModule(value); + history.push({ + pathname: `/agentModule`, + state: { type: value }, + }); + }; + + return ( + + + { + onTabsChange(key); + }} + headStyle={{ border: 'none' }} + tabProps={{ size: 'middle' }} + > + {tabListMap[module]} + + + + ); +}; + +export default Comp; diff --git a/inlong-dashboard/src/ui/pages/AgentPackage/AgentPackageTag.tsx b/inlong-dashboard/src/ui/pages/AgentPackage/AgentPackageTag.tsx new file mode 100644 index 00000000000..4920c3b6127 --- /dev/null +++ b/inlong-dashboard/src/ui/pages/AgentPackage/AgentPackageTag.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 CreateModal from './CreateModal'; +import i18n from '@/i18n'; +import { useLocation } from 'react-router-dom'; +import request from '@/core/utils/request'; + +interface AgentPackageProps { + AgentPackageType: String; +} + +const Comp: React.FC = ({ AgentPackageType }) => { + const location = useLocation(); + const type = location.state || AgentPackageType; + + const [query, setQuery] = useState({ + type: type, + keyword: '', + pageNum: 1, + pageSize: defaultSize, + }); + + useEffect(() => { + setQuery(prev => ({ + ...prev, + type: type, + })); + }, [type]); + + const [createModal, setCreateModal] = useState>({ + open: false, + }); + + const { data: sourceData = [], run: getList } = useRequest( + { + url: '/package/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: `/package/delete/${id}`, + method: 'DELETE', + }); + await getList(); + message.success(i18n.t('basic.DeleteSuccess')); + }, + }); + }; + + const columns = useColumns({ onDelete, openModal }); + + return ( + <> + setCreateModal({ open: true, type })}> + {i18n.t('pages.PackageAgent.Create')} + + } + table={{ + columns: columns, + dataSource: sourceData?.list, + rowKey: 'id', + pagination, + onChange, + }} + /> + + { + await getList(); + setCreateModal({ open: false }); + }} + onCancel={() => setCreateModal({ open: false })} + /> + + ); +}; + +export default Comp; diff --git a/inlong-dashboard/src/ui/pages/AgentPackage/CreateModal.tsx b/inlong-dashboard/src/ui/pages/AgentPackage/CreateModal.tsx new file mode 100644 index 00000000000..6308ff0b6b1 --- /dev/null +++ b/inlong-dashboard/src/ui/pages/AgentPackage/CreateModal.tsx @@ -0,0 +1,123 @@ +/* + * 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, { useMemo } from 'react'; +import { Button, message, Modal } from 'antd'; +import i18n from '@/i18n'; +import FormGenerator, { useForm } from '@/ui/components/FormGenerator'; +import { useRequest, useUpdateEffect } from '@/ui/hooks'; +import request from '@/core/utils/request'; +import { ModalProps } from 'antd/es/modal'; + +export interface Props extends ModalProps { + // Require when edit + id?: string; + type?: string; +} + +const Comp: React.FC = ({ id, type, ...modalProps }) => { + const [form] = useForm(); + + const content = useMemo(() => { + return [ + { + type: 'input', + label: i18n.t('pages.PackageAgent.Config.FileName'), + name: 'fileName', + rules: [{ required: true }], + }, + { + type: 'input', + label: i18n.t('pages.PackageAgent.Config.DownloadUrl'), + name: 'downloadUrl', + rules: [{ required: true }], + }, + { + type: 'input', + label: i18n.t('pages.PackageAgent.Config.Md5'), + name: 'md5', + rules: [{ required: true }], + }, + { + type: 'input', + label: i18n.t('pages.PackageAgent.Config.StoragePath'), + name: 'storagePath', + rules: [{ required: true }], + }, + ]; + }, []); + + const { data, run: getData } = useRequest( + id => ({ + url: `/package/get/${id}`, + }), + { + manual: true, + onSuccess: result => { + form.setFieldsValue(result); + }, + }, + ); + + const onOk = async () => { + const values = await form.validateFields(); + const isUpdate = Boolean(id); + if (isUpdate) { + values.id = id; + } else { + values.type = type; + } + await request({ + url: isUpdate ? '/package/update' : '/package/save', + method: 'POST', + data: { ...values }, + }); + await modalProps?.onOk(values); + message.success(i18n.t('basic.OperatingSuccess')); + }; + + useUpdateEffect(() => { + if (modalProps.open) { + if (id) { + getData(id); + } + } else { + form.resetFields(); + } + }, [modalProps.open]); + + return ( + modalProps.onCancel(e)}> + {i18n.t('basic.Cancel')} + , + , + ]} + > + + + ); +}; + +export default Comp; diff --git a/inlong-dashboard/src/ui/pages/AgentPackage/config.tsx b/inlong-dashboard/src/ui/pages/AgentPackage/config.tsx new file mode 100644 index 00000000000..8b680decf12 --- /dev/null +++ b/inlong-dashboard/src/ui/pages/AgentPackage/config.tsx @@ -0,0 +1,80 @@ +/* + * 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 i18n from '@/i18n'; +import { Button } from 'antd'; +import React from 'react'; +import { timestampFormat } from '@/core/utils'; + +export const useColumns = ({ onDelete, openModal }) => { + const defaultColumns = [ + { + title: i18n.t('pages.PackageAgent.Config.FileName'), + dataIndex: 'fileName', + }, + { + title: i18n.t('pages.PackageAgent.Config.StoragePath'), + dataIndex: 'storagePath', + }, + { + title: i18n.t('pages.PackageAgent.Config.DownloadUrl'), + dataIndex: 'downloadUrl', + }, + { + title: i18n.t('basic.Creator'), + dataIndex: 'creator', + }, + { + title: i18n.t('basic.Modifier'), + dataIndex: 'modifier', + }, + { + title: i18n.t('basic.ModifyTime'), + dataIndex: 'modifyTime', + render: text => text && timestampFormat(text), + }, + ]; + return defaultColumns.concat([ + { + title: i18n.t('basic.Operating'), + dataIndex: 'action', + render: (text, record) => ( + <> + + + + ), + } as any, + ]); +}; + +export const getFormContent = initialValues => [ + { + type: 'inputsearch', + name: 'keyword', + initialValue: initialValues.keyword, + props: { + allowClear: true, + }, + }, +]; diff --git a/inlong-dashboard/src/ui/pages/AgentPackage/index.tsx b/inlong-dashboard/src/ui/pages/AgentPackage/index.tsx new file mode 100644 index 00000000000..6def0b008b5 --- /dev/null +++ b/inlong-dashboard/src/ui/pages/AgentPackage/index.tsx @@ -0,0 +1,82 @@ +/* + * 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, { useState } from 'react'; +import { Card } from 'antd'; +import { useHistory, useParams } from '@/ui/hooks'; +import { Container, PageContainer } from '@/ui/components/PageContainer'; +import i18n from '@/i18n'; +import AgentPackageTag from '@/ui/pages/AgentPackage/AgentPackageTag'; + +const Comp: React.FC = () => { + const tabList = [ + { + tab: i18n.t('pages.ModuleAgent.Agent'), + key: 'AGENT', + content: , + }, + { + tab: i18n.t('pages.ModuleAgent.Installer'), + key: 'INSTALLER', + content: , + }, + ]; + + const history = useHistory(); + + const { type } = useParams>(); + + const [module, setModule] = useState(type || tabList[0].key); + + const tabListMap = tabList.reduce( + (acc, item) => ({ + ...acc, + [item.key]: item.content, + }), + {}, + ); + + const onTabsChange = value => { + setModule(value); + history.push({ + pathname: `/agentPackage`, + state: { type: value }, + }); + }; + + return ( + + + { + onTabsChange(key); + }} + headStyle={{ border: 'none' }} + tabProps={{ size: 'middle' }} + > + {tabListMap[module]} + + + + ); +}; + +export default Comp;