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

fix(ui): fix metric creation title, sessions list

Browse source
This commit is contained in:
sylenien 2022-08-12 12:25:41 +02:00
parent 2d87da1b99
commit ee065619ba
4 changed files with 8 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
View file

@ -4,7 +4,6 @@ import WidgetWrapper from '../WidgetWrapper';
import { useStore } from 'App/mstore';
import { SegmentSelection, Button, Icon } from 'UI';
import { useObserver } from 'mobx-react-lite';
import SelectDateRange from 'Shared/SelectDateRange';
import { FilterKey } from 'Types/filter/filterType';
import WidgetDateRange from '../WidgetDateRange/WidgetDateRange';
// import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period';
@ -12,6 +11,7 @@ import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelecti
interface Props {
className?: string;
name: string;
}
function WidgetPreview(props: Props) {
const [showDashboardSelectionModal, setShowDashboardSelectionModal] = React.useState(false);
@ -38,24 +38,6 @@ function WidgetPreview(props: Props) {
// })
// }
const getWidgetTitle = () => {
if (isTimeSeries) {
return 'Time Series';
} else if (isTable) {
if (metric.metricOf === FilterKey.SESSIONS) {
// return 'Table of Sessions';
return <div>Sessions <span className="color-gray-medium">{metric.data.total}</span></div>;
} else if (metric.metricOf === FilterKey.ERRORS) {
// return 'Table of Errors';
return <div>Errors <span className="color-gray-medium">{metric.data.total}</span></div>;
} else {
return 'Table';
}
} else if (metric.metricType === 'funnel') {
return 'Funnel';
}
}
const canAddToDashboard = metric.exists() && dashboards.length > 0;
return useObserver(() => (
@ -63,7 +45,7 @@ function WidgetPreview(props: Props) {
<div className={cn(className, 'bg-white rounded')}>
<div className="flex items-center justify-between px-4 pt-2">
<h2 className="text-2xl">
{getWidgetTitle()}
{props.name}
</h2>
<div className="flex items-center">
{isTimeSeries && (
@ -120,7 +102,7 @@ function WidgetPreview(props: Props) {
</div>
</div>
<div className="p-4 pt-0">
<WidgetWrapper widget={metric} isPreview={true} isWidget={false} />
<WidgetWrapper widget={metric} isPreview={true} isWidget={false} hideName />
</div>
</div>
{ canAddToDashboard && (

4
frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
View file

@ -62,7 +62,7 @@ function WidgetSessions(props: Props) {
}, [filter.startTimestamp, filter.endTimestamp, filter.filters, depsString, metricStore.sessionsPage]);
return useObserver(() => (
<div className={cn(className)}>
<div className={cn(className, "bg-white p-3 pb-0 rounded border")}>
<div className="flex items-center justify-between">
<div className="flex items-baseline">
<h2 className="text-2xl">Sessions</h2>
@ -80,7 +80,7 @@ function WidgetSessions(props: Props) {
)}
</div>
<div className="mt-3 bg-white p-3 rounded border">
<div className="mt-3">
<Loader loading={loading}>
<NoContent
title={

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

@ -109,7 +109,7 @@ function WidgetView(props: Props) {
{expanded && <WidgetForm onDelete={onBackHandler} {...props} />}
</div>
<WidgetPreview className="mt-8" />
<WidgetPreview className="mt-8" name={widget.name} />
{widget.metricOf !== FilterKey.SESSIONS && widget.metricOf !== FilterKey.ERRORS && (
<>
{(widget.metricType === 'table' || widget.metricType === 'timeseries') && <WidgetSessions className="mt-8" />}

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

@ -25,6 +25,7 @@ interface Props {
history?: any
onClick?: () => void;
isWidget?: boolean;
hideName?: boolean;
}
function WidgetWrapper(props: Props & RouteComponentProps) {
const { dashboardStore } = useStore();
@ -112,7 +113,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
<div
className={cn("p-3 pb-4 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
>
<div className="capitalize-first w-full font-medium">{widget.name}</div>
{!props.hideName ? <div className="capitalize-first w-full font-medium">{widget.name}</div> : null}
{isWidget && (
<div className="flex items-center" id="no-print">
{!isPredefined && isTimeSeries && (