[8.6] [APM] Agent explorer UI issues (#146140) (#146431)

# Backport This will backport the following commits from `main` to `8.6`: - [[APM] Agent explorer UI issues (#146140)](https://github.com/elastic/kibana/pull/146140)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Yngrid Coello <yngrid.coello@elastic.co>
2025-04-24 09:48:58 -04:00 · 2022-11-28 12:27:53 -05:00 · 2022-11-28 12:27:53 -05:00 · 9a6a1181a6
commit 9a6a1181a6
parent e7de9cfded
4 changed files with 78 additions and 57 deletions
--- a/x-pack/plugins/apm/public/components/app/settings/agent_explorer/agent_instances/agent_contextual_information/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/settings/agent_explorer/agent_instances/agent_contextual_information/index.tsx
@ -9,7 +9,6 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TypeOf } from '@kbn/typed-react-router-config';
 import React from 'react';
-import { AgentExplorerFieldName } from '../../../../../../../common/agent_explorer';
 import { AgentName } from '../../../../../../../typings/es_schemas/ui/fields/agent';
 import { useApmPluginContext } from '../../../../../../context/apm_plugin/use_apm_plugin_context';
 import { useDefaultTimeRange } from '../../../../../../hooks/use_default_time_range';
@ -20,6 +19,34 @@ import { getComparisonEnabled } from '../../../../../shared/time_comparison/get_
 import { TruncateWithTooltip } from '../../../../../shared/truncate_with_tooltip';
 import { AgentExplorerDocsLink } from '../../agent_explorer_docs_link';

