in src/plugins/discover/public/application/components/discover_legacy.tsx [105:326]
export function DiscoverLegacy({
addColumn,
fetch,
fetchCounter,
fieldCounts,
histogramData,
hits,
indexPattern,
minimumVisibleRows,
onAddFilter,
onChangeInterval,
onMoveColumn,
onRemoveColumn,
onSkipBottomButtonClick,
onSort,
opts,
resetQuery,
resultState,
rows,
searchSource,
setIndexPattern,
showSaveQuery,
state,
timefilterUpdateHandler,
timeRange,
topNavMenu,
updateQuery,
updateSavedQueryId,
vis,
}: DiscoverLegacyProps) {
const [isSidebarClosed, setIsSidebarClosed] = useState(false);
const { TopNavMenu } = getServices().navigation.ui;
const { savedSearch, indexPatternList } = opts;
const bucketAggConfig = vis?.data?.aggs?.aggs[1];
const bucketInterval =
bucketAggConfig && search.aggs.isDateHistogramBucketAggConfig(bucketAggConfig)
? bucketAggConfig.buckets?.getInterval()
: undefined;
const [fixedScrollEl, setFixedScrollEl] = useState<HTMLElement | undefined>();
useEffect(() => (fixedScrollEl ? opts.fixedScroll(fixedScrollEl) : undefined), [
fixedScrollEl,
opts,
]);
const fixedScrollRef = useCallback(
(node: HTMLElement) => {
if (node !== null) {
setFixedScrollEl(node);
}
},
[setFixedScrollEl]
);
const sidebarClassName = classNames({
closed: isSidebarClosed,
});
const mainSectionClassName = classNames({
'col-md-10': !isSidebarClosed,
'col-md-12': isSidebarClosed,
});
return (
<I18nProvider>
<div className="dscAppContainer" data-fetch-counter={fetchCounter}>
<h1 className="euiScreenReaderOnly">{savedSearch.title}</h1>
<TopNavMenu
appName="discover"
config={topNavMenu}
indexPatterns={[indexPattern]}
onQuerySubmit={updateQuery}
onSavedQueryIdChange={updateSavedQueryId}
query={state.query}
setMenuMountPoint={opts.setHeaderActionMenu}
savedQueryId={state.savedQuery}
screenTitle={savedSearch.title}
showDatePicker={indexPattern.isTimeBased()}
showSaveQuery={showSaveQuery}
showSearchBar={true}
useDefaultBehaviors={true}
/>
<main className="container-fluid">
<div className="row">
<div
className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
id="discover-sidebar"
data-test-subj="discover-sidebar"
>
{!isSidebarClosed && (
<div className="dscFieldChooser">
<DiscoverSidebar
columns={state.columns || []}
fieldCounts={fieldCounts}
hits={rows}
indexPatternList={indexPatternList}
onAddField={addColumn}
onAddFilter={onAddFilter}
onRemoveField={onRemoveColumn}
selectedIndexPattern={searchSource && searchSource.getField('index')}
setIndexPattern={setIndexPattern}
/>
</div>
)}
<EuiButtonIcon
iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
iconSize="m"
size="s"
onClick={() => setIsSidebarClosed(!isSidebarClosed)}
data-test-subj="collapseSideBarButton"
aria-controls="discover-sidebar"
aria-expanded={isSidebarClosed ? 'false' : 'true'}
aria-label="Toggle sidebar"
className="dscCollapsibleSidebar__collapseButton"
/>
</div>
<div className={`dscWrapper ${mainSectionClassName}`}>
{resultState === 'none' && (
<DiscoverNoResults
timeFieldName={opts.timefield}
queryLanguage={state.query ? state.query.language : ''}
/>
)}
{resultState === 'uninitialized' && <DiscoverUninitialized onRefresh={fetch} />}
{/* @TODO: Solved in the Angular way to satisfy functional test - should be improved*/}
<span style={{ display: resultState !== 'loading' ? 'none' : '' }}>
<div className="dscOverlay">
<LoadingSpinner />
</div>
</span>
{resultState === 'ready' && (
<div className="dscWrapper__content">
<SkipBottomButton onClick={onSkipBottomButtonClick} />
<HitsCounter
hits={hits > 0 ? hits : 0}
showResetButton={!!(savedSearch && savedSearch.id)}
onResetQuery={resetQuery}
/>
{opts.timefield && (
<TimechartHeader
dateFormat={opts.config.get('dateFormat')}
timeRange={timeRange}
options={search.aggs.intervalOptions}
onChangeInterval={onChangeInterval}
stateInterval={state.interval || ''}
bucketInterval={bucketInterval}
/>
)}
{opts.timefield && (
<section
aria-label={i18n.translate('discover.histogramOfFoundDocumentsAriaLabel', {
defaultMessage: 'Histogram of found documents',
})}
className="dscTimechart"
>
{vis && rows.length !== 0 && (
<div className="dscHistogram" data-test-subj="discoverChart">
<DiscoverHistogram
chartData={histogramData}
timefilterUpdateHandler={timefilterUpdateHandler}
/>
</div>
)}
</section>
)}
<div className="dscResults">
<section
className="dscTable dscTableFixedScroll"
aria-labelledby="documentsAriaLabel"
ref={fixedScrollRef}
>
<h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
<FormattedMessage
id="discover.documentsAriaLabel"
defaultMessage="Documents"
/>
</h2>
{rows && rows.length && (
<div className="dscDiscover">
<DocTableLegacy
columns={state.columns || []}
indexPattern={indexPattern}
minimumVisibleRows={minimumVisibleRows}
rows={rows}
sort={state.sort || []}
searchDescription={opts.savedSearch.description}
searchTitle={opts.savedSearch.lastSavedTitle}
onAddColumn={addColumn}
onFilter={onAddFilter}
onMoveColumn={onMoveColumn}
onRemoveColumn={onRemoveColumn}
onSort={onSort}
/>
<a tabIndex={0} id="discoverBottomMarker">
​
</a>
{rows.length === opts.sampleSize && (
<div
className="dscTable__footer"
data-test-subj="discoverDocTableFooter"
>
<FormattedMessage
id="discover.howToSeeOtherMatchingDocumentsDescription"
defaultMessage="These are the first {sampleSize} documents matching
your search, refine your search to see others."
values={{ sampleSize: opts.sampleSize }}
/>
<EuiButtonEmpty onClick={() => window.scrollTo(0, 0)}>
<FormattedMessage
id="discover.backToTopLinkText"
defaultMessage="Back to top."
/>
</EuiButtonEmpty>
</div>
)}
</div>
)}
</section>
</div>
</div>
)}