Web UI: Polling on tables

webui/src/_mixins/Pagination.js

@@ -0,0 +1,74 @@
+import { get } from 'dot-prop'
+
+export default function PaginationMixin (opts = {}) {
+  const { pollingIntervalTime, rowsPerPage = 10 } = opts
+  let listLength = 0
+  let currentPage = 1
+  let currentLimit = rowsPerPage
+
+  return {
+    methods: {
+      fetchWithInterval () {
+        this.initFetch({ limit: listLength })
+        this.pollingInterval = setInterval(
+          () => {
+            this.fetchMore({
+              limit: Math.ceil(listLength / rowsPerPage) * rowsPerPage, // round up to multiple of rowsPerPage
+              refresh: true
+            })
+          },
+          pollingIntervalTime
+        )
+      },
+      fetchMore ({ page = 1, limit = rowsPerPage, refresh, ...params } = {}) {
+        if (page === currentPage && limit === currentLimit && !refresh) {
+          return Promise.resolve()
+        }
+
+        currentPage = page
+        currentLimit = limit || rowsPerPage
+
+        const fetchMethod = get(this, opts.fetchMethod)
+
+        return fetchMethod({
+          ...params,
+          page,
+          limit: limit || rowsPerPage
+        }).then(res => {
+          listLength = page > 1
+            ? listLength += res.data.length
+            : res.data.length
+        })
+      },
+      initFetch (params) {
+        const scrollerRef = get(this.$refs, opts.scrollerRef)
+
+        if (scrollerRef) {
+          scrollerRef.stop()
+          scrollerRef.reset()
+        }
+
+        return this.fetchMore({
+          page: 1,
+          refresh: true,
+          ...params
+        }).then(() => {
+          if (scrollerRef) {
+            scrollerRef.resume()
+            scrollerRef.poll()
+          }
+        })
+      }
+    },
+    mounted () {
+      if (pollingIntervalTime) {
+        this.fetchWithInterval()
+      } else {
+        this.fetchMore()
+      }
+    },
+    beforeDestroy () {
+      clearInterval(this.pollingInterval)
+    }
+  }
+}