Skip to content

Commit

Permalink
added design changes for sidebar (#1061)
Browse files Browse the repository at this point in the history 
Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
  • Loading branch information
@sumukhswamy
sumukhswamy committed Oct 2, 2023
1 parent 6ef3f4b commit 97cf106
Show file tree
Hide file tree
Showing 6 changed files with 13,879 additions and 9,723 deletions.
335 changes: 171 additions & 164 deletions public/components/event_analytics/explorer/explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import {
EuiHorizontalRule,
EuiLink,
EuiLoadingSpinner,
EuiPage,
EuiPageBody,
EuiPageSideBar,
EuiPanel,
EuiSpacer,
EuiTabbedContent,
Expand Down Expand Up @@ -414,7 +417,7 @@ export const Explorer = ({
});

const mainSectionClassName = classNames({
'col-md-10': !isSidebarClosed,
'col-md-8': !isSidebarClosed,
'col-md-12': isSidebarClosed,
});

Expand Down Expand Up @@ -468,172 +471,176 @@ export const Explorer = ({
const mainContent = useMemo(() => {
return (
<>
<div
className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
id="discover-sidebar"
data-test-subj="eventExplorer__sidebar"
>
{!isSidebarClosed && (
<div className="explorerFieldSelector">
<Sidebar
query={query}
explorerFields={explorerFields}
explorerData={explorerData}
selectedTimestamp={query[SELECTED_TIMESTAMP]}
selectedPattern={query[SELECTED_PATTERN_FIELD]}
handleOverrideTimestamp={handleOverrideTimestamp}
handleOverridePattern={handleOverridePattern}
isOverridingTimestamp={isOverridingTimestamp}
isOverridingPattern={isOverridingPattern}
isFieldToggleButtonDisabled={
isEmpty(explorerData.jsonData) ||
!isEmpty(queryRef.current![RAW_QUERY].match(PPL_STATS_REGEX))
}
storedExplorerFields={
storedExplorerFields.availableFields.length > 0
? storedExplorerFields
: explorerFields
}
setStoredExplorerFields={setStoredExplorerFields}
/>
</div>
)}
<EuiButtonIcon
iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
iconSize="m"
size="s"
onClick={() => {
setIsSidebarClosed((staleState) => {
return !staleState;
});
}}
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}`}>
{explorerData && !isEmpty(explorerData.jsonData) ? (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
{countDistribution?.data && !isLiveTailOnRef.current && (
<>
<HitsCounter
hits={_.sum(countDistribution.data['count()'])}
showResetButton={false}
onResetQuery={() => {}}
/>
<TimechartHeader
options={timeIntervalOptions}
onChangeInterval={(selectedIntrv) => {
const intervalOptionsIndex = timeIntervalOptions.findIndex(
(item) => item.value === selectedIntrv
);
const intrv = selectedIntrv.replace(/^auto_/, '');
getCountVisualizations(intrv);
selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
getPatterns(intrv, getErrorHandler('Error fetching patterns'));
}}
stateInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
<CountDistribution
countDistribution={countDistribution}
selectedInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
</>
)}
<EuiPage>
<EuiPageSideBar
className="euiPage--paddingMedium .euiPageSideBar"
id="discover-sidebar"
data-test-subj="eventExplorer__sidebar"
sticky
>
{!isSidebarClosed && (
<div className="explorerFieldSelector">
<Sidebar
query={query}
explorerFields={explorerFields}
explorerData={explorerData}
selectedTimestamp={query[SELECTED_TIMESTAMP]}
selectedPattern={query[SELECTED_PATTERN_FIELD]}
handleOverrideTimestamp={handleOverrideTimestamp}
handleOverridePattern={handleOverridePattern}
isOverridingTimestamp={isOverridingTimestamp}
isOverridingPattern={isOverridingPattern}
isFieldToggleButtonDisabled={
isEmpty(explorerData.jsonData) ||
!isEmpty(queryRef.current![RAW_QUERY].match(PPL_STATS_REGEX))
}
storedExplorerFields={
storedExplorerFields.availableFields.length > 0
? storedExplorerFields
: explorerFields
}
setStoredExplorerFields={setStoredExplorerFields}
/>
</div>
)}
<EuiButtonIcon
iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
iconSize="m"
size="s"
onClick={() => {
setIsSidebarClosed((staleState) => {
return !staleState;
});
}}
data-test-subj="collapseSideBarButton"
aria-controls="discover-sidebar"
aria-expanded={isSidebarClosed ? 'false' : 'true'}
aria-label="Toggle sidebar"
className="dscCollapsibleSidebar__collapseButton"
/>
</EuiPageSideBar>
<EuiPageBody className={`dscWrapper ${mainSectionClassName}`}>
{explorerData && !isEmpty(explorerData.jsonData) ? (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
{countDistribution?.data && !isLiveTailOnRef.current && (
<>
<HitsCounter
hits={_.sum(countDistribution.data['count()'])}
showResetButton={false}
onResetQuery={() => {}}
/>
<TimechartHeader
options={timeIntervalOptions}
onChangeInterval={(selectedIntrv) => {
const intervalOptionsIndex = timeIntervalOptions.findIndex(
(item) => item.value === selectedIntrv
);
const intrv = selectedIntrv.replace(/^auto_/, '');
getCountVisualizations(intrv);
selectedIntervalRef.current =
timeIntervalOptions[intervalOptionsIndex];
getPatterns(intrv, getErrorHandler('Error fetching patterns'));
}}
stateInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
<CountDistribution
countDistribution={countDistribution}
selectedInterval={selectedIntervalRef.current?.value}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
/>
</>
)}
</EuiPanel>
</EuiPanel>
</EuiPanel>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
<LogPatterns
selectedIntervalUnit={selectedIntervalRef.current}
handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
/>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
<LogPatterns
selectedIntervalUnit={selectedIntervalRef.current}
handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
/>
</EuiPanel>
</EuiPanel>
</EuiPanel>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
<section
className="dscTable dscTableFixedScroll"
aria-labelledby="documentsAriaLabel"
>
<h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
<FormattedMessage
id="discover.documentsAriaLabel"
defaultMessage="Documents"
/>
</h2>
<div className="dscDiscover">
{isLiveTailOnRef.current && (
<>
<EuiSpacer size="m" />
<EuiFlexGroup
justifyContent="center"
alignItems="center"
gutterSize="m"
>
<EuiLoadingSpinner size="l" />
<EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
<strong>&nbsp;&nbsp;Live streaming</strong>
</EuiText>
<EuiFlexItem grow={false}>
<HitsCounter
hits={totalHits}
showResetButton={false}
onResetQuery={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
</>
)}
<DataGrid
http={http}
pplService={pplService}
rows={explorerData.jsonData}
rowsAll={explorerData.jsonDataAll}
explorerFields={explorerFields}
timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
totalHits={_.sum(countDistribution.data['count()'])}
requestParams={requestParams}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
storedSelectedColumns={
storedExplorerFields.selectedFields.length > 0
? storedExplorerFields.selectedFields
: DEFAULT_EMPTY_EXPLORER_FIELDS
}
/>
<a tabIndex={0} id="discoverBottomMarker">
&#8203;
</a>
</div>
</section>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
<EuiPanel paddingSize="s" style={{ height: '100%' }}>
<section
className="dscTable dscTableFixedScroll"
aria-labelledby="documentsAriaLabel"
>
<h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
<FormattedMessage
id="discover.documentsAriaLabel"
defaultMessage="Documents"
/>
</h2>
<div className="dscDiscover">
{isLiveTailOnRef.current && (
<>
<EuiSpacer size="m" />
<EuiFlexGroup
justifyContent="center"
alignItems="center"
gutterSize="m"
>
<EuiLoadingSpinner size="l" />
<EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
<strong>&nbsp;&nbsp;Live streaming</strong>
</EuiText>
<EuiFlexItem grow={false}>
<HitsCounter
hits={totalHits}
showResetButton={false}
onResetQuery={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
</>
)}
<DataGrid
http={http}
pplService={pplService}
rows={explorerData.jsonData}
rowsAll={explorerData.jsonDataAll}
explorerFields={explorerFields}
timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
totalHits={_.sum(countDistribution.data['count()'])}
requestParams={requestParams}
startTime={appLogEvents ? startTime : dateRange[0]}
endTime={appLogEvents ? endTime : dateRange[1]}
storedSelectedColumns={
storedExplorerFields.selectedFields.length > 0
? storedExplorerFields.selectedFields
: DEFAULT_EMPTY_EXPLORER_FIELDS
}
/>
<a tabIndex={0} id="discoverBottomMarker">
&#8203;
</a>
</div>
</section>
</EuiPanel>
</EuiPanel>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<NoResults />
)}
</div>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<NoResults />
)}
</EuiPageBody>
</EuiPage>
</>
);
}, [
Expand Down
Loading

0 comments on commit 97cf106

Please sign in to comment.