Fix recent activity rerender (#1370)

* Fix recent activity rerender

* Remove recent activity indicator management

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: kshmidt-digma

apps.ts

@@ -54,6 +54,7 @@ export const appData: AppData = {
   // },
   ["recent-activity"]: {
     entry: path.resolve(__dirname, "./src/containers/RecentActivity/index.tsx"),
+    environmentVariables: ["recentActivityExpirationLimit"],
     platforms: ["jetbrains"]
   },
   troubleshooting: {

dependencies.json

@@ -1,5 +1,5 @@
 {
-  "jetBrainsPluginVersion": "2.0.414",
+  "jetBrainsPluginVersion": "2.0.417",
   "visualStudioExtensionVersion": "1.2.11",
   "jaegerUIVersion": "1.29.1-digma.1.2.0",
   "jaegerVersion": "1.45.0"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "12.0.4",
+  "version": "12.0.5-alpha.1",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",

package.json

@@ -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/Greeting/index.tsx

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

src/components/Admin/Header/HeaderContent/FilterMenu/FilterButton/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/Assets/AssetList/AssetEntry/index.tsx

@@ -154,7 +154,8 @@ export const AssetList = ({
 
   const { data } = useGetAssetsQuery(payload, {
     skip: !environmentId,
-    pollingInterval: REFRESH_INTERVAL
+    pollingInterval: REFRESH_INTERVAL,
+    refetchOnReconnect: true
   });
 
   const filteredCount = data?.filteredCount ?? 0;

src/components/Assets/AssetList/index.tsx

@@ -56,7 +56,8 @@ export const AssetTypeList = ({
 
   const { data } = useGetAssetsCategoriesQuery(payload, {
     skip: !environmentId,
-    pollingInterval: REFRESH_INTERVAL
+    pollingInterval: REFRESH_INTERVAL,
+    refetchOnReconnect: true
   });
 
   const previousData = usePrevious(data);

src/components/Assets/AssetTypeList/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>
   );