[7.6] [SIEM] Overview page feedback (#56261)

x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx

@@ -6,6 +6,7 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { ScaleType } from '@elastic/charts';
+import styled from 'styled-components';
 
 import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSelect, EuiSpacer } from '@elastic/eui';
 import { noop } from 'lodash/fp';
@@ -25,8 +26,21 @@ import {
 import { ChartSeriesData } from '../charts/common';
 import { InspectButtonContainer } from '../inspect';
 
+const DEFAULT_PANEL_HEIGHT = 300;
+
+const HeaderChildrenFlexItem = styled(EuiFlexItem)`
+  margin-left: 24px;
+`;
+
+const HistogramPanel = styled(Panel)<{ height?: number }>`
+  display: flex;
+  flex-direction: column;
+  ${({ height }) => (height != null ? `height: ${height}px;` : '')}
+`;
+
 export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
   MatrixHistogramQueryProps> = ({
+  chartHeight,
   dataKey,
   defaultStackByOption,
   endDate,
@@ -43,6 +57,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
   isInspected,
   legendPosition = 'right',
   mapping,
+  panelHeight = DEFAULT_PANEL_HEIGHT,
   query,
   scaleType = ScaleType.Time,
   setQuery,
@@ -56,6 +71,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
   yTickFormatter,
 }) => {
   const barchartConfigs = getBarchartConfigs({
+    chartHeight,
     from: startDate,
     legendPosition,
     to: endDate,
@@ -143,7 +159,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
   return (
     <>
       <InspectButtonContainer show={!isInitialLoading}>
-        <Panel data-test-subj={`${id}Panel`}>
+        <HistogramPanel data-test-subj={`${id}Panel`} height={panelHeight}>
           {loading && !isInitialLoading && (
             <EuiProgress
               data-test-subj="initialLoadingPanelMatrixOverTime"
@@ -155,15 +171,33 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
 
           {isInitialLoading ? (
             <>
-              <HeaderSection id={id} title={titleWithStackByField} />
+              <HeaderSection
+                id={id}
+                title={titleWithStackByField}
+                subtitle={!loading && (totalCount >= 0 ? subtitleWithCounts : null)}
+              >
+                <EuiFlexGroup alignItems="center" gutterSize="none">
+                  <EuiFlexItem grow={false}>
+                    {stackByOptions?.length > 1 && (
+                      <EuiSelect
+                        onChange={setSelectedChartOptionCallback}
+                        options={stackByOptions}
+                        prepend={i18n.STACK_BY}
+                        value={selectedStackByOption?.value}
+                      />
+                    )}
+                  </EuiFlexItem>
+                  <HeaderChildrenFlexItem grow={false}>{headerChildren}</HeaderChildrenFlexItem>
+                </EuiFlexGroup>
+              </HeaderSection>
               <MatrixLoader />
             </>
           ) : (
             <>
               <HeaderSection
                 id={id}
                 title={titleWithStackByField}
-                subtitle={!loading && (totalCount >= 0 ? subtitleWithCounts : null)}
+                subtitle={!isInitialLoading && (totalCount >= 0 ? subtitleWithCounts : null)}
               >
                 <EuiFlexGroup alignItems="center" gutterSize="none">
                   <EuiFlexItem grow={false}>
@@ -176,13 +210,13 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
                       />
                     )}
                   </EuiFlexItem>
-                  <EuiFlexItem grow={false}>{headerChildren}</EuiFlexItem>
+                  <HeaderChildrenFlexItem grow={false}>{headerChildren}</HeaderChildrenFlexItem>
                 </EuiFlexGroup>
               </HeaderSection>
               <BarChart barChart={barChartData} configs={barchartConfigs} />
             </>
           )}
-        </Panel>
+        </HistogramPanel>
       </InspectButtonContainer>
       <EuiSpacer size="l" />
     </>

x-pack/legacy/plugins/siem/public/components/matrix_histogram/matrix_loader.tsx

@@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import styled from 'styled-components';
 
 const StyledEuiFlexGroup = styled(EuiFlexGroup)`
-  height: 350px; /* to avoid jump when histogram loads */
+  flex 1;
 `;
 
 const MatrixLoaderComponent = () => (

x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts

@@ -31,6 +31,7 @@ export type GetSubTitle = (count: number) => string;
 export type GetTitle = (matrixHistogramOption: MatrixHistogramOption) => string;
 
 export interface MatrixHistogramBasicProps {
+  chartHeight?: number;
   defaultIndex: string[];
   defaultStackByOption: MatrixHistogramOption;
   endDate: number;
@@ -39,6 +40,7 @@ export interface MatrixHistogramBasicProps {
   id: string;
   legendPosition?: Position;
   mapping?: MatrixHistogramMappingTypes;
+  panelHeight?: number;
   setQuery: SetQuery;
   sourceId: string;
   startDate: number;

x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts

@@ -11,6 +11,7 @@ import { MatrixHistogramDataTypes, MatrixHistogramMappingTypes } from './types';
 import { histogramDateTimeFormatter } from '../utils';
 
 interface GetBarchartConfigsProps {
+  chartHeight?: number;
   from: number;
   legendPosition?: Position;
   to: number;
@@ -20,7 +21,10 @@ interface GetBarchartConfigsProps {
   showLegend?: boolean;
 }
 
+export const DEFAULT_CHART_HEIGHT = 174;
+
 export const getBarchartConfigs = ({
+  chartHeight,
   from,
   legendPosition,
   to,
@@ -65,7 +69,7 @@ export const getBarchartConfigs = ({
       },
     },
   },
-  customHeight: 324,
+  customHeight: chartHeight ?? DEFAULT_CHART_HEIGHT,
 });
 
 export const formatToChartDataItem = ([key, value]: [

x-pack/legacy/plugins/siem/public/components/news_feed/news_feed.tsx

@@ -4,39 +4,42 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import React from 'react';
 
-import { NoNews } from './no_news';
+import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
 import { NEWS_FEED_TITLE } from '../../pages/overview/translations';
-import { Post } from './post';
 import { SidebarHeader } from '../sidebar_header';
+
+import { NoNews } from './no_news';
+import { Post } from './post';
 import { NewsItem } from './types';
 
 interface Props {
   news: NewsItem[] | null | undefined;
 }
 
-export const NewsFeed = React.memo<Props>(({ news }) => {
-  if (news == null) {
-    return <EuiLoadingSpinner size="m" />;
-  }
-
-  if (news.length === 0) {
-    return <NoNews />;
-  }
+const SHOW_PLACEHOLDERS = 5;
+const LINES_PER_LOADING_PLACEHOLDER = 4;
 
-  return (
-    <>
-      <SidebarHeader title={NEWS_FEED_TITLE} />
-      {news.map((n: NewsItem) => (
+const NewsFeedComponent: React.FC<Props> = ({ news }) => (
+  <>
+    <SidebarHeader title={NEWS_FEED_TITLE} />
+    {news == null ? (
+      <LoadingPlaceholders lines={LINES_PER_LOADING_PLACEHOLDER} placeholders={SHOW_PLACEHOLDERS} />
+    ) : news.length === 0 ? (
+      <NoNews />
+    ) : (
+      news.map((n: NewsItem) => (
         <React.Fragment key={n.hash}>
           <Post newsItem={n} />
           <EuiSpacer size="l" />
         </React.Fragment>
-      ))}
-    </>
-  );
-});
+      ))
+    )}
+  </>
+);
+
+NewsFeedComponent.displayName = 'NewsFeedComponent';
 
-NewsFeed.displayName = 'NewsFeed';
+export const NewsFeed = React.memo(NewsFeedComponent);

x-pack/legacy/plugins/siem/public/components/news_feed/no_news/index.tsx

@@ -12,7 +12,7 @@ import * as i18n from '../translations';
 export const NoNews = React.memo(() => (
   <>
     <EuiText color="subdued" size="s">
-      {i18n.NO_NEWS_MESSAGE}
+      {i18n.NO_NEWS_MESSAGE}{' '}
       <EuiLink href={'/app/kibana#/management/kibana/settings'}>
         {i18n.ADVANCED_SETTINGS_LINK_TITLE}
       </EuiLink>

x-pack/legacy/plugins/siem/public/components/news_feed/translations.ts

@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
 
 export const NO_NEWS_MESSAGE = i18n.translate('xpack.siem.newsFeed.noNewsMessage', {
   defaultMessage:
-    'Your current News feed URL returned no recent news. You may update the URL or disable security news via',
+    'Your current news feed URL returned no recent news. You may update the URL or disable security news via',
 });
 
 export const ADVANCED_SETTINGS_LINK_TITLE = i18n.translate(

x-pack/legacy/plugins/siem/public/components/page/overview/loading_placeholders/index.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiLoadingContent, EuiSpacer } from '@elastic/eui';
+import React from 'react';
+
+const LoadingPlaceholdersComponent: React.FC<{
+  lines: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+  placeholders: number;
+}> = ({ lines, placeholders }) => (
+  <>
+    {[...Array(placeholders).keys()].map((_, i) => (
+      <React.Fragment key={i}>
+        <EuiLoadingContent lines={lines} />
+        {i !== placeholders - 1 && <EuiSpacer size="l" />}
+      </React.Fragment>
+    ))}
+  </>
+);
+
+LoadingPlaceholdersComponent.displayName = 'LoadingPlaceholdersComponent';
+
+export const LoadingPlaceholders = React.memo(LoadingPlaceholdersComponent);