CORE-2002 Update VICE countdown timer format

Display countdown timer as "Time Remaining: HHh:MMm",
and only update every minute.

Since this is a shorter string, it can now fit in the
AnalysisSubheader in place of the running duration and date string
in the dashboard.

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",

public/static/locales/en/dashboard.json

@@ -5,6 +5,7 @@
     "analysisCompletedOrigination": "<status><bold>{{status}}</bold></status> in {{totalRunTime}} - ({{date}})",
     "analysisOrigination": "<status><bold>{{status}}</bold></status> - {{date}}",
     "analysisRunningOrigination": "<status><bold>{{status}}</bold></status> for {{runningTime}} ({{date}})",
+    "analysisRunningTimeLimit": "<status><bold>{{status}}</bold></status> - Time Remaining: {{timeLimitCountdown}}",
     "banner": "Banner",
     "buy": "Buy",
     "by": "By",

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 (
         <Typography variant="body2">
-            {timeLimitCountdown || totalRunTime || elapsedTime}
+            {timeLimitCountdown
+                ? t("timeLimitCountdown", {
+                      timeLimitCountdown,
+                  })
+                : totalRunTime || elapsedTime}
         </Typography>
     );
 }

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);

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) {
         <Trans
             t={t}
             i18nKey={
-                totalRunTime
+                timeLimitCountdown
+                    ? "analysisRunningTimeLimit"
+                    : totalRunTime
                     ? "analysisCompletedOrigination"
                     : elapsedTime
                     ? "analysisRunningOrigination"
@@ -43,6 +45,7 @@ export default function AnalysisSubheader(props) {
                 date: formattedDate,
                 runningTime: elapsedTime,
                 totalRunTime,
+                timeLimitCountdown,
             }}
             components={{
                 bold: <strong />,

src/components/dashboard/dashboardItem/ItemBase.js

@@ -118,16 +118,11 @@ const DashboardItem = ({ item }) => {
                 }}
                 subheader={
                     isAnalysis ? (
-                        timeLimitCountdown ? (
-                            t("analyses:timeLimitCountdown", {
-                                timeLimitCountdown,
-                            })
-                        ) : (
-                            <AnalysisSubheader
-                                analysis={item.content}
-                                date={date}
-                            />
-                        )
+                        <AnalysisSubheader
+                            analysis={item.content}
+                            date={date}
+                            timeLimitCountdown={timeLimitCountdown}
+                        />
                     ) : (
                         t("origination", {
                             origination,

stories/analyses/ArgTypes.js

@@ -2,29 +2,32 @@ 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",
             },
         },
     },
 };
 
 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;
     }