Add Tests app

.storybook/preview-body.html

@@ -35,6 +35,8 @@
     "https://github.com/digma-ai/digma-vscode-plugin#%EF%B8%8F-extension-settings";
   window.recentActivityIsEnvironmentManagementEnabled = true;
 
+  window.testsRefreshInterval;
+
   window.wizardFirstLaunch = true;
   window.wizardSkipInstallationStep;
 </script>

package.json

@@ -18,6 +18,7 @@
     "build:installation-wizard:dev": "webpack --config webpack.dev.ts --env app=installationWizard",
     "build:notifications:dev": "webpack --config webpack.dev.ts --env app=notifications",
     "build:recentActivity:dev": "webpack --config webpack.dev.ts --env app=recentActivity",
+    "build:tests:dev": "webpack --config webpack.dev.ts --env app=tests",
     "build:troubleshooting:dev": "webpack --config webpack.dev.ts --env app=troubleshooting",
     "build:dev": "webpack --config webpack.dev.ts",
     "build:dev:web": "webpack --config webpack.dev.ts --env platform=Web",
@@ -28,6 +29,7 @@
     "build:installation-wizard:prod": "webpack --config webpack.prod.ts --env app=installationWizard",
     "build:notifications:prod": "webpack --config webpack.prod.ts --env app=notifications",
     "build:recentActivity:prod": "webpack --config webpack.prod.ts --env app=recentActivity",
+    "build:tests:prod": "webpack --config webpack.prod.ts --env app=tests",
     "build:troubleshooting:prod": "webpack --config webpack.prod.ts --env app=troubleshooting",
     "build:prod": "webpack --config webpack.prod.ts",
     "build:prod:web": "webpack --config webpack.prod.ts --env platform=Web",
@@ -101,7 +103,7 @@
     "@floating-ui/react": "^0.25.1",
     "@tanstack/react-table": "^8.7.8",
     "allotment": "^1.19.0",
-    "axios": "^1.6.1",
+    "axios": "^1.6.5",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.29.3",
     "free-email-domains": "^1.2.5",

src/actions.ts

@@ -26,5 +26,7 @@ export const actions = addPrefix(ACTION_PREFIX, {
   GET_BACKEND_INFO: "GET_BACKEND_INFO",
   SET_BACKEND_INFO: "SET_BACKEND_INFO",
   REGISTER: "REGISTER",
+  SET_ENVIRONMENTS: "SET_ENVIRONMENTS",
+  SET_SELECTED_CODE_SCOPE: "SET_SELECTED_CODE_SCOPE",
   SET_IS_MICROMETER_PROJECT: "SET_IS_MICROMETER_PROJECT"
 });

src/components/Dashboard/widgets/SlowQueries/index.tsx

@@ -1,3 +1,4 @@
+import { getDurationString } from "../../../../utils/getDurationString";
 import { getPercentileKey } from "../../../../utils/getPercentileKey";
 import { Tooltip } from "../../../common/Tooltip";
 import { SnailIcon } from "../../../common/icons/SnailIcon";
