Skip to content

Commit

Permalink
refetch
Browse files Browse the repository at this point in the history
  • Loading branch information
@angorayc
angorayc committed Jan 7, 2023
1 parent d896cb0 commit 82b4ddb
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 45 deletions.
49 changes: 28 additions & 21 deletions ...public/overview/components/detection_response/alerts_by_status/alert_donut_embeddable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,30 @@
* 2.0.
*/
import React, { useCallback, useEffect, useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { DonutChartWrapper } from '../../../../common/components/charts/donutchart';
import { useRefetchByRestartingSession } from '../../../../common/components/page/use_refetch_by_session';
import { getAlertsByStatusAttributes } from '../../../../common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut';
import { LensEmbeddable } from '../../../../common/components/visualization_actions/lens_embeddable';
import type { EmbeddableData } from '../../../../common/components/visualization_actions/types';
import { parseVisualizationData } from '../../../../common/components/visualization_actions/utils';
import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
import { inputsSelectors } from '../../../../common/store/inputs';
import { inputsActions, inputsSelectors } from '../../../../common/store/inputs';
import { InputsModelId } from '../../../../common/store/inputs/constants';
import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
import { ChartLabel } from './chart_label';
import type { AlertDonutEmbeddableProps, VisualizationAlertsByStatusResponse } from './types';
import { AlertsByStatusQueryId } from './types';
import { DETECTION_RESPONSE_ALERTS_BY_STATUS_ID } from './types';

const ChartSize = '135px';

const AlertDonutEmbeddableComponent: React.FC<AlertDonutEmbeddableProps> = ({
status,
setQuery,
timerange,
label,
}) => {
const queryId = AlertsByStatusQueryId[`${status}AlertsQuery`];
const dispatch = useDispatch();
const queryId = `${DETECTION_RESPONSE_ALERTS_BY_STATUS_ID}-${status}`;
const { searchSessionId, refetchByRestartingSession } = useRefetchByRestartingSession({
inputId: InputsModelId.global,
queryId,
Expand All @@ -40,28 +41,34 @@ const AlertDonutEmbeddableComponent: React.FC<AlertDonutEmbeddableProps> = ({

const onEmbeddableLoad = useCallback(
({ requests, responses, isLoading }: EmbeddableData) => {
setQuery({
id: queryId,
searchSessionId,
refetch: refetchByRestartingSession,
loading: isLoading,
inspect: { dsl: requests, response: responses },
});
dispatch(
inputsActions.setQuery({
inputId: InputsModelId.global,
id: queryId,
searchSessionId,
refetch: refetchByRestartingSession,
loading: isLoading,
inspect: { dsl: requests, response: responses },
})
);
},
[queryId, refetchByRestartingSession, searchSessionId, setQuery]
[dispatch, queryId, refetchByRestartingSession, searchSessionId]
);

const extraOptions = useMemo(() => ({ status }), [status]);

useEffect(() => {
setQuery({
id: `alertsStatus${status}`,
searchSessionId,
refetch: refetchByRestartingSession,
loading: false,
inspect: null,
});
}, [refetchByRestartingSession, searchSessionId, setQuery, status]);
dispatch(
inputsActions.setQuery({
inputId: InputsModelId.global,
id: queryId,
searchSessionId,
refetch: refetchByRestartingSession,
loading: false,
inspect: null,
})
);
}, [dispatch, queryId, refetchByRestartingSession, searchSessionId, status]);

const dataExists = visualizationData != null && visualizationData[0].hits.total !== 0;

Expand All @@ -81,7 +88,7 @@ const AlertDonutEmbeddableComponent: React.FC<AlertDonutEmbeddableProps> = ({
getLensAttributes={getAlertsByStatusAttributes}
stackByField="kibana.alert.workflow_status"
scopeId={SourcererScopeName.detections}
id={`alertsStatus${status}`}
id={queryId}
/>
</DonutChartWrapper>
);
Expand Down
19 changes: 9 additions & 10 deletions ...ution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_ex
import { useGlobalTime } from '../../../../common/containers/use_global_time';
import { AlertDonutEmbeddable } from './alert_donut_embeddable';
import { useAlertsByStatusVisualizationData } from './use_alerts_by_status_visualization_data';
import { DETECTION_RESPONSE_ALERTS_BY_STATUS_ID } from './types';

const StyledFlexItem = styled(EuiFlexItem)`
padding: 0 4px;
Expand All @@ -68,9 +69,9 @@ const StyledLegendFlexItem = styled(EuiFlexItem)`
`;

interface AlertsByStatusProps {
signalIndexName: string | null;
entityFilter?: EntityFilter;
additionalFilters?: ESBoolQuery[];
entityFilter?: EntityFilter;
signalIndexName: string | null;
}

const legendField = 'kibana.alert.severity';
Expand All @@ -80,7 +81,6 @@ const chartConfigs: Array<{ key: Severity; label: string; color: string }> = [
{ key: 'medium', label: STATUS_MEDIUM_LABEL, color: SEVERITY_COLOR.medium },
{ key: 'low', label: STATUS_LOW_LABEL, color: SEVERITY_COLOR.low },
];
const DETECTION_RESPONSE_ALERTS_BY_STATUS_ID = 'detection-response-alerts-by-status';

const eventKindSignalFilter: EntityFilter = {
field: 'event.kind',
Expand All @@ -99,7 +99,7 @@ export const AlertsByStatus = ({
});

const isChartEmbeddablesEnabled = useIsExperimentalFeatureEnabled('chartEmbeddablesEnabled');
const { to, from, setQuery } = useGlobalTime();
const { to, from } = useGlobalTime();
const timerange = useMemo(() => ({ from, to }), [from, to]);

const isLargerBreakpoint = useIsWithinMinBreakpoint('xl');
Expand Down Expand Up @@ -127,6 +127,8 @@ export const AlertsByStatus = ({
signalIndexName,
skip: !toggleStatus || isChartEmbeddablesEnabled,
queryId: DETECTION_RESPONSE_ALERTS_BY_STATUS_ID,
to,
from,
});
const legendItems: LegendItem[] = useMemo(
() =>
Expand Down Expand Up @@ -208,8 +210,7 @@ export const AlertsByStatus = ({
<StyledFlexItem key="alerts-status-open" grow={isChartEmbeddablesEnabled}>
{isChartEmbeddablesEnabled ? (
<AlertDonutEmbeddable
status={'open'}
setQuery={setQuery}
status="open"
timerange={timerange}
label={STATUS_OPEN}
/>
Expand All @@ -231,8 +232,7 @@ export const AlertsByStatus = ({
>
{isChartEmbeddablesEnabled ? (
<AlertDonutEmbeddable
status={'acknowledged'}
setQuery={setQuery}
status="acknowledged"
timerange={timerange}
label={STATUS_ACKNOWLEDGED}
/>
Expand All @@ -251,8 +251,7 @@ export const AlertsByStatus = ({
<StyledFlexItem key="alerts-status-closed" grow={isChartEmbeddablesEnabled}>
{isChartEmbeddablesEnabled ? (
<AlertDonutEmbeddable
status={'closed'}
setQuery={setQuery}
status="closed"
timerange={timerange}
label={STATUS_CLOSED}
/>
Expand Down
8 changes: 1 addition & 7 deletions ...security_solution/public/overview/components/detection_response/alerts_by_status/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@

import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
import type { ESQuery } from '../../../../../common/typed_json';
import type { GlobalTimeArgs } from '../../../../common/containers/use_global_time';

interface StatusBySeverity {
doc_count_error_upper_bound: number;
Expand Down Expand Up @@ -80,7 +79,6 @@ export type AlertsByStatus = 'open' | 'acknowledged' | 'closed';

export interface AlertDonutEmbeddableProps {
status: AlertsByStatus;
setQuery: GlobalTimeArgs['setQuery'];
timerange: { from: string; to: string };
label: string;
}
Expand All @@ -95,8 +93,4 @@ export interface VisualizationInspectQuery {
response: VisualizationAlertsByStatusResponse[];
}

export enum AlertsByStatusQueryId {
'openAlertsQuery' = 'openAlertsQuery',
'acknowledgedAlertsQuery' = 'acknowledgedAlertsQuery',
'closedAlertsQuery' = 'closedAlertsQuery',
}
export const DETECTION_RESPONSE_ALERTS_BY_STATUS_ID = 'detection-response-alerts-by-status';
2 changes: 2 additions & 0 deletions ...lic/overview/components/detection_response/alerts_by_status/use_alerts_by_status.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ const renderUseAlertsByStatus = (props: Partial<UseAlertsByStatusProps> = {}) =>
useAlertsByStatus({
queryId: 'test',
signalIndexName: 'signal-alerts',
from: '2023-01-07T00:00:00.000Z',
to: '2023-01-07T23:59:59.999Z',
...props,
}),
{
Expand Down
32 changes: 29 additions & 3 deletions ...on/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
import { useCallback, useEffect, useState } from 'react';
import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';

import { useDispatch } from 'react-redux';
import type { ESBoolQuery } from '../../../../../common/typed_json';
import { useGlobalTime } from '../../../../common/containers/use_global_time';
import { useQueryAlerts } from '../../../../detections/containers/detection_engine/alerts/use_query';
import { ALERTS_QUERY_NAMES } from '../../../../detections/containers/detection_engine/alerts/constants';
import { useQueryInspector } from '../../../../common/components/page/manage_query';
Expand All @@ -20,6 +20,9 @@ import {
STATUS_LOW_LABEL,
STATUS_MEDIUM_LABEL,
} from '../translations';
import { inputsActions } from '../../../../common/store/inputs';
import type { DeleteQuery, SetQuery } from '../../../../common/containers/use_global_time/types';
import { InputsModelId } from '../../../../common/store/inputs/constants';

export const severityLabels: Record<Severity, string> = {
critical: STATUS_CRITICAL_LABEL,
Expand Down Expand Up @@ -110,6 +113,8 @@ export interface UseAlertsByStatusProps {
skip?: boolean;
entityFilter?: EntityFilter;
additionalFilters?: ESBoolQuery[];
from: string;
to: string;
}

export type UseAlertsByStatus = (props: UseAlertsByStatusProps) => {
Expand All @@ -124,11 +129,32 @@ export const useAlertsByStatus: UseAlertsByStatus = ({
queryId,
signalIndexName,
skip = false,
to,
from,
}) => {
const { to, from, deleteQuery, setQuery } = useGlobalTime();
const dispatch = useDispatch();
const [updatedAt, setUpdatedAt] = useState(Date.now());
const [items, setItems] = useState<null | ParsedAlertsData>(null);

const setQuery = useCallback(
({ id, inspect, loading, refetch, searchSessionId }: SetQuery) =>
dispatch(
inputsActions.setQuery({
inputId: InputsModelId.global,
id,
inspect,
loading,
refetch,
searchSessionId,
})
),
[dispatch]
);

const deleteQuery = useCallback(
({ id }: DeleteQuery) =>
dispatch(inputsActions.deleteOneQuery({ inputId: InputsModelId.global, id })),
[dispatch]
);
const {
data,
loading: isLoading,
Expand Down
8 changes: 4 additions & 4 deletions ...components/detection_response/alerts_by_status/use_alerts_by_status_visualization_data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ import { parseVisualizationData } from '../../../../common/components/visualizat
import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
import { inputsSelectors } from '../../../../common/store/inputs';
import type { VisualizationAlertsByStatusResponse } from './types';
import { AlertsByStatusQueryId } from './types';
import { DETECTION_RESPONSE_ALERTS_BY_STATUS_ID } from './types';

export const useAlertsByStatusVisualizationData = () => {
const getGlobalQuery = inputsSelectors.globalQueryByIdSelector();
const { inspect: inspectOpenAlerts } = useDeepEqualSelector((state) =>
getGlobalQuery(state, AlertsByStatusQueryId.openAlertsQuery)
getGlobalQuery(state, `${DETECTION_RESPONSE_ALERTS_BY_STATUS_ID}-open`)
);
const { inspect: inspectAcknowledgedAlerts } = useDeepEqualSelector((state) =>
getGlobalQuery(state, AlertsByStatusQueryId.acknowledgedAlertsQuery)
getGlobalQuery(state, `${DETECTION_RESPONSE_ALERTS_BY_STATUS_ID}-acknowledged`)
);
const { inspect: inspectClosedAlerts } = useDeepEqualSelector((state) =>
getGlobalQuery(state, AlertsByStatusQueryId.closedAlertsQuery)
getGlobalQuery(state, `${DETECTION_RESPONSE_ALERTS_BY_STATUS_ID}-closed`)
);
const visualizationOpenAlertsData =
inspectOpenAlerts != null
Expand Down

0 comments on commit 82b4ddb

Please sign in to comment.