[ML] Add Index data visualizer grid embeddable as extra view within D…

…iscover (elastic#107184) * [ML] Initial embed * [ML] Initial embed props * [ML] Add top nav link to data viz * Add visible fields * Add add data service to register links * Renames, refactor, use constants * Renames, refactor, use constants * Update tests and mocks * Embeddable * Update hook to update upon time udpate * Add filter support to query * Refactor filter utilities * Add filter support for embeddable * Fix saved search data undefined * Prototype aggregated view/document view switcher * Prototype flyout * Prototype save document view option in storage * Fix filter and query conflict with saved search * Minor styling edits * [ML] Initial embed * [ML] Initial embed props * Add embeddable 1 * Add visible fields * Embeddable 2 * Add filter support to query * Refactor filter utilities * Add filter support for embeddable * Fix saved search data undefined * Prototype aggregated view/document view switcher * Prototype flyout * Prototype save document view option in storage * Fix filter and query conflict with saved search * Minor styling edits * Fix missing code after conflicts * Remove dv locator and flyout * Make types happy * Fix types * Rename toggle option * Resolve conflicts * [ML] Reduce size of chart * [ML] Unbold name, switch icons of show distributions * [ML] Make size consistent * [ML] Make page size 25 * [ML] Switch to arrow right and down * [ML] Make legend font smaller * [ML] Add user setting * [ML] Add show preview by default setting * [ML] Match icon * Add panels around the subcontent * Add preference for aggregated vs doc * Fix types * Fix types, add constants for adv settings * Change to data view type * Temp fix for Kibana/EUI table overflow issue * Modify line height so text is not cut off, modify widths for varying screen sizes * Different width padders for different screens * Fix CI * Merge latest, move button to the right * Fix width for bar charts previews * Fix toggle buttons, fix maps * Delete unused file * Fix boolean styling * Change to enum, discover mode * Hide field stats * Hide field stats * Persist show mini preview/distribution settings * Remove window size, use size observer instead * Default to document view * Remove bold, switch icon * Set fixed width for top values, reduce font size in table * Fix custom url tests * Update width styling for panels * Fix missing flag for Discover sidebar, jest tests * Fix max width * Workaround for sorting * Fix import * Fix styling * Make height uniform, center alignment, fix map and keyword map not same size Move styling * Revert "Make height uniform, center alignment, fix map and keyword map not same size" This reverts commit 8fc42e2 * Revert "Make height uniform, center alignment, fix map and keyword map not same size" This reverts commit 8fc42e2 * Uniform height, left aligned, flex grid * Switch top values to have labels * Center content * Replace fixed widths with percentage * Fix table missing field types * Add dashboard embeddable and filter support * Fix file data viz styling and tests, lean up imports, remove hard coded pixels * Add search panel/kql filter bar * Temporarily fix scrolling * New kql filters for data visualizer * Set map height so it will fit the sampler shard size text * Use eui progress labels * Fix spacer * Add beta badge * Temporarily fix scrolling * Fix grow for Top Values for * [ML] Update functional tests to reflect new arrow icons * [ML] Add filter buttons and KQL bars * [ML] Update filter bar onChange behavior * [ML] Update top values filter onChange behavior * [ML] Update search filters when opening saved search * [ML] Clean up * [ML] Remove fit content for height * [ML] Fix boolean legend * [ML] Fix header section when browser width is small to large and when index pattern title is too large * [ML] Hide expander icon when dimension is xs or s & css fixes * [ML] Delete embeddables because they are not use * [ML] Rename view mode, refactor to separate hook, add error prompt if can't show, rename wrapper, clean up & fix tests * [ML] Make doc count 0 for empty fields, update t/f test * [ML] Add unit testing for search utils * Fix missing unsubscribe for embeddable output * Remove redundant onAddFilter for this PR, fix width * Rename Field Stats to Field stats to match convention * [ML] Fix expand all/collapse all behavior to override individual setting * [ML] Fix functional tests should be 0/0% * [ML] Fix docs content spacing, rename classnames, add filters to Discover, lens, and maps * [ML] Fix doc count for fields that exists but have no stats * [ML] Fix icon styling to match Discover but have text/keyword/histogram * [ML] Fix doc count for fields that exists but have no stats * [ML] Rename classnames to BEM style * Resolve latest changes * [ML] Add tests for data viz in Discover * Update tests & dashboard behavior to reflect new advanced settings * Update telemetry * Remove workaround after eui bump fix * Fix missing bool clause * Add login * Fix saved search attributes broken with latest changes * Update tests * Fix import * Match the no results found * Fix query util to return search source's results right away. Fix texts. * Rename old test suits to farequoteDataViewTestData Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
KOTungseth · Oct 21, 2021 · 6600f1a · 6600f1a
1 parent 7f83ec0
commit 6600f1a
Show file tree

Hide file tree

Showing 64 changed files with 2,469 additions and 474 deletions.
diff --git a/src/plugins/discover/common/index.ts b/src/plugins/discover/common/index.ts
@@ -19,5 +19,6 @@ export const DOC_TABLE_LEGACY = 'doc_table:legacy';
 export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';
 export const SEARCH_FIELDS_FROM_SOURCE = 'discover:searchFieldsFromSource';
 export const MAX_DOC_FIELDS_DISPLAYED = 'discover:maxDocFieldsDisplayed';
+export const SHOW_FIELD_STATISTICS = 'discover:showFieldStatistics';
 export const SHOW_MULTIFIELDS = 'discover:showMultiFields';
 export const SEARCH_EMBEDDABLE_TYPE = 'search';
diff --git a/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.test.tsx b/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.test.tsx
@@ -19,6 +19,7 @@ import { discoverServiceMock } from '../../../../../__mocks__/services';
 import { FetchStatus } from '../../../../types';
 import { Chart } from './point_series';
 import { DiscoverChart } from './discover_chart';
+import { VIEW_MODE } from '../view_mode_toggle';
 
 setHeaderActionMenuMounter(jest.fn());
 
@@ -94,6 +95,8 @@ function getProps(timefield?: string) {
     state: { columns: [] },
     stateContainer: {} as GetStateReturn,
     timefield,
+    viewMode: VIEW_MODE.DOCUMENT_LEVEL,
+    setDiscoverViewMode: jest.fn(),
   };
 }
 

