UI fixes

src/components/Assets/AssetsFilter/index.tsx

@@ -1,9 +1,8 @@
-import { ComponentType, useContext, useEffect, useRef, useState } from "react";
+import { ComponentType, useContext, useEffect, useState } from "react";
 import { dispatcher } from "../../../dispatcher";
 import { usePersistence } from "../../../hooks/usePersistence";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { isNull } from "../../../typeGuards/isNull";
-import { isNumber } from "../../../typeGuards/isNumber";
 import { isString } from "../../../typeGuards/isString";
 import { isUndefined } from "../../../typeGuards/isUndefined";
 import { InsightType } from "../../../types";
@@ -30,10 +29,6 @@ import {
 
 const PERSISTENCE_KEY = "assetsFilters";
 
-const REFRESH_INTERVAL = isNumber(window.assetsRefreshInterval)
-  ? window.assetsRefreshInterval
-  : 10 * 1000; // in milliseconds
-
 const renderFilterCategory = (
   category: AssetFilterCategory,
   icon: ComponentType<IconProps>,
@@ -77,7 +72,6 @@ export const AssetsFilter = (props: AssetsFilterProps) => {
   const [selectedConsumers, setSelectedConsumers] = useState<string[]>([]);
   const [selectedInternals, setSelectedInternals] = useState<string[]>([]);
   const [selectedInsights, setSelectedInsights] = useState<InsightType[]>([]);
-  const refreshTimerId = useRef<number>();
   const config = useContext(ConfigContext);
   const previousEnvironment = usePrevious(config.environment);
 
@@ -136,7 +130,6 @@ export const AssetsFilter = (props: AssetsFilterProps) => {
         actions.SET_ASSET_FILTERS_DATA,
         handleData
       );
-      window.clearTimeout(refreshTimerId.current);
     };
   }, []);
 
@@ -161,86 +154,78 @@ export const AssetsFilter = (props: AssetsFilterProps) => {
     props.onApply
   ]);
 
