Merge pull request #2296 from airqo-platform/ft-maintenance-banner

Author: Baalmart

platform/src/common/components/Layout/index.jsx

@@ -9,12 +9,14 @@ import AuthenticatedSideBar from '@/components/SideBar/AuthenticatedSidebar';
 import TopBar from '../TopBar';
 import SideBarDrawer from '../SideBar/SideBarDrawer';
 import Modal from '../Modal/dataDownload';
+import MaintenanceBanner from '../MaintenanceBanner';
 
 import { setOpenModal } from '@/lib/store/services/downloadModal';
 
 import useUserPreferences from '@/core/hooks/useUserPreferences';
 import useUserChecklists from '@/core/hooks/useUserChecklists';
 import useInactivityLogout from '@/core/hooks/useInactivityLogout';
+import useMaintenanceStatus from '@/core/hooks/useMaintenanceStatus';
 
 const Layout = ({
   pageTitle = 'AirQo Analytics',
@@ -36,6 +38,8 @@ const Layout = ({
   const isCollapsed = useSelector((state) => state.sidebar.isCollapsed);
   const isOpen = useSelector((state) => state.modal.openModal);
 
+  const { maintenance } = useMaintenanceStatus();
+
   // Handler to close the modal
   const handleCloseModal = () => {
     dispatch(setOpenModal(false));
@@ -66,6 +70,9 @@ const Layout = ({
               : 'max-w-[1200px] mx-auto space-y-8 px-4 py-8 sm:px-6 lg:px-8'
           } overflow-hidden`}
         >
+          {/* Maintenance Banner */}
+          <MaintenanceBanner maintenance={maintenance} />
+
           {/* TopBar */}
           {noTopNav && (
             <TopBar

platform/src/common/components/MaintenanceBanner/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IoWarningOutline } from 'react-icons/io5';
+import dayjs from 'dayjs';
+
+const MaintenanceBanner = ({ maintenance }) => {
+  if (!maintenance?.isActive) return null;
+
+  return (
+    <div className="bg-yellow-50 border-b border-yellow-200 mb-2">
+      <div className="py-3 px-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-center">
+          <div className="flex items-center">
+            <span className="flex">
+              <IoWarningOutline
+                className="h-6 w-6 text-yellow-600"
+                aria-hidden="true"
+              />
+            </span>
+            <p className="ml-3 font-medium text-yellow-700">
+              {maintenance.message}
+              <span className="ml-2 text-yellow-600">
+                (Estimated downtime:{' '}
+                {dayjs(maintenance.startDate).format('D MMM, YYYY hh:mm A')} -{' '}
+                {dayjs(maintenance.endDate).format('D MMM, YYYY hh:mm A')})
+              </span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MaintenanceBanner;

platform/src/core/apis/Account.js

@@ -12,6 +12,7 @@ import {
   USER_CHECKLISTS_URL,
   FORGOT_PWD_URL,
   RESET_PWD_URL,
+  MAINTENANCE_STATUS_URL,
 } from '../urls/authentication';
 import axios from 'axios';
 import createAxiosInstance from './axiosConfig';
@@ -221,3 +222,13 @@ export const updateGroupDetailsApi = async (groupID, data) => {
     .put(`${GROUPS_URL}/${groupID}`, data)
     .then((response) => response.data);
 };
+
+export const getMaintenanceStatus = async () => {
+  try {
+    const response = await createAxiosInstance().get(MAINTENANCE_STATUS_URL);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching maintenance status:', error);
+    throw error;
+  }
+};

platform/src/core/hooks/useMaintenanceStatus.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { getMaintenanceStatus } from '../apis/Account';
+
+const POLLING_INTERVAL = 5 * 60 * 1000; // 5 minutes
+
+const useMaintenanceStatus = () => {
+  const [maintenance, setMaintenance] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchMaintenanceStatus = async () => {
+    try {
+      const response = await getMaintenanceStatus();
+      if (response.success && response.maintenance?.length > 0) {
+        setMaintenance(response.maintenance[0]);
+      } else {
+        setMaintenance(null);
+      }
+      setError(null);
+    } catch (err) {
+      setError(err);
+      console.error('Error fetching maintenance status:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMaintenanceStatus();
+    const interval = setInterval(fetchMaintenanceStatus, POLLING_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { maintenance, loading, error };
+};
+
+export default useMaintenanceStatus;

platform/src/core/urls/authentication.js

@@ -1,7 +1,4 @@
-import {
-  NEXT_PUBLIC_API_BASE_URL,
-  NEXT_PUBLIC_API_TOKEN,
-} from '../../lib/envConstants';
+import { NEXT_PUBLIC_API_BASE_URL } from '../../lib/envConstants';
 import { stripTrailingSlash } from '../utils/strings';
 
 const BASE_AUTH_URL = stripTrailingSlash(NEXT_PUBLIC_API_BASE_URL);
@@ -41,3 +38,5 @@ export const GENERATE_TOKEN_URI = `${AUTH_URL}/tokens`;
 export const ACTIVATE_USER_CLIENT = `${CLIENT_URI}/activate`;
 
 export const ACTIVATION_REQUEST_URI = `${CLIENT_URI}/activate-request`;
+
+export const MAINTENANCE_STATUS_URL = `${AUTH_URL}/maintenances/analytics`;