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

fix(ui) - funnel daterange

Browse source
This commit is contained in:
Shekar Siri 2022-04-11 13:15:44 +02:00
parent 258c4da2a4
commit 6ce6f72cf5
13 changed files with 45 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
View file

@ -47,7 +47,7 @@ function DomBuildingTime(props: Props) {
/>
<AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
</div>
<ResponsiveContainer height={ 207 } width="100%">
<ResponsiveContainer height={ 200 } width="100%">
<AreaChart
data={ data.chart }
margin={ Styles.chartMargins }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
View file

@ -47,7 +47,7 @@ function ResponseTime(props: Props) {
/>
<AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
</div>
<ResponsiveContainer height={ 207 } width="100%">
<ResponsiveContainer height={ 200 } width="100%">
<AreaChart
data={ data.chart }
margin={ Styles.chartMargins }

11
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -4,25 +4,24 @@ import CustomMetricPercentage from 'App/components/Dashboard/Widgets/CustomMetri
import CustomMetricTable from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable';
import CustomMetricPieChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart';
import { Styles } from 'App/components/Dashboard/Widgets/common';
import { observer, useObserver, useLocalObservable } from 'mobx-react-lite';
import { useObserver } from 'mobx-react-lite';
import { Loader } from 'UI';
import { useStore } from 'App/mstore';
import WidgetPredefinedChart from '../WidgetPredefinedChart';
import CustomMetricOverviewChart from '../../Widgets/CustomMetricsWidgets/CustomMetricOverviewChart';
import CustomMetricOverviewChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart';
interface Props {
metric: any;
isWidget?: boolean
}
function WidgetChart(props: Props) {
const { isWidget = false, metric } = props;
// const metric = useObserver(() => props.metric);
const { dashboardStore } = useStore();
const period = useObserver(() => dashboardStore.period);
const colors = Styles.customMetricColors;
const [loading, setLoading] = useState(false)
const [seriesMap, setSeriesMap] = useState<any>([]);
const params = { density: 70 }
const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
const params = { density: 28 }
const metricParams = { ...params }
const prevMetricRef = useRef<any>();
const [data, setData] = useState<any>(metric.data);
@ -34,7 +33,7 @@ function WidgetChart(props: Props) {
prevMetricRef.current = metric;
setLoading(true);
const data = isWidget ? {} : { ...metricParams, ...metric.toJson() };
const data = isWidget ? { ...params } : { ...metricParams, ...metric.toJson() };
dashboardStore.fetchMetricChartData(metric, data, isWidget).then((res: any) => {
setData(res);
}).finally(() => {

2
frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
View file

@ -107,7 +107,7 @@ function WidgetWrapper(props: Props) {
)}
</div>
<LazyLoad height={300} offset={320} >
<LazyLoad height={100} offset={120} >
<div className="px-4" onClick={onChartClick}>
<WidgetChart metric={widget} isWidget={isWidget} />
</div>

17
frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
View file

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { Icon, BackLink, IconButton, Dropdown, Popup, TextEllipsis, Button } from 'UI';
import { remove as deleteFunnel, fetch, fetchInsights, fetchIssuesFiltered, fetchSessionsFiltered } from 'Duck/funnels';
import { editFilter, refresh, addFilter } from 'Duck/funnels';
import { editFilter, editFunnelFilter, refresh, addFilter } from 'Duck/funnels';
import DateRange from 'Shared/DateRange';
import { connect } from 'react-redux';
import { confirm } from 'UI/Confirmation';
@ -18,7 +18,7 @@ const Info = ({ label = '', value = '', className = 'mx-4' }) => {
}
const FunnelHeader = (props) => {
const { funnel, insights, funnels, onBack, funnelId, showFilters = false, renameHandler } = props;
const { funnel, insights, funnels, onBack, funnelId, showFilters = false, funnelFilters, renameHandler } = props;
const [showSaveModal, setShowSaveModal] = useState(false)
const writeOption = (e, { name, value }) => {
@ -40,7 +40,7 @@ const FunnelHeader = (props) => {
}
const onDateChange = (e) => {
props.editFilter(e, funnelId);
props.editFunnelFilter(e, funnelId);
}
const options = funnels.map(({ funnelId, name }) => ({ text: name, value: funnelId })).toJS();
@ -55,7 +55,7 @@ const FunnelHeader = (props) => {
show={showSaveModal}
closeHandler={() => setShowSaveModal(false)}
/>
<div className="flex items-center mr-auto relative">
<div className="flex items-center mr-auto relative">
<Dropdown
scrolling
trigger={
@ -96,9 +96,9 @@ const FunnelHeader = (props) => {
/>
</div>
<DateRange
rangeValue={funnel.filter.rangeValue}
startDate={funnel.filter.startDate}
endDate={funnel.filter.endDate}
rangeValue={funnelFilters.rangeValue}
startDate={funnelFilters.startDate}
endDate={funnelFilters.endDate}
onDateChange={onDateChange}
customRangeRight
/>
@ -109,5 +109,6 @@ const FunnelHeader = (props) => {
}
export default connect(state => ({
funnelFilters: state.getIn([ 'funnels', 'funnelFilters' ]).toJS(),
funnel: state.getIn([ 'funnels', 'instance' ]),
}), { editFilter, deleteFunnel, fetch, fetchInsights, fetchIssuesFiltered, fetchSessionsFiltered, refresh })(FunnelHeader)
}), { editFilter, editFunnelFilter, deleteFunnel, fetch, fetchInsights, fetchIssuesFiltered, fetchSessionsFiltered, refresh })(FunnelHeader)

2
frontend/app/components/Session/LiveSession.js
View file

@ -27,7 +27,7 @@ function LiveSession({
useEffect(() => {
if (sessionId != null) {
fetchSession(sessionId)
fetchSession(sessionId, true)
} else {
console.error("No sessionID in route.")
}

10
frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
View file

@ -45,11 +45,11 @@ function LiveSessionList(props: Props) {
// const displayedCount = Math.min(currentPage * PER_PAGE, sessions.size);
// const addPage = () => props.updateCurrentPage(props.currentPage + 1)
useEffect(() => {
if (filters.size === 0) {
props.addFilterByKeyAndValue(FilterKey.USERID, '');
}
}, []);
// useEffect(() => {
// if (filters.size === 0) {
// props.addFilterByKeyAndValue(FilterKey.USERID, '');
// }
// }, []);
useEffect(() => {
if (metaList.size === 0 || !!sort.field) return;

10
frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx
View file

@ -42,9 +42,9 @@ function LiveSessionSearch(props: Props) {
});
props.edit({ filters: newFilters, });
if (newFilters.size === 0) {
props.addFilterByKeyAndValue(FilterKey.USERID, '');
}
// if (newFilters.size === 0) {
// props.addFilterByKeyAndValue(FilterKey.USERID, '');
// }
}
const onChangeEventsOrder = (e, { name, value }) => {
@ -53,7 +53,7 @@ function LiveSessionSearch(props: Props) {
});
}
return (hasEvents || hasFilters) ? (
return (
<div className="border bg-white rounded mt-4">
<div className="p-5">
<FilterList
@ -75,7 +75,7 @@ function LiveSessionSearch(props: Props) {
</div>
</div>
</div>
) : <></>;
);
}
export default connect(state => ({

18
frontend/app/duck/funnels.js
View file

@ -24,6 +24,7 @@ const SAVE = saveType('funnel/SAVE');
const UPDATE = saveType('funnel/UPDATE');
const EDIT = editType('funnel/EDIT');
const EDIT_FILTER = `${name}/EDIT_FILTER`;
const EDIT_FUNNEL_FILTER = `${name}/EDIT_FUNNEL_FILTER`;
const REMOVE = removeType('funnel/REMOVE');
const INIT = initType('funnel/INIT');
const SET_NAV_REF = 'funnels/SET_NAV_REF'
@ -51,7 +52,6 @@ const REMOVE_SUCCESS = success(REMOVE);
const range = getDateRangeFromValue(LAST_7_DAYS);
const defaultDateFilters = {
events: [],
rangeValue: LAST_7_DAYS,
startDate: range.start.unix() * 1000,
endDate: range.end.unix() * 1000
@ -67,7 +67,7 @@ const initialState = Map({
sessionsTotal: 0,
sessions: List(),
activeStages: List(),
funnelFilters: defaultDateFilters,
funnelFilters: Map(defaultDateFilters),
sessionsSort: Map({ order: "desc", sort: "newest" }),
issueFilters: Map({
filters: List(),
@ -87,6 +87,8 @@ const reducer = (state = initialState, action = {}) => {
return state.mergeIn([ 'instance' ], action.instance);
case EDIT_FILTER:
return state.mergeIn([ 'instance', 'filter' ], action.instance);
case EDIT_FUNNEL_FILTER:
return state.mergeIn([ 'funnelFilters' ], action.instance);
case INIT:
return state.set('instance', Funnel(action.instance))
case FETCH_LIST_SUCCESS:
@ -171,7 +173,7 @@ const reducer = (state = initialState, action = {}) => {
.set('instance', Funnel())
.set('activeStages', List())
.set('issuesSort', Map({}))
.set('funnelFilters', defaultDateFilters)
// .set('funnelFilters', Map(defaultDateFilters))
.set('insights', Funnel())
.set('issues', List())
.set('sessions', List());
@ -200,6 +202,7 @@ export const fetch = (funnelId, params) => (dispatch, getState) => {
function getParams(params, state) {
const filter = state.getIn([ 'funnels', 'instance', 'filter']).toData();
filter.filters = filter.filters.map(filterMap);
const funnelFilters = state.getIn([ 'funnels', 'funnelFilters']).toJS();
// const appliedFilter = state.getIn([ 'funnels', 'instance', 'filter' ]);
// const filter = appliedFilter
@ -209,7 +212,7 @@ function getParams(params, state) {
// filter.filters = state.getIn([ 'funnelFilters', 'appliedFilter', 'filters' ])
// .map(filterMap).toJS();
return filter;
return { ...filter, ...funnelFilters };
}
export const fetchInsights = (funnelId, params = {}, isRefresh = false) => (dispatch, getState) => {
@ -372,7 +375,7 @@ export const resetIssue = () => {
export const resetFunnel = () => {
return {
type: RESET_FUNNEL,
type: RESET_FUNNEL,
}
}
@ -428,6 +431,11 @@ export const editFilter = reduceThenFetchList((instance) => ({
instance,
}));
export const editFunnelFilter = reduceThenFetchList((instance) => ({
type: EDIT_FUNNEL_FILTER,
instance,
}));
export const addFilter = (filter) => (dispatch, getState) => {
filter.value = checkFilterValue(filter.value);
const instance = getState().getIn([ 'funnels', 'instance', 'filter']);

2
frontend/app/duck/sessions.js
View file

@ -319,7 +319,7 @@ export function fetchInsights(params) {
export function fetchLiveList() {
return {
types: FETCH_LIVE_LIST.toArray(),
call: client => client.get('/assist/sessions'),
call: client => client.get('/assist/sessions', { userId: 'test'}),
};
}

2
frontend/app/mstore/dashboardStore.ts
View file

@ -169,7 +169,7 @@ export default class DashboardStore implements IDashboardSotre {
return dashboardService.getDashboards()
.then((list: any) => {
runInAction(() => {
this.dashboards = list.map(d => new Dashboard().fromJson(d)).sort((a, b) => a.position - b.position)
this.dashboards = list.map(d => new Dashboard().fromJson(d))
})
}).finally(() => {
runInAction(() => {

2
frontend/app/mstore/types/dashboard.ts
View file

@ -96,7 +96,7 @@ export default class Dashboard implements IDashboard {
this.isPublic = json.isPublic
this.isPinned = json.isPinned
// this.config = json.config
this.widgets = json.widgets ? json.widgets.map(w => new Widget().fromJson(w)) : []
this.widgets = json.widgets ? json.widgets.map(w => new Widget().fromJson(w)).sort((a, b) => a.position - b.position) : []
})
return this
}

1
frontend/app/mstore/types/widget.ts
View file

@ -130,6 +130,7 @@ export default class Widget implements IWidget {
this.position = json.config.position
this.predefinedKey = json.predefinedKey
})
console.log(this.name, this.position)
return this
}