[Logs / Metrics UI] Convert logs and metrics pages to the new Observa…

…bility page template (#101239) (#102112) * Convert Logs and Metrics pages to use the Observability page template Co-authored-by: Kerry Gallagher <471693+Kerry350@users.noreply.github.com>
elastic · Jun 14, 2021 · 54256e3 · 54256e3
1 parent a134c9e
commit 54256e3
Show file tree

Hide file tree

Showing 57 changed files with 1,149 additions and 1,307 deletions.
diff --git a/x-pack/plugins/infra/kibana.json b/x-pack/plugins/infra/kibana.json
@@ -11,9 +11,10 @@
     "dataEnhanced",
     "visTypeTimeseries",
     "alerting",
-    "triggersActionsUi"
+    "triggersActionsUi",
+    "observability"
   ],
-  "optionalPlugins": ["ml", "observability", "home", "embeddable"],
+  "optionalPlugins": ["ml", "home", "embeddable"],
   "server": true,
   "ui": true,
   "configPath": ["xpack", "infra"],

diff --git a/x-pack/plugins/infra/public/alerting/metric_anomaly/components/expression.tsx b/x-pack/plugins/infra/public/alerting/metric_anomaly/components/expression.tsx
@@ -11,7 +11,7 @@ import { EuiFlexGroup, EuiSpacer, EuiText, EuiLoadingContent } from '@elastic/eu
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { useInfraMLCapabilities } from '../../../containers/ml/infra_ml_capabilities';
-import { SubscriptionSplashContent } from '../../../components/subscription_splash_content';
+import { SubscriptionSplashPrompt } from '../../../components/subscription_splash_content';
 import { AlertPreview } from '../../common';
 import {
   METRIC_ANOMALY_ALERT_TYPE_ID,
@@ -185,7 +185,7 @@ export const Expression: React.FC<Props> = (props) => {
   }, [metadata, derivedIndexPattern, defaultExpression, source, space]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (isLoadingMLCapabilities) return <EuiLoadingContent lines={10} />;
-  if (!hasInfraMLCapabilities) return <SubscriptionSplashContent />;
+  if (!hasInfraMLCapabilities) return <SubscriptionSplashPrompt />;
 
   return (
     // https://github.com/elastic/kibana/issues/89506

diff --git a/x-pack/plugins/infra/public/apps/common_styles.ts b/x-pack/plugins/infra/public/apps/common_styles.ts
@@ -5,10 +5,15 @@
  * 2.0.
  */
 
+import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
+
 export const CONTAINER_CLASSNAME = 'infra-container-element';
 
-export const prepareMountElement = (element: HTMLElement) => {
-  // Ensure the element we're handed from application mounting is assigned a class
-  // for our index.scss styles to apply to.
-  element.classList.add(CONTAINER_CLASSNAME);
+export const prepareMountElement = (element: HTMLElement, testSubject?: string) => {
+  // Ensure all wrapping elements have the APP_WRAPPER_CLASS so that the KinanaPageTemplate works as expected
+  element.classList.add(APP_WRAPPER_CLASS);
+
+  if (testSubject) {
+    element.setAttribute('data-test-subj', testSubject);
+  }
 };
diff --git a/x-pack/plugins/infra/public/apps/logs_app.tsx b/x-pack/plugins/infra/public/apps/logs_app.tsx
@@ -27,7 +27,7 @@ export const renderApp = (
 ) => {
   const storage = new Storage(window.localStorage);
 
-  prepareMountElement(element);
+  prepareMountElement(element, 'infraLogsPage');
 
   ReactDOM.render(
     <LogsApp

diff --git a/x-pack/plugins/infra/public/apps/metrics_app.tsx b/x-pack/plugins/infra/public/apps/metrics_app.tsx
@@ -16,7 +16,6 @@ import '../index.scss';
 import { NotFoundPage } from '../pages/404';
 import { LinkToMetricsPage } from '../pages/link_to/link_to_metrics';
 import { InfrastructurePage } from '../pages/metrics';
-import { MetricDetail } from '../pages/metrics/metric_detail';
 import { InfraClientStartDeps } from '../types';
 import { RedirectWithQueryParams } from '../utils/redirect_with_query_params';
 import { CommonInfraProviders, CoreProviders } from './common_providers';
@@ -29,7 +28,7 @@ export const renderApp = (
 ) => {
   const storage = new Storage(window.localStorage);
 
-  prepareMountElement(element);
+  prepareMountElement(element, 'infraMetricsPage');
 
   ReactDOM.render(
     <MetricsApp
@@ -76,9 +75,6 @@ const MetricsApp: React.FC<{
             {uiCapabilities?.infrastructure?.show && (
               <RedirectWithQueryParams from="/metrics-explorer" exact={true} to="/explorer" />
             )}
-            {uiCapabilities?.infrastructure?.show && (
-              <Route path="/detail/:type/:node" component={MetricDetail} />
-            )}
             {uiCapabilities?.infrastructure?.show && (
               <Route path="/" component={InfrastructurePage} />
             )}

diff --git a/x-pack/plugins/infra/public/assets/anomaly_chart_minified.svg b/x-pack/plugins/infra/public/assets/anomaly_chart_minified.svg
diff --git a/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx b/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx
@@ -7,8 +7,7 @@
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-
-import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
+import { PageTemplate } from '../page_template';
 
 interface NoIndicesProps {
   message: string;
@@ -17,15 +16,16 @@ interface NoIndicesProps {
   'data-test-subj'?: string;
 }
 
-export const NoIndices: React.FC<NoIndicesProps> = ({ actions, message, title, ...rest }) => (
-  <CenteredEmptyPrompt
-    title={<h2>{title}</h2>}
-    body={<p>{message}</p>}
-    actions={actions}
-    {...rest}
-  />
-);
-
-const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
-  align-self: center;
-`;
+// Represents a fully constructed page, including page template.
+export const NoIndices: React.FC<NoIndicesProps> = ({ actions, message, title, ...rest }) => {
+  return (
+    <PageTemplate isEmptyState={true}>
+      <EuiEmptyPrompt
+        title={<h2>{title}</h2>}
+        body={<p>{message}</p>}
+        actions={actions}
+        {...rest}
+      />
+    </PageTemplate>
+  );
+};
diff --git a/x-pack/plugins/infra/public/components/error_page.tsx b/x-pack/plugins/infra/public/components/error_page.tsx
@@ -5,72 +5,51 @@
  * 2.0.
  */
 
-import {
-  EuiButton,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
-import { FlexPage } from './page';
+import { PageTemplate } from './page_template';
 
 interface Props {
   detailedMessage?: React.ReactNode;
   retry?: () => void;
   shortMessage: React.ReactNode;
 }
 
-export const ErrorPage: React.FC<Props> = ({ detailedMessage, retry, shortMessage }) => (
-  <FlexPage>
-    <EuiPageBody>
-      <MinimumPageContent
-        horizontalPosition="center"
-        verticalPosition="center"
-        panelPaddingSize="none"
+// Represents a fully constructed page, including page template.
+export const ErrorPage: React.FC<Props> = ({ detailedMessage, retry, shortMessage }) => {
+  return (
+    <PageTemplate isEmptyState={true}>
+      <EuiCallOut
+        color="danger"
+        iconType="cross"
+        title={
+          <FormattedMessage
+            id="xpack.infra.errorPage.errorOccurredTitle"
+            defaultMessage="An error occurred"
+          />
+        }
       >
-        <EuiPageContentBody>
-          <EuiCallOut
-            color="danger"
-            iconType="cross"
-            title={
-              <FormattedMessage
-                id="xpack.infra.errorPage.errorOccurredTitle"
-                defaultMessage="An error occurred"
-              />
-            }
-          >
-            <EuiFlexGroup alignItems="center">
-              <EuiFlexItem>{shortMessage}</EuiFlexItem>
-              {retry ? (
-                <EuiFlexItem grow={false}>
-                  <EuiButton onClick={retry} iconType="refresh">
-                    <FormattedMessage
-                      id="xpack.infra.errorPage.tryAgainButtonLabel"
-                      defaultMessage="Try again"
-                    />
-                  </EuiButton>
-                </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-            {detailedMessage ? (
-              <>
-                <EuiSpacer />
-                <div>{detailedMessage}</div>
-              </>
-            ) : null}
-          </EuiCallOut>
-        </EuiPageContentBody>
-      </MinimumPageContent>
-    </EuiPageBody>
-  </FlexPage>
-);
-
-const MinimumPageContent = euiStyled(EuiPageContent)`
-  min-width: 50vh;
-`;
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem>{shortMessage}</EuiFlexItem>
+          {retry ? (
+            <EuiFlexItem grow={false}>
+              <EuiButton onClick={retry} iconType="refresh">
+                <FormattedMessage
+                  id="xpack.infra.errorPage.tryAgainButtonLabel"
+                  defaultMessage="Try again"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          ) : null}
+        </EuiFlexGroup>
+        {detailedMessage ? (
+          <>
+            <EuiSpacer />
+            <div>{detailedMessage}</div>
+          </>
+        ) : null}
+      </EuiCallOut>
+    </PageTemplate>
+  );
+};
diff --git a/x-pack/plugins/infra/public/components/loading_page.tsx b/x-pack/plugins/infra/public/components/loading_page.tsx
@@ -5,34 +5,38 @@
  * 2.0.
  */
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiPageBody,
-  EuiPageContent,
-} from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLoadingSpinner, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { ReactNode } from 'react';
-
-import { FlexPage } from './page';
+import { PageTemplate } from './page_template';
 
 interface LoadingPageProps {
   message?: ReactNode;
   'data-test-subj'?: string;
 }
 
+// Represents a fully constructed page, including page template.
 export const LoadingPage = ({
   message,
   'data-test-subj': dataTestSubj = 'loadingPage',
-}: LoadingPageProps) => (
-  <FlexPage data-test-subj={dataTestSubj}>
-    <EuiPageBody>
-      <EuiPageContent verticalPosition="center" horizontalPosition="center">
-        <EuiFlexGroup alignItems="center" style={{ flexWrap: 'nowrap' }}>
-          <EuiLoadingSpinner size="xl" style={{ marginRight: '8px' }} />
-          <EuiFlexItem data-test-subj="loadingMessage">{message}</EuiFlexItem>
+}: LoadingPageProps) => {
+  return (
+    <PageTemplate isEmptyState={true} data-test-subj={dataTestSubj}>
+      <LoadingPrompt message={message} />
+    </PageTemplate>
+  );
+};
+
+export const LoadingPrompt = ({ message }: LoadingPageProps) => {
+  return (
+    <EuiEmptyPrompt
+      body={
+        <EuiFlexGroup alignItems="center" gutterSize="none">
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="xl" style={{ marginRight: '8px' }} />
+          </EuiFlexItem>
+          <EuiFlexItem>{message}</EuiFlexItem>
         </EuiFlexGroup>
-      </EuiPageContent>
-    </EuiPageBody>
-  </FlexPage>
-);
+      }
+    />
+  );
+};
diff --git a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/index.ts b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/index.ts
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-export * from './setup_page';
-
 export * from './initial_configuration_step';
 export * from './process_step';
 

diff --git a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,8 +5,6 @@ @@
      * 2.0.
      */
-    export * from './setup_page';
     export * from './initial_configuration_step';
     export * from './process_step';
@@ Expand Down @@