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."
}];
}());
修改登录页面
- 获取登录模板
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
- 浏览器访问页面
登陆界面
