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 &&
+    return !this.state.domainErr;
-      !this.state.isConfigLoading;
   }
 
   onSubmit(event) {
@@ -86,8 +57,8 @@ class PTP extends Component {
 
   render() {
     return (
-      <div className='ptp'>
+     <div>
-        {this.state.isConfigLoading ? <Loader/> : <h3>Config</h3>}
+      <h3>Config</h3>
       <table><tbody>
         <tr>
           <th align="left"> <label>Type</label> </th>
@@ -110,8 +81,22 @@ class PTP extends Component {
           <th> <button disabled={this.inputIsValid() ? undefined : true} onClick={this.onSubmit}>Submit</button> </th>
         </tr>
       </tbody></table>
-        <br/>
+     </div>
-        { this.state.isStatusLoading ? <Loader/> : <h3>Status</h3> }
+    )
+  }
+}
+
+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>
@@ -119,15 +104,15 @@ class PTP extends Component {
         </tr>
         <tr>
           <th align="left"> <label>Status</label> </th>
-            <th align="left"> <input value={this.state.status} disabled/> </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.state.gmid} disabled/> </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.state.jitter} disabled/> </th>
+          <th align="left"> <input value={this.props.jitter} disabled/> </th>
         </tr>
       </tbody></table>
      </div>
@@ -135,4 +120,69 @@ class PTP extends Component {
   }
 }
 
+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/> : 
+           <PTPConfig domain={this.state.domain} dscp={this.state.dscp}/> }
+        <br/>
+        { this.state.isStatusLoading ? <Loader/> : 
+           <PTPStatus status={this.state.status} gmid={this.state.gmid} jitter={this.state.jitter}/> }
+      </div>
+    )
+  }
+}
+
 export default PTP;