Asset filters

src/actions.ts

@@ -28,5 +28,8 @@ export const actions = addPrefix(ACTION_PREFIX, {
   REGISTER: "REGISTER",
   SET_ENVIRONMENTS: "SET_ENVIRONMENTS",
   SET_SELECTED_CODE_SCOPE: "SET_SELECTED_CODE_SCOPE",
-  SET_IS_MICROMETER_PROJECT: "SET_IS_MICROMETER_PROJECT"
+  SET_IS_MICROMETER_PROJECT: "SET_IS_MICROMETER_PROJECT",
+  SAVE_TO_PERSISTENCE: "SAVE_TO_PERSISTENCE",
+  GET_FROM_PERSISTENCE: "GET_FROM_PERSISTENCE",
+  SET_FROM_PERSISTENCE: "SET_FROM_PERSISTENCE"
 });

src/components/Assets/AssetList/AssetEntry/AssetEntry.stories.tsx

@@ -55,7 +55,7 @@ export const Default: Story = {
         }
       ],
       latestSpanTimestamp: "2023-02-20T14:36:03.480951Z",
-      instrumentationLibrary: "Global"
+      instrumentationLibrary: "Very long long long long long long name"
     }
   }
 };

src/components/Assets/AssetList/AssetEntry/index.tsx

@@ -199,9 +199,13 @@ export const AssetEntry = (props: AssetEntryProps) => {
           <s.StatsColumn>
             <s.Stats>
               <span>Scope</span>
-              <s.ValueContainer>
-                {props.entry.instrumentationLibrary}
-              </s.ValueContainer>
+              <Tooltip title={props.entry.instrumentationLibrary}>
+                <s.ValueContainer>
+                  <s.ScopeName>
+                    {props.entry.instrumentationLibrary}
+                  </s.ScopeName>
+                </s.ValueContainer>
+              </Tooltip>
             </s.Stats>
           </s.StatsColumn>
         )}

src/components/Assets/AssetList/AssetEntry/styles.ts

