添加 views/devops/srv 模块和 MachineNginx.vue 页面, 管理机器上的诸如 nginx 之类的服务

src/api/devops.js

@@ -1,6 +1,8 @@
 import { get, post, postForm } from '@/utils/request'
 
 const devopsApi = {
+  getEnvList: '/api/devops/envs',
+  getAppTypeList: '/api/devops/app_types',
   getDashboard: '/api/devops/dashboard',
   getAccount: '/api/devops/account',
   getBuildDir: '/api/devops/build/dir',
@@ -9,9 +11,8 @@ const devopsApi = {
   getAliyunKeyList: '/api/devops/machine/aliyun/key',
   getMachineProcList: '/api/devops/machine/proc',
   getMachineTaskList: '/api/devops/machine/task',
+  getMachineNginx: '/api/devops/srv/nginx',
   getDockerList: '/api/devops/docker',
-  getEnvList: '/api/devops/envs',
-  getAppTypeList: '/api/devops/app_types',
   getCompilerList: '/api/devops/build/compiler',
   getRepoAuthList: '/api/devops/build/repoauth',
   getPackerList: '/api/devops/build/packer',
@@ -26,6 +27,10 @@ const devopsApi = {
   getUserList: '/api/devops/rbac/user'
 }
 
+export function getEnvList() {
+  return get(devopsApi.getEnvList)
+}
+
 export function getDashboard() {
   return get(devopsApi.getDashboard)
 }
@@ -102,6 +107,18 @@ export function eraseMachineTask(queryInfo) {
   return postForm(devopsApi.getMachineTaskList + '/clear', queryInfo)
 }
 
+export function getFileTree(queryInfo) {
+  return get(devopsApi.getMachineNginx + '/tree', queryInfo)
+}
+
+export function getNginxConf(queryInfo) {
+  return get(devopsApi.getMachineNginx + '/conf', queryInfo)
+}
+
+export function updateNginxConf(payload) {
+  return post(devopsApi.getMachineNginx + '/conf', payload)
+}
+
 export function getDockerfileImageList() {
   return get(devopsApi.getDockerList + '/image')
 }
@@ -118,10 +135,6 @@ export function deleteDockerRegistry(formData) {
   return postForm(devopsApi.getDockerList + '/registry/delete', formData)
 }
 
-export function getEnvList() {
-  return get(devopsApi.getEnvList)
-}
-
 export function getBuildDir() {
   return get(devopsApi.getBuildDir)
 }

src/router/background_devops.js

@@ -14,6 +14,8 @@ const MachineHost = () => import('views/devops/machine/MachineHost')
 const AliyunKey = () => import('views/devops/machine/AliyunKey')
 const MachineProc = () => import('views/devops/machine/MachineProc')
 const MachineTask = () => import('views/devops/machine/MachineTask')
+// srv
+const MachineNginx = () => import('views/devops/srv/MachineNginx')
 // build
 const BuildDir = () => import('views/devops/build/BuildDir')
 const RepoAuth = () => import('views/devops/build/RepoAuth')
@@ -113,6 +115,24 @@ export default {
         }
       ]
     },
+    {
+      path: '/bg/srv',
+      name: 'MachineSrv',
+      title: '服务',
+      icon: 'el-icon-s-data',
+      component: { render: (e) => e('router-view') },
+      meta: { needAuth: true, roles: ['devops_admin'] },
+      children: [
+        {
+          path: '/bg/srv/nginx',
+          name: 'MachineNginx',
+          title: 'Nginx',
+          icon: 'el-icon-s-data',
+          component: MachineNginx,
+          meta: { needAuth: true, roles: ['devops_admin'] }
+        }
+      ]
+    },
     {
       path: '/bg/docker',
       name: 'DockerIndex',

src/views/devops/srv/MachineNginx.vue

@@ -0,0 +1,206 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <h3>Nginx 配置管理</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-row>
+        <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>目录树</span>
+              <el-button style="float: right; padding: 3px 0" type="text" @click="getData">刷新</el-button>
+            </div>
+            <div class="text item">
+              <el-tree
+                :accordion="true"
+                :data="treeNode"
+                :props="defaultProps"
+                highlight-current
+                @node-click="handleNodeClick"
+              >
+                <span slot-scope="{ node, data }">
+                  <span style="color: green">{{ data.type }} </span>
+                  <span :class="data.icon">{{ node.label }}</span>
+                </span>
+              </el-tree>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-main>
+
+    <el-dialog
+      :title="editDialogTitle"
+      append-to-body
+      :visible.sync="showEditDialog"
+      width="50%"
+      center
+    >
+      <template>
+        <el-form :model="confForm">
+          <el-form-item prop="textContent">
+            <el-input
+              v-model="confForm.textContent"
+              type="textarea"
+              maxlength="10000"
+              :rows="10"
+              style="padding: 5px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onSubmit">更新</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import {
+  getEnvList,
+  getFileTree,
+  getMachineSessions,
+  getNginxConf,
+  updateNginxConf
+} from '@/api/devops'
+
+export default {
+  name: 'MachineNginx',
+  data() {
+    return {
+      treeNode: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        value: 'value'
+      },
+      env: 'test',
+      envList: [],
+      machineList: [],
+      queryInfo: {
+        machineId: '',
+        path: ''
+      },
+      dataList: [],
+      showEditDialog: false,
+      editDialogTitle: '文件内容',
+      confForm: {
+        textContent: ''
+      }
+    }
+  },
+  created() {
+    document.title = 'Nginx 配置'
+    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)
+      })
+    },
+    onSelectChange() {
+      this.machine = ''
+      this.getMachineList(this.env)
+    },
+    onSelectChange1() {
+      this.getData()
+    },
+    getData() {
+      getFileTree(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          this.treeNode = resp.data
+          // this.$message.info('数据已刷新')
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleNodeClick(data) {
+      if (data.type !== 'file') {
+        return
+      }
+
+      this.queryInfo.path = data.path
+      getNginxConf(this.queryInfo).then(resp => {
+        if (resp.code === 0) {
+          this.confForm.textContent = resp.data
+          this.editDialogTitle = data.path + ' 文件内容'
+          this.showEditDialog = true
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    onRefresh() {
+      this.getData()
+    },
+    onSubmit() {
+      updateNginxConf(this.confForm).then(resp => {
+        this.$message.info(resp.msg)
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.showEditDialog = false
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>