feat: 增加制品预加载功能管理页面 #2683

src/backend/repository/biz-repository/src/main/kotlin/com/tencent/bkrepo/repository/controller/user/UserArtifactPreloadController.kt

@@ -98,9 +98,10 @@ class UserArtifactPreloadController(
         @PathVariable projectId: String,
         @PathVariable repoName: String,
         @PathVariable id: String,
-    ) {
+    ): Response<Void> {
         checkPreloadEnabled(preloadPlanService, preloadStrategyService)
         preloadStrategyService.delete(projectId, repoName, id)
+        return ResponseBuilder.success()
     }
 
     @ApiOperation("获取所有预加载策略")
@@ -143,9 +144,10 @@ class UserArtifactPreloadController(
         @PathVariable projectId: String,
         @PathVariable repoName: String,
         @PathVariable id: String,
-    ) {
+    ): Response<Void> {
         checkPreloadEnabled(preloadPlanService, preloadStrategyService)
         preloadPlanService.deletePlan(projectId, repoName, id)
+        return ResponseBuilder.success()
     }
 
     @ApiOperation("删除仓库的所有预加载计划")
@@ -154,9 +156,10 @@ class UserArtifactPreloadController(
     fun deleteAllPlans(
         @PathVariable projectId: String,
         @PathVariable repoName: String,
-    ) {
+    ): Response<Void> {
         checkPreloadEnabled(preloadPlanService, preloadStrategyService)
         preloadPlanService.deletePlan(projectId, repoName)
+        return ResponseBuilder.success()
     }
 
     private fun checkPreloadEnabled(

src/frontend/devops-op/package.json

@@ -33,7 +33,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~5.0.1",
+    "@vue/cli-service": "~5.0.8",
     "autoprefixer": "9.5.1",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "chalk": "2.4.2",

src/frontend/devops-op/src/api/preload.js

@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+
+const PREFIX_SERVICES = '/repository/api/preload'
+
+export function queryStrategies(projectId, repoName) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/${projectId}/${repoName}`,
+    method: 'get'
+  })
+}
+
+export function deleteStrategy(projectId, repoName, id) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/${projectId}/${repoName}/${id}`,
+    method: 'delete'
+  })
+}
+
+export function createStrategy(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/`,
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateStrategy(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/`,
+    method: 'put',
+    data: data
+  })
+}
+
+export function createPlan(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/`,
+    method: 'post',
+    data: data
+  })
+}
+
+export function queryPlans(body) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/${body.projectId}/${body.repoName}`,
+    method: 'get',
+    params: {
+      pageNumber: body.pageNumber,
+      pageSize: body.pageSize
+    }
+  })
+}
+
+export function deletePlan(projectId, repoName, id) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/${projectId}/${repoName}/${id}`,
+    method: 'delete'
+  })
+}
+
+export function deletePlans(projectId, repoName) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/${projectId}/${repoName}`,
+    method: 'delete'
+  })
+}

src/frontend/devops-op/src/router/index.js

@@ -25,6 +25,7 @@ export const ROUTER_NAME_FILE_CACHE = 'FileCache'
 export const ROUTER_NAME_FILE_SYSTEM_RECORD = 'FileSystemRecord'
 export const ROUTER_NAME_REPO_CONFIG = 'RepoConfig'
 export const ROUTER_NAME_RATE_LIMITER_CONFIG = 'RateLimiterConfig'
+export const ROUTER_NAME_PRELOAD_CONFIG = 'PreloadConfig'
 
 Vue.use(Router)
 
@@ -326,6 +327,18 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/preload-config',
+    component: Layout,
+    children: [
+      {
+        path: '/',
+        name: ROUTER_NAME_PRELOAD_CONFIG,
+        meta: { title: '制品预加载配置', icon: 'service-config' },
+        component: () => import('@/views/preload/index')
+      }
+    ]
+  },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/frontend/devops-op/src/views/preload/components/EditPlanConfigDialog.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-dialog title="创建预加载计划配置" :visible.sync="showDialog" :before-close="close">
+    <el-form ref="form" :rules="rules" :model="plan" status-icon>
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId" :rules="[{ required: true, message: '项目ID不能为空'}]">
+        <el-autocomplete
+          v-model="plan.projectId"
+          class="inline-input"
+          :fetch-suggestions="queryProjects"
+          placeholder="请输入项目ID"
+          size="mini"
+          @select="selectProject"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        ref="repo-form-item"
+        label="仓库名称"
+        prop="repoName"
+        :rules="[{ required: true, message: '仓库名不能为空'}]"
+      >
+        <el-autocomplete
+          v-model="plan.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!plan.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item label="文件路径" prop="fullPath" :rules="[{ required: true, message: '文件路径不能为空'}]">
+        <el-input v-model="plan.fullPath" style="height: 40px ; width: 500px;" />
+      </el-form-item>
+      <el-form-item label="预加载计划执行毫秒时间戳" prop="executeTime">
+        <el-date-picker
+          v-model="plan.executeTime"
+          type="datetime"
+          placeholder="选择日期时间"
+          default-time="12:00:00"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="handleUpdate()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { createPlan } from '@/api/preload'
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+
+export default {
+  name: 'EditPlanConfigDialog',
+  props: {
+    visible: Boolean,
+    createMode: Boolean,
+    /**
+     * 仅在更新模式时有值
+     */
+    updatingPlanConfig: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      repoCache: {},
+      projects: undefined,
+      showDialog: this.visible,
+      plan: this.newPlan(),
+      rules: {}
+    }
+  },
+  watch: {
+    visible: function(newVal) {
+      if (newVal) {
+        this.resetPlan()
+        this.showDialog = true
+      } else {
+        this.close()
+      }
+    }
+  },
+  methods: {
+    queryProjects(queryStr, cb) {
+      searchProjects(queryStr).then(res => {
+        this.projects = res.data.records
+        cb(this.projects)
+      })
+    },
+    selectProject(project) {
+      this.$refs['project-form-item'].resetField()
+      this.plan.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.plan.projectId]
+      if (!repositories) {
+        listRepositories(this.plan.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.plan.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.plan.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    resetPlan() {
+      this.plan = this.newPlan()
+      this.$nextTick(() => {
+        this.$refs['form'].clearValidate()
+      })
+    },
+    newPlan() {
+      const plan = {
+        projectId: '',
+        repoName: '',
+        executeTime: '',
+        fullPath: ''
+      }
+      return plan
+    },
+    close(changed) {
+      this.showDialog = false
+      this.$refs['form'].resetFields()
+      if (changed === true) {
+        this.$emit('updated')
+      }
+      this.$emit('update:visible', false)
+    },
+    handleUpdate() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.plan.executeTime = this.plan.executeTime.getTime()
+          createPlan(this.plan).then(() => {
+            this.$message.success('新建配置成功')
+            this.close(true)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>