Openshift Web Console頁面自定義

什么是Openshift WebConsole

• Openshift WebConsole是Openshift提供的一個web界面端，類似到Kubernetes的Dashboard。很多操作都可以在WebConsole端去處理與顯示。
• 部署完成Openshift后，會有一個openshift-web-console的project，在這個project中有一個openshift-web-console應用，該應用便是Openshift WebConsole。

自定義Openshift WebConsole原理

Openshift WebConsole前端使用的是Google的AngularJS技術，并且它在設置的時候提供了擴展的入口。
WebConsole在應用啟動時會去讀取configmap(webconsole-config)中的配置，而webconsole-config的配置中可以設置導入的自定義css與js文件。

......
extensions:
  properties: {}
  scriptURLs:
  - https://www.example.com/webconsole.js
  stylesheetURLs:
  - https://www.example.com/webconsole.css
......

需要注意的是，自定義的css與js文件鏈接必須是https鏈接。在webconsole網站運行時，會去Load自定義的js與css，所有的自定義配置都設置在自定義的css與js文件中，達到最終希望達到的效果。

各類具體操作

修改icon logo

在css文件中添加如下內容

#header-logo {
  background-image: url("https://www.example.com/images/logo.png");
  width: 300px;
  height: 40px;
}

項目左側導航目錄漢化
Project頁面中左側導航欄的顯示是放在window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION這個全局變量中，對條目的漢化只需要在js中重新賦值即可

(function() {
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION[0].label="概覽"
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION[1].label="應用"
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION[2].label="構建"
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION[3].label="資源"
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION[4].label="存儲"
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION[5].label="監控"
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION[6].label="商店"
}());

項目左側導航欄添加新目錄

• 添加一個單獨的menu菜單

(function() {
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION.push({
      label: "Dashboard", 
      iconClass: "fa fa-dashboard", 
      href: "/dashboard"
    });

}());

• 添加一個帶有子目錄的菜單

(function() {
    window.OPENSHIFT_CONSTANTS.PROJECT_NAVIGATION.splice(2, 0, { 
      label: "Git",
      iconClass: "fa fa-code",
      secondaryNavSections: [ 
        {
          items: [
            {
              label: "Branches",
              href: "/git/branches",
              prefixes: [
                "/git/branches/"
              ]
            }
          ]
        },
        {
          header: "Collaboration",
          items: [
            {
              label: "Pull Requests",
              href: "/git/pull-requests",
              prefixes: [
                "/git/pull-requests/"
              ]
            }
          ]
        }
      ]
    });
}());

頂部右側導航欄添加新目錄

右側頂部欄的APP入口默認是隱藏的，給它賦值后

(function() {
    window.OPENSHIFT_CONSTANTS.APP_LAUNCHER_NAVIGATION = [
    {
      title: "Sharing Videos",
      iconClass: "fa fa-video-camera",
      href: "https://yun.baidu.com/s/1xIwYILHQebEHZOcW4yvsAw",
      tooltip: "一鍵部署Openshift相關視頻"
    }];
}());

Categories中給自定義模板添加圖標

1. css文件中新建icon的樣式

.icon-nexus3{
  background-image: url(https://www.example.com/nexus3.png);
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
}

2. 在對應的模板文件中指定圖標樣式

apiVersion: v1
kind: Template
labels:
  template: nexus3-template
metadata:
  name: nexus3
  annotations:
    description: Sonatype Nexus 3 template
    tags: ci,nexus,jenkins
    iconClass: icon-nexus3
objects:
  ......

設置特色應用導航頁

什么是特色應用導航頁，看圖展示

特色應用導航頁

我們可以把常用的一些特殊應用入口放在Catalog頁面，方便管理與使用

(function() {
    window.OPENSHIFT_CONSTANTS.SAAS_OFFERINGS = [{
      title: "Dashboard",                         // The text label
      icon: "fa fa-dashboard",                    // The icon you want to appear
      url: "http://example.com/dashboard",        // Where to go when this item is clicked
      description: "Open application dashboard."  // Short description
    }, {
      title: "System Status",
      icon: "fa fa-heartbeat",
      url: "http://example.com/status",
      description: "View system alerts and outages."
    }, {
      title: "Manage Account",
      icon: "pficon pficon-user",
      url: "http://example.com/account",
      description: "Update email address or password."
    }];
}());

修改登錄頁面

1. 獲取登錄模板

oc adm create-login-template > /etc/origin/master/login.html

2. 保留默認登錄模板form結構的前提下，修改/etc/origin/master/login.html頁面
3. 將login.html的路徑添加到/etc/origin/master/master-config.yaml文件中

oauthConfig:
  ...
  templates:
    login: /etc/origin/master/login.html

4. 重啟master api

master-restart api

5. 瀏覽器訪問頁面

登陸界面

參考文章

Openshit官方文檔：自定義web console