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": "2.14.0",
   "server": true,
   "ui": true,
   "requiredPlugins": ["navigation"],

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "yarn plugin-helpers build",
     "plugin-helpers": "../../scripts/use_node ../../scripts/plugin_helpers",
-    "osd": "../../scripts/use_node ../../scripts/osd"
+    "osd": "../../scripts/use_node ../../scripts/osd",
+    "lint": "node ../../scripts/eslint ."
   }
 }

public/application.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { QueryInsightsDashboardsApp } from './components/app';
+import { HashRouter as Router, Route } from 'react-router-dom';
+
+export const renderApp = (
+  coreStart,
+  { navigation },
+  { appBasePath, element }
+) => {
+  coreStart.chrome.setBreadcrumbs([{text: 'Query insights'}]);
+  ReactDOM.render(
+    <Router>
+      <QueryInsightsDashboardsApp
+        basename={appBasePath}
+        notifications={coreStart.notifications}
+        http={coreStart.http}
+        navigation={navigation}
+      />
+    </Router>
+    , element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

public/components/app.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import TopNQueries from '../pages/TopNQueries/TopNQueries'
+
+export const QueryInsightsDashboardsApp = ({props}) => {
+  return (
+    <Route
+      render={(props) => (
+        <TopNQueries
+         {...props}
+        />
+      )}
+    />
+  );
+};

public/pages/QueryInsights/QueryInsights.js

@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from 'react';
+import dateMath from '@elastic/datemath';
+import { EuiSuperDatePicker, EuiInMemoryTable } from '@elastic/eui';
+
+const QueryInsights = () => {
+  const convertTime = (unixTime) => {
+    const date = new Date(unixTime);
+    const loc = date.toDateString().split(' ');
+    return loc[1] + ' ' + loc[2] + ', ' + loc[3] + ' @ ' + date.toLocaleTimeString('en-US');
+  };
+
+  const cols = [
+    {
+      field: 'timestamp',
+      name: 'Time stamp',
+      render: (timestamp) => convertTime(timestamp),
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'latency',
+      name: 'Latency',
+      render: (latency) => `${latency} ms`,
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'cpu',
+      name: 'CPU usage',
+      render: (cpu) => `${cpu} ns`,
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'memory',
+      name: 'Memory',
+      render: (memory) => `${memory} B`,
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'indices',
+      name: 'Indices',
+      render: (indices) => indices.toString(),
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'search_type',
+      name: 'Search type',
+      render: (searchType) => searchType.replaceAll('_', ' '),
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'node_id',
+      name: 'Coordinator node ID',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'total_shards',
+      name: 'Total shards',
+      sortable: true,
+      truncateText: true,
+    },
+  ];
+
+  const sorting = {
+    sort: {
+      field: 'timestamp',
+      direction: 'desc',
+    },
+  };
+
+  const retrievedQueries = [];
+  const [queries, setQueries] = useState(retrievedQueries);
+
+  const defaultStart = 'now-24h';
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState([
+    { start: defaultStart, end: 'now' },
+  ]);
+  const [loading] = useState(false);
+  const [currStart, setStart] = useState(defaultStart);
+  const [currEnd, setEnd] = useState('now');
+
+  const parseDateString = (dateString) => {
+    const date = dateMath.parse(dateString);
+    return date ? date.toDate().getTime() : new Date().getTime();
+  };
+
+  const updateQueries = ({ start, end }) => {
+    const startTimestamp = parseDateString(start);
+    const endTimestamp = parseDateString(end);
+    setQueries(
+      retrievedQueries.filter(
+        (item) => item.timestamp >= startTimestamp && item.timestamp <= endTimestamp
+      )
+    );
+  };
+
+  const onTimeChange = ({ start, end }) => {
+    const usedRange = recentlyUsedRanges.filter(
+      (range) => !(range.start === start && range.end === end)
+    );
+    usedRange.unshift({ start, end });
+    setStart(start);
+    setEnd(end);
+    setRecentlyUsedRanges(usedRange.length > 10 ? usedRange.slice(0, 9) : usedRange);
+    updateQueries({ start, end });
+  };
+
+  const onRefresh = async ({ start, end }) => {
+    updateQueries({ start, end });
+  };
+
+  useEffect(
+    () => {
+      onRefresh({ start: currStart, end: currEnd });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const searchTopNQueries = () => {
+    return {
+      box: {
+        placeholder: 'Search queries',
+        schema: false,
+      },
+      toolsRight: [
+        <EuiSuperDatePicker
+          start={currStart}
+          end={currEnd}
+          recentlyUsedRanges={recentlyUsedRanges}
+          isLoading={loading}
+          onTimeChange={onTimeChange}
+          onRefresh={onRefresh}
+          updateButtonProps={{ fill: false }}
+        />,
+      ],
+    };
+  };
+
+  return (
+    <div>
+      <EuiInMemoryTable
+        items={queries}
+        columns={cols}
+        sorting={sorting}
+        loading={loading}
+        search={searchTopNQueries()}
+        executeQueryOptions={{
+          defaultFields: [
+            'timestamp',
+            'latency',
+            'cpu',
+            'memory',
+            'indices',
+            'search_type',
+            'node_id',
+            'total_shards',
+          ],
+        }}
+        allowNeutralSort={false}
+      />
+    </div>
+  );
+};
+
+export default QueryInsights;