From c1b2e0afe044174f35645e83e9919cd723a07ce2 Mon Sep 17 00:00:00 2001 From: Delirium Date: Fri, 5 Apr 2024 11:15:19 +0200 Subject: [PATCH] fix ui - some small bug fixes (#2040) --- .../app/components/Client/Sites/Sites.tsx | 4 +- .../components/Alerts/AlertsView.tsx | 2 +- .../Player/LivePlayer/LivePlayerInst.tsx | 1 + .../Player/MobilePlayer/PlayerInst.tsx | 1 + .../Player/ReplayPlayer/PlayerInst.tsx | 1 + .../Session_/Storage/Storge.DEPRECATED.js | 282 ------------------ frontend/app/types/filter/newFilter.js | 10 + tracker/tracker/CHANGELOG.md | 8 + tracker/tracker/package.json | 2 +- 9 files changed, 25 insertions(+), 286 deletions(-) delete mode 100644 frontend/app/components/Session_/Storage/Storge.DEPRECATED.js diff --git a/frontend/app/components/Client/Sites/Sites.tsx b/frontend/app/components/Client/Sites/Sites.tsx index 4692419bb..4d2aae237 100644 --- a/frontend/app/components/Client/Sites/Sites.tsx +++ b/frontend/app/components/Client/Sites/Sites.tsx @@ -151,10 +151,10 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => { {sliceListPerPage(filteredSites, page - 1, pageSize).map((project: Project) => ( - <> + - + ))}
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx index d0ea74281..2ea7d1153 100644 --- a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx +++ b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx @@ -32,7 +32,7 @@ function AlertsView({ siteId }: IAlertsView) {
- +
diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx index ef3630df8..d9b23242a 100644 --- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx +++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx @@ -64,6 +64,7 @@ function Player(props: IProps) { const max = diff > window.innerHeight / 2 ? window.innerHeight / 2 : diff; const newHeight = Math.max(50, max); setPanelHeight(newHeight); + playerContext.player.scale(); debounceUpdate(newHeight); }; diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx index e82511aea..4ee3347dc 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx @@ -98,6 +98,7 @@ function Player(props: IProps) { const max = diff > window.innerHeight / 2 ? window.innerHeight / 2 : diff; const newHeight = Math.max(50, max); setPanelHeight(newHeight); + playerContext.player.scale(); debounceUpdate(newHeight) }; diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx index 7f7096744..acd61a734 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx @@ -105,6 +105,7 @@ function Player(props: IProps) { const max = diff > window.innerHeight / 2 ? window.innerHeight / 2 : diff; const newHeight = Math.max(50, max); setPanelHeight(newHeight); + playerContext.player.scale(); debounceUpdate(newHeight) }; diff --git a/frontend/app/components/Session_/Storage/Storge.DEPRECATED.js b/frontend/app/components/Session_/Storage/Storge.DEPRECATED.js deleted file mode 100644 index 0fc65c90a..000000000 --- a/frontend/app/components/Session_/Storage/Storge.DEPRECATED.js +++ /dev/null @@ -1,282 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { hideHint } from 'Duck/components/player'; -import { - connectPlayer, - selectStorageType, - STORAGE_TYPES, - selectStorageListNow, - selectStorageList, -} from 'Player'; -import { JSONTree, NoContent } from 'UI'; -import { formatMs } from 'App/date'; -import { diff } from 'deep-diff'; -import { jump } from 'Player'; -import Autoscroll from '../Autoscroll'; -import BottomBlock from '../BottomBlock/index'; - -import stl from './storage.module.css'; - -// const STATE = 'STATE'; -// const DIFF = 'DIFF'; -// const TABS = [ DIFF, STATE ].map(tab => ({ text: tab, key: tab })); - -function getActionsName(type) { - switch(type) { - case STORAGE_TYPES.MOBX: - return "MUTATIONS"; - case STORAGE_TYPES.VUEX: - return "MUTATIONS"; - default: - return "ACTIONS"; - } -} - -@connectPlayer(state => ({ - type: selectStorageType(state), - list: selectStorageList(state), - listNow: selectStorageListNow(state), -})) -@connect(state => ({ - hintIsHidden: state.getIn(['components', 'player', 'hiddenHints', 'storage']), -}), { - hideHint -}) -//@withEnumToggle('activeTab', 'setActiveTab', DIFF) -export default class Storage extends React.PureComponent { - lastBtnRef = React.createRef() - - focusNextButton() { - if (this.lastBtnRef.current) { - this.lastBtnRef.current.focus(); - } - } - - componentDidMount() { - this.focusNextButton(); - } - - componentDidUpdate(prevProps) { - if (prevProps.listNow.length !== this.props.listNow.length) { - this.focusNextButton(); - } - } - - renderDiff(item, prevItem) { - if (!prevItem) { - return
- } - const stateDiff = diff(prevItem.state, item.state) - console.log(item.state, prevItem.state, stateDiff) - const greenPaths = [] - const redPaths = [] - const yellowPaths = [] - if (!stateDiff) { - return No diff - } - // stateDiff.forEach(d => { - // try { - // let { path, kind, rhs: value } = d; - // if (kind === 'A') { - // path.slice().push(d.index); - // kind = d.item.kind; - // value = d.item.rhs; - // } - - // if (kind === 'N') greenPaths.push(d.path.slice().reverse()); - // if (kind === 'D') redPaths.push(d.path.slice().reverse()); - // if (kind === 'E') yellowPaths.push(d.path.slice().reverse()); - // } catch (e) { - // console.error(e) - // } - // }); - function renderDiffs(diff, i) { - const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs) - const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs) - - const createPath = () => { - let path = []; - - if (diff.path) { - path = path.concat(diff.path); - } - if (typeof(diff.index) !== 'undefined') { - path.push(diff.index); - } - return path.length ? path.join('.') : ''; - } - - return ( -
- { createPath() }: { oldValue || 'undefined' }{' -> '} { newValue || 'undefined'} -
- ) - } - return ( -
- {stateDiff.map((d, i) => renderDiffs(d, i))} -
- ) - // - ; - } - - ensureString(actionType) { - if (typeof actionType === 'string') return actionType; - return "UNKNOWN"; - } - - goNext = () => { - const { list, listNow } = this.props; - jump(list[ listNow.length ].time, list[ listNow.length ]._index); - } - - - renderTab () { - const { listNow } = this.props; - if (listNow.length === 0) { - return "Not initialized"; //? - } - return ; - } - - renderItem(item, i, prevItem) { - const { type, listNow, list } = this.props; - let src; - let name; - - switch(type) { - case STORAGE_TYPES.REDUX: - case STORAGE_TYPES.NGRX: - src = item.action; - name = src && src.type; - break; - case STORAGE_TYPES.VUEX: - src = item.mutation; - name = src && src.type; - break; - case STORAGE_TYPES.MOBX: - src = item.payload; - name = `@${item.type} ${src && src.type}`; - break; - case STORAGE_TYPES.ZUSTAND: - src = null; - name = item.mutation.join('') - } - - return ( -
- {src === null ? ( -
{name}
- ) : ( - <> - {this.renderDiff(item, prevItem)} -
- -
- - )} -
- { i + 1 < listNow.length && - - } - { i + 1 === listNow.length && i + 1 < list.length && - - } - { typeof item.duration === 'number' && -
- { formatMs(item.duration) } -
- } -
-
- ); - } - - render() { - const { - type, - listNow, - list, - hintIsHidden, - } = this.props; - - const showStore = type !== STORAGE_TYPES.MOBX; - return ( - - - State - { list.length > 0 && -
- { showStore && -

- {"STORE"} -

- } -

- {getActionsName(type)} -

-
- } - - - - {'Inspect your application state while you’re replaying your users sessions. OpenReplay supports '} - Redux{', '} - VueX{', '} - Pinia{', '} - Zustand{', '} - MobX{' and '} - NgRx. -

- - - : null - } - size="small" - show={ listNow.length === 0 } - > - { showStore && -
- { listNow.length === 0 - ?
{ "Empty state." }
- : this.renderTab() - } -
- } -
- - { listNow.map((item, i) => this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined)) } - -
- - - - ); - } -} diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 1fa3f8c7e..0084d1e39 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -652,6 +652,16 @@ export const conditionalFilters = [ operatorOptions: filterOptions.stringConditional, isEvent: false }, + { + key: FilterKey.USERID, + type: FilterType.MULTIPLE, + category: FilterCategory.USER, + label: 'User Id', + placeholder: 'E.g. Alex, or alex@domain.com, or EMP123', + operator: 'is', + operatorOptions: filterOptions.stringOperators.concat([{ label: 'is undefined', value: 'isUndefined' }]), + icon: 'filters/userid' + } ].sort((a, b) => { const aOrder = filterOrder[a.category] ?? 9 const bOrder = filterOrder[b.category] ?? 9 diff --git a/tracker/tracker/CHANGELOG.md b/tracker/tracker/CHANGELOG.md index 5e7b658ae..3567bb1ea 100644 --- a/tracker/tracker/CHANGELOG.md +++ b/tracker/tracker/CHANGELOG.md @@ -1,3 +1,11 @@ +# 12.0.8 + +- better logging for network batches + +# 12.0.7 + +- fixes for window.open reinit method + # 12.0.6 - allow network sanitizer to return null (will ignore network req) diff --git a/tracker/tracker/package.json b/tracker/tracker/package.json index 91935c985..4a0a3e27b 100644 --- a/tracker/tracker/package.json +++ b/tracker/tracker/package.json @@ -1,7 +1,7 @@ { "name": "@openreplay/tracker", "description": "The OpenReplay tracker main package", - "version": "12.0.8-2", + "version": "12.0.8", "keywords": [ "logging", "replay"