[Infra UI][Stack Monitoring] Migrate EuiPage*_Depracated usage (elast…

…ic#161870) closes [elastic#161404](elastic#161404) ## Summary This PR replaces the usage of `EuiPage*_Depracated` with their equivalent components Some usages of `EuiPageContent_Deprecated` have been replaced with `EuiPanel` because they were displayed as panels, and the recommended `EuiPageSection` component did not render in the same manner. e.g: <img width="1690" alt="image" src="https://github.com/elastic/kibana/assets/2767137/b86db831-e79e-4be0-918f-f3b25803e990"> code: https://github.com/elastic/kibana/pull/161870/files#diff-72520cac696197524aff32e2b92a0acabe1898067c6985786fa5ac250a40ac1cR122 ### How to test - Start a local Kibana with metricbeat monitoring Beats, Kibana, Elasticsearch and Logstash - Navigate to Stack Monitoring and click through the links - Compare the UI (loading and error states included) with what's currently in https://edge-oblt.kb.us-west2.gcp.elastic-cloud.com/ - Navigate to Infra UI and go to node details - Compare the UI (loading and error states included) with what's currently in https://edge-oblt.kb.us-west2.gcp.elastic-cloud.com/ --------- Co-authored-by: Kibana Machine <[email protected]>
ThomThomson · Aug 1, 2023 · 71fae6e · 71fae6e
1 parent 5dc538d
commit 71fae6e
Show file tree

Hide file tree

Showing 47 changed files with 1,007 additions and 1,093 deletions.
diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/x-pack/plugins/infra/public/pages/error.tsx
@@ -5,15 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiCallOut,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiCallOut, EuiTitle, EuiPageTemplate } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 
@@ -41,31 +33,27 @@ export const Error: React.FC<Props> = ({ message }) => {
 
 export const ErrorPageBody: React.FC<{ message: string }> = ({ message }) => {
   return (
-    <EuiPage style={{ flex: '1 0 auto' }}>
-      <EuiPageBody>
-        <EuiPageHeader>
-          <EuiPageHeaderSection>
-            <EuiTitle size="m">
-              <h1>
-                <FormattedMessage
-                  id="xpack.infra.errorPage.unexpectedErrorTitle"
-                  defaultMessage="Oops!"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiPageHeaderSection>
-        </EuiPageHeader>
-        <EuiPageContent>
-          <EuiCallOut color="danger" title={message} iconType="error">
-            <p>
-              <FormattedMessage
-                id="xpack.infra.errorPage.tryAgainDescription "
-                defaultMessage="Please click the back button and try again."
-              />
-            </p>
-          </EuiCallOut>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+    <EuiPageTemplate offset={0} restrictWidth={false} bottomBorder={false} grow={false}>
+      <EuiPageTemplate.Header>
+        <EuiTitle size="m">
+          <h1>
+            <FormattedMessage
+              id="xpack.infra.errorPage.unexpectedErrorTitle"
+              defaultMessage="Oops!"
+            />
+          </h1>
+        </EuiTitle>
+      </EuiPageTemplate.Header>
+      <EuiPageTemplate.Section>
+        <EuiCallOut color="danger" title={message} iconType="error">
+          <p>
+            <FormattedMessage
+              id="xpack.infra.errorPage.tryAgainDescription "
+              defaultMessage="Please click the back button and try again."
+            />
+          </p>
+        </EuiCallOut>
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
   );
 };
diff --git a/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.stories.tsx b/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.stories.tsx
@@ -5,13 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiCodeBlock,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  PropsOf,
-} from '@elastic/eui';
+import { EuiCodeBlock, EuiPage, EuiPageBody, EuiPanel, PropsOf } from '@elastic/eui';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';
@@ -36,9 +30,9 @@ export default {
           >
             <EuiPage restrictWidth>
               <EuiPageBody>
-                <EuiPageContent>
+                <EuiPanel>
                   <WrappedStory />
-                </EuiPageContent>
+                </EuiPanel>
               </EuiPageBody>
             </EuiPage>
           </MockIndexPatternsKibanaContextProvider>

diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
@@ -18,9 +18,8 @@ import {
   TooltipProps,
   Tooltip,
 } from '@elastic/charts';
-import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
+import { EuiPageSection } from '@elastic/eui';
 import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
-
 import { SeriesChart } from './series_chart';
 import {
   getFormatter,
@@ -111,7 +110,7 @@ export const ChartSectionVis = ({
   }
 
   return (
-    <EuiPageContentBody>
+    <EuiPageSection>
       <div className="infrastructureChart" style={{ height: 250, marginBottom: 16 }}>
         <Chart>
           <Axis
@@ -143,6 +142,6 @@ export const ChartSectionVis = ({
           />
         </Chart>
       </div>
-    </EuiPageContentBody>
+    </EuiPageSection>
   );
 };
diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx
@@ -7,7 +7,7 @@
 
 import {
   EuiFlexItem,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
   EuiPanel,
   EuiProgress,
   EuiSpacer,
@@ -54,7 +54,7 @@ export const GaugesSectionVis = ({
     return null;
   }
   return (
-    <EuiPageContentBody>
+    <EuiPageSection>
       <EuiSpacer size="m" />
       <GroupBox>
         {metric.series.map((series) => {
@@ -93,7 +93,7 @@ export const GaugesSectionVis = ({
         })}
       </GroupBox>
       <EuiSpacer size="m" />
-    </EuiPageContentBody>
+    </EuiPageSection>
   );
 };
 

diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout_content.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/layout_content.tsx
diff --git a/...ck/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx b/...ck/plugins/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
+import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
 import type { LayoutPropsWithTheme } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
-import { LayoutContent } from '../layout_content';
 import { MetadataDetails } from '../metadata_details';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
@@ -28,7 +28,7 @@ export const AwsEC2Layout = withTheme(
           'cloud.project.id',
         ]}
       />
-      <LayoutContent>
+      <EuiPanel>
         <Section
           navLabel="AWS EC2"
           sectionLabel={i18n.translate(
@@ -129,7 +129,7 @@ export const AwsEC2Layout = withTheme(
             />
           </SubSection>
         </Section>
-      </LayoutContent>
+      </EuiPanel>
     </React.Fragment>
   )
 );