Observability alerting flyout and page layout improvements (#99103)
* Make the flyout `s` instead of `m` size * Remove flyout tabs * Make flyout description list `compressed` * Make spacer before description list `s` size * Use `EuiPageTemplate` on alerts and cases pages.
This commit is contained in:
parent
992ff93a6e
commit
f736df990c
|
@ -16,17 +16,16 @@ import {
|
|||
EuiFlyoutHeader,
|
||||
EuiFlyoutProps,
|
||||
EuiSpacer,
|
||||
EuiTabbedContent,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import moment from 'moment-timezone';
|
||||
import React from 'react';
|
||||
import { TopAlert } from '../';
|
||||
import { useUiSetting } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
import { asDuration } from '../../../../common/utils/formatters';
|
||||
import { usePluginContext } from '../../../hooks/use_plugin_context';
|
||||
import { TopAlert } from '../';
|
||||
import { SeverityBadge } from '../severity_badge';
|
||||
|
||||
type AlertsFlyoutProps = { alert: TopAlert } & EuiFlyoutProps;
|
||||
|
@ -83,23 +82,8 @@ export function AlertsFlyout({ onClose, alert }: AlertsFlyoutProps) {
|
|||
},
|
||||
];
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'overview',
|
||||
name: i18n.translate('xpack.observability.alerts.flyoutOverviewTabTitle', {
|
||||
defaultMessage: 'Overview',
|
||||
}),
|
||||
content: (
|
||||
<>
|
||||
<EuiSpacer />
|
||||
<EuiDescriptionList type="responsiveColumn" listItems={overviewListItems} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<EuiFlyout onClose={onClose} size="m">
|
||||
<EuiFlyout onClose={onClose} size="s">
|
||||
<EuiFlyoutHeader>
|
||||
<EuiTitle size="m">
|
||||
<h2>{alert['rule.name']}</h2>
|
||||
|
@ -108,7 +92,12 @@ export function AlertsFlyout({ onClose, alert }: AlertsFlyoutProps) {
|
|||
<EuiText size="s">{alert.reason}</EuiText>
|
||||
</EuiFlyoutHeader>
|
||||
<EuiFlyoutBody>
|
||||
<EuiTabbedContent size="s" tabs={tabs} />
|
||||
<EuiSpacer size="s" />
|
||||
<EuiDescriptionList
|
||||
compressed={true}
|
||||
type="responsiveColumn"
|
||||
listItems={overviewListItems}
|
||||
/>
|
||||
</EuiFlyoutBody>
|
||||
{alert.link && (
|
||||
<EuiFlyoutFooter>
|
||||
|
|
|
@ -11,21 +11,20 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiLink,
|
||||
EuiPage,
|
||||
EuiPageHeader,
|
||||
EuiPageTemplate,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { format, parse } from 'url';
|
||||
import type { ObservabilityAPIReturnType } from '../../services/call_observability_api/types';
|
||||
import { asDuration, asPercent } from '../../../common/utils/formatters';
|
||||
import { ExperimentalBadge } from '../../components/shared/experimental_badge';
|
||||
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 { asDuration, asPercent } from '../../../common/utils/formatters';
|
||||
import { AlertsSearchBar } from './alerts_search_bar';
|
||||
import { AlertsTable } from './alerts_table';
|
||||
|
||||
|
@ -107,72 +106,71 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
|
|||
);
|
||||
|
||||
return (
|
||||
<EuiPage>
|
||||
<EuiPageHeader
|
||||
pageTitle={
|
||||
<EuiPageTemplate
|
||||
pageHeader={{
|
||||
pageTitle: (
|
||||
<>
|
||||
{i18n.translate('xpack.observability.alertsTitle', { defaultMessage: 'Alerts' })}{' '}
|
||||
<ExperimentalBadge />
|
||||
</>
|
||||
}
|
||||
rightSideItems={[
|
||||
),
|
||||
|
||||
rightSideItems: [
|
||||
<EuiButton fill href={manageDetectionRulesHref} iconType="gear">
|
||||
{i18n.translate('xpack.observability.alerts.manageDetectionRulesButtonLabel', {
|
||||
defaultMessage: 'Manage detection rules',
|
||||
})}
|
||||
</EuiButton>,
|
||||
]}
|
||||
>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiCallOut
|
||||
title={i18n.translate('xpack.observability.alertsDisclaimerTitle', {
|
||||
defaultMessage: 'Experimental',
|
||||
],
|
||||
}}
|
||||
>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiCallOut
|
||||
title={i18n.translate('xpack.observability.alertsDisclaimerTitle', {
|
||||
defaultMessage: 'Experimental',
|
||||
})}
|
||||
color="warning"
|
||||
iconType="beaker"
|
||||
>
|
||||
<p>
|
||||
{i18n.translate('xpack.observability.alertsDisclaimerText', {
|
||||
defaultMessage:
|
||||
'This page shows an experimental alerting view. The data shown here will probably not be an accurate representation of alerts. A non-experimental list of alerts is available in the Alerts and Actions settings in Stack Management.',
|
||||
})}
|
||||
color="warning"
|
||||
iconType="beaker"
|
||||
>
|
||||
<p>
|
||||
{i18n.translate('xpack.observability.alertsDisclaimerText', {
|
||||
defaultMessage:
|
||||
'This page shows an experimental alerting view. The data shown here will probably not be an accurate representation of alerts. A non-experimental list of alerts is available in the Alerts and Actions settings in Stack Management.',
|
||||
</p>
|
||||
<p>
|
||||
<EuiLink href={prepend('/app/management/insightsAndAlerting/triggersActions/alerts')}>
|
||||
{i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
|
||||
defaultMessage: 'Alerts and Actions',
|
||||
})}
|
||||
</p>
|
||||
<p>
|
||||
<EuiLink
|
||||
href={prepend('/app/management/insightsAndAlerting/triggersActions/alerts')}
|
||||
>
|
||||
{i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
|
||||
defaultMessage: 'Alerts and Actions',
|
||||
})}
|
||||
</EuiLink>
|
||||
</p>
|
||||
</EuiCallOut>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<AlertsSearchBar
|
||||
rangeFrom={rangeFrom}
|
||||
rangeTo={rangeTo}
|
||||
query={kuery}
|
||||
onQueryChange={({ dateRange, query }) => {
|
||||
const nextSearchParams = new URLSearchParams(history.location.search);
|
||||
</EuiLink>
|
||||
</p>
|
||||
</EuiCallOut>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<AlertsSearchBar
|
||||
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 ?? '');
|
||||
nextSearchParams.set('rangeFrom', dateRange.from);
|
||||
nextSearchParams.set('rangeTo', dateRange.to);
|
||||
nextSearchParams.set('kuery', query ?? '');
|
||||
|
||||
history.push({
|
||||
...history.location,
|
||||
search: nextSearchParams.toString(),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<AlertsTable items={topAlerts ?? []} />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageHeader>
|
||||
</EuiPage>
|
||||
history.push({
|
||||
...history.location,
|
||||
search: nextSearchParams.toString(),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<AlertsTable items={topAlerts ?? []} />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiPage, EuiPageHeader } from '@elastic/eui';
|
||||
import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiPageTemplate } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import { ExperimentalBadge } from '../../components/shared/experimental_badge';
|
||||
|
@ -17,33 +17,33 @@ interface CasesProps {
|
|||
|
||||
export function CasesPage(props: CasesProps) {
|
||||
return (
|
||||
<EuiPage>
|
||||
<EuiPageHeader
|
||||
pageTitle={
|
||||
<EuiPageTemplate
|
||||
pageHeader={{
|
||||
pageTitle: (
|
||||
<>
|
||||
{i18n.translate('xpack.observability.casesTitle', { defaultMessage: 'Cases' })}{' '}
|
||||
<ExperimentalBadge />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiCallOut
|
||||
title={i18n.translate('xpack.observability.casesDisclaimerTitle', {
|
||||
defaultMessage: 'Coming soon',
|
||||
),
|
||||
}}
|
||||
>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiCallOut
|
||||
title={i18n.translate('xpack.observability.casesDisclaimerTitle', {
|
||||
defaultMessage: 'Coming soon',
|
||||
})}
|
||||
color="warning"
|
||||
iconType="beaker"
|
||||
>
|
||||
<p>
|
||||
{i18n.translate('xpack.observability.casesDisclaimerText', {
|
||||
defaultMessage: 'This is the future home of cases.',
|
||||
})}
|
||||
color="warning"
|
||||
iconType="beaker"
|
||||
>
|
||||
<p>
|
||||
{i18n.translate('xpack.observability.casesDisclaimerText', {
|
||||
defaultMessage: 'This is the future home of cases.',
|
||||
})}
|
||||
</p>
|
||||
</EuiCallOut>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageHeader>
|
||||
</EuiPage>
|
||||
</p>
|
||||
</EuiCallOut>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue