Create a new menu for observability links

x-pack/legacy/plugins/infra/common/inventory_models/aws_ec2/index.ts

@@ -13,6 +13,9 @@ export const awsEC2: InventoryModel = {
   displayName: i18n.translate('xpack.infra.inventoryModels.awsEC2.displayName', {
     defaultMessage: 'EC2 Instances',
   }),
+  singularDisplayName: i18n.translate('xpack.infra.inventoryModels.awsEC2.singularDisplayName', {
+    defaultMessage: 'EC2 Instance',
+  }),
   requiredModule: 'aws',
   crosslinkSupport: {
     details: true,

x-pack/legacy/plugins/infra/common/inventory_models/aws_rds/index.ts

@@ -13,6 +13,9 @@ export const awsRDS: InventoryModel = {
   displayName: i18n.translate('xpack.infra.inventoryModels.awsRDS.displayName', {
     defaultMessage: 'RDS Databases',
   }),
+  singularDisplayName: i18n.translate('xpack.infra.inventoryModels.awsRDS.singularDisplayName', {
+    defaultMessage: 'RDS Database',
+  }),
   requiredModule: 'aws',
   crosslinkSupport: {
     details: true,

x-pack/legacy/plugins/infra/common/inventory_models/aws_s3/index.ts

@@ -13,6 +13,9 @@ export const awsS3: InventoryModel = {
   displayName: i18n.translate('xpack.infra.inventoryModels.awsS3.displayName', {
     defaultMessage: 'S3 Buckets',
   }),
+  singularDisplayName: i18n.translate('xpack.infra.inventoryModels.awsS3.singularDisplayName', {
+    defaultMessage: 'S3 Bucket',
+  }),
   requiredModule: 'aws',
   crosslinkSupport: {
     details: true,

x-pack/legacy/plugins/infra/common/inventory_models/aws_sqs/index.ts

@@ -13,6 +13,9 @@ export const awsSQS: InventoryModel = {
   displayName: i18n.translate('xpack.infra.inventoryModels.awsSQS.displayName', {
     defaultMessage: 'SQS Queues',
   }),
+  singularDisplayName: i18n.translate('xpack.infra.inventoryModels.awsSQS.singularDisplayName', {
+    defaultMessage: 'SQS Queue',
+  }),
   requiredModule: 'aws',
   crosslinkSupport: {
     details: true,

x-pack/legacy/plugins/infra/common/inventory_models/container/index.ts

@@ -13,6 +13,9 @@ export const container: InventoryModel = {
   displayName: i18n.translate('xpack.infra.inventoryModel.container.displayName', {
     defaultMessage: 'Docker Containers',
   }),
+  singularDisplayName: i18n.translate('xpack.infra.inventoryModel.container.singularDisplayName', {
+    defaultMessage: 'Docker Container',
+  }),
   requiredModule: 'docker',
   crosslinkSupport: {
     details: true,

x-pack/legacy/plugins/infra/common/inventory_models/host/index.ts

@@ -17,6 +17,9 @@ export const host: InventoryModel = {
   displayName: i18n.translate('xpack.infra.inventoryModel.host.displayName', {
     defaultMessage: 'Hosts',
   }),
+  singularDisplayName: i18n.translate('xpack.infra.inventoryModels.host.singularDisplayName', {
+    defaultMessage: 'Host',
+  }),
   requiredModule: 'system',
   crosslinkSupport: {
     details: true,

x-pack/legacy/plugins/infra/common/inventory_models/pod/index.ts

@@ -14,6 +14,9 @@ export const pod: InventoryModel = {
   displayName: i18n.translate('xpack.infra.inventoryModel.pod.displayName', {
     defaultMessage: 'Kubernetes Pods',
   }),
+  singularDisplayName: i18n.translate('xpack.infra.inventoryModels.pod.singularDisplayName', {
+    defaultMessage: 'Kubernetes Pod',
+  }),
   requiredModule: 'kubernetes',
   crosslinkSupport: {
     details: true,

x-pack/legacy/plugins/infra/common/inventory_models/types.ts

@@ -320,6 +320,7 @@ export interface InventoryMetrics {
 export interface InventoryModel {
   id: string;
   displayName: string;
+  singularDisplayName: string;
   requiredModule: string;
   fields: {
     id: string;

x-pack/legacy/plugins/infra/public/components/waffle/action_menu.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  EuiPopover,
+  EuiText,
+  EuiListGroup,
+  EuiSpacer,
+  EuiHorizontalRule,
+  PopoverAnchorPosition,
+} from '@elastic/eui';
+
+import React, { useCallback, ReactNode } from 'react';
+import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group/list_group_item';
+
+interface Props {
+  sections: Section[];
+  otherLinks?: EuiListGroupItemProps[];
+
+  button: NonNullable<ReactNode>;
+  anchorPosition?: PopoverAnchorPosition;
+  id?: string;
+  isOpen?: boolean;
+  closePopover(): void;
+}
+
+interface Section {
+  title: string;
+  description: string;
+  links: EuiListGroupItemProps[];
+}
+
+export const ActionMenu = (props: Props) => {
+  const { closePopover, button, anchorPosition, isOpen, id, sections, otherLinks } = props;
+
+  const linkWithDefaults = useCallback((link: EuiListGroupItemProps) => {
+    link.style = { ...link.style, padding: 0 };
+    link.size = link.size || 's';
+    return link;
+  }, []);
+
+  return (
+    <EuiPopover
+      closePopover={closePopover}
+      id={id}
+      isOpen={isOpen}
+      button={button}
+      anchorPosition={anchorPosition}
+    >
+      <>
+        {sections.map((s, idx) => (
+          <React.Fragment key={s.title}>
+            <EuiText size={'s'} grow={false}>
+              <h5>{s.title}</h5>
+            </EuiText>
+            <EuiSpacer size={'s'} />
+            <EuiText size={'xs'} color={'subdued'} grow={false}>
+              <small>{s.description}</small>
+            </EuiText>
+            <EuiSpacer size={'s'} />
+            <EuiListGroup
+              flush={true}
+              bordered={false}
+              listItems={s.links.map(l => linkWithDefaults(l))}
+            />
+            {idx !== sections.length - 1 && <EuiSpacer size={'l'} />}
+          </React.Fragment>
+        ))}
+        {otherLinks?.length && (
+          <div>
+            <EuiHorizontalRule margin={'s'} />
+            <EuiListGroup
+              flush={true}
+              bordered={false}
+              listItems={otherLinks.map(l => linkWithDefaults(l))}
+            />
+          </div>
+        )}
+      </>
+    </EuiPopover>
+  );
+};

x-pack/legacy/plugins/infra/public/components/waffle/node_context_menu.tsx

@@ -4,21 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiContextMenu,
-  EuiContextMenuPanelDescriptor,
-  EuiPopover,
-  EuiPopoverProps,
-} from '@elastic/eui';
+import { EuiPopoverProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import React from 'react';
+import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group/list_group_item';
 import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../lib/lib';
 import { getNodeDetailUrl, getNodeLogsUrl } from '../../pages/link_to';
 import { createUptimeLink } from './lib/create_uptime_link';
 import { findInventoryModel } from '../../../common/inventory_models';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { InventoryItemType } from '../../../common/inventory_models/types';
+import { ActionMenu } from './action_menu';
 
 interface Props {
   options: InfraWaffleMapOptions;
@@ -43,83 +40,89 @@ export const NodeContextMenu = ({
 }: Props) => {
   const uiCapabilities = useKibana().services.application?.capabilities;
   const inventoryModel = findInventoryModel(nodeType);
+  const nodeDetailFrom = currentTime - inventoryModel.metrics.defaultTimeRangeInSeconds * 1000;
   // Due to the changing nature of the fields between APM and this UI,
   // We need to have some exceptions until 7.0 & ECS is finalized. Reference
   // #26620 for the details for these fields.
   // TODO: This is tech debt, remove it after 7.0 & ECS migration.
   const apmField = nodeType === 'host' ? 'host.hostname' : inventoryModel.fields.id;
 
-  const nodeLogsMenuItem = {
-    name: i18n.translate('xpack.infra.nodeContextMenu.viewLogsName', {
-      defaultMessage: 'View logs',
+  const showDetail = inventoryModel.crosslinkSupport.details;
+  const showLogsLink =
+    inventoryModel.crosslinkSupport.logs && node.id && uiCapabilities?.logs?.show;
+  const showAPMTraceLink =
+    inventoryModel.crosslinkSupport.apm && uiCapabilities?.apm && uiCapabilities?.apm.show;
+  const showUptimeLink =
+    inventoryModel.crosslinkSupport.uptime && (['pod', 'container'].includes(nodeType) || node.ip);
+
+  const nodeLogsMenuItem: EuiListGroupItemProps = {
+    label: i18n.translate('xpack.infra.nodeContextMenu.viewLogsName', {
+      defaultMessage: '{inventoryName} logs',
+      values: { inventoryName: inventoryModel.singularDisplayName },
     }),
     href: getNodeLogsUrl({
       nodeType,
       nodeId: node.id,
       time: currentTime,
     }),
     'data-test-subj': 'viewLogsContextMenuItem',
+    isDisabled: !showLogsLink,
   };
 
-  const nodeDetailFrom = currentTime - inventoryModel.metrics.defaultTimeRangeInSeconds * 1000;
-  const nodeDetailMenuItem = {
-    name: i18n.translate('xpack.infra.nodeContextMenu.viewMetricsName', {
-      defaultMessage: 'View metrics',
+  const nodeDetailMenuItem: EuiListGroupItemProps = {
+    label: i18n.translate('xpack.infra.nodeContextMenu.viewMetricsName', {
+      defaultMessage: '{inventoryName} metrics',
+      values: { inventoryName: inventoryModel.singularDisplayName },
     }),
     href: getNodeDetailUrl({
       nodeType,
       nodeId: node.id,
       from: nodeDetailFrom,
       to: currentTime,
     }),
+    isDisabled: !showDetail,
   };
 
-  const apmTracesMenuItem = {
-    name: i18n.translate('xpack.infra.nodeContextMenu.viewAPMTraces', {
-      defaultMessage: 'View APM traces',
+  const apmTracesMenuItem: EuiListGroupItemProps = {
+    label: i18n.translate('xpack.infra.nodeContextMenu.viewAPMTraces', {
+      defaultMessage: '{inventoryName} APM traces',
+      values: { inventoryName: inventoryModel.singularDisplayName },
     }),
     href: `../app/apm#/traces?_g=()&kuery=${apmField}:"${node.id}"`,
     'data-test-subj': 'viewApmTracesContextMenuItem',
+    isDisabled: !showAPMTraceLink,
   };
 
-  const uptimeMenuItem = {
-    name: i18n.translate('xpack.infra.nodeContextMenu.viewUptimeLink', {
-      defaultMessage: 'View in Uptime',
+  const uptimeMenuItem: EuiListGroupItemProps = {
+    label: i18n.translate('xpack.infra.nodeContextMenu.viewUptimeLink', {
+      defaultMessage: '{inventoryName} in Uptime',
+      values: { inventoryName: inventoryModel.singularDisplayName },
     }),
     href: createUptimeLink(options, nodeType, node),
+    isDisabled: !showUptimeLink,
   };
 
-  const showDetail = inventoryModel.crosslinkSupport.details;
-  const showLogsLink =
-    inventoryModel.crosslinkSupport.logs && node.id && uiCapabilities?.logs?.show;
-  const showAPMTraceLink =
-    inventoryModel.crosslinkSupport.apm && uiCapabilities?.apm && uiCapabilities?.apm.show;
-  const showUptimeLink =
-    inventoryModel.crosslinkSupport.uptime && (['pod', 'container'].includes(nodeType) || node.ip);
-
-  const items = [
-    ...(showLogsLink ? [nodeLogsMenuItem] : []),
-    ...(showDetail ? [nodeDetailMenuItem] : []),
-    ...(showAPMTraceLink ? [apmTracesMenuItem] : []),
-    ...(showUptimeLink ? [uptimeMenuItem] : []),
-  ];
-  const panels: EuiContextMenuPanelDescriptor[] = [{ id: 0, title: '', items }];
-
-  // If there is nothing to show then we need to return the child as is
-  if (items.length === 0) {
-    return <>{children}</>;
-  }
-
   return (
-    <EuiPopover
+    <ActionMenu
+      sections={[
+        {
+          title: i18n.translate('xpack.infra.nodeContextMenu.title', {
+            defaultMessage: '{inventoryName} details',
+            values: { inventoryName: inventoryModel.singularDisplayName },
+          }),
+          description: i18n.translate('xpack.infra.nodeContextMenu.description', {
+            defaultMessage:
+              'View logs, metrics and traces of this {inventoryName} to get further details',
+            values: { inventoryName: inventoryModel.singularDisplayName },
+          }),
+          links: [nodeLogsMenuItem, nodeDetailMenuItem, apmTracesMenuItem, uptimeMenuItem],
+        },
+      ]}
       closePopover={closePopover}
       id={`${node.pathId}-popover`}
       isOpen={isPopoverOpen}
       button={children}
-      panelPaddingSize="none"
       anchorPosition={popoverPosition}
-    >
-      <EuiContextMenu initialPanelId={0} panels={panels} data-test-subj="nodeContextMenu" />
-    </EuiPopover>
+    />
   );
 };