ui fixes, redux wip

ubclaunchpad · Jun 29, 2018 · 7e5ef76 · 7e5ef76
1 parent 7151aed
commit 7e5ef76
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 146 deletions.
diff --git a/daemon/web/actions/dashboard.js b/daemon/web/actions/dashboard.js
@@ -1,11 +1,8 @@
-// import InertiaAPI from '../common/API';
 import {
   GET_PROJECT_DETAILS_SUCCESS,
-  // GET_PROJECT_DETAILS_FAILURE,
   GET_PROJECT_LOGS_SUCCESS,
   GET_PROJECT_LOGS_FAILURE,
   GET_CONTAINERS_SUCCESS,
-  GET_CONTAINERS_FAILURE,
 } from './_constants';
 
 const MOCK_DETAILS = {
@@ -65,14 +62,10 @@ export const handleGetLogs = ({ container }) => (dispatch) => {
       // resp = InertiaAPI.getContainerLogs(container);
     }
     if (resp.status !== 200) {
-      // this.setState({
-      //   errored: true,
-      //   logEntries: [],
-      // });
+      // TODO: error dispatch here
     }
 
     const reader = resp.body.getReader();
-    // this.setState({ logReader: reader });
     const decoder = new TextDecoder('utf-8');
     let buffer = '';
     const stream = () => promiseState(reader.closed)
@@ -90,30 +83,29 @@ export const handleGetLogs = ({ container }) => (dispatch) => {
                 buffer = parts.pop();
               }
 
+              // TODO: concatenate logs and add to dispatch
               dispatch({
                 type: GET_PROJECT_LOGS_SUCCESS,
                 payload: { logs: MOCK_LOGS },
               });
-              // this.setState({
-              //   logEntries: this.state.logEntries.concat(parts),
-              // });
 
               return stream();
             });
         }
         return null;
       })
-      .catch((err) => {
+      .catch(() => {
         dispatch({
+          // TODO: change to failure AC
           type: GET_PROJECT_LOGS_SUCCESS,
-          payload: { logs: MOCK_LOGS }});
+          payload: { logs: MOCK_LOGS } });
       });
 
     stream();
   } catch (e) {
     dispatch({
       type: GET_PROJECT_LOGS_FAILURE,
-      payload: { logs: MOCK_LOGS }});
+      payload: { logs: MOCK_LOGS } });
   }
 };
 

