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

* markdown doesnt care if there's data Signed-off-by: Eric Wei <[email protected]> * empty query issue Signed-off-by: Eric Wei <[email protected]> * remove duplicate styles Signed-off-by: Eric Wei <[email protected]> * hide config panel for markdown Signed-off-by: Eric Wei <[email protected]> * fix panel infinite calls Signed-off-by: Eric Wei <[email protected]> * hide availability for event analytics Signed-off-by: Eric Wei <[email protected]> * remove error message from search Signed-off-by: Eric Wei <[email protected]> * fix tab issue with linting fix Signed-off-by: Eric Wei <[email protected]> * remove side group button Signed-off-by: Eric Wei <[email protected]> * lift data validation to vis container for linting issue Signed-off-by: Eric Wei <[email protected]> * update snapshots and minor changes Signed-off-by: Eric Wei <[email protected]> --------- Signed-off-by: Eric Wei <[email protected]> (cherry picked from commit df92519)
mengweieric · Feb 21, 2023 · 1c4bc10 · 1c4bc10
1 parent ce4e742
commit 1c4bc10
Show file tree

Hide file tree

Showing 26 changed files with 648 additions and 957 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;
@@ -256,19 +255,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,17 +410,15 @@ 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"
-                data-click-metric-element="event_analytics.events_view.toggle_details"
                 iconType="arrowRight"
                 onClick={[Function]}
               >
                 <button
                   className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                  data-click-metric-element="event_analytics.events_view.toggle_details"
                   disabled={false}
                   onClick={[Function]}
                   type="button"
@@ -489,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 [
@@ -604,7 +602,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
               "unselectedFields": Array [],
             }
           }
-          key="doc_view13"
+          key="doc_view12"
           onFlyoutOpen={[Function]}
           selectedCols={
             Array [
@@ -640,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"
@@ -69,7 +69,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/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;