Feature 366/add criticality

src/components/Insights/BottleneckInsight/index.tsx

@@ -4,6 +4,7 @@ import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../utils/trimEndpointScheme";
 import { Tooltip } from "../../common/Tooltip";
 import { InsightCard } from "../InsightCard";
+import { Criticality } from "../common/Criticality";
 import { JiraButton } from "../common/JiraButton";
 import { Link } from "../styles";
 import { trackingEvents } from "../tracking";
@@ -26,53 +27,60 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
     <InsightCard
       data={props.insight}
       content={
-        <s.EndpointList>
-          {props.insight.slowEndpoints.map((endpoint, i) => {
-            const endpointName = `${
-              endpoint.endpointInfo.serviceName
-            }:${trimEndpointScheme(endpoint.endpointInfo.route)}`;
+        <>
+          <s.EndpointList>
+            {props.insight.slowEndpoints.map((endpoint, i) => {
+              const endpointName = `${
+                endpoint.endpointInfo.serviceName
+              }:${trimEndpointScheme(endpoint.endpointInfo.route)}`;
 
-            return (
-              <s.Endpoint key={i}>
-                <s.EndpointData>
-                  <Tooltip title={endpointName}>
-                    <s.EndpointName>
-                      <Link
-                        onClick={() =>
-                          handleEndpointLinkClick(
-                            endpoint.endpointInfo.spanCodeObjectId
-                          )
-                        }
-                      >
-                        {endpointName}
-                      </Link>
-                    </s.EndpointName>
-                  </Tooltip>
-                  <s.Duration>
-                    {getDurationString(endpoint.avgDurationWhenBeingBottleneck)}
-                  </s.Duration>
-                </s.EndpointData>
-                <s.Description>
-                  Slowing{" "}
-                  {roundTo(endpoint.probabilityOfBeingBottleneck * 100, 2)}% of
-                  the requests
-                </s.Description>
-              </s.Endpoint>
-            );
-          })}
-        </s.EndpointList>
+              return (
+                <s.Endpoint key={i}>
+                  <s.EndpointData>
+                    <Tooltip title={endpointName}>
+                      <s.EndpointName>
+                        <Link
+                          onClick={() =>
+                            handleEndpointLinkClick(
+                              endpoint.endpointInfo.spanCodeObjectId
+                            )
+                          }
+                        >
+                          {endpointName}
+                        </Link>
+                      </s.EndpointName>
+                    </Tooltip>
+                    <s.Duration>
+                      {getDurationString(
+                        endpoint.avgDurationWhenBeingBottleneck
+                      )}
+                    </s.Duration>
+                  </s.EndpointData>
+                  <s.Description>
+                    Slowing{" "}
+                    {roundTo(endpoint.probabilityOfBeingBottleneck * 100, 2)}%
+                    of the requests
+                  </s.Description>
+                </s.Endpoint>
+              );
+            })}
+          </s.EndpointList>
+          <s.Container>
+            <Criticality value={props.insight.criticality} />
+            <s.Box>
+              <JiraButton
+                key={"view-ticket-info"}
+                onTicketInfoButtonClick={handleCreateJiraTicketButtonClick}
+                spanCodeObjectId={props.insight.spanInfo?.spanCodeObjectId}
+                ticketLink={props.insight.ticketLink}
+                buttonType="large"
+              />
+            </s.Box>
+          </s.Container>
+        </>
       }
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
-      buttons={[
-        <JiraButton
-          key={"view-ticket-info"}
-          onTicketInfoButtonClick={handleCreateJiraTicketButtonClick}
-          spanCodeObjectId={props.insight.spanInfo?.spanCodeObjectId}
-          ticketLink={props.insight.ticketLink}
-          buttonType="large"
-        />
-      ]}
     />
   );
 };

src/components/Insights/BottleneckInsight/mockData.ts

