Add Highlights Scaling widget

src/components/Highlights/Highlights.stories.tsx

@@ -8,20 +8,11 @@ import { ConfigContext, initialState } from "../common/App/ConfigContext";
 import { DeploymentType } from "../common/App/types";
 import { mockedImpactData } from "./Impact/mockData";
 import { mockedPerformanceData } from "./Performance/mockData";
+import { mockedScalingData } from "./Scaling/mockData";
 import { mockedTopIssuesData } from "./TopIssues/mockData";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 
-const mockedConfig = {
-  ...initialState,
-  backendInfo: {
-    applicationVersion:
-      featureFlagMinBackendVersions[FeatureFlag.ARE_IMPACT_HIGHLIGHTS_ENABLED],
-    deploymentType: DeploymentType.HELM,
-    centralize: true
-  }
-};
-
 const meta: Meta<typeof Highlights> = {
   title: "Highlights/Highlights",
   component: Highlights,
@@ -42,8 +33,25 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const mockedConfig = {
+  ...initialState,
+  backendInfo: {
+    applicationVersion:
+      featureFlagMinBackendVersions[FeatureFlag.ARE_SCALING_HIGHLIGHTS_ENABLED],
+    deploymentType: DeploymentType.HELM,
+    centralize: true
+  }
+};
+
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
   play: () => {
     window.setTimeout(() => {
       window.postMessage({
@@ -61,11 +69,23 @@ export const Default: Story = {
         action: mainActions.SET_HIGHLIGHTS_IMPACT_DATA,
         payload: mockedImpactData
       });
+      window.postMessage({
+        type: "digma",
+        action: mainActions.SET_HIGHLIGHTS_SCALING_DATA,
+        payload: mockedScalingData
+      });
     }, 1000);
   }
 };
 
 export const Empty: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
   play: () => {
     window.setTimeout(() => {
       window.postMessage({
@@ -83,6 +103,11 @@ export const Empty: Story = {
         action: mainActions.SET_HIGHLIGHTS_IMPACT_DATA,
         payload: { impactHighlights: [] }
       });
+      window.postMessage({
+        type: "digma",
+        action: mainActions.SET_HIGHLIGHTS_SCALING_DATA,
+        payload: { scaling: [] }
+      });
     }, 1000);
   }
 };

src/components/Highlights/Impact/Impact.stories.tsx

@@ -82,7 +82,7 @@ export const Empty: Story = {
   }
 };
 
-export const Disabled: Story = {
+export const Locked: Story = {
   decorators: [
     (Story) => (
       <ConfigContext.Provider

src/components/Highlights/Scaling/Scaling.stories.tsx

@@ -0,0 +1,111 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Scaling } from ".";
+import { featureFlagMinBackendVersions } from "../../../featureFlags";
+import { FeatureFlag } from "../../../types";
+import { actions } from "../../Main/actions";
+import { ConfigContext, initialState } from "../../common/App/ConfigContext";
+import { DeploymentType } from "../../common/App/types";
+import { mockedScalingData } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Scaling> = {
+  title: "Highlights/Scaling",
+  component: Scaling,
+  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>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const mockedConfig = {
+  ...initialState,
+  backendInfo: {
+    applicationVersion:
+      featureFlagMinBackendVersions[FeatureFlag.ARE_IMPACT_HIGHLIGHTS_ENABLED],
+    deploymentType: DeploymentType.HELM,
+    centralize: true
+  }
+};
+
+export const NoData: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
+  play: () => {
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: actions.SET_HIGHLIGHTS_SCALING_DATA,
+        payload: { ...mockedScalingData, dataState: "noData" }
+      });
+    });
+  }
+};
+
+export const PartialData: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
+  play: () => {
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: actions.SET_HIGHLIGHTS_SCALING_DATA,
+        payload: { ...mockedScalingData, dataState: "partial" }
+      });
+    });
+  }
+};
+
+export const ScalingWell: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
+  play: () => {
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: actions.SET_HIGHLIGHTS_SCALING_DATA,
+        payload: { ...mockedScalingData, dataState: "scalingWell" }
+      });
+    });
+  }
+};
+
+export const ScalingBadly: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
+  play: () => {
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: actions.SET_HIGHLIGHTS_SCALING_DATA,
+        payload: mockedScalingData
+      });
+    });
+  }
+};

src/components/Highlights/Scaling/index.tsx

