add server bar

src/StatsTab.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import CardStats from './CardStats';
+import ServerBar from './serverBar';
+
 import { PageHeader, Panel} from 'react-bootstrap';
 
 
@@ -14,6 +16,7 @@ export default class StatsTab extends Component {
 
   componentDidMount = () => {
     this.getStats();
+    this.getServerState();
   }
 
   getStats = async () => {
@@ -38,6 +41,29 @@ export default class StatsTab extends Component {
     });
   }
 
+  getServerState = async () => {
+    let serverState;
+    const homeServer = this.props.server;
+    const accessToken = this.props.token;
+
+    try {
+      const serverStateRequest = await fetch(homeServer+ '_matrix/client/r0/watcha_server_state', {
+        method: 'GET',
+        headers: {
+          'Authorization': 'Bearer '+accessToken,
+        },
+      });
+
+      serverState = JSON.parse(await serverStateRequest.text());
+    } catch (e) {
+      console.log('error: ' + e);
+      return;
+    }
+    this.setState({
+      serverState: serverState,
+    });
+  }
+
 
   render() {
     let membersData;
@@ -45,6 +71,7 @@ export default class StatsTab extends Component {
     let bigRoomsData;
     let oneOnOneData;
     let activeRooms;
+    let serverState;
     const usersLines = [];
     const roomsLines = [];
     if (this.state.stats) {
@@ -59,6 +86,14 @@ export default class StatsTab extends Component {
           {label: 'One on One', data: oneOnOneData},
           {label: 'Inactive', data: bigRoomsData-activeRooms});
     }
+    if (this.state.serverState) {
+      serverState =
+      <div>
+        <ServerBar label='CPU Usage' percent={this.state.serverState['cpu']['average']} />
+        <ServerBar label='Memory Usage' percent={this.state.serverState['memory']['memory']['percent']} />
+        <ServerBar label='Disk Usage' percent={this.state.serverState['disk']['percent']} />
+      </div>;
+    }
     return (
       <div>
         <PageHeader>
@@ -68,13 +103,25 @@ export default class StatsTab extends Component {
           <CardStats lines={usersLines} icon='user' title='Users' />
           <CardStats lines={roomsLines} icon='comment' title='Rooms' />
         </div>
-        <Panel bsStyle="primary">
-          <Panel.Heading>
-            <Panel.Title componentClass="h3">Server State</Panel.Title>
+        <div className='statsPanelsContainer'>
+          <Panel bsStyle="primary" className='statsPanel'>
+            <Panel.Heading>
+              <Panel.Title componentClass="h3">Server State</Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              { serverState }
+            </Panel.Body>
+          </Panel>
 
-          </Panel.Heading>
-          <Panel.Body>Panel content</Panel.Body>
-        </Panel>
+          <Panel bsStyle="primary" className="statsPanel">
+            <Panel.Heading>
+              <Panel.Title componentClass="h3">Server Log</Panel.Title>
+            </Panel.Heading>
+            <Panel.Body>
+              log
+            </Panel.Body>
+          </Panel>
+        </div>
       </div>
     );
   }

src/serverBar.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { ProgressBar } from 'react-bootstrap';
+
+
+export default class ServerBar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+
+    };
+  }
+
+  render() {
+    return (
+      <div className = 'ProgressBarContainer'>
+        <div>{ this.props.label }</div>
+        <ProgressBar now={this.props.percent} label={`${this.props.percent}%`} />
+      </div>
+    );
+  }
+}