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

change(ui): update metric missing data message

Browse source
This commit is contained in:
sylenien 2022-08-19 13:11:05 +02:00
parent 53339af46b
commit 72738d5343
28 changed files with 70 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
View file

@ -34,7 +34,7 @@ function CustomMetricPieChart(props: Props) {
}
}
return (
<NoContent size="small" title="No recordings found" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
<NoContent size="small" title="No data available" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
<ResponsiveContainer height={ 220 } width="100%">
<PieChart>
<Pie

9
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
View file

@ -1,18 +1,17 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { Loader, NoContent, Icon, Popup } from 'UI';
import { Styles } from '../../common';
import { ResponsiveContainer } from 'recharts';
import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
import stl from './CustomMetricWidget.module.css';
import { getChartFormatter, getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
import { getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
import { init, edit, remove, setAlertMetricId, setActiveWidget, updateActiveState } from 'Duck/customMetrics';
import APIClient from 'App/api_client';
import { setShowAlerts } from 'Duck/dashboard';
import CustomMetriLineChart from '../CustomMetriLineChart';
import CustomMetricPieChart from '../CustomMetricPieChart';
import CustomMetricPercentage from '../CustomMetricPercentage';
import CustomMetricTable from '../CustomMetricTable';
import { NO_METRIC_DATA } from 'App/constants/messages'
const customParams = rangeName => {
const params = { density: 70 }
@ -104,7 +103,7 @@ function CustomMetricWidget(props: Props) {
<Loader loading={ loading } size="small">
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ data.length === 0 }
>
<ResponsiveContainer height={ 240 } width="100%">

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

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

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

@ -19,7 +19,7 @@ function CPULoad(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title="No data available"
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
View file

@ -6,6 +6,7 @@ import ImageInfo from './ImageInfo';
import MethodType from './MethodType';
import cn from 'classnames';
import stl from './callWithErrors.module.css';
import { NO_METRIC_DATA } from 'App/constants/messages'
const cols = [
{
@ -61,7 +62,7 @@ function CallWithErrors(props: Props) {
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={{ height: '240px'}}
>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
View file

@ -6,6 +6,7 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -16,7 +17,7 @@ function CallsErrors4xx(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

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

@ -16,7 +16,7 @@ function CallsErrors5xx(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title="No data available"
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
View file

@ -7,6 +7,7 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -18,7 +19,7 @@ function Crashes(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

23
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
View file

@ -4,12 +4,12 @@ import { Styles, AvgLabel } from '../../common';
import { withRequest } from 'HOCs'
import {
AreaChart, Area,
BarChart, Bar, CartesianGrid, Tooltip,
LineChart, Line, Legend, ResponsiveContainer,
CartesianGrid, Tooltip,
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
const WIDGET_KEY = 'pagesDomBuildtime';
@ -21,30 +21,17 @@ interface Props {
metric?: any
}
function DomBuildingTime(props: Props) {
const { data, optionsLoading, metric } = props;
const { data, metric } = props;
const gradientDef = Styles.gradientDef();
const onSelect = (params) => {
// const _params = { density: 70 }
// TODO reload the data with new params;
// this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
}
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
>
<>
<div className="flex items-center mb-3">
{/* <WidgetAutoComplete
loading={optionsLoading}
fetchOptions={props.fetchOptions}
options={props.options}
onSelect={onSelect}
placeholder="Search for Page"
/> */}
<AvgLabel className="ml-auto" text="Avg" count={Math.round(metric.data.value)} unit="ms" />
</div>
<ResponsiveContainer height={ 207 } width="100%">

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
View file

@ -7,6 +7,7 @@ import {
Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -18,7 +19,7 @@ function ErrorsByOrigin(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
View file

@ -6,6 +6,7 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -16,7 +17,7 @@ function ErrorsByType(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
View file

@ -3,6 +3,7 @@ import { NoContent } from 'UI';
import { Styles } from '../../common';
import { numberWithCommas } from 'App/utils';
import Bar from 'App/components/Dashboard/Widgets/ErrorsPerDomain/Bar';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -17,7 +18,7 @@ function ErrorsPerDomain(props: Props) {
size="small"
show={ metric.data.chart.length === 0 }
style={{ height: '240px'}}
title="No recordings found"
title={NO_METRIC_DATA}
>
<div className="w-full" style={{ height: '240px' }}>
{metric.data.chart.map((item, i) =>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
View file

@ -7,6 +7,7 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -19,7 +20,7 @@ function FPS(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
>
<>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
View file

@ -7,6 +7,7 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -22,7 +23,7 @@ function MemoryConsumption(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title="No recordings found"
title={NO_METRIC_DATA}
>
<>
<div className="flex items-center justify-end mb-3">

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
View file

@ -50,9 +50,10 @@ function MissingResources(props: Props) {
return (
<NoContent
title="No resources missing."
title="No resources missing"
size="small"
show={ metric.data.chart.length === 0 }
style={{ minHeight: 220 }}
>
<div style={{ height: '240px'}}>
<Table

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
View file

@ -5,6 +5,7 @@ import {
ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer,
XAxis, YAxis, Tooltip
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -17,7 +18,7 @@ function ResourceLoadedVsResponseEnd(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title="No recordings found"
title={NO_METRIC_DATA}
>
<ResponsiveContainer height={ 246 } width="100%">
<ComposedChart

6
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
View file

@ -5,20 +5,20 @@ import {
ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer,
XAxis, YAxis, Tooltip
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
metric?: any
}
function ResourceLoadedVsVisuallyComplete(props: Props) {
const { data, metric } = props;
const gradientDef = Styles.gradientDef();
const { metric } = props;
return (
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title="No recordings found"
title={NO_METRIC_DATA}
>
<ResponsiveContainer height={ 240 } width="100%">
<ComposedChart

48
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
View file

@ -1,15 +1,15 @@
import React from 'react';
import { NoContent, DropdownPlain } from 'UI';
import { NoContent } from 'UI';
import { Styles, AvgLabel } from '../../common';
import { withRequest } from 'HOCs'
import {
AreaChart, Area,
BarChart, Bar, CartesianGrid, Tooltip,
LineChart, Line, Legend, ResponsiveContainer,
CartesianGrid, Tooltip,
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
const WIDGET_KEY = 'resourcesLoadingTime';
export const RESOURCE_OPTIONS = [
@ -30,53 +30,17 @@ interface Props {
metric?: any
}
function ResourceLoadingTime(props: Props) {
const { data, optionsLoading, metric } = props;
const { data, metric } = props;
const gradientDef = Styles.gradientDef();
const [autoCompleteSelected, setSutoCompleteSelected] = React.useState('');
const [type, setType] = React.useState('');
const onSelect = (params) => {
// const _params = { density: 70 }
setSutoCompleteSelected(params.value);
// TODO reload the data with new params;
// this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
}
const writeOption = (e, { name, value }) => {
// this.setState({ [name]: value })
setType(value);
const _params = { density: 70 } // TODO reload the data with new params;
// this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { ..._params, [ name ]: value === 'all' ? null : value })
}
return (
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title="No recordings found"
title={NO_METRIC_DATA}
>
<>
<div className="flex items-center mb-3">
{/* <WidgetAutoComplete
loading={optionsLoading}
fetchOptions={props.fetchOptions}
options={props.options}
onSelect={onSelect}
placeholder="Search for Page"
/>
<DropdownPlain
disabled={!!autoCompleteSelected}
name="type"
label="Resource"
options={ RESOURCE_OPTIONS }
onChange={ writeOption }
defaultValue={'all'}
wrapperStyle={{
position: 'absolute',
top: '12px',
left: '170px',
}}
/> */}
<AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
</div>
<ResponsiveContainer height={ 207 } width="100%">

20
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
View file

@ -4,12 +4,11 @@ import { Styles, AvgLabel } from '../../common';
import { withRequest } from 'HOCs'
import {
AreaChart, Area,
BarChart, Bar, CartesianGrid, Tooltip,
LineChart, Line, Legend, ResponsiveContainer,
CartesianGrid, Tooltip,
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
import { toUnderscore } from 'App/utils';
} from 'recharts';import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
const WIDGET_KEY = 'pagesResponseTime';
@ -21,20 +20,13 @@ interface Props {
metric?: any
}
function ResponseTime(props: Props) {
const { data, optionsLoading, metric } = props;
const { data, metric } = props;
const gradientDef = Styles.gradientDef();
const onSelect = (params) => {
// const _params = { density: 70 }
// TODO reload the data with new params;
// this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
}
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
>
<>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
View file

@ -5,6 +5,7 @@ import {
ComposedChart, Bar, BarChart, CartesianGrid, ResponsiveContainer,
XAxis, YAxis, ReferenceLine, Tooltip, Legend
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
const PercentileLine = props => {
@ -49,7 +50,7 @@ function ResponseTimeDistribution(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
View file

@ -6,6 +6,7 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -15,7 +16,7 @@ function SessionsAffectedByJSErrors(props: Props) {
const { data, metric } = props;
return (
<NoContent
title="No recordings found"
title={NO_METRIC_DATA}
size="small"
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
View file

@ -7,6 +7,7 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -18,7 +19,7 @@ function SessionsImpactedBySlowRequests(props: Props) {
return (
<NoContent
title="No recordings found"
title={NO_METRIC_DATA}
size="small"
show={ metric.data.chart.length === 0 }
>

4
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
View file

@ -2,6 +2,7 @@ import React from 'react';
import { NoContent } from 'UI';
import { Styles } from '../../common';
import Bar from './Bar';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -19,8 +20,9 @@ function SessionsPerBrowser(props: Props) {
return (
<NoContent
size="small"
title="No recordings found"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={{ minHeight: 220 }}
>
<div className="w-full" style={{ height: '240px' }}>
{metric.data.chart.map((item, i) =>

5
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
View file

@ -3,6 +3,7 @@ import { NoContent } from 'UI';
import { Styles } from '../../common';
import { numberWithCommas } from 'App/utils';
import Bar from 'App/components/Dashboard/Widgets/SlowestDomains/Bar';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
data: any
@ -15,8 +16,8 @@ function SlowestDomains(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
style={{ maxHeight: '240px' }}
title="No recordings found"
style={{ minHeight: 220 }}
title={NO_METRIC_DATA}
>
<div className="w-full" style={{ height: '240px' }}>
{metric.data.chart.map((item, i) =>

4
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
View file

@ -8,6 +8,7 @@ import Chart from './Chart';
import ImageInfo from './ImageInfo';
import ResourceType from './ResourceType';
import CopyPath from './CopyPath';
import { NO_METRIC_DATA } from 'App/constants/messages'
export const RESOURCE_OPTIONS = [
{ text: 'All', value: 'ALL', },
@ -68,9 +69,10 @@ function SlowestResources(props: Props) {
return (
<NoContent
title="No resources missing."
title={NO_METRIC_DATA}
size="small"
show={ metric.data.chart.length === 0 }
style={{ minHeight: 220 }}
>
<div style={{ height: '240px', marginBottom:'10px'}}>
<Table

3
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
View file

@ -8,6 +8,7 @@ import WorldMap from '@svg-maps/world';
import { SVGMap } from 'react-svg-map';
import stl from './SpeedIndexByLocation.module.css';
import cn from 'classnames';
import { NO_METRIC_DATA } from 'App/constants/messages'
interface Props {
metric?: any;
@ -63,7 +64,7 @@ function SpeedIndexByLocation(props: Props) {
};
return (
<NoContent size="small" show={false} style={{ height: '240px' }} title="No recordings found">
<NoContent size="small" show={false} style={{ height: '240px' }} title={NO_METRIC_DATA}>
<div className="absolute right-0 mr-4 top=0 w-full flex justify-end">
<AvgLabel text="Avg" count={Math.round(metric.data.value)} unit="ms" />
</div>

8
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
View file

@ -4,12 +4,12 @@ import { Styles, AvgLabel } from '../../common';
import { withRequest } from 'HOCs'
import {
AreaChart, Area,
BarChart, Bar, CartesianGrid, Tooltip,
LineChart, Line, Legend, ResponsiveContainer,
CartesianGrid, Tooltip,
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
const WIDGET_KEY = 'timeToRender';
@ -35,7 +35,7 @@ function TimeToRender(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title="No recordings found"
title={NO_METRIC_DATA}
>
<>
<div className="flex items-center mb-3">

1
frontend/app/constants/messages.ts Normal file
View file

@ -0,0 +1 @@
export const NO_METRIC_DATA = 'No data available'