完成服务器添加和删除
This commit is contained in:
parent
6952d2e8a3
commit
9fd3b445c8
@ -52,4 +52,15 @@ public class MonitorController {
|
||||
public RestBean<RuntimeDetailVO> runtimeDetailsNow(int clientId) {
|
||||
return RestBean.success(service.clientRuntimeDetailsNow(clientId));
|
||||
}
|
||||
|
||||
@GetMapping("/register")
|
||||
public RestBean<String> registerToken() {
|
||||
return RestBean.success(service.registerToken());
|
||||
}
|
||||
|
||||
@GetMapping("/delete")
|
||||
public RestBean<String> deleteClient(int clientId) {
|
||||
service.deleteClient(clientId);
|
||||
return RestBean.success();
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,4 +25,5 @@ public interface ClientService extends IService<Client> {
|
||||
ClientDetailsVO clientDetails(int clientId);
|
||||
RuntimeHistoryVO clientRuntimeDetailsHistory(int clientId);
|
||||
RuntimeDetailVO clientRuntimeDetailsNow(int clientId);
|
||||
void deleteClient(int clientId);
|
||||
}
|
||||
|
||||
@ -40,6 +40,8 @@ public class ClientServiceImpl extends ServiceImpl<ClientMapper, Client> impleme
|
||||
|
||||
@PostConstruct
|
||||
public void initClientCache() {
|
||||
clientTokenCache.clear();
|
||||
clientIdCache.clear();
|
||||
this.list().forEach(this::addClientCache);
|
||||
}
|
||||
|
||||
@ -140,6 +142,14 @@ public class ClientServiceImpl extends ServiceImpl<ClientMapper, Client> impleme
|
||||
return currentRuntime.get(clientId);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void deleteClient(int clientId) {
|
||||
this.removeById(clientId);
|
||||
detailMapper.deleteById(clientId);
|
||||
this.initClientCache();
|
||||
currentRuntime.remove(clientId);
|
||||
}
|
||||
|
||||
private boolean isOnline(RuntimeDetailVO runtime) {
|
||||
return runtime != null && System.currentTimeMillis() - runtime.getTimestamp() < 60 * 1000;
|
||||
}
|
||||
@ -159,7 +169,6 @@ public class ClientServiceImpl extends ServiceImpl<ClientMapper, Client> impleme
|
||||
StringBuilder sb = new StringBuilder(24);
|
||||
for (int i = 0; i < 24; i++)
|
||||
sb.append(CHARACTERS.charAt(random.nextInt(CHARACTERS.length())));
|
||||
System.out.println(sb);
|
||||
return sb.toString();
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
import {computed, reactive, watch} from "vue";
|
||||
import {get, post} from "@/net";
|
||||
import {copyIp, cpuNameToImage, fitByUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import RuntimeHistory from "@/component/RuntimeHistory.vue";
|
||||
import {Delete} from "@element-plus/icons-vue";
|
||||
|
||||
const locations = [
|
||||
{name: 'cn', desc: '中国大陆'},
|
||||
@ -19,6 +20,7 @@ const props = defineProps({
|
||||
id: Number,
|
||||
update: Function
|
||||
})
|
||||
const emits = defineEmits(['delete'])
|
||||
|
||||
const details = reactive({
|
||||
base: {},
|
||||
@ -48,6 +50,20 @@ const submitNodeEdit = () => {
|
||||
})
|
||||
}
|
||||
|
||||
function deleteClient() {
|
||||
ElMessageBox.confirm('删除此主机后所有统计数据都将丢失，您确定要这样做吗？', '删除主机', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
get(`/api/monitor/delete?clientId=${props.id}`, () => {
|
||||
emits('delete')
|
||||
props.update()
|
||||
ElMessage.success('主机已成功移除')
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
function updateDetails() {
|
||||
props.update()
|
||||
init(props.id)
|
||||
@ -56,7 +72,8 @@ function updateDetails() {
|
||||
setInterval(() => {
|
||||
if(props.id !== -1 && details.runtime) {
|
||||
get(`/api/monitor/runtime-now?clientId=${props.id}`, data => {
|
||||
details.runtime.list.splice(0, 1)
|
||||
if(details.runtime.list.length >= 360)
|
||||
details.runtime.list.splice(0, 1)
|
||||
details.runtime.list.push(data)
|
||||
})
|
||||
}
|
||||
@ -79,9 +96,13 @@ watch(() => props.id, init, { immediate: true })
|
||||
<el-scrollbar>
|
||||
<div class="client-details" v-loading="Object.keys(details.base).length === 0">
|
||||
<div v-if="Object.keys(details.base).length">
|
||||
<div class="title">
|
||||
<i class="fa-solid fa-server"></i>
|
||||
服务器信息
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<div class="title">
|
||||
<i class="fa-solid fa-server"></i>
|
||||
服务器信息
|
||||
</div>
|
||||
<el-button :icon="Delete" type="danger"
|
||||
@click="deleteClient" plain text>删除此主机</el-button>
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0"/>
|
||||
<div class="details-list">
|
||||
|
||||
46
itbaima-monitor-web/src/component/RegisterCard.vue
Normal file
46
itbaima-monitor-web/src/component/RegisterCard.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
|
||||
defineProps({
|
||||
token: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register-card">
|
||||
<div class="title"><i class="fa-regular fa-square-plus"></i> 添加新的主机</div>
|
||||
<div class="desc">请按照以下步骤完成新主机的添加，添加后即可实时管理服务器以及检测运行状态</div>
|
||||
<el-divider style="margin: 10px 0"/>
|
||||
<div class="sub-title">1.部署客户端</div>
|
||||
<div class="desc">在需要监控的服务器上运行监控客户端程序，客户端程序依赖于Java17运行环境，请提前安装好，启动完成后即可进行下一步。</div>
|
||||
<div class="sub-title" style="margin-top: 10px">2.输入监控服务器地址</div>
|
||||
<div class="desc">此地址用于客户端实时上报运行时状态数据，请务必保证正确填写。</div>
|
||||
<el-input v-model="axios.defaults.baseURL" readonly/>
|
||||
<div class="sub-title" style="margin-top: 10px">3.输入授权码</div>
|
||||
<div class="desc">客户端所有请求必须携带授权码才能被服务端正确识别。</div>
|
||||
<el-input :model-value="token" readonly/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.register-card {
|
||||
margin: 15px 20px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 13px;
|
||||
color: grey;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,6 +3,8 @@ import PreviewCard from "@/component/PreviewCard.vue";
|
||||
import {reactive, ref} from "vue";
|
||||
import {get} from "@/net";
|
||||
import ClientDetails from "@/component/ClientDetails.vue";
|
||||
import RegisterCard from "@/component/RegisterCard.vue";
|
||||
import {Plus} from "@element-plus/icons-vue";
|
||||
|
||||
const list = ref([])
|
||||
|
||||
@ -18,20 +20,39 @@ const displayClientDetails = (id) => {
|
||||
detail.show = true
|
||||
detail.id = id
|
||||
}
|
||||
|
||||
const register = reactive({
|
||||
show: false,
|
||||
token: ''
|
||||
})
|
||||
const refreshToken = () => get('/api/monitor/register', token => register.token = token)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="manage-main">
|
||||
<div class="title"><i class="fa-solid fa-server"></i> 管理主机列表</div>
|
||||
<div class="desc">在这里管理所有已经注册的主机实例，实时监控主机运行状态，快速进行管理和操作。</div>
|
||||
<div style="display: flex;justify-content: space-between;align-items: end">
|
||||
<div>
|
||||
<div class="title"><i class="fa-solid fa-server"></i> 管理主机列表</div>
|
||||
<div class="desc">在这里管理所有已经注册的主机实例，实时监控主机运行状态，快速进行管理和操作。</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button :icon="Plus" type="primary" plain
|
||||
@click="register.show = true">添加新主机</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0"/>
|
||||
<div class="card-list">
|
||||
<div class="card-list" v-if="list.length">
|
||||
<preview-card v-for="item in list" :data="item" :update="updateList"
|
||||
@click="displayClientDetails(item.id)"/>
|
||||
</div>
|
||||
<el-empty description="还没有任何主机哦，点击右上角添加一个吧" v-else/>
|
||||
<el-drawer size="520" :show-close="false" v-model="detail.show"
|
||||
:with-header="false" v-if="list.length" @close="detail.id = -1">
|
||||
<client-details :id="detail.id" :update="updateList"/>
|
||||
<client-details :id="detail.id" :update="updateList" @delete="updateList"/>
|
||||
</el-drawer>
|
||||
<el-drawer v-model="register.show" direction="btt" :with-header="false"
|
||||
style="width: 600px;margin: 10px auto" size="320" @open="refreshToken">
|
||||
<register-card :token="register.token"/>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user