diff --git a/public/static/locales/en/analyses.json b/public/static/locales/en/analyses.json index 925911bb8..72918e932 100644 --- a/public/static/locales/en/analyses.json +++ b/public/static/locales/en/analyses.json @@ -119,7 +119,7 @@ "terminateAnalysisTitle": "Terminate Analysis", "terminateAnalysisTitle_plural": "Terminate Analyses", "terminateBtn": "Terminate", - "timeLimitCountdown": "{{timeLimitCountdown}} remaining", + "timeLimitCountdown": "Time Remaining: {{timeLimitCountdown}}", "timeLimitError": "Unable to get the current time limit. Please try again.", "timeLimitExtended": "Time limit for {{analysisName}} has been extended. This analysis will end on {{newTimeLimit}}", "theirs": "Shared with me", diff --git a/public/static/locales/en/dashboard.json b/public/static/locales/en/dashboard.json index cb5646642..40012a2af 100644 --- a/public/static/locales/en/dashboard.json +++ b/public/static/locales/en/dashboard.json @@ -5,6 +5,7 @@ "analysisCompletedOrigination": "{{status}} in {{totalRunTime}} - ({{date}})", "analysisOrigination": "{{status}} - {{date}}", "analysisRunningOrigination": "{{status}} for {{runningTime}} ({{date}})", + "analysisRunningTimeLimit": "{{status}} - Time Remaining: {{timeLimitCountdown}}", "banner": "Banner", "buy": "Buy", "by": "By", diff --git a/src/components/analyses/listing/TableView.js b/src/components/analyses/listing/TableView.js index 82cbe1fd5..178e05150 100644 --- a/src/components/analyses/listing/TableView.js +++ b/src/components/analyses/listing/TableView.js @@ -85,11 +85,16 @@ function AnalysisName(props) { } function AnalysisDuration({ analysis, timeLimitCountdown }) { + const { t } = useTranslation("analyses"); const { elapsedTime, totalRunTime } = useAnalysisRunTime(analysis); return ( - {timeLimitCountdown || totalRunTime || elapsedTime} + {timeLimitCountdown + ? t("timeLimitCountdown", { + timeLimitCountdown, + }) + : totalRunTime || elapsedTime} ); } diff --git a/src/components/analyses/useAnalysisTimeLimitCountdown.js b/src/components/analyses/useAnalysisTimeLimitCountdown.js index fcc2385be..cfc0b24dc 100644 --- a/src/components/analyses/useAnalysisTimeLimitCountdown.js +++ b/src/components/analyses/useAnalysisTimeLimitCountdown.js @@ -7,14 +7,14 @@ * `/analyses/${id}/time-limit` endpoint, and converted into milliseconds. * * The countdown timer value is calculated from this time limit value, - * and formatted with `date-fns/formatDuration`. + * and formatted as `HHh:MMm`. * - * Updates the countdown timer value every second. + * Updates the countdown timer value every minute. */ import { useEffect, useState } from "react"; -import { formatDuration, intervalToDuration, toDate } from "date-fns"; +import { millisecondsToHours, millisecondsToMinutes, toDate } from "date-fns"; import { useQuery } from "react-query"; import { useTranslation } from "i18n"; @@ -28,11 +28,16 @@ import { isInteractiveRunning } from "./utils"; const timeLimitToCountdown = (timeLimitMS) => { if (timeLimitMS > 0) { - const start = new Date(); - const end = toDate(parseInt(timeLimitMS, 10)); - - if (end > start) { - return formatDuration(intervalToDuration({ start, end })); + const now = new Date(); + const end = toDate(timeLimitMS); + + if (end > now) { + const millisRemaining = end - now; + const hours = millisecondsToHours(millisRemaining); + const mins = millisecondsToMinutes(millisRemaining) - hours * 60; + if (mins > 0 || hours > 0) { + return `${hours}h:${mins}m`; + } } } @@ -73,7 +78,7 @@ function useAnalysisTimeLimitCountdown(analysis, showErrorAnnouncer) { let interval; if (runningVICE) { - interval = setInterval(handleUpdateRunningTime, 1000); + interval = setInterval(handleUpdateRunningTime, 60 * 1000); handleUpdateRunningTime(); } else { setTimeLimitCountdown(null); diff --git a/src/components/dashboard/dashboardItem/AnalysisSubheader.js b/src/components/dashboard/dashboardItem/AnalysisSubheader.js index 04ad4798c..02985e189 100644 --- a/src/components/dashboard/dashboardItem/AnalysisSubheader.js +++ b/src/components/dashboard/dashboardItem/AnalysisSubheader.js @@ -1,6 +1,6 @@ /** * - * @author aramsey, sriram + * @author aramsey, sriram, psarando * * A component that displays analysis run time and status * @@ -13,7 +13,7 @@ import useAnalysisRunTime from "components/analyses/useAnalysisRunTime"; import analysisStatus from "components/models/analysisStatus"; export default function AnalysisSubheader(props) { - const { analysis, date: formattedDate } = props; + const { analysis, date: formattedDate, timeLimitCountdown } = props; const { t } = useTranslation(["dashboard", "apps"]); const { elapsedTime, totalRunTime } = useAnalysisRunTime(analysis); const theme = useTheme(); @@ -32,7 +32,9 @@ export default function AnalysisSubheader(props) { , diff --git a/src/components/dashboard/dashboardItem/ItemBase.js b/src/components/dashboard/dashboardItem/ItemBase.js index 4047f96c6..1f2988227 100644 --- a/src/components/dashboard/dashboardItem/ItemBase.js +++ b/src/components/dashboard/dashboardItem/ItemBase.js @@ -118,16 +118,11 @@ const DashboardItem = ({ item }) => { }} subheader={ isAnalysis ? ( - timeLimitCountdown ? ( - t("analyses:timeLimitCountdown", { - timeLimitCountdown, - }) - ) : ( - - ) + ) : ( t("origination", { origination, diff --git a/stories/analyses/ArgTypes.js b/stories/analyses/ArgTypes.js index 31485e9cd..34a075656 100644 --- a/stories/analyses/ArgTypes.js +++ b/stories/analyses/ArgTypes.js @@ -2,14 +2,15 @@ export const TimeLimitArgType = { timeLimit: { name: "Time Limit", // The time-limit endpoint can return the literal string "null". - options: ["null", "3d", "3h", "30m", "30s"], + options: ["null", "6d", "3d", "3h", "30m", "2m"], control: { type: "select", labels: { + "6d": "6 days", "3d": "3 days", "3h": "3 hours", "30m": "30 minutes", - "30s": "30 seconds", + "2m": "2 minutes", }, }, }, @@ -17,14 +18,16 @@ export const TimeLimitArgType = { export const convertTimeLimitArgType = (timeLimit) => { switch (timeLimit) { + case "6d": + return new Date().getTime() / 1000 + 6 * 24 * 60 * 60; case "3d": return new Date().getTime() / 1000 + 3 * 24 * 60 * 60; case "3h": return new Date().getTime() / 1000 + 3 * 60 * 60; case "30m": return new Date().getTime() / 1000 + 30 * 60; - case "30s": - return new Date().getTime() / 1000 + 30; + case "2m": + return new Date().getTime() / 1000 + 2 * 60; default: return timeLimit; }