add related resources tracking and panel

pkg/ui/src/components/ResourceInfoPage.js

@@ -8,13 +8,15 @@ import {Card, CardHeader} from 'material-ui/Card'
 import ConfigurationPane from './configuration-pane/ConfigurationPane'
 import PermissionsPane from './configuration-pane/PermissionsPane'
 import PodTemplatePane from './configuration-pane/PodTemplatePane'
-import PodsPane from './configuration-pane/PodsPane'
+import PodsForNodePane from './configuration-pane/PodsForNodePane'
+import RelatedResourcesPane from './configuration-pane/RelatedResourcesPane'
 import EventViewer from './EventViewer'
 
 import IconConfiguration from 'material-ui/svg-icons/action/list'
 import IconPermissions from 'material-ui/svg-icons/communication/vpn-key'
 import IconPodTemplate from 'material-ui/svg-icons/action/flip-to-back'
 import IconPods from 'material-ui/svg-icons/action/group-work'
+import IconRelated from 'material-ui/svg-icons/hardware/device-hub'
 import IconLogs from 'material-ui/svg-icons/action/receipt'
 import IconTerminal from 'material-ui/svg-icons/hardware/computer'
 import IconEvents from 'material-ui/svg-icons/action/event'
@@ -280,10 +282,17 @@ class ResourceInfoPage extends React.Component {
       if (resource.kind === 'Node') {
         tabs.push({
           name: 'pods',
-          component: PodsPane,
+          component: PodsForNodePane,
           icon: <IconPods/>,
           props: {node: resource},
         })
+      } else if (!!resource.owned) {
+        tabs.push({
+          name: 'related',
+          component: RelatedResourcesPane,
+          icon: <IconRelated/>,
+          props: {resource: resource},
+        })
       }
     }
 
@@ -312,6 +321,9 @@ class ResourceInfoPage extends React.Component {
       })
     }
 
+    // TODO: check for tab change, 
+    // if the tab is 'related', set the default
+    // filters...
     let activeTab = tabs[0].name
     if (targetTab !== 'edit') {
       if (tabs.find((t) => t.name === targetTab)) {

pkg/ui/src/components/configuration-pane/PodsPane.js → pkg/ui/src/components/configuration-pane/PodsForNodePane.js

@@ -14,7 +14,7 @@ import FilterTable from '../filter-table/FilterTable'
 import RowActionMenu from '../RowActionMenu'
 import ConfirmationDialog from '../ConfirmationDialog'
 import MultiResourceActionButton from '../MultiResourceActionButton'
-import './PodsPane.css'
+import './PodsForNodePane.css'
 
 const mapStateToProps = function(store) {
   return {
@@ -74,7 +74,7 @@ const styles = {
 
 export default sizeMe({ monitorHeight: true, monitorWidth: true }) (
 connect(mapStateToProps, mapDispatchToProps) (
-class PodsPane extends React.PureComponent {
+class PodsForNodePane extends React.PureComponent {
 
   static propTypes = {
     node: PropTypes.object.isRequired,