Bring confirm incoming data step for standalone agent

elastic · Jun 16, 2022 · ca676f8 · ca676f8
1 parent 8c54ee6
commit ca676f8
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 15 deletions.
diff --git a/...tions/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx b/...tions/agent_policy/create_package_policy_page/multi_page_layout/components/bottom_bar.tsx
@@ -84,6 +84,40 @@ export const CreatePackagePolicyBottomBar: React.FC<{
   );
 };
 
+export const AgentStandaloneBottomBar: React.FC<{
+  cancelClickHandler: React.ReactEventHandler;
+  cancelUrl?: string;
+  onNext: () => void;
+  noAnimation?: boolean;
+}> = ({ onNext, cancelClickHandler, cancelUrl, noAnimation = false }) => {
+  const Bar = noAnimation ? NoAnimationCenteredRoundedBottomBar : CenteredRoundedBottomBar;
+  return (
+    <Bar>
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false}>
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiButtonEmpty color="ghost" size="s" href={cancelUrl} onClick={cancelClickHandler}>
+              <FormattedMessage
+                id="xpack.fleet.agentStandaloneBottomBar.backButton"
+                defaultMessage="Go back"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton color="primary" fill size="m" onClick={onNext}>
+            <FormattedMessage
+              id="xpack.fleet.agentStandaloneBottomBar.viewIncomingDataBtn"
+              defaultMessage="View incoming data"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </Bar>
+  );
+};
+
 export const CreatePackagePolicyFinalBottomBar: React.FC<{
   pkgkey: string;
 }> = ({ pkgkey }) => {

diff --git a/..._package_policy_page/multi_page_layout/components/confirming_incoming_data_standalone.tsx b/..._package_policy_page/multi_page_layout/components/confirming_incoming_data_standalone.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { EuiCallOut, EuiText, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface Props {
+  troubleshootLink: string;
+}
+
+export const ConfirmIncomingDataStandalone: React.FunctionComponent<Props> = ({
+  troubleshootLink,
+}) => {
+  return (
+    <>
+      <EuiText>
+        <EuiCallOut
+          size="m"
+          color="primary"
+          title={
+            <FormattedMessage
+              id="xpack.fleet.confirmIncomingDataStandalone.title"
+              defaultMessage="Data preview is not available for standalone agents. "
+            />
+          }
+        >
+          <FormattedMessage
+            id="xpack.fleet.confirmIncomingDataStandalone.description"
+            defaultMessage="You can check for agent data in the integration asset tab. If you're having trouble seeing data, check out the {link}."
+            values={{
+              link: (
+                <EuiLink target="_blank" external href={troubleshootLink}>
+                  <FormattedMessage
+                    id="xpack.fleet.confirmIncomingDataStandalone.troubleshootingLink"
+                    defaultMessage="troubleshooting guide"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiCallOut>
+      </EuiText>
+    </>
+  );
+};
diff --git a/...t/sections/agent_policy/create_package_policy_page/multi_page_layout/components/index.tsx b/...t/sections/agent_policy/create_package_policy_page/multi_page_layout/components/index.tsx
@@ -12,3 +12,4 @@ export * from './horizontal_page_steps';
 export * from './page_steps';
 export * from './standalone_mode_warning_callout';
 export * from './confirm_incoming_data_with_preview';
+export * from './confirming_incoming_data_standalone';
diff --git a/...olicy/create_package_policy_page/multi_page_layout/components/page_steps/confirm_data.tsx b/...olicy/create_package_policy_page/multi_page_layout/components/page_steps/confirm_data.tsx
@@ -12,17 +12,35 @@ import { useStartServices } from '../../../../../../hooks';
 
 import {
   ConfirmIncomingDataWithPreview,
+  ConfirmIncomingDataStandalone,
   CreatePackagePolicyFinalBottomBar,
   NotObscuredByBottomBar,
 } from '..';
 
 export const ConfirmDataPageStep: React.FC<MultiPageStepLayoutProps> = (props) => {
-  const { enrolledAgentIds, packageInfo } = props;
+  const { enrolledAgentIds, packageInfo, isManaged } = props;
   const core = useStartServices();
 
   const [agentDataConfirmed, setAgentDataConfirmed] = useState(false);
   const { docLinks } = core;
   const troubleshootLink = docLinks.links.fleet.troubleshooting;
+
+  const bottomBar = (
+    <>
+      <NotObscuredByBottomBar />
+      <CreatePackagePolicyFinalBottomBar pkgkey={`${packageInfo.name}-${packageInfo.version}`} />
+    </>
+  );
+
+  if (!isManaged) {
+    return (
+      <>
+        <ConfirmIncomingDataStandalone troubleshootLink={troubleshootLink} />
+        {bottomBar}
+      </>
+    );
+  }
+
   return (
     <>
       <ConfirmIncomingDataWithPreview
@@ -33,14 +51,7 @@ export const ConfirmDataPageStep: React.FC<MultiPageStepLayoutProps> = (props) =
         troubleshootLink={troubleshootLink}
       />
 
-      {!!agentDataConfirmed && (
-        <>
-          <NotObscuredByBottomBar />
-          <CreatePackagePolicyFinalBottomBar
-            pkgkey={`${packageInfo.name}-${packageInfo.version}`}
-          />
-        </>
-      )}
+      {!!agentDataConfirmed && bottomBar}
     </>
   );
 };
diff --git a/...y_page/multi_page_layout/components/page_steps/install_agent/install_agent_standalone.tsx b/...y_page/multi_page_layout/components/page_steps/install_agent/install_agent_standalone.tsx
@@ -13,7 +13,7 @@ import { safeDump } from 'js-yaml';
 import type { FullAgentPolicy } from '../../../../../../../../../../common/types/models/agent_policy';
 
 import {
-  CreatePackagePolicyFinalBottomBar,
+  AgentStandaloneBottomBar,
   StandaloneModeWarningCallout,
   NotObscuredByBottomBar,
 } from '../..';
@@ -37,7 +37,7 @@ import { StandaloneInstructions } from '../../../../../../../../../components/en
 import type { InstallAgentPageProps } from './types';
 
 export const InstallElasticAgentStandalonePageStep: React.FC<InstallAgentPageProps> = (props) => {
-  const { setIsManaged, agentPolicy, packageInfo } = props;
+  const { setIsManaged, agentPolicy, cancelUrl, onNext, cancelClickHandler } = props;
   const core = useStartServices();
   const kibanaVersion = useKibanaVersion();
   const [yaml, setYaml] = useState<any | undefined>('');
@@ -121,8 +121,10 @@ export const InstallElasticAgentStandalonePageStep: React.FC<InstallAgentPagePro
       {commandCopied && (
         <>
           <NotObscuredByBottomBar />
-          <CreatePackagePolicyFinalBottomBar
-            pkgkey={`${packageInfo.name}-${packageInfo.version}`}
+          <AgentStandaloneBottomBar
+            cancelUrl={cancelUrl}
+            onNext={onNext}
+            cancelClickHandler={cancelClickHandler}
           />
         </>
       )}

diff --git a/...ations/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/index.tsx b/...ations/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/index.tsx
@@ -48,7 +48,7 @@ const confirmDataStep = {
 
 const fleetManagedSteps = [installAgentStep, addIntegrationStep, confirmDataStep];
 
-const standaloneSteps = [addIntegrationStep, installAgentStep];
+const standaloneSteps = [addIntegrationStep, installAgentStep, confirmDataStep];
 
 export const CreatePackagePolicyMultiPage: CreatePackagePolicyParams = ({
   from,

diff --git a/...fleet/public/components/agent_enrollment_flyout/steps/configure_standalone_agent_step.tsx b/...fleet/public/components/agent_enrollment_flyout/steps/configure_standalone_agent_step.tsx
@@ -103,11 +103,12 @@ export const ConfigureStandaloneAgentStep = ({
                 </EuiCopy>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
+                {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
                 <EuiButton
                   iconType="download"
+                  href={downloadLink}
                   onClick={() => {
                     if (onCopy) onCopy();
-                    window.location.href = downloadLink;
                   }}
                   isDisabled={!downloadLink}
                 >