update

options/locale/locale_en-US.ini

@@ -1272,8 +1272,8 @@ model.manage.notcreatemodel=No model has been created
 model.manage.init1=Code version: You have not initialized the code repository, please
 model.manage.init2=initialized first ;
 model.manage.createtrainjob_tip=Training task: you haven't created a training task, please create it first
-model.manage.createmodel_tip=You can import local model or online model. Import online model should create
-model.manage.createtrainjob=Training task.
+model.manage.createmodel_tip=You can import local model or online model. Import online model should
+model.manage.createtrainjob=Create training task.
 model.manage.delete=Delete Model
 model.manage.delete_confirm=Are you sure to delete this model? Once this model is deleted, it cannot be restored.
 model.manage.select.trainjob=Select train task

options/locale/locale_zh-CN.ini

@@ -1288,7 +1288,7 @@ model.manage.init1=代码版本：您还没有初始化代码仓库，请先
 model.manage.init2=创建代码版本；
 model.manage.createtrainjob_tip=训练任务：您还没创建过训练任务，请先创建
 model.manage.createmodel_tip=您可以导入本地模型或者导入线上模型。导入线上模型需先
-model.manage.createtrainjob=训练任务。
+model.manage.createtrainjob=创建训练任务。
 model.manage.delete=删除模型
 model.manage.delete_confirm=你确认删除该模型么？此模型一旦删除不可恢复。
 model.manage.select.trainjob=选择训练任务

templates/repo/modelmanage/create_local_2.tmpl

@@ -2,6 +2,7 @@
 <link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-modelmanage-local-create-2.css?v={{MD5 AppVer}}" />
 <div class="repository release dataset-list view">
     {{template "repo/header" .}}
+    <script>var MAX_MODEL_SIZE = {{ .max_model_size }};</script>
     <div class="ui container">
         <div id="__vue-root"></div>
     </div>    

web_src/js/components/Model.vue

@@ -16,7 +16,7 @@
             prop="name"
             :label="i18n.model_name"
             align="left"
-            min-width="17%"
+            min-width="20%"
           >
             <template slot-scope="scope">
               <div class="expand-icon" v-if="scope.row.hasChildren === false">
@@ -132,11 +132,11 @@
 
           <el-table-column
             :label="i18n.model_operation"
-            min-width="17%"
+            min-width="15%"
             align="center"
           >
             <template slot-scope="scope">
-              <div class="space-around">
+              <div class="space-around" >
                 <!--<a
                   :style="{
                     visibility: !scope.row.Children ? 'visible' : 'hidden',
@@ -151,24 +151,22 @@
                   "
                   >{{ i18n.model_create_new_ver }}</a
                 >-->
-                <a
-                  v-if="scope.row.modelType == 1"
+                <a class="op-btn"
+                  v-show="scope.row.modelType == 1"
                   :href="url + 'create_local_model_tmpl1?type=1&name=' + scope.row.name + '&id=' + scope.row.id"
                   :class="{ disabled: !scope.row.isCanOper }"
-                  >{{ i18n.modify }}</a
-                >
-                <a
+                  >{{ i18n.modify }}</a>
+                <a class="op-btn" v-show="scope.row.modelType != 1" style="color:transparent;cursor:default;" >{{ i18n.modify }}</a>
+                <a class="op-btn"
                   :href="loadhref + scope.row.id"
                   :class="{ disabled: !scope.row.isCanOper }"
-                  >{{ i18n.model_download }}</a
-                >
-                <a
+                  >{{ i18n.model_download }}</a>
+                <a class="op-btn"
                   :class="{ disabled: !scope.row.isCanDelete }"
                   @click="
                     deleteModel(scope.row.id, scope.row.cName, scope.row.rowKey)
                   "
-                  >{{ i18n.model_delete }}</a
-                >
+                  >{{ i18n.model_delete }}</a>
               </div>
             </template>
           </el-table-column>
@@ -704,6 +702,15 @@ export default {
   justify-content: space-around;
 }
 
