@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.10.2 → 3.10.4

package/dpr/assets/js/all.mjs

@@ -937,7 +937,8 @@ class AsyncDataTable extends DprClientClass {
       const classificationContent = `<b>${classification}</b>`;
       const currentRangeStart = (selectedPage - 1) * pageSize;
       const currentRangeEnd = currentRangeStart + rowLength;
-      const totalsContent = `${currentRangeStart + 1}-${currentRangeEnd} of ${totalRowCount}`;
+      const totalsContent =
+        totalRowCount > 0 ? `${currentRangeStart + 1}-${currentRangeEnd} of ${totalRowCount}` : `0-0 of 0`;
 
       // Headers
       const header = this.table.createTHead();
@@ -973,7 +974,7 @@ class dprAsyncPolling extends DprClientClass {
 
   async initialise () {
     this.POLLING_STATUSES = ['SUBMITTED', 'STARTED', 'PICKED'];
-    this.POLLING_FREQUENCY = '2000'; // 2 seconds
+    this.POLLING_FREQUENCY = '500'; // 2 seconds
 
     this.statusSection = document.getElementById('async-request-polling-status');
     this.retryRequestButton = document.getElementById('retry-async-request');

package/dpr/components/async-filters/utils.js

@@ -136,4 +136,19 @@ exports.default = {
         }
         return redirect;
     },
+    handleError: (error, req) => {
+        const filters = Object.keys(req.body)
+            .filter((attr) => attr.includes('filters.'))
+            .filter((attr) => !!req.body[attr])
+            .map((attr) => {
+            return { name: attr, value: req.body[attr] };
+        });
+        return {
+            title: 'Request Failed',
+            description: 'Your report has failed to generate. The issue has been reported to admin staff',
+            retry: true,
+            error: error.data,
+            filters,
+        };
+    },
 };

package/dpr/components/async-filters/utils.ts

@@ -1,3 +1,4 @@
+import { Request } from 'express'
 import Dict = NodeJS.Dict
 import { components } from '../../types/api'
 import FilterUtils from '../filters/utils'
@@ -161,4 +162,20 @@ export default {
 
     return redirect
   },
+
+  handleError: (error: Dict<string>, req: Request) => {
+    const filters = Object.keys(req.body)
+      .filter((attr) => attr.includes('filters.'))
+      .filter((attr) => !!req.body[attr])
+      .map((attr) => {
+        return { name: attr, value: req.body[attr] }
+      })
+    return {
+      title: 'Request Failed',
+      description: 'Your report has failed to generate. The issue has been reported to admin staff',
+      retry: true,
+      error: error.data,
+      filters,
+    }
+  },
 }

package/dpr/components/async-polling/utils.js

@@ -17,6 +17,8 @@ const getStatus = async (token, reportId, variantId, executionId, currentStatus,
         errorMessage = data.userMessage;
         status = currentStatus === AsyncReport_1.RequestStatus.FINISHED ? AsyncReport_1.RequestStatus.EXPIRED : AsyncReport_1.RequestStatus.FAILED;
     }
