Support links to Span/Error in Web Admin

kshmidt-digma · kshmidt-digma · commit c41e0f566232 · 2025-07-08T08:55:56.000+02:00
diff --git a/src/components/Admin/ErrorLinkResolver/index.tsx b/src/components/Admin/ErrorLinkResolver/index.tsx
@@ -0,0 +1,52 @@
+import { Navigate, useParams } from "react-router";
+import { useGetErrorEnvironmentQuery } from "../../../redux/services/digma";
+import { Spinner } from "../../common/v3/Spinner";
+import { TAB_IDS } from "../../Navigation/Tabs/types";
+import type { TabLocation } from "../common/RepositorySidebarOverlay/types";
+import * as s from "./styles";
+
+const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
+
+export const ErrorLinkResolver = () => {
+  const params = useParams();
+
+  const { data } = useGetErrorEnvironmentQuery(
+    {
+      id: params.id ?? ""
+    },
+    {
+      skip: !params.id,
+      pollingInterval: REFRESH_INTERVAL
+    }
+  );
+
+  if (!data) {
+    return (
+      <s.Container>
+        <s.LoadingContainer>
+          <Spinner size={50} />
+        </s.LoadingContainer>
+      </s.Container>
+    );
+  }
+
+  const sidebarLocation: TabLocation = {
+    id: TAB_IDS.ERRORS,
+    path: params.id
+  };
+
+  if (data) {
+    return (
+      <Navigate
+        replace={true}
+        to={{
+          pathname: "/home",
+          search: new URLSearchParams({
+            environment: data.environmentId,
+            "sidebar-view": JSON.stringify(sidebarLocation)
+          }).toString()
+        }}
+      />
+    );
+  }
+};
diff --git a/src/components/Admin/ErrorLinkResolver/styles.ts b/src/components/Admin/ErrorLinkResolver/styles.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`;
diff --git a/src/components/Admin/Header/index.tsx b/src/components/Admin/Header/index.tsx
@@ -16,6 +16,16 @@ export const Header = () => (
           </HeaderContent>
         }
       />
+      <Route path={"navigate"}>
+        <Route
+          path={"*"}
+          element={
+            <HeaderContent>
+              <Greeting />
+            </HeaderContent>
+          }
+        />
+      </Route>
       <Route path={"reports"}>
         <Route
           path={"*"}
diff --git a/src/components/Admin/Home/index.tsx b/src/components/Admin/Home/index.tsx
@@ -5,18 +5,37 @@ import {
 } from "../../../containers/Admin/hooks";
 import { useMount } from "../../../hooks/useMount";
 import { useStableSearchParams } from "../../../hooks/useStableSearchParams";
+import { useGetSpanByIdQuery } from "../../../redux/services/digma";
 import { InsightsSortingCriterion } from "../../../redux/services/types";
 import {
   setSelectedEnvironmentId,
   setSelectedServices
 } from "../../../redux/slices/issuesReportSlice";
 import { RepositorySidebarOverlay } from "../common/RepositorySidebarOverlay";
-import type { RepositorySidebarQuery } from "../common/RepositorySidebarOverlay/types";
+import type {
+  RepositorySidebarQuery,
+  TabLocation
+} from "../common/RepositorySidebarOverlay/types";
 import { Environments } from "./Environments";
 import { Overview } from "./Overview";
 import { Reports } from "./Reports";
 import * as s from "./styles";
 
+const getRepositorySidebarLocation = (
+  locationParam: string | null
+): TabLocation | undefined => {
+  if (!locationParam) {
+    return undefined;
+  }
+
+  try {
+    const parsedLocation = JSON.parse(locationParam) as TabLocation;
+    return parsedLocation;
+  } catch {
+    return undefined;
+  }
+};
+
 export const Home = () => {
   const environmentId = useAdminSelector(
     (state) => state.codeIssuesReport.selectedEnvironmentId
@@ -29,11 +48,26 @@ export const Home = () => {
   const [searchParams, setSearchParams] = useStableSearchParams();
   const environmentParam = searchParams.get("environment");
   const issuesParam = searchParams.get("issues");
+  const [sidebarScope, setSidebarScope] = useState(
+    searchParams.get("sidebar-scope") ?? undefined
+  );
+  const [sidebarLocation, setSidebarLocation] = useState(
+    getRepositorySidebarLocation(searchParams.get("sidebar-view"))
+  );
   const servicesParam = useMemo(
     () => searchParams.getAll("services"),
     [searchParams]
   );
 
+  const { data: spanInfo } = useGetSpanByIdQuery(
+    {
+      id: sidebarScope ?? ""
+    },
+    {
+      skip: !sidebarScope
+    }
+  );
+
   const queries: Record<string, RepositorySidebarQuery> = useMemo(
     () => ({
       "top-criticality": {
@@ -64,6 +98,8 @@ export const Home = () => {
 
   const handleRepositorySidebarClose = () => {
     setIssuesQuery(undefined);
+    setSidebarScope(undefined);
+    setSidebarLocation(undefined);
   };
 
   // TODO: replace with useEffect
@@ -112,7 +148,48 @@ export const Home = () => {
     });
   }, [setSearchParams, issuesQuery]);
 
-  const repositorySidebarQuery = issuesQuery ? queries[issuesQuery] : undefined;
+  useEffect(() => {
+    setSearchParams((params) => {
+      if (sidebarScope) {
+        params.set("sidebar-scope", sidebarScope);
+      } else {
+        params.delete("sidebar-scope");
+      }
+      return params;
+    });
+  }, [setSearchParams, sidebarScope]);
+
+  useEffect(() => {
+    setSearchParams((params) => {
+      if (sidebarLocation) {
+        params.set("sidebar-view", JSON.stringify(sidebarLocation));
+      } else {
+        params.delete("sidebar-view");
+      }
+      return params;
+    });
+  }, [setSearchParams, sidebarLocation]);
+
+  const repositorySidebarQuery: RepositorySidebarQuery | undefined =
+    sidebarScope && spanInfo
+      ? {
+          query: {
+            environment: environmentId ?? undefined,
+            scopedSpanCodeObjectId: spanInfo?.spanCodeObjectId
+          }
+        }
+      : sidebarLocation
+      ? {
+          query: {
+            environment: environmentId ?? undefined
+          }
+        }
+      : issuesQuery
+      ? queries[issuesQuery]
+      : undefined;
+  const isRepositorySidebarOpen = Boolean(
+    repositorySidebarQuery ?? sidebarLocation
+  );
 
   return (
     <s.Container>
@@ -124,7 +201,8 @@ export const Home = () => {
       <Environments />
       <RepositorySidebarOverlay
         sidebarQuery={repositorySidebarQuery}
-        isSidebarOpen={Boolean(repositorySidebarQuery)}
+        sidebarLocation={sidebarLocation}
+        isSidebarOpen={isRepositorySidebarOpen}
         onSidebarClose={handleRepositorySidebarClose}
       />
     </s.Container>
diff --git a/src/components/Admin/SpanLinkResolver/index.tsx b/src/components/Admin/SpanLinkResolver/index.tsx
@@ -0,0 +1,52 @@
+import { Navigate, useParams } from "react-router";
+import { useGetSpanByIdQuery } from "../../../redux/services/digma";
+import { Spinner } from "../../common/v3/Spinner";
+import { TAB_IDS } from "../../Navigation/Tabs/types";
+import type { TabLocation } from "../common/RepositorySidebarOverlay/types";
+import * as s from "./styles";
+
+const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
+
+export const SpanLinkResolver = () => {
+  const params = useParams();
+
+  const { data } = useGetSpanByIdQuery(
+    {
+      id: params.id ?? ""
+    },
+    {
+      skip: !params.id,
+      pollingInterval: REFRESH_INTERVAL
+    }
+  );
+
+  if (!data) {
+    return (
+      <s.Container>
+        <s.LoadingContainer>
+          <Spinner size={50} />
+        </s.LoadingContainer>
+      </s.Container>
+    );
+  }
+
+  const sidebarLocation: TabLocation = {
+    id: TAB_IDS.ISSUES
+  };
+
+  if (data) {
+    return (
+      <Navigate
+        replace={true}
+        to={{
+          pathname: "/home",
+          search: new URLSearchParams({
+            environment: data.environmentId,
+            "sidebar-scope": params.id ?? "",
+            "sidebar-view": JSON.stringify(sidebarLocation)
+          }).toString()
+        }}
+      />
+    );
+  }
+};
diff --git a/src/components/Admin/SpanLinkResolver/styles.ts b/src/components/Admin/SpanLinkResolver/styles.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`;
diff --git a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx
@@ -10,6 +10,7 @@ import {
   setIssuesInsightInfoToOpenTicket,
   setScope
 } from "../../../../../../redux/slices/repositorySlice";
