Skip to content

Commit

Permalink
[Tech Debt] Reorder Alerts page (elastic#152888)
Browse files Browse the repository at this point in the history
  • Loading branch information
CoenWarmer authored and bmorelli25 committed Mar 10, 2023
1 parent 6b7cc2f commit 9853983
Show file tree
Hide file tree
Showing 64 changed files with 392 additions and 734 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
ALERT_RULE_TYPE_ID,
ALERT_EVALUATION_THRESHOLD,
} from '@kbn/rule-data-utils';
import { TopAlert } from '@kbn/observability-plugin/public/pages/alerts';
import type { TopAlert } from '@kbn/observability-plugin/public';
import { filterNil } from '../../../../shared/charts/latency_chart';
import { TimeseriesChart } from '../../../../shared/charts/timeseries_chart';
import {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
* 2.0.
*/

import { Rule } from '@kbn/alerting-plugin/common';
import { TopAlert } from '@kbn/observability-plugin/public/pages/alerts';
import { AlertSummaryField } from '@kbn/observability-plugin/public/pages/alert_details/types';
import { TIME_UNITS } from '@kbn/triggers-actions-ui-plugin/public';
import { SERVICE_ENVIRONMENT } from '../../../../../common/es_fields/apm';
import type { Rule } from '@kbn/alerting-plugin/common';
import type {
TopAlert,
AlertSummaryField,
} from '@kbn/observability-plugin/public';
import type { TIME_UNITS } from '@kbn/triggers-actions-ui-plugin/public';
import type { SERVICE_ENVIRONMENT } from '../../../../../common/es_fields/apm';

export const SERVICE_NAME = 'service.name' as const;
export const TRANSACTION_TYPE = 'transaction.type' as const;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
*/

import React, { ComponentProps } from 'react';
import { SeverityBadge } from './severity_badge';
import { AlertSeverityBadge } from './alert_severity_badge';

type Args = ComponentProps<typeof SeverityBadge>;
type Args = ComponentProps<typeof AlertSeverityBadge>;

export default {
title: 'app/Alerts/SeverityBadge',
component: SeverityBadge,
component: AlertSeverityBadge,
};

export function Example({ severityLevel }: Args) {
return <SeverityBadge severityLevel={severityLevel} />;
return <AlertSeverityBadge severityLevel={severityLevel} />;
}
Example.args = { severityLevel: 'critical' } as Args;
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const colorMap: { [key: string]: string } = {
warning: 'warning',
};

export function SeverityBadge({ severityLevel }: SeverityBadgeProps) {
export function AlertSeverityBadge({ severityLevel }: SeverityBadgeProps) {
if (!severityLevel) {
return null;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
* 2.0.
*/

import { ALERT_UUID } from '@kbn/rule-data-utils';
import React, { ComponentType } from 'react';
import { ALERT_UUID } from '@kbn/rule-data-utils';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { PluginContext, PluginContextValue } from '../../../../context/plugin_context';
import { createObservabilityRuleTypeRegistryMock } from '../../../../rules/observability_rule_type_registry_mock';
import { apmAlertResponseExample } from './example_data';
import { AlertsFlyout } from '..';
import { PluginContext, PluginContextValue } from '../context/plugin_context';
import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
import { apmAlertResponseExample } from './alerts_flyout.mock';
import { AlertsFlyout } from './alerts_flyout';

interface Args {
alerts: Array<Record<string, unknown>>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

import React from 'react';
import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting';
import { createObservabilityRuleTypeRegistryMock } from '../../../../rules/observability_rule_type_registry_mock';
import { render } from '../../../../utils/test_helper';
import type { TopAlert } from '../../containers/alerts_page';
import { AlertsFlyout } from '..';
import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
import { render } from '../utils/test_helper';
import { AlertsFlyout } from './alerts_flyout';
import type { TopAlert } from '../typings/alerts';

describe('AlertsFlyout', () => {
jest
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,16 @@
* 2.0.
*/

import React, { useMemo } from 'react';
import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutProps } from '@elastic/eui';
import { ALERT_UUID } from '@kbn/rule-data-utils';
import React, { useMemo } from 'react';
import type { TopAlert } from '../../containers';
import type { ObservabilityRuleTypeRegistry } from '../../../../rules/create_observability_rule_type_registry';
import { parseAlert } from '../parse_alert';
import AlertsFlyoutHeader from './alerts_flyout_header';
import AlertsFlyoutBody from './alerts_flyout_body';
import AlertsFlyoutFooter from './alerts_flyout_footer';

import { AlertsFlyoutHeader } from './alerts_flyout_header';
import { AlertsFlyoutBody } from './alerts_flyout_body';
import { AlertsFlyoutFooter } from './alerts_flyout_footer';
import { parseAlert } from '../pages/alerts/helpers/parse_alert';
import type { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
import type { TopAlert } from '../typings/alerts';

type AlertsFlyoutProps = {
alert?: TopAlert;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { render } from '../../../../utils/test_helper';
import React from 'react';
import { render } from '../utils/test_helper';
import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting';
import { createObservabilityRuleTypeRegistryMock } from '../../../../rules/observability_rule_type_registry_mock';
import AlertsFlyoutBody from './alerts_flyout_body';
import { inventoryThresholdAlert } from '../../../../rules/fixtures/example_alerts';
import { parseAlert } from '../parse_alert';
import { RULE_DETAILS_PAGE_ID } from '../../../rule_details/constants';
import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
import { AlertsFlyoutBody } from './alerts_flyout_body';
import { inventoryThresholdAlert } from '../rules/fixtures/example_alerts';
import { parseAlert } from '../pages/alerts/helpers/parse_alert';
import { RULE_DETAILS_PAGE_ID } from '../pages/rule_details/constants';

describe('AlertsFlyoutBody', () => {
jest
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,34 @@ import {
} from '@kbn/rule-data-utils';
import { AlertLifecycleStatusBadge } from '@kbn/alerts-ui-shared';
import moment from 'moment-timezone';
import { useKibana, useUiSetting } from '@kbn/kibana-react-plugin/public';
import { RULE_DETAILS_PAGE_ID } from '../../../rule_details/constants';
import { asDuration } from '../../../../../common/utils/formatters';
import { translations, paths } from '../../../../config';
import { FlyoutProps } from './types';
import { formatAlertEvaluationValue } from '../../../../utils/format_alert_evaluation_value';
import { useUiSetting } from '@kbn/kibana-react-plugin/public';
import { useKibana } from '../utils/kibana_react';
import { asDuration } from '../../common/utils/formatters';
import { translations, paths } from '../config';
import { formatAlertEvaluationValue } from '../utils/format_alert_evaluation_value';
import { RULE_DETAILS_PAGE_ID } from '../pages/rule_details/constants';
import type { TopAlert } from '../typings/alerts';

interface FlyoutProps {
alert: TopAlert;
id?: string;
}

export function AlertsFlyoutBody({ alert, id: pageId }: FlyoutProps) {
const {
http: {
basePath: { prepend },
},
} = useKibana().services;

// eslint-disable-next-line import/no-default-export
export default function AlertsFlyoutBody({ alert, id: pageId }: FlyoutProps) {
const { services } = useKibana();
const { http } = services;
const dateFormat = useUiSetting<string>('dateFormat');
const prepend = http?.basePath.prepend;

const ruleId = get(alert.fields, ALERT_RULE_UUID) ?? null;
const linkToRule =
pageId !== RULE_DETAILS_PAGE_ID && ruleId && prepend
? prepend(paths.observability.ruleDetails(ruleId))
: null;

const overviewListItems = [
{
title: translations.alertsFlyout.statusLabel,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,25 @@
*/
import React from 'react';
import { EuiFlyoutFooter, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { isAlertDetailsEnabledPerApp } from '../../../../utils/is_alert_details_enabled';
import { usePluginContext } from '../../../../hooks/use_plugin_context';
import { FlyoutProps } from './types';
import { translations, paths } from '../../../../config';
import { useKibana } from '../utils/kibana_react';
import { usePluginContext } from '../hooks/use_plugin_context';
import { isAlertDetailsEnabledPerApp } from '../utils/is_alert_details_enabled';
import { translations, paths } from '../config';
import type { TopAlert } from '../typings/alerts';

// eslint-disable-next-line import/no-default-export
export default function AlertsFlyoutFooter({ alert, isInApp }: FlyoutProps & { isInApp: boolean }) {
interface FlyoutProps {
alert: TopAlert;
id?: string;
}

export function AlertsFlyoutFooter({ alert, isInApp }: FlyoutProps & { isInApp: boolean }) {
const {
http: {
basePath: { prepend },
},
} = useKibana().services;
const { config } = usePluginContext();
const { services } = useKibana();
const { http } = services;
const prepend = http?.basePath.prepend;

const getAlertDetailsButton = () => {
if (!isAlertDetailsEnabledPerApp(alert, config)) return <></>;
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,14 @@
import React from 'react';
import { ALERT_RULE_NAME } from '@kbn/rule-data-utils';
import { EuiSpacer, EuiTitle } from '@elastic/eui';
import { FlyoutProps } from './types';
import type { TopAlert } from '../typings/alerts';

// eslint-disable-next-line import/no-default-export
export default function AlertsFlyoutHeader({ alert }: FlyoutProps) {
interface FlyoutProps {
alert: TopAlert;
id?: string;
}

export function AlertsFlyoutHeader({ alert }: FlyoutProps) {
return (
<>
<EuiSpacer size="s" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,9 @@
* This way plugins can do targeted imports to reduce the final code bundle
*/
import { ALERT_DURATION, ALERT_REASON, ALERT_STATUS, TIMESTAMP } from '@kbn/rule-data-utils';

import { EuiDataGridColumn } from '@elastic/eui';

import type { ColumnHeaderOptions } from '@kbn/timelines-plugin/common';

import { translations } from '../../../../config';
import { i18n } from '@kbn/i18n';

/**
* columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface,
Expand All @@ -27,25 +24,33 @@ export const columns: Array<
> = [
{
columnHeaderType: 'not-filtered',
displayAsText: translations.alertsTable.statusColumnDescription,
displayAsText: i18n.translate('xpack.observability.alertsTGrid.statusColumnDescription', {
defaultMessage: 'Alert Status',
}),
id: ALERT_STATUS,
initialWidth: 110,
},
{
columnHeaderType: 'not-filtered',
displayAsText: translations.alertsTable.lastUpdatedColumnDescription,
displayAsText: i18n.translate('xpack.observability.alertsTGrid.lastUpdatedColumnDescription', {
defaultMessage: 'Last updated',
}),
id: TIMESTAMP,
initialWidth: 230,
},
{
columnHeaderType: 'not-filtered',
displayAsText: translations.alertsTable.durationColumnDescription,
displayAsText: i18n.translate('xpack.observability.alertsTGrid.durationColumnDescription', {
defaultMessage: 'Duration',
}),
id: ALERT_DURATION,
initialWidth: 116,
},
{
columnHeaderType: 'not-filtered',
displayAsText: translations.alertsTable.reasonColumnDescription,
displayAsText: i18n.translate('xpack.observability.alertsTGrid.reasonColumnDescription', {
defaultMessage: 'Reason',
}),
id: ALERT_REASON,
linkField: '*',
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
* 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 React from 'react';
import type { GetRenderCellValue } from '@kbn/triggers-actions-ui-plugin/public';
import { TIMESTAMP } from '@kbn/rule-data-utils';
import { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
import {
AlertsTableConfigurationRegistry,
RenderCustomActionsRowArgs,
} from '@kbn/triggers-actions-ui-plugin/public/types';
import { casesFeatureId, observabilityFeatureId } from '../../../common';
import { useBulkAddToCaseTriggerActions } from '../../hooks/use_alert_bulk_case_actions';
import { getRenderCellValue } from './render_cell_value';
import { columns } from './default_columns';
import {
AlertActions,
Props as AlertActionsProps,
} from '../../pages/alerts/components/alert_actions';
import { useGetAlertFlyoutComponents } from '../use_get_alert_flyout_components';
import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
import type { ConfigSchema } from '../../plugin';
import type { TopAlert } from '../../typings/alerts';

export const getAlertsTableConfiguration = (
observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
config: ConfigSchema
): AlertsTableConfigurationRegistry => ({
id: observabilityFeatureId,
casesFeatureId,
columns,
getRenderCellValue: (({ setFlyoutAlert }: { setFlyoutAlert: (data: TopAlert) => void }) => {
return getRenderCellValue({ observabilityRuleTypeRegistry, setFlyoutAlert });
}) as unknown as GetRenderCellValue,
sort: [
{
[TIMESTAMP]: {
order: 'desc' as SortOrder,
},
},
],
useActionsColumn: () => ({
renderCustomActionsRow: ({ alert, id, setFlyoutAlert }: RenderCustomActionsRowArgs) => {
return (
<AlertActions
config={config}
data={Object.entries(alert).reduce<AlertActionsProps['data']>(
(acc, [field, value]) => [...acc, { field, value: value as string[] }],
[]
)}
ecsData={{ _id: alert._id, _index: alert._index }}
eventId={alert._id}
id={id}
observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
setFlyoutAlert={setFlyoutAlert}
/>
);
},
}),
useBulkActions: useBulkAddToCaseTriggerActions,
useInternalFlyout: () => {
const { header, body, footer } = useGetAlertFlyoutComponents(observabilityRuleTypeRegistry);
return { header, body, footer };
},
});
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

import { ALERT_STATUS, ALERT_STATUS_ACTIVE, ALERT_STATUS_RECOVERED } from '@kbn/rule-data-utils';
import type { CellValueElementProps } from '@kbn/timelines-plugin/common';
import { createObservabilityRuleTypeRegistryMock } from '../../../../rules/observability_rule_type_registry_mock';
import { render } from '../../../../utils/test_helper';
import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
import { render } from '../../utils/test_helper';
import { getRenderCellValue } from './render_cell_value';

interface AlertsTableRow {
Expand Down
Loading

0 comments on commit 9853983

Please sign in to comment.