Colorize insights in Recent activity

.storybook/preview-body.html

@@ -12,5 +12,4 @@
     "https://github.com/digma-ai/digma-vscode-plugin#%EF%B8%8F-extension-settings";
   window.wizardSkipInstallationStep;
   window.assetsRefreshInterval;
-  window.insightsRefreshInterval;
 </script>

src/components/Assets/AssetList/index.tsx

@@ -5,7 +5,7 @@ import { Popover } from "../../common/Popover";
 import { PopoverContent } from "../../common/Popover/PopoverContent";
 import { PopoverTrigger } from "../../common/Popover/PopoverTrigger";
 import { ChevronIcon } from "../../common/icons/ChevronIcon";
-import { DIRECTION } from "../../common/icons/types";
+import { Direction } from "../../common/icons/types";
 import { getAssetTypeInfo } from "../utils";
 import * as s from "./styles";
 import {
@@ -159,7 +159,7 @@ export const AssetList = (props: AssetListProps) => {
     <s.Container>
       <s.Header>
         <s.BackButton onClick={handleBackButtonClick}>
-          <ChevronIcon direction={DIRECTION.LEFT} color={"#dadada"} />
+          <ChevronIcon direction={Direction.LEFT} color={"#dadada"} />
         </s.BackButton>
         {assetTypeInfo?.icon && <assetTypeInfo.icon color={"#9c9c9c"} />}
         <span>{assetTypeInfo?.label || props.assetTypeId}</span>
@@ -178,7 +178,7 @@ export const AssetList = (props: AssetListProps) => {
               <span>Sort by</span>
               <s.SortingLabel>{sorting.criterion}</s.SortingLabel>
               <ChevronIcon
-                direction={isSortingMenuOpen ? DIRECTION.UP : DIRECTION.DOWN}
+                direction={isSortingMenuOpen ? Direction.UP : Direction.DOWN}
                 color={"#dadada"}
               />
             </s.SortingMenuContainer>

src/components/Assets/types.ts

@@ -1,27 +1,5 @@
 import { Duration } from "../../globals";
 
-export enum INSIGHT_TYPES {
-  SpanUsageStatus = "SpanUsageStatus",
-  TopErrorFlows = "TopErrorFlows",
-  SpanDurationChange = "SpanDurationChange",
-  HotSpot = "HotSpot",
-  Errors = "Errors",
-  SlowEndpoint = "SlowEndpoint",
-  LowUsage = "LowUsage",
-  NormalUsage = "NormalUsage",
-  HighUsage = "HighUsage",
-  SlowestSpans = "SlowestSpans",
-  EndpointSpaNPlusOne = "EndpointSpaNPlusOne",
-  SpanUsages = "SpanUsages",
-  SpaNPlusOne = "SpaNPlusOne",
-  SpanEndpointBottleneck = "SpanEndpointBottleneck",
-  SpanHighUsage = "SpanHighUsage",
-  SpanDurations = "SpanDurations",
-  SpanScaling = "SpanScaling",
-  SpanScalingRootCause = "SpanScalingRootCause",
-  SpanDurationBreakdown = "SpanDurationBreakdown"
-}
-
 export interface AssetsProps {
   data?: AssetsData;
 }

src/components/Assets/utils.tsx

@@ -1,112 +1,10 @@
 import { MemoExoticComponent } from "react";
-import { DefaultTheme } from "styled-components";
-import { BottleneckIcon } from "../common/icons/BottleneckIcon";
 import { CodeMarkerPinIcon } from "../common/icons/CodeMarkerPinIcon";
 import { DatabaseIcon } from "../common/icons/DatabaseIcon";
 import { EndpointIcon } from "../common/icons/EndpointIcon";
 import { HTTPClientIcon } from "../common/icons/HTTPClientIcon";
-import { MeterHighIcon } from "../common/icons/MeterHighIcon";
-import { MeterLowIcon } from "../common/icons/MeterLowIcon";
-import { ScalesIcon } from "../common/icons/ScalesIcon";
-import { SnailIcon } from "../common/icons/SnailIcon";
-import { SpotIcon } from "../common/icons/SpotIcon";
-import { SQLDatabaseIcon } from "../common/icons/SQLDatabaseIcon";
-import { IconProps } from "../common/icons/types";
 import { UserIcon } from "../common/icons/UserIcon";
-import { WarningCircleIcon } from "../common/icons/WarningCircleIcon";
-import { Insight, INSIGHT_TYPES } from "./types";
-
-export const getInsightInfo = (
-  type: string
-):
-  | {
-      icon: MemoExoticComponent<(props: IconProps) => JSX.Element>;
-      label: string;
-    }
-  | undefined => {
-  const insightInfoMap: Record<
-    string,
-    {
-      icon: MemoExoticComponent<(props: IconProps) => JSX.Element>;
-      label: string;
-    }
-  > = {
-    [INSIGHT_TYPES.Errors]: {
-      icon: WarningCircleIcon,
-      label: "Errors"
-    },
-    [INSIGHT_TYPES.HotSpot]: {
-      icon: SpotIcon,
-      label: "Error Hotspot"
-    },
-    [INSIGHT_TYPES.SlowEndpoint]: {
-      icon: SnailIcon,
-      label: "Slow Endpoint"
-    },
-    [INSIGHT_TYPES.LowUsage]: {
-      icon: MeterLowIcon,
-      label: "Endpoint Low Traffic"
-    },
-    [INSIGHT_TYPES.HighUsage]: {
-      icon: MeterHighIcon,
-
-      label: "Endpoint High Traffic"
-    },
-    [INSIGHT_TYPES.SlowestSpans]: {
-      icon: BottleneckIcon,
-      label: "Span Bottleneck"
-    },
-    [INSIGHT_TYPES.EndpointSpaNPlusOne]: {
-      icon: SQLDatabaseIcon,
-      label: "Suspected N-Plus-1"
-    },
-    [INSIGHT_TYPES.SpaNPlusOne]: {
-      icon: SQLDatabaseIcon,
-      label: "Suspected N-Plus-1"
-    },
-    [INSIGHT_TYPES.SpanEndpointBottleneck]: {
-      icon: BottleneckIcon,
-      label: "Bottleneck"
-    },
-    [INSIGHT_TYPES.SpanScaling]: {
-      icon: ScalesIcon,
-      label: "Scaling Issue Found"
-    },
-    [INSIGHT_TYPES.SpanScalingRootCause]: {
-      icon: ScalesIcon,
-      label: "Scaling Issue Root Cause Found"
-    }
-  };
-
-  return insightInfoMap[type];
-};
-
-const getImportanceColor = (
-  importance: number,
-  theme: DefaultTheme
-): string => {
-  if (importance < 3) {
-    return theme.mode === "light" ? "#f93967" : "#e00036";
-  }
-  if (importance < 5) {
-    return theme.mode === "light" ? "#e06c00" : "#ff810d";
-  }
-  if (importance > 7) {
-    return theme.mode === "light" ? "#e8b500" : "#ffcb14";
-  }
-
-  return theme.mode === "light" ? "#1dc693" : "#67d28b";
-};
-
-export const getInsightIcon = (
-  insight: Insight,
-  theme: DefaultTheme,
-  size?: number
-): JSX.Element => {
-  const insightInfo = getInsightInfo(insight.type);
-  const color = getImportanceColor(insight.importance, theme);
-  return insightInfo ? <insightInfo.icon color={color} size={size} /> : <></>;
-};
+import { IconProps } from "../common/icons/types";
 
 export const getAssetTypeInfo = (
   assetTypeId: string

src/components/RecentActivity/EnvironmentPanel/index.tsx

@@ -6,7 +6,7 @@ import { ChevronIcon } from "../../common/icons/ChevronIcon";
 import { DigmaLogoFlatIcon } from "../../common/icons/DigmaLogoFlatIcon";
 import { ListIcon } from "../../common/icons/ListIcon";
 import { TableIcon } from "../../common/icons/TableIcon";
-import { DIRECTION } from "../../common/icons/types";
+import { Direction } from "../../common/icons/types";
 import { EnvironmentTab } from "./EnvironmentTab";
 import * as s from "./styles";
 import { EnvironmentPanelProps, ScrollDirection } from "./types";
@@ -124,7 +124,7 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
               disabled={isLeftCarouselButtonDisabled}
             >
               <ChevronIcon
-                direction={DIRECTION.LEFT}
+                direction={Direction.LEFT}
                 color={getCarouselIconColor(
                   theme,
                   isLeftCarouselButtonDisabled
@@ -155,7 +155,7 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
               disabled={isRightCarouselButtonDisabled}
             >
               <ChevronIcon
-                direction={DIRECTION.RIGHT}
+                direction={Direction.RIGHT}
                 color={getCarouselIconColor(
                   theme,
                   isRightCarouselButtonDisabled

src/components/RecentActivity/RecentActivity.stories.tsx

@@ -101,7 +101,8 @@ export const WithData: Story = {
               type: "HotSpot",
               codeObjectIds: [
                 "org.springframework.samples.petclinic.owner.OwnerController$_$showOwner"
-              ]
+              ],
+              importance: 2
             }
           ]
         },
@@ -130,13 +131,15 @@ export const WithData: Story = {
               type: "SlowestSpans",
               codeObjectIds: [
                 "org.springframework.samples.petclinic.owner.OwnerController$_$processFindForm"
-              ]
+              ],
+              importance: 2
             },
             {
               type: "SpanEndpointBottleneck",
               codeObjectIds: [
                 "org.springframework.samples.petclinic.owner.OwnerRepository$_$findByLastName"
-              ]
+              ],
+              importance: 2
             }
           ]
         },
@@ -208,13 +211,15 @@ export const WithData: Story = {
               type: "SlowestSpans",
               codeObjectIds: [
                 "org.springframework.samples.petclinic.vet.VetController$_$showVetList"
-              ]
+              ],
+              importance: 2
             },
             {
               type: "SpanEndpointBottleneck",
               codeObjectIds: [
                 "io.opentelemetry.spring-webmvc-6.0$_$Render vets/vetList"
-              ]
+              ],
+              importance: 2
             }
           ]
         },
