Add insight status

src/components/Insights/EndpointNPlusOneInsight/mockData.ts

@@ -2,7 +2,8 @@ import { InsightType } from "../../../types";
 import {
   EndpointSuspectedNPlusOneInsight,
   InsightCategory,
-  InsightScope
+  InsightScope,
+  InsightStatus
 } from "../types";
 
 export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = {
@@ -87,5 +88,6 @@ export const mockedEndpointNPlusOneInsight: EndpointSuspectedNPlusOneInsight = {
   prefixedCodeObjectId:
     "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan",
   customStartTime: null,
-  actualStartTime: "2023-06-16T10:30:33.027Z"
+  actualStartTime: "2023-06-16T10:30:33.027Z",
+  status: InsightStatus.Active
 };

src/components/Insights/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx

@@ -20,7 +20,6 @@ export const Default: Story = {
     importance: 3,
     insightType: "HotSpot",
     isNew: true,
-    isAsync: true,
-    isActive: true
+    isAsync: true
   }
 };

src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/InsightStatusBadge.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { InsightStatusBadge } from ".";
+import { InsightStatus } from "../../../../types";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof InsightStatusBadge> = {
+  title: "Insights/common/InsightCard/InsightHeader/InsightStatusBadge",
+  component: InsightStatusBadge,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: {
+    status: InsightStatus.Active
+  }
+};
+
+export const Evaluating: Story = {
+  args: {
+    status: InsightStatus.InEvaluation
+  }
+};
+export const PossiblyFixed: Story = {
+  args: {
+    status: InsightStatus.PossiblyFixed
+  }
+};
+export const Regression: Story = {
+  args: {
+    status: InsightStatus.Regression
+  }
+};

src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo.ts

@@ -0,0 +1,35 @@
+import { DefaultTheme } from "styled-components/dist/types";
+import { InsightStatus } from "../../../../types";
+
+interface InsightStatusInfo {
+  label: string;
+  color: string;
+}
+
+export const getInsightStatusInfo = (
+  status: InsightStatus,
+  theme: DefaultTheme
+): InsightStatusInfo | undefined => {
+  switch (status) {
+    case InsightStatus.Active:
+      return {
+        label: "Active",
+        color: theme.colors.v3.status.success
+      };
+    case InsightStatus.InEvaluation:
+      return {
+        label: "Evaluating",
+        color: theme.colors.v3.status.medium
+      };
+    case InsightStatus.PossiblyFixed:
+      return {
+        label: "Possibly Fixed",
+        color: theme.colors.v3.status.low
+      };
+    case InsightStatus.Regression:
+      return {
+        label: "Regression",
+        color: theme.colors.v3.status.backgroundLow
+      };
+  }
+};

src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/index.tsx

@@ -0,0 +1,21 @@
+import { useTheme } from "styled-components";
+import { getInsightStatusInfo } from "./getInsightStatusInfo";
+import * as s from "./styles";
+import { InsightStatusBadgeProps } from "./types";
+
+export const InsightStatusBadge = (props: InsightStatusBadgeProps) => {
+  const theme = useTheme();
+
+  const statusInfo = getInsightStatusInfo(props.status, theme);
+
+  if (!statusInfo) {
+    return null;
+  }
+
+  return (
+    <s.Container>
+      <s.Indicator $status={props.status} />
+      {statusInfo.label}
+    </s.Container>
+  );
+};

src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/styles.ts