+import { initialState } from "../../../../../../store/insights/insightsSlice";
 import { useStore } from "../../../../../../store/useStore";
 import { useInsightsData } from "../../../../../Insights/hooks/useInsightsData";
 import { InsightsContent } from "../../../../../Insights/InsightsContent";
@@ -24,7 +25,7 @@ export const Issues = ({
   onScopeChange,
   onGoToTab
 }: IssuesProps) => {
-  const { setInsightViewType } = useStore.getState();
+  const { setInsightViewType, setInsightsSorting } = useStore.getState();
   const [isDrawerTransitioning, setIsDrawerTransitioning] = useState(false);
   const drawerRef = useRef<HTMLDivElement>(null);
   const dispatch = useAdminDispatch();
@@ -110,6 +111,14 @@ export const Issues = ({
     );
   }, [query, dispatch]);
 
+  // Set sorting on query change
+  useEffect(() => {
+    setInsightsSorting({
+      criterion: query?.sortBy ?? initialState.sorting.criterion,
+      order: query?.sortOrder ?? initialState.sorting.order
+    });
+  }, [query?.sortBy, query?.sortOrder, setInsightsSorting]);
+
   return (
     <s.Container>
       <InsightsContent
diff --git a/src/components/Admin/common/RepositorySidebarOverlay/index.tsx b/src/components/Admin/common/RepositorySidebarOverlay/index.tsx
@@ -55,11 +55,13 @@ export const RepositorySidebarOverlay = ({
   isSidebarOpen,
   onSidebarClose,
   sidebarQuery,
-  scopeDisplayName
+  scopeDisplayName,
+  sidebarLocation
 }: RepositorySidebarOverlayProps) => {
   const [isSidebarTransitioning, setIsSidebarTransitioning] = useState(false);
-  const [currentTabLocation, setCurrentTabLocation] =
-    useState<TabLocation>(initialTabLocation);
+  const [currentTabLocation, setCurrentTabLocation] = useState<TabLocation>(
+    sidebarLocation ?? initialTabLocation
+  );
   const [currentSpanCodeObjectId, setCurrentSpanCodeObjectId] = useState(
     sidebarQuery?.query?.scopedSpanCodeObjectId
   );
diff --git a/src/components/Admin/common/RepositorySidebarOverlay/types.ts b/src/components/Admin/common/RepositorySidebarOverlay/types.ts
@@ -8,6 +8,7 @@ export interface RepositorySidebarOverlayProps {
   isSidebarOpen: boolean;
   onSidebarClose: () => void;
   sidebarQuery?: RepositorySidebarQuery;
+  sidebarLocation?: TabLocation;
   scopeDisplayName?: string;
 }
 
diff --git a/src/components/Agentic/IncidentDetails/AdditionalInfo/RelatedIssues/index.tsx b/src/components/Agentic/IncidentDetails/AdditionalInfo/RelatedIssues/index.tsx
@@ -5,9 +5,9 @@ import { useStableSearchParams } from "../../../../../hooks/useStableSearchParam
 import { useGetIncidentQuery } from "../../../../../redux/services/digma";
 import type { GenericIncidentIssue } from "../../../../../redux/services/types";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
-import { getIdeLauncherLinkForError } from "../../../../../utils/getIdeLauncherLinkForError";
-import { getIdeLauncherLinkForSpan } from "../../../../../utils/getIdeLauncherLinkForSpan";
 import { getInsightTypeInfo } from "../../../../../utils/getInsightTypeInfo";
+import { getWebAdminLinkForSpan } from "../../../../../utils/getWebAdminLinkForSpan";
+import { getWebAdminLinkForError } from "../../../../../utils/getWebAdminLinkToError";
 import { roundTo } from "../../../../../utils/roundTo";
 import type { TagType } from "../../../../common/v3/Tag/types";
 import { Tooltip } from "../../../../common/v3/Tooltip";
@@ -97,7 +97,7 @@ export const RelatedIssues = () => {
                   {issue.span_uid ? (
                     <s.Link
                       onClick={handleIssueLinkClick}
-                      href={getIdeLauncherLinkForSpan(issue.span_uid)}
+                      href={getWebAdminLinkForSpan(issue.span_uid)}
                       target={"_blank"}
                       rel={"noopener noreferrer"}
                     >
@@ -118,7 +118,7 @@ export const RelatedIssues = () => {
                 <Tooltip title={label}>
                   <s.Link
                     onClick={handleIssueLinkClick}
-                    href={getIdeLauncherLinkForError(issue.issue_id)}
+                    href={getWebAdminLinkForError(issue.issue_id)}
                     target={"_blank"}
                     rel={"noopener noreferrer"}
                   >
diff --git a/src/components/Agentic/Incidents/styles.ts b/src/components/Agentic/Incidents/styles.ts
@@ -1,13 +1,5 @@
 import styled from "styled-components";
 
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  height: 100%;
-  overflow: hidden;
-`;
-
 export const LoadingContainer = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/index.tsx
@@ -534,7 +534,7 @@ export const InsightCard = ({
       actions.push("pin");
     }
 
-    if (areInsightSuggestionsEnabled && onOpenSuggestion) {
+    if (areInsightSuggestionsEnabled && !isAgenticEnabled && onOpenSuggestion) {
       actions.push("openSuggestion");
     }
 
diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
diff --git a/src/containers/Admin/router.tsx b/src/containers/Admin/router.tsx
diff --git a/src/redux/services/digma.ts b/src/redux/services/digma.ts
diff --git a/src/redux/services/types.ts b/src/redux/services/types.ts
diff --git a/src/utils/getWebAdminLinkForSpan.ts b/src/utils/getWebAdminLinkForSpan.ts
diff --git a/src/utils/getWebAdminLinkToError.ts b/src/utils/getWebAdminLinkToError.ts

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ export interface RepositorySidebarOverlayProps {`
`8`	`8`	`isSidebarOpen: boolean;`
`9`	`9`	`onSidebarClose: () => void;`
`10`	`10`	`sidebarQuery?: RepositorySidebarQuery;`
	`11`	`+ sidebarLocation?: TabLocation;`
`11`	`12`	`scopeDisplayName?: string;`
`12`	`13`	`}`
`13`	`14`