+const serviceLabel = i18n.translate(
+  'xpack.apm.agentInstancesDetails.serviceLabel',
+  {
+    defaultMessage: 'Service',
+  }
+);
+
+const agentNameLabel = i18n.translate(
+  'xpack.apm.agentInstancesDetails.agentNameLabel',
+  {
+    defaultMessage: 'Agent Name',
+  }
+);
+
+const instancesLabel = i18n.translate(
+  'xpack.apm.agentInstancesDetails.intancesLabel',
+  {
+    defaultMessage: 'Instances',
+  }
+);
+
+const agentDocsLabel = i18n.translate(
+  'xpack.apm.agentInstancesDetails.agentDocsUrlLabel',
+  {
+    defaultMessage: 'Agent documentation',
+  }
+);
+
 export function AgentContextualInformation({
  agentName,
  serviceName,
@ -39,10 +66,8 @@ export function AgentContextualInformation({

  const stickyProperties = [
    {
-      label: i18n.translate('xpack.apm.agentInstancesDetails.serviceLabel', {
-        defaultMessage: 'Service',
-      }),
-      fieldName: AgentExplorerFieldName.ServiceName,
+      label: serviceLabel,
+      fieldName: serviceLabel,
      val: (
        <TruncateWithTooltip
          data-test-subj="apmAgentExplorerListServiceLink"
@ -66,10 +91,8 @@ export function AgentContextualInformation({
      width: '25%',
    },
    {
-      label: i18n.translate('xpack.apm.agentInstancesDetails.agentNameLabel', {
-        defaultMessage: 'Agent Name',
-      }),
-      fieldName: AgentExplorerFieldName.AgentName,
+      label: agentNameLabel,
+      fieldName: agentNameLabel,
      val: (
        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
          <EuiFlexItem className="eui-textTruncate">
@ -80,10 +103,8 @@ export function AgentContextualInformation({
      width: '25%',
    },
    {
-      label: i18n.translate('xpack.apm.agentInstancesDetails.intancesLabel', {
-        defaultMessage: 'Instances',
-      }),
-      fieldName: 'instances',
+      label: instancesLabel,
+      fieldName: instancesLabel,
      val: (
        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
          <EuiFlexItem className="eui-textTruncate">
@ -94,13 +115,8 @@ export function AgentContextualInformation({
      width: '25%',
    },
    {
-      label: i18n.translate(
-        'xpack.apm.agentInstancesDetails.agentDocsUrlLabel',
-        {
-          defaultMessage: 'Agent documentation',
-        }
-      ),
-      fieldName: AgentExplorerFieldName.AgentDocsPageUrl,
+      label: agentDocsLabel,
+      fieldName: agentDocsLabel,
      val: (
        <TruncateWithTooltip
          data-test-subj="apmAgentExplorerListDocsLink"
--- a/x-pack/plugins/apm/public/components/app/settings/agent_explorer/agent_instances/agent_instances_details/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/settings/agent_explorer/agent_instances/agent_instances_details/index.tsx
@ -5,7 +5,12 @@
 * 2.0.
 */

-import { EuiLink, EuiLoadingContent, EuiText } from '@elastic/eui';
+import {
+  EuiBasicTableColumn,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiText,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
@ -22,10 +27,6 @@ import { unit } from '../../../../../../utils/style';
 import { EnvironmentBadge } from '../../../../../shared/environment_badge';
 import { ItemsBadge } from '../../../../../shared/item_badge';
 import { ServiceNodeMetricOverviewLink } from '../../../../../shared/links/apm/service_node_metric_overview_link';
-import {
-  ITableColumn,
-  ManagedTable,
-} from '../../../../../shared/managed_table';
 import { PopoverTooltip } from '../../../../../shared/popover_tooltip';
 import { TimestampTooltip } from '../../../../../shared/timestamp_tooltip';
 import { TruncateWithTooltip } from '../../../../../shared/truncate_with_tooltip';
@ -45,7 +46,7 @@ export function getInstanceColumns(
  serviceName: string,
  agentName: AgentName,
  agentDocsPageUrl?: string
-): Array<ITableColumn<AgentExplorerInstance>> {
+): Array<EuiBasicTableColumn<AgentExplorerInstance>> {
  return [
    {
      field: AgentExplorerInstanceFieldName.InstanceName,
@ -190,28 +191,28 @@ export function AgentInstancesDetails({
  items,
  isLoading,
 }: Props) {
-  if (isLoading) {
-    return (
-      <div style={{ width: '50%' }}>
-        <EuiLoadingContent data-test-subj="loadingSpinner" />
-      </div>
-    );
-  }
-
  return (
-    <ManagedTable
-      columns={getInstanceColumns(serviceName, agentName, agentDocsPageUrl)}
-      items={items}
-      noItemsMessage={i18n.translate(
-        'xpack.apm.agentExplorer.table.noResults',
-        {
-          defaultMessage: 'No data found',
+    <>
+      <EuiInMemoryTable
+        items={items}
+        columns={getInstanceColumns(serviceName, agentName, agentDocsPageUrl)}
+        pagination={true}
+        sorting={{
+          sort: {
+            field: AgentExplorerFieldName.AgentVersion,
+            direction: 'desc',
+          },
+        }}
+        message={
+          isLoading
+            ? i18n.translate('xpack.apm.agentInstanceDetails.table.loading', {
+                defaultMessage: 'Loading...',
+              })
+            : i18n.translate('xpack.apm.agentInstanceDetails.table.noResults', {
+                defaultMessage: 'No data found',
+              })
        }
-      )}
-      initialSortField={AgentExplorerFieldName.AgentVersion}
-      initialSortDirection="desc"
-      isLoading={isLoading}
-      initialPageSize={25}
-    />
+      />
+    </>
  );
 }
--- a/x-pack/plugins/apm/public/components/app/settings/agent_explorer/agent_list/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/settings/agent_explorer/agent_list/index.tsx
@ -17,7 +17,6 @@ import { ValuesType } from 'utility-types';
 import { AgentExplorerFieldName } from '../../../../../../common/agent_explorer';
 import { AgentName } from '../../../../../../typings/es_schemas/ui/fields/agent';
 import { APIReturnType } from '../../../../../services/rest/create_call_apm_api';
-import { unit } from '../../../../../utils/style';
 import { AgentIcon } from '../../../../shared/agent_icon';
 import { EnvironmentBadge } from '../../../../shared/environment_badge';
 import { ItemsBadge } from '../../../../shared/item_badge';
@ -41,7 +40,7 @@ export function getAgentsColumns({
    {
      field: AgentExplorerFieldName.ServiceName,
      name: '',
-      width: `${unit * 3}px`,
+      width: '5%',
      render: (_, agent) => {
        const isSelected = selectedAgent === agent;

@ -78,6 +77,8 @@ export function getAgentsColumns({
        }
      ),
      sortable: true,
+      width: '35%',
+      truncateText: true,
      render: (_, { serviceName, agentName }) => (
        <TruncateWithTooltip
          data-test-subj="apmAgentExplorerListServiceLink"
@ -103,7 +104,8 @@ export function getAgentsColumns({
          defaultMessage: 'Environment',
        }
      ),
-      width: `${unit * 16}px`,
+      width: '15%',
+      truncateText: true,
      sortable: true,
      render: (_, { environments }) => (
        <EnvironmentBadge environments={environments} />
@ -117,12 +119,12 @@ export function getAgentsColumns({
          defaultMessage: 'Instances',
        }
      ),
-      width: `${unit * 8}px`,
+      width: '10%',
      sortable: true,
    },
    {
      field: AgentExplorerFieldName.AgentName,
-      width: `${unit * 12}px`,
+      width: '15%',
      name: i18n.translate(
        'xpack.apm.agentExplorerTable.agentNameColumnLabel',
        { defaultMessage: 'Agent Name' }
@ -135,7 +137,8 @@ export function getAgentsColumns({
        'xpack.apm.agentExplorerTable.agentVersionColumnLabel',
        { defaultMessage: 'Agent Version' }
      ),
-      width: `${unit * 8}px`,
+      width: '10%',
+      truncateText: true,
      render: (_, { agentVersion }) => (
        <ItemsBadge
          items={agentVersion}
@ -156,7 +159,8 @@ export function getAgentsColumns({
        'xpack.apm.agentExplorerTable.agentDocsColumnLabel',
        { defaultMessage: 'Agent Docs' }
      ),
-      width: `${unit * 8}px`,
+      width: '10%',
+      truncateText: true,
      render: (_, { agentName, agentDocsPageUrl }) => (
        <EuiToolTip content={`${agentName} agent docs`}>
          <AgentExplorerDocsLink
--- a/x-pack/plugins/apm/public/components/app/settings/agent_explorer/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/settings/agent_explorer/index.tsx
@ -99,7 +99,7 @@ export function AgentExplorer() {
      <EuiSpacer size="s" />
      <EuiFlexItem grow={false}>
        <EuiTitle>
-          <EuiFlexGroup gutterSize="s">
+          <EuiFlexGroup gutterSize="s" responsive={false}>
            <EuiFlexItem grow={false}>
              <h2>
                {i18n.translate('xpack.apm.settings.agentExplorer.title', {
@ -117,9 +117,9 @@ export function AgentExplorer() {
      <EuiFlexItem grow={false}>
        <KueryBar />
      </EuiFlexItem>
-      <EuiSpacer />
+      <EuiSpacer size="xs" />
      <EuiFlexItem>
-        <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexGroup justifyContent="flexEnd" responsive={true}>
          <EuiFlexItem grow={false}>
            <SuggestionsSelect
              prepend={i18n.translate(