Added filter function of k8s page

frontend/src/hosts/actions/kubernetes.ts

@@ -25,6 +25,7 @@ import {
   getLocalK8sRoleBindings,
   getLocalK8sPersistentVolumes,
   getLocalK8sPersistentVolumeClaims,
+  getLocalK8sDetail,
 } from 'src/shared/apis/saltStack'
 
 // Types
@@ -52,6 +53,7 @@ export enum ActionTypes {
   RoleBindings = 'GET_ROLEBINDINGS',
   PersistentVolumes = 'GET_PERSISTENTVOLUMES',
   PersistentVolumeClaims = 'GET_PERSISTENTVOLUMECLAIMS',
+  K8sDetail = 'GET_K8S_DETAIL',
 }
 
 interface NamespacesAction {
@@ -138,6 +140,10 @@ interface PersistentVolumeClaimsAction {
   type: ActionTypes.PersistentVolumeClaims
 }
 
+interface K8sDetailAction {
+  type: ActionTypes.K8sDetail
+}
+
 export type Action =
   | NamespacesAction
   | NodesAction
@@ -160,6 +166,7 @@ export type Action =
   | RoleBindingsAction
   | PersistentVolumesAction
   | PersistentVolumeClaimsAction
+  | K8sDetailAction
 
 export const loadNamespaces = (): NamespacesAction => ({
   type: ActionTypes.Namespaces,
@@ -245,6 +252,10 @@ export const loadPersistentVolumeClaims = (): PersistentVolumeClaimsAction => ({
   type: ActionTypes.PersistentVolumeClaims,
 })
 
+export const loadK8sDetail = (): K8sDetailAction => ({
+  type: ActionTypes.K8sDetail,
+})
+
 export const getLocalK8sNamespacesAsync = (
   pUrl: string,
   pToken: string,
@@ -671,3 +682,20 @@ export const getLocalK8sPersistentVolumeClaimsAsync = (
     dispatch(errorThrown(error))
   }
 }
+
+export const getLocalK8sDetailAsync = (
+  pUrl: string,
+  pToken: string,
+  pMinionId: string,
+  pParam?: SaltStack
+) => async (dispatch: Dispatch<Action>) => {
+  try {
+    const k8sDetail = await getLocalK8sDetail(pUrl, pToken, pMinionId, pParam)
+
+    dispatch(loadK8sDetail())
+    return k8sDetail
+  } catch (error) {
+    console.error(error)
+    dispatch(errorThrown(error))
+  }
+}

frontend/src/hosts/components/KubernetesContents.tsx

@@ -33,7 +33,7 @@ import {Source, TimeRange, Cell, Template, RemoteDataState} from 'src/types'
 interface Props {
   handleOnSetActiveEditorTab: (tab: string) => void
   handleOnClickPodName: () => void
-  handleOnClickVisualizePod: (target: SVGSVGElement) => void
+  handleOnClickVisualizePod: (data: any) => void
   handleDBClick: (data: any) => void
   handleResize: (proportions: number[]) => void
   handleOpenTooltip: (target: any) => void
@@ -231,28 +231,7 @@ class KubernetesContents extends PureComponent<Props, State> {
               </div>
             </>
           </TableBody>
-          <div className={'kubernetes-radio-btn--container'}>
-            <Radio shape={ButtonShape.StretchToFit}>
-              <Radio.Button
-                id="hostspage-tab-Basic"
-                titleText="Basic"
-                value="Basic"
-                active={activeTab === 'Basic'}
-                onClick={handleOnSetActiveEditorTab}
-              >
-                Basic
-              </Radio.Button>
-              <Radio.Button
-                id="hostspage-tab-Detail"
-                titleText="Detail"
-                value="Detail"
-                active={activeTab === 'Detail'}
-                onClick={handleOnSetActiveEditorTab}
-              >
-                Raw Data
-              </Radio.Button>
-            </Radio>
-          </div>
+          <div className={'kubernetes-detail-title'}>Raw Data</div>
           {activeTab === 'Basic' ? (
             <KubernetesBasicsTable />
           ) : (

frontend/src/hosts/components/KubernetesHexagon.tsx

@@ -20,7 +20,7 @@ import {RemoteDataState} from 'src/types'
 
 interface Props {
   handleOnClickPodName: () => void
-  handleOnClickVisualizePod: (target: SVGSVGElement) => void
+  handleOnClickVisualizePod: (data: any) => void
   handleDBClick: (data: any) => void
   handleResize: (proportions: number[]) => void
   handleOpenTooltip: (target: any) => void
@@ -209,7 +209,7 @@ class KubernetesHexagon extends PureComponent<Props, State> {
       .on('mouseleave', function () {
         onMouseLeave(this)
       })
-      .on('click', function () {
+      .on('click', function (data) {
         onMouseClick(this, data)
       })
       .on('mousedown', function () {
@@ -347,56 +347,70 @@ class KubernetesHexagon extends PureComponent<Props, State> {
 
     _.forEach(kubernetesObject, m => {
       if (m['type'] === 'Node') {
-        const cpuUsage =
-          (parseFloat(m['cpu']) /
-            parseFloat(
-              node
-                .select(`circle[data-label=${m['name']}]`)
-                .attr('data-limit-cpu')
-            )) *
-          100
-        const memoryUsage =
-          (parseFloat(m['memory']) /
-            parseFloat(
-              node
-                .select(`circle[data-label=${m['name']}]`)
-                .attr('data-limit-memory')
-            )) *
-          100
-        const pick = cpuUsage > memoryUsage ? cpuUsage : memoryUsage
-        node
-          .select(`circle[data-label=${m['name']}]`)
-          .attr('data-cpu', `${cpuUsage}`)
-        node
-          .select(`circle[data-label=${m['name']}]`)
-          .attr('data-memory', `${memoryUsage}`)
-          .attr('fill', kubernetesStatusColor(pick / 100))
+        if (
+          _.find(
+            node.select(`circle[data-type=${'Node'}]`).data(),
+            nodeData => nodeData.data.label === m['name']
+          )
+        ) {
+          const cpuUsage =
+            (parseFloat(m['cpu']) /
+              parseFloat(
+                node
+                  .select(`circle[data-label=${m['name']}]`)
+                  .attr('data-limit-cpu')
+              )) *
+            100
+          const memoryUsage =
+            (parseFloat(m['memory']) /
+              parseFloat(
+                node
+                  .select(`circle[data-label=${m['name']}]`)
+                  .attr('data-limit-memory')
+              )) *
+            100
+          const pick = cpuUsage > memoryUsage ? cpuUsage : memoryUsage
+          node
+            .select(`circle[data-label=${m['name']}]`)
+            .attr('data-cpu', `${cpuUsage}`)
+          node
+            .select(`circle[data-label=${m['name']}]`)
+            .attr('data-memory', `${memoryUsage}`)
+            .attr('fill', kubernetesStatusColor(pick / 100))
+        }
       } else {
-        const cpuUsage =
-          (parseFloat(m['cpu']) /
-            parseFloat(
-              node
-                .select(`path[data-label=${m['name']}]`)
-                .attr('data-limit-cpu')
-            )) *
-          100
-        const memoryUsage =
-          (parseFloat(m['memory']) /
-            parseFloat(
-              node
-                .select(`path[data-label=${m['name']}]`)
-                .attr('data-limit-memory')
-            )) *
-          100
-
-        const pick = cpuUsage > memoryUsage ? cpuUsage : memoryUsage
-        node
-          .select(`path[data-label=${m['name']}]`)
-          .attr('data-cpu', `${cpuUsage}`)
-        node
-          .select(`path[data-label=${m['name']}]`)
-          .attr('data-memory', `${memoryUsage}`)
-          .attr('fill', kubernetesStatusColor(pick / 100))
+        if (
+          _.find(
+            node.select(`path[data-type=${'Pod'}]`).data(),
+            podData => podData.data.label === m['name']
+          )
+        ) {
+          const cpuUsage =
+            (parseFloat(m['cpu']) /
+              parseFloat(
+                node
+                  .select(`path[data-label=${m['name']}]`)
+                  .attr('data-limit-cpu')
+              )) *
+            100
+          const memoryUsage =
+            (parseFloat(m['memory']) /
+              parseFloat(
+                node
+                  .select(`path[data-label=${m['name']}]`)
+                  .attr('data-limit-memory')
+              )) *
+            100
+
+          const pick = cpuUsage > memoryUsage ? cpuUsage : memoryUsage
+          node
+            .select(`path[data-label=${m['name']}]`)
+            .attr('data-cpu', `${cpuUsage}`)
+          node
+            .select(`path[data-label=${m['name']}]`)
+            .attr('data-memory', `${memoryUsage}`)
+            .attr('fill', kubernetesStatusColor(pick / 100))
+        }
       }
     })
 
@@ -410,13 +424,13 @@ class KubernetesHexagon extends PureComponent<Props, State> {
     return this.ref.current.append(svg.attr('viewBox', `${autoBox()}`).node())
   }
 
-  private runOnSingleClick = (target: SVGSVGElement) => {
-    this.props.handleOnClickVisualizePod(target)
+  private runOnSingleClick = (data: any) => {
+    this.props.handleOnClickVisualizePod(data)
     this.clickedOnce = false
     this.clickedTarget = null
   }
 
-  private runOnDBClick = (target: SVGSVGElement, data) => {
+  private runOnDBClick = (target: SVGSVGElement, data: any) => {
     this.clickedOnce = false
     this.clickedTarget = null
     clearTimeout(this.timeout)
@@ -431,7 +445,7 @@ class KubernetesHexagon extends PureComponent<Props, State> {
       (this.clickedTarget !== target && this.clickedOnce)
     ) {
       this.timeout = setTimeout(() => {
-        this.runOnSingleClick(target)
+        this.runOnSingleClick(data)
       }, this.dbClickJudgementTimer)
 
       this.clickedTarget = target
@@ -441,7 +455,7 @@ class KubernetesHexagon extends PureComponent<Props, State> {
 
   private onMouseDBClick = (target: SVGSVGElement, data: any) => {
     this.props.handleDBClick(data)
-    this.props.handleOnClickVisualizePod(target)
+    this.props.handleOnClickVisualizePod(data)
   }
 
   private onMouseOver = (target: SVGSVGElement) => {

frontend/src/hosts/components/host.scss

@@ -214,6 +214,14 @@
   }
 }
 
+.kubernetes-detail-title {
+  height: 40px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #bec2cc;
+  padding: 10px 5px 0 5px;
+}
+
 .devider--bar {
   background-color: $g2-kevlar;
   color: white;

frontend/src/hosts/containers/Infrastructure.tsx

@@ -127,7 +127,7 @@ class Infrastructure extends PureComponent<Props, State> {
     const isUsingKubernetes = !_.isEmpty(
       _.find(addons, addon => {
         const {name, url} = addon
-        return name === 'kubernetes' && url === 'on'
+        return name === 'k8s' && url === 'on'
       })
     )