[ObsUX][Infra] Update Infrastructure Anomaly Detection 'Feedback' buttons to use short links (#240847)

rmyz · web-flow · commit 1a8b4607f25c · 2025-10-28T15:02:09.000+01:00
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/anomalies/anomalies.tsx b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/anomalies/anomalies.tsx
@@ -49,6 +49,7 @@ export const Anomalies = () => {
         <FeatureFeedbackButton
           data-test-subj="infraMLHostFlyoutFeedbackLink"
           formUrl={INFRA_ML_FLYOUT_FEEDBACK_LINK}
+          sanitizedPath={document.location.pathname}
           kibanaVersion={kibanaVersion}
           isCloudEnv={isCloudEnv}
           isServerlessEnv={isServerlessEnv}
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/ml/anomaly_detection/anomalies_table/anomalies_table.tsx b/x-pack/solutions/observability/plugins/infra/public/components/ml/anomaly_detection/anomalies_table/anomalies_table.tsx
@@ -282,19 +282,38 @@ export interface Props {
   // subject to watch the completition of the request
   fetcherOpts?: Pick<FetcherOptions, 'autoFetch' | 'requestObservable$'>;
   hideSelectGroup?: boolean;
+  onJobTypeChange?: (jobType: 'host' | 'pod') => void;
 }
 
 const DEFAULT_DATE_RANGE: TimeRange = {
   from: 'now-30d',
   to: 'now',
 };
 
+export const JOB_OPTIONS = [
+  {
+    id: `hosts` as JobType,
+    label: i18n.translate('xpack.infra.ml.anomalyFlyout.hostBtn', {
+      defaultMessage: 'Hosts',
+    }),
+    'data-test-subj': 'anomaliesHostComboBoxItem',
+  },
+  {
+    id: `k8s` as JobType,
+    label: i18n.translate('xpack.infra.ml.anomalyFlyout.podsBtn', {
+      defaultMessage: 'Kubernetes Pods',
+    }),
+    'data-test-subj': 'anomaliesK8sComboBoxItem',
+  },
+];
+
 export const AnomaliesTable = ({
   closeFlyout,
   hostName,
   dateRange = DEFAULT_DATE_RANGE,
   hideDatePicker = false,
   fetcherOpts,
+  onJobTypeChange,
   hideSelectGroup,
 }: Props) => {
   const [search, setSearch] = useState('');
@@ -307,26 +326,9 @@ export const AnomaliesTable = ({
     field: 'startTime',
     direction: 'desc',
   });
-  const jobOptions = [
-    {
-      id: `hosts` as JobType,
-      label: i18n.translate('xpack.infra.ml.anomalyFlyout.hostBtn', {
-        defaultMessage: 'Hosts',
-      }),
-      'data-test-subj': 'anomaliesHostComboBoxItem',
-    },
-    {
-      id: `k8s` as JobType,
-      label: i18n.translate('xpack.infra.ml.anomalyFlyout.podsBtn', {
-        defaultMessage: 'Kubernetes Pods',
-      }),
-      'data-test-subj': 'anomaliesK8sComboBoxItem',
-    },
-  ];
-  const [jobType, setJobType] = useState<JobType>('hosts');
-  const [selectedJobType, setSelectedJobType] = useState<JobOption[]>([
-    jobOptions.find((item) => item.id === 'hosts') || jobOptions[0],
-  ]);
+
+  const [jobType, setJobType] = useState<JobType>(JOB_OPTIONS[0].id);
+  const [selectedJobType, setSelectedJobType] = useState<JobOption[]>([JOB_OPTIONS[0]]);
   const { source } = useSourceContext();
   const anomalyThreshold = source?.configuration.anomalyThreshold;
 
@@ -436,10 +438,14 @@ export const AnomaliesTable = ({
     setSearch(e.target.value);
   }, []);
 
-  const changeJobType = useCallback((selectedOptions: any) => {
-    setSelectedJobType(selectedOptions);
-    setJobType(selectedOptions[0].id);
-  }, []);
+  const changeJobType = useCallback(
+    (selectedOptions: any) => {
+      setSelectedJobType(selectedOptions);
+      setJobType(selectedOptions[0].id);
+      onJobTypeChange?.(selectedOptions[0].id === 'hosts' ? 'host' : 'pod');
+    },
+    [onJobTypeChange]
+  );
 
   const changeSortOptions = useCallback(
     (nextSortOptions: Sort) => {
@@ -593,7 +599,7 @@ export const AnomaliesTable = ({
                     defaultMessage: 'Select group',
                   })}
                   singleSelection={{ asPlainText: true }}
-                  options={jobOptions}
+                  options={JOB_OPTIONS}
                   selectedOptions={selectedJobType}
                   onChange={changeJobType}
                   fullWidth
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/ml/anomaly_detection/flyout_home.tsx b/x-pack/solutions/observability/plugins/infra/public/components/ml/anomaly_detection/flyout_home.tsx
@@ -36,7 +36,7 @@ import {
 import { useMetricHostsModuleContext } from '../../../containers/ml/modules/metrics_hosts/module';
 import { useMetricK8sModuleContext } from '../../../containers/ml/modules/metrics_k8s/module';
 import { LoadingPrompt } from '../../loading_page';
-import { AnomaliesTable } from './anomalies_table/anomalies_table';
+import { AnomaliesTable, JOB_OPTIONS } from './anomalies_table/anomalies_table';
 import { SubscriptionSplashPrompt } from '../../subscription_splash_content';
 import { useInfraMLCapabilitiesContext } from '../../../containers/ml/infra_ml_capabilities';
 import { KibanaEnvironmentContext } from '../../../hooks/use_kibana';
@@ -51,11 +51,13 @@ interface Props {
 
 type Tab = 'jobs' | 'anomalies';
 
-export const INFRA_ML_FLYOUT_FEEDBACK_LINK =
-  'https://docs.google.com/forms/d/e/1FAIpQLSfBixH_1HTuqeMCy38iK9w1mB8vl_eVvcLUlSPAPiWKBHeHiQ/viewform';
+export const INFRA_ML_FLYOUT_FEEDBACK_LINK = 'https://ela.st/infra-anomaly-feedback';
 
 export const FlyoutHome = (props: Props) => {
   const [tab, setTab] = useState<Tab>('jobs');
+  const [selectedJobType, setSelectedJobType] = useState<'host' | 'pod'>(
+    JOB_OPTIONS[0].id === 'hosts' ? 'host' : 'pod'
+  );
   const { goToSetup, closeFlyout } = props;
   const {
     fetchJobStatus: fetchHostJobStatus,
@@ -80,6 +82,10 @@ export const FlyoutHome = (props: Props) => {
     goToSetup('kubernetes');
   }, [goToSetup]);
 
+  const onJobTypeChange = useCallback((jobType: 'host' | 'pod') => {
+    setSelectedJobType(jobType);
+  }, []);
+
   const jobIds = [
     ...(k8sJobSummaries || []).map((k) => k.id),
     ...(hostJobSummaries || []).map((h) => h.id),
@@ -100,11 +106,14 @@ export const FlyoutHome = (props: Props) => {
 
   // Used for prefilling the feedback form (if both types are enabled do not prefill)
   // In case the host type is the only option (if props.hideJobType is true) - prefill 'host'
+  // If we are in the anomalies tab, use the selected job type
   const mlJobTypeByNode =
     props.hideJobType || (hostJobSummaries.length > 0 && k8sJobSummaries.length === 0)
       ? 'host'
       : hostJobSummaries.length === 0 && k8sJobSummaries.length > 0
       ? 'pod'
+      : tab === 'anomalies'
+      ? selectedJobType
       : undefined;
 
   if (!hasInfraMLCapabilities) {
@@ -149,6 +158,7 @@ export const FlyoutHome = (props: Props) => {
                     : 'infraMLFlyoutFeedbackLink'
                 }
                 formUrl={INFRA_ML_FLYOUT_FEEDBACK_LINK}
+                sanitizedPath={document.location.pathname}
                 kibanaVersion={kibanaVersion}
                 isCloudEnv={isCloudEnv}
                 isServerlessEnv={isServerlessEnv}
@@ -245,7 +255,11 @@ export const FlyoutHome = (props: Props) => {
           )}
 
           {tab === 'anomalies' && (
-            <AnomaliesTable closeFlyout={closeFlyout} hideSelectGroup={props.hideSelectGroup} />
+            <AnomaliesTable
+              closeFlyout={closeFlyout}
+              hideSelectGroup={props.hideSelectGroup}
+              onJobTypeChange={onJobTypeChange}
+            />
           )}
         </EuiFlyoutBody>
       </>
diff --git a/x-pack/solutions/observability/plugins/infra/public/components/ml/anomaly_detection/job_setup_screen.tsx b/x-pack/solutions/observability/plugins/infra/public/components/ml/anomaly_detection/job_setup_screen.tsx
@@ -279,6 +279,7 @@ export const JobSetupScreen = (props: Props) => {
             <FeatureFeedbackButton
               data-test-subj={`infraML${props.jobType}FlyoutFeedbackLink`}
               formUrl={INFRA_ML_FLYOUT_FEEDBACK_LINK}
+              sanitizedPath={document.location.pathname}
               kibanaVersion={kibanaVersion}
               isCloudEnv={isCloudEnv}
               isServerlessEnv={isServerlessEnv}
@@ -309,7 +310,12 @@ export const JobSetupScreen = (props: Props) => {
             <EuiSpacer />
             {setupStatus.reasons.map((errorMessage, i) => (
               <React.Fragment key={i}>
-                <EuiCallOut color="danger" iconType="warning" title={errorCalloutTitle}>
+                <EuiCallOut
+                  announceOnMount
+                  color="danger"
+                  iconType="warning"
+                  title={errorCalloutTitle}
+                >
                   <EuiCode transparentBackground>{errorMessage}</EuiCode>
                 </EuiCallOut>
                 <EuiSpacer />
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/index.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/index.tsx
@@ -239,6 +239,7 @@ const HeaderLinkFeedbackButtonRoute = ({
           kibanaVersion={kibanaVersion}
           isCloudEnv={isCloudEnv}
           isServerlessEnv={isServerlessEnv}
+          sanitizedPath={path}
         />
       )}
     />
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/survey_kubernetes.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/survey_kubernetes.tsx
@@ -40,6 +40,7 @@ export const SurveyKubernetes = () => {
         isCloudEnv={isCloudEnv}
         isServerlessEnv={isServerlessEnv}
         surveyButtonText={FEEDBACK_BUTTON_KUBERNETES_TEXT}
+        sanitizedPath={document.location.pathname}
       />
       {!isToastSeen && (
         <EuiGlobalToastList
@@ -75,6 +76,7 @@ export const SurveyKubernetes = () => {
                         isCloudEnv={isCloudEnv}
                         isServerlessEnv={isServerlessEnv}
                         surveyButtonText={START_SURVEY_BUTTON_TEXT}
+                        sanitizedPath={document.location.pathname}
                       />
                     </EuiFlexItem>
                   </EuiFlexGroup>
diff --git a/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/survey_section.tsx b/x-pack/solutions/observability/plugins/infra/public/pages/metrics/inventory_view/components/survey_section.tsx
@@ -30,6 +30,7 @@ export const SurveySection = () => {
           kibanaVersion={kibanaVersion}
           isCloudEnv={isCloudEnv}
           isServerlessEnv={isServerlessEnv}
+          sanitizedPath={document.location.pathname}
         />
       )}
     </>
