Page created for Obs>Infrastructure>Kubernetes Obs

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -25,6 +25,7 @@ import {
 import { WithMetricsExplorerOptionsUrlState } from '../../containers/metrics_explorer/with_metrics_explorer_options_url_state';
 import { WithSource } from '../../containers/with_source';
 import { SourceProvider } from '../../containers/metrics_source';
+import { KubernetesObservabilityPage } from './kubernetes_observability';
 import { MetricsExplorerPage } from './metrics_explorer';
 import { SnapshotPage } from './inventory_view';
 import { MetricDetail } from './metric_detail';
@@ -119,7 +120,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                         </WithSource>
                       )}
                     />
-                    <Route path="/kubernetesobservability" component={kubernetesObservability} />
+                    <Route path="/kubernetesobservability" component={KubernetesObservabilityPage} />
                     <Route path="/detail/:type/:node" component={MetricDetail} />
                     <Route path={'/hosts'} component={HostsPage} />
                     <Route path={'/settings'} component={MetricsSettingsPage} />

x-pack/plugins/infra/public/pages/metrics/kubernetes_observability/hooks/redirect_to_dashboards.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export const RedirectToDasboards = () => {
+  const urlString = '/app/dashboards';
+
+  return <a href={urlString}>Go to Dashboard</a>;
+};
+
+export const RedirectToGeneralDasboards = () => {
+  const urlString = '/app/dashboards#/view/kubernetes-f4dc26db-1b53-4ea2-a78b-1bfab8ea267c';
+
+  return <a href={urlString}>Go to Cluster Overview</a>;
+};

x-pack/plugins/infra/public/pages/metrics/kubernetes_observability/index.tsx

