Add frame, comment id, fetch each 10s

Author: zkdev

src/components/Components.js

@@ -31,6 +31,7 @@ export default class Instances extends Component{
             for(var j=0; j < comments.length; j++){
                 if(comments[j].startFrame <= frames[i].id  && frames[i].id <= comments[j].endFrame){
                     frames[i].comment = comments[j].commentText
+                    frames[i].commentId = comments[j].comment
                 }
             }
         }
@@ -116,7 +117,9 @@ function CustomTooltip({active, payload}) {
                 <p>{payload[0].payload.timestamp}</p>
                 <p>ResponseTime: {payload[0].payload.responseTime}ms</p>
                 <p>CPU usage: {payload[0].payload.cpu}%</p>
-                <p>{payload[0].payload.comment}</p>
+                <p>Comment: {payload[0].payload.comment}</p>
+                <p>Comment ID: {payload[0].payload.commentId}</p>
+                <p>Frame ID: {payload[0].payload.id}</p>
             </div>
        ) 
     }

src/components/FetchDataFunction.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import Systems from './Systems';
 import Components from './Components';
 
@@ -9,22 +9,27 @@ export default function FetchDataFunction(props) {
     const[components, setComponents] = useState([]);
     const[systems, setSystems] = useState([]);
     const[items, setItems] = useState([]);
+    const ref = useRef(true);
 
     useEffect(() => {
-        fetch("https://openmonitor.monitor-api.zeekay.dev")
-            .then(res => res.json())
-            .then(
-                (result) => {
-                    setIsLoaded(true);
-                    setComponents(result.components);
-                    setSystems(result.systems);
-                    setItems(result);
-                },
-                (error) => {
-                    setIsLoaded(true);
-                    setError(error);
-                }
-            )
+        setTimeout(() => {
+            console.log(new Date().toLocaleString().replace(',','') + ': fetching')
+            fetch("https://openmonitor.monitor-api.zeekay.dev")
+                .then(res => res.json())
+                .then(
+                    (result) => {
+                        setIsLoaded(true);
+                        setComponents(result.components);
+                        setSystems(result.systems);
+                        setItems(result);
+                    },
+                    (error) => {
+                        setIsLoaded(true);
+                        setError(error);
+                    }
+                )
+            ref.current = false;
+        }, ((ref.current === true) ? 0 : 10000));
     }, [items])
 
     if(error){