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);