+  useEffect(() => {
+    if (isOpen && !previousIsOpen) {
+      getData(
+        selectedServices,
+        [...selectedEndpoints, ...selectedConsumers, ...selectedInternals],
+        selectedInsights
+      );
+    }
+  }, [isOpen, previousIsOpen]);
+
   useEffect(() => {
     if (props.data) {
       setData({ data: props.data });
     }
   }, [props.data]);
 
   useEffect(() => {
-    if (previousData !== data) {
-      if (!isNull(data?.data)) {
-        const servicesToSelect =
-          data?.data?.categories
-            .find((x) => x.categoryName === "Services")
-            ?.entries?.filter((x) => x.selected)
-            .map((x) => x.name) || [];
-        setSelectedServices(servicesToSelect);
-
-        const operationsCategory = data?.data?.categories.find(
-          (x) => x.categoryName === "Operations"
-        );
-
-        const endpointsToSelect =
-          operationsCategory?.categories
-            ?.find((x) => x.categoryName === "Endpoints")
-            ?.entries?.filter((x) => x.selected)
-            .map((x) => x.name) || [];
-        setSelectedEndpoints(endpointsToSelect);
-
-        const consumersToSelect =
-          operationsCategory?.categories
-            ?.find((x) => x.categoryName === "Consumers")
-            ?.entries?.filter((x) => x.selected)
-            .map((x) => x.name) || [];
-        setSelectedConsumers(consumersToSelect);
-
-        const internalsToSelect =
-          operationsCategory?.categories
-            ?.find((x) => x.categoryName === "Internal")
-            ?.entries?.filter((x) => x.selected)
-            .map((x) => x.name) || [];
-        setSelectedInternals(internalsToSelect);
-
-        const insightsToSelect = (data?.data?.categories
-          .find((x) => x.categoryName === "Insights")
-          ?.entries?.filter((x) => x.selected)
-          .map((x) => x.name) || []) as InsightType[];
-        setSelectedInsights(insightsToSelect);
-
-        if (!props.filters) {
-          const filtersQuery = {
-            services: servicesToSelect,
-            operations: [
-              ...endpointsToSelect,
-              ...consumersToSelect,
-              ...internalsToSelect
-            ],
-            insights: insightsToSelect
-          };
-
-          setPersistedFilters(filtersQuery);
-          props.onApply(filtersQuery);
-        }
+    if (previousData === data || isNull(data?.data)) {
+      return;
+    }
 
-        window.clearTimeout(refreshTimerId.current);
-        refreshTimerId.current = window.setTimeout(() => {
-          getData(
-            servicesToSelect,
-            [...endpointsToSelect, ...consumersToSelect, ...internalsToSelect],
-            insightsToSelect
-          );
-        }, REFRESH_INTERVAL);
-      } else {
-        window.clearTimeout(refreshTimerId.current);
-        refreshTimerId.current = window.setTimeout(() => {
-          getData(
-            selectedServices,
-            [...selectedEndpoints, ...selectedConsumers, ...selectedInternals],
-            selectedInsights
-          );
-        }, REFRESH_INTERVAL);
-      }
+    const servicesToSelect =
+      data?.data?.categories
+        .find((x) => x.categoryName === "Services")
+        ?.entries?.filter((x) => x.selected)
+        .map((x) => x.name) || [];
+    setSelectedServices(servicesToSelect);
+
+    const operationsCategory = data?.data?.categories.find(
+      (x) => x.categoryName === "Operations"
+    );
+
+    const endpointsToSelect =
+      operationsCategory?.categories
+        ?.find((x) => x.categoryName === "Endpoints")
+        ?.entries?.filter((x) => x.selected)
+        .map((x) => x.name) || [];
+    setSelectedEndpoints(endpointsToSelect);
+
+    const consumersToSelect =
+      operationsCategory?.categories
+        ?.find((x) => x.categoryName === "Consumers")
+        ?.entries?.filter((x) => x.selected)
+        .map((x) => x.name) || [];
+    setSelectedConsumers(consumersToSelect);
+
+    const internalsToSelect =
+      operationsCategory?.categories
+        ?.find((x) => x.categoryName === "Internal")
+        ?.entries?.filter((x) => x.selected)
+        .map((x) => x.name) || [];
+    setSelectedInternals(internalsToSelect);
+
+    const insightsToSelect = (data?.data?.categories
+      .find((x) => x.categoryName === "Insights")
+      ?.entries?.filter((x) => x.selected)
+      .map((x) => x.name) || []) as InsightType[];
+    setSelectedInsights(insightsToSelect);
+
+    if (!props.filters) {
+      const filtersQuery = {
+        services: servicesToSelect,
+        operations: [
+          ...endpointsToSelect,
+          ...consumersToSelect,
+          ...internalsToSelect
+        ],
+        insights: insightsToSelect
+      };
+
+      setPersistedFilters(filtersQuery);
+      props.onApply(filtersQuery);
     }
   }, [
     previousData,

src/components/Insights/SpanBottleneckInsight/index.tsx

@@ -55,12 +55,15 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => {
                         </s.SpanName>
                       </Tooltip>
                       <Description>
-                        {`Slowing ${roundTo(
-                          span.probabilityOfBeingBottleneck * 100,
-                          2
-                        )}% of the requests (~${getDurationString(
-                          span.avgDurationWhenBeingBottleneck
-                        )})`}
+                        <Criticality value={span.criticality} />
+                        <span>
+                          {`Slowing ${roundTo(
+                            span.probabilityOfBeingBottleneck * 100,
+                            2
+                          )}% of the requests (~${getDurationString(
+                            span.avgDurationWhenBeingBottleneck
+                          )})`}
+                        </span>
                       </Description>
                     </s.SpanDetails>
                     <s.ButtonsContainer>
@@ -76,7 +79,6 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => {
                 );
               })}
             </s.SpanList>
-            <Criticality value={props.insight.criticality} />
           </s.Container>
         </>
       }

src/components/Insights/styles.ts

@@ -34,7 +34,9 @@ export const StartupText = styled.span`
   text-align: center;
 `;
 
