Fix http/tcp resources pagination

webui/src/_services/HttpService.js

@@ -1,14 +1,15 @@
 import { APP } from '../_helpers/APP'
+import { getTotal } from './utils'
 
 const apiBase = '/http'
 
 function getAllRouters (params) {
   return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
+    .then(response => {
-      const total = body.data ? body.data.length : 0
+      const { data = [], headers } = response
-      console.log('Success -> HttpService -> getAllRouters', body.data)
+      const total = getTotal(headers, params)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
+      console.log('Success -> HttpService -> getAllRouters', response, response.data)
-      return { data: body.data || [], total }
+      return { data, total }
     })
 }
 
@@ -22,11 +23,11 @@ function getRouterByName (name) {
 
 function getAllServices (params) {
   return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
+    .then(response => {
-      const total = body.data ? body.data.length : 0
+      const { data = [], headers } = response
-      console.log('Success -> HttpService -> getAllServices', body.data)
+      const total = getTotal(headers, params)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
+      console.log('Success -> HttpService -> getAllServices', response.data)
-      return { data: body.data || [], total }
+      return { data, total }
     })
 }
 
@@ -40,11 +41,11 @@ function getServiceByName (name) {
 
 function getAllMiddlewares (params) {
   return APP.api.get(`${apiBase}/middlewares?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
+    .then(response => {
-      const total = body.data ? body.data.length : 0
+      const { data = [], headers } = response
-      console.log('Success -> HttpService -> getAllMiddlewares', body.data)
+      const total = getTotal(headers, params)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
+      console.log('Success -> HttpService -> getAllMiddlewares', response.data)
-      return { data: body.data || [], total }
+      return { data, total }
     })
 }
 

webui/src/_services/TcpService.js

@@ -1,14 +1,15 @@
 import { APP } from '../_helpers/APP'
+import { getTotal } from './utils'
 
 const apiBase = '/tcp'
 
 function getAllRouters (params) {
   return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
+    .then(response => {
-      const total = body.data ? body.data.length : 0
+      const { data = [], headers } = response
-      console.log('Success -> HttpService -> getAllRouters', body.data)
+      const total = getTotal(headers, params)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
+      console.log('Success -> HttpService -> getAllRouters', response.data)
-      return { data: body.data || [], total }
+      return { data, total }
     })
 }
 
@@ -22,11 +23,11 @@ function getRouterByName (name) {
 
 function getAllServices (params) {
   return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
-    .then(body => {
+    .then(response => {
-      const total = body.data ? body.data.length : 0
+      const { data = [], headers } = response
-      console.log('Success -> HttpService -> getAllServices', body.data)
+      const total = getTotal(headers, params)
-      // TODO - suggestion: add the total-pages in api response to optimize the query
+      console.log('Success -> HttpService -> getAllServices', response.data)
-      return { data: body.data || [], total }
+      return { data, total }
     })
 }
 

webui/src/_services/utils.js

@@ -0,0 +1,8 @@
+export const getTotal = (headers, params) => {
+  const nextPage = parseInt(headers['x-next-page'], 10) || 1
+  const hasNextPage = nextPage > 1
+
+  return hasNextPage
+    ? (params.page + 1) * params.limit
+    : params.page * params.limit
+}

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">