调整构建配置相关页面

src/router/background_devops.js

@@ -11,6 +11,7 @@ const Role = () => import('views/devops/rbac/Role')
 const User = () => import('views/devops/rbac/User')
 // machine
 const MachineHost = () => import('views/devops/machine/MachineHost')
+const AliyunOss = () => import('views/devops/machine/AliyunOss')
 const AliyunKey = () => import('views/devops/machine/AliyunKey')
 const MachineProc = () => import('views/devops/machine/MachineProc')
 const MachineTask = () => import('views/devops/machine/MachineTask')
@@ -91,6 +92,14 @@ export default {
           component: MachineHost,
           meta: { needAuth: true, roles: ['devops_admin'] }
         },
+        {
+          path: '/bg/machine/oss',
+          name: 'AliyunOss',
+          title: '阿里云 OSS',
+          icon: 'el-icon-s-data',
+          component: AliyunOss,
+          meta: { needAuth: true, roles: ['devops_admin'] }
+        },
         {
           path: '/bg/machine/aliyun_key',
           name: 'AliyunKey',

src/views/devops/build/Packer.vue

@@ -125,18 +125,18 @@
                 <el-form-item prop="artifactPath">
                   <span slot="label">
                     构建产物路径
-                    <el-tooltip content="构建完成后产物所在的相对路径，例如：dist/ 或 build/" placement="top">
+                    <el-tooltip content="构建完成后产物所在的相对路径，例如：dist/ 或 target/app.jar" placement="top">
                       <i class="el-icon-question" style="cursor: help; color: #909399;"></i>
                     </el-tooltip>
                   </span>
-                  <el-input v-model="form.artifactPath" placeholder="例如 /dist" clearable />
+                  <el-input v-model="form.artifactPath" placeholder="例如 dist/" clearable />
                   <div class="form-tip">源码根目录下的相对路径</div>
                 </el-form-item>
-                <el-form-item label="OSS Bucket" prop="ossEndpoint">
+                <el-form-item label="阿里云 OSS" prop="ossEndpoint">
                   <div class="oss-select-wrapper">
                     <el-select
                         v-model="form.ossEndpoint"
-                        placeholder="请选择阿里云 OSS Bucket"
+                        placeholder="请选择阿里云 OSS"
                         style="flex: 1"
                         filterable
                     >
@@ -148,29 +148,29 @@
                       />
                     </el-select>
 
-                    <el-tooltip content="添加新的 OSS Bucket" placement="top">
+                    <el-tooltip content="添加新的 OSS" placement="top">
                       <el-button
                           type="primary"
                           icon="el-icon-plus"
                           circle
                           size="small"
                           class="add-bucket-btn"
-                          @click="goToAddBucket"
+                          @click="goToAddOss"
                       />
                     </el-tooltip>
                   </div>
-                  <div class="form-tip">构建生成的静态产物将自动上传并同步至该 Bucket</div>
+                  <div class="form-tip">构建生成的静态产物将自动上传并同步至该 OSS, 应用部署配置中会指定使用的 bucket</div>
                 </el-form-item>
               </div>
               <div v-else>
                 <el-form-item prop="artifactPath">
                   <span slot="label">
                     构建产物路径
-                    <el-tooltip content="构建完成后产物所在的相对路径，例如：dist/ 或 build/" placement="top">
+                    <el-tooltip content="构建完成后产物所在的相对路径，例如：dist/ 或 target/app.jar" placement="top">
                       <i class="el-icon-question" style="cursor: help; color: #909399;"></i>
                     </el-tooltip>
                   </span>
-                  <el-input v-model="form.artifactPath" placeholder="例如 /dist" clearable />
+                  <el-input v-model="form.artifactPath" placeholder="例如 dist/" clearable />
                   <div class="form-tip">源码根目录下的相对路径</div>
                 </el-form-item>
               </div>
@@ -192,6 +192,13 @@
         center
     >
     </el-dialog>
+    <el-dialog
+      title="添加阿里云 OSS"
+      append-to-body
+      :visible.sync="showAddOssDialog"
+      center
+    >
+    </el-dialog>
   </el-container>
 </template>
 
@@ -230,6 +237,11 @@ export default {
       showAddRegistryDialog: false,
       registryForm: {
         registryUrl: ''
+      },
+      // **********************************************************************
+      showAddOssDialog: false,
+      ossForm: {
+        ossEndpoint: ''
       }
     }
   },
