Merge pull request #1 from yushiang-demo/feature-data-center-and-visu…

…alization

Data Center and Visualization

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN yarn
+
+COPY . .

docker-compose.yml

@@ -0,0 +1,40 @@
+version: "3"
+
+services:
+  nginx:
+    image: nginx:latest
+    ports:
+      - "80:80"
+    volumes:
+      - ./server/nginx/nginx.conf:/etc/nginx/conf.d/default.conf:ro
+
+  client:
+    build:
+      dockerfile: ./Dockerfile
+    command: yarn dev --host 0.0.0.0
+    volumes:
+      - ./src:/app/src
+
+  server:
+    build:
+      dockerfile: ./server/Dockerfile
+    command: node app.js
+    volumes:
+      - ./server:/app
+
+  prometheus:
+    image: prom/prometheus
+    volumes:
+      - ./server/prometheus.yml:/etc/prometheus/prometheus.yml
+
+  grafana:
+    image: grafana/grafana
+    ports:
+      - 3000:3000
+    environment:
+      - GF_DASHBOARDS_DEFAULT_HOME_REFRESH_INTERVAL=200ms
+      - GF_DASHBOARDS_MIN_REFRESH_INTERVAL=200ms
+    volumes:
+      - ./server/grafana/provisioning:/etc/grafana/provisioning
+    depends_on:
+      - prometheus

package.json

@@ -16,8 +16,10 @@
     "@mui/x-charts": "^7.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
     "three": "^0.164.1",
-    "three-pathfinding": "^1.2.0"
+    "three-pathfinding": "^1.2.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

server/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .

server/app.js

@@ -0,0 +1,49 @@
+const http = require("http");
+const url = require("url");
+const port = 3000;
+const client = require("prom-client");
+const data = {};
+const guage = new client.Gauge({
+  name: "SensorMonitor",
+  help: "The metric provide density from sensor to user.",
+  labelNames: ["sensor_id", "user_id"],
+});
+
+const requestHandler = async (request, response) => {
+  if (request.url === "/metrics") {
+    Object.keys(data).forEach((user) => {
+      const sensorDict = data[user];
+      Object.keys(sensorDict).forEach((sensor) => {
+        guage.set(
+          {
+            sensor_id: sensor,
+            user_id: user,
+          },
+          sensorDict[sensor]
+        );
+      });
+    });
+
+    return response.end(await client.register.metrics());
+  }
+
+  const { pathname, query } = url.parse(request.url, true);
+
+  if (pathname === "/update") {
+    const { user, sensor, distance } = query;
+    if (!data[user]) data[user] = {};
+    if (!data[user][sensor]) data[user][sensor] = {};
+    data[user][sensor] = parseFloat(distance);
+  }
+
+  return response.end("Hello Node.js Server!");
+};
+
+const server = http.createServer(requestHandler);
+
+server.listen(port, (err) => {
+  if (err) {
+    return console.log("something bad happened", err);
+  }
+  console.log(`server is listening on ${port}`);
+});

server/grafana/provisioning/dashboards/dashboard.yml

@@ -0,0 +1,12 @@
+apiVersion: 1
+
+providers:
+  - name: "Prometheus"
+    orgId: 1
+    folder: ""
+    type: file
+    disableDeletion: false
+    editable: true
+    allowUiUpdates: true
+    options:
+      path: /etc/grafana/provisioning/dashboards

server/grafana/provisioning/datasources/datasource.yml

@@ -0,0 +1,12 @@
+apiVersion: 1
+
+datasources:
+  - name: Prometheus
+    type: prometheus
+    access: proxy
+    orgId: 1
+    url: http://prometheus:9090
+    basicAuth: false
+    isDefault: true
+    editable: true
+    interval: 1s

server/nginx/nginx.conf

@@ -0,0 +1,25 @@
+# nginx.conf
+
+server {
+    listen 80;
+    server_name localhost;
+    add_header 'Access-Control-Allow-Origin' '*' always;
+
+    location /api {
+        proxy_pass http://prometheus:9090/api;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    location /triangle-localization-simulator/ {
+        proxy_pass http://client:5173/triangle-localization-simulator/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    location / {
+        proxy_pass http://server:3000/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}

server/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "dependencies": {
+    "prom-client": "^15.1.2"
+  }
+}

server/prometheus.yml

@@ -0,0 +1,8 @@
+global:
+  scrape_interval: 200ms
+  evaluation_interval: 200ms
+
+scrape_configs:
+  - job_name: server
+    static_configs:
+      - targets: ["server:3000"]