Feature/visualization

package.json

@@ -10,7 +10,11 @@
     "node": "10.23.1",
     "yarn": "^1.22.10"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.6.1",
+    "plotly.js-dist": "^2.2.0",
+    "react-plotly.js": "^2.5.1"
+  },
   "devDependencies": {
     "cypress": "5.0.0"
   }

public/common/constants/explorer.ts

@@ -14,7 +14,17 @@ export const SELECTED_FIELDS = 'selectedFields';
 export const UNSELECTED_FIELDS = 'unselectedFields';
 export const TAB_ID_TXT_PFX = 'query-panel-';
 export const TAB_TITLE = 'New query';
-export const TAB_CHART_TITLE = 'Charts';
+export const TAB_CHART_TITLE = 'Visualizations';
 export const TAB_EVENT_TITLE = 'Events';
 export const TAB_EVENT_ID_TXT_PFX = 'main-content-events-';
-export const TAB_CHART_ID_TXT_PFX = 'main-content-charts-';
+export const TAB_CHART_ID_TXT_PFX = 'main-content-charts-';
+
+// redux
+export const SELECTED_QUERY_TAB = 'selectedQueryTab';
+export const QUERY_TAB_IDS = 'queryTabIds';
+export const NEW_SELECTED_QUERY_TAB = 'newSelectedQueryTab';
+export const REDUX_EXPL_SLICE_QUERIES = 'queries';
+export const REDUX_EXPL_SLICE_QUERY_RESULT = 'queryResults';
+export const REDUX_EXPL_SLICE_FIELDS = 'fields';
+export const REDUX_EXPL_SLICE_QUERY_TABS = 'queryTabs';
+

public/common/types/explorer.ts

