fix: 针对后端调整，修改控制台 devops db 集合名称；优化部分页面交互体验；

Author: maslow

packages/devops-admin/src/api/constants.js

@@ -0,0 +1,24 @@
+const coll_prefix = 'devops_'
+
+const Constants = {
+  function_collection: '__deployed__functions',
+  trigger_collection: '__deployed__triggers',
+  policy_collection: '__deployed__policies',
+  coll_prefix: coll_prefix,
+  cn: {
+    admins: coll_prefix + 'admins',
+    permissions: coll_prefix + 'permissions',
+    roles: coll_prefix + 'roles',
+    policies: coll_prefix + 'policies',
+    functions: coll_prefix + 'functions',
+    function_history: coll_prefix + 'function_history',
+    triggers: coll_prefix + 'triggers',
+    deploy_targets: coll_prefix + 'deploy_targets',
+    deploy_requests: coll_prefix + 'deploy_requests'
+  }
+}
+
+Object.freeze(Constants)
+Object.freeze(Object.cn)
+
+export { Constants }

packages/devops-admin/src/views/database/collections.vue

@@ -3,7 +3,7 @@
     <div class="collec-wrap">
       <div class="filter-container">
         集合名称：
-        <el-select v-model="collectionName" filterable placeholder="请选择集合">
+        <el-select v-model="collectionName" size="mini" filterable placeholder="请选择集合">
           <el-option
             v-for="item in collections"
             :key="item"
@@ -14,19 +14,19 @@
       </div>
 
       <div style="text-align: center;">
-        <el-radio-group v-model="tabType" style="margin-left: 30px;">
+        <el-radio-group v-model="tabType" size="mini" style="margin-left: 30px;">
           <el-radio-button label="record">记录列表</el-radio-button>
           <el-radio-button label="index">索引管理</el-radio-button>
         </el-radio-group>
       </div>
 
       <!-- 记录 -->
       <div v-show="tabType === 'record'" style="margin: 10px 0;">
-        <el-input v-model.trim="listQuery._id" placeholder="请输入_id查找" style="width:200px" :disabled="!collectionName" @keyup.enter.native="handleFilter" />
-        <el-button type="primary" style="margin-left: 10px" icon="el-icon-search" :disabled="!collectionName" @click="handleFilter">搜索记录</el-button>
-        <el-button type="primary" style="margin-left: 10px" icon="el-icon-plus" :disabled="!collectionName" @click="handleCreateRecord">添加记录</el-button>
+        <el-input v-model.trim="listQuery._id" size="mini" placeholder="请输入_id查找" style="width:200px" :disabled="!collectionName" @keyup.enter.native="handleFilter" />
+        <el-button size="mini" type="primary" style="margin-left: 10px" icon="el-icon-search" :disabled="!collectionName" @click="handleFilter">搜索记录</el-button>
+        <el-button size="mini" type="primary" style="margin-left: 10px" icon="el-icon-plus" :disabled="!collectionName" @click="handleCreateRecord">添加记录</el-button>
       </div>
-      <el-container v-show="tabType === 'record'" style="height: 800px; border: 1px solid #eee">
+      <el-container v-show="tabType === 'record'" style="height: calc(100vh - 240px); border: 1px solid #eee">
         <el-aside width="300px" style="background-color: #fff;border: 1px solid #eee;padding: 8px;">
           <div v-for="item in list" :key="item._id" class="record-item" :class="getClass(item)" @click="getRecord(item)">
             <span class="">_id: {{ item._id }}</span>
@@ -50,7 +50,7 @@
             <el-button size="mini" type="primary" :disabled="!collectionName" @click="updateRecord">更新</el-button>
           </el-header>
           <el-main>
-            <json-editor v-model="record" :dark="true" :height="660" />
+            <json-editor v-model="record" class="db-editor" :line-numbers="true" :dark="false" :height="600" />
           </el-main>
         </el-container>
       </el-container>
@@ -356,4 +356,14 @@ export default {
       color: blue;
     }
   }
+
+  .el-main {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    // .db-editor {
+      // border: 1px solid lightgray
+    // }
+  }
 </style>

packages/devops-admin/src/views/database/policies.vue

@@ -139,6 +139,7 @@
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { db } from '../../api/cloud'
 import DeployPanel from '../deploy/components/deploy-panel.vue'
