Config Server 前端页面设计

[liangry]

和阿里云同学交流得知 Config Server 尚未有前端页面，于是大概设想了一下。从文档得知，API 接口 /User 下的都是管控平台通信的，全部功能可以分为两组，关于 Agent Group 的，以及关于 Config 的。目前功能不多，可以设计为一个页面，分为两个标签页，分别展示 Agent Group 和 Config。用户可通过右上角的创建按钮展示 Agent Group 或者 Config 的空白表单，从而创建对应数据

Agent Group 标签页

Agent Group 标签页（ListAgentGroups）展示 Agent Group 列表，以及如下作用于 Agent Group 上的操作：

• 列出采集实例（ListAgents）
• 展示应用配置（GetAppliedConfigsForAgentGroup）
• 查看采集组（GetAgentGroup）
• 删除采集组（DeleteAgentGroup）

列出采集实例（ListAgents）

• 通过弹出对话框展示 Agent 列表

展示应用配置（GetAppliedConfigsForAgentGroup）

• 通过弹出对话框展示 Applied Config
• 由于结果可能为多个，通过标签页方式展示单个 Config，标签名字即 Config 名字
  • 每个标签页右边都有关闭图标，点击该图标暂存待删除 Applied Config 数据
  • 在该对话框点击 OK 按钮时，如果有新的待删除数据，调用删除应用配置接口（RemoveConfigFromAgentGroup）
• 所有标签页右边有添加图标，点击该图标弹出新对话框，在其列表中可选择新的 Config
  • 在该对话框点击 OK 按钮时，如果有新的待添加数据，调用添加应用配置接口（ApplyConfigToAgentGroup）

查看采集组（GetAgentGroup）

• 通过弹出对话框展示 Agent Group
• 在该对话框点击 OK 按钮时，保存 Agent Group（CreateAgentGroup / UpdateAgentGroup）

删除采集组（DeleteAgentGroup）

• 点击该链接，弹出确认框
• 用户确认后，调用接口删除该 Agent Group，并刷新 Agent Group 列表（ListAgentGroups）

Config 标签页

Config 标签页（ListConfigs）展示 Config 列表，以及如下作用于 Config 上的操作：

• 展示应用 Agent Group（GetAppliedAgentGroups）
• 查看配置（GetConfig）
• 删除配置（DeleteConfig）

具体功能设计和 Agent Group 标签页基本差不多，在此不再列举

开发框架

项目计划使用 React UI 框架 + Ant Design 组件库 + Create React App 脚手架工具构建

协议改动

目前的协议有这样一个问题：在浏览器环境下，GET 请求发出的 body 会被吃掉，请求也就只能得到 400 错误。解决方案有几个：

• GET 方法改为 POST 方法
• GET 方法保留，对应接口在路由中增加 POST 方法
• GET 方法改由 URL 参数传参，不再通过 body 传参

请大家就上述设计和协议改动发表意见

[wangpeix]

pipeline配置支持配置多个processor吗

[liangry]

支持的

[messixukejia]

很好的设计👍，可以把采集配置详情页的截图也加上