uselagoon/ui

镜像概述和主要用途

Lagoon UI是https://github.com/uselagoon/lagoon%E7%9A%84%E4%B8%BB%E8%A6%81%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E5%92%8C%E4%BB%AA%E8%A1%A8%E6%9D%BF%EF%BC%8C%E6%8F%90%E4%BE%9B%E5%8F%AF%E8%A7%86%E5%8C%96%E7%AE%A1%E7%90%86%E5%8A%9F%E8%83%BD%EF%BC%8C%E6%94%AF%E6%8C%81%E8%BF%9E%E6%8E%A5%E7%94%9F%E4%BA%A7%E6%88%96%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84Lagoon%E5%AE%9E%E4%BE%8B%EF%BC%8C%E4%BE%BF%E4%BA%8E%E7%94%A8%E6%88%B7%E7%9B%91%E6%8E%A7%E5%92%8C%E7%AE%A1%E7%90%86Lagoon%E5%B9%B3%E5%8F%B0%E3%80%82%E8%AF%A5%E9%A1%B9%E7%9B%AE%E6%94%AF%E6%8C%81%E6%9C%AC%E5%9C%B0%E6%9E%84%E5%BB%BA%E6%B5%8B%E8%AF%95%EF%BC%8C%E5%B9%B6%E9%80%9A%E8%BF%87BrowserStack%E8%BF%9B%E8%A1%8C%E6%B5%8B%E8%AF%95%E3%80%82

核心功能和特性

• 多环境连接：可连接生产或开发环境的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=https://api.lagoon.amazeeio.cloud/graphql KEYCLOAK_API=https://keycloak.amazeeio.cloud/auth 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:-https://api.lagoon.amazeeio.cloud/graphql}"
   KEYCLOAK_API: "${KEYCLOAK_API:-https://keycloak.amazeeio.cloud/auth}"
   

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":"https://www.cornify.com/js/cornify.js"}
    ]
}

• 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

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