+import { Constants } from '../../api/constants'
 
 // 默认化创建表单的值
 function getDefaultFormValue() {
@@ -204,7 +205,7 @@ export default {
   },
   methods: {
     async getFunctions() {
-      const r = await db.collection('__functions')
+      const r = await db.collection(Constants.cn.functions)
         .where({ status: 1 })
         .get()
 
@@ -228,7 +229,7 @@ export default {
       }
 
       // 执行数据查询
-      const res = await db.collection('__policies')
+      const res = await db.collection(Constants.cn.policies)
         .where(query)
         .limit(limit)
         .skip((page - 1) * limit)
@@ -238,7 +239,7 @@ export default {
       this.list = res.data
 
       // 获取数据总数
-      const { total } = await db.collection('__policies')
+      const { total } = await db.collection(Constants.cn.policies)
         .where(query)
         .limit(limit)
         .skip((page - 1) * limit)
@@ -268,7 +269,7 @@ export default {
         if (!valid) { return }
 
         // 执行创建请求
-        const r = await db.collection('__policies')
+        const r = await db.collection(Constants.cn.policies)
           .add(this.form)
 
         if (!r.id) {
@@ -315,7 +316,7 @@ export default {
         }
 
         // 执行更新请求
-        const r = await db.collection('__policies')
+        const r = await db.collection(Constants.cn.policies)
           .where({ _id: this.form._id })
           .update(data)
 
@@ -343,7 +344,7 @@ export default {
       await this.$confirm('确认要删除此数据？', '删除确认')
 
       // 执行删除请求
-      const r = await db.collection('__policies')
+      const r = await db.collection(Constants.cn.policies)
         .where({ _id: row._id })
         .remove()
 

packages/devops-admin/src/views/database/policy.vue

@@ -17,7 +17,7 @@
     <div class="main-row">
       <div class="collection-list">
         <div class="label">选择集合</div>
-        <el-radio-group v-model="collection_name" style="width: 100%;">
+        <el-radio-group v-model="collection_name" class="radio-group">
           <el-radio v-for="item in collections" :key="item" class="collection-radio" border size="medium" :label="item">
             {{ item }}
           </el-radio>
@@ -29,7 +29,7 @@
           <el-button class="btn" size="mini" type="success" :disabled="loading" @click="updateRule">保存</el-button>
           <el-button class="btn" type="danger" size="mini" :disabled="loading" @click="removeRule">删除</el-button>
         </div>
-        <json-editor v-model="value" :dark="true" :height="600" />
+        <json-editor v-model="value" class="editor" :line-numbers="true" :dark="false" :height="600" />
       </div>
     </div>
 
@@ -76,6 +76,7 @@ import JsonEditor from '@/components/JsonEditor/rule'
 import { db } from '../../api/cloud'
 import $ from 'lodash'
 import { publishPolicy } from '../../api/publish'
+import { Constants } from '../../api/constants'
 
 const defaultValue = '{}'
 const defaultForm = {
@@ -125,7 +126,7 @@ export default {
   methods: {
     async getPolicies() {
       this.loading = true
-      const r = await db.collection('__policies')
+      const r = await db.collection(Constants.cn.policies)
         .get()
 
       if (!r.ok) {
@@ -154,7 +155,7 @@ export default {
       this.loading = true
       const rule_data = this.value
       const key = `rules.${this.collection_name}`
-      const r = await db.collection('__policies')
+      const r = await db.collection(Constants.cn.policies)
         .where({
           _id: this.policy_id
         })
@@ -187,7 +188,7 @@ export default {
       this.loading = true
 
       const key = `rules.${this.form.collection}`
-      const { total } = await db.collection('__policies')
+      const { total } = await db.collection(Constants.cn.policies)
         .where({
           _id: this.form.policy_id,
           [key]: db.command.exists(true)
@@ -198,7 +199,7 @@ export default {
         this.$message('该集合规则已存在！')
         return
       }
-      const r = await db.collection('__policies')
+      const r = await db.collection(Constants.cn.policies)
         .where({
           _id: this.form.policy_id,
           [key]: db.command.exists(false)
@@ -244,7 +245,7 @@ export default {
       this.loading = true
 
       const key = `rules.${this.collection_name}`
-      const r = await db.collection('__policies')
+      const r = await db.collection(Constants.cn.policies)
         .where({
           _id: this.policy_id,
           [key]: db.command.exists(true)
@@ -314,7 +315,9 @@ export default {
   display: flex;
 
   .collection-list {
-    width: 200px;
+    width: 250px;
+
+    padding-bottom: 10px;
     border-radius: 5px;
     box-sizing: border-box;
 
@@ -323,8 +326,20 @@ export default {
       color: gray;
       margin-bottom: 10px;
     }
-    .collection-radio {
+
+    .radio-group {
       width: 100%;
+      height: 640px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+
+    .radio-group::-webkit-scrollbar {
+        display: none;
+    }
+
+    .collection-radio {
+      width: 80%;
       margin-bottom: 10px;
       margin-left: 0px;
     }
@@ -340,12 +355,16 @@ export default {
       display: flex;
       width: 400px;
       justify-content: flex-start;
-      margin-bottom: 5px;
+      margin-bottom: 10px;
 
       .btn {
         margin-left: 15px;
       }
     }
+
+    .editor {
+      border: 1px solid lightgray
+    }
   }
 }
 

packages/devops-admin/src/views/deploy/components/deploy-panel.vue

@@ -59,6 +59,7 @@
 <script>
 import { db } from '@/api/cloud'
 import { deploy2remote } from '@/api/deploy'
+import { Constants } from '../../../api/constants'
 
 // 表单验证规则
 const formRules = {
@@ -120,7 +121,7 @@ export default {
   },
   methods: {
     async load() {
-      const r = await db.collection('deploy_targets').get()
+      const r = await db.collection(Constants.cn.deploy_targets).get()
       if (!r.ok) throw new Error('get targets failed')
 
       this.targets = r.data
@@ -131,7 +132,7 @@ export default {
         return
       }
       const func_ids = this.internal_functions.map(func => func._id)
-      const r = await db.collection('__triggers')
+      const r = await db.collection(Constants.cn.triggers)
         .where({
           func_id: db.command.in(func_ids)
         })

packages/devops-admin/src/views/deploy/requests.vue

@@ -139,6 +139,8 @@
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { db } from '@/api/cloud'
 import { applyDeployRequest, createDeployToken } from '../../api/deploy'
+import { Constants } from '../../api/constants'
+
 // 默认的创建部署令牌表单
 function getDefaultFormValue() {
   return {
@@ -214,7 +216,7 @@ export default {
       }
 
       // 执行数据查询
-      const res = await db.collection('deploy_requests')
+      const res = await db.collection(Constants.cn.deploy_requests)
         .where(query)
         .limit(limit)
         .skip((page - 1) * limit)
@@ -224,7 +226,7 @@ export default {
       this.list = res.data
 
       // 获取数据总数
-      const { total } = await db.collection('deploy_requests')
+      const { total } = await db.collection(Constants.cn.deploy_requests)
         .where(query)
         .limit(limit)
         .skip((page - 1) * limit)
@@ -296,7 +298,7 @@ export default {
       await this.$confirm('确认要删除此数据？', '删除确认')
 
       // 执行删除请求
-      const r = await db.collection('deploy_requests')
+      const r = await db.collection(Constants.cn.deploy_requests)
         .where({ _id: row._id })
         .remove()
 

packages/devops-admin/src/views/deploy/targets.vue

@@ -114,6 +114,7 @@
 <script>
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { db } from '@/api/cloud'
+import { Constants } from '../../api/constants'
 
 // 默认化创建表单的值
 function getDefaultFormValue() {
@@ -191,7 +192,7 @@ export default {
       }
 
       // 执行数据查询
-      const res = await db.collection('deploy_targets')
+      const res = await db.collection(Constants.cn.deploy_targets)
         .where(query)
         .limit(limit)
         .skip((page - 1) * limit)
@@ -201,7 +202,7 @@ export default {
       this.list = res.data
 
       // 获取数据总数
-      const { total } = await db.collection('deploy_targets')
+      const { total } = await db.collection(Constants.cn.deploy_targets)
         .where(query)
         .limit(limit)
         .skip((page - 1) * limit)
@@ -231,7 +232,7 @@ export default {
         if (!valid) { return }
 
         // 执行创建请求
-        const r = await db.collection('deploy_targets')
+        const r = await db.collection(Constants.cn.deploy_targets)
           .add(this.form)
 
         if (!r.id) {
@@ -277,7 +278,7 @@ export default {
         }
 
         // 执行更新请求
-        const r = await db.collection('deploy_targets')
+        const r = await db.collection(Constants.cn.deploy_targets)
           .where({ _id: this.form._id })
           .update(data)
 
@@ -305,7 +306,7 @@ export default {
       await this.$confirm('确认要删除此数据？', '删除确认')
 
       // 执行删除请求
-      const r = await db.collection('deploy_targets')
+      const r = await db.collection(Constants.cn.deploy_targets)
         .where({ _id: row._id })
         .remove()