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

fix(ui): fix empty funnel sessions messages

Browse source
This commit is contained in:
sylenien 2022-08-16 15:27:26 +02:00
parent a7743b426e
commit 34a5481f03
5 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
View file

@ -53,8 +53,8 @@ function FunnelIssues() {
}, [stages.length, drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage]);
return useObserver(() => (
<div className="my-8">
<div className="flex justify-between">
<div className="my-8 bg-white rounded p-4 border">
<div className="flex">
<h1 className="font-medium text-2xl">Most significant issues <span className="font-normal">identified in this funnel</span></h1>
</div>
<div className="my-6 flex justify-between items-start">
@ -70,4 +70,4 @@ function FunnelIssues() {
));
}
export default FunnelIssues;
export default FunnelIssues;

6
frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
View file

@ -45,8 +45,8 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
show={!loading && filteredIssues.length === 0}
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
<div className="mt-6 text-2xl">No issues found</div>
<AnimatedSVG name={ICONS.NO_ISSUES} size="170" />
<div className="mt-3 text-xl">No issues found</div>
</div>
}
>
@ -59,4 +59,4 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
))
}
export default withRouter(FunnelIssuesList) as React.FunctionComponent<RouteComponentProps<Props>>;
export default withRouter(FunnelIssuesList) as React.FunctionComponent<RouteComponentProps<Props>>;

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

@ -42,7 +42,7 @@ function WidgetPreview(props: Props) {
return useObserver(() => (
<>
<div className={cn(className, 'bg-white rounded')}>
<div className={cn(className, 'bg-white rounded border')}>
<div className="flex items-center justify-between px-4 pt-2">
<h2 className="text-2xl">
{props.name}

6
frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
View file

@ -10,6 +10,7 @@ import NoBookmarks from '../../../svg/ca-no-bookmarked-session.svg';
import NoLiveSessions from '../../../svg/ca-no-live-sessions.svg';
import NoSessions from '../../../svg/ca-no-sessions.svg';
import NoSessionsInVault from '../../../svg/ca-no-sessions-in-vault.svg';
import NoIssues from '../../../svg/ca-no-issues.svg';
export enum ICONS {
DASHBOARD_ICON = 'dashboard-icn',
@ -22,7 +23,8 @@ export enum ICONS {
NO_BOOKMARKS = 'ca-no-bookmarked-session',
NO_LIVE_SESSIONS = 'ca-no-live-sessions',
NO_SESSIONS = 'ca-no-sessions',
NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault'
NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault',
NO_ISSUES = 'ca-no-issues',
}
interface Props {
@ -55,6 +57,8 @@ function AnimatedSVG(props: Props) {
return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoSessions} />;
case ICONS.NO_SESSIONS_IN_VAULT:
return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoSessionsInVault} />;
case ICONS.NO_ISSUES:
return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoIssues} />;
default:
return null;
}

7
frontend/app/svg/ca-no-issues.svg Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 250 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="100" rx="13.1579" fill="#3EAAAF" fill-opacity="0.08"/>
<rect opacity="0.6" x="86.8421" y="28.579" width="138.158" height="14.4737" rx="6.57895" fill="#3EAAAF" fill-opacity="0.5"/>
<rect opacity="0.3" x="86.8421" y="55.579" width="38.1579" height="14.4737" rx="6.57895" fill="#3EAAAF" fill-opacity="0.5"/>
<rect opacity="0.3" x="129.842" y="55.579" width="18.1579" height="14.4737" rx="6.57895" fill="#3EAAAF" fill-opacity="0.5"/>
<path d="M73 50C73 57.1608 70.1554 64.0284 65.0919 69.0919C60.0284 74.1554 53.1608 77 46 77C38.8392 77 31.9716 74.1554 26.9081 69.0919C21.8446 64.0284 19 57.1608 19 50C19 42.8392 21.8446 35.9716 26.9081 30.9081C31.9716 25.8446 38.8392 23 46 23C53.1608 23 60.0284 25.8446 65.0919 30.9081C70.1554 35.9716 73 42.8392 73 50ZM46 36.5C45.5734 36.5002 45.1516 36.5898 44.7618 36.763C44.3719 36.9362 44.0227 37.1891 43.7365 37.5055C43.4504 37.8218 43.2337 38.1946 43.1004 38.5998C42.967 39.005 42.9201 39.4337 42.9625 39.8581L44.1437 51.6943C44.1834 52.1592 44.3962 52.5924 44.7399 52.908C45.0837 53.2237 45.5333 53.3988 46 53.3988C46.4667 53.3988 46.9163 53.2237 47.2601 52.908C47.6038 52.5924 47.8166 52.1592 47.8563 51.6943L49.0375 39.8581C49.0799 39.4337 49.033 39.005 48.8996 38.5998C48.7663 38.1946 48.5496 37.8218 48.2635 37.5055C47.9773 37.1891 47.6281 36.9362 47.2382 36.763C46.8484 36.5898 46.4266 36.5002 46 36.5ZM46.0068 56.75C45.1116 56.75 44.2532 57.1056 43.6203 57.7385C42.9873 58.3715 42.6318 59.2299 42.6318 60.125C42.6318 61.0201 42.9873 61.8785 43.6203 62.5115C44.2532 63.1444 45.1116 63.5 46.0068 63.5C46.9019 63.5 47.7603 63.1444 48.3932 62.5115C49.0262 61.8785 49.3818 61.0201 49.3818 60.125C49.3818 59.2299 49.0262 58.3715 48.3932 57.7385C47.7603 57.1056 46.9019 56.75 46.0068 56.75Z" fill="#3EAAAF" fill-opacity="0.5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB