-
replaceSession(e, session.sessionId)}>
- Replace Session
+
replaceSession(e, session.sessionId)}
+ >
+ Replace Session
-
deleteSession(e, session.sessionId)}>
+
deleteSession(e, session.sessionId)}
+ >
@@ -75,9 +123,13 @@ function Multiview({ total, fetchSessions, siteId, assistCredendials }: { total:
))}
{placeholder.map((_, i) => (
-
-
- Add Session
+
+
+ Add Session
))}
@@ -88,9 +140,10 @@ function Multiview({ total, fetchSessions, siteId, assistCredendials }: { total:
export default connect(
(state: any) => ({
total: state.getIn(['liveSearch', 'total']),
- siteId: state.getIn([ 'site', 'siteId' ])
+ siteId: state.getIn(['site', 'siteId']),
}),
{
fetchSessions,
+ customSetSessions,
}
-)(observer(Multiview))
+)(observer(Multiview));
diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
index 79f8331a7..223cfd7cb 100644
--- a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
+++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Loader, Pagination, Tooltip } from 'UI';
+import { Loader, Pagination, Tooltip, Button } from 'UI';
import { connect } from 'react-redux';
import SessionItem from 'Shared/SessionItem';
import { addFilterByKeyAndValue, updateCurrentPage, applyFilter } from 'Duck/liveSearch';
@@ -51,8 +51,11 @@ function AssistSessionsModal(props: Props) {
.toJS();
React.useEffect(() => {
- props.applyFilter({ ...filter });
+ if (total === 0) {
+ reloadSessions()
+ }
}, []);
+ const reloadSessions = () => props.applyFilter({ ...filter });
const onSortChange = ({ value }: any) => {
props.applyFilter({ sort: value.value });
};
@@ -68,8 +71,9 @@ function AssistSessionsModal(props: Props) {
return (
-
-
Sort By
+
+
+
Sort By
0}>
);
-export const InactiveTab = (props: Omit) => (
+export const InactiveTab = React.memo((props: Omit) => (
-);
+));
-const ActiveTab = (props: Omit) => (
+const ActiveTab = React.memo((props: Omit) => (
-);
+));
-const CurrentTab = () => (
+const CurrentTab = React.memo(() => (
PLAYING
-);
+));
function AssistTabs({ session, siteId }: { session: Record; siteId: string }) {
const history = useHistory();
@@ -53,17 +53,17 @@ function AssistTabs({ session, siteId }: { session: Record; siteId:
}, []);
const openGrid = () => {
- history.push(withSiteId(multiview(), siteId));
+ const sessionIdQuery = encodeURIComponent(assistMultiviewStore.sessions.map((s) => s.sessionId).join(','));
+ return history.push(withSiteId(multiview(sessionIdQuery), siteId));
};
const openLiveSession = (sessionId: string) => {
assistMultiviewStore.setActiveSession(sessionId);
history.push(withSiteId(liveSession(sessionId), siteId));
};
- console.log(assistMultiviewStore.activeSessionId)
return (
- {assistMultiviewStore.sortedSessions.map((session) => (
+ {assistMultiviewStore.sortedSessions.map((session: { key: number, sessionId: string }) => (
{assistMultiviewStore.isActive(session.sessionId) ? (
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 91241cb47..abf19c943 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -234,14 +234,12 @@ function SessionItem(props: RouteComponentProps & Props) {
)}
{props.isAdd ? (
-
+
(props.isDisabled ? null : props.onClick())}
+ >
- (props.isDisabled ? null : props.onClick())}
- />
+
) : (
diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js
index a0a7e0035..591dd7084 100644
--- a/frontend/app/duck/liveSearch.js
+++ b/frontend/app/duck/liveSearch.js
@@ -64,6 +64,11 @@ export default mergeReducers(
}),
);
+export const customSetSessions = (data) => ({
+ type: success(FETCH_SESSION_LIST),
+ data
+})
+
const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
dispatch(actionCreator(...args));
const filter = getState().getIn([ 'liveSearch', 'instance']).toData();
diff --git a/frontend/app/mstore/assistMultiviewStore.ts b/frontend/app/mstore/assistMultiviewStore.ts
index 3248ad0d2..2854d2b5e 100644
--- a/frontend/app/mstore/assistMultiviewStore.ts
+++ b/frontend/app/mstore/assistMultiviewStore.ts
@@ -1,5 +1,8 @@
import { makeAutoObservable } from 'mobx';
-import { sessionService } from 'App/services'
+import { sessionService } from 'App/services';
+import Filter from 'Types/filter';
+import Session from 'Types/session';
+import { List, Map } from 'immutable';
type MultiSessions = [
LiveSessionListItem?,
@@ -14,16 +17,20 @@ export interface LiveSessionListItem extends Record
{
export default class AssistMultiviewStore {
sessions: MultiSessions = [];
activeSession: LiveSessionListItem = null;
+ onChangeCb: (sessions: MultiSessions) => void;
constructor() {
makeAutoObservable(this);
}
isActive(sessionId: string): boolean {
- console.log(sessionId, this.activeSessionId)
return this.activeSessionId === sessionId;
}
+ setOnChange(cb: (sessions: MultiSessions) => void) {
+ this.onChangeCb = cb;
+ }
+
get sortedSessions() {
// @ts-ignore ???
return this.sessions.slice().sort((a, b) => a.key - b.key);
@@ -34,20 +41,30 @@ export default class AssistMultiviewStore {
}
addSession(session: Record) {
- if (this.sessions.length < 4) {
- this.sessions.push({ ...session.toJS(), key: this.sessions.length });
+ if (
+ this.sessions.length < 4 &&
+ this.sessions.findIndex((s) => s.sessionId === session.sessionId) === -1
+ ) {
+ const plainSession = session.toJS ? session.toJS() : session;
+ this.sessions.push({ ...plainSession, key: this.sessions.length });
+ return this.onChangeCb(this.sessions);
}
}
replaceSession(targetId: string, session: Record) {
- const targetIndex = this.sessions.findIndex(s => s.sessionId === targetId);
+ const targetIndex = this.sessions.findIndex((s) => s.sessionId === targetId);
if (targetIndex !== -1) {
- this.sessions[targetIndex] = { ...session.toJS(), key: targetIndex }
+ const plainSession = session.toJS ? session.toJS() : session;
+ this.sessions[targetIndex] = { ...plainSession, key: targetIndex };
+ return this.onChangeCb(this.sessions);
}
}
removeSession(sessionId: string) {
- return this.sessions = this.sessions.filter(session => session.sessionId !== sessionId) as MultiSessions;
+ this.sessions = this.sessions.filter(
+ (session) => session.sessionId !== sessionId
+ ) as MultiSessions;
+ return this.onChangeCb(this.sessions);
}
setActiveSession(sessionId: string) {
@@ -56,24 +73,43 @@ export default class AssistMultiviewStore {
setDefault(session: Record) {
if (this.sessions.length === 0) {
- const firstItem = {...session.toJS?.(), key: 0}
- this.sessions = [firstItem]
- this.activeSession = firstItem
+ const plainSession = session.toJS ? session.toJS() : session;
+ const firstItem = { ...plainSession, key: 0 };
+ this.sessions = [firstItem];
+ this.activeSession = firstItem;
+
+ return this.onChangeCb?.(this.sessions);
}
}
async fetchAgentTokenInfo(sessionId: string) {
- const info = await sessionService.getSessionInfo(sessionId, true)
+ const info = await sessionService.getSessionInfo(sessionId, true);
+ return this.setToken(sessionId, info.agentToken);
+ }
- return this.setToken(sessionId, info.agentToken)
+ async presetSessions(ids: string[]) {
+ // @ts-ignore
+ const filter = new Filter({ filters: [], sort: '' }).toData();
+ const data = await sessionService.getLiveSessions(filter);
+
+ const matchingSessions = data.sessions.filter(
+ (s: Record) => ids.includes(s.sessionID) || ids.includes(s.sessionId)
+ );
+ const immutMatchingSessions = List(matchingSessions).map(Session);
+ immutMatchingSessions.forEach((session: Record) => {
+ this.addSession(session);
+ this.fetchAgentTokenInfo(session.sessionId);
+ });
+
+ return data;
}
setToken(sessionId: string, token: string) {
- const sessions = this.sessions
- const targetIndex = this.sessions.findIndex(s => s.sessionId === sessionId)
- sessions[targetIndex].agentToken = token
+ const sessions = this.sessions;
+ const targetIndex = sessions.findIndex((s) => s.sessionId === sessionId);
+ sessions[targetIndex].agentToken = token;
- return this.sessions = sessions
+ return (this.sessions = sessions);
}
reset() {
diff --git a/frontend/app/routes.js b/frontend/app/routes.js
index 23335f9fd..411b48ba5 100644
--- a/frontend/app/routes.js
+++ b/frontend/app/routes.js
@@ -85,11 +85,10 @@ export const onboarding = (tab = routerOBTabString) => `/onboarding/${ tab }`;
export const sessions = params => queried('/sessions', params);
export const assist = params => queried('/assist', params);
export const recordings = params => queried("/recordings", params);
-export const multiview = params => queried("/assist/multiview", params);
-
+export const multiviewIndex = params => queried('/multiview', params);
+export const multiview = (sessionsQuery = ':sessionsquery', hash) => hashed(`/multiview/${sessionsQuery}`, hash);
export const session = (sessionId = ':sessionId', hash) => hashed(`/session/${ sessionId }`, hash);
export const liveSession = (sessionId = ':sessionId', params, hash) => hashed(queried(`/assist/${ sessionId }`, params), hash);
-// export const liveSession = (sessionId = ':sessionId', hash) => hashed(`/live/session/${ sessionId }`, hash);
export const errors = params => queried('/errors', params);
export const error = (id = ':errorId', hash) => hashed(`/errors/${ id }`, hash);
@@ -127,6 +126,7 @@ const REQUIRED_SITE_ID_ROUTES = [
assist(),
recordings(),
multiview(),
+ multiviewIndex(),
metrics(),
metricDetails(''),
diff --git a/frontend/app/services/SessionService.ts b/frontend/app/services/SessionService.ts
index a18383dfa..0ea0468b2 100644
--- a/frontend/app/services/SessionService.ts
+++ b/frontend/app/services/SessionService.ts
@@ -37,4 +37,11 @@ export default class SettingsService {
.then((j) => j.data || {})
.catch(console.error);
}
+
+ getLiveSessions(filter: any) {
+ return this.client
+ .post('/assist/sessions', filter)
+ .then(fetchErrorCheck)
+ .then((response) => response.data || []);
+ }
}