@@ -0,0 +1,169 @@
+import { Row, createColumnHelper } from "@tanstack/react-table";
+import { useContext, useEffect } from "react";
+import { actions as globalActions } from "../../../actions";
+import { ROUTES, SCALING_ISSUE_DOCUMENTATION_URL } from "../../../constants";
+import { ChangeViewPayload } from "../../../types";
+import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
+import { getDurationString } from "../../../utils/getDurationString";
+import { ConfigContext } from "../../common/App/ConfigContext";
+import { CrossCircleIcon } from "../../common/icons/16px/CrossCircleIcon";
+import { RefreshIcon } from "../../common/icons/16px/RefreshIcon";
+import { CheckCircleIcon } from "../../common/icons/20px/CheckCircleIcon";
+import { Button } from "../../common/v3/Button";
+import { Card } from "../../common/v3/Card";
+import { EmptyStateCard } from "../EmptyStateCard";
+import { addEnvironmentColumns } from "../TopIssues/highlightCards/addEnvironmentColumns";
+import { EnvironmentData } from "../TopIssues/types";
+import { Section } from "../common/Section";
+import { Table } from "../common/Table";
+import { TableText } from "../common/TableText";
+import { handleEnvironmentTableRowClick } from "../handleEnvironmentTableRowClick";
+import { trackingEvents } from "../tracking";
+import * as s from "./styles";
+import { EnvironmentScalingData } from "./types";
+import { useScalingData } from "./useScalingData";
+
+export const Scaling = () => {
+  const { data, getData } = useScalingData();
+  const config = useContext(ConfigContext);
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const renderScalingCard = (
+    data: EnvironmentData<EnvironmentScalingData>[]
+  ) => {
+    const columnHelper =
+      createColumnHelper<EnvironmentData<EnvironmentScalingData>>();
+
+    const metricsColumns = [
+      columnHelper.accessor((x) => x.metrics.concurrency, {
+        header: "Concurrency",
+        cell: (info) => {
+          const value = info.getValue();
+          const concurrencyString = String(value);
+
+          return (
+            <TableText title={concurrencyString}>{concurrencyString}</TableText>
+          );
+        }
+      }),
+      columnHelper.accessor((x) => x.metrics.duration, {
+        header: "Duration",
+        cell: (info) => {
+          const value = info.getValue();
+          const durationString = getDurationString(value);
+
+          return <TableText title={durationString}>{durationString}</TableText>;
+        }
+      })
+    ];
+
+    const columns = addEnvironmentColumns(columnHelper, metricsColumns);
+
+    const handleTableRowClick = (
+      row: Row<EnvironmentData<EnvironmentScalingData>>
+    ) => {
+      sendUserActionTrackingEvent(
+        trackingEvents.SCALING_CARD_TABLE_ROW_CLICKED
+      );
+      handleEnvironmentTableRowClick(
+        config.environments,
+        row.original.environmentId,
+        ROUTES.INSIGHTS
+      );
+    };
+
+    return (
+      <Card
+        header={<s.CardTitle>Scaling badly</s.CardTitle>}
+        content={
+          <Table<EnvironmentData<EnvironmentScalingData>>
+            columns={columns}
+            data={data}
+            onRowClick={handleTableRowClick}
+          />
+        }
+      />
+    );
+  };
+
+  const renderCard = () => {
+    const handleLearnMoreButtonClick = () => {
+      sendUserActionTrackingEvent(
+        trackingEvents.SCALING_CARD_LEARN_MORE_BUTTON_CLICKED
+      );
+
+      openURLInDefaultBrowser(SCALING_ISSUE_DOCUMENTATION_URL);
+    };
+
+    const handleViewAnalyticsButtonClick = () => {
+      sendUserActionTrackingEvent(
+        trackingEvents.SCALING_CARD_VIEW_ANALYTICS_BUTTON_CLICKED
+      );
+
+      window.sendMessageToDigma<ChangeViewPayload>({
+        action: globalActions.CHANGE_VIEW,
+        payload: {
+          view: ROUTES.ANALYTICS
+        }
+      });
+    };
+
+    if (!data) {
+      return null;
+    }
+
+    if (data?.dataState === "NoData") {
+      return (
+        <EmptyStateCard
+          icon={CrossCircleIcon}
+          title={"Unlock Scaling Issues"}
+          text={"Connect a CI/Prod environment to run code at scale"}
+          customContent={
+            <Button
+              buttonType={"secondary"}
+              onClick={handleLearnMoreButtonClick}
+              label={"Learn more"}
+            />
+          }
+        />
+      );
+    }
+
+    if (data?.dataState === "Partial") {
+      return (
+        <EmptyStateCard
+          type={"lowSeverity"}
+          icon={RefreshIcon}
+          title={"Collecting data"}
+          text={"Trigger more concurrent actions to test scaling"}
+        />
+      );
+    }
+
+    if (data?.dataState === "ScalingWell") {
+      return (
+        <EmptyStateCard
+          type={"success"}
+          icon={CheckCircleIcon}
+          title={"No scaling issue found"}
+          text={"Looks like this asset is scaling well"}
+          customContent={
+            <Button
+              buttonType={"secondary"}
+              onClick={handleViewAnalyticsButtonClick}
+              label={"View analytics"}
+            />
+          }
+        />
+      );
+    }
+
+    return renderScalingCard(data.scaling);
+  };
+
+  return <Section title={"Scaling"}>{renderCard()}</Section>;
+};