Add Analytics tab to the Web (#1332)

* Add Analytics tab to the Web

* Add No filtered issues Empty state

Author: kshmidt-digma

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Analytics/index.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  useGetAboutQuery,
+  useGetInsightsQuery
+} from "../../../../../../redux/services/digma";
+import {
+  InsightsSortingCriterion,
+  SortingOrder
+} from "../../../../../../redux/services/types";
+import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
+import { sendUserActionTrackingEvent } from "../../../../../../utils/actions/sendUserActionTrackingEvent";
+import { Pagination } from "../../../../../common/Pagination";
+import { NewButton } from "../../../../../common/v3/NewButton";
+import { EmptyState } from "../../../../../Insights/EmptyState";
+import { EmptyState as InsightsPageEmptyState } from "../../../../../Insights/InsightsCatalog/InsightsPage/EmptyState";
+import { InsightCardRenderer } from "../../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer";
+import { trackingEvents } from "../../../../tracking";
+import * as s from "./styles";
+import type { AnalyticsProps } from "./types";
+
+const PAGE_SIZE = 10;
+
+export const Analytics = ({
+  query,
+  onScopeChange,
+  onGoToAssets
+}: AnalyticsProps) => {
+  const [page, setPage] = useState(0);
+  const insightsListRef = useRef<HTMLDivElement>(null);
+  const { data: about } = useGetAboutQuery();
+  const pageSize = query?.pageSize ?? PAGE_SIZE;
+  const { data, isFetching } = useGetInsightsQuery({
+    data: {
+      environment: query?.environment,
+      scopedSpanCodeObjectId: query?.scopedSpanCodeObjectId,
+      services:
+        query?.services && query?.services.length > 0
+          ? query?.services.join(",")
+          : undefined,
+      sortBy: InsightsSortingCriterion.Criticality,
+      sortOrder: SortingOrder.Desc,
+      page,
+      pageSize: PAGE_SIZE
+    },
+    extra: {
+      insightViewType: "Analytics"
+    }
+  });
+
+  const handleChangePage = (page: number) => {
+    sendUserActionTrackingEvent(trackingEvents.ANALYTICS_PAGE_CHANGED);
+    setPage(page);
+  };
+
+  const handleScopeChange = (payload: ChangeScopePayload) => {
+    onScopeChange(payload);
+  };
+
+  const totalCount = data?.data.totalCount ?? 0;
+  const pageStartItemNumber = page * pageSize + 1;
+  const pageEndItemNumber = Math.min(
+    pageStartItemNumber + pageSize - 1,
+    totalCount
+  );
+
+  useEffect(() => {
+    setPage(0);
+  }, [query]);
+
+  useEffect(() => {
+    insightsListRef.current?.scrollTo(0, 0);
+  }, [page, query]);
+
+  const renderEmptyState = () => {
+    const handleSeeAllAssetsClick = () => {
+      sendUserActionTrackingEvent(
+        trackingEvents.ANALYTICS_SEE_ALL_ASSETS_BUTTON_CLICKED
+      );
+      onGoToAssets();
+    };
+
+    if (!query?.scopedSpanCodeObjectId) {
+      return (
+        <InsightsPageEmptyState
+          preset={"analyticsSelectAsset"}
+          customContent={
+            <NewButton
+              buttonType={"primary"}
+              onClick={handleSeeAllAssetsClick}
+              label={"See all assets"}
+            />
+          }
+        />
+      );
+    }
+
+    return <InsightsPageEmptyState preset={"noDataYet"} />;
+  };
+
+  return (
+    <s.Container>
+      <s.ContentContainer>
+        {isFetching ? (
+          <EmptyState preset={"loading"} />
+        ) : data ? (
+          data.data.insights.length > 0 ? (
+            <s.InsightsList ref={insightsListRef}>
+              {data.data.insights.map((insight) => (
+                <InsightCardRenderer
+                  key={insight.id}
+                  insight={insight}
+                  isJiraHintEnabled={false}
+                  isMarkAsReadButtonEnabled={false}
+                  viewMode={"full"}
+                  tooltipBoundaryRef={insightsListRef}
+                  backendInfo={about ?? null}
+                  onScopeChange={handleScopeChange}
+                />
+              ))}
+            </s.InsightsList>
+          ) : (
+            renderEmptyState()
+          )
+        ) : null}
+      </s.ContentContainer>
+      <s.Footer>
+        {totalCount > 0 && (
+          <>
+            <Pagination
+              itemsCount={totalCount}
+              page={page}
+              pageSize={pageSize}
+              onPageChange={handleChangePage}
+              extendedNavigation={true}
+            />
+            <s.FooterItemsCount>
+              Showing{" "}
+              <s.FooterPageItemsCount>
+                {pageStartItemNumber} - {pageEndItemNumber}
+              </s.FooterPageItemsCount>{" "}
+              of {totalCount}
+            </s.FooterItemsCount>
+          </>
+        )}
+      </s.Footer>
+    </s.Container>
+  );
+};

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Analytics/styles.ts

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+import { caption1RegularTypography } from "../../../../../common/App/typographies";
+
+export const TRANSITION_DURATION = 300;
+export const drawerTransitionClassName = "drawer";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const ContentContainer = styled.div`
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  overflow-y: auto;
+`;
+
+export const InsightsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  padding: 16px 16px 16px 0;
+  width: 100%;
+`;
+
+export const Footer = styled.div`
+  ${caption1RegularTypography}
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+  padding: 8px;
+  gap: 8px;
+`;
+
+export const FooterItemsCount = styled.span`
+  font-weight: 500;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#818594";
+      case "dark":
+      case "dark-jetbrains":
+        return "#b4b8bf";
+    }
+  }};
+`;
+
+export const FooterPageItemsCount = styled.span`
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#494b57";
+      case "dark":
+      case "dark-jetbrains":
+        return "#dfe1e5";
+    }
+  }};
+`;

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Analytics/types.ts

@@ -0,0 +1,8 @@
+import type { GetIssuesPayload } from "../../../../../../redux/services/types";
+import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
+
+export interface AnalyticsProps {
+  query?: GetIssuesPayload;
+  onScopeChange: (payload: ChangeScopePayload) => void;
+  onGoToAssets: () => void;
+}

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Assets/index.tsx

@@ -14,12 +14,16 @@ import type { Sorting } from "../../../../../common/SortingSelector/types";
 import * as s from "./styles";
 import type { AssetsProps } from "./types";
 
-export const Assets = ({ query, onScopeChange }: AssetsProps) => {
+export const Assets = ({
+  query,
+  onScopeChange,
+  selectedAssetTypeId,
+  onSelectedAssetTypeIdChange
+}: AssetsProps) => {
   const [sorting, setSorting] = useState<Sorting<AssetsSortingCriterion>>({
     criterion: AssetsSortingCriterion.CriticalInsights,
     order: SortingOrder.Desc
   });
-  const [selectedAssetTypeId, setSelectedAssetTypeId] = useState<AssetType>();
 
   const dispatch = useAdminDispatch();
 
@@ -37,11 +41,11 @@ export const Assets = ({ query, onScopeChange }: AssetsProps) => {
   );
 
   const handleAssetTypeSelect = (assetTypeId: AssetType) => {
-    setSelectedAssetTypeId(assetTypeId);
+    onSelectedAssetTypeIdChange(assetTypeId);
   };
 
   const handleGoToAllAssets = () => {
-    setSelectedAssetTypeId(undefined);
+    onSelectedAssetTypeIdChange(undefined);
   };
 
   const handleRefresh = () => {

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Assets/types.ts

@@ -1,7 +1,12 @@
-import type { GetIssuesPayload } from "../../../../../../redux/services/types";
+import type {
+  AssetType,
+  GetIssuesPayload
+} from "../../../../../../redux/services/types";
 import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
 
 export interface AssetsProps {
   query?: GetIssuesPayload;
   onScopeChange: (payload: ChangeScopePayload) => void;
+  selectedAssetTypeId?: AssetType;
+  onSelectedAssetTypeIdChange: (assetTypeId?: AssetType) => void;
 }

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Header/index.tsx

@@ -3,14 +3,16 @@ import useDimensions from "react-cool-dimensions";
 import { getFeatureFlagValue } from "../../../../../../featureFlags";
 import { usePrevious } from "../../../../../../hooks/usePrevious";
 import { useGetAboutQuery } from "../../../../../../redux/services/digma";
-import { FeatureFlag } from "../../../../../../types";
+import { FeatureFlag, ScopeChangeEvent } from "../../../../../../types";
+import { sendUserActionTrackingEvent } from "../../../../../../utils/actions/sendUserActionTrackingEvent";
 import { HistoryNavigationPanel } from "../../../../../common/HistoryNavigationPanel";
 import { CrossIcon } from "../../../../../common/icons/16px/CrossIcon";
 import { NewIconButton } from "../../../../../common/v3/NewIconButton";
 import { isDisplayNameTooLong } from "../../../../../Navigation/isDisplayNameTooLong";
 import { ScopeBar } from "../../../../../Navigation/ScopeBar";
 import { SpanInfo } from "../../../../../Navigation/SpanInfo";
 import { Tabs } from "../../../../../Navigation/Tabs";
+import { trackingEvents } from "../../../../tracking";
 import * as s from "./styles";
 import type { HeaderProps } from "./types";
 
@@ -19,12 +21,12 @@ export const Header = ({
   scope,
   onGoBack,
   onGoForward,
-  onGoHome,
   spanInfo,
   canGoBack,
   canGoForward,
   onTabSelect,
   selectedTabId,
+  onScopeChange,
   query
 }: HeaderProps) => {
   const [isSpanInfoVisible, setIsSpanInfoVisible] = useState(false);
@@ -43,15 +45,29 @@ export const Header = ({
   };
 
   const handleGoBack = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.MAIN_SIDEBAR_BACK_BUTTON_CLICKED
+    );
     onGoBack();
   };
 
   const handleGoForward = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.MAIN_SIDEBAR_FORWARD_BUTTON_CLICKED
+    );
     onGoForward();
   };
 
   const handleGoHome = () => {
-    onGoHome();
+    sendUserActionTrackingEvent(
+      trackingEvents.MAIN_SIDEBAR_HOME_BUTTON_CLICKED
+    );
+    onScopeChange({
+      span: null,
+      context: {
+        event: ScopeChangeEvent.NavigationHomeButtonClicked
+      }
+    });
   };
 
   const handleScopeDisplayNameExpandCollapseChange = (isExpanded: boolean) => {

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Header/types.ts

@@ -2,18 +2,19 @@ import type {
   GetIssuesPayload,
   GetSpanInfoResponse
 } from "../../../../../../redux/services/types";
+import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
 import type { Scope } from "../../../../../common/App/types";
 
 export interface HeaderProps {
   onCloseButtonClick: () => void;
   scope: Scope;
   onGoBack: () => void;
   onGoForward: () => void;
-  onGoHome: () => void;
   canGoBack: boolean;
   canGoForward: boolean;
   spanInfo?: GetSpanInfoResponse;
   onTabSelect: (tabId: string) => void;
   selectedTabId: string;
   query?: GetIssuesPayload;
+  onScopeChange: (payload: ChangeScopePayload) => void;
 }

src/components/Admin/common/MainSidebarOverlay/MainSidebar/Issues/index.tsx

@@ -110,15 +110,15 @@ export const Issues = ({
   };
 
   const handleChangePage = (page: number) => {
-    sendUserActionTrackingEvent(trackingEvents.ISSUES_SIDEBAR_PAGE_CHANGED);
+    sendUserActionTrackingEvent(trackingEvents.ISSUES_PAGE_CHANGED);
     setPage(page);
   };
 
   const handleDismissalViewModeButtonClick = () => {
     sendUserActionTrackingEvent(
       viewMode === ViewMode.All
-        ? trackingEvents.ISSUES_SIDEBAR_SHOW_ALL_BUTTON_CLICKED
-        : trackingEvents.ISSUES_SIDEBAR_SHOW_ONLY_DISMISSED_BUTTON_CLICKED
+        ? trackingEvents.ISSUES_SHOW_ALL_BUTTON_CLICKED
+        : trackingEvents.ISSUES_SHOW_ONLY_DISMISSED_BUTTON_CLICKED
     );
     const newMode =
       viewMode === ViewMode.All ? ViewMode.OnlyDismissed : ViewMode.All;