diff --git a/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts b/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts index 30be2201aace..f9e63f915c39 100644 --- a/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts +++ b/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts @@ -20,13 +20,18 @@ const FAKE_MONITOR_REQUEST: MonitoringRequest = { description: "Test description", }; +const FAKE_EXPIRATION_TIME = 1000; + const FAKE_MONITOR: TaskMonitor = { waitForTask: jest.fn(), isRunning: ref(false), isCompleted: ref(false), hasFailed: ref(false), requestHasFailed: ref(false), - status: ref(""), + status: ref(), + expirationTime: FAKE_EXPIRATION_TIME, + isFinalState: jest.fn(), + loadStatus: jest.fn(), }; const mountComponent = ( @@ -61,6 +66,7 @@ describe("PersistentTaskProgressMonitorAlert.vue", () => { taskId: "1", taskType: "task", request: FAKE_MONITOR_REQUEST, + startedAt: new Date(), }; usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData); @@ -85,6 +91,7 @@ describe("PersistentTaskProgressMonitorAlert.vue", () => { taskId: "1", taskType: "task", request: FAKE_MONITOR_REQUEST, + startedAt: new Date(), }; usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData); @@ -109,6 +116,7 @@ describe("PersistentTaskProgressMonitorAlert.vue", () => { taskId: "1", taskType: "task", request: FAKE_MONITOR_REQUEST, + startedAt: new Date(), }; usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData); @@ -138,6 +146,7 @@ describe("PersistentTaskProgressMonitorAlert.vue", () => { taskId: taskId, taskType: "short_term_storage", request: monitoringRequest, + startedAt: new Date(), }; usePersistentProgressTaskMonitor(monitoringRequest, useMonitor, existingMonitoringData); @@ -166,6 +175,7 @@ describe("PersistentTaskProgressMonitorAlert.vue", () => { taskId: "1", taskType: "task", request: FAKE_MONITOR_REQUEST, + startedAt: new Date(), }; usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData); @@ -180,4 +190,29 @@ describe("PersistentTaskProgressMonitorAlert.vue", () => { expect(completedAlert.exists()).toBe(true); expect(completedAlert.text()).not.toContain("Download here"); }); + + it("should render a warning alert when the task has expired even if the status is running", () => { + const useMonitor = { + ...FAKE_MONITOR, + isRunning: ref(true), + }; + const existingMonitoringData: MonitoringData = { + taskId: "1", + taskType: "task", + request: FAKE_MONITOR_REQUEST, + startedAt: new Date(Date.now() - FAKE_EXPIRATION_TIME * 2), // Make sure the task has expired + }; + usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData); + + const wrapper = mountComponent({ + monitorRequest: FAKE_MONITOR_REQUEST, + useMonitor, + }); + + expect(wrapper.find(".d-flex").exists()).toBe(true); + + const warningAlert = wrapper.find('[variant="warning"]'); + expect(warningAlert.exists()).toBe(true); + expect(warningAlert.text()).toContain("The testing task has expired and the result is no longer available"); + }); }); diff --git a/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue b/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue index 10af39cedcdb..34467f095646 100644 --- a/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue +++ b/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue @@ -9,6 +9,8 @@ import { TaskMonitor } from "@/composables/genericTaskMonitor"; import { MonitoringRequest, usePersistentProgressTaskMonitor } from "@/composables/persistentProgressMonitor"; import { useShortTermStorage } from "@/composables/shortTermStorage"; +import UtcDate from "@/components/UtcDate.vue"; + library.add(faSpinner); interface Props { @@ -46,8 +48,19 @@ const props = withDefaults(defineProps(), { const { getDownloadObjectUrl } = useShortTermStorage(); -const { hasMonitoringData, isRunning, isCompleted, hasFailed, requestHasFailed, storedTaskId, status, start, reset } = - usePersistentProgressTaskMonitor(props.monitorRequest, props.useMonitor); +const { + hasMonitoringData, + isRunning, + isCompleted, + hasFailed, + requestHasFailed, + storedTaskId, + status, + hasExpired, + expirationDate, + start, + reset, +} = usePersistentProgressTaskMonitor(props.monitorRequest, props.useMonitor); const downloadUrl = computed(() => { // We can only download the result if the task is completed and the task type is short_term_storage. @@ -66,7 +79,12 @@ watch( () => props.taskId, (newTaskId, oldTaskId) => { if (newTaskId && newTaskId !== oldTaskId) { - start({ taskId: newTaskId, taskType: props.monitorRequest.taskType, request: props.monitorRequest }); + start({ + taskId: newTaskId, + taskType: props.monitorRequest.taskType, + request: props.monitorRequest, + startedAt: new Date(), + }); } } ); @@ -89,7 +107,10 @@ function dismissAlert() {