digma-ai · kshmidt-digma · Aug 9, 2024 · Aug 9, 2024
diff --git a/src/components/Highlights/common/TableInsightStatusBadge/index.tsx b/src/components/Highlights/common/TableInsightStatusBadge/index.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from "styled-components";
-import { getInsightStatusInfo } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge/getInsightStatusInfo";
+import { getInsightStatusInfo } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge/getInsightStatusInfo";
 import { Tooltip } from "../../../common/v3/Tooltip";
 import * as s from "./styles";
 import { TableInsightStatusBadgeProps } from "./types";

diff --git a/src/components/Highlights/common/TableInsightStatusBadge/styles.ts b/src/components/Highlights/common/TableInsightStatusBadge/styles.ts
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { InsightStatusBadge } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/InsightStatusBadge";
+import { InsightStatusBadge } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightStatusBadge";
 
 export const Badge = styled(InsightStatusBadge)`
   font-size: inherit;

diff --git a/...ghts/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx b/...ghts/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/InsightHeader/index.tsx
@@ -10,9 +10,9 @@ import {
   GenericCodeObjectInsight,
   InsightStatus
 } from "../../../../../../types";
+import { InsightStatusBadge } from "../../InsightStatusBadge";
 import { AsyncTag } from "./AsyncTag";
 import { InsightIcon } from "./InsightIcon";
-import { InsightStatusBadge } from "./InsightStatusBadge";
 import { InsightStatusTooltipContent } from "./InsightStatusTooltipContent";
 import * as s from "./styles";
 import { InsightHeaderProps } from "./types";

diff --git a/...tatusBadge/InsightStatusBadge.stories.tsx → ...tatusBadge/InsightStatusBadge.stories.tsx b/...tatusBadge/InsightStatusBadge.stories.tsx → ...tatusBadge/InsightStatusBadge.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { InsightStatusBadge } from ".";
-import { InsightStatus } from "../../../../../../../types";
+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> = {

diff --git a/...nsightStatusBadge/getInsightStatusInfo.ts → ...nsightStatusBadge/getInsightStatusInfo.ts b/...nsightStatusBadge/getInsightStatusInfo.ts → ...nsightStatusBadge/getInsightStatusInfo.ts
@@ -1,5 +1,5 @@
 import { DefaultTheme } from "styled-components/dist/types";
-import { InsightStatus } from "../../../../../../../types";
+import { InsightStatus } from "../../../../../types";
 
 interface InsightStatusInfo {
   label: string;

diff --git a/...nsightHeader/InsightStatusBadge/index.tsx → ...Cards/common/InsightStatusBadge/index.tsx b/...nsightHeader/InsightStatusBadge/index.tsx → ...Cards/common/InsightStatusBadge/index.tsx
@@ -5,7 +5,7 @@ import * as s from "./styles";
 import { InsightStatusBadgeProps } from "./types";
 
 export const InsightStatusBadgeComponent = (
-  { status, className }: InsightStatusBadgeProps,
+  { status, className, withLabel = true }: InsightStatusBadgeProps,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
   const theme = useTheme();
@@ -19,7 +19,7 @@ export const InsightStatusBadgeComponent = (
   return (
     <s.Container className={className} ref={ref}>
       <s.Indicator $status={status} />
-      <s.Status>{statusInfo.label}</s.Status>
+      {withLabel && <s.Status>{statusInfo.label}</s.Status>}
     </s.Container>
   );
 };

diff --git a/...nsightHeader/InsightStatusBadge/styles.ts → ...Cards/common/InsightStatusBadge/styles.ts b/...nsightHeader/InsightStatusBadge/styles.ts → ...Cards/common/InsightStatusBadge/styles.ts
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { footnoteRegularTypography } from "../../../../../../../../common/App/typographies";
+import { footnoteRegularTypography } from "../../../../../../common/App/typographies";
 import { getInsightStatusInfo } from "./getInsightStatusInfo";
 import { IndicatorProps } from "./types";
 

diff --git a/...InsightHeader/InsightStatusBadge/types.ts → ...tCards/common/InsightStatusBadge/types.ts b/...InsightHeader/InsightStatusBadge/types.ts → ...tCards/common/InsightStatusBadge/types.ts
@@ -1,8 +1,9 @@
-import { InsightStatus } from "../../../../../../../types";
+import { InsightStatus } from "../../../../../types";
 
 export interface InsightStatusBadgeProps {
   status: InsightStatus;
   className?: string;
+  withLabel?: boolean;
 }
 
 export interface IndicatorProps {

diff --git a/...ents/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx b/...ents/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx
@@ -13,12 +13,15 @@ import { ThreeDotsIcon } from "../../../../../../common/icons/ThreeDotsIcon";
 import { NewPopover } from "../../../../../../common/NewPopover";
 import { Link } from "../../../../../../common/v3/Link";
 import { NewIconButton } from "../../../../../../common/v3/NewIconButton";
+import { Tag } from "../../../../../../common/v3/Tag";
 import { Tooltip } from "../../../../../../common/v3/Tooltip";
 import { MenuList } from "../../../../../../Navigation/common/MenuList";
 import { MenuItem } from "../../../../../../Navigation/common/MenuList/types";
 import { trackingEvents } from "../../../../../tracking";
 import { isEndpointInsight, isSpanInsight } from "../../../../../typeGuards";
 import { InsightIcon } from "../InsightCard/InsightHeader/InsightIcon";
+import { KeyValue } from "../InsightCard/InsightHeader/InsightStatusTooltipContent/KeyValue";
+import { getInsightStatusInfo } from "../InsightStatusBadge/getInsightStatusInfo";
 import * as s from "./styles";
 import { IssueCompactCardProps } from "./types";
 
@@ -34,14 +37,17 @@ export const IssueCompactCard = ({
   onTicketOpen,
   isCritical
 }: IssueCompactCardProps) => {
+  const theme = useTheme();
   const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled();
   const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false);
   const insightTypeInfo = getInsightTypeInfo(insight.type, insight.subType);
+  const statusInfo = insight.status
+    ? getInsightStatusInfo(insight.status, theme)
+    : undefined;
   const spanInfo =
     isSpanInsight(insight) || isEndpointInsight(insight)
       ? insight.spanInfo
       : undefined;
-  const theme = useTheme();
   const isTicketLinkAttached = Boolean(insight.ticketLink);
   const handleContainerClick = () => {
     sendUserActionTrackingEvent(trackingEvents.ISSUE_CARD_CLICKED, {
@@ -162,7 +168,19 @@ export const IssueCompactCard = ({
           />
         )}
         <s.Title>{insightTypeInfo?.label}</s.Title>
-        {metric && <s.MetricTag content={metric} type={"highlight"} />}
+        {insight.status && statusInfo && (
+          <Tooltip
+            title={<KeyValue label="Status">{statusInfo.label}</KeyValue>}
+            placement={"top"}
+            fullWidth={true}
+          >
+            <s.StyledInsightStatusBadge
+              status={insight.status}
+              withLabel={false}
+            />
+          </Tooltip>
+        )}
+        {metric && <Tag content={metric} type={"highlight"} />}
         <NewPopover
           isOpen={isKebabMenuOpen}
           onOpenChange={setIsKebabMenuOpen}

diff --git a/...ents/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/styles.ts b/...ents/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/styles.ts
@@ -1,8 +1,8 @@
 import styled, { css } from "styled-components";
 import { bodyBoldTypography } from "../../../../../../common/App/typographies";
 import { CopyButton } from "../../../../../../common/v3/CopyButton";
-import { Tag } from "../../../../../../common/v3/Tag";
 import { Popup } from "../../../../../../Navigation/common/Popup";
+import { InsightStatusBadge } from "../InsightStatusBadge";
 import { ContainerProps } from "./types";
 
 export const Container = styled.div<ContainerProps>`
@@ -59,8 +59,8 @@ export const Title = styled.span`
   color: ${({ theme }) => theme.colors.v3.text.primary};
 `;
 
-export const MetricTag = styled(Tag)`
-  margin-left: 4px;
+export const StyledInsightStatusBadge = styled(InsightStatusBadge)`
+  padding: 10px;
 `;
 
 export const StyledCopyButton = styled(CopyButton)`