Merge pull request 'fix-1482 数据集排序，fix-2065 图片显示问题 fix-2039 fix-2058' (#2157) from fix-2054 into V20220601

Reviewed-on: https://git.openi.org.cn/OpenI/aiforge/pulls/2157
Reviewed-by: lewis <747342561@qq.com>

options/locale/locale_en-US.ini

@@ -2946,6 +2946,7 @@ raw_minutes = minutes
 
 [dropzone]
 default_message = Drop files or click here to upload.
+default_dataset_message = Click to add files or directly drag and drop files here
 invalid_input_type = You can not upload files of this type.
 file_too_big = File size ({{filesize}} MB) exceeds the maximum size of ({{maxFilesize}} MB).
 remove_file = Remove file

options/locale/locale_zh-CN.ini

@@ -2956,6 +2956,7 @@ raw_minutes=分钟
 
 [dropzone]
 default_message=拖动文件或者点击此处上传。
+default_dataset_message=点击添加文件或直接拖拽文件到此处。
 invalid_input_type=您不能上传该类型的文件
 file_too_big=文件体积（{{filesize}} MB）超过了最大允许体积（{{maxFilesize}} MB）
 remove_file=移除文件

routers/repo/dataset.go

@@ -106,6 +106,8 @@ func DatasetIndex(ctx *context.Context) {
 	MustEnableDataset(ctx)
 	ctx.Data["PageIsDataset"] = true
 
+	ctx.Data["SortType"] = ctx.Query("sort")
+
 	repo := ctx.Repo.Repository
 
 	dataset, err := models.GetDatasetByRepo(repo)
@@ -128,9 +130,31 @@ func DatasetIndex(ctx *context.Context) {
 
 	attachments := newFilterPrivateAttachments(ctx, dataset.Attachments, repo)
 
-	sort.Slice(attachments, func(i, j int) bool {
-		return attachments[i].CreatedUnix > attachments[j].CreatedUnix
-	})
+	if ctx.Data["SortType"] == "nameAsc" {
+		sort.Slice(attachments, func(i, j int) bool {
+			return strings.ToLower(attachments[i].Name) < strings.ToLower(attachments[j].Name)
+		})
+	} else if ctx.Data["SortType"] == "nameDesc" {
+		sort.Slice(attachments, func(i, j int) bool {
+			return strings.ToLower(attachments[i].Name) > strings.ToLower(attachments[j].Name)
+		})
+	} else if ctx.Data["SortType"] == "sizeAsc" {
+		sort.Slice(attachments, func(i, j int) bool {
+			return attachments[i].Size < attachments[j].Size
+		})
+	} else if ctx.Data["SortType"] == "sizeDesc" {
+		sort.Slice(attachments, func(i, j int) bool {
+			return attachments[i].Size > attachments[j].Size
+		})
+	} else if ctx.Data["SortType"] == "timeAsc" {
+		sort.Slice(attachments, func(i, j int) bool {
+			return attachments[i].CreatedUnix < attachments[j].CreatedUnix
+		})
+	} else {
+		sort.Slice(attachments, func(i, j int) bool {
+			return attachments[i].CreatedUnix > attachments[j].CreatedUnix
+		})
+	}
 
 	page := ctx.QueryInt("page")
 	if page <= 0 {

templates/repo/attachment/upload.tmpl

@@ -1,60 +1,58 @@
-
 {{template "base/head" .}}
 <div class="repository">
-{{template "repo/header" .}}
+    {{template "repo/header" .}}
     <div class="ui container">
         <input type="hidden" id="postPath" value="{{.Link}}">
         <div style="width: 80%;margin: auto;">
-          <h4 class="ui top attached header">
-            {{$.i18n.Tr "dataset.upload_dataset_file"}}
-          </h4>
-          <div class="ui attached segment" style="padding: 2em 3em;">
-              <div class="ui form" id="dataset-base">
-                  <el-form  label-width="140px">
-                      {{.CsrfTokenHtml}}
-                      <el-form-item label='{{$.i18n.Tr "dataset.dataset_available_clusters"}}:' prop="title">
-                          <el-button :class="{active:type==0}" :disabled="clusterFlag" size="small" style="margin: 0;border-radius: 0.28571429rem 0 0 0.28571429rem;" @click="uploadGpu">CPU/GPU</el-button>
-                          <el-button :class="{active:type==1}" :disabled="clusterFlag" size="small" style="margin: 0 0 0 -4px;border-radius: 0 0.28571429rem 0.28571429rem 0;" @click="uploadNpu">NPU</el-button>
-                      </el-form-item>
-                      <el-form-item label='{{$.i18n.Tr "dataset.file_description"}}:' prop="description">
-                          <el-input type="textarea" :rows="3" maxlength="255" placeholder="{{$.i18n.Tr "repo.modelarts.train_job.new_place"}}" v-model="desc"></el-input>
-                      </el-form-item>
-                      <el-form-item label='{{$.i18n.Tr "dataset.data_upload"}}:' prop="category">
+            <h4 class="ui top attached header">
+                {{$.i18n.Tr "dataset.upload_dataset_file"}}
+            </h4>
+            <div class="ui attached segment" style="padding: 2em 3em;">
+                <div class="ui form" id="dataset-base">
+                    <el-form label-width="140px">
+                        {{.CsrfTokenHtml}}
+                        <el-form-item label='{{$.i18n.Tr "dataset.dataset_available_clusters"}}:' prop="title">
+                            <el-button :class="{active:type==0}" :disabled="clusterFlag" size="small"
+                                style="margin: 0;border-radius: 0.28571429rem 0 0 0.28571429rem;" @click="uploadGpu">
+                                CPU/GPU</el-button>
+                            <el-button :class="{active:type==1}" :disabled="clusterFlag" size="small"
+                                style="margin: 0 0 0 -4px;border-radius: 0 0.28571429rem 0.28571429rem 0;"
+                                @click="uploadNpu">NPU</el-button>
+                        </el-form-item>
+                        <el-form-item label='{{$.i18n.Tr "dataset.file_description"}}:' prop="description">
+                            <el-input type="textarea" :rows="3" maxlength="255"
+                                placeholder="{{$.i18n.Tr "repo.modelarts.train_job.new_place"}}" v-model="desc">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label='{{$.i18n.Tr "dataset.data_upload"}}:' prop="category">
                             <minio-uploader :uploadtype="type" :desc="desc" @setcluster="setcluster"></minio-uploader>
-                      </el-form-item>        
-                        <div style='display:none;'
-                        id="minioUploader-params"
-                        data-uuid="{{.uuid}}"
-                        data-add-url="{{.Repository.OwnerName}}/attachments/add"
-                        data-accepts="{{.AttachmentAllowedTypes}}"
-                        data-remove-url="{{AppSubUrl}}/attachments/delete"
-                        data-csrf="{{.CsrfToken}}"
-                        dataset-id={{.dataset.ID}}
-                        data-max-file="100"
-                        data-dataset-id="{{.dataset.ID}}"
-                        data-max-size="{{.AttachmentMaxSize}}"
-                        data-default-message="{{.i18n.Tr "dropzone.default_message"}}"
-                        data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}"
-                        data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
-                        data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"
-                        data-file-status='{{.i18n.Tr "dropzone.file_status"}}'
-                        data-file-init-status='{{.i18n.Tr "dropzone.file_init_status"}}'
-                        data-waitting-uploading='{{.i18n.Tr "dropzone.waitting_uploading"}}'
-                        data-md5-computing='{{.i18n.Tr "dropzone.md5_computing"}}'
-                        data-obs-connecting='{{.i18n.Tr "dropzone.obs-connecting"}}'
-                        data-loading-file='{{.i18n.Tr "dropzone.loading_file"}}'
-                        data-upload-complete='{{.i18n.Tr "dropzone.upload_complete"}}'
-                        data-uploading='{{.i18n.Tr "dropzone.uploading"}}'
-                        data-failed='{{.i18n.Tr "dropzone.failed"}}'
-                        data-repopath='{{AppSubUrl}}{{$.RepoLink}}/datasets'
-                        data-cancel='{{.i18n.Tr "cancel"}}'
-                        data-upload='{{.i18n.Tr "dataset.dataset_upload"}}'
-                        >
+                        </el-form-item>
+                        <div style='display:none;' id="minioUploader-params" data-uuid="{{.uuid}}"
+                            data-add-url="{{.Repository.OwnerName}}/attachments/add"
+                            data-accepts="{{.AttachmentAllowedTypes}}"
+                            data-remove-url="{{AppSubUrl}}/attachments/delete" data-csrf="{{.CsrfToken}}"
+                            dataset-id={{.dataset.ID}} data-max-file="100" data-dataset-id="{{.dataset.ID}}"
+                            data-max-size="{{.AttachmentMaxSize}}"
+                            data-default-message="{{.i18n.Tr "dropzone.default_dataset_message"}}"
+                            data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}"
+                            data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
+                            data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"
+                            data-file-status='{{.i18n.Tr "dropzone.file_status"}}'
+                            data-file-init-status='{{.i18n.Tr "dropzone.file_init_status"}}'
+                            data-waitting-uploading='{{.i18n.Tr "dropzone.waitting_uploading"}}'
+                            data-md5-computing='{{.i18n.Tr "dropzone.md5_computing"}}'
+                            data-obs-connecting='{{.i18n.Tr "dropzone.obs-connecting"}}'
+                            data-loading-file='{{.i18n.Tr "dropzone.loading_file"}}'
+                            data-upload-complete='{{.i18n.Tr "dropzone.upload_complete"}}'
+                            data-uploading='{{.i18n.Tr "dropzone.uploading"}}'
+                            data-failed='{{.i18n.Tr "dropzone.failed"}}'
+                            data-repopath='{{AppSubUrl}}{{$.RepoLink}}/datasets' data-cancel='{{.i18n.Tr "cancel"}}'
+                            data-upload='{{.i18n.Tr "dataset.dataset_upload"}}'>
                         </div>
                         <div id="datasetId" datasetId="{{.datasetId}}"></div>
-                  </el-form>
-              </div>
-          </div>
+                    </el-form>
+                </div>
+            </div>
         </div>
         <div style="width: 80%;margin: auto;padding-top: 2em;">
             <!-- <p>说明：<br>
@@ -62,10 +60,11 @@
             - 云脑1提供 <span class="text blue">CPU / GPU</span> 资源，云脑2提供 <span class="text blue">Ascend NPU</span> 资源；调试使用的数据集也需要上传到对应的环境。
             </p> -->
             <p style="color: 505559;">{{$.i18n.Tr "dataset.illustrate"}}：</p>
-            <p style="line-height: 1.5;color: #101010;">{{$.i18n.Tr "dataset.illustrate.only"}}<span class="text red">&nbsp;{{$.i18n.Tr "dataset.illustrate.zip"}}&nbsp;</span>{{$.i18n.Tr "dataset.illustrate.fisrt_end"}};</br>
+            <p style="line-height: 1.5;color: #101010;">{{$.i18n.Tr "dataset.illustrate.only"}}<span
+                    class="text red">&nbsp;{{$.i18n.Tr "dataset.illustrate.zip"}}&nbsp;</span>{{$.i18n.Tr "dataset.illustrate.fisrt_end"}};</br>
                 {{$.i18n.Tr "dataset.dataset_explain"}}</p>
 
         </div>
     </div>
 </div>
-{{template "base/footer" .}}
+{{template "base/footer" .}}

templates/repo/datasets/index.tmpl

@@ -7,6 +7,8 @@
     background: #FFF !important;
   }
 
+
+
   .dataset_title {
     font-size: 14px;
     max-width: 80%;
@@ -211,11 +213,22 @@
             <div class="ui grid stackable" style="background: #f0f0f0;;">
               <div class="row">
                 <!-- 数据集名称 -->
-                <div class="four wide column" style="width: 24% !important;">
-                  <span style="margin:0 6px">{{$.i18n.Tr "dataset.dataset_file_name"}}</span>
+                <div class="four wide column name_sort" @click="sortAble('name')" style="width: 24% !important;">
+                  {{$.i18n.Tr "dataset.dataset_file_name"}}
+                  <span class="caret-wrapper">
+                    <i class='ri-arrow-up-s-fill sort-caret-up {{if eq .SortType "nameAsc"}} active-sort {{end}}'></i>
+                    <i
+                      class='ri-arrow-down-s-fill sort-caret-down {{if eq .SortType "nameDesc"}} active-sort {{end}}'></i>
+                  </span>
                 </div>
-                <div class="one wide column text center" style="width: 7.25% !important;">
+                <div class="one wide column text center size_sort" @click="sortAble('size')"
+                  style="width: 7.25% !important;">
                   {{$.i18n.Tr "repo.model.manage.size"}}
+                  <span class="caret-wrapper">
+                    <i class='ri-arrow-up-s-fill sort-caret-up {{if eq .SortType "sizeAsc"}} active-sort {{end}}'></i>
+                    <i
+                      class='ri-arrow-down-s-fill sort-caret-down {{if eq .SortType "sizeDesc"}} active-sort {{end}}'></i>
+                  </span>
                 </div>
                 <div class="two wide column text center">
                   {{$.i18n.Tr "dataset.dataset_available_clusters"}}
@@ -226,8 +239,13 @@
                 <div class="one wide column text center">
                   {{$.i18n.Tr "repo.cloudbrain_creator"}}
                 </div>
-                <div class="three wide column text center">
+                <div class="three wide column text center" @click="sortAble('time')">
                   {{$.i18n.Tr "dataset.dataset_upload_time"}}
+                  <span class="caret-wrapper">
+                    <i class='ri-arrow-up-s-fill sort-caret-up {{if eq .SortType "timeAsc"}} active-sort {{end}}'></i>
+                    <i
+                      class='ri-arrow-down-s-fill sort-caret-down {{if eq .SortType "timeDesc"}} active-sort {{end}}'></i>
+                  </span>
                 </div>
                 <div class="four wide column text center">
                   {{$.i18n.Tr "repo.cloudbrain_operate"}}

web_src/js/index.js

@@ -1225,10 +1225,7 @@ async function initRepository() {
               const $content = $segment.parent();
               if (!$content.find('.ui.small.images').length) {
                 if (data.attachments !== '') {
-                  $content.append(
-                    '<div class="ui bottom attached segment"><div class="ui small images"></div></div>'
-                  );
-                  $content.find('.ui.small.images').html(data.attachments);
+
                 }
               } else if (data.attachments === '') {
                 $content
@@ -3923,19 +3920,10 @@ function initVueDataset() {
       MinioUploader
     },
     mounted() {
-      // if(document.getElementById('postPath')){
-      //   this.url = document.getElementById('postPath').value
-      // }
-      // this.privates = items
-      // this.num_stars = num_stars
-      // this.star_active = star_active
-      // this.ruleForm1 = ruleForm
-
-      // // this.getEditInit()
-      // this.getTypeList()
       this.getTypeList()
 
       if (!!document.getElementById('dataset-repolink-init')) {
+        this.cloudbrainType = location.href.indexOf('cloudbrain/train-job/create') !== -1 ? 0 : 1
         this.getCurrentRepoDataset(this.repolink, this.cloudbrainType)
       }
 
@@ -4083,6 +4071,25 @@ function initVueDataset() {
       uploadNpu() {
         this.type = 1
       },
+      sortAble(dom) {
+        const params = new URLSearchParams(location.search)
+        if (params.toString() === '') {
+          location.href = `${location.href}?sort=${dom}Asc`
+        }
+        else if (!params.get('sort')) {
+          location.href = `${location.href}&sort=${dom}Asc`
+        }
+        else if (params.get('sort') === `${dom}Desc` || params.get('sort').indexOf(`${dom}`) === -1) {
+          params.delete('sort')
+          let asc = params.toString() + `&sort=${dom}Asc`
+          location.search = asc
+        }
+        else {
+          params.delete('sort')
+          let desc = params.toString() + `&sort=${dom}Desc`
+          location.search = desc
+        }
+      },
       setPrivate(uuid, privateFlag, index) {
         const params = { _csrf: csrf, file: uuid, is_private: privateFlag }
         this.$axios.post('/attachments/private', this.qs.stringify(params)).then((res) => {

web_src/less/openi.less

@@ -1055,3 +1055,33 @@ display: block;
 	float: left !important;
 	margin: 0px 5px 0px 0px !important;
 }
+
+
+.row .caret-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    height: 34px;
+    width: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    position: relative;
+  }
+
+.row .sort-caret-up {
+    position: absolute;
+    top: 5px;
+    color: #c0c4cc;
+    font-size: 18px;
+  }
+
+.row  .sort-caret-down {
+    position: absolute;
+    bottom: 3px;
+    color: #c0c4cc;
+    font-size: 18px;
+  }
+
+.row  .active-sort {
+    color: #409eff !important;
+  }