Merge pull request '完成云脑镜像列表功能' (#272) from fix-92 into V202108

Reviewed-on: https://git.openi.org.cn/OpenI/aiforge/pulls/272
Reviewed-by: avadesian <xuchx@pcl.ac.cn>

options/locale/locale_en-US.ini

@@ -223,6 +223,7 @@ issues.in_your_repos = In your repositories
 repos = Repositories
 users = Users
 organizations = Organizations
+images = CloudImages
 search = Search
 code = Code
 repo_no_results = No matching repositories found.

options/locale/locale_zh-CN.ini

@@ -224,6 +224,7 @@ issues.in_your_repos=属于该用户项目的
 repos=项目
 users=用户
 organizations=组织
+images = 云脑镜像
 search=搜索
 code=代码
 repo_no_results=未找到匹配的项目。

templates/base/head_navbar.tmpl

@@ -28,6 +28,7 @@
 				<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
+				<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
 			</div>
 		</div>
 	{{else if .IsLandingPageHome}}
@@ -42,6 +43,7 @@
 				<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "datasets"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
+				<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
 			</div>
 		</div>
 	{{else if .IsLandingPageExplore}}

templates/base/head_navbar_home.tmpl

@@ -28,6 +28,7 @@
 				<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
+				<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
 			</div>
 		</div>
 	{{else if .IsLandingPageHome}}
@@ -42,6 +43,7 @@
 				<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "datasets"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/users">{{.i18n.Tr "explore.users"}}</a>
 				<a class="item" href="{{AppSubUrl}}/explore/organizations">{{.i18n.Tr "explore.organizations"}}</a>
+				<a class="item" href="{{AppSubUrl}}/explore/images">{{.i18n.Tr "explore.images"}}</a>
 			</div>
 		</div>
 	{{else if .IsLandingPageExplore}}

templates/explore/images.tmpl

@@ -0,0 +1,7 @@
+{{template "base/head" .}}
+<div id="images">
+
+    
+</div>
+
+{{template "base/footer" .}}

web_src/js/components/Images.vue

@@ -0,0 +1,420 @@
+<template>
+<div>
+    <div class="header-wrapper">
+        <div class="ui container">
+            <el-row class="image_text">
+                <h1>云脑镜像</h1>
+            </el-row>    
+        </div>
+    </div>
+    <div class="ui container" id="header">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="公共镜像(云脑1)" name="first" v-loading="loading">
+                <div class="ui sixteen wide column">
+                    <div class="ui two column stackable grid">
+                        <div class="column">
+                            <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
+                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                            </el-input>
+                        </div>
+
+                        <!-- <div class="column right aligned">
+                            <el-dropdown>
+                                <span class="el-dropdown-link">
+                                    排序<i class="el-icon-caret-bottom"></i>
+                                </span>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item>最早创建</el-dropdown-item>
+                                    <el-dropdown-item>最新创建</el-dropdown-item>
+                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
+                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                        </div> -->
+                    </div>
+                </div>
+
+                <el-row style="margin-top:15px;">
+
+                    <el-table
+                        :data="tableData"
+                        style="width: 100%"
+                        :header-cell-style="tableHeaderStyle"
+                        :default-sort="{prop:'createtime',order:'descending'}">
+                        <el-table-column
+                            label="镜像名称"
+                            width="350"
+                            align="center"
+                            prop="name"
+                            sortable
+                            >
+                            <template slot-scope="scope">
+                                <a class="text-over" style="cursor:default;color:#426290" :title="scope.row.name">{{ scope.row.name }}</a>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            label="文件路径/镜像描述"
+                            width="450"
+                            align="center"
+                            >
+                            <template slot-scope="scope">
+                                <el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
+                                    <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
+                                </el-tooltip>
+                                
+                                <span class="text-over" :title="scope.row.description">{{ scope.row.description }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="provider"
+                            label="提供者"
+                            width="120"
+                            align="center"
+                            sortable>
+                        </el-table-column>
+                        <el-table-column
+                            prop="createtime"
+                            label="创建时间"
+                            align="center"
+                            sortable>
+                        </el-table-column>
+                    </el-table>
+                </el-row>
+                <div class="ui container" style="margin-top:50px;text-align:center">
+                        <el-pagination
+                            background
+                            @size-change="handleSizeChange"
+                            @current-change="handleCurrentChange"
+                            :current-page="currentPage"
+                            :page-size="pageSize"
+                            :page-sizes="[5,10,20]"
+                            layout="total, sizes, prev, pager, next, jumper"
+                            :total="totalNum">
+                        </el-pagination>
+                </div>
+                    
+                
+            </el-tab-pane>
+            <el-tab-pane label="自定义镜像(云脑1)" name="second" v-loading="loading1">
+                <div class="ui sixteen wide column">
+                    <div class="ui two column stackable grid">
+                        <div class="column">
+                            <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
+                                <el-button slot="append" id="success" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                            </el-input>
+                        </div>
+
+                        <!-- <div class="column right aligned">
+                            <el-dropdown>
+                                <span class="el-dropdown-link">
+                                    排序<i class="el-icon-caret-bottom"></i>
+                                </span>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item>最早创建</el-dropdown-item>
+                                    <el-dropdown-item>最新创建</el-dropdown-item>
+                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
+                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                        </div> -->
+                        
+                    </div>
+                    
+                </div>
+
+                <el-row style="margin-top:15px;">
+
+                    <el-table
+                        :data="tableData1"
+                        style="width: 100%"
+                        :header-cell-style="tableHeaderStyle"
+                        :default-sort="{prop:'createtime',order:'descending'}">
+                        <el-table-column
+                            label="镜像名称"
+                            width="350"
+                            align="center"
+                            prop="name"
+                            sortable
+                            >
+                            <template slot-scope="scope">
+                                <a class="text-over" :title="scope.row.name" style="cursor:default;color:#426290">{{ scope.row.name }}</a>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            label="文件路径/镜像描述"
+                            width="450"
+                            align="center"
+                            
+                            >
+                            <template slot-scope="scope">
+                                <el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
+                                    <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
+                                </el-tooltip>
+                                
+                                <span class="text-over" :title="scope.row.description">{{ scope.row.description }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="provider"
+                            label="提供者"
+                            width="120"
+                            align="center"
+                            sortable>
+                        </el-table-column>
+                        <el-table-column
+                            prop="createtime"
+                            label="创建时间"
+                            align="center"
+                            sortable>
+                        </el-table-column>
+                    </el-table>
+                </el-row>
+                <div class="ui container" style="margin-top:50px;text-align:center">
+                        <el-pagination
+                            background
+                            @size-change="handleSizeChange1"
+                            @current-change="handleCurrentChange1"
+                            :current-page="currentPage1"
+                            :page-size="pageSize1"
+                            :page-sizes="[5,10,20]"
+                            layout="total, sizes, prev, pager, next, jumper"
+                            :total="totalNum1">
+                        </el-pagination>
+                </div>
+                
+
+            </el-tab-pane>
+            <el-tab-pane label="公共镜像(云脑2)" name="third">
+                
+                <div class="ui sixteen wide column">
+                    <div class="ui two column stackable grid">
+                        <div class="column">
+                            <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
+                                <el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
+                            </el-input>
+                        </div>
+
+                        <!-- <div class="column right aligned">
+                            <el-dropdown>
+                                <span class="el-dropdown-link">
+                                    排序<i class="el-icon-caret-bottom"></i>
+                                </span>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item>最早创建</el-dropdown-item>
+                                    <el-dropdown-item>最新创建</el-dropdown-item>
+                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
+                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                        </div> -->
+                        
+                    </div>
+                    
+                </div>
+
+                <el-empty :image-size="200"></el-empty>
+            </el-tab-pane>
+            <el-tab-pane label="自定义镜像(云脑2)" name="fourth">
+                
+                <div class="ui sixteen wide column">
+                    <div class="ui two column stackable grid">
+                        <div class="column">
+                            <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
+                                <el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
+                            </el-input>
+                        </div>
+
+                        <!-- <div class="column right aligned">
+                            <el-dropdown>
+                                <span class="el-dropdown-link">
+                                    排序<i class="el-icon-caret-bottom"></i>
+                                </span>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item>最早创建</el-dropdown-item>
+                                    <el-dropdown-item>最新创建</el-dropdown-item>
+                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
+                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                        </div>  -->
+                    </div>
+                </div>
+
+                <el-empty :image-size="200"></el-empty>
+
+            </el-tab-pane>
+        </el-tabs>
+  </div>
+</div>
+
+  
+</template>
+
+<script>
+
+const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+
+
+
+
+export default {
+  components: {
+    
+  },
+  data() {
+    return {
+      activeName: 'first',
+      search:'',
+      currentPage:1,
+      pageSize:10,
+      totalNum:0,
+      params:{page:1,size:10,name:''},
+      tableData: [],
+      loading:false,
+
+      currentPage1:1,
+      pageSize1:10,
+      totalNum1:0,
+      params1:{page:1,size:10,name:''},
+      tableData1: [],
+      loading1:false
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+        if(tab.name=="first"){
+            this.getImageList()
+        }
+        if(tab.name=="second"){
+            this.getImageList1()
+        }
+        
+      },
+    tableHeaderStyle({row,column,rowIndex,columnIndex}){
+        
+        if(rowIndex===0){
+            return 'background:#f5f5f6;color:#606266'
+        }
+        
+    },
+    handleSizeChange(val){
+        this.params.size = val
+        this.getImageList()
+
+
+    },
+    handleCurrentChange(val){
+        console.log(val)
+        this.params.page = val
+        this.getImageList()
+
+    },
+    handleSizeChange1(val){
+        this.params1.size = val
+        this.getImageList1()
+
+
+    },
+    handleCurrentChange1(){
+        this.params1.page = val
+        this.getImageList1()
+
+    },
+    getImageList(){
+        this.loading = true
+        this.$axios.get('/explore/images/public',{
+            params:this.params
+        }).then((res)=>{
+            
+            this.totalNum = res.data.count
+            this.tableData = res.data.rows
+            this.loading = false 
+        })
+    },
+
+    getImageList1(){
+        this.loading1 = true
+        this.$axios.get('/explore/images/custom',{
+            params:this.params1
+        }).then((res)=>{
+            
+            this.totalNum1 = res.data.count
+            this.tableData1 = res.data.rows
+            this.loading1 = false
+        })
+    },
+    copyUrl(url){
+        console.log(url)
+        const cInput = document.createElement('input')
+        cInput.value = url
+        document.body.appendChild(cInput)
+        cInput.select()
+        document.execCommand('Copy')
+        cInput.remove()
+
+    },
+    searchName(){
+        if(this.activeName=='first'){
+            this.params.name = this.search
+            this.getImageList()
+        }
+        if(this.activeName=='second'){
+            this.params1.name = this.search
+            this.getImageList1()
+        }
+        
+    }
+
+  },
+  watch:{
+      search(val){
+          if(!val && this.activeName=='first'){
+              this.params.name = val
+              this.getImageList()
+          }
+          if(!val && this.activeName=='second'){
+              this.params1.name = val
+              this.getImageList1()
+          }
+      }
+
+  },
+  mounted() {
+      this.getImageList()
+  },
+  created() {
+    
+  }
+
+};
+</script>
+
+<style scoped>
+.header-wrapper {
+    background-color: #f5f5f6;
+    padding-top: 15px;
+}
+.image_text{
+    padding:25px 0 55px 0 ;
+}
+#header{
+    position: relative;
+    top:-40px;
+}
+.el-dropdown-menu__item--divided{
+    border-top: 1px solid blue;
+}
+.el-table thead{
+    background-color: #f5f5f6;
+}
+#success{
+    background-color: #4093ff;
+    color: white;
+}
+.text-over{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+</style>

web_src/js/index.js

@@ -35,6 +35,7 @@ import {createCodeEditor} from './features/codeeditor.js';
 import MinioUploader from './components/MinioUploader.vue';
 import ObsUploader from './components/ObsUploader.vue';
 import EditAboutInfo from './components/EditAboutInfo.vue';
+import Images from './components/Images.vue'
 
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios;
@@ -2966,6 +2967,7 @@ $(document).ready(async () => {
   initVueUploader();
   initObsUploader();
   initVueEditAbout();
+  initVueImages();
   initTeamSettings();
   initCtrlEnterSubmit();
   initNavbarContentToggle();
@@ -3653,7 +3655,7 @@ function initVueUploader() {
 
 function initVueEditAbout() {
   const el = document.getElementById('about-desc');
-  console.log(el)
+  
   if (!el) {
     return;
   }
@@ -3664,6 +3666,21 @@ function initVueEditAbout() {
   });
 }
 
+
+function initVueImages() {
+  const el = document.getElementById('images');
+  console.log("el",el)
+  
+  if (!el) {
+    return;
+  }
+
+  new Vue({
+    el: '#images',
+    render: h => h(Images)
+  });
+}
+
 // 新增
 function initObsUploader() {
   const el = document.getElementById('obsUploader');