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

fix(ui): fix empty metric messages

Browse source
This commit is contained in:
sylenien 2022-08-16 14:17:02 +02:00
parent 1cdc4fc2c4
commit 00d01f2273
3 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
View file

@ -2,7 +2,7 @@ import React from 'react'
import { Table } from '../../common';
import { List } from 'immutable';
import { filtersMap } from 'Types/filter/newFilter';
import { NoContent } from 'UI';
import { NoContent, Icon } from 'UI';
import { tableColumnName } from 'App/constants/filterOptions';
import { numberWithCommas } from 'App/utils';
@ -50,7 +50,7 @@ function CustomMetricTable(props: Props) {
}
return (
<div className="" style={{ height: 240 }}>
<NoContent show={data.values && data.values.length === 0} size="small" title="No recordings found">
<NoContent show={data.values && data.values.length === 0} size="small" title={<div className="flex items-center"><Icon name="info-circle" className="mr-2" size="18" /> No data for the selected time period</div>}>
<Table
small
cols={ getColumns(metric) }

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

@ -44,7 +44,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
return (
<NoContent
title={<div className="flex items-center"><Icon name="info-circle" size={18} className="mr-2" />No errors found in the selected time range</div>}
title={<div className="flex items-center"><Icon name="info-circle" size={18} className="mr-2" />No data for the selected time period</div>}
show={!data.errors || data.errors.length === 0}
size="small"
>

10
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
View file

@ -3,7 +3,7 @@ import React from "react";
import SessionItem from "Shared/SessionItem";
import { Pagination, NoContent } from "UI";
import { useStore } from "App/mstore";
import { overPastString } from "App/dateRange";
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
interface Props {
metric: any;
@ -26,7 +26,13 @@ function CustomMetricTableSessions(props: Props) {
data.sessions.length === 0
}
size="small"
title={`No sessions found ${overPastString(period)}`}
title={
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No relevant sessions found for the selected time period.</div>
</div>
}
>
<div className="pb-4">
{data.sessions &&