添加 MachineProc.vue 页面展示机器进程

src/api/devops.js

@@ -7,6 +7,7 @@ const devopsApi = {
   eraseBuildDir: '/api/devops/build/dir/erase',
   getMachineList: '/api/devops/machine/host',
   getAliyunKeyList: '/api/devops/machine/aliyun/key',
+  getMachineProcList: '/api/devops/machine/proc',
   getEnvList: '/api/devops/envs',
   getAppTypeList: '/api/devops/app_types',
   getCompilerList: '/api/devops/build/compiler',
@@ -80,6 +81,10 @@ export function getAliyunKeyList() {
   return get(devopsApi.getAliyunKeyList)
 }
 
+export function getMachineProcList(queryInfo) {
+  return get(devopsApi.getMachineProcList, queryInfo)
+}
+
 export function getEnvList() {
   return get(devopsApi.getEnvList)
 }

src/router/background_devops.js

@@ -13,6 +13,7 @@ const User = () => import('views/devops/rbac/User')
 const MachineHost = () => import('views/devops/machine/MachineHost')
 const AliyunKey = () => import('views/devops/machine/AliyunKey')
 const Docker = () => import('views/devops/machine/Docker')
+const MachineProc = () => import('views/devops/machine/MachineProc')
 // build
 const BuildDir = () => import('views/devops/build/BuildDir')
 const RepoAuth = () => import('views/devops/build/RepoAuth')
@@ -98,6 +99,14 @@ export default {
           icon: 'el-icon-s-data',
           component: Docker,
           meta: { needAuth: true, roles: ['devops_admin'] }
+        },
+        {
+          path: '/bg/machine/proc',
+          name: 'MachineProc',
+          title: '进程列表',
+          icon: 'el-icon-s-data',
+          component: MachineProc,
+          meta: { needAuth: true, roles: ['devops_admin'] }
         }
       ]
     },

src/views/devops/machine/MachineProc.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <h3>进程列表</h3>
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="env"
+          size="mini"
+          placeholder="环境"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        >
+          <el-option
+            v-for="(item, index) in envList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select
+          v-model="queryInfo.machineId"
+          size="mini"
+          placeholder="机器"
+          style="margin-left: 5px"
+          @change="onSelectChange1"
+        >
+          <el-option
+            v-for="(item, index) in machineList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-button size="mini" type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        height="480"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="name"
+          label="进程名"
+        />
+        <el-table-column
+          prop="pid"
+          label="进程 ID"
+        />
+        <el-table-column
+          prop="ppid"
+          label="父进程 ID"
+        />
+        <el-table-column
+          prop="cmdLine"
+          label="启动命令行"
+        />
+        <el-table-column
+          prop="bindAddress"
+          label="监听端口"
+        />
+        <el-table-column
+          prop="startTime"
+          label="启动时间"
+        />
+        <el-table-column
+          prop="user"
+          label="用户"
+        />
+      </el-table>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { getEnvList, getMachineProcList, getMachineSessions } from '@/api/devops'
+
+export default {
+  name: 'MachineProc',
+  data() {
+    return {
+      env: 'test',
+      envList: [],
+      machineList: [],
+      queryInfo: {
+        machineId: ''
+      },
+      dataList: []
+    }
+  },
+  created() {
+    document.title = '进程列表'
+
+    getEnvList().then(resp => {
+      if (resp.code === 0) {
+        this.env = resp.data.userEnv
+        this.envList = resp.data.envList
+        this.getMachineList(this.env)
+        this.getData()
+      } else {
+        this.$message.error(resp.msg)
+      }
+    }).catch(error => {
+      this.$message.error(error.message)
+    })
+  },
+  methods: {
+    getMachineList(env) {
+      getMachineSessions(env).then(resp => {
+        if (resp.code === 0) {
+          this.machineList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    getData() {
+      getMachineProcList(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    onRefresh() {
+      this.getData()
+    },
+    onSelectChange() {
+      this.machine = ''
+      this.getMachineList(this.env)
+    },
+    onSelectChange1() {
+      this.getData()
+    }
+  }
+}
+</script>
+
+<style>
+</style>