[Backport 2.x] Changes to conform to new navigation and page header when feature flag enabled

public/application.tsx

@@ -8,11 +8,16 @@ import ReactDOM from 'react-dom';
 import { HashRouter as Router } from 'react-router-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { QueryInsightsDashboardsApp } from './components/app';
+import { QueryInsightsDashboardsPluginStartDependencies } from './types';
 
-export const renderApp = (core: CoreStart, { element }: AppMountParameters) => {
+export const renderApp = (
+  core: CoreStart,
+  depsStart: QueryInsightsDashboardsPluginStartDependencies,
+  { element }: AppMountParameters
+) => {
   ReactDOM.render(
     <Router>
-      <QueryInsightsDashboardsApp core={core} />
+      <QueryInsightsDashboardsApp core={core} depsStart={depsStart} />
     </Router>,
     element
   );

public/components/PageHeader.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { CoreStart } from '../../../../src/core/public';
+import { QueryInsightsDashboardsPluginStartDependencies } from '../types';
+
+export const PageHeader = (props: {
+  coreStart: CoreStart;
+  depsStart: QueryInsightsDashboardsPluginStartDependencies;
+  fallBackComponent: JSX.Element;
+}) => {
+  // const { HeaderControl } = props.depsStart.navigation.ui; // TODO: enable this if more page header features are needed
+  const useNewUx = props.coreStart.uiSettings.get('home:useNewHomePage');
+  if (useNewUx) {
+    // TODO: add any controls here
+    return <></>;
+  } else {
+    return props.fallBackComponent;
+  }
+};

public/components/app.tsx

@@ -7,7 +7,14 @@ import React from 'react';
 import { Route } from 'react-router-dom';
 import TopNQueries from '../pages/TopNQueries/TopNQueries';
 import { CoreStart } from '../../../../src/core/public';
+import { QueryInsightsDashboardsPluginStartDependencies } from '../types';
 
-export const QueryInsightsDashboardsApp = ({ core }: { core: CoreStart }) => {
-  return <Route render={() => <TopNQueries core={core} />} />;
+export const QueryInsightsDashboardsApp = ({
+  core,
+  depsStart,
+}: {
+  core: CoreStart;
+  depsStart: QueryInsightsDashboardsPluginStartDependencies;
+}) => {
+  return <Route render={() => <TopNQueries core={core} depsStart={depsStart} />} />;
 };

public/pages/QueryDetails/QueryDetails.test.tsx

@@ -20,6 +20,9 @@ const mockCoreStart = {
   chrome: {
     setBreadcrumbs: jest.fn(),
   },
+  uiSettings: {
+    get: jest.fn().mockReturnValue(false),
+  },
 };
 const mockQuery = MockQueries()[0];
 const mockParams = { hashedQuery: hash(mockQuery) };

public/pages/QueryDetails/QueryDetails.tsx

@@ -23,8 +23,18 @@ import { CoreStart } from 'opensearch-dashboards/public';
 import QuerySummary from './Components/QuerySummary';
 import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
 import { SearchQueryRecord } from '../../../types/types';
+import { PageHeader } from '../../components/PageHeader';
+import { QueryInsightsDashboardsPluginStartDependencies } from '../../types';
 
-const QueryDetails = ({ queries, core }: { queries: any; core: CoreStart }) => {
+const QueryDetails = ({
+  queries,
+  core,
+  depsStart,
+}: {
+  queries: any;
+  core: CoreStart;
+  depsStart: QueryInsightsDashboardsPluginStartDependencies;
+}) => {
   const { hashedQuery } = useParams<{ hashedQuery: string }>();
   const query = queries.find((q: SearchQueryRecord) => hash(q) === hashedQuery);
   const history = useHistory();
@@ -92,10 +102,19 @@ const QueryDetails = ({ queries, core }: { queries: any; core: CoreStart }) => {
 
   return (
     <div>
-      <EuiTitle size="l">
-        <h1>Query details</h1>
-      </EuiTitle>
-      <EuiSpacer size="l" />
+      <PageHeader
+        coreStart={core}
+        depsStart={depsStart}
+        fallBackComponent={
+          <>
+            <EuiTitle size="l">
+              <h1>Query details</h1>
+            </EuiTitle>
+            <EuiSpacer size="l" />
+          </>
+        }
+      />
+
       <EuiFlexItem>
         <QuerySummary query={query} />
         <EuiSpacer size="m" />

public/pages/QueryGroupDetails/QueryGroupDetails.test.tsx

@@ -30,6 +30,9 @@ describe('QueryGroupDetails', () => {
     chrome: {
       setBreadcrumbs: jest.fn(),
     },
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   } as unknown) as CoreStart;
 
   const expectedHash = '8c1e50c035663459d567fa11d8eb494d';

public/pages/QueryGroupDetails/QueryGroupDetails.tsx

@@ -25,8 +25,18 @@ import {
 import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
 import { QueryGroupAggregateSummary } from './Components/QueryGroupAggregateSummary';
 import { QueryGroupSampleQuerySummary } from './Components/QueryGroupSampleQuerySummary';
+import { QueryInsightsDashboardsPluginStartDependencies } from '../../types';
+import { PageHeader } from '../../components/PageHeader';
 
-export const QueryGroupDetails = ({ queries, core }: { queries: any; core: CoreStart }) => {
+export const QueryGroupDetails = ({
+  queries,
+  core,
+  depsStart,
+}: {
+  queries: any;
+  core: CoreStart;
+  depsStart: QueryInsightsDashboardsPluginStartDependencies;
+}) => {
   const { hashedQuery } = useParams<{ hashedQuery: string }>();
   const query = queries.find((q: any) => hash(q) === hashedQuery);
 
@@ -97,18 +107,26 @@ export const QueryGroupDetails = ({ queries, core }: { queries: any; core: CoreS
 
   return (
     <div>
-      <EuiFlexGrid columns={2}>
-        <EuiTitle size="l">
-          <h1>Query group details</h1>
-        </EuiTitle>
-        <EuiIconTip
-          content="Details for the query group including aggregate statistics and number of queries in the group"
-          position="right"
-          type="iInCircle"
-          aria-label="Details tooltip"
-        />
-      </EuiFlexGrid>
-      <EuiSpacer size="l" />
+      <PageHeader
+        coreStart={core}
+        depsStart={depsStart}
+        fallBackComponent={
+          <>
+            <EuiFlexGrid columns={2}>
+              <EuiTitle size="l">
+                <h1>Query group details</h1>
+              </EuiTitle>
+              <EuiIconTip
+                content="Details for the query group including aggregate statistics and number of queries in the group"
+                position="right"
+                type="iInCircle"
+                aria-label="Details tooltip"
+              />
+            </EuiFlexGrid>
+            <EuiSpacer size="l" />
+          </>
+        }
+      />
       <EuiFlexItem>
         <QueryGroupAggregateSummary query={query} />
       </EuiFlexItem>

public/pages/TopNQueries/TopNQueries.test.tsx

@@ -19,6 +19,9 @@ const mockCore = ({
     get: jest.fn(),
     put: jest.fn(),
   },
+  uiSettings: {
+    get: jest.fn().mockReturnValue(false),
+  },
 } as unknown) as CoreStart;
 
 const setUpDefaultEnabledSettings = () => {

public/pages/TopNQueries/TopNQueries.tsx

@@ -13,6 +13,8 @@ import Configuration from '../Configuration/Configuration';
 import QueryDetails from '../QueryDetails/QueryDetails';
 import { SearchQueryRecord } from '../../../types/types';
 import { QueryGroupDetails } from '../QueryGroupDetails/QueryGroupDetails';
+import { QueryInsightsDashboardsPluginStartDependencies } from '../../types';
+import { PageHeader } from '../../components/PageHeader';
 import {
   DEFAULT_TIME_UNIT,
   DEFAULT_TOP_N_SIZE,
@@ -39,10 +41,12 @@ export interface GroupBySettings {
 
 const TopNQueries = ({
   core,
+  depsStart,
   initialStart = 'now-1d',
   initialEnd = 'now',
 }: {
   core: CoreStart;
+  depsStart: QueryInsightsDashboardsPluginStartDependencies;
   initialStart?: string;
   initialEnd?: string;
 }) => {
@@ -316,16 +320,24 @@ const TopNQueries = ({
     <div style={{ padding: '35px 35px' }}>
       <Switch>
         <Route exact path="/query-details/:hashedQuery">
-          <QueryDetails queries={queries} core={core} />
+          <QueryDetails queries={queries} core={core} depsStart={depsStart} />
         </Route>
         <Route exact path="/query-group-details/:hashedQuery">
-          <QueryGroupDetails queries={queries} core={core} />
+          <QueryGroupDetails queries={queries} core={core} depsStart={depsStart} />
         </Route>
         <Route exact path={QUERY_INSIGHTS}>
-          <EuiTitle size="l">
-            <h1>Query insights - Top N queries</h1>
-          </EuiTitle>
-          <EuiSpacer size="l" />
+          <PageHeader
+            coreStart={core}
+            depsStart={depsStart}
+            fallBackComponent={
+              <>
+                <EuiTitle size="l">
+                  <h1>Query insights - Top N queries</h1>
+                </EuiTitle>
+                <EuiSpacer size="l" />
+              </>
+            }
+          />
           <EuiTabs>{tabs.map(renderTab)}</EuiTabs>
           <EuiSpacer size="l" />
           <QueryInsights
@@ -339,10 +351,19 @@ const TopNQueries = ({
           />
         </Route>
         <Route exact path={CONFIGURATION}>
-          <EuiTitle size="l">
-            <h1>Query insights - Configuration</h1>
-          </EuiTitle>
-          <EuiSpacer size="l" />
+          <PageHeader
+            coreStart={core}
+            depsStart={depsStart}
+            fallBackComponent={
+              <>
+                <EuiTitle size="l">
+                  <h1>Query insights - Configuration</h1>
+                </EuiTitle>
+                <EuiSpacer size="l" />
+              </>
+            }
+          />
+
           <EuiTabs>{tabs.map(renderTab)}</EuiTabs>
           <EuiSpacer size="l" />
           <Configuration

public/plugin.ts

@@ -3,20 +3,36 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { i18n } from '@osd/i18n';
-import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
-import { QueryInsightsDashboardsPluginSetup, QueryInsightsDashboardsPluginStart } from './types';
+import {
+  AppMountParameters,
+  CoreSetup,
+  CoreStart,
+  DEFAULT_NAV_GROUPS,
+  Plugin,
+} from '../../../src/core/public';
+import {
+  QueryInsightsDashboardsPluginSetup,
+  QueryInsightsDashboardsPluginStart,
+  QueryInsightsDashboardsPluginStartDependencies,
+} from './types';
 import { PLUGIN_NAME } from '../common';
 
 export class QueryInsightsDashboardsPlugin
-  implements Plugin<QueryInsightsDashboardsPluginSetup, QueryInsightsDashboardsPluginStart> {
+  implements
+    Plugin<
+      QueryInsightsDashboardsPluginSetup,
+      QueryInsightsDashboardsPluginStart,
+      {},
+      QueryInsightsDashboardsPluginStartDependencies
+    > {
   public setup(core: CoreSetup): QueryInsightsDashboardsPluginSetup {
     // Register an application into the side navigation menu
     core.application.register({
       id: PLUGIN_NAME,
       title: 'Query Insights',
       // @ts-ignore
-      description: 'OpenSearch Dashboards Query Insights Plugin',
+      description:
+        'Monitor and analyze queries using the Query Insights Plugin, which ranks queries based on their resource utilization (CPU, JVM) and latencies',
       category: {
         id: 'opensearch',
         label: 'OpenSearch Plugins',
@@ -27,23 +43,31 @@ export class QueryInsightsDashboardsPlugin
         // Load application bundle
         const { renderApp } = await import('./application');
         // Get start services as specified in opensearch_dashboards.json
-        const [coreStart] = await core.getStartServices();
+        const [coreStart, depsStart] = await core.getStartServices();
         // Render the application
-        return renderApp(coreStart, params);
+        return renderApp(
+          coreStart,
+          depsStart as QueryInsightsDashboardsPluginStartDependencies,
+          params
+        );
       },
     });
 
-    // Return methods that should be available to other plugins
-    return {
-      getGreeting() {
-        return i18n.translate('queryInsightsDashboards.greetingText', {
-          defaultMessage: 'Hello from {name}!',
-          values: {
-            name: PLUGIN_NAME,
-          },
-        });
+    // Registration for new navigation
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.dataAdministration, [
+      {
+        id: PLUGIN_NAME,
+        category: {
+          id: 'performance',
+          label: 'Performance',
+          order: 9000,
+          euiIconType: 'managementApp',
+        },
+        order: 200,
       },
-    };
+    ]);
+
+    return {};
   }
 
   public start(_core: CoreStart): QueryInsightsDashboardsPluginStart {

public/types.ts

@@ -5,11 +5,11 @@
 
 import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
 
-export interface QueryInsightsDashboardsPluginSetup {
-  getGreeting: () => string;
-}
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+/* eslint-disable @typescript-eslint/no-empty-interface */
+export interface QueryInsightsDashboardsPluginSetup {}
 export interface QueryInsightsDashboardsPluginStart {}
+export interface QueryInsightsDashboardsPluginStartDependencies {}
+/* eslint-enable @typescript-eslint/no-empty-interface */
 
 export interface MetricSettingsResponse {
   enabled?: string; // Could be 'true' or 'false'