Feature/code nexus insight

src/components/Insights/SpanNexusInsight/index.tsx

@@ -7,7 +7,6 @@ import { SpanNexusInsightProps } from "./types";
 const getTagType = (isHigh: boolean) => {
   return isHigh ? "mediumSeverity" : "default";
 };
-
 export const SpanNexusInsight = (props: SpanNexusInsightProps) => {
   const { insight } = props;
   const {

src/components/Insights/SpanNexusInsight/mockData.ts

@@ -53,7 +53,6 @@ export const mockedSpanNexusInsight: SpanNexusInsight = {
   actualStartTime: "2023-08-10T08:04:00Z",
   flows: 4,
   services: 3,
-  usage: "High",
   entries: 5,
   isEntriesHigh: false,
   isFlowsHigh: true,

src/components/Insights/common/insights/SpanNexusInsight/SpanNexusInsight.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SpanNexusInsight } from ".";
+import { mockedSpanNexusInsight } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof SpanNexusInsight> = {
+  title: "Insights/Common/Insights/SpanNexusInsight",
+  component: SpanNexusInsight,
+  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 Default: Story = {
+  args: {
+    insight: mockedSpanNexusInsight
+  }
+};

src/components/Insights/common/insights/SpanNexusInsight/index.tsx

@@ -0,0 +1,55 @@
+import { InsightCard } from "../../../../common/v3/InsightCard";
+import {
+  KeyValue,
+  KeyValueContainer
+} from "../../../../common/v3/KeyValueContainer";
+import { Tag } from "../../../../common/v3/Tag";
+import * as s from "./styles";
+import { SpanNexusInsightProps } from "./types";
+
+const getTagType = (isHigh: boolean) => {
+  return isHigh ? "mediumSeverity" : "default";
+};
+
+export const SpanNexusInsight = (props: SpanNexusInsightProps) => {
+  const { insight } = props;
+  const {
+    entries,
+    flows,
+    usage,
+    services,
+    isEntriesHigh,
+    isFlowsHigh,
+    isServicesHigh
+  } = insight;
+  return (
+    <InsightCard
+      insight={insight}
+      content={
+        <s.ContentContainer>
+          <s.Description>
+            Multiple code flows depend on this location
+          </s.Description>
+          <KeyValueContainer>
+            <KeyValue label="Services">
+              <Tag type={getTagType(isServicesHigh)} content={services} />
+            </KeyValue>
+            <KeyValue label="Endpoints">
+              <Tag type={getTagType(isEntriesHigh)} content={entries} />
+            </KeyValue>
+            <KeyValue label="Flows">
+              <Tag type={getTagType(isFlowsHigh)} content={flows} />
+            </KeyValue>
+            {usage && (
+              <KeyValue label="Usage">
+                <Tag content={usage} />
+              </KeyValue>
+            )}
+          </KeyValueContainer>
+        </s.ContentContainer>
+      }
+      onRecalculate={props.onRecalculate}
+      onRefresh={props.onRefresh}
+    />
+  );
+};

src/components/Insights/common/insights/SpanNexusInsight/mockData.ts

@@ -0,0 +1,64 @@
+import { InsightType } from "../../../../../types";
+import {
+  InsightCategory,
+  InsightScope,
+  SpanNexusInsight
+} from "../../../types";
+
+export const mockedSpanNexusInsight: SpanNexusInsight = {
+  id: "60b54792-8262-4c5d-9628-7cce7979ad6d",
+  firstDetected: "2023-12-05T17:25:47.010Z",
+  lastDetected: "2024-01-05T13:14:47.010Z",
+  criticality: 0,
+  impact: 0,
+  firstCommitId: "b3f7b3f",
+  lastCommitId: "a1b2c3d",
+  deactivatedCommitId: null,
+  reopenCount: 0,
+  ticketLink: null,
+  name: "Code Nexus Point",
+  category: InsightCategory.Usage,
+  specifity: 2,
+  importance: 3,
+  scope: InsightScope.Span,
+  spanInfo: {
+    name: "HTTP POST /owners/{ownerId}/pets/new",
+    displayName: "HTTP POST /owners/{ownerId}/pets/new",
+    instrumentationLibrary: "io.opentelemetry.tomcat-10.0",
+    spanCodeObjectId:
+      "span:io.opentelemetry.tomcat-10.0$_$HTTP POST /owners/{ownerId}/pets/new",
+    methodCodeObjectId:
+      "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
+    kind: "Server",
+    codeObjectId:
+      "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm"
+  },
+  shortDisplayInfo: {
+    title: "",
+    targetDisplayName: "",
+    subtitle: "",
+    description: ""
+  },
+  codeObjectId:
+    "org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
+  decorators: [
+    {
+      title: "Excessive HTTP Calls",
+      description: "Numerous Http calls to the same endpoint detected "
+    }
+  ],
+  environment: "BOB-LAPTOP[LOCAL]",
+  severity: 0.0,
+  isRecalculateEnabled: false,
+  prefixedCodeObjectId:
+    "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
+  customStartTime: null,
+  actualStartTime: "2023-08-10T08:04:00Z",
+  flows: 4,
+  services: 3,
+  entries: 5,
+  isEntriesHigh: false,
+  isFlowsHigh: true,
+  isServicesHigh: false,
+  type: InsightType.SpanNexus
+};

src/components/Insights/common/insights/SpanNexusInsight/styles.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const ContentContainer = styled.div`
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Description = styled.div`
+  display: flex;
+  gap: 8px;
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;

src/components/Insights/common/insights/SpanNexusInsight/types.ts

@@ -0,0 +1,5 @@
+import { InsightProps, SpanNexusInsight } from "../../../types";
+
+export interface SpanNexusInsightProps extends InsightProps {
+  insight: SpanNexusInsight;
+}

src/components/Insights/types.ts

@@ -746,3 +746,5 @@ export interface InsightsQuery {
 export interface ScopedInsightsQuery extends InsightsQuery {
   scopedSpanCodeObjectId: string | null;
 }
+
+export { InsightType };

src/components/common/App/themes/darkTheme.ts

@@ -234,7 +234,8 @@ export const darkTheme: ThemeColors = {
       brandPrimary: v3colors.primary[500],
       brandSecondary: v3colors.primary[300],
       brandDark: v3colors.primary[900],
-      sidePanelHeader: v3colors.gray[1200]
+      sidePanelHeader: v3colors.gray[1200],
+      asyncTag: v3colors.blue[400]
     },
     text: {
       primary: v3colors.gray[0],

src/components/common/App/themes/lightTheme.ts

@@ -232,7 +232,8 @@ export const lightTheme: ThemeColors = {
       brandPrimary: v3colors.primary[500],
       brandSecondary: v3colors.primary[300],
       brandDark: v3colors.primary[150],
-      sidePanelHeader: v3colors.gray[300]
+      sidePanelHeader: v3colors.gray[300],
+      asyncTag: v3colors.blue[100]
     },
     text: {
       primary: v3colors.gray[1200],

src/components/common/icons/16px/HistogramIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const HistogramIconComponent = (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"
+    >
+      <g stroke={color}>
+        <rect width="12.333" height="12.333" x="1.833" y="1.834" rx=".5" />
+        <path d="M5.333 12V6.665M10.667 12V8M8 12V4" />
+      </g>
+    </svg>
+  );
+};
+
+export const HistogramIcon = React.memo(HistogramIconComponent);

src/components/common/icons/16px/LiveIcon.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const LiveIconComponent = (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"
+    >
+      <g
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        clipPath="url(#live-clip-1)"
+      >
+        <path d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
+        <path d="M8 11.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
+      </g>
+      <defs>
+        <clipPath id="live-clip-1">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const LiveIcon = React.memo(LiveIconComponent);

src/components/common/icons/16px/PinIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const PinIconComponent = (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"
+    >
+      <g
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        clipPath="url(#pin-clip-1)"
+      >
+        <path d="M14.354 6.146a.5.5 0 0 0 0-.707l-3.791-3.793a.5.5 0 0 0-.707 0L6.274 5.238s-1.734-.867-3.586.628a.5.5 0 0 0-.041.744l6.744 6.743a.5.5 0 0 0 .75-.052c.524-.697 1.348-2.13.632-3.562l3.58-3.593ZM6.018 9.982 3 13.001" />
+      </g>
+      <defs>
+        <clipPath id="pin-clip-1">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const PinIcon = React.memo(PinIconComponent);

src/components/common/icons/16px/RecalculateIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const RecalculateComponent = (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"
+    >
+      <g
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        clipPath="url(#recalculate-clip-1)"
+      >
+        <path d="M12.5 5.5 14 4l-1.5-1.5" />
+        <path d="M2 8a4 4 0 0 1 4-4h8M3.5 10.5 2 12l1.5 1.5" />
+        <path d="M14 8a4 4 0 0 1-4 4H2" />
+      </g>
+      <defs>
+        <clipPath id="recalculate-clip-1">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const RecalculateIcon = React.memo(RecalculateComponent);

src/components/common/v3/AsyncTag/AsyncTag.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { AsyncTag } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof AsyncTag> = {
+  title: "common/v3/AsyncTag",
+  component: AsyncTag,
+  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 Default: Story = {
+  args: {}
+};

src/components/common/v3/AsyncTag/index.tsx

@@ -0,0 +1,5 @@
+import * as s from "./styles";
+
+export const AsyncTag = () => {
+  return <s.AsyncTag content={"Async"} />;
+};

src/components/common/v3/AsyncTag/styles.ts

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Tag as TagCommon } from "../Tag";
+
+export const AsyncTag = styled(TagCommon)`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  background: ${({ theme }) => theme.colors.v3.surface.asyncTag};
+  font-size: 12px;
+`;

src/components/common/v3/Card/styles.ts

@@ -5,7 +5,7 @@ export const Container = styled.div`
   flex-direction: column;
   border-radius: 4px;
   border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
-  background: ${({ theme }) => theme.colors.v3.surface.primary};
+  background: ${({ theme }) => theme.colors.v3.surface.secondary};
 `;
 
 const Section = styled.div`