昨天我们进行了开发流程中的第二步架构设计,并且创建了vite+vue的项目并且引入了antd的UI组件,今天我们就进行开发流程中的比较费时间的第三部分,就是前后端功能模块的实际开发,利用程序实现自己的业务需求。
之前我们用的的elmentplus的ui组件,显示K8s的集群信息。今天我们利用antd组件显示后端信息组件也是大同小异,所以前后端交互流程也都是一样的。那么我们的功能模块包括暂时包括三个模块,一个是传统模块,一个是云原生模块,还有一个就是微服务的模块。
我们现阶段先开发传统模块,包含监控、终端等功能。
监控模块开发
那么从监控功能开始,如果想开发监控功能的话,一般有那些方式呢,个人目前理解的大方向有两个:
1、使用后端语言单独开发监控资源
2、直接调用成熟系统的api接口返回数据给前端
第一种方式优点就是可以完全自定义监控的逻辑,灵活度高,而且不依赖第三方监控系统,部署简单。缺点也是显而易见的就是自行开发和维护监控功能,工作量大。关键功能还不如成熟系统强大。
第二种方式优点显而易见,可以利用成熟的监控系统,监控功能强大,前端获取的监控数据还比较丰富。缺点就是依赖第三方监控系统,系统更换或者升级会带来影响,监控的数据结构和api需要依赖监控系统,可能不是很灵活。
所以一般我们除了需要高度定制的监控功能,一般都会选择直接调用成熟监控系统的API这是一种简单高效,能够快速获取监控数据的方案。所以说一切都是按需求定义,看客户需求是什么,两者结合都是可以的。
那么我这边平台的需求暂时没有什么高度定制的监控需求,所以我们只要部署监控系统,调用它的api,利用前端显示即可。
调用方式也有几种方式:
1、前端直接调用监控系统API,优势就是简单快速,直接展示api返回的丰富监控数据,但是缺点就是面向具体的监控系统的api进行开发,更换系统的话影响就比较大
2、后端调用
前端调用后端接口,后端再调用监控api获取数据,返回给前端,优势在于前端和具体的监控系统解耦,更换监控系统影响不大,但是需要后端进行二次开发
3、基于socket推送
监控系统直接推送实时监控数据和事件到后端,后端通过socket连接推送到前端,这个实时推送监控消息,前端实时展示,但是开发复杂度还是大
4、基于webhook
监控系统通过webhook推送到后端,后端再将数据返回给前端,和上面的方法一样,需要webhook接入的开发。
本来想我们直接调用监控系统api显示即可,但是我又想到另一种方法,直接将现有的监控面板grafana接入我的前端页面是最快速高效的办法。
所以我就着手搭建监控系统,我本来是利用helm直接一套安装的,但那成想,网络原因一直下载不下来,所以暂时不浪费时间了,明天再抽空搭建一套之后再引入。
但是,我觉得除了直接引入,自己开发单独的监控流程还是要熟悉一下。
这里我们使用go语言,简单的来监控一下远程linux机器的cpu的信息,设置每5秒来监控一下,然后返回cpu的占用率和可用率。
马上动手,新建go项目monitor,代码如下:
这里简单说下流程就是下载引入需要的模块,利用ssh连接远程机器,执行模块封装的函数,返回具体的机器信息,并用json格式,这里还要设置下跨域访问,不然前端因为浏览器安全设置无法获取后端数据。
运行看一下:
再在昨天vite创建的项目上引入页面:
上代码:
完整的前端代码如下:
这里调整了几次样式,使用antd的卡片,我们看看效果:
我们实际看看机器信息:
当然这里的后端可用率逻辑只是简单的100-用户空间cpu占用率,没算系统占用的,还可以改善一下。
所以其他的内存硬盘等主机信息也是类似的开发流程。所以说对于特定的比较重要的监控信息可以采取单独开发。不然还是直接调用API是最好的选择。
那么好了,今天的分享就到这了,感兴趣的朋友别忘了关注点赞呀。
领取专属 10元无门槛券
私享最新 技术干货