[Onboarding] k8s quickstart flow

x-pack/plugins/observability_solution/observability_onboarding/public/application/observability_onboarding_flow.tsx

@@ -19,6 +19,7 @@ import { SystemLogsPanel } from './quickstart_flows/system_logs';
 import { CustomLogsPanel } from './quickstart_flows/custom_logs';
 import { OtelLogsPanel } from './quickstart_flows/otel_logs';
 import { AutoDetectPanel } from './quickstart_flows/auto_detect';
+import { KubernetesPanel } from './quickstart_flows/kubernetes';
 import { BackButton } from './shared/back_button';
 
 const queryClient = new QueryClient();
@@ -66,6 +67,10 @@ export function ObservabilityOnboardingFlow() {
               <BackButton />
               <CustomLogsPanel />
             </Route>
+            <Route path="/kubernetes">
+              <BackButton />
+              <KubernetesPanel />
+            </Route>
             <Route path="/otel-logs">
               <BackButton />
               <OtelLogsPanel />

x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.ts

@@ -34,6 +34,7 @@ export function useCustomCardsForCategory(
   const { href: systemLogsUrl } = reactRouterNavigate(history, `/systemLogs/${location.search}`);
   const { href: customLogsUrl } = reactRouterNavigate(history, `/customLogs/${location.search}`);
   const { href: otelLogsUrl } = reactRouterNavigate(history, `/otel-logs/${location.search}`);
+  const { href: kubernetesUrl } = reactRouterNavigate(history, `/kubernetes/${location.search}`);
 
   const otelCard: VirtualCard = {
     id: 'otel-logs',
@@ -112,7 +113,23 @@ export function useCustomCardsForCategory(
       ];
     case 'infra':
       return [
-        toFeaturedCard('kubernetes'),
+        {
+          id: 'kubernetes-quick-start',
+          type: 'virtual',
+          title: 'Kubernetes',
+          description: 'Collect logs and metrics from Kubernetes using minimal configuration',
+          name: 'kubernetes-quick-start',
+          categories: ['observability'],
+          icons: [
+            {
+              type: 'svg',
+              src: http?.staticAssets.getPluginAssetHref('kubernetes.svg') ?? '',
+            },
+          ],
+          url: kubernetesUrl,
+          version: '',
+          integration: '',
+        },
         toFeaturedCard('docker'),
         isServerless ? toFeaturedCard('prometheus') : otelCard,
         {

x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts

@@ -7,7 +7,7 @@
 
 import { IntegrationCardItem } from '@kbn/fleet-plugin/public';
 
-export const QUICKSTART_FLOWS = ['system-logs-virtual'];
+export const QUICKSTART_FLOWS = ['system-logs-virtual', 'kubernetes-quick-start'];
 
 export const toCustomCard = (card: IntegrationCardItem) => ({
   ...card,

x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/kubernetes/build_kubectl_command.ts

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+interface Params {
+  encodedApiKey: string;
+  onboardingId: string;
+  elasticsearchUrl: string;
+  elasticAgentVersion: string;
+}
+
+const KUSTOMIZE_TEMPLATE_URL =
+  'https://github.com/elastic/elastic-agent/deploy/kubernetes/elastic-agent-kustomize/default/elastic-agent-standalone';
+
+export function buildKubectlCommand({
+  encodedApiKey,
+  onboardingId,
+  elasticsearchUrl,
+  elasticAgentVersion,
+}: Params) {
+  const escapedElasticsearchUrl = elasticsearchUrl.replace(/\//g, '\\/');
+
+  return `
+    kubectl kustomize ${KUSTOMIZE_TEMPLATE_URL}\\?ref\\=v${elasticAgentVersion}
+      | sed -e 's/JUFQSV9LRVkl/${encodedApiKey}/g'
+            -e "s/%ES_HOST%/${escapedElasticsearchUrl}/g"
+            -e "s/%ONBOARDING_ID%/${onboardingId}/g"
+            -e "s/\\(docker.elastic.co\\/beats\\/elastic-agent\:\\).*$/\\1${elasticAgentVersion}/g"
+            -e  "/{CA_TRUSTED}/c\\ "
+      |  kubectl apply -f-
+  `
+    .trim()
+    .replace(/\n/g, ' ')
+    .replace(/\s\s+/g, ' ');
+}

x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/kubernetes/command_snippet.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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';
+import { EuiCodeBlock, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { buildKubectlCommand } from './build_kubectl_command';
+import { CopyToClipboardButton } from '../shared/copy_to_clipboard_button';
+
+interface Props {
+  encodedApiKey: string;
+  onboardingId: string;
+  elasticsearchUrl: string;
+  elasticAgentVersion: string;
+}
+
+export function CommandSnippet({
+  encodedApiKey,
+  onboardingId,
+  elasticsearchUrl,
+  elasticAgentVersion,
+}: Props) {
+  const command = buildKubectlCommand({
+    encodedApiKey,
+    onboardingId,
+    elasticsearchUrl,
+    elasticAgentVersion,
+  });
+
+  return (
+    <>
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="xpack.observability_onboarding.kubernetesPanel.installElasticAgentDescription"
+            defaultMessage="Copy and run the install command. Note that the following manifest contains resource limits that may not be appropriate for a production environment, review our guide on {scalingLink} before deploying this manifest."
+            values={{
+              scalingLink: (
+                <EuiLink
+                  data-test-subj="observabilityOnboardingKubernetesPanelScalingElasticAgentOnKubernetesLink"
+                  href="https://www.elastic.co/guide/en/fleet/current/scaling-on-kubernetes.html"
+                  external
+                  target="_blank"
+                >
+                  {i18n.translate(
+                    'xpack.observability_onboarding.kubernetesPanel.scalingElasticAgentOnLinkLabel',
+                    { defaultMessage: 'Scaling Elastic Agent on Kubernetes' }
+                  )}
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+
+      <EuiSpacer />
+
+      <EuiCodeBlock language="text" paddingSize="m" fontSize="m">
+        {command}
+      </EuiCodeBlock>
+
+      <EuiSpacer />
+
+      <CopyToClipboardButton textToCopy={command} fill />
+    </>
+  );
+}

x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/kubernetes/data_ingest_status.tsx

@@ -0,0 +1,182 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  StepsProgress,
+  useFlowProgressTelemetry,
+} from '../../../hooks/use_flow_progress_telemetry';
+import { ObservabilityOnboardingContextValue } from '../../../plugin';
+import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
+import { ProgressIndicator } from '../shared/progress_indicator';
+
+interface Props {
+  onboardingId: string;
+}
+
+const FETCH_INTERVAL = 2000;
+const SHOW_TROUBLESHOOTING_DELAY = 120000; // 2 minutes
+const CLUSTER_OVERVIEW_DASHBOARD_ID = 'kubernetes-f4dc26db-1b53-4ea2-a78b-1bfab8ea267c';
+
+export function DataIngestStatus({ onboardingId }: Props) {
+  const {
+    services: { share, http },
+  } = useKibana<ObservabilityOnboardingContextValue>();
+  const [progress, setProgress] = useState<StepsProgress | undefined>(undefined);
+  const [checkDataStartTime] = useState(Date.now());
+
+  const dashboardLocator = share.url.locators.get(DASHBOARD_APP_LOCATOR);
+
+  const { data, status, refetch } = useFetcher(
+    (callApi) => {
+      return callApi('GET /internal/observability_onboarding/kubernetes/{onboardingId}/has-data', {
+        params: { path: { onboardingId } },
+      });
+    },
+    [onboardingId]
+  );
+
+  useEffect(() => {
+    const pendingStatusList = [FETCH_STATUS.LOADING, FETCH_STATUS.NOT_INITIATED];
+
+    if (pendingStatusList.includes(status) || data?.hasData === true) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      refetch();
+    }, FETCH_INTERVAL);
+
+    return () => clearTimeout(timeout);
+  }, [data?.hasData, refetch, status]);
+
+  useEffect(() => {
+    if (data?.hasData === true) {
+      setProgress({ 'logs-ingest': { status: 'complete' } });
+    }
+  }, [data?.hasData]);
+
+  useFlowProgressTelemetry(progress, onboardingId);
+
+  const isTroubleshootingVisible =
+    data?.hasData === false && Date.now() - checkDataStartTime > SHOW_TROUBLESHOOTING_DELAY;
+
+  return (
+    <>
+      <ProgressIndicator
+        title={data?.hasData ? 'We are monitoring your cluster' : 'Waiting for data to be shipped'}
+        iconType="checkInCircleFilled"
+        isLoading={!data?.hasData}
+        css={css`
+          max-width: 40%;
+        `}
+      />
+
+      {isTroubleshootingVisible && (
+        <>
+          <EuiSpacer />
+          <EuiText color="subdued" size="s">
+            <FormattedMessage
+              id="xpack.observability_onboarding.dataIngestStatus.troubleshootingTextLabel"
+              defaultMessage="Find more details and troubleshooting solutions in our documentation. {troubleshootingLink}"
+              values={{
+                troubleshootingLink: (
+                  <EuiLink
+                    data-test-subj="observabilityOnboardingDataIngestStatusTroubleshootingLink"
+                    href="https://www.elastic.co/guide/en/fleet/current/fleet-troubleshooting.html#agent-oom-k8s"
+                    external
+                    target="_blank"
+                  >
+                    {i18n.translate(
+                      'xpack.observability_onboarding.dataIngestStatus.troubleshootingLinkText',
+                      {
+                        defaultMessage: 'Open documentation',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        </>
+      )}
+
+      {data?.hasData === true && (
+        <>
+          <EuiSpacer />
+
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiImage
+                src={http.staticAssets.getPluginAssetHref('waterfall_screen.svg')}
+                width={162}
+                height={117}
+                alt=""
+                hasShadow
+              />
+            </EuiFlexItem>
+
+            <EuiFlexItem>
+              <EuiText>
+                <p>
+                  {i18n.translate(
+                    'xpack.observability_onboarding.kubernetesPanel.monitoringCluster',
+                    {
+                      defaultMessage:
+                        'Overview your Kubernetes cluster with this pre-made dashboard',
+                    }
+                  )}
+                </p>
+              </EuiText>
+              <EuiSpacer size="xs" />
+              <EuiLink
+                data-test-subj="observabilityOnboardingDataIngestStatusViewDashboardLink"
+                href={dashboardLocator?.getRedirectUrl({
+                  dashboardId: CLUSTER_OVERVIEW_DASHBOARD_ID,
+                })}
+              >
+                {i18n.translate('xpack.observability_onboarding.kubernetesPanel.exploreDashboard', {
+                  defaultMessage: 'Explore Kubernetes cluster',
+                })}
+              </EuiLink>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+          <EuiSpacer />
+
+          <EuiText color="subdued" size="s">
+            <FormattedMessage
+              id="xpack.observability_onboarding.dataIngestStatus.findAllPremadeAssetsTextLabel"
+              defaultMessage="Find all pre-made assets ready to use {viewAllAssetsLink}"
+              values={{
+                viewAllAssetsLink: (
+                  <EuiLink
+                    data-test-subj="observabilityOnboardingDataIngestStatusViewAllAssetsLink"
+                    href={`${http.basePath.get()}/app/integrations/detail/kubernetes/assets`}
+                  >
+                    {i18n.translate(
+                      'xpack.observability_onboarding.dataIngestStatus.viewAllAssetsLinkText',
+                      {
+                        defaultMessage: 'View all assets',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        </>
+      )}
+    </>
+  );
+}