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 驗證新圖片是否位於界面頂部。