dashboard assembly and redux

ubclaunchpad · Jun 29, 2018 · 1783b07 · 1783b07
1 parent e51e133
commit 1783b07
Show file tree

Hide file tree

Showing 6 changed files with 254 additions and 146 deletions.
diff --git a/daemon/web/actions/_constants.js b/daemon/web/actions/_constants.js
@@ -1,3 +1,11 @@
 export const TEST_DASHBOARD_ACTION = 'TEST_DASHBOARD_ACTION';
 export const TEST_LOGIN_ACTION = 'TEST_LOGIN_ACTION';
 export const TEST_HOME_ACTION = 'TEST_HOME_ACTION';
+
+// dashboard page
+export const GET_PROJECT_DETAILS_SUCCESS = 'GET_PROJECT_DETAILS_SUCCESS';
+export const GET_PROJECT_DETAILS_FAILURE = 'GET_PROJECT_DETAILS_FAILURE';
+export const GET_PROJECT_LOGS_SUCCESS = 'GET_PROJECT_LOGS_SUCCESS';
+export const GET_PROJECT_LOGS_FAILURE = 'GET_PROJECT_LOGS_FAILURE';
+export const GET_CONTAINERS_SUCCESS = 'GET_CONTAINERS_SUCCESS';
+export const GET_CONTAINERS_FAILURE = 'GET_CONTAINERS_FAILURE';
diff --git a/daemon/web/actions/dashboard.js b/daemon/web/actions/dashboard.js
@@ -1,13 +1,127 @@
+// import InertiaAPI from '../common/API';
 import {
-  TEST_DASHBOARD_ACTION,
+  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 = {
+  name: 'your-project-name',
+  branch: 'master',
+  commit: 'e51e133565bd0b0fda6caf69014dd2b2b24bfbaa',
+  message: 'commit message goes here',
+  buildType: 'docker-compose',
+};
+
+const MOCK_LOGS = [
+  'log1asdasdasdasdasdasdasdssdasdasdssdasdasdssdasdasdssdasdasdsa',
+  'log2asdasdasdasdsdassdasdasdssdasdasdssdasdasdssdasdasdsdsdasds',
+  'log3dasdsdazxcxzsdasdasdssdasdasdssdasdasdssdasdasdsxxxxxxxxxx',
+  'log4dasdsdasdsdasdasdssdasdasdssdasdasdssdasdasdsxzczxczxs',
+  'log5dasdsdaasdsdasdasdssdasdasdssdasdasdssdasdasdsasdasdsds',
+  'log6dasdsdaszsdasdasdssdasdasdssdasdasdssdasdasdsxczxczxczxcwqdqds',
+  'log7dasdsdaxcsdasdasdssdasdasdssdasdasdssdasdasdszxczzxcsds',
+];
+
+const MOCK_CONTAINERS = [
+  {
+    name: '/inertia-deploy-test',
+    status: 'ACTIVE',
+    lastUpdated: '2018-01-01 00:00',
+  },
+  {
+    name: '/docker-compose',
+    status: 'ACTIVE',
+    lastUpdated: '2018-01-01 00:00',
+  },
+];
+
+function promiseState(p) {
+  const t = {};
+
+  return Promise.race([p, t])
+    .then(v => (v === t ? 'pending' : ('fulfilled', () => 'rejected')));
+}
 
-export const testAction = payload => (dispatch) => {
-  // remove later
-  console.log('dashboard action fired!');
+export const handleGetProjectDetails = () => (dispatch) => {
+  // TODO: put fetch request here
   dispatch({
-    type: TEST_DASHBOARD_ACTION,
-    payload,
+    type: GET_PROJECT_DETAILS_SUCCESS,
+    payload: { project: MOCK_DETAILS },
   });
 };
+
+export const handleGetLogs = ({ container }) => (dispatch) => {
+  try {
+    let resp;
+    if (!container) {
+      resp = MOCK_LOGS;
+      // resp = InertiaAPI.getContainerLogs();
+    } else {
+      resp = MOCK_LOGS;
+      // resp = InertiaAPI.getContainerLogs(container);
+    }
+    if (resp.status !== 200) {
+      // this.setState({
+      //   errored: true,
+      //   logEntries: [],
+      // });
+    }
+
+    const reader = resp.body.getReader();
+    // this.setState({ logReader: reader });
+    const decoder = new TextDecoder('utf-8');
+    let buffer = '';
+    const stream = () => promiseState(reader.closed)
+      .then((s) => {
+        if (s === 'pending') {
+          return reader.read()
+            .then((data) => {
+              const chunk = decoder.decode(data.value);
+              const parts = chunk.split('\n')
+                .filter(c => c);
+
+              parts[0] = buffer + parts[0];
+              buffer = '';
+              if (!chunk.endsWith('\n')) {
+                buffer = parts.pop();
+              }
+
+              dispatch({
+                type: GET_PROJECT_LOGS_SUCCESS,
+                payload: { logs: MOCK_LOGS },
+              });
+              // this.setState({
+              //   logEntries: this.state.logEntries.concat(parts),
+              // });
+
+              return stream();
+            });
+        }
+        return null;
+      })
+      .catch((err) => {
+        dispatch({
+          type: GET_PROJECT_LOGS_SUCCESS,
+          payload: { logs: MOCK_LOGS }});
+      });
+
+    stream();
+  } catch (e) {
+    dispatch({
+      type: GET_PROJECT_LOGS_FAILURE,
+      payload: { logs: MOCK_LOGS }});
+  }
+};
+
+export const handleGetContainers = () => (dispatch) => {
+  // TODO: put fetch request here
+  dispatch({
+    type: GET_CONTAINERS_SUCCESS,
+    payload: { containers: MOCK_CONTAINERS },
+  });
+};
+
diff --git a/daemon/web/components/Table/Table.js b/daemon/web/components/Table/Table.js
@@ -19,7 +19,7 @@ export const TableRow = ({ style, children }) => (
 );
 TableRow.propTypes = {
   style: PropTypes.object,
-  children: PropTypes.arrayOf(TableCell),
+  children: PropTypes.any,
 };
 
 export class TableRowExpandable extends React.Component {

diff --git a/daemon/web/pages/dashboard/Dashboard.js b/daemon/web/pages/dashboard/Dashboard.js
@@ -3,13 +3,21 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import InertiaAPI from '../../common/API';
-import LogView from '../../components/LogView';
 import * as dashboardActions from '../../actions/dashboard';
+import TerminalView from '../../components/TerminalView/TerminalView';
+import {
+  Table,
+  TableCell,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableRowExpandable,
+} from '../../components/Table/Table';
 
 const styles = {
   container: {
     display: 'flex',
+    flexFlow: 'column',
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
@@ -22,13 +30,6 @@ const styles = {
   },
 };
 
-function promiseState(p) {
-  const t = {};
-
-  return Promise.race([p, t])
-    .then(v => (v === t ? 'pending' : ('fulfilled', () => 'rejected')));
-}
-
 class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);
@@ -41,13 +42,14 @@ class DashboardWrapper extends React.Component {
     this.getMessage = this.getMessage.bind(this);
   }
 
-  componentDidMount() {
-    this.getLogs();
+  componentWillMount() {
+    this.props.handleGetProjectDetails();
+    this.props.handleGetContainers();
+    this.props.handleGetLogs({ container: this.props.container });
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.container !== this.props.container) {
-      this.getLogs();
     }
   }
 
@@ -58,53 +60,6 @@ class DashboardWrapper extends React.Component {
       logEntries: [],
       logReader: null,
     });
-    try {
-      let resp;
-      if (!this.props.container) {
-        resp = await InertiaAPI.getContainerLogs();
-      } else {
-        resp = await InertiaAPI.getContainerLogs(this.props.container);
-      }
-      if (resp.status !== 200) {
-        this.setState({
-          errored: true,
-          logEntries: [],
-        });
-      }
-
-      const reader = resp.body.getReader();
-      this.setState({ logReader: reader });
-
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-      const stream = () => promiseState(reader.closed)
-        .then((s) => {
-          if (s === 'pending') {
-            return reader.read()
-              .then((data) => {
-                const chunk = decoder.decode(data.value);
-                const parts = chunk.split('\n')
-                  .filter(c => c);
-
-                parts[0] = buffer + parts[0];
-                buffer = '';
-                if (!chunk.endsWith('\n')) {
-                  buffer = parts.pop();
-                }
-
-                this.setState({
-                  logEntries: this.state.logEntries.concat(parts),
-                });
-
-                return stream();
-              });
-          }
-          return null;
-        });
-      stream();
-    } catch (e) {
-      // TODO: Log error message
-    }
   }
 
   getMessage() {
@@ -117,21 +72,100 @@ class DashboardWrapper extends React.Component {
   }
 
   render() {
+    const {
+      name,
+      branch,
+      commit,
+      message,
+      buildType,
+    } = this.props.project;
+
     return (
       <div style={styles.container}>
-        {this.getMessage()}
-        <LogView logs={this.state.logEntries} />
+        <Table style={{ width: '90%', margin: '1rem' }}>
+          <TableHeader>
+            <TableRow>
+              <TableCell>{name}</TableCell>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            <TableRow>
+              <TableCell>Branch</TableCell>
+              <TableCell>{branch}</TableCell>
+            </TableRow>
+
+            <TableRow>
+              <TableCell>Commit</TableCell>
+              <TableCell>{commit}</TableCell>
+            </TableRow>
+
+            <TableRow>
+              <TableCell>Message</TableCell>
+              <TableCell>{message}</TableCell>
+            </TableRow>
+
+            <TableRow>
+              <TableCell>Build Type</TableCell>
+              <TableCell>{buildType}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+
+        <Table style={{ width: '90%', margin: '1rem' }}>
+          <TableHeader>
+            <TableRow>
+              <TableCell>Type/Name</TableCell>
+              <TableCell>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>
+          </TableBody>
+        </Table>
+
       </div>
     );
   }
 }
 DashboardWrapper.propTypes = {
+  logs: PropTypes.array,
   container: PropTypes.string,
+  project: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    branch: PropTypes.string.isRequired,
+    commit: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    buildType: PropTypes.string.isRequired,
+  }),
+  handleGetLogs: PropTypes.func,
+  handleGetContainers: PropTypes.func,
+  handleGetProjectDetails: PropTypes.func,
 };
 
 const mapStateToProps = ({ Dashboard }) => {
   return {
-    testState: Dashboard.testState,
+    project: Dashboard.project,
+    logs: Dashboard.logs,
+    containers: Dashboard.containers,
   };
 };