Openshift Web Console自定义界面-原创手记-慕课网

webp

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中给自定义模板添加图标

css文件中新建icon的样式

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

在对应的模板文件中指定图标样式

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

设置特色应用导航页

什么是特色应用导航页，看图展示

webp

特色应用导航页

我们可以把常用的一些特殊应用入口放在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."
    }];
}());

修改登录页面

获取登录模板

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

保留默认登录模板form结构的前提下，修改/etc/origin/master/login.html页面
将login.html的路径添加到/etc/origin/master/master-config.yaml文件中

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

重启master api

master-restart api

浏览器访问页面

webp

登陆界面

作者：潘晓华Michael
链接：https://www.jianshu.com/p/2eca2de7929f