@@ -49,18 +49,12 @@ export interface IExplorerTabFields {
 
 export interface IExplorerFields {
   [SELECTED_FIELDS]: Array<IField>;
-  [UNSELECTED_FIELDS]: Array<IField>
+  [UNSELECTED_FIELDS]: Array<IField>;
 }
 
 export interface IExplorerProps {
   tabId: string;
-  query: any;
-  explorerData: any;
-  explorerFields: any;
-  setSearchQuery: (query: string, tabId: string) => void;
-  querySearch: (tabId: string) => void;
-  addField: (field: IField, tabId: string) => void;
-  removeField: (field: IField, tabId: string) => void
+  pplService: any;
 }
 
 export interface LogExplorer {

public/components/app.tsx

@@ -9,10 +9,12 @@
  * GitHub history for details.
  */
 
-import  React, { useState, useRef } from 'react';
+import  React from 'react';
+import { Provider } from 'react-redux';
 import _ from 'lodash';
 import { I18nProvider } from '@osd/i18n/react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+import store from '../framework/redux/store';
 import { CoreStart } from '../../../../src/core/public';
 import { renderPageWithSidebar } from './common/side_nav';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
@@ -21,137 +23,95 @@ import { Home as OperationalPanelsHome} from './operational_panels/home';
 import { Home as EventExplorerHome } from './explorer/home';
 import { LogExplorer } from './explorer/logExplorer';
 import { observabilityTitle  } from '../../common';
-import {
-  ITabQueryResults,
-  ITabQueries,
-  IExplorerTabFields
-} from '../common/types/explorer';
-import {
-  TAB_ID_TXT_PFX,
-  RAW_QUERY,
-  SELECTED_FIELDS,
-  UNSELECTED_FIELDS
-} from '../common/constants/explorer';
 
 interface ObservabilityAppDeps {
   CoreStart: CoreStart;
+  pplService: any
 }
 
 export const App = ({
-  CoreStart
+  CoreStart,
+  pplService,
 }: ObservabilityAppDeps) => {
 
   const { chrome, http } = CoreStart;
-
-  // event explorer states
-  const initialTabId: string = getTabId(TAB_ID_TXT_PFX);
-  const [tabIds, setTabIds] = useState<Array<string>>([initialTabId]);
-  const [queries, setQueries] = useState<ITabQueries>({
-    [initialTabId]: {
-      [RAW_QUERY]: ''
-    }
-  });
-  const [queryResults, setQueryResults] = useState<ITabQueryResults>({
-    [initialTabId]: {}
-  });
-  const [fields, setFields] = useState<IExplorerTabFields>({
-    [initialTabId]: {
-      [SELECTED_FIELDS]: [],
-      [UNSELECTED_FIELDS]: []
-    }
-  });
-  const curQueriesRef = useRef(queries);
-  const [curSelectedTabId, setCurSelectedTab] = useState<string>(initialTabId);
-
-  function getTabId (prefix: string) {
-    return _.uniqueId(prefix);
-  }
-
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: 'observability#/'
   };
 
   return (
-    <HashRouter>
-      <I18nProvider>
-        <>
-          <Switch>
-            <Route 
-              exact
-              path={['/', '/application_analytics', '/application_analytics/home']}
-              render={(props) => {
-                chrome.setBreadcrumbs([
-                  parentBreadcrumb,
-                  {
-                    text: 'Application analytics',
-                    href: '#/application_analytics'
-                  },
-                ]);
-                return renderPageWithSidebar(<ApplicationAnalyticsHome />, 1);
-              } }
-            />
-            <Route
-              path={['/trace_analytics', '/trace_analytics/home']}
-              render={(props) => {
-                chrome.setBreadcrumbs([
-                  parentBreadcrumb,
-                  {
-                    text: 'Trace analytics',
-                    href: '#/trace_analytics/home'
-                  },
-                ]);
-                return renderPageWithSidebar(<TraceAnalyticsHome />, 2) }
-              }
-            />
-            <Route 
-              exact
-              path={['/event/', '/event/home']}
-              render={(props) => {
-                chrome.setBreadcrumbs([
-                  parentBreadcrumb,
-                  {
-                    text: 'Event analytics',
-                    href: '#/event/home'
-                  },
-                ]);
-                return renderPageWithSidebar(<EventExplorerHome />, 3);
-              } }
-            />
-            <Route
-              path={['/operational_panels', '/operational_panels/home']}
-              render={(props) => {
-                chrome.setBreadcrumbs([
-                  parentBreadcrumb,
-                  {
-                    text: 'Operational panels',
-                    href: '#/operational_panels/home'
-                  },
-                ]);
-                return renderPageWithSidebar(<OperationalPanelsHome />, 4);
-              } }
-            />
-            <Route 
-              exact
-              path='/event/explorer'
-              render={(props) => <LogExplorer
-                http={ http }
-                tabIds={ tabIds }
-                queries={ queries }
-                queryResults={ queryResults }
-                fields={ fields }
-                curQueriesRef={ curQueriesRef }
-                curSelectedTabId={ curSelectedTabId }
-                setTabIds={ setTabIds }
-                setQueries={ setQueries }
-                setQueryResults={ setQueryResults }
-                setFields={ setFields }
-                setCurSelectedTab={ setCurSelectedTab }
-              /> }
-            />
-          </Switch>
-        </>
-      </I18nProvider>
-    </HashRouter>
+    <Provider store={ store }>
+      <HashRouter>
+        <I18nProvider>
+          <>
+            <Switch>
+              <Route 
+                exact
+                path={['/', '/application_analytics', '/application_analytics/home']}
+                render={(props) => {
+                  chrome.setBreadcrumbs([
+                    parentBreadcrumb,
+                    {
+                      text: 'Application analytics',
+                      href: '#/application_analytics'
+                    },
+                  ]);
+                  return renderPageWithSidebar(<ApplicationAnalyticsHome />, 1);
+                } }
+              />
+              <Route
+                path={['/trace_analytics', '/trace_analytics/home']}
+                render={(props) => {
+                  chrome.setBreadcrumbs([
+                    parentBreadcrumb,
+                    {
+                      text: 'Trace analytics',
+                      href: '#/trace_analytics/home'
+                    },
+                  ]);
+                  return renderPageWithSidebar(<TraceAnalyticsHome />, 2) }
+                }
+              />
+              <Route 
+                exact
+                path={['/event/', '/event/home']}
+                render={(props) => {
+                  chrome.setBreadcrumbs([
+                    parentBreadcrumb,
+                    {
+                      text: 'Event analytics',
+                      href: '#/event/home'
+                    },
+                  ]);
+                  return renderPageWithSidebar(<EventExplorerHome />, 3);
+                } }
+              />
+              <Route
+                path={['/operational_panels', '/operational_panels/home']}
+                render={(props) => {
+                  chrome.setBreadcrumbs([
+                    parentBreadcrumb,
+                    {
+                      text: 'Operational panels',
+                      href: '#/operational_panels/home'
+                    },
+                  ]);
+                  return renderPageWithSidebar(<OperationalPanelsHome />, 4);
+                } }
+              />
+              <Route 
+                exact
+                path='/event/explorer'
+                render={(props) => <LogExplorer
+                  http={ http }
+                  pplService={ pplService }
+                /> }
+              />
+            </Switch>
+          </>
+        </I18nProvider>
+      </HashRouter>
+    </Provider>
   );
 };

public/components/common/debounced_component/debounced_component.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
+import { debouncedComponent } from './debounced_component';
+import { act } from 'react-dom/test-utils';
+
+describe('debouncedComponent', () => {
+  test('immediately renders', () => {
+    const TestComponent = debouncedComponent(({ title }: { title: string }) => {
+      return <h1>{title}</h1>;
+    });
+    expect(mount(<TestComponent title="hoi" />).html()).toMatchInlineSnapshot(`"<h1>hoi</h1>"`);
+  });
+
+  test('debounces changes', async () => {
+    const TestComponent = debouncedComponent(({ title }: { title: string }) => {
+      return <h1>{title}</h1>;
+    }, 1);
+    const component = mount(<TestComponent title="there" />);
+    component.setProps({ title: 'yall' });
+    expect(component.text()).toEqual('there');
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 1));
+    });
+    expect(component.text()).toEqual('yall');
+  });
+});

