feat:admin增加文件系统客户端管理 TencentBlueKing#1357 (TencentBlueKing#1376)

* feat:admin增加文件系统客户端管理 TencentBlueKing#1357 * feat:admin增加文件系统客户端管理 TencentBlueKing#1357 * feat:admin增加文件系统客户端管理 TencentBlueKing#1357
yaoxuwan · Nov 6, 2023 · 3a9fa09 · 3a9fa09
1 parent 8b5449c
commit 3a9fa09
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 0 deletions.
diff --git a/src/frontend/devops-op/src/api/fileSystem.js b/src/frontend/devops-op/src/api/fileSystem.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export const DEFAULT_PAGE_SIZE = 10
+const PREFIX = '/opdata/api/fs-client'
+
+export function queryFileSystemClient(projectId, repoName, pageNumber) {
+  return request({
+    url: `${PREFIX}/list/`,
+    method: 'get',
+    params: {
+      pageNumber: pageNumber,
+      pageSize: DEFAULT_PAGE_SIZE,
+      projectId: projectId,
+      repoName: repoName
+    }
+  })
+}
diff --git a/src/frontend/devops-op/src/router/index.js b/src/frontend/devops-op/src/router/index.js
@@ -20,6 +20,7 @@ export const ROUTER_NAME_FILTER_RULE = 'FilterRule'
 export const ROUTER_NAME_JOB = 'Job'
 export const ROUTER_NAME_SHED_LOCK = 'Shedlock'
 export const ROUTER_NAME_PROJECT_METRICS = 'ProjectMetrics'
+export const ROUTER_NAME_FILE_SYSTEM = 'FileSystem'
 
 Vue.use(Router)
 
@@ -133,6 +134,12 @@ export const asyncRoutes = [
         meta: { title: '文件管理', icon: 'file' },
         component: () => import('@/views/node/index')
       },
+      {
+        path: 'fileSystem',
+        name: ROUTER_NAME_FILE_SYSTEM,
+        meta: { title: '客户端管理', icon: 'file' },
+        component: () => import('@/views/node/FileSystem')
+      },
       {
         path: 'emptyFolder',
         name: ROUTER_NAME_EMPTY_FOLDER,

diff --git a/src/frontend/devops-op/src/views/node/FileSystem.vue b/src/frontend/devops-op/src/views/node/FileSystem.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="app-container node-container">
+    <el-form ref="form" :inline="true" :model="clientQuery">
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId" required>
+        <el-autocomplete
+          v-model="clientQuery.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"
+        style="margin-left: 15px"
+        label="仓库"
+        prop="repoName"
+        required
+      >
+        <el-autocomplete
+          v-model="clientQuery.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!clientQuery.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="!clientQuery.repoName"
+          @click="changeRouteQueryParams(1)"
+        >查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="clients" style="width: 100%">
+      <el-table-column prop="projectId" label="项目ID" />
+      <el-table-column prop="repoName" label="仓库名称" />
+      <el-table-column prop="mountPoint" label="挂载点" />
+      <el-table-column prop="userId" label="用户ID" />
+      <el-table-column prop="ip" label="IP" />
+      <el-table-column prop="version" label="版本" />
+      <el-table-column prop="os" label="操作系统" />
+      <el-table-column prop="arch" label="架构" />
+      <el-table-column prop="online" label="是否在线">
+        <template slot-scope="scope">
+          {{ scope.row.online ? "是":"否" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="heartbeatTime" label="心跳时间">
+        <template slot-scope="scope">
+          <span>{{ formatNormalDate(scope.row.heartbeatTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top:20px">
+      <el-pagination
+        v-if="total>0"
+        :current-page="clientQuery.pageNumber"
+        :page-size="clientQuery.pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { queryFileSystemClient } from '@/api/fileSystem'
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+import { formatNormalDate } from '@/utils/date'
+
+export default {
+  name: 'FileSystem',
+  data() {
+    return {
+      loading: false,
+      projects: undefined,
+      repoCache: {},
+      total: 0,
+      clientQuery: {
+        projectId: '',
+        repoName: '',
+        pageNumber: 1
+      },
+      clients: []
+    }
+  },
+  mounted() {
+    this.onRouteUpdate(this.$route)
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
+  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.clientQuery.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.clientQuery.projectId]
+      if (!repositories) {
+        listRepositories(this.clientQuery.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.clientQuery.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.clientQuery.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changeRouteQueryParams(val)
+    },
+    changeRouteQueryParams(pageNum) {
+      const query = {
+        page: String(pageNum)
+      }
+      query.projectId = this.clientQuery.projectId
+      query.repoName = this.clientQuery.repoName
+      this.$router.push({ path: '/nodes/FileSystem', query: query })
+    },
+    onRouteUpdate(route) {
+      const query = route.query
+      const clientQuery = this.clientQuery
+      if (!query.projectId) {
+        return
+      }
+      clientQuery.projectId = query.projectId ? query.projectId : ''
+      clientQuery.repoName = query.repoName ? query.repoName : ''
+      clientQuery.pageNumber = query.page ? Number(query.page) : 1
+      this.$nextTick(() => {
+        this.queryClients(clientQuery)
+      })
+    },
+    queryClients(clientQuery) {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.doQueryClients(clientQuery)
+        } else {
+          return false
+        }
+      })
+    },
+    doQueryClients(clientQuery) {
+      this.loading = true
+      let promise = null
+      promise = queryFileSystemClient(clientQuery.projectId, clientQuery.repoName, clientQuery.pageNumber)
+      promise.then(res => {
+        this.clients = res.data.records
+        this.total = res.data.totalRecords
+      }).catch(_ => {
+        this.clients = []
+        this.total = 0
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    formatNormalDate(data) {
+      return formatNormalDate(data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style>
+</style>