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,
+  EuiPageTemplate,
-  EuiPageHeader,
 } 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>
+    <EuiPageTemplate
-      <EuiPageHeader
+      pageHeader={{
-        pageTitle={
+        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>
+      <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>
   );
 }

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,33 +17,33 @@ interface CasesProps {
 
 export function CasesPage(props: CasesProps) {
   return (
-    <EuiPage>
+    <EuiPageTemplate
-      <EuiPageHeader
+      pageHeader={{
-        pageTitle={
+        pageTitle: (
           <>
             {i18n.translate('xpack.observability.casesTitle', { defaultMessage: 'Cases' })}{' '}
             <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>
   );
 }