From 76f2f13db748b7160ffa3c0dd4a0b8e42f762963 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 23 Jan 2025 16:37:41 +0100
Subject: [PATCH 1/3] Support custom metric in Affected Endpoints

---
 .../SpaNPlusOneInsightCard/index.tsx          | 39 +++++++++++--------
 .../index.tsx                                 | 36 ++++++++---------
 .../AffectedEndpointsSelector.stories.tsx     | 18 +++++++--
 .../EndpointOption/index.tsx                  | 14 ++++---
 .../EndpointOption/types.ts                   |  9 +++--
 .../AffectedEndpointsSelector/index.tsx       | 23 ++++++-----
 .../common/AffectedEndpointsSelector/types.ts | 18 ++++++---
 7 files changed, 93 insertions(+), 64 deletions(-)

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpaNPlusOneInsightCard/index.tsx
index e2869ff2d..0f57a63a3 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpaNPlusOneInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpaNPlusOneInsightCard/index.tsx
@@ -21,11 +21,14 @@ import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
 import type { SpaNPlusOneInsightCardProps } from "./types";
 
-const getSelectorOption = (endpoint: NPlusOneEndpointInfo): Option => ({
+const getSelectorOption = (endpoint: NPlusOneEndpointInfo): Option<number> => ({
   route: endpoint.endpointInfo.route,
   serviceName: endpoint.endpointInfo.serviceName,
   spanCodeObjectId: endpoint.endpointInfo.entrySpanCodeObjectId,
-  duration: endpoint.duration
+  metric: {
+    value: endpoint.occurrences,
+    label: "Repeats"
+  }
 });
 
 export const SpaNPlusOneInsightCard = ({
@@ -41,21 +44,21 @@ export const SpaNPlusOneInsightCard = ({
   viewMode,
   onDismissalChange
 }: SpaNPlusOneInsightCardProps) => {
-  const endpoints = useMemo(() => insight.endpoints ?? [], [insight.endpoints]);
-  const selectorOptions = useMemo(
+  const endpoints = useMemo(
     () =>
-      endpoints
-        .map(getSelectorOption)
-        .sort((a, b) =>
-          a.duration && b.duration ? b.duration.raw - a.duration.raw : 0
-        ),
-    [endpoints]
+      (insight.endpoints ?? []).sort((a, b) => b.occurrences - a.occurrences),
+    [insight.endpoints]
   );
-  const endpointWithMaxDuration = endpoints.reduce(
-    (acc, cur) => (acc.duration.raw >= cur.duration.raw ? acc : cur),
-    endpoints[0]
+
+  const selectorOptions = useMemo(
+    () => endpoints.map(getSelectorOption),
+    [endpoints]
   );
-  const maxDurationString = getDurationString(endpointWithMaxDuration.duration);
+  const endpointWithMaxDuration =
+    endpoints.length > 0 ? endpoints[0] : undefined;
+  const maxDurationString = endpointWithMaxDuration
+    ? getDurationString(endpointWithMaxDuration.duration)
+    : undefined;
   const { isJaegerEnabled } = useConfigSelector();
   const [selectedEndpointKey, setSelectedEndpointKey] = useState<
     string | undefined
@@ -192,9 +195,11 @@ export const SpaNPlusOneInsightCard = ({
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
       viewMode={viewMode}
       mainMetric={
-        <Tooltip title={maxDurationString}>
-          <span>{maxDurationString}</span>
-        </Tooltip>
+        maxDurationString ? (
+          <Tooltip title={maxDurationString}>
+            <span>{maxDurationString}</span>
+          </Tooltip>
+        ) : undefined
       }
       onDismissalChange={onDismissalChange}
     />
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
index 0bf734510..069a7ef84 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
@@ -23,11 +23,16 @@ import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
 import type { SpanEndpointBottleneckInsightCardProps } from "./types";
 
-const getSelectorOption = (endpoint: BottleneckEndpointInfo): Option => ({
+const getSelectorOption = (
+  endpoint: BottleneckEndpointInfo
+): Option<string> => ({
   route: trimEndpointScheme(endpoint.endpointInfo.route),
   serviceName: endpoint.endpointInfo.serviceName,
   spanCodeObjectId: endpoint.endpointInfo.spanCodeObjectId,
-  duration: endpoint.avgDurationWhenBeingBottleneck
+  metric: {
+    value: getDurationString(endpoint.avgDurationWhenBeingBottleneck),
+    label: "Requests"
+  }
 });
 
 export const SpanEndpointBottleneckInsightCard = ({
@@ -45,30 +50,21 @@ export const SpanEndpointBottleneckInsightCard = ({
 }: SpanEndpointBottleneckInsightCardProps) => {
   const { isJaegerEnabled } = useConfigSelector();
   const slowEndpoints = useMemo(
-    () => insight.slowEndpoints ?? [],
+    () =>
+      (insight.slowEndpoints ?? []).sort(
+        (a, b) =>
+          b.avgDurationWhenBeingBottleneck.raw -
+          a.avgDurationWhenBeingBottleneck.raw
+      ),
     [insight.slowEndpoints]
   );
-  const selectorOptions: Option[] = useMemo(
-    () =>
-      slowEndpoints
-        .map(getSelectorOption)
-        .sort((a, b) =>
-          a.duration && b.duration ? b.duration.raw - a.duration.raw : 0
-        ),
+  const selectorOptions: Option<string>[] = useMemo(
+    () => slowEndpoints.map(getSelectorOption),
     [slowEndpoints]
   );
 
   const endpointWithMaxDuration =
-    slowEndpoints.length > 0
-      ? slowEndpoints.reduce(
-          (acc, cur) =>
-            acc.avgDurationWhenBeingBottleneck.raw >=
-            cur.avgDurationWhenBeingBottleneck.raw
-              ? acc
-              : cur,
-          slowEndpoints[0]
-        )
-      : undefined;
+    slowEndpoints.length > 0 ? slowEndpoints[0] : undefined;
   const maxDurationString = endpointWithMaxDuration
     ? getDurationString(endpointWithMaxDuration.avgDurationWhenBeingBottleneck)
     : undefined;
diff --git a/src/components/common/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx b/src/components/common/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx
index 2c6d72294..b1e925156 100644
--- a/src/components/common/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx
+++ b/src/components/common/AffectedEndpointsSelector/AffectedEndpointsSelector.stories.tsx
@@ -23,18 +23,30 @@ export const Default: Story = {
         route: "test",
         serviceName:
           "someasasdasdasdasdasdasdawerereasdsadsadsadsadsadasdsadasdsadsdhfkjdhskjfgdf;lgjhdfhglkdfhgklhsdklfghkhgdfgkdfklghrthysdfhsbfheslkbyieryiobyrieuytirosynoiuybioyustest2",
-        spanCodeObjectId: "spanCodeObjectId1"
+        spanCodeObjectId: "spanCodeObjectId1",
+        metric: {
+          value: 100,
+          label: "100 ms"
+        }
       },
       {
         route:
           "someasasdasdasdasdasdasdawerereasdsadsadsadsadsadasdsadasdsadsdhfkjdhskjfgdf;lgjhdfhglkdfhgklhsdklfghkhgdfgkdfklghrthysdfhsbfheslkbyieryiobyrieuytirosynoiuybioyustest",
         serviceName: "test1",
-        spanCodeObjectId: "spanCodeObjectId2"
+        spanCodeObjectId: "spanCodeObjectId2",
+        metric: {
+          value: 200,
+          label: "200 ms"
+        }
       },
       {
         route: "test",
         serviceName: "test1",
-        spanCodeObjectId: "spanCodeObjectId2"
+        spanCodeObjectId: "spanCodeObjectId2",
+        metric: {
+          value: 300,
+          label: "300 ms"
+        }
       }
     ]
   }
diff --git a/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx b/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx
index 1500d2cf9..d12770d59 100644
--- a/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx
+++ b/src/components/common/AffectedEndpointsSelector/EndpointOption/index.tsx
@@ -2,7 +2,7 @@ import { Tooltip } from "../../v3/Tooltip";
 import * as s from "./styles";
 import type { EndpointOptionProps } from "./types";
 
-export const EndpointOption = ({
+export const EndpointOption = <T,>({
   serviceName,
   route,
   spanCodeObjectId,
@@ -10,9 +10,9 @@ export const EndpointOption = ({
   selected,
   hideCopyIcon,
   onClick,
-  duration,
-  hideDuration
-}: EndpointOptionProps) => {
+  metric,
+  isHeader
+}: EndpointOptionProps<T>) => {
   const title = `${serviceName} ${route}`;
 
   return (
@@ -34,8 +34,10 @@ export const EndpointOption = ({
             )}
           </s.Route>
           {!hideCopyIcon && <s.StyledCopyButton text={route} />}
-          {!selected && !hideDuration && duration && (
-            <s.Duration>{duration}</s.Duration>
+          {!selected && metric && (
+            <s.Duration>
+              {isHeader ? metric.label : String(metric.value)}
+            </s.Duration>
           )}
         </s.EndpointName>
       </Tooltip>
diff --git a/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts b/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts
index 78f01617c..0fe951736 100644
--- a/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts
+++ b/src/components/common/AffectedEndpointsSelector/EndpointOption/types.ts
@@ -1,4 +1,4 @@
-export interface EndpointOptionProps {
+export interface EndpointOptionProps<T> {
   serviceName: string;
   route: string;
   spanCodeObjectId?: string;
@@ -6,8 +6,11 @@ export interface EndpointOptionProps {
   onSpanLinkClick?: (spanCodeObjectId: string) => void;
   hideCopyIcon?: boolean;
   onClick?: ((spanCodeObjectId?: string) => void) | null;
-  duration?: string;
-  hideDuration?: boolean;
+  metric?: {
+    value: T;
+    label: string;
+  };
+  isHeader?: boolean;
 }
 
 export interface EndpointNameProps {
diff --git a/src/components/common/AffectedEndpointsSelector/index.tsx b/src/components/common/AffectedEndpointsSelector/index.tsx
index a9860d11d..5be1268c3 100644
--- a/src/components/common/AffectedEndpointsSelector/index.tsx
+++ b/src/components/common/AffectedEndpointsSelector/index.tsx
@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 import { DELIMITER } from "../../../constants";
-import { getDurationString } from "../../../utils/getDurationString";
 import { trimEndpointScheme } from "../../../utils/trimEndpointScheme";
 import { Select } from "../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/Select";
 import type { CustomContentProps } from "../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/Select/types";
@@ -11,8 +10,8 @@ import type { AffectedEndpointsSelectorProps, Option } from "./types";
 export const getEndpointKey = (option: Option): string =>
   [option.serviceName, option.spanCodeObjectId].join(DELIMITER);
 
-const renderOptions = (
-  endpoints: Option[],
+const renderOptions = <T,>(
+  endpoints: Option<T>[],
   handleLinkClick: (spanCodeObjectId?: string) => void
 ): {
   label: string;
@@ -22,11 +21,11 @@ const renderOptions = (
   endpoints.map((x) => {
     const spanCodeObjectId = x.spanCodeObjectId;
     const route = trimEndpointScheme(x.route);
-    const durationString = x.duration && getDurationString(x.duration);
+
     return {
       label: route,
       customContent: ({ isSelected, onClick }) => (
-        <EndpointOption
+        <EndpointOption<T>
           serviceName={x.serviceName}
           route={route}
           selected={isSelected}
@@ -34,20 +33,20 @@ const renderOptions = (
           onSpanLinkClick={handleLinkClick}
           hideCopyIcon={!isSelected}
           onClick={onClick}
-          duration={durationString}
+          metric={"metric" in x ? x.metric : undefined}
         />
       ),
       value: getEndpointKey(x)
     };
   });
 
-export const AffectedEndpointsSelector = ({
+export const AffectedEndpointsSelector = <T = undefined,>({
   onAssetLinkClick,
   value,
   options,
   onChange,
   isDisabled
-}: AffectedEndpointsSelectorProps) => {
+}: AffectedEndpointsSelectorProps<T>) => {
   const handleSpanLinkClick = (spanCodeObjectId?: string) => {
     if (spanCodeObjectId) {
       onAssetLinkClick(spanCodeObjectId);
@@ -58,6 +57,11 @@ export const AffectedEndpointsSelector = ({
     onChange(value);
   };
 
+  const metric =
+    options.length > 0 && "metric" in options[0]
+      ? options[0].metric
+      : undefined;
+
   return (
     <Select
       value={value}
@@ -69,8 +73,9 @@ export const AffectedEndpointsSelector = ({
           <EndpointOption
             route={"Endpoint"}
             serviceName={"Service"}
-            duration={"Duration"}
             hideCopyIcon={true}
+            metric={metric}
+            isHeader={true}
           />
         </s.ListHeader>
       }
diff --git a/src/components/common/AffectedEndpointsSelector/types.ts b/src/components/common/AffectedEndpointsSelector/types.ts
index 8305200b5..7c12c330f 100644
--- a/src/components/common/AffectedEndpointsSelector/types.ts
+++ b/src/components/common/AffectedEndpointsSelector/types.ts
@@ -1,5 +1,3 @@
-import type { Duration } from "../../../globals";
-
 export interface FilterButtonProps {
   isActive: boolean;
   onClick: () => void;
@@ -10,17 +8,25 @@ export interface ContainerProps {
   $isActive: boolean;
 }
 
-export interface AffectedEndpointsSelectorProps {
+export interface AffectedEndpointsSelectorProps<T> {
   value?: string;
-  options: Option[];
+  options: Option<T>[];
   onChange: (value: string) => void;
   onAssetLinkClick: (spanCodeObjectId: string) => void;
   isDisabled?: boolean;
 }
 
-export interface Option {
+export interface OptionBase {
   serviceName: string;
   route: string;
   spanCodeObjectId: string;
-  duration?: Duration;
 }
+
+export type Option<T = undefined> = T extends undefined
+  ? OptionBase
+  : OptionBase & {
+      metric: {
+        value: T;
+        label: string;
+      };
+    };

From 74957b99e3b5376444d7db24ae3d44fdd49257e1 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 23 Jan 2025 16:49:47 +0100
Subject: [PATCH 2/3] Fix header title

---
 .../insightCards/SpanEndpointBottleneckInsightCard/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
index 069a7ef84..e2004b590 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
@@ -31,7 +31,7 @@ const getSelectorOption = (
   spanCodeObjectId: endpoint.endpointInfo.spanCodeObjectId,
   metric: {
     value: getDurationString(endpoint.avgDurationWhenBeingBottleneck),
-    label: "Requests"
+    label: "Duration"
   }
 });
 

From b5bdbed9ed780a24851106892a250a96aa1e3eae Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Fri, 24 Jan 2025 11:54:08 +0100
Subject: [PATCH 3/3] Persist code issues report filters

---
 package-lock.json                             | 10 +++
 package.json                                  |  1 +
 .../Admin/Reports/CodeIssues/index.tsx        |  8 ---
 src/components/Admin/Sidebar/index.tsx        |  4 +-
 src/components/Admin/index.tsx                | 66 ++++++++++++++-----
 src/components/Admin/styles.ts                |  7 ++
 .../icons/16px/TwoHorizontalEndpointsIcon.tsx | 26 ++++++++
 src/containers/Admin/constants.ts             |  1 +
 src/containers/Admin/store.ts                 | 39 ++++++++---
 src/redux/actions.ts                          |  3 +
 src/redux/constants.ts                        |  2 +
 src/redux/slices/appSlice.ts                  | 32 +++++++++
 src/redux/slices/authSlice.ts                 | 32 +++++++++
 src/redux/slices/issuesReportSlice.ts         |  9 ++-
 src/redux/slices/types.ts                     |  3 +
 src/redux/utils/getRememberEnhancer.ts        | 46 +++++++++++++
 16 files changed, 256 insertions(+), 33 deletions(-)
 create mode 100644 src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx
 create mode 100644 src/containers/Admin/constants.ts
 create mode 100644 src/redux/actions.ts
 create mode 100644 src/redux/constants.ts
 create mode 100644 src/redux/slices/appSlice.ts
 create mode 100644 src/redux/slices/authSlice.ts
 create mode 100644 src/redux/slices/types.ts
 create mode 100644 src/redux/utils/getRememberEnhancer.ts

diff --git a/package-lock.json b/package-lock.json
index 3658e3146..3990c94c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "react-syntax-highlighter": "^15.5.0",
         "react-transition-group": "^4.4.5",
         "recharts": "^2.6.2",
+        "redux-remember": "^5.2.0",
         "semver": "^7.5.4",
         "squarify": "^1.1.0",
         "styled-components": "^6.1.13",
@@ -17518,6 +17519,15 @@
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
       "license": "MIT"
     },
+    "node_modules/redux-remember": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/redux-remember/-/redux-remember-5.2.0.tgz",
+      "integrity": "sha512-HqXx9V+DKzgBzpiIT5dyiXZgiiSB6zaMs4sIscwQ+Z0zVwUvJh20mqPEQWo4wbthuo5+5jGrS7Yfvv4HyOuAFw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": ">=5.0.0"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
diff --git a/package.json b/package.json
index 750074f2e..5ef4c4d14 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-transition-group": "^4.4.5",
     "recharts": "^2.6.2",
+    "redux-remember": "^5.2.0",
     "semver": "^7.5.4",
     "squarify": "^1.1.0",
     "styled-components": "^6.1.13",
diff --git a/src/components/Admin/Reports/CodeIssues/index.tsx b/src/components/Admin/Reports/CodeIssues/index.tsx
index 3255c8a2d..c754e28b2 100644
--- a/src/components/Admin/Reports/CodeIssues/index.tsx
+++ b/src/components/Admin/Reports/CodeIssues/index.tsx
@@ -4,10 +4,8 @@ import {
   useAdminDispatch,
   useAdminSelector
 } from "../../../../containers/Admin/hooks";
-import { useMount } from "../../../../hooks/useMount";
 import type { IssueCriticality } from "../../../../redux/services/types";
 import {
-  clear,
   setCriticalityLevels,
   setPeriodInDays,
   setSelectedEndpoints,
@@ -61,12 +59,6 @@ export const CodeIssues = () => {
 
   const dispatch = useAdminDispatch();
 
-  useMount(() => {
-    return () => {
-      dispatch(clear());
-    };
-  });
-
   const handleTileTitleClick = (
     viewLevel: IssuesReportViewLevel,
     target: TargetScope
diff --git a/src/components/Admin/Sidebar/index.tsx b/src/components/Admin/Sidebar/index.tsx
index 941f350be..4ca8b5b38 100644
--- a/src/components/Admin/Sidebar/index.tsx
+++ b/src/components/Admin/Sidebar/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useTheme } from "styled-components";
+import { useAdminDispatch } from "../../../containers/Admin/hooks";
 import { useLogoutMutation } from "../../../redux/services/auth";
 import { getThemeKind } from "../../common/App/styles";
 import { LogoutIcon } from "../../common/icons/16px/LogoutIcon";
@@ -10,6 +11,7 @@ export const Sidebar = () => {
   const theme = useTheme();
   const themeKind = getThemeKind(theme);
   const [logout, result] = useLogoutMutation();
+  const dispatch = useAdminDispatch();
 
   const handleLogoutButtonClick = () => {
     void logout();
@@ -29,7 +31,7 @@ export const Sidebar = () => {
         window.clearTimeout(timeoutId);
       }
     };
-  }, [result.isSuccess]);
+  }, [result.isSuccess, dispatch]);
 
   return (
     <s.Sidebar>
diff --git a/src/components/Admin/index.tsx b/src/components/Admin/index.tsx
index 7b8f96fd8..d99978ed2 100644
--- a/src/components/Admin/index.tsx
+++ b/src/components/Admin/index.tsx
@@ -1,21 +1,57 @@
+import { useEffect } from "react";
 import { Helmet } from "react-helmet";
 import { Outlet } from "react-router-dom";
+import {
+  useAdminDispatch,
+  useAdminSelector
+} from "../../containers/Admin/hooks";
+import { globalClear } from "../../redux/actions";
+import { useGetUserProfileQuery } from "../../redux/services/digma";
+import { setIsInitialized } from "../../redux/slices/appSlice";
+import { setEmail } from "../../redux/slices/authSlice";
+import { Spinner } from "../common/v3/Spinner";
 import { Header } from "./Header";
 import { Sidebar } from "./Sidebar";
 import * as s from "./styles";
 
-export const Admin = () => (
-  <s.Container>
-    <Helmet>
-      <title>Digma admin panel</title>
-      <meta name={"viewport"} content={"width=device-width"} />
-    </Helmet>
-    <Sidebar />
-    <s.ContentContainer>
-      <Header />
-      <s.MainContainer>
-        <Outlet />
-      </s.MainContainer>
-    </s.ContentContainer>
-  </s.Container>
-);
+export const Admin = () => {
+  const { data: userProfile } = useGetUserProfileQuery();
+  const dispatch = useAdminDispatch();
+  const currentEmail = useAdminSelector((state) => state.auth.email);
+  const isInitialized = useAdminSelector((state) => state.app.isInitialized);
+
+  // Clear issues report state when user changes
+  useEffect(() => {
+    if (userProfile?.email) {
+      if (currentEmail !== userProfile.email) {
+        dispatch(globalClear());
+      }
+      dispatch(setEmail(userProfile.email));
+      dispatch(setIsInitialized(true));
+    }
+  }, [dispatch, currentEmail, userProfile?.email]);
+
+  return (
+    <s.Container>
+      <Helmet>
+        <title>Digma admin panel</title>
+        <meta name={"viewport"} content={"width=device-width"} />
+      </Helmet>
+      {isInitialized ? (
+        <>
+          <Sidebar />
+          <s.ContentContainer>
+            <Header />
+            <s.MainContainer>
+              <Outlet />
+            </s.MainContainer>
+          </s.ContentContainer>
+        </>
+      ) : (
+        <s.LoadingContainer>
+          <Spinner size={50} />
+        </s.LoadingContainer>
+      )}
+    </s.Container>
+  );
+};
diff --git a/src/components/Admin/styles.ts b/src/components/Admin/styles.ts
index b803fb4c8..b348eda1d 100644
--- a/src/components/Admin/styles.ts
+++ b/src/components/Admin/styles.ts
@@ -18,3 +18,10 @@ export const MainContainer = styled.main`
   height: 100%;
   overflow: auto;
 `;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`;
diff --git a/src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx b/src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx
new file mode 100644
index 000000000..8be9b845e
--- /dev/null
+++ b/src/components/common/icons/16px/TwoHorizontalEndpointsIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import type { IconProps } from "../types";
+
+const TwoHorizontalEndpointsIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill={color}
+        d="M13 9c-.929 0-1.705.64-1.929 1.5H1v1h10.071c.2235.86 1 1.5 1.929 1.5 1.103 0 2-.897 2-2s-.897-2-2-2Zm0 3c-.5515 0-1-.4485-1-1s.4485-1 1-1 1 .4485 1 1-.4485 1-1 1Zm0-9c-.929 0-1.705.64-1.929 1.5H1v1h10.071c.2235.86 1 1.5 1.929 1.5 1.103 0 2-.897 2-2s-.897-2-2-2Zm0 3c-.5515 0-1-.4485-1-1s.4485-1 1-1 1 .4485 1 1-.4485 1-1 1Z"
+      />
+    </svg>
+  );
+};
+
+export const TwoHorizontalEndpointsIcon = React.memo(
+  TwoHorizontalEndpointsIconComponent
+);
diff --git a/src/containers/Admin/constants.ts b/src/containers/Admin/constants.ts
new file mode 100644
index 000000000..d6fbc9ded
--- /dev/null
+++ b/src/containers/Admin/constants.ts
@@ -0,0 +1 @@
+export const APP_ID = "admin";
diff --git a/src/containers/Admin/store.ts b/src/containers/Admin/store.ts
index 3daeaa3bf..de6d49274 100644
--- a/src/containers/Admin/store.ts
+++ b/src/containers/Admin/store.ts
@@ -1,19 +1,42 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { setupListeners } from "@reduxjs/toolkit/query";
+import { rememberReducer } from "redux-remember";
+import { platform } from "../../platform";
+import { PERSIST_PREFIX, STATE_VERSION } from "../../redux/constants";
 import { authApi } from "../../redux/services/auth";
 import { digmaApi } from "../../redux/services/digma";
+import { appSlice } from "../../redux/slices/appSlice";
+import { authSlice } from "../../redux/slices/authSlice";
 import issuesReportSlice from "../../redux/slices/issuesReportSlice";
+import { getRememberEnhancer } from "../../redux/utils/getRememberEnhancer";
+import { APP_ID } from "./constants";
+
+const rememberedKeys = platform === "Web" ? ["auth", "codeIssuesReport"] : [];
+
+const persistPrefix = `${PERSIST_PREFIX}${APP_ID}-`;
+
+const reducer = rememberReducer({
+  app: appSlice.reducer,
+  auth: authSlice.reducer,
+  codeIssuesReport: issuesReportSlice,
+  [authApi.reducerPath]: authApi.reducer,
+  [digmaApi.reducerPath]: digmaApi.reducer
+});
 
 export const store = configureStore({
-  reducer: {
-    codeIssuesReport: issuesReportSlice,
-    [authApi.reducerPath]: authApi.reducer,
-    [digmaApi.reducerPath]: digmaApi.reducer
-  },
+  reducer,
+  enhancers: (getDefaultEnhancers) =>
+    getDefaultEnhancers().concat(
+      getRememberEnhancer({
+        rememberedKeys,
+        prefix: persistPrefix,
+        version: STATE_VERSION
+      })
+    ),
+  // TODO: Fix types
+  // @ts-expect-error More info: https://github.com/zewish/redux-remember/issues/11
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware()
-      .concat(digmaApi.middleware)
-      .concat(authApi.middleware)
+    getDefaultMiddleware().concat(digmaApi.middleware, authApi.middleware)
 });
 
 setupListeners(store.dispatch);
diff --git a/src/redux/actions.ts b/src/redux/actions.ts
new file mode 100644
index 000000000..0446ed4c1
--- /dev/null
+++ b/src/redux/actions.ts
@@ -0,0 +1,3 @@
+import { createAction } from "@reduxjs/toolkit";
+
+export const globalClear = createAction("global/clear");
diff --git a/src/redux/constants.ts b/src/redux/constants.ts
new file mode 100644
index 000000000..a936e1cd8
--- /dev/null
+++ b/src/redux/constants.ts
@@ -0,0 +1,2 @@
+export const PERSIST_PREFIX = "@@remember-";
+export const STATE_VERSION = 5;
diff --git a/src/redux/slices/appSlice.ts b/src/redux/slices/appSlice.ts
new file mode 100644
index 000000000..ccd3519d8
--- /dev/null
+++ b/src/redux/slices/appSlice.ts
@@ -0,0 +1,32 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
+import { globalClear } from "../actions";
+import { STATE_VERSION } from "../constants";
+import type { BaseState } from "./types";
+
+export interface GlobalState extends BaseState {
+  isInitialized: boolean;
+}
+
+const initialState: GlobalState = {
+  version: STATE_VERSION,
+  isInitialized: false
+};
+
+export const appSlice = createSlice({
+  name: "app",
+  initialState,
+  reducers: {
+    setIsInitialized: (state, action: PayloadAction<boolean>) => {
+      state.isInitialized = action.payload;
+    },
+    clear: () => initialState
+  },
+  extraReducers: (builder) => {
+    builder.addCase(globalClear, () => initialState);
+  }
+});
+
+export const { setIsInitialized } = appSlice.actions;
+
+export default appSlice.reducer;
diff --git a/src/redux/slices/authSlice.ts b/src/redux/slices/authSlice.ts
new file mode 100644
index 000000000..bc78ffd15
--- /dev/null
+++ b/src/redux/slices/authSlice.ts
@@ -0,0 +1,32 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
+import { globalClear } from "../actions";
+import { STATE_VERSION } from "../constants";
+import type { BaseState } from "./types";
+
+export interface AuthState extends BaseState {
+  email: string | null;
+}
+
+const initialState: AuthState = {
+  version: STATE_VERSION,
+  email: null
+};
+
+export const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setEmail: (state, action: PayloadAction<string>) => {
+      state.email = action.payload;
+    },
+    clear: () => initialState
+  },
+  extraReducers: (builder) => {
+    builder.addCase(globalClear, () => initialState);
+  }
+});
+
+export const { setEmail } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/src/redux/slices/issuesReportSlice.ts b/src/redux/slices/issuesReportSlice.ts
index 6144f8b4e..600569386 100644
--- a/src/redux/slices/issuesReportSlice.ts
+++ b/src/redux/slices/issuesReportSlice.ts
@@ -1,6 +1,9 @@
 import type { PayloadAction } from "@reduxjs/toolkit";
 import { createSlice } from "@reduxjs/toolkit";
+import { globalClear } from "../actions";
+import { STATE_VERSION } from "../constants";
 import type { IssueCriticality } from "../services/types";
+import type { BaseState } from "./types";
 
 export type IssuesReportViewMode = "treemap" | "table";
 
@@ -8,7 +11,7 @@ export type IssuesReportTimeMode = "baseline" | "changes";
 
 export type IssuesReportViewLevel = "services" | "endpoints";
 
-export interface IssuesReportState {
+export interface IssuesReportState extends BaseState {
   viewMode: IssuesReportViewMode;
   viewLevel: IssuesReportViewLevel;
   timeMode: IssuesReportTimeMode;
@@ -21,6 +24,7 @@ export interface IssuesReportState {
 }
 
 const initialState: IssuesReportState = {
+  version: STATE_VERSION,
   viewMode: "treemap",
   viewLevel: "services",
   timeMode: "baseline",
@@ -67,6 +71,9 @@ export const issuesReportSlice = createSlice({
       state.selectedServices = action.payload;
     },
     clear: () => initialState
+  },
+  extraReducers: (builder) => {
+    builder.addCase(globalClear, () => initialState);
   }
 });
 
diff --git a/src/redux/slices/types.ts b/src/redux/slices/types.ts
new file mode 100644
index 000000000..58e99c45d
--- /dev/null
+++ b/src/redux/slices/types.ts
@@ -0,0 +1,3 @@
+export interface BaseState {
+  version: number;
+}
diff --git a/src/redux/utils/getRememberEnhancer.ts b/src/redux/utils/getRememberEnhancer.ts
new file mode 100644
index 000000000..fbd78db61
--- /dev/null
+++ b/src/redux/utils/getRememberEnhancer.ts
@@ -0,0 +1,46 @@
+import { rememberEnhancer } from "redux-remember";
+
+interface RememberEnhancerProps {
+  rememberedKeys: string[];
+  prefix: string;
+  version: number;
+}
+
+const rehydrateState = <T extends Record<string, unknown>>(
+  rehydratedState: Record<string, unknown>,
+  version: number
+) => {
+  if (rehydratedState.version !== version) {
+    return undefined;
+  }
+
+  return rehydratedState as T;
+};
+
+export const getRememberEnhancer = <T extends Record<string, unknown>>({
+  rememberedKeys,
+  prefix,
+  version
+}: RememberEnhancerProps) =>
+  rememberEnhancer(window.localStorage, rememberedKeys, {
+    prefix,
+    unserialize: (stateString: string) => {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const rehydratedState = JSON.parse(stateString);
+        return rehydrateState<T>(
+          rehydratedState as Record<string, unknown>,
+          version
+        );
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("Failed to parse persisted state:", error);
+        return undefined;
+      }
+    },
+    serialize: (state) =>
+      JSON.stringify({
+        ...state,
+        version
+      })
+  });