paruff/hygieia-ui

Hygieia UI

https://travis-ci.com/Hygieia/UI.svg?branch=master](https://travis-ci.com/Hygieia/UI?branch=master) https://img.shields.io/maven-central/v/com.capitalone.dashboard/UI.svg?label=Maven%20Central](https://search.maven.org/search?q=g:%22com.capitalone.dashboard%22%20AND%20a:%22UI%22) https://img.shields.io/lgtm/alerts/github/Hygieia/UI.svg?logo=lgtm&logoWidth=18]([***]

作为Hygieia模块化改造的一部分，本仓库托管Hygieia UI代码，用于构建DevOps仪表板的用户界面。该项目需要Angular CLI 8.0.3版本和OpenJDK 1.8.0_265版本。

目录

• 环境搭建
• 构建并运行API可执行文件
• 构建项目
• 开发服务器
• 运行单元测试
• IntelliJ调试
• 代码脚手架
• 运行测试
• 更多帮助
• Docker部署示例

环境搭建

新的Hygieia UI需要构建UI和API层，无需依赖Hygieia核心组件：

1. Fork并克隆UI仓库
2. 进入UI目录，执行npm install安装依赖包
3. 安装Angular CLI：npm install -g @angular/cli@8.0.3
4. 执行ng version验证版本（确保为v8系列）

构建并运行API可执行文件

启动UI前需先运行API层：

1. Fork并克隆Hygieia https://github.com/Hygieia/api
2. 进入api目录，执行mvn clean install生成target/api.jar
3. 配置api.properties文件（连接MongoDB、认证等参数），示例如下：

示例API配置

properties
# api.properties
dbname=dashboarddb
dbusername=dashboarduser[MongoDB用户名，默认空]
dbpassword=dbpassword[MongoDB密码，默认空]
dbhost=[MongoDB主机，默认localhost]
dbport=[MongoDB端口，默认27017]
dbreplicaset=[非副本集则为false]
dbhostport=[主机端口列表，如host1:port1]
server.contextPath=[Web上下文路径，可选]
server.port=[Web端口，默认8080]
logRequest=false
logSplunkRequest=false
corsEnabled=false
corsWhitelist=http://domain1.com:port,http://domain2.com:port
version.number=@application.version.number@

auth.expirationTime=[JWT过期时间（毫秒）]
auth.secret=[JWT验证密钥]
auth.authenticationProviders=[认证类型，默认STANDARD，如STANDARD,LDAP]
auth.ldapServerUrl=[LDAP服务器地址，含端口]
auth.ldapUserDnPattern=[LDAP用户DN模板，{0}替换为用户名]

# LDAP服务器地址
auth.ldapServerUrl=[ldap://company.com:389]
# 标准LDAP用户DN模板
auth.ldapUserDnPattern=[uid={0},OU=Users,dc=your,dc=company,dc=com]
# ActiveDirectory配置
auth.adDomain=[company.com]
auth.adRootDn=[dc=your,dc=company,dc=com]
auth.adUrl=[示例：ldap://ad.company.com:389]

monitor.proxy.host=[代理服务器主机名]
monitor.proxy.type=[http|socks|direct]
monitor.proxy.port=[代理端口]
monitor.proxy.username=[代理用户名]
monitor.proxy.password=[代理密码]

# 分页大小（默认10）
pageSize=[整数]
# API基础认证令牌
key=[api token]
# SSO头部参数
auth.userEid=[EID头部名称]
auth.userEmail=[邮箱头部名称]
auth.userFirstName=[名头部名称]
auth.userLastName=[姓头部名称]
auth.userMiddelInitials=[中间名头部名称]
auth.userDisplayName=[显示名头部名称]

# Github同步配置
githubSyncSettings.notBuiltCommits;
githubSyncSettings.firstRunHistoryDays;[同步历史天数，默认60]
githubSyncSettings.offsetMinutes;[偏移时间（分钟），默认10]
githubSyncSettings.fetchCount;[拉取数量，默认100]
githubSyncSettings.commitPullSyncTime;[同步间隔（毫秒），默认86400000]

4. 进入api/target目录，执行：
   java -jar api.jar --spring.config.location=/path/to/api.properties -Djasypt.encryptor.password=hygieiasecret

构建项目

API运行后，在UI目录执行ng build（生产环境加--prod），产物存于dist/目录。
Ubuntu 20.04额外步骤：

• 安装gulp：npm install -g gulp
• 本地安装：npm install gulp --save-dev
• 构建：gulp build
• 启动仪表板：gulp serve

开发服务器

UI目录执行ng serve启动开发服务器，访问http://localhost:4200/（建议无痕模式），代码变更自动重载。

运行单元测试

• 执行ng test通过Karma运行单元测试
• 或npm run test-headless执行无头测试并生成覆盖率报告

IntelliJ调试

1. 打开Edit Configurations，添加JavaScript Debug
2. 配置URL为http://localhost:4200
3. 启动调试，在代码中设置断点即可

代码脚手架

执行ng generate component component-name生成组件，支持指令、管道、服务等类型。

运行测试

执行ng e2e通过Protractor运行端到端测试。

更多帮助

执行ng help获取Angular CLI帮助，或参考https://github.com/angular/angular-cli/blob/master/README.md%E3%80%82

Docker部署示例

Docker Run

bash
docker run -d \
  -p 4200:4200 \
  --name hygieia-ui \
  --link hygieia-api:api \
  -e API_URL=http://api:8080 \
  paruff/hygieia-ui

Docker Compose

yaml
version: '3'
services:
  hygieia-api:
    image: hygieia-api:latest
    ports:
      - "8080:8080"
    volumes:
      - ./api.properties:/config/api.properties
    command: java -jar api.jar --spring.config.location=/config/api.properties
  
  hygieia-ui:
    image: paruff/hygieia-ui
    ports:
      - "4200:4200"
    depends_on:
      - hygieia-api
    environment:
      - API_URL=[***]