[Bug Bash Fixes][Event Analytics] some fixes (#248)

* markdown doesnt care if there's data Signed-off-by: Eric Wei <menwe@amazon.com> * empty query issue Signed-off-by: Eric Wei <menwe@amazon.com> * remove duplicate styles Signed-off-by: Eric Wei <menwe@amazon.com> * hide config panel for markdown Signed-off-by: Eric Wei <menwe@amazon.com> * fix panel infinite calls Signed-off-by: Eric Wei <menwe@amazon.com> * hide availability for event analytics Signed-off-by: Eric Wei <menwe@amazon.com> * remove error message from search Signed-off-by: Eric Wei <menwe@amazon.com> * fix tab issue with linting fix Signed-off-by: Eric Wei <menwe@amazon.com> * remove side group button Signed-off-by: Eric Wei <menwe@amazon.com> * lift data validation to vis container for linting issue Signed-off-by: Eric Wei <menwe@amazon.com> * update snapshots and minor changes Signed-off-by: Eric Wei <menwe@amazon.com> --------- Signed-off-by: Eric Wei <menwe@amazon.com>
opensearch-project · Feb 7, 2023 · df92519 · df92519
1 parent d9793e1
commit df92519
Show file tree

Hide file tree

Showing 27 changed files with 650 additions and 970 deletions.
diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
@@ -23,7 +23,7 @@ export const SELECTED_FIELDS = 'selectedFields';
 export const UNSELECTED_FIELDS = 'unselectedFields';
 export const AVAILABLE_FIELDS = 'availableFields';
 export const QUERIED_FIELDS = 'queriedFields';
-export const TAB_ID_TXT_PFX = 'query-panel-';
+export const TAB_ID_TXT_PFX = 'explorer-tab-';
 export const TAB_TITLE = 'New query';
 export const TAB_CHART_TITLE = 'Visualizations';
 export const TAB_EVENT_TITLE = 'Events';
@@ -299,4 +299,4 @@ export const UNITS_OF_MEASURE = [
  'farenheit (F)',
  'meters (m)',
  'kilometers (k)',
-]
+];
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -192,3 +192,8 @@ export const PLOT_MARGIN = {
 };
 
 export const WAITING_TIME_ON_USER_ACTIONS = 300;
+
+export const VISUALIZATION_ERROR = {
+ NO_DATA: 'No data found.',
+ INVALID_DATA: 'Invalid visualization data',
+};
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
@@ -83,7 +83,6 @@ export const Search = (props: any) => {
  stopLive,
  setIsLiveTailPopoverOpen,
  liveTailName,
- searchError = null,
  curVisId,
  setSubType,
  } = props;
@@ -255,19 +254,6 @@ export const Search = (props: any) => {
  </>
  )}
  </EuiFlexGroup>
- {searchError && searchError.error && (
- <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
- <EuiFlexItem>
- <EuiCallOut
- title={JSON.parse(searchError.message).error.reason}
- color="danger"
- iconType="alert"
- >
- <p>{JSON.parse(searchError.message).error.details}</p>
- </EuiCallOut>
- </EuiFlexItem>
- </EuiFlexGroup>
- )}
  {flyout}
  </div>
  );

