mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[RAC] ALerts table in observability (#103270)
Closes #98611 ## Summary Add alerts table in Observability =>  ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/master/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
Xavier Mouligneau
GitHub
parent
5b49380787
commit
cf9e88c7d7
23 changed files with 655 additions and 176 deletions
|
|
@ -18,6 +18,7 @@
|
|||
"data",
|
||||
"features",
|
||||
"ruleRegistry",
|
||||
"timelines",
|
||||
"triggersActionsUi"
|
||||
],
|
||||
"ui": true,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import {
|
|||
} from '@kbn/rule-data-utils/target/technical_field_names';
|
||||
import moment from 'moment-timezone';
|
||||
import React, { useMemo } from 'react';
|
||||
import type { TopAlertResponse } from '../';
|
||||
import type { TopAlert, TopAlertResponse } from '../';
|
||||
import { useKibana, useUiSetting } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
import { asDuration } from '../../../../common/utils/formatters';
|
||||
import type { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry';
|
||||
|
|
@ -39,6 +39,7 @@ import { decorateResponse } from '../decorate_response';
|
|||
import { SeverityBadge } from '../severity_badge';
|
||||
|
||||
type AlertsFlyoutProps = {
|
||||
alert?: TopAlert;
|
||||
alerts?: TopAlertResponse[];
|
||||
isInApp?: boolean;
|
||||
observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
|
||||
|
|
@ -46,6 +47,7 @@ type AlertsFlyoutProps = {
|
|||
} & EuiFlyoutProps;
|
||||
|
||||
export function AlertsFlyout({
|
||||
alert,
|
||||
alerts,
|
||||
isInApp = false,
|
||||
observabilityRuleTypeRegistry,
|
||||
|
|
@ -59,9 +61,12 @@ export function AlertsFlyout({
|
|||
const decoratedAlerts = useMemo(() => {
|
||||
return decorateResponse(alerts ?? [], observabilityRuleTypeRegistry);
|
||||
}, [alerts, observabilityRuleTypeRegistry]);
|
||||
const alert = decoratedAlerts?.find((a) => a.fields[ALERT_UUID] === selectedAlertId);
|
||||
|
||||
if (!alert) {
|
||||
let alertData = alert;
|
||||
if (!alertData) {
|
||||
alertData = decoratedAlerts?.find((a) => a.fields[ALERT_UUID] === selectedAlertId);
|
||||
}
|
||||
if (!alertData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -70,45 +75,45 @@ export function AlertsFlyout({
|
|||
title: i18n.translate('xpack.observability.alertsFlyout.statusLabel', {
|
||||
defaultMessage: 'Status',
|
||||
}),
|
||||
description: alert.active ? 'Active' : 'Recovered',
|
||||
description: alertData.active ? 'Active' : 'Recovered',
|
||||
},
|
||||
{
|
||||
title: i18n.translate('xpack.observability.alertsFlyout.severityLabel', {
|
||||
defaultMessage: 'Severity',
|
||||
}),
|
||||
description: <SeverityBadge severityLevel={alert.fields[ALERT_SEVERITY_LEVEL]} />,
|
||||
description: <SeverityBadge severityLevel={alertData.fields[ALERT_SEVERITY_LEVEL]} />,
|
||||
},
|
||||
{
|
||||
title: i18n.translate('xpack.observability.alertsFlyout.triggeredLabel', {
|
||||
defaultMessage: 'Triggered',
|
||||
}),
|
||||
description: (
|
||||
<span title={alert.start.toString()}>{moment(alert.start).format(dateFormat)}</span>
|
||||
<span title={alertData.start.toString()}>{moment(alertData.start).format(dateFormat)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: i18n.translate('xpack.observability.alertsFlyout.durationLabel', {
|
||||
defaultMessage: 'Duration',
|
||||
}),
|
||||
description: asDuration(alert.fields[ALERT_DURATION], { extended: true }),
|
||||
description: asDuration(alertData.fields[ALERT_DURATION], { extended: true }),
|
||||
},
|
||||
{
|
||||
title: i18n.translate('xpack.observability.alertsFlyout.expectedValueLabel', {
|
||||
defaultMessage: 'Expected value',
|
||||
}),
|
||||
description: alert.fields[ALERT_EVALUATION_THRESHOLD] ?? '-',
|
||||
description: alertData.fields[ALERT_EVALUATION_THRESHOLD] ?? '-',
|
||||
},
|
||||
{
|
||||
title: i18n.translate('xpack.observability.alertsFlyout.actualValueLabel', {
|
||||
defaultMessage: 'Actual value',
|
||||
}),
|
||||
description: alert.fields[ALERT_EVALUATION_VALUE] ?? '-',
|
||||
description: alertData.fields[ALERT_EVALUATION_VALUE] ?? '-',
|
||||
},
|
||||
{
|
||||
title: i18n.translate('xpack.observability.alertsFlyout.ruleTypeLabel', {
|
||||
defaultMessage: 'Rule type',
|
||||
}),
|
||||
description: alert.fields[RULE_CATEGORY] ?? '-',
|
||||
description: alertData.fields[RULE_CATEGORY] ?? '-',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -116,10 +121,10 @@ export function AlertsFlyout({
|
|||
<EuiFlyout onClose={onClose} size="s">
|
||||
<EuiFlyoutHeader>
|
||||
<EuiTitle size="m">
|
||||
<h2>{alert.fields[RULE_NAME]}</h2>
|
||||
<h2>{alertData.fields[RULE_NAME]}</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText size="s">{alert.reason}</EuiText>
|
||||
<EuiText size="s">{alertData.reason}</EuiText>
|
||||
</EuiFlyoutHeader>
|
||||
<EuiFlyoutBody>
|
||||
<EuiSpacer size="s" />
|
||||
|
|
@ -129,11 +134,11 @@ export function AlertsFlyout({
|
|||
listItems={overviewListItems}
|
||||
/>
|
||||
</EuiFlyoutBody>
|
||||
{alert.link && !isInApp && (
|
||||
{alertData.link && !isInApp && (
|
||||
<EuiFlyoutFooter>
|
||||
<EuiFlexGroup justifyContent="flexEnd">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton href={prepend && prepend(alert.link)} fill>
|
||||
<EuiButton href={prepend && prepend(alertData.link)} fill>
|
||||
View in app
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@
|
|||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { SearchBar, TimeHistory } from '../../../../../../src/plugins/data/public';
|
||||
import { IIndexPattern, SearchBar, TimeHistory } from '../../../../../../src/plugins/data/public';
|
||||
import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
|
||||
import { useFetcher } from '../../hooks/use_fetcher';
|
||||
import { callObservabilityApi } from '../../services/call_observability_api';
|
||||
|
||||
export function AlertsSearchBar({
|
||||
dynamicIndexPattern,
|
||||
rangeFrom,
|
||||
rangeTo,
|
||||
onQueryChange,
|
||||
query,
|
||||
}: {
|
||||
dynamicIndexPattern: IIndexPattern[];
|
||||
rangeFrom?: string;
|
||||
rangeTo?: string;
|
||||
query?: string;
|
||||
|
|
@ -31,16 +31,9 @@ export function AlertsSearchBar({
|
|||
}, []);
|
||||
const [queryLanguage, setQueryLanguage] = useState<'lucene' | 'kuery'>('kuery');
|
||||
|
||||
const { data: dynamicIndexPattern } = useFetcher(({ signal }) => {
|
||||
return callObservabilityApi({
|
||||
signal,
|
||||
endpoint: 'GET /api/observability/rules/alerts/dynamic_index_pattern',
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SearchBar
|
||||
indexPatterns={dynamicIndexPattern ? [dynamicIndexPattern] : []}
|
||||
indexPatterns={dynamicIndexPattern}
|
||||
placeholder={i18n.translate('xpack.observability.alerts.searchBarPlaceholder', {
|
||||
defaultMessage: '"domain": "ecommerce" AND ("service.name": "ProductCatalogService" …)',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,197 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiButtonIcon, EuiDataGridColumn } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { Suspense, useState } from 'react';
|
||||
import {
|
||||
ALERT_DURATION,
|
||||
ALERT_SEVERITY_LEVEL,
|
||||
ALERT_STATUS,
|
||||
ALERT_START,
|
||||
RULE_NAME,
|
||||
} from '@kbn/rule-data-utils/target/technical_field_names';
|
||||
|
||||
import type { TimelinesUIStart } from '../../../../timelines/public';
|
||||
import type { TopAlert } from './';
|
||||
import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
|
||||
import type { ActionProps, ColumnHeaderOptions, RowRenderer } from '../../../../timelines/common';
|
||||
import { getRenderCellValue } from './render_cell_value';
|
||||
import { usePluginContext } from '../../hooks/use_plugin_context';
|
||||
import { decorateResponse } from './decorate_response';
|
||||
import { LazyAlertsFlyout } from '../..';
|
||||
|
||||
interface AlertsTableTGridProps {
|
||||
indexName: string;
|
||||
rangeFrom: string;
|
||||
rangeTo: string;
|
||||
kuery: string;
|
||||
status: string;
|
||||
setRefetch: (ref: () => void) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface,
|
||||
* plus additional TGrid column properties
|
||||
*/
|
||||
export const columns: Array<
|
||||
Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions
|
||||
> = [
|
||||
{
|
||||
columnHeaderType: 'not-filtered',
|
||||
displayAsText: i18n.translate('xpack.observability.alertsTGrid.statusColumnDescription', {
|
||||
defaultMessage: 'Status',
|
||||
}),
|
||||
id: ALERT_STATUS,
|
||||
initialWidth: 79,
|
||||
},
|
||||
{
|
||||
columnHeaderType: 'not-filtered',
|
||||
displayAsText: i18n.translate('xpack.observability.alertsTGrid.triggeredColumnDescription', {
|
||||
defaultMessage: 'Triggered',
|
||||
}),
|
||||
id: ALERT_START,
|
||||
initialWidth: 116,
|
||||
},
|
||||
{
|
||||
columnHeaderType: 'not-filtered',
|
||||
displayAsText: i18n.translate('xpack.observability.alertsTGrid.durationColumnDescription', {
|
||||
defaultMessage: 'Duration',
|
||||
}),
|
||||
id: ALERT_DURATION,
|
||||
initialWidth: 116,
|
||||
},
|
||||
{
|
||||
columnHeaderType: 'not-filtered',
|
||||
displayAsText: i18n.translate('xpack.observability.alertsTGrid.severityColumnDescription', {
|
||||
defaultMessage: 'Severity',
|
||||
}),
|
||||
id: ALERT_SEVERITY_LEVEL,
|
||||
initialWidth: 102,
|
||||
},
|
||||
{
|
||||
columnHeaderType: 'not-filtered',
|
||||
displayAsText: i18n.translate('xpack.observability.alertsTGrid.reasonColumnDescription', {
|
||||
defaultMessage: 'Reason',
|
||||
}),
|
||||
linkField: '*',
|
||||
id: RULE_NAME,
|
||||
initialWidth: 400,
|
||||
},
|
||||
];
|
||||
|
||||
const NO_ROW_RENDER: RowRenderer[] = [];
|
||||
|
||||
const trailingControlColumns: never[] = [];
|
||||
|
||||
export function AlertsTableTGrid(props: AlertsTableTGridProps) {
|
||||
const { core, observabilityRuleTypeRegistry } = usePluginContext();
|
||||
const { prepend } = core.http.basePath;
|
||||
const { indexName, rangeFrom, rangeTo, kuery, status, setRefetch } = props;
|
||||
const [flyoutAlert, setFlyoutAlert] = useState<TopAlert | undefined>(undefined);
|
||||
const handleFlyoutClose = () => setFlyoutAlert(undefined);
|
||||
const { timelines } = useKibana<{ timelines: TimelinesUIStart }>().services;
|
||||
|
||||
const leadingControlColumns = [
|
||||
{
|
||||
id: 'expand',
|
||||
width: 40,
|
||||
headerCellRender: () => null,
|
||||
rowCellRender: ({ data }: ActionProps) => {
|
||||
const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
|
||||
const decoratedAlerts = decorateResponse(
|
||||
[dataFieldEs] ?? [],
|
||||
observabilityRuleTypeRegistry
|
||||
);
|
||||
const alert = decoratedAlerts[0];
|
||||
return (
|
||||
<EuiButtonIcon
|
||||
size="s"
|
||||
iconType="expand"
|
||||
color="text"
|
||||
onClick={() => setFlyoutAlert(alert)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'view_in_app',
|
||||
width: 40,
|
||||
headerCellRender: () => null,
|
||||
rowCellRender: ({ data }: ActionProps) => {
|
||||
const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
|
||||
const decoratedAlerts = decorateResponse(
|
||||
[dataFieldEs] ?? [],
|
||||
observabilityRuleTypeRegistry
|
||||
);
|
||||
const alert = decoratedAlerts[0];
|
||||
return (
|
||||
<EuiButtonIcon
|
||||
size="s"
|
||||
target="_blank"
|
||||
rel="nofollow noreferrer"
|
||||
href={prepend(alert.link ?? '')}
|
||||
iconType="inspect"
|
||||
color="text"
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{flyoutAlert && (
|
||||
<Suspense fallback={null}>
|
||||
<LazyAlertsFlyout
|
||||
alert={flyoutAlert}
|
||||
observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
|
||||
onClose={handleFlyoutClose}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
{timelines.getTGrid<'standalone'>({
|
||||
type: 'standalone',
|
||||
columns,
|
||||
deletedEventIds: [],
|
||||
end: rangeTo,
|
||||
filters: [],
|
||||
indexNames: [indexName],
|
||||
itemsPerPage: 10,
|
||||
itemsPerPageOptions: [10, 25, 50],
|
||||
loadingText: i18n.translate('xpack.observability.alertsTable.loadingTextLabel', {
|
||||
defaultMessage: 'loading alerts',
|
||||
}),
|
||||
footerText: i18n.translate('xpack.observability.alertsTable.footerTextLabel', {
|
||||
defaultMessage: 'alerts',
|
||||
}),
|
||||
query: {
|
||||
query: `${ALERT_STATUS}: ${status}${kuery !== '' ? ` and ${kuery}` : ''}`,
|
||||
language: 'kuery',
|
||||
},
|
||||
renderCellValue: getRenderCellValue({ rangeFrom, rangeTo, setFlyoutAlert }),
|
||||
rowRenderers: NO_ROW_RENDER,
|
||||
start: rangeFrom,
|
||||
setRefetch,
|
||||
sort: [
|
||||
{
|
||||
columnId: '@timestamp',
|
||||
columnType: 'date',
|
||||
sortDirection: 'desc',
|
||||
},
|
||||
],
|
||||
leadingControlColumns,
|
||||
trailingControlColumns,
|
||||
unit: (totalAlerts: number) =>
|
||||
i18n.translate('xpack.observability.alertsTable.showingAlertsTitle', {
|
||||
values: { totalAlerts },
|
||||
defaultMessage: '{totalAlerts, plural, =1 {alert} other {alerts}}',
|
||||
}),
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import {
|
||||
EuiButtonEmpty,
|
||||
EuiButtonIcon,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPopover,
|
||||
EuiPopoverTitle,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { RULE_ID, RULE_NAME } from '@kbn/rule-data-utils/target/technical_field_names';
|
||||
import React, { useState } from 'react';
|
||||
import { format, parse } from 'url';
|
||||
|
||||
import { parseTechnicalFields } from '../../../../rule_registry/common/parse_technical_fields';
|
||||
import type { ActionProps } from '../../../../timelines/common';
|
||||
import { asDuration, asPercent } from '../../../common/utils/formatters';
|
||||
import { usePluginContext } from '../../hooks/use_plugin_context';
|
||||
|
||||
export function RowCellActionsRender({ data }: ActionProps) {
|
||||
const { core, observabilityRuleTypeRegistry } = usePluginContext();
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
const { prepend } = core.http.basePath;
|
||||
const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
|
||||
const parsedFields = parseTechnicalFields(dataFieldEs);
|
||||
const formatter = observabilityRuleTypeRegistry.getFormatter(parsedFields[RULE_ID]!);
|
||||
const formatted = {
|
||||
link: undefined,
|
||||
reason: parsedFields[RULE_NAME]!,
|
||||
...(formatter?.({ fields: parsedFields, formatters: { asDuration, asPercent } }) ?? {}),
|
||||
};
|
||||
|
||||
const parsedLink = formatted.link ? parse(formatted.link, true) : undefined;
|
||||
const link = parsedLink
|
||||
? format({
|
||||
...parsedLink,
|
||||
query: {
|
||||
...parsedLink.query,
|
||||
rangeFrom: 'now-24h',
|
||||
rangeTo: 'now',
|
||||
},
|
||||
})
|
||||
: undefined;
|
||||
return (
|
||||
<div>
|
||||
<EuiPopover
|
||||
isOpen={isPopoverOpen}
|
||||
panelPaddingSize="s"
|
||||
anchorPosition="upCenter"
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
aria-label="show actions"
|
||||
iconType="boxesHorizontal"
|
||||
color="text"
|
||||
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
|
||||
/>
|
||||
}
|
||||
closePopover={() => setIsPopoverOpen(false)}
|
||||
>
|
||||
<EuiPopoverTitle>Actions</EuiPopoverTitle>
|
||||
<div style={{ width: 150 }}>
|
||||
<EuiButtonEmpty href={prepend(link ?? '')}>
|
||||
<EuiFlexGroup alignItems="center" component="span" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonIcon aria-label="view in app" iconType="link" color="text" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
{i18n.translate('xpack.observability.alertsTable.viewInAppButtonLabel', {
|
||||
defaultMessage: 'View in app',
|
||||
})}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiButtonEmpty>
|
||||
</div>
|
||||
</EuiPopover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,21 +7,20 @@
|
|||
|
||||
import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import React, { useCallback, useMemo, useRef } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { ParsedTechnicalFields } from '../../../../rule_registry/common/parse_technical_fields';
|
||||
import type { AlertStatus } from '../../../common/typings';
|
||||
import { ExperimentalBadge } from '../../components/shared/experimental_badge';
|
||||
import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
|
||||
import { useFetcher } from '../../hooks/use_fetcher';
|
||||
import { usePluginContext } from '../../hooks/use_plugin_context';
|
||||
import { RouteParams } from '../../routes';
|
||||
import { callObservabilityApi } from '../../services/call_observability_api';
|
||||
import type { ObservabilityAPIReturnType } from '../../services/call_observability_api/types';
|
||||
import { getAbsoluteDateRange } from '../../utils/date';
|
||||
import { AlertsSearchBar } from './alerts_search_bar';
|
||||
import { AlertsTable } from './alerts_table';
|
||||
import { AlertsTableTGrid } from './alerts_table_t_grid';
|
||||
import { StatusFilter } from './status_filter';
|
||||
import { useFetcher } from '../../hooks/use_fetcher';
|
||||
import { callObservabilityApi } from '../../services/call_observability_api';
|
||||
|
||||
export type TopAlertResponse = ObservabilityAPIReturnType<'GET /api/observability/rules/alerts/top'>[number];
|
||||
|
||||
|
|
@ -41,6 +40,7 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
|
|||
const { core, ObservabilityPageTemplate } = usePluginContext();
|
||||
const { prepend } = core.http.basePath;
|
||||
const history = useHistory();
|
||||
const refetch = useRef<() => void>();
|
||||
const {
|
||||
query: { rangeFrom = 'now-15m', rangeTo = 'now', kuery = '', status = 'open' },
|
||||
} = routeParams;
|
||||
|
|
@ -59,37 +59,52 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
|
|||
'/app/management/insightsAndAlerting/triggersActions/alerts'
|
||||
);
|
||||
|
||||
const { data: alerts } = useFetcher(
|
||||
({ signal }) => {
|
||||
const { start, end } = getAbsoluteDateRange({ rangeFrom, rangeTo });
|
||||
const { data: dynamicIndexPatternResp } = useFetcher(({ signal }) => {
|
||||
return callObservabilityApi({
|
||||
signal,
|
||||
endpoint: 'GET /api/observability/rules/alerts/dynamic_index_pattern',
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!start || !end) {
|
||||
return;
|
||||
}
|
||||
return callObservabilityApi({
|
||||
signal,
|
||||
endpoint: 'GET /api/observability/rules/alerts/top',
|
||||
params: {
|
||||
query: {
|
||||
start,
|
||||
end,
|
||||
kuery,
|
||||
status,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[kuery, rangeFrom, rangeTo, status]
|
||||
const dynamicIndexPattern = useMemo(
|
||||
() => (dynamicIndexPatternResp ? [dynamicIndexPatternResp] : []),
|
||||
[dynamicIndexPatternResp]
|
||||
);
|
||||
|
||||
function setStatusFilter(value: AlertStatus) {
|
||||
const nextSearchParams = new URLSearchParams(history.location.search);
|
||||
nextSearchParams.set('status', value);
|
||||
history.push({
|
||||
...history.location,
|
||||
search: nextSearchParams.toString(),
|
||||
});
|
||||
}
|
||||
const setStatusFilter = useCallback(
|
||||
(value: AlertStatus) => {
|
||||
const nextSearchParams = new URLSearchParams(history.location.search);
|
||||
nextSearchParams.set('status', value);
|
||||
history.push({
|
||||
...history.location,
|
||||
search: nextSearchParams.toString(),
|
||||
});
|
||||
},
|
||||
[history]
|
||||
);
|
||||
|
||||
const onQueryChange = useCallback(
|
||||
({ dateRange, query }) => {
|
||||
if (rangeFrom === dateRange.from && rangeTo === dateRange.to && kuery === (query ?? '')) {
|
||||
return refetch.current && refetch.current();
|
||||
}
|
||||
const nextSearchParams = new URLSearchParams(history.location.search);
|
||||
|
||||
nextSearchParams.set('rangeFrom', dateRange.from);
|
||||
nextSearchParams.set('rangeTo', dateRange.to);
|
||||
nextSearchParams.set('kuery', query ?? '');
|
||||
|
||||
history.push({
|
||||
...history.location,
|
||||
search: nextSearchParams.toString(),
|
||||
});
|
||||
},
|
||||
[history, rangeFrom, rangeTo, kuery]
|
||||
);
|
||||
|
||||
const setRefetch = useCallback((ref) => {
|
||||
refetch.current = ref;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ObservabilityPageTemplate
|
||||
|
|
@ -135,21 +150,11 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
|
|||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<AlertsSearchBar
|
||||
dynamicIndexPattern={dynamicIndexPattern}
|
||||
rangeFrom={rangeFrom}
|
||||
rangeTo={rangeTo}
|
||||
query={kuery}
|
||||
onQueryChange={({ dateRange, query }) => {
|
||||
const nextSearchParams = new URLSearchParams(history.location.search);
|
||||
|
||||
nextSearchParams.set('rangeFrom', dateRange.from);
|
||||
nextSearchParams.set('rangeTo', dateRange.to);
|
||||
nextSearchParams.set('kuery', query ?? '');
|
||||
|
||||
history.push({
|
||||
...history.location,
|
||||
search: nextSearchParams.toString(),
|
||||
});
|
||||
}}
|
||||
onQueryChange={onQueryChange}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiSpacer size="s" />
|
||||
|
|
@ -162,7 +167,14 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
|
|||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<AlertsTable items={alerts ?? []} />
|
||||
<AlertsTableTGrid
|
||||
indexName={dynamicIndexPattern.length > 0 ? dynamicIndexPattern[0].title : ''}
|
||||
rangeFrom={rangeFrom}
|
||||
rangeTo={rangeTo}
|
||||
kuery={kuery}
|
||||
status={status}
|
||||
setRefetch={setRefetch}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiIconTip, EuiLink } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import {
|
||||
ALERT_DURATION,
|
||||
ALERT_SEVERITY_LEVEL,
|
||||
ALERT_STATUS,
|
||||
ALERT_START,
|
||||
RULE_NAME,
|
||||
} from '@kbn/rule-data-utils/target/technical_field_names';
|
||||
|
||||
import type { CellValueElementProps, TimelineNonEcsData } from '../../../../timelines/common';
|
||||
import { TimestampTooltip } from '../../components/shared/timestamp_tooltip';
|
||||
import { asDuration } from '../../../common/utils/formatters';
|
||||
import { SeverityBadge } from './severity_badge';
|
||||
import { TopAlert } from '.';
|
||||
import { decorateResponse } from './decorate_response';
|
||||
import { usePluginContext } from '../../hooks/use_plugin_context';
|
||||
|
||||
const getMappedNonEcsValue = ({
|
||||
data,
|
||||
fieldName,
|
||||
}: {
|
||||
data: TimelineNonEcsData[];
|
||||
fieldName: string;
|
||||
}): string[] | undefined => {
|
||||
const item = data.find((d) => d.field === fieldName);
|
||||
if (item != null && item.value != null) {
|
||||
return item.value;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* This implementation of `EuiDataGrid`'s `renderCellValue`
|
||||
* accepts `EuiDataGridCellValueElementProps`, plus `data`
|
||||
* from the TGrid
|
||||
*/
|
||||
export const getRenderCellValue = ({
|
||||
rangeTo,
|
||||
rangeFrom,
|
||||
setFlyoutAlert,
|
||||
}: {
|
||||
rangeTo: string;
|
||||
rangeFrom: string;
|
||||
setFlyoutAlert: (data: TopAlert) => void;
|
||||
}) => {
|
||||
return ({ columnId, data, linkValues }: CellValueElementProps) => {
|
||||
const { observabilityRuleTypeRegistry } = usePluginContext();
|
||||
const value = getMappedNonEcsValue({
|
||||
data,
|
||||
fieldName: columnId,
|
||||
})?.reduce((x) => x[0]);
|
||||
|
||||
switch (columnId) {
|
||||
case ALERT_STATUS:
|
||||
return value !== 'closed' ? (
|
||||
<EuiIconTip
|
||||
content={i18n.translate('xpack.observability.alertsTGrid.statusOpenDescription', {
|
||||
defaultMessage: 'Open',
|
||||
})}
|
||||
color="danger"
|
||||
type="alert"
|
||||
/>
|
||||
) : (
|
||||
<EuiIconTip
|
||||
content={i18n.translate('xpack.observability.alertsTGrid.statusClosedDescription', {
|
||||
defaultMessage: 'Closed',
|
||||
})}
|
||||
type="check"
|
||||
/>
|
||||
);
|
||||
case ALERT_START:
|
||||
return <TimestampTooltip time={new Date(value ?? '').getTime()} timeUnit="milliseconds" />;
|
||||
case ALERT_DURATION:
|
||||
return asDuration(Number(value), { extended: true });
|
||||
case ALERT_SEVERITY_LEVEL:
|
||||
return <SeverityBadge severityLevel={value ?? undefined} />;
|
||||
case RULE_NAME:
|
||||
const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
|
||||
const decoratedAlerts = decorateResponse(
|
||||
[dataFieldEs] ?? [],
|
||||
observabilityRuleTypeRegistry
|
||||
);
|
||||
const alert = decoratedAlerts[0];
|
||||
|
||||
return (
|
||||
<EuiLink onClick={() => setFlyoutAlert && setFlyoutAlert(alert)}>{alert.reason}</EuiLink>
|
||||
);
|
||||
default:
|
||||
return <>{value}</>;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
{ "path": "../cases/tsconfig.json" },
|
||||
{ "path": "../lens/tsconfig.json" },
|
||||
{ "path": "../rule_registry/tsconfig.json" },
|
||||
{ "path": "../timelines/tsconfig.json"},
|
||||
{ "path": "../translations/tsconfig.json" }
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,22 +6,56 @@
|
|||
*/
|
||||
import { Optional } from 'utility-types';
|
||||
import { mapValues, pickBy } from 'lodash';
|
||||
import { either } from 'fp-ts/lib/Either';
|
||||
import * as t from 'io-ts';
|
||||
import { FieldMap } from './types';
|
||||
|
||||
const NumberFromString = new t.Type(
|
||||
'NumberFromString',
|
||||
(u): u is number => typeof u === 'number',
|
||||
(u, c) =>
|
||||
either.chain(t.string.validate(u, c), (s) => {
|
||||
const d = Number(s);
|
||||
return isNaN(d) ? t.failure(u, c) : t.success(d);
|
||||
}),
|
||||
(a) => a
|
||||
);
|
||||
|
||||
const BooleanFromString = new t.Type(
|
||||
'BooleanFromString',
|
||||
(u): u is boolean => typeof u === 'boolean',
|
||||
(u, c) =>
|
||||
either.chain(t.string.validate(u, c), (s) => {
|
||||
switch (s.toLowerCase().trim()) {
|
||||
case '1':
|
||||
case 'true':
|
||||
case 'yes':
|
||||
return t.success(true);
|
||||
case '0':
|
||||
case 'false':
|
||||
case 'no':
|
||||
case null:
|
||||
return t.success(false);
|
||||
default:
|
||||
return t.failure(u, c);
|
||||
}
|
||||
}),
|
||||
(a) => a
|
||||
);
|
||||
|
||||
const esFieldTypeMap = {
|
||||
keyword: t.string,
|
||||
text: t.string,
|
||||
date: t.string,
|
||||
boolean: t.boolean,
|
||||
byte: t.number,
|
||||
long: t.number,
|
||||
integer: t.number,
|
||||
short: t.number,
|
||||
double: t.number,
|
||||
float: t.number,
|
||||
scaled_float: t.number,
|
||||
unsigned_long: t.number,
|
||||
boolean: t.union([t.number, BooleanFromString]),
|
||||
byte: t.union([t.number, NumberFromString]),
|
||||
long: t.union([t.number, NumberFromString]),
|
||||
integer: t.union([t.number, NumberFromString]),
|
||||
short: t.union([t.number, NumberFromString]),
|
||||
double: t.union([t.number, NumberFromString]),
|
||||
float: t.union([t.number, NumberFromString]),
|
||||
scaled_float: t.union([t.number, NumberFromString]),
|
||||
unsigned_long: t.union([t.number, NumberFromString]),
|
||||
flattened: t.record(t.string, t.array(t.string)),
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ export const EventsCountComponent = ({
|
|||
itemsCount: number;
|
||||
onClick: () => void;
|
||||
serverSideEventCount: number;
|
||||
footerText: string;
|
||||
footerText: string | React.ReactNode;
|
||||
}) => {
|
||||
const totalCount = useMemo(() => (serverSideEventCount > 0 ? serverSideEventCount : 0), [
|
||||
serverSideEventCount,
|
||||
|
|
@ -164,7 +164,13 @@ export const EventsCountComponent = ({
|
|||
>
|
||||
<EuiContextMenuPanel items={items} data-test-subj="timelinePickSizeRow" />
|
||||
</PopoverRowItems>
|
||||
<EuiToolTip content={`${totalCount} ${footerText}`}>
|
||||
<EuiToolTip
|
||||
content={
|
||||
<>
|
||||
{totalCount} {footerText}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ServerSideEventCount>
|
||||
<EuiBadge color="hollow" data-test-subj="server-side-event-count">
|
||||
{totalCount}
|
||||
|
|
|
|||
|
|
@ -26,13 +26,15 @@ type TGridComponent = TGridProps & {
|
|||
store?: Store;
|
||||
storage: Storage;
|
||||
data?: DataPublicPluginStart;
|
||||
setStore: (store: Store) => void;
|
||||
};
|
||||
|
||||
export const TGrid = (props: TGridComponent) => {
|
||||
const { store, storage, ...tGridProps } = props;
|
||||
const { store, storage, setStore, ...tGridProps } = props;
|
||||
let tGridStore = store;
|
||||
if (!tGridStore && props.type === 'standalone') {
|
||||
tGridStore = createStore(initialTGridState, storage);
|
||||
setStore(tGridStore);
|
||||
}
|
||||
let browserFields = EMPTY_BROWSER_FIELDS;
|
||||
if ((tGridProps as TGridIntegratedProps).browserFields != null) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ SpinnerFlexItem.displayName = 'SpinnerFlexItem';
|
|||
|
||||
export interface LoadingPanelProps {
|
||||
dataTestSubj?: string;
|
||||
text: string;
|
||||
text: string | React.ReactNode;
|
||||
height: number | string;
|
||||
showBorder?: boolean;
|
||||
width: number | string;
|
||||
|
|
|
|||
|
|
@ -23,17 +23,18 @@ export const getColumnHeaders = (
|
|||
headers: ColumnHeaderOptions[],
|
||||
browserFields: BrowserFields
|
||||
): ColumnHeaderOptions[] => {
|
||||
return headers.map((header) => {
|
||||
const splitHeader = header.id.split('.'); // source.geo.city_name -> [source, geo, city_name]
|
||||
|
||||
return {
|
||||
...header,
|
||||
...get(
|
||||
[splitHeader.length > 1 ? splitHeader[0] : 'base', 'fields', header.id],
|
||||
browserFields
|
||||
),
|
||||
};
|
||||
});
|
||||
return headers
|
||||
? headers.map((header) => {
|
||||
const splitHeader = header.id.split('.'); // source.geo.city_name -> [source, geo, city_name]
|
||||
return {
|
||||
...header,
|
||||
...get(
|
||||
[splitHeader.length > 1 ? splitHeader[0] : 'base', 'fields', header.id],
|
||||
browserFields
|
||||
),
|
||||
};
|
||||
})
|
||||
: [];
|
||||
};
|
||||
|
||||
export const getColumnWidthFromType = (type: string): number =>
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ const TgridActionTdCell = ({
|
|||
rowIndex,
|
||||
hasRowRenderers,
|
||||
onRuleChange,
|
||||
selectedEventIds,
|
||||
selectedEventIds = {},
|
||||
showCheckboxes,
|
||||
showNotes = false,
|
||||
tabType,
|
||||
|
|
@ -267,7 +267,7 @@ export const DataDrivenColumns = React.memo<DataDrivenColumnProps>(
|
|||
hasRowRenderers,
|
||||
onRuleChange,
|
||||
renderCellValue,
|
||||
selectedEventIds,
|
||||
selectedEventIds = {},
|
||||
showCheckboxes,
|
||||
tabType,
|
||||
timelineId,
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export const EventColumnView = React.memo<Props>(
|
|||
hasRowRenderers,
|
||||
onRuleChange,
|
||||
renderCellValue,
|
||||
selectedEventIds,
|
||||
selectedEventIds = {},
|
||||
showCheckboxes,
|
||||
tabType,
|
||||
timelineId,
|
||||
|
|
@ -82,7 +82,6 @@ export const EventColumnView = React.memo<Props>(
|
|||
.join(' '),
|
||||
[columnHeaders, data]
|
||||
);
|
||||
|
||||
const leadingActionCells = useMemo(
|
||||
() =>
|
||||
leadingControlColumns ? leadingControlColumns.map((column) => column.rowCellRender) : [],
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export const EventsCountComponent = ({
|
|||
itemsCount: number;
|
||||
onClick: () => void;
|
||||
serverSideEventCount: number;
|
||||
footerText: string;
|
||||
footerText: string | React.ReactNode;
|
||||
}) => {
|
||||
const totalCount = useMemo(() => (serverSideEventCount > 0 ? serverSideEventCount : 0), [
|
||||
serverSideEventCount,
|
||||
|
|
@ -144,7 +144,7 @@ export const EventsCountComponent = ({
|
|||
>
|
||||
<EuiContextMenuPanel items={items} data-test-subj="timelinePickSizeRow" />
|
||||
</PopoverRowItems>
|
||||
<EuiToolTip content={`${totalCount} ${footerText}`}>
|
||||
<EuiToolTip content={`${totalCount} ${footerText?.toString()}`}>
|
||||
<ServerSideEventCount>
|
||||
<EuiBadge color="hollow" data-test-subj="server-side-event-count">
|
||||
{totalCount}
|
||||
|
|
@ -305,7 +305,7 @@ export const FooterComponent = ({
|
|||
data-test-subj="LoadingPanelTimeline"
|
||||
height="35px"
|
||||
showBorder={false}
|
||||
text={`${loadingText}...`}
|
||||
text={loadingText}
|
||||
width="100%"
|
||||
/>
|
||||
</LoadingPanelContainer>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ import { StatefulBody } from '../body';
|
|||
import { Footer, footerHeight } from '../footer';
|
||||
import { SELECTOR_TIMELINE_GLOBAL_CONTAINER } from '../styles';
|
||||
import * as i18n from './translations';
|
||||
import { InspectButtonContainer } from '../../inspect';
|
||||
|
||||
export const EVENTS_VIEWER_HEADER_HEIGHT = 90; // px
|
||||
const UTILITY_BAR_HEIGHT = 19; // px
|
||||
|
|
@ -103,7 +104,9 @@ export interface TGridStandaloneProps {
|
|||
columns: ColumnHeaderOptions[];
|
||||
deletedEventIds: Readonly<string[]>;
|
||||
end: string;
|
||||
loadingText: React.ReactNode;
|
||||
filters: Filter[];
|
||||
footerText: React.ReactNode;
|
||||
headerFilterGroup?: React.ReactNode;
|
||||
height?: number;
|
||||
indexNames: string[];
|
||||
|
|
@ -113,6 +116,7 @@ export interface TGridStandaloneProps {
|
|||
onRuleChange?: () => void;
|
||||
renderCellValue: (props: CellValueElementProps) => React.ReactNode;
|
||||
rowRenderers: RowRenderer[];
|
||||
setRefetch: (ref: () => void) => void;
|
||||
start: string;
|
||||
sort: SortColumnTimeline[];
|
||||
utilityBar?: (refetch: Refetch, totalCount: number) => React.ReactNode;
|
||||
|
|
@ -120,13 +124,17 @@ export interface TGridStandaloneProps {
|
|||
leadingControlColumns: ControlColumnProps[];
|
||||
trailingControlColumns: ControlColumnProps[];
|
||||
data?: DataPublicPluginStart;
|
||||
unit: (total: number) => React.ReactNode;
|
||||
}
|
||||
const basicUnit = (n: number) => i18n.UNIT(n);
|
||||
|
||||
const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
|
||||
columns,
|
||||
deletedEventIds,
|
||||
end,
|
||||
loadingText,
|
||||
filters,
|
||||
footerText,
|
||||
headerFilterGroup,
|
||||
indexNames,
|
||||
itemsPerPage,
|
||||
|
|
@ -135,6 +143,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
|
|||
query,
|
||||
renderCellValue,
|
||||
rowRenderers,
|
||||
setRefetch,
|
||||
start,
|
||||
sort,
|
||||
utilityBar,
|
||||
|
|
@ -142,6 +151,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
|
|||
leadingControlColumns,
|
||||
trailingControlColumns,
|
||||
data,
|
||||
unit = basicUnit,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
|
||||
|
|
@ -155,7 +165,6 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
|
|||
queryFields,
|
||||
title,
|
||||
} = useDeepEqualSelector((state) => getTGrid(state, STANDALONE_ID ?? ''));
|
||||
const unit = useMemo(() => (n: number) => i18n.UNIT(n), []);
|
||||
useEffect(() => {
|
||||
dispatch(tGridActions.updateIsLoading({ id: STANDALONE_ID, isLoading: isQueryLoading }));
|
||||
}, [dispatch, isQueryLoading]);
|
||||
|
|
@ -216,6 +225,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
|
|||
skip: !canQueryTimeline,
|
||||
data,
|
||||
});
|
||||
setRefetch(refetch);
|
||||
|
||||
const totalCountMinusDeleted = useMemo(
|
||||
() => (totalCount > 0 ? totalCount - deletedEventIds.length : 0),
|
||||
|
|
@ -268,71 +278,81 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
|
|||
showCheckboxes: false,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
tGridActions.initializeTGridSettings({
|
||||
footerText,
|
||||
id: STANDALONE_ID,
|
||||
loadingText,
|
||||
unit,
|
||||
})
|
||||
);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<StyledEuiPanel data-test-subj="events-viewer-panel" $isFullScreen={false}>
|
||||
{canQueryTimeline ? (
|
||||
<>
|
||||
<HeaderSection
|
||||
id={!resolverIsShowing(graphEventId) ? STANDALONE_ID : undefined}
|
||||
inspect={inspect}
|
||||
loading={loading}
|
||||
height={headerFilterGroup ? COMPACT_HEADER_HEIGHT : EVENTS_VIEWER_HEADER_HEIGHT}
|
||||
subtitle={utilityBar ? undefined : subtitle}
|
||||
title={justTitle}
|
||||
// title={globalFullScreen ? titleWithExitFullScreen : justTitle}
|
||||
>
|
||||
{HeaderSectionContent}
|
||||
</HeaderSection>
|
||||
{utilityBar && !resolverIsShowing(graphEventId) && (
|
||||
<UtilityBar>{utilityBar?.(refetch, totalCountMinusDeleted)}</UtilityBar>
|
||||
)}
|
||||
<EventsContainerLoading
|
||||
data-timeline-id={STANDALONE_ID}
|
||||
data-test-subj={`events-container-loading-${loading}`}
|
||||
>
|
||||
<FullWidthFlexGroup $visible={!graphEventId} gutterSize="none">
|
||||
<ScrollableFlexItem grow={1}>
|
||||
<StatefulBody
|
||||
activePage={pageInfo.activePage}
|
||||
browserFields={EMPTY_BROWSER_FIELDS}
|
||||
data={nonDeletedEvents}
|
||||
id={STANDALONE_ID}
|
||||
isEventViewer={true}
|
||||
onRuleChange={onRuleChange}
|
||||
renderCellValue={renderCellValue}
|
||||
rowRenderers={rowRenderers}
|
||||
sort={sort}
|
||||
tabType={TimelineTabs.query}
|
||||
totalPages={calculateTotalPages({
|
||||
itemsCount: totalCountMinusDeleted,
|
||||
itemsPerPage: itemsPerPageStore,
|
||||
})}
|
||||
leadingControlColumns={leadingControlColumns}
|
||||
trailingControlColumns={trailingControlColumns}
|
||||
/>
|
||||
<Footer
|
||||
activePage={pageInfo.activePage}
|
||||
data-test-subj="events-viewer-footer"
|
||||
updatedAt={updatedAt}
|
||||
height={footerHeight}
|
||||
id={STANDALONE_ID}
|
||||
isLive={false}
|
||||
isLoading={loading}
|
||||
itemsCount={nonDeletedEvents.length}
|
||||
itemsPerPage={itemsPerPageStore}
|
||||
itemsPerPageOptions={itemsPerPageOptionsStore}
|
||||
onChangePage={loadPage}
|
||||
totalCount={totalCountMinusDeleted}
|
||||
/>
|
||||
</ScrollableFlexItem>
|
||||
</FullWidthFlexGroup>
|
||||
</EventsContainerLoading>
|
||||
</>
|
||||
) : null}
|
||||
</StyledEuiPanel>
|
||||
<InspectButtonContainer>
|
||||
<StyledEuiPanel data-test-subj="events-viewer-panel" $isFullScreen={false}>
|
||||
{canQueryTimeline ? (
|
||||
<>
|
||||
<HeaderSection
|
||||
id={!resolverIsShowing(graphEventId) ? STANDALONE_ID : undefined}
|
||||
inspect={inspect}
|
||||
loading={loading}
|
||||
height={headerFilterGroup ? COMPACT_HEADER_HEIGHT : EVENTS_VIEWER_HEADER_HEIGHT}
|
||||
subtitle={utilityBar ? undefined : subtitle}
|
||||
title={justTitle}
|
||||
// title={globalFullScreen ? titleWithExitFullScreen : justTitle}
|
||||
>
|
||||
{HeaderSectionContent}
|
||||
</HeaderSection>
|
||||
{utilityBar && !resolverIsShowing(graphEventId) && (
|
||||
<UtilityBar>{utilityBar?.(refetch, totalCountMinusDeleted)}</UtilityBar>
|
||||
)}
|
||||
<EventsContainerLoading
|
||||
data-timeline-id={STANDALONE_ID}
|
||||
data-test-subj={`events-container-loading-${loading}`}
|
||||
>
|
||||
<FullWidthFlexGroup $visible={!graphEventId} gutterSize="none">
|
||||
<ScrollableFlexItem grow={1}>
|
||||
<StatefulBody
|
||||
activePage={pageInfo.activePage}
|
||||
browserFields={EMPTY_BROWSER_FIELDS}
|
||||
data={nonDeletedEvents}
|
||||
id={STANDALONE_ID}
|
||||
isEventViewer={true}
|
||||
onRuleChange={onRuleChange}
|
||||
renderCellValue={renderCellValue}
|
||||
rowRenderers={rowRenderers}
|
||||
sort={sort}
|
||||
tabType={TimelineTabs.query}
|
||||
totalPages={calculateTotalPages({
|
||||
itemsCount: totalCountMinusDeleted,
|
||||
itemsPerPage: itemsPerPageStore,
|
||||
})}
|
||||
leadingControlColumns={leadingControlColumns}
|
||||
trailingControlColumns={trailingControlColumns}
|
||||
/>
|
||||
<Footer
|
||||
activePage={pageInfo.activePage}
|
||||
data-test-subj="events-viewer-footer"
|
||||
updatedAt={updatedAt}
|
||||
height={footerHeight}
|
||||
id={STANDALONE_ID}
|
||||
isLive={false}
|
||||
isLoading={loading}
|
||||
itemsCount={nonDeletedEvents.length}
|
||||
itemsPerPage={itemsPerPageStore}
|
||||
itemsPerPageOptions={itemsPerPageOptionsStore}
|
||||
onChangePage={loadPage}
|
||||
totalCount={totalCountMinusDeleted}
|
||||
/>
|
||||
</ScrollableFlexItem>
|
||||
</FullWidthFlexGroup>
|
||||
</EventsContainerLoading>
|
||||
</>
|
||||
) : null}
|
||||
</StyledEuiPanel>
|
||||
</InspectButtonContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ import React from 'react';
|
|||
|
||||
import type { TGridProps } from '../types';
|
||||
import { TGridIntegrated, TGridIntegratedProps } from './t_grid/integrated';
|
||||
import { TGridStandalone } from './t_grid/standalone';
|
||||
import { TGridStandalone, TGridStandaloneProps } from './t_grid/standalone';
|
||||
|
||||
export const TGrid = (props: TGridProps) => {
|
||||
const { type, ...componentsProps } = props;
|
||||
if (type === 'standalone') {
|
||||
return <TGridStandalone {...componentsProps} />;
|
||||
return <TGridStandalone {...((componentsProps as unknown) as TGridStandaloneProps)} />;
|
||||
} else if (type === 'embedded') {
|
||||
return <TGridIntegrated {...((componentsProps as unknown) as TGridIntegratedProps)} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,21 @@ import { LastUpdatedAtProps, LoadingPanelProps } from '../components';
|
|||
const TimelineLazy = lazy(() => import('../components'));
|
||||
export const getTGridLazy = (
|
||||
props: TGridProps,
|
||||
{ store, storage, data }: { store?: Store; storage: Storage; data: DataPublicPluginStart }
|
||||
{
|
||||
store,
|
||||
storage,
|
||||
data,
|
||||
setStore,
|
||||
}: {
|
||||
store?: Store;
|
||||
storage: Storage;
|
||||
data: DataPublicPluginStart;
|
||||
setStore: (store: Store) => void;
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<Suspense fallback={<EuiLoadingSpinner />}>
|
||||
<TimelineLazy {...props} store={store} storage={storage} data={data} />
|
||||
<TimelineLazy {...props} store={store} storage={storage} data={data} setStore={setStore} />
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ export class TimelinesPlugin implements Plugin<void, TimelinesUIStart> {
|
|||
return getTGridLazy(props, {
|
||||
store: this._store,
|
||||
storage: this._storage,
|
||||
setStore: this.setStore.bind(this),
|
||||
data,
|
||||
});
|
||||
},
|
||||
|
|
@ -60,12 +61,15 @@ export class TimelinesPlugin implements Plugin<void, TimelinesUIStart> {
|
|||
getUseDraggableKeyboardWrapper: () => {
|
||||
return useDraggableKeyboardWrapper;
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
setTGridEmbeddedStore: (store: any) => {
|
||||
this._store = store;
|
||||
setTGridEmbeddedStore: (store: Store) => {
|
||||
this.setStore(store);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
private setStore(store: Store) {
|
||||
this._store = store;
|
||||
}
|
||||
|
||||
public stop() {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -234,7 +234,6 @@ export const updateTimelineColumns = ({
|
|||
timelineById,
|
||||
}: UpdateTimelineColumnsParams): TimelineById => {
|
||||
const timeline = timelineById[id];
|
||||
|
||||
return {
|
||||
...timelineById,
|
||||
[id]: {
|
||||
|
|
|
|||
|
|
@ -26,12 +26,13 @@ export interface TGridModelSettings {
|
|||
/** A list of Ids of excluded Row Renderers */
|
||||
excludedRowRendererIds: RowRendererId[];
|
||||
filterManager?: FilterManager;
|
||||
footerText: string;
|
||||
loadingText: string;
|
||||
footerText?: string | React.ReactNode;
|
||||
loadingText?: string | React.ReactNode;
|
||||
queryFields: string[];
|
||||
selectAll: boolean;
|
||||
showCheckboxes?: boolean;
|
||||
title: string;
|
||||
unit?: (n: number) => string | React.ReactNode;
|
||||
}
|
||||
export interface TGridModel extends TGridModelSettings {
|
||||
/** The columns displayed in the timeline */
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { Router } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import React, { useCallback, useRef } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { AppMountParameters, CoreStart } from 'kibana/public';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
|
@ -45,6 +45,11 @@ const AppRoot = React.memo(
|
|||
parameters: AppMountParameters;
|
||||
timelinesPluginSetup: TimelinesUIStart | null;
|
||||
}) => {
|
||||
const refetch = useRef();
|
||||
|
||||
const setRefetch = useCallback((_refetch) => {
|
||||
refetch.current = _refetch;
|
||||
}, []);
|
||||
return (
|
||||
<I18nProvider>
|
||||
<Router history={parameters.history}>
|
||||
|
|
@ -56,10 +61,12 @@ const AppRoot = React.memo(
|
|||
columns: [],
|
||||
indexNames: [],
|
||||
deletedEventIds: [],
|
||||
end: '',
|
||||
footerText: 'Events',
|
||||
filters: [],
|
||||
itemsPerPage: 50,
|
||||
itemsPerPageOptions: [1, 2, 3],
|
||||
end: '',
|
||||
loadingText: 'Loading events',
|
||||
renderCellValue: () => <div data-test-subj="timeline-wrapper">test</div>,
|
||||
sort: [],
|
||||
leadingControlColumns: [],
|
||||
|
|
@ -68,8 +75,10 @@ const AppRoot = React.memo(
|
|||
query: '',
|
||||
language: 'kuery',
|
||||
},
|
||||
setRefetch,
|
||||
start: '',
|
||||
rowRenderers: [],
|
||||
unit: (n: number) => `${n}`,
|
||||
})) ??
|
||||
null}
|
||||
</KibanaContextProvider>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue