added method getUserSessionsById and commented out mockData

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js

@@ -113,6 +113,7 @@ const StyledTableRow = styled(TableRow)`
   }
 
   .session-info {
+    text-transform: capitalize;
     font-weight: 600;
     color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
   }
@@ -127,6 +128,7 @@ const StyledTableRow = styled(TableRow)`
   }
 
   .online {
+    text-transform: capitalize;
     font-weight: 600;
     color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
   }
@@ -145,18 +147,16 @@ const SessionsTableRow = (props) => {
     isActive,
     hideColumns,
     displayName,
-    status,
-    browser,
-    platform,
-    country,
-    city,
-    ip,
+    // status,
+    // browser,
+    // platform,
+    // country,
+    // city,
+    // ip,
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
     setSessionModalData,
     setUserSessionPanelVisible,
-    socketHelper,
-    socketUsersHelper,
   } = props;
 
   const onClickSessions = () => {
@@ -198,26 +198,8 @@ const SessionsTableRow = (props) => {
     },
   ];
 
-  useEffect(() => {
-    const userIds = item.userId;
-
-    socketHelper.emit({
-      command: "subscribe",
-      data: { roomParts: "statuses-in-room" },
-    });
-
-    socketHelper.emit({
-      command: "getSessionsInPortal",
-      data: { userIds },
-    });
-
-    socketHelper.on("statuses-in-room", (data) => {
-      console.log(data);
-    });
-  }, [item.userId, socketHelper]);
-
   const isChecked = checkedProps.checked;