@@ -8,7 +8,7 @@ import {
 export const mockedBottleneckInsight: SpanEndpointBottleneckInsight = {
   firstDetected: "2023-12-05T17:25:47.010Z",
   lastDetected: "2024-01-05T13:14:47.010Z",
-  criticality: 0,
+  criticality: 0.7,
   firstCommitId: "b3f7b3f",
   lastCommitId: "a1b2c3d",
   deactivatedCommitId: null,

src/components/Insights/BottleneckInsight/styles.ts

@@ -36,3 +36,16 @@ export const Duration = styled.span`
   display: flex;
   flex-shrink: 0;
 `;
+
+export const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: space-between;
+  padding-top: 12px;
+`;
+
+export const Box = styled.div`
+  display: flex;
+  gap: 8px;
+`;

src/components/Insights/EndpointNPlusOneInsight/index.tsx

@@ -1,17 +1,16 @@
 import { useContext } from "react";
 import { usePagination } from "../../../hooks/usePagination";
 import { InsightType } from "../../../types";
-import { getCriticalityLabel } from "../../../utils/getCriticalityLabel";
 import { getDurationString } from "../../../utils/getDurationString";
 import { roundTo } from "../../../utils/roundTo";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { Button } from "../../common/Button";
 import { Pagination } from "../../common/Pagination";
-import { ScoreIndicator } from "../../common/ScoreIndicator";
 import { Tooltip } from "../../common/Tooltip";
 import { CrosshairIcon } from "../../common/icons/CrosshairIcon";
 import { InsightCard } from "../InsightCard";
+import { Criticality } from "../common/Criticality";
 import { JiraButton } from "../common/JiraButton";
 import { Description, Link } from "../styles";
 import { trackingEvents } from "../tracking";
@@ -84,15 +83,7 @@ export const EndpointNPlusOneInsight = (
                     </Tooltip>
                     <s.Stats>
                       <s.Stat>
-                        <Description>Criticality</Description>
-                        <Tooltip title={span.criticality}>
-                          <s.CriticalityValue>
-                            {span.criticality > 0 && (
-                              <ScoreIndicator score={span.criticality} />
-                            )}
-                            {getCriticalityLabel(span.criticality)}
-                          </s.CriticalityValue>
-                        </Tooltip>
+                        <Criticality value={span.criticality} />
                       </s.Stat>
                       <s.Stat>
                         <Description>Impact</Description>

src/components/Insights/ExcessiveAPICallsInsight/ExcessiveAPICallsInsight.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
     insight: {
       firstDetected: "2023-12-05T17:25:47.010Z",
       lastDetected: "2024-01-05T13:14:47.010Z",
-      criticality: 0,
+      criticality: 0.5,
       firstCommitId: "b3f7b3f",
       lastCommitId: "a1b2c3d",
       deactivatedCommitId: null,

src/components/Insights/ExcessiveAPICallsInsight/index.tsx

@@ -6,6 +6,7 @@ import { Pagination } from "../../common/Pagination";
 import { Tooltip } from "../../common/Tooltip";
 import { CrosshairIcon } from "../../common/icons/CrosshairIcon";
 import { InsightCard } from "../InsightCard";
+import { Criticality } from "../common/Criticality";
 import { Description, Link } from "../styles";
 import { Trace } from "../types";
 import * as s from "./styles";
@@ -86,6 +87,7 @@ export const ExcessiveAPICallsInsight = (
               onPageChange={setPage}
             />
           </s.List>
+          <Criticality value={props.insight.criticality} />
         </s.ContentContainer>
       }
       onRecalculate={props.onRecalculate}

src/components/Insights/HighNumberOfQueriesInsight/index.tsx

@@ -5,6 +5,7 @@ import { Tooltip } from "../../common/Tooltip";
 import { CrosshairIcon } from "../../common/icons/CrosshairIcon";
 import { InfoCircleIcon } from "../../common/icons/InfoCircleIcon";
 import { InsightCard } from "../InsightCard";
+import { Criticality } from "../common/Criticality";
 import { Description } from "../styles";
 import { Trace } from "../types";
 import * as s from "./styles";
@@ -35,6 +36,9 @@ export const HighNumberOfQueriesInsight = (
             Consider using joins or caching responses to reduce database round
             trips
           </Description>
+          <s.Stats>
+            <Criticality value={insight.criticality} />
+          </s.Stats>
           <s.Stats>
             <s.Stat>
               <s.Key># of Queries</s.Key>

src/components/Insights/HighNumberOfQueriesInsight/mockData.ts

@@ -9,7 +9,7 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh
   {
     firstDetected: "2023-12-05T17:25:47.010Z",
     lastDetected: "2024-01-05T13:14:47.010Z",
-    criticality: 0,
+    criticality: 0.5,
     impact: 0,
     firstCommitId: "b3f7b3f",
     lastCommitId: "a1b2c3d",

src/components/Insights/SpanBottleneckInsight/index.tsx

@@ -3,6 +3,7 @@ import { roundTo } from "../../../utils/roundTo";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { Tooltip } from "../../common/Tooltip";
 import { InsightCard } from "../InsightCard";
+import { Criticality } from "../common/Criticality";
 import { JiraButton } from "../common/JiraButton";
 import { Description, Link } from "../styles";
 import { trackingEvents } from "../tracking";
@@ -30,44 +31,49 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => {
           <Description>
             The following spans are slowing request handling
           </Description>
-          <s.SpanList>
-            {props.insight.spans.map((span) => {
-              const spanName = span.spanInfo.displayName;
-              const spanCodeObjectId = span.spanInfo.spanCodeObjectId;
+          <s.Container>
+            <s.SpanList>
+              {props.insight.spans.map((span) => {
+                const spanName = span.spanInfo.displayName;
+                const spanCodeObjectId = span.spanInfo.spanCodeObjectId;
 
-              return (
-                <s.Span key={spanCodeObjectId}>
-                  <s.SpanDetails>
-                    <Tooltip title={spanName}>
-                      <s.SpanName>
-                        <Link
-                          onClick={() => handleSpanLinkClick(spanCodeObjectId)}
-                        >
-                          {spanName}
-                        </Link>
-                      </s.SpanName>
-                    </Tooltip>
-                    <Description>
-                      {`Slowing ${roundTo(
-                        span.probabilityOfBeingBottleneck * 100,
-                        2
-                      )}% of the requests (~${getDurationString(
-                        span.avgDurationWhenBeingBottleneck
-                      )})`}
-                    </Description>
-                  </s.SpanDetails>
-                  <s.ButtonsContainer>
-                    <JiraButton
-                      onTicketInfoButtonClick={handleTicketInfoButtonClick}
-                      spanCodeObjectId={spanCodeObjectId}
-                      ticketLink={span.ticketLink}
-                      buttonType="small"
-                    />
-                  </s.ButtonsContainer>
-                </s.Span>
-              );
-            })}
-          </s.SpanList>
+                return (
+                  <s.Span key={spanCodeObjectId}>
+                    <s.SpanDetails>
+                      <Tooltip title={spanName}>
+                        <s.SpanName>
+                          <Link
+                            onClick={() =>
+                              handleSpanLinkClick(spanCodeObjectId)
+                            }
+                          >
+                            {spanName}
+                          </Link>
+                        </s.SpanName>
+                      </Tooltip>
+                      <Description>
+                        {`Slowing ${roundTo(
+                          span.probabilityOfBeingBottleneck * 100,
+                          2
+                        )}% of the requests (~${getDurationString(
+                          span.avgDurationWhenBeingBottleneck
+                        )})`}
+                      </Description>
+                    </s.SpanDetails>
+                    <s.ButtonsContainer>
+                      <JiraButton
+                        onTicketInfoButtonClick={handleTicketInfoButtonClick}
+                        spanCodeObjectId={spanCodeObjectId}
+                        ticketLink={span.ticketLink}
+                        buttonType="small"
+                      />
+                    </s.ButtonsContainer>
+                  </s.Span>
+                );
+              })}
+            </s.SpanList>
+            <Criticality value={props.insight.criticality} />
+          </s.Container>
         </>
       }
       onRecalculate={props.onRecalculate}

src/components/Insights/SpanBottleneckInsight/mockData.ts

@@ -8,7 +8,7 @@ import {
 export const mockedSpanBottleneckInsight: EndpointSlowestSpansInsight = {
   firstDetected: "2023-12-05T17:25:47.010Z",
   lastDetected: "2024-01-05T13:14:47.010Z",
-  criticality: 0,
+  criticality: 0.7,
   firstCommitId: "b3f7b3f",
   lastCommitId: "a1b2c3d",
   deactivatedCommitId: null,

src/components/Insights/SpanBottleneckInsight/styles.ts

@@ -33,3 +33,9 @@ export const ButtonsContainer = styled.div`
   display: flex;
   gap: 8px;
 `;
+
+export const Container = styled.div`
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+`;

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

@@ -0,0 +1,17 @@
+import { getCriticalityLabel } from "../../../../utils/getCriticalityLabel";
+import { ScoreIndicator } from "../../../common/ScoreIndicator";
+import { Tooltip } from "../../../common/Tooltip";
+import { Description } from "../../styles";
+import * as s from "./styles";
+
+export const Criticality = (props: { value: number }) => (
+  <s.Container>
+    <Description>Criticality</Description>
+    <Tooltip title={props.value}>
+      <s.CriticalityValue>
+        {props.value > 0 && <ScoreIndicator score={props.value} />}
+        {getCriticalityLabel(props.value)}
+      </s.CriticalityValue>
+    </Tooltip>
+  </s.Container>
+);

src/components/Insights/common/Criticality/styles.ts

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const CriticalityValue = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  font-size: 14px;
+  gap: 8px;
+  line-height: 18px;
+  align-items: center;
+`;