Feature/vm wizard

src/locales/en.json

@@ -1103,7 +1103,7 @@
 "sshKeyPairs": "SSH keypairs",
 "wednesday": "Wednesday",
 "noselect": "No thanks",
-"groupname": "Add to group",
+"group": "Group",
 "keyboard": "Keyboard language",
 "userdata": "Userdata",
 "label.back": "Back",

src/utils/device.js

@@ -42,9 +42,8 @@ export const deviceEnquire = function (callback) {
     }
   }
 
-  // screen and (max-width: 1087.99px)
   enquireJs
-    .register('screen and (max-width: 576px)', matchMobile)
-    .register('screen and (min-width: 576px) and (max-width: 1280px)', matchTablet)
-    .register('screen and (min-width: 1281px)', matchDesktop)
+    .register('screen and (max-width: 800px)', matchMobile)
+    .register('screen and (min-width: 800px) and (max-width: 1366px)', matchTablet)
+    .register('screen and (min-width: 1367px)', matchDesktop)
 }

src/views/AutogenView.vue

@@ -235,7 +235,7 @@
         :pageSize="pageSize"
         :total="itemCount"
         :showTotal="total => `Total ${total} items`"
-        :pageSizeOptions="['10', '20', '40', '80', '100']"
+        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger

src/views/compute/KubernetesServiceTab.vue

@@ -19,7 +19,7 @@
   <a-spin :spinning="networkLoading">
     <a-tabs
       :activeKey="currentTab"
-      :tabPosition="device === 'tablet' || device === 'mobile' ? 'top' : 'left'"
+      :tabPosition="device === 'mobile' ? 'top' : 'left'"
       :animated="false"
       @change="handleChangeTab">
       <a-tab-pane :tab="$t('details')" key="details">

src/views/compute/wizard/AffinityGroupSelection.vue

@@ -16,15 +16,24 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="items"
-    :rowKey="record => record.id"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-    size="middle"
-  >
-  </a-table>
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :dataSource="items"
+      :rowKey="record => record.id"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      size="middle"
+      :scroll="{ y: 225 }"
+    >
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -40,10 +49,15 @@ export default {
     value: {
       type: Array,
       default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       columns: [
         {
           dataIndex: 'name',
@@ -60,6 +74,13 @@ export default {
     }
   },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     rowSelection () {
       return {
         type: 'checkbox',
@@ -76,6 +97,18 @@ export default {
         this.selectedRowKeys = newValue
       }
     }
+  },
+  methods: {
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
+    }
   }
 }
 </script>

src/views/compute/wizard/ComputeSelection.vue

@@ -16,16 +16,26 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="tableSource"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-    size="middle"
-  >
-    <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('cpu') }}</span>
-    <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('memory') }}</span>
-  </a-table>
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :columns="columns"
+      :dataSource="tableSource"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      :loading="loading"
+      size="middle"
+      @change="handleTableChange"
+      :scroll="{ y: 225 }"
+    >
+      <span slot="cpuTitle"><a-icon type="appstore" /> {{ $t('cpu') }}</span>
+      <span slot="ramTitle"><a-icon type="bulb" /> {{ $t('memory') }}</span>
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -39,10 +49,15 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       columns: [
         {
           dataIndex: 'name',
@@ -64,6 +79,13 @@ export default {
     }
   },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     tableSource () {
       return this.computeItems.map((item) => {
         return {
@@ -78,9 +100,7 @@ export default {
       return {
         type: 'radio',
         selectedRowKeys: this.selectedRowKeys,
-        onSelect: (row) => {
-          this.$emit('select-compute-item', row.key)
-        }
+        onChange: this.onSelectRow
       }
     }
   },
@@ -90,6 +110,22 @@ export default {
         this.selectedRowKeys = [newValue]
       }
     }
+  },
+  methods: {
+    onSelectRow (value) {
+      this.selectedRowKeys = value
+      this.$emit('select-compute-item', value[0])
+    },
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
+    }
   }
 }
 </script>

src/views/compute/wizard/DiskOfferingSelection.vue

@@ -16,20 +16,37 @@
 // under the License.
 
 <template>
