From 2b48688a50fe6cc2a4558bc368a4f46eb2446a99 Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Mon, 27 Jul 2020 15:50:10 +0530
Subject: [PATCH] compute: Fixing template search (#543)

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/views/compute/DeployVM.vue             | 104 ++++++++-----
 .../compute/wizard/TemplateIsoRadioGroup.vue  |  22 +--
 .../compute/wizard/TemplateIsoSelection.vue   | 143 +++---------------
 3 files changed, 105 insertions(+), 164 deletions(-)

diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index 30119798d46..903cb6325b1 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -89,6 +89,7 @@
                           :selected="tabKey"
                           :loading="loading.templates"
                           :preFillContent="dataPreFill"
+                          @handle-search-filter="($event) => fetchAllTemplates($event)"
                           @update-template-iso="updateFieldValue" />
                         <span>
                           {{ $t('label.override.rootdisk.size') }}
@@ -110,6 +111,7 @@
                           :selected="tabKey"
                           :loading="loading.isos"
                           :preFillContent="dataPreFill"
+                          @handle-search-filter="($event) => fetchAllIsos($event)"
                           @update-template-iso="updateFieldValue" />
                         <a-form-item :label="this.$t('label.hypervisor')">
                           <a-select
@@ -781,8 +783,23 @@ export default {
       }
     },
     instanceConfig (instanceConfig) {
-      this.template = _.find(this.options.templates, (option) => option.id === instanceConfig.templateid)
-      this.iso = _.find(this.options.isos, (option) => option.id === instanceConfig.isoid)
+      this.template = ''
+      for (const key in this.options.templates) {
+        var template = _.find(_.get(this.options.templates[key], 'template', []), (option) => option.id === instanceConfig.templateid)
+        if (template) {
+          this.template = template
+          break
+        }
+      }
+
+      this.iso = ''
+      for (const key in this.options.isos) {
+        var iso = _.find(_.get(this.options.isos[key], 'iso', []), (option) => option.id === instanceConfig.isoid)
+        if (iso) {
+          this.iso = iso
+          break
+        }
+      }
 
       if (instanceConfig.hypervisor) {
         var hypervisorItem = _.find(this.options.hypervisors, (option) => option.name === instanceConfig.hypervisor)
@@ -976,9 +993,16 @@ export default {
           templateid: value,
           isoid: null
         })
-        const templates = this.options.templates.filter(x => x.id === value)
-        if (templates.length > 0) {
-          var size = templates[0].size / (1024 * 1024 * 1024) || 0 // bytes to GB
+        let template = ''
+        for (const key in this.options.templates) {
+          var t = _.find(_.get(this.options.templates[key], 'template', []), (option) => option.id === value)
+          if (t) {
+            template = t
+            break
+          }
+        }
+        if (template) {
+          var size = template.size / (1024 * 1024 * 1024) || 0 // bytes to GB
           this.dataPreFill.minrootdisksize = Math.ceil(size)
         }
       } else if (name === 'isoid') {
@@ -1254,12 +1278,17 @@ export default {
         this.loading[name] = false
       })
     },