@@ -358,8 +370,8 @@ export default {
     goToAddRegistry() {
       this.showAddRegistryDialog = true
     },
-    goToAddBucket() {
-      this.showAddRegistryDialog = true
+    goToAddOss() {
+      this.showAddOssDialog = true
     }
   }
 }

src/views/devops/machine/AliyunKey.vue

@@ -15,18 +15,16 @@
           label="类型"
         />
         <el-table-column
-          prop="endpoint"
-          label="Endpoint"
+          prop="name"
+          label="名字"
         />
         <el-table-column
-          prop="accessKeyId"
-          label="AccessKeyId"
-          :show-overflow-tooltip="true"
+          prop="endpoint"
+          label="Endpoint"
         />
         <el-table-column
-          prop="accessKeySecret"
-          label="AccessKeySecret"
-          :show-overflow-tooltip="true"
+          prop="repoAuthName"
+          label="仓库认证名字"
         />
         <el-table-column
           fixed="right"

src/views/devops/machine/AliyunOss.vue

@@ -0,0 +1,335 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 5px">
+        <h3>阿里云 OSS bucket 列表</h3>
+        <el-button type="text" style="margin-left: 5px" @click="handleAdd">添加</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="aliyunOssList"
+        border
+        height="480"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="machineId"
+          label="机器 ID"
+        />
+        <el-table-column
+          prop="used"
+          label="使用量"
+        >
+          <template slot-scope="scope">
+            <el-tag disable-transitions>
+              <span>{{ scope.row.used }}</span>
+            </el-tag>
+            <el-button
+              style="margin-top: 5px; margin-left: 5px"
+              size="mini"
+              type="success"
+              @click="handleMachineUsage(scope.$index, scope.row)"
+            >查看</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="env"
+          label="所属环境"
+        >
+          <template slot-scope="scope">
+            <el-tag style="margin: 5px">{{ scope.row.env }}</el-tag>
+            <el-button
+              size="mini"
+              type="success"
+              @click="handleEditEnv(scope.$index, scope.row)"
+            >设置</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-main>
+
+    <!-- 修改所属环境对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditEnvDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改机器所属环境</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateEnv">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-select v-model="form.env" placeholder="设置环境">
+            <el-option
+              v-for="(item, index) in envList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </el-card>
+    </el-dialog>
+    <el-dialog
+      title="机器中部署的应用"
+      append-to-body
+      :visible.sync="showUsageDialog"
+      center
+    >
+      <template>
+        <el-table
+          :data="machineUsedList"
+          style="width: 100%"
+        >
+          <el-table-column
+            prop="label"
+            label="应用 ID"
+          />
+          <el-table-column
+            prop="value"
+            label="应用名"
+          />
+        </el-table>
+      </template>
+    </el-dialog>
+    <el-dialog
+      title="添加阿里云 OSS bucket"
+      append-to-body
+      :visible.sync="showAddDialog"
+      width="50%"
+      center
+    >
+      <template>
+        <el-form :model="addForm" label-width="80px">
+          <el-form-item label="bucket 名字" style="width: 70%; padding-right: 2px">
+            <el-input v-model="addForm.machineId" style="width: 70%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item label="所属环境">
+            <el-select v-model="addForm.env" placeholder="选择所属环境">
+              <el-option
+                v-for="(item, index) in envList"
+                :key="index"
+                :label="item.label"
+                :value="item.label"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onAdd">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import {
+  addAliyunOss,
+  deleteMachine,
+  getAliyunOss,
+  getEnvList,
+  getMachineUsedList,
+  updateMachineEnv
+} from '@/api/devops'
+
+export default {
+  name: 'AliyunOss',
+  data() {
+    return {
+      queryInfo: {
+        pn: 1,
+        env: null
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      nextId: 0,
+      // **********************************************************************
+      showEditEnvDialog: false,
+      form: {
+        machineId: null,
+        env: null
+      },
+      envList: [],
+      showUsageDialog: false,
+      machineUsedList: [],
+      // **********************************************************************
+      aliyunOssList: [],
+      showAddDialog: false,
+      addForm: {
+        machineId: null,
+        env: 'prod'
+      }
+    }
+  },
+  created() {
+    getEnvList().then(resp => {
+      if (resp.code === 0) {
+        this.queryInfo.env = resp.data.userEnv
+        this.envList = resp.data.envList
+
+        const env = this.$route.query.env
+        if (env !== undefined && env !== null) {
+          this.queryInfo.env = env
+        }
+        const pageNumber = this.$route.query.pn
+        if (pageNumber !== undefined && pageNumber !== null) {
+          this.currentPage = parseInt(pageNumber)
+          this.queryInfo.pn = parseInt(pageNumber)
+        }
+
+        this.getData()
+      } else {
+        this.$message.error(resp.msg)
+      }
+    }).catch(error => {
+      this.$message.error(error.message)
+    })
+
+    document.title = '阿里云 OSS bucket 列表'
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.queryInfo.pn = pageNumber
+      this.$router.push({
+        path: '/bg/machine/host',
+        query: this.queryInfo
+      })
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      this.aliyunOssList = []
+      getAliyunOss().then(resp => {
+        if (resp.code === 0) {
+          this.aliyunOssList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleEditEnv(index, row) {
+      this.form.machineId = row.machineId
+      this.form.env = this.queryInfo.env
+      this.showEditEnvDialog = true
+    },
+    onUpdateEnv() {
+      this.showEditEnvDialog = false
+      const formData = new FormData()
+      formData.append('machineId', this.form.machineId)
+      formData.append('env', this.form.env)
+      updateMachineEnv(formData).then(resp => {
+        this.getData()
+        this.$message.info(resp.msg)
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleMachineUsage(index, row) {
+      this.form.machineId = row.machineId
+      getMachineUsedList(row.machineId).then(resp => {
+        if (resp.code === 0) {
+          this.showUsageDialog = true
+          this.machineUsedList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    onSelectChange() {
+      this.currentPage = 1
+      this.queryInfo.pn = 1
+      this.$router.push({
+        path: '/bg/machine/host',
+        query: this.queryInfo
+      })
+      this.getData()
+    },
+    handleDelete(index, row) {
+      this.$confirm('确定要删除 ' + row.machineIpv4 + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const formData = new FormData()
+        formData.append('machineId', row.machineId)
+        deleteMachine(formData).then(resp => {
+          this.$message.info(resp.msg)
+        }).catch(error => {
+          this.$message.error(error.message)
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    handleGetAliyunOss() {
+      getAliyunOss().then(resp => {
+        if (resp.code === 0) {
+          this.aliyunOssList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    handleAdd() {
+      this.showAddDialog = true
+    },
+    onAdd() {
+      const formData = new FormData()
+      formData.append('machineId', this.addForm.machineId)
+      formData.append('env', this.addForm.env)
+      addAliyunOss(formData).then(resp => {
+        this.$message.info(resp.msg)
+        this.handleGetAliyunOss()
+      }).catch(error => {
+        this.$message.error(error.message)
+      }).finally(() => {
+        this.showAddDialog = false
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/devops/machine/MachineHost.vue

@@ -16,7 +16,6 @@
             :value="item.value"
           />
         </el-select>
-        <el-button type="text" style="margin-left: 5px" @click="handleGetAliyunOss">阿里云OSS</el-button>
       </el-row>
     </el-header>
     <el-main>
@@ -171,105 +170,13 @@
         </el-table>
       </template>
     </el-dialog>
-    <el-dialog
-      title="阿里云 OSS bucket 列表"
-      append-to-body
-      :visible.sync="showAliyunOssDialog"
-      width="50%"
-      center
-    >
-      <template>
-        <el-button type="text" style="margin-left: 5px" @click="handleAdd">添加</el-button>
-        <el-table
-          :data="aliyunOssList"
-          border
-          height="480"
-          style="width: 100%"
-        >
-          <el-table-column
-            prop="machineId"
-            label="机器 ID"
-          />
-          <el-table-column
-            prop="used"
-            label="使用量"
-          >
-            <template slot-scope="scope">
-              <el-tag disable-transitions>
-                <span>{{ scope.row.used }}</span>
-              </el-tag>
-              <el-button
-                style="margin-top: 5px; margin-left: 5px"
-                size="mini"
-                type="success"
-                @click="handleMachineUsage(scope.$index, scope.row)"
-              >查看</el-button>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="env"
-            label="所属环境"
-          >
-            <template slot-scope="scope">
-              <el-tag style="margin: 5px">{{ scope.row.env }}</el-tag>
-              <el-button
-                size="mini"
-                type="success"
-                @click="handleEditEnv(scope.$index, scope.row)"
-              >设置</el-button>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            width="180"
-          >
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="danger"
-                @click="handleDelete(scope.$index, scope.row)"
-              >删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </template>
-    </el-dialog>
-    <el-dialog
-      title="添加阿里云 OSS bucket"
-      append-to-body
-      :visible.sync="showAddDialog"
-      width="50%"
-      center
-    >
-      <template>
-        <el-form :model="addForm" label-width="80px">
-          <el-form-item label="bucket 名字" style="width: 70%; padding-right: 2px">
-            <el-input v-model="addForm.machineId" style="width: 70%; padding-right: 2px" />
-          </el-form-item>
-          <el-form-item label="所属环境">
-            <el-select v-model="addForm.env" placeholder="选择所属环境">
-              <el-option
-                v-for="(item, index) in envList"
-                :key="index"
-                :label="item.label"
-                :value="item.label"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onAdd">确定</el-button>
-          </el-form-item>
-        </el-form>
-      </template>
-    </el-dialog>
   </el-container>
 </template>
 
 <script>
 import {
-  addAliyunOss,
   deleteMachine,
-  deprecateMachine, getAliyunOss,
+  deprecateMachine,
   getEnvList,
   getMachineList,
   getMachineUsedList,
@@ -299,15 +206,7 @@ export default {
       },
       envList: [],
       showUsageDialog: false,
-      machineUsedList: [],
-      // **********************************************************************
-      showAliyunOssDialog: false,
-      aliyunOssList: [],
-      showAddDialog: false,
-      addForm: {
-        machineId: null,
-        env: 'prod'
-      }
+      machineUsedList: []
     }
   },
   created() {
@@ -429,34 +328,6 @@ export default {
           message: '已取消'
         })
       })
-    },
-    handleGetAliyunOss() {
-      getAliyunOss().then(resp => {
-        if (resp.code === 0) {
-          this.aliyunOssList = resp.data
-          this.showAliyunOssDialog = true
-        } else {
-          this.$message.error(resp.msg)
-        }
-      }).catch(error => {
-        this.$message.error(error.message)
-      })
-    },
-    handleAdd() {
-      this.showAddDialog = true
-    },
-    onAdd() {
-      const formData = new FormData()
-      formData.append('machineId', this.addForm.machineId)
-      formData.append('env', this.addForm.env)
-      addAliyunOss(formData).then(resp => {
-        this.$message.info(resp.msg)
-        this.handleGetAliyunOss()
-      }).catch(error => {
-        this.$message.error(error.message)
-      }).finally(() => {
-        this.showAddDialog = false
-      })
     }
   }
 }