diff --git a/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx b/src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx
@@ -23,6 +23,8 @@ import { DiscoverHistogram } from './histogram';
 import { DataCharts$, DataTotalHits$ } from '../../services/use_saved_search';
 import { DiscoverServices } from '../../../../../build_services';
 import { useChartPanels } from './use_chart_panels';
+import { VIEW_MODE, DocumentViewModeToggle } from '../view_mode_toggle';
+import { SHOW_FIELD_STATISTICS } from '../../../../../../common';
 
 const DiscoverHistogramMemoized = memo(DiscoverHistogram);
 export const CHART_HIDDEN_KEY = 'discover:chartHidden';
@@ -36,6 +38,8 @@ export function DiscoverChart({
   state,
   stateContainer,
   timefield,
+  viewMode,
+  setDiscoverViewMode,
 }: {
   resetSavedSearch: () => void;
   savedSearch: SavedSearch;
@@ -45,8 +49,11 @@ export function DiscoverChart({
   state: AppState;
   stateContainer: GetStateReturn;
   timefield?: string;
+  viewMode: VIEW_MODE;
+  setDiscoverViewMode: (viewMode: VIEW_MODE) => void;
 }) {
   const [showChartOptionsPopover, setShowChartOptionsPopover] = useState(false);
+  const showViewModeToggle = services.uiSettings.get(SHOW_FIELD_STATISTICS) ?? false;
 
   const { data, storage } = services;
 
@@ -108,6 +115,16 @@ export function DiscoverChart({
               onResetQuery={resetSavedSearch}
             />
           </EuiFlexItem>
+
+          {showViewModeToggle && (
+            <EuiFlexItem grow={false}>
+              <DocumentViewModeToggle
+                viewMode={viewMode}
+                setDiscoverViewMode={setDiscoverViewMode}
+              />
+            </EuiFlexItem>
+          )}
+
           {timefield && (
             <EuiFlexItem className="dscResultCount__toggle" grow={false}>
               <EuiPopover

diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.scss
@@ -4,6 +4,10 @@ discover-app {
   flex-grow: 1;
 }
 
+.dscAppWrapper {
+  overflow-y: hidden;
+}
+
 .dscPage {
   @include euiBreakpoint('m', 'l', 'xl') {
     @include kibanaFullBodyHeight();

diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx
@@ -6,9 +6,8 @@
  * Side Public License, v 1.
  */
 import './discover_layout.scss';
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  EuiSpacer,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,6 +16,7 @@ import {
   EuiPage,
   EuiPageBody,
   EuiPageContent,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -26,7 +26,7 @@ import { LoadingSpinner } from '../loading_spinner/loading_spinner';
 import { esFilters, IndexPatternField } from '../../../../../../../data/public';
 import { DiscoverSidebarResponsive } from '../sidebar';
 import { DiscoverLayoutProps } from './types';
-import { SEARCH_FIELDS_FROM_SOURCE } from '../../../../../../common';
+import { SEARCH_FIELDS_FROM_SOURCE, SHOW_FIELD_STATISTICS } from '../../../../../../common';
 import { popularizeField } from '../../../../helpers/popularize_field';
 import { DiscoverTopNav } from '../top_nav/discover_topnav';
 import { DocViewFilterFn, ElasticSearchHit } from '../../../../doc_views/doc_views_types';
@@ -43,6 +43,8 @@ import {
   SavedSearchURLConflictCallout,
   useSavedSearchAliasMatchRedirect,
 } from '../../../../../saved_searches';
+import { DiscoverDataVisualizerGrid } from '../../../../components/data_visualizer_grid';
+import { VIEW_MODE } from '../view_mode_toggle';
 
 /**
  * Local storage key for sidebar persistence state
@@ -52,6 +54,7 @@ export const SIDEBAR_CLOSED_KEY = 'discover:sidebarClosed';
 const SidebarMemoized = React.memo(DiscoverSidebarResponsive);
 const TopNavMemoized = React.memo(DiscoverTopNav);
 const DiscoverChartMemoized = React.memo(DiscoverChart);
+const DataVisualizerGridMemoized = React.memo(DiscoverDataVisualizerGrid);
 
 export function DiscoverLayout({
   indexPattern,
@@ -83,6 +86,19 @@ export function DiscoverLayout({
   const { main$, charts$, totalHits$ } = savedSearchData$;
   const [expandedDoc, setExpandedDoc] = useState<ElasticSearchHit | undefined>(undefined);
   const [inspectorSession, setInspectorSession] = useState<InspectorSession | undefined>(undefined);
+
+  const viewMode = useMemo(() => {
+    if (uiSettings.get(SHOW_FIELD_STATISTICS) !== true) return VIEW_MODE.DOCUMENT_LEVEL;
+    return state.viewMode ?? VIEW_MODE.DOCUMENT_LEVEL;
+  }, [uiSettings, state.viewMode]);
+
+  const setDiscoverViewMode = useCallback(
+    (mode: VIEW_MODE) => {
+      stateContainer.setAppState({ viewMode: mode });
+    },
+    [stateContainer]
+  );
+
   const fetchCounter = useRef<number>(0);
   const dataState: DataMainMsg = useDataState(main$);
 
@@ -213,6 +229,7 @@ export function DiscoverLayout({
               trackUiMetric={trackUiMetric}
               useNewFieldsApi={useNewFieldsApi}
               onEditRuntimeField={onEditRuntimeField}
+              viewMode={viewMode}
             />
           </EuiFlexItem>
           <EuiHideFor sizes={['xs', 's']}>
@@ -279,22 +296,36 @@ export function DiscoverLayout({
                       services={services}
                       stateContainer={stateContainer}
                       timefield={timeField}
+                      viewMode={viewMode}
+                      setDiscoverViewMode={setDiscoverViewMode}
                     />
                   </EuiFlexItem>
                   <EuiHorizontalRule margin="none" />
-
-                  <DiscoverDocuments
-                    documents$={savedSearchData$.documents$}
-                    expandedDoc={expandedDoc}
-                    indexPattern={indexPattern}
-                    navigateTo={navigateTo}
-                    onAddFilter={onAddFilter as DocViewFilterFn}
-                    savedSearch={savedSearch}
-                    services={services}
-                    setExpandedDoc={setExpandedDoc}
-                    state={state}
-                    stateContainer={stateContainer}
-                  />
+                  {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? (
+                    <DiscoverDocuments
+                      documents$={savedSearchData$.documents$}
+                      expandedDoc={expandedDoc}
+                      indexPattern={indexPattern}
+                      navigateTo={navigateTo}
+                      onAddFilter={onAddFilter as DocViewFilterFn}
+                      savedSearch={savedSearch}
+                      services={services}
+                      setExpandedDoc={setExpandedDoc}
+                      state={state}
+                      stateContainer={stateContainer}
+                    />
+                  ) : (
+                    <DataVisualizerGridMemoized
+                      savedSearch={savedSearch}
+                      services={services}
+                      indexPattern={indexPattern}
+                      query={state.query}
+                      filters={state.filters}
+                      columns={columns}
+                      stateContainer={stateContainer}
+                      onAddFilter={onAddFilter}
+                    />
+                  )}
                 </EuiFlexGroup>
               )}
             </EuiPageContent>

diff --git a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx
@@ -19,6 +19,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { UiCounterMetricType } from '@kbn/analytics';
@@ -251,6 +252,11 @@ export interface DiscoverFieldProps {
    * @param fieldName name of the field to delete
    */
   onDeleteField?: (fieldName: string) => void;
+
+  /**
+   * Optionally show or hide field stats in the popover
+   */
+  showFieldStats?: boolean;
 }
 
 function DiscoverFieldComponent({
@@ -266,6 +272,7 @@ function DiscoverFieldComponent({
   multiFields,
   onEditField,
   onDeleteField,
+  showFieldStats,
 }: DiscoverFieldProps) {
   const [infoIsOpen, setOpen] = useState(false);
 
@@ -362,22 +369,35 @@ function DiscoverFieldComponent({
     const details = getDetails(field);
     return (
       <>
-        <DiscoverFieldDetails
-          indexPattern={indexPattern}
-          field={field}
-          details={details}
-          onAddFilter={onAddFilter}
-        />
+        {showFieldStats && (
+          <>
+            <EuiTitle size="xxxs">
+              <h5>
+                {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
+                  defaultMessage: 'Top 5 values',
+                })}
+              </h5>
+            </EuiTitle>
+            <DiscoverFieldDetails
+              indexPattern={indexPattern}
+              field={field}
+              details={details}
+              onAddFilter={onAddFilter}
+            />
+          </>
+        )}
+
         {multiFields && (
           <>
-            <EuiSpacer size="m" />
+            {showFieldStats && <EuiSpacer size="m" />}
             <MultiFields
               multiFields={multiFields}
               alwaysShowActionButton={alwaysShowActionButton}
               toggleDisplay={toggleDisplay}
             />
           </>
         )}
+        {(showFieldStats || multiFields) && <EuiHorizontalRule margin="m" />}
         <DiscoverFieldVisualize
           field={field}
           indexPattern={indexPattern}
@@ -388,7 +408,6 @@ function DiscoverFieldComponent({
       </>
     );
   };
-
   return (
     <EuiPopover
       display="block"
@@ -418,13 +437,6 @@ function DiscoverFieldComponent({
       panelClassName="dscSidebarItem__fieldPopoverPanel"
     >
       {popoverTitle}
-      <EuiTitle size="xxxs">
-        <h5>
-          {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
-            defaultMessage: 'Top 5 values',
-          })}
-        </h5>
-      </EuiTitle>
       {infoIsOpen && renderPopover()}
     </EuiPopover>
   );

diff --git a/...ins/discover/public/application/apps/main/components/sidebar/discover_field_visualize.tsx b/...ins/discover/public/application/apps/main/components/sidebar/discover_field_visualize.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { EuiButton, EuiPopoverFooter } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
 import type { IndexPattern, IndexPatternField } from 'src/plugins/data/common';
@@ -46,21 +46,19 @@ export const DiscoverFieldVisualize: React.FC<Props> = React.memo(
     };
 
     return (
-      <EuiPopoverFooter>
-        {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
-        <EuiButton
-          fullWidth
-          size="s"
-          href={visualizeInfo.href}
-          onClick={handleVisualizeLinkClick}
-          data-test-subj={`fieldVisualize-${field.name}`}
-        >
-          <FormattedMessage
-            id="discover.fieldChooser.visualizeButton.label"
-            defaultMessage="Visualize"
-          />
-        </EuiButton>
-      </EuiPopoverFooter>
+      // eslint-disable-next-line @elastic/eui/href-or-on-click
+      <EuiButton
+        fullWidth
+        size="s"
+        href={visualizeInfo.href}
+        onClick={handleVisualizeLinkClick}
+        data-test-subj={`fieldVisualize-${field.name}`}
+      >
+        <FormattedMessage
+          id="discover.fieldChooser.visualizeButton.label"
+          defaultMessage="Visualize"
+        />
+      </EuiButton>
     );
   }
 );
diff --git a/...lugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.test.tsx b/...lugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.test.tsx
@@ -22,6 +22,7 @@ import { DiscoverSidebarComponent as DiscoverSidebar } from './discover_sidebar'
 import { ElasticSearchHit } from '../../../../doc_views/doc_views_types';
 import { discoverServiceMock as mockDiscoverServices } from '../../../../../__mocks__/services';
 import { stubLogstashIndexPattern } from '../../../../../../../data/common/stubs';
+import { VIEW_MODE } from '../view_mode_toggle';
 
 jest.mock('../../../../../kibana_services', () => ({
   getServices: () => mockDiscoverServices,
@@ -65,6 +66,7 @@ function getCompProps(): DiscoverSidebarProps {
     setFieldFilter: jest.fn(),
     onEditRuntimeField: jest.fn(),
     editField: jest.fn(),
+    viewMode: VIEW_MODE.DOCUMENT_LEVEL,
   };
 }