Feature/assets child leaf

src/components/Assets/AssetList/index.tsx

@@ -4,6 +4,7 @@
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { useStore } from "../../../store/useStore";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
@@ -147,6 +148,7 @@
   const previousEnvironment = usePrevious(environment);
   const previousViewScope = usePrevious(scopeViewOptions);
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
+  const { setShowAssetsHeaderToolBox } = useStore.getState();
 
   const refreshData = useCallback(() => {
     getData(
@@ -204,12 +206,13 @@
     };
 
     dispatcher.addActionListener(actions.SET_DATA, handleAssetsData);
+    setShowAssetsHeaderToolBox(true);
 
     return () => {
       dispatcher.removeActionListener(actions.SET_DATA, handleAssetsData);
       window.clearTimeout(refreshTimerId.current);
     };
   }, []);
 
   useEffect(() => {
     if (data && previousData?.filteredCount !== data?.filteredCount) {

src/components/Assets/AssetTypeList/AssetTypeList.stories.tsx

@@ -82,3 +82,37 @@ export const Empty: Story = {
     }, 0);
   }
 };
+
+export const EmptyWithParents: Story = {
+  args: {
+    searchQuery: "",
+    setRefresher: () => {
+      return undefined;
+    }
+  },
+  play: () => {
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: actions.SET_CATEGORIES_DATA,
+        payload: {
+          assetCategories: [],
+          parents: [
+            {
+              name: "http test",
+              displayName: "http get one",
+              instrumentationLibrary: "common",
+              spanCodeObjectId: "some span"
+            },
+            {
+              name: "http test 2",
+              displayName: "http get two",
+              instrumentationLibrary: "common",
+              spanCodeObjectId: "some span 2"
+            }
+          ]
+        }
+      });
+    }, 0);
+  }
+};

src/components/Assets/AssetTypeList/index.tsx

@@ -3,12 +3,18 @@ import { DigmaMessageError } from "../../../api/types";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { useStore } from "../../../store/useStore";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { isNull } from "../../../typeGuards/isNull";
 import { isString } from "../../../typeGuards/isString";
+import { changeScope } from "../../../utils/actions/changeScope";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
+import { SCOPE_CHANGE_EVENTS } from "../../Main/types";
+import { ChildIcon } from "../../common/icons/30px/ChildIcon";
 import { AssetFilterQuery } from "../AssetsFilter/types";
 import { NoDataMessage } from "../NoDataMessage";
 import { actions } from "../actions";
+import { trackingEvents } from "../tracking";
 import { checkIfAnyFiltersApplied, getAssetTypeInfo } from "../utils";
 import { AssetTypeListItem } from "./AssetTypeListItem";
 import * as s from "./styles";
