Openshift-Web-Console自定义界面

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-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

保留默认登录模板form结构的前提下，修改/etc/origin/master/login.html页面

将login.html的路径添加到/etc/origin/master/master-config.yaml文件中

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

重启master api
1
master-restart api
浏览器访问页面

登陆界面

参考文章

Openshit官方文档：自定义web console