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

elastic · Aug 16, 2021 · c2d5d1b · c2d5d1b
1 parent cb40692
commit c2d5d1b
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 40 deletions.
diff --git a/x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx
@@ -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>

diff --git a/x-pack/plugins/timelines/public/container/index.tsx b/x-pack/plugins/timelines/public/container/index.tsx
@@ -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);