fix traces side nav (#360)

Signed-off-by: Shenoy Pratik <[email protected]>
opensearch-project · Apr 17, 2023 · 5f2b777 · 5f2b777
1 parent c52b3a1
commit 5f2b777
Show file tree

Hide file tree

Showing 7 changed files with 241 additions and 116 deletions.
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -44,7 +44,7 @@ export function DashboardContent(props: DashboardProps) {
     startTime,
     endTime,
     childBreadcrumbs,
-    parentBreadcrumbs,
+    parentBreadcrumb,
     filters,
     setStartTime,
     setEndTime,
@@ -83,7 +83,7 @@ export function DashboardContent(props: DashboardProps) {
   }, [showTimeoutToast]);
 
   useEffect(() => {
-    // chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, page);
     setFilters([
       ...filters.map((filter) => ({

diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
@@ -62,7 +62,7 @@ export function ServiceView(props: ServiceViewProps) {
 
   useEffect(() => {
     props.chrome.setBreadcrumbs([
-      ...props.parentBreadcrumbs,
+      props.parentBreadcrumb,
       {
         text: 'Trace analytics',
         href: '#/trace_analytics/home',

diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
@@ -30,7 +30,7 @@ export function ServicesContent(props: ServicesProps) {
     endTime,
     appConfigs = [],
     childBreadcrumbs,
-    parentBreadcrumbs,
+    parentBreadcrumb,
     nameColumnAction,
     traceColumnAction,
     setFilters,
@@ -51,7 +51,7 @@ export function ServicesContent(props: ServicesProps) {
   const [filteredService, setFilteredService] = useState('');
 
   useEffect(() => {
-    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, 'services');
     setFilters([
       ...filters.map((filter) => ({
@@ -71,20 +71,39 @@ export function ServicesContent(props: ServicesProps) {
       }
     }
     setFilteredService(newFilteredService);
-    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(newFilteredService);
+    if (
+      !redirect &&
+      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
+        (mode === 'jaeger' && jaegerIndicesExist))
+    )
+      refresh(newFilteredService);
   }, [filters, appConfigs, redirect, mode, jaegerIndicesExist, dataPrepperIndicesExist]);
 
   const refresh = async (currService?: string) => {
     setLoading(true);
-    const DSL = filtersToDsl(mode, filters, query,processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs);
+    const DSL = filtersToDsl(
+      mode,
+      filters,
+      query,
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page,
+      appConfigs
+    );
     // service map should not be filtered by service name
     const serviceMapDSL = _.cloneDeep(DSL);
     serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
       (must: any) => must?.term?.serviceName == null
     );
     await Promise.all([
       handleServicesRequest(http, DSL, setTableItems, mode),
-      handleServiceMapRequest(http, serviceMapDSL, mode, setServiceMap, currService || filteredService),
+      handleServiceMapRequest(
+        http,
+        serviceMapDSL,
+        mode,
+        setServiceMap,
+        currService || filteredService
+      ),
     ]);
     setLoading(false);
   };
@@ -133,16 +152,18 @@ export function ServicesContent(props: ServicesProps) {
         dataPrepperIndicesExist={dataPrepperIndicesExist}
       />
       <EuiSpacer size="m" />
-      { (mode === 'data_prepper' && dataPrepperIndicesExist) ? 
+      {mode === 'data_prepper' && dataPrepperIndicesExist ? (
         <ServiceMap
           addFilter={addFilter}
           serviceMap={serviceMap}
           idSelected={serviceMapIdSelected}
           setIdSelected={setServiceMapIdSelected}
           currService={filteredService}
           page={page}
-        /> : (<div/>)
-      }
+        />
+      ) : (
+        <div />
+      )}
     </>
   );
 }
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -206,7 +206,7 @@ export function TraceView(props: TraceViewProps) {
 
   useEffect(() => {
     props.chrome.setBreadcrumbs([
-      ...props.parentBreadcrumbs,
+      props.parentBreadcrumb,
       {
         text: 'Trace analytics',
         href: '#/trace_analytics/home',

diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -23,7 +23,7 @@ export function TracesContent(props: TracesProps) {
     appConfigs,
     startTime,
     endTime,
-    parentBreadcrumbs,
+    parentBreadcrumb,
     childBreadcrumbs,
     traceIdColumnAction,
     setQuery,
@@ -39,7 +39,7 @@ export function TracesContent(props: TracesProps) {
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, 'traces');
     setFilters([
       ...filters.map((filter) => ({
@@ -51,13 +51,33 @@ export function TracesContent(props: TracesProps) {
   }, []);
 
   useEffect(() => {
-    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh();
+    if (
+      !redirect &&
+      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
+        (mode === 'jaeger' && jaegerIndicesExist))
+    )
+      refresh();
   }, [filters, appConfigs, redirect, mode, dataPrepperIndicesExist, jaegerIndicesExist]);
 
   const refresh = async (sort?: PropertySort) => {
     setLoading(true);
-    const DSL = filtersToDsl(mode, filters, query, processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs);
-    const timeFilterDSL = filtersToDsl(mode, [], '', processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page);
+    const DSL = filtersToDsl(
+      mode,
+      filters,
+      query,
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page,
+      appConfigs
+    );
+    const timeFilterDSL = filtersToDsl(
+      mode,
+      [],
+      '',
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page
+    );
     await handleTracesRequest(http, DSL, timeFilterDSL, tableItems, setTableItems, mode, sort);
     setLoading(false);
   };