feat(devops): impl file managing in devops admin & server

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

@@ -0,0 +1,83 @@
+
+import { assert } from '@/utils/assert'
+import request from '@/utils/request'
+
+/**
+ * Get bucket list
+ * @returns
+ */
+export async function getFileBuckets() {
+  const res = await request({
+    url: `/file/buckets`,
+    method: 'get'
+  })
+
+  assert(res.code === 0, 'get file buckets got error', res)
+  return res
+}
+
+/**
+ * Create a bucket
+ * @param {string} bucketName
+ * @returns {Promise<any[]>}
+ */
+export async function createFileBucket(bucketName) {
+  const res = await request({
+    url: `/file/buckets`,
+    method: 'post',
+    data: {
+      bucket: bucketName
+    }
+  })
+
+  return res
+}
+
+/**
+ * Delete a bucket
+ * @param {string} bucketName
+ * @returns
+ */
+export async function deleteFileBucket(bucketName) {
+  const res = await request({
+    url: `/file/buckets/${bucketName}`,
+    method: 'delete'
+  })
+
+  return res
+}
+
+/**
+ * Get file list in a bucket
+ * @param {string} bucketName
+ * @returns
+ */
+export async function getFilesByBucketName(bucketName, { offset, limit }) {
+  assert(bucketName, 'empty `bucketName` got')
+  const _offset = offset || 0
+  const _limit = limit || 10
+  const res = await request({
+    url: `/file/${bucketName}/files?offset=${_offset}&limit=${_limit}`,
+    method: 'GET'
+  })
+  assert(res.code === 0, `get files in ${bucketName} got error`, res)
+  return res
+}
+
+/**
+ * Delete a file by its id in a bucket
+ * @param {string} bucketName
+ * @param {string} file_id
+ * @returns
+ */
+export async function deleteFileById(bucketName, file_id) {
+  assert(bucketName, 'empty bucketName got')
+  assert(file_id, 'empty file_id got')
+
+  const res = await request({
+    url: `/file/${bucketName}/${file_id}`,
+    method: 'DELETE'
+  })
+
+  return res
+}

packages/devops-admin/src/router/async.js

@@ -107,6 +107,29 @@ export const asyncRoutes = [
           icon: 'example',
           permissions: ['database.manage', 'collections.get', 'collections.createIndex', 'collections.deleteIndex']
         }
+      },
+      {
+        path: 'buckets',
+        component: () => import('@/views/database/buckets'),
+        name: 'FileBucketListPage',
+        meta: {
+          title: '文件管理',
+          icon: 'zip',
+          noCache: true,
+          permissions: ['file.read']
+        }
+      },
+      {
+        path: 'files/:bucket',
+        component: () => import('@/views/database/files'),
+        name: 'FileListPage',
+        hidden: true,
+        meta: {
+          title: '文件列表',
+          icon: 'documentation',
+          noCache: true,
+          permissions: ['file.read']
+        }
       }
     ]
   },

packages/devops-admin/src/store/modules/user.js

@@ -1,5 +1,5 @@
 import { login, getInfo } from '@/api/user'
