Show the old overlay by default

elastic · Nov 5, 2020 · 9ccabb6 · 9ccabb6
1 parent b3eb0ea
commit 9ccabb6
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 21 deletions.
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
@@ -10,6 +10,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { first } from 'lodash';
+import { ConditionalToolTip } from './conditional_tooltip';
 import { euiStyled } from '../../../../../../../observability/public';
 import {
   InfraWaffleMapBounds,
@@ -20,8 +21,11 @@ import { colorFromValue } from '../../lib/color_from_value';
 import { InventoryItemType } from '../../../../../../common/inventory_models/types';
 import { NodeContextPopover } from '../node_details/overlay';
 
+import { NodeContextMenu } from './node_context_menu';
+
 const initialState = {
   isPopoverOpen: false,
+  isOverlayOpen: false,
 };
 
 type State = Readonly<typeof initialState>;
@@ -53,35 +57,46 @@ export const Node = class extends React.PureComponent<Props, State> {
     });
     return (
       <>
-        <NodeContainer
-          data-test-subj="nodeContainer"
-          style={{ width: squareSize || 0, height: squareSize || 0 }}
-          onClick={this.togglePopover}
+        <NodeContextMenu
+          node={node}
+          nodeType={nodeType}
+          isPopoverOpen={isPopoverOpen}
+          closePopover={this.closePopover}
+          options={options}
+          currentTime={currentTime}
+          popoverPosition="downCenter"
+          openNewOverlay={this.toggleNewOverlay}
         >
-          <SquareOuter color={color}>
-            <SquareInner color={color}>
-              {valueMode ? (
-                <ValueInner aria-label={nodeAriaLabel}>
-                  <Label color={color}>{node.name}</Label>
-                  <Value color={color}>{value}</Value>
-                </ValueInner>
-              ) : (
-                ellipsisMode && (
+          <NodeContainer
+            data-test-subj="nodeContainer"
+            style={{ width: squareSize || 0, height: squareSize || 0 }}
+            onClick={this.togglePopover}
+          >
+            <SquareOuter color={color}>
+              <SquareInner color={color}>
+                {valueMode ? (
                   <ValueInner aria-label={nodeAriaLabel}>
-                    <Label color={color}>...</Label>
+                    <Label color={color}>{node.name}</Label>
+                    <Value color={color}>{value}</Value>
                   </ValueInner>
-                )
-              )}
-            </SquareInner>
-          </SquareOuter>
-        </NodeContainer>
+                ) : (
+                  ellipsisMode && (
+                    <ValueInner aria-label={nodeAriaLabel}>
+                      <Label color={color}>...</Label>
+                    </ValueInner>
+                  )
+                )}
+              </SquareInner>
+            </SquareOuter>
+          </NodeContainer>
+        </NodeContextMenu>
         <NodeContextPopover
           node={node}
           nodeType={nodeType}
-          isOpen={isPopoverOpen}
+          isOpen={this.state.isOverlayOpen}
           options={options}
           currentTime={currentTime}
-          onClose={this.closePopover}
+          onClose={this.toggleNewOverlay}
         />
       </>
     );
@@ -91,6 +106,13 @@ export const Node = class extends React.PureComponent<Props, State> {
     this.setState((prevState) => ({ isPopoverOpen: !prevState.isPopoverOpen }));
   };
 
+  private toggleNewOverlay = () => {
+    this.setState((prevState) => ({
+      isPopoverOpen: !prevState.isOverlayOpen === true ? false : prevState.isPopoverOpen,
+      isOverlayOpen: !prevState.isOverlayOpen,
+    }));
+  };
+
   private closePopover = () => {
     if (this.state.isPopoverOpen) {
       this.setState({ isPopoverOpen: false });

diff --git a/...plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx b/...plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
@@ -37,6 +37,7 @@ interface Props {
   isPopoverOpen: boolean;
   closePopover: () => void;
   popoverPosition: EuiPopoverProps['anchorPosition'];
+  openNewOverlay(): void;
 }
 
 export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme(
@@ -50,6 +51,7 @@ export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme
     nodeType,
     popoverPosition,
     theme,
+    openNewOverlay,
   }) => {
     const [flyoutVisible, setFlyoutVisible] = useState(false);
     const inventoryModel = findInventoryModel(nodeType);
@@ -159,6 +161,14 @@ export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme
       },
     };
 
+    const openNewOverlayMenuItem: SectionLinkProps = {
+      label: i18n.translate('xpack.infra.nodeContextMenu.createAlertLink', {
+        defaultMessage: '**** [NEW] Overlay ***',
+      }),
+      style: { color: theme?.eui.euiLinkColor || '#006BB4', fontWeight: 500, padding: 0 },
+      onClick: openNewOverlay,
+    };
+
     return (
       <>
         <ActionMenu
@@ -194,6 +204,7 @@ export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme
                 <SectionLink data-test-subj="viewApmTracesContextMenuItem" {...apmTracesMenuItem} />
                 <SectionLink {...uptimeMenuItem} />
                 <SectionLink {...createAlertMenuItem} />
+                <SectionLink {...openNewOverlayMenuItem} />
               </SectionLinks>
             </Section>
           </div>