@@ -0,0 +1,205 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+
+import {
+  EuiHorizontalRule,
+  EuiPageBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageHeader,
+  EuiTitle,
+  EuiText,
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiAccordion,
+  useEuiTheme,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import { CoreStart } from '@kbn/core/public';
+import { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
+import { RedirectToDasboards, RedirectToGeneralDasboards } from './hooks/redirect_to_dashboards';
+import { MetricsPageTemplate } from '../page_template';
+import { fullHeightContentStyles } from '../../../page_template.styles';
+import { kubernetesObservabilityTitle } from '../../../translations';
+import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
+
+interface KubernetesObservabilityAppDeps {
+  basename: string;
+  application: CoreStart['application'];
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  navigation: NavigationPublicPluginStart;
+}
+
+export const KubernetesObservabilityPage = ({
+  basename,
+  notifications,
+  application,
+  http,
+  navigation,
+}: KubernetesObservabilityAppDeps) => {
+  // Use React hooks to manage state.
+  const [counter, seCounter] = useState(0);
+  const { euiTheme } = useEuiTheme();
+  const idGenerator = htmlIdGenerator('replacementCard');
+  const alsoAvailable = i18n.translate('customIntegrations.components.replacementAccordionLabel', {
+    defaultMessage: 'Toggle Menu',
+  });
+  const onClickHandler = () => {
+    // Use the core http service to make a response to the server API.
+    seCounter(counter + 1);
+    // Use the core notifications service to display a success message.
+    notifications.toasts.addSuccess(
+      i18n.translate('kubernetesObservability.dataUpdated', {
+        defaultMessage: 'Data updated',
+      })
+    );
+  };
+
+  useMetricsBreadcrumbs([
+    {
+      text: kubernetesObservabilityTitle,
+    },
+  ]);
+
+  return (
+    <>
+      <MetricsPageTemplate
+        pageHeader={{
+          pageTitle: 'Kubernetes Observability',
+        }}
+        pageSectionProps={{
+          contentProps: {
+            css: fullHeightContentStyles,
+          },
+        }}
+      >
+        <EuiPageBody>
+          <EuiPageHeader>
+            <EuiTitle size="m">
+              <h3>
+                <FormattedMessage
+                  id="kubernetesObservability.helloWorldText"
+                  defaultMessage="{name}"
+                  values={{ name: 'What can you do' }}
+                />
+              </h3>
+            </EuiTitle>
+          </EuiPageHeader>
+          <EuiPageContent>
+            <EuiPageContentBody>
+              <div
+                css={css`
+                  & .euiAccordion__button {
+                    font-weight: ${euiTheme.font.weight.bold};
+                  }
+                  & .euiAccordion-isOpen .euiAccordion__childWrapper {
+                    margin-top: ${euiTheme.size.m};
+                  }
+                `}
+              >
+                <EuiAccordion
+                  id={idGenerator()}
+                  buttonContent={alsoAvailable}
+                  paddingSize="none"
+                  initialIsOpen={true}
+                >
+                  <EuiPanel color="subdued" hasShadow={false} paddingSize="m">
+                    <EuiFlexGroup direction="column" gutterSize="m">
+                      <EuiFlexItem key="message">
+                        <EuiText size="s">
+                          <FormattedMessage
+                            id="customIntegrations.components.replacementAccordion.recommendationDescription"
+                            defaultMessage="Elastic Agent Integrations are recommended, but you can also use Beats. For more
+                details, check out our {link}."
+                          />
+                        </EuiText>
+                      </EuiFlexItem>
+                      <EuiFlexItem key="buttons">
+                        <EuiFlexGroup direction="column" gutterSize="m">
+                          <div>Test1</div>
+                        </EuiFlexGroup>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiPanel>
+                </EuiAccordion>
+                <EuiAccordion
+                  id="local-variables"
+                  className="euiAccordion"
+                  buttonContent={i18n.translate(
+                    'xpack.apm.stacktraceTab.localVariablesToogleButtonLabel1',
+                    { defaultMessage: 'Alerts' }
+                  )}
+                >
+                  <div>Pas ole</div>
+                </EuiAccordion>
+                <EuiAccordion
+                  id="local-variables"
+                  className="euiAccordion"
+                  buttonContent={i18n.translate(
+                    'xpack.apm.stacktraceTab.localVariablesToogleButtonLabel2',
+                    { defaultMessage: 'Logs' }
+                  )}
+                >
+                  <div>Pas ole</div>
+                </EuiAccordion>
+                <EuiAccordion
+                  id="local-variables"
+                  className="euiAccordion"
+                  buttonContent={i18n.translate(
+                    'xpack.apm.stacktraceTab.localVariablesToogleButtonLabel3',
+                    { defaultMessage: 'Dashboards' }
+                  )}
+                >
+                  <div>
+                    <ul>
+                      <li>
+                        <RedirectToGeneralDasboards />
+                      </li>
+                      <li>
+                        <RedirectToDasboards />
+                      </li>
+                    </ul>
+                  </div>
+                </EuiAccordion>
+              </div>
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="kubernetesObservability.content"
+                    defaultMessage="Check out the Integration's documentation."
+                  />
+                </p>
+                <EuiHorizontalRule />
+                <p>
+                  <FormattedMessage
+                    id="kubernetesObservability.timestampText"
+                    defaultMessage="Last timestamp: {numbertoprint}"
+                    values={{ numbertoprint: counter ? counter : 'Unknown' }}
+                  />
+                </p>
+                <EuiButton type="primary" size="s" onClick={onClickHandler}>
+                  <FormattedMessage
+                    id="kubernetesObservability.buttonText"
+                    defaultMessage="Get data"
+                  />
+                </EuiButton>
+              </EuiText>
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+      </MetricsPageTemplate>
+    </>
+  );
+};

x-pack/plugins/infra/public/translations.ts

@@ -46,6 +46,10 @@ export const metricsExplorerTitle = i18n.translate('xpack.infra.metrics.metricsE
   defaultMessage: 'Metrics Explorer',
 });
 
+export const kubernetesObservabilityTitle = i18n.translate('xpack.infra.metrics.kubernetesObservabilityTitle', {
+    defaultMessage: 'Kubernetes Observability',
+});
+
 export const hostsTitle = i18n.translate('xpack.infra.metrics.hostsTitle', {
   defaultMessage: 'Hosts',
 });

x-pack/plugins/kubernetes_observability/public/application.tsx

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppMountParameters, CoreStart } from '../../../../src/core/public';
+import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import { AppPluginStartDependencies } from './types';
 import { KubernetesObservabilityApp } from './components/app';
 

x-pack/plugins/kubernetes_observability/public/components/app.tsx

@@ -1,3 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
@@ -16,8 +23,8 @@ import {
   EuiText,
 } from '@elastic/eui';
 
-import { CoreStart } from '../../../../../src/core/public';
-import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
+import { CoreStart } from '@kbn/core/public';
+import { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
 
 import { PLUGIN_ID, PLUGIN_NAME } from '../../common';
 

x-pack/plugins/kubernetes_observability/public/types.ts

@@ -1,4 +1,10 @@
-import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
 
 export interface KubernetesObservabilityPluginSetup {
   getGreeting: () => string;

x-pack/plugins/kubernetes_observability/server/index.ts

@@ -1,3 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
 import { PluginInitializerContext } from '../../../../src/core/server';
 import { KubernetesObservabilityPlugin } from './plugin';
 

x-pack/plugins/kubernetes_observability/server/plugin.ts

@@ -1,10 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
 import {
   PluginInitializerContext,
   CoreSetup,
   CoreStart,
   Plugin,
   Logger,
-} from '../../../../src/core/server';
+} from '@kbn/core/server';
 
 import { KubernetesObservabilityPluginSetup, KubernetesObservabilityPluginStart } from './types';
 import { defineRoutes } from './routes';

x-pack/plugins/kubernetes_observability/server/routes/index.ts

@@ -1,3 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
 import { IRouter } from '../../../../../src/core/server';
 
 export function defineRoutes(router: IRouter) {