-export const Description = styled.span`
+export const Description = styled.div`
+  display: flex;
+  gap: 8px;
   font-size: 14px;
   color: ${({ theme }) => {
     switch (theme.mode) {

src/components/Insights/tickets/common/index.ts

@@ -1,4 +1,5 @@
 export { useCodeLocations } from "./useCodeLocations";
 export { useCommitInfos } from "./useCommitInfos";
 export { useEndpointDataSource } from "./useEndpointDataSource";
+export { useLoading } from "./useLoading";
 export { useSpanDataSource } from "./useSpanDataSource";

src/components/Insights/tickets/common/useCodeLocations.ts

@@ -3,9 +3,10 @@ import { dispatcher } from "../../../../dispatcher";
 import { SpanInfo } from "../../../../types";
 import { actions } from "../../actions";
 import { CodeLocationsData } from "../types";
+import { useLoading } from "./useLoading";
 
 export const useCodeLocations = (spanInfo: SpanInfo | null) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useLoading(false);
   const [codeLocations, setCodeLocations] = useState<string[]>([]);
 
   useEffect(() => {

src/components/Insights/tickets/common/useCommitInfos.ts

@@ -4,11 +4,12 @@ import { actions } from "../../actions";
 import { GenericCodeObjectInsight } from "../../types";
 import { getInsightCommits } from "../getInsightCommits";
 import { CommitInfosData } from "../types";
+import { useLoading } from "./useLoading";
 
 export const useCommitInfos = <TInsight extends GenericCodeObjectInsight>(
   insight: TInsight | null
 ) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useLoading(false);
   const [commitInfos, setCommitInfos] = useState<CommitInfosData | null>(null);
 
   useEffect(() => {

src/components/Insights/tickets/common/useEndpointDataSource.ts

@@ -3,6 +3,7 @@ import { dispatcher } from "../../../../dispatcher";
 import { InsightType, SpanInfo } from "../../../../types";
 import { actions } from "../../actions";
 import { GenericCodeObjectInsight } from "../../types";
+import { useLoading } from "./useLoading";
 import { useSpanDataSource } from "./useSpanDataSource";
 
 export const useEndpointDataSource = <
@@ -11,7 +12,7 @@ export const useEndpointDataSource = <
   spanInfo: SpanInfo | null,
   insightType: InsightType
 ) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useLoading(true);
   const [spanInsight, setSpanInsight] = useState<TInsight | null>(null);
 
   const {
@@ -48,6 +49,7 @@ export const useEndpointDataSource = <
   useEffect(() => {
     const spanCodeObjectId = spanInfo?.spanCodeObjectId;
     setIsLoading(true);
+
     window.sendMessageToDigma({
       action: actions.GET_SPAN_INSIGHT,
       payload: {

src/components/Insights/tickets/common/useLoading.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export const useLoading = (
+  defaultValue: boolean,
+  cancelTimeoutMs = 30 * 1000
+): [boolean, (va: boolean) => void] => {
+  const [isLoading, setIsLoading] = useState(defaultValue);
+
+  useEffect(() => {
+    if (!defaultValue) {
+      return;
+    }
+
+    const timerId = setTimeout(() => setIsLoading(false), cancelTimeoutMs);
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, []);
+
+  return [isLoading, setIsLoading];
+};

src/components/Insights/tickets/common/useSpanDataSource.ts

@@ -1,15 +1,17 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { SpanInfo } from "../../../../types";
 import { GenericCodeObjectInsight } from "../../types";
 import { getInsightCommits } from "../getInsightCommits";
 import { useCodeLocations } from "./useCodeLocations";
 import { useCommitInfos } from "./useCommitInfos";
+import { useLoading } from "./useLoading";
 
 export const useSpanDataSource = <TInsight extends GenericCodeObjectInsight>(
   spanInfo: SpanInfo | null,
   insight: TInsight | null
 ) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useLoading(true);
+
   const { commitInfos, isLoading: isCommitInfoLoading } =
     useCommitInfos(insight);
   const { codeLocations, isLoading: isCodeLocationsLoading } =

src/components/common/JiraTicket/index.tsx

@@ -98,6 +98,10 @@ export const JiraTicket = (props: JiraTicketProps) => {
     }
   };
 
+  const errorMessage = props.description.isLoading
+    ? ""
+    : props.description.errorMessage;
+
   return (
     <s.Container>
       <s.Header>
@@ -141,7 +145,7 @@ export const JiraTicket = (props: JiraTicketProps) => {
             )}
           </div>
         }
-        errorMessage={props.description.errorMessage}
+        errorMessage={errorMessage}
         button={
           <IconButton
             icon={CopyIcon}