@@ -245,7 +250,8 @@ export const WithData: Story = {
               type: "SpanEndpointBottleneck",
               codeObjectIds: [
                 "org.springframework.samples.petclinic.owner.OwnerRepository$_$save"
-              ]
+              ],
+              importance: 2
             }
           ]
         },
@@ -299,13 +305,15 @@ export const WithData: Story = {
               type: "SlowestSpans",
               codeObjectIds: [
                 "org.springframework.samples.petclinic.owner.OwnerController$_$processUpdateOwnerForm"
-              ]
+              ],
+              importance: 2
             },
             {
               type: "SpanEndpointBottleneck",
               codeObjectIds: [
                 "org.springframework.samples.petclinic.owner.OwnerRepository$_$save"
-              ]
+              ],
+              importance: 2
             }
           ]
         },

src/components/RecentActivity/RecentActivityTable/index.tsx

@@ -4,73 +4,18 @@ import {
   getCoreRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { DefaultTheme, useTheme } from "styled-components";
+import { useTheme } from "styled-components";
 import { Duration } from "../../../globals";
+import { getInsightImportanceColor } from "../../../utils/getInsightImportanceColor";
+import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
 import { timeAgo } from "../../../utils/timeAgo";
 import { Badge } from "../../common/Badge";
 import { Button } from "../../common/Button";
-import { BottleneckIcon } from "../../common/icons/BottleneckIcon";
 import { CrosshairIcon } from "../../common/icons/CrosshairIcon";
-import { MeterHighIcon } from "../../common/icons/MeterHighIcon";
-import { SQLDatabaseIcon } from "../../common/icons/SQLDatabaseIcon";
-import { ScalesIcon } from "../../common/icons/ScalesIcon";
-import { SnailIcon } from "../../common/icons/SnailIcon";
-import { SpotIcon } from "../../common/icons/SpotIcon";
 import { ViewMode } from "../EnvironmentPanel/types";
 import { ActivityEntry, EntrySpan, SlimInsight } from "../types";
 import * as s from "./styles";
-import { INSIGHT_TYPES, RecentActivityTableProps } from "./types";
-
-const getInsightInfo = (
-  type: string,
-  theme: DefaultTheme
-): { icon: JSX.Element; label: string } | undefined => {
-  const insightInfoMap: Record<string, { icon: JSX.Element; label: string }> = {
-    [INSIGHT_TYPES.HotSpot]: {
-      icon: <SpotIcon size={20} />,
-      label: "Error Hotspot"
-    },
-    [INSIGHT_TYPES.SlowEndpoint]: {
-      icon: <SnailIcon size={20} />,
-      label: "Slow Endpoint"
-    },
-    [INSIGHT_TYPES.HighUsage]: {
-      icon: (
-        <MeterHighIcon
-          size={20}
-          color={theme.mode === "light" ? "#e00036" : "#f93967"}
-        />
-      ),
-      label: "Endpoint High Traffic"
-    },
-    [INSIGHT_TYPES.SlowestSpans]: {
-      icon: <BottleneckIcon size={20} />,
-      label: "Span Bottleneck"
-    },
-    [INSIGHT_TYPES.EndpointSpaNPlusOne]: {
-      icon: <SQLDatabaseIcon size={20} />,
-      label: "Suspected N-Plus-1"
-    },
-    [INSIGHT_TYPES.SpaNPlusOne]: {
-      icon: <SQLDatabaseIcon size={20} />,
-      label: "Suspected N-Plus-1"
-    },
-    [INSIGHT_TYPES.SpanEndpointBottleneck]: {
-      icon: <BottleneckIcon size={20} />,
-      label: "Bottleneck"
-    },
-    [INSIGHT_TYPES.SpanScaling]: {
-      icon: <ScalesIcon size={20} />,
-      label: "Scaling Issue Found"
-    },
-    [INSIGHT_TYPES.SpanScalingRootCause]: {
-      icon: <ScalesIcon size={20} />,
-      label: "Scaling Issue Root Cause Found"
-    }
-  };
-
-  return insightInfoMap[type];
-};
+import { RecentActivityTableProps } from "./types";
 
 const columnHelper = createColumnHelper<ActivityEntry>();
 
@@ -147,11 +92,13 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => {
     <s.InsightsContainer>
       {insights
         .map((x) => {
-          const insightInfo = getInsightInfo(x.type, theme);
-          return insightInfo ? (
-            <span title={insightInfo.label} key={x.type}>
-              {insightInfo.icon}
-            </span>
+          const insightTypeInfo = getInsightTypeInfo(x.type);
+          const iconColor = getInsightImportanceColor(x.importance, theme);
+
+          return insightTypeInfo ? (
+            <s.InsightIconContainer title={insightTypeInfo.label} key={x.type}>
+              <insightTypeInfo.icon color={iconColor} size={16} />
+            </s.InsightIconContainer>
           ) : null;
         })
         .filter(Boolean)}