-  <a-table
-    :columns="columns"
-    :dataSource="tableSource"
-    :pagination="{showSizeChanger: true}"
-    :rowSelection="rowSelection"
-    size="middle"
-  >
-    <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('disksize') }}</span>
-    <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('minMaxIops') }}</span>
-    <template slot="diskSize" slot-scope="text, record">
-      <div v-if="record.isCustomized">{{ $t('isCustomized') }}</div>
-      <div v-else>{{ record.diskSize }} GB</div>
-    </template>
-  </a-table>
+  <div>
+    <a-input-search
+      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
+      placeholder="Search"
+      v-model="filter"
+      @search="handleSearch" />
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :dataSource="tableSource"
+      :pagination="{showSizeChanger: true}"
+      :rowSelection="rowSelection"
+      size="middle"
+      @change="handleTableChange"
+      :scroll="{ y: 225 }"
+    >
+      <span slot="diskSizeTitle"><a-icon type="hdd" /> {{ $t('disksize') }}</span>
+      <span slot="iopsTitle"><a-icon type="rocket" /> {{ $t('minMaxIops') }}</span>
+      <template slot="diskSize" slot-scope="text, record">
+        <div v-if="record.isCustomized">{{ $t('isCustomized') }}</div>
+        <div v-else-if="record.diskSize">{{ record.diskSize }} GB</div>
+        <div v-else>-</div>
+      </template>
+      <template slot="iops" slot-scope="text, record">
+        <span v-if="record.miniops && record.maxiops">{{ record.miniops }} - {{ record.maxiops }}</span>
+        <span v-else-if="record.miniops && !record.maxiops">{{ record.miniops }}</span>
+        <span v-else-if="!record.miniops && record.maxiops">{{ record.maxiops }}</span>
+        <span v-else>-</span>
+      </template>
+    </a-table>
+  </div>
 </template>
 
 <script>
@@ -43,39 +60,65 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      filter: '',
       columns: [
         {
           dataIndex: 'name',
-          title: this.$t('diskOffering'),
+          title: this.$t('diskoffering'),
           width: '40%'
         },
         {
-          dataIndex: 'diskSize',
+          dataIndex: 'disksize',
           slots: { title: 'diskSizeTitle' },
           width: '30%',
           scopedSlots: { customRender: 'diskSize' }
         },
         {
           dataIndex: 'iops',
           slots: { title: 'iopsTitle' },
-          width: '30%'
+          width: '30%',
+          scopedSlots: { customRender: 'iops' }
         }
       ],
-      selectedRowKeys: []
+      selectedRowKeys: ['0'],
+      dataItems: []
     }
   },
+  created () {
+    this.dataItems = []
+    this.dataItems.push({
+      id: '0',
+      name: this.$t('noselect'),
+      diskSize: undefined,
+      miniops: undefined,
+      maxiops: undefined,
+      isCustomized: undefined
+    })
+  },
   computed: {
+    options () {
+      return {
+        page: 1,
+        pageSize: 10,
+        keyword: ''
+      }
+    },
     tableSource () {
-      return this.items.map((item) => {
+      return this.dataItems.map((item) => {
         return {
           key: item.id,
           name: item.name,
           diskSize: item.disksize,
-          iops: `${item.miniops} – ${item.maxiops}`,
+          miniops: item.miniops,
+          maxiops: item.maxiops,
           isCustomized: item.iscustomized
         }
       })
@@ -84,9 +127,7 @@ export default {
       return {
         type: 'radio',
         selectedRowKeys: this.selectedRowKeys,
-        onSelect: (row) => {
-          this.$emit('select-disk-offering-item', row.key)
-        }
+        onChange: this.onSelectRow
       }
     }
   },
@@ -95,6 +136,27 @@ export default {
       if (newValue && newValue !== oldValue) {
         this.selectedRowKeys = [newValue]
       }
+    },
+    items (newData, oldData) {
+      if (newData && newData.length > 0) {
+        this.dataItems = this.dataItems.concat(newData)
+      }
+    }
+  },
+  methods: {
+    onSelectRow (value) {
+      this.selectedRowKeys = value
+      this.$emit('select-disk-offering-item', value[0])
+    },
+    handleSearch (value) {
+      this.filter = value
+      this.options.keyword = this.filter
+      this.$emit('handle-search-filter', this.options)
+    },
+    handleTableChange (pagination) {
+      this.options.page = pagination.current
+      this.options.pageSize = pagination.pageSize
+      this.$emit('handle-search-filter', this.options)
     }
   }
 }