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,56 +27,26 @@ import Loader from './Loader';
 
 require('./styles.css');
 
-class PTP extends Component {
+
+class PTPConfig extends Component {
+  static propTypes = {
+    domain: PropTypes.number.isRequired,
+    dscp: PropTypes.number.isRequired,
+  };
+
   constructor(props) {
     super(props);
     this.state = {
-      domain: '',
+      domain: this.props.domain,
+      dscp: this.props.dscp,
       domainErr: false,
-      dscp: '',
-      status: '',
-      gmid: '',
-      jitter: '',
-      isConfigLoading: false,
-      isStatusLoading: false,
     };
     this.onSubmit = this.onSubmit.bind(this);
     this.inputIsValid = this.inputIsValid.bind(this);
   }
 
-  fetchStatus() {
-    this.setState({isStatusLoading: true});
-    RestAPI.getPTPStatus()
-      .then(response => response.json())
-      .then(
-        data => this.setState({
-           status: data.status, 
-           gmid: data.gmid, 
-           jitter: data.jitter, 
-           isStatusLoading: false
-        }))
-      .catch(err => this.setState({isStatusLoading: false}));
-  }
-  
-  componentDidMount() {
-    this.setState({isConfigLoading: true});
-    RestAPI.getPTPConfig()
-      .then(response => response.json())
-      .then(data =>
-        this.setState({domain: data.domain, dscp: data.dscp, isConfigLoading: false}))
-      .catch(err => this.setState({isConfigLoading: false}));
-
-    this.fetchStatus();
-    this.interval = setInterval(() => { this.fetchStatus() }, 10000)
-  }
-  
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
-
   inputIsValid() {
-    return !this.state.domainErr &&
-      !this.state.isConfigLoading;
+    return !this.state.domainErr;
   }
 
   onSubmit(event) {
@@ -84,52 +55,131 @@ class PTP extends Component {
       .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: 0,
+      domainErr: false,
+      dscp: 0,
+      status: '',
+      gmid: '',
+      jitter: 0,
+      isConfigLoading: false,
+      isStatusLoading: false,
+    };
+  }
+
+  fetchStatus() {
+    this.setState({isStatusLoading: true});
+    RestAPI.getPTPStatus()
+      .then(response => response.json())
+      .then(
+        data => this.setState({
+           status: data.status, 
+           gmid: data.gmid, 
+           jitter: parseInt(data.jitter, 10), 
+           isStatusLoading: false
+        }))
+      .catch(err => this.setState({isStatusLoading: false}));
+  }
+
+  fetchConfig() {
+    this.setState({isConfigLoading: true});
+    RestAPI.getPTPConfig()
+      .then(response => response.json())
+      .then(
+        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)
+  }
+  
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
   render() {
     return (
       <div className='ptp'>
-        {this.state.isConfigLoading ? <Loader/> : <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>
+        { this.state.isConfigLoading ? <Loader/> : 
+           <PTPConfig domain={this.state.domain} dscp={this.state.dscp}/> }
         <br/>
-        { this.state.isStatusLoading ? <Loader/> : <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.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>
+        { this.state.isStatusLoading ? <Loader/> : 
+           <PTPStatus status={this.state.status} gmid={this.state.gmid} jitter={this.state.jitter}/> }
       </div>
     )
   }