Merge pull request #48 from sophie0730/feature_refresh

Feature refresh
sophie0730 · Jan 15, 2024 · 6b06b20 · 6b06b20
2 parents d296296 + 5698d88
commit 6b06b20
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 23 deletions.
diff --git a/client/src/components/alert.jsx b/client/src/components/alert.jsx
@@ -169,7 +169,7 @@ function AlertContainer() {
     fetchData();
 
     const socket = io();
-    socket.on('connect', () => console.log('connected to socket.io server'));
+    socket.on('connect', () => console.log('connected to socket.io server(alert)'));
     socket.on('dataUpdate', fetchData);
 
     return () => {

diff --git a/client/src/components/detail.jsx b/client/src/components/detail.jsx
@@ -17,7 +17,8 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import { getChart } from '../script/chart.js';
+import io from 'socket.io-client';
+import { getChart, updateChart } from '../script/chart.js';
 
 const style = {
   position: 'absolute',
@@ -304,6 +305,20 @@ function DetailGraph({ graphCount, selectedTime }) {
     }
   };
 
+  const updateAllGraph = async() => {
+    try {
+      const fetchGraphAPI = `${import.meta.env.VITE_HOST}/api/1.0/dashboard/${id}/graph`;
+      const response = await axios.get(fetchGraphAPI);
+
+      setAllGraph(response.data);
+      response.data.forEach((item) => {
+        updateChart(item.item, selectedTime);
+      });
+    } catch (error) {
+      console.error(`Error from update graph" ${error}`);
+    }
+  };
+
   const handleTypeChange = (event) => {
     setSelectedGraphType(event.target.value);
   };
@@ -326,7 +341,7 @@ function DetailGraph({ graphCount, selectedTime }) {
           progress: undefined,
           theme: 'colored',
         });
-        fetchAllGraph();
+        await fetchAllGraph();
         handleCloseEditWindow();
       }
 
@@ -380,12 +395,33 @@ function DetailGraph({ graphCount, selectedTime }) {
   };
 
   React.useEffect(() => {
-    fetchAllGraph();
-    allGraph.forEach((item) => {
-      getChart(item.item, selectedTime, item.type);
-    });
+    const fetchData = async() => {
+      await fetchAllGraph();
+    };
+
+    fetchData();
   }, [graphCount, selectedTime]);
 
+  React.useEffect(() => {
+    allGraph.forEach(async (item) => {
+      await getChart(item.item, selectedTime, item.type);
+    });
+  }, [selectedTime, selectedGraphType]);
+
+  React.useEffect(() => {
+    const socket = io();
+    const handleGraphUpdate = async() => {
+      await updateAllGraph();
+    };
+
+    socket.on('connect', () => console.log('connected to socket.io server(graph)'));
+    socket.on('graphUpdate', handleGraphUpdate);
+
+    return () => {
+      socket.off('graphUpdate');
+    };
+  }, [selectedTime]);
+
   return (
   <div>
     <div className="detail-chartWrap">

diff --git a/client/src/components/target.jsx b/client/src/components/target.jsx
@@ -29,7 +29,7 @@ export function Target() {
 
     const socket = io();
     socket.on('connect', () => console.log('connected to socket.io server'));
-    socket.on('dataUpdate', () => {
+    socket.on('targetUpdate', () => {
       axios.get(targetAPI)
         .then((response) => {
           const targetArr = response.data;

diff --git a/client/src/script/chart.js b/client/src/script/chart.js
@@ -112,16 +112,29 @@ function getMaxValueDatasets(groupData, tag) {
     backgroundColor: colorArr,
     barThickness: 50,
   }];
+}
+
+export async function updateChart(item, time) {
+  try {
+    const chartId = item;
+    const response = await axios.get(`${import.meta.env.VITE_HOST}/api/1.0/fetch/${item}?time=${time}`);
+    const responseData = response.data;
+
+    const times = responseData.map((element) => element._time);
+    const values = responseData.map((element) => element._value);
+
+    const { chart } = charts[chartId];
 
-  // return groupKeys.map(key => {
-  //   const lastElement = groupData[key][groupData[key].length - 1];
-  //   return {
-  //     label: `${key}`,
-  //     data: [lastElement._value],
-  //     backgroundColor: getRandomColor(),
-  //     barThickness: 50,
-  //   };
-  // });
+    chart.data.labels = times;
+    chart.data.datasets.forEach((dataset) => {
+      // eslint-disable-next-line no-param-reassign
+      dataset.data = values;
+    });
+
+    chart.update();
+  } catch (error) {
+    console.error('Error updating chart:', error);
+  }
 }
 
 export async function getChart(item, time, type) {
@@ -184,5 +197,3 @@ export async function getChart(item, time, type) {
   };
 
 }
-
-export default getChart;
diff --git a/server/app.js b/server/app.js
@@ -51,7 +51,20 @@ async function messageQueue() {
   }
 
   subscriber.subscribe(PUBSUB_CHANNEL, (message) => {
-    io.emit('dataUpdate', message);
+    switch (message) {
+      case 'alertUpdate':
+        io.emit('dataUpdate', message);
+        break;
+      case 'graphUpdate':
+        io.emit('graphUpdate', message);
+        break;
+      case 'targetUpdate':
+        io.emit('targetUpdate', message);
+        break;
+      default:
+        console.log(`Received unknown message type ${message}`);
+
+    }
   });
 
 }

diff --git a/server/models/store.js b/server/models/store.js
@@ -8,7 +8,7 @@ import {
   WRITE_API_URL, TOKEN, MEASUREMENT,
 } from '../utils/influxdb-util.js';
 import { serverUrlArr } from '../utils/yml-util.js';
-import { publishUpdateMessage } from '../utils/redis-util.js';
+import { publishGraphUpdate, publishTargetUpdate } from '../utils/redis-util.js';
 
 async function storeMetrices(targetUrl) {
   const metrices = await getMetrics(targetUrl);
@@ -29,6 +29,8 @@ async function storeMetrices(targetUrl) {
   await axios.post(WRITE_API_URL, storeQuery, {
     headers: { Authorization: `Token ${TOKEN}` },
   });
+
+  await publishGraphUpdate();
 }
 
 async function storeStatus(targetUrl, targetName) {
@@ -68,7 +70,7 @@ export async function storeExporterStatus() {
       const targetName = item.job_name;
 
       storeStatus(targetUrl, targetName);
-      await publishUpdateMessage();
+      await publishTargetUpdate();
     }
   } catch (error) {
     handleError(error);

diff --git a/server/utils/redis-util.js b/server/utils/redis-util.js
@@ -46,6 +46,18 @@ connectSubscriber();
 
 export async function publishUpdateMessage() {
   if (publisher.isReady) {
-    publisher.publish(PUBSUB_CHANNEL, 'update');
+    publisher.publish(PUBSUB_CHANNEL, 'alertUpdate');
+  }
+}
+
+export async function publishGraphUpdate() {
+  if (publisher.isReady) {
+    publisher.publish(PUBSUB_CHANNEL, 'graphUpdate');
+  }
+}
+
+export async function publishTargetUpdate() {
+  if (publisher.isReady) {
+    publisher.publish(PUBSUB_CHANNEL, 'targetUpdate');
   }
 }