From eaf93421d9d27941426d33243b96030ca49d43c0 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 29 Aug 2024 14:02:59 +0300 Subject: [PATCH 01/18] Create slices --- package-lock.json | 52 ++++-- package.json | 3 +- .../Main/slices/createGlobalSlice.ts | 170 ++++++++++++++++++ .../Main/slices/createInsightSlice.ts | 88 +++++++++ .../Main/slices/createScopeSlice.ts | 30 ++++ src/containers/Main/stores/useGlobalStore.ts | 44 +---- src/containers/Main/stores/useStore.ts | 21 +++ 7 files changed, 350 insertions(+), 58 deletions(-) create mode 100644 src/containers/Main/slices/createGlobalSlice.ts create mode 100644 src/containers/Main/slices/createInsightSlice.ts create mode 100644 src/containers/Main/slices/createScopeSlice.ts create mode 100644 src/containers/Main/stores/useStore.ts diff --git a/package-lock.json b/package-lock.json index 3933beac1..3f31130a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,8 @@ "semver": "^7.5.4", "styled-components": "^6.1.0", "uuid": "^9.0.1", - "zustand": "^4.5.4" + "zustand": "^4.5.5", + "zustand-slices": "^0.3.0" }, "devDependencies": { "@babel/core": "^7.23.2", @@ -17567,9 +17568,9 @@ } }, "node_modules/use-sync-external-store": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } @@ -18216,11 +18217,11 @@ } }, "node_modules/zustand": { - "version": "4.5.4", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz", - "integrity": "sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz", + "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==", "dependencies": { - "use-sync-external-store": "1.2.0" + "use-sync-external-store": "1.2.2" }, "engines": { "node": ">=12.7.0" @@ -18241,6 +18242,21 @@ "optional": true } } + }, + "node_modules/zustand-slices": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/zustand-slices/-/zustand-slices-0.3.0.tgz", + "integrity": "sha512-deJuuBXvHx/wJvx+3bsCnkZf6AaCfagUggz2H8WQ9Z0bLXvVLFp4TD+QFBPtilOsbaIvJIRgW+maLJxgHAzFRw==", + "peerDependencies": { + "immer": ">=9.0.6", + "react": ">=18.0.0", + "zustand": ">=4.0.0" + }, + "peerDependenciesMeta": { + "immer": { + "optional": true + } + } } }, "dependencies": { @@ -30651,9 +30667,9 @@ } }, "use-sync-external-store": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", "requires": {} }, "util": { @@ -31120,12 +31136,18 @@ "dev": true }, "zustand": { - "version": "4.5.4", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz", - "integrity": "sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz", + "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==", "requires": { - "use-sync-external-store": "1.2.0" + "use-sync-external-store": "1.2.2" } + }, + "zustand-slices": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/zustand-slices/-/zustand-slices-0.3.0.tgz", + "integrity": "sha512-deJuuBXvHx/wJvx+3bsCnkZf6AaCfagUggz2H8WQ9Z0bLXvVLFp4TD+QFBPtilOsbaIvJIRgW+maLJxgHAzFRw==", + "requires": {} } } } diff --git a/package.json b/package.json index 4f42e97c6..144061a22 100644 --- a/package.json +++ b/package.json @@ -122,6 +122,7 @@ "semver": "^7.5.4", "styled-components": "^6.1.0", "uuid": "^9.0.1", - "zustand": "^4.5.4" + "zustand": "^4.5.5", + "zustand-slices": "^0.3.0" } } diff --git a/src/containers/Main/slices/createGlobalSlice.ts b/src/containers/Main/slices/createGlobalSlice.ts new file mode 100644 index 000000000..b4868cf0d --- /dev/null +++ b/src/containers/Main/slices/createGlobalSlice.ts @@ -0,0 +1,170 @@ +import { createSlice } from "zustand-slices"; +import { + BackendInfo, + DigmaStatus, + Environment, + InsightStats, + PersistedState, + RunConfiguration, + UserInfo +} from "../../../components/common/App/types"; +import { isBoolean } from "../../../typeGuards/isBoolean"; +import { isEnvironment } from "../../../typeGuards/isEnvironment"; +import { isString } from "../../../typeGuards/isString"; + +export interface GlobalState { + digmaApiUrl: string | null; + digmaApiProxyPrefix: string | null; + digmaStatus: DigmaStatus | null; + isDigmaEngineInstalled: boolean | null; + isDigmaEngineRunning: boolean | null; + isDockerInstalled: boolean | null; + isDockerComposeInstalled: boolean | null; + backendInfo: BackendInfo | null; + jaegerURL: string | null; + isJaegerEnabled: boolean | null; + isMicrometerProject: boolean | null; + runConfig: RunConfiguration | null; + isObservabilityEnabled: boolean | null; + productKey: string | null; + isDigmathonModeEnabled: boolean | null; + isDigmathonGameFinished: boolean | null; + environment: Environment | null; + environments: Environment[] | null; + insightStats: InsightStats | null; + userId: string | null; + userInfo: UserInfo | null; + userEmail: string | null; + userRegistrationEmail: string | null; + persistedState: PersistedState | null; + selectedServices: string[] | null; +} + +export const initialState: GlobalState = { + digmaApiUrl: isString(window.digmaApiUrl) ? window.digmaApiUrl : null, + digmaApiProxyPrefix: isString(window.digmaApiProxyPrefix) + ? window.digmaApiProxyPrefix + : null, + digmaStatus: null, + isDigmaEngineInstalled: isBoolean(window.isObservabilityEnabled) + ? window.isObservabilityEnabled + : null, + isDigmaEngineRunning: isBoolean(window.isDigmaEngineRunning) + ? window.isDigmaEngineRunning + : null, + isDockerInstalled: isBoolean(window.isDockerInstalled) + ? window.isDockerInstalled + : null, + isDockerComposeInstalled: isBoolean(window.isDockerComposeInstalled) + ? window.isDockerComposeInstalled + : null, + backendInfo: null, + jaegerURL: isString(window.jaegerURL) ? window.jaegerURL : null, + isJaegerEnabled: isBoolean(window.isJaegerEnabled) + ? window.isJaegerEnabled + : null, + isMicrometerProject: isBoolean(window.isMicrometerProject) + ? window.isMicrometerProject + : null, + runConfig: null, + isObservabilityEnabled: isBoolean(window.isObservabilityEnabled) + ? window.isObservabilityEnabled + : null, + productKey: isString(window.productKey) ? window.productKey : null, + isDigmathonModeEnabled: isBoolean(window.isDigmathonModeEnabled) + ? window.isDigmathonModeEnabled + : null, + isDigmathonGameFinished: isBoolean(window.isDigmathonGameFinished) + ? window.isDigmathonGameFinished + : null, + environment: isEnvironment(window.environment) ? window.environment : null, + environments: null, + insightStats: null, + userId: isString(window.userId) ? window.userId : null, + userInfo: null, + userEmail: isString(window.userEmail) ? window.userEmail : null, + userRegistrationEmail: isString(window.userRegistrationEmail) + ? window.userRegistrationEmail + : null, + selectedServices: null, + persistedState: null +}; + +export interface GlobalActions { + setDigmaApiUrl: (url: string) => void; + setDigmaApiProxyPrefix: (prefix: string) => void; + setDigmaStatus: (status: DigmaStatus) => void; + setIsDigmaEngineInstalled: (isInstalled: boolean) => void; + setIsDigmaEngineRunning: (isRunning: boolean) => void; + setIsDockerInstalled: (isInstalled: boolean) => void; + setIsDockerComposeInstalled: (isInstalled: boolean) => void; + setBackendInfo: (info: BackendInfo) => void; + setJaegerURL: (url: string) => void; + setIsJaegerEnabled: (isEnabled: boolean) => void; + setIsMicrometerProject: (isMicrometer: boolean) => void; + setRunConfig: (config: RunConfiguration) => void; + setIsObservabilityEnabled: (isEnabled: boolean) => void; + setProductKey: (key: string) => void; + setIsDigmathonModeEnabled: (isEnabled: boolean) => void; + setIsDigmathonGameFinished: (isFinished: boolean) => void; + setEnvironment: (environment: Environment | null) => void; + setEnvironments: (environments: Environment[]) => void; + setInsightStats: (stats: InsightStats) => void; + setUserId: (userId: string) => void; + setUserInfo: (userInfo: UserInfo) => void; + setUserEmail: (email: string) => void; + setUserRegistrationEmail: (email: string) => void; + setPersistedState: (state: PersistedState) => void; + setSelectedServices: (services: string[]) => void; + reset: () => void; +} + +export type GlobalSlice = GlobalActions & GlobalState; + +const set = (update: Partial) => (state: GlobalState) => ({ + ...state, + ...update +}); + +export const createGlobalSlice = () => + createSlice({ + name: "global", + value: initialState, + actions: { + setDigmaApiUrl: (url) => set({ digmaApiUrl: url }), + setDigmaApiProxyPrefix: (prefix) => set({ digmaApiProxyPrefix: prefix }), + setDigmaStatus: (status) => set({ digmaStatus: status }), + setIsDigmaEngineInstalled: (isInstalled) => + set({ isDigmaEngineInstalled: isInstalled }), + setIsDigmaEngineRunning: (isRunning) => + set({ isDigmaEngineRunning: isRunning }), + setIsDockerInstalled: (isInstalled) => + set({ isDockerInstalled: isInstalled }), + setIsDockerComposeInstalled: (isInstalled) => + set({ isDockerComposeInstalled: isInstalled }), + setBackendInfo: (info) => set({ backendInfo: info }), + setJaegerURL: (url) => set({ jaegerURL: url }), + setIsJaegerEnabled: (isEnabled) => set({ isJaegerEnabled: isEnabled }), + setIsMicrometerProject: (isMicrometer) => + set({ isMicrometerProject: isMicrometer }), + setRunConfig: (config) => set({ runConfig: config }), + setIsObservabilityEnabled: (isEnabled) => + set({ isObservabilityEnabled: isEnabled }), + setProductKey: (key) => set({ productKey: key }), + setIsDigmathonModeEnabled: (isEnabled) => + set({ isDigmathonModeEnabled: isEnabled }), + setIsDigmathonGameFinished: (isFinished) => + set({ isDigmathonGameFinished: isFinished }), + setEnvironment: (environment) => set({ environment }), + setEnvironments: (environments) => set({ environments }), + setInsightStats: (stats) => set({ insightStats: stats }), + setUserId: (userId) => set({ userId }), + setUserInfo: (userInfo) => set({ userInfo }), + setUserEmail: (email) => set({ userEmail: email }), + setUserRegistrationEmail: (email) => + set({ userRegistrationEmail: email }), + setPersistedState: (state) => set({ persistedState: state }), + setSelectedServices: (services) => set({ selectedServices: services }), + reset: () => set(initialState) + } + }); diff --git a/src/containers/Main/slices/createInsightSlice.ts b/src/containers/Main/slices/createInsightSlice.ts new file mode 100644 index 000000000..5be66ac64 --- /dev/null +++ b/src/containers/Main/slices/createInsightSlice.ts @@ -0,0 +1,88 @@ +import { createSlice } from "zustand-slices"; +import { + Sorting, + SORTING_ORDER +} from "../../../components/common/SortingSelector/types"; +import { + InsightFilterType, + SORTING_CRITERION, + ViewMode +} from "../../../components/Insights/InsightsCatalog/types"; +import { IssuesFiltersData } from "../../../components/Insights/Issues/IssuesFilter/types"; +import { + InsightsData, + InsightViewType +} from "../../../components/Insights/types"; + +export interface InsightsSlice { + data: InsightsData | null; + isDataLoading: boolean; + search: string; + page: number; + sorting: Sorting; + viewMode: ViewMode; + filters: InsightFilterType[]; + filteredInsightTypes: string[]; + insightViewType: InsightViewType | null; + issuesFilters: IssuesFiltersData | null; + areIssuesFiltersLoading: boolean; +} + +export const initialState: InsightsSlice = { + data: null, + isDataLoading: false, + search: "", + page: 0, + sorting: { + criterion: SORTING_CRITERION.CRITICAL_INSIGHTS, + order: SORTING_ORDER.DESC + }, + viewMode: ViewMode.All, + filters: [], + filteredInsightTypes: [], + insightViewType: null, + issuesFilters: null, + areIssuesFiltersLoading: false +}; + +export interface InsightsActions { + setData: (data: InsightsData) => void; + setIsDataLoading: (isDataLoading: boolean) => void; + setSearch: (search: string) => void; + setPage: (page: number) => void; + setSorting: (sorting: Sorting) => void; + setViewMode: (viewMode: ViewMode) => void; + setFilters: (filters: InsightFilterType[]) => void; + setFilteredInsightTypes: (insightTypes: string[]) => void; + setInsightViewType: (insightViewType: InsightViewType) => void; + setIssuesFilters: (filters: IssuesFiltersData) => void; + setAreIssuesFiltersLoading: (areIssuesFiltersLoading: boolean) => void; + reset: () => void; +} + +const set = (update: Partial) => (state: InsightsSlice) => ({ + ...state, + ...update +}); + +export const createInsightsSlice = () => + createSlice({ + name: "insights", + value: initialState, + actions: { + setData: (data) => set({ data }), + setIsDataLoading: (isDataLoading) => set({ isDataLoading }), + setSearch: (search) => set({ search }), + setPage: (page) => set({ page }), + setSorting: (sorting) => set({ sorting }), + setViewMode: (viewMode) => set({ viewMode }), + setFilters: (filters) => set({ filters }), + setFilteredInsightTypes: (filteredInsightTypes) => + set({ filteredInsightTypes }), + setInsightViewType: (insightViewType) => set({ insightViewType }), + setIssuesFilters: (issuesFilters) => set({ issuesFilters }), + setAreIssuesFiltersLoading: (areIssuesFiltersLoading) => + set({ areIssuesFiltersLoading }), + reset: () => set(initialState) + } + }); diff --git a/src/containers/Main/slices/createScopeSlice.ts b/src/containers/Main/slices/createScopeSlice.ts new file mode 100644 index 000000000..2da9c2552 --- /dev/null +++ b/src/containers/Main/slices/createScopeSlice.ts @@ -0,0 +1,30 @@ +import { createSlice } from "zustand-slices"; +import { Scope } from "../../../components/common/App/types"; + +interface ScopeState { + scope: Scope | null; +} + +const initialState: ScopeState = { + scope: null +}; + +interface ScopeActions { + setScope: (scope: Scope) => void; +} + +export type ScopeSlice = ScopeActions & ScopeState; + +export const createScopeSlice = () => + createSlice({ + name: "scope", + value: initialState, + actions: { + setScope: (scope: Scope) => (state) => { + return state.scope?.span?.spanCodeObjectId !== + scope.span?.spanCodeObjectId + ? { ...state, scope, page: 0, search: "" } + : state; + } + } + }); diff --git a/src/containers/Main/stores/useGlobalStore.ts b/src/containers/Main/stores/useGlobalStore.ts index 0b73796ab..000bb3544 100644 --- a/src/containers/Main/stores/useGlobalStore.ts +++ b/src/containers/Main/stores/useGlobalStore.ts @@ -1,4 +1,3 @@ -import { create } from "zustand"; import { BackendInfo, DigmaStatus, @@ -12,7 +11,7 @@ import { import { isBoolean } from "../../../typeGuards/isBoolean"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; import { isString } from "../../../typeGuards/isString"; -import { createSelectors } from "./createSelectors"; +import { useStore } from "./useStore"; export interface GlobalState { digmaApiUrl: string | null; @@ -124,43 +123,4 @@ export interface GlobalActions { reset: () => void; } -export const useGlobalStore = createSelectors( - create()((set) => ({ - ...initialState, - setDigmaApiUrl: (url) => set({ digmaApiUrl: url }), - setDigmaApiProxyPrefix: (prefix) => set({ digmaApiProxyPrefix: prefix }), - setDigmaStatus: (status) => set({ digmaStatus: status }), - setIsDigmaEngineInstalled: (isInstalled) => - set({ isDigmaEngineInstalled: isInstalled }), - setIsDigmaEngineRunning: (isRunning) => - set({ isDigmaEngineRunning: isRunning }), - setIsDockerInstalled: (isInstalled) => - set({ isDockerInstalled: isInstalled }), - setIsDockerComposeInstalled: (isInstalled) => - set({ isDockerComposeInstalled: isInstalled }), - setBackendInfo: (info) => set({ backendInfo: info }), - setJaegerURL: (url) => set({ jaegerURL: url }), - setIsJaegerEnabled: (isEnabled) => set({ isJaegerEnabled: isEnabled }), - setIsMicrometerProject: (isMicrometer) => - set({ isMicrometerProject: isMicrometer }), - setRunConfig: (config) => set({ runConfig: config }), - setIsObservabilityEnabled: (isEnabled) => - set({ isObservabilityEnabled: isEnabled }), - setProductKey: (key) => set({ productKey: key }), - setIsDigmathonModeEnabled: (isEnabled) => - set({ isDigmathonModeEnabled: isEnabled }), - setIsDigmathonGameFinished: (isFinished) => - set({ isDigmathonGameFinished: isFinished }), - setEnvironment: (environment) => set({ environment }), - setEnvironments: (environments) => set({ environments }), - setScope: (scope) => set({ scope }), - setInsightStats: (stats) => set({ insightStats: stats }), - setUserId: (userId) => set({ userId }), - setUserInfo: (userInfo) => set({ userInfo }), - setUserEmail: (email) => set({ userEmail: email }), - setUserRegistrationEmail: (email) => set({ userRegistrationEmail: email }), - setPersistedState: (state) => set({ persistedState: state }), - setSelectedServices: (services) => set({ selectedServices: services }), - reset: () => set(initialState) - })) -); +export const useGlobalStore = () => useStore((state) => state.global); diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts new file mode 100644 index 000000000..5e8f34cef --- /dev/null +++ b/src/containers/Main/stores/useStore.ts @@ -0,0 +1,21 @@ +import { create } from "zustand"; +import { withSlices } from "zustand-slices"; +import { createGlobalSlice, GlobalSlice } from "../slices/createGlobalSlice"; +import { + createInsightsSlice, + InsightsSlice +} from "../slices/createInsightSlice"; +import { createScopeSlice, ScopeSlice } from "../slices/createScopeSlice"; +import { createSelectors } from "./createSelectors"; + +export interface StoreState { + insights: InsightsSlice; + global: GlobalSlice; + scope: ScopeSlice; +} + +export const useStore = createSelectors( + create( + withSlices(createScopeSlice(), createGlobalSlice(), createInsightsSlice()) + ) +); From 830898f18385372f4aa7783b2e9094fe80726ac0 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 29 Aug 2024 17:35:15 +0300 Subject: [PATCH 02/18] Migrate --- .../Assets/AssetList/AssetEntry/index.tsx | 2 +- src/components/Assets/AssetList/index.tsx | 7 +- src/components/Assets/AssetTypeList/index.tsx | 5 +- src/components/Assets/AssetsFilter/index.tsx | 11 +- src/components/Assets/index.tsx | 7 +- .../Dashboard/Report/ReportHeader/index.tsx | 2 +- src/components/Errors/index.tsx | 4 +- src/components/Highlights/Impact/index.tsx | 7 +- .../Highlights/Impact/useImpactData.ts | 5 +- .../Highlights/Performance/index.tsx | 5 +- .../Performance/usePerformanceData.ts | 5 +- src/components/Highlights/Scaling/index.tsx | 5 +- .../Highlights/Scaling/useScalingData.ts | 5 +- .../Highlights/SpanInfo/useSpanInfoData.ts | 4 +- .../EndpointBottleneckHighlightCard/index.tsx | 5 +- .../index.tsx | 5 +- .../index.tsx | 5 +- .../index.tsx | 5 +- .../index.tsx | 5 +- .../index.tsx | 5 +- .../index.tsx | 5 +- .../HotSpotHighlightCard/index.tsx | 5 +- .../SpaNPlusOneHighlightCard/index.tsx | 5 +- .../index.tsx | 5 +- .../index.tsx | 5 +- .../SpanScalingHighlightCard/index.tsx | 5 +- src/components/Highlights/TopIssues/index.tsx | 4 +- .../Highlights/TopIssues/useTopIssuesData.ts | 5 +- src/components/Highlights/index.tsx | 2 +- .../EnvironmentSelector/index.tsx | 5 +- .../InsightsCatalog/InsightsPage/index.tsx | 5 +- .../index.tsx | 2 +- .../SpaNPlusOneInsightCard/index.tsx | 2 +- .../index.tsx | 2 +- .../index.tsx | 2 +- .../SpanScalingInsightCard/index.tsx | 2 +- .../SpanUsagesInsightCard/index.tsx | 2 +- .../InsightCard/InsightHeader/index.tsx | 4 +- .../insightCards/common/InsightCard/index.tsx | 2 +- .../common/IssueCompactCard/index.tsx | 2 +- .../Insights/InsightsCatalog/index.tsx | 13 +- .../Insights/Issues/IssuesFilter/index.tsx | 10 +- .../Insights/Issues/useIssuesFilters.ts | 7 +- src/components/Insights/index.tsx | 31 ++--- .../index.tsx | 2 +- .../index.tsx | 2 +- .../SpaNPlusOneInsightTicket/index.tsx | 2 +- .../index.tsx | 2 +- .../index.tsx | 4 +- .../SpanScalingInsightTicket/index.tsx | 4 +- src/components/Insights/useInsightsData.ts | 9 +- src/components/Main/index.tsx | 16 ++- src/components/Main/useHistory.tsx | 5 +- .../EnvironmentBar/EnvironmentMenu/index.tsx | 2 +- .../HistoryNavigationPanel/index.tsx | 7 +- src/components/Navigation/KebabMenu/index.tsx | 6 +- src/components/Navigation/Tabs/index.tsx | 5 +- src/components/Navigation/index.tsx | 11 +- .../EnvironmentVariableCode/index.tsx | 12 +- src/components/Tests/TestTicket/index.tsx | 2 +- src/components/Tests/index.tsx | 7 +- src/components/common/App/index.tsx | 62 ++++----- src/components/common/ImpactScore/index.tsx | 2 +- .../Main/slices/createGlobalSlice.ts | 83 ++++-------- .../Main/slices/createInsightSlice.ts | 39 ++---- .../Main/slices/createScopeSlice.ts | 6 - src/containers/Main/stores/useGlobalStore.ts | 126 +----------------- src/containers/Main/stores/useScopeStore.ts | 6 + src/containers/Main/stores/useStore.ts | 22 +-- 69 files changed, 266 insertions(+), 414 deletions(-) create mode 100644 src/containers/Main/stores/useScopeStore.ts diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index dae0ba702..4ff3c753f 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -24,7 +24,7 @@ export const AssetEntry = ({ isImpactHidden, sortingCriterion }: AssetEntryProps) => { - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const isNewImpactScoreCalculationEnabled = getFeatureFlagValue( backendInfo, FeatureFlag.IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 9ca6f6343..8cf0e8392 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DefaultTheme, useTheme } from "styled-components"; import { DigmaMessageError } from "../../../api/types"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; @@ -140,12 +141,12 @@ export const AssetList = ({ filteredCount ); const listRef = useRef(null); - const environment = useGlobalStore.use.environment(); - const backendInfo = useGlobalStore.use.backendInfo(); + const environment = useGlobalStore().environment; + const backendInfo = useGlobalStore().backendInfo; const refreshTimerId = useRef(); const previousEnvironment = usePrevious(environment); const previousViewScope = usePrevious(scopeViewOptions); - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId; const refreshData = useCallback(() => { diff --git a/src/components/Assets/AssetTypeList/index.tsx b/src/components/Assets/AssetTypeList/index.tsx index 45d13e29b..79ccb9e04 100644 --- a/src/components/Assets/AssetTypeList/index.tsx +++ b/src/components/Assets/AssetTypeList/index.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; @@ -69,8 +70,8 @@ export const AssetTypeList = ({ const previousData = usePrevious(data); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); - const scope = useGlobalStore.use.scope(); - const environment = useGlobalStore.use.environment(); + const scope = useScopeStore().scope; + const environment = useGlobalStore().environment; const previousEnvironment = usePrevious(environment); const refreshTimerId = useRef(); const previousSearchQuery = usePrevious(searchQuery); diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index 5f4f658a8..c1455aaeb 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -26,6 +26,8 @@ import { GetAssetFiltersDataPayload } from "./types"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; +import { useStore } from "../../../containers/Main/stores/useStore"; import * as s from "./styles"; const PERSISTENCE_KEY = "assetsFilters"; @@ -98,12 +100,13 @@ export const AssetsFilter = ({ const previousData = usePrevious(data); const [isOpen, setIsOpen] = useState(false); const previousIsOpen = usePrevious(isOpen); - const globallySelectedServices = useGlobalStore.use.selectedServices(); - const setGloballySelectedServices = useGlobalStore.use.setSelectedServices(); + const globallySelectedServices = useGlobalStore().selectedServices; + const { setSelectedServices: setGloballySelectedServices } = + useStore.getState(); const [persistedFilters, setPersistedFilters] = usePersistence(PERSISTENCE_KEY, "project"); const previousPersistedFilters = usePrevious(persistedFilters); - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId; const [selectedServices, setSelectedServices] = useState( isServicesFilterEnabled ? globallySelectedServices ?? [] : [] @@ -112,7 +115,7 @@ export const AssetsFilter = ({ const [selectedConsumers, setSelectedConsumers] = useState([]); const [selectedInternals, setSelectedInternals] = useState([]); const [selectedInsights, setSelectedInsights] = useState([]); - const environment = useGlobalStore.use.environment(); + const environment = useGlobalStore().environment; const previousEnvironment = usePrevious(environment); const previousScope = usePrevious(scope); diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index 102fc37f8..a44bada39 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { useParams } from "react-router-dom"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { getFeatureFlagValue } from "../../featureFlags"; import { useDebounce } from "../../hooks/useDebounce"; import { usePrevious } from "../../hooks/usePrevious"; @@ -31,8 +32,8 @@ export const Assets = () => { const [assetScopeOption, setAssetScopeOption] = useState(null); const [selectedFilters, setSelectedFilters] = useState(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const previousScopeSpanCodeObjectId = usePrevious( scope?.span?.spanCodeObjectId ); @@ -42,7 +43,7 @@ export const Assets = () => { useState(null); const { goTo } = useHistory(); const isBackendUpgradeMessageVisible = false; - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const areExtendedAssetsFiltersEnabled = getFeatureFlagValue( backendInfo, FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED diff --git a/src/components/Dashboard/Report/ReportHeader/index.tsx b/src/components/Dashboard/Report/ReportHeader/index.tsx index d43dd8faf..c78925ad4 100644 --- a/src/components/Dashboard/Report/ReportHeader/index.tsx +++ b/src/components/Dashboard/Report/ReportHeader/index.tsx @@ -40,7 +40,7 @@ export const ReportHeader = ({ const [selectedEnvironment, setSelectedEnvironment] = useState( null ); - const environments = useGlobalStore.use.environments(); + const environments = useGlobalStore().environments; const handleSelectedEnvironmentChanged = (option: string | string[]) => { const newItem = option === selectedEnvironment diff --git a/src/components/Errors/index.tsx b/src/components/Errors/index.tsx index 7256c7467..775d03dbd 100644 --- a/src/components/Errors/index.tsx +++ b/src/components/Errors/index.tsx @@ -1,12 +1,12 @@ import { useParams } from "react-router-dom"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { useHistory } from "../Main/useHistory"; import { ErrorDetails } from "./ErrorDetails"; import { ErrorsList } from "./ErrorsList"; import * as s from "./styles"; export const Errors = () => { - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const spanCodeObjectId = scope?.span?.spanCodeObjectId; const methodId = scope?.span?.methodId ?? undefined; const { goTo } = useHistory(); diff --git a/src/components/Highlights/Impact/index.tsx b/src/components/Highlights/Impact/index.tsx index 6b6cbb629..09fc7c4a3 100644 --- a/src/components/Highlights/Impact/index.tsx +++ b/src/components/Highlights/Impact/index.tsx @@ -2,6 +2,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { PERFORMANCE_IMPACT_DOCUMENTATION_URL } from "../../../constants"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../Main/types"; @@ -76,9 +77,9 @@ const getRankTagType = (normalizedRank: number) => { export const Impact = () => { const { data, getData } = useImpactData(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); - const backendInfo = useGlobalStore.use.backendInfo(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; + const backendInfo = useGlobalStore().backendInfo; useEffect(() => { getData(); diff --git a/src/components/Highlights/Impact/useImpactData.ts b/src/components/Highlights/Impact/useImpactData.ts index 61d554ff7..4afad90d6 100644 --- a/src/components/Highlights/Impact/useImpactData.ts +++ b/src/components/Highlights/Impact/useImpactData.ts @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -9,8 +10,8 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useImpactData = () => { const [data, setData] = useState(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/Performance/index.tsx b/src/components/Highlights/Performance/index.tsx index c035c942d..7ea376ea7 100644 --- a/src/components/Highlights/Performance/index.tsx +++ b/src/components/Highlights/Performance/index.tsx @@ -1,6 +1,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { usePrevious } from "../../../hooks/usePrevious"; import { isBoolean } from "../../../typeGuards/isBoolean"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -26,8 +27,8 @@ export const Performance = () => { const [isInitialLoading, setIsInitialLoading] = useState(true); const { data, getData } = usePerformanceData(); const previousData = usePrevious(data); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; useEffect(() => { getData(); diff --git a/src/components/Highlights/Performance/usePerformanceData.ts b/src/components/Highlights/Performance/usePerformanceData.ts index c8f03d0f9..839eba2c6 100644 --- a/src/components/Highlights/Performance/usePerformanceData.ts +++ b/src/components/Highlights/Performance/usePerformanceData.ts @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -9,8 +10,8 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const usePerformanceData = () => { const [data, setData] = useState(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/Scaling/index.tsx b/src/components/Highlights/Scaling/index.tsx index 106994361..7855292f6 100644 --- a/src/components/Highlights/Scaling/index.tsx +++ b/src/components/Highlights/Scaling/index.tsx @@ -2,6 +2,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { SCALING_ISSUE_DOCUMENTATION_URL } from "../../../constants"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../utils/getDurationString"; @@ -75,8 +76,8 @@ const demoData: EnvironmentScalingData[] = [ export const Scaling = () => { const { data, getData } = useScalingData(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const { goTo } = useHistory(); useEffect(() => { diff --git a/src/components/Highlights/Scaling/useScalingData.ts b/src/components/Highlights/Scaling/useScalingData.ts index 1b8b6a8c6..274a4d1f4 100644 --- a/src/components/Highlights/Scaling/useScalingData.ts +++ b/src/components/Highlights/Scaling/useScalingData.ts @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -9,8 +10,8 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useScalingData = () => { const [data, setData] = useState(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/SpanInfo/useSpanInfoData.ts b/src/components/Highlights/SpanInfo/useSpanInfoData.ts index ead9f0185..72e8a0fb3 100644 --- a/src/components/Highlights/SpanInfo/useSpanInfoData.ts +++ b/src/components/Highlights/SpanInfo/useSpanInfoData.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -9,7 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useSpanInfoData = () => { const [data, setData] = useState(); - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx index e37752638..16350cea4 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -19,8 +20,8 @@ import { EndpointBottleneckHighlightCardProps } from "./types"; export const EndpointBottleneckHighlightCard = ({ data }: EndpointBottleneckHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx index 0487a138d..e7406ea58 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -16,8 +17,8 @@ import { EndpointChattyApiV2HighlightCardProps } from "./types"; export const EndpointChattyApiV2HighlightCard = ({ data }: EndpointChattyApiV2HighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx index d21ce7f7c..851df56d7 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -19,8 +20,8 @@ import { EndpointHighNumberOfQueriesHighlightCardProps } from "./types"; export const EndpointHighNumberOfQueriesHighlightCard = ({ data }: EndpointHighNumberOfQueriesHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx index 493e1fe0d..28279f80c 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -20,8 +21,8 @@ import { EndpointQueryOptimizationV2HighlightCardProps } from "./types"; export const EndpointQueryOptimizationV2HighlightCard = ({ data }: EndpointQueryOptimizationV2HighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx index e7b66b4a5..a2b7f8877 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -15,8 +16,8 @@ import { EndpointSessionInViewHighlightCardProps } from "./types"; export const EndpointSessionInViewHighlightCard = ({ data }: EndpointSessionInViewHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx index f9fd09132..0c66dcdd3 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -17,8 +18,8 @@ import { EndpointSlowdownSourceHighlightCardProps } from "./types"; export const EndpointSlowdownSourceHighlightCard = ({ data }: EndpointSlowdownSourceHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx index 4459d4f2c..1b4bb0d48 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -19,8 +20,8 @@ import { EndpointSpanNPlusOneHighlightCardProps } from "./types"; export const EndpointSpanNPlusOneHighlightCard = ({ data }: EndpointSpanNPlusOneHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx index 7b2b70198..305622ab7 100644 --- a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -12,8 +13,8 @@ import { addEnvironmentColumns } from "../addEnvironmentColumns"; import { HotSpotHighlightCardProps } from "./types"; export const HotSpotHighlightCard = ({ data }: HotSpotHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx index e3ef3fccc..d656187be 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -17,8 +18,8 @@ import { SpaNPlusOneHighlightCardProps } from "./types"; export const SpaNPlusOneHighlightCard = ({ data }: SpaNPlusOneHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx index e40ac9b91..fe26ba495 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -17,8 +18,8 @@ import { SpanEndpointBottleneckHighlightCardProps } from "./types"; export const SpanEndpointBottleneckHighlightCard = ({ data }: SpanEndpointBottleneckHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx index 1528373bc..21cb41bb2 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -19,8 +20,8 @@ import { SpanQueryOptimizationHighlightCardProps } from "./types"; export const SpanQueryOptimizationHighlightCard = ({ data }: SpanQueryOptimizationHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx index 40e9d286c..7799cd07a 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx @@ -1,5 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -14,8 +15,8 @@ import { SpanScalingHighlightCardProps } from "./types"; export const SpanScalingHighlightCard = ({ data }: SpanScalingHighlightCardProps) => { - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/index.tsx b/src/components/Highlights/TopIssues/index.tsx index 3d2c2b3eb..57ce882f2 100644 --- a/src/components/Highlights/TopIssues/index.tsx +++ b/src/components/Highlights/TopIssues/index.tsx @@ -1,6 +1,6 @@ import { Fragment, useEffect, useMemo, useState } from "react"; import { v4 as uuidv4 } from "uuid"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { usePagination } from "../../../hooks/usePagination"; import { usePrevious } from "../../../hooks/usePrevious"; import { InsightType } from "../../Insights/types"; @@ -94,7 +94,7 @@ export const TopIssues = () => { const [isInitialLoading, setIsInitialLoading] = useState(true); const { data, getData } = useTopIssuesData(); const previousData = usePrevious(data); - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; // Do not show unimplemented insights const filteredTopInsights = useMemo( () => diff --git a/src/components/Highlights/TopIssues/useTopIssuesData.ts b/src/components/Highlights/TopIssues/useTopIssuesData.ts index d2f70de19..52ac66153 100644 --- a/src/components/Highlights/TopIssues/useTopIssuesData.ts +++ b/src/components/Highlights/TopIssues/useTopIssuesData.ts @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -10,8 +11,8 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useTopIssuesData = () => { const [data, setData] = useState(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/index.tsx b/src/components/Highlights/index.tsx index f77733abc..8356ee5ab 100644 --- a/src/components/Highlights/index.tsx +++ b/src/components/Highlights/index.tsx @@ -9,7 +9,7 @@ import { TopIssues } from "./TopIssues"; import * as s from "./styles"; export const Highlights = () => { - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const isSpanInfoVisible = getFeatureFlagValue( backendInfo, diff --git a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx index 885b62b52..95cc873f7 100644 --- a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx +++ b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import useDimensions from "react-cool-dimensions"; import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../containers/Main/stores/useScopeStore"; import { changeScope } from "../../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { Environment } from "../../../common/App/types"; @@ -59,8 +60,8 @@ const sortEnvironmentsByCriticalIssues = ( export const EnvironmentSelector = ({ environments }: EnvironmentSelectorProps) => { - const scope = useGlobalStore.use.scope(); - const environment = useGlobalStore.use.environment(); + const scope = useScopeStore().scope; + const environment = useGlobalStore().environment; const [isMenuOpen, setIsMenuOpen] = useState(false); const { observe, width } = useDimensions(); const sortedEnvironments = environments.sort( diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx index 2d957deba..0ef2d8dfe 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef } from "react"; import { actions as globalActions } from "../../../../actions"; import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../containers/Main/stores/useScopeStore"; import { usePersistence } from "../../../../hooks/usePersistence"; import { trackingEvents as globalTrackingEvents } from "../../../../trackingEvents"; import { isNumber } from "../../../../typeGuards/isNumber"; @@ -488,8 +489,8 @@ export const InsightsPage = ({ isMarkAsReadButtonEnabled, isFilteringEnabled }: InsightsPageProps) => { - const scope = useGlobalStore.use.scope(); - const environment = useGlobalStore.use.environment(); + const scope = useScopeStore().scope; + const environment = useGlobalStore().environment; const [isInsightJiraTicketHintShown, setIsInsightJiraTicketHintShown] = usePersistence( IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx index fcaf63144..dbd40d106 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx @@ -23,7 +23,7 @@ export const EndpointSessionInViewInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: EndpointSessionInViewInsightCardProps) => { - const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); + const isJaegerEnabled = useGlobalStore().isJaegerEnabled; const [pageItems, page, setPage] = usePagination( insight.spans, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx index 25e0fb8b1..5082d6d0b 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx @@ -31,7 +31,7 @@ export const SpaNPlusOneInsightCard = ({ endpoints[0] ); const maxDurationString = getDurationString(endpointWithMaxDuration.duration); - const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); + const isJaegerEnabled = useGlobalStore().isJaegerEnabled; const [selectedEndpoint, setSelectedEndpoint] = useState( endpoints.length ? endpoints[0] : null ); diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx index 10b52fc0b..7d4820f18 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx @@ -73,7 +73,7 @@ export const SpanDurationBreakdownInsightCard = ({ items: [] }); - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const isQuantitySupported = getFeatureFlagValue( backendInfo, FeatureFlag.IS_DURATION_BREAKDOWN_QUANTITY_ENABLED diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx index b8e8fa3a8..b87e973eb 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx @@ -27,7 +27,7 @@ export const SpanEndpointBottleneckInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: SpanEndpointBottleneckInsightCardProps) => { - const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); + const isJaegerEnabled = useGlobalStore().isJaegerEnabled; const slowEndpoints = insight.slowEndpoints ?? []; const endpointWithMaxDuration = slowEndpoints.reduce( (acc, cur) => diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx index 8be7dad73..db14c913b 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx @@ -30,7 +30,7 @@ export const SpanScalingInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: SpanScalingInsightCardProps) => { - const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); + const isJaegerEnabled = useGlobalStore().isJaegerEnabled; const affectedEndpoints = insight.affectedEndpoints ?? []; const [pageItems, page, setPage] = usePagination( affectedEndpoints, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx index d30a16d42..b5eceed6d 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx @@ -43,7 +43,7 @@ export const SpanUsagesInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: SpanUsagesInsightCardProps) => { - const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); + const isJaegerEnabled = useGlobalStore().isJaegerEnabled; const [data, setData] = useState({ pageItems: insight.flows.slice(0, PAGE_SIZE) }); diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx index b575382db..42132b645 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../../../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../../../../../../containers/Main/stores/useScopeStore"; import { isString } from "../../../../../../../../typeGuards/isString"; import { formatTimeDistance } from "../../../../../../../../utils/formatTimeDistance"; import { getInsightTypeInfo } from "../../../../../../../../utils/getInsightTypeInfo"; @@ -38,7 +38,7 @@ export const InsightHeader = ({ lastUpdateTimer, isAsync }: InsightHeaderProps) => { - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType); const statusTooltipContent = renderInsightStatusTooltipContent(insight); diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx index d580e080c..6c8b01417 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx @@ -60,7 +60,7 @@ export const InsightCard = ({ const isOperationInProgress = isDismissalChangeInProgress || isMarkingAsReadInProgress; const previousIsOperationInProgress = usePrevious(isOperationInProgress); - const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); + const isJaegerEnabled = useGlobalStore().isJaegerEnabled; const [insightStatus, setInsightStatus] = useState(insight.status); const isCritical = insight.criticality > HIGH_CRITICALITY_THRESHOLD; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx index e42812f7e..5ee48a672 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx @@ -38,7 +38,7 @@ export const IssueCompactCard = ({ isCritical }: IssueCompactCardProps) => { const theme = useTheme(); - const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled(); + const isJaegerEnabled = useGlobalStore().isJaegerEnabled; const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false); const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType); const statusInfo = insight.status diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index aa35fbbf8..1ad4b00e0 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -3,6 +3,7 @@ import { createPortal } from "react-dom"; import { useTheme } from "styled-components"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { getFeatureFlagValue } from "../../../featureFlags"; import { useDebounce } from "../../../hooks/useDebounce"; import { usePersistence } from "../../../hooks/usePersistence"; @@ -77,7 +78,7 @@ export const InsightsCatalog = ({ const setSorting = useInsightsStore.use.setSorting(); const filters = useInsightsStore.use.filters(); const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); - const selectedServices = useGlobalStore.use.selectedServices(); + const selectedServices = useGlobalStore().selectedServices; const data = useInsightsStore.use.data(); const insights = data?.insights ?? []; const totalCount = data?.totalCount ?? 0; @@ -88,13 +89,13 @@ export const InsightsCatalog = ({ pageStartItemNumber + PAGE_SIZE - 1, totalCount ); - const insightStats = useGlobalStore.use.insightStats(); - const environment = useGlobalStore.use.environment(); - const environments = useGlobalStore.use.environments(); - const scope = useGlobalStore.use.scope(); + const insightStats = useGlobalStore().insightStats; + const environment = useGlobalStore().environment; + const environments = useGlobalStore().environments; + const scope = useScopeStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const isAtSpan = Boolean(scope?.span); - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const theme = useTheme(); const { isMarkingAllAsReadInProgress, markAllAsRead } = useMarkingAllAsRead( scope?.span ?? null diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx index 026efa0c8..ebdfced4c 100644 --- a/src/components/Insights/Issues/IssuesFilter/index.tsx +++ b/src/components/Insights/Issues/IssuesFilter/index.tsx @@ -1,6 +1,8 @@ import { useEffect, useMemo } from "react"; import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../../containers/Main/stores/useInsightsStore"; +import { useScopeStore } from "../../../../containers/Main/stores/useScopeStore"; +import { useStore } from "../../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; import { usePrevious } from "../../../../hooks/usePrevious"; import { FeatureFlag } from "../../../../types"; @@ -20,12 +22,12 @@ import { trackingEvents } from "./tracking"; export const IssuesFilter = () => { const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); - const selectedServices = useGlobalStore.use.selectedServices(); + const selectedServices = useGlobalStore().selectedServices; const setFilteredInsightTypes = useInsightsStore.use.setFilteredInsightTypes(); - const setSelectedServices = useGlobalStore.use.setSelectedServices(); + const { setSelectedServices } = useStore.getState(); const filters = useInsightsStore.use.filters(); - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const setFilters = useInsightsStore.use.setFilters(); const isCriticalOnly = useMemo( () => filters.includes("criticality"), @@ -34,7 +36,7 @@ export const IssuesFilter = () => { const isUnreadOnly = useMemo(() => filters.includes("unread"), [filters]); const { data } = useIssuesFilters(); const previousData = usePrevious(data); - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const isServicesFilterEnabled = Boolean( diff --git a/src/components/Insights/Issues/useIssuesFilters.ts b/src/components/Insights/Issues/useIssuesFilters.ts index 05db29de8..bce5bdfa1 100644 --- a/src/components/Insights/Issues/useIssuesFilters.ts +++ b/src/components/Insights/Issues/useIssuesFilters.ts @@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { GetIssuesFiltersPayload } from "../../../types"; @@ -27,15 +28,15 @@ export const useIssuesFilters = () => { const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); - const environment = useGlobalStore.use.environment(); + const environment = useGlobalStore().environment; const environmentId = environment?.id; - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const spanCodeObjectId = scope?.span?.spanCodeObjectId ?? null; const search = useInsightsStore.use.search(); const filters = useInsightsStore.use.filters(); const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); const viewMode = useInsightsStore.use.viewMode(); - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const query: GetIssuesFiltersQuery = useMemo( () => ({ diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx index d77e9bb2d..5c5bc9dff 100644 --- a/src/components/Insights/index.tsx +++ b/src/components/Insights/index.tsx @@ -3,6 +3,8 @@ import { actions as globalActions } from "../../actions"; import { SLACK_WORKSPACE_URL } from "../../constants"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../containers/Main/stores/useInsightsStore"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; +import { useStore } from "../../containers/Main/stores/useStore"; import { usePersistence } from "../../hooks/usePersistence"; import { usePrevious } from "../../hooks/usePrevious"; import { trackingEvents as globalTrackingEvents } from "../../trackingEvents"; @@ -224,33 +226,32 @@ export const Insights = ({ insightViewType }: InsightsProps) => { const { data, isLoading, refresh } = useInsightsData({ areFiltersRehydrated }); - const reset = useInsightsStore.use.reset(); + const reset = useStore().reset; const [infoToOpenJiraTicket, setInfoToOpenJiraTicket] = useState>(); - const userRegistrationEmail = useGlobalStore.use.userRegistrationEmail(); + const userRegistrationEmail = useGlobalStore().userRegistrationEmail; const previousUserRegistrationEmail = usePrevious(userRegistrationEmail); - const environments = useGlobalStore.use.environments(); + const environments = useGlobalStore().environments; const [isRegistrationInProgress, setIsRegistrationInProgress] = useState(false); const isRegistrationEnabled = false; const isRegistrationRequired = isRegistrationEnabled && !userRegistrationEmail; - const setInsightsViewType = useInsightsStore.use.setInsightViewType(); - const storedInsightViewType = useInsightsStore.use.insightViewType(); - const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); + const { setInsightViewType, setFilteredInsightTypes, setFilters } = + useStore.getState(); + const { + insightViewType: storedInsightViewType, + filteredInsightTypes, + filters + } = useInsightsStore(); + const { backendInfo, environment } = useGlobalStore(); const previousFilteredInsightTypes = usePrevious(filteredInsightTypes); - const setFilteredInsightTypes = - useInsightsStore.use.setFilteredInsightTypes(); - const filters = useInsightsStore.use.filters(); const previousFilters = usePrevious(filters); - const setFilters = useInsightsStore.use.setFilters(); - const backendInfo = useGlobalStore.use.backendInfo(); const previousBackendInfo = usePrevious(backendInfo); - const scope = useGlobalStore.use.scope(); + const scope = useScopeStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const previousScope = usePrevious(scope); const previousScopeSpanCodeObjectId = previousScope?.span?.spanCodeObjectId; - const environment = useGlobalStore.use.environment(); const environmentId = environment?.id; const previousEnvironmentId = usePrevious(environmentId); @@ -261,8 +262,8 @@ export const Insights = ({ insightViewType }: InsightsProps) => { }, [reset]); useEffect(() => { - setInsightsViewType(insightViewType); - }, [insightViewType, setInsightsViewType]); + setInsightViewType(insightViewType); + }, [insightViewType, setInsightViewType]); useEffect(() => { if ( diff --git a/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx index 06afd3740..90ed15448 100644 --- a/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx @@ -23,7 +23,7 @@ export const EndpointQueryOptimizationV2InsightTicket = ({ refreshInsights, onClose }: InsightTicketProps) => { - const jaegerURL = useGlobalStore.use.jaegerURL(); + const jaegerURL = useGlobalStore().jaegerURL; const span = data.insight.span; const spanInfo = span?.spanInfo || null; diff --git a/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx index 7564025ed..2d8603f8d 100644 --- a/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx @@ -19,7 +19,7 @@ export const EndpointSpanNPlusOneInsightTicket = ({ refreshInsights, onClose }: InsightTicketProps) => { - const jaegerURL = useGlobalStore.use.jaegerURL(); + const jaegerURL = useGlobalStore().jaegerURL; const span = data.insight.span; const spanInfo = span?.internalSpan ?? span?.clientSpan; diff --git a/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx index 12926c944..64f3cff95 100644 --- a/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx @@ -21,7 +21,7 @@ export const SpaNPlusOneInsightTicket = ({ const spanInsight = data.insight; const { commitInfos, isLoading, codeLocations } = useSpanDataSource(data.insight.spanInfo, data.insight); - const jaegerURL = useGlobalStore.use.jaegerURL(); + const jaegerURL = useGlobalStore().jaegerURL; const endpoints = data.insight.endpoints ?? []; diff --git a/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx index 1b6a9040e..8fe65ef76 100644 --- a/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx @@ -19,7 +19,7 @@ export const SpanQueryOptimizationInsightTicket = ({ onClose }: InsightTicketProps) => { const { isLoading, commitInfos } = useCommitInfos(data.insight); - const jaegerURL = useGlobalStore.use.jaegerURL(); + const jaegerURL = useGlobalStore().jaegerURL; const criticalityString = data.insight.criticality > 0 diff --git a/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx index 8ba00494b..1e529da12 100644 --- a/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx @@ -29,8 +29,8 @@ export const SpanScalingByRootCauseInsightTicket = ({ }: InsightTicketProps & { rootCauseSpanInfo: RootCauseSpanInfo; }) => { - const jaegerURL = useGlobalStore.use.jaegerURL(); - const digmaApiProxyPrefix = useGlobalStore.use.digmaApiProxyPrefix(); + const jaegerURL = useGlobalStore().jaegerURL; + const digmaApiProxyPrefix = useGlobalStore().digmaApiProxyPrefix; const spanInfo = rootCauseSpanInfo; diff --git a/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx index d2ee3f13e..f3af3b7d0 100644 --- a/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx @@ -25,8 +25,8 @@ export const SpanScalingInsightTicket = ({ refreshInsights, onClose }: InsightTicketProps) => { - const jaegerURL = useGlobalStore.use.jaegerURL(); - const digmaApiProxyPrefix = useGlobalStore.use.digmaApiProxyPrefix(); + const jaegerURL = useGlobalStore().jaegerURL; + const digmaApiProxyPrefix = useGlobalStore().digmaApiProxyPrefix; const insight = data.insight; diff --git a/src/components/Insights/useInsightsData.ts b/src/components/Insights/useInsightsData.ts index 75fd78096..4edea0e60 100644 --- a/src/components/Insights/useInsightsData.ts +++ b/src/components/Insights/useInsightsData.ts @@ -3,6 +3,7 @@ import { actions as globalActions } from "../../actions"; import { DigmaMessageError } from "../../api/types"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../containers/Main/stores/useInsightsStore"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../dispatcher"; import { getFeatureFlagValue } from "../../featureFlags"; import { usePrevious } from "../../hooks/usePrevious"; @@ -139,9 +140,9 @@ export const useInsightsData = ({ const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); - const backendInfo = useGlobalStore.use.backendInfo(); - const scope = useGlobalStore.use.scope(); - const environment = useGlobalStore.use.environment(); + const backendInfo = useGlobalStore().backendInfo; + const scope = useScopeStore().scope; + const environment = useGlobalStore().environment; const environmentId = environment?.id; const search = useInsightsStore.use.search(); const page = useInsightsStore.use.page(); @@ -149,7 +150,7 @@ export const useInsightsData = ({ const viewMode = useInsightsStore.use.viewMode(); const filters = useInsightsStore.use.filters(); const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); - const selectedServices = useGlobalStore.use.selectedServices(); + const selectedServices = useGlobalStore().selectedServices; const filteredServices = useMemo( () => selectedServices ?? [], [selectedServices] diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index 54c059822..708b6888e 100644 --- a/src/components/Main/index.tsx +++ b/src/components/Main/index.tsx @@ -3,6 +3,8 @@ import { Outlet, matchPath, useLocation } from "react-router-dom"; import { actions as globalActions } from "../../actions"; import { history } from "../../containers/Main/history"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; +import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { HistoryEntryLocation } from "../../history/History"; import { usePersistence } from "../../hooks/usePersistence"; @@ -47,14 +49,14 @@ const getURLToNavigateOnCodeLensClick = (scope: Scope): string | undefined => { export const Main = () => { const location = useLocation(); - const environments = useGlobalStore.use.environments(); - const environment = useGlobalStore.use.environment(); + const environments = useGlobalStore().environments; + const environment = useGlobalStore().environment; const previousEnvironment = usePrevious(environment); - const scope = useGlobalStore.use.scope(); - const userInfo = useGlobalStore.use.userInfo(); + const scope = useScopeStore().scope; + const userInfo = useGlobalStore().userInfo; const userId = userInfo?.id; const previousUserId = usePrevious(userId); - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; const previousBackendInfo = usePrevious(backendInfo); const { goTo } = useHistory(); const updateBrowserLocation = useBrowserLocationUpdater(); @@ -63,8 +65,8 @@ export const Main = () => { "project" ); const previousPersistedServices = usePrevious(persistedServices); - const selectedServices = useGlobalStore.use.selectedServices(); - const setSelectedServices = useGlobalStore.use.setSelectedServices(); + const selectedServices = useGlobalStore().selectedServices; + const { setSelectedServices } = useStore.getState(); const isInitialized = useMemo( () => !isUndefined(persistedServices), [persistedServices] diff --git a/src/components/Main/useHistory.tsx b/src/components/Main/useHistory.tsx index c7d0bb1db..066015afd 100644 --- a/src/components/Main/useHistory.tsx +++ b/src/components/Main/useHistory.tsx @@ -1,6 +1,7 @@ import { NavigateOptions, To, resolvePath } from "react-router-dom"; import { history } from "../../containers/Main/history"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { HistoryEntry, HistoryEntryLocation } from "../../history/History"; import { isString } from "../../typeGuards/isString"; import { HistoryState } from "./types"; @@ -96,8 +97,8 @@ const isNewHistoryEntryNeeded = ( export const useHistory = () => { const location = history.getCurrentLocation(); - const environment = useGlobalStore.use.environment(); - const scope = useGlobalStore.use.scope(); + const environment = useGlobalStore().environment; + const scope = useScopeStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const goTo = (to: To, options?: NavigateOptions) => { diff --git a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx index 5f6d1ff43..8553dae8a 100644 --- a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx +++ b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx @@ -9,7 +9,7 @@ export const EnvironmentMenu = ({ environments, onMenuItemClick }: EnvironmentMenuProps) => { - const environment = useGlobalStore.use.environment(); + const environment = useGlobalStore().environment; const handleMenuItemClick = (environment: Environment) => { onMenuItemClick(environment); diff --git a/src/components/Navigation/HistoryNavigationPanel/index.tsx b/src/components/Navigation/HistoryNavigationPanel/index.tsx index 091bac8bc..c25e22113 100644 --- a/src/components/Navigation/HistoryNavigationPanel/index.tsx +++ b/src/components/Navigation/HistoryNavigationPanel/index.tsx @@ -3,6 +3,7 @@ import { Location, useLocation, useNavigate } from "react-router-dom"; import { useTheme } from "styled-components"; import { history } from "../../../containers/Main/history"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { HistoryEntry } from "../../../history/History"; import { changeScope } from "../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -22,9 +23,9 @@ import * as s from "./styles"; export const HistoryNavigationPanel = () => { const { goBack, goForward, goTo, canGoBack, canGoForward } = useHistory(); const navigate = useNavigate(); - const environments = useGlobalStore.use.environments(); - const environment = useGlobalStore.use.environment(); - const scope = useGlobalStore.use.scope(); + const environments = useGlobalStore().environments; + const environment = useGlobalStore().environment; + const scope = useScopeStore().scope; const location = useLocation() as Location; const theme = useTheme(); const updateBrowserLocation = useBrowserLocationUpdater(); diff --git a/src/components/Navigation/KebabMenu/index.tsx b/src/components/Navigation/KebabMenu/index.tsx index 18aa96ee4..9136eebad 100644 --- a/src/components/Navigation/KebabMenu/index.tsx +++ b/src/components/Navigation/KebabMenu/index.tsx @@ -19,9 +19,9 @@ import { OpenDashboardPayload, OpenDocumentationPayload } from "../types"; import { KebabMenuProps } from "./types"; export const KebabMenu = ({ onClose }: KebabMenuProps) => { - const backendInfo = useGlobalStore.use.backendInfo(); - const digmaStatus = useGlobalStore.use.digmaStatus(); - const environment = useGlobalStore.use.environment(); + const backendInfo = useGlobalStore().backendInfo; + const digmaStatus = useGlobalStore().digmaStatus; + const environment = useGlobalStore().environment; const handleOnboardingClick = () => { sendUserActionTrackingEvent(trackingEvents.ONBOARDING_LINK_CLICKED); diff --git a/src/components/Navigation/Tabs/index.tsx b/src/components/Navigation/Tabs/index.tsx index 30df10c16..d644de3dc 100644 --- a/src/components/Navigation/Tabs/index.tsx +++ b/src/components/Navigation/Tabs/index.tsx @@ -1,6 +1,7 @@ import { useMemo } from "react"; import { useLocation } from "react-router-dom"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -85,8 +86,8 @@ const getIsNewIndicatorVisible = ( ); export const Tabs = () => { - const scope = useGlobalStore.use.scope(); - const insightStats = useGlobalStore.use.insightStats(); + const scope = useScopeStore().scope; + const insightStats = useGlobalStore().insightStats; const location = useLocation(); const { goTo } = useHistory(); diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index fe1d872b0..ea0388f2e 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -16,6 +16,7 @@ import { ThreeDotsIcon } from "../common/icons/ThreeDotsIcon"; // import { Tooltip } from "../common/v3/Tooltip"; // import { CodeButton } from "./CodeButton"; // import { CodeButtonMenu } from "./CodeButtonMenu"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { EnvironmentBar } from "./EnvironmentBar"; import { HistoryNavigationPanel } from "./HistoryNavigationPanel"; import { KebabMenu } from "./KebabMenu"; @@ -78,11 +79,11 @@ import { // }; export const Navigation = () => { - const environments = useGlobalStore.use.environments(); - const environment = useGlobalStore.use.environment(); - const scope = useGlobalStore.use.scope(); - const userInfo = useGlobalStore.use.userInfo(); - const backendInfo = useGlobalStore.use.backendInfo(); + const environments = useGlobalStore().environments; + const environment = useGlobalStore().environment; + const scope = useScopeStore().scope; + const userInfo = useGlobalStore().userInfo; + const backendInfo = useGlobalStore().backendInfo; const [selectedEnvironment, setSelectedEnvironment] = useState(environment); const [codeContext, setCodeContext] = useState(); // const [isCodeButtonMenuOpen, setIsCodeButtonMenuOpen] = useState(false); diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx index 173e51bc4..1b2c63dd0 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx @@ -88,20 +88,20 @@ const renderEnvironmentVariables = ( }; export const EnvironmentVariableCode = () => { - const environment = useGlobalStore.use.environment(); - const backendInfo = useGlobalStore.use.backendInfo(); - + const environment = useGlobalStore().environment; + const backendInfo = useGlobalStore().backendInfo; + const isMicrometerProject = Boolean(useGlobalStore().isMicrometerProject); + const userId = useGlobalStore().userInfo?.id; + const runConfig = useGlobalStore().runConfig; if (!environment || !backendInfo) { return null; } const isCentralizedDeployment = backendInfo.centralize; - const isMicrometerProject = Boolean(useGlobalStore.use.isMicrometerProject()); - const userId = useGlobalStore.use.userInfo()?.id; const environmentId = environment.id; const environmentName = environment.name; const environmentType = environment.type ?? undefined; - const runConfig = useGlobalStore.use.runConfig(); + const isRunConfigSupported = Boolean(runConfig?.isRunConfigurationSupported); const javaToolOptions = isRunConfigSupported ? undefined diff --git a/src/components/Tests/TestTicket/index.tsx b/src/components/Tests/TestTicket/index.tsx index 8dbee9878..f308470a9 100644 --- a/src/components/Tests/TestTicket/index.tsx +++ b/src/components/Tests/TestTicket/index.tsx @@ -23,7 +23,7 @@ export const TestTicket = ({ contextsSpanCodeObjectIds } = test; const summary = `"${name}" test failed`; - const jaegerURL = useGlobalStore.use.jaegerURL() ?? ""; + const jaegerURL = useGlobalStore().jaegerURL ?? ""; const relatedSpans = spanContexts .filter((x) => contextsSpanCodeObjectIds.includes(x.spanCodeObjectId)) diff --git a/src/components/Tests/index.tsx b/src/components/Tests/index.tsx index d679dbba6..b0d3ddb42 100644 --- a/src/components/Tests/index.tsx +++ b/src/components/Tests/index.tsx @@ -1,6 +1,7 @@ import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"; import { actions as globalActions } from "../../actions"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../dispatcher"; import { usePrevious } from "../../hooks/usePrevious"; import { isNull } from "../../typeGuards/isNull"; @@ -65,9 +66,9 @@ export const Tests = () => { const [isInitialLoading, setIsInitialLoading] = useState(false); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); - const userRegistrationEmail = useGlobalStore.use.userRegistrationEmail(); - const scope = useGlobalStore.use.scope(); - const environments = useGlobalStore.use.environments(); + const userRegistrationEmail = useGlobalStore().userRegistrationEmail; + const scope = useScopeStore().scope; + const environments = useGlobalStore().environments; const [testToOpenTicketPopup, setTestToOpenTicketPopup] = useState(); const previousUserRegistrationEmail = usePrevious(userRegistrationEmail); useState(false); diff --git a/src/components/common/App/index.tsx b/src/components/common/App/index.tsx index dbf09f4de..d0e4ec209 100644 --- a/src/components/common/App/index.tsx +++ b/src/components/common/App/index.tsx @@ -2,7 +2,7 @@ import { ErrorInfo, useContext, useEffect, useState } from "react"; import { ErrorBoundary } from "react-error-boundary"; import { ThemeProvider } from "styled-components"; import { actions } from "../../../actions"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useStore } from "../../../containers/Main/stores/useStore"; import { dispatcher } from "../../../dispatcher"; import { Theme } from "../../../globals"; import { logger } from "../../../logging"; @@ -62,43 +62,27 @@ export const App = ({ theme, children, id }: AppProps) => { const [mainFont, setMainFont] = useState(defaultMainFont); const [codeFont, setCodeFont] = useState(defaultCodeFont); const [config, setConfig] = useState(useContext(ConfigContext)); - const setJaegerURL = useGlobalStore((state) => state.setJaegerURL); - const setIsJaegerEnabled = useGlobalStore( - (state) => state.setIsJaegerEnabled - ); - const setIsDigmaEngineInstalled = useGlobalStore( - (state) => state.setIsDigmaEngineInstalled - ); - const setIsDigmaEngineRunning = useGlobalStore( - (state) => state.setIsDigmaEngineRunning - ); - const setDigmaStatus = useGlobalStore((state) => state.setDigmaStatus); - const setIsDockerInstalled = useGlobalStore( - (state) => state.setIsDockerInstalled - ); - const setIsDockerComposeInstalled = useGlobalStore( - (state) => state.setIsDockerComposeInstalled - ); - const setDigmaApiUrl = useGlobalStore((state) => state.setDigmaApiUrl); - const setUserRegistrationEmail = useGlobalStore( - (state) => state.setUserRegistrationEmail - ); - const setIsObservabilityEnabled = useGlobalStore( - (state) => state.setIsObservabilityEnabled - ); - const setBackendInfo = useGlobalStore((state) => state.setBackendInfo); - const setEnvironments = useGlobalStore((state) => state.setEnvironments); - const setEnvironment = useGlobalStore((state) => state.setEnvironment); - const setScope = useGlobalStore((state) => state.setScope); - const setUserInfo = useGlobalStore((state) => state.setUserInfo); - const setInsightStats = useGlobalStore((state) => state.setInsightStats); - const setRunConfiguration = useGlobalStore((state) => state.setRunConfig); - const setIsMicrometerProject = useGlobalStore( - (state) => state.setIsMicrometerProject - ); - const setIsDigmathonGameFinished = useGlobalStore( - (state) => state.setIsDigmathonGameFinished - ); + const { + setJaegerURL, + setIsJaegerEnabled, + setIsDigmaEngineInstalled, + setIsDigmaEngineRunning, + setDigmaStatus, + setIsDockerInstalled, + setIsDockerComposeInstalled, + setDigmaApiUrl, + setUserRegistrationEmail, + setIsObservabilityEnabled, + setBackendInfo, + setEnvironments, + setEnvironment, + setScope, + setUserInfo, + setInsightStats, + setRunConfig, + setIsDigmathonGameFinished, + setIsMicrometerProject + } = useStore.getState(); const handleError = (error: Error, info: ErrorInfo) => { logger.error(error, info); @@ -347,7 +331,7 @@ export const App = ({ theme, children, id }: AppProps) => { ...config, runConfig: data as RunConfiguration })); - setRunConfiguration(data as RunConfiguration); + setRunConfig(data as RunConfiguration); }; dispatcher.addActionListener(actions.SET_THEME, handleSetTheme); diff --git a/src/components/common/ImpactScore/index.tsx b/src/components/common/ImpactScore/index.tsx index a8a89e554..8eea881ba 100644 --- a/src/components/common/ImpactScore/index.tsx +++ b/src/components/common/ImpactScore/index.tsx @@ -52,7 +52,7 @@ export const ImpactScore = ({ showIndicator, indicatorPosition }: ImpactScoreProps) => { - const backendInfo = useGlobalStore.use.backendInfo(); + const backendInfo = useGlobalStore().backendInfo; let scoreIndicatorPosition: "start" | "end" | undefined; diff --git a/src/containers/Main/slices/createGlobalSlice.ts b/src/containers/Main/slices/createGlobalSlice.ts index b4868cf0d..5be91d191 100644 --- a/src/containers/Main/slices/createGlobalSlice.ts +++ b/src/containers/Main/slices/createGlobalSlice.ts @@ -90,37 +90,6 @@ export const initialState: GlobalState = { persistedState: null }; -export interface GlobalActions { - setDigmaApiUrl: (url: string) => void; - setDigmaApiProxyPrefix: (prefix: string) => void; - setDigmaStatus: (status: DigmaStatus) => void; - setIsDigmaEngineInstalled: (isInstalled: boolean) => void; - setIsDigmaEngineRunning: (isRunning: boolean) => void; - setIsDockerInstalled: (isInstalled: boolean) => void; - setIsDockerComposeInstalled: (isInstalled: boolean) => void; - setBackendInfo: (info: BackendInfo) => void; - setJaegerURL: (url: string) => void; - setIsJaegerEnabled: (isEnabled: boolean) => void; - setIsMicrometerProject: (isMicrometer: boolean) => void; - setRunConfig: (config: RunConfiguration) => void; - setIsObservabilityEnabled: (isEnabled: boolean) => void; - setProductKey: (key: string) => void; - setIsDigmathonModeEnabled: (isEnabled: boolean) => void; - setIsDigmathonGameFinished: (isFinished: boolean) => void; - setEnvironment: (environment: Environment | null) => void; - setEnvironments: (environments: Environment[]) => void; - setInsightStats: (stats: InsightStats) => void; - setUserId: (userId: string) => void; - setUserInfo: (userInfo: UserInfo) => void; - setUserEmail: (email: string) => void; - setUserRegistrationEmail: (email: string) => void; - setPersistedState: (state: PersistedState) => void; - setSelectedServices: (services: string[]) => void; - reset: () => void; -} - -export type GlobalSlice = GlobalActions & GlobalState; - const set = (update: Partial) => (state: GlobalState) => ({ ...state, ...update @@ -131,40 +100,44 @@ export const createGlobalSlice = () => name: "global", value: initialState, actions: { - setDigmaApiUrl: (url) => set({ digmaApiUrl: url }), - setDigmaApiProxyPrefix: (prefix) => set({ digmaApiProxyPrefix: prefix }), - setDigmaStatus: (status) => set({ digmaStatus: status }), - setIsDigmaEngineInstalled: (isInstalled) => + setDigmaApiUrl: (url: string) => set({ digmaApiUrl: url }), + setDigmaApiProxyPrefix: (prefix: string) => + set({ digmaApiProxyPrefix: prefix }), + setDigmaStatus: (status: DigmaStatus) => set({ digmaStatus: status }), + setIsDigmaEngineInstalled: (isInstalled: boolean) => set({ isDigmaEngineInstalled: isInstalled }), - setIsDigmaEngineRunning: (isRunning) => + setIsDigmaEngineRunning: (isRunning: boolean) => set({ isDigmaEngineRunning: isRunning }), - setIsDockerInstalled: (isInstalled) => + setIsDockerInstalled: (isInstalled: boolean) => set({ isDockerInstalled: isInstalled }), - setIsDockerComposeInstalled: (isInstalled) => + setIsDockerComposeInstalled: (isInstalled: boolean) => set({ isDockerComposeInstalled: isInstalled }), - setBackendInfo: (info) => set({ backendInfo: info }), - setJaegerURL: (url) => set({ jaegerURL: url }), - setIsJaegerEnabled: (isEnabled) => set({ isJaegerEnabled: isEnabled }), - setIsMicrometerProject: (isMicrometer) => + setBackendInfo: (info: BackendInfo) => set({ backendInfo: info }), + setJaegerURL: (url: string) => set({ jaegerURL: url }), + setIsJaegerEnabled: (isEnabled: boolean) => + set({ isJaegerEnabled: isEnabled }), + setIsMicrometerProject: (isMicrometer: boolean) => set({ isMicrometerProject: isMicrometer }), - setRunConfig: (config) => set({ runConfig: config }), - setIsObservabilityEnabled: (isEnabled) => + setRunConfig: (config: RunConfiguration) => set({ runConfig: config }), + setIsObservabilityEnabled: (isEnabled: boolean) => set({ isObservabilityEnabled: isEnabled }), - setProductKey: (key) => set({ productKey: key }), - setIsDigmathonModeEnabled: (isEnabled) => + setProductKey: (key: string) => set({ productKey: key }), + setIsDigmathonModeEnabled: (isEnabled: boolean) => set({ isDigmathonModeEnabled: isEnabled }), - setIsDigmathonGameFinished: (isFinished) => + setIsDigmathonGameFinished: (isFinished: boolean) => set({ isDigmathonGameFinished: isFinished }), - setEnvironment: (environment) => set({ environment }), - setEnvironments: (environments) => set({ environments }), - setInsightStats: (stats) => set({ insightStats: stats }), - setUserId: (userId) => set({ userId }), - setUserInfo: (userInfo) => set({ userInfo }), + setEnvironment: (environment: Environment | null) => set({ environment }), + setEnvironments: (environments: Environment[]) => set({ environments }), + setInsightStats: (stats: InsightStats) => set({ insightStats: stats }), + setUserId: (userId: string) => set({ userId }), + setUserInfo: (userInfo: UserInfo) => set({ userInfo }), setUserEmail: (email) => set({ userEmail: email }), - setUserRegistrationEmail: (email) => + setUserRegistrationEmail: (email: string) => set({ userRegistrationEmail: email }), - setPersistedState: (state) => set({ persistedState: state }), - setSelectedServices: (services) => set({ selectedServices: services }), + setPersistedState: (state: PersistedState) => + set({ persistedState: state }), + setSelectedServices: (services: string[]) => + set({ selectedServices: services }), reset: () => set(initialState) } }); diff --git a/src/containers/Main/slices/createInsightSlice.ts b/src/containers/Main/slices/createInsightSlice.ts index 5be66ac64..0ddac7c73 100644 --- a/src/containers/Main/slices/createInsightSlice.ts +++ b/src/containers/Main/slices/createInsightSlice.ts @@ -45,21 +45,6 @@ export const initialState: InsightsSlice = { areIssuesFiltersLoading: false }; -export interface InsightsActions { - setData: (data: InsightsData) => void; - setIsDataLoading: (isDataLoading: boolean) => void; - setSearch: (search: string) => void; - setPage: (page: number) => void; - setSorting: (sorting: Sorting) => void; - setViewMode: (viewMode: ViewMode) => void; - setFilters: (filters: InsightFilterType[]) => void; - setFilteredInsightTypes: (insightTypes: string[]) => void; - setInsightViewType: (insightViewType: InsightViewType) => void; - setIssuesFilters: (filters: IssuesFiltersData) => void; - setAreIssuesFiltersLoading: (areIssuesFiltersLoading: boolean) => void; - reset: () => void; -} - const set = (update: Partial) => (state: InsightsSlice) => ({ ...state, ...update @@ -70,18 +55,20 @@ export const createInsightsSlice = () => name: "insights", value: initialState, actions: { - setData: (data) => set({ data }), - setIsDataLoading: (isDataLoading) => set({ isDataLoading }), - setSearch: (search) => set({ search }), - setPage: (page) => set({ page }), - setSorting: (sorting) => set({ sorting }), - setViewMode: (viewMode) => set({ viewMode }), - setFilters: (filters) => set({ filters }), - setFilteredInsightTypes: (filteredInsightTypes) => + setData: (data: InsightsData) => set({ data }), + setIsDataLoading: (isDataLoading: boolean) => set({ isDataLoading }), + setSearch: (search: string) => set({ search }), + setPage: (page: number) => set({ page }), + setSorting: (sorting: Sorting) => set({ sorting }), + setViewMode: (viewMode: ViewMode) => set({ viewMode }), + setFilters: (filters: InsightFilterType[]) => set({ filters }), + setFilteredInsightTypes: (filteredInsightTypes: string[]) => set({ filteredInsightTypes }), - setInsightViewType: (insightViewType) => set({ insightViewType }), - setIssuesFilters: (issuesFilters) => set({ issuesFilters }), - setAreIssuesFiltersLoading: (areIssuesFiltersLoading) => + setInsightViewType: (insightViewType: InsightViewType) => + set({ insightViewType }), + setIssuesFilters: (issuesFilters: IssuesFiltersData) => + set({ issuesFilters }), + setAreIssuesFiltersLoading: (areIssuesFiltersLoading: boolean) => set({ areIssuesFiltersLoading }), reset: () => set(initialState) } diff --git a/src/containers/Main/slices/createScopeSlice.ts b/src/containers/Main/slices/createScopeSlice.ts index 2da9c2552..3e09ce45b 100644 --- a/src/containers/Main/slices/createScopeSlice.ts +++ b/src/containers/Main/slices/createScopeSlice.ts @@ -9,12 +9,6 @@ const initialState: ScopeState = { scope: null }; -interface ScopeActions { - setScope: (scope: Scope) => void; -} - -export type ScopeSlice = ScopeActions & ScopeState; - export const createScopeSlice = () => createSlice({ name: "scope", diff --git a/src/containers/Main/stores/useGlobalStore.ts b/src/containers/Main/stores/useGlobalStore.ts index 000bb3544..62d0e69b2 100644 --- a/src/containers/Main/stores/useGlobalStore.ts +++ b/src/containers/Main/stores/useGlobalStore.ts @@ -1,126 +1,6 @@ -import { - BackendInfo, - DigmaStatus, - Environment, - InsightStats, - PersistedState, - RunConfiguration, - Scope, - UserInfo -} from "../../../components/common/App/types"; -import { isBoolean } from "../../../typeGuards/isBoolean"; -import { isEnvironment } from "../../../typeGuards/isEnvironment"; -import { isString } from "../../../typeGuards/isString"; import { useStore } from "./useStore"; -export interface GlobalState { - digmaApiUrl: string | null; - digmaApiProxyPrefix: string | null; - digmaStatus: DigmaStatus | null; - isDigmaEngineInstalled: boolean | null; - isDigmaEngineRunning: boolean | null; - isDockerInstalled: boolean | null; - isDockerComposeInstalled: boolean | null; - backendInfo: BackendInfo | null; - jaegerURL: string | null; - isJaegerEnabled: boolean | null; - isMicrometerProject: boolean | null; - runConfig: RunConfiguration | null; - isObservabilityEnabled: boolean | null; - productKey: string | null; - isDigmathonModeEnabled: boolean | null; - isDigmathonGameFinished: boolean | null; - environment: Environment | null; - environments: Environment[] | null; - scope: Scope | null; - insightStats: InsightStats | null; - userId: string | null; - userInfo: UserInfo | null; - userEmail: string | null; - userRegistrationEmail: string | null; - persistedState: PersistedState | null; - selectedServices: string[] | null; -} - -export const initialState: GlobalState = { - digmaApiUrl: isString(window.digmaApiUrl) ? window.digmaApiUrl : null, - digmaApiProxyPrefix: isString(window.digmaApiProxyPrefix) - ? window.digmaApiProxyPrefix - : null, - digmaStatus: null, - isDigmaEngineInstalled: isBoolean(window.isObservabilityEnabled) - ? window.isObservabilityEnabled - : null, - isDigmaEngineRunning: isBoolean(window.isDigmaEngineRunning) - ? window.isDigmaEngineRunning - : null, - isDockerInstalled: isBoolean(window.isDockerInstalled) - ? window.isDockerInstalled - : null, - isDockerComposeInstalled: isBoolean(window.isDockerComposeInstalled) - ? window.isDockerComposeInstalled - : null, - backendInfo: null, - jaegerURL: isString(window.jaegerURL) ? window.jaegerURL : null, - isJaegerEnabled: isBoolean(window.isJaegerEnabled) - ? window.isJaegerEnabled - : null, - isMicrometerProject: isBoolean(window.isMicrometerProject) - ? window.isMicrometerProject - : null, - runConfig: null, - isObservabilityEnabled: isBoolean(window.isObservabilityEnabled) - ? window.isObservabilityEnabled - : null, - productKey: isString(window.productKey) ? window.productKey : null, - isDigmathonModeEnabled: isBoolean(window.isDigmathonModeEnabled) - ? window.isDigmathonModeEnabled - : null, - isDigmathonGameFinished: isBoolean(window.isDigmathonGameFinished) - ? window.isDigmathonGameFinished - : null, - environment: isEnvironment(window.environment) ? window.environment : null, - environments: null, - scope: null, - insightStats: null, - userId: isString(window.userId) ? window.userId : null, - userInfo: null, - userEmail: isString(window.userEmail) ? window.userEmail : null, - userRegistrationEmail: isString(window.userRegistrationEmail) - ? window.userRegistrationEmail - : null, - selectedServices: null, - persistedState: null +export const useGlobalStore = () => { + const state = useStore.getState(); + return state.global; }; - -export interface GlobalActions { - setDigmaApiUrl: (url: string) => void; - setDigmaApiProxyPrefix: (prefix: string) => void; - setDigmaStatus: (status: DigmaStatus) => void; - setIsDigmaEngineInstalled: (isInstalled: boolean) => void; - setIsDigmaEngineRunning: (isRunning: boolean) => void; - setIsDockerInstalled: (isInstalled: boolean) => void; - setIsDockerComposeInstalled: (isInstalled: boolean) => void; - setBackendInfo: (info: BackendInfo) => void; - setJaegerURL: (url: string) => void; - setIsJaegerEnabled: (isEnabled: boolean) => void; - setIsMicrometerProject: (isMicrometer: boolean) => void; - setRunConfig: (config: RunConfiguration) => void; - setIsObservabilityEnabled: (isEnabled: boolean) => void; - setProductKey: (key: string) => void; - setIsDigmathonModeEnabled: (isEnabled: boolean) => void; - setIsDigmathonGameFinished: (isFinished: boolean) => void; - setEnvironment: (environment: Environment | null) => void; - setEnvironments: (environments: Environment[]) => void; - setScope: (scope: Scope) => void; - setInsightStats: (stats: InsightStats) => void; - setUserId: (userId: string) => void; - setUserInfo: (userInfo: UserInfo) => void; - setUserEmail: (email: string) => void; - setUserRegistrationEmail: (email: string) => void; - setPersistedState: (state: PersistedState) => void; - setSelectedServices: (services: string[]) => void; - reset: () => void; -} - -export const useGlobalStore = () => useStore((state) => state.global); diff --git a/src/containers/Main/stores/useScopeStore.ts b/src/containers/Main/stores/useScopeStore.ts new file mode 100644 index 000000000..7267d547f --- /dev/null +++ b/src/containers/Main/stores/useScopeStore.ts @@ -0,0 +1,6 @@ +import { useStore } from "./useStore"; + +export const useScopeStore = () => { + const state = useStore.getState(); + return state.scope; +}; diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts index 5e8f34cef..983daa8b6 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/containers/Main/stores/useStore.ts @@ -1,21 +1,9 @@ import { create } from "zustand"; import { withSlices } from "zustand-slices"; -import { createGlobalSlice, GlobalSlice } from "../slices/createGlobalSlice"; -import { - createInsightsSlice, - InsightsSlice -} from "../slices/createInsightSlice"; -import { createScopeSlice, ScopeSlice } from "../slices/createScopeSlice"; -import { createSelectors } from "./createSelectors"; +import { createGlobalSlice } from "../slices/createGlobalSlice"; +import { createInsightsSlice } from "../slices/createInsightSlice"; +import { createScopeSlice } from "../slices/createScopeSlice"; -export interface StoreState { - insights: InsightsSlice; - global: GlobalSlice; - scope: ScopeSlice; -} - -export const useStore = createSelectors( - create( - withSlices(createScopeSlice(), createGlobalSlice(), createInsightsSlice()) - ) +export const useStore = create( + withSlices(createGlobalSlice(), createInsightsSlice(), createScopeSlice()) ); From 3d3ffa94e1f7f2ca96948aa8835f4121736c6b44 Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 29 Aug 2024 18:07:02 +0300 Subject: [PATCH 03/18] Change slice --- .../Main/slices/createGlobalSlice.ts | 91 +++++++++---------- .../Main/slices/createInsightSlice.ts | 45 +++++---- .../Main/slices/createScopeSlice.ts | 23 +++-- src/containers/Main/stores/useStore.ts | 2 +- 4 files changed, 79 insertions(+), 82 deletions(-) diff --git a/src/containers/Main/slices/createGlobalSlice.ts b/src/containers/Main/slices/createGlobalSlice.ts index 5be91d191..f59b23aaf 100644 --- a/src/containers/Main/slices/createGlobalSlice.ts +++ b/src/containers/Main/slices/createGlobalSlice.ts @@ -95,49 +95,48 @@ const set = (update: Partial) => (state: GlobalState) => ({ ...update }); -export const createGlobalSlice = () => - createSlice({ - name: "global", - value: initialState, - actions: { - setDigmaApiUrl: (url: string) => set({ digmaApiUrl: url }), - setDigmaApiProxyPrefix: (prefix: string) => - set({ digmaApiProxyPrefix: prefix }), - setDigmaStatus: (status: DigmaStatus) => set({ digmaStatus: status }), - setIsDigmaEngineInstalled: (isInstalled: boolean) => - set({ isDigmaEngineInstalled: isInstalled }), - setIsDigmaEngineRunning: (isRunning: boolean) => - set({ isDigmaEngineRunning: isRunning }), - setIsDockerInstalled: (isInstalled: boolean) => - set({ isDockerInstalled: isInstalled }), - setIsDockerComposeInstalled: (isInstalled: boolean) => - set({ isDockerComposeInstalled: isInstalled }), - setBackendInfo: (info: BackendInfo) => set({ backendInfo: info }), - setJaegerURL: (url: string) => set({ jaegerURL: url }), - setIsJaegerEnabled: (isEnabled: boolean) => - set({ isJaegerEnabled: isEnabled }), - setIsMicrometerProject: (isMicrometer: boolean) => - set({ isMicrometerProject: isMicrometer }), - setRunConfig: (config: RunConfiguration) => set({ runConfig: config }), - setIsObservabilityEnabled: (isEnabled: boolean) => - set({ isObservabilityEnabled: isEnabled }), - setProductKey: (key: string) => set({ productKey: key }), - setIsDigmathonModeEnabled: (isEnabled: boolean) => - set({ isDigmathonModeEnabled: isEnabled }), - setIsDigmathonGameFinished: (isFinished: boolean) => - set({ isDigmathonGameFinished: isFinished }), - setEnvironment: (environment: Environment | null) => set({ environment }), - setEnvironments: (environments: Environment[]) => set({ environments }), - setInsightStats: (stats: InsightStats) => set({ insightStats: stats }), - setUserId: (userId: string) => set({ userId }), - setUserInfo: (userInfo: UserInfo) => set({ userInfo }), - setUserEmail: (email) => set({ userEmail: email }), - setUserRegistrationEmail: (email: string) => - set({ userRegistrationEmail: email }), - setPersistedState: (state: PersistedState) => - set({ persistedState: state }), - setSelectedServices: (services: string[]) => - set({ selectedServices: services }), - reset: () => set(initialState) - } - }); +export const createGlobalSlice = createSlice({ + name: "global", + value: initialState, + actions: { + setDigmaApiUrl: (url: string) => set({ digmaApiUrl: url }), + setDigmaApiProxyPrefix: (prefix: string) => + set({ digmaApiProxyPrefix: prefix }), + setDigmaStatus: (status: DigmaStatus) => set({ digmaStatus: status }), + setIsDigmaEngineInstalled: (isInstalled: boolean) => + set({ isDigmaEngineInstalled: isInstalled }), + setIsDigmaEngineRunning: (isRunning: boolean) => + set({ isDigmaEngineRunning: isRunning }), + setIsDockerInstalled: (isInstalled: boolean) => + set({ isDockerInstalled: isInstalled }), + setIsDockerComposeInstalled: (isInstalled: boolean) => + set({ isDockerComposeInstalled: isInstalled }), + setBackendInfo: (info: BackendInfo) => set({ backendInfo: info }), + setJaegerURL: (url: string) => set({ jaegerURL: url }), + setIsJaegerEnabled: (isEnabled: boolean) => + set({ isJaegerEnabled: isEnabled }), + setIsMicrometerProject: (isMicrometer: boolean) => + set({ isMicrometerProject: isMicrometer }), + setRunConfig: (config: RunConfiguration) => set({ runConfig: config }), + setIsObservabilityEnabled: (isEnabled: boolean) => + set({ isObservabilityEnabled: isEnabled }), + setProductKey: (key: string) => set({ productKey: key }), + setIsDigmathonModeEnabled: (isEnabled: boolean) => + set({ isDigmathonModeEnabled: isEnabled }), + setIsDigmathonGameFinished: (isFinished: boolean) => + set({ isDigmathonGameFinished: isFinished }), + setEnvironment: (environment: Environment | null) => set({ environment }), + setEnvironments: (environments: Environment[]) => set({ environments }), + setInsightStats: (stats: InsightStats) => set({ insightStats: stats }), + setUserId: (userId: string) => set({ userId }), + setUserInfo: (userInfo: UserInfo) => set({ userInfo }), + setUserEmail: (email) => set({ userEmail: email }), + setUserRegistrationEmail: (email: string) => + set({ userRegistrationEmail: email }), + setPersistedState: (state: PersistedState) => + set({ persistedState: state }), + setSelectedServices: (services: string[]) => + set({ selectedServices: services }), + reset: () => set(initialState) + } +}); diff --git a/src/containers/Main/slices/createInsightSlice.ts b/src/containers/Main/slices/createInsightSlice.ts index 0ddac7c73..95b7e0bd8 100644 --- a/src/containers/Main/slices/createInsightSlice.ts +++ b/src/containers/Main/slices/createInsightSlice.ts @@ -50,26 +50,25 @@ const set = (update: Partial) => (state: InsightsSlice) => ({ ...update }); -export const createInsightsSlice = () => - createSlice({ - name: "insights", - value: initialState, - actions: { - setData: (data: InsightsData) => set({ data }), - setIsDataLoading: (isDataLoading: boolean) => set({ isDataLoading }), - setSearch: (search: string) => set({ search }), - setPage: (page: number) => set({ page }), - setSorting: (sorting: Sorting) => set({ sorting }), - setViewMode: (viewMode: ViewMode) => set({ viewMode }), - setFilters: (filters: InsightFilterType[]) => set({ filters }), - setFilteredInsightTypes: (filteredInsightTypes: string[]) => - set({ filteredInsightTypes }), - setInsightViewType: (insightViewType: InsightViewType) => - set({ insightViewType }), - setIssuesFilters: (issuesFilters: IssuesFiltersData) => - set({ issuesFilters }), - setAreIssuesFiltersLoading: (areIssuesFiltersLoading: boolean) => - set({ areIssuesFiltersLoading }), - reset: () => set(initialState) - } - }); +export const createInsightsSlice = createSlice({ + name: "insights", + value: initialState, + actions: { + setData: (data: InsightsData) => set({ data }), + setIsDataLoading: (isDataLoading: boolean) => set({ isDataLoading }), + setSearch: (search: string) => set({ search }), + setPage: (page: number) => set({ page }), + setSorting: (sorting: Sorting) => set({ sorting }), + setViewMode: (viewMode: ViewMode) => set({ viewMode }), + setFilters: (filters: InsightFilterType[]) => set({ filters }), + setFilteredInsightTypes: (filteredInsightTypes: string[]) => + set({ filteredInsightTypes }), + setInsightViewType: (insightViewType: InsightViewType) => + set({ insightViewType }), + setIssuesFilters: (issuesFilters: IssuesFiltersData) => + set({ issuesFilters }), + setAreIssuesFiltersLoading: (areIssuesFiltersLoading: boolean) => + set({ areIssuesFiltersLoading }), + reset: () => set(initialState) + } +}); diff --git a/src/containers/Main/slices/createScopeSlice.ts b/src/containers/Main/slices/createScopeSlice.ts index 3e09ce45b..c62ef2423 100644 --- a/src/containers/Main/slices/createScopeSlice.ts +++ b/src/containers/Main/slices/createScopeSlice.ts @@ -9,16 +9,15 @@ const initialState: ScopeState = { scope: null }; -export const createScopeSlice = () => - createSlice({ - name: "scope", - value: initialState, - actions: { - setScope: (scope: Scope) => (state) => { - return state.scope?.span?.spanCodeObjectId !== - scope.span?.spanCodeObjectId - ? { ...state, scope, page: 0, search: "" } - : state; - } +export const createScopeSlice = createSlice({ + name: "scope", + value: initialState, + actions: { + setScope: (scope: Scope) => (state) => { + return state.scope?.span?.spanCodeObjectId !== + scope.span?.spanCodeObjectId + ? { ...state, scope, page: 0, search: "" } + : state; } - }); + } +}); diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts index 983daa8b6..4689a5da0 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/containers/Main/stores/useStore.ts @@ -5,5 +5,5 @@ import { createInsightsSlice } from "../slices/createInsightSlice"; import { createScopeSlice } from "../slices/createScopeSlice"; export const useStore = create( - withSlices(createGlobalSlice(), createInsightsSlice(), createScopeSlice()) + withSlices(createGlobalSlice, createInsightsSlice, createScopeSlice) ); From f1cdb49904ccebc1d5968e7507d605bd29d8c4ab Mon Sep 17 00:00:00 2001 From: olehp Date: Thu, 29 Aug 2024 19:52:39 +0300 Subject: [PATCH 04/18] Update ui --- .../InsightsCatalog/FilterPanel/index.tsx | 5 +- .../Insights/InsightsCatalog/index.tsx | 35 +++++--- .../Insights/Issues/IssuesFilter/index.tsx | 9 +- .../Insights/Issues/useIssuesFilters.ts | 15 ++-- src/components/Insights/useInsightsData.ts | 32 +++---- .../{createGlobalSlice.ts => globalSlice.ts} | 6 +- ...{createInsightSlice.ts => insightSlice.ts} | 8 +- .../{createScopeSlice.ts => scopeSlice.ts} | 2 +- src/containers/Main/stores/useGlobalStore.ts | 3 +- .../Main/stores/useInsightsStore.ts | 83 +------------------ src/containers/Main/stores/useScopeStore.ts | 3 +- src/containers/Main/stores/useStore.ts | 11 +-- 12 files changed, 72 insertions(+), 140 deletions(-) rename src/containers/Main/slices/{createGlobalSlice.ts => globalSlice.ts} (97%) rename src/containers/Main/slices/{createInsightSlice.ts => insightSlice.ts} (90%) rename src/containers/Main/slices/{createScopeSlice.ts => scopeSlice.ts} (91%) diff --git a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx index 79f06334c..a12cc3f56 100644 --- a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx +++ b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx @@ -1,4 +1,5 @@ import { useInsightsStore } from "../../../../containers/Main/stores/useInsightsStore"; +import { useStore } from "../../../../containers/Main/stores/useStore"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { InsightFilterType } from "../types"; import { FilterChip } from "./FilterChip"; @@ -10,8 +11,8 @@ export const FilterPanel = ({ allIssuesCount, unreadCount }: FilterPanelProps) => { - const filters = useInsightsStore.use.filters(); - const setFilters = useInsightsStore.use.setFilters(); + const filters = useInsightsStore().filters; + const setFilters = useStore.use.setFilters(); const handleFilterChipClick = (selectedFilter?: InsightFilterType) => { const newFilters = new Set(filters); diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index 1ad4b00e0..2d8b4d706 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -4,6 +4,7 @@ import { useTheme } from "styled-components"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; +import { useStore } from "../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../featureFlags"; import { useDebounce } from "../../../hooks/useDebounce"; import { usePersistence } from "../../../hooks/usePersistence"; @@ -66,20 +67,28 @@ export const InsightsCatalog = ({ onJiraTicketCreate, onRefresh }: InsightsCatalogProps) => { - const insightViewType = useInsightsStore.use.insightViewType(); - const mode = useInsightsStore.use.viewMode(); - const setMode = useInsightsStore.use.setViewMode(); - const page = useInsightsStore.use.page(); - const setPage = useInsightsStore.use.setPage(); - const searchInputValue = useInsightsStore.use.search(); - const setSearch = useInsightsStore.use.setSearch(); + const { + setViewMode: setMode, + setPage, + setSorting, + setSearch + } = useStore.getState(); + + const { + page, + search: searchInputValue, + sorting, + filters, + filteredInsightTypes, + data, + viewMode: mode, + insightViewType + } = useInsightsStore(); + + const { selectedServices } = useGlobalStore(); + const debouncedSearchInputValue = useDebounce(searchInputValue, 1000); - const sorting = useInsightsStore.use.sorting(); - const setSorting = useInsightsStore.use.setSorting(); - const filters = useInsightsStore.use.filters(); - const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); - const selectedServices = useGlobalStore().selectedServices; - const data = useInsightsStore.use.data(); + const insights = data?.insights ?? []; const totalCount = data?.totalCount ?? 0; const dismissedCount = data?.dismissedCount; diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx index ebdfced4c..11c4213a8 100644 --- a/src/components/Insights/Issues/IssuesFilter/index.tsx +++ b/src/components/Insights/Issues/IssuesFilter/index.tsx @@ -21,14 +21,11 @@ import * as s from "./styles"; import { trackingEvents } from "./tracking"; export const IssuesFilter = () => { - const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); + const { filteredInsightTypes, filters } = useInsightsStore(); const selectedServices = useGlobalStore().selectedServices; - const setFilteredInsightTypes = - useInsightsStore.use.setFilteredInsightTypes(); - const { setSelectedServices } = useStore.getState(); - const filters = useInsightsStore.use.filters(); + const { setSelectedServices, setFilteredInsightTypes, setFilters } = + useStore.getState(); const backendInfo = useGlobalStore().backendInfo; - const setFilters = useInsightsStore.use.setFilters(); const isCriticalOnly = useMemo( () => filters.includes("criticality"), [filters] diff --git a/src/components/Insights/Issues/useIssuesFilters.ts b/src/components/Insights/Issues/useIssuesFilters.ts index bce5bdfa1..453304692 100644 --- a/src/components/Insights/Issues/useIssuesFilters.ts +++ b/src/components/Insights/Issues/useIssuesFilters.ts @@ -3,6 +3,7 @@ import { DigmaMessageError } from "../../../api/types"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; +import { useStore } from "../../../containers/Main/stores/useStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { GetIssuesFiltersPayload } from "../../../types"; @@ -23,8 +24,14 @@ const getFilters = (query: GetIssuesFiltersQuery) => { }; export const useIssuesFilters = () => { - const data = useInsightsStore.use.issuesFilters(); - const setData = useInsightsStore.use.setIssuesFilters(); + const { + issuesFilters: data, + search, + filteredInsightTypes, + viewMode, + filters + } = useInsightsStore(); + const { setIssuesFilters: setData } = useStore.getState(); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); @@ -32,10 +39,6 @@ export const useIssuesFilters = () => { const environmentId = environment?.id; const scope = useScopeStore().scope; const spanCodeObjectId = scope?.span?.spanCodeObjectId ?? null; - const search = useInsightsStore.use.search(); - const filters = useInsightsStore.use.filters(); - const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); - const viewMode = useInsightsStore.use.viewMode(); const backendInfo = useGlobalStore().backendInfo; const query: GetIssuesFiltersQuery = useMemo( diff --git a/src/components/Insights/useInsightsData.ts b/src/components/Insights/useInsightsData.ts index 4edea0e60..af52a9150 100644 --- a/src/components/Insights/useInsightsData.ts +++ b/src/components/Insights/useInsightsData.ts @@ -4,6 +4,7 @@ import { DigmaMessageError } from "../../api/types"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../containers/Main/stores/useInsightsStore"; import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; +import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { getFeatureFlagValue } from "../../featureFlags"; import { usePrevious } from "../../hooks/usePrevious"; @@ -132,30 +133,31 @@ const getStats = ({ export const useInsightsData = ({ areFiltersRehydrated }: UseInsightsDataProps) => { - const data = useInsightsStore.use.data(); - const setData = useInsightsStore.use.setData(); - const isLoading = useInsightsStore.use.isDataLoading(); - const setIsLoading = useInsightsStore.use.setIsDataLoading(); + const scope = useScopeStore().scope; + const { + data, + search, + page, + sorting, + viewMode, + filters, + filteredInsightTypes, + isDataLoading: isLoading + } = useInsightsStore(); + const { setData, setIsDataLoading: setIsLoading } = useStore.getState(); + const { backendInfo, environment, selectedServices } = useGlobalStore(); + const isInitialLoading = !data && isLoading; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); - const backendInfo = useGlobalStore().backendInfo; - const scope = useScopeStore().scope; - const environment = useGlobalStore().environment; const environmentId = environment?.id; - const search = useInsightsStore.use.search(); - const page = useInsightsStore.use.page(); - const sorting = useInsightsStore.use.sorting(); - const viewMode = useInsightsStore.use.viewMode(); - const filters = useInsightsStore.use.filters(); - const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes(); - const selectedServices = useGlobalStore().selectedServices; + const filteredServices = useMemo( () => selectedServices ?? [], [selectedServices] ); - const insightViewType = useInsightsStore.use.insightViewType(); + const insightViewType = useInsightsStore().insightViewType; const spanCodeObjectId = scope?.span?.spanCodeObjectId ?? null; const showDismissed = viewMode === ViewMode.OnlyDismissed; const isAppReadyToGetData = useMemo( diff --git a/src/containers/Main/slices/createGlobalSlice.ts b/src/containers/Main/slices/globalSlice.ts similarity index 97% rename from src/containers/Main/slices/createGlobalSlice.ts rename to src/containers/Main/slices/globalSlice.ts index f59b23aaf..367513243 100644 --- a/src/containers/Main/slices/createGlobalSlice.ts +++ b/src/containers/Main/slices/globalSlice.ts @@ -12,7 +12,7 @@ import { isBoolean } from "../../../typeGuards/isBoolean"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; import { isString } from "../../../typeGuards/isString"; -export interface GlobalState { +interface GlobalState { digmaApiUrl: string | null; digmaApiProxyPrefix: string | null; digmaStatus: DigmaStatus | null; @@ -40,7 +40,7 @@ export interface GlobalState { selectedServices: string[] | null; } -export const initialState: GlobalState = { +const initialState: GlobalState = { digmaApiUrl: isString(window.digmaApiUrl) ? window.digmaApiUrl : null, digmaApiProxyPrefix: isString(window.digmaApiProxyPrefix) ? window.digmaApiProxyPrefix @@ -95,7 +95,7 @@ const set = (update: Partial) => (state: GlobalState) => ({ ...update }); -export const createGlobalSlice = createSlice({ +export const globalSlice = createSlice({ name: "global", value: initialState, actions: { diff --git a/src/containers/Main/slices/createInsightSlice.ts b/src/containers/Main/slices/insightSlice.ts similarity index 90% rename from src/containers/Main/slices/createInsightSlice.ts rename to src/containers/Main/slices/insightSlice.ts index 95b7e0bd8..84f7c8853 100644 --- a/src/containers/Main/slices/createInsightSlice.ts +++ b/src/containers/Main/slices/insightSlice.ts @@ -14,7 +14,7 @@ import { InsightViewType } from "../../../components/Insights/types"; -export interface InsightsSlice { +interface InsightsState { data: InsightsData | null; isDataLoading: boolean; search: string; @@ -28,7 +28,7 @@ export interface InsightsSlice { areIssuesFiltersLoading: boolean; } -export const initialState: InsightsSlice = { +const initialState: InsightsState = { data: null, isDataLoading: false, search: "", @@ -45,12 +45,12 @@ export const initialState: InsightsSlice = { areIssuesFiltersLoading: false }; -const set = (update: Partial) => (state: InsightsSlice) => ({ +const set = (update: Partial) => (state: InsightsState) => ({ ...state, ...update }); -export const createInsightsSlice = createSlice({ +export const insightsSlice = createSlice({ name: "insights", value: initialState, actions: { diff --git a/src/containers/Main/slices/createScopeSlice.ts b/src/containers/Main/slices/scopeSlice.ts similarity index 91% rename from src/containers/Main/slices/createScopeSlice.ts rename to src/containers/Main/slices/scopeSlice.ts index c62ef2423..18eda7960 100644 --- a/src/containers/Main/slices/createScopeSlice.ts +++ b/src/containers/Main/slices/scopeSlice.ts @@ -9,7 +9,7 @@ const initialState: ScopeState = { scope: null }; -export const createScopeSlice = createSlice({ +export const scopeSlice = createSlice({ name: "scope", value: initialState, actions: { diff --git a/src/containers/Main/stores/useGlobalStore.ts b/src/containers/Main/stores/useGlobalStore.ts index 62d0e69b2..6f89eecb9 100644 --- a/src/containers/Main/stores/useGlobalStore.ts +++ b/src/containers/Main/stores/useGlobalStore.ts @@ -1,6 +1,5 @@ import { useStore } from "./useStore"; export const useGlobalStore = () => { - const state = useStore.getState(); - return state.global; + return useStore((state) => state.global); }; diff --git a/src/containers/Main/stores/useInsightsStore.ts b/src/containers/Main/stores/useInsightsStore.ts index 63cb210e5..aec4b4c26 100644 --- a/src/containers/Main/stores/useInsightsStore.ts +++ b/src/containers/Main/stores/useInsightsStore.ts @@ -1,82 +1,3 @@ -import { create } from "zustand"; -import { - Sorting, - SORTING_ORDER -} from "../../../components/common/SortingSelector/types"; -import { - InsightFilterType, - SORTING_CRITERION, - ViewMode -} from "../../../components/Insights/InsightsCatalog/types"; -import { IssuesFiltersData } from "../../../components/Insights/Issues/IssuesFilter/types"; -import { - InsightsData, - InsightViewType -} from "../../../components/Insights/types"; -import { createSelectors } from "./createSelectors"; +import { useStore } from "./useStore"; -export interface InsightsState { - data: InsightsData | null; - isDataLoading: boolean; - search: string; - page: number; - sorting: Sorting; - viewMode: ViewMode; - filters: InsightFilterType[]; - filteredInsightTypes: string[]; - insightViewType: InsightViewType | null; - issuesFilters: IssuesFiltersData | null; - areIssuesFiltersLoading: boolean; -} - -export const initialState: InsightsState = { - data: null, - isDataLoading: false, - search: "", - page: 0, - sorting: { - criterion: SORTING_CRITERION.CRITICAL_INSIGHTS, - order: SORTING_ORDER.DESC - }, - viewMode: ViewMode.All, - filters: [], - filteredInsightTypes: [], - insightViewType: null, - issuesFilters: null, - areIssuesFiltersLoading: false -}; - -export interface InsightsActions { - setData: (data: InsightsData) => void; - setIsDataLoading: (isDataLoading: boolean) => void; - setSearch: (search: string) => void; - setPage: (page: number) => void; - setSorting: (sorting: Sorting) => void; - setViewMode: (viewMode: ViewMode) => void; - setFilters: (filters: InsightFilterType[]) => void; - setFilteredInsightTypes: (insightTypes: string[]) => void; - setInsightViewType: (insightViewType: InsightViewType) => void; - setIssuesFilters: (filters: IssuesFiltersData) => void; - setAreIssuesFiltersLoading: (areIssuesFiltersLoading: boolean) => void; - reset: () => void; -} - -export const useInsightsStore = createSelectors( - create()((set) => ({ - ...initialState, - setData: (data) => set({ data }), - setIsDataLoading: (isDataLoading) => set({ isDataLoading }), - setSearch: (search) => set({ search }), - setPage: (page) => set({ page }), - setSorting: (sorting) => set({ sorting }), - setViewMode: (viewMode) => set({ viewMode }), - setFilters: (filters) => set({ filters }), - setFilteredInsightTypes: (filteredInsightTypes) => - set({ filteredInsightTypes }), - setInsightViewType: (insightViewType) => set({ insightViewType }), - setIssuesFilters: (issuesFilters) => set({ issuesFilters }), - setAreIssuesFiltersLoading: (areIssuesFiltersLoading) => - set({ areIssuesFiltersLoading }), - reset: () => set(initialState) - })) -); +export const useInsightsStore = () => useStore((state) => state.insights); diff --git a/src/containers/Main/stores/useScopeStore.ts b/src/containers/Main/stores/useScopeStore.ts index 7267d547f..c414e541c 100644 --- a/src/containers/Main/stores/useScopeStore.ts +++ b/src/containers/Main/stores/useScopeStore.ts @@ -1,6 +1,5 @@ import { useStore } from "./useStore"; export const useScopeStore = () => { - const state = useStore.getState(); - return state.scope; + return useStore((state) => state.scope); }; diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts index 4689a5da0..696682034 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/containers/Main/stores/useStore.ts @@ -1,9 +1,10 @@ import { create } from "zustand"; import { withSlices } from "zustand-slices"; -import { createGlobalSlice } from "../slices/createGlobalSlice"; -import { createInsightsSlice } from "../slices/createInsightSlice"; -import { createScopeSlice } from "../slices/createScopeSlice"; +import { globalSlice } from "../slices/globalSlice"; +import { insightsSlice } from "../slices/insightSlice"; +import { scopeSlice } from "../slices/scopeSlice"; +import { createSelectors } from "./createSelectors"; -export const useStore = create( - withSlices(createGlobalSlice, createInsightsSlice, createScopeSlice) +export const useStore = createSelectors( + create(withSlices(globalSlice, insightsSlice, scopeSlice)) ); From c1a9307372d5417e2aa7a084852b1ff790a8f55f Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 30 Aug 2024 12:03:24 +0300 Subject: [PATCH 05/18] fix scope change --- src/components/Assets/AssetList/index.tsx | 3 +-- src/components/Assets/AssetTypeList/index.tsx | 3 +-- src/components/Assets/AssetsFilter/index.tsx | 3 +-- src/components/Assets/index.tsx | 3 +-- src/components/Errors/index.tsx | 4 ++-- src/components/Highlights/Impact/index.tsx | 3 +-- .../Highlights/Impact/useImpactData.ts | 3 +-- .../Highlights/Performance/index.tsx | 3 +-- .../Performance/usePerformanceData.ts | 3 +-- src/components/Highlights/Scaling/index.tsx | 3 +-- .../Highlights/Scaling/useScalingData.ts | 3 +-- .../Highlights/SpanInfo/useSpanInfoData.ts | 4 ++-- .../EndpointBottleneckHighlightCard/index.tsx | 3 +-- .../index.tsx | 3 +-- .../index.tsx | 3 +-- .../index.tsx | 3 +-- .../index.tsx | 3 +-- .../index.tsx | 3 +-- .../index.tsx | 3 +-- .../HotSpotHighlightCard/index.tsx | 3 +-- .../SpaNPlusOneHighlightCard/index.tsx | 3 +-- .../index.tsx | 3 +-- .../index.tsx | 3 +-- .../SpanScalingHighlightCard/index.tsx | 3 +-- src/components/Highlights/TopIssues/index.tsx | 4 ++-- .../Highlights/TopIssues/useTopIssuesData.ts | 3 +-- .../EnvironmentSelector/index.tsx | 3 +-- .../InsightsCatalog/InsightsPage/index.tsx | 3 +-- .../InsightCard/InsightHeader/index.tsx | 4 ++-- .../Insights/InsightsCatalog/index.tsx | 3 +-- .../Insights/Issues/IssuesFilter/index.tsx | 3 +-- .../Insights/Issues/useIssuesFilters.ts | 3 +-- src/components/Insights/index.tsx | 18 ++++++++------- src/components/Insights/useInsightsData.ts | 3 +-- src/components/Main/index.tsx | 3 +-- src/components/Main/useHistory.tsx | 3 +-- .../HistoryNavigationPanel/index.tsx | 3 +-- src/components/Navigation/Tabs/index.tsx | 3 +-- src/components/Navigation/index.tsx | 3 +-- src/components/Tests/index.tsx | 3 +-- src/containers/Main/slices/globalSlice.ts | 10 ++++---- src/containers/Main/slices/insightSlice.ts | 7 ++++-- src/containers/Main/slices/scopeSlice.ts | 23 ------------------- src/containers/Main/stores/useScopeStore.ts | 5 ---- src/containers/Main/stores/useStore.ts | 19 ++++++++++++--- 45 files changed, 80 insertions(+), 123 deletions(-) delete mode 100644 src/containers/Main/slices/scopeSlice.ts delete mode 100644 src/containers/Main/stores/useScopeStore.ts diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 8cf0e8392..514c0df35 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DefaultTheme, useTheme } from "styled-components"; import { DigmaMessageError } from "../../../api/types"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; @@ -146,7 +145,7 @@ export const AssetList = ({ const refreshTimerId = useRef(); const previousEnvironment = usePrevious(environment); const previousViewScope = usePrevious(scopeViewOptions); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId; const refreshData = useCallback(() => { diff --git a/src/components/Assets/AssetTypeList/index.tsx b/src/components/Assets/AssetTypeList/index.tsx index 79ccb9e04..371c3caaa 100644 --- a/src/components/Assets/AssetTypeList/index.tsx +++ b/src/components/Assets/AssetTypeList/index.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; @@ -70,7 +69,7 @@ export const AssetTypeList = ({ const previousData = usePrevious(data); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environment = useGlobalStore().environment; const previousEnvironment = usePrevious(environment); const refreshTimerId = useRef(); diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index c1455aaeb..d195b31fa 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -26,7 +26,6 @@ import { GetAssetFiltersDataPayload } from "./types"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { useStore } from "../../../containers/Main/stores/useStore"; import * as s from "./styles"; @@ -106,7 +105,7 @@ export const AssetsFilter = ({ const [persistedFilters, setPersistedFilters] = usePersistence(PERSISTENCE_KEY, "project"); const previousPersistedFilters = usePrevious(persistedFilters); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId; const [selectedServices, setSelectedServices] = useState( isServicesFilterEnabled ? globallySelectedServices ?? [] : [] diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index a44bada39..70d9401f2 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { useParams } from "react-router-dom"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { getFeatureFlagValue } from "../../featureFlags"; import { useDebounce } from "../../hooks/useDebounce"; import { usePrevious } from "../../hooks/usePrevious"; @@ -32,7 +31,7 @@ export const Assets = () => { const [assetScopeOption, setAssetScopeOption] = useState(null); const [selectedFilters, setSelectedFilters] = useState(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const previousScopeSpanCodeObjectId = usePrevious( scope?.span?.spanCodeObjectId diff --git a/src/components/Errors/index.tsx b/src/components/Errors/index.tsx index 775d03dbd..1f29f0382 100644 --- a/src/components/Errors/index.tsx +++ b/src/components/Errors/index.tsx @@ -1,12 +1,12 @@ import { useParams } from "react-router-dom"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; +import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; import { useHistory } from "../Main/useHistory"; import { ErrorDetails } from "./ErrorDetails"; import { ErrorsList } from "./ErrorsList"; import * as s from "./styles"; export const Errors = () => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const spanCodeObjectId = scope?.span?.spanCodeObjectId; const methodId = scope?.span?.methodId ?? undefined; const { goTo } = useHistory(); diff --git a/src/components/Highlights/Impact/index.tsx b/src/components/Highlights/Impact/index.tsx index 09fc7c4a3..8cdda2874 100644 --- a/src/components/Highlights/Impact/index.tsx +++ b/src/components/Highlights/Impact/index.tsx @@ -2,7 +2,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { PERFORMANCE_IMPACT_DOCUMENTATION_URL } from "../../../constants"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../Main/types"; @@ -77,7 +76,7 @@ const getRankTagType = (normalizedRank: number) => { export const Impact = () => { const { data, getData } = useImpactData(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const backendInfo = useGlobalStore().backendInfo; diff --git a/src/components/Highlights/Impact/useImpactData.ts b/src/components/Highlights/Impact/useImpactData.ts index 4afad90d6..b9c8a1e17 100644 --- a/src/components/Highlights/Impact/useImpactData.ts +++ b/src/components/Highlights/Impact/useImpactData.ts @@ -1,6 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -10,7 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useImpactData = () => { const [data, setData] = useState(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); diff --git a/src/components/Highlights/Performance/index.tsx b/src/components/Highlights/Performance/index.tsx index 7ea376ea7..85f42cf9a 100644 --- a/src/components/Highlights/Performance/index.tsx +++ b/src/components/Highlights/Performance/index.tsx @@ -1,7 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { usePrevious } from "../../../hooks/usePrevious"; import { isBoolean } from "../../../typeGuards/isBoolean"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -27,7 +26,7 @@ export const Performance = () => { const [isInitialLoading, setIsInitialLoading] = useState(true); const { data, getData } = usePerformanceData(); const previousData = usePrevious(data); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; useEffect(() => { diff --git a/src/components/Highlights/Performance/usePerformanceData.ts b/src/components/Highlights/Performance/usePerformanceData.ts index 839eba2c6..87df93b39 100644 --- a/src/components/Highlights/Performance/usePerformanceData.ts +++ b/src/components/Highlights/Performance/usePerformanceData.ts @@ -1,6 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -10,7 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const usePerformanceData = () => { const [data, setData] = useState(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); diff --git a/src/components/Highlights/Scaling/index.tsx b/src/components/Highlights/Scaling/index.tsx index 7855292f6..6d8150bcf 100644 --- a/src/components/Highlights/Scaling/index.tsx +++ b/src/components/Highlights/Scaling/index.tsx @@ -2,7 +2,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { SCALING_ISSUE_DOCUMENTATION_URL } from "../../../constants"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../utils/getDurationString"; @@ -76,7 +75,7 @@ const demoData: EnvironmentScalingData[] = [ export const Scaling = () => { const { data, getData } = useScalingData(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const { goTo } = useHistory(); diff --git a/src/components/Highlights/Scaling/useScalingData.ts b/src/components/Highlights/Scaling/useScalingData.ts index 274a4d1f4..4a45b0535 100644 --- a/src/components/Highlights/Scaling/useScalingData.ts +++ b/src/components/Highlights/Scaling/useScalingData.ts @@ -1,6 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -10,7 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useScalingData = () => { const [data, setData] = useState(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); diff --git a/src/components/Highlights/SpanInfo/useSpanInfoData.ts b/src/components/Highlights/SpanInfo/useSpanInfoData.ts index 72e8a0fb3..2c756b587 100644 --- a/src/components/Highlights/SpanInfo/useSpanInfoData.ts +++ b/src/components/Highlights/SpanInfo/useSpanInfoData.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; +import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -9,7 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useSpanInfoData = () => { const [data, setData] = useState(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx index 16350cea4..21a815c55 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -20,7 +19,7 @@ import { EndpointBottleneckHighlightCardProps } from "./types"; export const EndpointBottleneckHighlightCard = ({ data }: EndpointBottleneckHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx index e7406ea58..91b2e5706 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -17,7 +16,7 @@ import { EndpointChattyApiV2HighlightCardProps } from "./types"; export const EndpointChattyApiV2HighlightCard = ({ data }: EndpointChattyApiV2HighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx index 851df56d7..96bcbd182 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -20,7 +19,7 @@ import { EndpointHighNumberOfQueriesHighlightCardProps } from "./types"; export const EndpointHighNumberOfQueriesHighlightCard = ({ data }: EndpointHighNumberOfQueriesHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx index 28279f80c..03a16a60b 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -21,7 +20,7 @@ import { EndpointQueryOptimizationV2HighlightCardProps } from "./types"; export const EndpointQueryOptimizationV2HighlightCard = ({ data }: EndpointQueryOptimizationV2HighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx index a2b7f8877..2831fec48 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -16,7 +15,7 @@ import { EndpointSessionInViewHighlightCardProps } from "./types"; export const EndpointSessionInViewHighlightCard = ({ data }: EndpointSessionInViewHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx index 0c66dcdd3..61eb5fcd2 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -18,7 +17,7 @@ import { EndpointSlowdownSourceHighlightCardProps } from "./types"; export const EndpointSlowdownSourceHighlightCard = ({ data }: EndpointSlowdownSourceHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx index 1b4bb0d48..3583a336c 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -20,7 +19,7 @@ import { EndpointSpanNPlusOneHighlightCardProps } from "./types"; export const EndpointSpanNPlusOneHighlightCard = ({ data }: EndpointSpanNPlusOneHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx index 305622ab7..60a7000f3 100644 --- a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -13,7 +12,7 @@ import { addEnvironmentColumns } from "../addEnvironmentColumns"; import { HotSpotHighlightCardProps } from "./types"; export const HotSpotHighlightCard = ({ data }: HotSpotHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx index d656187be..009e71d7d 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -18,7 +17,7 @@ import { SpaNPlusOneHighlightCardProps } from "./types"; export const SpaNPlusOneHighlightCard = ({ data }: SpaNPlusOneHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx index fe26ba495..ab0000278 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -18,7 +17,7 @@ import { SpanEndpointBottleneckHighlightCardProps } from "./types"; export const SpanEndpointBottleneckHighlightCard = ({ data }: SpanEndpointBottleneckHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx index 21cb41bb2..35f7a95ec 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; @@ -20,7 +19,7 @@ import { SpanQueryOptimizationHighlightCardProps } from "./types"; export const SpanQueryOptimizationHighlightCard = ({ data }: SpanQueryOptimizationHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx index 7799cd07a..d35515749 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx @@ -1,6 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../../containers/Main/stores/useScopeStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -15,7 +14,7 @@ import { SpanScalingHighlightCardProps } from "./types"; export const SpanScalingHighlightCard = ({ data }: SpanScalingHighlightCardProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const columnHelper = diff --git a/src/components/Highlights/TopIssues/index.tsx b/src/components/Highlights/TopIssues/index.tsx index 57ce882f2..16256f2d7 100644 --- a/src/components/Highlights/TopIssues/index.tsx +++ b/src/components/Highlights/TopIssues/index.tsx @@ -1,6 +1,6 @@ import { Fragment, useEffect, useMemo, useState } from "react"; import { v4 as uuidv4 } from "uuid"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; +import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { usePagination } from "../../../hooks/usePagination"; import { usePrevious } from "../../../hooks/usePrevious"; import { InsightType } from "../../Insights/types"; @@ -94,7 +94,7 @@ export const TopIssues = () => { const [isInitialLoading, setIsInitialLoading] = useState(true); const { data, getData } = useTopIssuesData(); const previousData = usePrevious(data); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; // Do not show unimplemented insights const filteredTopInsights = useMemo( () => diff --git a/src/components/Highlights/TopIssues/useTopIssuesData.ts b/src/components/Highlights/TopIssues/useTopIssuesData.ts index 52ac66153..cdc0c660b 100644 --- a/src/components/Highlights/TopIssues/useTopIssuesData.ts +++ b/src/components/Highlights/TopIssues/useTopIssuesData.ts @@ -1,6 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; @@ -11,7 +10,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useTopIssuesData = () => { const [data, setData] = useState(); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); diff --git a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx index 95cc873f7..50c8da43c 100644 --- a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx +++ b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx @@ -1,7 +1,6 @@ import { useState } from "react"; import useDimensions from "react-cool-dimensions"; import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../containers/Main/stores/useScopeStore"; import { changeScope } from "../../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { Environment } from "../../../common/App/types"; @@ -60,7 +59,7 @@ const sortEnvironmentsByCriticalIssues = ( export const EnvironmentSelector = ({ environments }: EnvironmentSelectorProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environment = useGlobalStore().environment; const [isMenuOpen, setIsMenuOpen] = useState(false); const { observe, width } = useDimensions(); diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx index 0ef2d8dfe..e521f0e7f 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx @@ -1,7 +1,6 @@ import { useEffect, useRef } from "react"; import { actions as globalActions } from "../../../../actions"; import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../../containers/Main/stores/useScopeStore"; import { usePersistence } from "../../../../hooks/usePersistence"; import { trackingEvents as globalTrackingEvents } from "../../../../trackingEvents"; import { isNumber } from "../../../../typeGuards/isNumber"; @@ -489,7 +488,7 @@ export const InsightsPage = ({ isMarkAsReadButtonEnabled, isFilteringEnabled }: InsightsPageProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environment = useGlobalStore().environment; const [isInsightJiraTicketHintShown, setIsInsightJiraTicketHintShown] = usePersistence( diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx index 42132b645..92431d368 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx @@ -1,4 +1,4 @@ -import { useScopeStore } from "../../../../../../../../containers/Main/stores/useScopeStore"; +import { useGlobalStore } from "../../../../../../../../containers/Main/stores/useGlobalStore"; import { isString } from "../../../../../../../../typeGuards/isString"; import { formatTimeDistance } from "../../../../../../../../utils/formatTimeDistance"; import { getInsightTypeInfo } from "../../../../../../../../utils/getInsightTypeInfo"; @@ -38,7 +38,7 @@ export const InsightHeader = ({ lastUpdateTimer, isAsync }: InsightHeaderProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType); const statusTooltipContent = renderInsightStatusTooltipContent(insight); diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index 2d8b4d706..1bf90937f 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -3,7 +3,6 @@ import { createPortal } from "react-dom"; import { useTheme } from "styled-components"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { useStore } from "../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../featureFlags"; import { useDebounce } from "../../../hooks/useDebounce"; @@ -101,7 +100,7 @@ export const InsightsCatalog = ({ const insightStats = useGlobalStore().insightStats; const environment = useGlobalStore().environment; const environments = useGlobalStore().environments; - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const isAtSpan = Boolean(scope?.span); const backendInfo = useGlobalStore().backendInfo; diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx index 11c4213a8..86e49fa82 100644 --- a/src/components/Insights/Issues/IssuesFilter/index.tsx +++ b/src/components/Insights/Issues/IssuesFilter/index.tsx @@ -1,7 +1,6 @@ import { useEffect, useMemo } from "react"; import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../../containers/Main/stores/useInsightsStore"; -import { useScopeStore } from "../../../../containers/Main/stores/useScopeStore"; import { useStore } from "../../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; import { usePrevious } from "../../../../hooks/usePrevious"; @@ -33,7 +32,7 @@ export const IssuesFilter = () => { const isUnreadOnly = useMemo(() => filters.includes("unread"), [filters]); const { data } = useIssuesFilters(); const previousData = usePrevious(data); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const isServicesFilterEnabled = Boolean( diff --git a/src/components/Insights/Issues/useIssuesFilters.ts b/src/components/Insights/Issues/useIssuesFilters.ts index 453304692..e54500327 100644 --- a/src/components/Insights/Issues/useIssuesFilters.ts +++ b/src/components/Insights/Issues/useIssuesFilters.ts @@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { useStore } from "../../../containers/Main/stores/useStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; @@ -37,7 +36,7 @@ export const useIssuesFilters = () => { const refreshTimerId = useRef(); const environment = useGlobalStore().environment; const environmentId = environment?.id; - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const spanCodeObjectId = scope?.span?.spanCodeObjectId ?? null; const backendInfo = useGlobalStore().backendInfo; diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx index 5c5bc9dff..8ed4b386d 100644 --- a/src/components/Insights/index.tsx +++ b/src/components/Insights/index.tsx @@ -3,7 +3,6 @@ import { actions as globalActions } from "../../actions"; import { SLACK_WORKSPACE_URL } from "../../constants"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../containers/Main/stores/useInsightsStore"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { useStore } from "../../containers/Main/stores/useStore"; import { usePersistence } from "../../hooks/usePersistence"; import { usePrevious } from "../../hooks/usePrevious"; @@ -226,29 +225,32 @@ export const Insights = ({ insightViewType }: InsightsProps) => { const { data, isLoading, refresh } = useInsightsData({ areFiltersRehydrated }); - const reset = useStore().reset; const [infoToOpenJiraTicket, setInfoToOpenJiraTicket] = useState>(); - const userRegistrationEmail = useGlobalStore().userRegistrationEmail; + const { backendInfo, environment, userRegistrationEmail, environments } = + useGlobalStore(); const previousUserRegistrationEmail = usePrevious(userRegistrationEmail); - const environments = useGlobalStore().environments; const [isRegistrationInProgress, setIsRegistrationInProgress] = useState(false); const isRegistrationEnabled = false; const isRegistrationRequired = isRegistrationEnabled && !userRegistrationEmail; - const { setInsightViewType, setFilteredInsightTypes, setFilters } = - useStore.getState(); + const { + setInsightViewType, + setFilteredInsightTypes, + setFilters, + insightsReset: reset + } = useStore.getState(); const { insightViewType: storedInsightViewType, filteredInsightTypes, filters } = useInsightsStore(); - const { backendInfo, environment } = useGlobalStore(); + const previousFilteredInsightTypes = usePrevious(filteredInsightTypes); const previousFilters = usePrevious(filters); const previousBackendInfo = usePrevious(backendInfo); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const previousScope = usePrevious(scope); const previousScopeSpanCodeObjectId = previousScope?.span?.spanCodeObjectId; diff --git a/src/components/Insights/useInsightsData.ts b/src/components/Insights/useInsightsData.ts index af52a9150..adcd251c9 100644 --- a/src/components/Insights/useInsightsData.ts +++ b/src/components/Insights/useInsightsData.ts @@ -3,7 +3,6 @@ import { actions as globalActions } from "../../actions"; import { DigmaMessageError } from "../../api/types"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; import { useInsightsStore } from "../../containers/Main/stores/useInsightsStore"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { getFeatureFlagValue } from "../../featureFlags"; @@ -133,7 +132,7 @@ const getStats = ({ export const useInsightsData = ({ areFiltersRehydrated }: UseInsightsDataProps) => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const { data, search, diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index 708b6888e..17193de87 100644 --- a/src/components/Main/index.tsx +++ b/src/components/Main/index.tsx @@ -3,7 +3,6 @@ import { Outlet, matchPath, useLocation } from "react-router-dom"; import { actions as globalActions } from "../../actions"; import { history } from "../../containers/Main/history"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { HistoryEntryLocation } from "../../history/History"; @@ -52,7 +51,7 @@ export const Main = () => { const environments = useGlobalStore().environments; const environment = useGlobalStore().environment; const previousEnvironment = usePrevious(environment); - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const userInfo = useGlobalStore().userInfo; const userId = userInfo?.id; const previousUserId = usePrevious(userId); diff --git a/src/components/Main/useHistory.tsx b/src/components/Main/useHistory.tsx index 066015afd..e8a42081d 100644 --- a/src/components/Main/useHistory.tsx +++ b/src/components/Main/useHistory.tsx @@ -1,7 +1,6 @@ import { NavigateOptions, To, resolvePath } from "react-router-dom"; import { history } from "../../containers/Main/history"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { HistoryEntry, HistoryEntryLocation } from "../../history/History"; import { isString } from "../../typeGuards/isString"; import { HistoryState } from "./types"; @@ -98,7 +97,7 @@ const isNewHistoryEntryNeeded = ( export const useHistory = () => { const location = history.getCurrentLocation(); const environment = useGlobalStore().environment; - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const goTo = (to: To, options?: NavigateOptions) => { diff --git a/src/components/Navigation/HistoryNavigationPanel/index.tsx b/src/components/Navigation/HistoryNavigationPanel/index.tsx index c25e22113..a46bfeeed 100644 --- a/src/components/Navigation/HistoryNavigationPanel/index.tsx +++ b/src/components/Navigation/HistoryNavigationPanel/index.tsx @@ -3,7 +3,6 @@ import { Location, useLocation, useNavigate } from "react-router-dom"; import { useTheme } from "styled-components"; import { history } from "../../../containers/Main/history"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { HistoryEntry } from "../../../history/History"; import { changeScope } from "../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -25,7 +24,7 @@ export const HistoryNavigationPanel = () => { const navigate = useNavigate(); const environments = useGlobalStore().environments; const environment = useGlobalStore().environment; - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const location = useLocation() as Location; const theme = useTheme(); const updateBrowserLocation = useBrowserLocationUpdater(); diff --git a/src/components/Navigation/Tabs/index.tsx b/src/components/Navigation/Tabs/index.tsx index d644de3dc..f9cf90679 100644 --- a/src/components/Navigation/Tabs/index.tsx +++ b/src/components/Navigation/Tabs/index.tsx @@ -1,7 +1,6 @@ import { useMemo } from "react"; import { useLocation } from "react-router-dom"; import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../../containers/Main/stores/useScopeStore"; import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -86,7 +85,7 @@ const getIsNewIndicatorVisible = ( ); export const Tabs = () => { - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const insightStats = useGlobalStore().insightStats; const location = useLocation(); const { goTo } = useHistory(); diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index ea0388f2e..fe7b8ec35 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -16,7 +16,6 @@ import { ThreeDotsIcon } from "../common/icons/ThreeDotsIcon"; // import { Tooltip } from "../common/v3/Tooltip"; // import { CodeButton } from "./CodeButton"; // import { CodeButtonMenu } from "./CodeButtonMenu"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { EnvironmentBar } from "./EnvironmentBar"; import { HistoryNavigationPanel } from "./HistoryNavigationPanel"; import { KebabMenu } from "./KebabMenu"; @@ -81,7 +80,7 @@ import { export const Navigation = () => { const environments = useGlobalStore().environments; const environment = useGlobalStore().environment; - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const userInfo = useGlobalStore().userInfo; const backendInfo = useGlobalStore().backendInfo; const [selectedEnvironment, setSelectedEnvironment] = useState(environment); diff --git a/src/components/Tests/index.tsx b/src/components/Tests/index.tsx index b0d3ddb42..33d6cd567 100644 --- a/src/components/Tests/index.tsx +++ b/src/components/Tests/index.tsx @@ -1,7 +1,6 @@ import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"; import { actions as globalActions } from "../../actions"; import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; -import { useScopeStore } from "../../containers/Main/stores/useScopeStore"; import { dispatcher } from "../../dispatcher"; import { usePrevious } from "../../hooks/usePrevious"; import { isNull } from "../../typeGuards/isNull"; @@ -67,7 +66,7 @@ export const Tests = () => { const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const userRegistrationEmail = useGlobalStore().userRegistrationEmail; - const scope = useScopeStore().scope; + const scope = useGlobalStore().scope; const environments = useGlobalStore().environments; const [testToOpenTicketPopup, setTestToOpenTicketPopup] = useState(); const previousUserRegistrationEmail = usePrevious(userRegistrationEmail); diff --git a/src/containers/Main/slices/globalSlice.ts b/src/containers/Main/slices/globalSlice.ts index 367513243..3ffe908cb 100644 --- a/src/containers/Main/slices/globalSlice.ts +++ b/src/containers/Main/slices/globalSlice.ts @@ -6,13 +6,14 @@ import { InsightStats, PersistedState, RunConfiguration, + Scope, UserInfo } from "../../../components/common/App/types"; import { isBoolean } from "../../../typeGuards/isBoolean"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; import { isString } from "../../../typeGuards/isString"; -interface GlobalState { +export interface GlobalState { digmaApiUrl: string | null; digmaApiProxyPrefix: string | null; digmaStatus: DigmaStatus | null; @@ -38,6 +39,7 @@ interface GlobalState { userRegistrationEmail: string | null; persistedState: PersistedState | null; selectedServices: string[] | null; + scope: Scope | null; } const initialState: GlobalState = { @@ -87,7 +89,8 @@ const initialState: GlobalState = { ? window.userRegistrationEmail : null, selectedServices: null, - persistedState: null + persistedState: null, + scope: null }; const set = (update: Partial) => (state: GlobalState) => ({ @@ -136,7 +139,6 @@ export const globalSlice = createSlice({ setPersistedState: (state: PersistedState) => set({ persistedState: state }), setSelectedServices: (services: string[]) => - set({ selectedServices: services }), - reset: () => set(initialState) + set({ selectedServices: services }) } }); diff --git a/src/containers/Main/slices/insightSlice.ts b/src/containers/Main/slices/insightSlice.ts index 84f7c8853..72c7d0761 100644 --- a/src/containers/Main/slices/insightSlice.ts +++ b/src/containers/Main/slices/insightSlice.ts @@ -1,4 +1,5 @@ import { createSlice } from "zustand-slices"; +import { Scope } from "../../../components/common/App/types"; import { Sorting, SORTING_ORDER @@ -26,6 +27,7 @@ interface InsightsState { insightViewType: InsightViewType | null; issuesFilters: IssuesFiltersData | null; areIssuesFiltersLoading: boolean; + scope: Scope | null; } const initialState: InsightsState = { @@ -42,7 +44,8 @@ const initialState: InsightsState = { filteredInsightTypes: [], insightViewType: null, issuesFilters: null, - areIssuesFiltersLoading: false + areIssuesFiltersLoading: false, + scope: null }; const set = (update: Partial) => (state: InsightsState) => ({ @@ -69,6 +72,6 @@ export const insightsSlice = createSlice({ set({ issuesFilters }), setAreIssuesFiltersLoading: (areIssuesFiltersLoading: boolean) => set({ areIssuesFiltersLoading }), - reset: () => set(initialState) + insightsReset: () => set(initialState) } }); diff --git a/src/containers/Main/slices/scopeSlice.ts b/src/containers/Main/slices/scopeSlice.ts deleted file mode 100644 index 18eda7960..000000000 --- a/src/containers/Main/slices/scopeSlice.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createSlice } from "zustand-slices"; -import { Scope } from "../../../components/common/App/types"; - -interface ScopeState { - scope: Scope | null; -} - -const initialState: ScopeState = { - scope: null -}; - -export const scopeSlice = createSlice({ - name: "scope", - value: initialState, - actions: { - setScope: (scope: Scope) => (state) => { - return state.scope?.span?.spanCodeObjectId !== - scope.span?.spanCodeObjectId - ? { ...state, scope, page: 0, search: "" } - : state; - } - } -}); diff --git a/src/containers/Main/stores/useScopeStore.ts b/src/containers/Main/stores/useScopeStore.ts deleted file mode 100644 index c414e541c..000000000 --- a/src/containers/Main/stores/useScopeStore.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { useStore } from "./useStore"; - -export const useScopeStore = () => { - return useStore((state) => state.scope); -}; diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts index 696682034..ea1f6821a 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/containers/Main/stores/useStore.ts @@ -1,10 +1,23 @@ import { create } from "zustand"; -import { withSlices } from "zustand-slices"; +import { withActions, withSlices } from "zustand-slices"; +import { Scope } from "../../../components/common/App/types"; import { globalSlice } from "../slices/globalSlice"; import { insightsSlice } from "../slices/insightSlice"; -import { scopeSlice } from "../slices/scopeSlice"; import { createSelectors } from "./createSelectors"; export const useStore = createSelectors( - create(withSlices(globalSlice, insightsSlice, scopeSlice)) + create( + withActions(withSlices(globalSlice, insightsSlice), { + setScope: (scope: Scope) => (state) => { + return state.global.scope?.span?.spanCodeObjectId !== + scope.span?.spanCodeObjectId + ? { + ...state, + global: { ...state.global, scope }, + insights: { ...state.insights, page: 0, search: "" } + } + : state; + } + }) + ) ); From ee742df952297dca3c526066d5e8e213cda9c840 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 30 Aug 2024 12:34:42 +0300 Subject: [PATCH 06/18] remove not used scope --- src/containers/Main/slices/insightSlice.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/containers/Main/slices/insightSlice.ts b/src/containers/Main/slices/insightSlice.ts index 72c7d0761..f4c719551 100644 --- a/src/containers/Main/slices/insightSlice.ts +++ b/src/containers/Main/slices/insightSlice.ts @@ -1,5 +1,4 @@ import { createSlice } from "zustand-slices"; -import { Scope } from "../../../components/common/App/types"; import { Sorting, SORTING_ORDER @@ -27,7 +26,6 @@ interface InsightsState { insightViewType: InsightViewType | null; issuesFilters: IssuesFiltersData | null; areIssuesFiltersLoading: boolean; - scope: Scope | null; } const initialState: InsightsState = { @@ -44,8 +42,7 @@ const initialState: InsightsState = { filteredInsightTypes: [], insightViewType: null, issuesFilters: null, - areIssuesFiltersLoading: false, - scope: null + areIssuesFiltersLoading: false }; const set = (update: Partial) => (state: InsightsState) => ({ From 64390f75c8269b1011d0844a2972e3b02a915a11 Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 30 Aug 2024 14:40:20 +0300 Subject: [PATCH 07/18] added mutable actions --- src/containers/Main/stores/useStore.ts | 23 ++++--- .../Main/stores/withMutableActions.ts | 61 +++++++++++++++++++ 2 files changed, 74 insertions(+), 10 deletions(-) create mode 100644 src/containers/Main/stores/withMutableActions.ts diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts index ea1f6821a..d8e58433a 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/containers/Main/stores/useStore.ts @@ -1,22 +1,25 @@ import { create } from "zustand"; -import { withActions, withSlices } from "zustand-slices"; +import { withSlices } from "zustand-slices"; import { Scope } from "../../../components/common/App/types"; import { globalSlice } from "../slices/globalSlice"; import { insightsSlice } from "../slices/insightSlice"; import { createSelectors } from "./createSelectors"; +import { withMutableActions } from "./withMutableActions"; export const useStore = createSelectors( create( - withActions(withSlices(globalSlice, insightsSlice), { - setScope: (scope: Scope) => (state) => { - return state.global.scope?.span?.spanCodeObjectId !== + withMutableActions(withSlices(globalSlice, insightsSlice), { + setScope: (scope: Scope) => (_, set) => { + set((state) => + state.global.scope?.span?.spanCodeObjectId !== scope.span?.spanCodeObjectId - ? { - ...state, - global: { ...state.global, scope }, - insights: { ...state.insights, page: 0, search: "" } - } - : state; + ? { + ...state, + global: { ...state.global, scope }, + insights: { ...state.insights, page: 0, search: "" } + } + : state + ); } }) ) diff --git a/src/containers/Main/stores/withMutableActions.ts b/src/containers/Main/stores/withMutableActions.ts new file mode 100644 index 000000000..da99dc092 --- /dev/null +++ b/src/containers/Main/stores/withMutableActions.ts @@ -0,0 +1,61 @@ +type InferStateActions = Actions extends Record< + string, + (...args: never[]) => unknown +> + ? { + [actionName in keyof Actions]: ( + ...args: Parameters + ) => void; + } + : unknown; + +type IsValidActions = Extract< + keyof Actions, + keyof State +> extends never + ? Actions + : never; + +export function withMutableActions< + State, + Actions extends Record< + string, + ( + ...args: never[] + ) => ( + state: State, + set: ( + fn: ( + prevState: State & InferStateActions + ) => Partial> + ) => void + ) => void + > +>( + config: (set: (fn: (prevState: State) => Partial) => void) => State, + actions: IsValidActions +): ( + set: ( + fn: ( + prevState: State & InferStateActions + ) => Partial> + ) => void, + get: () => State & InferStateActions +) => State & InferStateActions { + return (( + set: ( + fn: ( + prevState: State & InferStateActions + ) => Partial> + ) => void, + get: () => State & InferStateActions + ) => { + const state: Record = config(set as never) as never; + for (const [actionName, actionFn] of Object.entries(actions)) { + state[actionName] = (...args: unknown[]) => { + actionFn(...(args as never[]))(get(), set); + }; + } + return state; + }) as never; +} From da7d3135bba2aae42a7eed946ad4b9d26296b04d Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 30 Aug 2024 14:57:26 +0300 Subject: [PATCH 08/18] fix comments --- src/containers/Main/stores/withMutableActions.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/containers/Main/stores/withMutableActions.ts b/src/containers/Main/stores/withMutableActions.ts index da99dc092..c039fb517 100644 --- a/src/containers/Main/stores/withMutableActions.ts +++ b/src/containers/Main/stores/withMutableActions.ts @@ -1,3 +1,5 @@ +/// inspired by https://github.com/zustandjs/zustand-slices/blob/main/src/with-actions.ts + type InferStateActions = Actions extends Record< string, (...args: never[]) => unknown From a0178a28d0612a4df8933bff1c74e4b5262f977b Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 30 Aug 2024 15:07:40 +0300 Subject: [PATCH 09/18] Change folder structure --- src/components/Assets/AssetList/AssetEntry/index.tsx | 2 +- src/components/Assets/AssetList/index.tsx | 2 +- src/components/Assets/AssetTypeList/index.tsx | 2 +- src/components/Assets/AssetsFilter/index.tsx | 2 +- src/components/Assets/index.tsx | 2 +- src/components/Dashboard/Report/ReportHeader/index.tsx | 2 +- src/components/Errors/index.tsx | 2 +- src/components/Highlights/Impact/index.tsx | 2 +- src/components/Highlights/Impact/useImpactData.ts | 2 +- src/components/Highlights/Performance/index.tsx | 2 +- .../Highlights/Performance/usePerformanceData.ts | 2 +- src/components/Highlights/Scaling/index.tsx | 2 +- src/components/Highlights/Scaling/useScalingData.ts | 2 +- src/components/Highlights/SpanInfo/useSpanInfoData.ts | 2 +- .../EndpointBottleneckHighlightCard/index.tsx | 2 +- .../EndpointChattyApiV2HighlightCard/index.tsx | 2 +- .../EndpointHighNumberOfQueriesHighlightCard/index.tsx | 2 +- .../EndpointQueryOptimizationV2HighlightCard/index.tsx | 2 +- .../EndpointSessionInViewHighlightCard/index.tsx | 2 +- .../EndpointSlowdownSourceHighlightCard/index.tsx | 2 +- .../EndpointSpanNPlusOneHighlightCard/index.tsx | 2 +- .../highlightCards/HotSpotHighlightCard/index.tsx | 2 +- .../highlightCards/SpaNPlusOneHighlightCard/index.tsx | 2 +- .../SpanEndpointBottleneckHighlightCard/index.tsx | 2 +- .../SpanQueryOptimizationHighlightCard/index.tsx | 2 +- .../highlightCards/SpanScalingHighlightCard/index.tsx | 2 +- src/components/Highlights/TopIssues/index.tsx | 2 +- src/components/Highlights/TopIssues/useTopIssuesData.ts | 2 +- src/components/Highlights/index.tsx | 2 +- .../InsightsCatalog/EnvironmentSelector/index.tsx | 2 +- .../Insights/InsightsCatalog/FilterPanel/index.tsx | 2 +- .../Insights/InsightsCatalog/InsightsPage/index.tsx | 2 +- .../EndpointSessionInViewInsightCard/index.tsx | 2 +- .../insightCards/SpaNPlusOneInsightCard/index.tsx | 2 +- .../SpanDurationBreakdownInsightCard/index.tsx | 2 +- .../SpanEndpointBottleneckInsightCard/index.tsx | 2 +- .../insightCards/SpanScalingInsightCard/index.tsx | 2 +- .../insightCards/SpanUsagesInsightCard/index.tsx | 2 +- .../common/InsightCard/InsightHeader/index.tsx | 2 +- .../insightCards/common/InsightCard/index.tsx | 2 +- .../insightCards/common/IssueCompactCard/index.tsx | 2 +- src/components/Insights/InsightsCatalog/index.tsx | 4 ++-- src/components/Insights/Issues/IssuesFilter/index.tsx | 4 ++-- src/components/Insights/Issues/useIssuesFilters.ts | 4 ++-- src/components/Insights/index.tsx | 4 ++-- .../EndpointQueryOptimizationV2InsightTicket/index.tsx | 2 +- .../EndpointSpanNPlusOneInsightTicket/index.tsx | 2 +- .../insightTickets/SpaNPlusOneInsightTicket/index.tsx | 2 +- .../SpanQueryOptimizationInsightTicket/index.tsx | 2 +- .../SpanScalingByRootCauseInsightTicket/index.tsx | 2 +- .../insightTickets/SpanScalingInsightTicket/index.tsx | 2 +- src/components/Insights/useInsightsData.ts | 4 ++-- src/components/Main/index.tsx | 2 +- src/components/Main/useHistory.tsx | 2 +- .../Navigation/EnvironmentBar/EnvironmentMenu/index.tsx | 2 +- .../Navigation/HistoryNavigationPanel/index.tsx | 2 +- src/components/Navigation/KebabMenu/index.tsx | 2 +- src/components/Navigation/Tabs/index.tsx | 2 +- src/components/Navigation/index.tsx | 2 +- .../EnvironmentVariableCode/index.tsx | 2 +- src/components/Tests/TestTicket/index.tsx | 2 +- src/components/Tests/index.tsx | 2 +- src/components/common/ImpactScore/index.tsx | 2 +- .../Main/{slices => stores/global}/globalSlice.ts | 8 ++++---- src/containers/Main/stores/{ => global}/useGlobalStore.ts | 2 +- .../Main/{slices => stores/insights}/insightSlice.ts | 8 ++++---- .../Main/stores/{ => insights}/useInsightsStore.ts | 2 +- src/containers/Main/stores/useStore.ts | 4 ++-- 68 files changed, 80 insertions(+), 80 deletions(-) rename src/containers/Main/{slices => stores/global}/globalSlice.ts (95%) rename src/containers/Main/stores/{ => global}/useGlobalStore.ts (67%) rename src/containers/Main/{slices => stores/insights}/insightSlice.ts (87%) rename src/containers/Main/stores/{ => insights}/useInsightsStore.ts (64%) diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 4ff3c753f..3b15c23ec 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; import { isNumber } from "../../../../typeGuards/isNumber"; import { isString } from "../../../../typeGuards/isString"; diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 514c0df35..1f70d6a0a 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DefaultTheme, useTheme } from "styled-components"; import { DigmaMessageError } from "../../../api/types"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; diff --git a/src/components/Assets/AssetTypeList/index.tsx b/src/components/Assets/AssetTypeList/index.tsx index 371c3caaa..7d87dbc2e 100644 --- a/src/components/Assets/AssetTypeList/index.tsx +++ b/src/components/Assets/AssetTypeList/index.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index d195b31fa..38046d45f 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -1,5 +1,5 @@ import { ComponentType, useEffect, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePersistence } from "../../../hooks/usePersistence"; import { usePrevious } from "../../../hooks/usePrevious"; diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index 70d9401f2..fe4205c2d 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { useParams } from "react-router-dom"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../featureFlags"; import { useDebounce } from "../../hooks/useDebounce"; import { usePrevious } from "../../hooks/usePrevious"; diff --git a/src/components/Dashboard/Report/ReportHeader/index.tsx b/src/components/Dashboard/Report/ReportHeader/index.tsx index c78925ad4..07348cc60 100644 --- a/src/components/Dashboard/Report/ReportHeader/index.tsx +++ b/src/components/Dashboard/Report/ReportHeader/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useState } from "react"; import { actions as globalActions } from "../../../../actions"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { DataFetcherConfiguration, useFetchData diff --git a/src/components/Errors/index.tsx b/src/components/Errors/index.tsx index 1f29f0382..ca680764c 100644 --- a/src/components/Errors/index.tsx +++ b/src/components/Errors/index.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { useHistory } from "../Main/useHistory"; import { ErrorDetails } from "./ErrorDetails"; import { ErrorsList } from "./ErrorsList"; diff --git a/src/components/Highlights/Impact/index.tsx b/src/components/Highlights/Impact/index.tsx index 8cdda2874..54ad48865 100644 --- a/src/components/Highlights/Impact/index.tsx +++ b/src/components/Highlights/Impact/index.tsx @@ -1,7 +1,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { PERFORMANCE_IMPACT_DOCUMENTATION_URL } from "../../../constants"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../Main/types"; diff --git a/src/components/Highlights/Impact/useImpactData.ts b/src/components/Highlights/Impact/useImpactData.ts index b9c8a1e17..0243a64ee 100644 --- a/src/components/Highlights/Impact/useImpactData.ts +++ b/src/components/Highlights/Impact/useImpactData.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; diff --git a/src/components/Highlights/Performance/index.tsx b/src/components/Highlights/Performance/index.tsx index 85f42cf9a..24cb2267b 100644 --- a/src/components/Highlights/Performance/index.tsx +++ b/src/components/Highlights/Performance/index.tsx @@ -1,6 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { usePrevious } from "../../../hooks/usePrevious"; import { isBoolean } from "../../../typeGuards/isBoolean"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; diff --git a/src/components/Highlights/Performance/usePerformanceData.ts b/src/components/Highlights/Performance/usePerformanceData.ts index 87df93b39..8242cbc7f 100644 --- a/src/components/Highlights/Performance/usePerformanceData.ts +++ b/src/components/Highlights/Performance/usePerformanceData.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; diff --git a/src/components/Highlights/Scaling/index.tsx b/src/components/Highlights/Scaling/index.tsx index 6d8150bcf..345dc13b7 100644 --- a/src/components/Highlights/Scaling/index.tsx +++ b/src/components/Highlights/Scaling/index.tsx @@ -1,7 +1,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { SCALING_ISSUE_DOCUMENTATION_URL } from "../../../constants"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../utils/getDurationString"; diff --git a/src/components/Highlights/Scaling/useScalingData.ts b/src/components/Highlights/Scaling/useScalingData.ts index 4a45b0535..9e8b0cf29 100644 --- a/src/components/Highlights/Scaling/useScalingData.ts +++ b/src/components/Highlights/Scaling/useScalingData.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; diff --git a/src/components/Highlights/SpanInfo/useSpanInfoData.ts b/src/components/Highlights/SpanInfo/useSpanInfoData.ts index 2c756b587..07c6585f0 100644 --- a/src/components/Highlights/SpanInfo/useSpanInfoData.ts +++ b/src/components/Highlights/SpanInfo/useSpanInfoData.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx index 21a815c55..19eb6cb1b 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx index 91b2e5706..6e33de0e6 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx index 96bcbd182..87c0415e3 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx index 03a16a60b..df03ca280 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx index 2831fec48..07777163a 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx index 61eb5fcd2..fd7c6e567 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx index 3583a336c..8a868b2fe 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; diff --git a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx index 60a7000f3..7bc41a1a1 100644 --- a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx index 009e71d7d..2329d0685 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx index ab0000278..615189e99 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx index 35f7a95ec..4aa950f98 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx index d35515749..8fe6a85a1 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; diff --git a/src/components/Highlights/TopIssues/index.tsx b/src/components/Highlights/TopIssues/index.tsx index d689d63a0..7aba78487 100644 --- a/src/components/Highlights/TopIssues/index.tsx +++ b/src/components/Highlights/TopIssues/index.tsx @@ -1,6 +1,6 @@ import { Fragment, useEffect, useMemo, useState } from "react"; import { v4 as uuidv4 } from "uuid"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../hooks/usePagination"; import { usePrevious } from "../../../hooks/usePrevious"; import { InsightType } from "../../Insights/types"; diff --git a/src/components/Highlights/TopIssues/useTopIssuesData.ts b/src/components/Highlights/TopIssues/useTopIssuesData.ts index cdc0c660b..93ce137dc 100644 --- a/src/components/Highlights/TopIssues/useTopIssuesData.ts +++ b/src/components/Highlights/TopIssues/useTopIssuesData.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; import { actions as mainActions } from "../../Main/actions"; diff --git a/src/components/Highlights/index.tsx b/src/components/Highlights/index.tsx index 8356ee5ab..64c4f96bd 100644 --- a/src/components/Highlights/index.tsx +++ b/src/components/Highlights/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../featureFlags"; import { FeatureFlag } from "../../types"; import { Impact } from "./Impact"; diff --git a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx index 50c8da43c..77cd47592 100644 --- a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx +++ b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import useDimensions from "react-cool-dimensions"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { changeScope } from "../../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { Environment } from "../../../common/App/types"; diff --git a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx index a12cc3f56..21c88bbee 100644 --- a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx +++ b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx @@ -1,4 +1,4 @@ -import { useInsightsStore } from "../../../../containers/Main/stores/useInsightsStore"; +import { useInsightsStore } from "../../../../containers/Main/stores/insights/useInsightsStore"; import { useStore } from "../../../../containers/Main/stores/useStore"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { InsightFilterType } from "../types"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx index e521f0e7f..077a5c75f 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef } from "react"; import { actions as globalActions } from "../../../../actions"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { usePersistence } from "../../../../hooks/usePersistence"; import { trackingEvents as globalTrackingEvents } from "../../../../trackingEvents"; import { isNumber } from "../../../../typeGuards/isNumber"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx index dbd40d106..6a041854c 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../../../../hooks/usePagination"; import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; import { Button } from "../../../../../common/v3/Button"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx index 5082d6d0b..1b33556ce 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { getDurationString } from "../../../../../../utils/getDurationString"; import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; import { Button } from "../../../../../common/v3/Button"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx index 7d4820f18..990f2e640 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx @@ -5,7 +5,7 @@ import { useReactTable } from "@tanstack/react-table"; import { useEffect, useMemo, useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../../../../featureFlags"; import { usePagination } from "../../../../../../hooks/usePagination"; import { usePrevious } from "../../../../../../hooks/usePrevious"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx index b87e973eb..62b3d5098 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { isNull } from "../../../../../../typeGuards/isNull"; import { getDurationString } from "../../../../../../utils/getDurationString"; import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx index db14c913b..ada02e643 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../../../../hooks/usePagination"; import { getDurationString } from "../../../../../../utils/getDurationString"; import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx index b5eceed6d..6a9efd5ed 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx @@ -5,7 +5,7 @@ import { useReactTable } from "@tanstack/react-table"; import { useEffect, useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../../../../hooks/usePagination"; import { usePrevious } from "../../../../../../hooks/usePrevious"; import { isNumber } from "../../../../../../typeGuards/isNumber"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx index 92431d368..a099e0009 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../../../containers/Main/stores/global/useGlobalStore"; import { isString } from "../../../../../../../../typeGuards/isString"; import { formatTimeDistance } from "../../../../../../../../utils/formatTimeDistance"; import { getInsightTypeInfo } from "../../../../../../../../utils/getInsightTypeInfo"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx index 6c8b01417..bf6f1e145 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx @@ -1,5 +1,5 @@ import { Fragment, useEffect, useState } from "react"; -import { useGlobalStore } from "../../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../../../../../dispatcher"; import { usePrevious } from "../../../../../../../hooks/usePrevious"; import { isString } from "../../../../../../../typeGuards/isString"; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx index 5ee48a672..f0b791db2 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { useTheme } from "styled-components"; -import { useGlobalStore } from "../../../../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../../../../containers/Main/stores/global/useGlobalStore"; import { sendUserActionTrackingEvent } from "../../../../../../../utils/actions/sendUserActionTrackingEvent"; import { getInsightTypeInfo } from "../../../../../../../utils/getInsightTypeInfo"; import { CrossIcon } from "../../../../../../common/icons/16px/CrossIcon"; diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index 1bf90937f..aa4cf7cbd 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -1,8 +1,8 @@ import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { useTheme } from "styled-components"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; +import { useInsightsStore } from "../../../containers/Main/stores/insights/useInsightsStore"; import { useStore } from "../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../featureFlags"; import { useDebounce } from "../../../hooks/useDebounce"; diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx index 86e49fa82..f97a47215 100644 --- a/src/components/Insights/Issues/IssuesFilter/index.tsx +++ b/src/components/Insights/Issues/IssuesFilter/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; -import { useInsightsStore } from "../../../../containers/Main/stores/useInsightsStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useInsightsStore } from "../../../../containers/Main/stores/insights/useInsightsStore"; import { useStore } from "../../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; import { usePrevious } from "../../../../hooks/usePrevious"; diff --git a/src/components/Insights/Issues/useIssuesFilters.ts b/src/components/Insights/Issues/useIssuesFilters.ts index e54500327..7ddf87ef4 100644 --- a/src/components/Insights/Issues/useIssuesFilters.ts +++ b/src/components/Insights/Issues/useIssuesFilters.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; -import { useInsightsStore } from "../../../containers/Main/stores/useInsightsStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; +import { useInsightsStore } from "../../../containers/Main/stores/insights/useInsightsStore"; import { useStore } from "../../../containers/Main/stores/useStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx index 8ed4b386d..90049fa06 100644 --- a/src/components/Insights/index.tsx +++ b/src/components/Insights/index.tsx @@ -1,8 +1,8 @@ import { KeyboardEvent, useCallback, useEffect, useState } from "react"; import { actions as globalActions } from "../../actions"; import { SLACK_WORKSPACE_URL } from "../../constants"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; -import { useInsightsStore } from "../../containers/Main/stores/useInsightsStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; +import { useInsightsStore } from "../../containers/Main/stores/insights/useInsightsStore"; import { useStore } from "../../containers/Main/stores/useStore"; import { usePersistence } from "../../hooks/usePersistence"; import { usePrevious } from "../../hooks/usePrevious"; diff --git a/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx index 90ed15448..342481916 100644 --- a/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { InsightType } from "../../../../types"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../../utils/getDurationString"; diff --git a/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx index 2d8603f8d..33e5d439e 100644 --- a/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { InsightType } from "../../../../types"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; diff --git a/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx index 64f3cff95..35d687131 100644 --- a/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; import { DigmaSignature } from "../../../common/DigmaSignature"; diff --git a/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx index 8fe65ef76..187b4a8c4 100644 --- a/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../../utils/getDurationString"; import { intersperse } from "../../../../utils/intersperse"; diff --git a/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx index 1e529da12..36be4ad43 100644 --- a/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { InsightType } from "../../../../types"; import { intersperse } from "../../../../utils/intersperse"; import { DigmaSignature } from "../../../common/DigmaSignature"; diff --git a/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx index f3af3b7d0..c46925bb5 100644 --- a/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { intersperse } from "../../../../utils/intersperse"; import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; diff --git a/src/components/Insights/useInsightsData.ts b/src/components/Insights/useInsightsData.ts index adcd251c9..1f66d36b3 100644 --- a/src/components/Insights/useInsightsData.ts +++ b/src/components/Insights/useInsightsData.ts @@ -1,8 +1,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { actions as globalActions } from "../../actions"; import { DigmaMessageError } from "../../api/types"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; -import { useInsightsStore } from "../../containers/Main/stores/useInsightsStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; +import { useInsightsStore } from "../../containers/Main/stores/insights/useInsightsStore"; import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { getFeatureFlagValue } from "../../featureFlags"; diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index e4192b551..84c36bdf6 100644 --- a/src/components/Main/index.tsx +++ b/src/components/Main/index.tsx @@ -2,7 +2,7 @@ import { useEffect, useLayoutEffect, useMemo } from "react"; import { Outlet, matchPath, useLocation } from "react-router-dom"; import { actions as globalActions } from "../../actions"; import { history } from "../../containers/Main/history"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { HistoryEntryLocation } from "../../history/History"; diff --git a/src/components/Main/useHistory.tsx b/src/components/Main/useHistory.tsx index 8cb924f6b..7f9814627 100644 --- a/src/components/Main/useHistory.tsx +++ b/src/components/Main/useHistory.tsx @@ -1,6 +1,6 @@ import { NavigateOptions, To, resolvePath } from "react-router-dom"; import { history } from "../../containers/Main/history"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { HistoryEntry, HistoryEntryLocation } from "../../history/History"; import { isString } from "../../typeGuards/isString"; import { HistoryState } from "./types"; diff --git a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx index 8553dae8a..46f5bc635 100644 --- a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx +++ b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { Environment } from "../../../common/App/types"; import { EnvironmentIcon } from "../../../common/EnvironmentIcon"; import { MenuList } from "../../common/MenuList"; diff --git a/src/components/Navigation/HistoryNavigationPanel/index.tsx b/src/components/Navigation/HistoryNavigationPanel/index.tsx index a46bfeeed..cc1eff4d0 100644 --- a/src/components/Navigation/HistoryNavigationPanel/index.tsx +++ b/src/components/Navigation/HistoryNavigationPanel/index.tsx @@ -2,7 +2,7 @@ import { useEffect } from "react"; import { Location, useLocation, useNavigate } from "react-router-dom"; import { useTheme } from "styled-components"; import { history } from "../../../containers/Main/history"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { HistoryEntry } from "../../../history/History"; import { changeScope } from "../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; diff --git a/src/components/Navigation/KebabMenu/index.tsx b/src/components/Navigation/KebabMenu/index.tsx index 9136eebad..d70ae3aaf 100644 --- a/src/components/Navigation/KebabMenu/index.tsx +++ b/src/components/Navigation/KebabMenu/index.tsx @@ -1,6 +1,6 @@ import { actions as globalActions } from "../../../actions"; import { DIGMA_DOCUMENTATION } from "../../../constants"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { OpenInstallationWizardPayload } from "../../../types"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; diff --git a/src/components/Navigation/Tabs/index.tsx b/src/components/Navigation/Tabs/index.tsx index 3e0d2d57c..270c2690c 100644 --- a/src/components/Navigation/Tabs/index.tsx +++ b/src/components/Navigation/Tabs/index.tsx @@ -1,6 +1,6 @@ import { useMemo } from "react"; import { useLocation } from "react-router-dom"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index fe7b8ec35..e47785819 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useState } from "react"; import { actions as globalActions } from "../../actions"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../dispatcher"; import { usePrevious } from "../../hooks/usePrevious"; // import { isNull } from "../../typeGuards/isNull"; diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx index 1b2c63dd0..67602ed85 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx @@ -1,5 +1,5 @@ import { Fragment, ReactNode } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; import { isString } from "../../../../typeGuards/isString"; import { FeatureFlag } from "../../../../types"; diff --git a/src/components/Tests/TestTicket/index.tsx b/src/components/Tests/TestTicket/index.tsx index f308470a9..d5ed642ba 100644 --- a/src/components/Tests/TestTicket/index.tsx +++ b/src/components/Tests/TestTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { isString } from "../../../typeGuards/isString"; import { getDurationString } from "../../../utils/getDurationString"; import { intersperse } from "../../../utils/intersperse"; diff --git a/src/components/Tests/index.tsx b/src/components/Tests/index.tsx index 33d6cd567..363127765 100644 --- a/src/components/Tests/index.tsx +++ b/src/components/Tests/index.tsx @@ -1,6 +1,6 @@ import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"; import { actions as globalActions } from "../../actions"; -import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../dispatcher"; import { usePrevious } from "../../hooks/usePrevious"; import { isNull } from "../../typeGuards/isNull"; diff --git a/src/components/common/ImpactScore/index.tsx b/src/components/common/ImpactScore/index.tsx index 8eea881ba..ffb65395b 100644 --- a/src/components/common/ImpactScore/index.tsx +++ b/src/components/common/ImpactScore/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore"; +import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../featureFlags"; import { FeatureFlag } from "../../../types"; import { BackendInfo } from "../App/types"; diff --git a/src/containers/Main/slices/globalSlice.ts b/src/containers/Main/stores/global/globalSlice.ts similarity index 95% rename from src/containers/Main/slices/globalSlice.ts rename to src/containers/Main/stores/global/globalSlice.ts index 3ffe908cb..5f2509f5f 100644 --- a/src/containers/Main/slices/globalSlice.ts +++ b/src/containers/Main/stores/global/globalSlice.ts @@ -8,10 +8,10 @@ import { RunConfiguration, Scope, UserInfo -} from "../../../components/common/App/types"; -import { isBoolean } from "../../../typeGuards/isBoolean"; -import { isEnvironment } from "../../../typeGuards/isEnvironment"; -import { isString } from "../../../typeGuards/isString"; +} from "../../../../components/common/App/types"; +import { isBoolean } from "../../../../typeGuards/isBoolean"; +import { isEnvironment } from "../../../../typeGuards/isEnvironment"; +import { isString } from "../../../../typeGuards/isString"; export interface GlobalState { digmaApiUrl: string | null; diff --git a/src/containers/Main/stores/useGlobalStore.ts b/src/containers/Main/stores/global/useGlobalStore.ts similarity index 67% rename from src/containers/Main/stores/useGlobalStore.ts rename to src/containers/Main/stores/global/useGlobalStore.ts index 6f89eecb9..550499df5 100644 --- a/src/containers/Main/stores/useGlobalStore.ts +++ b/src/containers/Main/stores/global/useGlobalStore.ts @@ -1,4 +1,4 @@ -import { useStore } from "./useStore"; +import { useStore } from ".././useStore"; export const useGlobalStore = () => { return useStore((state) => state.global); diff --git a/src/containers/Main/slices/insightSlice.ts b/src/containers/Main/stores/insights/insightSlice.ts similarity index 87% rename from src/containers/Main/slices/insightSlice.ts rename to src/containers/Main/stores/insights/insightSlice.ts index f4c719551..0ce496bd0 100644 --- a/src/containers/Main/slices/insightSlice.ts +++ b/src/containers/Main/stores/insights/insightSlice.ts @@ -2,17 +2,17 @@ import { createSlice } from "zustand-slices"; import { Sorting, SORTING_ORDER -} from "../../../components/common/SortingSelector/types"; +} from "../../../../components/common/SortingSelector/types"; import { InsightFilterType, SORTING_CRITERION, ViewMode -} from "../../../components/Insights/InsightsCatalog/types"; -import { IssuesFiltersData } from "../../../components/Insights/Issues/IssuesFilter/types"; +} from "../../../../components/Insights/InsightsCatalog/types"; +import { IssuesFiltersData } from "../../../../components/Insights/Issues/IssuesFilter/types"; import { InsightsData, InsightViewType -} from "../../../components/Insights/types"; +} from "../../../../components/Insights/types"; interface InsightsState { data: InsightsData | null; diff --git a/src/containers/Main/stores/useInsightsStore.ts b/src/containers/Main/stores/insights/useInsightsStore.ts similarity index 64% rename from src/containers/Main/stores/useInsightsStore.ts rename to src/containers/Main/stores/insights/useInsightsStore.ts index aec4b4c26..958839ef9 100644 --- a/src/containers/Main/stores/useInsightsStore.ts +++ b/src/containers/Main/stores/insights/useInsightsStore.ts @@ -1,3 +1,3 @@ -import { useStore } from "./useStore"; +import { useStore } from ".././useStore"; export const useInsightsStore = () => useStore((state) => state.insights); diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts index d8e58433a..237b2ddce 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/containers/Main/stores/useStore.ts @@ -1,9 +1,9 @@ import { create } from "zustand"; import { withSlices } from "zustand-slices"; import { Scope } from "../../../components/common/App/types"; -import { globalSlice } from "../slices/globalSlice"; -import { insightsSlice } from "../slices/insightSlice"; import { createSelectors } from "./createSelectors"; +import { globalSlice } from "./global/globalSlice"; +import { insightsSlice } from "./insights/insightSlice"; import { withMutableActions } from "./withMutableActions"; export const useStore = createSelectors( From bcb1773eff4db7d2a7d0bba06415c1d18eaffcdb Mon Sep 17 00:00:00 2001 From: olehp Date: Fri, 30 Aug 2024 15:14:03 +0300 Subject: [PATCH 10/18] remove selector --- .../InsightsCatalog/FilterPanel/index.tsx | 2 +- src/containers/Main/stores/createSelectors.ts | 18 ---------- src/containers/Main/stores/useStore.ts | 33 +++++++++---------- 3 files changed, 16 insertions(+), 37 deletions(-) delete mode 100644 src/containers/Main/stores/createSelectors.ts diff --git a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx index 21c88bbee..1eaa2d70a 100644 --- a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx +++ b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx @@ -12,7 +12,7 @@ export const FilterPanel = ({ unreadCount }: FilterPanelProps) => { const filters = useInsightsStore().filters; - const setFilters = useStore.use.setFilters(); + const { setFilters } = useStore.getState(); const handleFilterChipClick = (selectedFilter?: InsightFilterType) => { const newFilters = new Set(filters); diff --git a/src/containers/Main/stores/createSelectors.ts b/src/containers/Main/stores/createSelectors.ts deleted file mode 100644 index 8bd74c626..000000000 --- a/src/containers/Main/stores/createSelectors.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { StoreApi, UseBoundStore } from "zustand"; - -type WithSelectors = S extends { getState: () => infer T } - ? S & { use: { [K in keyof T]: () => T[K] } } - : never; - -export const createSelectors = >>( - _store: S -) => { - const store = _store as WithSelectors; - store.use = {}; - for (const k of Object.keys(store.getState())) { - (store.use as Record)[k] = () => - store((s) => s[k as keyof typeof s]); - } - - return store; -}; diff --git a/src/containers/Main/stores/useStore.ts b/src/containers/Main/stores/useStore.ts index 237b2ddce..4a659a9f1 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/containers/Main/stores/useStore.ts @@ -1,26 +1,23 @@ import { create } from "zustand"; import { withSlices } from "zustand-slices"; import { Scope } from "../../../components/common/App/types"; -import { createSelectors } from "./createSelectors"; import { globalSlice } from "./global/globalSlice"; import { insightsSlice } from "./insights/insightSlice"; import { withMutableActions } from "./withMutableActions"; -export const useStore = createSelectors( - create( - withMutableActions(withSlices(globalSlice, insightsSlice), { - setScope: (scope: Scope) => (_, set) => { - set((state) => - state.global.scope?.span?.spanCodeObjectId !== - scope.span?.spanCodeObjectId - ? { - ...state, - global: { ...state.global, scope }, - insights: { ...state.insights, page: 0, search: "" } - } - : state - ); - } - }) - ) +export const useStore = create( + withMutableActions(withSlices(globalSlice, insightsSlice), { + setScope: (scope: Scope) => (_, set) => { + set((state) => + state.global.scope?.span?.spanCodeObjectId !== + scope.span?.spanCodeObjectId + ? { + ...state, + global: { ...state.global, scope }, + insights: { ...state.insights, page: 0, search: "" } + } + : state + ); + } + }) ); From a4d59207c57c653ce7c8b03862c81141b4a75897 Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:58:54 +0300 Subject: [PATCH 11/18] Update src/components/Assets/AssetList/AssetEntry/index.tsx Co-authored-by: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> --- src/components/Assets/AssetList/AssetEntry/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 3b15c23ec..1002c3d2a 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -24,7 +24,7 @@ export const AssetEntry = ({ isImpactHidden, sortingCriterion }: AssetEntryProps) => { - const backendInfo = useGlobalStore().backendInfo; + const { backendInfo } = useGlobalStore(); const isNewImpactScoreCalculationEnabled = getFeatureFlagValue( backendInfo, FeatureFlag.IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED From 1a96bd7207f7ca65dc8d3b8336ad7c74133c1dc7 Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:59:00 +0300 Subject: [PATCH 12/18] Update src/components/Assets/AssetList/index.tsx Co-authored-by: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> --- src/components/Assets/AssetList/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 1f70d6a0a..31490b505 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -140,8 +140,7 @@ export const AssetList = ({ filteredCount ); const listRef = useRef(null); - const environment = useGlobalStore().environment; - const backendInfo = useGlobalStore().backendInfo; + const { environment, backendInfo, scope } = useGlobalStore(); const refreshTimerId = useRef(); const previousEnvironment = usePrevious(environment); const previousViewScope = usePrevious(scopeViewOptions); From 18f6a721cec0a9e0ccd5fca8a2b5af233af305c2 Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:59:07 +0300 Subject: [PATCH 13/18] Update src/components/Assets/AssetList/index.tsx Co-authored-by: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> --- src/components/Assets/AssetList/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 31490b505..c4f4e9ada 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -144,7 +144,6 @@ export const AssetList = ({ const refreshTimerId = useRef(); const previousEnvironment = usePrevious(environment); const previousViewScope = usePrevious(scopeViewOptions); - const scope = useGlobalStore().scope; const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId; const refreshData = useCallback(() => { From 604ac84d23f3073551e9791aabeb986d3bfddc53 Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:59:13 +0300 Subject: [PATCH 14/18] Update src/components/Assets/AssetsFilter/index.tsx Co-authored-by: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> --- src/components/Assets/AssetsFilter/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index 38046d45f..5dc4bfc47 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -99,7 +99,7 @@ export const AssetsFilter = ({ const previousData = usePrevious(data); const [isOpen, setIsOpen] = useState(false); const previousIsOpen = usePrevious(isOpen); - const globallySelectedServices = useGlobalStore().selectedServices; + const { selectedServices: globallySelectedServices, scope, environment } = useGlobalStore(); const { setSelectedServices: setGloballySelectedServices } = useStore.getState(); const [persistedFilters, setPersistedFilters] = From 1aa9520428401f836bba906c673dc87b3d15a63f Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:59:20 +0300 Subject: [PATCH 15/18] Update src/components/Assets/AssetTypeList/index.tsx Co-authored-by: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> --- src/components/Assets/AssetTypeList/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Assets/AssetTypeList/index.tsx b/src/components/Assets/AssetTypeList/index.tsx index 7d87dbc2e..8cd1f8d5c 100644 --- a/src/components/Assets/AssetTypeList/index.tsx +++ b/src/components/Assets/AssetTypeList/index.tsx @@ -69,8 +69,7 @@ export const AssetTypeList = ({ const previousData = usePrevious(data); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); - const scope = useGlobalStore().scope; - const environment = useGlobalStore().environment; + const { scope, environment } = useGlobalStore(); const previousEnvironment = usePrevious(environment); const refreshTimerId = useRef(); const previousSearchQuery = usePrevious(searchQuery); From f25f1d623a9a6296a490eddc1fce61d66223c13e Mon Sep 17 00:00:00 2001 From: opoliarush <156646693+opoliarush@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:59:25 +0300 Subject: [PATCH 16/18] Update src/components/Highlights/Performance/index.tsx Co-authored-by: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> --- src/components/Highlights/Performance/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Highlights/Performance/index.tsx b/src/components/Highlights/Performance/index.tsx index 24cb2267b..33ffcbdd5 100644 --- a/src/components/Highlights/Performance/index.tsx +++ b/src/components/Highlights/Performance/index.tsx @@ -26,8 +26,7 @@ export const Performance = () => { const [isInitialLoading, setIsInitialLoading] = useState(true); const { data, getData } = usePerformanceData(); const previousData = usePrevious(data); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope } = useGlobalStore(); useEffect(() => { getData(); From 30d02139d077abf81264b9af85387b23a1f25b58 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 30 Aug 2024 15:23:09 +0200 Subject: [PATCH 17/18] Move store to the root level --- .../Assets/AssetList/AssetEntry/index.tsx | 4 ++-- src/components/Assets/AssetList/index.tsx | 4 ++-- src/components/Assets/AssetTypeList/index.tsx | 4 ++-- src/components/Assets/AssetsFilter/index.tsx | 15 +++++++------ src/components/Assets/index.tsx | 6 ++--- .../Dashboard/Report/ReportHeader/index.tsx | 4 ++-- src/components/Errors/index.tsx | 4 ++-- src/components/Highlights/Impact/index.tsx | 6 ++--- .../Highlights/Impact/useImpactData.ts | 5 ++--- .../Highlights/Performance/index.tsx | 4 ++-- .../Performance/usePerformanceData.ts | 5 ++--- src/components/Highlights/Scaling/index.tsx | 5 ++--- .../Highlights/Scaling/useScalingData.ts | 5 ++--- .../Highlights/SpanInfo/useSpanInfoData.ts | 4 ++-- .../EndpointBottleneckHighlightCard/index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../HotSpotHighlightCard/index.tsx | 5 ++--- .../SpaNPlusOneHighlightCard/index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../index.tsx | 5 ++--- .../SpanScalingHighlightCard/index.tsx | 5 ++--- src/components/Highlights/TopIssues/index.tsx | 4 ++-- .../Highlights/TopIssues/useTopIssuesData.ts | 5 ++--- src/components/Highlights/index.tsx | 4 ++-- .../EnvironmentSelector/index.tsx | 5 ++--- .../InsightsCatalog/FilterPanel/index.tsx | 6 ++--- .../InsightsCatalog/InsightsPage/index.tsx | 5 ++--- .../index.tsx | 4 ++-- .../SpaNPlusOneInsightCard/index.tsx | 4 ++-- .../index.tsx | 4 ++-- .../index.tsx | 4 ++-- .../SpanScalingInsightCard/index.tsx | 4 ++-- .../SpanUsagesInsightCard/index.tsx | 4 ++-- .../InsightCard/InsightHeader/index.tsx | 4 ++-- .../insightCards/common/InsightCard/index.tsx | 4 ++-- .../common/IssueCompactCard/index.tsx | 4 ++-- .../Insights/InsightsCatalog/index.tsx | 22 ++++++++++--------- .../Insights/Issues/IssuesFilter/index.tsx | 12 +++++----- .../Insights/Issues/useIssuesFilters.ts | 12 +++++----- src/components/Insights/index.tsx | 18 +++++++++------ .../index.tsx | 4 ++-- .../index.tsx | 4 ++-- .../SpaNPlusOneInsightTicket/index.tsx | 4 ++-- .../index.tsx | 4 ++-- .../index.tsx | 5 ++--- .../SpanScalingInsightTicket/index.tsx | 5 ++--- src/components/Insights/useInsightsData.ts | 17 +++++++------- src/components/Main/index.tsx | 13 +++++------ src/components/Main/useHistory.tsx | 5 ++--- .../EnvironmentBar/EnvironmentMenu/index.tsx | 4 ++-- .../HistoryNavigationPanel/index.tsx | 6 ++--- src/components/Navigation/KebabMenu/index.tsx | 6 ++--- src/components/Navigation/Tabs/index.tsx | 5 ++--- src/components/Navigation/index.tsx | 9 +++----- .../EnvironmentVariableCode/index.tsx | 17 +++++++------- src/components/Tests/TestTicket/index.tsx | 7 +++--- src/components/Tests/index.tsx | 6 ++--- src/components/common/App/index.tsx | 2 +- src/components/common/ImpactScore/index.tsx | 4 ++-- .../Main/stores/global/useGlobalStore.ts | 5 ----- .../Main/stores/insights/useInsightsStore.ts | 3 --- .../config/configSlice.ts} | 18 +++++++-------- src/store/config/useConfigSelector.ts | 5 +++++ .../insights/insightsSlice.ts} | 11 ++++------ src/store/insights/useInsightsSelector.ts | 3 +++ .../Main/stores => store}/useStore.ts | 12 +++++----- .../stores => store}/withMutableActions.ts | 2 +- 72 files changed, 205 insertions(+), 245 deletions(-) delete mode 100644 src/containers/Main/stores/global/useGlobalStore.ts delete mode 100644 src/containers/Main/stores/insights/useInsightsStore.ts rename src/{containers/Main/stores/global/globalSlice.ts => store/config/configSlice.ts} (92%) create mode 100644 src/store/config/useConfigSelector.ts rename src/{containers/Main/stores/insights/insightSlice.ts => store/insights/insightsSlice.ts} (85%) create mode 100644 src/store/insights/useInsightsSelector.ts rename src/{containers/Main/stores => store}/useStore.ts (56%) rename src/{containers/Main/stores => store}/withMutableActions.ts (94%) diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 1002c3d2a..ade2ee55a 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -1,5 +1,5 @@ -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { isNumber } from "../../../../typeGuards/isNumber"; import { isString } from "../../../../typeGuards/isString"; import { FeatureFlag, InsightType } from "../../../../types"; @@ -24,7 +24,7 @@ export const AssetEntry = ({ isImpactHidden, sortingCriterion }: AssetEntryProps) => { - const { backendInfo } = useGlobalStore(); + const { backendInfo } = useConfigSelector(); const isNewImpactScoreCalculationEnabled = getFeatureFlagValue( backendInfo, FeatureFlag.IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index c4f4e9ada..985c4c0b3 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -1,9 +1,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DefaultTheme, useTheme } from "styled-components"; import { DigmaMessageError } from "../../../api/types"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; import { changeScope } from "../../../utils/actions/changeScope"; import { SCOPE_CHANGE_EVENTS } from "../../Main/types"; @@ -140,7 +140,7 @@ export const AssetList = ({ filteredCount ); const listRef = useRef(null); - const { environment, backendInfo, scope } = useGlobalStore(); + const { environment, backendInfo, scope } = useConfigSelector(); const refreshTimerId = useRef(); const previousEnvironment = usePrevious(environment); const previousViewScope = usePrevious(scopeViewOptions); diff --git a/src/components/Assets/AssetTypeList/index.tsx b/src/components/Assets/AssetTypeList/index.tsx index 8cd1f8d5c..902153e21 100644 --- a/src/components/Assets/AssetTypeList/index.tsx +++ b/src/components/Assets/AssetTypeList/index.tsx @@ -1,8 +1,8 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; import { isNull } from "../../../typeGuards/isNull"; import { isString } from "../../../typeGuards/isString"; @@ -69,7 +69,7 @@ export const AssetTypeList = ({ const previousData = usePrevious(data); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); - const { scope, environment } = useGlobalStore(); + const { scope, environment } = useConfigSelector(); const previousEnvironment = usePrevious(environment); const refreshTimerId = useRef(); const previousSearchQuery = usePrevious(searchQuery); diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx index 5dc4bfc47..c234267d3 100644 --- a/src/components/Assets/AssetsFilter/index.tsx +++ b/src/components/Assets/AssetsFilter/index.tsx @@ -1,8 +1,9 @@ import { ComponentType, useEffect, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePersistence } from "../../../hooks/usePersistence"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; +import { useStore } from "../../../store/useStore"; import { isEnvironment } from "../../../typeGuards/isEnvironment"; import { isNull } from "../../../typeGuards/isNull"; import { isUndefined } from "../../../typeGuards/isUndefined"; @@ -18,6 +19,7 @@ import { IconProps } from "../../common/icons/types"; import { AssetScopeOption } from "../AssetsViewScopeConfiguration/types"; import { actions } from "../actions"; import { trackingEvents } from "../tracking"; +import * as s from "./styles"; import { AssetFilterCategory, AssetFilterQuery, @@ -26,9 +28,6 @@ import { GetAssetFiltersDataPayload } from "./types"; -import { useStore } from "../../../containers/Main/stores/useStore"; -import * as s from "./styles"; - const PERSISTENCE_KEY = "assetsFilters"; const getData = ({ @@ -99,13 +98,16 @@ export const AssetsFilter = ({ const previousData = usePrevious(data); const [isOpen, setIsOpen] = useState(false); const previousIsOpen = usePrevious(isOpen); - const { selectedServices: globallySelectedServices, scope, environment } = useGlobalStore(); + const { + selectedServices: globallySelectedServices, + environment, + scope + } = useConfigSelector(); const { setSelectedServices: setGloballySelectedServices } = useStore.getState(); const [persistedFilters, setPersistedFilters] = usePersistence(PERSISTENCE_KEY, "project"); const previousPersistedFilters = usePrevious(persistedFilters); - const scope = useGlobalStore().scope; const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId; const [selectedServices, setSelectedServices] = useState( isServicesFilterEnabled ? globallySelectedServices ?? [] : [] @@ -114,7 +116,6 @@ export const AssetsFilter = ({ const [selectedConsumers, setSelectedConsumers] = useState([]); const [selectedInternals, setSelectedInternals] = useState([]); const [selectedInsights, setSelectedInsights] = useState([]); - const environment = useGlobalStore().environment; const previousEnvironment = usePrevious(environment); const previousScope = usePrevious(scope); diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index fe4205c2d..55fcebef6 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -1,9 +1,9 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { useParams } from "react-router-dom"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../featureFlags"; import { useDebounce } from "../../hooks/useDebounce"; import { usePrevious } from "../../hooks/usePrevious"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; import { FeatureFlag } from "../../types"; import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent"; import { useHistory } from "../Main/useHistory"; @@ -31,8 +31,7 @@ export const Assets = () => { const [assetScopeOption, setAssetScopeOption] = useState(null); const [selectedFilters, setSelectedFilters] = useState(); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments, backendInfo } = useConfigSelector(); const previousScopeSpanCodeObjectId = usePrevious( scope?.span?.spanCodeObjectId ); @@ -42,7 +41,6 @@ export const Assets = () => { useState(null); const { goTo } = useHistory(); const isBackendUpgradeMessageVisible = false; - const backendInfo = useGlobalStore().backendInfo; const areExtendedAssetsFiltersEnabled = getFeatureFlagValue( backendInfo, FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED diff --git a/src/components/Dashboard/Report/ReportHeader/index.tsx b/src/components/Dashboard/Report/ReportHeader/index.tsx index 07348cc60..dc53f70d6 100644 --- a/src/components/Dashboard/Report/ReportHeader/index.tsx +++ b/src/components/Dashboard/Report/ReportHeader/index.tsx @@ -1,10 +1,10 @@ import { useEffect, useMemo, useState } from "react"; import { actions as globalActions } from "../../../../actions"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { DataFetcherConfiguration, useFetchData } from "../../../../hooks/useFetchData"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { GlobeIcon } from "../../../common/icons/12px/GlobeIcon"; import { WrenchIcon } from "../../../common/icons/12px/WrenchIcon"; @@ -40,7 +40,7 @@ export const ReportHeader = ({ const [selectedEnvironment, setSelectedEnvironment] = useState( null ); - const environments = useGlobalStore().environments; + const { environments } = useConfigSelector(); const handleSelectedEnvironmentChanged = (option: string | string[]) => { const newItem = option === selectedEnvironment diff --git a/src/components/Errors/index.tsx b/src/components/Errors/index.tsx index ca680764c..1b5f44443 100644 --- a/src/components/Errors/index.tsx +++ b/src/components/Errors/index.tsx @@ -1,12 +1,12 @@ import { useParams } from "react-router-dom"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; import { useHistory } from "../Main/useHistory"; import { ErrorDetails } from "./ErrorDetails"; import { ErrorsList } from "./ErrorsList"; import * as s from "./styles"; export const Errors = () => { - const scope = useGlobalStore().scope; + const { scope } = useConfigSelector(); const spanCodeObjectId = scope?.span?.spanCodeObjectId; const methodId = scope?.span?.methodId ?? undefined; const { goTo } = useHistory(); diff --git a/src/components/Highlights/Impact/index.tsx b/src/components/Highlights/Impact/index.tsx index 54ad48865..62a49f0cf 100644 --- a/src/components/Highlights/Impact/index.tsx +++ b/src/components/Highlights/Impact/index.tsx @@ -1,7 +1,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { PERFORMANCE_IMPACT_DOCUMENTATION_URL } from "../../../constants"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../Main/types"; @@ -76,9 +76,7 @@ const getRankTagType = (normalizedRank: number) => { export const Impact = () => { const { data, getData } = useImpactData(); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; - const backendInfo = useGlobalStore().backendInfo; + const { scope, environments, backendInfo } = useConfigSelector(); useEffect(() => { getData(); diff --git a/src/components/Highlights/Impact/useImpactData.ts b/src/components/Highlights/Impact/useImpactData.ts index 0243a64ee..2e14a0805 100644 --- a/src/components/Highlights/Impact/useImpactData.ts +++ b/src/components/Highlights/Impact/useImpactData.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { actions as mainActions } from "../../Main/actions"; import { GetHighlightsImpactDataPayload, ImpactData } from "./types"; @@ -9,8 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useImpactData = () => { const [data, setData] = useState(); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/Performance/index.tsx b/src/components/Highlights/Performance/index.tsx index 33ffcbdd5..82efe5d99 100644 --- a/src/components/Highlights/Performance/index.tsx +++ b/src/components/Highlights/Performance/index.tsx @@ -1,7 +1,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { isBoolean } from "../../../typeGuards/isBoolean"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { formatTimeDistance } from "../../../utils/formatTimeDistance"; @@ -26,7 +26,7 @@ export const Performance = () => { const [isInitialLoading, setIsInitialLoading] = useState(true); const { data, getData } = usePerformanceData(); const previousData = usePrevious(data); - const { scope } = useGlobalStore(); + const { scope, environments } = useConfigSelector(); useEffect(() => { getData(); diff --git a/src/components/Highlights/Performance/usePerformanceData.ts b/src/components/Highlights/Performance/usePerformanceData.ts index 8242cbc7f..def692fb0 100644 --- a/src/components/Highlights/Performance/usePerformanceData.ts +++ b/src/components/Highlights/Performance/usePerformanceData.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { actions as mainActions } from "../../Main/actions"; import { GetHighlightsPerformanceDataPayload, PerformanceData } from "./types"; @@ -9,8 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const usePerformanceData = () => { const [data, setData] = useState(); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/Scaling/index.tsx b/src/components/Highlights/Scaling/index.tsx index 345dc13b7..2fba83575 100644 --- a/src/components/Highlights/Scaling/index.tsx +++ b/src/components/Highlights/Scaling/index.tsx @@ -1,7 +1,7 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; import { useEffect } from "react"; import { SCALING_ISSUE_DOCUMENTATION_URL } from "../../../constants"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../utils/getDurationString"; @@ -75,8 +75,7 @@ const demoData: EnvironmentScalingData[] = [ export const Scaling = () => { const { data, getData } = useScalingData(); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const { goTo } = useHistory(); useEffect(() => { diff --git a/src/components/Highlights/Scaling/useScalingData.ts b/src/components/Highlights/Scaling/useScalingData.ts index 9e8b0cf29..b2e25ee57 100644 --- a/src/components/Highlights/Scaling/useScalingData.ts +++ b/src/components/Highlights/Scaling/useScalingData.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { actions as mainActions } from "../../Main/actions"; import { GetHighlightsScalingDataPayload, ScalingData } from "./types"; @@ -9,8 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useScalingData = () => { const [data, setData] = useState(); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/SpanInfo/useSpanInfoData.ts b/src/components/Highlights/SpanInfo/useSpanInfoData.ts index 07c6585f0..8153884f6 100644 --- a/src/components/Highlights/SpanInfo/useSpanInfoData.ts +++ b/src/components/Highlights/SpanInfo/useSpanInfoData.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { actions as mainActions } from "../../Main/actions"; import { GetHighlightsSpanInfoDataPayload, SpanInfoData } from "./types"; @@ -9,7 +9,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useSpanInfoData = () => { const [data, setData] = useState(); - const scope = useGlobalStore().scope; + const { scope } = useConfigSelector(); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx index 19eb6cb1b..7d9f45c41 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx @@ -1,6 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -19,8 +19,7 @@ import { EndpointBottleneckHighlightCardProps } from "./types"; export const EndpointBottleneckHighlightCard = ({ data }: EndpointBottleneckHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx index 6e33de0e6..92fcbcd36 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -16,8 +16,7 @@ import { EndpointChattyApiV2HighlightCardProps } from "./types"; export const EndpointChattyApiV2HighlightCard = ({ data }: EndpointChattyApiV2HighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx index 87c0415e3..3a7b8efec 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -19,8 +19,7 @@ import { EndpointHighNumberOfQueriesHighlightCardProps } from "./types"; export const EndpointHighNumberOfQueriesHighlightCard = ({ data }: EndpointHighNumberOfQueriesHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx index df03ca280..b963d68ff 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -20,8 +20,7 @@ import { EndpointQueryOptimizationV2HighlightCardProps } from "./types"; export const EndpointQueryOptimizationV2HighlightCard = ({ data }: EndpointQueryOptimizationV2HighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx index 07777163a..73fbe2b49 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -15,8 +15,7 @@ import { EndpointSessionInViewHighlightCardProps } from "./types"; export const EndpointSessionInViewHighlightCard = ({ data }: EndpointSessionInViewHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx index fd7c6e567..6254a3e39 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -17,8 +17,7 @@ import { EndpointSlowdownSourceHighlightCardProps } from "./types"; export const EndpointSlowdownSourceHighlightCard = ({ data }: EndpointSlowdownSourceHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx index 8a868b2fe..7a5fb455f 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx @@ -1,6 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -19,8 +19,7 @@ import { EndpointSpanNPlusOneHighlightCardProps } from "./types"; export const EndpointSpanNPlusOneHighlightCard = ({ data }: EndpointSpanNPlusOneHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx index 7bc41a1a1..a5f6b21e2 100644 --- a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -12,8 +12,7 @@ import { addEnvironmentColumns } from "../addEnvironmentColumns"; import { HotSpotHighlightCardProps } from "./types"; export const HotSpotHighlightCard = ({ data }: HotSpotHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx index 2329d0685..e7bf27cc9 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx @@ -1,6 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -17,8 +17,7 @@ import { SpaNPlusOneHighlightCardProps } from "./types"; export const SpaNPlusOneHighlightCard = ({ data }: SpaNPlusOneHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx index 615189e99..42a30b659 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx @@ -1,6 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -17,8 +17,7 @@ import { SpanEndpointBottleneckHighlightCardProps } from "./types"; export const SpanEndpointBottleneckHighlightCard = ({ data }: SpanEndpointBottleneckHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx index 4aa950f98..33a448c89 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx @@ -1,6 +1,6 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; import { Duration } from "../../../../../globals"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { getDurationString } from "../../../../../utils/getDurationString"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; @@ -19,8 +19,7 @@ import { SpanQueryOptimizationHighlightCardProps } from "./types"; export const SpanQueryOptimizationHighlightCard = ({ data }: SpanQueryOptimizationHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx index 8fe6a85a1..7568115f9 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx +++ b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx @@ -1,5 +1,5 @@ import { Row, createColumnHelper } from "@tanstack/react-table"; -import { useGlobalStore } from "../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent"; import { SCOPE_CHANGE_EVENTS } from "../../../../Main/types"; import { Table } from "../../../common/Table"; @@ -14,8 +14,7 @@ import { SpanScalingHighlightCardProps } from "./types"; export const SpanScalingHighlightCard = ({ data }: SpanScalingHighlightCardProps) => { - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const columnHelper = createColumnHelper>(); diff --git a/src/components/Highlights/TopIssues/index.tsx b/src/components/Highlights/TopIssues/index.tsx index 7aba78487..5a6038543 100644 --- a/src/components/Highlights/TopIssues/index.tsx +++ b/src/components/Highlights/TopIssues/index.tsx @@ -1,8 +1,8 @@ import { Fragment, useEffect, useMemo, useState } from "react"; import { v4 as uuidv4 } from "uuid"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../hooks/usePagination"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { InsightType } from "../../Insights/types"; import { CrossCircleIcon } from "../../common/icons/16px/CrossCircleIcon"; import { RefreshIcon } from "../../common/icons/16px/RefreshIcon"; @@ -94,7 +94,7 @@ export const TopIssues = () => { const [isInitialLoading, setIsInitialLoading] = useState(true); const { data, getData } = useTopIssuesData(); const previousData = usePrevious(data); - const scope = useGlobalStore().scope; + const { scope } = useConfigSelector(); // Do not show unimplemented insights const filteredInsights = useMemo( () => diff --git a/src/components/Highlights/TopIssues/useTopIssuesData.ts b/src/components/Highlights/TopIssues/useTopIssuesData.ts index 93ce137dc..e75546215 100644 --- a/src/components/Highlights/TopIssues/useTopIssuesData.ts +++ b/src/components/Highlights/TopIssues/useTopIssuesData.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { actions as mainActions } from "../../Main/actions"; import { GetHighlightsTopIssuesDataPayload } from "../../Main/types"; import { TopIssuesData } from "./types"; @@ -10,8 +10,7 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds export const useTopIssuesData = () => { const [data, setData] = useState(); - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { scope, environments } = useConfigSelector(); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); diff --git a/src/components/Highlights/index.tsx b/src/components/Highlights/index.tsx index 64c4f96bd..d72c6de72 100644 --- a/src/components/Highlights/index.tsx +++ b/src/components/Highlights/index.tsx @@ -1,5 +1,5 @@ -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../featureFlags"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; import { FeatureFlag } from "../../types"; import { Impact } from "./Impact"; import { Performance } from "./Performance"; @@ -9,7 +9,7 @@ import { TopIssues } from "./TopIssues"; import * as s from "./styles"; export const Highlights = () => { - const backendInfo = useGlobalStore().backendInfo; + const { backendInfo } = useConfigSelector(); const isSpanInfoVisible = getFeatureFlagValue( backendInfo, diff --git a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx index 77cd47592..820a9e5f8 100644 --- a/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx +++ b/src/components/Insights/InsightsCatalog/EnvironmentSelector/index.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import useDimensions from "react-cool-dimensions"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { changeScope } from "../../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { Environment } from "../../../common/App/types"; @@ -59,8 +59,7 @@ const sortEnvironmentsByCriticalIssues = ( export const EnvironmentSelector = ({ environments }: EnvironmentSelectorProps) => { - const scope = useGlobalStore().scope; - const environment = useGlobalStore().environment; + const { scope, environment } = useConfigSelector(); const [isMenuOpen, setIsMenuOpen] = useState(false); const { observe, width } = useDimensions(); const sortedEnvironments = environments.sort( diff --git a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx index 1eaa2d70a..b0d9f92f9 100644 --- a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx +++ b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx @@ -1,5 +1,5 @@ -import { useInsightsStore } from "../../../../containers/Main/stores/insights/useInsightsStore"; -import { useStore } from "../../../../containers/Main/stores/useStore"; +import { useInsightsSelector } from "../../../../store/insights/useInsightsSelector"; +import { useStore } from "../../../../store/useStore"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { InsightFilterType } from "../types"; import { FilterChip } from "./FilterChip"; @@ -11,7 +11,7 @@ export const FilterPanel = ({ allIssuesCount, unreadCount }: FilterPanelProps) => { - const filters = useInsightsStore().filters; + const { filters } = useInsightsSelector(); const { setFilters } = useStore.getState(); const handleFilterChipClick = (selectedFilter?: InsightFilterType) => { diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx index 077a5c75f..c37818821 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/index.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef } from "react"; import { actions as globalActions } from "../../../../actions"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { usePersistence } from "../../../../hooks/usePersistence"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { trackingEvents as globalTrackingEvents } from "../../../../trackingEvents"; import { isNumber } from "../../../../typeGuards/isNumber"; import { isUndefined } from "../../../../typeGuards/isUndefined"; @@ -488,8 +488,7 @@ export const InsightsPage = ({ isMarkAsReadButtonEnabled, isFilteringEnabled }: InsightsPageProps) => { - const scope = useGlobalStore().scope; - const environment = useGlobalStore().environment; + const { scope, environment } = useConfigSelector(); const [isInsightJiraTicketHintShown, setIsInsightJiraTicketHintShown] = usePersistence( IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx index 6a041854c..81120c4a3 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx @@ -1,5 +1,5 @@ -import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../../../../hooks/usePagination"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; import { Button } from "../../../../../common/v3/Button"; import { Pagination } from "../../../../../common/v3/Pagination"; @@ -23,7 +23,7 @@ export const EndpointSessionInViewInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: EndpointSessionInViewInsightCardProps) => { - const isJaegerEnabled = useGlobalStore().isJaegerEnabled; + const { isJaegerEnabled } = useConfigSelector(); const [pageItems, page, setPage] = usePagination( insight.spans, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx index 1b33556ce..852cb3a02 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import { getDurationString } from "../../../../../../utils/getDurationString"; import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; import { Button } from "../../../../../common/v3/Button"; @@ -31,7 +31,7 @@ export const SpaNPlusOneInsightCard = ({ endpoints[0] ); const maxDurationString = getDurationString(endpointWithMaxDuration.duration); - const isJaegerEnabled = useGlobalStore().isJaegerEnabled; + const { isJaegerEnabled } = useConfigSelector(); const [selectedEndpoint, setSelectedEndpoint] = useState( endpoints.length ? endpoints[0] : null ); diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx index 990f2e640..6e555d451 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanDurationBreakdownInsightCard/index.tsx @@ -5,10 +5,10 @@ import { useReactTable } from "@tanstack/react-table"; import { useEffect, useMemo, useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../../../../featureFlags"; import { usePagination } from "../../../../../../hooks/usePagination"; import { usePrevious } from "../../../../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import { isNumber } from "../../../../../../typeGuards/isNumber"; import { FeatureFlag } from "../../../../../../types"; import { getDurationString } from "../../../../../../utils/getDurationString"; @@ -73,7 +73,7 @@ export const SpanDurationBreakdownInsightCard = ({ items: [] }); - const backendInfo = useGlobalStore().backendInfo; + const { backendInfo } = useConfigSelector(); const isQuantitySupported = getFeatureFlagValue( backendInfo, FeatureFlag.IS_DURATION_BREAKDOWN_QUANTITY_ENABLED diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx index 62b3d5098..5071b09d9 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import { isNull } from "../../../../../../typeGuards/isNull"; import { getDurationString } from "../../../../../../utils/getDurationString"; import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; @@ -27,7 +27,7 @@ export const SpanEndpointBottleneckInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: SpanEndpointBottleneckInsightCardProps) => { - const isJaegerEnabled = useGlobalStore().isJaegerEnabled; + const { isJaegerEnabled } = useConfigSelector(); const slowEndpoints = insight.slowEndpoints ?? []; const endpointWithMaxDuration = slowEndpoints.reduce( (acc, cur) => diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx index ada02e643..8599972db 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx @@ -1,5 +1,5 @@ -import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../../../../hooks/usePagination"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import { getDurationString } from "../../../../../../utils/getDurationString"; import { trimEndpointScheme } from "../../../../../../utils/trimEndpointScheme"; import { TraceIcon } from "../../../../../common/icons/12px/TraceIcon"; @@ -30,7 +30,7 @@ export const SpanScalingInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: SpanScalingInsightCardProps) => { - const isJaegerEnabled = useGlobalStore().isJaegerEnabled; + const { isJaegerEnabled } = useConfigSelector(); const affectedEndpoints = insight.affectedEndpoints ?? []; const [pageItems, page, setPage] = usePagination( affectedEndpoints, diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx index 6a9efd5ed..a573b558b 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanUsagesInsightCard/index.tsx @@ -5,9 +5,9 @@ import { useReactTable } from "@tanstack/react-table"; import { useEffect, useState } from "react"; -import { useGlobalStore } from "../../../../../../containers/Main/stores/global/useGlobalStore"; import { usePagination } from "../../../../../../hooks/usePagination"; import { usePrevious } from "../../../../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../../../../store/config/useConfigSelector"; import { isNumber } from "../../../../../../typeGuards/isNumber"; import { InsightType } from "../../../../../../types"; import { roundTo } from "../../../../../../utils/roundTo"; @@ -43,7 +43,7 @@ export const SpanUsagesInsightCard = ({ isMarkAsReadButtonEnabled, viewMode }: SpanUsagesInsightCardProps) => { - const isJaegerEnabled = useGlobalStore().isJaegerEnabled; + const { isJaegerEnabled } = useConfigSelector(); const [data, setData] = useState({ pageItems: insight.flows.slice(0, PAGE_SIZE) }); diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx index a099e0009..f0574c05c 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../../../../store/config/useConfigSelector"; import { isString } from "../../../../../../../../typeGuards/isString"; import { formatTimeDistance } from "../../../../../../../../utils/formatTimeDistance"; import { getInsightTypeInfo } from "../../../../../../../../utils/getInsightTypeInfo"; @@ -38,7 +38,7 @@ export const InsightHeader = ({ lastUpdateTimer, isAsync }: InsightHeaderProps) => { - const scope = useGlobalStore().scope; + const { scope } = useConfigSelector(); const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType); const statusTooltipContent = renderInsightStatusTooltipContent(insight); diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx index bf6f1e145..94630ecb2 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx @@ -1,7 +1,7 @@ import { Fragment, useEffect, useState } from "react"; -import { useGlobalStore } from "../../../../../../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../../../../../../dispatcher"; import { usePrevious } from "../../../../../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../../../../../store/config/useConfigSelector"; import { isString } from "../../../../../../../typeGuards/isString"; import { sendUserActionTrackingEvent } from "../../../../../../../utils/actions/sendUserActionTrackingEvent"; import { Spinner } from "../../../../../../Navigation/CodeButtonMenu/Spinner"; @@ -60,7 +60,7 @@ export const InsightCard = ({ const isOperationInProgress = isDismissalChangeInProgress || isMarkingAsReadInProgress; const previousIsOperationInProgress = usePrevious(isOperationInProgress); - const isJaegerEnabled = useGlobalStore().isJaegerEnabled; + const { isJaegerEnabled } = useConfigSelector(); const [insightStatus, setInsightStatus] = useState(insight.status); const isCritical = insight.criticality > HIGH_CRITICALITY_THRESHOLD; diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx index f0b791db2..822c6c668 100644 --- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx +++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { useTheme } from "styled-components"; -import { useGlobalStore } from "../../../../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../../../../store/config/useConfigSelector"; import { sendUserActionTrackingEvent } from "../../../../../../../utils/actions/sendUserActionTrackingEvent"; import { getInsightTypeInfo } from "../../../../../../../utils/getInsightTypeInfo"; import { CrossIcon } from "../../../../../../common/icons/16px/CrossIcon"; @@ -38,7 +38,7 @@ export const IssueCompactCard = ({ isCritical }: IssueCompactCardProps) => { const theme = useTheme(); - const isJaegerEnabled = useGlobalStore().isJaegerEnabled; + const { isJaegerEnabled } = useConfigSelector(); const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false); const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType); const statusInfo = insight.status diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx index aa4cf7cbd..fbf276980 100644 --- a/src/components/Insights/InsightsCatalog/index.tsx +++ b/src/components/Insights/InsightsCatalog/index.tsx @@ -1,13 +1,13 @@ import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { useTheme } from "styled-components"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; -import { useInsightsStore } from "../../../containers/Main/stores/insights/useInsightsStore"; -import { useStore } from "../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../featureFlags"; import { useDebounce } from "../../../hooks/useDebounce"; import { usePersistence } from "../../../hooks/usePersistence"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; +import { useInsightsSelector } from "../../../store/insights/useInsightsSelector"; +import { useStore } from "../../../store/useStore"; import { isNumber } from "../../../typeGuards/isNumber"; import { isUndefined } from "../../../typeGuards/isUndefined"; import { FeatureFlag } from "../../../types"; @@ -82,9 +82,16 @@ export const InsightsCatalog = ({ data, viewMode: mode, insightViewType - } = useInsightsStore(); + } = useInsightsSelector(); - const { selectedServices } = useGlobalStore(); + const { + selectedServices, + insightStats, + environment, + environments, + scope, + backendInfo + } = useConfigSelector(); const debouncedSearchInputValue = useDebounce(searchInputValue, 1000); @@ -97,13 +104,8 @@ export const InsightsCatalog = ({ pageStartItemNumber + PAGE_SIZE - 1, totalCount ); - const insightStats = useGlobalStore().insightStats; - const environment = useGlobalStore().environment; - const environments = useGlobalStore().environments; - const scope = useGlobalStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const isAtSpan = Boolean(scope?.span); - const backendInfo = useGlobalStore().backendInfo; const theme = useTheme(); const { isMarkingAllAsReadInProgress, markAllAsRead } = useMarkingAllAsRead( scope?.span ?? null diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx index f97a47215..f1d30e79c 100644 --- a/src/components/Insights/Issues/IssuesFilter/index.tsx +++ b/src/components/Insights/Issues/IssuesFilter/index.tsx @@ -1,9 +1,9 @@ import { useEffect, useMemo } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; -import { useInsightsStore } from "../../../../containers/Main/stores/insights/useInsightsStore"; -import { useStore } from "../../../../containers/Main/stores/useStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; import { usePrevious } from "../../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; +import { useInsightsSelector } from "../../../../store/insights/useInsightsSelector"; +import { useStore } from "../../../../store/useStore"; import { FeatureFlag } from "../../../../types"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; @@ -20,11 +20,10 @@ import * as s from "./styles"; import { trackingEvents } from "./tracking"; export const IssuesFilter = () => { - const { filteredInsightTypes, filters } = useInsightsStore(); - const selectedServices = useGlobalStore().selectedServices; + const { filteredInsightTypes, filters } = useInsightsSelector(); + const { selectedServices, backendInfo, scope } = useConfigSelector(); const { setSelectedServices, setFilteredInsightTypes, setFilters } = useStore.getState(); - const backendInfo = useGlobalStore().backendInfo; const isCriticalOnly = useMemo( () => filters.includes("criticality"), [filters] @@ -32,7 +31,6 @@ export const IssuesFilter = () => { const isUnreadOnly = useMemo(() => filters.includes("unread"), [filters]); const { data } = useIssuesFilters(); const previousData = usePrevious(data); - const scope = useGlobalStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const isServicesFilterEnabled = Boolean( diff --git a/src/components/Insights/Issues/useIssuesFilters.ts b/src/components/Insights/Issues/useIssuesFilters.ts index 7ddf87ef4..7bd22ac2f 100644 --- a/src/components/Insights/Issues/useIssuesFilters.ts +++ b/src/components/Insights/Issues/useIssuesFilters.ts @@ -1,10 +1,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { DigmaMessageError } from "../../../api/types"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; -import { useInsightsStore } from "../../../containers/Main/stores/insights/useInsightsStore"; -import { useStore } from "../../../containers/Main/stores/useStore"; import { dispatcher } from "../../../dispatcher"; import { usePrevious } from "../../../hooks/usePrevious"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; +import { useInsightsSelector } from "../../../store/insights/useInsightsSelector"; +import { useStore } from "../../../store/useStore"; import { GetIssuesFiltersPayload } from "../../../types"; import { ViewMode } from "../InsightsCatalog/types"; import { actions as issuesActions } from "./actions"; @@ -29,16 +29,14 @@ export const useIssuesFilters = () => { filteredInsightTypes, viewMode, filters - } = useInsightsStore(); + } = useInsightsSelector(); const { setIssuesFilters: setData } = useStore.getState(); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); const refreshTimerId = useRef(); - const environment = useGlobalStore().environment; + const { environment, scope, backendInfo } = useConfigSelector(); const environmentId = environment?.id; - const scope = useGlobalStore().scope; const spanCodeObjectId = scope?.span?.spanCodeObjectId ?? null; - const backendInfo = useGlobalStore().backendInfo; const query: GetIssuesFiltersQuery = useMemo( () => ({ diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx index 90049fa06..17dbb541c 100644 --- a/src/components/Insights/index.tsx +++ b/src/components/Insights/index.tsx @@ -1,11 +1,11 @@ import { KeyboardEvent, useCallback, useEffect, useState } from "react"; import { actions as globalActions } from "../../actions"; import { SLACK_WORKSPACE_URL } from "../../constants"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; -import { useInsightsStore } from "../../containers/Main/stores/insights/useInsightsStore"; -import { useStore } from "../../containers/Main/stores/useStore"; import { usePersistence } from "../../hooks/usePersistence"; import { usePrevious } from "../../hooks/usePrevious"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; +import { useInsightsSelector } from "../../store/insights/useInsightsSelector"; +import { useStore } from "../../store/useStore"; import { trackingEvents as globalTrackingEvents } from "../../trackingEvents"; import { isUndefined } from "../../typeGuards/isUndefined"; import { openURLInDefaultBrowser } from "../../utils/actions/openURLInDefaultBrowser"; @@ -227,8 +227,13 @@ export const Insights = ({ insightViewType }: InsightsProps) => { }); const [infoToOpenJiraTicket, setInfoToOpenJiraTicket] = useState>(); - const { backendInfo, environment, userRegistrationEmail, environments } = - useGlobalStore(); + const { + backendInfo, + environment, + userRegistrationEmail, + environments, + scope + } = useConfigSelector(); const previousUserRegistrationEmail = usePrevious(userRegistrationEmail); const [isRegistrationInProgress, setIsRegistrationInProgress] = useState(false); @@ -245,12 +250,11 @@ export const Insights = ({ insightViewType }: InsightsProps) => { insightViewType: storedInsightViewType, filteredInsightTypes, filters - } = useInsightsStore(); + } = useInsightsSelector(); const previousFilteredInsightTypes = usePrevious(filteredInsightTypes); const previousFilters = usePrevious(filters); const previousBackendInfo = usePrevious(backendInfo); - const scope = useGlobalStore().scope; const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const previousScope = usePrevious(scope); const previousScopeSpanCodeObjectId = previousScope?.span?.spanCodeObjectId; diff --git a/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx index 342481916..d175a3ebd 100644 --- a/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointQueryOptimizationV2InsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { InsightType } from "../../../../types"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../../utils/getDurationString"; @@ -23,7 +23,7 @@ export const EndpointQueryOptimizationV2InsightTicket = ({ refreshInsights, onClose }: InsightTicketProps) => { - const jaegerURL = useGlobalStore().jaegerURL; + const { jaegerURL } = useConfigSelector(); const span = data.insight.span; const spanInfo = span?.spanInfo || null; diff --git a/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx index 33e5d439e..e26d46624 100644 --- a/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/EndpointSpanNPlusOneInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { InsightType } from "../../../../types"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; @@ -19,7 +19,7 @@ export const EndpointSpanNPlusOneInsightTicket = ({ refreshInsights, onClose }: InsightTicketProps) => { - const jaegerURL = useGlobalStore().jaegerURL; + const { jaegerURL } = useConfigSelector(); const span = data.insight.span; const spanInfo = span?.internalSpan ?? span?.clientSpan; diff --git a/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx index 35d687131..2e77e4904 100644 --- a/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpaNPlusOneInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { intersperse } from "../../../../utils/intersperse"; import { DigmaSignature } from "../../../common/DigmaSignature"; @@ -21,7 +21,7 @@ export const SpaNPlusOneInsightTicket = ({ const spanInsight = data.insight; const { commitInfos, isLoading, codeLocations } = useSpanDataSource(data.insight.spanInfo, data.insight); - const jaegerURL = useGlobalStore().jaegerURL; + const { jaegerURL } = useConfigSelector(); const endpoints = data.insight.endpoints ?? []; diff --git a/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx index 187b4a8c4..f6a700b4a 100644 --- a/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanQueryOptimizationInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel"; import { getDurationString } from "../../../../utils/getDurationString"; import { intersperse } from "../../../../utils/intersperse"; @@ -19,7 +19,7 @@ export const SpanQueryOptimizationInsightTicket = ({ onClose }: InsightTicketProps) => { const { isLoading, commitInfos } = useCommitInfos(data.insight); - const jaegerURL = useGlobalStore().jaegerURL; + const { jaegerURL } = useConfigSelector(); const criticalityString = data.insight.criticality > 0 diff --git a/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx index 36be4ad43..ccccdc773 100644 --- a/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingByRootCauseInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { InsightType } from "../../../../types"; import { intersperse } from "../../../../utils/intersperse"; import { DigmaSignature } from "../../../common/DigmaSignature"; @@ -29,8 +29,7 @@ export const SpanScalingByRootCauseInsightTicket = ({ }: InsightTicketProps & { rootCauseSpanInfo: RootCauseSpanInfo; }) => { - const jaegerURL = useGlobalStore().jaegerURL; - const digmaApiProxyPrefix = useGlobalStore().digmaApiProxyPrefix; + const { jaegerURL, digmaApiProxyPrefix } = useConfigSelector(); const spanInfo = rootCauseSpanInfo; diff --git a/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx index c46925bb5..422ef3890 100644 --- a/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx +++ b/src/components/Insights/insightTickets/SpanScalingInsightTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { intersperse } from "../../../../utils/intersperse"; import { DigmaSignature } from "../../../common/DigmaSignature"; import { Attachment } from "../../../common/JiraTicket/types"; @@ -25,8 +25,7 @@ export const SpanScalingInsightTicket = ({ refreshInsights, onClose }: InsightTicketProps) => { - const jaegerURL = useGlobalStore().jaegerURL; - const digmaApiProxyPrefix = useGlobalStore().digmaApiProxyPrefix; + const { jaegerURL, digmaApiProxyPrefix } = useConfigSelector(); const insight = data.insight; diff --git a/src/components/Insights/useInsightsData.ts b/src/components/Insights/useInsightsData.ts index 1f66d36b3..6927e4797 100644 --- a/src/components/Insights/useInsightsData.ts +++ b/src/components/Insights/useInsightsData.ts @@ -1,12 +1,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { actions as globalActions } from "../../actions"; import { DigmaMessageError } from "../../api/types"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; -import { useInsightsStore } from "../../containers/Main/stores/insights/useInsightsStore"; -import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { getFeatureFlagValue } from "../../featureFlags"; import { usePrevious } from "../../hooks/usePrevious"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; +import { useInsightsSelector } from "../../store/insights/useInsightsSelector"; +import { useStore } from "../../store/useStore"; import { FeatureFlag, GetInsightStatsPayload, @@ -132,7 +132,8 @@ const getStats = ({ export const useInsightsData = ({ areFiltersRehydrated }: UseInsightsDataProps) => { - const scope = useGlobalStore().scope; + const { scope, backendInfo, environment, selectedServices } = + useConfigSelector(); const { data, search, @@ -141,11 +142,10 @@ export const useInsightsData = ({ viewMode, filters, filteredInsightTypes, - isDataLoading: isLoading - } = useInsightsStore(); + isDataLoading: isLoading, + insightViewType + } = useInsightsSelector(); const { setData, setIsDataLoading: setIsLoading } = useStore.getState(); - const { backendInfo, environment, selectedServices } = useGlobalStore(); - const isInitialLoading = !data && isLoading; const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); @@ -156,7 +156,6 @@ export const useInsightsData = ({ () => selectedServices ?? [], [selectedServices] ); - const insightViewType = useInsightsStore().insightViewType; const spanCodeObjectId = scope?.span?.spanCodeObjectId ?? null; const showDismissed = viewMode === ViewMode.OnlyDismissed; const isAppReadyToGetData = useMemo( diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index 84c36bdf6..0a101a1f7 100644 --- a/src/components/Main/index.tsx +++ b/src/components/Main/index.tsx @@ -2,14 +2,14 @@ import { useEffect, useLayoutEffect, useMemo } from "react"; import { Outlet, matchPath, useLocation } from "react-router-dom"; import { actions as globalActions } from "../../actions"; import { history } from "../../containers/Main/history"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; -import { useStore } from "../../containers/Main/stores/useStore"; import { dispatcher } from "../../dispatcher"; import { HistoryEntryLocation } from "../../history/History"; import { usePersistence } from "../../hooks/usePersistence"; import { usePrevious } from "../../hooks/usePrevious"; import { logger } from "../../logging"; import { PLUGIN_EVENTS } from "../../pluginEvents"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; +import { useStore } from "../../store/useStore"; import { trackingEvents as globalTrackingEvents } from "../../trackingEvents"; import { isUndefined } from "../../typeGuards/isUndefined"; import { SendPluginEventPayload } from "../../types"; @@ -50,14 +50,11 @@ const getURLToNavigateOnCodeLensClick = (scope: Scope): string | undefined => { export const Main = () => { const location = useLocation(); - const environments = useGlobalStore().environments; - const environment = useGlobalStore().environment; + const { environments, environment, scope, userInfo, backendInfo } = + useConfigSelector(); const previousEnvironment = usePrevious(environment); - const scope = useGlobalStore().scope; - const userInfo = useGlobalStore().userInfo; const userId = userInfo?.id; const previousUserId = usePrevious(userId); - const backendInfo = useGlobalStore().backendInfo; const previousBackendInfo = usePrevious(backendInfo); const { goTo } = useHistory(); const updateBrowserLocation = useBrowserLocationUpdater(); @@ -66,7 +63,7 @@ export const Main = () => { "project" ); const previousPersistedServices = usePrevious(persistedServices); - const selectedServices = useGlobalStore().selectedServices; + const selectedServices = useConfigSelector().selectedServices; const { setSelectedServices } = useStore.getState(); const isInitialized = useMemo( () => !isUndefined(persistedServices), diff --git a/src/components/Main/useHistory.tsx b/src/components/Main/useHistory.tsx index 7f9814627..a89b35177 100644 --- a/src/components/Main/useHistory.tsx +++ b/src/components/Main/useHistory.tsx @@ -1,7 +1,7 @@ import { NavigateOptions, To, resolvePath } from "react-router-dom"; import { history } from "../../containers/Main/history"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { HistoryEntry, HistoryEntryLocation } from "../../history/History"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; import { isString } from "../../typeGuards/isString"; import { HistoryState } from "./types"; @@ -88,8 +88,7 @@ const isNewHistoryEntryNeeded = ( export const useHistory = () => { const location = history.getCurrentLocation(); - const environment = useGlobalStore().environment; - const scope = useGlobalStore().scope; + const { environment, scope } = useConfigSelector(); const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId; const goTo = (to: To, options?: NavigateOptions) => { diff --git a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx index 46f5bc635..97bf24b90 100644 --- a/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx +++ b/src/components/Navigation/EnvironmentBar/EnvironmentMenu/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { Environment } from "../../../common/App/types"; import { EnvironmentIcon } from "../../../common/EnvironmentIcon"; import { MenuList } from "../../common/MenuList"; @@ -9,7 +9,7 @@ export const EnvironmentMenu = ({ environments, onMenuItemClick }: EnvironmentMenuProps) => { - const environment = useGlobalStore().environment; + const { environment } = useConfigSelector(); const handleMenuItemClick = (environment: Environment) => { onMenuItemClick(environment); diff --git a/src/components/Navigation/HistoryNavigationPanel/index.tsx b/src/components/Navigation/HistoryNavigationPanel/index.tsx index cc1eff4d0..4fe425397 100644 --- a/src/components/Navigation/HistoryNavigationPanel/index.tsx +++ b/src/components/Navigation/HistoryNavigationPanel/index.tsx @@ -2,8 +2,8 @@ import { useEffect } from "react"; import { Location, useLocation, useNavigate } from "react-router-dom"; import { useTheme } from "styled-components"; import { history } from "../../../containers/Main/history"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { HistoryEntry } from "../../../history/History"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { changeScope } from "../../../utils/actions/changeScope"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { @@ -22,9 +22,7 @@ import * as s from "./styles"; export const HistoryNavigationPanel = () => { const { goBack, goForward, goTo, canGoBack, canGoForward } = useHistory(); const navigate = useNavigate(); - const environments = useGlobalStore().environments; - const environment = useGlobalStore().environment; - const scope = useGlobalStore().scope; + const { environments, environment, scope } = useConfigSelector(); const location = useLocation() as Location; const theme = useTheme(); const updateBrowserLocation = useBrowserLocationUpdater(); diff --git a/src/components/Navigation/KebabMenu/index.tsx b/src/components/Navigation/KebabMenu/index.tsx index d70ae3aaf..8cc56800d 100644 --- a/src/components/Navigation/KebabMenu/index.tsx +++ b/src/components/Navigation/KebabMenu/index.tsx @@ -1,6 +1,6 @@ import { actions as globalActions } from "../../../actions"; import { DIGMA_DOCUMENTATION } from "../../../constants"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { OpenInstallationWizardPayload } from "../../../types"; import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -19,9 +19,7 @@ import { OpenDashboardPayload, OpenDocumentationPayload } from "../types"; import { KebabMenuProps } from "./types"; export const KebabMenu = ({ onClose }: KebabMenuProps) => { - const backendInfo = useGlobalStore().backendInfo; - const digmaStatus = useGlobalStore().digmaStatus; - const environment = useGlobalStore().environment; + const { backendInfo, digmaStatus, environment } = useConfigSelector(); const handleOnboardingClick = () => { sendUserActionTrackingEvent(trackingEvents.ONBOARDING_LINK_CLICKED); diff --git a/src/components/Navigation/Tabs/index.tsx b/src/components/Navigation/Tabs/index.tsx index 270c2690c..006d7e069 100644 --- a/src/components/Navigation/Tabs/index.tsx +++ b/src/components/Navigation/Tabs/index.tsx @@ -1,6 +1,6 @@ import { useMemo } from "react"; import { useLocation } from "react-router-dom"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; @@ -85,8 +85,7 @@ const getIsNewIndicatorVisible = ( ); export const Tabs = () => { - const scope = useGlobalStore().scope; - const insightStats = useGlobalStore().insightStats; + const { scope, insightStats } = useConfigSelector(); const location = useLocation(); const { goTo } = useHistory(); diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index e47785819..0e7516f88 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect, useState } from "react"; import { actions as globalActions } from "../../actions"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../dispatcher"; import { usePrevious } from "../../hooks/usePrevious"; // import { isNull } from "../../typeGuards/isNull"; @@ -16,6 +15,7 @@ import { ThreeDotsIcon } from "../common/icons/ThreeDotsIcon"; // import { Tooltip } from "../common/v3/Tooltip"; // import { CodeButton } from "./CodeButton"; // import { CodeButtonMenu } from "./CodeButtonMenu"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; import { EnvironmentBar } from "./EnvironmentBar"; import { HistoryNavigationPanel } from "./HistoryNavigationPanel"; import { KebabMenu } from "./KebabMenu"; @@ -78,11 +78,8 @@ import { // }; export const Navigation = () => { - const environments = useGlobalStore().environments; - const environment = useGlobalStore().environment; - const scope = useGlobalStore().scope; - const userInfo = useGlobalStore().userInfo; - const backendInfo = useGlobalStore().backendInfo; + const { environments, environment, scope, userInfo, backendInfo } = + useConfigSelector(); const [selectedEnvironment, setSelectedEnvironment] = useState(environment); const [codeContext, setCodeContext] = useState(); // const [isCodeButtonMenuOpen, setIsCodeButtonMenuOpen] = useState(false); diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx index 67602ed85..6257d3446 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/EnvironmentVariableCode/index.tsx @@ -1,6 +1,6 @@ import { Fragment, ReactNode } from "react"; -import { useGlobalStore } from "../../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../../featureFlags"; +import { useConfigSelector } from "../../../../store/config/useConfigSelector"; import { isString } from "../../../../typeGuards/isString"; import { FeatureFlag } from "../../../../types"; import { intersperse } from "../../../../utils/intersperse"; @@ -88,11 +88,10 @@ const renderEnvironmentVariables = ( }; export const EnvironmentVariableCode = () => { - const environment = useGlobalStore().environment; - const backendInfo = useGlobalStore().backendInfo; - const isMicrometerProject = Boolean(useGlobalStore().isMicrometerProject); - const userId = useGlobalStore().userInfo?.id; - const runConfig = useGlobalStore().runConfig; + const { environment, backendInfo, userInfo, runConfig, isMicrometerProject } = + useConfigSelector(); + const isMicrometerProjectValue = isMicrometerProject ?? false; + const userId = userInfo?.id; if (!environment || !backendInfo) { return null; } @@ -115,7 +114,7 @@ export const EnvironmentVariableCode = () => { if (areNewInstrumentationAttributesEnabled) { if (isCentralizedDeployment) { return renderEnvironmentVariables( - isMicrometerProject, + isMicrometerProjectValue, [ ["environmentName", environmentName], ["environmentType", environmentType], @@ -125,7 +124,7 @@ export const EnvironmentVariableCode = () => { ); } else { return renderEnvironmentVariables( - isMicrometerProject, + isMicrometerProjectValue, [["environmentName", environmentName]], javaToolOptions ); @@ -133,7 +132,7 @@ export const EnvironmentVariableCode = () => { } return renderEnvironmentVariables( - isMicrometerProject, + isMicrometerProjectValue, [["environmentId", environmentId]], javaToolOptions ); diff --git a/src/components/Tests/TestTicket/index.tsx b/src/components/Tests/TestTicket/index.tsx index d5ed642ba..f10d4a5b4 100644 --- a/src/components/Tests/TestTicket/index.tsx +++ b/src/components/Tests/TestTicket/index.tsx @@ -1,5 +1,5 @@ import { ReactElement } from "react"; -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { isString } from "../../../typeGuards/isString"; import { getDurationString } from "../../../utils/getDurationString"; import { intersperse } from "../../../utils/intersperse"; @@ -23,7 +23,8 @@ export const TestTicket = ({ contextsSpanCodeObjectIds } = test; const summary = `"${name}" test failed`; - const jaegerURL = useGlobalStore().jaegerURL ?? ""; + const { jaegerURL } = useConfigSelector(); + const jaegerURLString = jaegerURL ?? ""; const relatedSpans = spanContexts .filter((x) => contextsSpanCodeObjectIds.includes(x.spanCodeObjectId)) @@ -54,7 +55,7 @@ export const TestTicket = ({ ); - const traceAttachment = getTraceAttachment(jaegerURL, traceId); + const traceAttachment = getTraceAttachment(jaegerURLString, traceId); const attachments: Attachment[] = [ ...(traceAttachment ? [traceAttachment] : []) ]; diff --git a/src/components/Tests/index.tsx b/src/components/Tests/index.tsx index 363127765..e69599028 100644 --- a/src/components/Tests/index.tsx +++ b/src/components/Tests/index.tsx @@ -1,8 +1,8 @@ import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"; import { actions as globalActions } from "../../actions"; -import { useGlobalStore } from "../../containers/Main/stores/global/useGlobalStore"; import { dispatcher } from "../../dispatcher"; import { usePrevious } from "../../hooks/usePrevious"; +import { useConfigSelector } from "../../store/config/useConfigSelector"; import { isNull } from "../../typeGuards/isNull"; import { sendTrackingEvent } from "../../utils/actions/sendTrackingEvent"; import { MenuItem } from "../common/FilterMenu/types"; @@ -65,9 +65,7 @@ export const Tests = () => { const [isInitialLoading, setIsInitialLoading] = useState(false); const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState(); const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp); - const userRegistrationEmail = useGlobalStore().userRegistrationEmail; - const scope = useGlobalStore().scope; - const environments = useGlobalStore().environments; + const { userRegistrationEmail, scope, environments } = useConfigSelector(); const [testToOpenTicketPopup, setTestToOpenTicketPopup] = useState(); const previousUserRegistrationEmail = usePrevious(userRegistrationEmail); useState(false); diff --git a/src/components/common/App/index.tsx b/src/components/common/App/index.tsx index d0e4ec209..4e10e79d5 100644 --- a/src/components/common/App/index.tsx +++ b/src/components/common/App/index.tsx @@ -2,10 +2,10 @@ import { ErrorInfo, useContext, useEffect, useState } from "react"; import { ErrorBoundary } from "react-error-boundary"; import { ThemeProvider } from "styled-components"; import { actions } from "../../../actions"; -import { useStore } from "../../../containers/Main/stores/useStore"; import { dispatcher } from "../../../dispatcher"; import { Theme } from "../../../globals"; import { logger } from "../../../logging"; +import { useStore } from "../../../store/useStore"; import { isBoolean } from "../../../typeGuards/isBoolean"; import { isNull } from "../../../typeGuards/isNull"; import { isObject } from "../../../typeGuards/isObject"; diff --git a/src/components/common/ImpactScore/index.tsx b/src/components/common/ImpactScore/index.tsx index ffb65395b..09669e90e 100644 --- a/src/components/common/ImpactScore/index.tsx +++ b/src/components/common/ImpactScore/index.tsx @@ -1,5 +1,5 @@ -import { useGlobalStore } from "../../../containers/Main/stores/global/useGlobalStore"; import { getFeatureFlagValue } from "../../../featureFlags"; +import { useConfigSelector } from "../../../store/config/useConfigSelector"; import { FeatureFlag } from "../../../types"; import { BackendInfo } from "../App/types"; import { ScoreIndicator } from "../ScoreIndicator"; @@ -52,7 +52,7 @@ export const ImpactScore = ({ showIndicator, indicatorPosition }: ImpactScoreProps) => { - const backendInfo = useGlobalStore().backendInfo; + const { backendInfo } = useConfigSelector(); let scoreIndicatorPosition: "start" | "end" | undefined; diff --git a/src/containers/Main/stores/global/useGlobalStore.ts b/src/containers/Main/stores/global/useGlobalStore.ts deleted file mode 100644 index 550499df5..000000000 --- a/src/containers/Main/stores/global/useGlobalStore.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { useStore } from ".././useStore"; - -export const useGlobalStore = () => { - return useStore((state) => state.global); -}; diff --git a/src/containers/Main/stores/insights/useInsightsStore.ts b/src/containers/Main/stores/insights/useInsightsStore.ts deleted file mode 100644 index 958839ef9..000000000 --- a/src/containers/Main/stores/insights/useInsightsStore.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { useStore } from ".././useStore"; - -export const useInsightsStore = () => useStore((state) => state.insights); diff --git a/src/containers/Main/stores/global/globalSlice.ts b/src/store/config/configSlice.ts similarity index 92% rename from src/containers/Main/stores/global/globalSlice.ts rename to src/store/config/configSlice.ts index 5f2509f5f..c6b157708 100644 --- a/src/containers/Main/stores/global/globalSlice.ts +++ b/src/store/config/configSlice.ts @@ -8,12 +8,12 @@ import { RunConfiguration, Scope, UserInfo -} from "../../../../components/common/App/types"; -import { isBoolean } from "../../../../typeGuards/isBoolean"; -import { isEnvironment } from "../../../../typeGuards/isEnvironment"; -import { isString } from "../../../../typeGuards/isString"; +} from "../../components/common/App/types"; +import { isBoolean } from "../../typeGuards/isBoolean"; +import { isEnvironment } from "../../typeGuards/isEnvironment"; +import { isString } from "../../typeGuards/isString"; -export interface GlobalState { +export interface ConfigState { digmaApiUrl: string | null; digmaApiProxyPrefix: string | null; digmaStatus: DigmaStatus | null; @@ -42,7 +42,7 @@ export interface GlobalState { scope: Scope | null; } -const initialState: GlobalState = { +const initialState: ConfigState = { digmaApiUrl: isString(window.digmaApiUrl) ? window.digmaApiUrl : null, digmaApiProxyPrefix: isString(window.digmaApiProxyPrefix) ? window.digmaApiProxyPrefix @@ -93,13 +93,13 @@ const initialState: GlobalState = { scope: null }; -const set = (update: Partial) => (state: GlobalState) => ({ +const set = (update: Partial) => (state: ConfigState) => ({ ...state, ...update }); -export const globalSlice = createSlice({ - name: "global", +export const configSlice = createSlice({ + name: "config", value: initialState, actions: { setDigmaApiUrl: (url: string) => set({ digmaApiUrl: url }), diff --git a/src/store/config/useConfigSelector.ts b/src/store/config/useConfigSelector.ts new file mode 100644 index 000000000..f79e3ab64 --- /dev/null +++ b/src/store/config/useConfigSelector.ts @@ -0,0 +1,5 @@ +import { useStore } from "../useStore"; + +export const useConfigSelector = () => { + return useStore((state) => state.config); +}; diff --git a/src/containers/Main/stores/insights/insightSlice.ts b/src/store/insights/insightsSlice.ts similarity index 85% rename from src/containers/Main/stores/insights/insightSlice.ts rename to src/store/insights/insightsSlice.ts index 0ce496bd0..1394fda06 100644 --- a/src/containers/Main/stores/insights/insightSlice.ts +++ b/src/store/insights/insightsSlice.ts @@ -2,17 +2,14 @@ import { createSlice } from "zustand-slices"; import { Sorting, SORTING_ORDER -} from "../../../../components/common/SortingSelector/types"; +} from "../../components/common/SortingSelector/types"; import { InsightFilterType, SORTING_CRITERION, ViewMode -} from "../../../../components/Insights/InsightsCatalog/types"; -import { IssuesFiltersData } from "../../../../components/Insights/Issues/IssuesFilter/types"; -import { - InsightsData, - InsightViewType -} from "../../../../components/Insights/types"; +} from "../../components/Insights/InsightsCatalog/types"; +import { IssuesFiltersData } from "../../components/Insights/Issues/IssuesFilter/types"; +import { InsightsData, InsightViewType } from "../../components/Insights/types"; interface InsightsState { data: InsightsData | null; diff --git a/src/store/insights/useInsightsSelector.ts b/src/store/insights/useInsightsSelector.ts new file mode 100644 index 000000000..2b9f28653 --- /dev/null +++ b/src/store/insights/useInsightsSelector.ts @@ -0,0 +1,3 @@ +import { useStore } from "../useStore"; + +export const useInsightsSelector = () => useStore((state) => state.insights); diff --git a/src/containers/Main/stores/useStore.ts b/src/store/useStore.ts similarity index 56% rename from src/containers/Main/stores/useStore.ts rename to src/store/useStore.ts index 4a659a9f1..d6dfbf21f 100644 --- a/src/containers/Main/stores/useStore.ts +++ b/src/store/useStore.ts @@ -1,19 +1,19 @@ import { create } from "zustand"; import { withSlices } from "zustand-slices"; -import { Scope } from "../../../components/common/App/types"; -import { globalSlice } from "./global/globalSlice"; -import { insightsSlice } from "./insights/insightSlice"; +import { Scope } from "../components/common/App/types"; +import { configSlice } from "./config/configSlice"; +import { insightsSlice } from "./insights/insightsSlice"; import { withMutableActions } from "./withMutableActions"; export const useStore = create( - withMutableActions(withSlices(globalSlice, insightsSlice), { + withMutableActions(withSlices(configSlice, insightsSlice), { setScope: (scope: Scope) => (_, set) => { set((state) => - state.global.scope?.span?.spanCodeObjectId !== + state.config.scope?.span?.spanCodeObjectId !== scope.span?.spanCodeObjectId ? { ...state, - global: { ...state.global, scope }, + global: { ...state.config, scope }, insights: { ...state.insights, page: 0, search: "" } } : state diff --git a/src/containers/Main/stores/withMutableActions.ts b/src/store/withMutableActions.ts similarity index 94% rename from src/containers/Main/stores/withMutableActions.ts rename to src/store/withMutableActions.ts index c039fb517..8082881f4 100644 --- a/src/containers/Main/stores/withMutableActions.ts +++ b/src/store/withMutableActions.ts @@ -1,4 +1,4 @@ -/// inspired by https://github.com/zustandjs/zustand-slices/blob/main/src/with-actions.ts +// Inspired by: https://github.com/zustandjs/zustand-slices/blob/main/src/with-actions.ts type InferStateActions = Actions extends Record< string, From c7e08fa79b79f4f04899c15904b2b6645df79306 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 30 Aug 2024 15:40:41 +0200 Subject: [PATCH 18/18] Fix setScope --- src/store/useStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/useStore.ts b/src/store/useStore.ts index d6dfbf21f..827bee2ba 100644 --- a/src/store/useStore.ts +++ b/src/store/useStore.ts @@ -13,7 +13,7 @@ export const useStore = create( scope.span?.spanCodeObjectId ? { ...state, - global: { ...state.config, scope }, + config: { ...state.config, scope }, insights: { ...state.insights, page: 0, search: "" } } : state