feat(ui) - metric to session player navigation flow with modal
This commit is contained in:
Shekar Siri
parent
ea7b37441b
commit
28aa99a668
11 changed files with 32 additions and 12 deletions
|
|
@ -145,7 +145,7 @@ class Router extends React.Component {
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
this.props.setSessionPath(prevProps.location.pathname)
|
||||
this.props.setSessionPath(prevProps.location)
|
||||
if (prevProps.email !== this.props.email && !this.props.email) {
|
||||
this.props.fetchTenants();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,12 @@ interface Props {
|
|||
isTemplate?: boolean;
|
||||
isEdit?: boolean;
|
||||
history: any,
|
||||
location: any,
|
||||
}
|
||||
function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
|
||||
const { metric, isEdit = false } = props;
|
||||
const errorId = new URLSearchParams(props.location.search).get("errorId");
|
||||
const { showModal } = useModal();
|
||||
const { showModal, hideModal } = useModal();
|
||||
|
||||
const onErrorClick = (error: any) => {
|
||||
props.history.replace({search: (new URLSearchParams({errorId : error.errorId})).toString()});
|
||||
|
|
@ -25,8 +26,14 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
|
|||
if (!errorId) return;
|
||||
|
||||
showModal(<ErrorDetailsModal errorId={errorId} />, { right: true, onClose: () => {
|
||||
props.history.replace({search: ""});
|
||||
if (props.history.location.pathname.includes("/metric/")) {
|
||||
props.history.replace({search: ""});
|
||||
}
|
||||
}});
|
||||
|
||||
return () => {
|
||||
hideModal();
|
||||
}
|
||||
}, [errorId])
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { useObserver } from 'mobx-react-lite';
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import SessionItem from 'Shared/SessionItem';
|
||||
import { Pagination, NoContent } from 'UI';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
|
||||
interface Props {
|
||||
metric: any;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ function FunnelIssueDetails(props: Props) {
|
|||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
widget.fetchIssue(widget.metricId, issueId, filter).then((resp: any) => {
|
||||
const _filters = { ...filter, series: widget.toJsonDrilldown() };
|
||||
widget.fetchIssue(widget.metricId, issueId, _filters).then((resp: any) => {
|
||||
setFunnelIssue(resp.issue);
|
||||
setSessions(resp.sessions);
|
||||
}).finally(() => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ interface Props {
|
|||
}
|
||||
function FunnelIssueModal(props: Props) {
|
||||
const { issueId } = props;
|
||||
const { hideModal } = useModal();
|
||||
// const { hideModal } = useModal();
|
||||
return (
|
||||
<div style={{ width: '85vw', maxWidth: '1200px' }}>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -30,7 +30,9 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
|
|||
if (!issueId) return;
|
||||
|
||||
showModal(<FunnelIssueModal issueId={issueId} />, { right: true, onClose: () => {
|
||||
props.history.replace({search: ""});
|
||||
if (props.history.location.pathname.includes("/metric/")) {
|
||||
props.history.replace({search: ""});
|
||||
}
|
||||
}});
|
||||
}, [issueId]);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import stl from './FunnelWidget.module.css';
|
|||
import { Icon } from 'UI';
|
||||
import { useObserver } from 'mobx-react-lite';
|
||||
import { NoContent } from 'UI';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
|
||||
interface Props {
|
||||
metric: Widget;
|
||||
|
|
@ -19,6 +20,14 @@ function FunnelWidget(props: Props) {
|
|||
const hasMoreSteps = funnel.stages.length > 2;
|
||||
const lastStage = funnel.stages[funnel.stages.length - 1];
|
||||
const remainingSteps = totalSteps - 2;
|
||||
const { hideModal } = useModal();
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (isWidget) return;
|
||||
hideModal();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return useObserver(() => (
|
||||
<NoContent show={!stages || stages.length === 0}>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ function LiveSession({
|
|||
export default withPermissions(['ASSIST_LIVE'], '', true)(connect((state, props) => {
|
||||
const { match: { params: { sessionId } } } = props;
|
||||
const isAssist = state.getIn(['sessions', 'activeTab']).type === 'live';
|
||||
const hasSessiosPath = state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions');
|
||||
const hasSessiosPath = state.getIn([ 'sessions', 'sessionPath' ]).pathname.includes('/sessions');
|
||||
return {
|
||||
sessionId,
|
||||
loading: state.getIn([ 'sessions', 'loading' ]),
|
||||
|
|
|
|||
|
|
@ -55,10 +55,10 @@ export default class PlayerBlockHeader extends React.PureComponent {
|
|||
|
||||
backHandler = () => {
|
||||
const { history, siteId, sessionPath, isAssist } = this.props;
|
||||
if (sessionPath === history.location.pathname || sessionPath.includes("/session/") || isAssist) {
|
||||
if (sessionPath.pathname === history.location.pathname || sessionPath.pathname.includes("/session/") || isAssist) {
|
||||
history.push(withSiteId(isAssist ? ASSIST_ROUTE: SESSIONS_ROUTE, siteId));
|
||||
} else {
|
||||
history.push(sessionPath ? sessionPath : withSiteId(SESSIONS_ROUTE, siteId));
|
||||
history.push(sessionPath ? sessionPath.pathname + sessionPath.search : withSiteId(SESSIONS_ROUTE, siteId));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ function SessionItem(props: RouteComponentProps<Props>) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: "20%" }} className="px-2 flex flex-col justify-between">
|
||||
<div style={{ width: "30%" }} className="px-2 flex flex-col justify-between">
|
||||
<div>{formatTimeOrDate(startedAt, timezone) }</div>
|
||||
<div className="flex items-center color-gray-medium">
|
||||
{!isAssist && (
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const initialState = Map({
|
|||
host: '',
|
||||
funnelPage: Map(),
|
||||
timelinePointer: null,
|
||||
sessionPath: '',
|
||||
sessionPath: {},
|
||||
lastPlayedSessionId: null,
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue