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
3 changed files with 88 additions and 101 deletions
|
@ -16,17 +16,16 @@ import {
|
||||||
EuiFlyoutHeader,
|
EuiFlyoutHeader,
|
||||||
EuiFlyoutProps,
|
EuiFlyoutProps,
|
||||||
EuiSpacer,
|
EuiSpacer,
|
||||||
EuiTabbedContent,
|
|
||||||
EuiText,
|
EuiText,
|
||||||
EuiTitle,
|
EuiTitle,
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import moment from 'moment-timezone';
|
import moment from 'moment-timezone';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { TopAlert } from '../';
|
||||||
import { useUiSetting } from '../../../../../../../src/plugins/kibana_react/public';
|
import { useUiSetting } from '../../../../../../../src/plugins/kibana_react/public';
|
||||||
import { asDuration } from '../../../../common/utils/formatters';
|
import { asDuration } from '../../../../common/utils/formatters';
|
||||||
import { usePluginContext } from '../../../hooks/use_plugin_context';
|
import { usePluginContext } from '../../../hooks/use_plugin_context';
|
||||||
import { TopAlert } from '../';
|
|
||||||
import { SeverityBadge } from '../severity_badge';
|
import { SeverityBadge } from '../severity_badge';
|
||||||
|
|
||||||
type AlertsFlyoutProps = { alert: TopAlert } & EuiFlyoutProps;
|
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 (
|
return (
|
||||||
<EuiFlyout onClose={onClose} size="m">
|
<EuiFlyout onClose={onClose} size="s">
|
||||||
<EuiFlyoutHeader>
|
<EuiFlyoutHeader>
|
||||||
<EuiTitle size="m">
|
<EuiTitle size="m">
|
||||||
<h2>{alert['rule.name']}</h2>
|
<h2>{alert['rule.name']}</h2>
|
||||||
|
@ -108,7 +92,12 @@ export function AlertsFlyout({ onClose, alert }: AlertsFlyoutProps) {
|
||||||
<EuiText size="s">{alert.reason}</EuiText>
|
<EuiText size="s">{alert.reason}</EuiText>
|
||||||
</EuiFlyoutHeader>
|
</EuiFlyoutHeader>
|
||||||
<EuiFlyoutBody>
|
<EuiFlyoutBody>
|
||||||
<EuiTabbedContent size="s" tabs={tabs} />
|
<EuiSpacer size="s" />
|
||||||
|
<EuiDescriptionList
|
||||||
|
compressed={true}
|
||||||
|
type="responsiveColumn"
|
||||||
|
listItems={overviewListItems}
|
||||||
|
/>
|
||||||
</EuiFlyoutBody>
|
</EuiFlyoutBody>
|
||||||
{alert.link && (
|
{alert.link && (
|
||||||
<EuiFlyoutFooter>
|
<EuiFlyoutFooter>
|
||||||
|
|
|
@ -11,21 +11,20 @@ import {
|
||||||
EuiFlexGroup,
|
EuiFlexGroup,
|
||||||
EuiFlexItem,
|
EuiFlexItem,
|
||||||
EuiLink,
|
EuiLink,
|
||||||
EuiPage,
|
EuiPageTemplate,
|
||||||
EuiPageHeader,
|
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import { format, parse } from 'url';
|
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 { ExperimentalBadge } from '../../components/shared/experimental_badge';
|
||||||
import { useFetcher } from '../../hooks/use_fetcher';
|
import { useFetcher } from '../../hooks/use_fetcher';
|
||||||
import { usePluginContext } from '../../hooks/use_plugin_context';
|
import { usePluginContext } from '../../hooks/use_plugin_context';
|
||||||
import { RouteParams } from '../../routes';
|
import { RouteParams } from '../../routes';
|
||||||
import { callObservabilityApi } from '../../services/call_observability_api';
|
import { callObservabilityApi } from '../../services/call_observability_api';
|
||||||
|
import type { ObservabilityAPIReturnType } from '../../services/call_observability_api/types';
|
||||||
import { getAbsoluteDateRange } from '../../utils/date';
|
import { getAbsoluteDateRange } from '../../utils/date';
|
||||||
import { asDuration, asPercent } from '../../../common/utils/formatters';
|
|
||||||
import { AlertsSearchBar } from './alerts_search_bar';
|
import { AlertsSearchBar } from './alerts_search_bar';
|
||||||
import { AlertsTable } from './alerts_table';
|
import { AlertsTable } from './alerts_table';
|
||||||
|
|
||||||
|
@ -107,72 +106,71 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiPage>
|
<EuiPageTemplate
|
||||||
<EuiPageHeader
|
pageHeader={{
|
||||||
pageTitle={
|
pageTitle: (
|
||||||
<>
|
<>
|
||||||
{i18n.translate('xpack.observability.alertsTitle', { defaultMessage: 'Alerts' })}{' '}
|
{i18n.translate('xpack.observability.alertsTitle', { defaultMessage: 'Alerts' })}{' '}
|
||||||
<ExperimentalBadge />
|
<ExperimentalBadge />
|
||||||
</>
|
</>
|
||||||
}
|
),
|
||||||
rightSideItems={[
|
|
||||||
|
rightSideItems: [
|
||||||
<EuiButton fill href={manageDetectionRulesHref} iconType="gear">
|
<EuiButton fill href={manageDetectionRulesHref} iconType="gear">
|
||||||
{i18n.translate('xpack.observability.alerts.manageDetectionRulesButtonLabel', {
|
{i18n.translate('xpack.observability.alerts.manageDetectionRulesButtonLabel', {
|
||||||
defaultMessage: 'Manage detection rules',
|
defaultMessage: 'Manage detection rules',
|
||||||
})}
|
})}
|
||||||
</EuiButton>,
|
</EuiButton>,
|
||||||
]}
|
],
|
||||||
>
|
}}
|
||||||
<EuiFlexGroup direction="column">
|
>
|
||||||
<EuiFlexItem>
|
<EuiFlexGroup direction="column">
|
||||||
<EuiCallOut
|
<EuiFlexItem>
|
||||||
title={i18n.translate('xpack.observability.alertsDisclaimerTitle', {
|
<EuiCallOut
|
||||||
defaultMessage: 'Experimental',
|
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"
|
</p>
|
||||||
iconType="beaker"
|
<p>
|
||||||
>
|
<EuiLink href={prepend('/app/management/insightsAndAlerting/triggersActions/alerts')}>
|
||||||
<p>
|
{i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
|
||||||
{i18n.translate('xpack.observability.alertsDisclaimerText', {
|
defaultMessage: 'Alerts and Actions',
|
||||||
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>
|
</EuiLink>
|
||||||
<p>
|
</p>
|
||||||
<EuiLink
|
</EuiCallOut>
|
||||||
href={prepend('/app/management/insightsAndAlerting/triggersActions/alerts')}
|
</EuiFlexItem>
|
||||||
>
|
<EuiFlexItem>
|
||||||
{i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
|
<AlertsSearchBar
|
||||||
defaultMessage: 'Alerts and Actions',
|
rangeFrom={rangeFrom}
|
||||||
})}
|
rangeTo={rangeTo}
|
||||||
</EuiLink>
|
query={kuery}
|
||||||
</p>
|
onQueryChange={({ dateRange, query }) => {
|
||||||
</EuiCallOut>
|
const nextSearchParams = new URLSearchParams(history.location.search);
|
||||||
</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('rangeFrom', dateRange.from);
|
||||||
nextSearchParams.set('rangeTo', dateRange.to);
|
nextSearchParams.set('rangeTo', dateRange.to);
|
||||||
nextSearchParams.set('kuery', query ?? '');
|
nextSearchParams.set('kuery', query ?? '');
|
||||||
|
|
||||||
history.push({
|
history.push({
|
||||||
...history.location,
|
...history.location,
|
||||||
search: nextSearchParams.toString(),
|
search: nextSearchParams.toString(),
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<AlertsTable items={topAlerts ?? []} />
|
<AlertsTable items={topAlerts ?? []} />
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
</EuiPageHeader>
|
</EuiPageTemplate>
|
||||||
</EuiPage>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
* 2.0.
|
* 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 { i18n } from '@kbn/i18n';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ExperimentalBadge } from '../../components/shared/experimental_badge';
|
import { ExperimentalBadge } from '../../components/shared/experimental_badge';
|
||||||
|
@ -17,33 +17,33 @@ interface CasesProps {
|
||||||
|
|
||||||
export function CasesPage(props: CasesProps) {
|
export function CasesPage(props: CasesProps) {
|
||||||
return (
|
return (
|
||||||
<EuiPage>
|
<EuiPageTemplate
|
||||||
<EuiPageHeader
|
pageHeader={{
|
||||||
pageTitle={
|
pageTitle: (
|
||||||
<>
|
<>
|
||||||
{i18n.translate('xpack.observability.casesTitle', { defaultMessage: 'Cases' })}{' '}
|
{i18n.translate('xpack.observability.casesTitle', { defaultMessage: 'Cases' })}{' '}
|
||||||
<ExperimentalBadge />
|
<ExperimentalBadge />
|
||||||
</>
|
</>
|
||||||
}
|
),
|
||||||
>
|
}}
|
||||||
<EuiFlexGroup direction="column">
|
>
|
||||||
<EuiFlexItem>
|
<EuiFlexGroup direction="column">
|
||||||
<EuiCallOut
|
<EuiFlexItem>
|
||||||
title={i18n.translate('xpack.observability.casesDisclaimerTitle', {
|
<EuiCallOut
|
||||||
defaultMessage: 'Coming soon',
|
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"
|
</p>
|
||||||
iconType="beaker"
|
</EuiCallOut>
|
||||||
>
|
</EuiFlexItem>
|
||||||
<p>
|
</EuiFlexGroup>
|
||||||
{i18n.translate('xpack.observability.casesDisclaimerText', {
|
</EuiPageTemplate>
|
||||||
defaultMessage: 'This is the future home of cases.',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</EuiCallOut>
|
|
||||||
</EuiFlexItem>
|
|
||||||
</EuiFlexGroup>
|
|
||||||
</EuiPageHeader>
|
|
||||||
</EuiPage>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue