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.

x-pack/plugins/observability/public/pages/alerts/alerts_flyout/index.tsx

@@ -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>

x-pack/plugins/observability/public/pages/alerts/index.tsx

@@ -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,21 +106,23 @@ 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>
@@ -139,9 +140,7 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
               })}
             </p>
             <p>
-                <EuiLink
-                  href={prepend('/app/management/insightsAndAlerting/triggersActions/alerts')}
-                >
+              <EuiLink href={prepend('/app/management/insightsAndAlerting/triggersActions/alerts')}>
                 {i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
                   defaultMessage: 'Alerts and Actions',
                 })}
@@ -172,7 +171,6 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
           <AlertsTable items={topAlerts ?? []} />
         </EuiFlexItem>
       </EuiFlexGroup>
-      </EuiPageHeader>
-    </EuiPage>
+    </EuiPageTemplate>
   );
 }

x-pack/plugins/observability/public/pages/cases/index.tsx

@@ -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,14 +17,15 @@ 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>
@@ -43,7 +44,6 @@ export function CasesPage(props: CasesProps) {
           </EuiCallOut>
         </EuiFlexItem>
       </EuiFlexGroup>
-      </EuiPageHeader>
-    </EuiPage>
+    </EuiPageTemplate>
   );
 }