Skip to content

Commit

Permalink
[APM] Turn 'fast filter' on by default and ensure tech preview badge …
Browse files Browse the repository at this point in the history 
…shows when turned on (#193710)

closes #193406

<img width="1057" alt="Screenshot 2024-09-23 at 12 37 41"
src="https://github.com/user-attachments/assets/189eef68-e5ab-4472-a924-8c417960b09b">
<img width="1077" alt="Screenshot 2024-09-23 at 12 37 56"
src="https://github.com/user-attachments/assets/c0129aeb-2bb3-4055-a6f9-ccbbdb608451">
<img width="1202" alt="Screenshot 2024-09-23 at 12 38 04"
src="https://github.com/user-attachments/assets/ec2b1fa7-0342-440b-966c-965d24ef61c2">
  • Loading branch information
@cauemarcondes
cauemarcondes authored Sep 23, 2024
1 parent 1cd0531 commit 886d009
Show file tree
Hide file tree
Showing 9 changed files with 1,772 additions and 1,844 deletions.
18 changes: 1 addition & 17 deletions .../observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
});
});

Expand Down
23 changes: 2 additions & 21 deletions ...ility_solution/apm/public/components/app/service_inventory/apm_signal_inventory/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
71 changes: 11 additions & 60 deletions ...components/app/service_inventory/apm_signal_inventory/service_list/apm_services_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand All @@ -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'>;
Expand Down Expand Up @@ -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,
Expand All @@ -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({
Expand Down Expand Up @@ -367,6 +357,11 @@ export function ApmServicesTable({
serviceOverflowCount,
]);

const isTableSearchBarEnabled = core.uiSettings.get<boolean>(
apmEnableServiceInventoryTableSearchBar,
true
);

const tableSearchBar: TableSearchBar<ServiceListItem> = useMemo(() => {
return {
isEnabled: isTableSearchBarEnabled,
Expand All @@ -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 && (
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down Expand Up @@ -265,6 +266,7 @@ function UnoptimizedManagedTable<T extends object>(props: {
placeholder={tableSearchBar.placeholder}
searchQuery={searchQuery}
onChangeSearchQuery={onChangeSearchQuery}
techPreview={tableSearchBar.techPreview}
/>
) : null}

Expand Down
44 changes: 33 additions & 11 deletions ...observability_solution/apm/public/components/shared/table_search_bar/table_search_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/observability_solution/observability/server/ui_settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,8 +372,8 @@ export const uiSettings: Record<string, UiSettings> = {
}
),
schema: schema.boolean(),
value: false,
requiresPageReload: false,
value: true,
requiresPageReload: true,
type: 'boolean',
},
[apmAWSLambdaPriceFactor]: {
Expand Down
Loading

0 comments on commit 886d009

Please sign in to comment.