WebUI PTP component split into PTPConfig and PTPStatus components

webui/src/ConfigTabs.js

@@ -31,7 +31,7 @@ require('./styles.css');
 
 class ConfigTabs extends Component {
   static propTypes = {
-    currentTab: PropTypes.func.isRequired
+    currentTab: PropTypes.string.isRequired
   };
 
   render() {

webui/src/PTP.js

@@ -19,6 +19,7 @@
 //
 
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {toast} from 'react-toastify';
 
 import RestAPI from './Services';
@@ -26,21 +27,112 @@ import Loader from './Loader';
 
 require('./styles.css');
 
+
+class PTPConfig extends Component {
+  static propTypes = {
+    domain: PropTypes.number.isRequired,
+    dscp: PropTypes.number.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      domain: this.props.domain,
+      dscp: this.props.dscp,
+      domainErr: false,
+    };
+    this.onSubmit = this.onSubmit.bind(this);
+    this.inputIsValid = this.inputIsValid.bind(this);
+  }
+
+  inputIsValid() {
+    return !this.state.domainErr;
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+    RestAPI.setPTPConfig(this.state.domain, this.state.dscp)
+      .then(response => toast.success('PTP config updated'));
+  }
+
+  render() {
+    return (
+     <div>
+      <h3>Config</h3>
+      <table><tbody>
+        <tr>
+          <th align="left"> <label>Type</label> </th>
+          <th align="left"> <label>PTPv2</label> </th>
+        </tr>
+        <tr>
+          <th align="left"> <label>Domain</label> </th>
+           <th align="left"> <input type='number' min='0' max='127' className='input-number' value={this.state.domain} onChange={e => this.setState({domain: e.target.value, domainErr: !e.currentTarget.checkValidity()})} required/> </th>
+        </tr>
+        <tr>
+          <th align="left"> <label>DSCP</label> </th>
+          <th align="left">
+            <select value={this.state.dscp} onChange={e => this.setState({dscp: e.target.value})}>
+              <option value='46'>46 (EF)</option>
+              <option value='48'>48 (CS6)</option>
+            </select>
+          </th>
+        </tr>
+        <tr>
+          <th> <button disabled={this.inputIsValid() ? undefined : true} onClick={this.onSubmit}>Submit</button> </th>
+        </tr>
+      </tbody></table>
+     </div>
+    )
+  }
+}
+
+class PTPStatus extends Component {
+  static propTypes = {
+    status: PropTypes.string.isRequired,
+    gmid: PropTypes.string.isRequired,
+    jitter: PropTypes.number.isRequired,
+  };
+
+  render() {
+    return (
+     <div>
+      <h3>Status</h3>
+      <table><tbody>
+        <tr>
+          <th align="left"> <label>Mode</label> </th>
+          <th align="left"> <input value='Slave' disabled/> </th>
+        </tr>
+        <tr>
+          <th align="left"> <label>Status</label> </th>
+          <th align="left"> <input value={this.props.status} disabled/> </th>
+        </tr>
+        <tr>
+          <th align="left"> <label>GMID</label> </th>
+          <th align="left"> <input value={this.props.gmid} disabled/> </th>
+        </tr>
+        <tr>
+          <th align="left"> <label>Delta</label> </th>
+          <th align="left"> <input value={this.props.jitter} disabled/> </th>
+        </tr>
+      </tbody></table>
+     </div>
+    )
+  }
+}
+
 class PTP extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      domain: '',
+      domain: 0,
       domainErr: false,
-      dscp: '',
+      dscp: 0,
       status: '',
       gmid: '',
-      jitter: '',
+      jitter: 0,
       isConfigLoading: false,
       isStatusLoading: false,
     };
-    this.onSubmit = this.onSubmit.bind(this);
-    this.inputIsValid = this.inputIsValid.bind(this);
   }
 
   fetchStatus() {
@@ -51,21 +143,28 @@ class PTP extends Component {
         data => this.setState({
            status: data.status, 
            gmid: data.gmid, 
-           jitter: data.jitter, 
+           jitter: parseInt(data.jitter, 10), 
            isStatusLoading: false
         }))
       .catch(err => this.setState({isStatusLoading: false}));
   }
-  
+
-  componentDidMount() {
+  fetchConfig() {
     this.setState({isConfigLoading: true});
     RestAPI.getPTPConfig()
       .then(response => response.json())
-      .then(data =>
+      .then(
-        this.setState({domain: data.domain, dscp: data.dscp, isConfigLoading: false}))
+        data => this.setState({
+          domain: parseInt(data.domain, 10), 
+          dscp: parseInt(data.dscp, 10), 
+          isConfigLoading: false
+        }))
       .catch(err => this.setState({isConfigLoading: false}));
-
+  }
+  
+  componentDidMount() {
     this.fetchStatus();
+    this.fetchConfig();
     this.interval = setInterval(() => { this.fetchStatus() }, 10000)
   }
   
@@ -73,63 +172,14 @@ class PTP extends Component {
     clearInterval(this.interval);
   }
 
-  inputIsValid() {
-    return !this.state.domainErr &&
-      !this.state.isConfigLoading;
-  }
-
-  onSubmit(event) {
-    event.preventDefault();
-    RestAPI.setPTPConfig(this.state.domain, this.state.dscp)
-      .then(response => toast.success('PTP config updated'));
-  }
-  
   render() {
     return (
       <div className='ptp'>
-        {this.state.isConfigLoading ? <Loader/> : <h3>Config</h3>}
+        { this.state.isConfigLoading ? <Loader/> : 
-        <table><tbody>
+           <PTPConfig domain={this.state.domain} dscp={this.state.dscp}/> }
-          <tr>
-            <th align="left"> <label>Type</label> </th>
-            <th align="left"> <label>PTPv2</label> </th>
-          </tr>
-          <tr>
-            <th align="left"> <label>Domain</label> </th>
-             <th align="left"> <input type='number' min='0' max='127' className='input-number' value={this.state.domain} onChange={e => this.setState({domain: e.target.value, domainErr: !e.currentTarget.checkValidity()})} required/> </th>
-          </tr>
-          <tr>
-            <th align="left"> <label>DSCP</label> </th>
-            <th align="left">
-              <select value={this.state.dscp} onChange={e => this.setState({dscp: e.target.value})}>
-                <option value='46'>46 (EF)</option>
-                <option value='48'>48 (CS6)</option>
-              </select>
-            </th>
-          </tr>
-          <tr>
-            <th> <button disabled={this.inputIsValid() ? undefined : true} onClick={this.onSubmit}>Submit</button> </th>
-          </tr>
-        </tbody></table>
         <br/>
-        { this.state.isStatusLoading ? <Loader/> : <h3>Status</h3> }
+        { this.state.isStatusLoading ? <Loader/> : 
-        <table><tbody>
+           <PTPStatus status={this.state.status} gmid={this.state.gmid} jitter={this.state.jitter}/> }
-          <tr>
-            <th align="left"> <label>Mode</label> </th>
-            <th align="left"> <input value='Slave' disabled/> </th>
-          </tr>
-          <tr>
-            <th align="left"> <label>Status</label> </th>
-            <th align="left"> <input value={this.state.status} disabled/> </th>
-          </tr>
-          <tr>
-            <th align="left"> <label>GMID</label> </th>
-            <th align="left"> <input value={this.state.gmid} disabled/> </th>
-          </tr>
-          <tr>
-            <th align="left"> <label>Delta</label> </th>
-            <th align="left"> <input value={this.state.jitter} disabled/> </th>
-          </tr>
-        </tbody></table>
       </div>
     )
   }