Fix panelbreadcrumbs for service and trace view

Signed-off-by: Eugene Lee <[email protected]>
opensearch-project · Mar 16, 2022 · b904d48 · b904d48
1 parent a485615
commit b904d48
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 22 deletions.
diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx
@@ -118,7 +118,7 @@ export const App = ({
                   return (
                     <EventAnalytics
                       chrome={chrome}
-                      parentBreadcrumb={parentBreadcrumb}
+                      parentBreadcrumbs={[parentBreadcrumb]}
                       pplService={pplService}
                       dslService={dslService}
                       savedObjects={savedObjects}

diff --git a/...boards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx b/...boards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
@@ -17,9 +17,9 @@ import {
 } from '../../../../test/panels_constants';
 import httpClientMock from '../../../../test/__mocks__/httpClientMock';
 import PPLService from '../../../../public/services/requests/ppl';
+import DSLService from '../../../../public/services/requests/dsl';
 import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
 import { HttpResponse } from '../../../../../../src/core/public';
-import DSLService from 'public/services/requests/dsl';
 
 describe.skip('Panels View Component', () => {
   configure({ adapter: new Adapter() });

diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx
@@ -2,6 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 import {
   EuiBreadcrumb,
@@ -63,7 +64,7 @@ interface Props {
   customPanels: CustomPanelListType[];
   createCustomPanel: (newCustomPanelName: string) => void;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
-  parentBreadcrumb: EuiBreadcrumb[];
+  parentBreadcrumbs: EuiBreadcrumb[];
   renameCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
   cloneCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
   deleteCustomPanelList: (customPanelIdList: string[], toastMessage: string) => any;
@@ -76,7 +77,7 @@ export const CustomPanelTable = ({
   customPanels,
   createCustomPanel,
   setBreadcrumbs,
-  parentBreadcrumb,
+  parentBreadcrumbs,
   renameCustomPanel,
   cloneCustomPanel,
   deleteCustomPanelList,
@@ -89,7 +90,7 @@ export const CustomPanelTable = ({
   const [searchQuery, setSearchQuery] = useState('');
 
   useEffect(() => {
-    setBreadcrumbs(parentBreadcrumb);
+    setBreadcrumbs(parentBreadcrumbs);
     fetchCustomPanels();
   }, []);
 
@@ -255,7 +256,7 @@ export const CustomPanelTable = ({
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink href={`${_.last(parentBreadcrumb).href}${record.id}`}>
+        <EuiLink href={`${_.last(parentBreadcrumb)!.href}${record.id}`}>
           {_.truncate(value, { length: 100 })}
         </EuiLink>
       ),

diff --git a/dashboards-observability/public/components/explorer/event_analytics.tsx b/dashboards-observability/public/components/explorer/event_analytics.tsx
@@ -16,7 +16,7 @@ import { LogExplorer } from './log_explorer';
 
 export const EventAnalytics = ({
   chrome,
-  parentBreadcrumb,
+  parentBreadcrumbs,
   pplService,
   dslService,
   savedObjects,
@@ -63,9 +63,9 @@ export const EventAnalytics = ({
         <Switch>
           <Route
             path={[`/event_analytics/explorer/:id`, `/event_analytics/explorer`]}
-            render={(props) => {
+            render={(prop) => {
               chrome.setBreadcrumbs([
-                parentBreadcrumb,
+                ...parentBreadcrumbs,
                 eventAnalyticsBreadcrumb,
                 {
                   text: 'Explorer',
@@ -74,7 +74,7 @@ export const EventAnalytics = ({
               ]);
               return (
                 <LogExplorer
-                  savedObjectId={props.match.params.id}
+                  savedObjectId={prop.match.params.id}
                   pplService={pplService}
                   dslService={dslService}
                   savedObjects={savedObjects}
@@ -91,9 +91,9 @@ export const EventAnalytics = ({
           <Route
             exact
             path={['/', '/event_analytics']}
-            render={(props) => {
+            render={() => {
               chrome.setBreadcrumbs([
-                parentBreadcrumb,
+                ...parentBreadcrumbs,
                 eventAnalyticsBreadcrumb,
                 {
                   text: 'Home',

diff --git a/dashboards-observability/public/components/notebooks/components/main.tsx b/dashboards-observability/public/components/notebooks/components/main.tsx
@@ -2,13 +2,15 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/* eslint-disable no-console */
 
 import { EuiGlobalToastList, EuiLink } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-import PPLService from '../../../services/requests/ppl';
 import React, { ReactChild } from 'react';
+// eslint-disable-next-line @osd/eslint/module_migration
 import { Route, Switch } from 'react-router';
 import { HashRouter, RouteComponentProps } from 'react-router-dom';
+import PPLService from '../../../services/requests/ppl';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../../src/core/public';
 import { DashboardStart } from '../../../../../../src/plugins/dashboard/public';
 import {
@@ -39,19 +41,19 @@ type MainProps = RouteComponentProps & {
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 };
 
-type MainState = {
-  data: Array<NotebookType>;
+interface MainState {
+  data: NotebookType[];
   openedNotebook: NotebookType | undefined;
   toasts: Toast[];
   loading: boolean;
-};
+}
 
-export type NotebookType = {
+export interface NotebookType {
   path: string;
   id: string;
   dateCreated: string;
   dateModified: string;
-};
+}
 
 export class Main extends React.Component<MainProps, MainState> {
   constructor(props: Readonly<MainProps>) {
@@ -272,7 +274,7 @@ export class Main extends React.Component<MainProps, MainState> {
           body: JSON.stringify({ visIds }),
         })
         .then((res) => {
-          const newData = res.body.map((notebook) => ({
+          const newData = res.body.map((notebook: any) => ({
             path: notebook.name,
             id: notebook.id,
             dateCreated: notebook.dateCreated,
@@ -283,7 +285,7 @@ export class Main extends React.Component<MainProps, MainState> {
           }));
         });
       this.setToast(`Sample notebooks successfully added.`);
-    } catch (err) {
+    } catch (err: any) {
       this.setToast('Error adding sample notebooks.', 'danger');
       console.error(err.body.message);
     } finally {

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

diff --git a/dashboards-observability/public/components/trace_analytics/components/traces/trace_view.tsx b/dashboards-observability/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -186,7 +186,7 @@ export function TraceView(props: TraceViewProps) {
 
   useEffect(() => {
     props.chrome.setBreadcrumbs([
-      props.parentBreadcrumb,
+      ...props.parentBreadcrumbs,
       {
         text: 'Trace analytics',
         href: '#/trace_analytics/home',