[APM] Service overview: Instances table metadata foldout

x-pack/plugins/apm/common/elasticsearch_fieldnames.ts

@@ -10,6 +10,9 @@ export const CLOUD_AVAILABILITY_ZONE = 'cloud.availability_zone';
 export const CLOUD_PROVIDER = 'cloud.provider';
 export const CLOUD_REGION = 'cloud.region';
 export const CLOUD_MACHINE_TYPE = 'cloud.machine.type';
+export const CLOUD_ACCOUNT_ID = 'cloud.account.id';
+export const CLOUD_INSTANCE_ID = 'cloud.instance.id';
+export const CLOUD_INSTANCE_NAME = 'cloud.instance.name';
 
 export const SERVICE = 'service';
 export const SERVICE_NAME = 'service.name';

x-pack/plugins/apm/public/components/app/service_details/service_icons/index.tsx

@@ -30,13 +30,13 @@ const cloudIcons: Record<string, string> = {
   azure: 'logoAzure',
 };
 
-function getCloudIcon(provider?: string) {
+export function getCloudIcon(provider?: string) {
   if (provider) {
     return cloudIcons[provider];
   }
 }
 
-function getContainerIcon(container?: ContainerType) {
+export function getContainerIcon(container?: ContainerType) {
   if (!container) {
     return;
   }

x-pack/plugins/apm/public/components/app/service_overview/index.tsx

@@ -119,7 +119,7 @@ export function ServiceOverview({
             {!isRumAgent && (
               <EuiFlexItem>
                 <EuiFlexGroup
-                  direction={rowDirection}
+                  direction="column"
                   gutterSize="s"
                   responsive={false}
                 >

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx

@@ -5,11 +5,16 @@
  * 2.0.
  */
 
-import { EuiBasicTableColumn } from '@elastic/eui';
+import {
+  EuiBasicTableColumn,
+  EuiButtonIcon,
+  RIGHT_ALIGNMENT,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
-import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
+import React, { ReactNode } from 'react';
+import { ActionMenu } from '../../../../../../observability/public';
 import { isJavaAgentName } from '../../../../../common/agent_name';
+import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
 import {
   getServiceNodeName,
   SERVICE_NODE_NAME_MISSING,
@@ -26,6 +31,7 @@ import { MetricOverviewLink } from '../../../shared/Links/apm/MetricOverviewLink
 import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { getLatencyColumnLabel } from '../get_latency_column_label';
+import { InstanceActionsMenu } from './instance_actions_menu';
 import { MainStatsServiceInstanceItem } from '../service_overview_instances_chart_and_table';
 
 type ServiceInstanceDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/detailed_statistics'>;
@@ -36,12 +42,20 @@ export function getColumns({
   latencyAggregationType,
   detailedStatsData,
   comparisonEnabled,
+  toggleRowDetails,
+  itemIdToExpandedRowMap,
+  toggleRowActionMenu,
+  itemIdToOpenActionMenuRowMap,
 }: {
   serviceName: string;
   agentName?: string;
   latencyAggregationType?: LatencyAggregationType;
   detailedStatsData?: ServiceInstanceDetailedStatistics;
   comparisonEnabled?: boolean;
+  toggleRowDetails: (selectedServiceNodeName: string) => void;
+  itemIdToExpandedRowMap: Record<string, ReactNode>;
+  toggleRowActionMenu: (selectedServiceNodeName: string) => void;
+  itemIdToOpenActionMenuRowMap: Record<string, boolean>;
 }): Array<EuiBasicTableColumn<MainStatsServiceInstanceItem>> {
   return [
     {
@@ -82,7 +96,7 @@ export function getColumns({
       sortable: true,
     },
     {
-      field: 'latencyValue',
+      field: 'latency',
       name: getLatencyColumnLabel(latencyAggregationType),
       width: px(unit * 10),
       render: (_, { serviceNodeName, latency }) => {
@@ -104,7 +118,7 @@ export function getColumns({
       sortable: true,
     },
     {
-      field: 'throughputValue',
+      field: 'throughput',
       name: i18n.translate(
         'xpack.apm.serviceOverview.instancesTableColumnThroughput',
         { defaultMessage: 'Throughput' }
@@ -130,7 +144,7 @@ export function getColumns({
       sortable: true,
     },
     {
-      field: 'errorRateValue',
+      field: 'errorRate',
       name: i18n.translate(
         'xpack.apm.serviceOverview.instancesTableColumnErrorRate',
         { defaultMessage: 'Error rate' }
@@ -156,7 +170,7 @@ export function getColumns({
       sortable: true,
     },
     {
-      field: 'cpuUsageValue',
+      field: 'cpuUsage',
       name: i18n.translate(
         'xpack.apm.serviceOverview.instancesTableColumnCpuUsage',
         { defaultMessage: 'CPU usage (avg.)' }
@@ -182,7 +196,7 @@ export function getColumns({
       sortable: true,
     },
     {
-      field: 'memoryUsageValue',
+      field: 'memoryUsage',
       name: i18n.translate(
         'xpack.apm.serviceOverview.instancesTableColumnMemoryUsage',
         { defaultMessage: 'Memory usage (avg.)' }
@@ -207,5 +221,56 @@ export function getColumns({
       },
       sortable: true,
     },
+    {
+      width: '40px',
+      render: (instanceItem: MainStatsServiceInstanceItem) => {
+        return (
+          <ActionMenu
+            id="instanceActionMenu"
+            closePopover={() =>
+              toggleRowActionMenu(instanceItem.serviceNodeName)
+            }
+            isOpen={itemIdToOpenActionMenuRowMap[instanceItem.serviceNodeName]}
+            anchorPosition="leftCenter"
+            button={
+              <EuiButtonIcon
+                iconType="boxesHorizontal"
+                onClick={() =>
+                  toggleRowActionMenu(instanceItem.serviceNodeName)
+                }
+              />
+            }
+          >
+            <InstanceActionsMenu
+              serviceName={serviceName}
+              serviceNodeName={instanceItem.serviceNodeName}
+              onClose={() => toggleRowActionMenu(instanceItem.serviceNodeName)}
+            />
+          </ActionMenu>
+        );
+      },
+    },
+    {
+      align: RIGHT_ALIGNMENT,
+      width: '40px',
+      isExpander: true,
+      render: (instanceItem: MainStatsServiceInstanceItem) => {
+        return (
+          <EuiButtonIcon
+            onClick={() => toggleRowDetails(instanceItem.serviceNodeName)}
+            aria-label={
+              itemIdToExpandedRowMap[instanceItem.serviceNodeName]
+                ? 'Collapse'
+                : 'Expand'
+            }
+            iconType={
+              itemIdToExpandedRowMap[instanceItem.serviceNodeName]
+                ? 'arrowUp'
+                : 'arrowDown'
+            }
+          />
+        );
+      },
+    },
   ];
 }

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx

@@ -12,7 +12,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
@@ -26,6 +26,7 @@ import {
 } from '../service_overview_instances_chart_and_table';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
 import { getColumns } from './get_columns';
+import { InstanceDetails } from './intance_details';
 
 type ServiceInstanceDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/detailed_statistics'>;
 
@@ -65,15 +66,58 @@ export function ServiceOverviewInstancesTable({
     urlParams: { latencyAggregationType, comparisonEnabled },
   } = useUrlParams();
 
+  const [
+    itemIdToOpenActionMenuRowMap,
+    setItemIdToOpenActionMenuRowMap,
+  ] = useState<Record<string, boolean>>({});
+
+  const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<
+    Record<string, ReactNode>
+  >({});
+
+  useEffect(() => {
+    // Closes any open rows when fetching new items
+    setItemIdToExpandedRowMap({});
+  }, [status]);
+
   const { pageIndex, sort } = tableOptions;
   const { direction, field } = sort;
 
+  const toggleRowActionMenu = (selectedServiceNodeName: string) => {
+    const actionMenuRowMapValues = { ...itemIdToOpenActionMenuRowMap };
+    if (actionMenuRowMapValues[selectedServiceNodeName]) {
+      delete actionMenuRowMapValues[selectedServiceNodeName];
+    } else {
+      actionMenuRowMapValues[selectedServiceNodeName] = true;
+    }
+    setItemIdToOpenActionMenuRowMap(actionMenuRowMapValues);
+  };
+
+  const toggleRowDetails = (selectedServiceNodeName: string) => {
+    const expandedRowMapValues = { ...itemIdToExpandedRowMap };
+    if (expandedRowMapValues[selectedServiceNodeName]) {
+      delete expandedRowMapValues[selectedServiceNodeName];
+    } else {
+      expandedRowMapValues[selectedServiceNodeName] = (
+        <InstanceDetails
+          serviceNodeName={selectedServiceNodeName}
+          serviceName={serviceName}
+        />
+      );
+    }
+    setItemIdToExpandedRowMap(expandedRowMapValues);
+  };
+
   const columns = getColumns({
     agentName,
     serviceName,
     latencyAggregationType,
     detailedStatsData,
     comparisonEnabled,
+    toggleRowDetails,
+    itemIdToExpandedRowMap,
+    toggleRowActionMenu,
+    itemIdToOpenActionMenuRowMap,
   });
 
   const pagination = {
@@ -106,6 +150,8 @@ export function ServiceOverviewInstancesTable({
               pagination={pagination}
               sorting={{ sort: { field, direction } }}
               onChange={onChangeTableOptions}
+              itemId="serviceNodeName"
+              itemIdToExpandedRowMap={itemIdToExpandedRowMap}
             />
           </ServiceOverviewTableContainer>
         </TableFetchWrapper>