-    fetchTemplates (templateFilter) {
+    fetchTemplates (templateFilter, params) {
+      params = params || {}
+      if (params.keyword || params.category !== templateFilter) {
+        params.page = 1
+        params.pageSize = params.pageSize || 10
+      }
+      params.zoneid = _.get(this.zone, 'id')
+      params.templatefilter = templateFilter
+
       return new Promise((resolve, reject) => {
-        api('listTemplates', {
-          zoneid: _.get(this.zone, 'id'),
-          templatefilter: templateFilter
-        }).then((response) => {
+        api('listTemplates', params).then((response) => {
           resolve(response)
         }).catch((reason) => {
           // ToDo: Handle errors
@@ -1267,13 +1296,18 @@ export default {
         })
       })
     },
-    fetchIsos (isoFilter) {
+    fetchIsos (isoFilter, params) {
+      params = params || {}
+      if (params.keyword || params.category !== isoFilter) {
+        params.page = 1
+        params.pageSize = params.pageSize || 10
+      }
+      params.zoneid = _.get(this.zone, 'id')
+      params.isoFilter = isoFilter
+      params.bootable = true
+
       return new Promise((resolve, reject) => {
-        api('listIsos', {
-          zoneid: _.get(this.zone, 'id'),
-          isofilter: isoFilter,
-          bootable: true
-        }).then((response) => {
+        api('listIsos', params).then((response) => {
           resolve(response)
         }).catch((reason) => {
           // ToDo: Handle errors
@@ -1281,20 +1315,19 @@ export default {
         })
       })
     },
-    fetchAllTemplates (filterKeys) {
+    fetchAllTemplates (params) {
       const promises = []
-      this.options.templates = []
+      const templates = {}
       this.loading.templates = true
       this.templateFilter.forEach((filter) => {
-        if (filterKeys && !filterKeys.includes(filter)) {
-          return true
-        }
-        promises.push(this.fetchTemplates(filter))
+        templates[filter] = { count: 0, template: [] }
+        promises.push(this.fetchTemplates(filter, params))
       })
-      Promise.all(promises).then(response => {
-        response.forEach((resItem) => {
-          const concatTemplates = _.concat(this.options.templates, _.get(resItem, 'listtemplatesresponse.template', []))
-          this.options.templates = _.uniqWith(concatTemplates, _.isEqual)
+      this.options.templates = templates
+      Promise.all(promises).then((response) => {
+        response.forEach((resItem, idx) => {
+          templates[this.templateFilter[idx]] = _.isEmpty(resItem.listtemplatesresponse) ? { count: 0, template: [] } : resItem.listtemplatesresponse
+          this.options.templates = { ...templates }
           this.$forceUpdate()
         })
       }).catch((reason) => {
@@ -1303,20 +1336,19 @@ export default {
         this.loading.templates = false
       })
     },
-    fetchAllIsos (filterKey) {
+    fetchAllIsos (params) {
       const promises = []
-      this.options.isos = []
+      const isos = {}
       this.loading.isos = true
       this.isoFilter.forEach((filter) => {
-        if (filterKey && filterKey !== filter) {
-          return true
-        }
-        promises.push(this.fetchIsos(filter))
+        isos[filter] = { count: 0, iso: [] }
+        promises.push(this.fetchIsos(filter, params))
       })
-      Promise.all(promises).then(response => {
-        response.forEach((resItem) => {
-          const concatedIsos = _.concat(this.options.isos, _.get(resItem, 'listisosresponse.iso', []))
-          this.options.isos = _.uniqWith(concatedIsos, _.isEqual)
+      this.options.isos = isos
+      Promise.all(promises).then((response) => {
+        response.forEach((resItem, idx) => {
+          isos[this.isoFilter[idx]] = _.isEmpty(resItem.listisosresponse) ? { count: 0, iso: [] } : resItem.listisosresponse
+          this.options.isos = { ...isos }
           this.$forceUpdate()
         })
       }).catch((reason) => {
diff --git a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index 2423c95fdff..5b5b6912d70 100644
--- a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
@@ -45,8 +45,8 @@
     <div style="display: block; text-align: right;">
       <a-pagination
         size="small"
-        :current="page"
-        :pageSize="pageSize"
+        :current="options.page"
+        :pageSize="options.pageSize"
         :total="itemCount"
         :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
@@ -92,8 +92,10 @@ export default {
   data () {
     return {
       value: '',
-      page: 1,
-      pageSize: 10
+      options: {
+        page: 1,
+        pageSize: 10
+      }
     }
   },
   mounted () {
@@ -119,14 +121,14 @@ export default {
       this.$emit('emit-update-template-iso', this.inputDecorator, id)
     },
     onChangePage (page, pageSize) {
-      this.page = page
-      this.pageSize = pageSize
-      this.$forceUpdate()
+      this.options.page = page
+      this.options.pageSize = pageSize
+      this.$emit('handle-search-filter', this.options)
     },
     onChangePageSize (page, pageSize) {
-      this.page = page
-      this.pageSize = pageSize
-      this.$forceUpdate()
+      this.options.page = page
+      this.options.pageSize = pageSize
+      this.$emit('handle-search-filter', this.options)
     }
   }
 }
diff --git a/ui/src/views/compute/wizard/TemplateIsoSelection.vue b/ui/src/views/compute/wizard/TemplateIsoSelection.vue
index 53aab47756f..31d625971a6 100644
--- a/ui/src/views/compute/wizard/TemplateIsoSelection.vue
+++ b/ui/src/views/compute/wizard/TemplateIsoSelection.vue
@@ -21,12 +21,12 @@
       class="search-input"
       :placeholder="$t('label.search')"
       v-model="filter"
-      @search="filterDataSource">
+      @search="handleSearch">
     </a-input-search>
     <a-spin :spinning="loading">
       <a-tabs
         :animated="false"
-        :defaultActiveKey="Object.keys(dataSource)[0]"
+        :defaultActiveKey="filterOpts[0].id"
         v-model="filterType"
         tabPosition="top"
         @change="changeFilterType">
@@ -36,13 +36,13 @@
           :tab="$t(filterItem.name)">
           <TemplateIsoRadioGroup
             v-if="filterType===filterItem.id"
-            :osList="dataSource[filterItem.id]"
-            :itemCount="itemCount[filterItem.id]"
+            :osList="items[filterItem.id][inputDecorator.slice(0, -2)] || []"
+            :itemCount="items[filterItem.id].count || 0"
             :input-decorator="inputDecorator"
             :selected="checkedValue"
             :preFillContent="preFillContent"
-            @handle-filter-tag="filterDataSource"
             @emit-update-template-iso="updateTemplateIso"
+            @handle-search-filter="($event) => emitSearchFilter($event)"
           ></TemplateIsoRadioGroup>
         </a-tab-pane>
       </a-tabs>
@@ -51,17 +51,15 @@
 </template>
 
 <script>
-import { getNormalizedOsName } from '@/utils/icons'
 import TemplateIsoRadioGroup from '@views/compute/wizard/TemplateIsoRadioGroup'
-import store from '@/store'
 
 export default {
   name: 'TemplateIsoSelection',
   components: { TemplateIsoRadioGroup },
   props: {
     items: {
-      type: Array,
-      default: () => []
+      type: Object,
+      default: () => {}
     },
     inputDecorator: {
       type: String,
@@ -83,11 +81,7 @@ export default {
   data () {
     return {
       filter: '',
-      filteredItems: this.items,
       checkedValue: '',
-      dataSource: {},
-      itemCount: {},
-      visibleFilter: false,
       filterOpts: [{
         id: 'featured',
         name: 'label.featured'
@@ -101,25 +95,23 @@ export default {
         id: 'sharedexecutable',
         name: 'label.sharedexecutable'
       }],
-      osType: '',
-      filterType: '',
-      oldInputDecorator: ''
+      filterType: 'featured'
     }
   },
   watch: {
     items (items) {
-      this.filteredItems = []
       this.checkedValue = ''
-      if (items && items.length > 0) {
-        this.filteredItems = items
-        this.checkedValue = items[0].id
+      const key = this.inputDecorator.slice(0, -2)
+      for (const filter of this.filterOpts) {
+        if (items[filter.id] && items[filter.id][key] && items[filter.id][key].length > 0) {
+          this.filterType = filter.id
+          this.checkedValue = items[filter.id][key][0].id
+          break
+        }
       }
-      this.dataSource = this.mappingDataSource()
-      this.filterType = Object.keys(this.dataSource)[0]
     },
     inputDecorator (newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.oldInputDecorator = this.inputDecorator
         this.filter = ''
       }
     }
@@ -128,107 +120,22 @@ export default {
     this.form = this.$form.createForm(this)
   },
   methods: {
-    mappingDataSource () {
-      const mappedItems = {
-        featured: [],
-        community: [],
-        selfexecutable: [],
-        sharedexecutable: []
-      }
-      const itemCount = {
-        featured: 0,
-        community: 0,
-        selfexecutable: 0,
-        sharedexecutable: 0
-      }
-      this.filteredItems.forEach((os) => {
-        os.osName = getNormalizedOsName(os.ostypename)
-        if (os.isPublic && os.isfeatured) {
-          mappedItems.community.push(os)
-          itemCount.community = itemCount.community + 1
-        } else if (os.isfeatured) {
-          mappedItems.featured.push(os)
-          itemCount.featured = itemCount.featured + 1
-        } else {
-          const isSelf = !os.ispublic && (os.account === store.getters.userInfo.account)
-          if (isSelf) {
-            mappedItems.selfexecutable.push(os)
-            itemCount.selfexecutable = itemCount.selfexecutable + 1
-          } else {
-            mappedItems.sharedexecutable.push(os)
-            itemCount.sharedexecutable = itemCount.sharedexecutable + 1
-          }
-        }
-      })
-      this.itemCount = itemCount
-      return mappedItems
-    },
     updateTemplateIso (name, id) {
       this.checkedValue = id
       this.$emit('update-template-iso', name, id)
     },
-    filterDataSource (strQuery) {
-      if (strQuery !== '' && strQuery.includes('is:')) {
-        this.filteredItems = []
-        this.filter = strQuery
-        const filters = strQuery.split(';')
-        filters.forEach((filter) => {
-          const query = filter.replace(/ /g, '')
-          const data = this.filterDataSourceByTag(query)
-          this.filteredItems = this.filteredItems.concat(data)
-        })
-      } else if (strQuery !== '') {
-        this.filteredItems = this.items.filter((item) => item.displaytext.toLowerCase().includes(strQuery.toLowerCase()))
-      } else {
-        this.filteredItems = this.items
+    handleSearch (value) {
+      this.filter = value
+      const options = {
+        page: 1,
+        pageSize: 10,
+        keyword: this.filter
       }
-      this.dataSource = this.mappingDataSource()
+      this.emitSearchFilter(options)
     },
-    filterDataSourceByTag (tag) {
-      let arrResult = []
-      if (tag.includes('public')) {
-        arrResult = this.items.filter((item) => {
-          return item.ispublic && item.isfeatured
-        })
-      } else if (tag.includes('featured')) {
-        arrResult = this.items.filter((item) => {
-          return item.isfeatured
-        })
-      } else if (tag.includes('self')) {
-        arrResult = this.items.filter((item) => {
-          return !item.ispublic && (item.account === store.getters.userInfo.account)
-        })
-      } else if (tag.includes('shared')) {
-        arrResult = this.items.filter((item) => {
-          return !item.ispublic && (item.account !== store.getters.userInfo.account)
-        })
-      }
-
-      return arrResult
-    },
-    handleSubmit (e) {
-      e.preventDefault()
-      this.form.validateFields((err, values) => {
-        if (err) {
-          return
-        }
-        const filtered = values.filter || []
-        this.filter = ''
-        filtered.map(item => {
-          if (this.filter.length === 0) {
-            this.filter += 'is:' + item
-          } else {
-            this.filter += '; is:' + item
-          }
-        })
-        this.filterDataSource(this.filter)
-      })
-    },
-    onClear () {
-      const field = { filter: undefined }
-      this.form.setFieldsValue(field)
-      this.filter = ''
-      this.filterDataSource('')
+    emitSearchFilter (options) {
+      options.category = this.filterType
+      this.$emit('handle-search-filter', options)
     },
     changeFilterType (value) {
       this.filterType = value