[Netmanager] Added maintenance banner, fixed sidebar, use skip for pagination

netmanager/src/config/urls/authService.js

@@ -29,3 +29,5 @@ export const USER_FEEDBACK_URI = `${BASE_AUTH_SERVICE_URL_V2}/users/feedback`;
 export const GET_ACCESS_TOKEN = `${BASE_AUTH_SERVICE_URL_V2}/users/tokens`;
 
 export const GET_LOGS = `${BASE_AUTH_SERVICE_URL_V2}/users/logs`;
+
+export const GET_MAINTENANCE_STATUS = `${BASE_AUTH_SERVICE_URL_V2}/users/maintenances/analytics`;

netmanager/src/utils/hooks/useMaintenanceStatus.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { getMaintenanceStatusApi } from 'views/apis/authService';
+
+export const useMaintenanceStatus = () => {
+  const [maintenance, setMaintenance] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const checkMaintenanceStatus = async () => {
+      try {
+        const response = await getMaintenanceStatusApi();
+        setMaintenance(response.maintenance);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkMaintenanceStatus();
+    // Check every 5 minutes
+    const interval = setInterval(checkMaintenanceStatus, 5 * 60 * 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return { maintenance, loading, error };
+};

netmanager/src/views/apis/authService.js

@@ -5,7 +5,8 @@ import {
   REGISTER_USER_URI,
   CHART_DEFAULTS_URI,
   USER_FEEDBACK_URI,
-  GET_LOGS
+  GET_LOGS,
+  GET_MAINTENANCE_STATUS
 } from 'config/urls/authService';
 import createAxiosInstance from './axiosConfig';
 import { BASE_AUTH_SERVICE_URL_V2 } from '../../config/urls/authService';
@@ -109,3 +110,9 @@ export const updateDefaultSelectedSiteApi = async (siteId, siteData) => {
     .put(`${BASE_AUTH_SERVICE_URL_V2}/users/preferences/selected-sites/${siteId}`, siteData)
     .then((response) => response.data);
 };
+
+export const getMaintenanceStatusApi = async () => {
+  return await createAxiosInstance()
+    .get(GET_MAINTENANCE_STATUS)
+    .then((response) => response.data);
+};

netmanager/src/views/components/MaintenanceBanner/MaintenanceBanner.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Alert } from '@material-ui/lab';
+import { useMaintenanceStatus } from 'utils/hooks/useMaintenanceStatus';
+import { formatDateString } from '../../../utils/dateTime';
+
+const useStyles = makeStyles((theme) => ({
+  banner: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+    '& .MuiAlert-message': {
+      width: '100%',
+      textAlign: 'center'
+    }
+  }
+}));
+
+const MaintenanceBanner = () => {
+  const classes = useStyles();
+  const { maintenance, loading } = useMaintenanceStatus();
+
+  if (loading || !maintenance || !maintenance.active) {
+    return null;
+  }
+
+  return (
+    <Alert severity="warning" className={classes.banner}>
+      {maintenance.message ||
+        'System maintenance in progress. SoformatDate(me features may be unavailable.'}
+      Estimated downtime: {formatDateString(maintenance.startDate)} -{' '}
+      {formatDateString(maintenance.endDate)}
+    </Alert>
+  );
+};
+
+export default MaintenanceBanner;

netmanager/src/views/layouts/Main.js

@@ -19,6 +19,7 @@ import {
 } from '../../redux/AccessControl/operations';
 import { LargeCircularLoader } from '../components/Loader/CircularLoader';
 import { updateMainAlert } from '../../redux/MainAlert/operations';
+import MaintenanceBanner from 'views/components/MaintenanceBanner/MaintenanceBanner';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -164,6 +165,7 @@ const Main = (props) => {
         [classes.shiftContent]: isDesktop
       })}
     >
+      <MaintenanceBanner />
       <Topbar toggleSidebar={toggleSidebar} />
       <div style={{ position: 'relative' }}>
         <HorizontalLoader loading={loaderStatus} />

netmanager/src/views/layouts/common/Sidebar/Sidebar.js

