[8.x] [APM] Turn 'fast filter' on by default and ensure tec…

…h preview badge shows when turned on (#193710) (#193747) # Backport This will backport the following commits from `main` to `8.x`: - [[APM] Turn 'fast filter' on by default and ensure tech preview badge shows when turned on (#193710)](#193710)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cauê Marcondes <[email protected]>
elastic · Sep 23, 2024 · 3bf4b47 · 3bf4b47
1 parent 02112f1
commit 3bf4b47
Show file tree

Hide file tree

Showing 9 changed files with 1,772 additions and 1,844 deletions.
diff --git a/.../observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts b/.../observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts
@@ -119,10 +119,8 @@ describe.skip('Service inventory', () => {
       cy.loginAsEditorUser();
     });
 
-    it('Toggles fast filter when clicking on link', () => {
+    it('Uses the fast filter to search for services', () => {
       cy.visitKibana(serviceInventoryHref);
-      cy.get('[data-test-subj="tableSearchInput"]').should('not.exist');
-      cy.contains('Enable fast filter').click();
       cy.get('[data-test-subj="tableSearchInput"]').should('exist');
       cy.contains('opbeans-node');
       cy.contains('opbeans-java');
@@ -135,20 +133,6 @@ describe.skip('Service inventory', () => {
       cy.contains('opbeans-node');
       cy.contains('opbeans-java');
       cy.contains('opbeans-rum');
-      cy.contains('Disable fast filter').click();
-      cy.get('[data-test-subj="tableSearchInput"]').should('not.exist');
-    });
-  });
-
-  describe('Table search with viewer user', () => {
-    beforeEach(() => {
-      cy.loginAsViewerUser();
-    });
-
-    it('Should not be able to turn it on', () => {
-      cy.visitKibana(serviceInventoryHref);
-      cy.get('[data-test-subj="tableSearchInput"]').should('not.exist');
-      cy.get('[data-test-subj="apmLink"]').should('be.disabled');
     });
   });
 

diff --git a/...ility_solution/apm/public/components/app/service_inventory/apm_signal_inventory/index.tsx b/...ility_solution/apm/public/components/app/service_inventory/apm_signal_inventory/index.tsx
@@ -5,13 +5,11 @@
  * 2.0.
  */
 
-import { usePerformanceContext } from '@kbn/ebt-tools';
 import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { i18n } from '@kbn/i18n';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { apmEnableServiceInventoryTableSearchBar } from '@kbn/observability-plugin/common';
-import { useEditableSettings } from '@kbn/observability-shared-plugin/public';
 import { ApmDocumentType } from '../../../../../common/document_type';
 import {
   ServiceInventoryFieldName,
@@ -182,9 +180,7 @@ function useServicesDetailedStatisticsFetcher({
 export function ApmServiceInventory() {
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useStateDebounced('');
   const { onPageReady } = usePerformanceContext();
-
   const [renderedItems, setRenderedItems] = useState<ServiceListItem[]>([]);
-
   const mainStatisticsFetch = useServicesMainStatisticsFetcher(debouncedSearchQuery);
   const { mainStatisticsData, mainStatisticsStatus } = mainStatisticsFetch;
 
@@ -296,19 +292,9 @@ export function ApmServiceInventory() {
     }
   }, [mainStatisticsStatus, comparisonFetch.status, onPageReady]);
 
-  const { fields, isSaving, saveSingleSetting } = useEditableSettings([
-    apmEnableServiceInventoryTableSearchBar,
-  ]);
-
-  const settingsField = fields[apmEnableServiceInventoryTableSearchBar];
-  const isTableSearchBarEnabled = Boolean(settingsField?.savedValue ?? settingsField?.defaultValue);
-
   return (
     <>
-      {/* keep this div as we're collecting telemetry to track the usage of the table fast search vs KQL bar */}
-      <div data-fastSearch={isTableSearchBarEnabled ? 'enabled' : 'disabled'}>
-        <SearchBar showTimeComparison />
-      </div>
+      <SearchBar showTimeComparison />
       <EuiFlexGroup direction="column" gutterSize="m">
         {displayMlCallout && mlCallout}
         <EuiFlexItem>
@@ -328,11 +314,6 @@ export function ApmServiceInventory() {
             onChangeSearchQuery={setDebouncedSearchQuery}
             maxCountExceeded={mainStatisticsData?.maxCountExceeded ?? false}
             onChangeRenderedItems={setRenderedItems}
-            isTableSearchBarEnabled={isTableSearchBarEnabled}
-            isSavingSetting={isSaving}
-            onChangeTableSearchBarVisibility={() => {
-              saveSingleSetting(apmEnableServiceInventoryTableSearchBar, !isTableSearchBarEnabled);
-            }}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/...components/app/service_inventory/apm_signal_inventory/service_list/apm_services_table.tsx b/...components/app/service_inventory/apm_signal_inventory/service_list/apm_services_table.tsx
@@ -10,18 +10,16 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIconTip,
-  EuiLink,
-  EuiSpacer,
   EuiText,
   EuiToolTip,
   RIGHT_ALIGNMENT,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { getSurveyFeedbackURL } from '@kbn/observability-shared-plugin/public';
+import { apmEnableServiceInventoryTableSearchBar } from '@kbn/observability-plugin/common';
 import { ALERT_STATUS_ACTIVE } from '@kbn/rule-data-utils';
 import { TypeOf } from '@kbn/typed-react-router-config';
 import { omit } from 'lodash';
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { ServiceHealthStatus } from '../../../../../../common/service_health_status';
 import {
   ServiceInventoryFieldName,
@@ -33,7 +31,7 @@ import {
   asPercent,
   asTransactionRate,
 } from '../../../../../../common/utils/formatters';
-import { KibanaEnvironmentContext } from '../../../../../context/kibana_environment_context/kibana_environment_context';
+import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
 import { useApmParams } from '../../../../../hooks/use_apm_params';
 import { useApmRouter } from '../../../../../hooks/use_apm_router';
 import { Breakpoints, useBreakpoints } from '../../../../../hooks/use_breakpoints';
@@ -56,9 +54,8 @@ import {
   SortFunction,
   TableSearchBar,
 } from '../../../../shared/managed_table';
-import { TryItButton } from '../../../../shared/try_it_button';
-import { HealthBadge } from './health_badge';
 import { ColumnHeaderWithTooltip } from './column_header_with_tooltip';
+import { HealthBadge } from './health_badge';
 
 type ServicesDetailedStatisticsAPIResponse =
   APIReturnType<'POST /internal/apm/services/detailed_statistics'>;
@@ -305,9 +302,6 @@ interface Props {
   maxCountExceeded: boolean;
   onChangeSearchQuery: (searchQuery: string) => void;
   onChangeRenderedItems: (renderedItems: ServiceListItem[]) => void;
-  isTableSearchBarEnabled: boolean;
-  isSavingSetting: boolean;
-  onChangeTableSearchBarVisibility: () => void;
 }
 export function ApmServicesTable({
   status,
@@ -325,17 +319,13 @@ export function ApmServicesTable({
   maxCountExceeded,
   onChangeSearchQuery,
   onChangeRenderedItems,
-  isTableSearchBarEnabled,
-  isSavingSetting,
-  onChangeTableSearchBarVisibility,
 }: Props) {
-  const { kibanaVersion, isCloudEnv, isServerlessEnv } = useContext(KibanaEnvironmentContext);
   const breakpoints = useBreakpoints();
+  const { core } = useApmPluginContext();
   const { link } = useApmRouter();
   const showTransactionTypeColumn = items.some(
     ({ transactionType }) => transactionType && !isDefaultTransactionType(transactionType)
   );
-
   const { query } = useApmParams('/services');
   const { kuery } = query;
   const { fallbackToTransactions } = useFallbackToTransactionsFetcher({
@@ -367,6 +357,11 @@ export function ApmServicesTable({
     serviceOverflowCount,
   ]);
 
+  const isTableSearchBarEnabled = core.uiSettings.get<boolean>(
+    apmEnableServiceInventoryTableSearchBar,
+    true
+  );
+
   const tableSearchBar: TableSearchBar<ServiceListItem> = useMemo(() => {
     return {
       isEnabled: isTableSearchBarEnabled,
@@ -376,56 +371,12 @@ export function ApmServicesTable({
       placeholder: i18n.translate('xpack.apm.servicesTable.filterServicesPlaceholder', {
         defaultMessage: 'Search services by name',
       }),
+      techPreview: true,
     };
   }, [isTableSearchBarEnabled, maxCountExceeded, onChangeSearchQuery]);
 
   return (
     <EuiFlexGroup gutterSize="xs" direction="column" responsive={false}>
-      <EuiFlexItem>
-        <TryItButton
-          isFeatureEnabled={isTableSearchBarEnabled}
-          linkLabel={
-            isTableSearchBarEnabled
-              ? i18n.translate('xpack.apm.serviceList.disableFastFilter', {
-                  defaultMessage: 'Disable fast filter',
-                })
-              : i18n.translate('xpack.apm.serviceList.enableFastFilter', {
-                  defaultMessage: 'Enable fast filter',
-                })
-          }
-          onClick={onChangeTableSearchBarVisibility}
-          isLoading={isSavingSetting}
-          popoverContent={
-            <EuiFlexGroup direction="column" gutterSize="s">
-              <EuiFlexItem grow={false}>
-                {i18n.translate('xpack.apm.serviceList.turnOffFastFilter', {
-                  defaultMessage:
-                    'Fast filtering allows you to instantly search for your services using free text.',
-                })}
-              </EuiFlexItem>
-              {isTableSearchBarEnabled && (
-                <EuiFlexItem grow={false}>
-                  <EuiLink
-                    data-test-subj="apmServiceListGiveFeedbackLink"
-                    href={getSurveyFeedbackURL({
-                      formUrl: 'https://ela.st/service-inventory-fast-filter-feedback',
-                      kibanaVersion,
-                      isCloudEnv,
-                      isServerlessEnv,
-                    })}
-                    target="_blank"
-                  >
-                    {i18n.translate('xpack.apm.serviceList.giveFeedbackFlexItemLabel', {
-                      defaultMessage: 'Give feedback',
-                    })}
-                  </EuiLink>
-                </EuiFlexItem>
-              )}
-            </EuiFlexGroup>
-          }
-        />
-        <EuiSpacer size="s" />
-      </EuiFlexItem>
       <EuiFlexItem>
         <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="flexEnd">
           {fallbackToTransactions && (

diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx
@@ -43,6 +43,7 @@ export interface TableSearchBar<T> {
   maxCountExceeded: boolean;
   placeholder: string;
   onChangeSearchQuery: (searchQuery: string) => void;
+  techPreview?: boolean;
 }
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50];
@@ -265,6 +266,7 @@ function UnoptimizedManagedTable<T extends object>(props: {
           placeholder={tableSearchBar.placeholder}
           searchQuery={searchQuery}
           onChangeSearchQuery={onChangeSearchQuery}
+          techPreview={tableSearchBar.techPreview}
         />
       ) : null}
 

diff --git a/...observability_solution/apm/public/components/shared/table_search_bar/table_search_bar.tsx b/...observability_solution/apm/public/components/shared/table_search_bar/table_search_bar.tsx
@@ -4,26 +4,48 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFieldSearch } from '@elastic/eui';
+import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
+import { css } from '@emotion/react';
+import { TechnicalPreviewBadge } from '../technical_preview_badge';
 
 interface Props {
   placeholder: string;
   searchQuery: string;
   onChangeSearchQuery: (value: string) => void;
+  techPreview?: boolean;
 }
 
-export function TableSearchBar({ placeholder, searchQuery, onChangeSearchQuery }: Props) {
+export function TableSearchBar({
+  placeholder,
+  searchQuery,
+  onChangeSearchQuery,
+  techPreview = false,
+}: Props) {
   return (
-    <EuiFieldSearch
-      data-test-subj="tableSearchInput"
-      placeholder={placeholder}
-      fullWidth={true}
-      value={searchQuery}
-      onChange={(e) => {
-        onChangeSearchQuery(e.target.value);
-      }}
-    />
+    <EuiFlexGroup gutterSize="s">
+      {techPreview ? (
+        <EuiFlexItem
+          grow={false}
+          css={css`
+            justify-content: center;
+          `}
+        >
+          <TechnicalPreviewBadge icon="beaker" />
+        </EuiFlexItem>
+      ) : null}
+      <EuiFlexItem>
+        <EuiFieldSearch
+          data-test-subj="tableSearchInput"
+          placeholder={placeholder}
+          fullWidth={true}
+          value={searchQuery}
+          onChange={(e) => {
+            onChangeSearchQuery(e.target.value);
+          }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
 

diff --git a/x-pack/plugins/observability_solution/observability/server/ui_settings.ts b/x-pack/plugins/observability_solution/observability/server/ui_settings.ts
@@ -371,8 +371,8 @@ export const uiSettings: Record<string, UiSettings> = {
       }
     ),
     schema: schema.boolean(),
-    value: false,
-    requiresPageReload: false,
+    value: true,
+    requiresPageReload: true,
     type: 'boolean',
   },
   [apmAWSLambdaPriceFactor]: {