Fix recent activity rerender

Author: kshmidt-digma

src/components/Admin/Header/Greeting/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useNow } from "../../../../hooks/useNow";
 import { useGetUserProfileQuery } from "../../../../redux/services/digma";
 import * as s from "./styles";
 
@@ -19,17 +19,9 @@ const getGreetingText = (dateTime: number) => {
 };
 
 export const Greeting = () => {
+  const now = useNow(REFRESH_INTERVAL);
   const { data: userProfile } = useGetUserProfileQuery();
-  const [currentDateTime, setCurrentDateTime] = useState(Date.now());
-  const greetingText = getGreetingText(currentDateTime);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setCurrentDateTime(Date.now());
-    }, REFRESH_INTERVAL);
-
-    return () => clearInterval(intervalId);
-  }, []);
+  const greetingText = getGreetingText(now);
 
   if (!userProfile) {
     return null;

src/components/Admin/Header/HeaderContent/FilterMenu/FilterButton/index.tsx

@@ -20,4 +20,5 @@ const FilterButtonComponent = (
     </Tooltip>
   </div>
 );
+
 export const FilterButton = forwardRef(FilterButtonComponent);

src/components/Assets/AssetList/AssetEntry/index.tsx

@@ -1,4 +1,5 @@
 import { getFeatureFlagValue } from "../../../../featureFlags";
+import { useNow } from "../../../../hooks/useNow";
 import { AssetsSortingCriterion } from "../../../../redux/services/types";
 import { useConfigSelector } from "../../../../store/config/useConfigSelector";
 import { isNumber } from "../../../../typeGuards/isNumber";
@@ -25,6 +26,7 @@ export const AssetEntry = ({
   sortingCriterion
 }: AssetEntryProps) => {
   const { backendInfo } = useConfigSelector();
+  const now = useNow();
   const isNewImpactScoreCalculationEnabled = getFeatureFlagValue(
     backendInfo,
     FeatureFlag.IsNewImpactScoreCalculationEnabled
@@ -62,14 +64,14 @@ export const AssetEntry = ({
 
   const servicesTitle = entry.services.join(", ");
 
-  const timeDistanceString = formatTimeDistance(lastSeenDateTime, {
+  const timeDistanceString = formatTimeDistance(lastSeenDateTime, now, {
     format: "short",
     withDescriptiveWords: false
   }).replace(" ", "");
   const timeDistanceTitle = new Date(lastSeenDateTime).toString();
 
   const isNew = isString(entry.firstDetected)
-    ? Date.now() - new Date(entry.firstDetected).valueOf() < IS_NEW_TIME_LIMIT
+    ? now - new Date(entry.firstDetected).valueOf() < IS_NEW_TIME_LIMIT
     : false;
 
   return (

src/components/Errors/ErrorCard/TimestampKeyValue/index.tsx

@@ -1,16 +1,18 @@
+import { useNow } from "../../../../hooks/useNow";
 import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
 import { Tooltip } from "../../../common/v3/Tooltip";
 import * as s from "./styles";
 import type { TimestampProps } from "./types";
 
 export const TimestampKeyValue = ({ label, timestamp }: TimestampProps) => {
   const dateTimeString = new Date(timestamp).toString();
+  const now = useNow();
 
   return (
     <Tooltip title={dateTimeString} key={label}>
       <s.Container>
         <s.Label>{label}:</s.Label>
-        <s.TimeDistance>{formatTimeDistance(timestamp)}</s.TimeDistance>
+        <s.TimeDistance>{formatTimeDistance(timestamp, now)}</s.TimeDistance>
       </s.Container>
     </Tooltip>
   );

src/components/Errors/ErrorDetails/ErrorDetailsCardContent/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useNow } from "../../../../hooks/useNow";
 import { usePrevious } from "../../../../hooks/usePrevious";
 import { isNull } from "../../../../typeGuards/isNull";
 import { isNumber } from "../../../../typeGuards/isNumber";
@@ -24,6 +25,7 @@ export const ErrorDetailsCardContent = ({
 }: ErrorDetailsCardContentProps) => {
   const previousId = usePrevious(id);
   const [currentFlowStack, setCurrentFlowStack] = useState(0);
+  const now = useNow();
 
   useEffect(() => {
     if (isString(previousId) && previousId !== id) {
@@ -35,9 +37,9 @@ export const ErrorDetailsCardContent = ({
     .filter(isServiceInfoWithName)
     .map((x) => x.serviceName);
   const startedTooltip = new Date(data.firstOccurenceTime).toString();
-  const startedString = formatTimeDistance(data.firstOccurenceTime);
+  const startedString = formatTimeDistance(data.firstOccurenceTime, now);
   const lastTooltip = new Date(data.lastOccurenceTime).toString();
-  const lastString = formatTimeDistance(data.lastOccurenceTime);
+  const lastString = formatTimeDistance(data.lastOccurenceTime, now);
   const avgPerDay = data.dayAvg;
 
   const flows = data.errors.filter((x) => !isNull(x));

src/components/Highlights/Performance/index.tsx

@@ -2,6 +2,7 @@ import type { Row } from "@tanstack/react-table";
 import { createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { getFeatureFlagValue } from "../../../featureFlags";
+import { useNow } from "../../../hooks/useNow";
 import {
   useGetPerformanceHighlightsQuery,
   useGetPerformanceHighlightsV2Query
@@ -28,6 +29,7 @@ import * as s from "./styles";
 
 export const Performance = () => {
   const { scope, environments, backendInfo } = useConfigSelector();
+  const now = useNow();
 
   const areImpactHighlightsEnabled = getFeatureFlagValue(
     backendInfo,
@@ -125,7 +127,7 @@ export const Performance = () => {
             return null;
           }
 
-          const value = formatTimeDistance(lastCallDateTime, {
+          const value = formatTimeDistance(lastCallDateTime, now, {
             format: "short",
             withDescriptiveWords: false
           }).replace(" ", "");

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanDurationsInsightCard/index.tsx

@@ -11,6 +11,7 @@ import {
 import type { DefaultTheme } from "styled-components";
 import { useTheme } from "styled-components";
 import { PERCENTILES } from "../../../../../../../constants";
+import { useNow } from "../../../../../../../hooks/useNow";
 import type { Duration } from "../../../../../../../redux/services/types";
 import { isNumber } from "../../../../../../../typeGuards/isNumber";
 import { convertToDuration } from "../../../../../../../utils/convertToDuration";
@@ -37,7 +38,7 @@ import { DIVIDER, LABEL_HEIGHT } from "./constants";
 import * as s from "./styles";
 import type { SpanDurationsInsightCardProps, TickData } from "./types";
 
-const LAST_CALL_TIME_DISTANCE_LIMIT = 60 * 1000; // in milliseconds
+const LAST_CALL_TIME_LIMIT = 60 * 1000; // in milliseconds
 
 // in pixels
 const MIN_BAR_HEIGHT = 5;
@@ -142,6 +143,7 @@ export const SpanDurationsInsightCard = ({
   tooltipBoundaryRef
 }: SpanDurationsInsightCardProps) => {
   const theme = useTheme();
+  const now = useNow();
   const { observe, width } = useDimensions();
 
   const sortedPercentiles = [...insight.percentiles].sort(
@@ -168,8 +170,7 @@ ${getDurationString(insight.average)}${
   const traces: Trace[] = [];
 
   const isLastCallRecent = spanLastCall
-    ? Date.now() - new Date(spanLastCall.startTime).valueOf() <
-      LAST_CALL_TIME_DISTANCE_LIMIT
+    ? now - new Date(spanLastCall.startTime).valueOf() < LAST_CALL_TIME_LIMIT
     : false;
 
   const chartData = insight.histogramPlot
@@ -299,7 +300,7 @@ ${getDurationString(insight.average)}${
                   title={
                     isLastCallRecent
                       ? "Moments ago"
-                      : formatTimeDistance(spanLastCall.startTime)
+                      : formatTimeDistance(spanLastCall.startTime, now)
                   }
                 >
                   <Tag

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/DurationChange/index.tsx

@@ -1,4 +1,5 @@
 import { formatDuration, intervalToDuration } from "date-fns";
+import { useNow } from "../../../../../../../../hooks/useNow";
 import type { Duration } from "../../../../../../../../redux/services/types";
 import { formatTimeDistance } from "../../../../../../../../utils/formatTimeDistance";
 import { roundTo } from "../../../../../../../../utils/roundTo";
@@ -74,6 +75,8 @@ export const DurationChange = ({
   previousDuration,
   changeTime
 }: DurationChangeProps) => {
+  const now = useNow();
+
   const isChangeMeaningful = isChangeMeaningfulEnough(
     currentDuration,
     previousDuration,
@@ -90,7 +93,7 @@ export const DurationChange = ({
       {previousDuration && changeTime && isChangeMeaningful && (
         <Tag
           type={getTagType(direction)}
-          title={formatTimeDistance(changeTime)}
+          title={formatTimeDistance(changeTime, now)}
           content={
             <s.Container>
               <s.ArrowContainer>

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightStatusTooltipContent/TimestampKeyValue/index.tsx

@@ -1,3 +1,4 @@
+import { useNow } from "../../../../../../../../../../../hooks/useNow";
 import { isString } from "../../../../../../../../../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../../../../../../../../../utils/formatTimeDistance";
 import { KeyValue } from "../KeyValue";
@@ -6,7 +7,10 @@ import type { TimestampKeyValueProps } from "./types";
 export const TimestampKeyValue = ({
   label,
   children
-}: TimestampKeyValueProps) =>
-  isString(children) ? (
-    <KeyValue label={label}>{formatTimeDistance(children)}</KeyValue>
+}: TimestampKeyValueProps) => {
+  const now = useNow();
+
+  return isString(children) ? (
+    <KeyValue label={label}>{formatTimeDistance(children, now)}</KeyValue>
   ) : null;
+};

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/index.tsx

@@ -1,3 +1,4 @@
+import { useNow } from "../../../../../../../../../hooks/useNow";
 import { useConfigSelector } from "../../../../../../../../../store/config/useConfigSelector";
 import { isString } from "../../../../../../../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../../../../../../../utils/formatTimeDistance";
@@ -43,8 +44,9 @@ export const InsightHeader = ({
 
   const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType);
   const statusTooltipContent = renderInsightStatusTooltipContent(insight);
+  const now = useNow();
   const isNew = isString(insight.firstDetected)
-    ? Date.now() - new Date(insight.firstDetected).valueOf() < IS_NEW_TIME_LIMIT
+    ? now - new Date(insight.firstDetected).valueOf() < IS_NEW_TIME_LIMIT
     : false;
   const spanInfo =
     isSpanInsight(insight) || isEndpointInsight(insight)
@@ -74,7 +76,7 @@ export const InsightHeader = ({
             <s.Description>
               Updated:
               <Tooltip title={new Date(lastUpdateTimer).toString()}>
-                <span>{formatTimeDistance(lastUpdateTimer)}</span>
+                <span>{formatTimeDistance(lastUpdateTimer, now)}</span>
               </Tooltip>
             </s.Description>
           )}