screwdrivercd/ui

Screwdriver UI 中文技术文档

镜像概述和主要用途

Screwdriver UI 是 Screwdriver CI/CD 平台的 Web 前端用户界面，基于 Ember.js 框架构建。该应用提供可视化界面，用于管理 CI/CD 流水线、监控构建过程、配置项目参数及查看构建结果，是 Screwdriver 生态系统中用户与后端服务（API、Store）交互的主要入口。

核心功能和特性

• 与后端服务集成：支持与 Screwdriver API（SDAPI）和 Screwdriver Store（SDSTORE）通信，实现数据交互与状态同步
• 流水线可视化管理：提供图形化界面，用于创建、编辑和监控 CI/CD 流水线
• 构建状态监控：实时展示构建进度、日志及结果，支持构建历史查询
• 本地配置定制：允许通过本地配置文件覆盖环境参数，适配不同部署环境
• 测试与调试工具：集成 Ember 测试框架，支持单元测试、集成测试及覆盖率分析

使用场景和适用范围

• CI/CD 流水线管理：开发团队通过 UI 可视化操作 Screwdriver 流水线，简化配置流程
• 构建监控与故障排查：运维人员实时监控构建状态，通过日志快速定位问题
• 开发环境定制：开发者通过本地配置文件连接私有 API/Store 服务，进行前端功能调试
• 团队协作：多角色用户（开发者、测试、运维）通过统一界面协作管理 CI/CD 流程

前提条件

在本地开发或部署前，需确保环境已安装以下软件：

• Git（版本控制工具）
• Node.js ≥ v6.0.0（含 NPM 包管理器）
• Ember CLI（Ember 应用构建工具）
• Google Chrome（用于测试）

安装与配置

源码安装

1. 克隆代码仓库：

   bash
   git clone git@github.com:screwdriver-cd/ui.git
   

2. 进入项目目录：

   bash
   cd ui/
   

3. 安装依赖包：

   bash
   npm install
   

本地配置

通过 config/local.js 文件自定义应用设置，配置将与 config/environment.js 中的环境参数合并。典型配置示例：

javascript
'use strict';

// Screwdriver API 服务地址（后端接口）
const SDAPI_HOSTNAME = 'http://1.142.1.106:9001';
// Screwdriver Store 服务地址（数据存储接口）
const SDSTORE_HOSTNAME = 'http://1.142.1.106:9002';

const APP_CONFIG = {
  SDAPI_HOSTNAME,  // API 服务地址
  SDSTORE_HOSTNAME // Store 服务地址
};

module.exports = APP_CONFIG;

运行与开发

启动应用

bash
ember serve

启动后，通过浏览器访问：http://localhost:4200

代码生成器

Ember CLI 提供丰富的代码生成工具，可快速创建组件、路由等代码文件。查看帮助：

bash
ember help generate

测试与调试

运行测试

• 执行所有测试：

  bash
  ember test
  

• 启动测试服务器（实时监控测试）：

  bash
  ember test --server
  

• 运行单个测试用例（替换 <TEST_NAME> 为测试名称）：

  bash
  ember t -s -m '<TEST_NAME>'
  # 示例：ember t -s -m 'Integration | Component | pipeline options'
  

• 查看测试覆盖率：

  bash
  open coverage/lcov-report/index.html
  

代码检查

• 检查 Handlebars 模板：

  bash
  npm run lint:hbs
  

• 检查 JavaScript 代码：

  bash
  npm run lint:js
  

• 自动修复 JavaScript 代码问题：

  bash
  npm run lint:js -- --fix
  

构建应用

• 开发环境构建：

  bash
  ember build
  

• 生产环境构建（优化资源）：

  bash
  ember build --environment production
  

Docker 部署方案

拉取官方镜像

bash
docker pull screwdrivercd/ui

运行容器

通过环境变量配置 API 和 Store 服务地址，映射容器端口到本地：

bash
docker run -d \
  -p 4200:80 \
  -e SDAPI_HOSTNAME="http://your-sdapi-host:port" \
  -e SDSTORE_HOSTNAME="http://your-sdstore-host:port" \
  --name screwdriver-ui \
  screwdrivercd/ui

• -p 4200:80：将容器内 80 端口映射到本地 4200 端口
• -e SDAPI_HOSTNAME：Screwdriver API 服务地址
• -e SDSTORE_HOSTNAME：Screwdriver Store 服务地址

Docker Compose 配置

创建 docker-compose.yml 文件：

yaml
version: '3'
services:
  screwdriver-ui:
    image: screwdrivercd/ui
    ports:
      - "4200:80"
    environment:
      - SDAPI_HOSTNAME=http://your-sdapi-host:port
      - SDSTORE_HOSTNAME=http://your-sdstore-host:port
    restart: always

启动服务：

bash
docker-compose up -d

配置参数说明

许可证

代码基于 BSD 3-Clause 许可证开源。详见 https://github.com/screwdriver-cd/ui/blob/master/LICENSE 文件。

参考链接

• Ember.js 官方文档
• Ember CLI 工具文档
• Screwdriver 官方文档
• 开发工具扩展：
  • Chrome Ember Inspector
  • Firefox Ember Inspector