jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - removed appearnace

Browse source
This commit is contained in:
Shekar Siri 2022-06-07 12:38:28 +02:00
parent 0b0798b0ef
commit c3d4470bb1
10 changed files with 13 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
frontend/app/components/Dashboard/Widgets/OverviewWidgets/OverviewWidgets.js
View file

@ -1,106 +0,0 @@
import React from 'react';
import { widgetHOC } from '../common';
import { TrendChart } from '../TrendChart';
import { OVERVIEW_WIDGET_MAP } from 'Types/dashboard';
import { camelCased } from 'App/utils';
import { connect } from 'react-redux';
import { updateAppearance } from 'Duck/user';
import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
import cn from 'classnames';
import stl from './overviewWidgets.module.css';
const customParams = rangeName => {
const params = { density: 16 }
if (rangeName === LAST_24_HOURS) params.density = 16
if (rangeName === LAST_30_MINUTES) params.density = 16
if (rangeName === YESTERDAY) params.density = 16
if (rangeName === LAST_7_DAYS) params.density = 16
return params
}
@connect(state => ({
dashboardAppearance: state.getIn([ 'user', 'account', 'appearance', 'dashboard' ]),
appearance: state.getIn([ 'user', 'account', 'appearance' ]),
comparing: state.getIn([ 'dashboard', 'comparing' ]),
}), { updateAppearance })
@widgetHOC('overview', { customParams }, false)
export default class OverviewWidgets extends React.PureComponent {
handleRemove = widgetKey => {
const { appearance } = this.props;
this.props.updateAppearance(appearance.setIn([ 'dashboard', widgetKey ], false));
}
render() {
const { data, dataCompare, loading, loadingCompare, dashboardAppearance, comparing } = this.props;
const widgets = {}
const widgetsCompare = {}
data
.filter(item => dashboardAppearance[camelCased(item.key)]) // TODO should come filtered from API
.forEach(item => {
widgets[item.key] = item;
})
if (comparing) {
dataCompare
.filter(item => dashboardAppearance[camelCased(item.key)]) // TODO should come filtered from API
.forEach(item => {
widgetsCompare[item.key] = item;
})
}
return (
<React.Fragment>
{Object.values(OVERVIEW_WIDGET_MAP).map(item => {
const widget = widgets[item.key] || {};
item.data = widget ? widget.chart : {};
const widgetCompare = widgetsCompare[item.key] || {};
if (comparing) {
item.dataCompare = widgetCompare ? widgetCompare.chart : {};
}
if (!dashboardAppearance[item.key]) return;
return (
<div key={item.key} className={cn(stl.wrapper)}>
<TrendChart
syncId={item.key}
loading={loading}
data={item.data}
key={item.key}
tooltipLael={item.tooltipLabel || 'Avg'}
title={item.name}
avg={Math.round(widget.value)}
subtext={item.subtext}
progress={Math.round(widget.progress)}
unit={item.unit}
handleRemove={() => this.handleRemove(item.key)}
comparing={comparing}
/>
{comparing && (
<React.Fragment>
<div className="mb-2" />
<TrendChart
syncId={item.key}
compare
loading={loadingCompare}
data={item.dataCompare}
key={'_' + item.key}
title={item.name}
avg={Math.round(widgetCompare.value)}
subtext={item.subtext}
progress={Math.round(widgetCompare.progress)}
unit={item.unit}
handleRemove={() => this.handleRemove(item.key)}
comparing={comparing}
/>
</React.Fragment>
)}
</div>
)
})}
</React.Fragment>
);
}
}

12
frontend/app/components/Dashboard/Widgets/OverviewWidgets/overviewWidgets.module.css
View file

@ -1,12 +0,0 @@
.wrapper {
border: dotted 2px transparent;
border-radius: 3px;
margin: -5px;
padding: 5px;
transition: all 0.3s;
&:hover {
transition: all 0.2s;
border: dotted 2px $gray-medium;
}
}

10
frontend/app/components/Dashboard/Widgets/common/widgetHOC.js
View file

