cockpit 前端

目录

背景:

cockpit 了解

cockpit 安装

相关文档

代码结构

编译

编译可能报错:

解决 machines 打包失败的问题,应该是 patternfly 和 novnc 版本不一致的问题

/root/cockpit.master/pkg/networkmanager/firewall.jsx 525:61  error  Empty components are self-closing  react/self-closing-comp

修改 eslint 的配置文件,并且关掉 indent 检查,将配置文件里的 indent 项都改成 off

解决 machines 打包失败的问题,应该是 patternfly 和 novnc 版本不一致的问题

常用的几个命令

cockpit.spawn()  

cockpit.script()

 progress.strem()

cockpit.logout()

cockpit.file()


背景:

最近公司要基于cockpit,来定制自己的一个服务器管理web 应用。嗯。。cockpit是啥?能干嘛?我要拿它干嘛?

如你所见,我此刻是懵逼的。

cockpit 了解

我熟练的打开了百度

又打开了bing

哦吼,二度懵逼。

经过几番了解,大概是知道了  Linux Cockpit 是一个基于 Web 界面的应用,它提供了对系统的图形化管理。

因为功能集成,对服务器管理来说,可以称得上是神器,深受linux 开发者的喜爱。(呵呵。。)

最后我大概是知道了,公司就是想让我在人家的框架基础上二次开发一些定制化的功能呗。

会不会有啥特别搞的东西,我怀着忐忑的心,继续了下面的探索。

cockpit 安装

https://blog.csdn.net/ckeykey/article/details/102568103

https://blog.csdn.net/Magic_Ninja/article/details/90258621

这个简单找一下就有一些博客去说明如何安装了。

需要说明的是,这里是按照模块下载的,最开始可能是基础版本,只有几个功能,后面根据自己的要求去下载不同的模块,最后集成到一个页面上。

此外,cockpit 有很多版本,我这只是其中一个版本,有需要的可以看看。

å¨è¿éæå¥å¾çæè¿°

相关文档

这里有2个比较重要的文档可以参考

cockpit 指南

Hacking on Cockpit

代码结构

由于最先接触的是编译后的内容,没有源码,所以根据编译后的目录结构,整理了一下比较重要的内容。(因为开始的需求是新建一个页面,所以完全可以直接操作编译后的代码)

对照 cockpit 指南,我梳理了一下现在用到的一些比较重要的内容。

patternfly.css

主要是引入类boostrap的ui样式 patternfly.css, 再加上一些自定义的样式来实现。

cockpit.js

核心的js文件,整个项目都是基于cockpit.js 开发的

manifests.js

一个页面对应一个独立的文件夹,里面包含*.html, .manifest.json 等,其中.mainfest.json 就是通过cockpit.js 读取,合并成了一个全局的manifests.js文件。

.manifest.json 文件作用包括生成侧边栏的标题,icon,对应页面的path 路径,页面的排序等(很多功能我还没有发现,如果大家有什么相关的文档或者内容,欢迎留言分享)

po.js

语言包配置,在shell 文件夹下会有各个版本的po.*.js文件,分别对应不同国家的语言版本,例如po.en.js, po.zh_CN.js, po.hr.js 等等。这些文件也是通过cockpit.js 合并成一个全局的po.js文件。

shell.html

这里是一个主页面 ,提供头部,侧边栏,模态框等公用内容,不同页面是通过嵌入对应的iframe 文件,实现页面切换的效果。

随着功能的拓展,需要对更多的模块进行处理,这时候都是编译过的压缩代码就不符合要求了,所以需要去研究源码。这里Hacking on Cockpit 就很重要了。

对于前端来说源码里有大量和前端无关的配置(反正我看不懂),通过研究 webpack.config.js, 我们知道了前端部分的代码大多都在 /pkg/ 目录下。

编译

通过查看文档和测试验证,采用 git clone 从 github 上下载的 cockpit 代码,可以通过 webpack 打包,下载 tar 包或者 rpmbuild -bp 出来的代码,不能正常打包,会报很多错误不好解决,主要的区别在于 nodejs 的依赖库里面。所以采用 git clone cockpit 的方式建立打包环境得到依赖库 node_modules 目录,然后拷贝到 rpmbuild -bp 得到的目录里打包,具体步骤(由于我们的环境不一样,可能有些地方存在差异):
1. 得到 github 的 cockpit 源码的打包环境
    git clone https://github.com/cockpit-project/cockpit
    cd cockpit
    git checkout rhel-8.1
    ./autogen.sh --prefix=/usr --enable-debug
    make

2. 将得到的打包环境里的打包相关内容烤包到 /root/rpmbuild/BUILD/cockpit-196.3
   cp -aR eslint-plugin-cockpit /root/rpmbuild/BUILD/cockpit-196.3
   cp -aR .eslin* /root/rpmbuild/BUILD/cockpit-196.3
   
   mv /root/rpmbuild/BUILD/cockpit-196.3/node_modules /root/rpmbuild/BUILD/cockpit-196.3/node_modules.bak
   cp -aR node_modules /root/rpmbuild/BUILD/cockpit-196.3
   
3. 打包一个模块:NODE_ENV=development SRCDIR=`pwd` BUILDDIR=`pwd` timeout 15m ./tools/missing ./tools/webpack-make -d dist/apps/Makefile.deps ./webpack.config.js
   打包所有模块:for i in `ls dist/*/*.deps`;do mod=$(echo $i|awk -F/ '{print $2}');echo "process $mod";NODE_ENV=development SRCDIR=`pwd` BUILDDIR=`pwd` timeout 15m ./tools/missing ./tools/webpack-make -d dist/$mod/Makefile.deps ./webpack.config.js; [ $? -ne 0 ] && break;done
   
   仍然报错的模块:pcp ssh 报同一个错误,webpack 配置不一致,暂时不解决

编译可能报错:

  1. 解决 machines 打包失败的问题,应该是 patternfly 和 novnc 版本不一致的问题

    1.  vim ./node_modules/@patternfly/react-console/dist/esm/VncConsole/VncConsole.js 将 init_logging 改为 initLoggint
  2. /root/cockpit.master/pkg/networkmanager/firewall.jsx 525:61  error  Empty components are self-closing  react/self-closing-comp

    1.  这是因为 eslint 格式检查问题报的错误,可以自动修改,修复方法:
          [root@localhost cockpit.master]# pwd
          /root/cockpit.master
          [root@localhost cockpit.master]# eslint --color pkg/networkmanager/*.jsx --fix
          [root@localhost cockpit.master]# eslint --color pkg/systemd/*.jsx --fix 

  3. 修改 eslint 的配置文件,并且关掉 indent 检查,将配置文件里的 indent 项都改成 off

  4. 解决 machines 打包失败的问题,应该是 patternfly 和 novnc 版本不一致的问题

    1. vim ./node_modules/@patternfly/react-console/dist/esm/VncConsole/VncConsole.js 将 init_logging 改为 initLoggint

常用的几个命令

cockpit.js: Spawning Processes

用来处理数据的交互,可以读,写命令行,查看日志等。

cockpit.spawn()

// 这里的 '--get' '--json' 属于接口的参数,需要后台给到
cockpit.spawn(["/usr/lib/kkkk/bin/kkkkk-menu", "--get", "--json"])

cockpit.script()

//如果是shell 脚本,则使用script
cockpit.script(["sh /tmp/cockpit.sh"])

 progress.strem()

//在流程具有标准输出时要调用的处理程序。该处理程序将被多次调用。无论处理是否最终成功退出,都将调用处理程序。
//可以用来查看日志
let progress = cockpit.script(["sh /tmp/cockpit.sh"]);
progress.stream(res=>{
    console.log(res)
})

cockpit.logout()

退出cockpit

cockpit.file()

获取一个文件的信息

const file = cockpit.file(filePath)

// 替换
file.replace(configString)

// 读取
file.read()

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值