Add Google sign in

.storybook/preview.tsx

@@ -2,6 +2,7 @@ import type { Preview, StoryFn } from "@storybook/react";
 // TODO: remove React import due to new JSX transform
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { useEffect, useState } from "react";
+import { Provider } from "react-redux";
 import { withRouter } from "storybook-addon-remix-react-router";
 import {
   cancelMessage,
@@ -11,6 +12,7 @@ import {
 import { App, THEMES } from "../src/components/common/App";
 import { dispatcher } from "../src/dispatcher";
 import type { Theme } from "../src/globals";
+import { store } from "./store";
 
 const preview: Preview = {
   decorators: [
@@ -32,9 +34,11 @@ const preview: Preview = {
       }, []);
 
       return isInitialized ? (
-        <App theme={theme}>
-          <Story />
-        </App>
+        <Provider store={store}>
+          <App theme={theme}>
+            <Story />
+          </App>
+        </Provider>
       ) : (
         <>Initializing...</>
       );

.storybook/store.ts

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { setupListeners } from "@reduxjs/toolkit/query";
+import { digmaApi } from "../src/redux/services/digma";
+
+export const store = configureStore({
+  reducer: {
+    [digmaApi.reducerPath]: digmaApi.reducer
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(digmaApi.middleware)
+});
+
+setupListeners(store.dispatch);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "6.1.0",
+  "version": "6.2.0-alpha.2",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",
@@ -119,6 +119,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.25.1",
     "@formkit/auto-animate": "^0.8.2",
+    "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-table": "^8.7.8",
     "allotment": "^1.19.0",

src/components/Admin/Reports/CodeIssues/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 import {
   useAdminDispatch,
@@ -22,6 +22,7 @@ import {
   type IssuesReportViewMode
 } from "../../../../redux/slices/issuesReportSlice";
 import { IssuesReport } from "../../../common/IssuesReport";
+import type { TargetScope } from "../../../common/IssuesReport/types";
 import { IssuesSidebar } from "./IssuesSidebar";
 import * as s from "./styles";
 
@@ -31,6 +32,8 @@ export const CodeIssues = () => {
   const [activeTileIds, setActiveTileIds] = useState<string[] | undefined>(
     undefined
   );
+  const sidebarContainerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
 
   const selectedEnvironmentId = useAdminSelector(
     (state) => state.codeIssuesReport.selectedEnvironmentId
@@ -64,14 +67,21 @@ export const CodeIssues = () => {
     };
   });
 
-  const handleTileIssuesStatsClick = (
-    _: IssuesReportViewLevel,
-    target: { value: string; displayName?: string }
+  const handleTileTitleClick = (
+    viewLevel: IssuesReportViewLevel,
+    target: TargetScope
   ) => {
-    if (!selectedEnvironmentId) {
-      return;
+    if (viewMode === "table" && viewLevel === "endpoints") {
+      setScope(target);
+      setIsSidebarOpen(true);
+      setActiveTileIds([target.value]);
     }
+  };
 
+  const handleTileIssuesStatsClick = (
+    _: IssuesReportViewLevel,
+    target: TargetScope
+  ) => {
     setScope(target);
     setIsSidebarOpen(true);
     setActiveTileIds([target.value]);
@@ -131,6 +141,7 @@ export const CodeIssues = () => {
         viewMode={viewMode}
         timeMode={timeMode}
         defaultHeaderTitle={"Code Issues"}
+        onTileTitleClick={handleTileTitleClick}
         onTileIssuesStatsClick={handleTileIssuesStatsClick}
         onSelectedEnvironmentIdChange={handleSelectedEnvironmentIdChange}
         onSelectedServicesChange={handleSelectedServicesChange}
@@ -149,8 +160,10 @@ export const CodeIssues = () => {
         classNames={s.overlayTransitionClassName}
         mountOnEnter={true}
         unmountOnExit={true}
+        nodeRef={overlayRef}
       >
         <s.Overlay
+          ref={overlayRef}
           $isVisible={isSidebarOpen}
           $transitionClassName={s.overlayTransitionClassName}
           $transitionDuration={s.TRANSITION_DURATION}
@@ -163,8 +176,10 @@ export const CodeIssues = () => {
         classNames={s.sidebarContainerTransitionClassName}
         mountOnEnter={true}
         unmountOnExit={true}
+        nodeRef={sidebarContainerRef}
       >
         <s.IssuesSidebarContainer
+          ref={sidebarContainerRef}
           $transitionClassName={s.sidebarContainerTransitionClassName}
           $transitionDuration={s.TRANSITION_DURATION}
         >

src/components/Assets/AssetsFilter/index.tsx

@@ -23,6 +23,7 @@ import { trackingEvents } from "../tracking";
 import * as s from "./styles";
 import type {
   AssetFilterCategory,
+  AssetFilterEntry,
   AssetsFiltersData,
   GetAssetFiltersDataParams,
   GetAssetFiltersDataPayload
@@ -57,10 +58,14 @@ const renderFilterCategory = (
   placeholder: string,
   selectedValues: string[],
   onChange: (value: string | string[], categoryName?: string) => void,
-  transformLabel?: (value: string) => string
+  transformLabel?: (value: string) => string,
+  sorter?: (a: AssetFilterEntry, b: AssetFilterEntry) => number
 ): JSX.Element => {
+  const sortedEntries =
+    (sorter ? category.entries?.sort(sorter) : category.entries) ?? [];
+
   const items =
-    category.entries?.map((entry) => ({
+    sortedEntries.map((entry) => ({
       value: entry.name,
       label: transformLabel ? transformLabel(entry.name) : entry.name,
       enabled: entry.enabled,
@@ -76,7 +81,7 @@ const renderFilterCategory = (
       placeholder={placeholder}
       multiselect={true}
       icon={icon}
-      disabled={category.entries?.length === 0}
+      disabled={sortedEntries.length === 0}
     />
   );
 };
@@ -524,7 +529,9 @@ export const AssetsFilter = () => {
         WrenchIcon,
         selectedServices.length > 0 ? "Services" : "All",
         selectedServices,
-        handleSelectedItemsChange
+        handleSelectedItemsChange,
+        undefined,
+        (a, b) => a.name.localeCompare(b.name)
       )
     });
   }

src/components/Dashboard/MetricsReport/index.tsx

@@ -23,6 +23,7 @@ import { isString } from "../../../typeGuards/isString";
 import { SCOPE_CHANGE_EVENTS } from "../../../types";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { IssuesReport } from "../../common/IssuesReport";
+import type { TargetScope } from "../../common/IssuesReport/types";
 import { DigmaLogoIcon } from "../../common/icons/16px/DigmaLogoIcon";
 import { actions } from "../actions";
 import * as s from "./styles";
@@ -96,11 +97,11 @@ export const MetricsReport = () => {
 
   const handleTileTitleClick = (
     viewLevel: IssuesReportViewLevel,
-    value: string
+    target: TargetScope
   ) => {
     if (viewLevel === "endpoints" && selectedEnvironmentId && selectedService) {
       goToEndpointIssues({
-        spanCodeObjectId: value,
+        spanCodeObjectId: target.value,
         service: selectedService,
         environmentId: selectedEnvironmentId
       });
@@ -109,7 +110,7 @@ export const MetricsReport = () => {
 
   const handleIssuesStatsClick = (
     viewLevel: IssuesReportViewLevel,
-    target: { value: string; displayName?: string }
+    target: TargetScope
   ) => {
     if (viewLevel === "services") {
       changeScope({

src/components/Errors/GlobalErrorsList/GlobalErrorsFilters/index.tsx

@@ -210,12 +210,14 @@ export const GlobalErrorsFilters = () => {
 
   const servicesFilterOptions: SelectItem[] = useMemo(
     () =>
-      services?.map((x) => ({
-        label: x,
-        value: x,
-        selected: selectedServices.includes(x),
-        enabled: true
-      })) ?? [],
+      services
+        ?.map((x) => ({
+          label: x,
+          value: x,
+          selected: selectedServices.includes(x),
+          enabled: true
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label)) ?? [],
     [services, selectedServices]
   );
 

src/components/Insights/InsightTicketRenderer/insightTickets/EndpointBottleneckInsightTicket/EndpointBottleneckInsightTicket.stories.tsx

@@ -4,7 +4,8 @@ import { mockedEndpointBottleneckInsight } from "../../../InsightsCatalog/Insigh
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof EndpointBottleneckInsightTicket> = {
-  title: "Insights/insightTickets/EndpointBottleneckInsightTicket",
+  title:
+    "Insights/InsightTicketRenderer/insightTickets/EndpointBottleneckInsightTicket",
   component: EndpointBottleneckInsightTicket,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightTicketRenderer/insightTickets/common/CommitInfos/CommitInfos.stories.tsx

@@ -4,7 +4,7 @@ import { mockedSpaNPlusOneInsight } from "../../../../InsightsCatalog/InsightsPa
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof CommitInfos> = {
-  title: "Insights/insightTickets/common/CommitInfos",
+  title: "Insights/InsightTicketRenderer/insightTickets/common/CommitInfos",
   component: CommitInfos,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightTicketRenderer/insightTickets/common/InsightJiraTicket/InsightJiraTicket.stories.tsx

@@ -6,7 +6,8 @@ import { InsightCategory, InsightScope } from "../../../../types";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof InsightJiraTicket> = {
-  title: "Insights/insightTickets/common/InsightJiraTicket",
+  title:
+    "Insights/InsightTicketRenderer/insightTickets/common/InsightJiraTicket",
   component: InsightJiraTicket,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightTicketRenderer/insightTickets/common/NPlusOneEndpoints/NPlusOneEndpoints.stories.tsx

@@ -4,7 +4,8 @@ import { mockedSpaNPlusOneInsight } from "../../../../InsightsCatalog/InsightsPa
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof NPlusOneEndpoints> = {
-  title: "Insights/insightTickets/common/NPlusOneEndpoints",
+  title:
+    "Insights/InsightTicketRenderer/insightTickets/common/NPlusOneEndpoints",
   component: NPlusOneEndpoints,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightTicketRenderer/insightTickets/common/QueryOptimizationEndpoints/QueryOptimizationEndpoints.stories.tsx

@@ -4,7 +4,8 @@ import { mockedSpanQueryOptimizationInsight } from "../../../../InsightsCatalog/
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof QueryOptimizationEndpoints> = {
-  title: "Insights/insightTickets/common/QueryOptimizationEndpoints",
+  title:
+    "Insights/InsightTicketRenderer/insightTickets/common/QueryOptimizationEndpoints",
   component: QueryOptimizationEndpoints,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightsCatalog/FilterPanel/IssuesFilter/IssuesFilter.stories.tsx

@@ -5,7 +5,7 @@ import { actions } from "../../../Issues/actions";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof IssuesFilter> = {
-  title: "Insights/Issues/InsightsCatalog/FilterPanel/IssuesFilter",
+  title: "Insights/InsightsCatalog/FilterPanel/IssuesFilter",
   component: IssuesFilter,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout

src/components/Insights/InsightsCatalog/FilterPanel/IssuesFilter/index.tsx

@@ -219,12 +219,14 @@ export const IssuesFilter = () => {
   };
 
   const servicesFilterOptions: SelectItem[] =
-    data?.services?.map((entry) => ({
-      value: entry,
-      label: entry,
-      enabled: true,
-      selected: selectedServices.includes(entry)
-    })) ?? [];
+    data?.services
+      ?.map((entry) => ({
+        value: entry,
+        label: entry,
+        enabled: true,
+        selected: selectedServices.includes(entry)
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label)) ?? [];
 
   const issueTypesFilterOptions: SelectItem[] =
     data?.issueTypeFilters?.map((entry) => ({

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/EndpointChattyApiV2InsightCard/index.tsx

@@ -1,6 +1,9 @@
+import { Tag } from "../../../../../../common/v3/Tag";
 import type { InsightType, Trace } from "../../../../../types";
 import { InsightCard } from "../common/InsightCard";
-import { AssetLink, Description } from "../styles";
+import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer";
+import { KeyValue } from "../common/InsightCard/KeyValue";
+import { AssetLink } from "../styles";
 import * as s from "./styles";
 import type { EndpointChattyApiV2InsightCardProps } from "./types";
 
@@ -30,19 +33,26 @@ export const EndpointChattyApiV2InsightCard = ({
   const spanName = insight.span.clientSpan.displayName;
   const traceId = insight.span.traceId;
   const spanCodeObjectId = insight.span.clientSpan.spanCodeObjectId;
+  const repeats = insight.span.repeats;
 
   return (
     <InsightCard
       insight={insight}
       content={
         <s.Container>
-          <Description>
-            Excessive API calls to specific endpoint found
-          </Description>
-          <AssetLink
-            name={spanName}
-            onClick={() => handleSpanLinkClick(spanCodeObjectId)}
-          />
+          <ColumnsContainer>
+            <s.DescriptionColumn
+              label={"Excessive API calls to specific endpoint found"}
+            >
+              <AssetLink
+                name={spanName}
+                onClick={() => handleSpanLinkClick(spanCodeObjectId)}
+              />
+            </s.DescriptionColumn>
+            <KeyValue label={"Repeats"}>
+              <Tag content={repeats} title={repeats} />
+            </KeyValue>
+          </ColumnsContainer>
         </s.Container>
       }
       onRecalculate={onRecalculate}