@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import cn from 'classnames';
import { CloseButton } from 'UI';
import { fetchWidget } from 'Duck/dashboard';
import { updateAppearance } from 'Duck/user';
// import { updateAppearance } from 'Duck/user';
import { WIDGET_MAP } from 'Types/dashboard';
import Title from './Title';
import stl from './widgetHOC.module.css';
@ -26,7 +26,7 @@ export default (
filters: state.getIn([ 'dashboard', compare ? 'filtersCompare' : 'filters' ]),
period: state.getIn([ 'dashboard', compare ? 'periodCompare' : 'period' ]), //TODO: filters
platform: state.getIn([ 'dashboard', 'platform' ]),
appearance: state.getIn([ 'user', 'account', 'appearance' ]),
// appearance: state.getIn([ 'user', 'account', 'appearance' ]),
dataCompare: state.getIn([ 'dashboard', '_' + widgetKey ]), // only for overview
loadingCompare: state.getIn([ 'dashboard', 'fetchWidget', '_' + widgetKey, 'loading' ]),
@ -35,7 +35,7 @@ export default (
}
}, {
fetchWidget,
updateAppearance,
// updateAppearance,
})
class WidgetWrapper extends React.PureComponent {
constructor(props) {
@ -74,8 +74,8 @@ export default (
}
handleRemove = () => {
const { appearance } = this.props;
this.props.updateAppearance(appearance.setIn([ 'dashboard', widgetKey ], false));
// const { appearance } = this.props;
// this.props.updateAppearance(appearance.setIn([ 'dashboard', widgetKey ], false));
}
render() {

1
frontend/app/components/Header/Header.js
View file

@ -150,7 +150,6 @@ const Header = (props) => {
export default withRouter(connect(
state => ({
account: state.getIn([ 'user', 'account' ]),
appearance: state.getIn([ 'user', 'account', 'appearance' ]),
siteId: state.getIn([ 'site', 'siteId' ]),
sites: state.getIn([ 'site', 'list' ]),
showAlerts: state.getIn([ 'dashboard', 'showAlerts' ]),

6
frontend/app/components/Session/WebPlayer.js
View file

@ -39,10 +39,10 @@ function PlayerContent({ live, fullscreen, showEvents }) {
}
function WebPlayer (props) {
const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, config } = props;
const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt} = props;
useEffect(() => {
initPlayer(session, jwt, config);
initPlayer(session, jwt);
const jumptTime = props.query.get('jumpto');
if (jumptTime) {
@ -70,7 +70,7 @@ function WebPlayer (props) {
export default connect(state => ({
session: state.getIn([ 'sessions', 'current' ]),
jwt: state.get('jwt'),
config: state.getIn([ 'user', 'account', 'iceServers' ]),
// config: state.getIn([ 'user', 'account', 'iceServers' ]),
fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
}), {
toggleFullscreen,

14
frontend/app/duck/user.js
View file

@ -12,7 +12,6 @@ const FETCH_ACCOUNT = new RequestTypes('user/FETCH_ACCOUNT');
const FETCH_TENANTS = new RequestTypes('user/FETCH_TENANTS');
const UPDATE_ACCOUNT = new RequestTypes('user/UPDATE_ACCOUNT');
const RESEND_EMAIL_VERIFICATION = new RequestTypes('user/RESEND_EMAIL_VERIFICATION');
const UPDATE_APPEARANCE = new RequestTypes('user/UPDATE_APPEARANCE');
const FETCH_CLIENT = new RequestTypes('user/FETCH_CLIENT');
export const UPDATE_PASSWORD = new RequestTypes('user/UPDATE_PASSWORD');
const PUT_CLIENT = new RequestTypes('user/PUT_CLIENT');
@ -53,8 +52,6 @@ const reducer = (state = initialState, action = {}) => {
).set('onboarding', true);
case REQUEST_RESET_PASSWORD.SUCCESS:
break;
case UPDATE_APPEARANCE.REQUEST: //TODO: failure handling
return state.mergeIn([ 'account', 'appearance' ], action.appearance)
case UPDATE_ACCOUNT.SUCCESS:
case FETCH_ACCOUNT.SUCCESS:
return state.set('account', Account(action.data)).set('passwordErrors', List());
@ -87,7 +84,6 @@ export default withRequestState({
fetchUserInfoRequest: [ FETCH_ACCOUNT, FETCH_CLIENT, FETCH_TENANTS ],
putClientRequest: PUT_CLIENT,
updateAccountRequest: UPDATE_ACCOUNT,
updateAppearance: UPDATE_APPEARANCE,
}, reducer);
export const login = params => dispatch => dispatch({
@ -161,16 +157,6 @@ export function resendEmailVerification(email) {
}
}
export function updateAppearance(appearance) {
return {
types: UPDATE_APPEARANCE.toArray(),
call: client => client.post('/account/appearance', {
appearance: Record.isRecord(appearance) ? appearance.toData() : appearance
}),
appearance,
};
}
export function pushNewSite(newSite) {
return {
type: PUSH_NEW_SITE,

4
frontend/app/player/MessageDistributor/MessageDistributor.ts
View file

@ -92,7 +92,7 @@ export default class MessageDistributor extends StatedScreen {
private navigationStartOffset: number = 0;
private lastMessageTime: number = 0;
constructor(private readonly session: any /*Session*/, jwt: string, config, live: boolean) {
constructor(private readonly session: any /*Session*/, config: any, live: boolean) {
super();
this.pagesManager = new PagesManager(this, this.session.isMobile)
this.mouseMoveManager = new MouseMoveManager(this);
@ -101,8 +101,6 @@ export default class MessageDistributor extends StatedScreen {
this.sessionStart = this.session.startedAt;
if (live) {
// const sockUrl = `wss://live.openreplay.com/1/${ this.session.siteId }/${ this.session.sessionId }/${ jwt }`;
// this.subscribeOnMessages(sockUrl);
initListsDepr({})
this.assistManager.connect();
} else {

4
frontend/app/player/MessageDistributor/managers/AssistManager.ts
View file

@ -73,7 +73,7 @@ const MAX_RECONNECTION_COUNT = 4;
export default class AssistManager {
constructor(private session, private md: MessageDistributor, private config) {}
constructor(private session: any, private md: MessageDistributor, private config: any) {}
private setStatus(status: ConnectionStatus) {
if (getState().peerConnectionStatus === ConnectionStatus.Disconnected &&
@ -306,7 +306,7 @@ export default class AssistManager {
const urlObject = new URL(window.env.API_EDP)
return import('peerjs').then(({ default: Peer }) => {
if (this.cleaned) {return Promise.reject("Already cleaned")}
const peerOpts = {
const peerOpts: any = {
host: urlObject.hostname,
path: '/assist',
port: urlObject.port === "" ? (location.protocol === 'https:' ? 443 : 80 ): parseInt(urlObject.port),

8
frontend/app/types/account/account.js
View file

@ -1,11 +1,9 @@
import Member from 'Types/member';
import Appearance from './appearance';
import Limit from './limit';
import { DateTime } from 'luxon';
export default Member.extend({
changePassword: undefined,
appearance: Appearance(),
limits: Limit(),
banner: undefined,
email: '',
@ -18,10 +16,8 @@ export default Member.extend({
iceServers: undefined,
hasPassword: false, // to check if it's SSO
}, {
fromJS: ({ current = {}, ...account})=> ({
fromJS: ({ ...account})=> ({
...account,
license: current.license,
expirationDate: current.expirationDate > 0 && DateTime.fromMillis(current.expirationDate || 0),
appearance: Appearance(account.appearance),
expirationDate: account.expirationDate > 0 && DateTime.fromMillis(account.expirationDate || 0),
})
});

86
frontend/app/types/account/appearance.js
View file

@ -1,86 +0,0 @@
import Record from 'Types/Record';
import { WIDGET_KEYS } from 'Types/dashboard';
export const OWNER = 'po';
export const QANALYST = 'qa';
export const DEVELOPER = 'dev';
export const CAGENT = 'agent';
export const CUSTOM ='CUSTOM';
export const NOT_SET = 'NOT_SET';
export const ROLE_NAMES = {
[ OWNER ]: "Product Owner",
[ QANALYST ]: "Quality Assurance",
[ DEVELOPER ]: "Developer",
[ CAGENT ]: "Customer Success",
[ CUSTOM ]: "Custom Role",
};
const dashboardAllTrueValues = WIDGET_KEYS.reduce((values, key) => ({
...values,
[ key ]: true,
}), {});
const dashboardAllFalseValues = WIDGET_KEYS.reduce((values, key) => ({
...values,
[ key ]: false,
}), {});
const Dashboard = Record(dashboardAllTrueValues);
const Appearance = Record({
role: DEVELOPER,
sessionsLive: false,
sessionsDevtools: true,
tests: false,
runs: false,
dashboard: Dashboard().set("userActivity",false),
}, {
fromJS: appearance => ({
...appearance,
dashboard: Dashboard(appearance.dashboard),
}),
methods: {
dashboardSome: function() {
return WIDGET_KEYS.some(key => this.dashboard[ key ]);
}
}
});
export const PREDEFINED_VALUES = {
[ OWNER ]: Appearance({
role: OWNER,
sessionsLive: false,
sessionsDevtools: false,
tests: false,
runs: false,
dashboard: Dashboard({
slowestImages: false,
errorsTrend: false,
}),
}),
[ QANALYST ]: Appearance({
role: QANALYST,
sessionsLive: false,
dashboard: Dashboard(dashboardAllFalseValues),
}),
[ DEVELOPER ]: Appearance({
role: DEVELOPER,
sessionsLive: false,
dashboard: Dashboard()
.set('userActivity', false)
.set('sessionsFrustration', false)
.set('sessionsFeedback', false),
}),
[ CAGENT ]: Appearance({
role: CAGENT,
sessionsDevtools: false,
tests: false,
runs: false,
dashboard: Dashboard(dashboardAllFalseValues),
}),
[ CUSTOM ]: Appearance({
role: CUSTOM,
}),
}
export default Appearance;