Code nexus styles

src/components/Insights/InsightCard/index.tsx

@@ -72,37 +72,45 @@ export const InsightCard = (props: InsightCardProps) => {
 
   const renderRecalculationBlock = (
     actualStartTime: string,
-    customStartTime: string | null
+    customStartTime: string | null,
+    isRecalculatingStarted: boolean
   ) => {
+    if (!props.data.customStartTime && !isRecalculatingStarted) return;
+
+    if (
+      isRecalculatingStarted ||
+      (customStartTime && customStartTime > actualStartTime)
+    )
+      return (
+        <s.RefreshContainer>
+          <Description>
+            Applying the new time filter. Wait a few minutes and then refresh.
+          </Description>
+          <span>
+            <Link onClick={handleRefreshLinkClick}>Refresh</Link>
+          </span>
+        </s.RefreshContainer>
+      );
+
     const areStartTimesEqual =
       customStartTime &&
       new Date(actualStartTime).valueOf() -
         new Date(customStartTime).valueOf() ===
         0;
 
-    const title = new Date(actualStartTime).toString();
+    if (areStartTimesEqual) {
+      const title = new Date(actualStartTime).toString();
+      return (
+        <Description>
+          Data from:{" "}
+          <Tooltip title={title}>
+            <span>{formatTimeDistance(actualStartTime)}</span>
+          </Tooltip>
+        </Description>
+      );
+    }
 
-    return (
-      <>
-        {areStartTimesEqual ? (
-          <Description>
-            Data from:{" "}
-            <Tooltip title={title}>
-              <span>{formatTimeDistance(actualStartTime)}</span>
-            </Tooltip>
-          </Description>
-        ) : (
-          <s.RefreshContainer>
-            <Description>
-              Applying the new time filter. Wait a few minutes and then refresh.
-            </Description>
-            <span>
-              <Link onClick={handleRefreshLinkClick}>Refresh</Link>
-            </span>
-          </s.RefreshContainer>
-        )}
-      </>
-    );
+    return;
   };
 
   const isNew = isString(props.data.firstDetected)
@@ -180,10 +188,10 @@ export const InsightCard = (props: InsightCardProps) => {
             />
           )}
           {props.data.actualStartTime &&
-            (props.data.customStartTime || isRecalculatingStarted) &&
             renderRecalculationBlock(
               props.data.actualStartTime,
-              props.data.customStartTime
+              props.data.customStartTime,
+              isRecalculatingStarted
             )}
           {props.content && (
             <s.ContentContainer>{props.content}</s.ContentContainer>

src/components/Insights/SpanNexusInsight/index.tsx

@@ -4,9 +4,21 @@ import { Description } from "../styles";
 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 } = insight;
+  const {
+    entries,
+    flows,
+    usage,
+    services,
+    isEntriesHigh,
+    isFlowsHigh,
+    isServicesHigh
+  } = insight;
   return (
     <InsightCard
       data={insight}
@@ -16,20 +28,22 @@ export const SpanNexusInsight = (props: SpanNexusInsightProps) => {
           <s.Stats>
             <s.Stat>
               <s.Key>Services</s.Key>
-              <Tag value={services} />
+              <Tag type={getTagType(isServicesHigh)} value={services} />
             </s.Stat>
             <s.Stat>
               <s.Key>Endpoints</s.Key>
-              <Tag value={entries} />
+              <Tag type={getTagType(isEntriesHigh)} value={entries} />
             </s.Stat>
             <s.Stat>
               <s.Key>Flows</s.Key>
-              <Tag value={flows} />
-            </s.Stat>
-            <s.Stat>
-              <s.Key>Usage</s.Key>
-              <Tag value={usage || "High"} />
+              <Tag type={getTagType(isFlowsHigh)} value={flows} />
             </s.Stat>
+            {usage && (
+              <s.Stat>
+                <s.Key>Usage</s.Key>
+                <Tag value={usage} />
+              </s.Stat>
+            )}
           </s.Stats>
         </s.ContentContainer>
       }

src/components/Insights/SpanNexusInsight/mockData.ts

@@ -53,5 +53,8 @@ export const mockedSpanNexusInsight: SpanNexusInsight = {
   flows: 4,
   services: 3,
   usage: "High",
-  entries: 5
+  entries: 5,
+  isEntriesHigh: false,
+  isFlowsHigh: true,
+  isServicesHigh: false
 };

src/components/Insights/types.ts

@@ -688,5 +688,8 @@ export interface SpanNexusInsight extends SpanInsight {
   services: number;
   entries: number;
   flows: number;
-  usage: string | null;
+  usage?: string | null;
+  isEntriesHigh: boolean;
+  isFlowsHigh: boolean;
+  isServicesHigh: boolean;
 }

src/components/common/Tag/types.ts

@@ -5,7 +5,8 @@ export type TagType =
   | "highSeverity"
   | "mediumSeverity"
   | "lowSeverity"
-  | "success";
+  | "success"
+  | "default";
 
 export interface TagThemeColors {
   default: {