wbfc-admin-monitoring

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

引入babel是为了支持async的transform，也就是为了支持async / await对异步的处理

安装 (Install)

npm install wbfc-admin-monitoring

引用

<template>
	<div>
		<WbfcAdminMonitoring :context-id="monitoringId"/>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue';
import WbfcAdminMonitoring from 'wbfc-admin-monitoring/src/views/wbfc-admin-monitoring';
export default {
	components: {
		WbfcAdminMonitoring
	},
	data(){
		return {
			monitoringId: 'myMonitoringId'
		};
	}
}
</script>

Props

属性名|默认值|说明 ---|---|--- title|WBFC-Admin-Monitoring:String|左上角标题文字 context-id|wbfc-admin-monitoring-id:String|上下文ID，用于区分多个不同组件 userAuth|userAuth:JSON|用户认证信息{"tokenType":"bearer/basic","accessToken":"JWT/base64(username:password)"} defaultApplications|[]:Array|默认的application信息[{"name":"名称", "url":"地址", "actuatorPath":"监控接口路径"}]

关于本项目

本项目是一个静态SpringBoot服务健康监控项目。通过改造Spring Boot Admin UI 并增加Webpack打包的Vue项目。

虽然 Spring Boot Admin 是一个很优秀的健康监控项目，但是因为其依赖Eureka，它通过DiscorveyClient向其AdminServer注册客户端信息。若不使用Client项目，则需要在AdminServer中填写静态的配置。第一种方式虽然能够自动发现服务，但是如果缺少eureka就会报错。而第二种方式需要修改配置文件，无法动态配置服务器(我在尝试的时候同样发现会报无法连接eureka的错误，这是它的一个bug)，而我们需要的只是一个可以动态添加并监控SpringBoot服务的功能，如果再去修改Java端的AdminServer有些得不偿失。那何必呢，我们已经有了UI，所以这才有了本项目。

另外，虽然登录这个功能看起来很好，但实际应用中往往我们已经有了自己的登录认证服务器，这里还需要一个登录，更显得有些麻烦了，并且也不好进行拓展。还不如根据我们的实际需要去增加相应的功能。所以本项目是没有登录功能的。

新增或修改功能

• 默认的 Spring Boot Admin 还会包含journal功能，它会显示Application的离线和在线的时间列表，我认为这个功能有些鸡肋，而它是spring-boot-admin特有的功能，于是就把它屏蔽了。
• 默认的功能还缺少conditions、features节点模块，本项目也进行了增加。
• details模块增加了若干模块的描述功能(用于中文显示)。
• metrics模块增加了百分比percent模式的显示。
• auditevents,httptrace,session模块修正了时间戳显示不正确的问题。Spring-Boot-Admin-Server处理时间戳，但我们直接连到服务器接口的话就会有问题了。
• 修正httptrace每次获取数量太大，导致无法在定时器循环时间内执行完毕过滤器操作，从而导致死循环的问题
• httptrace增加了自定义定时器时间的功能
• 增加database数据库监控(mysql)功能,包括表数据统计、数据、索引、表空间统计和进程列表

---更多的修改可以参考下面的更新说明

Tips

虽然 Spring Boot Admin 在本项目中被改造成了一个Vue组件，但因为其引用了全局样式例如:bulma、generic等样式，如果在某个父组件内引用容易造成样式污染。所以这里建议重新打开一个新Tab页面来使用。并且需要确认是否样式被污染。如果仍然有冲突，可以通过手动增加以.wbfc-admin-monitoring-html或.wbfc-admin-monitoring-body内的样式表进行覆盖操作。

Versions

版本|更新时间|更新说明 ---|---|--- 1.0.0 | 2019/03/22 | 1.0.0版本上传 1.0.1 | 2019/03/27 | 1.0.1版本上传 1.0.2 | 2019/03/29 | 测试代码删除 1.0.3 | 2019/03/29 | 修正applicationContext获取health时发生503错误的问题 1.0.4 | 2019/04/02 | 修正导入的全局样式污染的问题(虽然改了命名空间，但由于引入了bulma，其全局样式依旧会产生污染，我没有解决这个问题) 1.0.5 | 2019/04/04 | 增加defaultApplications属性，用于初始化时导入默认的application信息;增加README的Props说明信息 1.0.6 | 2019/04/04 | 修正导入的application缺少instanceId的BUG 1.0.7 | 2019/04/09 | 修正全局样式font-size为16px 1.0.8 | 2019/04/12 | 修正auditevents、httptrace时间戳不正确的问题；修正httptrace每次获取数量太大，导致无法在定时器循环时间内执行完毕过滤器操作，从而导致死循环的问题；httptrace增加了自定义定时器时间的功能；修正application返回的href直连了服务器，导致绕过路由或代理服务器的问题；增加features模块; 1.0.9 | 2019/05/10 | 增加database数据库监控(mysql)功能;修正了addSlef=true时import会覆盖掉修改过的application信息的问题； 1.1.0 | 2019/05/13 | 修正importApplications第一次进入时没有applications导致无法生成id的问题 1.1.1 | 2019/05/16 | 增加logViewer显示服务器实时日志的功能 1.1.2 | 2019/05/18 | 修正axios全局过滤器失效导致无法访问带有权限的接口问题修正；logViewer修正socket连接直连到服务器(由于socket无法穿透zuul，导致无法访问springboot的websocket服务器)；logViewer增加权限判断和异常处理、优化了debug日志的颜色；修正所有页面error message超长导致样式不正确的问题；element-ui版本升级为2.8.2； 1.1.3 | 2019/05/21 | 修正headdump无法通过带有权限的接口下载的BUG；修正audit log、sessions和http trace 时间戳不显示毫秒的问题； 1.1.4 | 2019/06/29 | 增加通过instance.id获取application的接口；增加logviewer中nginx穿透的功能； 1.1.5 | 2019/07/09 | 增加logviewer清屏功能；修改nginx穿透功能为【使用代理】;修正日志行号递增时，分隔线无法正确对齐的bug；增加日志行标记的功能；增加日志行标记线的功能； 1.1.6 | 2019/07/10 | 修正【使用代理】和直连服务器功能切换不正确的bug；修正行号在过滤后重新计算的问题，改为全局行号；修正标记和标记线使用全局日志行，修改标记和标记线节点的颜色统一；修正清屏和切换代理后无法清除标记线的问题；修正标记线间断点在动态加载log时显示错误的问题； 1.1.7 | 2019/09/17 | 修正 hasEnvManagerSupport的判断方式以支持Env.post修改环境变量；修正logviwer显示样式; 1.1.8 | 2019/09/27 | 增加env单项删除功能；env增加application热重启功能；增加全局重启刷新application和菜单功能； 1.1.9 | 2019/12/26 | 修正带有权限的axios请求头不正确的问题；