feat: 实现远程部署推送、接收、应用功能；

maslow · Aug 7, 2021 · 281cf28 · 281cf28
1 parent 6327f52
commit 281cf28
Show file tree

Hide file tree

Showing 8 changed files with 927 additions and 23 deletions.
diff --git a/packages/devops-admin/src/api/deploy.js b/packages/devops-admin/src/api/deploy.js
@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+import axios from 'axios'
+/**
+ * 创建部署令牌
+ * @param {string[]} permissions 令牌权限: "policy" , "function"
+ * @param {number} expire 过期时间，单位是小时
+ * @param {string} source 标识部署来源名称
+ * @returns
+ */
+export function createDeployToken({ permissions, expire, source }) {
+  return request({
+    url: '/deploy/create-token',
+    method: 'post',
+    data: {
+      permissions,
+      expire,
+      source
+    }
+  })
+}
+
+/**
+ * 部署访问策略
+ */
+export async function deploy2remote(deploy_url, deploy_token, { policies, functions, comment }) {
+  const _data = {
+    deploy_token,
+    policies: policies,
+    functions: functions,
+    comment
+  }
+  const res = await axios.post(deploy_url, _data)
+  return res.data
+}
+
+/**
+ * 应用部署请求
+ * @param {string} id  部署请求的 id
+ * @returns
+ */
+export function applyDeployRequest(id) {
+  return request({
+    url: '/deploy/apply',
+    method: 'post',
+    data: {
+      id
+    }
+  })
+}
diff --git a/packages/devops-admin/src/router/async.js b/packages/devops-admin/src/router/async.js
@@ -10,7 +10,7 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/development/functions',
     meta: {
-      title: '开发控制台', icon: 'guide'
+      title: '开发控制台', icon: 'example'
     },
     children: [
       {
@@ -138,6 +138,39 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/deploy',
+    component: Layout,
+    redirect: '/deploy/target',
+    meta: {
+      title: '远程部署', icon: 'guide'
+    },
+    children: [
+      {
+        path: 'targets',
+        component: () => import('@/views/deploy/targets'),
+        name: 'DeployTargetsListPage',
+        meta: {
+          title: '目标环境',
+          icon: 'international',
+          noCache: true
+          // permissions: ['admin.read']
+        }
+      },
+      {
+        path: 'requests',
+        component: () => import('@/views/deploy/requests'),
+        name: 'DeployRequestsListPage',
+        meta: {
+          title: '部署请求',
+          icon: 'skill',
+          noCache: true
+
+          // permissions: ['role.edit', 'role.create']
+        }
+      }
+    ]
+  },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/packages/devops-admin/src/views/database/policies.vue b/packages/devops-admin/src/views/database/policies.vue
@@ -9,12 +9,15 @@
         class="filter-item"
         @keyup.enter.native="handleFilter"
       />
-      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+      <el-button class="filter-item" type="default" icon="el-icon-search" @click="handleFilter">
         搜索
       </el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="showCreateForm">
+      <el-button class="filter-item" type="default" icon="el-icon-search" @click="showCreateForm">
         新建
       </el-button>
+      <el-button plain class="filter-item" type="primary" icon="el-icon-guide" @click="deployPanelVisible = true">
+        远程部署
+      </el-button>
     </div>
 
     <!-- 表格 -->
@@ -126,12 +129,16 @@
         </el-button>
       </div>
     </el-dialog>
+
+    <!-- 部署面板 -->
+    <DeployPanel v-model="deployPanelVisible" :policies="list" />
   </div>
 </template>
 
 <script>
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { db } from '../../api/cloud'
+import DeployPanel from '../deploy/components/deploy-panel.vue'
 
 // 默认化创建表单的值
 function getDefaultFormValue() {
@@ -147,7 +154,6 @@ function getDefaultFormValue() {
   }
 }
 
-// @TODO
 // 表单验证规则
 const formRules = {
   name: [{ required: true, message: '标识不可为空', trigger: 'blur' }],
@@ -156,7 +162,7 @@ const formRules = {
 
 export default {
   name: 'PoliciesListPage',
-  components: { Pagination },
+  components: { Pagination, DeployPanel },
   filters: {
     statusFilter(status) {
       status = status ?? 0
@@ -188,7 +194,8 @@ export default {
       },
       rules: formRules,
       downloadLoading: false,
-      functions: []
+      functions: [],
+      deployPanelVisible: false
     }
   },
   created() {

diff --git a/packages/devops-admin/src/views/deploy/components/deploy-panel.vue b/packages/devops-admin/src/views/deploy/components/deploy-panel.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="deploy-comp">
+    <el-drawer
+      title="部署面板"
+      :visible="visible"
+      direction="rtl"
+      size="30%"
+      :destroy-on-close="true"
+      :show-close="true"
+      :wrapper-closable="true"
+      @close="onClose"
+    >
+      <div class="panel">
+        <el-form ref="dataForm" :model="form" :rules="formRules" label-width="140px" :inline="false" size="normal">
+          <el-form-item label="目标环境" prop="target">
+            <el-select v-model="form.target" placeholder="请选择环境" filterable>
+              <el-option
+                v-for="item in targets"
+                :key="item._id"
+                :label="item.label"
+                :value="item"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="policies && policies.length" label="部署策略" size="normal">
+            <el-tag v-for="po in policies" :key="po._id" type="warning" size="medium" effect="dark" style="margin-right: 10px">
+              {{ po.name }}
+            </el-tag>
+          </el-form-item>
+          <el-form-item v-if="functions && functions.length" label="部署函数" size="normal">
+            <el-tag v-for="func in functions" :key="func._id" type="default" size="mini" style="margin-right: 10px;">
+              {{ func.name }} - {{ func.label }}
+            </el-tag>
+          </el-form-item>
+          <el-form-item label="部署说明" prop="comment">
+            <el-input
+              v-model="form.comment"
+              :autosize="{ minRows: 3, maxRows: 6}"
+              type="textarea"
+              placeholder="请说明本次部署修改了哪些信息"
+            />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button size="small">取消</el-button>
+            <el-button type="danger" plain size="small" @click="deploy">推送</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-drawer>
+
+  </div>
+</template>
+<script>
+import { db } from '@/api/cloud'
+import { deploy2remote } from '@/api/deploy'
+
+// 表单验证规则
+const formRules = {
+  target: [{ required: true, message: '目标环境不可为空', trigger: 'blur' }],
+  comment: [{ required: true, message: '部署说明不可为空', trigger: 'blur' }]
+}
+
+export default {
+  name: 'DeployPanel',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    policies: {
+      type: Array,
+      default: null
+    },
+    functions: {
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    return {
+      form: this.defaultForm(),
+      // 部署目标
+      targets: [],
+      formRules
+    }
+  },
+  computed: {
+    visible() {
+      return this.value
+    }
+  },
+  async mounted() {
+    const r = await db.collection('deploy_targets').get()
+    if (!r.ok) throw new Error('get targets failed')
+
+    this.targets = r.data
+  },
+  methods: {
+    deploy() {
+      this.$refs['dataForm'].validate(async(valid) => {
+        if (!valid) { return }
+        const data = {
+          policies: this.policies,
+          functions: this.functions,
+          comment: this.form.comment
+        }
+        const target = this.form.target
+        const r = await deploy2remote(target.url, target.token, data)
+        if (r.code === 0) {
+          this.$message.success('操作成功！')
+        }
+      })
+    },
+    defaultForm() {
+      return {
+        target: null,
+        comment: ''
+      }
+    },
+    onClose() {
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.deploy-comp {
+
+}
+</style>