完成服务器添加和删除

itbaima-monitor-server/src/main/java/com/example/controller/MonitorController.java

@@ -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();
+    }
 }

itbaima-monitor-server/src/main/java/com/example/service/ClientService.java

@@ -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);
 }

itbaima-monitor-server/src/main/java/com/example/service/impl/ClientServiceImpl.java

@@ -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();
     }
 }

itbaima-monitor-web/src/component/ClientDetails.vue

@@ -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,6 +72,7 @@ function updateDetails() {
 setInterval(() => {
   if(props.id !== -1 && details.runtime) {
     get(`/api/monitor/runtime-now?clientId=${props.id}`, data => {
+      if(details.runtime.list.length >= 360)
         details.runtime.list.splice(0, 1)
       details.runtime.list.push(data)
     })
@@ -79,10 +96,14 @@ 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 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">
           <div>

itbaima-monitor-web/src/component/RegisterCard.vue

@@ -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>

itbaima-monitor-web/src/views/main/Manage.vue

@@ -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 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>