github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Improve security alerts t-grid loading and empty state (#108527) (#108684)

Browse source
This commit is contained in:
Pablo Machado 2021-08-16 16:51:39 +02:00 • committed by GitHub
parent d7d3f80e55
commit 6da50b99a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

107
x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx
View file

@ -8,18 +8,20 @@
import type { AlertConsumers as AlertConsumersTyped } from '@kbn/rule-data-utils';
// @ts-expect-error
import { AlertConsumers as AlertConsumersNonTyped } from '@kbn/rule-data-utils/target_node/alerts_as_data_rbac';
import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiProgress } from '@elastic/eui';
import { isEmpty } from 'lodash/fp';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import { useDispatch } from 'react-redux';
import { FormattedMessage } from '@kbn/i18n/react';
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
import { Direction, EntityType } from '../../../../common/search_strategy';
import type { DocValueFields } from '../../../../common/search_strategy';
import type { CoreStart } from '../../../../../../../src/core/public';
import type { BrowserFields } from '../../../../common/search_strategy/index_fields';
import { TGridCellAction, TimelineId, TimelineTabs } from '../../../../common/types/timeline';
import type {
CellValueElementProps,
ColumnHeaderOptions,
@ -66,6 +68,7 @@ const TitleText = styled.span`
const StyledEuiPanel = styled(EuiPanel)<{ $isFullScreen: boolean }>`
display: flex;
flex-direction: column;
position: relative;
${({ $isFullScreen }) =>
$isFullScreen &&
@ -310,6 +313,8 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
return (
<InspectButtonContainer>
<StyledEuiPanel data-test-subj="events-viewer-panel" $isFullScreen={globalFullScreen}>
{loading && <EuiProgress size="xs" position="absolute" color="accent" />}
{canQueryTimeline ? (
<>
<HeaderSection
@ -335,44 +340,68 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
<FullWidthFlexGroup $visible={!graphEventId} gutterSize="none">
<ScrollableFlexItem grow={1}>
<StatefulBody
activePage={pageInfo.activePage}
browserFields={browserFields}
filterQuery={filterQuery}
data={nonDeletedEvents}
defaultCellActions={defaultCellActions}
id={id}
isEventViewer={true}
loadPage={loadPage}
onRuleChange={onRuleChange}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
tabType={TimelineTabs.query}
totalPages={calculateTotalPages({
itemsCount: totalCountMinusDeleted,
itemsPerPage,
})}
totalItems={totalCountMinusDeleted}
unit={unit}
filterStatus={filterStatus}
leadingControlColumns={leadingControlColumns}
trailingControlColumns={trailingControlColumns}
refetch={refetch}
indexNames={indexNames}
/>
<Footer
activePage={pageInfo.activePage}
data-test-subj="events-viewer-footer"
height={footerHeight}
id={id}
isLive={isLive}
isLoading={loading}
itemsCount={nonDeletedEvents.length}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
onChangePage={loadPage}
totalCount={totalCountMinusDeleted}
/>
{nonDeletedEvents.length === 0 && loading === false ? (
<EuiEmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.timelines.tGrid.noResultsMatchSearchCriteriaTitle"
defaultMessage="No results match your search criteria"
/>
</h2>
}
titleSize="s"
body={
<p>
<FormattedMessage
id="xpack.timelines.tGrid.noResultsMatchSearchCriteriaDescription"
defaultMessage="Try searching over a longer period of time or modifying your search."
/>
</p>
}
/>
) : (
<>
<StatefulBody
activePage={pageInfo.activePage}
browserFields={browserFields}
filterQuery={filterQuery}
data={nonDeletedEvents}
defaultCellActions={defaultCellActions}
id={id}
isEventViewer={true}
loadPage={loadPage}
onRuleChange={onRuleChange}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
tabType={TimelineTabs.query}
totalPages={calculateTotalPages({
itemsCount: totalCountMinusDeleted,
itemsPerPage,
})}
totalItems={totalCountMinusDeleted}
unit={unit}
filterStatus={filterStatus}
leadingControlColumns={leadingControlColumns}
trailingControlColumns={trailingControlColumns}
refetch={refetch}
indexNames={indexNames}
/>
<Footer
activePage={pageInfo.activePage}
data-test-subj="events-viewer-footer"
height={footerHeight}
id={id}
isLive={isLive}
isLoading={loading}
itemsCount={nonDeletedEvents.length}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
onChangePage={loadPage}
totalCount={totalCountMinusDeleted}
/>
</>
)}
</ScrollableFlexItem>
</FullWidthFlexGroup>
</EventsContainerLoading>

3
x-pack/plugins/timelines/public/container/index.tsx
View file

@ -212,7 +212,6 @@ export const useTimelineEvents = ({
.subscribe({
next: (response) => {
if (isCompleteResponse(response)) {
setLoading(false);
setTimelineResponse((prevResponse) => {
const newTimelineResponse = {
...prevResponse,
@ -225,6 +224,8 @@ export const useTimelineEvents = ({
setUpdated(newTimelineResponse.updatedAt);
return newTimelineResponse;
});
setLoading(false);
searchSubscription$.current.unsubscribe();
} else if (isErrorResponse(response)) {
setLoading(false);