Merge pull request #3 from MarquezProject/bugfix/namespace-selector

Improve namespace selector functionality

Author: sshah-wework

src/App.js

@@ -3,20 +3,46 @@ import './App.css';
 import SimpleTabs from './components/Tabs'
 import NavBar from './components/NavBar'
 import NamespaceSelector from './components/NamespaceSelector'
-
+import axios from 'axios'
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedNamespace: null,
+      namespaces: []
+    }
+    this.nsChangeHandler = this.nsChangeHandler.bind(this);
+  }
+
+  nsChangeHandler(selectedNs) {
+    this.setState({selectedNamespace: selectedNs})
+  }
+
+  componentDidMount() {
+    axios.get('/api/v1/namespaces/').then((response) => {
+      const namespaceList = response.data.namespaces.map(namespace => namespace.name)
+      console.log(namespaceList)
+      this.setState({namespaces: namespaceList})
+      this.setState({selectedNamespace: namespaceList[0]})
+    })
+  }
+
   render() {
     return (
       <div>
         <div>
           <NavBar />
         </div>
         <div>
-          <NamespaceSelector />
+          <NamespaceSelector 
+            namespaces={this.state.namespaces} 
+            selectedNamespace={this.state.selectedNamespace}
+            onChange={this.nsChangeHandler}
+          />
         </div>
         <div>
-          <SimpleTabs />
+          <SimpleTabs namespace={this.state.selectedNamespace}/>
         </div>
       </div>
     );

src/components/NamespaceSelector.js

@@ -28,28 +28,36 @@ const styles = theme => ({
 });
 
 class NamespaceSelector extends React.Component {
-  state = {
-    selectedNamespace: '',
-    namespaces: [],
-    name: 'ns',
-    labelWidth: 0,
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedNamespace: '',
+      namespaces: [],
+      name: 'ns',
+      labelWidth: 0
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
 
   componentDidMount() {
     this.setState({
       labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth,
     });
-    axios.get('/api/v1/namespaces/').then((response) => {
-      const namespaceList = response.data.namespaces.map(namespace => namespace.name)
-      console.log(namespaceList)
-      this.setState({namespaces: namespaceList})
-    })
   }
 
   handleChange = event => {
-    this.setState({ [event.target.name]: event.target.value });
+    this.props.onChange(event.target.value);
   };
 
+  componentDidUpdate(prevProps) {
+    if(this.props.namespaces != prevProps.namespaces) {
+      this.setState({namespaces: this.props.namespaces});
+    }
+    if(this.props.selectedNamespace != prevProps.selectedNamespace) {
+      this.setState({selectedNamespace: this.props.selectedNamespace});
+    }
+  }
+
   render() {
     const { classes } = this.props;
 

src/components/Tabs.js

@@ -5,7 +5,6 @@ import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
-import DatasetTable from './DatasetTable';
 import MUIDataTable from "mui-datatables";
 import axios from 'axios'
 
@@ -19,6 +18,7 @@ function TabContainer(props) {
 
 TabContainer.propTypes = {
   children: PropTypes.node.isRequired,
+  selectedNamespace: PropTypes.node.isRequired
 };
 
 const styles = theme => ({
@@ -35,20 +35,32 @@ class SimpleTabs extends React.Component {
         value: 0,
         jobs: [],
         datasets: [],
+        namespace: null
       };
   }
 
-  componentDidMount(){
-    axios.get('/api/v1/namespaces/demo/jobs/').then((response) => {
-        const jobData = response.data
-        const jobRows = jobData.jobs.map(job => [job.name, job.description, job.createdAt])
-        this.setState({jobs: jobRows})
-    })
-    axios.get('/api/v1/namespaces/demo/datasets/').then((response) => {
+  fetchData(namespace) {
+    axios.get('/api/v1/namespaces/' + namespace + '/jobs/').then((response) => {
+      const jobData = response.data
+      const jobRows = jobData.jobs.map(job => [job.name, job.description, job.createdAt])
+      this.setState({jobs: jobRows})
+    });
+    axios.get('/api/v1/namespaces/' + namespace + '/datasets/').then((response) => {
       const datasetData = response.data
       const datasetRows = datasetData.datasets.map(dataset => [dataset.name, dataset.createdAt])
       this.setState({datasets: datasetRows})
-    })
+    }); 
+  }
+
+  componentDidMount(){
+    this.fetchData(this.state.selectedNamespace); 
+  }
+
+  componentDidUpdate(prevProps) {
+    if(this.props.namespace != prevProps.namespace) {
+      this.setState({namespace: this.props.namespace});
+      this.fetchData(this.props.namespace);
+    }
   }
 
   handleChange = (event, value) => {