Skip to content

GouShengZ/dataFlowWeb

BranchesTags

Repository files navigation

数据流管理平台

一个基于React的数据流管理平台，提供Node和Pipeline的可视化管理功能。

功能特性

🔐 用户认证

  • 登录页面（测试账号：admin/admin）
  • 用户会话管理

📊 Node管理

  • Node列表展示
  • Node创建和编辑
  • 支持多种Node类型（输入、处理、输出）
  • Node搜索和筛选

🔄 Pipeline管理

  • Pipeline列表展示
  • 可视化DAG编辑器
  • Pipeline创建、编辑和查看
  • Pipeline运行控制（启动、停止）
  • 实时运行状态监控

📈 运行历史

  • Pipeline运行历史记录
  • 详细的执行日志
  • 运行统计数据
  • 历史记录筛选和搜索

🛠️ 开发工具

  • 完整的开发环境配置
  • 代码质量检查（ESLint + Prettier）
  • 自动化测试框架
  • Docker容器化支持
  • CI/CD流水线配置
  • VS Code开发配置

📦 项目管理

  • Makefile自动化脚本
  • 环境变量配置
  • Git工作流支持
  • 依赖管理和版本控制
  • 文档和贡献指南

技术栈

  • 前端框架: React 18
  • 路由管理: React Router v6
  • UI组件库: Ant Design v5
  • DAG可视化: ReactFlow v11
  • 状态管理: React Hooks
  • 样式: CSS + Ant Design
  • 构建工具: Create React App

项目结构

src/
├── pages/              # 页面组件
│   ├── Login.js        # 登录页面
│   ├── NodeList.js     # Node列表页面
│   ├── NodeCreate.js   # Node创建/编辑页面
│   ├── PipelineList.js # Pipeline列表页面
│   ├── PipelineCreate.js # Pipeline创建/编辑页面（含DAG编辑器）
│   └── PipelineHistory.js # Pipeline运行历史页面
├── components/         # 通用组件
│   └── ParamMappingConfig.js # 参数映射配置组件
├── utils/              # 工具函数
│   ├── constants.js    # 常量定义
│   ├── helpers.js      # 通用工具函数
│   ├── api.js          # API请求工具
│   └── __tests__/      # 测试文件
├── App.js              # 主应用组件
├── index.js            # 应用入口
└── index.css           # 全局样式

快速开始

环境要求

  • Node.js >= 16.0.0
  • npm >= 8.0.0
  • Git

安装和运行

# 克隆项目
git clone <repository-url>
cd dataflow-platform

# 使用Makefile快速设置（推荐）
make setup

# 或者手动安装
npm install

# 启动开发服务器
make start
# 或者
npm start

# 构建生产版本
make build
# 或者
npm run build

应用将在 http://localhost:3000 启动

可用命令

# 查看所有可用命令
make help

# 开发相关
make start          # 启动开发服务器
make build          # 构建生产版本
make test           # 运行测试
make lint           # 代码检查
make format         # 代码格式化

# Docker相关
make docker:build   # 构建Docker镜像
make docker:run     # 运行Docker容器

# Git相关
make git-init       # 初始化Git仓库
make git-commit     # 提交更改

使用指南

登录

  1. 访问应用首页
  2. 使用测试账号登录：
    • 用户名：admin
    • 密码：admin

Node管理

  1. 查看Node列表：在侧边栏点击"Node列表"
  2. 创建Node：点击"创建Node"按钮，填写Node信息
  3. 编辑Node：在列表中点击"编辑"按钮
  4. 删除Node：在列表中点击"删除"按钮

Pipeline管理

  1. 查看Pipeline列表：在侧边栏点击"Pipeline列表"
  2. 创建Pipeline：
    • 点击"创建Pipeline"按钮
    • 填写Pipeline基本信息
    • 在DAG编辑器中添加和连接节点
    • 保存Pipeline
  3. 编辑Pipeline：在列表中点击"编辑"按钮
  4. 运行Pipeline：在列表中点击"运行"按钮
  5. 停止Pipeline：在列表中点击"停止"按钮

DAG编辑器使用

  1. 添加节点：点击右上角"添加节点"按钮，选择节点类型
  2. 连接节点：拖拽节点的连接点来创建连接
  3. 移动节点：直接拖拽节点来调整位置
  4. 配置节点：点击节点打开配置面板
  5. 删除节点：在配置面板中点击"删除节点"

运行历史

  1. 查看历史：在侧边栏点击"运行历史"
  2. 筛选记录：使用搜索框、状态筛选器和时间范围筛选
  3. 查看详情：点击"详情"按钮查看运行详细信息
  4. 重新运行：点击"重跑"按钮重新执行Pipeline
  5. 下载日志：点击"日志"按钮下载执行日志

