fix traces side nav (#360)

Signed-off-by: Shenoy Pratik <[email protected]> (cherry picked from commit 5f2b777) Signed-off-by: Peter Fitzgibbons <[email protected]>
opensearch-project · Apr 18, 2023 · 9cef044 · 9cef044
1 parent a3056b7
commit 9cef044
Show file tree

Hide file tree

Showing 7 changed files with 243 additions and 118 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,
@@ -93,7 +93,7 @@ export function DashboardContent(props: DashboardProps) {
   useEffect(() => {
     let newFilteredService = '';
     for (const filter of filters) {
-      if (mode === 'data_prepper') { 
+      if (mode === 'data_prepper') {
         if (filter.field === 'serviceName') {
           newFilteredService = filter.value;
           break;
@@ -154,7 +154,7 @@ export function DashboardContent(props: DashboardProps) {
         mode,
         () => setShowTimeoutToast(true),
         // () => {
-        //   if (toasts.length === 0) { 
+        //   if (toasts.length === 0) {
         //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
         //   }
         // },
@@ -170,7 +170,7 @@ export function DashboardContent(props: DashboardProps) {
         mode,
         () => setShowTimeoutToast(true),
         // () => {
-        //   if (toasts.length === 0) { 
+        //   if (toasts.length === 0) {
         //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
         //   }
         // },

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);
   };