+.op-btn-c {
+  text-align: right;
+  padding-right: 20px;
+}
+
+.op-btn {
+  margin: 0 0 0 5px;
+}
+
 .disabled {
   cursor: default;
   pointer-events: none;

web_src/vuepages/langs/config/en-US.js

@@ -220,7 +220,7 @@ const en = {
     upload: 'Upload',
     uploadStatus: 'Upload status',
     modelFileUploadDefaultTips: 'Click to add files or drag files here directly',
-    modelFileUploadErrTips: 'Up to 10 files can be uploaded at a time, and the total file size of the model does not exceed 200GB',
+    modelFileUploadErrTips: 'Up to 10 files can be uploaded at a time, and the total file size of the model does not exceed {size}GB',
     fileIstoBig: 'File is to big',
     removeFile: 'Rmove file',
     uploadSuccess: 'upload success',

web_src/vuepages/langs/config/zh-CN.js

@@ -220,7 +220,7 @@ const zh = {
     upload: '上传',
     uploadStatus: '上传状态',
     modelFileUploadDefaultTips: '点击添加文件或直接拖拽文件到此处',
-    modelFileUploadErrTips: '单次最多上传10个文件，模型总文件大小不超过200G',
+    modelFileUploadErrTips: '单次最多上传10个文件，模型总文件大小不超过{size}G',
     fileIstoBig: '文件太大',
     removeFile: '移除文件',
     uploadSuccess: '上传成功',

web_src/vuepages/pages/modelmanage/common/modelmanage-common-detail.vue

@@ -146,10 +146,15 @@
       </div>
       <div class="files-info">
         <div class="top">
-          <div>
+          <div style="width:100%;margin-right:20px;">
             <div class="title">{{ $t('modelManage.modelFilesList') }}：</div>
-            <div class="title" style="margin-top:8px"><span class="version">{{ state.version }}</span>
-              <span style="color:rgba(0,0,0,.4);" class="divider"> / </span>
+            <div class="title files-path-c" style="margin-top:8px;margin-bottom:4px">
+              <div class="file-path" v-for="(item, index) in filePath">
+                <span v-if="index == filePath.length - 1" class="path-name">{{ item.label }}</span>
+                <a v-if="index != filePath.length - 1" class="path-name canback" @click="goBackDir(item)">{{ item.label
+                }}</a>
+                <span style="color:rgba(0,0,0,.4);" class="divider"> / </span>
+              </div>
             </div>
           </div>
           <div>
@@ -164,10 +169,16 @@
               header-align="left">
               <template slot-scope="scope">
                 <div class="tbl-file-name">
-                  <span class="octicon octicon-file-directory"></span>
-                  <a :href="canOperate ? `${repo}/modelmanage/${state.id}/downloadsingle?parentDir=&fileName=${scope.row.FileName}` : 'javascript:;'">
+                  <a v-if="scope.row.IsDir" @click="goNextDir(scope.row)" href="javascript:;">
                     <div class="fitted" :title="scope.row.FileName">
-                      <i class="file icon" width="16" height="16" aria-hidden="true"></i>
+                      <i class="icon folder" width="16" height="16" aria-hidden="true"></i>
+                      {{ scope.row.FileName }}
+                    </div>
+                  </a>
+                  <a v-else :class="!canOperate ? 'disabled-download' : ''"
+                    :href="canOperate ? `${repo}/modelmanage/${state.id}/downloadsingle?parentDir=&fileName=${scope.row.FileName}` : 'javascript:;'">
+                    <div class="fitted" :title="scope.row.FileName">
+                      <i class="icon file" width="16" height="16" aria-hidden="true"></i>
                       {{ scope.row.FileName }}
                     </div>
                   </a>
@@ -183,7 +194,8 @@
             <el-table-column v-if="modelType == 1 && canDelete" column-key="operate" prop="operate"
               :label="$t('modelManage.operate')" align="center" header-align="center" width="200">
               <template slot-scope="scope">
-                <span class="btn-del" @click="deleteFile(scope.row)">{{ $t('modelManage.delete') }}</span>
+                <span v-if="!scope.row.IsDir" class="btn-del" @click="deleteFile(scope.row)">{{ $t('modelManage.delete')
+                }}</span>
               </template>
             </el-table-column>
           </el-table>
@@ -229,11 +241,39 @@ export default {
       curVersion: '',
       modelList: [],
       filesList: [],
+      filePath: [],
     };
   },
   components: {},
   methods: {
-    changeVersion(version) {
+    getDirFiles(dir) {
+      getModelFiles({
+        repo: this.repo,
+        ID: this.state.id,
+        parentDir: dir || '',
+      }).then(res => {
+        const list = res.data || [];
+        list.forEach(item => {
+          item.SizeShow = item.IsDir ? '' : transFileSize(item.Size);
+        })
+        this.filesList = list;
+      }).catch(err => {
+        console.log(err);
+      })
+    },
+    goNextDir(item) {
+      this.filePath.push({
+        label: item.FileName,
+        path: item.FileName
+      });
+      this.getDirFiles(item.FileName);
+    },
+    goBackDir(item) {
+      const index = this.filePath.findIndex(pth => item === pth);
+      this.filePath = this.filePath.slice(0, index + 1);
+      this.getDirFiles(item.path);
+    },
+    changeVersion(version, noFileRefresh) {
       const data = this.modelList.filter((model) => model.version == version)[0];
       this.modelType = data.modelType;
       this.canOperate = data.isCanOper;
@@ -289,19 +329,10 @@ export default {
         });
       }
       this.curVersion = version;
-      getModelFiles({
-        repo: this.repo,
-        ID: this.state.id,
-        parentDir: '',
-      }).then(res => {
-        const list = res.data || [];
-        list.forEach(item => {
-          item.SizeShow = transFileSize(item.Size);
-        })
-        this.filesList = list;
-      }).catch(err => {
-        console.log(err);
-      })
+      if (!noFileRefresh) {
+        this.filePath = [{ label: version, path: '' }];
+        this.getDirFiles('')
+      }
     },
     goUploadPage() {
       window.location.href = `${this.repo}/modelmanage/create_local_model_tmpl2?type=1&name=${this.state.name}&id=${this.state.id}`;
@@ -361,6 +392,7 @@ export default {
         type: 'warning',
         lockScroll: false,
       }).then(() => {
+        this.loading = true;
         deleteModelFile({
           repo: this.repo,
           id: this.state.id,
@@ -368,8 +400,13 @@ export default {
         }).then(res => {
           res = res.data;
           if (res.code == '0') {
-            this.changeVersion(this.curVersion);
+            setTimeout(() => {
+              this.loading = false;
+              this.updateModelInfo();
+              this.getDirFiles(this.filePath[this.filePath.length - 1].path);
+            }, 30);
           } else {
+            this.loading = false;
             this.$message({
               type: 'error',
               message: this.$t('modelManage.modelFileDeleteFailed'),
@@ -383,7 +420,20 @@ export default {
           });
         });
       }).catch(() => { });
-    }
+    },
+    updateModelInfo() {
+      getModelInfoByName({
+        repo: this.repo,
+        name: this.state.name,
+      }).then(res => {
+        const list = res.data || [];
+        this.modelList = list;
+        const noFileRefresh = true;
+        this.changeVersion(this.curVersion, noFileRefresh);
+      }).catch(err => {
+        console.log(err);
+      });
+    },
   },
   mounted() {
     const urlParams = getUrlSearchParams();
@@ -537,6 +587,22 @@ export default {
       justify-content: space-between;
     }
 
+    .files-path-c {
+      margin-bottom: 4px;
+      height: 20px;
+
+      .file-path {
+        margin-right: 6px;
+        float: left;
+
+        .path-name {
+          &.canback {
+            color: #4183c4;
+          }
+        }
+      }
+    }
+
     .table-container {
       /deep/ .el-table__header {
         th {
@@ -562,10 +628,17 @@ export default {
         overflow: hidden;
         font-size: 16px;
         font-weight: 500;
+
+        .disabled-download {
+          cursor: default;
+          pointer-events: none;
+          color: rgba(0, 0, 0, .6) !important;
+          opacity: .45 !important;
+        }
       }
 
       .btn-del {
-        color: rgb(255, 51, 51);
+        color: #0366d6;
         cursor: pointer;
       }
     }

web_src/vuepages/pages/modelmanage/local/modelmanage-local-create-2.vue

@@ -1,30 +1,32 @@
 <template>
   <div>
     <div class="header">
-      <span class="title">{{ type == '1' ? $t('modelManage.addModelFiles') : $t('modelManage.uploadModelFiles') }}</span>
+      <span class="title">{{ type == '1' ? $t('modelManage.addModelFiles') : $t('modelManage.uploadModelFiles')
+      }}</span>
     </div>
     <div class="content ui form">
       <div class="guide-c" v-if="type != '1'">
         <div class="step">
           <div class="num">1</div>
-          <div class="txt">{{$t('modelManage.createModel')}}</div>
+          <div class="txt">{{ $t('modelManage.createModel') }}</div>
         </div>
         <div class="line"></div>
         <div class="step focused">
           <div class="num">2</div>
-          <div class="txt">{{$t('modelManage.uploadModelFiles')}}</div>
+          <div class="txt">{{ $t('modelManage.uploadModelFiles') }}</div>
         </div>
       </div>
       <div class="row-c">
         <div class="row">
-          <div class="r-title"><label class="required">{{$t('modelManage.modelName')}}</label></div>
+          <div class="r-title"><label class="required">{{ $t('modelManage.modelName') }}</label></div>
           <div class="r-content">
-            <el-input size="medium" class="input-disabled" v-model="state.name" :placeholder="$t('modelManage.pleaseInputModelName')" readonly>
+            <el-input size="medium" class="input-disabled" v-model="state.name"
+              :placeholder="$t('modelManage.pleaseInputModelName')" readonly>
             </el-input>
           </div>
         </div>
         <div class="row" style="align-items:flex-start;">
-          <div class="r-title"><label class="required">{{$t('modelManage.fileUpload')}}</label></div>
+          <div class="r-title"><label class="required">{{ $t('modelManage.fileUpload') }}</label></div>
           <div class="r-content">
             <div style="position:relative">
               <form class="dropzone" ref="dropzoneRef">
@@ -38,12 +40,13 @@
         <div class="row" style="margin-top:10px">
           <div class="r-title"><label></label></div>
           <div class="r-content">
-            <el-button size="medium" class="green" @click="submit" :disabled="uploading">{{$t('modelManage.upload')}}</el-button>
-            <el-button size="medium" @click="cancel">{{$t('modelManage.cancel')}}</el-button>
+            <el-button size="medium" class="green" @click="submit" :disabled="uploading">{{ $t('modelManage.upload') }}
+            </el-button>
+            <el-button size="medium" @click="cancel">{{ $t('modelManage.cancel') }}</el-button>
           </div>
         </div>
         <div class="row" style="align-items:flex-start;">
-          <div class="r-title"><label>{{$t('modelManage.uploadStatus')}}：</label></div>
+          <div class="r-title"><label>{{ $t('modelManage.uploadStatus') }}：</label></div>
           <div class="r-content">
             <div v-for="(item, index) in uploadFiles" :key="item.upload.uuid" class="datast-upload-progress">
               <span class="dataset-name nowrap" :title="item.name">{{ item.name }}</span>
@@ -84,7 +87,7 @@ Dropzone.autoDiscover = false;
 const uploadChunkSize = 1024 * 1024 * 64;
 const md5ChunkSize = 1024 * 1024 * 64;
 const maxFileSize = 10;
-const maxModelFilesSize = 200 * 1024 * 1024 * 1024; // 200 GB
+const maxModelFilesSize = window.MAX_MODEL_SIZE || 200 * 1024 * 1024 * 1024; // 200 GB
 
 export default {
   data() {
@@ -99,12 +102,11 @@ export default {
         engine: '',
         label: '',
         description: '',
-        size: '',
+        size: 0,
       },
       originData: null,
       showUploadErr: false,
       uploadErrTxt: '',
-      defaultErrTxt: this.$t('modelManage.modelFileUploadErrTips'),
 
       uploadFiles: [],
       uploadLength: 0,
@@ -166,7 +168,7 @@ export default {
         dictDefaultMessage: this.$t('modelManage.modelFileUploadDefaultTips'),
         dictFileTooBig: this.$t('modelManage.fileIstoBig'),
         dictRemoveFile: this.$t('modelManage.removeFile'),
-        dictMaxFilesExceeded: this.defaultErrTxt,
+        dictMaxFilesExceeded: this.getDefaultErrTxt(),
       });
       this.dropzoneHandler.on("addedfile", file => {
         this.checkFiles(file);
@@ -175,6 +177,9 @@ export default {
         this.checkFiles();
       });
     },
+    getDefaultErrTxt() {
+      return this.$t('modelManage.modelFileUploadErrTips', { size: (maxModelFilesSize / (1024 * 1024 * 1024)).toFixed(2) });
+    },
     showUploadErrInfo(state, info) {
       if (state) {
         this.uploadErrTxt = info;
@@ -190,7 +195,7 @@ export default {
       const filesCount = fileList.length + (file ? 1 : 0);
       const allfilesSize = filesSize + this.state.size;
       if (filesCount > maxFileSize || allfilesSize > maxModelFilesSize) {
-        this.showUploadErrInfo(true, this.defaultErrTxt);
+        this.showUploadErrInfo(true, this.getDefaultErrTxt());
         return false;
       }
       this.showUploadErrInfo(false);
@@ -464,7 +469,7 @@ export default {
       if (this.uploadLength === this.uploadFiles.length) {
         console.log('All file has finish, success ' + this.uploadSuccessLength);
         this.uploading = false;
-        if (this.uploadSuccessLength == this.uploadLength) {         
+        if (this.uploadSuccessLength == this.uploadLength) {
           window.setTimeout(() => {
             this.goDetail();
           }, 1000);