主要组件说明

App.js

  • 主应用组件，包含路由配置和布局
  • 管理用户登录状态
  • 提供侧边栏导航

Login.js

  • 用户登录界面
  • 简单的用户名密码验证

NodeList.js & NodeCreate.js

  • Node的列表展示和创建编辑功能
  • 支持搜索、筛选、分页

PipelineList.js

  • Pipeline列表展示
  • 运行状态监控
  • Pipeline操作（运行、停止、编辑、删除）

PipelineCreate.js

  • Pipeline创建和编辑
  • 集成ReactFlow的DAG可视化编辑器
  • 支持节点添加、连接、配置

PipelineHistory.js

  • 运行历史记录展示
  • 统计数据展示
  • 历史记录筛选和操作

开发说明

数据模拟

当前版本使用模拟数据，实际部署时需要：

  1. 替换API调用逻辑
  2. 集成真实的后端服务
  3. 添加错误处理和加载状态

扩展功能

可以考虑添加的功能：

  1. 用户权限管理
  2. Pipeline模板功能
  3. 更丰富的Node类型
  4. 实时监控面板
  5. 数据血缘分析
  6. 调度配置功能

开发指南

代码规范

项目使用ESLint和Prettier来保证代码质量：

# 检查代码规范
make lint
# 或者
npm run lint

# 自动修复代码格式
npm run lint:fix

# 格式化代码
make format
# 或者
npm run format

# 运行完整验证
npm run validate

测试

# 运行测试
make test
# 或者
npm test

# 运行测试并生成覆盖率报告
npm run test:coverage

# CI模式运行测试
npm run test:ci

Docker开发

# 构建Docker镜像
make docker:build

# 运行Docker容器
make docker:run

# 使用docker-compose（开发环境）
npm run docker:dev

# 使用docker-compose（生产环境）
npm run docker:prod

目录说明

  • src/pages/: 页面组件，每个页面对应一个路由
  • src/components/: 可复用的UI组件
  • src/utils/: 工具函数和常量定义
    • constants.js: 应用常量
    • helpers.js: 通用工具函数
    • api.js: API请求封装
    • __tests__/: 测试文件
  • src/App.js: 主应用组件，包含路由配置
  • src/index.js: 应用入口文件
  • public/: 静态资源文件
  • .vscode/: VS Code编辑器配置
  • .github/: GitHub Actions CI/CD配置
  • docker/: Docker相关配置文件

部署

生产环境构建

make build
# 或者
npm run build

构建完成后，build 目录包含了可以部署到Web服务器的静态文件。

部署选项

1. Docker部署（推荐）

# 构建Docker镜像
docker build -t dataflow-frontend .

# 运行容器
docker run -p 3000:80 dataflow-frontend

# 使用docker-compose
docker-compose up -d

2. 静态文件服务器

将build目录上传到任何静态文件服务器，如Nginx、Apache等。

3. 云平台部署

  • Vercel: 连接GitHub仓库自动部署
  • Netlify: 拖拽build目录或连接Git仓库
  • AWS S3: 上传到S3并配置CloudFront
  • 阿里云OSS: 上传到OSS并配置CDN

4. CI/CD自动部署

项目已配置GitHub Actions，推送到main分支会自动触发部署流程。

环境变量配置

复制.env.example为.env并根据实际环境配置：

cp .env.example .env
# 编辑.env文件

贡献

欢迎提交Issue和Pull Request来改进项目！请阅读贡献指南了解详细信息。

快速开始贡献

  1. Fork项目
  2. 克隆到本地: git clone https://github.com/YOUR_USERNAME/dataflow-platform.git
  3. 安装依赖: make install
  4. 创建功能分支: git checkout -b feature/amazing-feature
  5. 进行开发并测试: make validate
  6. 提交更改: git commit -m 'feat: add amazing feature'
  7. 推送分支: git push origin feature/amazing-feature
  8. 创建Pull Request

提交规范

使用Conventional Commits规范：

  • feat: 新功能
  • fix: 修复bug
  • docs: 文档更新
  • style: 代码格式调整
  • refactor: 代码重构
  • test: 测试相关
  • chore: 构建过程或辅助工具的变动

相关文档

许可证

本项目采用MIT许可证 - 查看 LICENSE 文件了解详情。

支持

如果这个项目对您有帮助，请给我们一个⭐️！

如果您遇到问题或有建议，请：

About

No description, website, or topics provided.

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages