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,56 @@
+/*
+ * 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,
+  EuiListGroupItem,
+  EuiPopoverProps,
+} from '@elastic/eui';
+
+import React, { HTMLAttributes } from 'react';
+import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group/list_group_item';
+
+type Props = EuiPopoverProps & HTMLAttributes<HTMLDivElement>;
+
+export const SectionTitle: React.FC<{}> = props => (
+  <>
+    <EuiText size={'s'} grow={false}>
+      <h5>{props.children}</h5>
+    </EuiText>
+    <EuiSpacer size={'s'} />
+  </>
+);
+
+export const SectionSubtitle: React.FC<{}> = props => (
+  <>
+    <EuiText size={'xs'} color={'subdued'} grow={false}>
+      <small>{props.children}</small>
+    </EuiText>
+    <EuiSpacer size={'s'} />
+  </>
+);
+
+export const SectionLinks: React.FC<{}> = props => (
+  <EuiListGroup flush={true} bordered={false}>
+    {props.children}
+  </EuiListGroup>
+);
+
+export const SectionSpacer: React.FC<{}> = () => <EuiSpacer size={'l'} />;
+
+export const Section: React.FC<{}> = props => <>{props.children}</>;
+
+export const SectionLink: React.FC<EuiListGroupItemProps> = props => (
+  <EuiListGroupItem style={{ padding: 0 }} size={'s'} {...props} />
+);
+
+export const ActionMenuDivider: React.FC<{}> = props => <EuiHorizontalRule margin={'s'} />;
+
+export const ActionMenu: React.FC<Props> = props => <EuiPopover {...props} />;

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

@@ -4,21 +4,26 @@
  * 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 { FormattedMessage } from '@kbn/i18n/react';
 
 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,
+  Section,
+  SectionTitle,
+  SectionSubtitle,
+  SectionLinks,
+  SectionLink,
+} from './action_menu';
 
 interface Props {
   options: InfraWaffleMapOptions;
@@ -43,83 +48,116 @@ 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
       closePopover={closePopover}
       id={`${node.pathId}-popover`}
       isOpen={isPopoverOpen}
       button={children}
-      panelPaddingSize="none"
       anchorPosition={popoverPosition}
     >
-      <EuiContextMenu initialPanelId={0} panels={panels} data-test-subj="nodeContextMenu" />
-    </EuiPopover>
+      <Section>
+        <SectionTitle>
+          <FormattedMessage
+            id={'xpack.infra.nodeContextMenu.title'}
+            defaultMessage={'{inventoryName} details'}
+            values={{ inventoryName: inventoryModel.singularDisplayName }}
+          />
+        </SectionTitle>
+        <SectionSubtitle>
+          <FormattedMessage
+            id={'xpack.infra.nodeContextMenu.description'}
+            defaultMessage={
+              'View logs, metrics and traces of this {inventoryName} to get further details'
+            }
+            values={{ inventoryName: inventoryModel.singularDisplayName }}
+          />
+        </SectionSubtitle>
+        <SectionLinks>
+          <SectionLink
+            label={nodeLogsMenuItem.label}
+            href={nodeLogsMenuItem.href}
+            isDisabled={nodeLogsMenuItem.isDisabled}
+          />
+          <SectionLink
+            label={nodeDetailMenuItem.label}
+            href={nodeDetailMenuItem.href}
+            isDisabled={nodeDetailMenuItem.isDisabled}
+          />
+          <SectionLink
+            label={apmTracesMenuItem.label}
+            href={apmTracesMenuItem.href}
+            isDisabled={apmTracesMenuItem.isDisabled}
+          />
+          <SectionLink
+            label={uptimeMenuItem.label}
+            href={uptimeMenuItem.href}
+            isDisabled={uptimeMenuItem.isDisabled}
+          />
+        </SectionLinks>
+      </Section>
+    </ActionMenu>
   );
 };