+    if (typeof status === 'number')
+        status = AsyncReport_1.RequestStatus.FAILED;
     const res = {
         status,
         ...(errorMessage && { errorMessage }),
@@ -42,43 +44,37 @@ exports.default = {
     getStatus,
     renderPolling: async ({ req, res, dataSources, asyncReportsStore, next }) => {
         var _a;
-        try {
-            const { token } = res.locals.user || 'token';
-            const { reportId, variantId, executionId } = req.params;
-            let reportData = await asyncReportsStore.getReportByExecutionId(executionId);
-            let statusResponse;
-            if ((0, exports.timeoutRequest)(reportData.timestamp.requested)) {
-                statusResponse = {
-                    status: AsyncReport_1.RequestStatus.FAILED,
-                    errorMessage: 'Request taking too long. Request Halted',
-                };
-            }
-            else {
-                statusResponse = await getStatus(token, reportId, variantId, executionId, reportData.status, dataSources, asyncReportsStore, reportData.dataProductDefinitionsPath);
-            }
-            const { status, errorMessage } = statusResponse;
-            if (statusResponse.reportData)
-                reportData = statusResponse.reportData;
-            return {
-                pollingRenderData: {
-                    reportName: reportData.reportName,
-                    variantName: reportData.name,
-                    variantDescription: reportData.description,
-                    executionId,
-                    reportId,
-                    variantId,
-                    status,
-                    tableId: reportData.tableId,
-                    querySummary: reportData.query.summary,
-                    ...(((_a = reportData.url.report) === null || _a === void 0 ? void 0 : _a.fullUrl) && { reportUrl: reportData.url.report.fullUrl }),
-                    ...(reportData.url.request.fullUrl && { requestUrl: reportData.url.request.fullUrl }),
-                    ...(errorMessage && { errorMessage }),
-                },
+        const { token } = res.locals.user || 'token';
+        const { reportId, variantId, executionId } = req.params;
+        let reportData = await asyncReportsStore.getReportByExecutionId(executionId);
+        let statusResponse;
+        if ((0, exports.timeoutRequest)(reportData.timestamp.requested)) {
+            statusResponse = {
+                status: AsyncReport_1.RequestStatus.FAILED,
+                errorMessage: 'Request taking too long. Request Halted',
             };
         }
-        catch (error) {
-            next(error);
-            return false;
+        else {
+            statusResponse = await getStatus(token, reportId, variantId, executionId, reportData.status, dataSources, asyncReportsStore, reportData.dataProductDefinitionsPath);
         }
+        const { status, errorMessage } = statusResponse;
+        if (statusResponse.reportData)
+            reportData = statusResponse.reportData;
+        return {
+            pollingRenderData: {
+                reportName: reportData.reportName,
+                variantName: reportData.name,
+                variantDescription: reportData.description,
+                executionId,
+                reportId,
+                variantId,
+                status,
+                tableId: reportData.tableId,
+                querySummary: reportData.query.summary,
+                ...(((_a = reportData.url.report) === null || _a === void 0 ? void 0 : _a.fullUrl) && { reportUrl: reportData.url.report.fullUrl }),
+                ...(reportData.url.request.fullUrl && { requestUrl: reportData.url.request.fullUrl }),
+                ...(errorMessage && { errorMessage }),
+            },
+        };
     },
 };

package/dpr/components/async-polling/utils.ts

@@ -35,6 +35,7 @@ const getStatus = async (
     status = currentStatus === RequestStatus.FINISHED ? RequestStatus.EXPIRED : RequestStatus.FAILED
   }
 
+  if (typeof status === 'number') status = RequestStatus.FAILED
   const res: GetStatusUtilsResponse = {
     status,
     ...(errorMessage && { errorMessage }),
@@ -57,7 +58,6 @@ export const timeoutRequest = (requestTime: Date) => {
   const diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000)
   return diffMins >= TIMEOUT_MINS_MAX
 }
-
 interface GetStatusUtilsResponse {
   status: RequestStatus
   errorMessage: string
@@ -67,51 +67,46 @@ interface GetStatusUtilsResponse {
 export default {
   getStatus,
   renderPolling: async ({ req, res, dataSources, asyncReportsStore, next }: AsyncReportUtilsParams) => {
-    try {
-      const { token } = res.locals.user || 'token'
-      const { reportId, variantId, executionId } = req.params
-      let reportData = await asyncReportsStore.getReportByExecutionId(executionId)
+    const { token } = res.locals.user || 'token'
+    const { reportId, variantId, executionId } = req.params
+    let reportData = await asyncReportsStore.getReportByExecutionId(executionId)
 
-      let statusResponse
-      if (timeoutRequest(reportData.timestamp.requested)) {
-        statusResponse = {
-          status: RequestStatus.FAILED,
-          errorMessage: 'Request taking too long. Request Halted',
-        }
-      } else {
-        statusResponse = await getStatus(
-          token,
-          reportId,
-          variantId,
-          executionId,
-          reportData.status,
-          dataSources,
-          asyncReportsStore,
-          reportData.dataProductDefinitionsPath,
-        )
+    let statusResponse
+    if (timeoutRequest(reportData.timestamp.requested)) {
+      statusResponse = {
+        status: RequestStatus.FAILED,
+        errorMessage: 'Request taking too long. Request Halted',
       }
-      const { status, errorMessage } = statusResponse
-      if (statusResponse.reportData) reportData = statusResponse.reportData
+    } else {
+      statusResponse = await getStatus(
+        token,
+        reportId,
+        variantId,
+        executionId,
+        reportData.status,
+        dataSources,
+        asyncReportsStore,
+        reportData.dataProductDefinitionsPath,
+      )
+    }
+    const { status, errorMessage } = statusResponse
+    if (statusResponse.reportData) reportData = statusResponse.reportData
 
-      return {
-        pollingRenderData: {
-          reportName: reportData.reportName,
-          variantName: reportData.name,
-          variantDescription: reportData.description,
-          executionId,
-          reportId,
-          variantId,
-          status,
-          tableId: reportData.tableId,
-          querySummary: reportData.query.summary,
-          ...(reportData.url.report?.fullUrl && { reportUrl: reportData.url.report.fullUrl }),
-          ...(reportData.url.request.fullUrl && { requestUrl: reportData.url.request.fullUrl }),
-          ...(errorMessage && { errorMessage }),
-        },
-      }
-    } catch (error) {
-      next(error)
-      return false
+    return {
+      pollingRenderData: {
+        reportName: reportData.reportName,
+        variantName: reportData.name,
+        variantDescription: reportData.description,
+        executionId,
+        reportId,
+        variantId,
+        status,
+        tableId: reportData.tableId,
+        querySummary: reportData.query.summary,
+        ...(reportData.url.report?.fullUrl && { reportUrl: reportData.url.report.fullUrl }),
+        ...(reportData.url.request.fullUrl && { requestUrl: reportData.url.request.fullUrl }),
+        ...(errorMessage && { errorMessage }),
+      },
     }
   },
 }

package/dpr/components/async-report-list/utils.js

@@ -11,25 +11,19 @@ const utils_2 = __importDefault(require("../async-columns/utils"));
 const utils_3 = __importDefault(require("../pagination/utils"));
 const utils_4 = __importDefault(require("../icon-button-list/utils"));
 const initDataSources = ({ req, res, next, asyncReportsStore, dataSources }) => {
-    try {
-        const { token } = res.locals.user || 'token';
-        const { reportId, reportVariantId, tableId } = req.params;
-        const { selectedPage = 1, pageSize = 10 } = req.query;
-        const dataProductDefinitionsPath = req.query.dataProductDefinitionsPath;
-        const reportDefinitionPromise = dataSources.getDefinition(token, reportId, reportVariantId, dataProductDefinitionsPath);
-        const reportDataPromise = dataSources.getAsyncReport(token, reportId, reportVariantId, tableId, {
-            selectedPage: +selectedPage,
-            pageSize: +pageSize,
-            dataProductDefinitionsPath,
-        });
-        const reportDataCountPromise = dataSources.getAsyncCount(token, tableId);
-        const stateDataPromise = asyncReportsStore.getReportByTableId(tableId);
-        return [reportDefinitionPromise, reportDataPromise, reportDataCountPromise, stateDataPromise];
-    }
-    catch (error) {
-        next(error);
-        return false;
-    }
+    const { token } = res.locals.user || 'token';
+    const { reportId, reportVariantId, tableId } = req.params;
+    const { selectedPage = 1, pageSize = 10 } = req.query;
+    const dataProductDefinitionsPath = req.query.dataProductDefinitionsPath;
+    const reportDefinitionPromise = dataSources.getDefinition(token, reportId, reportVariantId, dataProductDefinitionsPath);
+    const reportDataPromise = dataSources.getAsyncReport(token, reportId, reportVariantId, tableId, {
+        selectedPage: +selectedPage,
+        pageSize: +pageSize,
+        dataProductDefinitionsPath,
+    });
+    const reportDataCountPromise = dataSources.getAsyncCount(token, tableId);
+    const stateDataPromise = asyncReportsStore.getReportByTableId(tableId);
+    return [reportDefinitionPromise, reportDataPromise, reportDataCountPromise, stateDataPromise];
 };
 exports.initDataSources = initDataSources;
 const renderReport = async ({ req, res, next, asyncReportsStore, recentlyViewedStoreService, dataSources, }) => {
@@ -38,8 +32,7 @@ const renderReport = async ({ req, res, next, asyncReportsStore, recentlyViewedS
     let renderData = {};
     let reportStateData;
     if (dataPromises) {
-        await Promise.all(dataPromises)
-            .then((resolvedData) => {
+        await Promise.all(dataPromises).then((resolvedData) => {
             const definition = resolvedData[0];
             const reportData = resolvedData[1];
             const count = resolvedData[2];
@@ -65,9 +58,6 @@ const renderReport = async ({ req, res, next, asyncReportsStore, recentlyViewedS
                 appliedFilters: query.summary,
                 classification,
             };
-        })
-            .catch((err) => {
-            next(err);
         });
     }
     if (Object.keys(renderData).length && Object.keys(reportStateData).length) {

package/dpr/components/async-report-list/utils.ts

@@ -11,30 +11,25 @@ import { AsyncReportUtilsParams } from '../../types/AsyncReportUtils'
 import { AsyncReportData } from '../../types/AsyncReport'
 
 export const initDataSources = ({ req, res, next, asyncReportsStore, dataSources }: AsyncReportUtilsParams) => {
-  try {
-    const { token } = res.locals.user || 'token'
-    const { reportId, reportVariantId, tableId } = req.params
-    const { selectedPage = 1, pageSize = 10 } = req.query
-    const dataProductDefinitionsPath = <string>req.query.dataProductDefinitionsPath
-    const reportDefinitionPromise = dataSources.getDefinition(
-      token,
-      reportId,
-      reportVariantId,
-      dataProductDefinitionsPath,
-    )
-    const reportDataPromise = dataSources.getAsyncReport(token, reportId, reportVariantId, tableId, {
-      selectedPage: +selectedPage,
-      pageSize: +pageSize,
-      dataProductDefinitionsPath,
-    })
-    const reportDataCountPromise = dataSources.getAsyncCount(token, tableId)
-    const stateDataPromise = asyncReportsStore.getReportByTableId(tableId)
+  const { token } = res.locals.user || 'token'
+  const { reportId, reportVariantId, tableId } = req.params
+  const { selectedPage = 1, pageSize = 10 } = req.query
+  const dataProductDefinitionsPath = <string>req.query.dataProductDefinitionsPath
+  const reportDefinitionPromise = dataSources.getDefinition(
+    token,
+    reportId,
+    reportVariantId,
+    dataProductDefinitionsPath,
+  )
+  const reportDataPromise = dataSources.getAsyncReport(token, reportId, reportVariantId, tableId, {
+    selectedPage: +selectedPage,
+    pageSize: +pageSize,
+    dataProductDefinitionsPath,
+  })
+  const reportDataCountPromise = dataSources.getAsyncCount(token, tableId)
+  const stateDataPromise = asyncReportsStore.getReportByTableId(tableId)
 
-    return [reportDefinitionPromise, reportDataPromise, reportDataCountPromise, stateDataPromise]
-  } catch (error) {
-    next(error)
-    return false
-  }
+  return [reportDefinitionPromise, reportDataPromise, reportDataCountPromise, stateDataPromise]
 }
 
 export const renderReport = async ({
@@ -52,40 +47,36 @@ export const renderReport = async ({
   let renderData = {}
   let reportStateData: AsyncReportData
   if (dataPromises) {
-    await Promise.all(dataPromises)
-      .then((resolvedData) => {
-        const definition = resolvedData[0] as unknown as components['schemas']['SingleVariantReportDefinition']
-        const reportData = <Array<Dict<string>>>resolvedData[1]
-        const count = <number>resolvedData[2]
-        reportStateData = <AsyncReportData>resolvedData[3]
+    await Promise.all(dataPromises).then((resolvedData) => {
+      const definition = resolvedData[0] as unknown as components['schemas']['SingleVariantReportDefinition']
+      const reportData = <Array<Dict<string>>>resolvedData[1]
+      const count = <number>resolvedData[2]
+      reportStateData = <AsyncReportData>resolvedData[3]
 
-        const fieldDefinition = definition.variant.specification.fields
-        const { classification } = definition.variant
+      const fieldDefinition = definition.variant.specification.fields
+      const { classification } = definition.variant
 
-        const columns = ColumnUtils.getColumns(fieldDefinition, <string[]>reqColumns)
-        const url = parseUrl(req)
-        const pagination = PaginationUtils.getPaginationData(url, count)
-        const actions = ReportActionsUtils.initReportActions(definition.variant, reportStateData)
-        const rows = DataTableUtils.mapData(reportData, fieldDefinition, columns.value)
-        const head = DataTableUtils.mapAsyncHeader(fieldDefinition, columns.value)
-        const { reportName, name: variantName, query, description } = reportStateData
+      const columns = ColumnUtils.getColumns(fieldDefinition, <string[]>reqColumns)
+      const url = parseUrl(req)
+      const pagination = PaginationUtils.getPaginationData(url, count)
+      const actions = ReportActionsUtils.initReportActions(definition.variant, reportStateData)
+      const rows = DataTableUtils.mapData(reportData, fieldDefinition, columns.value)
+      const head = DataTableUtils.mapAsyncHeader(fieldDefinition, columns.value)
+      const { reportName, name: variantName, query, description } = reportStateData
 
-        renderData = {
-          variantName,
-          reportName,
-          description,
-          rows,
-          head,
-          columns,
-          pagination,
-          actions,
-          appliedFilters: query.summary,
-          classification,
-        }
-      })
-      .catch((err) => {
-        next(err)
-      })
+      renderData = {
+        variantName,
+        reportName,
+        description,
+        rows,
+        head,
+        columns,
+        pagination,
+        actions,
+        appliedFilters: query.summary,
+        classification,
+      }
+    })
   }
 
   if (Object.keys(renderData).length && Object.keys(reportStateData).length) {

package/dpr/components/async-reports-list/utils/asyncReportsUtils.js

@@ -61,8 +61,7 @@ const setDataFromStatus = (status, requestedReportsData) => {
     let href;
     switch (status) {
         case AsyncReport_1.RequestStatus.FAILED: {
-            const retryParam = `&retryId=${requestedReportsData.executionId}`;
-            href = `${requestedReportsData.url.request.fullUrl}${retryParam}`;
+            href = `${requestedReportsData.url.polling.fullUrl}`;
             timestamp = `Failed at: ${new Date(requestedReportsData.timestamp.failed).toLocaleString()}`;
             break;
         }
@@ -135,19 +134,28 @@ const formatTable = (cardData) => {
     };
 };
 exports.default = {
-    renderAsyncReportsList: async ({ asyncReportsStore, dataSources, res, }) => {
+    renderAsyncReportsList: async ({ asyncReportsStore, dataSources, res, maxRows, }) => {
         const { token } = res.locals.user || 'token';
-        const cardData = await formatCards(asyncReportsStore, dataSources, token);
+        let cardData = await formatCards(asyncReportsStore, dataSources, token);
         const head = {
             title: 'Requested Reports',
             icon: 'hourglass',
             id: 'requested-reports',
+            ...(cardData.length && { href: './async-reports/requested' }),
             ...(!cardData.length && { emptyMessage: 'You have 0 requested reports' }),
         };
+        const total = {
+            amount: cardData.length,
+            shown: cardData.length > maxRows ? maxRows : cardData.length,
+            max: maxRows,
+        };
+        if (maxRows)
+            cardData = cardData.slice(0, maxRows);
         return {
             head,
             cardData,
             tableData: formatTable(cardData),
+            total,
         };
     },
 };

package/dpr/components/async-reports-list/utils/asyncReportsUtils.ts

@@ -58,8 +58,7 @@ const setDataFromStatus = (status: RequestStatus, requestedReportsData: AsyncRep
   let href
   switch (status) {
     case RequestStatus.FAILED: {
-      const retryParam = `&retryId=${requestedReportsData.executionId}`
-      href = `${requestedReportsData.url.request.fullUrl}${retryParam}`
+      href = `${requestedReportsData.url.polling.fullUrl}`
       timestamp = `Failed at: ${new Date(requestedReportsData.timestamp.failed).toLocaleString()}`
       break
     }
@@ -149,19 +148,33 @@ export default {
     asyncReportsStore,
     dataSources,
     res,
-  }: AsyncReportUtilsParams): Promise<RenderTableListResponse> => {
+    maxRows,
+  }: { maxRows?: number } & AsyncReportUtilsParams): Promise<RenderTableListResponse> => {
     const { token } = res.locals.user || 'token'
-    const cardData = await formatCards(asyncReportsStore, dataSources, token)
+
+    let cardData = await formatCards(asyncReportsStore, dataSources, token)
+
     const head = {
       title: 'Requested Reports',
       icon: 'hourglass',
       id: 'requested-reports',
+      ...(cardData.length && { href: './async-reports/requested' }),
       ...(!cardData.length && { emptyMessage: 'You have 0 requested reports' }),
     }
+
+    const total = {
+      amount: cardData.length,
+      shown: cardData.length > maxRows ? maxRows : cardData.length,
+      max: maxRows,
+    }
+
+    if (maxRows) cardData = cardData.slice(0, maxRows)
+
     return {
       head,
       cardData,
       tableData: formatTable(cardData),
+      total,
     }
   },
 }

package/dpr/components/async-reports-list/utils/index.js

@@ -9,10 +9,10 @@ exports.AsyncCardGroupUtils = asyncReportsUtils_1.default;
 const recentlyViewedUtils_1 = __importDefault(require("./recentlyViewedUtils"));
 exports.RecentlyViewedCardGroupUtils = recentlyViewedUtils_1.default;
 exports.default = {
-    renderList: async ({ asyncReportsStore, recentlyViewedStoreService, dataSources, res }) => {
+    renderList: async ({ asyncReportsStore, recentlyViewedStoreService, dataSources, res, maxRows = 6, }) => {
         return {
             requestedReports: {
-                ...(await asyncReportsUtils_1.default.renderAsyncReportsList({ asyncReportsStore, dataSources, res })),
+                ...(await asyncReportsUtils_1.default.renderAsyncReportsList({ asyncReportsStore, dataSources, res, maxRows })),
             },
             viewedReports: {
                 ...(await recentlyViewedUtils_1.default.renderRecentlyViewedList({
@@ -20,6 +20,7 @@ exports.default = {
                     asyncReportsStore,
                     dataSources,
                     res,
+                    maxRows,
                 })),
             },
         };

package/dpr/components/async-reports-list/utils/index.ts

@@ -5,10 +5,16 @@ import RecentlyViewedCardGroupUtils from './recentlyViewedUtils'
 export { AsyncCardGroupUtils, RecentlyViewedCardGroupUtils }
 
 export default {
-  renderList: async ({ asyncReportsStore, recentlyViewedStoreService, dataSources, res }: AsyncReportUtilsParams) => {
+  renderList: async ({
+    asyncReportsStore,
+    recentlyViewedStoreService,
+    dataSources,
+    res,
+    maxRows = 6,
+  }: { maxRows: number } & AsyncReportUtilsParams) => {
     return {
       requestedReports: {
-        ...(await AsyncCardGroupUtils.renderAsyncReportsList({ asyncReportsStore, dataSources, res })),
+        ...(await AsyncCardGroupUtils.renderAsyncReportsList({ asyncReportsStore, dataSources, res, maxRows })),
       },
       viewedReports: {
         ...(await RecentlyViewedCardGroupUtils.renderRecentlyViewedList({
@@ -16,6 +22,7 @@ export default {
           asyncReportsStore,
           dataSources,
           res,
+          maxRows,
         })),
       },
     }

package/dpr/components/async-reports-list/utils/recentlyViewedUtils.js

@@ -56,18 +56,27 @@ const formatTableData = (card) => {
     ];
 };
 exports.default = {
-    renderRecentlyViewedList: async ({ recentlyViewedStoreService, asyncReportsStore, dataSources, res, }) => {
+    renderRecentlyViewedList: async ({ recentlyViewedStoreService, asyncReportsStore, dataSources, res, maxRows, }) => {
         const { token } = res.locals.user || 'token';
-        const cardData = await formatCards(recentlyViewedStoreService, asyncReportsStore, dataSources, token);
+        let cardData = await formatCards(recentlyViewedStoreService, asyncReportsStore, dataSources, token);
+        const total = {
+            amount: cardData.length,
+            shown: cardData.length > maxRows ? maxRows : cardData.length,
+            max: maxRows,
+        };
+        if (maxRows)
+            cardData = cardData.slice(0, maxRows);
         return {
             head: {
                 title: 'Recently Viewed',
                 icon: 'viewed',
                 id: 'recently-viewed',
+                ...(cardData.length && { href: '/async-reports/recently-viewed' }),
                 ...(!cardData.length && { emptyMessage: 'You have 0 recently viewed reports' }),
             },
             cardData,
             tableData: formatTable(cardData),
+            total,
         };
     },
 };

package/dpr/components/async-reports-list/utils/recentlyViewedUtils.ts

@@ -104,18 +104,30 @@ export default {
     asyncReportsStore,
     dataSources,
     res,
-  }: AsyncReportUtilsParams): Promise<RenderTableListResponse> => {
+    maxRows,
+  }: { maxRows?: number } & AsyncReportUtilsParams): Promise<RenderTableListResponse> => {
     const { token } = res.locals.user || 'token'
-    const cardData = await formatCards(recentlyViewedStoreService, asyncReportsStore, dataSources, token)
+    let cardData = await formatCards(recentlyViewedStoreService, asyncReportsStore, dataSources, token)
+
+    const total = {
+      amount: cardData.length,
+      shown: cardData.length > maxRows ? maxRows : cardData.length,
+      max: maxRows,
+    }
+
+    if (maxRows) cardData = cardData.slice(0, maxRows)
+
     return {
       head: {
         title: 'Recently Viewed',
         icon: 'viewed',
         id: 'recently-viewed',
+        ...(cardData.length && { href: '/async-reports/recently-viewed' }),
         ...(!cardData.length && { emptyMessage: 'You have 0 recently viewed reports' }),
       },
       cardData,
       tableData: formatTable(cardData),
+      total,
     }
   },
 }

package/dpr/components/async-reports-list/view.njk

@@ -1,17 +1,18 @@
 {% from "../table-card-group/view.njk" import dprTableCardGroup %}
 
 {% macro dprAsyncReportsList(requestedReports, viewedReports) %}
-
   {{ dprTableCardGroup(
     requestedReports.head,
     requestedReports.cardData, 
-    requestedReports.tableData
+    requestedReports.tableData,
+    requestedReports.total
   )}}
 
   {{ dprTableCardGroup(
     viewedReports.head, 
     viewedReports.cardData, 
-    viewedReports.tableData
+    viewedReports.tableData,
+    viewedReports.total
   ) }}
 
 {% endmacro %}