[SIEM] Overview page feedback

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