@@ -75,6 +81,8 @@ export const AssetTypeList = ({
   const previousSearchQuery = usePrevious(searchQuery);
   const previousViewScope = usePrevious(scopeViewOptions);
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
+  const { setShowAssetsHeaderToolBox } = useStore.getState();
+  const [showNoDataWithParents, setShowNoDataWithParents] = useState(false);
 
   const isInitialLoading = !data;
 
@@ -137,8 +145,15 @@ export const AssetTypeList = ({
   useEffect(() => {
     if (data && previousData !== data) {
       onAssetCountChange(getAssetCount(data));
+      const showNoDataWithParents = Boolean(
+        data?.parents &&
+          data.parents.length > 0 &&
+          data?.assetCategories.every((x) => x.count === 0)
+      );
+      setShowAssetsHeaderToolBox(!showNoDataWithParents);
+      setShowNoDataWithParents(showNoDataWithParents);
     }
-  }, [previousData, data, onAssetCountChange]);
+  }, [previousData, data, onAssetCountChange, setShowAssetsHeaderToolBox]);
 
   useEffect(() => {
     if (
@@ -172,6 +187,16 @@ export const AssetTypeList = ({
     onAssetTypeSelect(assetTypeId);
   };
 
+  const handleAssetLinkClick = (spanCodeObjectId: string) => {
+    sendUserActionTrackingEvent(trackingEvents.ALL_ASSETS_LINK_CLICKED);
+    changeScope({
+      span: { spanCodeObjectId },
+      context: {
+        event: SCOPE_CHANGE_EVENTS.ASSETS_EMPTY_CATEGORY_PARENT_LINK_CLICKED
+      }
+    });
+  };
+
   if (isInitialLoading) {
     return <NoDataMessage type={"loading"} />;
   }
@@ -181,11 +206,42 @@ export const AssetTypeList = ({
       return <NoDataMessage type={"noSearchResults"} />;
     }
 
-    if (scope !== null) {
-      return <NoDataMessage type={"noDataForAsset"} />;
+    if (!scope) {
+      return <NoDataMessage type={"noDataYet"} />;
+    }
+
+    if (showNoDataWithParents && data.parents) {
+      return (
+        <s.EmptyStateContainer>
+          <s.StyledEmptyState
+            icon={ChildIcon}
+            title="No Child Assets"
+            content={
+              <>
+                <s.EmptyStateTextContainer>
+                  <span>
+                    There are no child assets under this asset. You can try
+                  </span>
+                  <span>
+                    browsing its parent spans to continue to explore the trace.
+                  </span>
+                </s.EmptyStateTextContainer>
+                {data.parents.map((x) => (
+                  <s.ParentLink
+                    key={x.spanCodeObjectId}
+                    onClick={() => handleAssetLinkClick(x.spanCodeObjectId)}
+                  >
+                    {x.displayName}
+                  </s.ParentLink>
+                ))}
+              </>
+            }
+          />
+        </s.EmptyStateContainer>
+      );
     }
 
-    return <NoDataMessage type={"noDataYet"} />;
+    return <NoDataMessage type={"noDataForAsset"} />;
   }
 
   const assetTypeListItems = ASSET_TYPE_IDS.map((assetTypeId) => {

src/components/Assets/AssetTypeList/styles.ts

@@ -1,4 +1,10 @@
 import styled from "styled-components";
+import {
+  footnoteRegularTypography,
+  subscriptRegularTypography
+} from "../../common/App/typographies";
+import { Link } from "../../common/v3/Link";
+import { NewEmptyState } from "../../common/v3/NewEmptyState";
 
 export const List = styled.ul`
   display: flex;
@@ -7,3 +13,34 @@ export const List = styled.ul`
   padding: 0 8px 8px;
   margin: 0;
 `;
+
+export const EmptyStateContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  height: 100%;
+`;
+
+export const EmptyStateTextContainer = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+`;
+
+export const StyledEmptyState = styled(NewEmptyState)`
+  flex-grow: 1;
+  align-self: center;
+`;
+
+export const ParentLink = styled(Link)`
+  text-decoration: underline;
+  ${subscriptRegularTypography}
+`;

src/components/Assets/AssetTypeList/types.ts

@@ -1,4 +1,5 @@
 import { MemoExoticComponent } from "react";
+import { SpanInfo } from "../../../types";
 import { IconProps } from "../../common/icons/types";
 import { AssetFilterQuery } from "../AssetsFilter/types";
 import { AssetScopeOption } from "../AssetsViewScopeConfiguration/types";
@@ -17,6 +18,7 @@ export interface AssetCategoriesData {
     name: string;
     count: number;
   }[];
+  parents?: SpanInfo[];
 }
 
 export interface AssetCategoryData {

src/components/Assets/index.tsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import { getFeatureFlagValue } from "../../featureFlags";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
+import { useAssetsSelector } from "../../store/assetsSlice/useAssetsSelector";
 import { useConfigSelector } from "../../store/config/useConfigSelector";
 import { FeatureFlag } from "../../types";
 import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent";
@@ -45,6 +46,7 @@ export const Assets = () => {
     backendInfo,
     FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED
   );
+  const { showAssetsHeaderToolBox } = useAssetsSelector();
 
   useEffect(() => {
     if (!scope?.span) {
@@ -131,7 +133,7 @@ export const Assets = () => {
       return <NoDataMessage type={"noDataYet"} />;
     }
 
-    if (!selectedFilters) {
+    if (!selectedFilters && showAssetsHeaderToolBox) {
       return <NoDataMessage type={"loading"} />;
     }
 
@@ -173,33 +175,40 @@ export const Assets = () => {
             />
           </s.HeaderItem>
         )}
-        <s.HeaderItem>
-          <SearchInput
-            onChange={handleSearchInputChange}
-            value={searchInputValue}
-          />
-          <AssetsFilter
-            onApply={handleApplyFilters}
-            filters={selectedFilters}
-            assetScopeOption={
-              areExtendedAssetsFiltersEnabled ? assetScopeOption : null
-            }
-            searchQuery={
-              areExtendedAssetsFiltersEnabled ? debouncedSearchInputValue : ""
-            }
-          />
-          <Tooltip title={"Refresh"}>
-            <s.RefreshButton
-              buttonType={"tertiary"}
-              icon={RefreshIcon}
-              onClick={handleRefresh}
-            />
-          </Tooltip>
-        </s.HeaderItem>
-        {scope?.span && (
-          <s.HeaderItem>Assets filtered to current scope</s.HeaderItem>
+        {showAssetsHeaderToolBox && (
+          <>
+            <s.HeaderItem>
+              <SearchInput
+                onChange={handleSearchInputChange}
+                value={searchInputValue}
+              />
+              <AssetsFilter
+                onApply={handleApplyFilters}
+                filters={selectedFilters}
+                assetScopeOption={
+                  areExtendedAssetsFiltersEnabled ? assetScopeOption : null
+                }
+                searchQuery={
+                  areExtendedAssetsFiltersEnabled
+                    ? debouncedSearchInputValue
+                    : ""
+                }
+              />
+              <Tooltip title={"Refresh"}>
+                <s.RefreshButton
+                  buttonType={"tertiary"}
+                  icon={RefreshIcon}
+                  onClick={handleRefresh}
+                />
+              </Tooltip>
+            </s.HeaderItem>
+            {scope?.span && (
+              <s.HeaderItem>Assets filtered to current scope</s.HeaderItem>
+            )}
+          </>
         )}
       </s.Header>
+
       {renderContent()}
     </s.Container>
   );

src/components/Insights/InsightsCatalog/InsightsPage/index.tsx

@@ -562,7 +562,7 @@ const renderEmptyState = (
     );
   }
 
-  if (!scope && insightsViewType == "Analytics") {
+  if (!scope?.span?.spanCodeObjectId && insightsViewType == "Analytics") {
     return (
       <NewEmptyState
         icon={PulseIcon}

src/components/Main/index.tsx

@@ -205,13 +205,17 @@ export const Main = () => {
             }
             goTo(`/${TAB_IDS.ISSUES}`, { state });
             break;
+          case SCOPE_CHANGE_EVENTS.ASSETS_EMPTY_CATEGORY_PARENT_LINK_CLICKED as string:
+            goTo(`/${TAB_IDS.ASSETS}`, { state });
+            break;
           case SCOPE_CHANGE_EVENTS.IDE_CODE_LENS_CLICKED as string: {
             const url = getURLToNavigateOnCodeLensClick(scope);
             if (url) {
               goTo(url, { state });
               break;
             }
           }
+
           // falls through
           case SCOPE_CHANGE_EVENTS.DASHBOARD_SLOW_QUERIES_WIDGET_ITEM_LINK_CLICKED as string:
           case SCOPE_CHANGE_EVENTS.DASHBOARD_CLIENT_SPANS_PERFORMANCE_IMPACT_WIDGET_ITEM_LINK_CLICKED as string:

src/components/Main/types.ts

@@ -55,7 +55,8 @@ export enum SCOPE_CHANGE_EVENTS {
   NOTIFICATIONS_NOTIFICATION_CARD_ASSET_LINK_CLICKED = "NOTIFICATIONS/NOTIFICATION_CARD_ASSET_LINK_CLICKED",
   RECENT_ACTIVITY_SPAN_LINK_CLICKED = "RECENT_ACTIVITY_SPAN_LINK_CLICKED",
   IDE_CODE_LENS_CLICKED = "IDE/CODE_LENS_CLICKED",
-  IDE_NOTIFICATION_LINK_CLICKED = "IDE/NOTIFICATION_LINK_CLICKED"
+  IDE_NOTIFICATION_LINK_CLICKED = "IDE/NOTIFICATION_LINK_CLICKED",
+  ASSETS_EMPTY_CATEGORY_PARENT_LINK_CLICKED = "ASSETS/EMPTY_CATEGORY_PARENT_LINK_CLICKED"
 }
 
 export interface ReactRouterLocationState {

src/components/common/icons/30px/ChildIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const ChildIconComponent = (props: IconProps) => {
+  const { size } = useIconProps(props);
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 30 30" fill="none">
+      <g
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      >
+        <path stroke="#ACAFBF" d="M6.082 1.05V10" />
+        <path stroke="#A1B5FF" d="M6.082 14.48v6.525a2 2 0 0 0 2 2h11.1" />
+        <path
+          stroke="#A1B5FF"
+          d="M23.659 18.512a4.487 4.487 0 0 0-4.494 4.494 4.487 4.487 0 0 0 4.494 4.494 4.487 4.487 0 0 0 4.494-4.494 4.487 4.487 0 0 0-4.494-4.494Z"
+        />
+        <path stroke="#ACAFBF" d="M6.75 5h5m3.75 0h5" />
+      </g>
+    </svg>
+  );
+};
+
+export const ChildIcon = React.memo(ChildIconComponent);