-  const isOnline = status === "Online";
+  const isOnline = status.includes("online");
 
   const onChange = (e) => {
     onContentRowSelect && onContentRowSelect(e.target.checked, item);
@@ -278,30 +260,30 @@ const SessionsTableRow = (props) => {
 
         <TableCell>
           <Text className={isOnline ? "online" : "session-info"} truncate>
-            {status}
+            {/* {status} */}
           </Text>
         </TableCell>
 
         <TableCell>
           <Text className="session-info" truncate>
-            {platform},&nbsp;
+            {/* {platform},&nbsp; */}
           </Text>
           <Text className="session-info" truncate>
-            {browser}
+            {/* {browser} */}
           </Text>
         </TableCell>
 
         <TableCell>
           <Text className="session-info" truncate>
-            {(country || city) && (
+            {/* {(country || city) && (
               <>
                 {country}
                 {country && city && ", "}
                 {city}
                 <span className="divider"></span>
               </>
-            )}
-            {ip}
+            )} */}
+            {/* {ip} */}
           </Text>
         </TableCell>
       </StyledTableRow>
@@ -309,7 +291,7 @@ const SessionsTableRow = (props) => {
   );
 };
 
-export default inject(({ setup, dialogsStore, settingsStore }) => {
+export default inject(({ setup, dialogsStore }) => {
   const { setUserSessionPanelVisible } = dialogsStore;
   const {
     setLogoutAllDialogVisible,
@@ -317,14 +299,10 @@ export default inject(({ setup, dialogsStore, settingsStore }) => {
     setSessionModalData,
   } = setup;
 
-  const { socketHelper, socketUsersHelper } = settingsStore;
-
   return {
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
     setSessionModalData,
     setUserSessionPanelVisible,
-    socketHelper,
-    socketUsersHelper,
   };
 })(withContent(observer(SessionsTableRow)));

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js

@@ -162,17 +162,17 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
         {sessionsData.map((item) => (
           <SessionsTableRow
             t={t}
-            key={item.userId}
+            key={item.id}
             userId={userId}
             item={item}
             hideColumns={hideColumns}
             displayName={item.displayName}
-            status={item.status}
-            browser={item.browser}
-            platform={item.platform}
-            country={item.country}
-            city={item.city}
-            ip={item.ip}
+            // status={item.status}
+            // browser={item.browser}
+            // platform={item.platform}
+            // country={item.country}
+            // city={item.city}
+            // ip={item.ip}
           />
         ))}
       </TableBody>

packages/client/src/pages/PortalSettings/categories/security/sessions/index.js

@@ -11,7 +11,7 @@ import { Button } from "@docspace/shared/components/button";
 
 import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 import SessionsTable from "./SessionsTable";
-import mockData from "./mockData";
+// import mockData from "./mockData";
 
 import {
   LogoutSessionDialog,
@@ -90,11 +90,46 @@ const Sessions = ({
   setLogoutAllDialogVisible,
   sessionModalData,
   platformModalData,
+  getUsersList,
+  // socketHelper,
+  setAllConnections,
+  getUserSessionsById,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
 
+  // useEffect(() => {
+  //   socketHelper.emit({
+  //     command: "subscribe",
+  //     data: { roomParts: "statuses-in-portal" },
+  //   });
+
+  //   socketHelper.emit({
+  //     command: "getSessionsInPortal",
+  //   });
+
+  //   socketHelper.on("statuses-in-portal", (data) => {
+  //     const onlineUsers = data.map((user) => user);
+  //     console.log("onlineUsers", onlineUsers);
+  //   });
+  // }, [socketHelper]);
+
+  const fetchData = async () => {
+    try {
+      const users = await getUsersList();
+      const sessionsPromises = users.map((user) =>
+        getUserSessionsById(user.id),
+      );
+      const sessions = await Promise.all(sessionsPromises);
+      const connections = sessions.map((session) => session.connections || []);
+      setAllConnections(connections);
+      setAllSessions(sessions.flat());
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   useEffect(() => {
-    setAllSessions(mockData);
+    fetchData();
     return () => {
       clearSelection();
     };
@@ -198,8 +233,9 @@ const Sessions = ({
 };
 
 export default inject(({ settingsStore, setup, peopleStore }) => {
-  const { currentDeviceType } = settingsStore;
-  const { clearSelection, allSessions, setAllSessions } =
+  const { socketHelper, currentDeviceType } = settingsStore;
+  const { getUsersList } = peopleStore.usersStore;
+  const { clearSelection, allSessions, setAllSessions, setAllConnections } =
     peopleStore.selectionStore;
 
   const {
@@ -213,6 +249,7 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     setLogoutAllDialogVisible,
     sessionModalData,
     platformModalData,
+    getUserSessionsById,
   } = setup;
 
   return {
@@ -230,6 +267,10 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     setLogoutAllDialogVisible,
     sessionModalData,
     platformModalData,
+    socketHelper,
+    getUsersList,
+    setAllConnections,
+    getUserSessionsById,
   };
 })(
   withTranslation(["Settings", "Profile", "Common", "ChangeUserStatusDialog"])(

packages/client/src/store/SelectionPeopleStore.js

@@ -31,6 +31,7 @@ import { getUserStatus } from "../helpers/people-helpers";
 class SelectionStore {
   peopleStore = null;
   allSessions = [];
+  allConnections = [];
   selection = [];
   selectionUsersRights = {
     isVisitor: 0,
@@ -270,7 +271,6 @@ class SelectionStore {
     this.peopleStore.accountsHotkeysStore.setHotkeyCaret(null);
     isSessionsPage
       ? this.setSelection(this.getUsersBySelected(sessions, selected))
-
       : this.setSelection(this.getUsersBySelected(list, selected));
 
     return selected;
@@ -438,6 +438,10 @@ class SelectionStore {
   setAllSessions = (sessions) => {
     this.allSessions = sessions;
   };
+
+  setAllConnections = (connections) => {
+    this.allConnections = connections;
+  };
 }
 
 export default SelectionStore;

packages/client/src/store/SettingsSetupStore.js

@@ -504,7 +504,7 @@ class SettingsSetupStore {
     this.integration.selectedConsumer = consumer || {};
     this.setConsumers(res);
 
-    return !!consumer
+    return !!consumer;
   };
 
   updateConsumerProps = async (newProps) => {
@@ -554,6 +554,10 @@ class SettingsSetupStore {
     return api.settings.getAllActiveSessions();
   };
 
+  getUserSessionsById = (userId) => {
+    return api.settings.getUserSessionsById(userId);
+  };
+
   removeAllSessions = () => {
     return api.settings.removeAllActiveSessions();
   };

packages/shared/api/settings/index.ts

@@ -896,6 +896,13 @@ export function getAllActiveSessions() {
   });
 }
 
+export function getUserSessionsById(userId) {
+  return request({
+    method: "get",
+    url: `/security/activeconnections/user/${userId}`,
+  });
+}
+
 export function removeAllActiveSessions() {
   return request({
     method: "put",