add node link in pod details

matt-deboer · Oct 31, 2017 · 5c20b6e · 5c20b6e
1 parent 268382e
commit 5c20b6e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 29 deletions.
diff --git a/pkg/ui/src/components/FilterChip.js b/pkg/ui/src/components/FilterChip.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import {blueA400, blueA100} from 'material-ui/styles/colors';
-
+import { blueA400, blueA100 } from 'material-ui/styles/colors';
+import { Link } from 'react-router-dom'
 import Chip from 'material-ui/Chip';
 
 // use functional component style for representational components
@@ -13,22 +13,39 @@ export default function FilterChip(props) {
       </span>
     )
 
-    return (
+    let onTouchTap = props.onTouchTap
+    if (props.link && !onTouchTap) {
+      onTouchTap = function(){}
+    }
 
-        <Chip
-          style={{...props.style, ...{
-            margin: '8px 8px 0 0',
-            padding: 0,
-            float: 'left', 
-            pointerEvents: props.isDisabled ? 'none' : 'all' 
-          }}}
-          labelStyle={{...{'lineHeight': '22px', fontSize: '12px',...props.labelStyle}}}
-          backgroundColor={props.isFocused ? blueA100 : null}
-          onTouchTap={props.onTouchTap}
-          onRequestDelete={props.onRequestDelete}
-        >
-        {labelText}
-        </Chip>
-    )
+    let chip = (
+      <Chip
+        style={{...{
+          margin: '8px 8px 0 0',
+          padding: 0,
+          float: 'left', 
+          pointerEvents: props.isDisabled ? 'none' : 'all' 
+        }, ...props.style}}
+        labelStyle={{...{'lineHeight': '22px', fontSize: '12px',...props.labelStyle}}}
+        backgroundColor={props.isFocused ? blueA100 : null}
+        onTouchTap={onTouchTap}
+        onRequestDelete={props.onRequestDelete}
+      >
+      {labelText}
+      </Chip>
+      )
+
+    let content
+    if (props.link) {
+      content = (
+        <Link to={props.link}>
+          {chip}
+        </Link>
+      )
+    } else {
+      content = chip
+    }
+
+    return content
   }
 
diff --git a/pkg/ui/src/components/configuration-pane/ConfigurationPane.js b/pkg/ui/src/components/configuration-pane/ConfigurationPane.js
@@ -94,7 +94,6 @@ class ConfigurationPane extends React.Component {
                     return <div key={container.name} className="col-xs-12 col-sm-6 col-md-6 col-lg-4" style={{marginBottom: 15, paddingLeft: 0}}>
                       <ContainerPanel container={container} 
                         namespace={resource.metadata.namespace}
-                        linkGenerator={linkGenerator}
                         status={resource.status.containerStatuses[index]}
                         />
                     </div>

diff --git a/pkg/ui/src/components/configuration-pane/ContainerPanel.js b/pkg/ui/src/components/configuration-pane/ContainerPanel.js
@@ -64,7 +64,7 @@ export default class ContainerPanel extends React.Component {
   render() {
 
     let { props } = this
-    let { container, namespace, initIndex, linkGenerator, status } = props
+    let { container, namespace, initIndex, status } = props
     let initHeader = null
     let statusHeader = null
     if (initIndex !== undefined) {
@@ -111,8 +111,7 @@ export default class ContainerPanel extends React.Component {
               <TableRow style={styles.tableRow} displayBorder={false}>
                 <TableRowColumn style={styles.tableRowKeyCol}>Env:</TableRowColumn>
                 <TableRowColumn style={styles.tableRowValCol}>
-                  <EnvironmentExpander data={container.env} title={'env'} namespace={namespace} 
-                    linkGenerator={linkGenerator}/>
+                  <EnvironmentExpander data={container.env} title={'env'} namespace={namespace} />
                 </TableRowColumn>
               </TableRow>
             }

diff --git a/pkg/ui/src/components/configuration-pane/PodDetailsPanel.js b/pkg/ui/src/components/configuration-pane/PodDetailsPanel.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import {Card, CardText} from 'material-ui/Card'
-import {grey800} from 'material-ui/styles/colors'
+import { Card, CardText } from 'material-ui/Card'
+import { grey800 } from 'material-ui/styles/colors'
 import {
   Table,
   TableBody,
@@ -10,6 +10,7 @@ import {
 import sizeMe from 'react-sizeme'
 import Volumes from './Volumes'
 import yaml from 'js-yaml'
+import FilterChip from '../FilterChip'
 
 import './PodDetailsPanel.css'
 
@@ -95,7 +96,10 @@ class PodDetailsPanel extends React.Component {
             tableLayout: 'inherit',
           }} selectable={false} headerStyle={{display: 'none'}}>
             <TableBody displayRowCheckbox={false}>
-              {spec.nodeName && tableRow('Node:', spec.nodeName)}
+              {spec.nodeName && tableRow('Node:', 
+                  <FilterChip key={spec.nodeName} style={{margin: '0'}} prefix={'node'} suffix={spec.nodeName} 
+                    link={linkGenerator.linkForResource(`Node/~/${spec.nodeName}`)}/>)
+              }
               {spec.dnsPolicy && tableRow('DNS Policy:', spec.dnsPolicy)}
               {spec.restartPolicy && tableRow('Restart Policy:', spec.restartPolicy)}
               {spec.nodeSelector && tableRow('Node-Selectors:', spec.nodeSelector)}
@@ -127,7 +131,7 @@ function tableRow(key, val) {
 
 function renderValue(value) {
   let rendered = value
-  if (typeof value === 'object') {
+  if (typeof value === 'object' && !value.type) {
     rendered = <pre style={styles.valueStyle}>{yaml.safeDump(value)}</pre>
   }
   return rendered

diff --git a/pkg/ui/src/components/configuration-pane/PodTemplatePane.js b/pkg/ui/src/components/configuration-pane/PodTemplatePane.js
@@ -135,16 +135,14 @@ class PodTemplatePane extends React.Component {
                     resource.spec.template.spec.initContainers.map(container => {
                       return <div key={container.name} className="col-xs-12 col-sm-6 col-md-6 col-lg-6" style={{marginBottom: 15, paddingLeft: 0}}>
                         <ContainerPanel key={container.name} container={container}
-                          namespace={resource.metadata.namespace} isInit={true}
-                          linkGenerator={linkGenerator}/>
+                          namespace={resource.metadata.namespace} isInit={true}/>
                       </div>
                     })
                   }
                   {resource.spec.template.spec.containers.map(container => {
                     return <div key={container.name} className="col-xs-12 col-sm-6 col-md-6 col-lg-6" style={{marginBottom: 15, paddingLeft: 0}}>
                       <ContainerPanel key={container.name} container={container} 
                         namespace={resource.metadata.namespace}
-                        linkGenerator={linkGenerator}
                         />
                     </div>
                   })}