add project monitor page

modules/server/src/main/java/io/jpom/controller/node/monitor/InternalController.java

@@ -1,5 +1,7 @@
 package io.jpom.controller.node.monitor;
 
+import cn.jiangzeyin.common.DefaultSystemLog;
+import cn.jiangzeyin.common.JsonMessage;
 import com.alibaba.fastjson.JSONObject;
 import io.jpom.common.BaseServerController;
 import io.jpom.common.forward.NodeForward;
@@ -35,6 +37,20 @@ public class InternalController extends BaseServerController {
         return "node/manage/internal";
     }
 
+    /**
+     * @author Hotstrip
+     * get InternalData
+     * 获取内存信息接口
+     * @return
+     */
+    @RequestMapping(value = "getInternalData", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
+    @ResponseBody
+    public String getInternalData() {
+        JSONObject data = NodeForward.requestData(getNode(), NodeUrl.Manage_internal_data, getRequest(), JSONObject.class);
+        DefaultSystemLog.getLog().info("data: {}", data.toString());
+        return JsonMessage.getString(200, "success", data);
+    }
+
     /**
      * 查询监控线程列表
      *

web-vue/src/api/node-project.js

@@ -351,4 +351,21 @@ export function deleteProjectLogBackFile(params) {
     method: 'post',
     data: params
   })
+}
+
+/**
+ * 获取内存信息接口
+ * @param {
+ *  nodeId: 节点 ID
+ *  tag: 项目 ID
+ *  copyId: copyId
+ * } params
+ */
+export function getInternalData(params) {
+  return axios({
+    url: '/node/manage/getInternalData',
+    method: 'post',
+    timeout: 0,
+    data: params
+  })
 }

web-vue/src/pages/node/node-layout/project/project-list.vue

@@ -18,7 +18,7 @@
         <a-button type="primary" @click="handleEdit(record)">编辑</a-button>
         <a-button type="primary" @click="handleFile(record)">文件</a-button>
         <a-button type="primary" @click="handleConsole(record)">控制台</a-button>
-        <a-button type="primary" @click="handleEdit(record)">监控</a-button>
+        <a-button type="primary" @click="handleMonitor(record)">监控</a-button>
         <a-button type="danger" @click="handleDelete(record)">删除</a-button>
       </template>
     </a-table>
@@ -106,11 +106,17 @@
       :visible="drawerConsoleVisible" @close="onConsoleClose">
       <console v-if="drawerConsoleVisible" :node="node" :project="temp" />
     </a-drawer>
+    <!-- 项目监控组件 -->
+    <a-drawer :title="drawerTitle" placement="right" width="85vw"
+      :visible="drawerMonitorVisible" @close="onMonitorClose">
+      <monitor v-if="drawerMonitorVisible" :node="node" :project="temp" />
+    </a-drawer>
   </div>
 </template>
 <script>
 import File from './project-file';
 import Console from './project-console';
+import Monitor from './project-monitor';
 import { getJdkList, getRuningProjectInfo, getProjectById, deleteProject, getProjectList, getPorjectGroupList, getProjectAccessList, editProject } from '../../../../api/node-project';
 export default {
   props: {
@@ -120,7 +126,8 @@ export default {
   },
   components: {
     File,
-    Console
+    Console,
+    Monitor
   },
   data() {
     return {
@@ -142,6 +149,7 @@ export default {
       drawerTitle: '',
       drawerFileVisible: false,
       drawerConsoleVisible: false,
+      drawerMonitorVisible: false,
       addGroupvisible: false,
       columns: [
         {title: '项目名称', dataIndex: 'name', width: 150, ellipsis: true, scopedSlots: {customRender: 'name'}},
@@ -304,6 +312,16 @@ export default {
       this.drawerConsoleVisible = false;
       this.handleFilter();
     },
+    // 监控
+    handleMonitor(record) {
+      this.temp = Object.assign(record);
+      this.drawerTitle = `监控(${this.temp.name})`;
+      this.drawerMonitorVisible = true;
+    },
+    // 关闭监控
+    onMonitorClose() {
+      this.drawerMonitorVisible = false;
+    },
     // 删除 
     handleDelete(record) {
       this.$confirm({

web-vue/src/pages/node/node-layout/project/project-monitor.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div ref="filter" class="filter">
+      <a-button type="primary" @click="exportStack">导出堆栈信息</a-button>
+      <a-button type="primary" @click="exportMem">导出内存信息</a-button>
+      <a-button type="danger" @click="checkThread">查看线程</a-button>
+    </div>
+    <!-- 系统内存 -->
+    <a-table :data-source="list" :loading="loading" :columns="columns" :scroll="{y: '100%'}" :pagination="false" bordered :rowKey="(record, index) => index">
+      <a-tooltip slot="name" slot-scope="text" placement="topLeft" :title="text">
+        <span>{{ text }}</span>
+      </a-tooltip>
+      <a-tooltip slot="id" slot-scope="text" placement="topLeft" :title="text">
+        <span>{{ text }}</span>
+      </a-tooltip>
+      <a-tooltip slot="group" slot-scope="text" placement="topLeft" :title="text">
+        <span>{{ text }}</span>
+      </a-tooltip>
+      <a-tooltip slot="lib" slot-scope="text" placement="topLeft" :title="text">
+        <span>{{ text }}</span>
+      </a-tooltip>
+      <a-tooltip slot="delUser" slot-scope="text" placement="topLeft" :title="text">
+        <span>{{ text }}</span>
+      </a-tooltip>
+    </a-table>
+    <!-- 端口信息 -->
+  </div>
+</template>
+<script>
+import { getInternalData } from '../../../../api/node-project';
+export default {
+  props: {
+    node: {
+      type: Object
+    },
+    project: {
+      type: Object
+    },
+    copyId: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      columns: [
+        {title: '项目名称', dataIndex: 'name', width: 150, ellipsis: true, scopedSlots: {customRender: 'name'}},
+        {title: '创建时间', dataIndex: 'createTime', width: 170, ellipsis: true, scopedSlots: {customRender: 'createTime'}},
+        {title: '修改时间', dataIndex: 'modifyTime', width: 170, ellipsis: true, scopedSlots: {customRender: 'modifyTime'}},
+        {title: '最后操作人', dataIndex: 'modifyUser', width: 150, ellipsis: true, scopedSlots: {customRender: 'modifyUser'}},
+        {title: '运行状态', dataIndex: 'status', width: 100, ellipsis: true, scopedSlots: {customRender: 'status'}},
+        {title: 'PID', dataIndex: 'pid', width: 100, ellipsis: true, scopedSlots: {customRender: 'pid'}},
+        {title: '端口', dataIndex: 'port', width: 100, ellipsis: true, scopedSlots: {customRender: 'port'}}
+      ],
+    }
+  },
+  mounted() {
+    this.loadData();
+  },
+  methods: {
+    // 加载数据
+    loadData() {
+      this.loading = true;
+      const params = {
+        nodeId: this.node.id,
+        tag: this.project.id,
+        copyId: this.copyId
+      }
+      getInternalData(params).then(res => {
+        console.log(res);
+        this.loading = false;
+      })
+    },
+    // 导出堆栈信息
+    exportStack() {
+
+    },
+    // 导出内存信息
+    exportMem() {
+
+    },
+    // 查看线程
+    checkThread() {
+
+    },
+  }
+}
+</script>
+<style scoped>
+.filter {
+  margin: 0 0 10px;
+}
+.ant-btn {
+  margin-right: 10px;
+}
+</style>