[Metrics UI] Add APM, uptime and create alert links to overlay (elast…

…ic#87883) * Add APM, uptime and create alert links to overlay * Remove unused i18n
phillipb · Jan 12, 2021 · c6f4ef4 · c6f4ef4
1 parent c4f7976
commit c6f4ef4
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 10 deletions.
diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/alert_flyout.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/alert_flyout.tsx
@@ -18,7 +18,7 @@ interface Props {
   options?: Partial<InfraWaffleMapOptions>;
   nodeType?: InventoryItemType;
   filter?: string;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  setVisible(val: boolean): void;
 }
 
 export const AlertFlyout = ({ options, nodeType, filter, visible, setVisible }: Props) => {

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
@@ -9,6 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useMemo, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { EuiOutsideClickDetector } from '@elastic/eui';
+import { EuiIcon, EuiButtonIcon } from '@elastic/eui';
 import { euiStyled } from '../../../../../../../observability/public';
 import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../../../../lib/lib';
 import { InventoryItemType } from '../../../../../../common/inventory_models/types';
@@ -20,6 +21,7 @@ import { OVERLAY_Y_START, OVERLAY_BOTTOM_MARGIN } from './tabs/shared';
 import { useLinkProps } from '../../../../../hooks/use_link_props';
 import { getNodeDetailUrl } from '../../../../link_to';
 import { findInventoryModel } from '../../../../../../common/inventory_models';
+import { createUptimeLink } from '../../lib/create_uptime_link';
 
 interface Props {
   isOpen: boolean;
@@ -28,6 +30,7 @@ interface Props {
   currentTime: number;
   node: InfraWaffleMapNode;
   nodeType: InventoryItemType;
+  openAlertFlyout(): void;
 }
 export const NodeContextPopover = ({
   isOpen,
@@ -36,6 +39,7 @@ export const NodeContextPopover = ({
   currentTime,
   options,
   onClose,
+  openAlertFlyout,
 }: Props) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const tabConfigs = [MetricsTab, LogsTab, ProcessesTab, PropertiesTab];
@@ -64,6 +68,15 @@ export const NodeContextPopover = ({
       to: currentTime,
     }),
   });
+  const apmField = nodeType === 'host' ? 'host.hostname' : inventoryModel.fields.id;
+  const apmTracesMenuItemLinkProps = useLinkProps({
+    app: 'apm',
+    hash: 'traces',
+    search: {
+      kuery: `${apmField}:"${node.id}"`,
+    },
+  });
+  const uptimeMenuItemLinkProps = useLinkProps(createUptimeLink(options, nodeType, node));
 
   if (!isOpen) {
     return null;
@@ -82,6 +95,20 @@ export const NodeContextPopover = ({
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup gutterSize="m" responsive={false}>
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonEmpty
+                      onClick={openAlertFlyout}
+                      size="xs"
+                      iconSide={'left'}
+                      flush="both"
+                      iconType="bell"
+                    >
+                      <FormattedMessage
+                        id="xpack.infra.infra.nodeDetails.createAlertLink"
+                        defaultMessage="Create alert"
+                      />
+                    </EuiButtonEmpty>
+                  </EuiFlexItem>
                   <EuiFlexItem grow={false}>
                     <EuiButtonEmpty
                       size="xs"
@@ -97,12 +124,7 @@ export const NodeContextPopover = ({
                     </EuiButtonEmpty>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty size="xs" onClick={onClose} iconType="cross" flush="both">
-                      <FormattedMessage
-                        id="xpack.infra.infra.nodeDetails.close"
-                        defaultMessage="Close"
-                      />
-                    </EuiButtonEmpty>
+                    <EuiButtonIcon size="s" onClick={onClose} iconType="cross" />
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
@@ -118,6 +140,20 @@ export const NodeContextPopover = ({
                   {tab.name}
                 </EuiTab>
               ))}
+              <EuiTab {...apmTracesMenuItemLinkProps}>
+                <EuiIcon type="popout" />{' '}
+                <FormattedMessage
+                  id="xpack.infra.infra.nodeDetails.apmTabLabel"
+                  defaultMessage="APM"
+                />
+              </EuiTab>
+              <EuiTab {...uptimeMenuItemLinkProps}>
+                <EuiIcon type="popout" />{' '}
+                <FormattedMessage
+                  id="xpack.infra.infra.nodeDetails.updtimeTabLabel"
+                  defaultMessage="Uptime"
+                />
+              </EuiTab>
             </EuiTabs>
           </OverlayHeader>
           {tabs[selectedTab].content}

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx
@@ -22,10 +22,13 @@ import { InventoryItemType } from '../../../../../../common/inventory_models/typ
 import { NodeContextPopover } from '../node_details/overlay';
 
 import { NodeContextMenu } from './node_context_menu';
+import { AlertFlyout } from '../../../../../alerting/inventory/components/alert_flyout';
+import { findInventoryFields } from '../../../../../../common/inventory_models';
 
 const initialState = {
   isPopoverOpen: false,
   isOverlayOpen: false,
+  isAlertFlyoutVisible: false,
 };
 
 type State = Readonly<typeof initialState>;
@@ -44,7 +47,7 @@ export const Node = class extends React.PureComponent<Props, State> {
   public readonly state: State = initialState;
   public render() {
     const { nodeType, node, options, squareSize, bounds, formatter, currentTime } = this.props;
-    const { isPopoverOpen } = this.state;
+    const { isPopoverOpen, isAlertFlyoutVisible } = this.state;
     const metric = first(node.metrics);
     const valueMode = squareSize > 70;
     const ellipsisMode = squareSize > 30;
@@ -103,17 +106,42 @@ export const Node = class extends React.PureComponent<Props, State> {
           </ConditionalToolTip>
         </NodeContextMenu>
         <NodeContextPopover
+          openAlertFlyout={this.openAlertFlyout}
           node={node}
           nodeType={nodeType}
           isOpen={this.state.isOverlayOpen}
           options={options}
           currentTime={currentTime}
           onClose={this.toggleNewOverlay}
         />
+        <AlertFlyout
+          filter={
+            options.fields
+              ? `${findInventoryFields(nodeType, options.fields).id}: "${node.id}"`
+              : ''
+          }
+          options={options}
+          nodeType={nodeType}
+          setVisible={this.setAlertFlyoutVisible}
+          visible={isAlertFlyoutVisible}
+        />
       </>
     );
   }
 
+  private openAlertFlyout = () => {
+    this.setState({
+      isOverlayOpen: false,
+      isAlertFlyoutVisible: true,
+    });
+  };
+
+  private setAlertFlyoutVisible = (isOpen: boolean) => {
+    this.setState({
+      isAlertFlyoutVisible: isOpen,
+    });
+  };
+
   private togglePopover = () => {
     const { nodeType } = this.props;
     if (nodeType === 'host') {

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -10036,7 +10036,6 @@
     "xpack.infra.homePage.settingsTabTitle": "設定",
     "xpack.infra.homePage.toolbar.kqlSearchFieldPlaceholder": "インフラストラクチャーデータを検索… (例: host.name:host-1)",
     "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "指定期間のデータの最後の{duration}",
-    "xpack.infra.infra.nodeDetails.close": "閉じる",
     "xpack.infra.infra.nodeDetails.openAsPage": "ページとして開く",
     "xpack.infra.infrastructureMetricsExplorerPage.documentTitle": "{previousTitle} | メトリックエクスプローラー",
     "xpack.infra.infrastructureSnapshotPage.documentTitle": "{previousTitle} | インベントリ",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -10062,7 +10062,6 @@
     "xpack.infra.homePage.settingsTabTitle": "设置",
     "xpack.infra.homePage.toolbar.kqlSearchFieldPlaceholder": "搜索基础设施数据……（例如 host.name:host-1）",
     "xpack.infra.homePage.toolbar.showingLastOneMinuteDataText": "选定时间过去 {duration}的数据",
-    "xpack.infra.infra.nodeDetails.close": "关闭",
     "xpack.infra.infra.nodeDetails.openAsPage": "以页面形式打开",
     "xpack.infra.infrastructureMetricsExplorerPage.documentTitle": "{previousTitle} | 指标浏览器",
     "xpack.infra.infrastructureSnapshotPage.documentTitle": "{previousTitle} | 库存",