From bd957f97f8fb13589c7b3e057bd4f0e2ba848241 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 24 Dec 2021 13:06:32 +0530 Subject: [PATCH 1/9] feat(ui) - fetch error nav, and highlight row, assist tabs --- .../components/AssistTabs/AssistTabs.tsx | 68 +++++ .../components/AssistTabs/assistTabs.css | 0 .../Assist/components/AssistTabs/index.ts | 1 + .../BugFinder/SessionsMenu/SessionsMenu.js | 2 +- frontend/app/components/Session/LivePlayer.js | 4 +- frontend/app/components/Session/Session.js | 11 + .../app/components/Session_/Fetch/Fetch.js | 89 +++++-- .../components/Session_/Network/Network.js | 247 ++++-------------- .../components/Session_/Network/network.css | 2 +- .../Session_/Player/Controls/Timeline.js | 22 +- .../components/Session_/PlayerBlockHeader.js | 2 + .../Session_/TimeTable/TimeTable.js | 8 +- .../Session_/TimeTable/timeTable.css | 4 +- .../app/components/Session_/autoscroll.css | 4 +- .../components/shared/SessionItem/Counter.tsx | 2 +- .../components/ui/IconButton/iconButton.css | 1 + frontend/app/duck/sessions.js | 17 +- frontend/app/svg/icons/os/fedora.svg | 5 + frontend/app/types/filter/filter.js | 4 +- 19 files changed, 246 insertions(+), 247 deletions(-) create mode 100644 frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx create mode 100644 frontend/app/components/Assist/components/AssistTabs/assistTabs.css create mode 100644 frontend/app/components/Assist/components/AssistTabs/index.ts create mode 100644 frontend/app/svg/icons/os/fedora.svg diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx new file mode 100644 index 000000000..8f0641200 --- /dev/null +++ b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from 'react'; +import { connect } from 'react-redux'; +import { applyFilter, addAttribute } from 'Duck/filters'; +import { fetchList } from 'Duck/sessions'; +import { KEYS } from 'Types/filter/customFilter'; +import { Link } from 'UI'; +import Filter from 'Types/filter'; +import { List } from 'immutable'; +import Counter from 'App/components/shared/SessionItem/Counter'; +import { fetchLiveList } from 'Duck/sessions'; +import { session as sessionRoute } from 'App/routes'; +import { session } from 'App/components/Session_/session.css'; + +const RowItem = ({ startedAt, sessionId }) => { + return ( + +
+ Tab1 + +
+ + ); +} + +interface Props { + list: List, + session: any, + fetchLiveList: () => void, + applyFilter: () => void, + filters: Filter + addAttribute: (obj) => void, + loading: boolean +} + +const AssistTabs = React.memo((props: Props) => { + const [showMenu, setShowMenu] = useState(false) + useEffect(() => { + if (!props.loading && props.list.size === 0) { + props.fetchLiveList(); + } + }, [props.list]) + + return ( +
+
setShowMenu(!showMenu)}>Active Tabs
+ {showMenu && ( +
+ {props.list.map((item, index) => ( + + ))} +
+ )} +
+ ); +}); + +export default connect(state => { + const session = state.getIn([ 'sessions', 'current' ]); + return { + loading: state.getIn([ 'sessions', 'loading' ]), + list: state.getIn(['sessions', 'liveSessions']).filter(i => i.userId === session.userId), + session, + filters: state.getIn([ 'filters', 'appliedFilter' ]), + } +}, { applyFilter, addAttribute, fetchLiveList })(AssistTabs); \ No newline at end of file diff --git a/frontend/app/components/Assist/components/AssistTabs/assistTabs.css b/frontend/app/components/Assist/components/AssistTabs/assistTabs.css new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/app/components/Assist/components/AssistTabs/index.ts b/frontend/app/components/Assist/components/AssistTabs/index.ts new file mode 100644 index 000000000..b089b3734 --- /dev/null +++ b/frontend/app/components/Assist/components/AssistTabs/index.ts @@ -0,0 +1 @@ +export { default } from './AssistTabs'; \ No newline at end of file diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js index fb89f6967..7275d9ac0 100644 --- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js +++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js @@ -119,7 +119,7 @@ export default connect(state => ({ activeFlow: state.getIn([ 'filters', 'activeFlow' ]), captureRate: state.getIn(['watchdogs', 'captureRate']), filters: state.getIn([ 'filters', 'appliedFilter' ]), - sessionsLoading: state.getIn([ 'sessions', 'loading' ]), + sessionsLoading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]), }), { fetchWatchdogStatus, setActiveFlow, clearEvents, setActiveTab, fetchSessionList })(SessionsMenu); diff --git a/frontend/app/components/Session/LivePlayer.js b/frontend/app/components/Session/LivePlayer.js index cbc3410cd..07b8d3adc 100644 --- a/frontend/app/components/Session/LivePlayer.js +++ b/frontend/app/components/Session/LivePlayer.js @@ -31,7 +31,7 @@ const InitLoader = connectPlayer(state => ({ }))(Loader); -function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, loadingCredentials, assistCredendials, request }) { +const WebPlayer = React.memo(({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, loadingCredentials, assistCredendials, request }) => { useEffect(() => { if (!loadingCredentials) { initPlayer(session, jwt, assistCredendials); @@ -60,7 +60,7 @@ function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, l ); -} +}); export default withRequest({ initialData: null, diff --git a/frontend/app/components/Session/Session.js b/frontend/app/components/Session/Session.js index 6b90ff4c1..8ff629c55 100644 --- a/frontend/app/components/Session/Session.js +++ b/frontend/app/components/Session/Session.js @@ -6,6 +6,7 @@ import { fetchList as fetchSlackList } from 'Duck/integrations/slack'; import { Link, NoContent, Loader } from 'UI'; import { sessions as sessionsRoute } from 'App/routes'; import withPermissions from 'HOCs/withPermissions' +import { fetchLiveList } from 'Duck/sessions'; import LivePlayer from './LivePlayer'; import WebPlayer from './WebPlayer'; @@ -20,6 +21,8 @@ function Session({ session, fetchSession, fetchSlackList, + fetchLiveList, + filters }) { usePageTitle("OpenReplay Session Player"); useEffect(() => { @@ -36,6 +39,12 @@ function Session({ } },[ sessionId ]); + // useEffect(() => { + // if (session && session.live) { + // fetchLiveList(filters.toJS()) + // } + // }, [session]) + return ( ({ list: state.fetchList, })) +@connect(state => ({ + timelinePointer: state.getIn(['sessions', 'timelinePointer']), +})) export default class Fetch extends React.PureComponent { state = { filter: "", + filteredList: this.props.list, current: null, + currentIndex: 0, + showFetchDetails: false, + hasNextError: false, + hasPreviousError: false, } - onFilterChange = (e, { value }) => this.setState({ filter: value }) + + onFilterChange = (e, { value }) => { + const { list } = this.props; + const filterRE = getRE(value, 'i'); + const filtered = list + .filter((r) => filterRE.test(r.name) || filterRE.test(r.url) || filterRE.test(r.method) || filterRE.test(r.status)); + this.setState({ filter: value, filteredList: value ? filtered : list, currentIndex: 0 }); + } setCurrent = (item, index) => { pause() + jump(item.time) this.setState({ current: item, currentIndex: index }); } - closeModal = () => this.setState({ current: null}) + onRowClick = (item, index) => { + pause() + this.setState({ current: item, currentIndex: index, showFetchDetails: true }); + } + + closeModal = () => this.setState({ current: null, showFetchDetails: false }); nextClickHander = () => { const { list } = this.props; @@ -33,6 +54,7 @@ export default class Fetch extends React.PureComponent { if (currentIndex === list.length - 1) return; const newIndex = currentIndex + 1; this.setCurrent(list[newIndex], newIndex); + this.setState({ showFetchDetails: true }); } prevClickHander = () => { @@ -42,15 +64,24 @@ export default class Fetch extends React.PureComponent { if (currentIndex === 0) return; const newIndex = currentIndex - 1; this.setCurrent(list[newIndex], newIndex); + this.setState({ showFetchDetails: true }); + } + + static getDerivedStateFromProps(nextProps, prevState) { + const { filteredList } = prevState; + if (nextProps.timelinePointer) { + let activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time); + activeItem = activeItem || filteredList[filteredList.length - 1]; + return { + current: activeItem, + currentIndex: filteredList.indexOf(activeItem), + }; + } } render() { - const { list } = this.props; - const { filter, current, currentIndex } = this.state; - const filterRE = getRE(filter, 'i'); - const filtered = list - .filter((r) => filterRE.test(r.name) || filterRE.test(r.url) || filterRE.test(r.method) || filterRE.test(r.status)); - + // const { list } = this.props; + const { current, currentIndex, showFetchDetails, filteredList } = this.state; return ( } - isDisplayed={ current != null } - content={ current && + isDisplayed={ current != null && showFetchDetails } + content={ current && showFetchDetails && } onClose={ this.closeModal } @@ -88,25 +119,31 @@ export default class Fetch extends React.PureComponent {

Fetch

- +
+ {/*
+
Prev
+
Next
+
*/} + +
{[ @@ -120,7 +157,7 @@ export default class Fetch extends React.PureComponent { width: 60, }, { label: "Name", - width: 130, + width: 180, render: renderName, }, { diff --git a/frontend/app/components/Session_/Network/Network.js b/frontend/app/components/Session_/Network/Network.js index 878266bda..1d86394c5 100644 --- a/frontend/app/components/Session_/Network/Network.js +++ b/frontend/app/components/Session_/Network/Network.js @@ -3,14 +3,9 @@ import { connectPlayer, jump, pause } from 'Player'; import { QuestionMarkHint, Popup, Tabs, Input } from 'UI'; import { getRE } from 'App/utils'; import { TYPES } from 'Types/session/resource'; -import { formatBytes } from 'App/utils'; -import { formatMs } from 'App/date'; - -import TimeTable from '../TimeTable'; -import BottomBlock from '../BottomBlock'; -import InfoLine from '../BottomBlock/InfoLine'; import stl from './network.css'; import NetworkContent from './NetworkContent'; +import { connect } from 'react-redux'; const ALL = 'ALL'; const XHR = 'xhr'; @@ -28,73 +23,24 @@ const TAB_TO_TYPE_MAP = { [ MEDIA ]: TYPES.MEDIA, [ OTHER ]: TYPES.OTHER } -const TABS = [ ALL, XHR, JS, CSS, IMG, MEDIA, OTHER ].map(tab => ({ - text: tab, - key: tab, -})); - -const DOM_LOADED_TIME_COLOR = "teal"; -const LOAD_TIME_COLOR = "red"; export function renderName(r) { return ( - { r.name } } - content={
{ r.url }
} - size="mini" - position="right center" - /> - ); -} - -const renderXHRText = () => ( - - {XHR} - - Use our Fetch plugin - {' to capture HTTP requests and responses, including status codes and bodies.'}
- We also provide support for GraphQL - {' for easy debugging of your queries.'} - - } - className="ml-1" - /> - -); - -function renderSize(r) { - let triggerText; - let content; - if (r.decodedBodySize == null) { - triggerText = "x"; - content = "Not captured"; - } else { - const headerSize = r.headerSize || 0; - const encodedSize = r.encodedBodySize || 0; - const transferred = headerSize + encodedSize; - const showTransferred = r.headerSize != null; - - triggerText = formatBytes(r.decodedBodySize); - content = ( -
    - { showTransferred && -
  • {`${formatBytes( r.encodedBodySize + headerSize )} transfered over network`}
    • - } -
  • {`Resource size: ${formatBytes(r.decodedBodySize)} `}
    • -
- ); - } - - return ( - { triggerText } } - content={ content } - size="mini" - position="right center" - /> +
+ { r.name }
} + content={
{ r.url }
} + size="mini" + position="right center" + /> +
{ + e.stopPropagation(); + jump(r.time) + }} + >Jump
+ ); } @@ -130,14 +76,18 @@ export function renderDuration(r) { resources: state.resourceList, domContentLoadedTime: state.domContentLoadedTime, loadTime: state.loadTime, - time: state.time, + // time: state.time, playing: state.playing, domBuildingTime: state.domBuildingTime, fetchPresented: state.fetchList.length > 0, })) +@connect(state => ({ + timelinePointer: state.getIn(['sessions', 'timelinePointer']), +})) export default class Network extends React.PureComponent { state = { filter: '', + filteredList: this.props.resources, activeTab: ALL, currentIndex: 0 } @@ -149,7 +99,30 @@ export default class Network extends React.PureComponent { } onTabClick = activeTab => this.setState({ activeTab }) - onFilterChange = (e, { value }) => this.setState({ filter: value }) + + onFilterChange = (e, { value }) => { + const { resources } = this.props; + const filterRE = getRE(value, 'i'); + const filtered = resources.filter(({ type, name }) => + filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ])); + + this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 }); + } + // onFilterChange = (e, { value }) => this.setState({ filter: value }) + + componentDidUpdate() { + console.log('test') + } + + static getDerivedStateFromProps(nextProps, prevState) { + const { filteredList } = prevState; + if (nextProps.timelinePointer) { + const activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time); + return { + currentIndex: activeItem ? filteredList.indexOf(activeItem) : filteredList.length - 1, + }; + } + } render() { const { @@ -159,50 +132,23 @@ export default class Network extends React.PureComponent { loadTime, domBuildingTime, fetchPresented, - time, + // time, playing } = this.props; - const { filter, activeTab, currentIndex } = this.state; - const filterRE = getRE(filter, 'i'); - let filtered = resources.filter(({ type, name }) => - filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ])); - -// const referenceLines = []; -// if (domContentLoadedTime != null) { -// referenceLines.push({ -// time: domContentLoadedTime, -// color: DOM_LOADED_TIME_COLOR, -// }) -// } -// if (loadTime != null) { -// referenceLines.push({ -// time: loadTime, -// color: LOAD_TIME_COLOR, -// }) -// } -// -// let tabs = TABS; -// if (!fetchPresented) { -// tabs = TABS.map(tab => tab.key === XHR -// ? { -// text: renderXHRText(), -// key: XHR, -// } -// : tab -// ); -// } - - const resourcesSize = filtered.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0); - const transferredSize = filtered + const { filter, activeTab, currentIndex, filteredList } = this.state; + // const filterRE = getRE(filter, 'i'); + // let filtered = resources.filter(({ type, name }) => + // filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ])); + const resourcesSize = filteredList.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0); + const transferredSize = filteredList .reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0); return ( - {/* - - - - - - - - 0 } - /> - 0 } - /> - - - - - - {[ - { - label: "Status", - dataKey: 'status', - width: 70, - }, { - label: "Type", - dataKey: 'type', - width: 60, - }, { - label: "Name", - width: 130, - render: renderName, - }, - { - label: "Size", - width: 60, - render: renderSize, - }, - { - label: "Time", - width: 80, - render: renderDuration, - } - ]} - - - */} ); } diff --git a/frontend/app/components/Session_/Network/network.css b/frontend/app/components/Session_/Network/network.css index eb37e49c9..e299211da 100644 --- a/frontend/app/components/Session_/Network/network.css +++ b/frontend/app/components/Session_/Network/network.css @@ -22,7 +22,7 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - max-width: 100%; + max-width: 80%; width: fit-content; } .popupNameContent { diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js index c25101d69..27c1de1ab 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.js +++ b/frontend/app/components/Session_/Player/Controls/Timeline.js @@ -7,6 +7,7 @@ import TimeTracker from './TimeTracker'; import { ReduxTime } from './Time'; import stl from './timeline.css'; import { TYPES } from 'Types/session/event'; +import { setTimelinePointer } from 'Duck/sessions'; const getPointerIcon = (type) => { // exception, @@ -69,7 +70,7 @@ const getPointerIcon = (type) => { state.getIn([ 'sessions', 'current', 'clickRageTime' ]), returningLocationTime: state.getIn([ 'sessions', 'current', 'returningLocation' ]) && state.getIn([ 'sessions', 'current', 'returningLocationTime' ]), -})) +}), { setTimelinePointer }) export default class Timeline extends React.PureComponent { seekProgress = (e) => { const { endTime } = this.props; @@ -78,9 +79,10 @@ export default class Timeline extends React.PureComponent { this.props.jump(time); } - createEventClickHandler = time => (e) => { + createEventClickHandler = pointer => (e) => { e.stopPropagation(); - this.props.jump(time) + this.props.jump(pointer.time); + this.props.setTimelinePointer(pointer); } componentDidMount() { @@ -144,7 +146,7 @@ export default class Timeline extends React.PureComponent { //width: `${ 2000 * scale }%` } } className={ stl.clickRage } - onClick={ this.createEventClickHandler(iss.time) } + onClick={ this.createEventClickHandler(iss) } >
+ { live && } { live && } { !live && ( <> diff --git a/frontend/app/components/Session_/TimeTable/TimeTable.js b/frontend/app/components/Session_/TimeTable/TimeTable.js index 9753e3d44..e316dae56 100644 --- a/frontend/app/components/Session_/TimeTable/TimeTable.js +++ b/frontend/app/components/Session_/TimeTable/TimeTable.js @@ -135,7 +135,7 @@ export default class TimeTable extends React.PureComponent { ...computeTimeLine(this.props.rows, this.state.firstVisibleRowIndex, this.visibleCount), }); } - if (this.props.activeIndex && prevProps.activeIndex !== this.props.activeIndex && this.scroller.current != null) { + if (this.props.activeIndex >= 0 && prevProps.activeIndex !== this.props.activeIndex && this.scroller.current != null) { this.scroller.current.scrollToRow(this.props.activeIndex); } } @@ -168,7 +168,7 @@ export default class TimeTable extends React.PureComponent {
onRowClick(row, index) : null } id="table-row" > @@ -223,7 +223,7 @@ export default class TimeTable extends React.PureComponent { navigation=false, referenceLines = [], additionalHeight = 0, - activeIndex + activeIndex, } = this.props; const { timewidth, @@ -247,7 +247,7 @@ export default class TimeTable extends React.PureComponent { return (
{ navigation && -
+
{ @@ -242,13 +244,16 @@ const reducer = (state = initialState, action = {}) => { return state.set('insights', List(action.data).sort((a, b) => b.count - a.count)); case SET_FUNNEL_PAGE_FLAG: return state.set('funnelPage', action.funnelPage ? Map(action.funnelPage) : false); + case SET_TIMELINE_POINTER: + return state.set('timelinePointer', action.pointer); default: return state; } }; export default withRequestState({ - _: [ FETCH, FETCH_LIST, FETCH_LIVE_LIST ], + _: [ FETCH, FETCH_LIST ], + fetchLiveListRequest: FETCH_LIVE_LIST, fetchFavoriteListRequest: FETCH_FAVORITE_LIST, toggleFavoriteRequest: TOGGLE_FAVORITE, fetchErrorStackList: FETCH_ERROR_STACK, @@ -262,10 +267,10 @@ function init(session) { } } -export const fetchList = (params = {}, clear = false) => (dispatch, getState) => { +export const fetchList = (params = {}, clear = false, live = false) => (dispatch, getState) => { const activeTab = getState().getIn([ 'sessions', 'activeTab' ]); - return dispatch(activeTab && activeTab.type === 'live' ? { + return dispatch((activeTab && activeTab.type === 'live' || live )? { types: FETCH_LIVE_LIST.toArray(), call: client => client.post('/assist/sessions', params), } : { @@ -376,3 +381,9 @@ export function setFunnelPage(funnelPage) { } } +export function setTimelinePointer(pointer) { + return { + type: SET_TIMELINE_POINTER, + pointer + } +} \ No newline at end of file diff --git a/frontend/app/svg/icons/os/fedora.svg b/frontend/app/svg/icons/os/fedora.svg new file mode 100644 index 000000000..86e9f115e --- /dev/null +++ b/frontend/app/svg/icons/os/fedora.svg @@ -0,0 +1,5 @@ + + + Fedora logo (2021) + + diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js index 42637a2fa..8b3301aad 100644 --- a/frontend/app/types/filter/filter.js +++ b/frontend/app/types/filter/filter.js @@ -34,8 +34,8 @@ export default Record({ startDate, endDate, - sort: undefined, - order: undefined, + sort: 'startTs', + order: 'desc', viewed: undefined, consoleLogCount: undefined, From 1c1a1a7a27c997ef5921baf241f050b07d57c372 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 24 Dec 2021 16:19:15 +0530 Subject: [PATCH 2/9] feat(ui) - assist tabs show laoder --- .../components/AssistTabs/AssistTabs.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx index 8f0641200..1b1d694dd 100644 --- a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx +++ b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import { applyFilter, addAttribute } from 'Duck/filters'; import { fetchList } from 'Duck/sessions'; import { KEYS } from 'Types/filter/customFilter'; -import { Link } from 'UI'; +import { Link, Loader } from 'UI'; import Filter from 'Types/filter'; import { List } from 'immutable'; import Counter from 'App/components/shared/SessionItem/Counter'; @@ -34,6 +34,13 @@ interface Props { const AssistTabs = React.memo((props: Props) => { const [showMenu, setShowMenu] = useState(false) + + useEffect(() => { + if (showMenu) { + props.fetchLiveList(); + } + }, [showMenu]) + useEffect(() => { if (!props.loading && props.list.size === 0) { props.fetchLiveList(); @@ -48,9 +55,11 @@ const AssistTabs = React.memo((props: Props) => { className="border z-10 absolute bg-white rounded shadow right-0" style={{ minWidth: "180px"}} > - {props.list.map((item, index) => ( - - ))} + + {props.list.map((item, index) => ( + + ))} +
)}
@@ -60,7 +69,7 @@ const AssistTabs = React.memo((props: Props) => { export default connect(state => { const session = state.getIn([ 'sessions', 'current' ]); return { - loading: state.getIn([ 'sessions', 'loading' ]), + loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]), list: state.getIn(['sessions', 'liveSessions']).filter(i => i.userId === session.userId), session, filters: state.getIn([ 'filters', 'appliedFilter' ]), From 3eec195d794c987440d624eac9235d13327bc2bc Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 24 Dec 2021 16:38:54 +0530 Subject: [PATCH 3/9] fix(ui) - check for ee --- frontend/app/components/Session/LivePlayer.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/app/components/Session/LivePlayer.js b/frontend/app/components/Session/LivePlayer.js index cbc3410cd..c67103185 100644 --- a/frontend/app/components/Session/LivePlayer.js +++ b/frontend/app/components/Session/LivePlayer.js @@ -31,7 +31,7 @@ const InitLoader = connectPlayer(state => ({ }))(Loader); -function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, loadingCredentials, assistCredendials, request }) { +function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, loadingCredentials, assistCredendials, request, isEnterprise }) { useEffect(() => { if (!loadingCredentials) { initPlayer(session, jwt, assistCredendials); @@ -41,7 +41,9 @@ function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, l // LAYOUT (TODO: local layout state - useContext or something..) useEffect(() => { - request(); + if (isEnterprise) { + request(); + } return () => { toggleFullscreen(false); closeBottomBlock(); @@ -74,6 +76,7 @@ export default withRequest({ showAssist: state.getIn([ 'sessions', 'showChatWindow' ]), jwt: state.get('jwt'), fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]), + isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee', }), { toggleFullscreen, closeBottomBlock }, )(WebPlayer))); \ No newline at end of file From 7c4b410a359c162b4e428da3dd1c2e3abc93d680 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 24 Dec 2021 22:45:27 +0530 Subject: [PATCH 4/9] fix(ui) - show live sessions by user --- .../components/AssistTabs/AssistTabs.tsx | 76 ++++--------------- .../components/SessionList/SessionList.tsx | 40 ++++++++++ .../Assist/components/SessionList/index.ts | 1 + .../components/Session_/PlayerBlockHeader.js | 2 +- 4 files changed, 55 insertions(+), 64 deletions(-) create mode 100644 frontend/app/components/Assist/components/SessionList/SessionList.tsx create mode 100644 frontend/app/components/Assist/components/SessionList/index.ts diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx index 1b1d694dd..bd026797e 100644 --- a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx +++ b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx @@ -1,77 +1,27 @@ import React, { useEffect, useState } from 'react'; -import { connect } from 'react-redux'; -import { applyFilter, addAttribute } from 'Duck/filters'; -import { fetchList } from 'Duck/sessions'; -import { KEYS } from 'Types/filter/customFilter'; -import { Link, Loader } from 'UI'; -import Filter from 'Types/filter'; -import { List } from 'immutable'; -import Counter from 'App/components/shared/SessionItem/Counter'; -import { fetchLiveList } from 'Duck/sessions'; -import { session as sessionRoute } from 'App/routes'; -import { session } from 'App/components/Session_/session.css'; - -const RowItem = ({ startedAt, sessionId }) => { - return ( - -
- Tab1 - -
- - ); -} +import { SlideModal } from 'UI'; +import SessionList from '../SessionList'; interface Props { - list: List, - session: any, - fetchLiveList: () => void, - applyFilter: () => void, - filters: Filter - addAttribute: (obj) => void, - loading: boolean + userId: any, } const AssistTabs = React.memo((props: Props) => { const [showMenu, setShowMenu] = useState(false) - useEffect(() => { - if (showMenu) { - props.fetchLiveList(); - } - }, [showMenu]) - - useEffect(() => { - if (!props.loading && props.list.size === 0) { - props.fetchLiveList(); - } - }, [props.list]) - return (
-
setShowMenu(!showMenu)}>Active Tabs
- {showMenu && ( -
- - {props.list.map((item, index) => ( - - ))} - -
- )} +
setShowMenu(!showMenu)}> + Live Sessions +
+ Live Sessions by {props.userId}
} + isDisplayed={ showMenu } + content={ showMenu && } + onClose={ () => setShowMenu(false) } + />
); }); -export default connect(state => { - const session = state.getIn([ 'sessions', 'current' ]); - return { - loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]), - list: state.getIn(['sessions', 'liveSessions']).filter(i => i.userId === session.userId), - session, - filters: state.getIn([ 'filters', 'appliedFilter' ]), - } -}, { applyFilter, addAttribute, fetchLiveList })(AssistTabs); \ No newline at end of file +export default AssistTabs; \ No newline at end of file diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx new file mode 100644 index 000000000..aaab06fca --- /dev/null +++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx @@ -0,0 +1,40 @@ +import React, { useEffect } from 'react'; +import { connect } from 'react-redux'; +import { fetchLiveList } from 'Duck/sessions'; +import { Loader, NoContent } from 'UI'; +import SessionItem from 'Shared/SessionItem'; + +interface Props { + loading: boolean, + list: any, + session: any, + fetchLiveList: () => void, +} +function SessionList(props: Props) { + useEffect(() => { + props.fetchLiveList(); + }, []) + + return ( + + +
+ { props.list.map(session => ) } +
+ + + ); +} + +export default connect(state => { + const session = state.getIn([ 'sessions', 'current' ]); + return { + session, + list: state.getIn(['sessions', 'liveSessions']) + .filter(i => i.userId === session.userId && i.sessionId !== session.sessionId), + loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]), + } +}, { fetchLiveList })(SessionList); \ No newline at end of file diff --git a/frontend/app/components/Assist/components/SessionList/index.ts b/frontend/app/components/Assist/components/SessionList/index.ts new file mode 100644 index 000000000..779c9df2a --- /dev/null +++ b/frontend/app/components/Assist/components/SessionList/index.ts @@ -0,0 +1 @@ +export { default } from './SessionList'; \ No newline at end of file diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js index fbc0b0a5b..20b5af366 100644 --- a/frontend/app/components/Session_/PlayerBlockHeader.js +++ b/frontend/app/components/Session_/PlayerBlockHeader.js @@ -116,7 +116,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
- { live && } + { live && } { live && } { !live && ( <> From 9cc5542fc77612882e48a1160c05143dd49e7e5f Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 27 Dec 2021 20:07:08 +0530 Subject: [PATCH 5/9] change(ui) - offline vs live session --- .../components/AssistTabs/AssistTabs.tsx | 21 +++++++++--- .../components/AssistTabs/assistTabs.css | 5 +++ frontend/app/components/Session/LivePlayer.js | 7 ++-- frontend/app/components/Session/Session.js | 17 +++------- .../components/Session_/PlayerBlockHeader.js | 33 ++++++++++++------- .../components/Session_/playerBlockHeader.css | 12 +++++++ .../shared/SessionItem/SessionItem.js | 24 ++++++++++---- .../shared/SessionItem/sessionItem.css | 2 +- frontend/app/duck/funnels.js | 1 - frontend/app/duck/sessions.js | 12 ++++++- .../MessageDistributor/MessageDistributor.ts | 4 +-- frontend/app/player/singletone.js | 6 ++-- frontend/app/types/session/session.js | 3 +- 13 files changed, 99 insertions(+), 48 deletions(-) diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx index bd026797e..ff62a899a 100644 --- a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx +++ b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx @@ -1,18 +1,29 @@ import React, { useEffect, useState } from 'react'; -import { SlideModal } from 'UI'; +import { SlideModal, Icon } from 'UI'; import SessionList from '../SessionList'; +import stl from './assistTabs.css' interface Props { userId: any, } -const AssistTabs = React.memo((props: Props) => { +const AssistTabs = (props: Props) => { const [showMenu, setShowMenu] = useState(false) return (
-
setShowMenu(!showMenu)}> - Live Sessions +
+
setShowMenu(!showMenu)} + > + More Live Sessions +
+ by +
+ +
{props.userId}
+
Live Sessions by {props.userId}
} @@ -22,6 +33,6 @@ const AssistTabs = React.memo((props: Props) => { />
); -}); +}; export default AssistTabs; \ No newline at end of file diff --git a/frontend/app/components/Assist/components/AssistTabs/assistTabs.css b/frontend/app/components/Assist/components/AssistTabs/assistTabs.css index e69de29bb..462879395 100644 --- a/frontend/app/components/Assist/components/AssistTabs/assistTabs.css +++ b/frontend/app/components/Assist/components/AssistTabs/assistTabs.css @@ -0,0 +1,5 @@ +.btnLink { + cursor: pointer; + color: $green; + text-decoration: underline; +} \ No newline at end of file diff --git a/frontend/app/components/Session/LivePlayer.js b/frontend/app/components/Session/LivePlayer.js index 07b8d3adc..e63578e5e 100644 --- a/frontend/app/components/Session/LivePlayer.js +++ b/frontend/app/components/Session/LivePlayer.js @@ -31,10 +31,10 @@ const InitLoader = connectPlayer(state => ({ }))(Loader); -const WebPlayer = React.memo(({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, loadingCredentials, assistCredendials, request }) => { +function WebPlayer({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, loadingCredentials, assistCredendials, request, hasSessionsPath }) { useEffect(() => { if (!loadingCredentials) { - initPlayer(session, jwt, assistCredendials); + initPlayer(session, jwt, assistCredendials, !hasSessionsPath && session.live); } return () => cleanPlayer() }, [ session.sessionId, loadingCredentials, assistCredendials ]); @@ -60,7 +60,7 @@ const WebPlayer = React.memo(({ showAssist, session, toggleFullscreen, closeBott ); -}); +}; export default withRequest({ initialData: null, @@ -74,6 +74,7 @@ export default withRequest({ showAssist: state.getIn([ 'sessions', 'showChatWindow' ]), jwt: state.get('jwt'), fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]), + hasSessionsPath: state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions'), }), { toggleFullscreen, closeBottomBlock }, )(WebPlayer))); \ No newline at end of file diff --git a/frontend/app/components/Session/Session.js b/frontend/app/components/Session/Session.js index 8ff629c55..e7af00642 100644 --- a/frontend/app/components/Session/Session.js +++ b/frontend/app/components/Session/Session.js @@ -6,7 +6,6 @@ import { fetchList as fetchSlackList } from 'Duck/integrations/slack'; import { Link, NoContent, Loader } from 'UI'; import { sessions as sessionsRoute } from 'App/routes'; import withPermissions from 'HOCs/withPermissions' -import { fetchLiveList } from 'Duck/sessions'; import LivePlayer from './LivePlayer'; import WebPlayer from './WebPlayer'; @@ -21,8 +20,7 @@ function Session({ session, fetchSession, fetchSlackList, - fetchLiveList, - filters + hasSessionsPath }) { usePageTitle("OpenReplay Session Player"); useEffect(() => { @@ -37,13 +35,7 @@ function Session({ return () => { if (!session.exists()) return; } - },[ sessionId ]); - - // useEffect(() => { - // if (session && session.live) { - // fetchLiveList(filters.toJS()) - // } - // }, [session]) + },[ sessionId, hasSessionsPath ]); return ( { session.isIOS ? - : (session.live ? : ) + : (session.live && !hasSessionsPath ? : ) } @@ -73,10 +65,9 @@ export default withPermissions(['SESSION_REPLAY'], '', true)(connect((state, pro loading: state.getIn([ 'sessions', 'loading' ]), hasErrors: !!state.getIn([ 'sessions', 'errors' ]), session: state.getIn([ 'sessions', 'current' ]), - filters: state.getIn([ 'filters', 'appliedFilter' ]), + hasSessionsPath: state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions'), }; }, { fetchSession, fetchSlackList, - fetchLiveList, })(Session)); \ No newline at end of file diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js index 20b5af366..ea2b63a06 100644 --- a/frontend/app/components/Session_/PlayerBlockHeader.js +++ b/frontend/app/components/Session_/PlayerBlockHeader.js @@ -4,14 +4,14 @@ import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames'; import { formatTimeOrDate } from 'App/date'; import { sessions as sessionsRoute, funnel as funnelRoute, funnelIssue as funnelIssueRoute, withSiteId } from 'App/routes'; import { Icon, CountryFlag, IconButton, BackLink } from 'UI'; -import { toggleFavorite } from 'Duck/sessions'; +import { toggleFavorite, setSessionPath } from 'Duck/sessions'; import cn from 'classnames'; import { connectPlayer } from 'Player'; import HeaderInfo from './HeaderInfo'; import SharePopup from '../shared/SharePopup/SharePopup'; import { fetchList as fetchListIntegration } from 'Duck/integrations/actions'; -import cls from './playerBlockHeader.css'; +import stl from './playerBlockHeader.css'; import Issues from './Issues/Issues'; import Autoplay from './Autoplay'; import AssistActions from '../Assist/components/AssistActions'; @@ -38,8 +38,9 @@ function capitalise(str) { funnelRef: state.getIn(['funnels', 'navRef']), siteId: state.getIn([ 'user', 'siteId' ]), funnelPage: state.getIn(['sessions', 'funnelPage']), + hasSessionsPath: state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions'), }), { - toggleFavorite, fetchListIntegration + toggleFavorite, fetchListIntegration, setSessionPath }) @withRouter export default class PlayerBlockHeader extends React.PureComponent { @@ -87,21 +88,24 @@ export default class PlayerBlockHeader extends React.PureComponent { userDevice, userBrowserVersion, userDeviceType, + live, }, loading, - live, + // live, disabled, jiraConfig, fullscreen, + hasSessionsPath } = this.props; - const { history, siteId } = this.props; + // const { history, siteId } = this.props; + const _live = live && !hasSessionsPath; return ( -
+
-
+
@@ -116,12 +120,17 @@ export default class PlayerBlockHeader extends React.PureComponent {
- { live && } - { live && } - { !live && ( + { live && hasSessionsPath && ( +
this.props.setSessionPath('')}> + This Session is Now Continuing Live +
+ )} + { _live && } + { _live && } + { !_live && ( <> -
+
)} - { !live && jiraConfig && jiraConfig.token && } + { !_live && jiraConfig && jiraConfig.token && }
diff --git a/frontend/app/components/Session_/playerBlockHeader.css b/frontend/app/components/Session_/playerBlockHeader.css index 325e34256..d9934ef1e 100644 --- a/frontend/app/components/Session_/playerBlockHeader.css +++ b/frontend/app/components/Session_/playerBlockHeader.css @@ -12,3 +12,15 @@ background-color: $gray-light; } +.liveSwitchButton { + cursor: pointer; + padding: 3px 8px; + border: solid thin $green; + color: $green; + border-radius: 3px; + margin-right: 10px; + &:hover { + background-color: $green; + color: white; + } +} \ No newline at end of file diff --git a/frontend/app/components/shared/SessionItem/SessionItem.js b/frontend/app/components/shared/SessionItem/SessionItem.js index 301bf4463..c1c20fe13 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.js +++ b/frontend/app/components/shared/SessionItem/SessionItem.js @@ -10,21 +10,33 @@ import { TextEllipsis } from 'UI'; import { deviceTypeIcon } from 'App/iconNames'; -import { toggleFavorite } from 'Duck/sessions'; -import { session as sessionRoute } from 'App/routes'; +import { toggleFavorite, setSessionPath } from 'Duck/sessions'; +import { session as sessionRoute, withSiteId } from 'App/routes'; import { durationFormatted, formatTimeOrDate } from 'App/date'; import stl from './sessionItem.css'; import LiveTag from 'Shared/LiveTag'; import Bookmark from 'Shared/Bookmark'; import Counter from './Counter' +import { withRouter } from 'react-router-dom'; const Label = ({ label = '', color = 'color-gray-medium'}) => (
{label}
) @connect(state => ({ - timezone: state.getIn(['sessions', 'timezone']) -}), { toggleFavorite }) + timezone: state.getIn(['sessions', 'timezone']), + isAssist: state.getIn(['sessions', 'activeTab']).type === 'live', + siteId: state.getIn([ 'user', 'siteId' ]), +}), { toggleFavorite, setSessionPath }) +@withRouter export default class SessionItem extends React.PureComponent { + + replaySession = () => { + const { history, session: { sessionId }, siteId, isAssist } = this.props; + if (!isAssist) { + this.props.setSessionPath(history.location.pathname) + } + history.push(withSiteId(sessionRoute(sessionId), siteId)) + } // eslint-disable-next-line complexity render() { const { @@ -110,9 +122,9 @@ export default class SessionItem extends React.PureComponent {
- +
- +
diff --git a/frontend/app/components/shared/SessionItem/sessionItem.css b/frontend/app/components/shared/SessionItem/sessionItem.css index 8f9824bec..cbf7bb2d1 100644 --- a/frontend/app/components/shared/SessionItem/sessionItem.css +++ b/frontend/app/components/shared/SessionItem/sessionItem.css @@ -92,7 +92,7 @@ display: flex; align-items: center; transition: all 0.2s; - /* opacity: 0; */ + cursor: pointer; &[data-viewed=true] { opacity: 1; } diff --git a/frontend/app/duck/funnels.js b/frontend/app/duck/funnels.js index 4e591237c..7dad8550a 100644 --- a/frontend/app/duck/funnels.js +++ b/frontend/app/duck/funnels.js @@ -119,7 +119,6 @@ const reducer = (state = initialState, action = {}) => { let stages = []; if (action.isRefresh) { const activeStages = state.get('activeStages'); - console.log('test', activeStages); const oldInsights = state.get('insights'); const lastStage = action.data.stages[action.data.stages.length - 1] const lastStageIndex = activeStages.toJS()[1]; diff --git a/frontend/app/duck/sessions.js b/frontend/app/duck/sessions.js index 53ec41f3e..977af85bb 100644 --- a/frontend/app/duck/sessions.js +++ b/frontend/app/duck/sessions.js @@ -8,7 +8,6 @@ import { getRE } from 'App/utils'; import { LAST_7_DAYS } from 'Types/app/period'; import { getDateRangeFromValue } from 'App/dateRange'; - const INIT = 'sessions/INIT'; const FETCH_LIST = new RequestTypes('sessions/FETCH_LIST'); @@ -26,6 +25,7 @@ const SET_AUTOPLAY_VALUES = 'sessions/SET_AUTOPLAY_VALUES'; const TOGGLE_CHAT_WINDOW = 'sessions/TOGGLE_CHAT_WINDOW'; const SET_FUNNEL_PAGE_FLAG = 'sessions/SET_FUNNEL_PAGE_FLAG'; const SET_TIMELINE_POINTER = 'sessions/SET_TIMELINE_POINTER'; +const SET_SESSION_PATH = 'sessions/SET_SESSION_PATH'; const SET_ACTIVE_TAB = 'sessions/SET_ACTIVE_TAB'; @@ -59,6 +59,7 @@ const initialState = Map({ host: '', funnelPage: Map(), timelinePointer: null, + sessionPath: '', }); const reducer = (state = initialState, action = {}) => { @@ -246,6 +247,8 @@ const reducer = (state = initialState, action = {}) => { return state.set('funnelPage', action.funnelPage ? Map(action.funnelPage) : false); case SET_TIMELINE_POINTER: return state.set('timelinePointer', action.pointer); + case SET_SESSION_PATH: + return state.set('sessionPath', action.path); default: return state; } @@ -386,4 +389,11 @@ export function setTimelinePointer(pointer) { type: SET_TIMELINE_POINTER, pointer } +} + +export function setSessionPath(path) { + return { + type: SET_SESSION_PATH, + path + } } \ No newline at end of file diff --git a/frontend/app/player/MessageDistributor/MessageDistributor.ts b/frontend/app/player/MessageDistributor/MessageDistributor.ts index c742c10b5..35ada8ce3 100644 --- a/frontend/app/player/MessageDistributor/MessageDistributor.ts +++ b/frontend/app/player/MessageDistributor/MessageDistributor.ts @@ -118,7 +118,7 @@ export default class MessageDistributor extends StatedScreen { private navigationStartOffset: number = 0; private lastMessageTime: number = 0; - constructor(private readonly session: any /*Session*/, jwt: string, config) { + constructor(private readonly session: any /*Session*/, jwt: string, config, live: boolean) { super(); this.pagesManager = new PagesManager(this, this.session.isMobile) this.mouseManager = new MouseManager(this); @@ -126,7 +126,7 @@ export default class MessageDistributor extends StatedScreen { this.sessionStart = this.session.startedAt; - if (this.session.live) { + if (live) { // const sockUrl = `wss://live.openreplay.com/1/${ this.session.siteId }/${ this.session.sessionId }/${ jwt }`; // this.subscribeOnMessages(sockUrl); initListsDepr({}) diff --git a/frontend/app/player/singletone.js b/frontend/app/player/singletone.js index 619f9b02b..9d811023e 100644 --- a/frontend/app/player/singletone.js +++ b/frontend/app/player/singletone.js @@ -28,11 +28,11 @@ document.addEventListener("visibilitychange", function() { } }); -export function init(session, jwt, config) { - const live = session.live; +export function init(session, jwt, config, live = false) { + // const live = session.live; const endTime = !live && session.duration.valueOf(); - instance = new Player(session, jwt, config); + instance = new Player(session, jwt, config, live); update({ initialized: true, live, diff --git a/frontend/app/types/session/session.js b/frontend/app/types/session/session.js index 1fabc79a6..61ca9e489 100644 --- a/frontend/app/types/session/session.js +++ b/frontend/app/types/session/session.js @@ -88,6 +88,7 @@ export default Record({ ...session }) => { const duration = Duration.fromMillis(session.duration < 1000 ? 1000 : session.duration); + const durationSeconds = duration.valueOf(); const startedAt = +startTs; const userDevice = session.userDevice || session.userDeviceType || 'Other'; @@ -96,7 +97,7 @@ export default Record({ const events = List(session.events) .map(e => SessionEvent({ ...e, time: e.timestamp - startedAt })) - .filter(({ type }) => type !== TYPES.CONSOLE); + .filter(({ type, time }) => type !== TYPES.CONSOLE && time <= durationSeconds); let resources = List(session.resources) .map(Resource); From e620d28203702b739e77cae0ed0fc9ef8aa368f5 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 27 Dec 2021 21:19:10 +0530 Subject: [PATCH 6/9] change(ui) - pointer highlight --- .../app/components/Session_/Fetch/Fetch.js | 20 ++++++++++--------- .../components/Session_/Network/Network.js | 4 +++- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/frontend/app/components/Session_/Fetch/Fetch.js b/frontend/app/components/Session_/Fetch/Fetch.js index 4cc3e38b7..8bc4f2117 100644 --- a/frontend/app/components/Session_/Fetch/Fetch.js +++ b/frontend/app/components/Session_/Fetch/Fetch.js @@ -2,19 +2,20 @@ import { getRE } from 'App/utils'; import { Label, NoContent, Input, SlideModal, CloseButton } from 'UI'; import { connectPlayer, pause, jump } from 'Player'; -import Autoscroll from '../Autoscroll'; +// import Autoscroll from '../Autoscroll'; import BottomBlock from '../BottomBlock'; import TimeTable from '../TimeTable'; import FetchDetails from './FetchDetails'; import { renderName, renderDuration } from '../Network'; import { connect } from 'react-redux'; +import { setTimelinePointer } from 'Duck/sessions'; @connectPlayer(state => ({ list: state.fetchList, })) @connect(state => ({ timelinePointer: state.getIn(['sessions', 'timelinePointer']), -})) +}), { setTimelinePointer }) export default class Fetch extends React.PureComponent { state = { filter: "", @@ -43,27 +44,28 @@ export default class Fetch extends React.PureComponent { onRowClick = (item, index) => { pause() this.setState({ current: item, currentIndex: index, showFetchDetails: true }); + this.props.setTimelinePointer(null); } closeModal = () => this.setState({ current: null, showFetchDetails: false }); nextClickHander = () => { - const { list } = this.props; - const { currentIndex } = this.state; + // const { list } = this.props; + const { currentIndex, filteredList } = this.state; - if (currentIndex === list.length - 1) return; + if (currentIndex === filteredList.length - 1) return; const newIndex = currentIndex + 1; - this.setCurrent(list[newIndex], newIndex); + this.setCurrent(filteredList[newIndex], newIndex); this.setState({ showFetchDetails: true }); } prevClickHander = () => { - const { list } = this.props; - const { currentIndex } = this.state; + // const { list } = this.props; + const { currentIndex, filteredList } = this.state; if (currentIndex === 0) return; const newIndex = currentIndex - 1; - this.setCurrent(list[newIndex], newIndex); + this.setCurrent(filteredList[newIndex], newIndex); this.setState({ showFetchDetails: true }); } diff --git a/frontend/app/components/Session_/Network/Network.js b/frontend/app/components/Session_/Network/Network.js index 1d86394c5..11c7b410c 100644 --- a/frontend/app/components/Session_/Network/Network.js +++ b/frontend/app/components/Session_/Network/Network.js @@ -6,6 +6,7 @@ import { TYPES } from 'Types/session/resource'; import stl from './network.css'; import NetworkContent from './NetworkContent'; import { connect } from 'react-redux'; +import { setTimelinePointer } from 'Duck/sessions'; const ALL = 'ALL'; const XHR = 'xhr'; @@ -83,7 +84,7 @@ export function renderDuration(r) { })) @connect(state => ({ timelinePointer: state.getIn(['sessions', 'timelinePointer']), -})) +}), { setTimelinePointer }) export default class Network extends React.PureComponent { state = { filter: '', @@ -96,6 +97,7 @@ export default class Network extends React.PureComponent { pause(); jump(e.time); this.setState({ currentIndex: index }) + this.props.setTimelinePointer(null); } onTabClick = activeTab => this.setState({ activeTab }) From 517cce7241b44c4498720beb266e1918e17d3eeb Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 27 Dec 2021 21:48:41 +0530 Subject: [PATCH 7/9] change(ui) - no data msg --- .../components/Assist/components/SessionList/SessionList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx index aaab06fca..f556a8f1d 100644 --- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx +++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx @@ -18,8 +18,8 @@ function SessionList(props: Props) { return (
{ props.list.map(session => ) } From 6ee062192393a8983fac9dec31fdad9033bac8d7 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 27 Dec 2021 21:50:40 +0530 Subject: [PATCH 8/9] change(ui) - removed log --- frontend/app/components/Session_/Network/Network.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/app/components/Session_/Network/Network.js b/frontend/app/components/Session_/Network/Network.js index 11c7b410c..150cadc59 100644 --- a/frontend/app/components/Session_/Network/Network.js +++ b/frontend/app/components/Session_/Network/Network.js @@ -110,11 +110,6 @@ export default class Network extends React.PureComponent { this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 }); } - // onFilterChange = (e, { value }) => this.setState({ filter: value }) - - componentDidUpdate() { - console.log('test') - } static getDerivedStateFromProps(nextProps, prevState) { const { filteredList } = prevState; From 00273a8e0e60e930636b911d2173dc6e2613fa0b Mon Sep 17 00:00:00 2001 From: Mehdi Osman Date: Tue, 28 Dec 2021 01:26:01 +0300 Subject: [PATCH 9/9] Fix typo --- frontend/app/components/Session/LivePlayer.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/app/components/Session/LivePlayer.js b/frontend/app/components/Session/LivePlayer.js index 4007836ff..34c56721e 100644 --- a/frontend/app/components/Session/LivePlayer.js +++ b/frontend/app/components/Session/LivePlayer.js @@ -76,11 +76,8 @@ export default withRequest({ showAssist: state.getIn([ 'sessions', 'showChatWindow' ]), jwt: state.get('jwt'), fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]), -<<<<<<< HEAD hasSessionsPath: state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions'), -======= isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee', ->>>>>>> e2eec140e9dce5709f8ff9fd3b114a1e2a0f0e11 }), { toggleFullscreen, closeBottomBlock }, -)(WebPlayer))); \ No newline at end of file +)(WebPlayer)));