Add template name to UI

[clamp.git] / ui-react / src / components / loop_viewer / logs / LoopLogs.js

diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
index d7d983d..b3f0526 100644 (file)
--- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -25,6 +25,15 @@ import Table from 'react-bootstrap/Table';
 import LoopCache from '../../../api/LoopCache';
 import styled from 'styled-components';
 
+const LoopLogsHeaderDivStyled = styled.div`
+       background-color: ${props => props.theme.loopLogsHeaderBackgroundColor};
+       padding: 10px 10px;
+       color: ${props => props.theme.loopLogsHeaderFontColor};
+`
+const TableStyled = styled(Table)`
+    
+    overflow: auto;
+`
 const TableRow = ({ logRow }) => (
        <tr>
                <td>{logRow.logInstant}</td>
@@ -35,22 +44,15 @@ const TableRow = ({ logRow }) => (
 
 )
 
-const LoopLogsHeaderDivStyled = styled.div`
-       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-       padding: 10px 10px;
-       color: ${props => props.theme.loopViewerHeaderFontColor};
-       overflow: auto;
-`
-
 export default class LoopLogs extends React.Component {
 
        state = {
-               loopCache: new LoopCache({}),
+               loopCache: new LoopCache({})
        }
        constructor(props) {
                super(props);
                this.renderLogs = this.renderLogs.bind(this);
-               this.state.loopCache=props.loopCache;
+               this.state.loopCache = props.loopCache;
        }
 
        shouldComponentUpdate(nextProps, nextState) {
@@ -59,23 +61,23 @@ export default class LoopLogs extends React.Component {
 
        componentWillReceiveProps(newProps) {
                this.setState({
-                       loopCache: newProps.loopCache,
+                       loopCache: newProps.loopCache
                });
        }
 
        renderLogs() {
                if (this.state.loopCache.getLoopLogsArray() != null) {
-               return (
-                       this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
-               )
-       } 
+                       return (
+                               this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
+                       )
+               }
        }
 
        render() {
                return (
                        <LoopLogsHeaderDivStyled>
                                <label>Loop Logs</label>
-                               <Table striped hover bordeless variant responsive>
+                               <TableStyled striped hover variant responsive>
                                        <thead>
                                                <tr>
                                                        <th><span align="left">Date</span></th>
@@ -87,7 +89,7 @@ export default class LoopLogs extends React.Component {
                                        <tbody>
                                                {this.renderLogs()}
                                        </tbody>
-                               </Table>
+                               </TableStyled>
                        </LoopLogsHeaderDivStyled>
 
                );