From 2fdf0956d6bc516fdd3afc425754d9990f8889b4 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Tue, 20 Aug 2024 15:56:44 +0200
Subject: [PATCH] Change order of issue filters

Fix Trace link span highlight in Bottleneck and N+1 insights
---
 .../EnvironmentSelector.stories.tsx           | 71 +++++++++++++++++++
 .../SpaNPlusOneInsightCard/index.tsx          |  2 +-
 .../index.tsx                                 |  2 +-
 .../Insights/Issues/IssuesFilter/index.tsx    | 36 +++++-----
 4 files changed, 91 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Insights/InsightsCatalog/EnvironmentSelector/EnvironmentSelector.stories.tsx

diff --git a/src/components/Insights/InsightsCatalog/EnvironmentSelector/EnvironmentSelector.stories.tsx b/src/components/Insights/InsightsCatalog/EnvironmentSelector/EnvironmentSelector.stories.tsx
new file mode 100644
index 000000000..951ae4201
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/EnvironmentSelector/EnvironmentSelector.stories.tsx
@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { EnvironmentSelector } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof EnvironmentSelector> = {
+  title: "Insights/InsightsCatalog/EnvironmentSelector",
+  component: EnvironmentSelector,
+  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: {
+    environments: [
+      {
+        environment: {
+          id: "1",
+          name: "Production",
+          type: "Public"
+        },
+        issueCounts: {
+          highCriticality: 5,
+          mediumCriticality: 3,
+          lowCriticality: 1
+        }
+      },
+      {
+        environment: {
+          id: "2",
+          name: "Staging",
+          type: "Public"
+        },
+        issueCounts: {
+          highCriticality: 2,
+          mediumCriticality: 4,
+          lowCriticality: 0
+        }
+      },
+      {
+        environment: {
+          id: "3",
+          name: "Development",
+          type: "Public"
+        },
+        issueCounts: {
+          highCriticality: 0,
+          mediumCriticality: 1,
+          lowCriticality: 2
+        }
+      },
+      {
+        environment: {
+          id: "4",
+          name: "Without Issues",
+          type: "Public"
+        },
+        issueCounts: {
+          highCriticality: 0,
+          mediumCriticality: 0,
+          lowCriticality: 0
+        }
+      }
+    ]
+  }
+};
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
index 21f9e1840..8cd6c0d0b 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
@@ -110,7 +110,7 @@ export const SpaNPlusOneInsightCard = ({
                           id: selectedEndpoint.traceId
                         },
                         insight.type,
-                        selectedEndpoint.endpointInfo.spanCodeObjectId
+                        insight.spanInfo?.spanCodeObjectId
                       )
                     }
                   />
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
index af559bb17..79efc8b0f 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
@@ -127,7 +127,7 @@ export const SpanEndpointBottleneckInsightCard = ({
                           id: selectedEndpoint.traceId
                         },
                         insight.type,
-                        selectedEndpoint.endpointInfo.spanCodeObjectId
+                        insight.spanInfo?.spanCodeObjectId
                       );
                     }}
                   />
diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx
index b139bb732..42c9d6529 100644
--- a/src/components/Insights/Issues/IssuesFilter/index.tsx
+++ b/src/components/Insights/Issues/IssuesFilter/index.tsx
@@ -199,6 +199,24 @@ export const IssuesFilter = () => {
               <CrossIcon color={"currentColor"} size={16} />
             </s.CloseButton>
           </s.Header>
+          {isServicesFilterEnabled && (
+            <>
+              <s.FilterCategoryName>Services</s.FilterCategoryName>
+              <Select
+                key={"services"}
+                items={servicesFilterOptions}
+                onChange={handleServiceChange}
+                placeholder={filteredServices.length > 0 ? "Services" : "All"}
+                multiselect={true}
+                icon={(props: IconProps) => (
+                  <s.InsightIconContainer>
+                    <WrenchIcon {...props} />
+                  </s.InsightIconContainer>
+                )}
+                disabled={issueTypesFilterOptions?.length === 0}
+              />
+            </>
+          )}
           <s.FilterCategoryName>Issues</s.FilterCategoryName>
           <Select
             key={"issues"}
@@ -239,24 +257,6 @@ export const IssuesFilter = () => {
             )}
             showSelectedState={isUnreadOnly}
           />
-          {isServicesFilterEnabled && (
-            <>
-              <s.FilterCategoryName>Services</s.FilterCategoryName>
-              <Select
-                key={"services"}
-                items={servicesFilterOptions}
-                onChange={handleServiceChange}
-                placeholder={filteredServices.length > 0 ? "Services" : "All"}
-                multiselect={true}
-                icon={(props: IconProps) => (
-                  <s.InsightIconContainer>
-                    <WrenchIcon {...props} />
-                  </s.InsightIconContainer>
-                )}
-                disabled={issueTypesFilterOptions?.length === 0}
-              />
-            </>
-          )}
           <s.Footer>
             <s.ClearAllButton
               buttonType={"tertiary"}