Merge pull request #7576 from TheThingsNetwork/fix/webhook-pubsub-pagination-console

Add pagination to webhooks and pubsubs

Author: ryaplots

pkg/webui/components/pagination/index.js

@@ -100,7 +100,7 @@ const Pagination = ({
 
   // Don't show page size select if there are less than 20 items.
   // 20 is the smallest amount of items that can be displayed per page.
-  if (totalCount < 20) {
+  if (totalCount < propPageSize) {
     return null
   }
 

pkg/webui/console/containers/pubsubs-table/index.js

@@ -84,7 +84,7 @@ const getItemPathPrefix = item => `${item.ids.pub_sub_id}`
 const PubsubsTable = () => {
   const { appId } = useParams()
 
-  const getItemsAction = useCallback(() => getPubsubsList(appId), [appId])
+  const getItemsAction = useCallback(filters => getPubsubsList(appId, { ...filters }), [appId])
 
   const baseDataSelector = createSelector(
     [selectPubsubs, selectPubsubsTotalCount],
@@ -104,7 +104,6 @@ const PubsubsTable = () => {
       baseDataSelector={baseDataSelector}
       tableTitle={<Message content={sharedMessages.pubsubs} />}
       getItemPathPrefix={getItemPathPrefix}
-      paginated={false}
       handlesSorting
     />
   )

pkg/webui/console/containers/webhooks-table/index.js

@@ -45,7 +45,7 @@ const WebhooksTable = () => {
   const { appId } = useParams()
   const healthStatusEnabled = useSelector(selectWebhooksHealthStatusEnabled)
   const getWebhooksListCallback = useCallback(
-    () => getWebhooksList(appId, ['template_ids', 'health_status', 'paused']),
+    filters => getWebhooksList(appId, ...filters, ['template_ids', 'health_status', 'paused']),
     [appId],
   )
 
@@ -131,7 +131,6 @@ const WebhooksTable = () => {
       getItemsAction={getWebhooksListCallback}
       baseDataSelector={baseDataSelector}
       tableTitle={<Message content={sharedMessages.webhooks} />}
-      paginated={false}
       handlesSorting
     />
   )

pkg/webui/console/store/actions/pubsubs.js

@@ -13,6 +13,10 @@
 // limitations under the License.
 
 import createRequestActions from '@ttn-lw/lib/store/actions/create-request-actions'
+import {
+  createPaginationBaseActionType,
+  createPaginationByIdRequestActions,
+} from '@ttn-lw/lib/store/actions/pagination'
 
 export const CREATE_PUBSUB_BASE = 'CREATE_PUBSUB'
 export const [
@@ -30,15 +34,15 @@ export const [
   (appId, pubsubId, selector) => ({ selector }),
 )
 
-export const GET_PUBSUBS_LIST_BASE = 'GET_PUBSUBS_LIST'
+export const GET_PUBSUBS_LIST_BASE = createPaginationBaseActionType('PUBSUB')
 export const [
   {
     request: GET_PUBSUBS_LIST,
     success: GET_PUBSUBS_LIST_SUCCESS,
     failure: GET_PUBSUBS_LIST_FAILURE,
   },
   { request: getPubsubsList, success: getPubsubsListSuccess, failure: getPubsubsListFailure },
-] = createRequestActions(GET_PUBSUBS_LIST_BASE, appId => ({ appId }))
+] = createPaginationByIdRequestActions('PUBSUB')
 
 export const UPDATE_PUBSUB_BASE = 'UPDATE_PUBSUB'
 export const [

pkg/webui/console/store/actions/webhooks.js

@@ -13,6 +13,10 @@
 // limitations under the License.
 
 import createRequestActions from '@ttn-lw/lib/store/actions/create-request-actions'
+import {
+  createPaginationBaseActionType,
+  createPaginationByIdRequestActions,
+} from '@ttn-lw/lib/store/actions/pagination'
 
 export const GET_WEBHOOK_BASE = 'GET_WEBHOOK'
 export const [
@@ -24,19 +28,15 @@ export const [
   (appId, webhookId, selector) => ({ selector }),
 )
 
-export const GET_WEBHOOKS_LIST_BASE = 'GET_WEBHOOKS_LIST'
+export const GET_WEBHOOKS_LIST_BASE = createPaginationBaseActionType('WEBHOOKS')
 export const [
   {
     request: GET_WEBHOOKS_LIST,
     success: GET_WEBHOOKS_LIST_SUCCESS,
     failure: GET_WEBHOOKS_LIST_FAILURE,
   },
   { request: getWebhooksList, success: getWebhooksListSuccess, failure: getWebhooksListFailure },
-] = createRequestActions(
-  GET_WEBHOOKS_LIST_BASE,
-  appId => ({ appId }),
-  (appId, selector) => ({ selector }),
-)
+] = createPaginationByIdRequestActions('WEBHOOKS')
 
 export const UPDATE_WEBHOOK_BASE = 'UPDATE_WEBHOOK'
 export const [

pkg/webui/console/store/middleware/logics/pubsubs.js

@@ -43,8 +43,12 @@ const getPubsubLogic = createRequestLogic({
 const getPubsubsLogic = createRequestLogic({
   type: pubsubs.GET_PUBSUBS_LIST,
   process: async ({ action }) => {
-    const { appId } = action.payload
-    const res = await tts.Applications.PubSubs.getAll(appId)
+    const {
+      id: appId,
+      params: { page, limit, order },
+    } = action.payload
+    const { selectors } = action.meta
+    const res = await tts.Applications.PubSubs.getAll(appId, { page, limit, order }, selectors)
 
     return { entities: res.pubsubs, totalCount: res.totalCount }
   },

pkg/webui/console/store/middleware/logics/webhooks.js

@@ -36,10 +36,12 @@ const getWebhooksLogic = createRequestLogic({
   type: webhooks.GET_WEBHOOKS_LIST,
   process: async ({ action }) => {
     const {
-      payload: { appId },
-      meta: { selector },
-    } = action
-    const res = await tts.Applications.Webhooks.getAll(appId, selector)
+      id: appId,
+      params: { page, limit },
+    } = action.payload
+    const { selectors } = action.meta
+
+    const res = await tts.Applications.Webhooks.getAll(appId, { page, limit }, selectors)
 
     return { entities: res.webhooks, totalCount: res.totalCount }
   },

pkg/webui/console/store/reducers/index.js

@@ -133,6 +133,8 @@ export default combineReducers({
       getPacketBrokerNetworkId,
     ),
     clients: createNamedPaginationReducer('CLIENTS', getClientId),
+    pubsubs: createNamedPaginationReducer('PUBSUB', getApplicationId),
+    webhooks: createNamedPaginationReducer('WEBHOOKS', getApplicationId),
   }),
   js,
   gatewayStatus,

sdk/js/src/service/pubsubs.js

@@ -54,12 +54,13 @@ class PubSub {
     }
   }
 
-  async getAll(appId, selector) {
+  async getAll(appId, params, selector) {
     const result = await this._api.List(
       {
         routeParams: { 'application_ids.application_id': appId },
       },
       {
+        ...params,
         ...Marshaler.selectorToFieldMask(selector),
       },
     )

sdk/js/src/service/webhooks.js

@@ -22,13 +22,16 @@ class Webhooks {
     autoBind(this)
   }
 
-  async getAll(appId, selector) {
+  async getAll(appId, params, selector) {
     const fieldMask = Marshaler.selectorToFieldMask(selector)
     const result = await this._api.List(
       {
         routeParams: { 'application_ids.application_id': appId },
       },
-      fieldMask,
+      {
+        ...params,
+        ...fieldMask,
+      },
     )
 
     return Marshaler.payloadListResponse('webhooks', result)