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

change(ui) - card option disable ee, card type text changes

Browse source
This commit is contained in:
Shekar Siri 2023-01-23 15:17:03 +01:00
parent 7ea797d895
commit 2a177a9a34
5 changed files with 94 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,7 @@ function BreakdownOfLoadedResources(props: Props) {
<NoContent
size="small"
title="No data available"
show={ metric.data.chart.length === 0 }
show={ metric.data.chart && metric.data.chart.length === 0 }
>
<ResponsiveContainer height={ 240 } width="100%">
<BarChart

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

@ -20,7 +20,7 @@ function CPULoad(props: Props) {
<NoContent
size="small"
title="No data available"
show={ metric.data.chart.length === 0 }
show={ metric.data.chart && metric.data.chart.length === 0 }
style={ { height: '240px' } }
>
<ResponsiveContainer height={ 240 } width="100%">

34
frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { DROPDOWN_OPTIONS, Option } from 'App/constants/card';
import { DROPDOWN_OPTIONS, INSIGHTS, Option } from 'App/constants/card';
import Select from 'Shared/Select';
import { components } from 'react-select';
import CustomDropdownOption from 'Shared/CustomDropdownOption';
@ -7,25 +7,34 @@ import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import withLocationHandlers from 'HOCs/withLocationHandlers';
import { Icon } from 'UI';
interface Options {
label: string;
icon: string;
value: string;
description: string;
}
import { connect } from 'react-redux';
interface Props {
query: Record<string, (key: string) => any>;
onSelect: (arg: any) => void;
isEnterprise?: boolean;
}
function MetricTypeDropdown(props: Props) {
const { isEnterprise } = props;
const { metricStore } = useStore();
const metric: any = metricStore.instance;
const options = React.useMemo(() => {
return DROPDOWN_OPTIONS.map((option: any) => {
return {
...option,
disabled: !isEnterprise && option.value === INSIGHTS,
};
});
}, []);
React.useEffect(() => {
const queryCardType = props.query.get('type');
if (queryCardType && DROPDOWN_OPTIONS.length > 0 && metric.metricType) {
const type: Option = DROPDOWN_OPTIONS.find((i) => i.value === queryCardType) as Option;
if (queryCardType && options.length > 0 && metric.metricType) {
const type: Option = options.find((i) => i.value === queryCardType) as Option;
if (type.disabled) {
return;
}
setTimeout(() => onChange(type.value), 0);
}
}, []);
@ -38,7 +47,8 @@ function MetricTypeDropdown(props: Props) {
<Select
name="metricType"
placeholder="Select Card Type"
options={DROPDOWN_OPTIONS}
options={options}
isOptionDisabled={(option: Option) => option.disabled}
value={
DROPDOWN_OPTIONS.find((i: any) => i.value === metric.metricType) || DROPDOWN_OPTIONS[0]
}
@ -73,4 +83,6 @@ function MetricTypeDropdown(props: Props) {
);
}
export default withLocationHandlers()(observer(MetricTypeDropdown));
export default connect((state: any) => ({
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
}))(withLocationHandlers()(observer(MetricTypeDropdown)));

44
frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx
View file

@ -1,36 +1,40 @@
import React from 'react';
import { components, OptionProps } from 'react-select';
import { Icon } from 'UI';
import { Icon, Tooltip } from 'UI';
import cn from 'classnames';
export interface Props extends OptionProps {
icon?: string;
label: string;
description: string;
disabled?: boolean;
}
function CustomDropdownOption(props: Props) {
const { icon = '', label, description, isSelected, isFocused } = props;
const { icon = '', label, description, isSelected, isFocused, disabled } = props;
return (
<components.Option {...props} className="!p-0 mb-2">
<div
className={cn(
'group p-2 flex item-start border border-transparent rounded hover:border-teal hover:!bg-active-blue !leading-0'
)}
>
{icon && (
<Icon
// @ts-ignore
name={icon}
className="pt-2 mr-3"
size={18}
color={isSelected || isFocused ? 'teal' : 'gray-dark'}
/>
)}
<div className={cn('flex flex-col', { '!color-teal': isFocused || isSelected })}>
<div className="font-medium leading-0">{label}</div>
<div className="text-sm color-gray-dark">{description}</div>
<Tooltip disabled={!disabled} title="This feature requires an enterprise license." delay={0}>
<div
className={cn(
'group p-2 flex item-start border border-transparent rounded hover:border-teal hover:!bg-active-blue !leading-0',
{ 'opacity-30': disabled }
)}
>
{icon && (
<Icon
// @ts-ignore
name={icon}
className="pt-2 mr-3"
size={18}
color={isSelected || isFocused ? 'teal' : 'gray-dark'}
/>
)}
<div className={cn('flex flex-col', { '!color-teal': isFocused || isSelected })}>
<div className="font-medium leading-0">{label}</div>
<div className="text-sm color-gray-dark">{description}</div>
</div>
</div>
</div>
</Tooltip>
</components.Option>
);
}

110
frontend/app/constants/card.ts
View file

@ -8,6 +8,7 @@ export interface CardType {
description: string;
slug: string;
subTypes?: CardType[];
disabled?: boolean;
}
export const LIBRARY = 'library';
@ -29,6 +30,7 @@ export interface Option {
icon: string;
value: string;
description: string;
disabled?: boolean;
}
export const TYPES: CardType[] = [
@ -41,21 +43,21 @@ export const TYPES: CardType[] = [
{
title: 'Clickmap',
icon: 'puzzle-piece',
description: 'Track the features that are being used the most.',
description: 'See where users click and where they get frustrated.',
slug: CLICKMAP,
subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
},
{
title: 'Timeseries',
icon: 'graph-up',
description: 'Trend of sessions count in over the time.',
description: 'Combine captured events and filters to track trends over time.',
slug: TIMESERIES,
subTypes: [{ title: 'Session Count', slug: 'sessionCount', description: '' }],
},
{
title: 'Table',
icon: 'list-alt',
description: 'See list of Users, Sessions, Errors, Issues, etc.,',
description: 'Create custom tables of users, sessions, errors, issues and more.',
slug: TABLE,
subTypes: [
{ title: 'Users', slug: FilterKey.USERID, description: '' },
@ -71,21 +73,21 @@ export const TYPES: CardType[] = [
{
title: 'Funnel',
icon: 'funnel',
description: 'Uncover the issues impacting user journeys.',
description: 'Find out where users are dropping and understand why.',
slug: FUNNEL,
},
{
title: 'Errors Tracking',
title: 'Error Tracking',
icon: 'exclamation-circle',
description: 'Discover user journeys between 2 points.',
description: 'Track API errors across domains and origins.',
slug: ERRORS,
subTypes: [
{ title: 'Resources by Party', slug: FilterKey.RESOURCES_BY_PARTY, description: '' },
{ title: 'Errors per Domains', slug: FilterKey.ERRORS_PER_DOMAINS, description: '' },
{ title: 'Errors per type', slug: FilterKey.ERRORS_PER_TYPE, description: '' },
{ title: 'Calls Errors', slug: FilterKey.CALLS_ERRORS, description: '' },
{ title: 'Domains Errors 4xx', slug: FilterKey.DOMAINS_ERRORS_4XX, description: '' },
{ title: 'Domains Errors 5xx', slug: FilterKey.DOMAINS_ERRORS_5XX, description: '' },
{ title: 'Errors by Origin', slug: FilterKey.RESOURCES_BY_PARTY, description: '' },
{ title: 'Errors per Domain', slug: FilterKey.ERRORS_PER_DOMAINS, description: '' },
{ title: 'Errors by type', slug: FilterKey.ERRORS_PER_TYPE, description: '' },
{ title: 'Calls with Errors', slug: FilterKey.CALLS_ERRORS, description: '' },
{ title: 'Top 4xx Domains', slug: FilterKey.DOMAINS_ERRORS_4XX, description: '' },
{ title: 'Top 5xx Domains', slug: FilterKey.DOMAINS_ERRORS_5XX, description: '' },
{
title: 'Impacted Sessions by JS Errors',
slug: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
@ -94,19 +96,19 @@ export const TYPES: CardType[] = [
],
},
{
title: 'Performance Monitoring',
title: 'Performance Tracking',
icon: 'speedometer2',
description: 'Retention graph of users / features over a period of time.',
description: 'Uncover slowdowns and monitor CPU and memory consumption.',
slug: PERFORMANCE,
subTypes: [
{ title: 'CPU', slug: FilterKey.CPU, description: '' },
{ title: 'CPU Load', slug: FilterKey.CPU, description: '' },
{ title: 'Crashes', slug: FilterKey.CRASHES, description: '' },
{ title: 'FPS', slug: FilterKey.FPS, description: '' },
{ title: 'Pages Dom Build Time', slug: FilterKey.PAGES_DOM_BUILD_TIME, description: '' },
{ title: 'Frame Rate', slug: FilterKey.FPS, description: '' },
{ title: 'DOM Building Time', slug: FilterKey.PAGES_DOM_BUILD_TIME, description: '' },
{ title: 'Memory Consumption', slug: FilterKey.MEMORY_CONSUMPTION, description: '' },
{ title: 'Pages Response Time', slug: FilterKey.PAGES_RESPONSE_TIME, description: '' },
{ title: 'Page Response Time', slug: FilterKey.PAGES_RESPONSE_TIME, description: '' },
{
title: 'Pages Response Time Distribution',
title: 'Page Response Time Distribution',
slug: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
description: '',
},
@ -117,10 +119,10 @@ export const TYPES: CardType[] = [
},
{ title: 'Sessions per Browser', slug: FilterKey.SESSIONS_PER_BROWSER, description: '' },
{ title: 'Slowest Domains', slug: FilterKey.SLOWEST_DOMAINS, description: '' },
{ title: 'Speed Location', slug: FilterKey.SPEED_LOCATION, description: '' },
{ title: 'Speed Index by Location', slug: FilterKey.SPEED_LOCATION, description: '' },
{ title: 'Time to Render', slug: FilterKey.TIME_TO_RENDER, description: '' },
{
title: 'Impacted Sessions by Slow Pages',
title: 'Sessions Impacted by Slow Pages',
slug: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES,
description: '',
},
@ -129,7 +131,7 @@ export const TYPES: CardType[] = [
{
title: 'Resource Monitoring',
icon: 'files',
description: 'Find the adoption of your all features in your app.',
description: 'Identify missing resources and those slowing down your app.',
slug: RESOURCE_MONITORING,
subTypes: [
{
@ -150,91 +152,69 @@ export const TYPES: CardType[] = [
{
title: 'Web Vitals',
icon: 'activity',
description: 'Find the adoption of your all features in your app.',
description: 'Keep an eye on your web vitals and how they evolve over time.',
slug: WEB_VITALS,
subTypes: [
{
title: 'CPU Load',
slug: FilterKey.AVG_CPU,
description: 'Uncover the issues impacting user journeys',
},
{
title: 'DOM Content Loaded',
slug: FilterKey.AVG_DOM_CONTENT_LOADED,
description: 'Keep a close eye on errors and track their type, origin and domain.',
},
{ title: 'CPU Load', slug: FilterKey.AVG_CPU, description: '' },
{ title: 'DOM Content Loaded', slug: FilterKey.AVG_DOM_CONTENT_LOADED, description: '' },
{
title: 'DOM Content Loaded Start',
slug: FilterKey.AVG_DOM_CONTENT_LOAD_START,
description:
'FInd out which resources are missing and those that may be slowign your web app.',
description: '',
},
{
title: 'First Meaningful Paint',
slug: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
description:
"Optimize your app's performance by tracking slow domains, page resposne times, memory consumption, CPU usage and more.",
},
{
title: 'First Paint',
slug: FilterKey.AVG_FIRST_PAINT,
description:
'Find out which resources are missing and those that may be slowing your web app.',
description: '',
},
{ title: 'First Paint', slug: FilterKey.AVG_FIRST_PAINT, description: '' },
{ title: 'Frame Rate', slug: FilterKey.AVG_FPS, description: '' },
{
title: 'Image Load Time',
slug: FilterKey.AVG_IMAGE_LOAD_TIME,
description:
'Find out which resources are missing and those that may be slowing your web app.',
},
{ title: 'Image Load Time', slug: FilterKey.AVG_IMAGE_LOAD_TIME, description: '' },
{ title: 'Page Load Time', slug: FilterKey.AVG_PAGE_LOAD_TIME, description: '' },
{ title: 'DOM Build Time', slug: FilterKey.AVG_PAGES_DOM_BUILD_TIME, description: '' },
{ title: 'Pages Response Time', slug: FilterKey.AVG_PAGES_RESPONSE_TIME, description: '' },
{ title: 'Request Load Time', slug: FilterKey.AVG_REQUEST_LOADT_IME, description: '' },
{ title: 'Response Time ', slug: FilterKey.AVG_RESPONSE_TIME, description: '' },
{ title: 'Session Dueration', slug: FilterKey.AVG_SESSION_DURATION, description: '' },
{ title: 'Session Duration', slug: FilterKey.AVG_SESSION_DURATION, description: '' },
{ title: 'Time Till First Byte', slug: FilterKey.AVG_TILL_FIRST_BYTE, description: '' },
{ title: 'Time to be Interactive', slug: FilterKey.AVG_TIME_TO_INTERACTIVE, description: '' },
{ title: 'Time to Render', slug: FilterKey.AVG_TIME_TO_RENDER, description: '' },
{ title: 'JS Heap Size', slug: FilterKey.AVG_USED_JS_HEAP_SIZE, description: '' },
{ title: 'Visited Pages', slug: FilterKey.AVG_VISITED_PAGES, description: '' },
{
title: 'Captured Requests',
slug: FilterKey.COUNT_REQUESTS,
description: 'Trend of sessions count in over the time.',
},
{
title: 'Captured Sessions',
slug: FilterKey.COUNT_SESSIONS,
description: 'See list of users, sessions, errors, issues, etc.,',
},
{ title: 'Captured Requests', slug: FilterKey.COUNT_REQUESTS, description: '' },
{ title: 'Captured Sessions', slug: FilterKey.COUNT_SESSIONS, description: '' },
],
},
// {
// title: 'User Path',
// title: 'Path Analysis',
// icon: 'signpost-split',
// description: 'Discover user journeys between 2 points.',
// description: 'See where users are flowing and explore their journeys.',
// slug: USER_PATH,
// },
// {
// title: 'Retention',
// icon: 'arrow-repeat',
// description: 'Retension graph of users / features over a period of time.',
// description: 'Get an understanding of how many users are returning.',
// slug: RETENTION,
// },
// {
// title: 'Feature Adoption',
// icon: 'card-checklist',
// description: 'Find the adoption of your all features in your app.',
// description: 'See which features are used the most and how often.',
// slug: FEATURE_ADOPTION,
// },
{
title: 'Insights',
icon: 'lightbulb',
description: 'Find the adoption of your all features in your app.',
description: 'Uncover new issues impacting user experience.',
slug: INSIGHTS,
},
// {
// title: 'Form Analysis',
// icon: 'card-checklist',
// description: 'Understand why users are not completing forms.',
// slug: FEATURE_ADOPTION,
// },
];
export const DROPDOWN_OPTIONS = TYPES.filter((i: MetricType) => i.slug !== LIBRARY).map(