Add issues days filter (#1345)

* Add issues days filter

* Add class name to compact insight card

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: kshmidt-digma

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "11.8.0-alpha.0",
+  "version": "11.8.0-alpha.1",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",

package.json

@@ -155,6 +155,7 @@ export const CodeIssues = () => {
 
   const handleTileIssuesStatsClick = (
     viewLevel: IssuesReportViewLevel,
+    timeMode: IssuesReportTimeMode,
     target: TargetScope
   ) => {
     const spanId =
@@ -354,6 +355,11 @@ export const CodeIssues = () => {
     FeatureFlag.IsIssuesCriticalityLevelsFilterEnabled
   );
 
+  const isIssuesLastDaysFilterEnabled = getFeatureFlagValue(
+    about,
+    FeatureFlag.IsIssuesLastDaysFilterEnabled
+  );
+
   const mainSidebarQuery: MainSidebarQuery = useMemo(
     () => ({
       query: {
@@ -366,7 +372,11 @@ export const CodeIssues = () => {
           : [],
         ...(isCriticalityLevelsFilterEnabled
           ? { criticalityFilter: criticalityLevels }
-          : {})
+          : {}),
+        lastDays:
+          isIssuesLastDaysFilterEnabled && timeMode === "changes"
+            ? periodInDays
+            : undefined
       }
     }),
     [
@@ -375,7 +385,10 @@ export const CodeIssues = () => {
       selectedService,
       spanCodeObjectId,
       isCriticalityLevelsFilterEnabled,
-      criticalityLevels
+      criticalityLevels,
+      periodInDays,
+      timeMode,
+      isIssuesLastDaysFilterEnabled
     ]
   );
 

src/components/Admin/Reports/CodeIssues/index.tsx

@@ -113,6 +113,7 @@ export const MetricsReport = () => {
 
   const handleIssuesStatsClick = (
     _: IssuesReportViewLevel,
+    timeMode: IssuesReportTimeMode,
     target: TargetScope
   ) => {
     if (!selectedService) {
@@ -124,7 +125,8 @@ export const MetricsReport = () => {
           event: ScopeChangeEvent.MetricsServiceSelected,
           payload: {
             service: target.value,
-            criticalityLevels
+            criticalityLevels,
+            ...(timeMode ? { lastDays: periodInDays } : {})
           }
         }
       });

src/components/Dashboard/MetricsReport/index.tsx

@@ -19,6 +19,7 @@ import { FeatureFlag, ScopeChangeEvent } from "../../../types";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { formatUnit } from "../../../utils/formatUnit";
+import { DaysFilter } from "../../common/DaysFilter";
 import { OppositeArrowsIcon } from "../../common/icons/12px/OppositeArrowsIcon";
 import { ChevronIcon } from "../../common/icons/16px/ChevronIcon";
 import { Direction } from "../../common/icons/types";
@@ -33,7 +34,6 @@ import { actions } from "../actions";
 import { EmptyState } from "../EmptyState";
 import { NewErrorCard } from "../NewErrorCard";
 import { trackingEvents } from "../tracking";
-import { DaysFilter } from "./DaysFilter";
 import { GlobalErrorsFilters } from "./GlobalErrorsFilters";
 import * as s from "./styles";
 import type {
@@ -126,7 +126,7 @@ export const GlobalErrorsList = () => {
       searchCriteria: search,
       sortBy: sorting,
       page,
-      lastDays,
+      lastDays: isNumber(lastDays) ? lastDays : undefined,
       pageSize: PAGE_SIZE,
       dismissed: mode === ViewMode.OnlyDismissed,
       ...(areGlobalErrorsFiltersEnabled
@@ -281,7 +281,7 @@ export const GlobalErrorsList = () => {
     setGlobalErrorsSearch(search);
   };
 
-  const handleDayFilterChange = (days?: number) => {
+  const handleDayFilterChange = (days: number) => {
     setGlobalErrorsLastDays(days);
   };
 
@@ -388,7 +388,11 @@ export const GlobalErrorsList = () => {
             {areGlobalErrorsFiltersEnabled && <GlobalErrorsFilters />}
             <SearchInput value={search} onChange={handleSearchInputChange} />
             {isGlobalErrorsLastDaysFilterEnabled && (
-              <DaysFilter onChanged={handleDayFilterChange} />
+              <DaysFilter
+                onChange={handleDayFilterChange}
+                trackingPrefix={"global errors"}
+                value={lastDays}
+              />
             )}
             <NewPopover
               isOpen={isSortingMenuOpen}

src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx

@@ -15,17 +15,7 @@ export const trackingEvents = addPrefix(
     WORKSPACE_ONLY_TOGGLE_SWITCHED: "workspace only toggle switched",
     GLOBAL_ERRORS_VIEW_SEARCH_CHANGED: "global errors view search changed",
     GLOBAL_ERRORS_VIEW_SORTING_CHANGE: "global errors view sorting change",
-    GLOBAL_ERRORS_VIEW_DATES_FILTERS_CHANGE:
-      "global errors view date filters change",
     GLOBAL_ERRORS_VIEW_PAGE_CHANGE: "global errors view page change",
-    GLOBAL_ERRORS_DAYS_FILTER_INPUT_VALUE_CHANGE:
-      "global errors days filter input value change",
-    GLOBAL_ERRORS_DAYS_FILTER_INCREMENT_CLICKED:
-      "global errors days filter increment change",
-    GLOBAL_ERRORS_DAYS_FILTER_DECREMENT_CLICKED:
-      "global errors days filter decrement change",
-    GLOBAL_ERRORS_DAYS_FILTER_APPLY_BTN_CLICKED:
-      "global errors days filter apply button clicked",
     GLOBAL_ERRORS_VIEW_RESET_FILTERS_BUTTON_CLICKED:
       "global errors view reset filters button clicked",
     GLOBAL_ERRORS_VIEW_FILTERS_BUTTON_CLICKED:

src/components/Errors/GlobalErrorsList/index.tsx

@@ -18,4 +18,5 @@ export interface IssuesFilterQuery {
   services?: string[];
   criticalityFilter?: IssueCriticality[];
   criticalityFilterInGlobalScope?: IssueCriticality[];
+  lastDays?: number | null;
 }

src/components/Errors/tracking.ts

@@ -177,6 +177,7 @@ export const IssueCompactCard = ({
 
   return (
     <s.Container
+      className={"insight-card"}
       $isCritical={isCritical}
       $isRead={insight.isRead}
       onClick={handleContainerClick}