Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SIEM] Overview: Recent cases widget #60993

Merged
merged 6 commits into from
Mar 24, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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) =>
andrew-goldstein marked this conversation as resolved.
Show resolved Hide resolved
`${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 @@ -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);
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*
* 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 { EuiLink } from '@elastic/eui';
import React, { useMemo } from 'react';

import { getCreateCaseUrl } from '../../link_to/redirect_to_case';
import { useGetUrlSearch } from '../../navigation/use_get_url_search';
import { navTabs } from '../../../pages/home/home_navigations';

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

const NoCasesComponent = () => {
const urlSearch = useGetUrlSearch(navTabs.case);
const newCaseLink = useMemo(
() => <EuiLink href={getCreateCaseUrl(urlSearch)}>{` ${i18n.START_A_NEW_CASE}`}</EuiLink>,
[urlSearch]
);

return (
<>
<span>{i18n.NO_CASES}</span>
{newCaseLink}
{'!'}
</>
);
};

NoCasesComponent.displayName = 'NoCasesComponent';

export const NoCases = React.memo(NoCasesComponent);
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*
* 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 { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';

import { Case } from '../../containers/case/types';
import { getCaseDetailsUrl } from '../link_to/redirect_to_case';
import { Markdown } from '../markdown';
import { useGetUrlSearch } from '../navigation/use_get_url_search';
import { navTabs } from '../../pages/home/home_navigations';
import { IconWithCount } from '../recent_timelines/counts';

import * as i18n from './translations';

const MarkdownContainer = styled.div`
max-height: 150px;
overflow-y: auto;
width: 300px;
`;

const RecentCasesComponent = ({ cases }: { cases: Case[] }) => {
const search = useGetUrlSearch(navTabs.case);

return (
<>
{cases.map((c, i) => (
<EuiFlexGroup key={c.id} gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiText size="s">
<EuiLink href={getCaseDetailsUrl({ id: c.id, search })}>{c.title}</EuiLink>
</EuiText>

<IconWithCount count={c.totalComment} icon={'editorComment'} tooltip={i18n.COMMENTS} />
{c.description && c.description.length && (
<MarkdownContainer>
<EuiText color="subdued" size="xs">
<Markdown raw={c.description} />
</EuiText>
</MarkdownContainer>
)}
{i !== cases.length - 1 && <EuiSpacer size="l" />}
</EuiFlexItem>
</EuiFlexGroup>
))}
</>
);
};

RecentCasesComponent.displayName = 'RecentCasesComponent';

export const RecentCases = React.memo(RecentCasesComponent);
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
* 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 { i18n } from '@kbn/i18n';

export const COMMENTS = i18n.translate('xpack.siem.recentCases.commentsTooltip', {
defaultMessage: 'Comments',
});

export const MY_RECENTLY_REPORTED_CASES = i18n.translate(
'xpack.siem.overview.myRecentlyReportedCasesButtonLabel',
{
defaultMessage: 'My recently reported cases',
}
);

export const NO_CASES = i18n.translate('xpack.siem.recentCases.noCasesMessage', {
defaultMessage: 'No cases have been created yet. Put your detective hat on and',
});

export const RECENTLY_CREATED_CASES = i18n.translate(
'xpack.siem.overview.recentlyCreatedCasesButtonLabel',
{
defaultMessage: 'Recently created cases',
}
);

export const START_A_NEW_CASE = i18n.translate('xpack.siem.recentCases.startNewCaseLink', {
defaultMessage: 'start a new case',
});

export const VIEW_ALL_CASES = i18n.translate('xpack.siem.recentCases.viewAllCasesLink', {
defaultMessage: 'View all cases',
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* 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.
*/

export type FilterMode = 'recentlyCreated' | 'myRecentlyReported';
Loading