CORE-2002 VICE Countdown Timers

public/static/locales/en/analyses.json

@@ -119,6 +119,7 @@
     "terminateAnalysisTitle": "Terminate Analysis",
     "terminateAnalysisTitle_plural": "Terminate Analyses",
     "terminateBtn": "Terminate",
+    "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/details/InfoPanel.js

@@ -59,7 +59,7 @@ function Updates(props) {
                 const timestamp = update.timestamp;
                 const message = update.message;
                 return (
-                    <>
+                    <React.Fragment key={updateIndex}>
                         <ListItem id={buildID(baseId, updateIndex)}>
                             <ListItemText
                                 primary={`${formatDate(timestamp)} - ${status}`}
@@ -69,7 +69,7 @@ function Updates(props) {
                             />
                         </ListItem>
                         <Divider component="li" />
-                    </>
+                    </React.Fragment>
                 );
             })}
         </List>

src/components/analyses/details/ParamsPanel.js

@@ -80,7 +80,11 @@ function AnalysisParams(props) {
     let columns = columnData(t);
 
     if (isParamsFetching) {
-        return <TableLoading numColumns={3} numRows={10} />;
+        return (
+            <Table>
+                <TableLoading numColumns={3} numRows={10} />
+            </Table>
+        );
     }
 
     if (!parameters && !isParamsFetching && !paramsFetchError) {

src/components/analyses/landing/AnalysisSubmissionLanding.js

@@ -7,12 +7,10 @@ import {
     cancelAnalysis,
     extendVICEAnalysisTimeLimit,
     getAnalysis,
-    getTimeLimitForVICEAnalysis,
     renameAnalysis,
     updateAnalysisComment,
     useAnalysisInfo,
     useAnalysisParameters,
-    VICE_TIME_LIMIT_QUERY_KEY,
 } from "serviceFacades/analyses";
 import { getAnalysisShareWithSupportRequest } from "serviceFacades/sharing";
 import {
@@ -29,6 +27,7 @@ import DetailsPanel from "../details/DetailsPanel";
 import InfoPanel from "../details/InfoPanel";
 import ParamsPanel from "../details/ParamsPanel";
 import AnalysisStatusIcon from "../AnalysisStatusIcon";
+import useAnalysisTimeLimitCountdown from "../useAnalysisTimeLimitCountdown";
 
 import ShareWithSupportDialog from "components/analyses/ShareWithSupportDialog";
 import TerminateAnalysisDialog from "components/analyses/TerminateAnalysisDialog";
@@ -104,16 +103,19 @@ export default function AnalysisSubmissionLanding(props) {
 
     const [confirmExtendTimeLimitDlgOpen, setConfirmExtendTimeLimitDlgOpen] =
         React.useState(false);
-    const [timeLimitQueryEnabled, setTimeLimitQueryEnabled] =
-        React.useState(false);
-    const [timeLimit, setTimeLimit] = React.useState();
     const [pendingTerminationDlgOpen, setPendingTerminationDlgOpen] =
         React.useState(false);
 
+    const { timeLimit, timeLimitCountdown } = useAnalysisTimeLimitCountdown(
+        analysis,
+        showErrorAnnouncer
+    );
+
     const username = getAnalysisUser(analysis, config);
     const isBatch = isBatchAnalysis(analysis);
     const isVICE = isInteractive(analysis);
-    const allowTimeExtn = allowAnalysisTimeExtn(analysis, username, config);
+    const allowTimeExtn =
+        timeLimit && allowAnalysisTimeExtn(analysis, username, config);
     const allowCancel = allowAnalysesCancel([analysis], username, config);
     const allowRelaunch = allowAnalysesRelaunch([analysis]);
     const allowEdit = allowAnalysisEdit(analysis, username, config);
@@ -187,22 +189,6 @@ export default function AnalysisSubmissionLanding(props) {
             onSuccess: setParameters,
         });
 
-    const { isFetching: isFetchingTimeLimit } = useQuery({
-        queryKey: [VICE_TIME_LIMIT_QUERY_KEY, id],
-        queryFn: () => getTimeLimitForVICEAnalysis(id),
-        enabled: timeLimitQueryEnabled,
-        onSuccess: (resp) => {
-            //convert the response from seconds to milliseconds
-            setTimeLimit({
-                [id]: formatDate(resp?.time_limit * 1000),
-            });
-            setConfirmExtendTimeLimitDlgOpen(true);
-        },
-        onError: (error) => {
-            showErrorAnnouncer(t("timeLimitError"), error);
-        },
-    });
-
     const { mutate: shareAnalysesMutation, isLoading: shareLoading } =
         useMutation(submitAnalysisSupportRequest, {
             onSuccess: (responses) => {
@@ -277,7 +263,6 @@ export default function AnalysisSubmissionLanding(props) {
         useMutation(extendVICEAnalysisTimeLimit, {
             onSuccess: (resp) => {
                 setConfirmExtendTimeLimitDlgOpen(false);
-                setTimeLimit(null);
                 //convert the response from seconds to milliseconds
                 announce({
                     text: t("timeLimitExtended", {
@@ -304,11 +289,7 @@ export default function AnalysisSubmissionLanding(props) {
         });
     };
 
-    const busy =
-        isFetching ||
-        analysisLoading ||
-        isFetchingTimeLimit ||
-        extensionLoading;
+    const busy = isFetching || analysisLoading || extensionLoading;
 
     if (busy) {
         return <GridLoading rows={25} baseId={baseId} />;
@@ -354,6 +335,16 @@ export default function AnalysisSubmissionLanding(props) {
                                     analysis={analysis}
                                     date={formatDate(analysis?.startdate)}
                                 />
+                                {timeLimitCountdown && (
+                                    <Typography
+                                        color="primary"
+                                        variant="subtitle2"
+                                    >
+                                        {t("timeLimitCountdown", {
+                                            timeLimitCountdown,
+                                        })}
+                                    </Typography>
+                                )}
                             </Grid>
                         </Grid>
                     </Grid>
@@ -461,7 +452,9 @@ export default function AnalysisSubmissionLanding(props) {
                                             }
                                             handleRefresh={refreshAnalysis}
                                             handleTimeLimitExtnClick={() => {
-                                                setTimeLimitQueryEnabled(true);
+                                                setConfirmExtendTimeLimitDlgOpen(
+                                                    true
+                                                );
                                             }}
                                             handleShareWithSupport={() =>
                                                 setHelpOpen(true)
@@ -593,7 +586,7 @@ export default function AnalysisSubmissionLanding(props) {
                 confirmButtonText={t("extend")}
                 title={t("extendTime")}
                 contentText={t("extendTimeLimitMessage", {
-                    timeLimit: timeLimit ? timeLimit[id] : "",
+                    timeLimit: formatDate(timeLimit),
                 })}
             />
         </PageWrapper>

src/components/analyses/listing/Actions.js

@@ -13,17 +13,13 @@ import ids from "../ids";
 import buildID from "components/utils/DebugIDUtil";
 
 import {
-    allowAnalysesCancel,
-    allowAnalysisTimeExtn,
     isBatchAnalysis,
     isInteractive,
     isTerminated,
     useGotoOutputFolderLink,
     useRelaunchLink,
 } from "../utils";
 
-import { useConfig } from "contexts/config";
-
 import { Grid, IconButton } from "@mui/material";
 import {
     Cancel as CancelIcon,
@@ -92,26 +88,23 @@ export default function Actions(props) {
     const {
         analysis,
         allowBatchDrillDown = true,
+        allowCancel,
+        allowTimeExtn,
         handleDetailsClick,
         handleInteractiveUrlClick,
         handleTerminateSelected,
         handleBatchIconClick,
         setPendingTerminationDlgOpen,
         baseId,
-        username,
         handleTimeLimitExtnClick,
         setVICELogsDlgOpen,
     } = props;
 
-    const [config] = useConfig();
-
     const interactiveUrls = analysis.interactive_urls;
     const isDisabled = analysis.app_disabled;
 
     const isBatch = isBatchAnalysis(analysis);
     const isVICE = isInteractive(analysis);
-    const allowCancel = allowAnalysesCancel([analysis], username, config);
-    const allowTimeExtn = allowAnalysisTimeExtn(analysis, username, config);
     const [relaunchHref, relaunchAs] = useRelaunchLink(analysis);
     const [outputFolderHref, outputFolderAs] = useGotoOutputFolderLink(
         analysis?.resultfolderid

src/components/analyses/listing/Listing.js

@@ -19,15 +19,13 @@ import ViceLogsViewer from "components/analyses/ViceLogsViewer";
 
 import {
     ANALYSES_LISTING_QUERY_KEY,
-    VICE_TIME_LIMIT_QUERY_KEY,
     cancelAnalyses,
     deleteAnalyses,
     getAnalyses,
     relaunchAnalyses,
     renameAnalysis,
     updateAnalysisComment,
     extendVICEAnalysisTimeLimit,
-    getTimeLimitForVICEAnalysis,
 } from "serviceFacades/analyses";
 
 import { useBagAddItems } from "serviceFacades/bags";
@@ -131,29 +129,13 @@ function Listing(props) {
         useState(false);
     const [terminateAnalysisDlgOpen, setTerminateAnalysisDlgOpen] =
         useState(false);
-    const [timeLimitQueryEnabled, setTimeLimitQueryEnabled] = useState(false);
     const [timeLimit, setTimeLimit] = useState();
 
     const handleTerminateSelected = () => setTerminateAnalysisDlgOpen(true);
 
     // Get QueryClient from the context
     const queryClient = useQueryClient();
 
-    /**
-     * There is a small gap between when the user click on the Extend button / menu item
-     * and the time loading mask appears because the getTimeLimitForVICEAnalysis query is
-     * controlled by timeLimitQueryEnabled state. So the user has a chance to click
-     * on the same button again or choose to extend time limit on another analysis or
-     * even do something else. To avoid potential race condition,
-     * I am storing / checking the selected analysis id for which the timestamp is fetched.
-     * This should also help in debugging if the race condition still happens.
-     */
-    useEffect(() => {
-        if (timeLimit && selected?.length > 0 && timeLimit[selected[0]]) {
-            setConfirmExtendTimeLimitDlgOpen(true);
-        }
-    }, [timeLimit, selected]);
-
     const { isFetching, error } = useQuery({
         queryKey: analysesKey,
         queryFn: () => getAnalyses(analysesKey[1]),
@@ -280,30 +262,16 @@ function Listing(props) {
             },
         });
 
-    const { isFetching: isFetchingTimeLimit } = useQuery({
-        queryKey: [VICE_TIME_LIMIT_QUERY_KEY, selected[0]],
-        queryFn: () => getTimeLimitForVICEAnalysis(selected[0]),
-        enabled: timeLimitQueryEnabled,
-        onSuccess: (resp) => {
-            //convert the response from seconds to milliseconds
-            setTimeLimit({
-                [selected[0]]: formatDate(resp?.time_limit * 1000),
-            });
-        },
-        onError: (error) => {
-            showErrorAnnouncer(t("timeLimitError"), error);
-        },
-    });
-
     const { mutate: doTimeLimitExtension, isLoading: extensionLoading } =
         useMutation(extendVICEAnalysisTimeLimit, {
             onSuccess: (resp) => {
                 setConfirmExtendTimeLimitDlgOpen(false);
-                setTimeLimit(null);
+                const newTimeLimit = resp?.time_limit * 1000;
+                setTimeLimit(newTimeLimit || null);
                 //convert the response from seconds to milliseconds
                 announce({
                     text: t("timeLimitExtended", {
-                        newTimeLimit: formatDate(resp?.time_limit * 1000),
+                        newTimeLimit: formatDate(newTimeLimit),
                         analysisName: getSelectedAnalyses()[0]?.name,
                     }),
                     variant: SUCCESS,
@@ -713,15 +681,13 @@ function Listing(props) {
         cancelLoading,
         deleteLoading,
         relaunchLoading,
-        isFetchingTimeLimit,
         extensionLoading,
     ]);
 
     return (
         <>
             <AnalysesToolbar
                 baseId={baseId}
-                selected={selected}
                 username={userProfile?.id}
                 getSelectedAnalyses={getSelectedAnalyses}
                 handleAppTypeFilterChange={handleAppTypeFilterChange}
@@ -744,7 +710,10 @@ function Listing(props) {
                 handleBatchIconClick={handleBatchIconClick}
                 canShare={sharingEnabled}
                 setPendingTerminationDlgOpen={setPendingTerminationDlgOpen}
-                handleTimeLimitExtnClick={() => setTimeLimitQueryEnabled(true)}
+                handleTimeLimitExtnClick={(timeLimit) => {
+                    setTimeLimit(timeLimit);
+                    setConfirmExtendTimeLimitDlgOpen(true);
+                }}
                 onRefreshSelected={onRefreshSelected}
                 setVICELogsDlgOpen={setVICELogsDlgOpen}
             />
@@ -767,8 +736,9 @@ function Listing(props) {
                 handleDetailsClick={onDetailsSelected}
                 handleStatusClick={handleStatusClick}
                 setPendingTerminationDlgOpen={setPendingTerminationDlgOpen}
-                handleTimeLimitExtnClick={() => {
-                    setTimeLimitQueryEnabled(true);
+                handleTimeLimitExtnClick={(timeLimit) => {
+                    setTimeLimit(timeLimit);
+                    setConfirmExtendTimeLimitDlgOpen(true);
                 }}
                 setVICELogsDlgOpen={setVICELogsDlgOpen}
             />
@@ -865,7 +835,7 @@ function Listing(props) {
                 confirmButtonText={t("extend")}
                 title={t("extendTime")}
                 contentText={t("extendTimeLimitMessage", {
-                    timeLimit: timeLimit ? timeLimit[selected[0]] : "",
+                    timeLimit: formatDate(timeLimit),
                 })}
             />
             <ViceLogsViewer