Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions src/frontend/devops-op/src/api/fileSystem.js
Original file line number Diff line number Diff line change
@@ -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
}
})
}
7 changes: 7 additions & 0 deletions src/frontend/devops-op/src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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,
Expand Down
201 changes: 201 additions & 0 deletions src/frontend/devops-op/src/views/node/FileSystem.vue
Original file line number Diff line number Diff line change
@@ -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>
Loading