@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.12.2 → 3.13.0

package/dpr/assets/js/all.mjs

@@ -792,6 +792,7 @@ class AsyncFilters extends DprQueryParamClass {
 
     const params = new URLSearchParams(search);
     params.delete('retryId');
+    params.delete('refreshId');
     const href = `${origin}${pathname}?${params.toString()}`;
 
     document.getElementById('async-filters-form-href').value = href;
@@ -816,9 +817,13 @@ class AsyncFilters extends DprQueryParamClass {
   initRetryInputFromQueryParams () {
     this.queryParams = new URLSearchParams(window.location.search);
     const retryId = this.queryParams.get('retryId');
+    const refreshId = this.queryParams.get('refreshId');
     if (retryId) {
       document.getElementById('async-filters-retry-id').value = retryId;
     }
+    if (refreshId) {
+      document.getElementById('async-filters-refresh-id').value = refreshId;
+    }
   }
 }
 
@@ -992,7 +997,7 @@ class dprAsyncPolling extends DprClientClass {
 
   async initialise () {
     this.POLLING_STATUSES = ['SUBMITTED', 'STARTED', 'PICKED'];
-    this.POLLING_FREQUENCY = '5000'; // 5 seconds
+    this.POLLING_FREQUENCY = '3000'; // 3 seconds
 
     this.statusSection = document.getElementById('async-request-polling-status');
     this.retryRequestButton = document.getElementById('retry-async-request');

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

@@ -122,12 +122,16 @@ exports.default = {
             }
         });
         const token = ((_a = res.locals.user) === null || _a === void 0 ? void 0 : _a.token) ? res.locals.user.token : 'token';
-        const { reportId, variantId, retryId } = req.body;
+        const { reportId, variantId, retryId, refreshId } = req.body;
         const response = await dataSources.requestAsyncReport(token, reportId, variantId, query);
         const { executionId, tableId } = response;
         if (retryId) {
-            await asyncReportsStore.setReportRetriedTimestamp(retryId);
-            await recentlyViewedStoreService.setReportRetriedTimestamp(retryId);
+            await asyncReportsStore.setReportTimestamp(retryId, 'retry');
+            await recentlyViewedStoreService.setReportTimestamp(retryId, 'retry');
+        }
+        if (refreshId) {
+            await asyncReportsStore.setReportTimestamp(refreshId, 'refresh');
+            await recentlyViewedStoreService.setReportTimestamp(refreshId, 'refresh');
         }
         if (executionId && tableId) {
             const reportData = await asyncReportsStore.addReport({

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

@@ -136,13 +136,18 @@ export default {
       })
 
     const token = res.locals.user?.token ? res.locals.user.token : 'token'
-    const { reportId, variantId, retryId } = req.body
+    const { reportId, variantId, retryId, refreshId } = req.body
     const response = await dataSources.requestAsyncReport(token, reportId, variantId, query)
     const { executionId, tableId } = response
 
     if (retryId) {
-      await asyncReportsStore.setReportRetriedTimestamp(retryId)
-      await recentlyViewedStoreService.setReportRetriedTimestamp(retryId)
+      await asyncReportsStore.setReportTimestamp(retryId, 'retry')
+      await recentlyViewedStoreService.setReportTimestamp(retryId, 'retry')
+    }
+
+    if (refreshId) {
+      await asyncReportsStore.setReportTimestamp(refreshId, 'refresh')
+      await recentlyViewedStoreService.setReportTimestamp(refreshId, 'refresh')
     }
 
     if (executionId && tableId) {

package/dpr/components/async-filters/view.njk

@@ -31,6 +31,7 @@
       <input type="hidden" name="href" id="async-filters-form-href" value="">
       <input type="hidden" name="search" id="async-filters-form-search" value="">
       <input type="hidden" name="retryId" id="async-filters-retry-id" value="">
+      <input type="hidden" name="refreshId" id="async-filters-refesh-id" value="">
 
       <div class="dpr-async-controls__section">
         <h3 class="govuk-heading-s">Filters</h3>

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

@@ -3,68 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderReport = exports.initDataSources = void 0;
-/* eslint-disable no-underscore-dangle */
 const parseurl_1 = __importDefault(require("parseurl"));
 const utils_1 = __importDefault(require("../data-table/utils"));
 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 }) => {
-    var _a;
-    const token = ((_a = res.locals.user) === null || _a === void 0 ? void 0 : _a.token) ? res.locals.user.token : 'token';
-    const { reportId, variantId: 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.default = {
+    getRenderData: (req, definition, reportData, count, reportStateData) => {
+        const { columns: reqColumns } = req.query;
+        const { fields } = definition.variant.specification;
+        const columns = utils_2.default.getColumns(fields, reqColumns);
+        const url = (0, parseurl_1.default)(req);
+        const pagination = utils_3.default.getPaginationData(url, count);
+        const rows = utils_1.default.mapData(reportData, fields, columns.value);
+        const head = utils_1.default.mapAsyncHeader(fields, columns.value);
+        const { query } = reportStateData;
+        return {
+            rows,
+            head,
+            columns,
+            pagination,
+            appliedFilters: query.summary,
+        };
+    },
 };
-exports.initDataSources = initDataSources;
-const renderReport = async ({ req, res, next, asyncReportsStore, recentlyViewedStoreService, dataSources, }) => {
-    const { columns: reqColumns } = req.query;
-    const dataPromises = (0, exports.initDataSources)({ req, res, next, dataSources, asyncReportsStore });
-    let renderData = {};
-    let reportStateData;
-    if (dataPromises) {
-        await Promise.all(dataPromises).then((resolvedData) => {
-            const definition = resolvedData[0];
-            const reportData = resolvedData[1];
-            const count = resolvedData[2];
-            reportStateData = resolvedData[3];
-            const fieldDefinition = definition.variant.specification.fields;
-            const { classification } = definition.variant;
-            const columns = utils_2.default.getColumns(fieldDefinition, reqColumns);
-            const url = (0, parseurl_1.default)(req);
-            const pagination = utils_3.default.getPaginationData(url, count);
-            const actions = utils_4.default.initReportActions(definition.variant, reportStateData);
-            const rows = utils_1.default.mapData(reportData, fieldDefinition, columns.value);
-            const head = utils_1.default.mapAsyncHeader(fieldDefinition, columns.value);
-            const { reportName, name: variantName, query, description } = reportStateData;
-            renderData = {
-                variantName,
-                reportName,
-                description,
-                rows,
-                head,
-                columns,
-                pagination,
-                actions,
-                appliedFilters: query.summary,
-                classification,
-            };
-        });
-    }
-    if (Object.keys(renderData).length && Object.keys(reportStateData).length) {
-        await asyncReportsStore.updateLastViewed(reportStateData.executionId);
-        await recentlyViewedStoreService.setRecentlyViewed(reportStateData);
-    }
-    return { renderData };
-};
-exports.renderReport = renderReport;

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

@@ -1,88 +1,36 @@
-/* eslint-disable no-underscore-dangle */
 import parseUrl from 'parseurl'
+import { Request } from 'express'
 import DataTableUtils from '../data-table/utils'
 import ColumnUtils from '../async-columns/utils'
 import PaginationUtils from '../pagination/utils'
-import ReportActionsUtils from '../icon-button-list/utils'
 import { components } from '../../types/api'
 import Dict = NodeJS.Dict
-
-import { AsyncReportUtilsParams } from '../../types/AsyncReportUtils'
 import { AsyncReportData } from '../../types/AsyncReport'
 
-export const initDataSources = ({ req, res, next, asyncReportsStore, dataSources }: AsyncReportUtilsParams) => {
-  const token = res.locals.user?.token ? res.locals.user.token : 'token'
-  const { reportId, variantId: 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]
-}
-
-export const renderReport = async ({
-  req,
-  res,
-  next,
-  asyncReportsStore,
-  recentlyViewedStoreService,
-  dataSources,
-}: AsyncReportUtilsParams) => {
-  const { columns: reqColumns } = req.query
-
-  const dataPromises = initDataSources({ req, res, next, dataSources, asyncReportsStore })
-
-  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]
-
-      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
-
-      renderData = {
-        variantName,
-        reportName,
-        description,
-        rows,
-        head,
-        columns,
-        pagination,
-        actions,
-        appliedFilters: query.summary,
-        classification,
-      }
-    })
-  }
-
-  if (Object.keys(renderData).length && Object.keys(reportStateData).length) {
-    await asyncReportsStore.updateLastViewed(reportStateData.executionId)
-    await recentlyViewedStoreService.setRecentlyViewed(reportStateData)
-  }
-
-  return { renderData }
+export default {
+  getRenderData: (
+    req: Request,
+    definition: components['schemas']['SingleVariantReportDefinition'],
+    reportData: Array<Dict<string>>,
+    count: number,
+    reportStateData: AsyncReportData,
+  ) => {
+    const { columns: reqColumns } = req.query
+    const { fields } = definition.variant.specification
+
+    const columns = ColumnUtils.getColumns(fields, <string[]>reqColumns)
+    const url = parseUrl(req)
+    const pagination = PaginationUtils.getPaginationData(url, count)
+    const rows = DataTableUtils.mapData(reportData, fields, columns.value)
+    const head = DataTableUtils.mapAsyncHeader(fields, columns.value)
+    const { query } = reportStateData
+
+    return {
+      rows,
+      head,
+      columns,
+      pagination,
+      appliedFilters: query.summary,
+    }
+  },
 }

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

@@ -1,46 +1,30 @@
-{% from "../data-table/view.njk" import dprDataTable %}
 {% from "../async-columns/view.njk" import dprAsyncColumns %}
 {% from "../pagination/view.njk" import dprPagination %}
 {% from "../async-data-table/view.njk" import dprAsyncDataTable %}
 {% from "../async-applied-filters/view.njk" import dprAsyncAppliedFiltersList %}
-{% from "../icon-button-list/view.njk" import dprIconButtonList %}
 {% from "govuk/components/details/macro.njk" import govukDetails %}
 
 {% macro dprAsyncReportList(options) %}
 
   {% set columns = options.columns %}
-  {% set appliedFilters = options.appliedFilters %}
   {% set pagination = options.pagination %}
-  {% set reportName = options.reportName %}
-  {% set variantName = options.variantName %}
-  {% set description = options.description %}
-  {% set actions = options.actions %}
-
-  <div class="govuk-width-container report-list-container">
-    <div class="drp-async-reports-heading-container">
-      <h1 class="govuk-heading-l govuk-!-margin-bottom-2">{{ reportName }} - {{ variantName }}</h1>
-      <p class="govuk-body-s govuk-!-margin-bottom-0">
-        <i>{{ description }}</i>
-      </p>
-      {{ dprIconButtonList(actions) }}
-    </div>
+  {% set appliedFilters = options.appliedFilters %}
 
-    {{ dprAsyncAppliedFiltersList(appliedFilters) }}
+  {{ dprAsyncAppliedFiltersList(appliedFilters) }}
 
-    <div class="columns-select-wrapper">
-      {% set columnsHtml %}
-      {{ dprAsyncColumns(columns) }}
-      {% endset %}
+  <div class="columns-select-wrapper">
+    {% set columnsHtml %}
+    {{ dprAsyncColumns(columns) }}
+    {% endset %}
 
-      {{ govukDetails({
+    {{ govukDetails({
       summaryText: "Columns",
       html: columnsHtml 
     }) }}
-    </div>
+  </div>
 
-    <div class='dpr-table-container'>
-      {{ dprAsyncDataTable(options) }}
-      {{ dprPagination(pagination) }}
-    </div>
+  <div class='dpr-table-container'>
+    {{ dprAsyncDataTable(options) }}
+    {{ dprPagination(pagination) }}
   </div>
 {% endmacro %}

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

@@ -9,7 +9,7 @@ const formatCards = async (recentlyViewedStoreService, asyncReportsStore, dataSo
     const requestedReportsData = await recentlyViewedStoreService.getAllReports();
     return Promise.all(requestedReportsData
         .filter((report) => {
-        return !report.timestamp.retried;
+        return !report.timestamp.retried && !report.timestamp.refresh;
     })
         .map((report) => {
         return formatCardData(report, dataSources, token, recentlyViewedStoreService, asyncReportsStore);
@@ -19,15 +19,21 @@ const formatCardData = async (reportData, dataSources, token, recentlyViewedStor
     const { executionId: id, variantName: text, description, query, url, timestamp, executionId, reportId, variantId, dataProductDefinitionsPath, } = reportData;
     let { status } = reportData;
     const statusResponse = await utils_1.default.getStatus(token, reportId, variantId, executionId, status, dataSources, asyncReportsStore, dataProductDefinitionsPath);
-    status = statusResponse.status === AsyncReport_1.RequestStatus.EXPIRED ? statusResponse.status : AsyncReport_1.RequestStatus.READY;
-    const summary = query.summary;
-    const href = status ? `${url.request.fullUrl}&retryId=${executionId}` : url.report.fullUrl;
+    let href;
+    if (statusResponse.status === AsyncReport_1.RequestStatus.EXPIRED) {
+        status = statusResponse.status;
+        href = `${url.request.fullUrl}&retryId=${executionId}`;
+    }
+    else {
+        status = AsyncReport_1.RequestStatus.READY;
+        href = url.report.fullUrl;
+    }
     return {
         id,
         text,
         description,
         tag: 'MIS',
-        summary,
+        summary: query.summary,
         href,
         timestamp: `Last viewed: ${new Date(timestamp.lastViewed).toLocaleString()}`,
         status,

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

@@ -17,7 +17,7 @@ const formatCards = async (
   return Promise.all(
     requestedReportsData
       .filter((report: RecentlyViewedReportData) => {
-        return !report.timestamp.retried
+        return !report.timestamp.retried && !report.timestamp.refresh
       })
       .map((report: RecentlyViewedReportData) => {
         return formatCardData(report, dataSources, token, recentlyViewedStoreService, asyncReportsStore)
@@ -57,16 +57,21 @@ const formatCardData = async (
     dataProductDefinitionsPath,
   )
 
-  status = statusResponse.status === RequestStatus.EXPIRED ? statusResponse.status : RequestStatus.READY
-  const summary = query.summary as { name: string; value: string }[]
-  const href = status ? `${url.request.fullUrl}&retryId=${executionId}` : url.report.fullUrl
+  let href
+  if (statusResponse.status === RequestStatus.EXPIRED) {
+    status = statusResponse.status
+    href = `${url.request.fullUrl}&retryId=${executionId}`
+  } else {
+    status = RequestStatus.READY
+    href = url.report.fullUrl
+  }
 
   return {
     id,
     text,
     description,
     tag: 'MIS',
-    summary,
+    summary: query.summary as { name: string; value: string }[],
     href,
     timestamp: `Last viewed: ${new Date(timestamp.lastViewed).toLocaleString()}`,
     status,

package/dpr/components/icon-button-list/utils.js

@@ -6,7 +6,7 @@ const FULL_BUTTON_LIST = [
         icon: 'refresh',
         disabled: false,
         tooltipText: 'Refresh report',
-        ariaLabelText: 'Print report',
+        ariaLabelText: 'Refresh report',
     },
     {
         id: 'printable',
@@ -59,7 +59,7 @@ exports.default = {
         actions.push({
             type: 'refresh',
             data: {
-                href: reportData.url.request.fullUrl,
+                href: `${reportData.url.request.fullUrl}&refreshId=${reportData.executionId}`,
             },
         });
         // PRINT

package/dpr/components/icon-button-list/utils.ts

@@ -8,7 +8,7 @@ const FULL_BUTTON_LIST = [
     icon: 'refresh',
     disabled: false,
     tooltipText: 'Refresh report',
-    ariaLabelText: 'Print report',
+    ariaLabelText: 'Refresh report',
   },
   {
     id: 'printable',
@@ -64,7 +64,7 @@ export default {
     actions.push({
       type: 'refresh',
       data: {
-        href: reportData.url.request.fullUrl,
+        href: `${reportData.url.request.fullUrl}&refreshId=${reportData.executionId}`,
       },
     })
 

package/dpr/routes/asyncReports.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = __importDefault(require("../components/async-filters/utils"));
-const AsyncReportListUtils = __importStar(require("../components/async-report-list/utils"));
 const utils_2 = __importDefault(require("../components/async-polling/utils"));
+const AsyncReportUtils = __importStar(require("../utils/renderAsyncReport"));
 const asyncReportsUtils_1 = __importDefault(require("../components/async-reports-list/utils/asyncReportsUtils"));
 const recentlyViewedUtils_1 = __importDefault(require("../components/async-reports-list/utils/recentlyViewedUtils"));
 function routes({ router, asyncReportsStore, recentlyViewedStoreService, dataSources, layoutPath, templatePath = 'dpr/views/', }) {
@@ -120,9 +120,9 @@ function routes({ router, asyncReportsStore, recentlyViewedStoreService, dataSou
             next();
         }
     };
-    const getReportListHandler = async (req, res, next) => {
+    const getReportHandler = async (req, res, next) => {
         try {
-            const reportRenderData = await AsyncReportListUtils.renderReport({
+            const reportRenderData = await AsyncReportUtils.getReport({
                 req,
                 res,
                 dataSources,
@@ -145,7 +145,7 @@ function routes({ router, asyncReportsStore, recentlyViewedStoreService, dataSou
     router.post('/requestReport/', asyncRequestHandler, asyncErrorHandler);
     router.post('/cancelRequest/', cancelRequestHandler, asyncErrorHandler);
     router.get('/async-reports/:reportId/:variantId/request/:executionId', pollingHandler, asyncErrorHandler);
-    router.get('/async-reports/:reportId/:variantId/request/:tableId/report', getReportListHandler, asyncErrorHandler);
+    router.get('/async-reports/:reportId/:variantId/request/:tableId/report', getReportHandler, asyncErrorHandler);
     router.get('/async-reports/requested', async (req, res) => {
         res.render(`${templatePath}/async-reports`, {
             title: 'Requested Reports',

package/dpr/routes/asyncReports.ts

@@ -1,10 +1,10 @@
 import type { RequestHandler, Router } from 'express'
 import AsyncFiltersUtils from '../components/async-filters/utils'
-import * as AsyncReportListUtils from '../components/async-report-list/utils'
 import AsyncPollingUtils from '../components/async-polling/utils'
 import AsyncReportStoreService from '../services/requestedReportsService'
 import ReportingService from '../services/reportingService'
 import RecentlyViewedStoreService from '../services/recentlyViewedService'
+import * as AsyncReportUtils from '../utils/renderAsyncReport'
 
 import AsyncReportslistUtils from '../components/async-reports-list/utils/asyncReportsUtils'
 import RecentReportslistUtils from '../components/async-reports-list/utils/recentlyViewedUtils'
@@ -112,9 +112,9 @@ export default function routes({
     }
   }
 
-  const getReportListHandler: RequestHandler = async (req, res, next) => {
+  const getReportHandler: RequestHandler = async (req, res, next) => {
     try {
-      const reportRenderData = await AsyncReportListUtils.renderReport({
+      const reportRenderData = await AsyncReportUtils.getReport({
         req,
         res,
         dataSources,
@@ -137,7 +137,7 @@ export default function routes({
   router.post('/requestReport/', asyncRequestHandler, asyncErrorHandler)
   router.post('/cancelRequest/', cancelRequestHandler, asyncErrorHandler)
   router.get('/async-reports/:reportId/:variantId/request/:executionId', pollingHandler, asyncErrorHandler)
-  router.get('/async-reports/:reportId/:variantId/request/:tableId/report', getReportListHandler, asyncErrorHandler)
+  router.get('/async-reports/:reportId/:variantId/request/:tableId/report', getReportHandler, asyncErrorHandler)
 
   router.get('/async-reports/requested', async (req, res) => {
     res.render(`${templatePath}/async-reports`, {

package/dpr/services/recentlyViewedService.js

@@ -82,14 +82,15 @@ class RecentlyViewedStoreService extends userStoreService_1.default {
         this.recentlyViewedReports[index] = report;
         await this.saveRecentlyViewedState();
     }
-    async setReportRetriedTimestamp(id) {
-        const retriedReport = await this.getReportByExecutionId(id);
-        if (retriedReport) {
+    async setReportTimestamp(executionId, type) {
+        const report = await this.getReportByExecutionId(executionId);
+        if (report) {
             const timestamp = {
-                ...retriedReport.timestamp,
-                retried: new Date(),
+                ...report.timestamp,
+                ...(type === 'retry' && { retried: new Date() }),
+                ...(type === 'refresh' && { refresh: new Date() }),
             };
-            await this.updateReport(id, { timestamp });
+            await this.updateReport(executionId, { timestamp });
         }
     }
     async setToExpired(id) {

package/dpr/services/recentlyViewedService.ts

@@ -106,14 +106,15 @@ export default class RecentlyViewedStoreService extends UserStoreService {
     await this.saveRecentlyViewedState()
   }
 
-  async setReportRetriedTimestamp(id: string) {
-    const retriedReport = await this.getReportByExecutionId(id)
-    if (retriedReport) {
+  async setReportTimestamp(executionId: string, type: string) {
+    const report = await this.getReportByExecutionId(executionId)
+    if (report) {
       const timestamp: AsyncReportsTimestamp = {
-        ...retriedReport.timestamp,
-        retried: new Date(),
+        ...report.timestamp,
+        ...(type === 'retry' && { retried: new Date() }),
+        ...(type === 'refresh' && { refresh: new Date() }),
       }
-      await this.updateReport(id, { timestamp })
+      await this.updateReport(executionId, { timestamp })
     }
   }
 

package/dpr/services/requestedReportsService.js

@@ -97,14 +97,15 @@ class AsyncReportStoreService extends userStoreService_1.default {
         this.requestedReports[index] = report;
         await this.saveRequestedReportState();
     }
-    async setReportRetriedTimestamp(id) {
-        const retriedReport = await this.getReportByExecutionId(id);
-        if (retriedReport) {
+    async setReportTimestamp(executionId, type) {
+        const report = await this.getReportByExecutionId(executionId);
+        if (report) {
             const timestamp = {
-                ...retriedReport.timestamp,
-                retried: new Date(),
+                ...report.timestamp,
+                ...(type === 'retry' && { retried: new Date() }),
+                ...(type === 'refresh' && { refresh: new Date() }),
             };
-            await this.updateReport(id, { timestamp });
+            await this.updateReport(executionId, { timestamp });
         }
     }
     async updateLastViewed(id) {

package/dpr/services/requestedReportsService.ts

@@ -129,14 +129,15 @@ export default class AsyncReportStoreService extends UserStoreService {
     await this.saveRequestedReportState()
   }
 
-  async setReportRetriedTimestamp(id: string) {
-    const retriedReport = await this.getReportByExecutionId(id)
-    if (retriedReport) {
+  async setReportTimestamp(executionId: string, type: string) {
+    const report = await this.getReportByExecutionId(executionId)
+    if (report) {
       const timestamp: AsyncReportsTimestamp = {
-        ...retriedReport.timestamp,
-        retried: new Date(),
+        ...report.timestamp,
+        ...(type === 'retry' && { retried: new Date() }),
+        ...(type === 'refresh' && { refresh: new Date() }),
       }
-      await this.updateReport(id, { timestamp })
+      await this.updateReport(executionId, { timestamp })
     }
   }
 

package/dpr/types/AsyncReport.ts

@@ -62,4 +62,5 @@ export interface AsyncReportsTimestamp {
   failed?: Date
   retried?: Date
   aborted?: Date
+  refesh?: Date
 }

package/dpr/types/RecentlyViewed.ts

@@ -12,6 +12,7 @@ export interface RecentlyViewedReportData {
     lastViewed: Date
     expired?: Date
     retried?: Date
+    refresh?: Date
   }
   status?: RequestStatus
   url: AsyncReportUrlData

package/dpr/utils/renderAsyncReport.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReport = exports.initDataSources = void 0;
+const utils_1 = __importDefault(require("../components/async-report-list/utils"));
+const utils_2 = __importDefault(require("../components/icon-button-list/utils"));
+const initDataSources = ({ req, res, next, asyncReportsStore, dataSources }) => {
+    var _a;
+    const token = ((_a = res.locals.user) === null || _a === void 0 ? void 0 : _a.token) ? res.locals.user.token : 'token';
+    const { reportId, variantId: 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 getReport = async ({ req, res, next, asyncReportsStore, recentlyViewedStoreService, dataSources, }) => {
+    const dataPromises = (0, exports.initDataSources)({ req, res, next, dataSources, asyncReportsStore });
+    let renderData = {};
+    let reportStateData;
+    if (dataPromises) {
+        await Promise.all(dataPromises).then((resolvedData) => {
+            const definition = resolvedData[0];
+            const reportData = resolvedData[1];
+            const count = resolvedData[2];
+            reportStateData = resolvedData[3];
+            const { classification } = definition.variant;
+            const { template } = definition.variant.specification;
+            const { reportName, name: variantName, description, timestamp } = reportStateData;
+            const actions = utils_2.default.initReportActions(definition.variant, reportStateData);
+            renderData = {
+                variantName,
+                reportName,
+                description,
+                classification,
+                template,
+                actions,
+                requestedTimestamp: new Date(timestamp.requested).toLocaleString(),
+            };
+            switch (template) {
+                case 'list':
+                    renderData = {
+                        ...renderData,
+                        ...utils_1.default.getRenderData(req, definition, reportData, count, reportStateData),
+                    };
+                    break;
+                case 'listWithSections':
+                    // TODO: add list eith sections utils here
+                    break;
+                default:
+                    renderData = {
+                        ...renderData,
+                        ...utils_1.default.getRenderData(req, definition, reportData, count, reportStateData),
+                    };
+                    break;
+            }
+        });
+    }
+    if (Object.keys(renderData).length && Object.keys(reportStateData).length) {
+        await asyncReportsStore.updateLastViewed(reportStateData.executionId);
+        await recentlyViewedStoreService.setRecentlyViewed(reportStateData);
+    }
+    return { renderData };
+};
+exports.getReport = getReport;

package/dpr/utils/renderAsyncReport.ts

@@ -0,0 +1,90 @@
+import { components } from '../types/api'
+import Dict = NodeJS.Dict
+import { AsyncReportUtilsParams } from '../types/AsyncReportUtils'
+import { AsyncReportData } from '../types/AsyncReport'
+import AsyncReportListUtils from '../components/async-report-list/utils'
+import ReportActionsUtils from '../components/icon-button-list/utils'
+
+export const initDataSources = ({ req, res, next, asyncReportsStore, dataSources }: AsyncReportUtilsParams) => {
+  const token = res.locals.user?.token ? res.locals.user.token : 'token'
+  const { reportId, variantId: 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]
+}
+
+export const getReport = async ({
+  req,
+  res,
+  next,
+  asyncReportsStore,
+  recentlyViewedStoreService,
+  dataSources,
+}: AsyncReportUtilsParams) => {
+  const dataPromises = initDataSources({ req, res, next, dataSources, asyncReportsStore })
+
+  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]
+
+      const { classification } = definition.variant
+      const { template } = definition.variant.specification
+      const { reportName, name: variantName, description, timestamp } = reportStateData
+      const actions = ReportActionsUtils.initReportActions(definition.variant, reportStateData)
+
+      renderData = {
+        variantName,
+        reportName,
+        description,
+        classification,
+        template,
+        actions,
+        requestedTimestamp: new Date(timestamp.requested).toLocaleString(),
+      }
+
+      switch (template) {
+        case 'list':
+          renderData = {
+            ...renderData,
+            ...AsyncReportListUtils.getRenderData(req, definition, reportData, count, reportStateData),
+          }
+          break
+        case 'listWithSections':
+          // TODO: add list eith sections utils here
+          break
+        default:
+          renderData = {
+            ...renderData,
+            ...AsyncReportListUtils.getRenderData(req, definition, reportData, count, reportStateData),
+          }
+          break
+      }
+    })
+  }
+
+  if (Object.keys(renderData).length && Object.keys(reportStateData).length) {
+    await asyncReportsStore.updateLastViewed(reportStateData.executionId)
+    await recentlyViewedStoreService.setRecentlyViewed(reportStateData)
+  }
+
+  return { renderData }
+}

package/dpr/views/async-report.njk

@@ -1,10 +1,46 @@
 {% extends layoutPath %}
 {% from "../components/async-report-list/view.njk" import dprAsyncReportList %}
+{% from "../components/icon-button-list/view.njk" import dprIconButtonList %}
 
 {% set mainClasses = "app-container govuk-body" %}
 
 {% block content %}
+  {% set template = renderData.template %}
+  {% set reportName = renderData.reportName %}
+  {% set variantName = renderData.variantName %}
+  {% set description = renderData.description %}
+  {% set actions = renderData.actions %}
+  {% set requestedTimestamp = renderData.requestedTimestamp %}
+
   <div class="govuk-width-container">
-    {{ dprAsyncReportList(renderData) }}
+    <div class="govuk-width-container report-list-container">
+
+      <div class="drp-async-reports-heading-container">
+        <h1 class="govuk-heading-l govuk-!-margin-bottom-2">{{ reportName }} - {{ variantName }}</h1>
+        <p class="govuk-body-s govuk-!-margin-bottom-2">
+          <i>{{ description }}</i>
+        </p>
+        <p class="govuk-body-s govuk-!-margin-bottom-0">
+          <strong>Requested at:</strong>
+          {{ requestedTimestamp }}
+        </p>
+
+        {{ dprIconButtonList(actions) }}
+      </div>
+
+      {% if template === 'list' %}
+
+        {{ dprAsyncReportList(renderData) }}
+
+      {% elif(template === 'listWithSection') %}
+
+        {# TODO: Add template view here #}
+
+      {% else %}
+
+        {{ dprAsyncReportList(renderData) }}
+
+      {% endif %}
+    </div>
   </div>
 {% endblock %}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/hmpps-digital-prison-reporting-frontend",
   "description": "The Digital Prison Reporting Frontend contains templates and code to help display data effectively in UI applications.",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "main": "dpr/assets/js/all.mjs",
   "sass": "dpr/all.scss",
   "engines": {