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

feat(ui) - funnels - sub details view

Browse source
This commit is contained in:
Shekar Siri 2022-05-13 12:35:55 +02:00
parent 95f0649ccb
commit 87f42b4a79
6 changed files with 51 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/Router.js
View file

@ -55,6 +55,7 @@ const withObTab = routes.withObTab;
const METRICS_PATH = routes.metrics();
const METRICS_DETAILS = routes.metricDetails();
const METRICS_DETAILS_SUB = routes.metricDetailsSub();
const DASHBOARD_PATH = routes.dashboard();
const DASHBOARD_SELECT_PATH = routes.dashboardSelected();
@ -204,6 +205,7 @@ class Router extends React.Component {
{/* DASHBOARD and Metrics */}
<Route exact strict path={ withSiteId(METRICS_PATH, siteIdList) } component={ Dashboard } />
<Route exact strict path={ withSiteId(METRICS_DETAILS, siteIdList) } component={ Dashboard } />
<Route exact strict path={ withSiteId(METRICS_DETAILS_SUB, siteIdList) } component={ Dashboard } />
<Route exact strict path={ withSiteId(DASHBOARD_PATH, siteIdList) } component={ Dashboard } />
<Route exact strict path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
<Route exact strict path={ withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList) } component={ Dashboard } />

6
frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
View file

@ -5,6 +5,7 @@ import { withRouter } from 'react-router-dom';
import {
metrics,
metricDetails,
metricDetailsSub,
dashboardSelected,
dashboardMetricCreate,
dashboardMetricDetails,
@ -14,6 +15,7 @@ import {
import DashboardView from '../DashboardView';
import MetricsView from '../MetricsView';
import WidgetView from '../WidgetView';
import WidgetSubDetailsView from '../WidgetSubDetailsView';
function DashboardViewSelected({ siteId, dashboardId}) {
return (
@ -37,6 +39,10 @@ function DashboardRouter(props: Props) {
<Route exact strict path={withSiteId(metricDetails(), siteId)}>
<WidgetView siteId={siteId} {...props} />
</Route>
<Route exact strict path={withSiteId(metricDetailsSub(), siteId)}>
<WidgetSubDetailsView siteId={siteId} {...props} />
</Route>
<Route exact strict path={withSiteId(dashboard(''), siteId)}>
<DashboardView siteId={siteId} dashboardId={dashboardId} />

37
frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx Normal file
View file

@ -0,0 +1,37 @@
import Breadcrumb from 'App/components/shared/Breadcrumb';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { withSiteId } from 'App/routes';
interface Props {
history: any;
match: any
siteId: any
}
function WidgetSubDetailsView(props: Props) {
const { match: { params: { siteId, dashboardId, metricId } } } = props;
const { metricStore } = useStore();
const widget = useObserver(() => metricStore.instance);
const loadingWidget = useObserver(() => metricStore.isLoading);
useEffect(() => {
if (!widget || !widget.exists()) {
metricStore.fetch(metricId);
}
}, []);
return (
<div>
<Breadcrumb
items={[
{ label: dashboardId ? 'Dashboard' : 'Metrics', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) },
{ label: widget.name, to: withSiteId(`/metrics/${widget.metricId}`, siteId) },
{ label: 'Sub Details' }
]}
/>
</div>
);
}
export default WidgetSubDetailsView;

1
frontend/app/components/Dashboard/components/WidgetSubDetailsView/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './WidgetSubDetailsView';

6
frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
View file

@ -23,9 +23,11 @@ function WidgetView(props: Props) {
const [expanded, setExpanded] = useState(!metricId || metricId === 'create');
React.useEffect(() => {
if (metricId && metricId !== 'create') {
if (metricId && metricId !== 'create' && (!widget || !widget.exists())) {
metricStore.fetch(metricId);
} else {
}
if (metricId === 'create') {
metricStore.init();
}
}, [])

1
frontend/app/routes.js
View file

@ -127,6 +127,7 @@ const REQUIRED_SITE_ID_ROUTES = [
metrics(),
metricDetails(''),
metricDetailsSub(''),
dashboard(''),
dashboardSelected(''),