Skip to content

Commit

Permalink
[SIEM] Overview: Recent cases widget (#60993) (#61029)
Browse files Browse the repository at this point in the history
## [SIEM] Overview: Recent cases widget

Implements the new `Recent cases` widget on the Overview page.

Recent cases shows the last 3 recently created cases, per the following animated gif:

![recent-cases](https://user-images.githubusercontent.com/4459398/77357982-ae550a80-6d0e-11ea-90d0-62fa5407eea5.gif)

### Markdown case descriptions

Markdown case descriptions are rendered, per the following animated gif:

![markdown-description](https://user-images.githubusercontent.com/4459398/77358163-f7a55a00-6d0e-11ea-8b85-dd4b3ff093ee.gif)

### My recently reported cases

My recently reported cases filters the widget to show only cases created by the logged-in user, per the following animated gif:

![my-recent-cases](https://user-images.githubusercontent.com/4459398/77358223-14419200-6d0f-11ea-8e4a-25cd55fdfc44.gif)

### No cases state

A message welcoming the user to create a case is displayed when no cases exist, per the following screenshot:

![no-cases-created](https://user-images.githubusercontent.com/4459398/77358338-4ce16b80-6d0f-11ea-98d3-5de1be19a935.png)

### Other changes

- [x] Case-related links were updated to ensure URL state parameters, e.g. global date selection, carry-over as the user navigates through case views
- [x] Recent timelines was updated to only show the last 3 recent timelines (down from 5)
- [x] All sidebar widgets have slightly more compact spacing

Tested in:
* Chrome `80.0.3987.149`
* Firefox `74.0`
* Safari `13.0.5`
  • Loading branch information
andrew-goldstein authored Mar 24, 2020
1 parent ff4ef4a commit 3ecd5b6
Show file tree
Hide file tree
Showing 31 changed files with 594 additions and 172 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { appendSearch } from './helpers';
import { RedirectWrapper } from './redirect_wrapper';
import { SiemPageName } from '../../pages/home/types';

Expand All @@ -30,8 +31,14 @@ export const RedirectToConfigureCasesPage = () => (

const baseCaseUrl = `#/link-to/${SiemPageName.case}`;

export const getCaseUrl = () => baseCaseUrl;
export const getCaseDetailsUrl = (detailName: string, search: string) =>
`${baseCaseUrl}/${detailName}${search}`;
export const getCreateCaseUrl = (search: string) => `${baseCaseUrl}/create${search}`;
export const getConfigureCasesUrl = (search: string) => `${baseCaseUrl}/configure${search}`;
export const getCaseUrl = (search: string | null) =>
`${baseCaseUrl}${appendSearch(search ?? undefined)}`;

export const getCaseDetailsUrl = ({ id, search }: { id: string; search: string | null }) =>
`${baseCaseUrl}/${encodeURIComponent(id)}${appendSearch(search ?? undefined)}`;

export const getCreateCaseUrl = (search: string | null) =>
`${baseCaseUrl}/create${appendSearch(search ?? undefined)}`;

export const getConfigureCasesUrl = (search: string) =>
`${baseCaseUrl}/configure${appendSearch(search ?? undefined)}`;
13 changes: 7 additions & 6 deletions x-pack/legacy/plugins/siem/public/components/links/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ import {
import { FlowTarget, FlowTargetSourceDest } from '../../graphql/types';
import { useUiSetting$ } from '../../lib/kibana';
import { IP_REPUTATION_LINKS_SETTING } from '../../../common/constants';
import { navTabs } from '../../pages/home/home_navigations';
import * as i18n from '../page/network/ip_overview/translations';
import { isUrlInvalid } from '../../pages/detection_engine/rules/components/step_about_rule/helpers';
import { useGetUrlSearch } from '../navigation/use_get_url_search';
import { ExternalLinkIcon } from '../external_link_icon';
import { navTabs } from '../../pages/home/home_navigations';
import { useGetUrlSearch } from '../navigation/use_get_url_search';

export const DEFAULT_NUMBER_OF_LINK = 5;

Expand Down Expand Up @@ -92,10 +92,11 @@ const CaseDetailsLinkComponent: React.FC<{ children?: React.ReactNode; detailNam
children,
detailName,
}) => {
const urlSearch = useGetUrlSearch(navTabs.case);
const search = useGetUrlSearch(navTabs.case);

return (
<EuiLink
href={getCaseDetailsUrl(encodeURIComponent(detailName), urlSearch)}
href={getCaseDetailsUrl({ id: detailName, search })}
data-test-subj="case-details-link"
>
{children ? children : detailName}
Expand All @@ -106,8 +107,8 @@ export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent);
CaseDetailsLink.displayName = 'CaseDetailsLink';

export const CreateCaseLink = React.memo<{ children: React.ReactNode }>(({ children }) => {
const urlSearch = useGetUrlSearch(navTabs.case);
return <EuiLink href={getCreateCaseUrl(urlSearch)}>{children}</EuiLink>;
const search = useGetUrlSearch(navTabs.case);
return <EuiLink href={getCreateCaseUrl(search)}>{children}</EuiLink>;
});

CreateCaseLink.displayName = 'CreateCaseLink';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,17 @@ describe('Markdown', () => {
).toHaveProperty('href', 'https://google.com/');
});

test('it does NOT render the href if links are disabled', () => {
const wrapper = mount(<Markdown disableLinks={true} raw={markdownWithLink} />);

expect(
wrapper
.find('[data-test-subj="markdown-link"]')
.first()
.getDOMNode()
).not.toHaveProperty('href');
});

test('it opens links in a new tab via target="_blank"', () => {
const wrapper = mount(<Markdown raw={markdownWithLink} />);

Expand Down
90 changes: 46 additions & 44 deletions x-pack/legacy/plugins/siem/public/components/markdown/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,51 +26,53 @@ const REL_NOFOLLOW = 'nofollow';
/** prevents the browser from sending the current address as referrer via the Referer HTTP header */
const REL_NOREFERRER = 'noreferrer';

export const Markdown = React.memo<{ raw?: string; size?: 'xs' | 's' | 'm' }>(
({ raw, size = 's' }) => {
const markdownRenderers = {
root: ({ children }: { children: React.ReactNode[] }) => (
<EuiText data-test-subj="markdown-root" grow={true} size={size}>
export const Markdown = React.memo<{
disableLinks?: boolean;
raw?: string;
size?: 'xs' | 's' | 'm';
}>(({ disableLinks = false, raw, size = 's' }) => {
const markdownRenderers = {
root: ({ children }: { children: React.ReactNode[] }) => (
<EuiText data-test-subj="markdown-root" grow={true} size={size}>
{children}
</EuiText>
),
table: ({ children }: { children: React.ReactNode[] }) => (
<table data-test-subj="markdown-table" className="euiTable euiTable--responsive">
{children}
</table>
),
tableHead: ({ children }: { children: React.ReactNode[] }) => (
<TableHeader data-test-subj="markdown-table-header">{children}</TableHeader>
),
tableRow: ({ children }: { children: React.ReactNode[] }) => (
<EuiTableRow data-test-subj="markdown-table-row">{children}</EuiTableRow>
),
tableCell: ({ children }: { children: React.ReactNode[] }) => (
<EuiTableRowCell data-test-subj="markdown-table-cell">{children}</EuiTableRowCell>
),
link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
<EuiToolTip content={href}>
<EuiLink
href={disableLinks ? undefined : href}
data-test-subj="markdown-link"
rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}
target="_blank"
>
{children}
</EuiText>
),
table: ({ children }: { children: React.ReactNode[] }) => (
<table data-test-subj="markdown-table" className="euiTable euiTable--responsive">
{children}
</table>
),
tableHead: ({ children }: { children: React.ReactNode[] }) => (
<TableHeader data-test-subj="markdown-table-header">{children}</TableHeader>
),
tableRow: ({ children }: { children: React.ReactNode[] }) => (
<EuiTableRow data-test-subj="markdown-table-row">{children}</EuiTableRow>
),
tableCell: ({ children }: { children: React.ReactNode[] }) => (
<EuiTableRowCell data-test-subj="markdown-table-cell">{children}</EuiTableRowCell>
),
link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
<EuiToolTip content={href}>
<EuiLink
href={href}
data-test-subj="markdown-link"
rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}
target="_blank"
>
{children}
</EuiLink>
</EuiToolTip>
),
};
</EuiLink>
</EuiToolTip>
),
};

return (
<ReactMarkdown
data-test-subj="markdown"
linkTarget="_blank"
renderers={markdownRenderers}
source={raw}
/>
);
}
);
return (
<ReactMarkdown
data-test-subj="markdown"
linkTarget="_blank"
renderers={markdownRenderers}
source={raw}
/>
);
});

Markdown.displayName = 'Markdown';
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,22 @@ export const getBreadcrumbsForRoute = (
];
}
if (isCaseRoutes(spyState) && object.navTabs) {
return [...siemRootBreadcrumb, ...getCaseDetailsBreadcrumbs(spyState)];
const tempNav: SearchNavTab = { urlKey: 'case', isDetailPage: false };
let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
if (spyState.tabName != null) {
urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
}

return [
...siemRootBreadcrumb,
...getCaseDetailsBreadcrumbs(
spyState,
urlStateKeys.reduce(
(acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
[]
)
),
];
}
if (
spyState != null &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiSpacer } from '@elastic/eui';
import React from 'react';

import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
Expand All @@ -30,12 +29,7 @@ const NewsFeedComponent: React.FC<Props> = ({ news }) => (
) : news.length === 0 ? (
<NoNews />
) : (
news.map((n: NewsItem) => (
<React.Fragment key={n.hash}>
<Post newsItem={n} />
<EuiSpacer size="l" />
</React.Fragment>
))
news.map((n: NewsItem) => <Post key={n.hash} newsItem={n} />)
)}
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export const Post = React.memo<{ newsItem: NewsItem }>(({ newsItem }) => {
<PreferenceFormattedP1DTDate value={publishOn} />
<EuiSpacer size="s" />
<div>{description}</div>
<EuiSpacer size="l" />
</EuiText>
</EuiFlexItem>

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
* 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 { EuiButtonGroup, EuiButtonGroupOption } from '@elastic/eui';
import React, { useCallback, useMemo } from 'react';

import { FilterMode } from '../types';

import * as i18n from '../translations';

const MY_RECENTLY_REPORTED_ID = 'myRecentlyReported';

const toggleButtonIcons: EuiButtonGroupOption[] = [
{
id: 'recentlyCreated',
label: i18n.RECENTLY_CREATED_CASES,
iconType: 'folderExclamation',
},
{
id: MY_RECENTLY_REPORTED_ID,
label: i18n.MY_RECENTLY_REPORTED_CASES,
iconType: 'reporter',
},
];

export const Filters = React.memo<{
filterBy: FilterMode;
setFilterBy: (filterBy: FilterMode) => void;
showMyRecentlyReported: boolean;
}>(({ filterBy, setFilterBy, showMyRecentlyReported }) => {
const options = useMemo(
() =>
showMyRecentlyReported
? toggleButtonIcons
: toggleButtonIcons.filter(x => x.id !== MY_RECENTLY_REPORTED_ID),
[showMyRecentlyReported]
);
const onChange = useCallback(
(filterMode: string) => {
setFilterBy(filterMode as FilterMode);
},
[setFilterBy]
);

return <EuiButtonGroup options={options} idSelected={filterBy} onChange={onChange} isIconOnly />;
});

Filters.displayName = 'Filters';
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*
* 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 { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
import React, { useEffect, useMemo, useRef } from 'react';

import { FilterOptions, QueryParams } from '../../containers/case/types';
import { DEFAULT_QUERY_PARAMS, useGetCases } from '../../containers/case/use_get_cases';
import { getCaseUrl } from '../link_to/redirect_to_case';
import { useGetUrlSearch } from '../navigation/use_get_url_search';
import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
import { navTabs } from '../../pages/home/home_navigations';

import { NoCases } from './no_cases';
import { RecentCases } from './recent_cases';
import * as i18n from './translations';

const usePrevious = (value: FilterOptions) => {
const ref = useRef();
useEffect(() => {
(ref.current as unknown) = value;
});
return ref.current;
};

const MAX_CASES_TO_SHOW = 3;

const queryParams: QueryParams = {
...DEFAULT_QUERY_PARAMS,
perPage: MAX_CASES_TO_SHOW,
};

const StatefulRecentCasesComponent = React.memo(
({ filterOptions }: { filterOptions: FilterOptions }) => {
const previousFilterOptions = usePrevious(filterOptions);
const { data, loading, setFilters } = useGetCases(queryParams);
const isLoadingCases = useMemo(
() => loading.indexOf('cases') > -1 || loading.indexOf('caseUpdate') > -1,
[loading]
);
const search = useGetUrlSearch(navTabs.case);
const allCasesLink = useMemo(
() => <EuiLink href={getCaseUrl(search)}>{i18n.VIEW_ALL_CASES}</EuiLink>,
[search]
);

useEffect(() => {
if (previousFilterOptions !== undefined && previousFilterOptions !== filterOptions) {
setFilters(filterOptions);
}
}, [previousFilterOptions, filterOptions, setFilters]);

const content = useMemo(
() =>
isLoadingCases ? (
<LoadingPlaceholders lines={2} placeholders={3} />
) : !isLoadingCases && data.cases.length === 0 ? (
<NoCases />
) : (
<RecentCases cases={data.cases} />
),
[isLoadingCases, data]
);

return (
<EuiText color="subdued" size="s">
{content}
<EuiHorizontalRule margin="s" />
<EuiText size="xs">{allCasesLink}</EuiText>
</EuiText>
);
}
);

StatefulRecentCasesComponent.displayName = 'StatefulRecentCasesComponent';

export const StatefulRecentCases = React.memo(StatefulRecentCasesComponent);
Loading

0 comments on commit 3ecd5b6

Please sign in to comment.