Skip to content

Commit

Permalink
Observability alerting flyout and page layout improvements (#99103)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@smith
smith authored May 4, 2021
1 parent 992ff93 commit f736df9
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 101 deletions.
27 changes: 8 additions & 19 deletions x-pack/plugins/observability/public/pages/alerts/alerts_flyout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
114 changes: 56 additions & 58 deletions x-pack/plugins/observability/public/pages/alerts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
);
}
48 changes: 24 additions & 24 deletions x-pack/plugins/observability/public/pages/cases/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);
}

0 comments on commit f736df9

Please sign in to comment.