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