OpenBMC的WEB界面

开发 OpenBMC WEB 用户界面

内容: 如何定制化，构建，运行 OpenBMC WEB UI
受众: 熟悉 HTML，CSS，JS 的开发者
前提: 系统是 Linux，Mac 或 Windows

Webui-vue

webui-vue git 仓库将会在未来替代原本使用的 phosphor-webui，webui-vue 使用 Vue.js 框架，通过 Redfish API 与 BMC 进行交互。

查看 README.md 来了解为什么 Vue.js 框架被创建，需要维持的特性，以及为什么要替换掉 Angular JS。

查看 CONTRIBUTING.md 来了解项目配置、涉及信息以及如何为框架做贡献。

查看 OpenBMC Web UI Style Guide 找到如下的相关信息:

• 代码风格规范
• 大纲
• 单元测试
• 元组使用
• 快速启用参考

查看 OpenBMC Web UI Themes Guide - How to customize 来学习如何创建定制化构建，用来满足你的分支以及定制化需求:

• 路由
• 导航
• 状态存储
• 主题

通过 QEMU 加载 WEB 界面

在 QEMU 中链接到 WEB 界面:

1. 假设你按照 dev-environment 文件配置了你的仿真环境
2. 假设你使用 QEMU 中默认的 HTTPS 2443 会话端口，那么你可以通过浏览器访问 https://localhost:2443
3. 使用默认的用户名、密码登录系统

注意: 你需要允许浏览器提示的安全异常链接来访问到BMC界面

Phosphor-webui

phosphor-webui 仓库为 OpenBMC 提供以为基于web的界面。它使用 AngularJS 框架通过 REST API 与 BMC 进行交互。它允许用户查看硬件信息，更新固件，设置网络等。

AngularJS 框架在 2021 年 6 月 30 日停止维护。

定制化 Phosphor-webui

1. 克隆仓库

   git clone https://github.com/openbmc/phosphor-webui.git
   

2. 安装合适的包并启动web界面
   按照 README 中的提示来安装需要的包，并启动web界面。你也可以使用在 dev-environment 中建立的开发环境或你自己的系统。
3. 定制化web界面登入界面以及验证
   使用 ^C 杀死之前步骤的 npm。从下面的路径下拉取一个 .png 文件:

   wget http://www.pngmart.com/files/3/Free-PNG-Transparent-Image.png
   

   复制这个新的 .png 文件到合适的目录下:

   cp Free-PNG-Transparent-Image.png app/assets/images/
   

   修改web界面对应的 HTML 文件，指向新的图片:

   vi app/login/controllers/login-controller.html
   # Replace the logo.svg near the top with Free-PNG-Transparent-Image.png
   <img src="../../assets/images/Free-PNG-Transparent-Image.png" class="login__logo" alt="OpenBMC logo" role="img"/>
   

   现在，再次启动你的服务吧。

   npm run-script server
   

   登入web浏览器 https://localhost:8080 并查看新的图片是否在界面上。
   使用 ^C 杀死运行的 npm。
4. 定制化界面顶部图片，并验证是否每一个web界面中都使用了这个图片
   与之前的步骤类似，调整合适的 HTML 指向新的图片:

   vi app/common/directives/app-header.html
   # Replace logo.svg with Free-PNG-Transparent-Image.png again
   <div class="logo__wrapper"><img src="../../assets/images/Free-PNG-Transparent-Image.png" class="header__logo" alt="company logo"/></div>
   

   重新启动你的服务:

   npm run-script server
   

   使用浏览器登录 https://localhost:8080 验证新图片是否位于界面顶部。