response viewer component added

invana · May 29, 2021 · ee6fe11 · ee6fe11
1 parent a8e6db4
commit ee6fe11
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 46 deletions.
diff --git a/src/web/viewlets/canvas/graph-canvas.js b/src/web/viewlets/canvas/graph-canvas.js
@@ -16,12 +16,11 @@ import CanvasArtBoard from "../../interface/canvas/canvas-art-board";
 import "./canvas.scss";
 import DataSidebarViewlet from "../data-management/data-sidebar";
 import ElementOptions from "../../interface/element-options";
-import {Button, ListGroup, Modal, Nav} from "react-bootstrap";
+import {Button, ListGroup, Modal} from "react-bootstrap";
 import CanvasDisplaySettings from "./canvas-display-settings";
 import LoadingDiv from "./loading";
 import LambdaSettingsView from "./lambda-settings";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faWindowClose} from "@fortawesome/free-solid-svg-icons";
+import ResponseViewer from "./response-viewer";
 
 
 export default class GraphCanvas extends DefaultRemoteComponent {
@@ -804,49 +803,12 @@ export default class GraphCanvas extends DefaultRemoteComponent {
                                 </Modal.Title>
                             </Modal.Header>
                             <Modal.Body className={"overflow-auto "}>
-                                <code>
-                                    <pre className={"p-3 bg-light border mb-0"}
-                                         style={{
-                                             "maxHeight": "calc(100vh - 200px)",
-                                             "maxWidth": "calc(100vw - 100px)",
-                                             "minWidth": "720px"
-                                         }}
-                                    >{JSON.stringify(this.state.lastResponse, null, 2)}</pre>
-                                </code>
-                                <div className="row mt-2">
-                                    <div className="col col-9">
-
-                                        <Nav className="">
-
-                                            <Nav.Item className={"mr-3 "}>
-                                                Took {
-                                                this.state.lastResponseElapsedTime > 0
-                                                    ?
-                                                    <React.Fragment>{this.state.lastResponseElapsedTime} seconds</React.Fragment>
-                                                    : <React.Fragment>less than a second</React.Fragment>
-                                            }
-
-                                            </Nav.Item>
-                                            <Nav.Item className={"mr-3 "}>
-                                                   <span style={{
-                                                       'color': ` ${this.state.lastResponseStatusCode === 200 ? 'green' : 'red'}`,
-                                                       "fontWeight": "bold"
-                                                   }}>
-
-                                                {this.state.lastResponseStatusCode} response</span>
-                                            </Nav.Item>
-                                            <Nav.Item className={"mr-3 "}>
-                                                <Button variant={"link"}
-                                                        className={"p-0"}
-                                                        onClick={() => this.setModalContentName(null)}>
-                                                    <FontAwesomeIcon icon={faWindowClose}/>
-                                                </Button>
-                                            </Nav.Item>
-
-                                        </Nav>
-
-                                    </div>
-                                </div>
+                                <ResponseViewer
+                                    lastResponse={this.state.lastResponse}
+                                    lastResponseElapsedTime={this.state.lastResponseElapsedTime}
+                                    lastResponseStatusCode={this.state.lastResponseStatusCode}
+                                    onClose={()=> this.setModalContentName(null)}
+                                />
                             </Modal.Body>
                         </Modal.Dialog>
                         : <React.Fragment/>

diff --git a/src/web/viewlets/canvas/response-viewer.js b/src/web/viewlets/canvas/response-viewer.js
@@ -0,0 +1,65 @@
+import React from "react";
+import {Button, Nav} from "react-bootstrap";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faWindowClose} from "@fortawesome/free-solid-svg-icons";
+import PropTypes from "prop-types";
+
+export default class ResponseViewer extends React.Component {
+
+    static propTypes = {
+        lastResponse: PropTypes.object,
+        lastResponseElapsedTime: PropTypes.number,
+        lastResponseStatusCode: PropTypes.number,
+        onClose: PropTypes.func
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <code>
+                                    <pre className={"p-3 bg-light border mb-0"}
+                                         style={{
+                                             "maxHeight": "calc(100vh - 200px)",
+                                             "maxWidth": "calc(100vw - 100px)",
+                                             "minWidth": "720px"
+                                         }}
+                                    >{JSON.stringify(this.props.lastResponse, null, 2)}</pre>
+                </code>
+                <div className="row mt-2">
+                    <div className="col col-9">
+
+                        <Nav className="">
+
+                            <Nav.Item className={"mr-3 "}>
+                                Took {
+                                this.props.lastResponseElapsedTime > 0
+                                    ?
+                                    <React.Fragment>{this.props.lastResponseElapsedTime} seconds</React.Fragment>
+                                    : <React.Fragment>less than a second</React.Fragment>
+                            }
+
+                            </Nav.Item>
+                            <Nav.Item className={"mr-3 "}>
+                                                   <span style={{
+                                                       'color': ` ${this.props.lastResponseStatusCode === 200 ? 'green' : 'red'}`,
+                                                       "fontWeight": "bold"
+                                                   }}>
+
+                                                {this.props.lastResponseStatusCode} response</span>
+                            </Nav.Item>
+                            <Nav.Item className={"mr-3 "}>
+                                <Button variant={"link"}
+                                        className={"p-0"}
+                                        onClick={() => this.props.onClose()}>
+                                    <FontAwesomeIcon icon={faWindowClose}/>
+                                </Button>
+                            </Nav.Item>
+
+                        </Nav>
+
+                    </div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}