import React, {Component} from 'react';
import Log from './Log';
import {Link, Route} from 'react-router-dom';
import Footer from './Footer';

import './css/logs.css';

class Logs extends Component {

  render() {
    return (

        <div className='logs-component'>
          <h1>Logs</h1>

          <ul>
            <li><Link to='/logs/a'>A</Link></li>
            <li><Link to='/logs/b'>B</Link></li>
          </ul>

          <Route path='/logs/a' component={ Log }/>

          <Route path='/logs/b' render={ () => {
            return <Log host='localhost'/>;
          }}/>

          <Footer link={<Link to='/'>View the temperatures</Link>}/>

        </div>
    );
  }
}

export default Logs;

@@ -58,16 +58,80 @@
 ./Log';%0A
+import Footer from './Footer';%0Aimport Spinner from './Spinner';%0A
 import %7B
@@ -175,39 +175,36 @@
 %0Aimport 
-Footer from './Footer';
+axios from %22axios%22;%0A
 %0A%0Aimport
@@ -261,40 +261,452 @@
 %0A%0A  
-render() %7B%0A    return (%0A
+constructor(props) %7B%0A    super(props);%0A    this.state = %7B%0A      loading: true,%0A      error: null,%0A      connections: %5B%5D%0A    %7D%0A  %7D%0A%0A  render() %7B%0A%0A    let element = null;%0A    if (this.state.loading === true)%0A      element = %3CSpinner/%3E;%0A    else if (this.state.error)%0A      element = %3Cpre className=%22error%22%3E%7B this.state.error.toString() %7D%3C/pre%3E;%0A    else%0A      element = this.renderLogs();%0A%0A    return (element);%0A  %7D
 %0A  
+%0A
   
-   
+renderLogs() %7B%0A    return
  %3Cdi
@@ -741,20 +741,16 @@
 %3E%0A      
-    
 %3Ch1%3ELogs
@@ -766,102 +766,451 @@
     
-    %3Cul%3E
+%7B this.renderLinks() %7D%0A      %7B this.renderRoutes() %7D
 %0A      
+%0A
       %3C
-li%3E%3CLink to='/logs/a'%3EA%3C/Link%3E%3C/li%3E%0A            %3Cli%3E%3CLink to='/logs/b'%3EB
+Footer link=%7B%3CLink to='/'%3EView the temperatures%3C/Link%3E%7D/%3E%0A    %3C/div%3E%0A  %7D%0A%0A  renderLinks() %7B%0A    return %3Cul%3E%0A      %7B%0A        this.state.connections.map((value, index) =%3E %7B%0A          let path = '/logs/' + value.host.name.toLowerCase();%0A          let link = value.host.name%5B0%5D.toUpperCase() + value.host.name.substr(1);%0A          return %3Cli key=%7Bindex%7D%3E%3CLink to=%7B path %7D%3E%7B link %7D
 %3C/Li
@@ -1217,16 +1217,17 @@
 nk%3E%3C/li%3E
+;
 %0A       
@@ -1231,101 +1231,258 @@
     
-  %3C/ul%3E%0A%0A          %3CRoute
+%7D)%0A      %7D%0A    %3C/ul%3E;%0A  %7D%0A%0A  renderRoutes() %7B%0A    return %3Cdiv%3E%0A      %7B%0A        this.state.connections.map((value, index) =%3E %7B%0A          let
  path
-=
+ = 
 '/logs/
-a
 ' 
-component=%7B Log %7D/%3E%0A%0A          %3CRoute path='/logs/b'
++ value.host.name.toLowerCase();%0A          return %3CRoute key=%7B value.host.name %7D path=%7B path %7D
  ren
@@ -1528,19 +1528,27 @@
 ost=
-'localhost'
+%7B value.ip.value %7D 
 /%3E;%0A
@@ -1565,106 +1565,499 @@
 %7D%7D/%3E
-%0A
+;%0A        %7D)
 %0A      
+%7D%0A
     %3C
-Footer link=%7B%3CLink to='/'%3EView the temperatures%3C/Link%3E%7D/%3E%0A%0A        %3C/div%3E%0A    
+/div%3E%0A  %7D%0A%0A  componentDidMount() %7B%0A    this.fetchConnections();%0A  %7D%0A%0A  fetchConnections() %7B%0A    axios.get('/connections')%0A        .then(response =%3E %7B%0A          console.log(response.data);%0A          this.setState(%7B%0A            loading: false,%0A            error: null,%0A            connections: response.data%0A          %7D)%0A        %7D)%0A        .catch(error =%3E %7B%0A          this.setState(%7B%0A            loading: false,%0A            error: error%0A          %7D)%0A        %7D
 );%0A  %7D%0A
+%0A
 %7D%0A%0Ae

add tabs for each log and dynamically load the list of log files