From 1d4f10bead2e8358f172f3c3bca06dca5397ee64 Mon Sep 17 00:00:00 2001 From: Matthieu Hostache Date: Tue, 10 Dec 2019 17:48:04 +0100 Subject: [PATCH] Fix http/tcp resources pagination --- webui/src/_services/HttpService.js | 31 +++++++++++++++--------------- webui/src/_services/TcpService.js | 21 ++++++++++---------- webui/src/_services/utils.js | 8 ++++++++ webui/src/index.template.html | 2 +- 4 files changed, 36 insertions(+), 26 deletions(-) create mode 100644 webui/src/_services/utils.js diff --git a/webui/src/_services/HttpService.js b/webui/src/_services/HttpService.js index 48010c1e0..0e206b24d 100644 --- a/webui/src/_services/HttpService.js +++ b/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 => { - const total = body.data ? body.data.length : 0 - console.log('Success -> HttpService -> getAllRouters', body.data) - // TODO - suggestion: add the total-pages in api response to optimize the query - return { data: body.data || [], total } + .then(response => { + const { data = [], headers } = response + const total = getTotal(headers, params) + console.log('Success -> HttpService -> getAllRouters', response, response.data) + 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 => { - const total = body.data ? body.data.length : 0 - console.log('Success -> HttpService -> getAllServices', body.data) - // TODO - suggestion: add the total-pages in api response to optimize the query - return { data: body.data || [], total } + .then(response => { + const { data = [], headers } = response + const total = getTotal(headers, params) + console.log('Success -> HttpService -> getAllServices', response.data) + 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 => { - const total = body.data ? body.data.length : 0 - console.log('Success -> HttpService -> getAllMiddlewares', body.data) - // TODO - suggestion: add the total-pages in api response to optimize the query - return { data: body.data || [], total } + .then(response => { + const { data = [], headers } = response + const total = getTotal(headers, params) + console.log('Success -> HttpService -> getAllMiddlewares', response.data) + return { data, total } }) } diff --git a/webui/src/_services/TcpService.js b/webui/src/_services/TcpService.js index 694ce099c..41c7d3dfa 100644 --- a/webui/src/_services/TcpService.js +++ b/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 => { - const total = body.data ? body.data.length : 0 - console.log('Success -> HttpService -> getAllRouters', body.data) - // TODO - suggestion: add the total-pages in api response to optimize the query - return { data: body.data || [], total } + .then(response => { + const { data = [], headers } = response + const total = getTotal(headers, params) + console.log('Success -> HttpService -> getAllRouters', response.data) + 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 => { - const total = body.data ? body.data.length : 0 - console.log('Success -> HttpService -> getAllServices', body.data) - // TODO - suggestion: add the total-pages in api response to optimize the query - return { data: body.data || [], total } + .then(response => { + const { data = [], headers } = response + const total = getTotal(headers, params) + console.log('Success -> HttpService -> getAllServices', response.data) + return { data, total } }) } diff --git a/webui/src/_services/utils.js b/webui/src/_services/utils.js new file mode 100644 index 000000000..1f310c15d --- /dev/null +++ b/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 +} diff --git a/webui/src/index.template.html b/webui/src/index.template.html index c0e888f21..9991c1293 100644 --- a/webui/src/index.template.html +++ b/webui/src/index.template.html @@ -7,7 +7,7 @@ - +