Merge pull request #4 from MarquezProject/feat/add-job-row-details

Display job / job run details in a dialog

Author: sshah-wework

src/components/JobDetailsDialog.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@material-ui/core/Button';
+
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+
+const styles = theme => ({
+    root: {
+      width: '100%',
+      marginTop: theme.spacing.unit * 3,
+      overflowX: 'auto',
+    },
+    table: {
+      minWidth: 700,
+    },
+  });
+
+function JobRunsTable(props) {
+    const { classes } = props;
+    return (
+        <Table>
+            <TableHead>
+                <TableRow>
+                    <TableCell>RUN ARGUMENTS</TableCell>
+                    <TableCell align="right">FINAL STATE</TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {
+                    props.runs.map(row => (
+                        <TableRow key={row.runId}>
+                            <TableCell component="th" scope="row">
+                                {row.runArgs}
+                            </TableCell>
+                            <TableCell align="right">{row.runState}</TableCell>
+                        </TableRow>
+                    ))
+                }
+            </TableBody>
+        </Table>
+    )
+}
+
+function JobDetailsDialog(props) {
+    return (
+        <Dialog
+            fullWidth="sm"
+            maxWidth="sm"
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="max-width-dialog-title"
+        >
+            <DialogTitle id="max-width-dialog-title">Job Details</DialogTitle>
+            <DialogContent>
+                <JobRunsTable runs={props.jobDetails.runs} />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onClose} color="primary">
+                    Close
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+JobDetailsDialog.propTypes = {
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    jobDetails: PropTypes.object.isRequired
+}
+
+JobDetailsDialog.defaultProps = {
+    open: false,
+    onClose: function(){},
+    jobDetails: null
+}
+
+export default withStyles(styles)(JobDetailsDialog);

src/components/Tabs.js

@@ -6,8 +6,13 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 import MUIDataTable from "mui-datatables";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
 import axios from 'axios'
 
+import JobDetailsDialog from './JobDetailsDialog';
+
+
 function TabContainer(props) {
   return (
     <Typography component="div" style={{ padding: 8 * 3 }}>
@@ -35,7 +40,8 @@ class SimpleTabs extends React.Component {
         value: 0,
         jobs: [],
         datasets: [],
-        namespace: null
+        namespace: null,
+        jobDetails: {runs: []}
       };
   }
 
@@ -47,7 +53,7 @@ class SimpleTabs extends React.Component {
     });
     axios.get('/api/v1/namespaces/' + namespace + '/datasets/').then((response) => {
       const datasetData = response.data
-      const datasetRows = datasetData.datasets.map(dataset => [dataset.name, dataset.createdAt])
+      const datasetRows = datasetData.datasets.map(dataset => [dataset.name, dataset.urn, dataset.createdAt])
       this.setState({datasets: datasetRows})
     }); 
   }
@@ -67,45 +73,82 @@ class SimpleTabs extends React.Component {
     this.setState({ value });
   };
 
+  handleJobRowClick = (rowData, rowState) => {
+    const jobName = rowData[0]
+    var jobRuns = []
+    axios.get('/api/v1/namespaces/' + this.state.namespace + '/jobs/' + jobName + '/runs' ).then((response) => {
+      jobRuns = response.data;
+      this.setState(
+        {
+          jobDetails: {
+            runs: jobRuns
+          }
+        })
+      this.setState({showJobDetails: true});
+    });
+  }
+
+  handleJobDetailsClose = () => {
+    this.setState({showJobDetails: false});
+  }
+
   render() {
     const { classes } = this.props;
     const { value } = this.state;
-    const jobColumns = ["Name", "Description", "Created At"];
+    const jobColumns = [
+        "Name",
+        "Description",
+        "Created At"
+    ];
     const datasetColumns = ["URN", "Created At"];
 
     const options = {
         filter: true,
-        filterType: 'dropdown'
+        filterType: 'dropdown',
+        onRowClick: this.handleJobRowClick
     };
 
     return (
-      <div className={classes.root}>
-        <AppBar position="static">
-          <Tabs value={value} onChange={this.handleChange}>
-            <Tab label="Jobs" />
-            <Tab label="Datasets" />
-          </Tabs>
-        </AppBar>
-        {value === 0 && 
-        <TabContainer>
-            <MUIDataTable 
-                title={"Jobs"}
-                data={this.state.jobs}
-                columns={jobColumns}
-                options={options}
-            />
-        </TabContainer>
-        }
-        {value === 1 && 
-        <TabContainer>
-            <MUIDataTable 
-                title={"Datasets"}
-                data={this.state.datasets}
-                columns={datasetColumns}
-                options={options}
-            />
-        </TabContainer>
-        }      </div>
+      <React.Fragment>
+        <div className={classes.root}>
+          <AppBar position="static">
+            <Tabs value={value} onChange={this.handleChange}>
+              <Tab label="Jobs" />
+              <Tab label="Datasets" />
+            </Tabs>
+          </AppBar>
+          {value === 0 && 
+          <TabContainer>
+              <MUIDataTable 
+                  title={"Jobs"}
+                  data={this.state.jobs}
+                  columns={jobColumns}
+                  options={options}
+              />
+          </TabContainer>
+          }
+          {value === 1 && 
+          <TabContainer>
+              <MUIDataTable 
+                  title={"Datasets"}
+                  data={this.state.datasets}
+                  columns={datasetColumns}
+                  options={options}
+              />
+          </TabContainer>
+          }      
+        </div>
+
+        {/* Job Details Dialog */}
+        <JobDetailsDialog
+          open={this.state.showJobDetails}
+          onClose={this.handleJobDetailsClose}
+          jobDetails={this.state.jobDetails}
+        />
+
+
+        {/* Dataset Details Dialog */}
+      </React.Fragment>
     );
   }
 }