From 4df03eb10618d103d360e852d873c5e3e51feb60 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 14 Sep 2020 16:51:38 -0700 Subject: [PATCH 01/26] temporarily remove EuiResizableContainer --- .../application/components/discover.tsx | 296 +++++++++--------- .../components/sidebar/discover_sidebar.scss | 20 +- 2 files changed, 172 insertions(+), 144 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index ff64dc29109d5..715b12f887849 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -16,10 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import moment from 'moment'; import rison from 'rison-node'; -import { EuiResizableContainer } from '@elastic/eui'; +// import { EuiResizableContainer } from '@elastic/eui'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { EuiFlexItem, EuiFlexGroup, EuiButtonToggle } from '@elastic/eui'; import { HitsCounter } from './hits_counter'; @@ -37,6 +37,38 @@ import { DiscoverFetchError } from './fetch_error/fetch_error'; import './discover.scss'; import { esFilters } from '../../../../data/public'; +// Hook +function useWindowSize() { + // Initialize state with undefined width/height so server and client renders match + // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }); + + useEffect(() => { + // Handler to call on window resize + function handleResize() { + // Set window width/height to state + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + // Add event listener + window.addEventListener('resize', handleResize); + + // Call handler right away so state gets updated with initial window size + handleResize(); + + // Remove event listener on cleanup + return () => window.removeEventListener('resize', handleResize); + }, []); // Empty array ensures that effect is only run on mount + + return windowSize; +} + export function Discover({ addColumn, bucketInterval, @@ -85,6 +117,7 @@ export function Discover({ } const { TopNavMenu } = getServices().navigation.ui; const { savedSearch, filterManager } = opts; + const size = useWindowSize(); const getContextAppHref = (anchorId: string) => { const path = `#/context/${encodeURIComponent(indexPattern.id)}/${encodeURIComponent(anchorId)}`; @@ -126,151 +159,134 @@ export function Discover({ useDefaultBehaviors={true} />
- - {(EuiResizablePanel, EuiResizableButton) => ( - <> - - - + <> +
+ {size.width}px / {size.height}px +
+ - + <> + {resultState === 'none' && ( + + )} + {resultState === 'uninitialized' && } - - <> - {resultState === 'none' && ( - - )} - {resultState === 'uninitialized' && } + {resultState === 'loading' && ( + <> + {fetchError && } + {!fetchError && ( +
+ +
+ )} + + )} - {resultState === 'loading' && ( - <> - {fetchError && } - {!fetchError && ( -
- + {resultState === 'ready' && ( +
+
+ + + 0 ? hits : 0} + showResetButton={!!(savedSearch && savedSearch.id)} + onResetQuery={resetQuery} + /> + + + + + + { + toggleChart(e.target.checked); + }} + isSelected={toggleOn} + isEmpty + /> + + +
+ +
+ {opts.timefield && toggleOn && ( +
+ {vis && rows.length !== 0 && ( +
+
)} - +
)} - - {resultState === 'ready' && ( -
-
- - - 0 ? hits : 0} - showResetButton={!!(savedSearch && savedSearch.id)} - onResetQuery={resetQuery} - /> - - - - - - { - toggleChart(e.target.checked); - }} - isSelected={toggleOn} - isEmpty - /> - - +
+

+ +

+ {rows && rows.length && ( +
+
- -
- {opts.timefield && toggleOn && ( -
- {vis && rows.length !== 0 && ( -
- -
- )} -
- )} -
-

- -

- {rows && rows.length && ( -
- -
- )} -
-
-
- )} - - - - )} - + )} + +
+
+ )} + +
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index f6d4751e81438..2b0c55e696c11 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -12,10 +12,10 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; - overflow: hidden; + // overflow: hidden; } -.dscApp .dscSidebar__sectionStatic { +.dscApp .dscSidebar__sectionStatic { padding: 0 16px; } @@ -26,8 +26,20 @@ flex-grow: 1; overflow-x: hidden; scrollbar-width: thin; - -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); - mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); + -webkit-mask-image: linear-gradient( + to bottom, + rgba(255, 0, 0, 0.1) 0%, + red 7.5px, + red calc(100% - 7.5px), + rgba(255, 0, 0, 0.1) 100% + ); + mask-image: linear-gradient( + to bottom, + rgba(255, 0, 0, 0.1) 0%, + red 7.5px, + red calc(100% - 7.5px), + rgba(255, 0, 0, 0.1) 100% + ); height: 100%; overflow-y: auto; padding: 0 16px; From 760b84ab45516a5c0d13e336f2495d590cbb1f5c Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 14 Sep 2020 19:09:09 -0700 Subject: [PATCH 02/26] need to move button to the right section --- .../public/application/_discover.scss | 5 + .../application/components/discover.tsx | 81 ++++- .../sidebar/discover_mobile_flyout.tsx | 313 ++++++++++++++++++ .../sidebar/discover_sidebar_mobile.tsx | 144 ++++++++ .../application/components/sidebar/index.ts | 2 + 5 files changed, 529 insertions(+), 16 deletions(-) create mode 100644 src/plugins/discover/public/application/components/sidebar/discover_mobile_flyout.tsx create mode 100644 src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 10272ca748e32..142c604c34c07 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -31,6 +31,11 @@ discover-app { flex-grow: 1; display: flex; overflow: hidden; + @include euiBreakpoint('xs', 's') { + flex-wrap: wrap; + margin-left: 0; + margin-right: 0; + } } .dscApp__sidebar { diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index 715b12f887849..598dc309f2fa5 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -21,11 +21,21 @@ import moment from 'moment'; import rison from 'rison-node'; // import { EuiResizableContainer } from '@elastic/eui'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; -import { EuiFlexItem, EuiFlexGroup, EuiButtonToggle } from '@elastic/eui'; +import { + EuiFlexItem, + EuiFlexGroup, + EuiButton, + EuiButtonToggle, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, +} from '@elastic/eui'; import { HitsCounter } from './hits_counter'; import { DiscoverGrid } from './discover_grid/discover_grid'; import { TimechartHeader } from './timechart_header'; import { DiscoverSidebar } from './sidebar'; +import { DiscoverSidebarMobile } from './sidebar'; +import { DiscoverMobileFlyout } from './sidebar'; import { getServices } from '../../kibana_services'; // @ts-ignore @@ -118,6 +128,32 @@ export function Discover({ const { TopNavMenu } = getServices().navigation.ui; const { savedSearch, filterManager } = opts; const size = useWindowSize(); + const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); + + let flyout; + + if (isFlyoutVisible) { + flyout = ( + setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> + +

Field list

+ + + + + + ); + } const getContextAppHref = (anchorId: string) => { const path = `#/context/${encodeURIComponent(indexPattern.id)}/${encodeURIComponent(anchorId)}`; @@ -160,20 +196,32 @@ export function Discover({ />
<> -
- {size.width}px / {size.height}px -
- + {flyout} + {size && size.width > 575 ? ( + + ) : ( + + )} <> {resultState === 'none' && ( @@ -197,6 +245,8 @@ export function Discover({ {resultState === 'ready' && (
+ {size.width}px / {size.height}px + setIsFlyoutVisible(true)}>Fields
-
{opts.timefield && toggleOn && (
; + /** + * hits fetched from ES, displayed in the doc table + */ + hits: Array>; + /** + * List of available index patterns + */ + indexPatternList: Array>; + /** + * Callback function when selecting a field + */ + onAddField: (fieldName: string) => void; + /** + * Callback function when adding a filter from sidebar + */ + onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; + /** + * Callback function when removing a field + * @param fieldName + */ + onRemoveField: (fieldName: string) => void; + /** + * Currently selected index pattern + */ + selectedIndexPattern: IndexPattern; + /** + * Callback function to select another index pattern + */ + setIndexPattern: (id: string) => void; +} + +export function DiscoverMobileFlyout({ + columns, + fieldCounts, + hits, + indexPatternList, + onAddField, + onAddFilter, + onRemoveField, + selectedIndexPattern, + setIndexPattern, +}: DiscoverMobileFlyoutProps) { + const [showFields, setShowFields] = useState(false); + const [fields, setFields] = useState(null); + const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter()); + const services = useMemo(() => getServices(), []); + + useEffect(() => { + const newFields = getIndexPatternFieldList(selectedIndexPattern, fieldCounts); + setFields(newFields); + }, [selectedIndexPattern, fieldCounts, hits, services]); + + const onChangeFieldSearch = useCallback( + (field: string, value: string | boolean | undefined) => { + const newState = setFieldFilterProp(fieldFilterState, field, value); + setFieldFilterState(newState); + }, + [fieldFilterState] + ); + + const getDetailsByField = useCallback( + (ipField: IndexPatternField) => getDetails(ipField, hits, columns, selectedIndexPattern), + [hits, columns, selectedIndexPattern] + ); + + const popularLimit = services.uiSettings.get(FIELDS_LIMIT_SETTING); + const useShortDots = services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE); + + const { + selected: selectedFields, + popular: popularFields, + unpopular: unpopularFields, + } = useMemo(() => groupFields(fields, columns, popularLimit, fieldCounts, fieldFilterState), [ + fields, + columns, + popularLimit, + fieldCounts, + fieldFilterState, + ]); + + const fieldTypes = useMemo(() => { + const result = ['any']; + if (Array.isArray(fields)) { + for (const field of fields) { + if (result.indexOf(field.type) === -1) { + result.push(field.type); + } + } + } + return result; + }, [fields]); + + if (!selectedIndexPattern || !fields) { + return null; + } + + return ( + +
+
+ o.attributes.title)} + /> +
+
+ + +
+
+
+ {fields.length > 0 && ( + <> + +

+ +

+ + +
    + {selectedFields.map((field: IndexPatternField) => { + return ( +
  • + +
    • + ); + })} +
+
+ +

+ +

+ +
+ setShowFields(!showFields)} + aria-label={ + showFields + ? i18n.translate( + 'discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel', + { + defaultMessage: 'Hide fields', + } + ) + : i18n.translate( + 'discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel', + { + defaultMessage: 'Show fields', + } + ) + } + /> +
+
+ + )} + {popularFields.length > 0 && ( +
+ + + +
    + {popularFields.map((field: IndexPatternField) => { + return ( +
  • + +
    • + ); + })} +
+
+ )} + +
    + {unpopularFields.map((field: IndexPatternField) => { + return ( +
  • + +
    • + ); + })} +
+
+
+ + ); +} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx new file mode 100644 index 0000000000000..9afc3d86b94ea --- /dev/null +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx @@ -0,0 +1,144 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import './discover_sidebar.scss'; +import React, { useEffect, useState, useMemo, useCallback } from 'react'; +import { i18n } from '@kbn/i18n'; +import { sortBy } from 'lodash'; +import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; +import { DiscoverField } from './discover_field'; +import { DiscoverIndexPattern } from './discover_index_pattern'; +import { DiscoverFieldSearch } from './discover_field_search'; +import { IndexPatternAttributes } from '../../../../../data/common'; +import { SavedObject } from '../../../../../../core/types'; +import { FIELDS_LIMIT_SETTING } from '../../../../common'; +import { groupFields } from './lib/group_fields'; +import { IndexPatternField, IndexPattern, UI_SETTINGS } from '../../../../../data/public'; +import { getDetails } from './lib/get_details'; +import { getDefaultFieldFilter, setFieldFilterProp } from './lib/field_filter'; +import { getIndexPatternFieldList } from './lib/get_index_pattern_field_list'; +import { getServices } from '../../../kibana_services'; + +export interface DiscoverSidebarMobileProps { + /** + * the selected columns displayed in the doc table in discover + */ + columns: string[]; + /** + * a statistics of the distribution of fields in the given hits + */ + fieldCounts: Record; + /** + * hits fetched from ES, displayed in the doc table + */ + hits: Array>; + /** + * List of available index patterns + */ + indexPatternList: Array>; + /** + * Callback function when selecting a field + */ + onAddField: (fieldName: string) => void; + /** + * Callback function when adding a filter from sidebar + */ + onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; + /** + * Callback function when removing a field + * @param fieldName + */ + onRemoveField: (fieldName: string) => void; + /** + * Currently selected index pattern + */ + selectedIndexPattern: IndexPattern; + /** + * Callback function to select another index pattern + */ + setIndexPattern: (id: string) => void; +} + +export function DiscoverSidebarMobile({ + columns, + fieldCounts, + hits, + indexPatternList, + onAddField, + onAddFilter, + onRemoveField, + selectedIndexPattern, + setIndexPattern, +}: DiscoverSidebarMobileProps) { + const [fields, setFields] = useState(null); + const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter()); + const services = useMemo(() => getServices(), []); + + useEffect(() => { + const newFields = getIndexPatternFieldList(selectedIndexPattern, fieldCounts); + setFields(newFields); + }, [selectedIndexPattern, fieldCounts, hits, services]); + + const onChangeFieldSearch = useCallback( + (field: string, value: string | boolean | undefined) => { + const newState = setFieldFilterProp(fieldFilterState, field, value); + setFieldFilterState(newState); + }, + [fieldFilterState] + ); + + const popularLimit = services.uiSettings.get(FIELDS_LIMIT_SETTING); + + const { + selected: selectedFields, + popular: popularFields, + unpopular: unpopularFields, + } = useMemo(() => groupFields(fields, columns, popularLimit, fieldCounts, fieldFilterState), [ + fields, + columns, + popularLimit, + fieldCounts, + fieldFilterState, + ]); + + if (!selectedIndexPattern || !fields) { + return null; + } + + console.log(selectedFields, 'selectedFields'); + + return ( + +
+ {selectedFields.length} +
+ o.attributes.title)} + /> +
+
+ + ); +} diff --git a/src/plugins/discover/public/application/components/sidebar/index.ts b/src/plugins/discover/public/application/components/sidebar/index.ts index 1b837840b52f6..414ce56a6e4fd 100644 --- a/src/plugins/discover/public/application/components/sidebar/index.ts +++ b/src/plugins/discover/public/application/components/sidebar/index.ts @@ -18,4 +18,6 @@ */ export { DiscoverSidebar } from './discover_sidebar'; +export { DiscoverSidebarMobile } from './discover_sidebar_mobile'; +export { DiscoverMobileFlyout } from './discover_mobile_flyout'; export { createDiscoverSidebarDirective } from './discover_sidebar_directive'; From 39cb3b212de39b071dd79e8c7a732ef4d02fb395 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 16 Sep 2020 13:32:26 -0700 Subject: [PATCH 03/26] working on Fields mobile button --- .../application/components/discover.scss | 8 ++++ .../application/components/discover.tsx | 39 +++++++++++++------ .../sidebar/discover_sidebar_mobile.tsx | 1 - 3 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.scss b/src/plugins/discover/public/application/components/discover.scss index ec6a213694a4b..d7c54dbec8599 100644 --- a/src/plugins/discover/public/application/components/discover.scss +++ b/src/plugins/discover/public/application/components/discover.scss @@ -11,3 +11,11 @@ } } } + +.dscSidebar__mobile { + width: 100%; + padding: 0 $euiSize $euiSizeL $euiSize; + .dscSidebar__sectionStatic { + padding: 0; + } +} diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index 598dc309f2fa5..acd76921e82bd 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -22,6 +22,7 @@ import rison from 'rison-node'; // import { EuiResizableContainer } from '@elastic/eui'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { + EuiBadge, EuiFlexItem, EuiFlexGroup, EuiButton, @@ -29,6 +30,7 @@ import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, + EuiIcon, } from '@elastic/eui'; import { HitsCounter } from './hits_counter'; import { DiscoverGrid } from './discover_grid/discover_grid'; @@ -210,17 +212,31 @@ export function Discover({ setIndexPattern={setIndexPattern} /> ) : ( - +
+ + setIsFlyoutVisible(true)}> + + Fields + Selected + + 5 + + + 5 + + + +
)} <> @@ -246,7 +262,6 @@ export function Discover({ {resultState === 'ready' && (
{size.width}px / {size.height}px - setIsFlyoutVisible(true)}>Fields
- {selectedFields.length}
Date: Mon, 21 Sep 2020 00:02:48 -0700 Subject: [PATCH 04/26] improve Fields button in mobile --- .../public/application/_discover.scss | 4 +++ .../application/components/discover.scss | 12 ++++++- .../application/components/discover.tsx | 33 +++++++++++-------- .../components/sidebar/discover_field.tsx | 13 ++++++-- .../sidebar/discover_mobile_flyout.tsx | 5 ++- .../components/sidebar/discover_sidebar.scss | 4 +++ .../sidebar/discover_sidebar_mobile.tsx | 2 -- 7 files changed, 54 insertions(+), 19 deletions(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 142c604c34c07..f72bf9f0ed3d1 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -83,6 +83,10 @@ discover-app { display: flex; overflow: hidden; + @include euiBreakpoint('xs', 's') { + margin: $euiSizeS; + } + .kbn-table { margin-bottom: 0; } diff --git a/src/plugins/discover/public/application/components/discover.scss b/src/plugins/discover/public/application/components/discover.scss index d7c54dbec8599..a0a5e7884a3e6 100644 --- a/src/plugins/discover/public/application/components/discover.scss +++ b/src/plugins/discover/public/application/components/discover.scss @@ -14,8 +14,18 @@ .dscSidebar__mobile { width: 100%; - padding: 0 $euiSize $euiSizeL $euiSize; + padding: 0 $euiSizeS $euiSizeL $euiSizeS; .dscSidebar__sectionStatic { padding: 0; } + .dscSidebar__mobileButton { + justify-content: space-between; + } + .dscSidebar__mobileBadge { + margin-left: $euiSizeXS; + } +} + +.dscSidebarFlyout__header { + align-items: center; } diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index acd76921e82bd..070dfdd3d777d 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -30,7 +30,7 @@ import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, - EuiIcon, + EuiButtonIcon, } from '@elastic/eui'; import { HitsCounter } from './hits_counter'; import { DiscoverGrid } from './discover_grid/discover_grid'; @@ -138,7 +138,14 @@ export function Discover({ flyout = ( setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> -

Field list

+ + + setIsFlyoutVisible(false)} iconType="arrowLeft" /> + + +

Field list

+ + - setIsFlyoutVisible(true)}> - - Fields - Selected - - 5 - - - 5 - - + setIsFlyoutVisible(true)} + > + Fields + + 5 +
)} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx index bb330cba68e2e..7930c337e5ba3 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx @@ -61,6 +61,10 @@ export interface DiscoverFieldProps { * Determines whether the field name is shortened test.sub1.sub2 = t.s.sub2 */ useShortDots?: boolean; + /** + * Shows Add button at all times and not only on focus + */ + mobile?: boolean; } export function DiscoverField({ @@ -72,6 +76,7 @@ export function DiscoverField({ getDetails, selected, useShortDots, + mobile = false, }: DiscoverFieldProps) { const addLabelAria = i18n.translate('discover.fieldChooser.discoverField.addButtonAriaLabel', { defaultMessage: 'Add {field} to table', @@ -131,7 +136,9 @@ export function DiscoverField({ > ) => { if (ev.type === 'click') { ev.currentTarget.focus(); @@ -156,7 +163,9 @@ export function DiscoverField({ ) => { if (ev.type === 'click') { ev.currentTarget.focus(); diff --git a/src/plugins/discover/public/application/components/sidebar/discover_mobile_flyout.tsx b/src/plugins/discover/public/application/components/sidebar/discover_mobile_flyout.tsx index 9b33af526b5df..9bf1c71a8505e 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_mobile_flyout.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_mobile_flyout.tsx @@ -86,7 +86,7 @@ export function DiscoverMobileFlyout({ selectedIndexPattern, setIndexPattern, }: DiscoverMobileFlyoutProps) { - const [showFields, setShowFields] = useState(false); + const [showFields, setShowFields] = useState(true); const [fields, setFields] = useState(null); const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter()); const services = useMemo(() => getServices(), []); @@ -190,6 +190,7 @@ export function DiscoverMobileFlyout({ >
Date: Wed, 23 Sep 2020 11:02:01 -0700 Subject: [PATCH 05/26] didn't really need an extra component --- .../discover/public/application/components/discover.tsx | 5 +++-- .../components/discover_grid/discover_grid_helpers.tsx | 2 +- .../application/components/sidebar/discover_field.tsx | 2 +- .../application/components/sidebar/discover_sidebar.tsx | 8 ++++++++ 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index 070dfdd3d777d..2ae5fbbd7e80a 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -37,7 +37,7 @@ import { DiscoverGrid } from './discover_grid/discover_grid'; import { TimechartHeader } from './timechart_header'; import { DiscoverSidebar } from './sidebar'; import { DiscoverSidebarMobile } from './sidebar'; -import { DiscoverMobileFlyout } from './sidebar'; +// import { DiscoverMobileFlyout } from './sidebar'; import { getServices } from '../../kibana_services'; // @ts-ignore @@ -148,7 +148,7 @@ export function Discover({ - diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx index 3907ff23e63fe..c4f17643eb981 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx @@ -198,7 +198,7 @@ export function getSchemaDetectors() { export function getPopoverContents() { return { [geoPoint]: ({ children }: { children: ReactNode }) => { - return {children}; + return {children}xx; }, }; } diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx index 7930c337e5ba3..99f03cea28a1b 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx @@ -76,7 +76,7 @@ export function DiscoverField({ getDetails, selected, useShortDots, - mobile = false, + mobile, }: DiscoverFieldProps) { const addLabelAria = i18n.translate('discover.fieldChooser.discoverField.addButtonAriaLabel', { defaultMessage: 'Add {field} to table', diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx index 0a3855f9cd776..10e92f7a5a8ff 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx @@ -73,6 +73,10 @@ export interface DiscoverSidebarProps { * Callback function to select another index pattern */ setIndexPattern: (id: string) => void; + /** + * Shows Add button at all times and not only on focus + */ + mobile?: boolean; } export function DiscoverSidebar({ @@ -85,6 +89,7 @@ export function DiscoverSidebar({ onRemoveField, selectedIndexPattern, setIndexPattern, + mobile = false, }: DiscoverSidebarProps) { const [showFields, setShowFields] = useState(false); const [fields, setFields] = useState(null); @@ -197,6 +202,7 @@ export function DiscoverSidebar({ getDetails={getDetailsByField} selected={true} useShortDots={useShortDots} + mobile={mobile} /> ); @@ -271,6 +277,7 @@ export function DiscoverSidebar({ onAddFilter={onAddFilter} getDetails={getDetailsByField} useShortDots={useShortDots} + mobile={mobile} /> ); @@ -301,6 +308,7 @@ export function DiscoverSidebar({ onAddFilter={onAddFilter} getDetails={getDetailsByField} useShortDots={useShortDots} + mobile={mobile} /> ); From 9e74d0c4eaf7f12cc2f8ab90ef6550c8361e5140 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 23 Sep 2020 14:01:37 -0700 Subject: [PATCH 06/26] available fields accordion --- .../application/components/discover.tsx | 6 +- .../components/sidebar/discover_sidebar.scss | 4 + .../components/sidebar/discover_sidebar.tsx | 193 ++++++++---------- 3 files changed, 98 insertions(+), 105 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index 2ae5fbbd7e80a..fc0f3a0a734e8 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -136,7 +136,11 @@ export function Discover({ if (isFlyoutVisible) { flyout = ( - setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> + setIsFlyoutVisible(false)} + aria-labelledby="flyoutTitle" + > diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index da8646383003a..a4d7c449d8a7e 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -65,6 +65,10 @@ line-height: $euiSizeXXL; } +.dscFieldList__popularSection { + margin-top: $euiSizeXS; +} + .dscFieldList { list-style: none; margin-bottom: 0; diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx index 10e92f7a5a8ff..5a243639b29fc 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx @@ -19,7 +19,7 @@ import './discover_sidebar.scss'; import React, { useCallback, useEffect, useState, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiButtonIcon, EuiTitle, EuiSpacer } from '@elastic/eui'; +import { EuiAccordion, EuiButtonIcon, EuiText, EuiTitle, EuiSpacer } from '@elastic/eui'; import { sortBy } from 'lodash'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { DiscoverField } from './discover_field'; @@ -208,112 +208,97 @@ export function DiscoverSidebar({ ); })} -
- -

- -

- -
- setShowFields(!showFields)} - aria-label={ - showFields - ? i18n.translate( - 'discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel', - { - defaultMessage: 'Hide fields', - } - ) - : i18n.translate( - 'discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel', - { - defaultMessage: 'Show fields', - } - ) - } - /> -
-
- - )} - {popularFields.length > 0 && ( -
- - - -
    + + + + + } > - {popularFields.map((field: IndexPatternField) => { - return ( -
  • 0 && ( +
    + - -
    • - ); - })} -
-
- )} - -
    - {unpopularFields.map((field: IndexPatternField) => { - return ( -
+ )} +
    - - - ); - })} -
+ {unpopularFields.map((field: IndexPatternField) => { + return ( +
  • + +
    • + ); + })} + + + + )}
    From 38acb0155ed6891cc54145918f5fd9c03b8eb6b2 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 24 Sep 2020 19:29:01 -0700 Subject: [PATCH 07/26] lots of cleanup --- .../public/application/_discover.scss | 6 + .../application/components/discover.scss | 2 +- .../application/components/discover.tsx | 91 ++--- .../sidebar/discover_mobile_flyout.tsx | 316 ------------------ .../components/sidebar/discover_sidebar.scss | 88 ++--- .../components/sidebar/discover_sidebar.tsx | 295 ++++++++-------- .../application/components/sidebar/index.ts | 1 - 7 files changed, 237 insertions(+), 562 deletions(-) delete mode 100644 src/plugins/discover/public/application/components/sidebar/discover_mobile_flyout.tsx diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index f72bf9f0ed3d1..d4b3fca169948 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -35,6 +35,7 @@ discover-app { flex-wrap: wrap; margin-left: 0; margin-right: 0; + overflow-y: auto; } } @@ -83,6 +84,11 @@ discover-app { display: flex; overflow: hidden; + @include euiBreakpoint('m', 'l', 'xl') { + margin-right: $euiSize; + margin-bottom: $euiSize; + } + @include euiBreakpoint('xs', 's') { margin: $euiSizeS; } diff --git a/src/plugins/discover/public/application/components/discover.scss b/src/plugins/discover/public/application/components/discover.scss index a0a5e7884a3e6..50ede048e72d0 100644 --- a/src/plugins/discover/public/application/components/discover.scss +++ b/src/plugins/discover/public/application/components/discover.scss @@ -14,7 +14,7 @@ .dscSidebar__mobile { width: 100%; - padding: 0 $euiSizeS $euiSizeL $euiSizeS; + padding: 0 $euiSizeS $euiSizeS; .dscSidebar__sectionStatic { padding: 0; } diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index fc0f3a0a734e8..adba018831ff5 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -49,38 +49,6 @@ import { DiscoverFetchError } from './fetch_error/fetch_error'; import './discover.scss'; import { esFilters } from '../../../../data/public'; -// Hook -function useWindowSize() { - // Initialize state with undefined width/height so server and client renders match - // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ - const [windowSize, setWindowSize] = useState({ - width: undefined, - height: undefined, - }); - - useEffect(() => { - // Handler to call on window resize - function handleResize() { - // Set window width/height to state - setWindowSize({ - width: window.innerWidth, - height: window.innerHeight, - }); - } - - // Add event listener - window.addEventListener('resize', handleResize); - - // Call handler right away so state gets updated with initial window size - handleResize(); - - // Remove event listener on cleanup - return () => window.removeEventListener('resize', handleResize); - }, []); // Empty array ensures that effect is only run on mount - - return windowSize; -} - export function Discover({ addColumn, bucketInterval, @@ -129,7 +97,6 @@ export function Discover({ } const { TopNavMenu } = getServices().navigation.ui; const { savedSearch, filterManager } = opts; - const size = useWindowSize(); const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); let flyout; @@ -208,10 +175,10 @@ export function Discover({ showSearchBar={true} useDefaultBehaviors={true} /> + {flyout}
    <> - {flyout} - {size && size.width > 575 ? ( +
    - ) : ( -
    - - setIsFlyoutVisible(true)} - > - Fields - - 5 - - -
    - )} +
    +
    + + setIsFlyoutVisible(true)} + > + Fields + + 5 + + +
    <> {resultState === 'none' && ( @@ -273,7 +239,6 @@ export function Discover({ {resultState === 'ready' && (
    - {size.width}px / {size.height}px
    ; - /** - * hits fetched from ES, displayed in the doc table - */ - hits: Array>; - /** - * List of available index patterns - */ - indexPatternList: Array>; - /** - * Callback function when selecting a field - */ - onAddField: (fieldName: string) => void; - /** - * Callback function when adding a filter from sidebar - */ - onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; - /** - * Callback function when removing a field - * @param fieldName - */ - onRemoveField: (fieldName: string) => void; - /** - * Currently selected index pattern - */ - selectedIndexPattern: IndexPattern; - /** - * Callback function to select another index pattern - */ - setIndexPattern: (id: string) => void; -} - -export function DiscoverMobileFlyout({ - columns, - fieldCounts, - hits, - indexPatternList, - onAddField, - onAddFilter, - onRemoveField, - selectedIndexPattern, - setIndexPattern, -}: DiscoverMobileFlyoutProps) { - const [showFields, setShowFields] = useState(true); - const [fields, setFields] = useState(null); - const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter()); - const services = useMemo(() => getServices(), []); - - useEffect(() => { - const newFields = getIndexPatternFieldList(selectedIndexPattern, fieldCounts); - setFields(newFields); - }, [selectedIndexPattern, fieldCounts, hits, services]); - - const onChangeFieldSearch = useCallback( - (field: string, value: string | boolean | undefined) => { - const newState = setFieldFilterProp(fieldFilterState, field, value); - setFieldFilterState(newState); - }, - [fieldFilterState] - ); - - const getDetailsByField = useCallback( - (ipField: IndexPatternField) => getDetails(ipField, hits, columns, selectedIndexPattern), - [hits, columns, selectedIndexPattern] - ); - - const popularLimit = services.uiSettings.get(FIELDS_LIMIT_SETTING); - const useShortDots = services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE); - - const { - selected: selectedFields, - popular: popularFields, - unpopular: unpopularFields, - } = useMemo(() => groupFields(fields, columns, popularLimit, fieldCounts, fieldFilterState), [ - fields, - columns, - popularLimit, - fieldCounts, - fieldFilterState, - ]); - - const fieldTypes = useMemo(() => { - const result = ['any']; - if (Array.isArray(fields)) { - for (const field of fields) { - if (result.indexOf(field.type) === -1) { - result.push(field.type); - } - } - } - return result; - }, [fields]); - - if (!selectedIndexPattern || !fields) { - return null; - } - - return ( - -
    -
    - o.attributes.title)} - /> -
    -
    - - -
    -
    -
    - {fields.length > 0 && ( - <> - -

    - -

    -     - -
      - {selectedFields.map((field: IndexPatternField) => { - return ( -
    • - -
      • - ); - })} -
    -
    - -

    - -

    -     -
    - setShowFields(!showFields)} - aria-label={ - showFields - ? i18n.translate( - 'discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel', - { - defaultMessage: 'Hide fields', - } - ) - : i18n.translate( - 'discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel', - { - defaultMessage: 'Show fields', - } - ) - } - /> -
    -
    - - )} - {popularFields.length > 0 && ( -
    - - - -
      - {popularFields.map((field: IndexPatternField) => { - return ( -
    • - -
      • - ); - })} -
    -
    - )} - -
      - {unpopularFields.map((field: IndexPatternField) => { - return ( -
    • - -
      • - ); - })} -
    -
    -
    -     - ); -} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index a4d7c449d8a7e..7b233fb5e0d5a 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -1,48 +1,53 @@ -.dscApp .dscSidebar__section { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; +.dscSidebar { + margin: 0; + min-width: 304px; display: flex; - // overflow: hidden; + flex-direction: column; + position: relative; } -.dscApp .dscSidebar__sectionStatic { - padding: 0 16px; +.dscSidebar__contentWrapper { + flex: 1 0 100%; + overflow: hidden; + @include euiBreakpoint('xs', 's') { + padding-bottom: $euiSize * 4; + } + + .dscSidebar__content { + @include euiBreakpoint('xs', 's') { + padding-top: 0; + } + width: 100%; + height: 100%; + padding: $euiSize $euiSize 0; + } } -.dscApp .dscSidebar__sectionScroll { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; +/** + * 1. Don't cut off the shadow of the field items + */ + +.dscSidebar__scrollSection { + @include euiBreakpoint('xs', 's') { + padding-left: $euiSize; + padding-top: $euiSize; + } + @include euiOverflowShadow; + @include euiScrollBar; + margin-left: -$euiSize; /* 1 */ + position: relative; flex-grow: 1; - overflow-x: hidden; - scrollbar-width: thin; - -webkit-mask-image: linear-gradient( - to bottom, - rgba(255, 0, 0, 0.1) 0%, - red 7.5px, - red calc(100% - 7.5px), - rgba(255, 0, 0, 0.1) 100% - ); - mask-image: linear-gradient( - to bottom, - rgba(255, 0, 0, 0.1) 0%, - red 7.5px, - red calc(100% - 7.5px), - rgba(255, 0, 0, 0.1) 100% - ); - height: 100%; - overflow-y: auto; - padding: 0 16px; + overflow: auto; +} + +.dscSidebar__scrollSectionList { + @include euiBreakpoint('m', 'l', 'xl') { + padding-top: $euiSizeS; + position: absolute; + top: 0; + left: $euiSize; /* 1 */ + right: $euiSizeXS; /* 1 */ + } } .dscSidebar__container { @@ -65,13 +70,10 @@ line-height: $euiSizeXXL; } -.dscFieldList__popularSection { - margin-top: $euiSizeXS; -} - .dscFieldList { list-style: none; margin-bottom: 0; + padding: 0 $euiSizeXS $euiSizeXS; } .dscFieldListHeader { diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx index 5a243639b29fc..6c7f06cc8aa05 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx @@ -19,7 +19,14 @@ import './discover_sidebar.scss'; import React, { useCallback, useEffect, useState, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiAccordion, EuiButtonIcon, EuiText, EuiTitle, EuiSpacer } from '@elastic/eui'; +import { + EuiAccordion, + EuiFlexItem, + EuiFlexGroup, + EuiText, + EuiTitle, + EuiSpacer, +} from '@elastic/eui'; import { sortBy } from 'lodash'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { DiscoverField } from './discover_field'; @@ -148,18 +155,26 @@ export function DiscoverSidebar({ return (
    -
    - o.attributes.title)} - /> -
    + + + {' '} + o.attributes.title)} + /> + +
    -
    -
    -
    - {fields.length > 0 && ( - <> - -

    - -

    -     - -
      - {selectedFields.map((field: IndexPatternField) => { - return ( -
    • - -
      • - ); - })} -
    - - - - - - } - > - {popularFields.length > 0 && ( -
    - + +
    +
    + {fields.length > 0 && ( + <> + + + + + + } > - - -
      +
        + {selectedFields.map((field: IndexPatternField) => { + return ( +
      • + +
        • + ); + })} +
      + + {selectedFields && selectedFields.length > 0 ? : null} + + + + + + } > - {popularFields.map((field: IndexPatternField) => { - return ( -
    • + {popularFields.length > 0 && ( + <> + + + +
        - - - ); - })} -
      -
    - )} -
      - {unpopularFields.map((field: IndexPatternField) => { - return ( -
    • { + return ( +
    • + +
      • + ); + })} +
    + + )} +
      - - - ); - })} -
    - - - )} -
    + {unpopularFields.map((field: IndexPatternField) => { + return ( +
  • + +
    • + ); + })} + + + + + )} +
    +
    + +
    ); diff --git a/src/plugins/discover/public/application/components/sidebar/index.ts b/src/plugins/discover/public/application/components/sidebar/index.ts index 414ce56a6e4fd..15781236541fb 100644 --- a/src/plugins/discover/public/application/components/sidebar/index.ts +++ b/src/plugins/discover/public/application/components/sidebar/index.ts @@ -19,5 +19,4 @@ export { DiscoverSidebar } from './discover_sidebar'; export { DiscoverSidebarMobile } from './discover_sidebar_mobile'; -export { DiscoverMobileFlyout } from './discover_mobile_flyout'; export { createDiscoverSidebarDirective } from './discover_sidebar_directive'; From 0f8bc2fe1400cb201344d4333c458ad8f13d8ef8 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sun, 27 Sep 2020 17:22:12 -0700 Subject: [PATCH 08/26] i18n for fields --- .../discover/public/application/components/discover.tsx | 5 ++++- .../components/discover_grid/discover_grid_helpers.tsx | 2 +- .../application/components/sidebar/discover_sidebar.scss | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index adba018831ff5..b0e5271f5fb79 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -210,7 +210,10 @@ export function Discover({ fullWidth onClick={() => setIsFlyoutVisible(true)} > - Fields + 5 diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx index c4f17643eb981..3907ff23e63fe 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_helpers.tsx @@ -198,7 +198,7 @@ export function getSchemaDetectors() { export function getPopoverContents() { return { [geoPoint]: ({ children }: { children: ReactNode }) => { - return {children}xx; + return {children}; }, }; } diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index 7b233fb5e0d5a..0a083ef38aee8 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -19,7 +19,7 @@ } width: 100%; height: 100%; - padding: $euiSize $euiSize 0; + padding: 0 $euiSize; } } From 8793fb46af4b0c449aad6ed02252f5477ecd1fef Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 28 Sep 2020 13:47:31 -0700 Subject: [PATCH 09/26] fix No Results screen on mobile --- src/plugins/discover/public/application/_discover.scss | 3 ++- .../public/application/angular/directives/_no_results.scss | 3 +++ .../discover/public/application/components/discover.tsx | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 729c4cdd9d49c..0306466b700cf 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -37,6 +37,7 @@ discover-app { display: flex; overflow: hidden; @include euiBreakpoint('xs', 's') { + flex-grow: 0; flex-wrap: wrap; margin-left: 0; margin-right: 0; @@ -223,7 +224,7 @@ discover-app { z-index: -1; min-height: $euiSizeM; min-width: $euiSizeM; - padding: $euiSizeXS * .5; + padding: $euiSizeXS * 0.5; } &.closed { diff --git a/src/plugins/discover/public/application/angular/directives/_no_results.scss b/src/plugins/discover/public/application/angular/directives/_no_results.scss index 7ea945e820bf9..85b23ffc79767 100644 --- a/src/plugins/discover/public/application/angular/directives/_no_results.scss +++ b/src/plugins/discover/public/application/angular/directives/_no_results.scss @@ -1,3 +1,6 @@ .dscNoResults { + @include euiBreakpoint('xs', 's') { + padding: 0 $euiSizeS; + } max-width: 1000px; } diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index f4dcb8ae3844e..ea90a950bbc38 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -172,7 +172,7 @@ export function Discover({ {flyout}
    <> -
    +
    -
    +
    Date: Mon, 28 Sep 2020 17:22:01 -0700 Subject: [PATCH 10/26] improve Expanded Document flyout in mobile --- .../public/application/components/discover.tsx | 13 ++++++++++--- .../discover_grid/discover_grid_flyout.tsx | 9 +++++++-- .../components/doc_viewer/doc_viewer.scss | 17 ++++++++++++----- .../components/field_name/field_name.tsx | 4 +++- .../components/sidebar/discover_sidebar.scss | 1 - .../application/components/table/table_row.tsx | 1 + 6 files changed, 33 insertions(+), 12 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index ea90a950bbc38..039f10939abb9 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -19,6 +19,7 @@ import React, { useState } from 'react'; import rison from 'rison-node'; // import { EuiResizableContainer } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { EuiBadge, @@ -30,13 +31,13 @@ import { EuiFlyoutBody, EuiFlyoutHeader, EuiButtonIcon, + EuiTitle, } from '@elastic/eui'; import { HitsCounter } from './hits_counter'; import { DiscoverGrid } from './discover_grid/discover_grid'; import { TimechartHeader } from './timechart_header'; import { DiscoverSidebar } from './sidebar'; import { DiscoverSidebarMobile } from './sidebar'; -// import { DiscoverMobileFlyout } from './sidebar'; import { getServices } from '../../kibana_services'; // @ts-ignore @@ -97,7 +98,7 @@ export function Discover({ if (isFlyoutVisible) { flyout = ( setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle" > @@ -107,7 +108,13 @@ export function Discover({ setIsFlyoutVisible(false)} iconType="arrowLeft" /> -

    Field list

    + +

    + {i18n.translate('discover.fieldList.flyoutHeading', { + defaultMessage: 'Field list', + })} +

    +     diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx index b070b2846c268..1ba17f6936ac9 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx @@ -65,7 +65,7 @@ export const DiscoverGridFlyout = function DiscoverGridInner({ - +

    {' '} {i18n.translate('discover.grid.tableRow.detailHeading', { @@ -77,7 +77,12 @@ export const DiscoverGridFlyout = function DiscoverGridInner({ - + {indexPattern.isTimeBased() && ( ; scripted?: boolean; + className?: string; } export function FieldName({ @@ -38,13 +39,14 @@ export function FieldName({ fieldType, useShortDots, fieldIconProps, + className, scripted = false, }: Props) { const typeName = getFieldTypeName(fieldType); const displayName = useShortDots ? shortenDottedString(fieldName) : fieldName; return ( - + diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index 0a083ef38aee8..8c04aa70e818a 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -1,6 +1,5 @@ .dscSidebar { margin: 0; - min-width: 304px; display: flex; flex-direction: column; position: relative; diff --git a/src/plugins/discover/public/application/components/table/table_row.tsx b/src/plugins/discover/public/application/components/table/table_row.tsx index 699197e90b994..f121b5f5a553e 100644 --- a/src/plugins/discover/public/application/components/table/table_row.tsx +++ b/src/plugins/discover/public/application/components/table/table_row.tsx @@ -69,6 +69,7 @@ export function DocViewTableRow({ Date: Mon, 28 Sep 2020 19:00:53 -0700 Subject: [PATCH 11/26] give tokens color --- .../discover/public/application/components/table/table_row.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/plugins/discover/public/application/components/table/table_row.tsx b/src/plugins/discover/public/application/components/table/table_row.tsx index f121b5f5a553e..95ed759501389 100644 --- a/src/plugins/discover/public/application/components/table/table_row.tsx +++ b/src/plugins/discover/public/application/components/table/table_row.tsx @@ -69,10 +69,8 @@ export function DocViewTableRow({ From 8830406de6a795a5e341fd555b2c40612beb4880 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 29 Sep 2020 15:19:22 -0700 Subject: [PATCH 12/26] add NotificationBadge to accordions --- .../application/components/discover.tsx | 2 +- .../components/sidebar/discover_sidebar.tsx | 105 ++++++++++-------- 2 files changed, 62 insertions(+), 45 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index 039f10939abb9..b7987dbe4cb8d 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -216,7 +216,7 @@ export function Discover({ defaultMessage="Fields" /> - 5 + {state.columns[0] === '_source' ? 0 : state.columns.length}

    diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx index d1f8440dfa009..79390d1417ae0 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx @@ -26,6 +26,7 @@ import { EuiText, EuiTitle, EuiSpacer, + EuiNotificationBadge, } from '@elastic/eui'; import { sortBy } from 'lodash'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; @@ -188,50 +189,61 @@ export function DiscoverSidebar({
    {fields.length > 0 && ( <> - - - - - - } - > - -
      - {selectedFields.map((field: IndexPatternField) => { - return ( -
    • - -
      • - ); - })} -
    -     - {selectedFields && selectedFields.length > 0 ? : null} + {selectedFields && + selectedFields.length > 0 && + selectedFields[0].displayName !== '_source' ? ( + <> + + + + + + } + extraAction={ + + {selectedFields.length} + + } + > + +
      + {selectedFields.map((field: IndexPatternField) => { + return ( +
    • + +
      • + ); + })} +
    +     + {' '} + + ) : null} } + extraAction={ + + {popularFields.length + unpopularFields.length} + + } > {popularFields.length > 0 && ( From e62952485ba58608b2bd8359727f94a8285f5525 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 29 Sep 2020 15:39:20 -0700 Subject: [PATCH 13/26] add EuiShowFor and EuiHideFor --- .../application/components/discover.tsx | 157 +++++++++--------- 1 file changed, 80 insertions(+), 77 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index b7987dbe4cb8d..c8917c4098918 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -32,6 +32,8 @@ import { EuiFlyoutHeader, EuiButtonIcon, EuiTitle, + EuiShowFor, + EuiHideFor, } from '@elastic/eui'; import { HitsCounter } from './hits_counter'; import { DiscoverGrid } from './discover_grid/discover_grid'; @@ -97,42 +99,40 @@ export function Discover({ if (isFlyoutVisible) { flyout = ( - setIsFlyoutVisible(false)} - aria-labelledby="flyoutTitle" - > - - - - setIsFlyoutVisible(false)} iconType="arrowLeft" /> - - - -

    - {i18n.translate('discover.fieldList.flyoutHeading', { - defaultMessage: 'Field list', - })} -

    -     -     -     -     - - - -     + + setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> + + + + setIsFlyoutVisible(false)} iconType="arrowLeft" /> + + + +

    + {i18n.translate('discover.fieldList.flyoutHeading', { + defaultMessage: 'Field list', + })} +

    +     +     +     +     + + + +     +     ); } @@ -179,48 +179,51 @@ export function Discover({ {flyout}
    <> -
    - -
    -
    - - setIsFlyoutVisible(true)} - > - +
    + - - {state.columns[0] === '_source' ? 0 : state.columns.length} - - -
    - +
    + + +
    + + setIsFlyoutVisible(true)} + > + + + {state.columns[0] === '_source' ? 0 : state.columns.length} + + +
    +     <> {resultState === 'none' && ( Date: Wed, 30 Sep 2020 10:18:40 -0700 Subject: [PATCH 14/26] make NotificationBadges in sidebar consider filters --- .../components/sidebar/discover_sidebar.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx index 79390d1417ae0..2e770302f2bd0 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx @@ -16,6 +16,7 @@ * specific language governing permissions and limitations * under the License. */ +import { isEqual } from 'lodash'; import './discover_sidebar.scss'; import React, { useCallback, useEffect, useState, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; @@ -153,6 +154,8 @@ export function DiscoverSidebar({ return null; } + const filterChanged = isEqual(fieldFilterState, getDefaultFieldFilter()); + return (
    } extraAction={ - + {selectedFields.length} } @@ -258,7 +264,7 @@ export function DiscoverSidebar({ } extraAction={ - + {popularFields.length + unpopularFields.length} } From e4f3e8978703c0520894cab179f6a8f26267f5c6 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 30 Sep 2020 14:42:32 -0700 Subject: [PATCH 15/26] update Filter button on sidebar --- .../sidebar/discover_field_search.tsx | 30 +++++++++++-------- .../components/sidebar/discover_sidebar.scss | 11 +++---- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx index 99dad418c04bd..57c71a2bd6a55 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx @@ -19,11 +19,10 @@ import React, { OptionHTMLAttributes, ReactNode, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { - EuiFacetButton, EuiFieldSearch, + EuiFilterGroup, EuiFlexGroup, EuiFlexItem, - EuiIcon, EuiPopover, EuiPopoverFooter, EuiPopoverTitle, @@ -34,6 +33,8 @@ import { EuiFormRow, EuiButtonGroup, EuiOutsideClickDetector, + EuiFilterButton, + EuiSpacer, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -108,7 +109,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) { defaultMessage: 'Show field filter settings', }); - const handleFacetButtonClicked = () => { + const handleFilterButtonClicked = () => { setPopoverOpen(!isPopoverOpen); }; @@ -162,20 +163,22 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) { }; const buttonContent = ( - } + iconType="arrowDown" isSelected={activeFiltersCount > 0} - quantity={activeFiltersCount} - onClick={handleFacetButtonClicked} + numFilters={0} + hasActiveFilters={activeFiltersCount > 0} + numActiveFilters={activeFiltersCount} + onClick={handleFilterButtonClicked} > - + ); const select = ( @@ -263,8 +266,9 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) { /> -
    - {}} isDisabled={!isPopoverOpen}> + + {}} isDisabled={!isPopoverOpen}> + - -
    + + ); } diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index 8c04aa70e818a..4cdee4d4dd1e0 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -132,14 +132,15 @@ } .dscFieldSearch__toggleButton { - width: calc(100% - #{$euiSizeS}); - color: $euiColorPrimary; - padding-left: $euiSizeXS; - margin-left: $euiSizeXS; + // width: calc(100% - #{$euiSizeS}); + // color: $euiColorPrimary; + // padding-left: $euiSizeXS; + // margin-left: $euiSizeXS; + // borde } .dscFieldSearch__filterWrapper { - flex-grow: 0; + width: 100%; } .dscFieldSearch__formWrapper { From 2e30b1e85c2d98e0904ff8c86b708af5bed3eb10 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 30 Sep 2020 17:41:56 -0700 Subject: [PATCH 16/26] removed some boostrap and did some cleanup in legacy --- .../public/application/_discover.scss | 39 +- .../components/discover_legacy.tsx | 357 +++++++++++------- 2 files changed, 227 insertions(+), 169 deletions(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 0306466b700cf..41f5caaa0977c 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -45,14 +45,6 @@ discover-app { } } -.dscApp__sidebar { - flex-grow: 0; - flex-basis: auto; - min-width: 250px; - display: flex; - flex-direction: column; -} - .dscApp__content { flex-grow: 1; flex-direction: column; @@ -63,7 +55,7 @@ discover-app { .dscHistogram { display: flex; - height: 200px; + height: $euiSize * 12.5; padding: $euiSizeS; } // new slimmer layout for data grid @@ -154,10 +146,9 @@ discover-app { } } -// SASSTODO: replace the padding value with a variable .dscTable__footer { background-color: $euiColorLightShade; - padding: 5px 10px; + padding: $euiSizeXS $euiSizeS; text-align: center; } @@ -166,10 +157,6 @@ discover-app { flex-direction: column; display: flex; overflow: hidden; - h3 { - margin: -20px 0 10px 0; - text-align: center; - } } .dscResults__interval { @@ -212,28 +199,22 @@ discover-app { } } +.dscCollapsibleSidebar__collapseButton { + align-self: flex-start; + &:not(.closed) { + position: relative; + left: -$euiSizeS; + } +} + .dscCollapsibleSidebar { position: relative; z-index: $euiZLevel1; - .dscCollapsibleSidebar__collapseButton { - position: absolute; - top: 0; - right: -$euiSizeXL + 4; - cursor: pointer; - z-index: -1; - min-height: $euiSizeM; - min-width: $euiSizeM; - padding: $euiSizeXS * 0.5; - } - &.closed { width: 0 !important; border-right-width: 0; border-left-width: 0; - .dscCollapsibleSidebar__collapseButton { - right: -$euiSizeL + 4; - } } } diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index 9c3d833d73b23..aa341de1d113e 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -18,13 +18,27 @@ */ import React, { useState, useCallback, useEffect } from 'react'; import classNames from 'classnames'; -import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui'; +import { + EuiButtonEmpty, + EuiButtonIcon, + EuiHideFor, + EuiShowFor, + EuiButton, + EuiBadge, + EuiFlexItem, + EuiFlexGroup, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiTitle, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { IUiSettingsClient, MountPoint } from 'kibana/public'; import { HitsCounter } from './hits_counter'; import { TimechartHeader } from './timechart_header'; import { DiscoverSidebar } from './sidebar'; +import { DiscoverSidebarMobile } from './sidebar'; import { getServices, IndexPattern } from '../../kibana_services'; // @ts-ignore import { DiscoverNoResults } from '../angular/directives/no_results'; @@ -123,6 +137,7 @@ export function DiscoverLegacy({ vis, }: DiscoverLegacyProps) { const [isSidebarClosed, setIsSidebarClosed] = useState(false); + const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); const { TopNavMenu } = getServices().navigation.ui; const { savedSearch, indexPatternList } = opts; const bucketAggConfig = vis?.data?.aggs?.aggs[1]; @@ -148,10 +163,46 @@ export function DiscoverLegacy({ closed: isSidebarClosed, }); - const mainSectionClassName = classNames({ - 'col-md-10': !isSidebarClosed, - 'col-md-12': isSidebarClosed, - }); + let flyout; + + if (isFlyoutVisible) { + flyout = ( + + setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> + + + + setIsFlyoutVisible(false)} iconType="arrowLeft" /> + + + +

    + {i18n.translate('discover.fieldList.flyoutHeading', { + defaultMessage: 'Field list', + })} +

    +     +     +     +     + + + +     +     + ); + } return ( @@ -172,152 +223,178 @@ export function DiscoverLegacy({ showSearchBar={true} useDefaultBehaviors={true} /> -
    -
    -
    - {!isSidebarClosed && ( -
    - -
    - )} - setIsSidebarClosed(!isSidebarClosed)} - data-test-subj="collapseSideBarButton" - aria-controls="discover-sidebar" - aria-expanded={isSidebarClosed ? 'false' : 'true'} - aria-label="Toggle sidebar" - className="dscCollapsibleSidebar__collapseButton" +
    + + {!isSidebarClosed && ( +
    + +
    + )} +     + +
    + + setIsFlyoutVisible(true)} + > + + + {state.columns[0] === '_source' ? 0 : state.columns.length} + +
    -
    - {resultState === 'none' && ( - + {/*
    */} + + setIsSidebarClosed(!isSidebarClosed)} + data-test-subj="collapseSideBarButton" + aria-controls="discover-sidebar" + aria-expanded={isSidebarClosed ? 'false' : 'true'} + aria-label="Toggle sidebar" + className={`dscCollapsibleSidebar__collapseButton ${sidebarClassName}`} + /> + +
    + {resultState === 'none' && ( + + )} + {resultState === 'uninitialized' && } + {/* @TODO: Solved in the Angular way to satisfy functional test - should be improved*/} + + {fetchError && } +
    + +
    +     + {resultState === 'ready' && ( +
    + + 0 ? hits : 0} + showResetButton={!!(savedSearch && savedSearch.id)} + onResetQuery={resetQuery} /> - )} - {resultState === 'uninitialized' && } - {/* @TODO: Solved in the Angular way to satisfy functional test - should be improved*/} - - {fetchError && } -
    - -
    -     - {resultState === 'ready' && ( -
    - - 0 ? hits : 0} - showResetButton={!!(savedSearch && savedSearch.id)} - onResetQuery={resetQuery} + {opts.timefield && ( + - {opts.timefield && ( - - )} + )} - {opts.timefield && ( -
    - {vis && rows.length !== 0 && ( -
    - -
    - )} -
    - )} + {opts.timefield && ( +
    + {vis && rows.length !== 0 && ( +
    + +
    + )} +
    + )} -
    -
    -

    - +
    +

    + +

    + {rows && rows.length && ( +
    + -

    - {rows && rows.length && ( -
    - - - ​ - - {rows.length === opts.sampleSize && ( -
    - + ​ + + {rows.length === opts.sampleSize && ( +
    + + values={{ sampleSize: opts.sampleSize }} + /> - window.scrollTo(0, 0)}> - - -
    - )} -
    - )} -
    -
    + window.scrollTo(0, 0)}> + + +
    + )} +
    + )} +
    - )} -
    +
    + )}
    -
    +
    ); From 567b6f2e830b96d294bc625ff4ac8cd09a406ddf Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 1 Oct 2020 16:43:23 -0700 Subject: [PATCH 17/26] show the flyout in legacy --- .../discover/public/application/components/discover_legacy.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index aa341de1d113e..b11faf85d303f 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -223,6 +223,7 @@ export function DiscoverLegacy({ showSearchBar={true} useDefaultBehaviors={true} /> + {flyout}
    {!isSidebarClosed && ( From 03af0ce0347b57061b1b87c59989f6476ef4a963 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Fri, 2 Oct 2020 18:05:45 +0200 Subject: [PATCH 18/26] Shared state refactoring --- .../application/components/discover.tsx | 115 ++--------- .../components/discover_legacy.tsx | 123 ++---------- .../sidebar/discover_sidebar.test.tsx | 3 + .../components/sidebar/discover_sidebar.tsx | 52 ++++- .../sidebar/discover_sidebar_mobile.tsx | 141 ------------- .../sidebar/discover_sidebar_responsive.tsx | 188 ++++++++++++++++++ .../application/components/sidebar/index.ts | 2 +- 7 files changed, 262 insertions(+), 362 deletions(-) delete mode 100644 src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx create mode 100644 src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index c8917c4098918..d92414708cd86 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -19,27 +19,11 @@ import React, { useState } from 'react'; import rison from 'rison-node'; // import { EuiResizableContainer } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; -import { - EuiBadge, - EuiFlexItem, - EuiFlexGroup, - EuiButton, - EuiButtonToggle, - EuiFlyout, - EuiFlyoutBody, - EuiFlyoutHeader, - EuiButtonIcon, - EuiTitle, - EuiShowFor, - EuiHideFor, -} from '@elastic/eui'; +import { EuiFlexItem, EuiFlexGroup, EuiButtonToggle } from '@elastic/eui'; import { HitsCounter } from './hits_counter'; import { DiscoverGrid } from './discover_grid/discover_grid'; import { TimechartHeader } from './timechart_header'; -import { DiscoverSidebar } from './sidebar'; -import { DiscoverSidebarMobile } from './sidebar'; import { getServices } from '../../kibana_services'; // @ts-ignore @@ -50,6 +34,7 @@ import { LoadingSpinner } from './loading_spinner/loading_spinner'; import { DiscoverFetchError } from './fetch_error'; import './discover.scss'; import { esFilters, search } from '../../../../data/public'; +import { DiscoverSidebarResponsive } from './sidebar/discover_sidebar_responsive'; export function Discover({ addColumn, @@ -83,7 +68,6 @@ export function Discover({ updateSavedQueryId, }: any) { const [toggleOn, toggleChart] = useState(true); - const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); if (!timeRange) { return
    Loading
    ; } @@ -97,45 +81,6 @@ export function Discover({ let flyout; - if (isFlyoutVisible) { - flyout = ( - - setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> - - - - setIsFlyoutVisible(false)} iconType="arrowLeft" /> - - - -

    - {i18n.translate('discover.fieldList.flyoutHeading', { - defaultMessage: 'Field list', - })} -

    -     -     -     -     - - - -     -     - ); - } - const getContextAppHref = (anchorId: string) => { const path = `#/context/${encodeURIComponent(indexPattern.id)}/${encodeURIComponent(anchorId)}`; const urlSearchParams = new URLSearchParams(); @@ -179,51 +124,17 @@ export function Discover({ {flyout}
    <> - -
    - -
    -     - -
    - - setIsFlyoutVisible(true)} - > - - - {state.columns[0] === '_source' ? 0 : state.columns.length} - - -
    -     + <> {resultState === 'none' && ( void; @@ -137,7 +123,6 @@ export function DiscoverLegacy({ vis, }: DiscoverLegacyProps) { const [isSidebarClosed, setIsSidebarClosed] = useState(false); - const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); const { TopNavMenu } = getServices().navigation.ui; const { savedSearch, indexPatternList } = opts; const bucketAggConfig = vis?.data?.aggs?.aggs[1]; @@ -163,47 +148,6 @@ export function DiscoverLegacy({ closed: isSidebarClosed, }); - let flyout; - - if (isFlyoutVisible) { - flyout = ( - - setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> - - - - setIsFlyoutVisible(false)} iconType="arrowLeft" /> - - - -

    - {i18n.translate('discover.fieldList.flyoutHeading', { - defaultMessage: 'Field list', - })} -

    -     -     -     -     - - - -     -     - ); - } - return (
    @@ -223,57 +167,20 @@ export function DiscoverLegacy({ showSearchBar={true} useDefaultBehaviors={true} /> - {flyout}
    - - {!isSidebarClosed && ( -
    - -
    - )} -     - -
    - - setIsFlyoutVisible(true)} - > - - - {state.columns[0] === '_source' ? 0 : state.columns.length} - - -
    -     + {/*
    */} ({ getServices: () => ({ @@ -101,6 +102,8 @@ function getCompProps() { selectedIndexPattern: indexPattern, setIndexPattern: jest.fn(), state: {}, + fieldFilter: {} as FieldFilterState, + setFieldFilter: jest.fn(), }; } diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx index 2e770302f2bd0..a3977f16bf79f 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx @@ -40,7 +40,7 @@ import { FIELDS_LIMIT_SETTING } from '../../../../common'; import { groupFields } from './lib/group_fields'; import { IndexPatternField, IndexPattern, UI_SETTINGS } from '../../../../../data/public'; import { getDetails } from './lib/get_details'; -import { getDefaultFieldFilter, setFieldFilterProp } from './lib/field_filter'; +import { FieldFilterState, getDefaultFieldFilter, setFieldFilterProp } from './lib/field_filter'; import { getIndexPatternFieldList } from './lib/get_index_pattern_field_list'; import { getServices } from '../../../kibana_services'; @@ -86,6 +86,18 @@ export interface DiscoverSidebarProps { * Shows Add button at all times and not only on focus */ mobile?: boolean; + /** + * Shows index pattern and a button that displays the sidebar in a flyout + */ + useFlyout?: boolean; + /** + * Current state of the field filter, filtering fields by name, type, ... + */ + fieldFilter: FieldFilterState; + /** + * Change current state of fieldFilter + */ + setFieldFilter: (next: FieldFilterState) => void; } export function DiscoverSidebar({ @@ -99,10 +111,11 @@ export function DiscoverSidebar({ selectedIndexPattern, setIndexPattern, mobile = false, + useFlyout = false, + fieldFilter, + setFieldFilter, }: DiscoverSidebarProps) { - const [showFields, setShowFields] = useState(false); const [fields, setFields] = useState(null); - const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter()); const services = useMemo(() => getServices(), []); useEffect(() => { @@ -112,10 +125,10 @@ export function DiscoverSidebar({ const onChangeFieldSearch = useCallback( (field: string, value: string | boolean | undefined) => { - const newState = setFieldFilterProp(fieldFilterState, field, value); - setFieldFilterState(newState); + const newState = setFieldFilterProp(fieldFilter, field, value); + setFieldFilter(newState); }, - [fieldFilterState] + [fieldFilter, setFieldFilter] ); const getDetailsByField = useCallback( @@ -130,12 +143,12 @@ export function DiscoverSidebar({ selected: selectedFields, popular: popularFields, unpopular: unpopularFields, - } = useMemo(() => groupFields(fields, columns, popularLimit, fieldCounts, fieldFilterState), [ + } = useMemo(() => groupFields(fields, columns, popularLimit, fieldCounts, fieldFilter), [ fields, columns, popularLimit, fieldCounts, - fieldFilterState, + fieldFilter, ]); const fieldTypes = useMemo(() => { @@ -154,7 +167,26 @@ export function DiscoverSidebar({ return null; } - const filterChanged = isEqual(fieldFilterState, getDefaultFieldFilter()); + const filterChanged = isEqual(fieldFilter, getDefaultFieldFilter()); + + if (useFlyout) { + return ( +
    +
    + o.attributes.title)} + /> +
    +
    + ); + } return ( @@ -182,7 +214,7 @@ export function DiscoverSidebar({
    diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx deleted file mode 100644 index b75e2980c7876..0000000000000 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_mobile.tsx +++ /dev/null @@ -1,141 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ -import './discover_sidebar.scss'; -import React, { useEffect, useState, useMemo, useCallback } from 'react'; -import { i18n } from '@kbn/i18n'; -import { sortBy } from 'lodash'; -import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; -import { DiscoverField } from './discover_field'; -import { DiscoverIndexPattern } from './discover_index_pattern'; -import { DiscoverFieldSearch } from './discover_field_search'; -import { IndexPatternAttributes } from '../../../../../data/common'; -import { SavedObject } from '../../../../../../core/types'; -import { FIELDS_LIMIT_SETTING } from '../../../../common'; -import { groupFields } from './lib/group_fields'; -import { IndexPatternField, IndexPattern, UI_SETTINGS } from '../../../../../data/public'; -import { getDetails } from './lib/get_details'; -import { getDefaultFieldFilter, setFieldFilterProp } from './lib/field_filter'; -import { getIndexPatternFieldList } from './lib/get_index_pattern_field_list'; -import { getServices } from '../../../kibana_services'; - -export interface DiscoverSidebarMobileProps { - /** - * the selected columns displayed in the doc table in discover - */ - columns: string[]; - /** - * a statistics of the distribution of fields in the given hits - */ - fieldCounts: Record; - /** - * hits fetched from ES, displayed in the doc table - */ - hits: Array>; - /** - * List of available index patterns - */ - indexPatternList: Array>; - /** - * Callback function when selecting a field - */ - onAddField: (fieldName: string) => void; - /** - * Callback function when adding a filter from sidebar - */ - onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; - /** - * Callback function when removing a field - * @param fieldName - */ - onRemoveField: (fieldName: string) => void; - /** - * Currently selected index pattern - */ - selectedIndexPattern: IndexPattern; - /** - * Callback function to select another index pattern - */ - setIndexPattern: (id: string) => void; -} - -export function DiscoverSidebarMobile({ - columns, - fieldCounts, - hits, - indexPatternList, - onAddField, - onAddFilter, - onRemoveField, - selectedIndexPattern, - setIndexPattern, -}: DiscoverSidebarMobileProps) { - const [fields, setFields] = useState(null); - const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter()); - const services = useMemo(() => getServices(), []); - - useEffect(() => { - const newFields = getIndexPatternFieldList(selectedIndexPattern, fieldCounts); - setFields(newFields); - }, [selectedIndexPattern, fieldCounts, hits, services]); - - const onChangeFieldSearch = useCallback( - (field: string, value: string | boolean | undefined) => { - const newState = setFieldFilterProp(fieldFilterState, field, value); - setFieldFilterState(newState); - }, - [fieldFilterState] - ); - - const popularLimit = services.uiSettings.get(FIELDS_LIMIT_SETTING); - - const { - selected: selectedFields, - popular: popularFields, - unpopular: unpopularFields, - } = useMemo(() => groupFields(fields, columns, popularLimit, fieldCounts, fieldFilterState), [ - fields, - columns, - popularLimit, - fieldCounts, - fieldFilterState, - ]); - - if (!selectedIndexPattern || !fields) { - return null; - } - - return ( - -
    -
    - o.attributes.title)} - /> -
    -
    -     - ); -} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx new file mode 100644 index 0000000000000..a3d04ed425493 --- /dev/null +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx @@ -0,0 +1,188 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import './discover_sidebar.scss'; +import React, { useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import { + EuiFlexItem, + EuiFlexGroup, + EuiTitle, + EuiHideFor, + EuiShowFor, + EuiButton, + EuiBadge, + EuiFlyoutHeader, + EuiButtonIcon, + EuiFlyoutBody, + EuiFlyout, +} from '@elastic/eui'; +import { sortBy } from 'lodash'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { DiscoverIndexPattern } from './discover_index_pattern'; +import { IndexPatternAttributes } from '../../../../../data/common'; +import { SavedObject } from '../../../../../../core/types'; +import { IndexPatternField, IndexPattern } from '../../../../../data/public'; +import { getDefaultFieldFilter } from './lib/field_filter'; +import { DiscoverSidebar } from './discover_sidebar'; + +export interface DiscoverSidebarResponsiveProps { + /** + * the selected columns displayed in the doc table in discover + */ + columns: string[]; + /** + * a statistics of the distribution of fields in the given hits + */ + fieldCounts: Record; + /** + * hits fetched from ES, displayed in the doc table + */ + hits: Array>; + /** + * List of available index patterns + */ + indexPatternList: Array>; + /** + * Callback function when selecting a field + */ + onAddField: (fieldName: string) => void; + /** + * Callback function when adding a filter from sidebar + */ + onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void; + /** + * Callback function when removing a field + * @param fieldName + */ + onRemoveField: (fieldName: string) => void; + /** + * Currently selected index pattern + */ + selectedIndexPattern?: IndexPattern; + /** + * Callback function to select another index pattern + */ + setIndexPattern: (id: string) => void; + /** + * Shows Add button at all times and not only on focus + */ + mobile?: boolean; + /** + * Shows index pattern and a button that displays the sidebar in a flyout + */ + useFlyout?: boolean; + /** + * Adapt to legacy layout + */ + legacy?: boolean; + /** + * Additional classname used for legacy + */ + sidebarClassName?: string; +} + +export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) { + const [fieldFilter, setFieldFilter] = useState(getDefaultFieldFilter()); + const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); + + if (!props.selectedIndexPattern) { + return null; + } + + const className = props.legacy + ? `dscSidebar dscSidebar__desktop dscCollapsibleSidebar ${props.sidebarClassName}` + : `dscSidebar dscSidebar__desktop`; + + return ( + <> + +
    + +
    +     + +
    +
    +
    + o.attributes.title)} + /> +
    +
    + setIsFlyoutVisible(true)} + > + + + {props.columns[0] === '_source' ? 0 : props.columns.length} + + +
    + {isFlyoutVisible && ( + setIsFlyoutVisible(false)} aria-labelledby="flyoutTitle"> + + + + setIsFlyoutVisible(false)} iconType="arrowLeft" /> + + + +

    + {i18n.translate('discover.fieldList.flyoutHeading', { + defaultMessage: 'Field list', + })} +

    +     +     +     +     + + + +     + )} +     + + ); +} diff --git a/src/plugins/discover/public/application/components/sidebar/index.ts b/src/plugins/discover/public/application/components/sidebar/index.ts index dced08d5a3c31..7575b5691a95a 100644 --- a/src/plugins/discover/public/application/components/sidebar/index.ts +++ b/src/plugins/discover/public/application/components/sidebar/index.ts @@ -18,4 +18,4 @@ */ export { DiscoverSidebar } from './discover_sidebar'; -export { DiscoverSidebarMobile } from './discover_sidebar_mobile'; +export { DiscoverSidebarResponsive } from './discover_sidebar_responsive'; From 789e469761892092a0d10d9b4a4ae124b2c126e8 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Fri, 2 Oct 2020 18:13:38 +0200 Subject: [PATCH 19/26] Fix flyover not showing icons permanetly --- .../components/sidebar/discover_sidebar_responsive.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx index a3d04ed425493..b6622e168ba05 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_responsive.tsx @@ -178,6 +178,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) {...props} fieldFilter={fieldFilter} setFieldFilter={setFieldFilter} + mobile={true} /> From b6d3a935738b01cdc233ae710d7c5705d14be948 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Fri, 2 Oct 2020 15:36:02 -0700 Subject: [PATCH 20/26] update loading screens --- .../public/application/_discover.scss | 13 +- .../application/components/discover.scss | 5 + .../application/components/discover.tsx | 188 +++++++++--------- .../components/discover_legacy.tsx | 2 +- 4 files changed, 103 insertions(+), 105 deletions(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 41f5caaa0977c..4907a67dfa1d7 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -121,18 +121,9 @@ discover-app { padding: $euiSizeXS 0; } -.dscOverlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 20; - padding-top: $euiSizeM; - - opacity: 0.75; +.dscLoading { text-align: center; - background-color: transparent; + padding: $euiSizeL 0; } .dscTable { diff --git a/src/plugins/discover/public/application/components/discover.scss b/src/plugins/discover/public/application/components/discover.scss index 50ede048e72d0..e633c30bcfddc 100644 --- a/src/plugins/discover/public/application/components/discover.scss +++ b/src/plugins/discover/public/application/components/discover.scss @@ -29,3 +29,8 @@ .dscSidebarFlyout__header { align-items: center; } + +.dscLoading { + text-align: center; + padding: $euiSizeL 0; +} diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index d92414708cd86..976c066cae2b2 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -144,105 +144,107 @@ export function Discover({ )} {resultState === 'uninitialized' && } - {resultState === 'loading' && ( - <> - {fetchError && } - {!fetchError && ( -
    - -
    - )} - - )} +
    + {resultState === 'loading' && ( + <> + {fetchError && } + {!fetchError && ( +
    + +
    + )} + + )} - {resultState === 'ready' && ( -
    -
    - - - 0 ? hits : 0} - showResetButton={!!(savedSearch && savedSearch.id)} - onResetQuery={resetQuery} - /> - - - - - - { - toggleChart(e.target.checked); - }} - isSelected={toggleOn} - isEmpty - /> - - -
    + {resultState === 'ready' && ( + <> +
    + + + 0 ? hits : 0} + showResetButton={!!(savedSearch && savedSearch.id)} + onResetQuery={resetQuery} + /> + + + + + + { + toggleChart(e.target.checked); + }} + isSelected={toggleOn} + isEmpty + /> + + +
    -
    - {opts.timefield && toggleOn && ( -
    - {vis && rows.length !== 0 && ( -
    - + {opts.timefield && toggleOn && ( +
    + {vis && rows.length !== 0 && ( +
    + +
    + )} +
    + )} +
    +

    + +

    + {rows && rows.length && ( +
    +
    )}
    - )} -
    -

    - -

    - {rows && rows.length && ( -
    - -
    - )} -
    -
    -
    - )} +
    + + )} +
    diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index b9318d83ef70b..8c27416fee367 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -206,7 +206,7 @@ export function DiscoverLegacy({ {/* @TODO: Solved in the Angular way to satisfy functional test - should be improved*/} {fetchError && } -
    +
    From 8127b20147054d7d71c44e6aceb584a39c60dab3 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 5 Oct 2020 11:00:39 -0700 Subject: [PATCH 21/26] fix empty state --- .../discover/public/application/_discover.scss | 1 + .../angular/directives/_no_results.scss | 2 +- .../public/application/components/discover.tsx | 15 +++++++-------- .../application/components/discover_legacy.tsx | 5 ++--- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 4907a67dfa1d7..1fa54471d9ebe 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -84,6 +84,7 @@ discover-app { flex-direction: column; display: flex; overflow: hidden; + height: calc(100vh - #{$euiSizeXL * 6.5}); @include euiBreakpoint('m', 'l', 'xl') { margin-right: $euiSize; diff --git a/src/plugins/discover/public/application/angular/directives/_no_results.scss b/src/plugins/discover/public/application/angular/directives/_no_results.scss index 85b23ffc79767..5778cbfa3ba7f 100644 --- a/src/plugins/discover/public/application/angular/directives/_no_results.scss +++ b/src/plugins/discover/public/application/angular/directives/_no_results.scss @@ -2,5 +2,5 @@ @include euiBreakpoint('xs', 's') { padding: 0 $euiSizeS; } - max-width: 1000px; + padding: 0 $euiSize; } diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index 976c066cae2b2..a99a5228af7e4 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -136,15 +136,14 @@ export function Discover({ setIndexPattern={setIndexPattern} /> <> - {resultState === 'none' && ( - - )} - {resultState === 'uninitialized' && } -
    + {resultState === 'none' && ( + + )} + {resultState === 'uninitialized' && } {resultState === 'loading' && ( <> {fetchError && } diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index 8c27416fee367..1e87c29c0b2e4 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -181,7 +181,6 @@ export function DiscoverLegacy({ legacy={true} sidebarClassName={sidebarClassName} /> - {/*
    */} {resultState === 'ready' && ( -
    + <> 0 ? hits : 0} @@ -299,7 +298,7 @@ export function DiscoverLegacy({ )}
    -
    + )}
    From 4ad36d93e0a8d14adcdf4ab8e0cd2595b7f7c7f9 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 6 Oct 2020 12:58:08 -0700 Subject: [PATCH 22/26] remove fixed height --- .../discover/public/application/_discover.scss | 14 +++++++++++++- .../components/hits_counter/hits_counter.tsx | 8 +++++++- .../timechart_header/timechart_header.tsx | 8 +++++++- 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 1fa54471d9ebe..ad8d3b88d5a11 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -6,14 +6,27 @@ } .dscAppContainer { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: flex; + flex-direction: column; > * { position: relative; } } + discover-app { flex-grow: 1; } +.dscHitsCounter, +.dscTimeChartHeader { + flex-grow: 0; +} + .dscApp { position: absolute; top: 0; @@ -84,7 +97,6 @@ discover-app { flex-direction: column; display: flex; overflow: hidden; - height: calc(100vh - #{$euiSizeXL * 6.5}); @include euiBreakpoint('m', 'l', 'xl') { margin-right: $euiSize; diff --git a/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx b/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx index 73e2062b3ee9d..c132e8c863f36 100644 --- a/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx +++ b/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx @@ -40,7 +40,13 @@ export interface HitsCounterProps { export function HitsCounter({ hits, showResetButton, onResetQuery }: HitsCounterProps) { return ( - + {formatNumWithCommas(hits)}{' '} diff --git a/src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx b/src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx index 9074de1b5b3d1..ecbc6a48ea816 100644 --- a/src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx +++ b/src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx @@ -101,7 +101,13 @@ export function TimechartHeader({ return ( - + Date: Wed, 7 Oct 2020 12:19:34 +0200 Subject: [PATCH 23/26] Fix infinite scrolling --- .../angular/doc_table/infinite_scroll.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts b/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts index 1d38d0fc534d1..e91e15497f64c 100644 --- a/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts +++ b/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts @@ -30,16 +30,15 @@ export function createInfiniteScrollDirective() { more: '=', }, link: ($scope: LazyScope, $element: JQuery) => { - const $window = $(window); let checkTimer: any; + const scrollDiv = $element.parents('.dscTable'); function onScroll() { if (!$scope.more) return; - const winHeight = Number($window.height()); - const winBottom = Number(winHeight) + Number($window.scrollTop()); - const offset = $element.offset(); - const elTop = offset ? offset.top : 0; + const winHeight = Number(scrollDiv.height()); + const winBottom = Number(winHeight) + Number(scrollDiv.scrollTop()); + const elTop = $element.get(0).offsetTop || 0; const remaining = elTop - winBottom; if (remaining <= winHeight * 0.5) { @@ -57,10 +56,10 @@ export function createInfiniteScrollDirective() { }, 50); } - $window.on('scroll', scheduleCheck); + scrollDiv.on('scroll', scheduleCheck); $scope.$on('$destroy', function () { clearTimeout(checkTimer); - $window.off('scroll', scheduleCheck); + $(scrollDiv).off('scroll', scheduleCheck); }); scheduleCheck(); }, From 429e4a4bdaacb468be0035c029ccab8504ce2547 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 7 Oct 2020 15:41:31 +0200 Subject: [PATCH 24/26] Adapt infinite scrolling, allow user to hide chart in legacy --- .../public/application/angular/discover.js | 6 +- .../angular/doc_table/infinite_scroll.ts | 16 ++++- .../components/discover_legacy.tsx | 70 ++++++++++++++----- 3 files changed, 65 insertions(+), 27 deletions(-) diff --git a/src/plugins/discover/public/application/angular/discover.js b/src/plugins/discover/public/application/angular/discover.js index 5691d1010f4d0..5c6877107a258 100644 --- a/src/plugins/discover/public/application/angular/discover.js +++ b/src/plugins/discover/public/application/angular/discover.js @@ -191,7 +191,7 @@ app.directive('discoverApp', function () { }; }); -function discoverController($element, $route, $scope, $timeout, $window, Promise, uiCapabilities) { +function discoverController($element, $route, $scope, $timeout, Promise, uiCapabilities) { const { isDefault: isDefaultType } = indexPatternsUtils; const subscriptions = new Subscription(); const $fetchObservable = new Subject(); @@ -1037,10 +1037,6 @@ function discoverController($element, $route, $scope, $timeout, $window, Promise setAppState({ columnsWidth: colSize }); }; - $scope.scrollToTop = function () { - $window.scrollTo(0, 0); - }; - async function setupVisualization() { // If no timefield has been specified we don't create a histogram of messages if (!getTimeField()) return; diff --git a/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts b/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts index e91e15497f64c..d8fa990d0701a 100644 --- a/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts +++ b/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts @@ -31,13 +31,21 @@ export function createInfiniteScrollDirective() { }, link: ($scope: LazyScope, $element: JQuery) => { let checkTimer: any; + /** + * depending on which version of Discover is displayed, different elements are scrolling + * and have therefore to be considered for calculation of infinite scrolling + */ const scrollDiv = $element.parents('.dscTable'); + const scrollDivMobile = $element.parents('.dscApp__frame'); function onScroll() { if (!$scope.more) return; + const usedScrollDiv = document.getElementsByClassName('dscSidebar__mobile').length + ? scrollDivMobile + : scrollDiv; - const winHeight = Number(scrollDiv.height()); - const winBottom = Number(winHeight) + Number(scrollDiv.scrollTop()); + const winHeight = Number(usedScrollDiv.height()); + const winBottom = Number(winHeight) + Number(usedScrollDiv.scrollTop()); const elTop = $element.get(0).offsetTop || 0; const remaining = elTop - winBottom; @@ -57,9 +65,11 @@ export function createInfiniteScrollDirective() { } scrollDiv.on('scroll', scheduleCheck); + scrollDivMobile.on('scroll', scheduleCheck); $scope.$on('$destroy', function () { clearTimeout(checkTimer); - $(scrollDiv).off('scroll', scheduleCheck); + scrollDiv.off('scroll', scheduleCheck); + scrollDivMobile.off('scroll', scheduleCheck); }); scheduleCheck(); }, diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index 1e87c29c0b2e4..d71d4169e3e8e 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -18,7 +18,14 @@ */ import React, { useState, useCallback, useEffect } from 'react'; import classNames from 'classnames'; -import { EuiButtonEmpty, EuiButtonIcon, EuiHideFor } from '@elastic/eui'; +import { + EuiButtonEmpty, + EuiButtonIcon, + EuiButtonToggle, + EuiFlexGroup, + EuiFlexItem, + EuiHideFor, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { IUiSettingsClient, MountPoint } from 'kibana/public'; @@ -48,7 +55,7 @@ import { SavedSearch } from '../../saved_searches'; import { SavedObject } from '../../../../../core/types'; import { Vis } from '../../../../visualizations/public'; import { TopNavMenuData } from '../../../../navigation/public'; -import { DiscoverSidebarResponsive } from './sidebar/discover_sidebar_responsive'; +import { DiscoverSidebarResponsive } from './sidebar'; export interface DiscoverLegacyProps { addColumn: (column: string) => void; @@ -122,6 +129,7 @@ export function DiscoverLegacy({ updateSavedQueryId, vis, }: DiscoverLegacyProps) { + const [toggleOn, toggleChart] = useState(true); const [isSidebarClosed, setIsSidebarClosed] = useState(false); const { TopNavMenu } = getServices().navigation.ui; const { savedSearch, indexPatternList } = opts; @@ -212,23 +220,43 @@ export function DiscoverLegacy({ {resultState === 'ready' && ( <> - 0 ? hits : 0} - showResetButton={!!(savedSearch && savedSearch.id)} - onResetQuery={resetQuery} - /> - {opts.timefield && ( - - )} +
    + + + 0 ? hits : 0} + showResetButton={!!(savedSearch && savedSearch.id)} + onResetQuery={resetQuery} + /> + + + + + + { + toggleChart(e.target.checked); + }} + isSelected={toggleOn} + isEmpty + /> + + +
    - {opts.timefield && ( + {toggleOn && opts.timefield && (
    - window.scrollTo(0, 0)}> + { + ev.currentTarget.parentNode.parentNode.parentNode.scrollTo(0, 0); + }} + > Date: Wed, 7 Oct 2020 08:28:31 -0700 Subject: [PATCH 25/26] couple of tiny styling fixes --- src/plugins/discover/public/application/_discover.scss | 3 +++ .../discover/public/application/components/discover_legacy.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index ad8d3b88d5a11..2c71886ab3d6f 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -148,6 +148,9 @@ discover-app { font-family: $euiCodeFontFamily; font-size: $euiFontSizeXS; } + tr:first-child { + border-bottom: 1px solid $euiColorLightShade; + } } .dscTable__footer { diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index d71d4169e3e8e..6450b9933a795 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -221,7 +221,7 @@ export function DiscoverLegacy({ <>
    - + Date: Wed, 7 Oct 2020 08:35:32 -0700 Subject: [PATCH 26/26] revert --- src/plugins/discover/public/application/_discover.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss index 2c71886ab3d6f..ad8d3b88d5a11 100644 --- a/src/plugins/discover/public/application/_discover.scss +++ b/src/plugins/discover/public/application/_discover.scss @@ -148,9 +148,6 @@ discover-app { font-family: $euiCodeFontFamily; font-size: $euiFontSizeXS; } - tr:first-child { - border-bottom: 1px solid $euiColorLightShade; - } } .dscTable__footer {