diff --git a/.vscode/launch.json b/.vscode/launch.json index fcba74057..cc87f1f6c 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -8,14 +8,14 @@ "type": "chrome", "request": "launch", "name": "Open Admin in Chrome", - "url": "http://localhost:3000/admin/", + "url": "http://localhost:3001/admin/", "webRoot": "${workspaceFolder}" }, { "type": "chrome", "request": "launch", "name": "Open Agentic in Chrome", - "url": "http://localhost:3000/agentic/", + "url": "http://localhost:3001/agentic/", "webRoot": "${workspaceFolder}" } ] diff --git a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/index.tsx b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/index.tsx index 6aef067ec..cf374da8c 100644 --- a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/index.tsx +++ b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/index.tsx @@ -1,18 +1,11 @@ import { useEffect } from "react"; -import { useAdminDispatch } from "../../../../../../containers/Admin/hooks"; -import { setScope } from "../../../../../../redux/slices/repositorySlice"; import { useStore } from "../../../../../../store/useStore"; import { useInsightsData } from "../../../../../Insights/hooks/useInsightsData"; import * as s from "./styles"; import type { AnalyticsProps } from "./types"; -export const Analytics = ({ - query, - onScopeChange, - onGoToTab -}: AnalyticsProps) => { +export const Analytics = ({ onScopeChange, onGoToTab }: AnalyticsProps) => { const { setInsightViewType } = useStore.getState(); - const dispatch = useAdminDispatch(); const { data, isLoading, refresh } = useInsightsData(); const handleRefresh = () => { @@ -24,32 +17,6 @@ export const Analytics = ({ setInsightViewType("Analytics"); }, [setInsightViewType]); - // Set the scope on query change - useEffect(() => { - dispatch( - setScope({ - span: query?.scopedSpanCodeObjectId - ? { - spanCodeObjectId: query.scopedSpanCodeObjectId, - displayName: "", - methodId: null, - serviceName: null, - role: null - } - : null, - code: { - relatedCodeDetailsList: [], - codeDetailsList: [] - }, - hasErrors: false, - issuesInsightsCount: 0, - analyticsInsightsCount: 0, - unreadInsightsCount: 0, - environmentId: query?.environment - }) - ); - }, [query, dispatch]); - return ( void; onGoToTab: (tabId: string) => void; } diff --git a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Assets/index.tsx b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Assets/index.tsx index e8f38d938..673939e93 100644 --- a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Assets/index.tsx +++ b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Assets/index.tsx @@ -10,12 +10,12 @@ import { SortingOrder, type AssetType } from "../../../../../../redux/services/types"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import type { Sorting } from "../../../../../common/SortingSelector/types"; import * as s from "./styles"; import type { AssetsProps } from "./types"; export const Assets = ({ - query, onScopeChange, selectedAssetTypeId, onSelectedAssetTypeIdChange @@ -24,17 +24,13 @@ export const Assets = ({ criterion: AssetsSortingCriterion.CriticalInsights, order: SortingOrder.Desc }); + const { selectedServices, scope, environment } = useConfigSelector(); const dispatch = useAdminDispatch(); const { data: about } = useGetAboutQuery(); const { data: environments } = useGetEnvironmentsQuery(); - const environment = useMemo( - () => environments?.find((x) => x.id === query?.environment), - [environments, query?.environment] - ); - const isImpactHidden = useMemo( () => !(about?.isCentralize && environment?.type === "Public"), [about?.isCentralize, environment?.type] @@ -58,9 +54,9 @@ export const Assets = ({ return ( void; selectedAssetTypeId?: AssetType; onSelectedAssetTypeIdChange: (assetTypeId?: AssetType) => void; diff --git a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Errors/index.tsx b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Errors/index.tsx index 3eac37503..3c733b13f 100644 --- a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Errors/index.tsx +++ b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Errors/index.tsx @@ -1,15 +1,16 @@ import { useGetAboutQuery } from "../../../../../../redux/services/digma"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import * as s from "./styles"; import type { ErrorsProps } from "./types"; export const Errors = ({ - query, onGoToAssets, onScopeChange, selectedErrorId, onSelectedErrorIdChange }: ErrorsProps) => { const { data: about } = useGetAboutQuery(); + const { selectedServices, scope, environment } = useConfigSelector(); const handleGoToErrors = () => { onSelectedErrorIdChange(undefined); @@ -24,11 +25,11 @@ export const Errors = ({ onGoToAssets={onGoToAssets} onGoToErrors={handleGoToErrors} onErrorSelect={handleErrorSelect} - spanCodeObjectId={query?.scopedSpanCodeObjectId} - environmentId={query?.environment} + spanCodeObjectId={scope?.span?.spanCodeObjectId} + environmentId={environment?.id} errorId={selectedErrorId} backendInfo={about} - selectedServices={query?.services ?? undefined} + selectedServices={selectedServices ?? undefined} onScopeChange={onScopeChange} /> ); diff --git a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx index bb0cc7e02..ffe183030 100644 --- a/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx +++ b/src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx @@ -7,8 +7,7 @@ import { import { setIsInsightJiraTicketHintShown } from "../../../../../../redux/slices/persistSlice"; import { setIssuesInsightIdToOpenSuggestion, - setIssuesInsightInfoToOpenTicket, - setScope + setIssuesInsightInfoToOpenTicket } from "../../../../../../redux/slices/repositorySlice"; import { initialState } from "../../../../../../store/insights/insightsSlice"; import { useStore } from "../../../../../../store/useStore"; @@ -85,32 +84,6 @@ export const Issues = ({ setInsightViewType("Issues"); }, [setInsightViewType]); - // Set the scope on query change - useEffect(() => { - dispatch( - setScope({ - span: query?.scopedSpanCodeObjectId - ? { - spanCodeObjectId: query.scopedSpanCodeObjectId, - displayName: "", - methodId: null, - serviceName: null, - role: null - } - : null, - code: { - relatedCodeDetailsList: [], - codeDetailsList: [] - }, - hasErrors: false, - issuesInsightsCount: 0, - analyticsInsightsCount: 0, - unreadInsightsCount: 0, - environmentId: query?.environment - }) - ); - }, [query, dispatch]); - // Set sorting on query change useEffect(() => { setInsightsSorting({ diff --git a/src/components/Admin/common/RepositorySidebarOverlay/index.tsx b/src/components/Admin/common/RepositorySidebarOverlay/index.tsx index f2b8d329a..e22e0cffc 100644 --- a/src/components/Admin/common/RepositorySidebarOverlay/index.tsx +++ b/src/components/Admin/common/RepositorySidebarOverlay/index.tsx @@ -19,7 +19,8 @@ import type { import { clear, setIssuesInsightIdToOpenSuggestion, - setIssuesInsightInfoToOpenTicket + setIssuesInsightInfoToOpenTicket, + setScope } from "../../../../redux/slices/repositorySlice"; import { useStore } from "../../../../store/useStore"; import { isString } from "../../../../typeGuards/isString"; @@ -76,12 +77,10 @@ export const RepositorySidebarOverlay = ({ resetAssets, resetGlobalErrors, setSelectedServices, - clearInsightsFilters, - setInsightsFilteredInsightTypes, - setInsightsFilteredInsightTypesInGlobalScope, setInsightsFilteredCriticalityLevels, setInsightsFilteredCriticalityLevelsInGlobalScope, - setInsightsLastDays + setInsightsLastDays, + setGlobalErrorsLastDays } = useStore.getState(); const dispatch = useAdminDispatch(); const [history, setHistory] = useState( @@ -223,6 +222,39 @@ export const RepositorySidebarOverlay = ({ dispatch ]); + // Set the scope and environment on sidebar open + useEffect(() => { + if (isSidebarOpen) { + dispatch( + setScope({ + span: currentSpanCodeObjectId + ? { + spanCodeObjectId: currentSpanCodeObjectId, + displayName: "", + methodId: null, + serviceName: null, + role: null + } + : null, + code: { + relatedCodeDetailsList: [], + codeDetailsList: [] + }, + hasErrors: false, + issuesInsightsCount: 0, + analyticsInsightsCount: 0, + unreadInsightsCount: 0, + environmentId: sidebarQuery?.query?.environment + }) + ); + } + }, [ + isSidebarOpen, + sidebarQuery?.query?.environment, + currentSpanCodeObjectId, + dispatch + ]); + // Set selected services on sidebar open useEffect(() => { if (isSidebarOpen) { @@ -230,7 +262,7 @@ export const RepositorySidebarOverlay = ({ } }, [isSidebarOpen, sidebarQuery?.query?.services, setSelectedServices]); - // Set selected criticality levels on sidebar open + // Set insights criticality levels on sidebar open useEffect(() => { if (isSidebarOpen) { setInsightsFilteredCriticalityLevels( @@ -251,25 +283,13 @@ export const RepositorySidebarOverlay = ({ useEffect(() => { if (isSidebarOpen) { setInsightsLastDays(sidebarQuery?.query?.lastDays ?? null); - } - }, [isSidebarOpen, sidebarQuery?.query?.lastDays, setInsightsLastDays]); - - // Clear issues and analytics filters on sidebar close - useEffect(() => { - if (!isSidebarOpen) { - clearInsightsFilters(); - setInsightsFilteredInsightTypes([]); - setInsightsFilteredInsightTypesInGlobalScope([]); - setInsightsFilteredCriticalityLevels([]); - setInsightsFilteredCriticalityLevelsInGlobalScope([]); + setGlobalErrorsLastDays(sidebarQuery?.query?.lastDays ?? null); } }, [ isSidebarOpen, - clearInsightsFilters, - setInsightsFilteredInsightTypes, - setInsightsFilteredInsightTypesInGlobalScope, - setInsightsFilteredCriticalityLevels, - setInsightsFilteredCriticalityLevelsInGlobalScope + sidebarQuery?.query?.lastDays, + setInsightsLastDays, + setGlobalErrorsLastDays ]); const handleSidebarTransitionStart = () => { @@ -411,7 +431,6 @@ export const RepositorySidebarOverlay = ({ case TAB_IDS.ASSETS: return ( ); diff --git a/src/components/Dashboard/MetricsReport/index.tsx b/src/components/Dashboard/MetricsReport/index.tsx index a1f81849b..b21c6d45b 100644 --- a/src/components/Dashboard/MetricsReport/index.tsx +++ b/src/components/Dashboard/MetricsReport/index.tsx @@ -1,9 +1,8 @@ -import { useLayoutEffect } from "react"; +import { useEffect, useLayoutEffect, useMemo } from "react"; import { useDashboardDispatch, useDashboardSelector } from "../../../containers/Dashboard/hooks"; -import { useMount } from "../../../hooks/useMount"; import { type EndpointData, type IssueCriticality @@ -27,6 +26,7 @@ import { ScopeChangeEvent } from "../../../types"; import { changeScope } from "../../../utils/actions/changeScope"; import { IssuesReport } from "../../common/IssuesReport"; import type { TargetScope } from "../../common/IssuesReport/types"; +import { sortEnvironments } from "../../common/IssuesReport/utils"; import { DigmaLogoIcon } from "../../common/icons/16px/DigmaLogoIcon"; import { actions } from "../actions"; import * as s from "./styles"; @@ -61,18 +61,36 @@ export const MetricsReport = () => { const dispatch = useDashboardDispatch(); + const sortedEnvironments = useMemo( + () => (environments ? sortEnvironments(environments) : undefined), + [environments] + ); + useLayoutEffect(() => { window.sendMessageToDigma({ action: actions.INITIALIZE }); }, []); - // TODO: replace with useEffect - useMount(() => { - if (isString(window.dashboardEnvironment)) { + useEffect(() => { + if ( + isString(window.dashboardEnvironment) && + selectedEnvironmentId !== window.dashboardEnvironment + ) { dispatch(setSelectedEnvironmentId(window.dashboardEnvironment)); } - }); + }, [dispatch, selectedEnvironmentId]); + + useEffect(() => { + if ( + sortedEnvironments && + sortedEnvironments.length > 0 && + !selectedEnvironmentId && + !isString(window.dashboardEnvironment) + ) { + dispatch(setSelectedEnvironmentId(sortedEnvironments[0].id)); + } + }, [sortedEnvironments, selectedEnvironmentId, dispatch]); const goToEndpointIssues = ({ spanCodeObjectId, diff --git a/src/components/common/IssuesReport/index.tsx b/src/components/common/IssuesReport/index.tsx index 9abec3a16..69c63772f 100644 --- a/src/components/common/IssuesReport/index.tsx +++ b/src/components/common/IssuesReport/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from "react"; +import { useMemo } from "react"; import { getFeatureFlagValue } from "../../../featureFlags"; import { useGetEndpointsIssuesQuery, @@ -19,11 +19,7 @@ import { Header } from "./Header"; import * as s from "./styles"; import { Table } from "./Table"; import type { IssuesReportProps, ScoreCriterion } from "./types"; -import { - sortEnvironments, - transformEndpointsData, - transformServicesData -} from "./utils"; +import { transformEndpointsData, transformServicesData } from "./utils"; const getEndpointDisplayName = ( endpointsIssues: SetEndpointsIssuesPayload | undefined, @@ -59,26 +55,7 @@ export const IssuesReport = ({ showEnvironmentSelect = true, showServicesSelect = true }: IssuesReportProps) => { - const sortedEnvironments = useMemo( - () => (environments ? sortEnvironments(environments) : undefined), - [environments] - ); - - useEffect(() => { - if ( - sortedEnvironments && - sortedEnvironments.length > 0 && - !selectedEnvironmentId - ) { - onSelectedEnvironmentIdChange(sortedEnvironments[0].id); - } - }, [ - sortedEnvironments, - selectedEnvironmentId, - onSelectedEnvironmentIdChange - ]); - - const isInitialized = Boolean(sortedEnvironments && backendInfo); + const isInitialized = Boolean(environments && backendInfo); const { data: services } = useGetEnvironmentServicesQuery( { @@ -261,7 +238,7 @@ export const IssuesReport = ({ return ( {isInitialized ? ( - sortedEnvironments && sortedEnvironments.length > 0 ? ( + environments && environments.length > 0 ? ( <>
set({ errorDetailsWorkspaceItemsOnly }), setGlobalErrorsViewMode: (mode: ViewMode) => set({ globalErrorsViewMode: mode }), - setGlobalErrorsLastDays: (days: number) => + setGlobalErrorsLastDays: (days: number | null) => set({ globalErrorsLastDays: days }), resetGlobalErrors: () => set({ ...globalErrorsWithoutFiltersInitialState }) }