@@ -134,7 +134,6 @@ export const ValueContainer = styled.div`
         return "#c6c6c6";
     }
   }};
-  width: fit-content;
 `;
 
 export const Suffix = styled.span`
@@ -164,3 +163,9 @@ export const ImpactScoreIndicator = styled.div<ImpactScoreIndicatorProps>`
   height: 10px;
   background: hsl(14deg 66% ${({ $score }) => 100 - 50 * $score}%);
 `;
+
+export const ScopeName = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

src/components/Assets/AssetList/AssetList.stories.tsx

@@ -19,6 +19,7 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
+    searchQuery: "",
     assetTypeId: "Endpoint",
     services: [],
     data: {

src/components/Assets/AssetList/index.tsx

@@ -1,8 +1,7 @@
-import { ChangeEvent, useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
 import { dispatcher } from "../../../dispatcher";
 import { getFeatureFlagValue } from "../../../featureFlags";
-import { useDebounce } from "../../../hooks/useDebounce";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { isNumber } from "../../../typeGuards/isNumber";
 import { isString } from "../../../typeGuards/isString";
@@ -16,11 +15,11 @@ import { Popover } from "../../common/Popover";
 import { PopoverContent } from "../../common/Popover/PopoverContent";
 import { PopoverTrigger } from "../../common/Popover/PopoverTrigger";
 import { ChevronIcon } from "../../common/icons/ChevronIcon";
-import { MagnifierIcon } from "../../common/icons/MagnifierIcon";
 import { SortIcon } from "../../common/icons/SortIcon";
 import { Direction } from "../../common/icons/types";
+import { AssetFilterQuery } from "../AssetsFilter/types";
 import { actions } from "../actions";
-import { getAssetTypeInfo } from "../utils";
+import { checkIfAnyFiltersApplied, getAssetTypeInfo } from "../utils";
 import { AssetEntry as AssetEntryComponent } from "./AssetEntry";
 import * as s from "./styles";
 import {
@@ -126,6 +125,39 @@ const getSortingCriterionInfo = (
   return sortingCriterionInfoMap[sortingCriterion];
 };
 
+const getData = (
+  assetTypeId: string,
+  page: number,
+  sorting: Sorting,
+  searchQuery: string,
+  filters: AssetFilterQuery | undefined,
+  services: string[] | undefined,
+  isComplexFilterEnabled: boolean
+) => {
+  window.sendMessageToDigma({
+    action: actions.GET_DATA,
+    payload: {
+      query: {
+        assetType: assetTypeId,
+        page,
+        pageSize: PAGE_SIZE,
+        sortBy: sorting.criterion,
+        sortOrder: sorting.order,
+        ...(searchQuery && searchQuery.length > 0
+          ? { displayName: searchQuery }
+          : {}),
+        ...(isComplexFilterEnabled
+          ? filters || {
+              services: [],
+              operations: [],
+              insights: []
+            }
+          : { services: services || [] })
+      }
+    }
+  });
+};
+
 export const AssetList = (props: AssetListProps) => {
   const [data, setData] = useState<AssetsData>();
   const previousData = usePrevious(data);
@@ -138,16 +170,11 @@ export const AssetList = (props: AssetListProps) => {
   });
   const previousSorting = usePrevious(sorting);
   const [isSortingMenuOpen, setIsSortingMenuOpen] = useState(false);
-  const [searchInputValue, setSearchInputValue] = useState("");
-  const debouncedSearchInputValue = useDebounce(searchInputValue, 1000);
-  const previousDebouncedSearchInputValue = usePrevious(
-    debouncedSearchInputValue
-  );
+  const previousSearchQuery = usePrevious(props.searchQuery);
   const theme = useTheme();
   const backIconColor = getBackIconColor(theme);
   const assetTypeIconColor = getAssetTypeIconColor(theme);
   const sortingMenuChevronColor = getSortingMenuChevronColor(theme);
-  const searchInputIconColor = sortingMenuChevronColor;
   const [page, setPage] = useState(0);
   const previousPage = usePrevious(page);
   const filteredCount = data?.filteredCount || 0;
@@ -162,6 +189,7 @@ export const AssetList = (props: AssetListProps) => {
   const previousEnvironment = usePrevious(config.environment);
   const previousAssetTypeId = usePrevious(props.assetTypeId);
   const previousServices = usePrevious(props.services);
+  const previousFilters = usePrevious(props.filters);
 
   const entries = data?.data || [];
 
@@ -172,29 +200,40 @@ export const AssetList = (props: AssetListProps) => {
     FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN
   );
 
+  const isComplexFilterEnabled = useMemo(
+    () =>
+      Boolean(
+        getFeatureFlagValue(
+          config,
+          FeatureFlag.IS_ASSETS_COMPLEX_FILTER_ENABLED
+        )
+      ),
+    [config]
+  );
+
+  const areAnyFiltersApplied = checkIfAnyFiltersApplied(
+    isComplexFilterEnabled,
+    props.filters,
+    props.services,
+    props.searchQuery
+  );
+
   const sortingCriteria = isOverallImpactHidden
     ? Object.values(SORTING_CRITERION).filter(
         (x) => x !== SORTING_CRITERION.OVERALL_IMPACT
       )
     : Object.values(SORTING_CRITERION);
 
   useEffect(() => {
-    window.sendMessageToDigma({
-      action: actions.GET_DATA,
-      payload: {
-        query: {
-          assetType: props.assetTypeId,
-          page,
-          pageSize: PAGE_SIZE,
-          sortBy: sorting.criterion,
-          sortOrder: sorting.order,
-          ...(debouncedSearchInputValue.length > 0
-            ? { displayName: debouncedSearchInputValue }
-            : {}),
-          services: props.services
-        }
-      }
-    });
+    getData(
+      props.assetTypeId,
+      page,
+      sorting,
+      props.searchQuery,
+      props.filters,
+      props.services,
+      isComplexFilterEnabled
+    );
     setIsInitialLoading(true);
 
     const handleAssetsData = (data: unknown, timeStamp: number) => {
@@ -216,64 +255,55 @@ export const AssetList = (props: AssetListProps) => {
       (isString(previousEnvironment) &&
         previousEnvironment !== config.environment) ||
       (previousSorting && previousSorting !== sorting) ||
-      (isString(previousDebouncedSearchInputValue) &&
-        previousDebouncedSearchInputValue !== debouncedSearchInputValue) ||
+      (isString(previousSearchQuery) &&
+        previousSearchQuery !== props.searchQuery) ||
       (isString(previousAssetTypeId) &&
         previousAssetTypeId !== props.assetTypeId) ||
-      (Array.isArray(previousServices) && previousServices !== props.services)
+      (Array.isArray(previousServices) &&
+        previousServices !== props.services) ||
+      (previousFilters && previousFilters !== props.filters)
     ) {
-      window.sendMessageToDigma({
-        action: actions.GET_DATA,
-        payload: {
-          query: {
-            assetType: props.assetTypeId,
-            page,
-            pageSize: PAGE_SIZE,
-            sortBy: sorting.criterion,
-            sortOrder: sorting.order,
-            ...(debouncedSearchInputValue.length > 0
-              ? { displayName: debouncedSearchInputValue }
-              : {}),
-            services: props.services
-          }
-        }
-      });
+      getData(
+        props.assetTypeId,
+        page,
+        sorting,
+        props.searchQuery,
+        props.filters,
+        props.services,
+        isComplexFilterEnabled
+      );
     }
   }, [
     props.assetTypeId,
     previousAssetTypeId,
-    previousDebouncedSearchInputValue,
-    debouncedSearchInputValue,
+    previousSearchQuery,
+    props.searchQuery,
     previousSorting,
     sorting,
     previousPage,
     page,
     previousEnvironment,
     config.environment,
     props.services,
-    previousServices
+    previousServices,
+    props.filters,
+    previousFilters,
+    isComplexFilterEnabled
   ]);
 
   useEffect(() => {
     if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) {
       window.clearTimeout(refreshTimerId.current);
       refreshTimerId.current = window.setTimeout(() => {
-        window.sendMessageToDigma({
-          action: actions.GET_DATA,
-          payload: {
-            query: {
-              assetType: props.assetTypeId,
-              page,
-              pageSize: PAGE_SIZE,
-              sortBy: sorting.criterion,
-              sortOrder: sorting.order,
-              ...(debouncedSearchInputValue.length > 0
-                ? { displayName: debouncedSearchInputValue }
-                : {}),
-              services: props.services
-            }
-          }
-        });
+        getData(
+          props.assetTypeId,
+          page,
+          sorting,
+          props.searchQuery,
+          props.filters,
+          props.services,
+          isComplexFilterEnabled
+        );
       }, REFRESH_INTERVAL);
     }
   }, [
@@ -282,9 +312,11 @@ export const AssetList = (props: AssetListProps) => {
     props.assetTypeId,
     page,
     sorting,
-    debouncedSearchInputValue,
+    props.searchQuery,
     config.environment,
-    props.services
+    props.services,
+    props.filters,
+    isComplexFilterEnabled
   ]);
 
   useEffect(() => {
@@ -301,31 +333,16 @@ export const AssetList = (props: AssetListProps) => {
 
   useEffect(() => {
     setPage(0);
-  }, [
-    config.environment,
-    debouncedSearchInputValue,
-    sorting,
-    props.assetTypeId
-  ]);
+  }, [config.environment, props.searchQuery, sorting, props.assetTypeId]);
 
   useEffect(() => {
     listRef.current?.scrollTo(0, 0);
-  }, [
-    config.environment,
-    debouncedSearchInputValue,
-    sorting,
-    page,
-    props.assetTypeId
-  ]);
+  }, [config.environment, props.searchQuery, sorting, page, props.assetTypeId]);
 
   const handleBackButtonClick = () => {
     props.onBackButtonClick();
   };
 
-  const handleSearchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchInputValue(e.target.value);
-  };
-
   const handleSortingMenuToggle = () => {
     setIsSortingMenuOpen(!isSortingMenuOpen);
   };
@@ -402,8 +419,17 @@ export const AssetList = (props: AssetListProps) => {
       </>
     ) : (
       <s.NoDataText>
-        Not seeing your data here? Maybe you&apos;re missing some
-        instrumentation!
+        {areAnyFiltersApplied ? (
+          <>
+            It seems there are no assets matching your selected filters at the
+            moment
+          </>
+        ) : (
+          <>
+            Not seeing your data here? Maybe you&apos;re missing some
+            instrumentation!
+          </>
+        )}
       </s.NoDataText>
     );
   };
@@ -425,17 +451,6 @@ export const AssetList = (props: AssetListProps) => {
         {data && <s.ItemsCount>{data.totalCount}</s.ItemsCount>}
       </s.Header>
       <s.Toolbar>
-        {window.assetsSearch === true && (
-          <s.SearchInputContainer>
-            <s.SearchInputIconContainer>
-              <MagnifierIcon color={searchInputIconColor} size={14} />
-            </s.SearchInputIconContainer>
-            <s.SearchInput
-              placeholder={"Search"}
-              onChange={handleSearchInputChange}
-            />
-          </s.SearchInputContainer>
-        )}
         <s.PopoverContainer>
           <Popover
             open={isSortingMenuOpen}