Feature/fix new UI

src/components/Assets/AssetTypeList/index.tsx

@@ -202,6 +202,10 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
       return <NoDataMessage type={"noSearchResults"} />;
     }
 
+    if (config.scope !== null) {
+      return <NoDataMessage type={"noDataForAsset"} />;
+    }
+
     return <NoDataMessage type={"noDataYet"} />;
   }
 

src/components/Assets/NoDataMessage/NoDataMessage.stories.tsx

@@ -34,3 +34,9 @@ export const NoSearchResults: Story = {
     type: "noSearchResults"
   }
 };
+
+export const NoDataForAssetResults: Story = {
+  args: {
+    type: "noDataForAsset"
+  }
+};

src/components/Assets/NoDataMessage/index.tsx

@@ -43,6 +43,22 @@ export const NoDataMessage = (props: NoDataMessageProps) => {
         />
       );
       break;
+    case "noDataForAsset":
+      content = (
+        <EmptyState
+          icon={CardsIcon}
+          title={"No Assets"}
+          content={
+            <>
+              <s.EmptyStateDescription>
+                No child assets found for the current scope. Add more
+                observability to track internal functions not currently tracked.
+              </s.EmptyStateDescription>
+            </>
+          }
+        />
+      );
+      break;
     case "noSearchResults":
       content = (
         <EmptyState

src/components/Assets/NoDataMessage/types.ts

@@ -1,3 +1,3 @@
 export interface NoDataMessageProps {
-  type: "loading" | "noDataYet" | "noSearchResults";
+  type: "loading" | "noDataYet" | "noSearchResults" | "noDataForAsset";
 }

src/components/Documentation/pages/RunDigma/runDigmaWithCommandLine.tsx

@@ -29,7 +29,9 @@ export const runDigmaWithCommandLine: PageContent = {
             <otel.exporter.otlp.traces.endpoint>http://localhost:5050</otel.exporter.otlp.traces.endpoint>
             <otel.traces.exporter>otlp</otel.traces.exporter>
             <otel.metrics.exporter>none</otel.metrics.exporter>
+            <otel.logs.exporter>none</otel.metrics.exporter>
             <otel.service.name>\${pom.artifactId}</otel.service.name>
+             <otel.exporter.otlp.protocol>grpc</<otel.exporter.otlp.protocol>>
             <otel.javaagent.extensions>\${env.TMPDIR}/temp-digma-otel-jars/digma-otel-agent-extension.jar</otel.javaagent.extensions>
           </systemPropertyVariables>
         </configuration>
@@ -65,6 +67,8 @@ export const runDigmaWithCommandLine: PageContent = {
     systemProperty 'otel.exporter.otlp.traces.endpoint', 'http://localhost:5050'
     systemProperty 'otel.traces.exporter', 'otlp'
     systemProperty 'otel.metrics.exporter', 'none'
+    systemProperty 'otel.logs.exporter', 'none'
+    systemProperty 'otel.exporter.otlp.protocol', 'grpc'
     systemProperty 'otel.service.name', "\${project.name}"
     systemProperty 'otel.javaagent.extensions', "\${tempDir}/temp-digma-otel-jars/digma-otel-agent-extension.jar"
   }
@@ -83,6 +87,8 @@ export const runDigmaWithCommandLine: PageContent = {
     systemProperty("otel.exporter.otlp.traces.endpoint", "http://localhost:5050")
     systemProperty("otel.traces.exporter", "otlp")
     systemProperty("otel.metrics.exporter", "none")
+    systemProperty("otel.logs.exporter", "none")
+    systemProperty("otel.exporter.otlp.protocol", "grpc")
     systemProperty("otel.service.name", project.name)
     systemProperty("otel.javaagent.extensions", "\${tempDir}/temp-digma-otel-jars/digma-otel-agent-extension.jar")
   }
@@ -102,15 +108,16 @@ export const runDigmaWithCommandLine: PageContent = {
             application name:
           </span>
           <CodeSnippet
-            text={`curl --create-dirs -O -L --output-dir ./otel https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/download/v1.29.0/opentelemetry-javaagent.jar
+            text={`curl --create-dirs -O -L --output-dir ./otel https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/download/v2.1.0/opentelemetry-javaagent.jar
 
 curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-java-instrumentation/releases/latest/download/digma-otel-agent-extension.jar
 
-export JAVA_TOOL_OPTIONS="-javaagent:/otel/javaagent.jar -Dotel.exporter.otlp.endpoint=http://localhost:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar"
+export JAVA_TOOL_OPTIONS="-javaagent:/otel/javaagent.jar -Dotel.exporter.otlp.endpoint=http://localhost:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar -Dotel.metrics.exporter=none -Dotel.logs.exporter=none -Dotel.exporter.otlp.protocol=grpc"
+
 export OTEL_SERVICE_NAME={--ENTER YOUR SERVICE NAME HERE--}
 export OTEL_RESOURCE_ATTRIBUTES=digma.environment=LOCAL
 
-java app.jar`}
+java app.jarr`}
             language={"bash"}
           />
         </>

src/components/Documentation/pages/RunDigma/runDigmaWithDocker.tsx

@@ -22,7 +22,7 @@ export const runDigmaWithDocker: PageContent = {
       ),
       content: (
         <CodeSnippet
-          text={`curl --create-dirs -O -L --output-dir ./otel https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/download/v1.29.0/opentelemetry-javaagent.jar
+          text={`curl --create-dirs -O -L --output-dir ./otel https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/download/v2.1.0/opentelemetry-javaagent.jar
 
 curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-java-instrumentation/releases/latest/download/digma-otel-agent-extension.jar`}
           language={"bash"}
@@ -56,7 +56,7 @@ curl --create-dirs -O -L --output-dir ./otel https://github.com/digma-ai/otel-ja
       - "./otel/opentelemetry-javaagent.jar:/otel/opentelemetry-javaagent.jar"
       - "./otel/digma-otel-agent-extension.jar:/otel/digma-otel-agent-extension.jar"
     environment:
-      - JAVA_TOOL_OPTIONS=-javaagent:/otel/opentelemetry-javaagent.jar -Dotel.exporter.otlp.endpoint=http://host.docker.internal:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar
+      - JAVA_TOOL_OPTIONS=-javaagent:/otel/opentelemetry-javaagent.jar -Dotel.exporter.otlp.endpoint=http://host.docker.internal:5050 -Dotel.javaagent.extensions=/otel/digma-otel-agent-extension.jar -Dotel.metrics.exporter=none -Dotel.logs.exporter=none -Dotel.exporter.otlp.protocol=grpc
       - OTEL_SERVICE_NAME=#[your-service]
       - OTEL_RESOURCE_ATTRIBUTES=digma.environment=DOCKER_LOCAL
       - OTEL_METRICS_EXPORTER=none

src/components/Insights/InsightsCatalog/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { usePrevious } from "../../../hooks/usePrevious";
 
 import { useDebounce } from "../../../hooks/useDebounce";
@@ -8,6 +8,8 @@ import { Pagination } from "../../common/Pagination";
 import { SearchInput } from "../../common/SearchInput";
 import { SortingSelector } from "../../common/SortingSelector";
 import { SORTING_ORDER, Sorting } from "../../common/SortingSelector/types";
+import { RefreshIcon } from "../../common/icons/16px/RefreshIcon";
+import { Tooltip } from "../../common/v3/Tooltip";
 import { InsightsPage } from "../InsightsPage";
 import * as s from "./styles";
 import { InsightsCatalogProps, SORTING_CRITERION } from "./types";
@@ -32,6 +34,15 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
   const config = useContext(ConfigContext);
   const previousConfig = usePrevious(config);
   const previousScope = usePrevious(config.scope?.span);
+  const refreshData = useCallback(
+    () =>
+      props.onQueryChange({
+        page,
+        sorting,
+        searchQuery: debouncedSearchInputValue
+      }),
+    [page, sorting, debouncedSearchInputValue, props]
+  );
 
   useEffect(() => {
     if (!previousScope || previousScope !== config.scope?.span) {
@@ -51,11 +62,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
   }, [previousConfig, config]);
 
   useEffect(() => {
-    props.onQueryChange({
-      page,
-      sorting,
-      searchQuery: debouncedSearchInputValue
-    });
+    refreshData();
   }, []);
 
   useEffect(() => {
@@ -64,11 +71,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
       (previousSorting && previousSorting !== sorting) ||
       previousSearchQuery !== debouncedSearchInputValue
     ) {
-      props.onQueryChange({
-        page,
-        sorting,
-        searchQuery: debouncedSearchInputValue
-      });
+      refreshData();
     }
   }, [
     previousSorting,
@@ -77,7 +80,8 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     page,
     debouncedSearchInputValue,
     previousSearchQuery,
-    props.onQueryChange
+    props.onQueryChange,
+    refreshData
   ]);
 
   return (
@@ -108,6 +112,13 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
           ]}
           default={defaultQuery.sorting}
         />
+        <Tooltip title="Refresh">
+          <s.RefreshButton
+            buttonType="tertiary"
+            icon={RefreshIcon}
+            onClick={() => refreshData()}
+          />
+        </Tooltip>
       </s.Toolbar>
       <InsightsPage
         page={page}

src/components/Insights/InsightsCatalog/styles.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Button } from "../../common/v3/Button";
 
 export const Footer = styled.div`
   display: flex;
@@ -38,3 +39,13 @@ export const Toolbar = styled.div`
   padding: 8px;
   gap: 8px;
 `;
+
+export const RefreshButton = styled(Button)`
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark};
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+
+  &:hover:enabled {
+    color: ${({ theme }) => theme.colors.v3.icon.white};
+    background: none;
+  }
+`;

src/components/common/icons/16px/RefreshIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { IconProps } from "../types";
+
+const RefreshIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <g stroke={color} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3.556 3.557S5.222 1.891 8 1.891c3.889 0 6.111 3.889 6.111 3.889m-1.667 6.665S10.778 14.11 8 14.11c-3.889 0-6.111-3.888-6.111-3.888" />
+        <path d="M10.778 5.779h3.333V2.445m-8.889 7.778H1.89v3.333" />
+      </g>
+    </svg>
+  );
+};
+
+export const RefreshIcon = React.memo(RefreshIconComponent);