Openshift Web Console自定义界面

潘晓华Michael
1,022 阅读3分钟
原文链接： www.jianshu.com
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%;
}
  1. 在对应的模板文件中指定图标样式
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
  1. 保留默认登录模板form结构的前提下，修改/etc/origin/master/login.html页面
  2. 将login.html的路径添加到/etc/origin/master/master-config.yaml文件中
oauthConfig:
  ...
  templates:
    login: /etc/origin/master/login.html
  1. 重启master api
master-restart api
  1. 浏览器访问页面
登陆界面

参考文章

Openshit官方文档：自定义web console

avatar
文章
阅读
粉丝