Skip to content

Commit

Permalink
cleaned up viewer index component
Browse files Browse the repository at this point in the history
  • Loading branch information
@yctercero
yctercero committed Jun 10, 2020
1 parent 22d3e09 commit b4b61a8
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 99 deletions.
13 changes: 12 additions & 1 deletion ...ck/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,18 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
ExceptionListType.ENDPOINT,
]}
commentsAccordionId={'ruleDetailsTabExceptions'}
exceptionListsMeta={[]}
exceptionListsMeta={[
{
id: '5b543420-a6c3-11ea-989f-53aa81611022',
type: 'endpoint',
namespaceType: 'single',
},
{
id: '98440bc0-a750-11ea-989f-53aa81611022',
type: 'detection',
namespaceType: 'single',
},
]}
/>
)}
{ruleDetailTab === RuleDetailTabs.failures && <FailureHistory id={rule?.id} />}
Expand Down
92 changes: 92 additions & 0 deletions .../security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/*
* 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 React from 'react';
import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import styled from 'styled-components';

import * as i18n from '../translations';
import { ExceptionListItemSchema, ApiProps } from '../types';
import { ExceptionItem } from './exception_item';
import { AndOrBadge } from '../../and_or_badge';

const MyFlexItem = styled(EuiFlexItem)`
margin: ${({ theme }) => `${theme.eui.euiSize} 0`};
&:first-child {
margin: ${({ theme }) => `${theme.eui.euiSizeXS} 0 ${theme.eui.euiSize}`};
}
`;

const MyExceptionsContainer = styled(EuiFlexGroup)`
height: 600px;
overflow: hidden;
`;

const MyExceptionItemContainer = styled(EuiFlexGroup)`
margin: ${({ theme }) => `0 ${theme.eui.euiSize} ${theme.eui.euiSize} 0`};
`;

interface ExceptionsViewerItemsProps {
showEmpty: boolean;
isInitLoading: boolean;
exceptions: ExceptionListItemSchema[];
loadingItemIds: ApiProps[];
commentsAccordionId: string;
onDeleteException: (arg: ApiProps) => void;
onEditExceptionItem: (item: ExceptionListItemSchema) => void;
}

export const ExceptionsViewerItems: React.FC<ExceptionsViewerItemsProps> = ({
showEmpty,
isInitLoading,
exceptions,
loadingItemIds,
commentsAccordionId,
onDeleteException,
onEditExceptionItem,
}) => (
<MyExceptionsContainer direction="column" className="eui-yScrollWithShadows">
{showEmpty ? (
<EuiFlexItem grow={1}>
<EuiEmptyPrompt
iconType="advancedSettingsApp"
title={<h2>{i18n.EXCEPTION_EMPTY_PROMPT_TITLE}</h2>}
body={<p>{i18n.EXCEPTION_EMPTY_PROMPT_BODY}</p>}
data-test-subj="exceptionsEmptyPrompt"
/>
</EuiFlexItem>
) : (
<EuiFlexItem grow={false} className="eui-yScrollWithShadows">
<MyExceptionItemContainer gutterSize="none" direction="column">
{!isInitLoading &&
exceptions.length > 0 &&
exceptions.map((exception, index) => (
<MyFlexItem grow={false} key={exception.id}>
{index !== 0 ? (
<>
<AndOrBadge type="or" />
<EuiSpacer />
</>
) : (
<EuiSpacer size="s" />
)}
<ExceptionItem
loadingItemIds={loadingItemIds}
commentsAccordionId={commentsAccordionId}
exceptionItem={exception}
handleDelete={onDeleteException}
handleEdit={onEditExceptionItem}
/>
</MyFlexItem>
))}
</MyExceptionItemContainer>
</EuiFlexItem>
)}
</MyExceptionsContainer>
);

ExceptionsViewerItems.displayName = 'ExceptionsViewerItems';
120 changes: 28 additions & 92 deletions x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useCallback, useState, useMemo, useEffect, useReducer } from 'react';
import {
EuiEmptyPrompt,
EuiOverlayMask,
EuiModal,
EuiModalBody,
EuiCodeBlock,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
} from '@elastic/eui';
import styled from 'styled-components';
import React, { useCallback, useMemo, useEffect, useReducer } from 'react';
import { EuiOverlayMask, EuiModal, EuiModalBody, EuiCodeBlock, EuiSpacer } from '@elastic/eui';
import uuid from 'uuid';

import * as i18n from '../translations';
Expand All @@ -37,23 +27,9 @@ import {
ExceptionIdentifiers,
useApi,
} from '../../../../../public/lists_plugin_deps';
import { ExceptionItem } from './exception_item';
import { AndOrBadge } from '../../and_or_badge';
import { ExceptionsViewerPagination } from './exceptions_pagination';
import { ExceptionsViewerUtility } from './exeptions_utility';

const MyFlexItem = styled(EuiFlexItem)`
margin: ${({ theme }) => `${theme.eui.euiSize} 0`};
&:first-child {
margin: ${({ theme }) => `${theme.eui.euiSizeXS} 0 ${theme.eui.euiSize}`};
}
`;

const MyExceptionsContainer = styled(EuiFlexGroup)`
height: 600px;
overflow: hidden;
`;
import { ExceptionsViewerItems } from './exceptions_viewer_items';

const initialState: State = {
filterOptions: { filter: '', showEndpointList: false, showDetectionsList: false, tags: [] },
Expand All @@ -70,7 +46,7 @@ const initialState: State = {
exceptionToEdit: null,
loadingLists: [],
loadingItemIds: [],
isLoading: false,
isInitLoading: true,
isModalOpen: false,
};

Expand All @@ -96,7 +72,6 @@ const ExceptionsViewerComponent = ({
}: ExceptionsViewerProps): JSX.Element => {
const { services } = useKibana();
const [, dispatchToaster] = useStateToaster();
const [initLoading, setInitLoading] = useState(true);
const onDispatchToaster = useCallback(
({ title, color, iconType }) => (): void => {
dispatchToaster({
Expand All @@ -121,7 +96,7 @@ const ExceptionsViewerComponent = ({
pagination,
loadingLists,
loadingItemIds,
isLoading,
isInitLoading,
isModalOpen,
},
dispatch,
Expand Down Expand Up @@ -159,16 +134,6 @@ const ExceptionsViewerComponent = ({
}),
});

const setIsLoading = useCallback(
(loading: boolean): void => {
dispatch({
type: 'updateIsLoading',
isLoading: loading,
});
},
[dispatch]
);

const setIsModalOpen = useCallback(
(isOpen: boolean): void => {
dispatch({
Expand All @@ -181,10 +146,9 @@ const ExceptionsViewerComponent = ({

const onFetchList = useCallback((): void => {
if (fetchList != null) {
setIsLoading(true);
fetchList();
}
}, [fetchList, setIsLoading]);
}, [fetchList]);

const onFiltersChange = useCallback(
({ filter, pagination: pag }: Filter): void => {
Expand Down Expand Up @@ -270,20 +234,24 @@ const ExceptionsViewerComponent = ({

// Logic for initial render
useEffect((): void => {
if (initLoading && !loadingList && (exceptions.length === 0 || exceptions != null)) {
setInitLoading(false);
if (isInitLoading && !loadingList && (exceptions.length === 0 || exceptions != null)) {
dispatch({
type: 'updateIsInitLoading',
loading: false,
});
}
}, [initLoading, exceptions, loadingList]);
}, [isInitLoading, exceptions, loadingList, dispatch]);

// Used in utility bar info text
const ruleSettingsUrl = useMemo((): string => {
return services.application.getUrlForApp(
`security#/detections/rules/id/${encodeURI(ruleId)}/edit`
);
}, [ruleId, services.application]);

const showEmpty = useMemo((): boolean => {
return !initLoading && !loadingList && exceptions.length === 0;
}, [initLoading, exceptions.length, loadingList]);
return !isInitLoading && !loadingList && exceptions.length === 0;
}, [isInitLoading, exceptions.length, loadingList]);

return (
<>
Expand All @@ -299,13 +267,13 @@ const ExceptionsViewerComponent = ({
</EuiOverlayMask>
)}

<Panel loading={initLoading}>
{(initLoading || isLoading) && (
<Panel loading={isInitLoading || loadingList}>
{(isInitLoading || loadingList) && (
<Loader data-test-subj="loadingPanelAllRulesTable" overlay size="xl" />
)}

<ExceptionsViewerHeader
isInitLoading={initLoading}
isInitLoading={isInitLoading}
supportedListTypes={availableListTypes}
detectionsListItems={detectionsList != null ? detectionsList.totalItems : 0}
endpointListItems={endpointList != null ? endpointList.totalItems : 0}
Expand All @@ -322,48 +290,16 @@ const ExceptionsViewerComponent = ({
ruleSettingsUrl={ruleSettingsUrl}
/>

<MyExceptionsContainer
gutterSize="none"
direction="column"
className="eui-yScrollWithShadows"
>
{showEmpty ? (
<EuiFlexItem grow={1}>
<EuiEmptyPrompt
iconType="advancedSettingsApp"
title={<h2>{i18n.EXCEPTION_EMPTY_PROMPT_TITLE}</h2>}
body={<p>{i18n.EXCEPTION_EMPTY_PROMPT_BODY}</p>}
data-test-subj="exceptionsEmptyPrompt"
/>
</EuiFlexItem>
) : (
<EuiFlexItem grow={false} className="eui-yScrollWithShadows">
<EuiFlexGroup gutterSize="none" direction="column">
{!initLoading &&
exceptions.length > 0 &&
exceptions.map((exception, index) => (
<MyFlexItem grow={false} key={exception.id}>
{index !== 0 ? (
<>
<AndOrBadge type="or" />
<EuiSpacer />
</>
) : (
<EuiSpacer size="s" />
)}
<ExceptionItem
loadingItemIds={loadingItemIds}
commentsAccordionId={commentsAccordionId}
exceptionItem={exception}
handleDelete={onDeleteException}
handleEdit={onEditExceptionItem}
/>
</MyFlexItem>
))}
</EuiFlexGroup>
</EuiFlexItem>
)}
</MyExceptionsContainer>
<ExceptionsViewerItems
showEmpty={showEmpty}
isInitLoading={isInitLoading}
exceptions={exceptions}
loadingItemIds={loadingItemIds}
commentsAccordionId={commentsAccordionId}
onDeleteException={onDeleteException}
onEditExceptionItem={onEditExceptionItem}
/>

<ExceptionsViewerPagination onPaginationChange={onFiltersChange} pagination={pagination} />
</Panel>
</>
Expand Down
10 changes: 4 additions & 6 deletions x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export interface State {
exceptionToEdit: ExceptionListItemSchema | null;
loadingLists: ExceptionIdentifiers[];
loadingItemIds: ApiProps[];
isLoading: boolean;
isInitLoading: boolean;
isModalOpen: boolean;
}

Expand All @@ -39,7 +39,7 @@ export type Action =
pagination: Partial<ExceptionsPagination>;
allLists: ExceptionIdentifiers[];
}
| { type: 'updateIsLoading'; isLoading: boolean }
| { type: 'updateIsInitLoading'; loading: boolean }
| { type: 'updateModalOpen'; isOpen: boolean }
| { type: 'updateExceptionToEdit'; exception: ExceptionListItemSchema }
| { type: 'updateLoadingItemIds'; items: ApiProps[] };
Expand All @@ -66,7 +66,6 @@ export const allExceptionItemsReducer = () => (state: State, action: Action): St
},
allExceptions: action.exceptions,
exceptions: action.exceptions,
isLoading: false,
};
}
case 'updateFilterOptions': {
Expand All @@ -80,7 +79,6 @@ export const allExceptionItemsReducer = () => (state: State, action: Action): St
...state.pagination,
...action.pagination,
},
isLoading: true,
};

if (action.filterOptions.showEndpointList) {
Expand All @@ -104,10 +102,10 @@ export const allExceptionItemsReducer = () => (state: State, action: Action): St
};
}
}
case 'updateIsLoading': {
case 'updateIsInitLoading': {
return {
...state,
isLoading: action.isLoading,
isInitLoading: action.loading,
};
}
case 'updateLoadingItemIds': {
Expand Down

0 comments on commit b4b61a8

Please sign in to comment.