Simplified insight cards

src/components/Insights/InsightsCatalog/InsightsPage/index.tsx

@@ -60,6 +60,7 @@ import { SpanNexusInsightCard } from "./insightCards/SpanNexusInsightCard";
 import { SpanQueryOptimizationInsightCard } from "./insightCards/SpanQueryOptimizationInsightCard";
 import { SpanScalingInsightCard } from "./insightCards/SpanScalingInsightCard";
 import { SpanUsagesInsightCard } from "./insightCards/SpanUsagesInsightCard";
+import { InsightCardViewMode } from "./insightCards/common/InsightCard/types";
 import * as s from "./styles";
 import {
   InsightsPageProps,
@@ -98,7 +99,8 @@ const renderInsightCard = (
   ) => void,
   isJiraHintEnabled: boolean,
   onRefresh: () => void,
-  isMarkAsReadButtonEnabled: boolean
+  isMarkAsReadButtonEnabled: boolean,
+  viewMode: InsightCardViewMode
 ): JSX.Element | undefined => {
   const handleHistogramButtonClick = (
     spanCodeObjectId: string,
@@ -187,6 +189,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -201,6 +204,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -216,6 +220,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -233,6 +238,7 @@ const renderInsightCard = (
         onGoToSpan={handleGoToSpan}
         onTraceButtonClick={handleTraceButtonClick}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -250,6 +256,7 @@ const renderInsightCard = (
         onGoToSpan={handleGoToSpan}
         onTraceButtonClick={handleTraceButtonClick}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -263,6 +270,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -280,6 +288,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -297,6 +306,7 @@ const renderInsightCard = (
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -314,6 +324,7 @@ const renderInsightCard = (
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -332,6 +343,7 @@ const renderInsightCard = (
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -346,6 +358,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -359,6 +372,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -374,6 +388,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -389,6 +404,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -405,6 +421,7 @@ const renderInsightCard = (
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -418,6 +435,7 @@ const renderInsightCard = (
         onRefresh={onRefresh}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -435,6 +453,7 @@ const renderInsightCard = (
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -452,6 +471,7 @@ const renderInsightCard = (
         isJiraHintEnabled={isJiraHintEnabled}
         onGoToSpan={handleGoToSpan}
         isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+        viewMode={viewMode}
       />
     );
   }
@@ -477,6 +497,7 @@ export const InsightsPage = ({
     );
   const listRef = useRef<HTMLDivElement>(null);
   const { goTo } = useHistory();
+  const isAtSpan = Boolean(scope?.span);
 
   const insightIndexWithJiraHint = getInsightToShowJiraHint(insights);
 
@@ -538,7 +559,8 @@ export const InsightsPage = ({
               !isInsightJiraTicketHintShown?.value &&
               j === insightIndexWithJiraHint,
             onRefresh,
-            isMarkAsReadButtonEnabled
+            isMarkAsReadButtonEnabled,
+            isAtSpan ? "full" : "compact"
           );
         })
       ) : isFilteringEnabled ? (

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/index.tsx

@@ -1,4 +1,5 @@
 import { getDurationString } from "../../../../../../utils/getDurationString";
+import { Tooltip } from "../../../../../common/v3/Tooltip";
 import { InsightCard } from "../common/InsightCard";
 import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer";
 import { KeyValue } from "../common/InsightCard/KeyValue";
@@ -14,7 +15,8 @@ export const EndpointBottleneckInsightCard = ({
   onRecalculate,
   onGoToSpan,
   onRefresh,
-  isMarkAsReadButtonEnabled
+  isMarkAsReadButtonEnabled,
+  viewMode
 }: EndpointBottleneckInsightCardProps) => {
   const { span, ticketLink } = insight;
 
@@ -41,6 +43,7 @@ export const EndpointBottleneckInsightCard = ({
 
   const spanName = span.spanInfo.displayName;
   const spanCodeObjectId = span.spanInfo.spanCodeObjectId;
+  const durationString = getDurationString(span.avgDurationWhenBeingBottleneck);
 
   return (
     <InsightCard
@@ -75,9 +78,7 @@ export const EndpointBottleneckInsightCard = ({
             >
               {span.requestPercentage}%
             </KeyValue>
-            <KeyValue label={"Duration"}>
-              {getDurationString(span.avgDurationWhenBeingBottleneck)}
-            </KeyValue>
+            <KeyValue label={"Duration"}>{durationString}</KeyValue>
           </ColumnsContainer>
         </ContentContainer>
       }
@@ -87,6 +88,12 @@ export const EndpointBottleneckInsightCard = ({
       onGoToSpan={onGoToSpan}
       onGoToTrace={span.traceId ? handleTraceButtonClick : undefined}
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+      viewMode={viewMode}
+      mainMetric={
+        <Tooltip title={durationString}>
+          <span>{durationString}</span>
+        </Tooltip>
+      }
     />
   );
 };

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBreakdownInsightCard/index.tsx

@@ -98,7 +98,8 @@ export const EndpointBreakdownInsightCard = ({
   onRecalculate,
   onRefresh,
   onGoToSpan,
-  isMarkAsReadButtonEnabled
+  isMarkAsReadButtonEnabled,
+  viewMode
 }: EndpointBreakdownInsightCardProps) => {
   const theme = useTheme();
 
@@ -263,6 +264,7 @@ export const EndpointBreakdownInsightCard = ({
       isAsync={insight.hasAsyncSpans}
       onGoToSpan={onGoToSpan}
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+      viewMode={viewMode}
     />
   );
 };

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/index.tsx

@@ -11,7 +11,8 @@ export const EndpointChattyApiV2InsightCard = ({
   onRecalculate,
   onRefresh,
   onGoToSpan,
-  isMarkAsReadButtonEnabled
+  isMarkAsReadButtonEnabled,
+  viewMode
 }: EndpointChattyApiV2InsightCardProps) => {
   const handleSpanLinkClick = (spanCodeObjectId: string) => {
     onAssetLinkClick(spanCodeObjectId, insight.type);
@@ -60,6 +61,7 @@ export const EndpointChattyApiV2InsightCard = ({
           : undefined
       }
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+      viewMode={viewMode}
     />
   );
 };

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointHighNumberOfQueriesInsightCard/index.tsx

@@ -14,7 +14,8 @@ export const EndpointHighNumberOfQueriesInsightCard = ({
   onRefresh,
   isJiraHintEnabled,
   onGoToSpan,
-  isMarkAsReadButtonEnabled
+  isMarkAsReadButtonEnabled,
+  viewMode
 }: EndpointHighNumberOfQueriesInsightCardProps) => {
   const traceId = insight.traceId;
 
@@ -83,6 +84,7 @@ export const EndpointHighNumberOfQueriesInsightCard = ({
       }
       onGoToSpan={onGoToSpan}
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+      viewMode={viewMode}
     />
   );
 };

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/index.tsx

@@ -1,4 +1,5 @@
 import { getDurationString } from "../../../../../../utils/getDurationString";
+import { Tooltip } from "../../../../../common/v3/Tooltip";
 import { InsightType, Trace } from "../../../../types";
 import { InsightCard } from "../common/InsightCard";
 import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer";
@@ -15,7 +16,8 @@ export const EndpointQueryOptimizationV2InsightCard = ({
   onRecalculate,
   onRefresh,
   onGoToSpan,
-  isMarkAsReadButtonEnabled
+  isMarkAsReadButtonEnabled,
+  viewMode
 }: EndpointQueryOptimizationV2InsightCardProps) => {
   const handleSpanLinkClick = (spanCodeObjectId: string) => {
     onAssetLinkClick(spanCodeObjectId, insight.type);
@@ -38,6 +40,7 @@ export const EndpointQueryOptimizationV2InsightCard = ({
 
   const spanName = insight.span.spanInfo.displayName;
   const spanCodeObjectId = insight.span.spanInfo.spanCodeObjectId;
+  const durationString = getDurationString(insight.span.duration);
 
   return (
     <InsightCard
@@ -77,6 +80,12 @@ export const EndpointQueryOptimizationV2InsightCard = ({
       }}
       onGoToSpan={onGoToSpan}
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+      viewMode={viewMode}
+      mainMetric={
+        <Tooltip title={durationString}>
+          <span>{durationString}</span>
+        </Tooltip>
+      }
     />
   );
 };

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSessionInViewInsightCard/index.tsx

@@ -20,7 +20,8 @@ export const EndpointSessionInViewInsightCard = ({
   onRecalculate,
   onRefresh,
   onGoToSpan,
-  isMarkAsReadButtonEnabled
+  isMarkAsReadButtonEnabled,
+  viewMode
 }: EndpointSessionInViewInsightCardProps) => {
   const isJaegerEnabled = useGlobalStore.use.isJaegerEnabled();
 
@@ -99,6 +100,7 @@ export const EndpointSessionInViewInsightCard = ({
       onRefresh={onRefresh}
       onGoToSpan={onGoToSpan}
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+      viewMode={viewMode}
     />
   );
 };

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointSlowdownSourceInsightCard/index.tsx

@@ -12,7 +12,8 @@ export const EndpointSlowdownSourceInsightCard = ({
   onRecalculate,
   onRefresh,
   onGoToSpan,
-  isMarkAsReadButtonEnabled
+  isMarkAsReadButtonEnabled,
+  viewMode
 }: EndpointSlowdownSourceInsightCardProps) => {
   const handleSpanLinkClick = (spanCodeObjectId: string) => {
     onAssetLinkClick(spanCodeObjectId, insight.type);
@@ -77,6 +78,7 @@ export const EndpointSlowdownSourceInsightCard = ({
       onRefresh={onRefresh}
       onGoToSpan={onGoToSpan}
       isMarkAsReadButtonEnabled={isMarkAsReadButtonEnabled}
+      viewMode={viewMode}
     />
   );
 };