diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js index 16385f300a..bd0bdfbc5c 100644 --- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js +++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js @@ -376,9 +376,12 @@ const SectionHeaderContent = (props) => { setUserLastSession, setUserSessionPanelVisible, setDisplayName, + setStatus, + getFromDateAgo, } = props; const { header, isCategoryOrHeader, isNeedPaidIcon } = state; const arrayOfParams = getArrayOfParams(); + const fromDateAgo = getFromDateAgo(peopleSelection[0]?.id); const menuItems = isSessionsPage ? ( <> @@ -414,6 +417,7 @@ const SectionHeaderContent = (props) => { ); const onClickSessions = () => { + setStatus(fromDateAgo); setUserLastSession(peopleSelection[0]); setConnections(peopleSelection[0].connections); setUserSessionPanelVisible(true); @@ -594,6 +598,8 @@ export default inject( setUserLastSession, setDisplayName, allSessions, + setStatus, + getFromDateAgo, } = peopleStore.selectionStore; const { admins, selectorIsOpen } = setup.security.accessRight; @@ -632,6 +638,8 @@ export default inject( setUserLastSession, setDisplayName, allSessions, + setStatus, + getFromDateAgo, }; }, )( diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js index de557e4d08..d18c733a34 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js +++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js @@ -106,6 +106,7 @@ const SessionsRow = (props) => { sectionWidth, onContentRowSelect, onContentRowClick, + onUserContextClick, isActive, checkedProps, displayName, @@ -120,12 +121,13 @@ const SessionsRow = (props) => { setConnections, setDisplayName, setStatus, + convertDate, + getFromDateAgo, + setFromDateAgo, } = props; - const [fromDateAgo, setFromDateAgo] = useState(""); - const { status, date } = sessions; - + const fromDateAgo = getFromDateAgo(item.id); const isChecked = checkedProps?.checked; const isOnline = sessionStatus === "online"; const isOffline = status === "offline"; @@ -134,34 +136,14 @@ const SessionsRow = (props) => { const updateStatus = () => { const showOnline = isOnline && sessionStatus; const showOffline = isOffline ? convertDate(date, locale) : null; - setFromDateAgo(isOnline ? showOnline : showOffline); + setFromDateAgo(item.id, isOnline ? showOnline : showOffline); }; updateStatus(); const intervalId = setInterval(updateStatus, 60000); return () => clearInterval(intervalId); - }, [date, sessionStatus, status, locale]); - - const convertDate = (dateString, locale) => { - const parsedDate = moment(new Date(dateString).toISOString()); - const now = moment(); - const daysDiff = now.diff(parsedDate, "days"); - moment.locale(locale); - - if (daysDiff < 1) return parsedDate.fromNow(); - if (daysDiff === 1) return t("Common:Yesterday"); - if (daysDiff < 7) return parsedDate.fromNow(); - return parsedDate.format(locale); - }; - - const onRowClick = useCallback(() => { - onContentRowClick && onContentRowClick(!isChecked, item); - }, [isChecked, item, onContentRowClick]); - - const onRowContextClick = useCallback(() => { - onContentRowClick && onContentRowClick(!isChecked, item, false); - }, [isChecked, item, onContentRowClick]); + }, [date, sessionStatus, status, locale, item.id]); const onClickSessions = () => { setStatus(fromDateAgo); @@ -204,6 +186,15 @@ const SessionsRow = (props) => { }, ]; + const onRowContextClick = useCallback( + (rightMouseButtonClick) => { + onUserContextClick?.(item, !rightMouseButtonClick); + }, + [item, onUserContextClick], + ); + + const onRowClick = (e) => onContentRowClick?.(e, item); + return ( { setUserSessionPanelVisible, setDisplayName, setStatus, - isOneUserSelection, + convertDate, + getFromDateAgo, + setFromDateAgo, } = props; - const [fromDateAgo, setFromDateAgo] = useState(""); - const { platform, browser, ip, city, country, status, date } = sessions; + const isLastConnection = connections.length > 0; + const fromDateAgo = getFromDateAgo(item.id); const isChecked = checkedProps?.checked; const isOnline = sessionStatus === "online"; const isOffline = status === "offline"; @@ -179,26 +181,14 @@ const SessionsTableRow = (props) => { const updateStatus = () => { const showOnline = isOnline && sessionStatus; const showOffline = isOffline ? convertDate(date, locale) : null; - setFromDateAgo(isOnline ? showOnline : showOffline); + setFromDateAgo(item.id, isOnline ? showOnline : showOffline); }; updateStatus(); const intervalId = setInterval(updateStatus, 60000); return () => clearInterval(intervalId); - }, [date, sessionStatus, status, locale]); - - const convertDate = (dateString, locale) => { - const parsedDate = moment(new Date(dateString).toISOString()); - const now = moment(); - const daysDiff = now.diff(parsedDate, "days"); - moment.locale(locale); - - if (daysDiff < 1) return parsedDate.fromNow(); - if (daysDiff === 1) return t("Common:Yesterday"); - if (daysDiff < 7) return parsedDate.fromNow(); - return parsedDate.format(locale); - }; + }, [date, sessionStatus, status, locale, item.id]); const onClickSessions = () => { setStatus(fromDateAgo); @@ -296,10 +286,12 @@ const SessionsTableRow = (props) => { - {platform},  + {isLastConnection ? connections[0]?.platform : platform},  - {browser?.split(".")[0] ?? ""} + {isLastConnection + ? connections[0]?.browser + : browser?.split(".")[0] ?? ""} @@ -313,7 +305,7 @@ const SessionsTableRow = (props) => { )} - {ip} + {isLastConnection ? connections[0]?.ip : ip} @@ -334,7 +326,9 @@ export default inject( setConnections, setDisplayName, setStatus, - isOneUserSelection, + convertDate, + getFromDateAgo, + setFromDateAgo, } = peopleStore.selectionStore; return { @@ -346,7 +340,9 @@ export default inject( setUserSessionPanelVisible, setDisplayName, setStatus, - isOneUserSelection, + convertDate, + getFromDateAgo, + setFromDateAgo, }; }, )(withContent(observer(SessionsTableRow))); diff --git a/packages/client/src/store/SelectionPeopleStore.js b/packages/client/src/store/SelectionPeopleStore.js index 1ef16d2555..f45a1f6a11 100644 --- a/packages/client/src/store/SelectionPeopleStore.js +++ b/packages/client/src/store/SelectionPeopleStore.js @@ -28,14 +28,17 @@ import { makeAutoObservable, runInAction } from "mobx"; import { EmployeeStatus } from "@docspace/shared/enums"; import { toastr } from "@docspace/shared/components/toast"; import SettingsSetupStore from "./SettingsSetupStore"; +import moment from "moment-timezone"; class SelectionStore { peopleStore = null; allSessions = []; sessionsData = []; dataFromSocket = []; + currentDataFromSocket = []; displayName = ""; status = ""; + fromDateAgo = {}; connections = []; platformData = []; userLastSession = []; @@ -482,7 +485,31 @@ class SelectionStore { this.isLoading = isLoading; }; - updateAllSessions = (sessions, dataFromSocket) => { + setCurrentDataFromSocket = (data) => { + this.currentDataFromSocket = data; + }; + + setFromDateAgo = (sessionId, value) => { + this.fromDateAgo[sessionId] = value; + }; + + getFromDateAgo = (sessionId) => { + return this.fromDateAgo[sessionId] || ""; + }; + + convertDate = (dateString, locale) => { + const parsedDate = moment(new Date(dateString).toISOString()); + const now = moment(); + const daysDiff = now.diff(parsedDate, "days"); + moment.locale(locale); + + if (daysDiff < 1) return parsedDate.fromNow(); + if (daysDiff === 1) return t("Common:Yesterday"); + if (daysDiff < 7) return parsedDate.fromNow(); + return parsedDate.format(locale); + }; + + updateAllSessions = (sessions, dataFromSocket, currentDataFromSocket) => { const socketDataMap = new Map( dataFromSocket.map((user) => [user.id, user]), ); @@ -495,10 +522,17 @@ class SelectionStore { const newAllSessions = filteredSessions.map((session) => { const socketData = socketDataMap.get(session.id); + const currentSocketData = + currentDataFromSocket && currentDataFromSocket.id === session.id + ? currentDataFromSocket + : null; + + const latestData = currentSocketData || socketData; + return { ...session, - status: socketData ? socketData.status : "offline", - sessions: socketData ? socketData.sessions.slice(-1)[0] : [], + status: latestData ? latestData.status : "offline", + sessions: latestData ? latestData.sessions.slice(-1)[0] : [], }; });