-import { getToken, setToken, removeToken, setDebugToken, removeDebugToken } from '@/utils/auth'
+import { getToken, setToken, removeToken, setDebugToken, removeDebugToken, setFileToken, removeFileToken } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
 
 const state = {
@@ -44,6 +44,9 @@ const actions = {
         if (data.debug_token) {
           setDebugToken(data.debug_token)
         }
+        if (data.file_token) {
+          setFileToken(data.file_token)
+        }
         resolve()
       }).catch(error => {
         reject(error)
@@ -92,6 +95,7 @@ const actions = {
 
       removeToken()
       removeDebugToken()
+      removeFileToken()
       resetRouter()
 
       // reset visited views and cached views

packages/devops-admin/src/utils/assert.js

@@ -0,0 +1,13 @@
+/*
+ * @Author: Maslow<wangfugen@126.com>
+ * @Date: 2021-08-17 21:12:41
+ * @LastEditTime: 2021-08-17 21:14:07
+ * @Description:
+ */
+
+export function assert(expr, message, ...params) {
+  if (!expr) {
+    console.error(message, params)
+    throw new Error(message)
+  }
+}

packages/devops-admin/src/utils/auth.js

@@ -39,3 +39,19 @@ export function setDebugToken(token) {
 export function removeDebugToken() {
   return localStorage.removeItem('debug_token')
 }
+
+/**
+ * 获取文件上传下载的 token
+ */
+export function getFileToken() {
+  const token = localStorage.getItem('file_token')
+  return token
+}
+
+export function setFileToken(token) {
+  return localStorage.setItem('file_token', token)
+}
+
+export function removeFileToken() {
+  return localStorage.removeItem('file_token')
+}

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="app-container">
+    <!-- 数据检索区 -->
+    <div class="filter-container">
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
+        刷新
+      </el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="showCreateForm">
+        新建
+      </el-button>
+    </div>
+
+    <!-- 表格 -->
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;"
+    >
+      <el-table-column label="序号" align="center" width="240">
+        <template slot-scope="{$index}">
+          <span>{{ $index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="标识">
+        <template slot-scope="{row}">
+          <span>{{ row }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" class-name="small-padding">
+        <template slot-scope="{row, $index}">
+          <el-button type="success" size="mini" @click="handleShowDetail(row)">
+            详情
+          </el-button>
+          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 表单对话框 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="form"
+        label-position="left"
+        label-width="70px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item label="标识" prop="name">
+          <el-input v-model="form.name" placeholder="唯一标识" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?handleCreate():handleUpdate()">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as fs from '@/api/file'
+
+// @TODO
+// 默认化创建表单的值
+function getDefaultFormValue() {
+  return {
+    name: ''
+  }
+}
+
+// 表单验证规则
+const formRules = {
+  name: [{ required: true, message: 'bucket 名字不可为空', trigger: 'blur' }]
+}
+
+export default {
+  name: 'BucketsListPage',
+  components: { },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        keyword: undefined
+      },
+      form: getDefaultFormValue(),
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '创建'
+      },
+      rules: formRules,
+      downloadLoading: false
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /**
+     * 获取数据列表
+     */
+    async getList() {
+      this.listLoading = true
+
+      // 执行数据查询
+      const ret = await fs.getFileBuckets().catch(() => { this.listLoading = false })
+      this.list = ret.data
+
+      this.listLoading = false
+    },
+    // 显示创建表单
+    showCreateForm() {
+      this.form = getDefaultFormValue()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 创建请求
+    handleCreate() {
+      this.$refs['dataForm'].validate(async(valid) => {
+        if (!valid) { return }
+
+        // 执行创建请求
+        const r = await fs.createFileBucket(this.form.name)
+
+        if (r.code) {
+          this.$notify({
+            type: 'error',
+            title: '操作失败',
+            message: '创建失败！' + r.error
+          })
+          return
+        }
+
+        this.$notify({
+          type: 'success',
+          title: '操作成功',
+          message: '创建成功！'
+        })
+
+        this.getList()
+        this.dialogFormVisible = false
+      })
+    },
+    // 删除请求
+    async handleDelete(row, index) {
+      await this.$confirm('确认要删除此数据？', '删除确认')
+
+      // 执行删除请求
+      const r = await fs.deleteFileBucket(row)
+
+      if (r.code) {
+        this.$notify({
+          type: 'error',
+          title: '操作失败',
+          message: '删除失败:' + r.error
+        })
+        return
+      }
+
+      this.$notify({
+        type: 'success',
+        title: '操作成功',
+        message: '删除成功！'
+      })
+
+      this.list.splice(index, 1)
+    },
+    // 查看详情
+    async handleShowDetail(row) {
+      // 跳转到详情页
+      this.$router.push(`files/${row}`)
+    }
+  }
+}
+</script>