IO-3166-Global-Notifications-Part-2 - Checkpoint

2025-03-05 17:28:32 -05:00
parent 358503f9ef
commit 2a65cb5025
9 changed files with 368 additions and 24 deletions
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,6 +1,6 @@
 import { Badge, Layout, Menu, Spin } from "antd";
 import { useTranslation } from "react-i18next";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { Link } from "react-router-dom";
@@ -95,7 +95,8 @@ function Header({
  const { t } = useTranslation();
  const { isConnected, scenarioNotificationsOn } = useSocket();
  const [notificationVisible, setNotificationVisible] = useState(false);
-
+  const baseTitleRef = useRef(document.title || "");
+  const lastSetTitleRef = useRef("");
  const userAssociationId = bodyshop?.associations?.[0]?.id;

  const {
@@ -123,6 +124,40 @@ function Header({
    }
  }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);

+  // Keep The unread count in the title.
+  useEffect(() => {
+    const updateTitle = () => {
+      const currentTitle = document.title;
+      // Check if the current title differs from what we last set
+      if (currentTitle !== lastSetTitleRef.current) {
+        // Extract base title by removing any unread count prefix
+        const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/);
+        baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle;
+      }
+
+      // Apply unread count to the base title
+      const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current;
+
+      // Only update if the title has changed to avoid unnecessary DOM writes
+      if (document.title !== newTitle) {
+        document.title = newTitle;
+        lastSetTitleRef.current = newTitle; // Store what we set
+      }
+    };
+
+    // Initial update
+    updateTitle();
+
+    // Poll every 100ms to catch child component changes
+    const interval = setInterval(updateTitle, 100);
+
+    // Cleanup
+    return () => {
+      clearInterval(interval);
+      document.title = baseTitleRef.current; // Reset to base title on unmount
+    };
+  }, [unreadCount]); // Re-run when unreadCount changes
+
  const handleNotificationClick = (e) => {
    setNotificationVisible(!notificationVisible);
    if (handleMenuClick) handleMenuClick(e);
@@ -656,7 +691,7 @@ function Header({
          icon: unreadLoading ? (
            <Spin size="small" />
          ) : (
-            <Badge size="small" count={unreadCount}>
+            <Badge offset={[8, 0]} size="small" count={unreadCount}>
              <BellFilled />
            </Badge>
          ),
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -1,11 +1,12 @@
 import { Virtuoso } from "react-virtuoso";
-import { Alert, Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
+import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
 import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import "./notification-center.styles.scss";
 import day from "../../utils/day.js";
 import { forwardRef } from "react";
+import { DateTimeFormat } from "../../utils/DateFormatter.jsx";

 const { Text, Title } = Typography;

@@ -52,11 +53,7 @@ const NotificationCenterComponent = forwardRef(
                <span className="ro-number">
                  {t("notifications.labels.ro-number", { ro_number: notification.roNumber })}
                </span>
-                <Text
-                  type="secondary"
-                  className="relative-time"
-                  title={day(notification.created_at).format("YYYY-MM-DD hh:mm A")}
-                >
+                <Text type="secondary" className="relative-time" title={DateTimeFormat(notification.created_at)}>
                  {day(notification.created_at).fromNow()}
                </Text>
              </Title>
@@ -83,7 +80,6 @@ const NotificationCenterComponent = forwardRef(
          <div className="notification-controls">
            <Tooltip title={t("notifications.labels.show-unread-only")}>
              <Space size={4} align="center" className="notification-toggle">
-                {" "}
                {showUnreadOnly ? (
                  <EyeFilled className="notification-toggle-icon" />
                ) : (
@@ -94,7 +90,7 @@ const NotificationCenterComponent = forwardRef(
            </Tooltip>
            <Tooltip title={t("notifications.labels.mark-all-read")}>
              <Button
-                type={!unreadCount ? "default" : "primary"}
+                type="link"
                icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
                onClick={markAllRead}
                disabled={!unreadCount}
--- a/client/src/contexts/SocketIO/useSocket.jsx
+++ b/client/src/contexts/SocketIO/useSocket.jsx
@@ -9,9 +9,10 @@ import {
  GET_NOTIFICATIONS,
  GET_UNREAD_COUNT,
  MARK_ALL_NOTIFICATIONS_READ,
-  MARK_NOTIFICATION_READ
+  MARK_NOTIFICATION_READ,
+  UPDATE_NOTIFICATIONS_READ_FRAGMENT
 } from "../../graphql/notifications.queries.js";
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";

 const SocketContext = createContext(null);
@@ -290,7 +291,17 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot
            });

            notification.info({
-              message: t("notifications.labels.notification-popup-title", { ro_number: jobRoNumber }),
+              message: (
+                <div
+                  onClick={() => {
+                    markNotificationRead({ variables: { id: notificationId } })
+                      .then(() => navigate(`/manage/jobs/${jobId}`))
+                      .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`));
+                  }}
+                >
+                  {t("notifications.labels.notification-popup-title", { ro_number: jobRoNumber })}
+                </div>
+              ),
              description: (
                <ul
                  className="notification-alert-unordered-list"
@@ -327,11 +338,7 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot
          });
          client.cache.writeFragment({
            id: notificationRef,
-            fragment: gql`
-              fragment UpdateNotificationRead on notifications {
-                read
-              }
-            `,
+            fragment: UPDATE_NOTIFICATIONS_READ_FRAGMENT,
            data: { read: timestamp }
          });

@@ -383,11 +390,7 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot
                const notifRef = client.cache.identify({ __typename: "notifications", id: notif.id });
                client.cache.writeFragment({
                  id: notifRef,
-                  fragment: gql`
-                    fragment UpdateNotificationRead on notifications {
-                      read
-                    }
-                  `,
+                  fragment: UPDATE_NOTIFICATIONS_READ_FRAGMENT,
                  data: { read: timestamp }
                });
              }
--- a/client/src/graphql/notifications.queries.js
+++ b/client/src/graphql/notifications.queries.js
@@ -50,3 +50,9 @@ export const MARK_NOTIFICATION_READ = gql`
    }
  }
 `;
+
+export const UPDATE_NOTIFICATIONS_READ_FRAGMENT = gql`
+  fragment UpdateNotificationRead on notifications {
+    read
+  }
+`;
--- a/docker-compose-cluster.yml
+++ b/docker-compose-cluster.yml
@@ -0,0 +1,223 @@
+version: '3.8'
+
+services:
+  # Load Balancer (NGINX) with WebSocket support and session persistence
+  load-balancer:
+    image: nginx:latest
+    container_name: load-balancer
+    ports:
+      - "4000:80"  # External port 4000 maps to NGINX's port 80
+    volumes:
+      - ./nginx-websocket.conf:/etc/nginx/nginx.conf:ro  # Mount NGINX configuration
+    networks:
+      - redis-cluster-net
+    depends_on:
+      - node-app-1
+      - node-app-2
+      - node-app-3
+    healthcheck:
+      test: [ "CMD", "curl", "-f", "http://localhost/health" ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # Node App Instance 1
+  node-app-1:
+    build:
+      context: .
+    container_name: node-app-1
+    hostname: node-app-1
+    networks:
+      - redis-cluster-net
+    env_file:
+      - .env.development
+    depends_on:
+      redis-node-1:
+        condition: service_healthy
+      redis-node-2:
+        condition: service_healthy
+      redis-node-3:
+        condition: service_healthy
+      localstack:
+        condition: service_healthy
+      aws-cli:
+        condition: service_completed_successfully
+    ports:
+      - "4001:4000"  # Different external port for local access
+    volumes:
+      - .:/app
+      - node-app-npm-cache:/app/node_modules
+
+  # Node App Instance 2
+  node-app-2:
+    build:
+      context: .
+    container_name: node-app-2
+    hostname: node-app-2
+    networks:
+      - redis-cluster-net
+    env_file:
+      - .env.development
+    depends_on:
+      redis-node-1:
+        condition: service_healthy
+      redis-node-2:
+        condition: service_healthy
+      redis-node-3:
+        condition: service_healthy
+      localstack:
+        condition: service_healthy
+      aws-cli:
+        condition: service_completed_successfully
+    ports:
+      - "4002:4000"  # Different external port for local access
+    volumes:
+      - .:/app
+      - node-app-npm-cache:/app/node_modules
+
+  # Node App Instance 3
+  node-app-3:
+    build:
+      context: .
+    container_name: node-app-3
+    hostname: node-app-3
+    networks:
+      - redis-cluster-net
+    env_file:
+      - .env.development
+    depends_on:
+      redis-node-1:
+        condition: service_healthy
+      redis-node-2:
+        condition: service_healthy
+      redis-node-3:
+        condition: service_healthy
+      localstack:
+        condition: service_healthy
+      aws-cli:
+        condition: service_completed_successfully
+    ports:
+      - "4003:4000"  # Different external port for local access
+    volumes:
+      - .:/app
+      - node-app-npm-cache:/app/node_modules
+
+  # Redis Node 1 
+  redis-node-1:
+    build:
+      context: ./redis
+    container_name: redis-node-1
+    hostname: redis-node-1
+    restart: unless-stopped
+    networks:
+      - redis-cluster-net
+    volumes:
+      - redis-node-1-data:/data
+      - redis-lock:/redis-lock
+    healthcheck:
+      test: [ "CMD", "redis-cli", "ping" ]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+
+  # Redis Node 2  
+  redis-node-2:
+    build:
+      context: ./redis
+    container_name: redis-node-2
+    hostname: redis-node-2
+    restart: unless-stopped
+    networks:
+      - redis-cluster-net
+    volumes:
+      - redis-node-2-data:/data
+      - redis-lock:/redis-lock
+    healthcheck:
+      test: [ "CMD", "redis-cli", "ping" ]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+
+  # Redis Node 3
+  redis-node-3:
+    build:
+      context: ./redis
+    container_name: redis-node-3
+    hostname: redis-node-3
+    restart: unless-stopped
+    networks:
+      - redis-cluster-net
+    volumes:
+      - redis-node-3-data:/data
+      - redis-lock:/redis-lock
+    healthcheck:
+      test: [ "CMD", "redis-cli", "ping" ]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+
+  # LocalStack
+  localstack:
+    image: localstack/localstack
+    container_name: localstack
+    hostname: localstack
+    networks:
+      - redis-cluster-net
+    restart: unless-stopped
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - SERVICES=s3,ses,secretsmanager,cloudwatch,logs
+      - DEBUG=0
+      - AWS_ACCESS_KEY_ID=test
+      - AWS_SECRET_ACCESS_KEY=test
+      - AWS_DEFAULT_REGION=ca-central-1
+      - EXTRA_CORS_ALLOWED_HEADERS=Authorization,Content-Type
+      - EXTRA_CORS_ALLOWED_ORIGINS=*
+      - EXTRA_CORS_EXPOSE_HEADERS=Authorization,Content-Type
+    ports:
+      - "4566:4566"
+    healthcheck:
+      test: [ "CMD", "curl", "-f", "http://localhost:4566/_localstack/health" ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 20s
+
+  # AWS-CLI
+  aws-cli:
+    image: amazon/aws-cli
+    container_name: aws-cli
+    hostname: aws-cli
+    networks:
+      - redis-cluster-net
+    depends_on:
+      localstack:
+        condition: service_healthy
+    volumes:
+      - './localstack:/tmp/localstack'
+      - './certs:/tmp/certs'
+    environment:
+      - AWS_ACCESS_KEY_ID=test
+      - AWS_SECRET_ACCESS_KEY=test
+      - AWS_DEFAULT_REGION=ca-central-1
+    entrypoint: /bin/sh -c
+    command: >
+      "
+        aws --endpoint-url=http://localstack:4566 ses verify-domain-identity --domain imex.online --region ca-central-1
+        aws --endpoint-url=http://localstack:4566 ses verify-email-identity --email-address noreply@imex.online --region ca-central-1
+        aws --endpoint-url=http://localstack:4566 secretsmanager create-secret --name CHATTER_PRIVATE_KEY --secret-string file:///tmp/certs/io-ftp-test.key
+        aws --endpoint-url=http://localstack:4566 logs create-log-group --log-group-name development --region ca-central-1
+        aws --endpoint-url=http://localstack:4566 s3api create-bucket --bucket imex-large-log --create-bucket-configuration LocationConstraint=ca-central-1
+      "
+
+networks:
+  redis-cluster-net:
+    driver: bridge
+
+volumes:
+  node-app-npm-cache:
+  redis-node-1-data:
+  redis-node-2-data:
+  redis-node-3-data:
+  redis-lock:
--- a/hasura/metadata/tables.yaml
+++ b/hasura/metadata/tables.yaml
@@ -198,6 +198,14 @@
    - name: user
      using:
        foreign_key_constraint_on: useremail
+  array_relationships:
+    - name: notifications
+      using:
+        foreign_key_constraint_on:
+          column: associationid
+          table:
+            name: notifications
+            schema: public
  select_permissions:
    - role: user
      permission:
@@ -3484,6 +3492,13 @@
          table:
            name: notes
            schema: public
+    - name: notifications
+      using:
+        foreign_key_constraint_on:
+          column: jobid
+          table:
+            name: notifications
+            schema: public
    - name: parts_dispatches
      using:
        foreign_key_constraint_on:
@@ -6732,6 +6747,13 @@
          table:
            name: ioevents
            schema: public
+    - name: job_watchers
+      using:
+        foreign_key_constraint_on:
+          column: user_email
+          table:
+            name: job_watchers
+            schema: public
    - name: messages
      using:
        foreign_key_constraint_on:
--- a/nginx-websocket.conf
+++ b/nginx-websocket.conf
@@ -0,0 +1,45 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    upstream node_app {
+        ip_hash;  # Enables session persistence based on client IP
+        server node-app-1:4000;
+        server node-app-2:4000;
+        server node-app-3:4000;
+    }
+
+    # WebSocket upgrade configuration
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        ''      close;
+    }
+
+    server {
+        listen 80;
+        
+        location / {
+            proxy_pass http://node_app;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            
+            # WebSocket headers
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_read_timeout 86400;  # Keep WebSocket connections alive (24 hours)
+        }
+
+        # Health check endpoint
+        location /health {
+            proxy_pass http://node_app;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+    }
+}
--- a/server/graphql-client/queries.js
+++ b/server/graphql-client/queries.js
@@ -2758,6 +2758,7 @@ exports.INSERT_NOTIFICATIONS_MUTATION = `  mutation INSERT_NOTIFICATIONS($object
    }
  }`;

+// REMEMBER: Update the cache_bodyshop event in hasura to include any added fields
 exports.GET_BODYSHOP_BY_ID = `
  query GET_BODYSHOP_BY_ID($id: uuid!) {
    bodyshops_by_pk(id: $id) {
--- a/server/routes/miscellaneousRoutes.js
+++ b/server/routes/miscellaneousRoutes.js
@@ -142,4 +142,17 @@ router.post("/alertcheck", eventAuthorizationMiddleware, alertCheck);
 // Redis Cache Routes
 router.post("/bodyshop-cache", eventAuthorizationMiddleware, updateBodyshopCache);

+// Health Check for docker-compose-cluster load balancer, only available in development
+if (process.env.NODE_ENV === "development") {
+  router.get("/health", (req, res) => {
+    const healthStatus = {
+      status: "healthy",
+      timestamp: new Date().toISOString(),
+      environment: process.env.NODE_ENV || "unknown",
+      uptime: process.uptime()
+    };
+    res.status(200).json(healthStatus);
+  });
+}
+
 module.exports = router;