Merge commit 'f3ba1135a95bdb5ef2a13c051fa6c9bd4b50f356' into dev-k8s-…

…yongsik

frontend/src/hosts/components/KubernetesContents.tsx

@@ -45,7 +45,7 @@ interface Props {
   focuseNode: FocuseNode
   pinNode: string[]
   isToolipActive: boolean
-  toolipPosition: TooltipPosition
+  targetPosition: TooltipPosition
   tooltipNode: TooltipNode
   kubernetesObject: KubernetesObject
   kubernetesD3Data: D3K8sData
@@ -168,11 +168,11 @@ class KubernetesContents extends PureComponent<Props, State> {
   }
 
   private get tooltip() {
-    const {isToolipActive, toolipPosition, tooltipNode} = this.props
+    const {isToolipActive, targetPosition, tooltipNode} = this.props
     if (isToolipActive) {
       return (
         <KubernetesTooltip
-          tipPosition={toolipPosition}
+          targetPosition={targetPosition}
           tooltipNode={tooltipNode}
           statusColor={kubernetesStatusColor}
         />

frontend/src/hosts/components/KubernetesHexagon.tsx

@@ -43,9 +43,11 @@ class KubernetesHexagon extends PureComponent<Props, State> {
 
   private ref = createRef<HTMLDivElement>()
 
+  private clickedTarget = null
   private clickedOnce = false
   private timeout = null
-  private timer = 500
+
+  private dbClickJudgementTimer = 300
 
   constructor(props: Props) {
     super(props)
@@ -77,7 +79,9 @@ class KubernetesHexagon extends PureComponent<Props, State> {
         <>
           {this.props.remoteDataState === RemoteDataState.Loading ? (
             <PageSpinner />
-          ) : null}
+          ) : (
+            <NoHostsState />
+          )}
         </>
       )
     } else {
@@ -108,8 +112,6 @@ class KubernetesHexagon extends PureComponent<Props, State> {
         </>
       )
     }
-
-    return <NoHostsState />
   }
 
   private drawChart() {
@@ -411,21 +413,28 @@ class KubernetesHexagon extends PureComponent<Props, State> {
   private runOnSingleClick = (target: SVGSVGElement) => {
     this.props.handleOnClickVisualizePod(target)
     this.clickedOnce = false
+    this.clickedTarget = null
   }
 
   private runOnDBClick = (target: SVGSVGElement, data) => {
     this.clickedOnce = false
+    this.clickedTarget = null
     clearTimeout(this.timeout)
     this.onMouseDBClick(target, data)
   }
 
   private onMouseClick = (target: SVGSVGElement, data: D3K8sData) => {
-    if (this.clickedOnce) {
+    if (this.clickedTarget === target && this.clickedOnce) {
       this.runOnDBClick(target, data)
-    } else {
+    } else if (
+      (this.clickedTarget === null && !this.clickedOnce) ||
+      (this.clickedTarget !== target && this.clickedOnce)
+    ) {
       this.timeout = setTimeout(() => {
         this.runOnSingleClick(target)
-      }, this.timer)
+      }, this.dbClickJudgementTimer)
+
+      this.clickedTarget = target
       this.clickedOnce = true
     }
   }

frontend/src/hosts/components/KubernetesTooltip.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent, CSSProperties, createRef} from 'react'
+import React, {PureComponent, createRef} from 'react'
 import chroma from 'chroma-js'
 import _ from 'lodash'
 
@@ -11,16 +11,16 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   onDismiss?: () => void
-  tipPosition: TooltipPosition
+  targetPosition: TooltipPosition
   tooltipNode: TooltipNode
   statusColor: chroma.Scale<chroma.Color>
 }
 
 interface State {
-  topPosition: number | null
-  bottomPosition: number | null
-  leftPosition: number | null
-  rightPosition: number | null
+  top: number | null
+  bottom: number | null
+  left: number | null
+  right: number | null
 }
 
 @ErrorHandling
@@ -31,54 +31,41 @@ class KubernetesTooltip extends PureComponent<Props, State> {
     body: '60%',
   }
 
-  private gutter: number = 2
-
   public constructor(props: Props) {
     super(props)
     this.state = {
-      topPosition: null,
-      bottomPosition: null,
-      leftPosition: null,
-      rightPosition: null,
+      top: null,
+      bottom: null,
+      left: null,
+      right: null,
     }
   }
 
   public componentDidMount() {
     this.calcPosition()
   }
 
-  public componentDidUpdate() {
-    this.calcPosition()
-  }
-
   private calcPosition = () => {
-    const {
-      tipPosition: {left: targetLeft, right: targetRight},
-    } = this.props
-
-    const {
-      bottom,
-      height,
-      width,
-    } = this.tooltipRef.current.getBoundingClientRect()
+    const {targetPosition} = this.props
+    const {top, width, right} = targetPosition
+    const {width: tipWidth} = this.tooltipRef.current.getBoundingClientRect()
 
-    if (bottom > window.innerHeight) {
-      this.setState({bottomPosition: height / 2})
+    let position = {
+      bottom: window.innerHeight - top,
+      left: right - width / 2 - tipWidth / 2,
     }
 
-    if (targetRight + width + this.gutter > window.innerWidth) {
-      this.setState({
-        rightPosition: window.innerWidth - targetLeft + this.gutter,
-      })
-    }
+    this.setState({...position})
   }
 
   public render() {
     const {tooltipNode, statusColor} = this.props
+    const {top, bottom, left, right} = this.state
     const {name, cpu, memory} = tooltipNode
+
     return (
       <div
-        style={this.stylePosition}
+        style={{top, bottom, left, right}}
         className={this.handleToolTipClassName}
         ref={this.tooltipRef}
       >
@@ -146,31 +133,6 @@ class KubernetesTooltip extends PureComponent<Props, State> {
   private get handleToolTipClassName() {
     return 'kubernetes-toolbar--tooltip'
   }
-
-  private get stylePosition(): CSSProperties {
-    const {
-      tipPosition: {top, right},
-    } = this.props
-    const {bottomPosition, rightPosition} = this.state
-
-    let position = {
-      bottom: `${bottomPosition || window.innerHeight - top - 15}px`,
-      left: null,
-      right: null,
-    }
-    if (rightPosition) {
-      position = {
-        ...position,
-        right: `${rightPosition}px`,
-      }
-    } else {
-      position = {
-        ...position,
-        left: `${right + this.gutter}px`,
-      }
-    }
-    return position
-  }
 }
 
 export default KubernetesTooltip

frontend/src/hosts/containers/KubernetesPage.tsx

@@ -116,7 +116,7 @@ interface State {
   focuseNode: FocuseNode
   pinNode: string[]
   isToolipActive: boolean
-  tooltipPosition: TooltipPosition
+  targetPosition: TooltipPosition
   tooltipNode: TooltipNode
   minions: string[]
   selectMinion: string
@@ -167,10 +167,11 @@ class KubernetesPage extends PureComponent<Props, State> {
       focuseNode: {name: null, label: null, type: null},
       pinNode: [],
       isToolipActive: false,
-      tooltipPosition: {
+      targetPosition: {
         top: null,
         right: null,
         left: null,
+        width: null,
       },
       tooltipNode: {
         name: null,
@@ -2659,7 +2660,7 @@ class KubernetesPage extends PureComponent<Props, State> {
       focuseNode,
       pinNode,
       isToolipActive,
-      tooltipPosition,
+      targetPosition,
       tooltipNode,
       minions,
       selectMinion,
@@ -2720,7 +2721,7 @@ class KubernetesPage extends PureComponent<Props, State> {
           script={script}
           height={this.height}
           isToolipActive={isToolipActive}
-          toolipPosition={tooltipPosition}
+          targetPosition={targetPosition}
           tooltipNode={tooltipNode}
           handleOpenTooltip={this.handleOpenTooltip}
           handleCloseTooltip={this.handleCloseTooltip}
@@ -2964,7 +2965,11 @@ class KubernetesPage extends PureComponent<Props, State> {
 
   private handlePinNode = (data: any) => {
     const pinNode = this.parentNavigation(data)
-    this.setState({pinNode})
+    const target = d3.select(`[data-name=${pinNode[0]}]`)
+    const isNull = _.isNull(_.flatMapDeep(target._groups)[0])
+    const isPin = isNull || target.classed('kubernetes-pin')
+
+    this.setState({pinNode: isPin ? [] : pinNode})
   }
 
   private debouncedResizeTrigger = _.debounce(() => {
@@ -2980,10 +2985,10 @@ class KubernetesPage extends PureComponent<Props, State> {
   }
 
   private handleOpenTooltip = (target: HTMLElement) => {
-    const {top, right, left} = target.getBoundingClientRect()
+    const {width, top, right, left} = target.getBoundingClientRect()
     this.setState({
       isToolipActive: true,
-      tooltipPosition: {top, right, left},
+      targetPosition: {width, top, right, left},
       tooltipNode: {
         name: target.getAttribute('data-label'),
         cpu: parseInt(target.getAttribute('data-cpu')),
@@ -2995,7 +3000,7 @@ class KubernetesPage extends PureComponent<Props, State> {
   private handleCloseTooltip = () => {
     this.setState({
       isToolipActive: false,
-      tooltipPosition: {top: null, right: null, left: null},
+      targetPosition: {top: null, right: null, left: null, width: null},
     })
   }
 

frontend/src/hosts/types/kubernetes.ts

@@ -50,6 +50,7 @@ export interface TooltipPosition {
   top: number
   right: number
   left: number
+  width: number
 }
 
 export interface TooltipNode {