add empty list page

pkg/ui/src/components/EmptyListPage.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+export default function EmptyListPage(props){
+
+  let style = {
+    ...props.style,
+    backgroundColor: 'rgb(180, 180, 180)',
+    color: 'rgb(220, 220, 220)',
+    fontSize: 30,
+    lineHeight: `20px`,
+    textAlign: 'center',
+    position: 'absolute',
+    top: 90,
+    width: 'calc(100vw - 85px)',
+    left: 15,
+    height: 'calc(100vh - 250px)',
+  }
+
+  return (
+    <div 
+      style={style}>
+      <p>sorry, nothing to see here...</p>
+      <p>other than this volcano:</p>
+      <div 
+        style={{
+          backgroundImage: `url(${require('../images/paper-volcano.png')})`,
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '45%',
+          width: '100%',
+          height: 400,
+          position: 'absolute',
+          top: 100,
+          opacity: 0.8,
+        }}/>
+    </div>
+  )
+}

pkg/ui/src/components/cluster/ClusterResourceTab.js

@@ -16,6 +16,8 @@ import IconMore from 'material-ui/svg-icons/navigation/more-horiz'
 import Popover from 'material-ui/Popover'
 import Paper from 'material-ui/Paper'
 
+import EmptyListPage from '../EmptyListPage'
+
 import './ClusterResourceTab.css'
 
 const mapStateToProps = function(store) {
@@ -357,6 +359,10 @@ class ClusterResourceTab extends React.Component {
 
             </Popover>
           }
+
+          {this.rows.length === 0 &&
+            <EmptyListPage />
+          }
       </Paper>
     )
   }

pkg/ui/src/containers/AccessControlsInfo.js

@@ -212,13 +212,13 @@ class ClusterInfo extends React.Component {
           viewFilters={props.viewFilters}
           selectView={props.selectView}
           resource={this.state.resource}
-          resources={this.props.resources}
+          resources={props.resources}
           events={events}
-          activeTab={(this.props.location.search || 'config').replace('?view=','')}
+          activeTab={(props.location.search || 'config').replace('?view=','')}
           />
       }
 
-      <LoadingSpinner loading={this.props.isFetching} />
+      <LoadingSpinner loading={props.isFetching} />
     </div>)
   }
 }))

pkg/ui/src/containers/ClusterInfo.js

@@ -53,6 +53,20 @@ const mapDispatchToProps = function(dispatch, ownProps) {
     invalidateSession: function() {
       dispatch(invalidateSession())
     },
+    selectView: function(tab) {
+      if (tab === 'edit') {
+        let { params } = ownProps.match
+        dispatch(editResource(params.namespace, params.kind, params.name))
+      }
+
+      let { location } = ownProps
+      let newSearch = `?view=${tab}`
+      dispatch(routerActions.push({
+        pathname: location.pathname,
+        search: newSearch,
+        hash: location.hash,
+      }))
+    },
   }
 }
 
@@ -184,6 +198,7 @@ class ClusterInfo extends React.Component {
         onEditorApply={this.props.onEditorApply}
         onEditorCancel={this.onEditorCancel}
         resource={this.state.resource}
+        resourceGroup={'cluster'}
         contents={this.state.editor.contents}
         title={!!resource &&
           <div>
@@ -199,6 +214,7 @@ class ClusterInfo extends React.Component {
           resource={this.state.resource}
           logs={logs}
           events={events}
+          selectView={this.props.selectView}
           onLogsActivated={this.onLogsActivated.bind(this)}
           activeTab={(this.props.location.search || 'config').replace('?view=','')}
           />