@@ -15,7 +16,7 @@ const renderSlowQueryEntry = (
   if (percentileViewMode) {
     const durationKey = getPercentileKey(percentileViewMode);
     const duration = durationKey ? item[durationKey] : undefined;
-    durationString = duration ? `${duration.value} ${duration.unit}` : "";
+    durationString = duration ? getDurationString(duration) : "";
   }
 
   const handleSpanClick = (spanCodeObjectId: string) => {

src/components/Insights/BottleneckInsight/index.tsx

@@ -1,3 +1,4 @@
+import { getDurationString } from "../../../utils/getDurationString";
 import { roundTo } from "../../../utils/roundTo";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../utils/trimEndpointScheme";
@@ -48,8 +49,7 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
                     </s.EndpointName>
                   </Tooltip>
                   <s.Duration>
-                    {endpoint.avgDurationWhenBeingBottleneck.value}{" "}
-                    {endpoint.avgDurationWhenBeingBottleneck.unit}
+                    {getDurationString(endpoint.avgDurationWhenBeingBottleneck)}
                   </s.Duration>
                 </s.EndpointData>
                 <s.Description>

src/components/Insights/DurationBreakdownInsight/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { usePagination } from "../../../hooks/usePagination";
+import { getDurationString } from "../../../utils/getDurationString";
 import { getPercentileLabel } from "../../../utils/getPercentileLabel";
 import { Pagination } from "../../common/Pagination";
 import { Tooltip } from "../../common/Tooltip";
@@ -31,9 +32,9 @@ const getDurationTitle = (breakdownEntry: SpanDurationBreakdownEntry) => {
   let title = "Percentage of time spent in span:";
 
   sortedPercentiles.forEach((percentile) => {
-    title += `\n${getPercentileLabel(percentile.percentile)}: ${
-      percentile.duration.value
-    } ${percentile.duration.unit}`;
+    title += `\n${getPercentileLabel(
+      percentile.percentile
+    )}: ${getDurationString(percentile.duration)}`;
   });
 
   return <s.DurationTitle>{title}</s.DurationTitle>;
@@ -97,7 +98,9 @@ export const DurationBreakdownInsight = (
                   </s.EntryName>
                 </Tooltip>
                 <Tooltip title={getDurationTitle(entry)}>
-                  <s.Duration>{`${percentile.duration.value} ${percentile.duration.unit}`}</s.Duration>
+                  <s.Duration>
+                    {getDurationString(percentile.duration)}
+                  </s.Duration>
                 </Tooltip>
               </s.Entry>
             ) : null;

src/components/Insights/DurationInsight/index.tsx

@@ -13,6 +13,7 @@ import { Duration } from "../../../globals";
 import { isNumber } from "../../../typeGuards/isNumber";
 import { convertToDuration } from "../../../utils/convertToDuration";
 import { formatTimeDistance } from "../../../utils/formatTimeDistance";
+import { getDurationString } from "../../../utils/getDurationString";
 import { getPercentileLabel } from "../../../utils/getPercentileLabel";
 import { Button } from "../../common/Button";
 import { Tooltip as CommonTooltip } from "../../common/Tooltip";
@@ -39,9 +40,6 @@ const MIN_CHART_CONTAINER_HEIGHT = 120;
 const CHART_Y_MARGIN = 20;
 const MIN_BAR_DISTANCE = 6; // minimum distance between the bars before moving the labels aside
 
-const getDurationString = (duration: Duration) =>
-  `${duration.value} ${duration.unit}`;
-
 const getBarColor = (value: Duration, p50?: Duration, p95?: Duration) => {
   const blueColor = "#4b46a2";
   const purpleColor = "#6f46a2";

src/components/Insights/EndpointNPlusOneInsight/index.tsx

@@ -2,6 +2,7 @@ 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";
@@ -103,9 +104,7 @@ export const EndpointNPlusOneInsight = (
                       </s.Stat>
                       <s.Stat>
                         <Description>Duration</Description>
-                        <span>
-                          {span.duration.value} {span.duration.unit}
-                        </span>
+                        <span>{getDurationString(span.duration)}</span>
                       </s.Stat>
                     </s.Stats>
                   </s.SpanDetails>

src/components/Insights/HighNumberOfQueriesInsight/index.tsx

@@ -13,9 +13,9 @@ import { HighNumberOfQueriesInsightProps } from "./types";
 export const HighNumberOfQueriesInsight = (
   props: HighNumberOfQueriesInsightProps
 ) => {
-  const { insight } = props; 
+  const { insight } = props;
   const traceId = insight.traceId;
-  
+
   const handleTraceButtonClick = (
     trace: Trace,
     insightType: InsightType,
@@ -30,14 +30,15 @@ export const HighNumberOfQueriesInsight = (
       content={
         <s.ContentContainer>
           <Description>
-            {insight.quantile && insight.quantile === 0.95 && "Affecting the slowest 5% of requests. " }
+            {insight.quantile === 0.95 &&
+              "Affecting the slowest 5% of requests. "}
             Consider using joins or caching responses to reduce database round
             trips
           </Description>
           <s.Stats>
             <s.Stat>
               <s.Key># of Queries</s.Key>
-              <Tag type={"mediumSeverity"} value={props.insight.queriesCount} />
+              <Tag type={"mediumSeverity"} value={insight.queriesCount} />
             </s.Stat>
             <s.Stat>
               <s.KeyContainer>
@@ -52,7 +53,7 @@ export const HighNumberOfQueriesInsight = (
                   </s.IconContainer>
                 </Tooltip>
               </s.KeyContainer>
-              <Tag value={props.insight.typicalCount} />
+              <Tag value={insight.typicalCount} />
             </s.Stat>
             {traceId && (
               <s.Stat>
@@ -64,10 +65,10 @@ export const HighNumberOfQueriesInsight = (
                       handleTraceButtonClick(
                         {
                           id: traceId,
-                          name: props.insight.spanInfo?.displayName
+                          name: insight.spanInfo?.displayName
                         },
-                        props.insight.type,
-                        props.insight.spanInfo?.spanCodeObjectId
+                        insight.type,
+                        insight.spanInfo?.spanCodeObjectId
                       )
                     }
                   />

src/components/Insights/HighNumberOfQueriesInsight/mockData.ts

@@ -69,5 +69,5 @@ export const mockedHighNumberOfQueriesInsight: EndpointHighNumberOfQueriesInsigh
       "method:org.springframework.samples.petclinic.owner.PetController$_$processCreationForm",
     customStartTime: null,
     actualStartTime: "2023-08-10T08:04:00Z",
-    quantile: 0.95,
+    quantile: 0.95
   };

src/components/Insights/InsightCard/styles.ts

@@ -27,15 +27,15 @@ export const InsightIconContainer = styled.div`
 `;
 
 export const TicketIconContainer = styled.button`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: 2px;
-    position: relative;
-    background: none;
-    border: none;
-    cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 2px;
+  position: relative;
+  background: none;
+  border: none;
+  cursor: pointer;
 `;
 
 export const TicketIconLink = styled(Link)`

src/components/Insights/JiraTicket/Field/index.tsx

@@ -20,7 +20,7 @@ export const Field = (props: FieldProps) => {
 
   const scrollbarOffset =
     contentRef.current &&
-      contentRef.current.scrollHeight > contentRef.current.clientHeight
+    contentRef.current.scrollHeight > contentRef.current.clientHeight
       ? scrollbar.width
       : 0;
 

src/components/Insights/JiraTicket/index.tsx

@@ -62,7 +62,7 @@ export const JiraTicket = (props: JiraTicketProps) => {
 
   const isLinkUnlinkInputVisible = getFeatureFlagValue(
     config,
-    FeatureFlag.IS_TICKET_LINK_UNLINK_INPUT_ENABLED
+    FeatureFlag.IS_INSIGHT_TICKET_LINKAGE_ENABLED
   );
 
   const handleCloseButtonClick = () => {

src/components/Insights/NPlusOneInsight/index.tsx

@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { InsightType } from "../../../types";
 import { getCriticalityLabel } from "../../../utils/getCriticalityLabel";
+import { getDurationString } from "../../../utils/getDurationString";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { trimEndpointScheme } from "../../../utils/trimEndpointScheme";
 import { ConfigContext } from "../../common/App/ConfigContext";
@@ -85,9 +86,7 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => {
             </s.Stat>
             <s.Stat>
               <Description>Duration</Description>
-              <span>
-                {props.insight.duration.value} {props.insight.duration.unit}
-              </span>
+              <span>{getDurationString(props.insight.duration)}</span>
             </s.Stat>
           </s.Stats>
           <Description>Affected endpoints:</Description>

src/components/Insights/ScalingIssueInsight/index.tsx

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { InsightType } from "../../../types";
+import { getDurationString } from "../../../utils/getDurationString";
 import { trimEndpointScheme } from "../../../utils/trimEndpointScheme";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { Button } from "../../common/Button";
@@ -52,10 +53,8 @@ export const ScalingIssueInsight = (props: ScalingIssueInsightProps) => {
             <s.Stat>
               <Description>Duration</Description>
               <span>
-                {props.insight.minDuration.value}{" "}
-                {props.insight.minDuration.unit} -{" "}
-                {props.insight.maxDuration.value}{" "}
-                {props.insight.maxDuration.unit}
+                {getDurationString(props.insight.minDuration)} -{" "}
+                {getDurationString(props.insight.maxDuration)}
               </span>
             </s.Stat>
           </s.Stats>

src/components/Insights/SlowEndpointInsight/index.tsx

@@ -1,3 +1,4 @@
+import { getDurationString } from "../../../utils/getDurationString";
 import { roundTo } from "../../../utils/roundTo";
 import { InsightCard } from "../InsightCard";
 import { Description } from "../styles";
@@ -20,7 +21,7 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
           )}%`}
         </Description>
       }
-      stats={`${props.insight.median.value} ${props.insight.median.unit}`}
+      stats={getDurationString(props.insight.median)}
       onRecalculate={props.onRecalculate}
       onRefresh={props.onRefresh}
     />

src/components/Insights/SpanBottleneckInsight/index.tsx

@@ -1,3 +1,4 @@
+import { getDurationString } from "../../../utils/getDurationString";
 import { roundTo } from "../../../utils/roundTo";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { Tooltip } from "../../common/Tooltip";
@@ -50,9 +51,9 @@ export const SpanBottleneckInsight = (props: SpanBottleneckInsightProps) => {
                       {`Slowing ${roundTo(
                         span.probabilityOfBeingBottleneck * 100,
                         2
-                      )}% of the requests (~${
-                        span.avgDurationWhenBeingBottleneck.value
-                      } ${span.avgDurationWhenBeingBottleneck.unit})`}
+                      )}% of the requests (~${getDurationString(
+                        span.avgDurationWhenBeingBottleneck
+                      )})`}
                     </Description>
                   </s.SpanDetails>
                   <s.ButtonsContainer>