Top n queries overview page

.gitignore

@@ -8,4 +8,5 @@ yarn-error.log
 .DS_Store
 /cypress/screenshots/
 /cypress/videos/
-target
+target
+.eslintcache

opensearch_dashboards.json

@@ -1,7 +1,7 @@
 {
   "id": "queryInsightsDashboards",
   "version": "1.0.0",
-  "opensearchDashboardsVersion": "opensearchDashboards",
+  "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
   "requiredPlugins": ["navigation"],

public/application.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { HashRouter as Router } from 'react-router-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
-import { AppPluginStartDependencies } from './types';
 import { QueryInsightsDashboardsApp } from './components/app';
 
-export const renderApp = (
-  { notifications, http }: CoreStart,
-  { navigation }: AppPluginStartDependencies,
-  { appBasePath, element }: AppMountParameters
-) => {
+export const renderApp = (core: CoreStart, { element }: AppMountParameters) => {
   ReactDOM.render(
-    <QueryInsightsDashboardsApp
-      basename={appBasePath}
-      notifications={notifications}
-      http={http}
-      navigation={navigation}
-    />,
+    <Router>
+      <QueryInsightsDashboardsApp core={core} />
+    </Router>,
     element
   );
 

public/components/app.test.tsx

@@ -6,6 +6,8 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
+import { coreMock } from '../../../../src/core/public/mocks';
+import { MemoryRouter as Router } from 'react-router-dom';
 import { QueryInsightsDashboardsApp } from './app';
 
 describe('<QueryInsightsDashboardsApp /> spec', () => {
@@ -15,18 +17,22 @@ describe('<QueryInsightsDashboardsApp /> spec', () => {
         serverBasePath: '/app/opensearch-dashboards',
       },
     };
+    const coreStart = coreMock.createStart();
 
     const { container } = render(
-      <QueryInsightsDashboardsApp
-        basename="/"
-        http={mockHttpStart as any}
-        navigation={
-          {
-            ui: { TopNavMenu: () => null },
-          } as any
-        }
-        notifications={{} as any}
-      />
+      <Router>
+        <QueryInsightsDashboardsApp
+          basename="/"
+          core={coreStart}
+          http={mockHttpStart as any}
+          navigation={
+            {
+              ui: { TopNavMenu: () => null },
+            } as any
+          }
+          notifications={{} as any}
+        />
+      </Router>
     );
     expect(container).toMatchSnapshot();
   });

public/components/app.tsx

@@ -1,119 +1,8 @@
-import React, { useState } from 'react';
-import { i18n } from '@osd/i18n';
-import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-import {
-  EuiButton,
-  EuiHorizontalRule,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageHeader,
-  EuiTitle,
-  EuiText,
-} from '@elastic/eui';
-
+import React from 'react';
+import { Route } from 'react-router-dom';
+import TopNQueries from '../pages/TopNQueries/TopNQueries';
 import { CoreStart } from '../../../../src/core/public';
-import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-
-import { PLUGIN_ID, PLUGIN_NAME } from '../../common';
-
-interface QueryInsightsDashboardsAppDeps {
-  basename: string;
-  notifications: CoreStart['notifications'];
-  http: CoreStart['http'];
-  navigation: NavigationPublicPluginStart;
-}
-
-export const QueryInsightsDashboardsApp = ({
-  basename,
-  notifications,
-  http,
-  navigation,
-}: QueryInsightsDashboardsAppDeps) => {
-  // Use React hooks to manage state.
-  const [timestamp, setTimestamp] = useState<string | undefined>();
-
-  const onClickHandler = () => {
-    // Use the core http service to make a response to the server API.
-    http.get('/api/query_insights_dashboards/example').then((res) => {
-      setTimestamp(res.time);
-      // Use the core notifications service to display a success message.
-      notifications.toasts.addSuccess(
-        i18n.translate('queryInsightsDashboards.dataUpdated', {
-          defaultMessage: 'Data updated',
-        })
-      );
-    });
-  };
 
-  // Render the application DOM.
-  // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract.
-  return (
-    <Router basename={basename}>
-      <I18nProvider>
-        <>
-          <navigation.ui.TopNavMenu
-            appName={PLUGIN_ID}
-            showSearchBar={true}
-            useDefaultBehaviors={true}
-          />
-          <EuiPage restrictWidth="1000px">
-            <EuiPageBody component="main">
-              <EuiPageHeader>
-                <EuiTitle size="l">
-                  <h1>
-                    <FormattedMessage
-                      id="queryInsightsDashboards.helloWorldText"
-                      defaultMessage="{name}"
-                      values={{ name: PLUGIN_NAME }}
-                    />
-                  </h1>
-                </EuiTitle>
-              </EuiPageHeader>
-              <EuiPageContent>
-                <EuiPageContentHeader>
-                  <EuiTitle>
-                    <h2>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.congratulationsTitle"
-                        defaultMessage="Congratulations, you have successfully created a new OpenSearch Dashboards Plugin!"
-                      />
-                    </h2>
-                  </EuiTitle>
-                </EuiPageContentHeader>
-                <EuiPageContentBody>
-                  <EuiText>
-                    <p>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.content"
-                        defaultMessage="Look through the generated code and check out the plugin development documentation."
-                      />
-                    </p>
-                    <EuiHorizontalRule />
-                    <p>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.timestampText"
-                        defaultMessage="Last timestamp: {time}"
-                        values={{ time: timestamp ? timestamp : 'Unknown' }}
-                      />
-                    </p>
-                    <EuiButton type="primary" size="s" onClick={onClickHandler}>
-                      <FormattedMessage
-                        id="queryInsightsDashboards.buttonText"
-                        defaultMessage="Get data"
-                      />
-                    </EuiButton>
-                  </EuiText>
-                </EuiPageContentBody>
-              </EuiPageContent>
-            </EuiPageBody>
-          </EuiPage>
-        </>
-      </I18nProvider>
-    </Router>
-  );
+export const QueryInsightsDashboardsApp = ({ core }: { core: CoreStart }) => {
+  return <Route render={() => <TopNQueries core={core} />} />;
 };