Web UI: Table infinite scroll

webui/package.json

@@ -22,13 +22,13 @@
     "chart.js": "^2.8.0",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
-    "quasar": "^1.0.0",
+    "quasar": "^1.4.4",
     "vh-check": "^2.0.5",
     "vue-chartjs": "^3.4.2",
     "vuex-map-fields": "^1.3.4"
   },
   "devDependencies": {
-    "@quasar/app": "^1.0.0",
+    "@quasar/app": "^1.2.4",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.10.0",

webui/src/_helpers/Errors.js

@@ -27,7 +27,11 @@ class Errors {
     if (error.response.status === 401) {
       // TODO - actions...
     }
-    Errors.showError(body)
+
+    // Avoid to notify when reaching end of an infinite scroll
+    if (!error.response.data.message.includes('invalid request: page:')) {
+      Errors.showError(body)
+    }
     return Promise.reject(body)
   }
 

webui/src/components/_commons/MainTable.vue

@@ -1,94 +1,114 @@
 <template>
   <div class="table-wrapper">
-    <q-table
-      :data="data"
-      :columns="columns"
-      row-key="name"
-      :pagination.sync="syncPagination"
-      :rows-per-page-options="[10, 20, 40, 80, 100, 0]"
-      :loading="loading"
-      :filter="filter"
-      @request="request"
-      binary-state-sort
-      :visible-columns="visibleColumns"
-      color="primary"
-      table-header-class="table-header">
-
-      <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer" @click.native="$router.push({ path: `/${getPath}/${props.row.name}`})">
-          <q-td key="status" :props="props" auto-width>
-            <avatar-state :state="props.row.status | status "/>
-          </q-td>
-          <q-td key="tls" :props="props" auto-width>
-            <t-l-s-state :is-t-l-s="props.row.tls"/>
-          </q-td>
-          <q-td key="rule" :props="props">
-            <q-chip
-              v-if="props.row.rule"
-              dense
-              class="app-chip app-chip-rule">
-              {{ props.row.rule }}
-            </q-chip>
-          </q-td>
-          <q-td key="entryPoints" :props="props">
-            <div v-if="props.row.using">
+    <q-infinite-scroll @load="handleLoadMore" :offset="250" ref="scroller">
+      <q-markup-table>
+        <thead>
+          <tr class="table-header">
+            <th
+              v-for="column in getColumns()"
+              v-bind:class="`text-${column.align}`"
+              v-bind:key="column.name">
+              {{ column.label }}
+            </th>
+          </tr>
+        </thead>
+        <tfoot v-if="!data.length">
+          <tr>
+            <td colspan="100%">
+              <q-icon name="warning" style="font-size: 1.5rem"/> No data available
+            </td>
+          </tr>
+        </tfoot>
+        <tbody>
+          <tr v-for="row in data" :key="row.name" class="cursor-pointer" @click="$router.push({ path: `/${getPath}/${row.name}`})">
+            <td v-if="hasColumn('status')" v-bind:class="`text-${getColumn('status').align}`">
+              <avatar-state :state="row.status | status "/>
+            </td>
+            <td v-if="hasColumn('tls')" v-bind:class="`text-${getColumn('tls').align}`">
+              <t-l-s-state :is-t-l-s="row.tls"/>
+            </td>
+            <td v-if="hasColumn('rule')" v-bind:class="`text-${getColumn('rule').align}`">
+              <q-chip
+                :v-if="row.rule"
+                dense
+                class="app-chip app-chip-rule">
+                {{ row.rule }}
+              </q-chip>
+            </td>
+            <td v-if="hasColumn('entryPoints')" v-bind:class="`text-${getColumn('entryPoints').align}`">
+              <div v-if="row.using">
+                <q-chip
+                  v-for="(entryPoints, index) in row.using" :key="index"
+                  dense
+                  class="app-chip app-chip-entry-points">
+                  {{ entryPoints }}
+                </q-chip>
+              </div>
+            </td>
+            <td v-if="hasColumn('name')" v-bind:class="`text-${getColumn('name').align}`">
+              <q-chip
+                v-if="row.name"
+                dense
+                class="app-chip app-chip-name">
+                {{ row.name }}
+              </q-chip>
+            </td>
+            <td v-if="hasColumn('type')" v-bind:class="`text-${getColumn('type').align}`">
               <q-chip
-                v-for="(entryPoints, index) in props.row.using" :key="index"
+                v-if="row.type"
                 dense
                 class="app-chip app-chip-entry-points">
-                {{ entryPoints }}
+                {{ row.type }}
+              </q-chip>
+            </td>
+            <td v-if="hasColumn('servers')" v-bind:class="`text-${getColumn('servers').align}`">
+              <span class="servers-label">{{ row | servers }}</span>
+            </td>
+            <td v-if="hasColumn('service')" v-bind:class="`text-${getColumn('service').align}`">
+              <q-chip
+                v-if="row.service"
+                dense
+                class="app-chip app-chip-service">
+                {{ row.service }}
               </q-chip>
-            </div>
-          </q-td>
-          <q-td key="name" :props="props">
-            <q-chip
-              v-if="props.row.name"
-              dense
-              class="app-chip app-chip-name">
-              {{ props.row.name }}
-            </q-chip>
-          </q-td>
-          <q-td key="type" :props="props">
-            <q-chip
-              v-if="props.row.type"
-              dense
-              class="app-chip app-chip-entry-points">
-              {{ props.row.type }}
-            </q-chip>
-          </q-td>
-          <q-td key="servers" :props="props">
-            <span class="servers-label">{{ props.row | servers }}</span>
-          </q-td>
-          <q-td key="service" :props="props">
-            <q-chip
-              v-if="props.row.service"
-              dense
-              class="app-chip app-chip-service">
-              {{ props.row.service }}
-            </q-chip>
-          </q-td>
-          <q-td key="provider" :props="props" auto-width>
-            <q-avatar class="provider-logo">
-              <q-icon :name="`img:statics/providers/${props.row.provider}.svg`" />
-            </q-avatar>
-          </q-td>
-        </q-tr>
+            </td>
+            <td v-if="hasColumn('provider')" v-bind:class="`text-${getColumn('provider').align}`">
+              <q-avatar class="provider-logo">
+                <q-icon :name="`img:statics/providers/${row.provider}.svg`" />
+              </q-avatar>
+            </td>
+          </tr>
+        </tbody>
+      </q-markup-table>
+      <template v-slot:loading v-if="loading">
+        <div class="row justify-center q-my-md">
+          <q-spinner-dots color="app-grey" size="40px" />
+        </div>
       </template>
-
-    </q-table>
+    </q-infinite-scroll>
+    <q-page-scroller position="bottom" :scroll-offset="150" class="back-to-top" v-if="endReached">
+      <q-btn color="primary" small>
+        Back to top
+      </q-btn>
+    </q-page-scroller>
   </div>
 </template>
 
 <script>
 import AvatarState from './AvatarState'
 import TLSState from './TLSState'
+import { QMarkupTable, QInfiniteScroll, QSpinnerDots, QPageScroller } from 'quasar'
 
 export default {
   name: 'MainTable',
-  props: ['data', 'request', 'loading', 'pagination', 'filter', 'type'],
+  props: ['data', 'request', 'loading', 'pagination', 'type', 'onLoadMore', 'endReached'],
   components: {
     TLSState,
-    AvatarState
+    AvatarState,
+    QMarkupTable,
+    QInfiniteScroll,
+    QSpinnerDots,
+    QPageScroller
   },
   data () {
     return {
@@ -156,14 +176,6 @@ export default {
     }
   },
   computed: {
-    syncPagination: {
-      get () {
-        return this.pagination
-      },
-      set (newValue) {
-        this.$emit('update:pagination', newValue)
-      }
-    },
     getPath () {
       return this.type.replace('-', '/', 'gi')
     }
@@ -195,6 +207,22 @@ export default {
     if (this.type === 'http-middlewares') {
       this.visibleColumns = this.visibleColumnsHttpMiddlewares
     }
+  },
+  methods: {
+    hasColumn (columnName) {
+      return this.visibleColumns.includes(columnName)
+    },
+    getColumns () {
+      return this.columns.filter(c => this.visibleColumns.includes(c.name))
+    },
+    getColumn (columnName) {
+      return this.columns.find(c => c.name === columnName) || {}
+    },
+    handleLoadMore (index, done) {
+      this.onLoadMore({ page: index })
+        .then(() => done())
+        .catch(() => done(true))
+    }
   }
 }
 </script>
@@ -231,6 +259,10 @@ export default {
         }
       }
     }
+
+    .back-to-top {
+      margin: 16px 0;
+    }
   }
 
   .servers-label{

webui/src/components/_commons/TLSState.vue

@@ -17,8 +17,8 @@ export default {
   .q-avatar{
     font-size: 32px;
     border-radius: 4px;
-    color: green;
     .q-icon {
+      color: green;
       font-size: 22px;
       margin: 0 0 0 1px;
     }

webui/src/index.template.html

@@ -7,7 +7,7 @@
     <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
     <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
     <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">

webui/src/pages/http/Middlewares.vue

@@ -8,7 +8,14 @@
         </div>
         <div class="row items-center q-col-gutter-lg">
           <div class="col-12">
-            <main-table :data="allMiddlewares.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="http-middlewares"/>
+            <main-table
+              ref="mainTable"
+              :data="allMiddlewares.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allMiddlewares.endReached"
+              :loading="allMiddlewares.loading"
+              type="http-middlewares"
+            />
           </div>
         </div>
       </div>
@@ -49,25 +56,39 @@ export default {
   },
   methods: {
     ...mapActions('http', { getAllMiddlewares: 'getAllMiddlewares' }),
+    initData () {
+      const scrollerRef = this.$refs.mainTable.$refs.scroller
+      if (scrollerRef) {
+        scrollerRef.stop()
+        scrollerRef.reset()
+      }
+
+      this.handleLoadMore({ page: 1 }).then(() => {
+        if (scrollerRef) {
+          scrollerRef.resume()
+          scrollerRef.poll()
+        }
+      })
+    },
     refreshAll () {
       if (this.allMiddlewares.loading) {
         return
       }
-      this.pagination.page = 1
-      this.onGetAll({
+
+      this.handleLoadMore({ page: 1 })
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      this.pagination.page = page
+      return this.onGetAll({
         pagination: this.pagination,
         filter: this.filter
       })
     },
     onGetAll (props) {
       let { page, rowsPerPage, sortBy, descending } = props.pagination
 
-      this.getAllMiddlewares({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
+      return this.getAllMiddlewares({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
         .then(body => {
-          if (!body) {
-            this.loading = false
-            return
-          }
           this.loading = false
           console.log('Success -> http/middlewares', body)
           // update rowsNumber with appropriate value
@@ -78,17 +99,14 @@ export default {
           this.pagination.sortBy = sortBy
           this.pagination.descending = descending
         })
-        .catch(error => {
-          console.log('Error -> http/middlewares', error)
-        })
     }
   },
   watch: {
     'status' () {
-      this.refreshAll()
+      this.initData()
     },
     'filter' () {
-      this.refreshAll()
+      this.initData()
     }
   },
   created () {