Add plugin API

Author: kshmidt-digma

apps.ts

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

src/components/RecentActivity/RecentActivityTable/index.tsx

@@ -13,7 +13,6 @@ import type {
   SlimEntrySpanData
 } from "../../../redux/services/types";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
-import { isNumber } from "../../../typeGuards/isNumber";
 import { FeatureFlag } from "../../../types";
 import { formatTimeDistance } from "../../../utils/formatTimeDistance";
 import { getDurationString } from "../../../utils/getDurationString";
@@ -30,11 +29,9 @@ import * as s from "./styles";
 import type { ColumnMeta, RecentActivityTableProps } from "./types";
 
 const columnHelper = createColumnHelper<RecentActivityEntry>();
+export const MAX_DISTANCE = 10 * 60 * 1000; // in milliseconds
 
-export const isRecent = (entry: RecentActivityEntry): boolean => {
-  const MAX_DISTANCE = isNumber(window.recentActivityExpirationLimit)
-    ? window.recentActivityExpirationLimit
-    : 10 * 60 * 1000; // in milliseconds
+const isRecent = (entry: RecentActivityEntry): boolean => {
   const now = new Date();
   return (
     now.valueOf() - new Date(entry.latestTraceTimestamp).valueOf() <=

src/components/RecentActivity/index.tsx

@@ -7,6 +7,7 @@ import { dispatcher } from "../../dispatcher";
 import { usePersistence } from "../../hooks/usePersistence";
 import { usePrevious } from "../../hooks/usePrevious";
 import { useDeleteEnvironmentMutation } from "../../redux/services/digma";
+import { useToggleRecentIndicatorMutation } from "../../redux/services/plugin";
 import type {
   Environment,
   SlimEntrySpanData
@@ -34,7 +35,7 @@ import type { ViewMode } from "./EnvironmentPanel/types";
 import { LiveView } from "./LiveView";
 import { NoData } from "./NoData";
 import { ObservabilityStatusBadge } from "./ObservabilityStatusBadge";
-import { RecentActivityTable, isRecent } from "./RecentActivityTable";
+import { MAX_DISTANCE, RecentActivityTable } from "./RecentActivityTable";
 import { Toggle } from "./Toggle";
 import { WelcomeScreen } from "./WelcomeScreen";
 import { actions } from "./actions";
@@ -96,8 +97,9 @@ export const RecentActivity = () => {
   const [environmentToDelete, setEnvironmentToDelete] = useState<string>();
   const [environmentToClearData, setEnvironmentToClearData] =
     useState<string>();
-  const { recentActivityData: data } = useRecentActivityData();
+  const recentActivityData = useRecentActivityData(selectedEnvironment?.id);
   const [deleteEnvironment] = useDeleteEnvironmentMutation();
+  const [toggleRecentIndicator] = useToggleRecentIndicatorMutation();
   const isEnvironmentConfirmationDialogVisible = Boolean(
     environmentToDelete ?? environmentToClearData
   );
@@ -137,37 +139,50 @@ export const RecentActivity = () => {
 
   const filteredEntries = useMemo(
     () =>
-      data.entries.filter((entry) => {
+      recentActivityData.entries?.filter((entry) => {
         const clearDataTimestamp =
           persistedEnvironmentClearDataTimestamps?.[entry.environment];
 
         return clearDataTimestamp
           ? new Date(entry.latestTraceTimestamp).valueOf() >
               new Date(clearDataTimestamp).valueOf()
           : true;
-      }),
-    [data, persistedEnvironmentClearDataTimestamps]
+      }) ?? [],
+    [recentActivityData.entries, persistedEnvironmentClearDataTimestamps]
   );
 
   const environmentActivities = useMemo(
-    () =>
-      filteredEntries ? groupBy(filteredEntries, (x) => x.environment) : {},
+    () => groupBy(filteredEntries, (x) => x.environment),
     [filteredEntries]
   );
 
-  const environments: ExtendedEnvironment[] = useMemo(
-    () =>
-      data.environments.map((environment) => ({
+  const environments: ExtendedEnvironment[] = useMemo(() => {
+    const now = new Date();
+
+    return (
+      recentActivityData.environments?.map((environment) => ({
         ...environment,
         additionToConfigResult: null,
         serverApiUrl: null,
         isOrgDigmaSetupFinished: false,
-        hasRecentActivity: environmentActivities[environment.id]
-          ? environmentActivities[environment.id].some(isRecent)
-          : false
-      })),
-    [data, environmentActivities]
-  );
+        hasRecentActivity: Boolean(
+          environment.lastActive &&
+            now.valueOf() - new Date(environment.lastActive).valueOf() <=
+              MAX_DISTANCE
+        )
+      })) ?? []
+    );
+  }, [recentActivityData.environments]);
+
+  useEffect(() => {
+    const isAnyRecentActivity = environments.some(
+      (environment) => environment.hasRecentActivity
+    );
+
+    void toggleRecentIndicator({
+      status: isAnyRecentActivity
+    });
+  }, [environments, toggleRecentIndicator]);
 
   useEffect(() => {
     if (selectedEnvironment?.id) {
@@ -448,6 +463,22 @@ export const RecentActivity = () => {
       );
     }
 
+    if (
+      recentActivityData.areEntriesLoading &&
+      recentActivityData.entries === undefined
+    ) {
+      return (
+        <>
+          <s.NoDataRecentActivityContainerBackground>
+            <s.NoDataRecentActivityContainerBackgroundGradient />
+          </s.NoDataRecentActivityContainerBackground>
+          <s.LoadingContainer>
+            <s.Spinner size={32} />
+          </s.LoadingContainer>
+        </>
+      );
+    }
+
     if (
       !selectedEnvironment ||
       !environmentActivities[selectedEnvironment.id]

src/components/RecentActivity/styles.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Spinner as CommonSpinner } from "../common/v3/Spinner";
 
 const RECENT_ACTIVITY_NO_DATA_PADDING_TOP = 39; // in pixels
 const RECENT_ACTIVITY_MIN_WIDTH = 550; // in pixels
@@ -126,6 +127,17 @@ export const RecentActivityContainerBackgroundGradient = styled.div`
   filter: blur(5px);
 `;
 
+export const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 60px;
+`;
+
+export const Spinner = styled(CommonSpinner)`
+  color: ${({ theme }) => theme.colors.v3.surface.gray};
+`;
+
 export const ClearDataMessageContainer = styled.div`
   display: flex;
   flex-direction: column;

src/components/RecentActivity/useRecentActivityData.ts

@@ -1,34 +1,84 @@
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 import {
   useGetEnvironmentsQuery,
   useGetRecentActivityQuery
 } from "../../redux/services/digma";
+import type {
+  Environment,
+  RecentActivityEntry
+} from "../../redux/services/types";
 
 const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
 
-export const useRecentActivityData = () => {
-  const { data: environments } = useGetEnvironmentsQuery(undefined, {
-    pollingInterval: REFRESH_INTERVAL
+interface RecentActivityData {
+  environments: Environment[] | undefined;
+  entries: RecentActivityEntry[] | undefined;
+  areEnvironmentsLoading: boolean;
+  areEntriesLoading: boolean;
+}
+
+export const useRecentActivityData = (environmentId: string | undefined) => {
+  const [data, setData] = useState<RecentActivityData>({
+    environments: undefined,
+    entries: undefined,
+    areEnvironmentsLoading: false,
+    areEntriesLoading: false
   });
-  const { data: recentActivityData } = useGetRecentActivityQuery(
-    {
-      environments: environments?.map((env) => env.id) ?? []
-    },
-    {
-      skip: !environments || environments.length === 0,
+
+  const { data: environments, isFetching: areEnvironmentsFetching } =
+    useGetEnvironmentsQuery(undefined, {
       pollingInterval: REFRESH_INTERVAL
+    });
+
+  const { data: recentActivityData, isFetching: isRecentActivityDataFetching } =
+    useGetRecentActivityQuery(
+      {
+        environments: environmentId ? [environmentId] : []
+      },
+      {
+        skip: !environments || environments.length === 0 || !environmentId,
+        pollingInterval: REFRESH_INTERVAL
+      }
+    );
+
+  useEffect(() => {
+    if (environmentId) {
+      setData((prevData) => ({
+        ...prevData,
+        entries: undefined
+      }));
+    }
+  }, [environmentId]);
+
+  useEffect(() => {
+    setData((prevData) => ({
+      ...prevData,
+      areEnvironmentsLoading: areEnvironmentsFetching
+    }));
+  }, [areEnvironmentsFetching]);
+
+  useEffect(() => {
+    setData((prevData) => ({
+      ...prevData,
+      areEntriesLoading: isRecentActivityDataFetching
+    }));
+  }, [isRecentActivityDataFetching]);
+
+  useEffect(() => {
+    if (environments) {
+      setData((prevData) => ({
+        ...prevData,
+        environments
+      }));
     }
-  );
-
-  const data = useMemo(
-    () => ({
-      environments: environments ?? [],
-      entries: recentActivityData?.entries ?? []
-    }),
-    [environments, recentActivityData]
-  );
-
-  return {
-    recentActivityData: data
-  };
+  }, [environments]);
+
+  useEffect(() => {
+    setData((prevData) => ({
+      ...prevData,
+      entries: recentActivityData?.entries
+    }));
+  }, [recentActivityData]);
+
+  return data;
 };

src/containers/RecentActivity/store.ts

@@ -1,13 +1,15 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { setupListeners } from "@reduxjs/toolkit/query";
 import { digmaApi } from "../../redux/services/digma";
+import { pluginApi } from "../../redux/services/plugin";
 
 export const store = configureStore({
   reducer: {
-    [digmaApi.reducerPath]: digmaApi.reducer
+    [digmaApi.reducerPath]: digmaApi.reducer,
+    [pluginApi.reducerPath]: pluginApi.reducer
   },
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(digmaApi.middleware)
+    getDefaultMiddleware().concat(digmaApi.middleware, pluginApi.middleware)
 });
 
 setupListeners(store.dispatch);

src/globals.d.ts

@@ -58,7 +58,6 @@ declare global {
     documentationPage?: unknown;
     initialRoutePath?: unknown;
     notificationsViewMode?: unknown;
-    recentActivityExpirationLimit?: unknown;
     wizardSkipInstallationStep?: unknown;
     wizardFirstLaunch?: unknown;
     productKey?: unknown;

src/redux/services/plugin.ts

@@ -0,0 +1,29 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export interface ToggleRecentIndicatorPayload {
+  status: boolean;
+}
+
+export const pluginApi = createApi({
+  reducerPath: "pluginApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: "/plugin-api",
+    credentials: "same-origin"
+  }),
+  endpoints: (builder) => ({
+    toggleRecentIndicator: builder.mutation<void, ToggleRecentIndicatorPayload>(
+      {
+        query: (data) => ({
+          url: "",
+          params: {
+            pluginCommand: "RecentActivityBadge"
+          },
+          method: "PUT",
+          body: data
+        })
+      }
+    )
+  })
+});
+
+export const { useToggleRecentIndicatorMutation } = pluginApi;