Skip to content

Commit 2bdbe6c

Browse files
kshmidt-digmakshmidt-digma
authored
Merge pull request #1377 from digma-ai/feature/errors-tab
Add Errors tab to the Web
1 parent 425fe94 commit 2bdbe6c

File tree

49 files changed

+506
-219
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+506
-219
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Admin/NavSidebar/NavMenu/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useMemo } from "react";
22
import { getFeatureFlagValue } from "../../../../featureFlags";
33
import { useGetAboutQuery } from "../../../../redux/services/digma";
4-
import { useConfigSelector } from "../../../../store/config/useConfigSelector";
54
import { FeatureFlag } from "../../../../types";
65
import { GlobeIcon } from "../../../common/icons/16px/GlobeIcon";
76
import { HomeIcon } from "../../../common/icons/16px/HomeIcon";
@@ -11,7 +10,6 @@ import type { NavigationItem } from "./NavMenuItem/types";
1110
import * as s from "./styles";
1211

1312
export const NavMenu = () => {
14-
const { isSandboxModeEnabled } = useConfigSelector();
1513
const { data: about } = useGetAboutQuery();
1614

1715
const isTroubleshootingEnabled = getFeatureFlagValue(
@@ -27,7 +25,7 @@ export const NavMenu = () => {
2725
route: "/home",
2826
icon: <HomeIcon size={16} color={"currentColor"} />
2927
},
30-
...(isSandboxModeEnabled
28+
...(window.isSandboxModeEnabled === true
3129
? []
3230
: [
3331
{
@@ -67,7 +65,7 @@ export const NavMenu = () => {
6765
]
6866
: [])
6967
],
70-
[isSandboxModeEnabled, isTroubleshootingEnabled]
68+
[isTroubleshootingEnabled]
7169
);
7270

7371
return (

‎src/components/Admin/NavSidebar/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useEffect } from "react";
33
import { useTheme } from "styled-components";
44
import { useAdminDispatch } from "../../../containers/Admin/hooks";
55
import { useLogoutMutation } from "../../../redux/services/auth";
6-
import { useConfigSelector } from "../../../store/config/useConfigSelector";
76
import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
87
import { getThemeKind } from "../../common/App/styles";
98
import { LogoutIcon } from "../../common/icons/16px/LogoutIcon";
@@ -17,7 +16,6 @@ export const NavSidebar = () => {
1716
const themeKind = getThemeKind(theme);
1817
const [logout, result] = useLogoutMutation();
1918
const dispatch = useAdminDispatch();
20-
const { isSandboxModeEnabled } = useConfigSelector();
2119
const posthog = usePostHog();
2220

2321
const handleLogoLinkClick = () => {
@@ -58,7 +56,7 @@ export const NavSidebar = () => {
5856
</s.LogoLink>
5957
<NavMenu />
6058
<s.Footer>
61-
{isSandboxModeEnabled && <TrialPromotionCard />}
59+
{window.isSandboxModeEnabled === true && <TrialPromotionCard />}
6260
<s.LogoutButton onClick={handleLogoutButtonClick}>
6361
<LogoutIcon size={16} color={"currentColor"} />
6462
Log out

‎src/components/Admin/Troubleshooting/RejectedTraces/index.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import {
1111
type BlockedTrace,
1212
type GetBlockedTracesResponse
1313
} from "../../../../redux/services/types";
14-
import { isString } from "../../../../typeGuards/isString";
15-
import { openURLInDefaultBrowser } from "../../../../utils/actions/openURLInDefaultBrowser";
14+
import { openJaegerTraceInDefaultBrowser } from "../../../../utils/actions/openJaegerTraceInDefaultBrowser";
1615
import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
1716
import { getDurationString } from "../../../../utils/getDurationString";
1817
import { TraceIcon } from "../../../common/icons/16px/TraceIcon";
@@ -139,14 +138,7 @@ export const RejectedTraces = () => {
139138
const value = info.getValue();
140139

141140
const handleTraceButtonClick = () => {
142-
if (isString(window.jaegerURL) && window.jaegerURL.length > 0) {
143-
let url = `${window.jaegerURL}/trace/${value.traceId}`;
144-
145-
if (value.asset.span) {
146-
url = url.concat(`?uiFind=${value.asset.span}`);
147-
}
148-
openURLInDefaultBrowser(url);
149-
}
141+
openJaegerTraceInDefaultBrowser(value.traceId, value.asset.span);
150142
};
151143

152144
return (

‎src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Errors/index.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useGetAboutQuery } from "../../../../../../redux/services/digma";
2+
import * as s from "./styles";
3+
import type { ErrorsProps } from "./types";
4+
5+
export const Errors = ({
6+
query,
7+
onGoToAssets,
8+
onScopeChange,
9+
selectedErrorId,
10+
onSelectedErrorIdChange
11+
}: ErrorsProps) => {
12+
const { data: about } = useGetAboutQuery();
13+
14+
const handleGoToErrors = () => {
15+
onSelectedErrorIdChange(undefined);
16+
};
17+
18+
const handleErrorSelect = (errorId: string) => {
19+
onSelectedErrorIdChange(errorId);
20+
};
21+
22+
return (
23+
<s.Content
24+
onGoToAssets={onGoToAssets}
25+
onGoToErrors={handleGoToErrors}
26+
onErrorSelect={handleErrorSelect}
27+
spanCodeObjectId={query?.scopedSpanCodeObjectId}
28+
environmentId={query?.environment}
29+
errorId={selectedErrorId}
30+
backendInfo={about}
31+
selectedServices={query?.services ?? undefined}
32+
onScopeChange={onScopeChange}
33+
/>
34+
);
35+
};

‎src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Errors/styles.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import styled from "styled-components";
2+
import { ErrorsContent } from "../../../../../Errors/ErrorsContent";
3+
4+
export const Content = styled(ErrorsContent)`
5+
width: 100%;
6+
`;

‎src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Errors/types.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { GetIssuesPayload } from "../../../../../../redux/services/types";
2+
import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
3+
4+
export interface ErrorsProps {
5+
query?: GetIssuesPayload;
6+
onScopeChange: (payload: ChangeScopePayload) => void;
7+
onGoToAssets: () => void;
8+
selectedErrorId?: string;
9+
onSelectedErrorIdChange: (errorId?: string) => void;
10+
}

‎src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Header/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,13 @@ export const Header = ({
109109
/>
110110
</s.ToolbarRow>
111111
{!isAtHome && isSpanInfoEnabled && spanInfo && isSpanInfoVisible && (
112-
<SpanInfo
113-
data={spanInfo}
114-
onCollapse={handleSpanInfoCollapse}
115-
spanCodeObjectId={spanCodeObjectId}
116-
/>
112+
<s.ToolbarRow>
113+
<SpanInfo
114+
data={spanInfo}
115+
onCollapse={handleSpanInfoCollapse}
116+
spanCodeObjectId={spanCodeObjectId}
117+
/>
118+
</s.ToolbarRow>
117119
)}
118120
<s.TabsContainer>
119121
<Tabs

‎src/components/Admin/common/RepositorySidebarOverlay/index.tsx‎

Lines changed: 62 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useMemo, useState } from "react";
1+
import { useCallback, useEffect, useMemo, useState } from "react";
22
import {
33
useAdminDispatch,
44
useAdminSelector
@@ -16,9 +16,12 @@ import type {
1616
GetIssuesPayload
1717
} from "../../../../redux/services/types";
1818
import {
19+
clear,
1920
setIssuesInsightIdToOpenSuggestion,
2021
setIssuesInsightInfoToOpenTicket
2122
} from "../../../../redux/slices/repositorySlice";
23+
import { useStore } from "../../../../store/useStore";
24+
import { isString } from "../../../../typeGuards/isString";
2225
import { ScopeChangeEvent } from "../../../../types";
2326
import type { ChangeScopePayload } from "../../../../utils/actions/changeScope";
2427
import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
@@ -29,6 +32,7 @@ import { trackingEvents } from "../../tracking";
2932
import { SidebarOverlay } from "../SidebarOverlay";
3033
import { Analytics } from "./RepositorySidebar/Analytics";
3134
import { Assets } from "./RepositorySidebar/Assets";
35+
import { Errors } from "./RepositorySidebar/Errors";
3236
import { Header } from "./RepositorySidebar/Header";
3337
import { Issues } from "./RepositorySidebar/Issues";
3438
import * as s from "./styles";
@@ -42,16 +46,19 @@ const SIDEBAR_CLASSNAME = "issues-sidebar"; // For Product Fruits selector
4246
const TRACKING_PREFIX = "repository";
4347
const prefixedTrackingEvents = addPrefix(TRACKING_PREFIX, trackingEvents, " ");
4448

49+
const initialTabLocation: TabLocation = {
50+
id: TAB_IDS.ISSUES
51+
};
52+
4553
export const RepositorySidebarOverlay = ({
4654
isSidebarOpen,
4755
onSidebarClose,
4856
sidebarQuery,
4957
scopeDisplayName
5058
}: RepositorySidebarOverlayProps) => {
5159
const [isSidebarTransitioning, setIsSidebarTransitioning] = useState(false);
52-
const [currentTabLocation, setCurrentTabLocation] = useState<TabLocation>({
53-
id: TAB_IDS.ISSUES
54-
});
60+
const [currentTabLocation, setCurrentTabLocation] =
61+
useState<TabLocation>(initialTabLocation);
5562
const [currentSpanCodeObjectId, setCurrentSpanCodeObjectId] = useState(
5663
sidebarQuery?.query?.scopedSpanCodeObjectId
5764
);
@@ -61,6 +68,7 @@ export const RepositorySidebarOverlay = ({
6168
const insightIdToOpenSuggestion = useAdminSelector(
6269
(state) => state.repositorySlice.issues.insightIdToOpenSuggestion
6370
);
71+
const { resetInsights, resetAssets, resetGlobalErrors } = useStore.getState();
6472
const dispatch = useAdminDispatch();
6573
const [history] = useState(
6674
() =>
@@ -159,6 +167,24 @@ export const RepositorySidebarOverlay = ({
159167
);
160168
}, [history, sidebarQuery?.query?.scopedSpanCodeObjectId]);
161169

170+
const handleSidebarClose = useCallback(() => {
171+
dispatch(clear());
172+
resetInsights();
173+
resetAssets();
174+
resetGlobalErrors();
175+
history.clear();
176+
setCurrentTabLocation(initialTabLocation);
177+
setCurrentSpanCodeObjectId(undefined);
178+
onSidebarClose();
179+
}, [
180+
dispatch,
181+
onSidebarClose,
182+
resetAssets,
183+
resetGlobalErrors,
184+
resetInsights,
185+
history
186+
]);
187+
162188
useEffect(() => {
163189
const handleKeyDown = (e: KeyboardEvent) => {
164190
if (e.key === "Escape") {
@@ -170,7 +196,7 @@ export const RepositorySidebarOverlay = ({
170196
} else if (insightIdToOpenSuggestion) {
171197
dispatch(setIssuesInsightIdToOpenSuggestion(null));
172198
} else {
173-
onSidebarClose();
199+
handleSidebarClose();
174200
}
175201
}
176202
};
@@ -183,7 +209,7 @@ export const RepositorySidebarOverlay = ({
183209
}, [
184210
insightInfoToOpenTicket,
185211
insightIdToOpenSuggestion,
186-
onSidebarClose,
212+
handleSidebarClose,
187213
dispatch
188214
]);
189215

@@ -253,6 +279,19 @@ export const RepositorySidebarOverlay = ({
253279
case ScopeChangeEvent.AssetsEmptyCategoryParentLinkClicked:
254280
updateHistory({ payload, tabLocation: { id: TAB_IDS.ANALYTICS } });
255281
break;
282+
case ScopeChangeEvent.ErrorCardLinkClicked: {
283+
const errorId = payload.context.payload?.id;
284+
285+
if (!isString(errorId)) {
286+
break;
287+
}
288+
289+
updateHistory({
290+
payload,
291+
tabLocation: { id: TAB_IDS.ERRORS, path: errorId }
292+
});
293+
break;
294+
}
256295
case ScopeChangeEvent.InsightsInsightCardTitleAssetLinkClicked:
257296
case ScopeChangeEvent.InsightsInsightCardAssetLinkClicked:
258297
default: {
@@ -294,6 +333,12 @@ export const RepositorySidebarOverlay = ({
294333
handleSelectedAssetTypeIdChange(undefined);
295334
};
296335

336+
const handleSelectedErrorIdChange = (errorId?: string) => {
337+
updateHistory({
338+
tabLocation: { id: TAB_IDS.ERRORS, path: errorId }
339+
});
340+
};
341+
297342
const currentQuery: GetIssuesPayload = {
298343
...sidebarQuery?.query,
299344
scopedSpanCodeObjectId: currentSpanCodeObjectId
@@ -319,6 +364,16 @@ export const RepositorySidebarOverlay = ({
319364
onGoToAssets={handleGoToAssets}
320365
/>
321366
);
367+
case TAB_IDS.ERRORS:
368+
return (
369+
<Errors
370+
query={currentQuery}
371+
onScopeChange={handleScopeChange}
372+
onSelectedErrorIdChange={handleSelectedErrorIdChange}
373+
onGoToAssets={handleGoToAssets}
374+
selectedErrorId={currentTabLocation.path}
375+
/>
376+
);
322377
case TAB_IDS.ISSUES:
323378
default:
324379
return (
@@ -356,7 +411,7 @@ export const RepositorySidebarOverlay = ({
356411
return (
357412
<SidebarOverlay
358413
isSidebarOpen={isSidebarOpen}
359-
onSidebarClose={onSidebarClose}
414+
onSidebarClose={handleSidebarClose}
360415
onSidebarTransitionStart={handleSidebarTransitionStart}
361416
onSidebarTransitionEnd={handleSidebarTransitionEnd}
362417
sidebar={sidebarProps}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { getFeatureFlagValue } from "../../../../featureFlags";
22
import { useNow } from "../../../../hooks/useNow";
33
import { AssetsSortingCriterion } from "../../../../redux/services/types";
4-
import { useConfigSelector } from "../../../../store/config/useConfigSelector";
54
import { isNumber } from "../../../../typeGuards/isNumber";
65
import { isString } from "../../../../typeGuards/isString";
76
import { FeatureFlag, InsightType } from "../../../../types";
@@ -23,9 +22,9 @@ export const AssetEntry = ({
2322
onAssetLinkClick,
2423
entry,
2524
isImpactHidden,
26-
sortingCriterion
25+
sortingCriterion,
26+
backendInfo
2727
}: AssetEntryProps) => {
28-
const { backendInfo } = useConfigSelector();
2928
const now = useNow();
3029
const isNewImpactScoreCalculationEnabled = getFeatureFlagValue(
3130
backendInfo,

0 commit comments

Comments
 (0)