uselagoon/ui Docker 镜像 - 轩辕镜像

镜像概述和主要用途

Lagoon UI是Lagoon的主要用户界面和仪表板，提供可视化管理功能，支持连接生产或开发环境的Lagoon实例，便于用户监控和管理Lagoon平台。该项目支持本地构建测试，并通过BrowserStack进行测试。

核心功能和特性

• 多环境连接：可连接生产或开发环境的Lagoon实例，默认提供amazee.io云服务的API URL，支持自定义替换
• 本地构建测试：支持通过Yarn或Docker两种方式在本地构建和测试
• 代码质量检查：集成JS和TypeScript代码检查工具，构建时自动运行，也可手动触发
• 样式管理：使用styled-components，推荐组件样式使用单独文件，支持
• 插件系统：通过插件注册表支持基本插件功能，可添加自定义脚本和样式文件
• 引导教程配置：支持配置应用引导教程，可定义不同路由的引导步骤，自动检测内容更新并展示

使用场景和适用范围

• Lagoon平台用户：用于可视化管理和监控Lagoon实例
• 开发人员：在本地构建和测试Lagoon UI的更改，连接不同环境的Lagoon实例进行调试
• 平台管理员：通过插件系统扩展UI功能，配置引导教程帮助用户快速上手

使用方法和配置说明

本地构建与运行

Yarn方式

1. 安装依赖：

   sh
   yarn install
   

2. 构建并运行：

   sh
   yarn build && GRAPHQL_API=[***] KEYCLOAK_API=[***] yarn dev
   

   说明：GRAPHQL_API和KEYCLOAK_API默认在docker-compose.yml中设置为localhost，可通过上述命令覆盖或直接修改docker-compose.yml中的值。

Docker方式

1. 配置环境变量：
   修改docker-compose.yml，设置以下环境变量（默认值为amazee.io云服务API）：

   yaml
   GRAPHQL_API: "${GRAPHQL_API:-[***]}"
   KEYCLOAK_API: "${KEYCLOAK_API:-[***]}"
   

2. 构建并启动：

   sh
   docker-compose build
   docker-compose up -d
   

代码检查（Linting）

• 配置文件：根目录下的.eslintrc.js（代码检查配置）和tsconfig.json（TypeScript配置）
• 运行命令：

  sh
  yarn lint
  

• 说明：代码检查在构建步骤自动运行，对TypeScript文件检查更严格

样式管理（Styling）

• 使用styled-components进行样式管理
• 推荐为每个组件创建单独的样式文件
• 支持使用<style jsx>标签，但不支持嵌套样式

插件系统配置

通过根目录下的plugins.json文件配置插件，可添加额外的CSS和Javascript文件到HTML的head或body。

配置示例

json
{
    "head": [
        {"type": "script", "location":"/static/custom.js"},
        {"type": "link",   "href":"/static/plugins/custom.css"}
    ],
    "body": [
        {"type": "script", "location":"[***]"}
    ]
}

• head：数组，包含添加到HTML头部的元素
• body：数组，包含添加到HTML body末尾的元素
• 元素属性：type（"script"或"link"）、location（本地路径或URL，script使用）、href（link使用）

引导教程配置

通过根目录下的tour.json文件配置应用引导教程，定义不同路由的引导步骤。

配置结构

json
{
    "mode": "direct",
    "routes": [
        {
            "pathName": "/projects",
            "steps": [
                {
                    "target": ".someclass",
                    "title": "引导步骤标题",
                    "content": "引导步骤描述"
                }
            ]
        }
    ]
}

核心属性说明

• mode：字符串，"translated"或"direct"。"translated"时content和title作为翻译文件的键；"direct"时直接使用内容
• routes：数组，每个对象描述一个路由的引导步骤
  • pathName：字符串，路由路径
  • steps：数组，引导步骤对象
    • target：字符串，CSS选择器，指定引导步骤指向的元素
    • title：字符串，步骤标题
    • content：字符串，步骤描述
    • key：字符串，步骤唯一标识，通过yarn run generateTourHash生成
    • placement：字符串（可选），提示框位置，参考react-joyride文档

内容更新说明

引导步骤使用内容哈希作为标识，当content、title更改或添加新步骤时，需重新生成哈希：

sh
yarn run generateTourHash

注意：路由引导顺序由用户自行控制，用户在浏览应用时会按顺序看到解释性信息。