Creating a shared component for the Risk Engine's countdown text

x-pack/plugins/security_solution/public/entity_analytics/api/hooks/use_risk_engine_status.ts

@@ -6,13 +6,17 @@
  */
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import moment from 'moment';
+import { i18n } from '@kbn/i18n';
 import type { RiskEngineStatusResponse } from '../../../../common/api/entity_analytics/risk_engine/engine_status_route.gen';
 import { RiskEngineStatusEnum } from '../../../../common/api/entity_analytics/risk_engine/engine_status_route.gen';
 import { useEntityAnalyticsRoutes } from '../api';
 import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
 const FETCH_RISK_ENGINE_STATUS = ['GET', 'FETCH_RISK_ENGINE_STATUS'];
 
+const TEN_SECONDS = 10000;
+
 export const useInvalidateRiskEngineStatusQuery = () => {
   const queryClient = useQueryClient();
 
@@ -38,6 +42,28 @@ export const useIsNewRiskScoreModuleInstalled = (): RiskScoreModuleStatus => {
   return { isLoading: false, installed: !!riskEngineStatus?.isNewRiskScoreModuleInstalled };
 };
 
+export const useRiskEngineCountdownTime = (interval: number = TEN_SECONDS): string => {
+  const { data: riskEngineStatus } = useRiskEngineStatus({
+    refetchInterval: interval,
+  });
+
+  const { status, runAt } = riskEngineStatus?.risk_engine_task_status || {};
+
+  const isRunning = useMemo(
+    () => status === 'running' || (!!runAt && new Date(runAt) < new Date()),
+    [runAt, status]
+  );
+
+  return isRunning
+    ? i18n.translate(
+        'xpack.securitySolution.entityAnalytics.assetCriticalityResultStep.riskEngine.nowRunningMessage',
+        {
+          defaultMessage: 'Now running',
+        }
+      )
+    : moment(runAt).fromNow(true);
+};
+
 export interface RiskEngineStatus extends RiskEngineStatusResponse {
   isUpdateAvailable: boolean;
   isNewRiskScoreModuleInstalled: boolean;

x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/schedule_risk_engine_callout.tsx

@@ -12,15 +12,17 @@ import {
   EuiText,
   EuiFlexItem,
 } from '@elastic/eui';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import { i18n } from '@kbn/i18n';
 import { RiskEngineStatusEnum } from '../../../../../common/api/entity_analytics';
 import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
-import { formatTimeFromNow } from '../helpers';
 import { useScheduleNowRiskEngineMutation } from '../../../api/hooks/use_schedule_now_risk_engine_mutation';
-import { useRiskEngineStatus } from '../../../api/hooks/use_risk_engine_status';
+import {
+  useRiskEngineStatus,
+  useRiskEngineCountdownTime,
+} from '../../../api/hooks/use_risk_engine_status';
 
 const TEN_SECONDS = 10000;
 
@@ -29,7 +31,7 @@ export const ScheduleRiskEngineCallout: React.FC = () => {
     refetchInterval: TEN_SECONDS,
     structuralSharing: false, // Force the component to rerender after every Risk Engine Status API call
   });
-
+  const isRunning = riskEngineStatus?.risk_engine_task_status?.status === 'running';
   const { addSuccess, addError } = useAppToasts();
   const { isLoading: isLoadingRiskEngineSchedule, mutate: scheduleRiskEngineMutation } =
     useScheduleNowRiskEngineMutation({
@@ -53,25 +55,7 @@ export const ScheduleRiskEngineCallout: React.FC = () => {
         }),
     });
 
-  const { status, runAt } = riskEngineStatus?.risk_engine_task_status || {};
-
-  const isRunning = useMemo(
-    () => status === 'running' || (!!runAt && new Date(runAt) < new Date()),
-    [runAt, status]
-  );
-
-  const countDownText = useMemo(
-    () =>
-      isRunning
-        ? i18n.translate(
-            'xpack.securitySolution.entityAnalytics.assetCriticalityResultStep.riskEngine.nowRunningMessage',
-            {
-              defaultMessage: 'Now running',
-            }
-          )
-        : formatTimeFromNow(riskEngineStatus?.risk_engine_task_status?.runAt),
-    [isRunning, riskEngineStatus?.risk_engine_task_status?.runAt]
-  );
+  const countDownText = useRiskEngineCountdownTime();
 
   const scheduleRiskEngine = useCallback(() => {
     scheduleRiskEngineMutation();