feat:二进制页面修改 #1012

src/frontend/devops-repository/src/components/Loading/loading.vue

@@ -0,0 +1,88 @@
+<template>
+    <bk-dialog
+        :position="{ top }"
+        header-position="left"
+        :title="title"
+        width="600"
+        v-model="isShow">
+        <slot></slot>
+        <div class="message">
+            <Icon v-if="!complete" name="loading" size="20" class="svg-loading" />
+            <Icon v-if="complete" name="check" size="20" class="svg-complete" />
+            <span>{{ message }}</span>
+        </div>
+        <template #footer>
+            <slot name="footer">
+                <bk-button @click="isShow = false" v-if="!complete">{{$t('cancel')}}</bk-button>
+                <bk-button theme="primary" @click="isShow = false" v-if="complete">{{$t('confirm')}}</bk-button>
+            </slot>
+        </template>
+    </bk-dialog>
+</template>
+<script>
+    import { debounce } from '@repository/utils'
+    export default {
+        name: 'loadingDialog',
+        props: {
+            heightNum: {
+                type: [String, Number],
+                default: 600
+            }
+        },
+        data () {
+            return {
+                MODE_CONFIG,
+                title: '',
+                isShow: false,
+                message: this.$t('loadingMsg'),
+                complete: false
+            }
+        },
+        computed: {
+            top () {
+                return 300
+            }
+        },
+        mounted () {
+            this.resizeFn = debounce(this.getBodyHeight, 1000)
+            window.addEventListener('resize', this.resizeFn)
+        },
+        beforeDestroy () {
+            this.message = this.$t('loadingMsg')
+            window.removeEventListener('resize', this.resizeFn)
+        },
+        methods: {
+            getBodyHeight () {
+                this.bodyHeight = document.body.getBoundingClientRect().height
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+.bk-dialog-content bk-dialog-content-drag{
+    width: 500px !important;
+}
+.message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    font-size: 16px;
+    .svg-loading {
+        margin-right: 10px;
+        animation: rotate-loading 1s linear infinite;
+    }
+    .svg-complete {
+        margin-right: 10px;
+    }
+    @keyframes rotate-loading {
+        0% {
+            transform: rotateZ(0);
+        }
+
+        100% {
+            transform: rotateZ(360deg);
+        }
+    }
+}
+</style>

src/frontend/devops-repository/src/store/actions/repoGeneric.js

@@ -315,5 +315,17 @@ export default {
         return Vue.prototype.$ajax.get(
             `generic/compressed/preview/${projectId}/${repoName}${path}?filePath=${filePath}`
         )
+    },
+    getProjectMetrics (_, { projectId }) {
+        return Vue.prototype.$ajax.get(
+            '/opdata/api/project/metrics/list',
+            {
+                params: {
+                    pageNumber: 1,
+                    pageSize: 1,
+                    projectId: projectId
+                }
+            }
+        )
     }
 }

src/frontend/devops-repository/src/utils/index.js

@@ -3,10 +3,14 @@ import createLocale from '@locale'
  *  转换文件大小
  */
 export function convertFileSize (size, unit = 'B') {
-    const arr = ['B', 'KB', 'MB', 'GB', 'TB']
+    const arr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
     const index = arr.findIndex(v => v === unit)
     if (size > 1024) {
-        return convertFileSize(size / 1024, arr[index + 1])
+        if (arr[index + 1]) {
+            return convertFileSize(size / 1024, arr[index + 1])
+        } else {
+            return `${index ? size.toFixed(2) : size}${unit}`
+        }
     } else {
         return `${index ? size.toFixed(2) : size}${unit}`
     }

src/frontend/devops-repository/src/views/repoGeneric/index.vue

@@ -101,6 +101,16 @@
                             </scan-tag>
                         </template>
                     </bk-table-column>
+                    <bk-table-column :label="$t('size')" prop="size" width="90" sortable show-overflow-tooltip>
+                        <template #default="{ row }">
+                            {{ convertFileSize(row.size) }}
+                        </template>
+                    </bk-table-column>
+                    <bk-table-column :label="$t('fileNum')" prop="nodeNum" sortable show-overflow-tooltip>
+                        <template #default="{ row }">
+                            {{ row.nodeNum ? row.nodeNum : row.folder ? 0 : '--'}}
+                        </template>
+                    </bk-table-column>
 
                     <bk-table-column :label="$t('metadata')">
                         <template #default="{ row }">
@@ -123,22 +133,12 @@
                             {{ userList[row.lastModifiedBy] ? userList[row.lastModifiedBy].name : row.lastModifiedBy }}
                         </template>
                     </bk-table-column>
-                    <bk-table-column :label="$t('size')" width="90" show-overflow-tooltip>
-                        <template #default="{ row }">
-                            <bk-button text
-                                v-if="row.folder && !('folderSize' in row)"
-                                :disabled="row.sizeLoading"
-                                @click="calculateFolderSize(row)">{{ $t('calculate') }}</bk-button>
-                            <span v-else>
-                                {{ convertFileSize(row.size || row.folderSize || 0) }}
-                            </span>
-                        </template>
-                    </bk-table-column>
                     <bk-table-column :label="$t('operation')" width="100">
                         <template #default="{ row }">
                             <operation-list
                                 :list="[
                                     { clickEvent: () => showDetail(row), label: $t('detail') },
+                                    row.folder && { clickEvent: () => calculateFolderSize(row), label: $t('realSize') },
                                     !row.folder && getBtnDisabled(row.name) && { clickEvent: () => handlerPreviewBasicsFile(row), label: $t('preview') }, //基本类型文件 eg: txt
                                     !row.folder && baseCompressedType.includes(row.name.slice(-3)) && { clickEvent: () => handlerPreviewCompressedFile(row), label: $t('preview') }, //压缩文件 eg: rar|zip|gz|tgz|tar|jar
                                     ...(!row.metadata.forbidStatus ? [
@@ -180,6 +180,7 @@
         <generic-tree-dialog ref="genericTreeDialog" @update="updateGenericTreeNode" @refresh="refreshNodeChange"></generic-tree-dialog>
         <preview-basic-file-dialog ref="previewBasicFileDialog"></preview-basic-file-dialog>
         <compressed-file-table ref="compressedFileTable" :data="compressedData" @show-preview="handleShowPreview"></compressed-file-table>
+        <loading ref="loading"></loading>
     </div>
 </template>
 <script>
@@ -199,10 +200,12 @@
     import { customizeDownloadFile } from '@repository/utils/downloadFile'
     import { getIconName } from '@repository/store/publicEnum'
     import { mapState, mapMutations, mapActions } from 'vuex'
+    import Loading from '@repository/components/Loading/loading'
 
     export default {
         name: 'repoGeneric',
         components: {
+            Loading,
             OperationList,
             Breadcrumb,
             MoveSplitBar,
@@ -712,12 +715,19 @@
             },
             calculateFolderSize (row) {
                 this.$set(row, 'sizeLoading', true)
+                this.$refs.loading.isShow = true
+                this.$refs.loading.complete = false
+                this.$refs.loading.title = this.$t('calculateTitle')
+                this.$refs.loading.message = this.$t('calculateMsg', { 0: row.fullPath })
                 this.getFolderSize({
                     projectId: this.projectId,
                     repoName: this.repoName,
                     fullPath: row.fullPath
-                }).then(({ size }) => {
-                    this.$set(row, 'folderSize', size)
+                }).then(({ size, subNodeWithoutFolderCount }) => {
+                    this.$set(row, 'size', size)
+                    this.$set(row, 'nodeNum', subNodeWithoutFolderCount)
+                    this.$refs.loading.message = this.$t('calculateCompleteMsg', { 0: row.fullPath, 1: convertFileSize(size) })
+                    this.$refs.loading.complete = true
                 }).finally(() => {
                     this.$set(row, 'sizeLoading', false)
                 })

src/frontend/devops-repository/src/views/repoList/index.vue

@@ -46,6 +46,12 @@
                     <span v-if="row.public" class="mr5 repo-tag WARNING" :data-name="$t('public')"></span>
                 </template>
             </bk-table-column>
+            <bk-table-column :label="$t('repoUsage')" width="150" prop="fileSize" sortable>
+                <template #default="{ row }">{{ convertFileSize(row.fileSize, 'GB') }}</template>
+            </bk-table-column>
+            <bk-table-column :label="$t('fileNum')" width="150" prop="fileNum" sortable>
+                <template #default="{ row }">{{ row.fileNum }}</template>
+            </bk-table-column>
             <bk-table-column :label="$t('repoQuota')" width="250">
                 <template #default="{ row }">
                     <bk-popover class="repo-quota" placement="top" :disabled="!row.quota">
@@ -163,7 +169,8 @@
             ...mapActions([
                 'getRepoList',
                 'deleteRepoList',
-                'getRepoListWithoutPage'
+                'getRepoListWithoutPage',
+                'getProjectMetrics'
             ]),
             initData () {
                 // 切换项目或者点击菜单时需要将筛选条件清空，并将页码相关参数重置，否则会导致点击菜单的时候筛选条件还在，不符合产品要求(点击菜单清空筛选条件，重新请求最新数据)
@@ -190,6 +197,7 @@
                         allRepo = records.map(v => ({ ...v, repoType: v.type.toLowerCase() }))
                     }
                     this.repoList = allRepo.slice((this.pagination.current - 1) * this.pagination.limit, this.pagination.current * this.pagination.limit >= records.length ? records.length : this.pagination.current * this.pagination.limit)
+                    this.getMetrics()
                 }).finally(() => {
                     this.isLoading = false
                 })
@@ -265,6 +273,29 @@
                         })
                     }
                 })