diff --git a/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap b/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
@@ -192,35 +192,35 @@ exports[`Datagrid component Renders data grid component 1`] = `
  className="osdDocTableHeader"
  >
  <th
- key="datagrid-header-8"
+ key="datagrid-header-7"
  />
  <th
- key="datagrid-header-2"
+ key="datagrid-header-1"
  >
  double_per_ip_bytes
  </th>
  <th
- key="datagrid-header-3"
+ key="datagrid-header-2"
  >
  host
  </th>
  <th
- key="datagrid-header-4"
+ key="datagrid-header-3"
  >
  ip_count
  </th>
  <th
- key="datagrid-header-5"
+ key="datagrid-header-4"
  >
  per_ip_bytes
  </th>
  <th
- key="datagrid-header-6"
+ key="datagrid-header-5"
  >
  resp_code
  </th>
  <th
- key="datagrid-header-7"
+ key="datagrid-header-6"
  >
  sum_bytes
  </th>
@@ -259,7 +259,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
  "timestamp": "2021-05-24 00:00:00",
  }
  }
- docId="doc_view12"
+ docId="doc_view11"
  explorerFields={
  Object {
  "availableFields": Array [
@@ -374,7 +374,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
  "unselectedFields": Array [],
  }
  }
- key="doc_view12"
+ key="doc_view11"
  onFlyoutOpen={[Function]}
  selectedCols={
  Array [
@@ -410,7 +410,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
  >
  <td
  className="osdDocTableCell__toggleDetails"
- key="grid-td-14"
+ key="grid-td-13"
  >
  <EuiButtonIcon
  className="euiButtonIcon euiButtonIcon--text"
@@ -487,7 +487,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
  "timestamp": "2021-05-24 18:27:00",
  }
  }
- docId="doc_view13"
+ docId="doc_view12"
  explorerFields={
  Object {
  "availableFields": Array [
@@ -602,7 +602,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
  "unselectedFields": Array [],
  }
  }
- key="doc_view13"
+ key="doc_view12"
  onFlyoutOpen={[Function]}
  selectedCols={
  Array [
@@ -638,7 +638,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
  >
  <td
  className="osdDocTableCell__toggleDetails"
- key="grid-td-17"
+ key="grid-td-16"
  >
  <EuiButtonIcon
  className="euiButtonIcon euiButtonIcon--text"

diff --git a/...ts/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer.test.tsx.snap b/...ts/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiPanel>,
- "id": "doc_viewer_tab_2",
+ "id": "doc_viewer_tab_1",
  "name": "Table",
  }
  }
@@ -60,7 +60,7 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiPanel>,
- "id": "doc_viewer_tab_2",
+ "id": "doc_viewer_tab_1",
  "name": "Table",
  },
  Object {
@@ -82,7 +82,7 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiPanel>,
- "id": "doc_viewer_tab_3",
+ "id": "doc_viewer_tab_2",
  "name": "JSON",
  },
  Object {
@@ -104,7 +104,7 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiPanel>,
- "id": "doc_viewer_tab_4",
+ "id": "doc_viewer_tab_3",
  "name": <React.Fragment>
  <span>
  Traces
@@ -126,17 +126,17 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  >
  <EuiTab
  aria-controls="random_html_id"
- id="doc_viewer_tab_2"
+ id="doc_viewer_tab_1"
  isSelected={true}
- key="doc_viewer_tab_2"
+ key="doc_viewer_tab_1"
  onClick={[Function]}
  >
  <button
  aria-controls="random_html_id"
  aria-selected={true}
  className="euiTab euiTab-isSelected"
  disabled={false}
- id="doc_viewer_tab_2"
+ id="doc_viewer_tab_1"
  onClick={[Function]}
  role="tab"
  type="button"
@@ -150,17 +150,17 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  </EuiTab>
  <EuiTab
  aria-controls="random_html_id"
- id="doc_viewer_tab_3"
+ id="doc_viewer_tab_2"
  isSelected={false}
- key="doc_viewer_tab_3"
+ key="doc_viewer_tab_2"
  onClick={[Function]}
  >
  <button
  aria-controls="random_html_id"
  aria-selected={false}
  className="euiTab"
  disabled={false}
- id="doc_viewer_tab_3"
+ id="doc_viewer_tab_2"
  onClick={[Function]}
  role="tab"
  type="button"
@@ -174,17 +174,17 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  </EuiTab>
  <EuiTab
  aria-controls="random_html_id"
- id="doc_viewer_tab_4"
+ id="doc_viewer_tab_3"
  isSelected={false}
- key="doc_viewer_tab_4"
+ key="doc_viewer_tab_3"
  onClick={[Function]}
  >
  <button
  aria-controls="random_html_id"
  aria-selected={false}
  className="euiTab"
  disabled={false}
- id="doc_viewer_tab_4"
+ id="doc_viewer_tab_3"
  onClick={[Function]}
  role="tab"
  type="button"
@@ -201,7 +201,7 @@ exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
  </div>
  </EuiTabs>
  <div
- aria-labelledby="doc_viewer_tab_2"
+ aria-labelledby="doc_viewer_tab_1"
  id="random_html_id"
  role="tabpanel"
  >

diff --git a/...vent_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap b/...vent_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`]
  >
  <td
  className="osdDocTableCell__toggleDetails"
- key="grid-td-3"
+ key="grid-td-2"
  >
  <EuiButtonIcon
  className="euiButtonIcon euiButtonIcon--text"
@@ -67,7 +67,7 @@ exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`]
  </td>
  <td
  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
- key="datagrid-cell-2"
+ key="datagrid-cell-1"
  >
  45.957544288332315
  </td>

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -1503,7 +1503,6 @@ export const Explorer = ({
  stopLive={stopLive}
  setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen}
  liveTailName={liveTailNameRef.current}
- searchError={explorerVisualizations}
  curVisId={curVisId}
  setSubType={setSubType}
  />

diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -5,10 +5,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useDispatch, useSelector, batch } from 'react-redux';
-import { uniqueId, map, isEmpty } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { map, isEmpty } from 'lodash';
 import $ from 'jquery';
-import { EuiIcon, EuiText, EuiTabbedContentTab, EuiTabbedContent } from '@elastic/eui';
+import {
+ EuiIcon,
+ EuiText,
+ EuiTabbedContentTab,
+ EuiTabbedContent,
+ htmlIdGenerator,
+} from '@elastic/eui';
 import { Explorer } from './explorer';
 import { ILogExplorerProps } from '../../../../common/types/explorer';
 import {
@@ -110,7 +116,7 @@ export const LogExplorer = ({
 
  const addNewTab = async (where: string) => {
  // get a new tabId
- const tabId = uniqueId(TAB_ID_TXT_PFX);
+ const tabId = htmlIdGenerator(TAB_ID_TXT_PFX)();
 
  // create a new tab
  await initializeTabData(dispatch, tabId, where);

diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -61,7 +61,7 @@ export const SavePanel = ({
 
  useEffect(() => {
  getCustomPabnelList(savedObjects);
- });
+ }, []);
 
  const onToggleChange = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
  setChecked(e.target.checked);

diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.scss b/public/components/event_analytics/explorer/sidebar/sidebar.scss
@@ -103,10 +103,6 @@
 
 #vis__mainContent {
  .explorer__insights {
- min-height: 0;
- display: grid;
- grid-template-columns: 50% 50%;
- height: 100%;
  .explorerFieldSelector, .explorer__vizDataConfig {
  padding: $euiSizeS;
  overflow: auto;