Modularize dashboard and fix lint (#583)

Signed-off-by: Eugene Lee <[email protected]>
opensearch-project · Mar 17, 2022 · 7958e72 · 7958e72
1 parent 6d3c351
commit 7958e72
Show file tree

Hide file tree

Showing 35 changed files with 3,036 additions and 2,741 deletions.
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -104,13 +104,12 @@ export interface IExplorerProps {
   tabCreatedTypes?: any;
   searchBarConfigs?: any;
   appId?: string;
-  baseQuery?: string;
   addVisualizationToPanel?: any;
   startTime?: string;
   endTime?: string;
   setStartTime?: any;
   setEndTime?: any;
-  appBaseQuery: string;
+  appBaseQuery?: string;
 }
 
 export interface SavedQuery {

diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx
@@ -18,7 +18,7 @@ import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
 
 interface ObservabilityAppDeps {
-  CoreStart: CoreStart;
+  CoreStartProp: CoreStart;
   DepsStart: AppPluginStartDependencies;
   pplService: any;
   dslService: any;
@@ -27,14 +27,14 @@ interface ObservabilityAppDeps {
 }
 
 export const App = ({
-  CoreStart,
+  CoreStartProp,
   DepsStart,
   pplService,
   dslService,
   savedObjects,
   timestampUtils,
 }: ObservabilityAppDeps) => {
-  const { chrome, http, notifications } = CoreStart;
+  const { chrome, http, notifications } = CoreStartProp;
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: `${observabilityID}#/`,
@@ -60,7 +60,7 @@ export const App = ({
                       chrome={chrome}
                       http={http}
                       notifications={notifications}
-                      parentBreadcrumb={parentBreadcrumb}
+                      parentBreadcrumbs={[parentBreadcrumb]}
                       pplService={pplService}
                       dslService={dslService}
                       savedObjects={savedObjects}
@@ -93,7 +93,7 @@ export const App = ({
                     <CustomPanelsHome
                       http={http}
                       chrome={chrome}
-                      parentBreadcrumb={[parentBreadcrumb, customPanelBreadcrumb]}
+                      parentBreadcrumbs={[parentBreadcrumb, customPanelBreadcrumb]}
                       pplService={pplService}
                       dslService={dslService}
                       renderProps={props}
@@ -108,7 +108,7 @@ export const App = ({
                     {...props}
                     chrome={chrome}
                     http={http}
-                    parentBreadcrumb={parentBreadcrumb}
+                    parentBreadcrumbs={[parentBreadcrumb]}
                   />
                 )}
               />
@@ -118,7 +118,7 @@ export const App = ({
                   return (
                     <EventAnalytics
                       chrome={chrome}
-                      parentBreadcrumb={parentBreadcrumb}
+                      parentBreadcrumbs={[parentBreadcrumb]}
                       pplService={pplService}
                       dslService={dslService}
                       savedObjects={savedObjects}

diff --git a/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx b/dashboards-observability/public/components/application_analytics/__tests__/create.test.tsx
@@ -9,6 +9,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import { CreateApp } from '../components/create';
 import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
 import DSLService from 'public/services/requests/dsl';
+import PPLService from 'public/services/requests/ppl';
 import { render } from '@testing-library/react';
 
 describe('Create Page', () => {
@@ -37,11 +38,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={[]}
@@ -96,11 +102,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query="source = openserach_dashboard_sample_logs"
         setQuery={setQuery}
         filters={[]}
@@ -155,11 +166,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query="source = openserach_dashboard_sample_logs"
         setQuery={setQuery}
         filters={[]}
@@ -217,11 +233,16 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const utils = render(
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query="source = openserach_dashboard_sample_logs"
         setQuery={setQuery}
         filters={[]}
@@ -279,6 +300,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const serviceFilters = [
       {
         field: 'serviceName',
@@ -292,7 +317,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={serviceFilters}
@@ -350,6 +376,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const serviceFilters = [
       {
         field: 'serviceName',
@@ -363,7 +393,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={serviceFilters}
@@ -421,6 +452,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const traceFilters = [
       {
         field: 'traceGroup',
@@ -434,7 +469,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={traceFilters}
@@ -492,6 +528,10 @@ describe('Create Page', () => {
       fetchIndices: jest.fn(),
       fetchFields: jest.fn(),
     } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
     const traceFilters = [
       {
         field: 'traceGroup',
@@ -505,7 +545,8 @@ describe('Create Page', () => {
       <CreateApp
         http={core.http}
         chrome={core.chrome}
-        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
         query=""
         setQuery={setQuery}
         filters={traceFilters}

diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx
@@ -53,7 +53,7 @@ export function AppTable(props: AppTableProps) {
     http,
     chrome,
     applications,
-    parentBreadcrumb,
+    parentBreadcrumbs,
     fetchApplications,
     renameApplication,
     deleteApplication,
@@ -70,7 +70,7 @@ export function AppTable(props: AppTableProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      parentBreadcrumb,
+      ...parentBreadcrumbs,
       {
         text: 'Application analytics',
         href: '#/application_analytics',

diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx
@@ -27,13 +27,14 @@ import React, { ReactChild, useEffect, useState } from 'react';
 import { uniqueId } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
+import { last } from 'lodash';
+import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content';
 import {
   filtersToDsl,
   PanelTitle,
 } from '../../../../public/components/trace_analytics/components/common/helper_functions';
 import { SpanDetailTable } from '../../../../public/components/trace_analytics/components/traces/span_detail_table';
 import { Explorer } from '../../explorer/explorer';
-import { Dashboard } from '../../trace_analytics/components/dashboard';
 import { Services } from '../../trace_analytics/components/services';
 import { Traces } from '../../trace_analytics/components/traces';
 import { Configuration } from './configuration';
@@ -110,7 +111,7 @@ export function Application(props: AppDetailProps) {
     notifications,
     appId,
     chrome,
-    parentBreadcrumb,
+    parentBreadcrumbs,
     startTime,
     endTime,
     query,
@@ -211,14 +212,14 @@ export function Application(props: AppDetailProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      parentBreadcrumb,
+      ...parentBreadcrumbs,
       {
         text: 'Application analytics',
         href: '#/application_analytics',
       },
       {
         text: application.name,
-        href: `${parentBreadcrumb.href}${appId}`,
+        href: `${last(parentBreadcrumbs)!.href}application_analytics/${appId}`,
       },
     ]);
     setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h');
@@ -230,6 +231,12 @@ export function Application(props: AppDetailProps) {
     setSpanDSL(DSL);
   }, [filters, appConfigs, query, startTime, endTime]);
 
+  useEffect(() => {
+    if (selectedTabId !== TAB_LOG_ID) {
+      switchToEditViz('');
+    }
+  }, [selectedTabId]);
+
   const openServiceFlyout = (serviceName: string) => {
     setSpanFlyoutId('');
     setTraceFlyoutId('');
@@ -260,17 +267,29 @@ export function Application(props: AppDetailProps) {
     setTraceFlyoutId('');
   };
 
+  const childBreadcrumbs = [
+    {
+      text: 'Application analytics',
+      href: '#/application_analytics',
+    },
+    {
+      text: `${application.name}`,
+      href: `#/application_analytics/${appId}`,
+    },
+  ];
+
   const getOverview = () => {
     return (
-      <Dashboard
-        {...props}
-        page="app"
-        appId={appId}
-        appName={application.name}
-        setStartTime={setStartTimeForApp}
-        setEndTime={setEndTimeForApp}
-        switchToEditViz={switchToEditViz}
-      />
+      <>
+        <EuiSpacer size="m" />
+        <DashboardContent
+          {...props}
+          page="app"
+          setStartTime={setStartTimeForApp}
+          setEndTime={setEndTimeForApp}
+          childBreadcrumbs={childBreadcrumbs}
+        />
+      </>
     );
   };
 
@@ -339,7 +358,6 @@ export function Application(props: AppDetailProps) {
         http={http}
         searchBarConfigs={searchBarConfigs}
         appId={appId}
-        baseQuery={application.baseQuery}
         addVisualizationToPanel={addVisualizationToPanel}
         startTime={startTime}
         endTime={endTime}
@@ -357,12 +375,13 @@ export function Application(props: AppDetailProps) {
         panelId={application.panelId}
         http={http}
         pplService={pplService}
+        dslService={dslService}
         chrome={chrome}
-        parentBreadcrumb={[parentBreadcrumb]}
+        parentBreadcrumbs={parentBreadcrumbs}
         // App analytics will not be renaming/cloning/deleting panels
-        renameCustomPanel={() => undefined}
-        cloneCustomPanel={(): Promise<string> => Promise.reject()}
-        deleteCustomPanel={(): Promise<string> => Promise.reject()}
+        renameCustomPanel={async () => undefined}
+        cloneCustomPanel={async () => Promise.reject()}
+        deleteCustomPanel={async () => Promise.reject()}
         setToast={setToasts}
         page="app"
         appName={application.name}
@@ -394,7 +413,7 @@ export function Application(props: AppDetailProps) {
     return (
       <Configuration
         appId={appId}
-        parentBreadcrumb={parentBreadcrumb}
+        parentBreadcrumbs={parentBreadcrumbs}
         application={application}
         switchToEditViz={switchToEditViz}
         visWithAvailability={visWithAvailability}