+            },
+            getMetrics () {
+                this.getProjectMetrics({ projectId: this.projectId }).then(res => {
+                    if (res.records !== null && res.records[0].repoMetrics !== null && res.records[0].repoMetrics.length > 0) {
+                        for (let i = 0; i < this.repoList.length; i++) {
+                            const metrics = res.records[0].repoMetrics.find((item) => {
+                                return item.repoName === this.repoList[i].name
+                            })
+                            if (metrics) {
+                                this.$set(this.repoList[i], 'fileSize', metrics.size)
+                                this.$set(this.repoList[i], 'fileNum', metrics.num)
+                            } else {
+                                this.$set(this.repoList[i], 'fileSize', 0)
+                                this.$set(this.repoList[i], 'fileNum', 0)
+                            }
+                        }
+                    } else {
+                        for (let i = 0; i < this.repoList.length; i++) {
+                            this.$set(this.repoList[i], 'fileSize', 0)
+                            this.$set(this.repoList[i], 'fileNum', 0)
+                        }
+                    }
+                })
             }
         }
     }

src/frontend/locale/repository/en-US.json

@@ -763,5 +763,12 @@
     "exportLeakReportInfo":"Security vulnerability information is being reported, please wait...",
     "errorPlanNameTips":"Please enter a plan name of 2-32 characters",
     "noBusinessTip": "No Business Authorization",
-    "noBusinessSubTip": "No Access To This App"
+    "noBusinessSubTip": "No Access To This App",
+    "fileNum": "File Number",
+    "realSize": "Real Size",
+    "loadingMsg": "Please wait, processing...",
+    "calculateMsg": "Please wait while calculating the {0} size.",
+    "calculateTitle": "Calculate folder size in real time",
+    "calculateCompleteMsg": "The total file size of {0} is {1}",
+    "repoUsage": "usage"
 }