+ return showActionsPanel ? (
+
+
+
+
+
+
+
{discoverLink && (
<>
-
-
-
-
-
-
= ({
))}
- );
+ ) : null;
};
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index.scss b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index.scss
deleted file mode 100644
index c9b1d78320aee4b..000000000000000
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'index_data_visualizer_view';
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index_data_visualizer_view.scss b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index_data_visualizer_view.scss
deleted file mode 100644
index 2a9488da966eabe..000000000000000
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index_data_visualizer_view.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.dataViewTitleHeader {
- min-width: 300px;
- padding: $euiSizeS 0;
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-@include euiBreakpoint('xs', 's', 'm', 'l') {
- .dataVisualizerPageHeader {
- flex-direction: column;
- align-items: flex-start;
- }
-}
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
index bb9095bc6f26981..238ceb960de3629 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
@@ -5,7 +5,7 @@
* 2.0.
*/
-import React, { FC, Fragment, useEffect, useMemo, useState, useCallback, useRef } from 'react';
+import React, { FC, useEffect, useMemo, useState, useCallback, useRef } from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
@@ -23,6 +23,7 @@ import { i18n } from '@kbn/i18n';
import { Filter, FilterStateStore, Query } from '@kbn/es-query';
import { generateFilters } from '@kbn/data-plugin/public';
import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
+import { useCurrentEuiTheme } from '../../../common/hooks/use_current_eui_theme';
import { DV_RANDOM_SAMPLER_PREFERENCE, useStorage } from '../../hooks/use_storage';
import { FullTimeRangeSelector } from '../full_time_range_selector';
import { usePageUrlState, useUrlState } from '../../../common/util/url_state';
@@ -46,14 +47,11 @@ import { kbnTypeToJobType } from '../../../common/util/field_types_utils';
import { SearchPanel } from '../search_panel';
import { ActionsPanel } from '../actions_panel';
import { DatePickerWrapper } from '../../../common/components/date_picker_wrapper';
-import { HelpMenu } from '../../../common/components/help_menu';
import { createMergedEsQuery } from '../../utils/saved_search_utils';
import { DataVisualizerDataViewManagement } from '../data_view_management';
import { GetAdditionalLinks } from '../../../common/components/results_links';
import { useDataVisualizerGridData } from '../../hooks/use_data_visualizer_grid_data';
import { DataVisualizerGridInput } from '../../embeddables/grid_embeddable/grid_embeddable';
-// TODO port to `@emotion/react` once `useEuiBreakpoint` is available https://github.com/elastic/eui/pull/6057
-import './_index.scss';
import { RANDOM_SAMPLER_OPTION, RandomSamplerOption } from '../../constants/random_sampler';
interface DataVisualizerPageState {
@@ -116,9 +114,12 @@ export interface IndexDataVisualizerViewProps {
currentSavedSearch: SavedSearchSavedObject | null;
currentSessionId?: string;
getAdditionalLinks?: GetAdditionalLinks;
+ compact?: boolean;
}
export const IndexDataVisualizerView: FC
= (dataVisualizerProps) => {
+ const euiTheme = useCurrentEuiTheme();
+
const [savedRandomSamplerPreference, saveRandomSamplerPreference] =
useStorage(
DV_RANDOM_SAMPLER_PREFERENCE,
@@ -136,7 +137,7 @@ export const IndexDataVisualizerView: FC = (dataVi
);
const { services } = useDataVisualizerKibana();
- const { docLinks, notifications, uiSettings, data } = services;
+ const { notifications, uiSettings, data } = services;
const { toasts } = notifications;
const [dataVisualizerListState, setDataVisualizerListState] = usePageUrlState(
@@ -149,7 +150,7 @@ export const IndexDataVisualizerView: FC = (dataVi
dataVisualizerProps.currentSavedSearch
);
- const { currentDataView, currentSessionId, getAdditionalLinks } = dataVisualizerProps;
+ const { currentDataView, currentSessionId, getAdditionalLinks, compact } = dataVisualizerProps;
useEffect(() => {
if (dataVisualizerProps?.currentSavedSearch !== undefined) {
@@ -200,7 +201,7 @@ export const IndexDataVisualizerView: FC = (dataVi
queryLanguage: SearchQueryLanguage;
filters: Filter[];
}) => {
- // When the user loads saved search and then clear or modify the query
+ // When the user loads saved search and then clears or modifies the query
// we should remove the saved search and replace it with the index pattern id
if (currentSavedSearch !== null) {
setCurrentSavedSearch(null);
@@ -217,12 +218,6 @@ export const IndexDataVisualizerView: FC = (dataVi
[currentSavedSearch, dataVisualizerListState, setDataVisualizerListState]
);
- const samplerShardSize =
- dataVisualizerListState.samplerShardSize ?? restorableDefaults.samplerShardSize;
- const setSamplerShardSize = (value: number) => {
- setDataVisualizerListState({ ...dataVisualizerListState, samplerShardSize: value });
- };
-
const visibleFieldTypes =
dataVisualizerListState.visibleFieldTypes ?? restorableDefaults.visibleFieldTypes;
const setVisibleFieldTypes = (values: string[]) => {
@@ -386,8 +381,6 @@ export const IndexDataVisualizerView: FC = (dataVi
]
);
- const wizardPanelWidth = '280px';
-
const fieldsCountStats: TotalFieldsStats | undefined = useMemo(() => {
let _visibleFieldsCount = 0;
let _totalFieldsCount = 0;
@@ -454,131 +447,136 @@ export const IndexDataVisualizerView: FC = (dataVi
() => currentDataView.timeFieldName !== undefined && currentDataView.timeFieldName !== '',
[currentDataView.timeFieldName]
);
- const helpLink = docLinks.links.ml.guide;
-
return (
-
-
-
-
-
-
-
-
- {currentDataView.getName()}
-
-
-
-
-
+
+
+
+
+
- {hasValidTimeField ? (
-
-
-
- ) : null}
+
+ {currentDataView.getName()}
+
+
+
+
+
+ {compact ? : null}
+
+ {hasValidTimeField ? (
-
-
-
-
-
-
-
-
-
-
-
+
-
- {overallStats?.totalCount !== undefined && (
- <>
-
-
-
-
-
- )}
-
-
-
-
-
- items={configs}
- pageState={dataVisualizerListState}
- updatePageState={setDataVisualizerListState}
- getItemIdToExpandedRowMap={getItemIdToExpandedRowMap}
- extendedColumns={extendedColumns}
- loading={progress < 100}
- overallStatsRunning={overallStatsProgress.isRunning}
- showPreviewByDefault={dataVisualizerListState.showDistributions ?? true}
- onChange={setDataVisualizerListState}
- totalCount={overallStats.totalCount}
- />
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+ {overallStats?.totalCount !== undefined && (
+ <>
+
+
+
+
+
+ )}
+
+
+
+
+
+ items={configs}
+ pageState={dataVisualizerListState}
+ updatePageState={setDataVisualizerListState}
+ getItemIdToExpandedRowMap={getItemIdToExpandedRowMap}
+ extendedColumns={extendedColumns}
+ loading={progress < 100}
+ overallStatsRunning={overallStatsProgress.isRunning}
+ showPreviewByDefault={dataVisualizerListState.showDistributions ?? true}
+ onChange={setDataVisualizerListState}
+ totalCount={overallStats.totalCount}
+ />
+
+
+ {compact ? : null}
+
+
+
+
+
+
);
};
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx
index f438780e8dbe406..697aecf2bb2f6a6 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx
@@ -8,6 +8,8 @@
import React, { FC, useMemo } from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+import { useCurrentEuiTheme } from '../../../common/hooks/use_current_eui_theme';
import { FieldTypesHelpPopover } from '../../../common/components/field_types_filter/field_types_help_popover';
import type { SupportedFieldType } from '../../../../../common/types';
import { FieldTypeIcon } from '../../../common/components/field_type_icon';
@@ -19,6 +21,7 @@ export const DataVisualizerFieldTypeFilter: FC<{
setVisibleFieldTypes(q: string[]): void;
visibleFieldTypes: string[];
}> = ({ indexedFieldTypes, setVisibleFieldTypes, visibleFieldTypes }) => {
+ const euiTheme = useCurrentEuiTheme();
const options: Option[] = useMemo(() => {
return indexedFieldTypes.map((indexedFieldName) => {
const label = jobTypeLabels[indexedFieldName] ?? '';
@@ -55,6 +58,11 @@ export const DataVisualizerFieldTypeFilter: FC<{
checkedOptions={visibleFieldTypes}
dataTestSubj={'dataVisualizerFieldTypeSelect'}
postfix={}
+ cssStyles={{
+ filterGroup: css`
+ margin-left: ${euiTheme.euiSizeS};
+ `,
+ }}
/>
);
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss
index 6b0624fae27576f..699e76a9c58fbd3 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss
@@ -1,6 +1,5 @@
.dvSearchPanel__controls {
flex-direction: row;
- padding: $euiSizeS;
}
.dvSearchPanel__container {
@@ -12,7 +11,7 @@
flex-direction: column;
}
.dvSearchBar {
- min-width: #{'max(100%, 500px)'};
+ min-width: #{'max(100%, 300px)'};
}
.dvSearchPanel__controls {
padding: 0;
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx
index 5b47bb820b9ab07..df11ab8dd5cd152 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx
@@ -6,12 +6,11 @@
*/
import React, { FC, useEffect, useState } from 'react';
-import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Query, Filter } from '@kbn/es-query';
import type { TimeRange } from '@kbn/es-query';
import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
-import { css } from '@emotion/react';
import { isDefined } from '../../../common/util/is_defined';
import { DataVisualizerFieldNamesFilter } from './field_name_filter';
import { DataVisualizerFieldTypeFilter } from './field_type_filter';
@@ -26,8 +25,6 @@ interface Props {
searchString: Query['query'];
searchQuery: Query['query'];
searchQueryLanguage: SearchQueryLanguage;
- samplerShardSize: number;
- setSamplerShardSize(s: number): void;
overallStats: OverallStats;
indexedFieldTypes: SupportedFieldType[];
setVisibleFieldTypes(q: string[]): void;
@@ -47,14 +44,13 @@ interface Props {
}): void;
showEmptyFields: boolean;
onAddFilter?: (field: DataViewField | string, value: string, type: '+' | '-') => void;
+ compact?: boolean;
}
export const SearchPanel: FC = ({
dataView,
searchString,
searchQueryLanguage,
- samplerShardSize,
- setSamplerShardSize,
overallStats,
indexedFieldTypes,
setVisibleFieldTypes,
@@ -63,6 +59,7 @@ export const SearchPanel: FC = ({
visibleFieldNames,
setSearchParams,
showEmptyFields,
+ compact,
}) => {
const {
services: {
@@ -120,7 +117,7 @@ export const SearchPanel: FC = ({
return (
= ({
/>
+ {compact ? : null}
;
getAdditionalLinks?: GetAdditionalLinks;
}
@@ -70,9 +71,10 @@ export const getLocatorParams = (params: {
return locatorParams;
};
-export const DataVisualizerUrlStateContextProvider: FC<
- DataVisualizerUrlStateContextProviderProps
-> = ({ IndexDataVisualizerComponent, getAdditionalLinks }) => {
+export const DataVisualizerStateContextProvider: FC = ({
+ IndexDataVisualizerComponent,
+ getAdditionalLinks,
+}) => {
const { services } = useDataVisualizerKibana();
const {
data: { dataViews, search },
@@ -240,15 +242,36 @@ export const DataVisualizerUrlStateContextProvider: FC<
[history, urlSearchString]
);
+ const [panelWidth, setPanelWidth] = useState(1600);
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const resizeHandler = useCallback(
+ throttle((e: { width: number; height: number }) => {
+ // When window or table is resized,
+ // update the page body width
+ setPanelWidth(e.width);
+ }, 500),
+ []
+ );
+ const compact = useMemo(() => panelWidth <= 1024, [panelWidth]);
+
return (
{currentDataView ? (
-
+ // Needs ResizeObserver to measure window width - side bar navigation
+
+ {(resizeRef) => (
+
+
+
+ )}
+
) : (
)}
@@ -293,7 +316,7 @@ export const IndexDataVisualizer: FC<{
return (
-
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts
index 7607dc30c81301d..f74a8800d2bd07e 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts
@@ -21,52 +21,6 @@ import type {
const MINIMUM_RANDOM_SAMPLER_DOC_COUNT = 100000;
const DEFAULT_INITIAL_RANDOM_SAMPLER_PROBABILITY = 0.000001;
-export const getDocumentCountStatsRequest = (params: OverallStatsSearchStrategyParams) => {
- const {
- index,
- timeFieldName,
- earliest: earliestMs,
- latest: latestMs,
- runtimeFieldMap,
- searchQuery,
- intervalMs,
- fieldsToFetch,
- } = params;
-
- const size = 0;
- const filterCriteria = buildBaseFilterCriteria(timeFieldName, earliestMs, latestMs, searchQuery);
-
- // Don't use the sampler aggregation as this can lead to some potentially
- // confusing date histogram results depending on the date range of data amongst shards.
- const aggs = {
- eventRate: {
- date_histogram: {
- field: timeFieldName,
- fixed_interval: `${intervalMs}ms`,
- min_doc_count: 1,
- },
- },
- };
-
- const searchBody = {
- query: {
- bool: {
- filter: filterCriteria,
- },
- },
- ...(!fieldsToFetch && timeFieldName !== undefined && intervalMs !== undefined && intervalMs > 0
- ? { aggs }
- : {}),
- ...(isPopulatedObject(runtimeFieldMap) ? { runtime_mappings: runtimeFieldMap } : {}),
- track_total_hits: true,
- size,
- };
- return {
- index,
- body: searchBody,
- };
-};
-
export const getDocumentCountStats = async (
search: DataPublicPluginStart['search'],
params: OverallStatsSearchStrategyParams,
@@ -104,7 +58,11 @@ export const getDocumentCountStats = async (
date_histogram: {
field: timeFieldName,
fixed_interval: `${intervalMs}ms`,
- min_doc_count: 1,
+ min_doc_count: 0,
+ extended_bounds: {
+ min: earliestMs,
+ max: latestMs,
+ },
},
},
};