public/components/common/debounced_component/debounced_component.tsx

@@ -0,0 +1,33 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React, { useState, useMemo, useEffect, memo, FunctionComponent } from 'react';
+import { debounce } from 'lodash';
+
+/**
+ * debouncedComponent wraps the specified React component, returning a component which
+ * only renders once there is a pause in props changes for at least `delay` milliseconds.
+ * During the debounce phase, it will return the previously rendered value.
+ */
+export function debouncedComponent<TProps>(component: FunctionComponent<TProps>, delay = 256) {
+  const MemoizedComponent = (memo(component) as unknown) as FunctionComponent<TProps>;
+
+  return (props: TProps) => {
+    const [cachedProps, setCachedProps] = useState(props);
+    const debouncePropsChange = useMemo(() => debounce(setCachedProps, delay), [setCachedProps]);
+
+    // cancel debounced prop change if component has been unmounted in the meantime
+    useEffect(() => () => debouncePropsChange.cancel(), [debouncePropsChange]);
+    debouncePropsChange(props);
+
+    return React.createElement(MemoizedComponent, cachedProps);
+  };
+}

public/components/common/debounced_component/index.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+export * from './debounced_component';

public/components/common/seach/queryBar.tsx

@@ -38,7 +38,6 @@ export function QueryBar(props: IQueryBarProps) {
         data-test-subj="search-bar-input-box"
         value={ query[RAW_QUERY] }
         onChange={(e) => {
-          console.log('changed value: ', e.target.value);
           handleQueryChange(e.target.value);
         }}
         onSearch={() => {

public/components/common/seach/search.tsx

@@ -82,6 +82,7 @@ export const Search = (props: any) => {
             actionItems.map((item) => {
               return (
                 <EuiFlexItem
+                  key={_.uniqueId('search-action-')}
                   className={ item.className ? item.className : "euiFlexItem--flexGrowZero"}
                 >
                   <EuiButton