Add datasheet popup

src/assets/stylesheets/cabledetail.scss

@@ -305,6 +305,18 @@ th:first-child {
   flex-direction: column;
 }
 
+.modal-datasheet {
+  width: 1000px;
+  height: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .modal-title span {
   width: auto;
   height: auto;

src/components/CableDetailComponent.js

@@ -17,6 +17,7 @@ class Cable {
     this.image = cableData.image
       ? `http://${hostname}${cableData.image}`
       : DefaultPartImg;
+    this.datasheet = `http://${hostname}${cableData.datasheet}`
     this.dynamicProps = {};
     this.horizontal = [];
     this.vertical = [];
@@ -350,8 +351,11 @@ export default class CableDetailComponent extends Component {
                   <span>✏️</span>
                   <span>Datasheet</span>
                 </div>
-                <div className="modal-body">
-                  <span>Datasheet coming soon...</span>
+                <div className="modal-datasheet">
+                  {cableDetails ? (
+                    <iframe src={cableDetails.datasheet} height='70%' width='70%'></iframe>) : (<div className="datasheet"></div>)
+                }
+                  
                 </div>
                 <div
                   className="modal-close"

src/components/StatisticsComponent.js

@@ -14,7 +14,7 @@ export default class StatisticsComponent extends Component {
           <div className="statistics-grid">
             <div className="statistics-grid-container">
               <iframe
-                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
+                src="http://172.31.108.29:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
                 title="Belden"
                 className="statistics-iframe"
               />

src/routes/StatisticsRoute.js

@@ -2,6 +2,10 @@ import React, { Component } from "react";
 import NavBar from "../components/NavBar";
 import StatisticsComponent from "../components/StatisticsComponent";
 import "../assets/stylesheets/app.scss";
+import {
+  Provider,
+  KeepAlive,
+} from 'react-keep-alive';
 
 export default class StatisticsRoute extends Component {
   constructor(props) {
@@ -13,7 +17,11 @@ export default class StatisticsRoute extends Component {
     return (
       <div className="container">
         <NavBar socket={this.props.socket} />
-        <StatisticsComponent socketHandler={this.props.socket} />
+        <Provider>
+          <KeepAlive name="Grafana">
+            <StatisticsComponent socketHandler={this.props.socket} />
+          </KeepAlive>
+        </Provider>
       </div>
     );
   }