@@ -0,0 +1,29 @@
+import styled, { css } from "styled-components";
+import { footnoteRegularTypography } from "../../../../../common/App/typographies";
+import { getInsightStatusInfo } from "./getInsightStatusInfo";
+import { IndicatorProps } from "./types";
+
+export const Container = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+  padding: 4px 0;
+`;
+
+export const Indicator = styled.div<IndicatorProps>`
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  ${({ theme, $status }) => {
+    const statusInfo = getInsightStatusInfo($status, theme);
+
+    return statusInfo
+      ? css`
+          background: ${statusInfo.color};
+        `
+      : "";
+  }}
+`;

src/components/Insights/common/InsightCard/InsightHeader/InsightStatusBadge/types.ts

@@ -0,0 +1,9 @@
+import { InsightStatus } from "../../../../types";
+
+export interface InsightStatusBadgeProps {
+  status: InsightStatus;
+}
+
+export interface IndicatorProps {
+  $status: InsightStatus;
+}

src/components/Insights/common/InsightCard/InsightHeader/index.tsx

@@ -13,9 +13,12 @@ import { Tag } from "../../../../common/v3/Tag";
 import { TagType } from "../../../../common/v3/Tag/types";
 import { Tooltip } from "../../../../common/v3/Tooltip";
 import { AsyncTag } from "./AsyncTag";
+import { InsightStatusBadge } from "./InsightStatusBadge";
 import * as s from "./styles";
 import { InsightHeaderProps } from "./types";
 
+const HIGH_CRITICALITY_THRESHOLD = 0.8;
+
 const getTagType = (criticality: number): TagType => {
   if (criticality < 0.2) {
     return "lowSeverity";
@@ -76,7 +79,7 @@ export const InsightHeader = (props: InsightHeaderProps) => {
           )}
         </s.Label>
         <s.BadgeContainer>
-          {props.criticality > 0.8 && (
+          {props.criticality > HIGH_CRITICALITY_THRESHOLD && (
             <Tooltip title={"Critical"}>
               <s.WarningTriangleContainer>
                 <WarningTriangleIcon color={"currentColor"} size={12} />
@@ -85,12 +88,7 @@ export const InsightHeader = (props: InsightHeaderProps) => {
           )}
           {props.isAsync && <AsyncTag />}
           {props.isNew && <NewTag />}
-          {props.isActive && (
-            <s.Active>
-              <s.Indicator />
-              Active
-            </s.Active>
-          )}
+          {props.status && <InsightStatusBadge status={props.status} />}
         </s.BadgeContainer>
       </s.TitleRow>
       {!config.scope?.span && props.spanInfo && (

src/components/Insights/common/InsightCard/InsightHeader/styles.ts

@@ -1,8 +1,5 @@
 import styled from "styled-components";
-import {
-  bodyMediumTypography,
-  footnoteRegularTypography
-} from "../../../../common/App/typographies";
+import { bodyMediumTypography } from "../../../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
@@ -49,20 +46,3 @@ export const WarningTriangleContainer = styled.div`
   display: flex;
   color: ${({ theme }) => theme.colors.v3.status.high};
 `;
-
-export const Active = styled.div`
-  ${footnoteRegularTypography}
-
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: ${({ theme }) => theme.colors.v3.text.secondary};
-  padding: 4px;
-`;
-
-export const Indicator = styled.div`
-  border-radius: 50%;
-  width: 6px;
-  height: 6px;
-  background: ${({ theme }) => theme.colors.v3.status.success};
-`;

src/components/Insights/common/InsightCard/InsightHeader/types.ts

@@ -1,13 +1,14 @@
 import { SpanInfo } from "../../../../../types";
+import { InsightStatus } from "../../../types";
 
 export interface InsightHeaderProps {
   insightType: string;
-  isActive?: boolean;
   tags?: [];
   importance: number;
   isAsync?: boolean;
   isNew?: boolean;
   criticality: number;
   spanInfo?: SpanInfo | null;
   onSpanLinkClick: (spanCodeObjectId: string) => void;
+  status?: InsightStatus;
 }

src/components/Insights/common/InsightCard/index.tsx

@@ -115,11 +115,11 @@ export const InsightCard = (props: InsightCardProps) => {
 
     props.insight.isRecalculateEnabled &&
       buttonsToRender.push({
-        tooltip: "Recalculate",
+        tooltip: "Recheck",
         button: (btnProps) => (
           <Button
             icon={RecalculateIcon}
-            label={"Recalculate"}
+            label={"Recheck"}
             onClick={handleRecalculateClick}
             {...btnProps}
           />
@@ -209,7 +209,7 @@ export const InsightCard = (props: InsightCardProps) => {
           spanInfo={
             isSpanInsight(props.insight) ? props.insight.spanInfo : undefined
           }
-          isActive={props.isActive}
+          status={props.insight.status}
           isNew={isNew}
           isAsync={props.isAsync}
           insightType={props.insight.type}

src/components/Insights/types.ts

@@ -160,6 +160,13 @@ export interface CodeObjectDecorator {
   title: string;
 }
 
+export enum InsightStatus {
+  Active = "Active",
+  InEvaluation = "InEvaluation",
+  PossiblyFixed = "PossiblyFixed",
+  Regression = "Regression"
+}
+
 export interface CodeObjectInsight extends Insight {
   shortDisplayInfo: {
     title: string;
@@ -189,6 +196,7 @@ export interface CodeObjectInsight extends Insight {
   ticketLink: string | null;
   id: string;
   sourceSpanCodeObjectInsight: string;
+  status?: InsightStatus;
 }
 
 export interface SpanInsight extends CodeObjectInsight {