autogenview: use pagesize 20 for desktop users, 10 otherwise

Fixes #489

Set default page size based on screentype, for FHD/4K displays if device
type is desktop use pagesize 20; otherwise use default pagesize of 10.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/locales/en.json

@@ -503,7 +503,7 @@
 "label.character": "Character",
 "label.chassis": "Chassis",
 "label.checksum": "Checksum",
-"label.cidr": "Super CIDR for Guest Networks",
+"label.cidr": "CIDR",
 "label.cidr.account": "CIDR or Account/Security Group",
 "label.cidr.destination.network": "Destination Network CIDR",
 "label.cidr.of.destination.network": "CIDR of destination network",

ui/src/views/AutogenView.vue

@@ -304,8 +304,8 @@
         :current="page"
         :pageSize="pageSize"
         :total="itemCount"
-        :showTotal="total => `Total ${total} items`"
-        :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
+        :showTotal="total => `Showing ${1+((page-1)*pageSize)}-${Math.min(page*pageSize, total)} of ${total} items`"
+        :pageSizeOptions="device === 'desktop' ? ['20', '50', '100', '500'] : ['10', '20', '50', '100', '500']"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
@@ -376,6 +376,9 @@ export default {
     this.form = this.$form.createForm(this)
   },
   mounted () {
+    if (this.device === 'desktop') {
+      this.pageSize = 20
+    }
     this.currentPath = this.$route.fullPath
     this.fetchData()
     if ('projectid' in this.$route.query) {