feat: [OS-25] PSS feedback frontend (#341)

* Initial refactoring * Revert "Initial refactoring" This reverts commit dd38aa1. * Add new component * Add components for current status * Update * Init work for PSS Feedback * Updates to code
esnet · Jul 29, 2019 · fa1d781 · fa1d781
1 parent 858afd4
commit fa1d781
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 6 deletions.
diff --git a/frontend/src/main/js/apps/detailsApp.js b/frontend/src/main/js/apps/detailsApp.js
@@ -5,6 +5,8 @@ import { Row, Col } from "reactstrap";
 import DetailsControls from "../components/details/detailsControls";
 import DetailsComponents from "../components/details/detailsComponents";
 import DetailsInfo from "../components/details/detailsInfo";
+import DetailsStatus from "../components/details/detailsStatus";
+import DetailsButtons from "../components/details/detailsButtons";
 import myClient from "../agents/client";
 import transformer from "../lib/transform";
 
@@ -116,9 +118,15 @@ class DetailsApp extends Component {
                     </Col>
                     <Col sm={6} md={6} lg={6}>
                         <DetailsInfo refresh={this.refresh} />
+                        <br />
+                        <DetailsComponents />
                     </Col>
                     <Col sm={3} md={3} lg={3}>
-                        <DetailsComponents />
+                        <DetailsStatus />
+                        <br />
+                        <DetailsButtons />
+                        {/* <br />
+                        <DetailsComponents /> */}
                     </Col>
                 </Row>
             );

diff --git a/frontend/src/main/js/components/details/detailsComponents.js b/frontend/src/main/js/components/details/detailsComponents.js
@@ -76,7 +76,7 @@ class DetailsComponents extends Component {
 
         return (
             <Card>
-                <CardHeader className="p-1">Components {help}</CardHeader>
+                <CardHeader>Components {help}</CardHeader>
                 <CardBody>
                     <CardSubtitle>Connection info:</CardSubtitle>
                     <ListGroup className="p-1">

diff --git a/frontend/src/main/js/components/details/detailsControls.js b/frontend/src/main/js/components/details/detailsControls.js
@@ -36,7 +36,7 @@ class DetailsControls extends Component {
 
         return (
             <Card>
-                <CardHeader className="p-0">Search</CardHeader>
+                <CardHeader>Search</CardHeader>
                 <CardBody>
                     <FormGroup>
                         <Label>Connection ID:</Label>{" "}

diff --git a/frontend/src/main/js/components/details/detailsGeneral.js b/frontend/src/main/js/components/details/detailsGeneral.js
@@ -97,7 +97,7 @@ class DetailsGeneral extends Component {
 
             return (
                 <Card>
-                    <CardHeader className="p-1">Info</CardHeader>
+                    <CardHeader>Connection Information</CardHeader>
                     <CardBody>
                         <Nav tabs>
                             <NavItem>
@@ -140,8 +140,8 @@ class DetailsGeneral extends Component {
                                 {editDetails}
                                 <br />
                                 {states}
-                                <br />
-                                <DetailsButtons />
+                                {/* <br /> */}
+                                {/* <DetailsButtons /> */}
                             </TabPane>
                             <TabPane tabId="drawing" title="Drawing">
                                 <DetailsDrawing />

diff --git a/frontend/src/main/js/components/details/detailsStatus.js b/frontend/src/main/js/components/details/detailsStatus.js
@@ -0,0 +1,80 @@
+import React, { Component } from "react";
+import { withRouter } from "react-router-dom";
+import { action } from "mobx";
+import { observer, inject } from "mobx-react";
+import Moment from "moment/moment";
+import { Card, CardBody, CardHeader, FormGroup, Input } from "reactstrap";
+
+import myClient from "../../agents/client";
+
+@inject("connsStore")
+@observer
+class DetailsStatus extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentWillMount() {
+        this.refreshStatus();
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.refreshTimeout);
+    }
+
+    refreshStatus = () => {
+        const conn = this.props.connsStore.store.current;
+        const connectionId = conn.connectionId;
+
+        if (connectionId !== undefined) {
+            if (conn.phase === "RESERVED") {
+                // In case of ASAP, handle the case
+                const cur = new Moment().add(30, 's');
+                const beg = Moment(conn.reserved.schedule.beginning * 1000);
+                if (cur.isAfter(beg)) {
+                    myClient.submitWithToken("GET", "/protected/pss/work_status/" + connectionId, "").then(
+                        action(response => {
+                            let explanation = JSON.parse(response)['explanation']
+                            this.handleStatusChange(explanation);
+                        })
+                    );
+                    this.refreshTimeout = setTimeout(this.refreshStatus, 3000); // update per 3 seconds
+                }
+            } else {
+                this.handleStatusChange('Can only get PSS status for a RESERVED connection');
+            }
+        } else {
+            this.refreshTimeout = setTimeout(this.refreshStatus, 3000); // update per 3 seconds
+        }
+    }
+
+    handleStatusChange(result) {
+        let explanation = '';
+        if (result === null) {
+            explanation = 'PSS is IDLE';
+        } else {
+            explanation = result;
+        }
+        this.props.connsStore.setPssStatus(explanation);
+    }
+
+    render() {
+        const store = this.props.connsStore.store;
+        return (
+            <Card>
+                <CardHeader> Current Status </CardHeader>
+                <CardBody>
+                    <FormGroup>
+                        <Input
+                            type="text"
+                            disabled
+                            value={store.pssStatus}
+                        />
+                    </FormGroup>
+                </CardBody>
+            </Card>
+        );
+    }
+}
+
+export default withRouter(DetailsStatus);
diff --git a/frontend/src/main/js/stores/connsStore.js b/frontend/src/main/js/stores/connsStore.js
@@ -19,6 +19,7 @@ class ConnectionsStore {
             dirty: false
         },
         foundCurrent: false,
+        pssStatus: "Status not loaded yet...",
         selected: {},
         commands: new Map(),
         statuses: new Map(),
@@ -149,6 +150,10 @@ class ConnectionsStore {
         this.store.history = history;
     }
 
+    @action setPssStatus(status) {
+        this.store.pssStatus = status;
+    }
+
     @action showControls(value) {
         this.controls.show = value;
     }