diff --git a/daemon/web/components/Table/Table.js b/daemon/web/components/Table/Table.js
@@ -40,11 +40,13 @@ export class TableRowExpandable extends React.Component {
       style,
       children,
       panel,
+      onClick,
     } = this.props;
 
     return (
       <div
         className="table-tr-expandable"
+        onClick={onClick}
         style={style}>
         <div
           className={`table-tr-expandable-inner ${this.state.expanded && 'expanded'}`}
@@ -65,6 +67,7 @@ TableRowExpandable.propTypes = {
   children: PropTypes.arrayOf(TableCell),
   panel: PropTypes.any,
   height: PropTypes.number,
+  onClick: PropTypes.func,
 };
 
 export const TableHeader = ({ children, style }) => (

diff --git a/daemon/web/pages/dashboard/Dashboard.js b/daemon/web/pages/dashboard/Dashboard.js
@@ -18,7 +18,7 @@ const styles = {
   container: {
     display: 'flex',
     flexFlow: 'column',
-    height: '100%',
+    height: 'min-content',
     alignItems: 'center',
     justifyContent: 'center',
     position: 'relative',
@@ -31,44 +31,9 @@ const styles = {
 };
 
 class DashboardWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      errored: false,
-      logEntries: [],
-      logReader: null,
-    };
-    this.getLogs = this.getLogs.bind(this);
-    this.getMessage = this.getMessage.bind(this);
-  }
-
   componentWillMount() {
     this.props.handleGetProjectDetails();
     this.props.handleGetContainers();
-    this.props.handleGetLogs({ container: this.props.container });
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.container !== this.props.container) {
-    }
-  }
-
-  async getLogs() {
-    if (this.state.logReader) await this.state.logReader.cancel();
-    this.setState({
-      errored: false,
-      logEntries: [],
-      logReader: null,
-    });
-  }
-
-  getMessage() {
-    if (this.state.errored) {
-      return <p style={styles.underConstruction}>Yikes, something went wrong</p>;
-    } else if (this.state.logEntries.length === 0) {
-      return <p style={styles.underConstruction}>No logs to show</p>;
-    }
-    return null;
   }
 
   render() {
@@ -79,6 +44,11 @@ class DashboardWrapper extends React.Component {
       message,
       buildType,
     } = this.props.project;
+    const {
+      containers,
+      handleGetLogs,
+      logs,
+    } = this.props;
 
     return (
       <div style={styles.container}>
@@ -115,30 +85,25 @@ class DashboardWrapper extends React.Component {
         <Table style={{ width: '90%', margin: '1rem' }}>
           <TableHeader>
             <TableRow>
-              <TableCell>Type/Name</TableCell>
-              <TableCell>Status</TableCell>
+              <TableCell style={{ flex: '0 0 30%' }}>Type/Name</TableCell>
+              <TableCell style={{ flex: '0 0 20%' }}>Status</TableCell>
               <TableCell>Last Updated</TableCell>
             </TableRow>
           </TableHeader>
 
           <TableBody>
-            {/* TODO: a foreach here */}
-            <TableRowExpandable
-              height={300}
-              panel={<TerminalView logs={this.props.logs} />}>
-              <TableCell>Commit</TableCell>
-              <TableCell>{commit}</TableCell>
-            </TableRowExpandable>
-
-            <TableRow>
-              <TableCell>Message</TableCell>
-              <TableCell>{message}</TableCell>
-            </TableRow>
-
-            <TableRow>
-              <TableCell>Build Type</TableCell>
-              <TableCell>{buildType}</TableCell>
-            </TableRow>
+            { containers.map(container => (
+              <TableRowExpandable
+                key={container.name}
+                height={300}
+                onClick={() => handleGetLogs({ container: container.name })}
+                panel={<TerminalView logs={logs} />}>
+                <TableCell style={{ flex: '0 0 30%' }}>Commit</TableCell>
+                <TableCell style={{ flex: '0 0 20%' }} />
+                <TableCell>{commit}</TableCell>
+              </TableRowExpandable>
+              ))
+            }
           </TableBody>
         </Table>
 
@@ -148,7 +113,11 @@ class DashboardWrapper extends React.Component {
 }
 DashboardWrapper.propTypes = {
   logs: PropTypes.array,
-  container: PropTypes.string,
+  containers: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    lastUpdated: PropTypes.string.isRequired,
+  })),
   project: PropTypes.shape({
     name: PropTypes.string.isRequired,
     branch: PropTypes.string.isRequired,

diff --git a/daemon/web/pages/main/Main.js b/daemon/web/pages/main/Main.js
@@ -39,81 +39,16 @@ const styles = {
     borderBottom: '1px solid #c1c1c1',
   },
 
-  sidebar: {
-    display: 'flex',
-    flexFlow: 'column',
-    width: '20rem',
-    height: '100%',
-    paddingTop: '0.5rem',
-    borderRight: '1px solid #c1c1c1',
-    backgroundColor: '#f0f0f0',
-  },
-
   main: {
     height: '100%',
     width: '100%',
     overflowY: 'scroll',
   },
-
-  button: {
-    flex: 'none',
-  },
-};
-
-const sidebarHeaderStyles = {
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '3rem',
-    width: '100%',
-    paddingLeft: '1.5rem',
-    paddingTop: '1rem',
-  },
-
-  text: {
-    textDecoration: 'none',
-    color: '#5f5f5f',
-  },
-};
-
-const sidebarTextStyles = {
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 'flex',
-    width: '100%',
-    paddingLeft: '2rem',
-    paddingTop: '0.5rem',
-  },
-
-  text: {
-    fontSize: '80%',
-    textDecoration: 'none',
-    color: '#101010',
-  },
-
-  button: {
-    fontSize: '80%',
-    textDecoration: 'none',
-    color: '#101010',
-  },
 };
 
 class MainWrapper extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      remoteVersion: '',
-
-      repoBranch: '',
-      repoCommitHash: '',
-      repoCommitMessage: '',
-      repoBuildType: '',
-      repoBuilding: false,
-      containers: [],
-
-      viewContainer: '',
-    };
 
     this.handleLogout = this.handleLogout.bind(this);
     this.handleGetStatus = this.handleGetStatus.bind(this);
@@ -135,16 +70,6 @@ class MainWrapper extends React.Component {
   async handleGetStatus() {
     const response = await InertiaAPI.getRemoteStatus();
     if (response.status !== 200) return new Error('bad response: ' + response);
-    const status = await response.json();
-    this.setState({
-      remoteVersion: status.version,
-      repoBranch: status.branch,
-      repoBuilding: status.build_active,
-      repoBuildType: status.build_type,
-      repoCommitHash: status.commit_hash,
-      repoCommitMessage: status.commit_message,
-      containers: status.containers,
-    });
     return null;
   }
 
@@ -180,7 +105,7 @@ class MainWrapper extends React.Component {
               <Route
                 exact
                 path={`${this.props.match.url}/dashboard`}
-                component={() => <Dashboard container={this.state.viewContainer} />}
+                component={() => <Dashboard />}
               />
               <Route
                 exact