@@ -248,10 +248,6 @@ const Sidebar = (props) => {
     // check whether user has a role
     const currentUser = JSON.parse(localStorage.getItem('currentUser'));
 
-    if (isEmpty(currentUser)) {
-      return;
-    }
-
     if (!isEmpty(currentUser)) {
       if (!isEmpty(currentRole)) {
         if (currentRole.role_permissions) {

netmanager/src/views/pages/UserList/AvailableUserList.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import usrsStateConnector from 'views/stateConnectors/usersStateConnector';
 import ErrorBoundary from 'views/ErrorBoundary/ErrorBoundary';
 import { useDispatch, useSelector } from 'react-redux';
-import { isEmpty } from 'underscore';
 import { withPermission } from '../../containers/PageAccess';
 import AvailableUsersTable from './components/UsersTable/AvailableUsersTable';
 import { getAvailableNetworkUsersListApi } from 'views/apis/accessControl';
@@ -26,17 +25,17 @@ const AvailableUserList = (props) => {
   const [loading, setLoading] = useState(false);
   const [users, setUsers] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
-  const [currentPage, setCurrentPage] = useState(0);
+  const [limit, setLimit] = useState(10);
+  const [skip, setSkip] = useState(0);
   const activeNetwork = useSelector((state) => state.accessControl.activeNetwork);
 
-  const fetchUsers = async (page, limit) => {
+  const fetchUsers = async (skipCount, limitCount) => {
     if (!activeNetwork) return;
     setLoading(true);
     try {
       const res = await getAvailableNetworkUsersListApi(activeNetwork._id, {
-        page: page + 1, // API expects 1-based pages
-        limit
+        skip: skipCount,
+        limit: limitCount
       });
       setUsers(res.available_users);
       setTotalCount(res.total || 0);
@@ -61,15 +60,15 @@ const AvailableUserList = (props) => {
     }
   };
 
-  // Initial load
   useEffect(() => {
-    fetchUsers(currentPage, pageSize);
+    fetchUsers(skip, limit);
   }, [activeNetwork]);
 
-  const handlePageChange = (newPage, newPageSize) => {
-    setCurrentPage(newPage);
-    setPageSize(newPageSize);
-    fetchUsers(newPage, newPageSize);
+  const handlePageChange = (page, pageSize) => {
+    const newSkip = page * pageSize;
+    setSkip(newSkip);
+    setLimit(pageSize);
+    fetchUsers(newSkip, pageSize);
   };
 
   return (
@@ -80,8 +79,8 @@ const AvailableUserList = (props) => {
             users={users}
             loadData={loading}
             totalCount={totalCount}
-            pageSize={pageSize}
-            currentPage={currentPage}
+            pageSize={limit}
+            currentPage={skip / limit}
             onPageChange={handlePageChange}
           />
         </div>

netmanager/src/views/pages/UserList/UserList.js

@@ -28,8 +28,8 @@ const UserList = (props) => {
   const [loading, setLoading] = useState(false);
   const [users, setUsers] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
-  const [currentPage, setCurrentPage] = useState(0);
+  const [limit, setLimit] = useState(10);
+  const [skip, setSkip] = useState(0);
   const roles = useSelector((state) => state.accessControl.rolesSummary);
   const activeNetwork = useSelector((state) => state.accessControl.activeNetwork);
 
@@ -38,13 +38,13 @@ const UserList = (props) => {
     dispatch(loadRolesSummary(activeNetwork._id));
   }, []);
 
-  const fetchUsers = async (page, limit) => {
+  const fetchUsers = async (skipCount, limitCount) => {
     if (!activeNetwork) return;
     setLoading(true);
     try {
       const res = await getNetworkUsersListApi(activeNetwork._id, {
-        page: page + 1,
-        limit
+        skip: skipCount,
+        limit: limitCount
       });
       setUsers(res.assigned_users);
       setTotalCount(res.total || 0);
@@ -71,13 +71,14 @@ const UserList = (props) => {
 
   // Initial load
   useEffect(() => {
-    fetchUsers(currentPage, pageSize);
+    fetchUsers(skip, limit);
   }, [activeNetwork]);
 
-  const handlePageChange = (newPage, newPageSize) => {
-    setCurrentPage(newPage);
-    setPageSize(newPageSize);
-    fetchUsers(newPage, newPageSize);
+  const handlePageChange = (page, pageSize) => {
+    const newSkip = page * pageSize;
+    setSkip(newSkip);
+    setLimit(pageSize);
+    fetchUsers(newSkip, pageSize);
   };
 
   return (
@@ -90,8 +91,8 @@ const UserList = (props) => {
             users={users}
             loadData={loading}
             totalCount={totalCount}
-            pageSize={pageSize}
-            currentPage={currentPage}
+            pageSize={limit}
+            currentPage={skip / limit}
             onPageChange={handlePageChange}
           />
         </div>