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

Blank state of cards, and colors

Browse source
This commit is contained in:
Sudheer Salavadi 2024-07-08 14:54:03 +05:30
parent bde612f430
commit fa0276c1b2
46 changed files with 195 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Client/Integrations/integrationItem.module.css
View file

@ -1,5 +1,5 @@
.wrapper {
border-radius: 3px;
border-radius: .5rem;
/* border: solid thin $gray-light-shade; */
padding: 20px;
cursor: pointer;

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

@ -44,8 +44,8 @@ function ClickMapCard({
<NoContent
style={{ minHeight: 220 }}
title={
<div className="flex items-center relative text-lg">
<Icon name="info-circle" className="mr-2" size="18" />
<div className="flex items-center relative">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}

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

@ -57,8 +57,8 @@ function CustomMetricTable(props: Props) {
show={data.values && data.values.length === 0}
size="small"
title={
<div className="flex items-center text-lg">
<Icon name="info-circle" className="mr-2" size="18"/>
<div className="flex items-center">
<Icon name="info-circle" className="mr-2" size="14"/>
No data available for the selected period.
</div>
}

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

@ -45,7 +45,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
return (
<NoContent
title={<div className="flex items-center text-lg"><Icon name="info-circle" size={18} className="mr-2" />No data available for the selected period.</div>}
title={<div className="flex items-center"><Icon name="info-circle" size={14} className="mr-2" />No data available for the selected period.</div>}
show={!data.errors || data.errors.length === 0}
size="small"
style={{ minHeight: 220 }}

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

@ -60,7 +60,7 @@ function InsightsCard({ data }: any) {
style={{ minHeight: 220 }}
title={
<div className="flex items-center text-lg">
<Icon name="info-circle" className="mr-2" size="18" />
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}

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

@ -60,8 +60,8 @@ function SessionsBy(props: Props) {
className="flex flex-col items-center justify-center"
imageStyle={{ height: 0}}
description={
<div className="flex items-center gap-2 justify-center text-lg font-medium text-black">
<Info size={16} />
<div className="flex items-center gap-2 justify-center text-black">
<Info size={14} />
No data available for the selected period.
</div>
}

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

@ -19,8 +19,8 @@ function BreakdownOfLoadedResources(props: Props) {
<NoContent
size="small"
title={
<div className="flex items-center text-lg">
<Icon name="info-circle" className="mr-2" size="18" />
<div className="flex items-center">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}

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

@ -20,8 +20,8 @@ function CPULoad(props: Props) {
<NoContent
size="small"
title={
<div className="flex items-center text-lg">
<Icon name="info-circle" className="mr-2" size="18" />
<div className="flex items-center">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}

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

@ -8,6 +8,7 @@ import cn from 'classnames';
import stl from './callWithErrors.module.css';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { List } from 'immutable';
import { InfoCircleOutlined } from '@ant-design/icons'
const cols = [
{
@ -61,7 +62,11 @@ function CallWithErrors(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={ data.chart.length === 0 }
style={{ height: '240px'}}
>

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

@ -6,7 +6,8 @@ import {
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -17,7 +18,12 @@ function CallsErrors4xx(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

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

@ -17,8 +17,8 @@ function CallsErrors5xx(props: Props) {
<NoContent
size="small"
title={
<div className="flex items-center text-lg">
<Icon name="info-circle" className="mr-2" size="18" />
<div className="flex items-center">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}

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

@ -7,7 +7,8 @@ import {
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -19,7 +20,11 @@ function Crashes(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>

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

@ -10,6 +10,7 @@ import {
} from 'recharts';
import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { InfoCircleOutlined } from '@ant-design/icons';
const WIDGET_KEY = 'pagesDomBuildtime';
@ -27,7 +28,11 @@ function DomBuildingTime(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={ <div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>}
show={ metric.data.chart.length === 0 }
>
<>

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

@ -7,7 +7,8 @@ import {
Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -19,7 +20,9 @@ function ErrorsByOrigin(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={ <div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>}
show={ metric.data.chart && metric.data.chart.length === 0 }
style={ { height: '240px' } }
>
@ -42,8 +45,8 @@ function ErrorsByOrigin(props: Props) {
/>
<Legend />
<Tooltip {...Styles.tooltip} />
<Bar minPointSize={1} name={<span className="float">1<sup>st</sup> Party</span>} dataKey="firstParty" stackId="a" fill={Styles.colors[0]} />
<Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a" fill={Styles.colors[2]} />
<Bar minPointSize={1} name={<span className="float">1<sup>st</sup> Party</span>} dataKey="firstParty" stackId="a" fill={Styles.compareColors[0]} />
<Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a" fill={Styles.compareColors[2]} />
{/* <Bar minPointSize={1} name={<span className="float">1<sup>st</sup> Party</span>} dataKey="firstParty" stackId="a" fill={Styles.colors[0]} />
<Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a" fill={Styles.colors[2]} /> */}
</BarChart>

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

@ -6,7 +6,8 @@ import {
Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -17,7 +18,11 @@ function ErrorsByType(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }
>
@ -40,10 +45,10 @@ function ErrorsByType(props: Props) {
/>
<Legend />
<Tooltip {...Styles.tooltip} />
<Bar minPointSize={1} name="Integrations" dataKey="integrations" stackId="a" fill={Styles.colors[0]}/>
<Bar name="4xx" dataKey="4xx" stackId="a" fill={Styles.colors[1]} />
<Bar name="5xx" dataKey="5xx" stackId="a" fill={Styles.colors[2]} />
<Bar name="Javascript" dataKey="js" stackId="a" fill={Styles.colors[3]} />
<Bar minPointSize={1} name="Integrations" dataKey="integrations" stackId="a" fill={Styles.compareColors[0]}/>
<Bar name="4xx" dataKey="4xx" stackId="a" fill={Styles.compareColors[1]} />
<Bar name="5xx" dataKey="5xx" stackId="a" fill={Styles.compareColors[2]} />
<Bar name="Javascript" dataKey="js" stackId="a" fill={Styles.compareColors[3]} />
</BarChart>
</ResponsiveContainer>
</NoContent>

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

@ -2,6 +2,7 @@ import React from 'react';
import { Icon, NoContent } from 'UI';
import { NO_METRIC_DATA } from 'App/constants/messages';
import ListWithIcons from 'Components/Dashboard/Widgets/ListWithIcons';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any;
@ -22,7 +23,11 @@ function ErrorsPerDomain(props: Props) {
size="small"
show={data.chart.length === 0}
style={{ height: '240px' }}
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
>
<div className="w-full" style={{ height: '240px' }}>
<ListWithIcons list={list} />

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

@ -7,7 +7,8 @@ import {
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -20,7 +21,11 @@ function FPS(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={ metric.data.chart.length === 0 }
>
<>

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

@ -7,7 +7,8 @@ import {
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -23,7 +24,11 @@ function MemoryConsumption(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
>
<>
<div className="flex items-center justify-end mb-3">

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

@ -5,7 +5,8 @@ import {
ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer,
XAxis, YAxis, Tooltip
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -18,7 +19,11 @@ function ResourceLoadedVsResponseEnd(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
>
<ResponsiveContainer height={ 246 } width="100%">
<ComposedChart

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

@ -5,7 +5,8 @@ import {
ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer,
XAxis, YAxis, Tooltip
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -18,7 +19,11 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
>
<ResponsiveContainer height={ 240 } width="100%">
<ComposedChart

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

@ -9,7 +9,8 @@ import {
XAxis, YAxis
} from 'recharts';
import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
const WIDGET_KEY = 'resourcesLoadingTime';
export const RESOURCE_OPTIONS = [
@ -37,7 +38,11 @@ function ResourceLoadingTime(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
>
<>
<div className="flex items-center mb-3">

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

@ -8,7 +8,8 @@ import {
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
const WIDGET_KEY = 'pagesResponseTime';
@ -26,7 +27,11 @@ function ResponseTime(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={ metric.data.chart.length === 0 }
>
<>

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

@ -5,7 +5,8 @@ import {
ComposedChart, Bar, BarChart, CartesianGrid, ResponsiveContainer,
XAxis, YAxis, ReferenceLine, Tooltip
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
const PercentileLine = props => {
@ -49,7 +50,11 @@ function ResponseTimeDistribution(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={ data.chart.length === 0 }
style={ { height: '240px' } }
>

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

@ -6,7 +6,8 @@ import {
Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -16,7 +17,11 @@ function SessionsAffectedByJSErrors(props: Props) {
const { data, metric } = props;
return (
<NoContent
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
size="small"
show={ metric.data.chart.length === 0 }
style={ { height: '240px' } }

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

@ -7,7 +7,8 @@ import {
ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any
@ -19,7 +20,11 @@ function SessionsImpactedBySlowRequests(props: Props) {
return (
<NoContent
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
size="small"
show={ metric.data.chart.length === 0 }
>

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

@ -3,6 +3,7 @@ import { NoContent } from 'UI';
import { Styles } from '../../common';
import Bar from './Bar';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any;
@ -20,7 +21,11 @@ function SessionsPerBrowser(props: Props) {
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={data.chart.length === 0}
style={{ minHeight: 220 }}
>
@ -33,7 +38,7 @@ function SessionsPerBrowser(props: Props) {
versions={getVersions(item)}
width={Math.round((item.count * 100) / firstAvg) - 10}
domain={item.browser}
colors={Styles.colors}
colors={Styles.compareColors}
/>
)}
</div>

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

@ -2,6 +2,7 @@ import React from 'react';
import { Icon, NoContent } from 'UI';
import { NO_METRIC_DATA } from 'App/constants/messages';
import ListWithIcons from 'Components/Dashboard/Widgets/ListWithIcons';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data: any;
@ -23,7 +24,11 @@ function SlowestDomains(props: Props) {
size="small"
show={list.length === 0}
style={{ minHeight: 220 }}
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
>
<div className="w-full" style={{ height: '240px' }}>
<ListWithIcons list={list} />

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

@ -9,6 +9,7 @@ import ImageInfo from './ImageInfo';
import ResourceType from './ResourceType';
import CopyPath from './CopyPath';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
export const RESOURCE_OPTIONS = [
{ text: 'All', value: 'ALL' },
@ -72,7 +73,11 @@ function SlowestResources(props: Props) {
return (
<NoContent
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
size="small"
show={metric.data.chart.length === 0}
style={{ minHeight: 220 }}

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

@ -9,6 +9,7 @@ import { SVGMap } from 'react-svg-map';
import stl from './SpeedIndexByLocation.module.css';
import cn from 'classnames';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
data?: any;
@ -68,7 +69,12 @@ function SpeedIndexByLocation(props: Props) {
};
return (
<NoContent size="small" show={false} style={{ height: '240px' }} title={NO_METRIC_DATA}>
<NoContent size="small" show={false} style={{ height: '240px' }}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}>
<div className="absolute right-0 mr-4 top=0 w-full flex justify-end">
<AvgLabel text="Avg" count={Math.round(data.value)} unit="ms" />
</div>

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

@ -9,7 +9,8 @@ import {
XAxis, YAxis
} from 'recharts';
import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
const WIDGET_KEY = 'timeToRender';
@ -35,7 +36,11 @@ function TimeToRender(props: Props) {
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
>
<>
<div className="flex items-center mb-3">

4
frontend/app/components/Dashboard/Widgets/common/Styles.js
View file

@ -4,7 +4,7 @@ import {numberWithCommas} from 'App/utils';
const colorsTeal = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'];
const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
const compareColors = ['#394EFF', '#4D5FFF', '#808DFF', '#B3BBFF', '#E5E8FF'];
const compareColors = ['#394EFF', '#6272FF', '#808DFF', '#B3BBFF', '#C9CFFF'];
const compareColorsx = ["#222F99", "#2E3ECC", "#394EFF", "#6171FF", "#8895FF", "#B0B8FF", "#D7DCFF"].reverse();
const customMetricColors = ['#394EFF', '#3EAAAF', '#565D97'];
const colorsPie = colors.concat(["#DDDDDD"]);
@ -24,7 +24,7 @@ export default {
compareColorsx,
lineColor: '#2A7B7F',
lineColorCompare: '#394EFF',
strokeColor: compareColors[2],
strokeColor: compareColors[0],
xaxis: {
axisLine: {stroke: '#CCCCCC'},
interval: 0,

2
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
View file

@ -90,7 +90,7 @@ function CreateCard(props: Props) {
</Space>
<Button type="primary" onClick={createDashboardAndAddCard}>
<Space>
<ArrowRight size={14}/>Create
Create Dashboard <ArrowRight size={14}/>
</Space>
</Button>
</div>

7
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import {NoContent} from 'UI';
import { InfoCircleOutlined } from '@ant-design/icons';
import {
AreaChart, Area,
@ -39,7 +40,11 @@ function AreaChartCard(props: Props) {
>
<NoContent
size="small"
title={NO_METRIC_DATA}
title={
<div className='flex items-center gap-2 text-base font-normal'>
<InfoCircleOutlined size={12} /> { NO_METRIC_DATA }
</div>
}
show={data?.chart.length === 0}
>
<>

2
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
View file

@ -34,7 +34,7 @@ function BarChartCard(props: Props) {
key={key}
dataKey={key}
stackId="a"
fill={Styles.colors[index % Styles.colors.length]}
fill={Styles.compareColors[index % Styles.compareColors.length]}
name={key}
/>
))}

4
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
View file

@ -1,5 +1,6 @@
import React, { useMemo, useState, useEffect } from 'react';
import { Button, Input, Segmented, Space } from 'antd';
import { RightOutlined } from '@ant-design/icons'
import { ArrowRight, Info } from 'lucide-react';
import { CARD_LIST, CARD_CATEGORIES, CardType } from './ExampleCards';
import { useStore } from 'App/mstore';
@ -118,9 +119,10 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
)}
</div>
{isCreatingDashboard && (
<Button type="primary" onClick={createNewDashboard} loading={dashboardCreating}>
<Button type="link" onClick={createNewDashboard} loading={dashboardCreating} className='gap-2'>
<Space>
Create Blank
<RightOutlined />
</Space>
</Button>
)}

4
frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
View file

@ -52,8 +52,8 @@ function FunnelWidget(props: Props) {
<NoContent
style={{ minHeight: 220 }}
title={
<div className="flex items-center text-lg">
<Icon name="info-circle" className="mr-2" size="18" />
<div className="flex items-center">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}

4
frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
View file

@ -9,8 +9,8 @@ function Headers(props) {
<NoContent
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_RESULTS} size="60" />
<div className="mt-4">No data available</div>
<AnimatedSVG name={ICONS.NO_RESULTS} size={30} />
<div className="mt-4">No data available for the selected period.</div>
</div>
}
size="small"

2
frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css
View file

@ -1,5 +1,5 @@
.wrapper {
border-radius: 3px;
border-radius: .5rem;
border: solid thin $gray-light;
padding: 20px;
overflow: hidden;

2
frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.module.css
View file

@ -1,5 +1,5 @@
.wrapper {
border-radius: 3px;
border-radius: .5rem;
border: solid thin $gray-light;
padding: 20px;
overflow: hidden;

4
frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx
View file

@ -102,8 +102,8 @@ const SankeyChart: React.FC<Props> = ({data, height = 240, onChartClick}: Props)
style={{paddingTop: '80px'}}
show={!data.nodes.length || !data.links.length}
title={
<div className="flex items-center text-lg">
<Icon name="info-circle" className="mr-2" size="18" />
<div className="flex items-center">
<Icon name="info-circle" className="mr-2" size="14" />
No data available for the selected period.
</div>
}

2
frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
View file

@ -74,7 +74,7 @@ function SelectDateRange(props: Props) {
<div className={'relative'}>
<Dropdown menu={menuProps}>
{useButtonStyle ? (
<Button>
<Button type='text'>
<span>{isCustomRange ? customRange : selectedValue?.label}</span>
<DownOutlined />
</Button>

2
frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx
View file

@ -21,7 +21,7 @@ function SessionDateRange(props: Props) {
return (
<div className="flex items-center">
<span className="mr-1">No sessions {isCustom ? 'between' : 'in the'}</span>
<div className="border rounded"><SelectDateRange period={period} onChange={onDateChange} right={true} /></div>
<div className="border-0 rounded-lg"><SelectDateRange period={period} onChange={onDateChange} right={true} /></div>
</div>
);
}

4
frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
View file

@ -217,8 +217,8 @@ function SessionList(props: Props) {
<AnimatedSVG name={NO_CONTENT.icon} size={60} />
</span>
<div className='mt-4' />
<div className='text-center relative text-lg'>
{NO_CONTENT.message}
<div className='text-center relative'>
{NO_CONTENT.message }
</div>
</div>
}

5
frontend/app/components/ui/NoContent/NoContent.tsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import { Icon } from 'UI';
import { InfoCircleOutlined } from '@ant-design/icons'
import styles from './noContent.module.css';
interface Props {
@ -20,8 +21,8 @@ export default function NoContent(props: Props) {
children
) : (
<div className={`${styles.wrapper} ${size && styles[size]}`} style={style}>
{icon && <Icon name={icon} size={iconSize} />}
{title && <div className={styles.title}>{title}</div>}
{icon && <Icon icon={icon} size={iconSize} />}
{title && <div className='flex'>{title}</div>}
{subtext && <div className={styles.subtext}>{subtext}</div>}
{image && <div className="mt-4 flex justify-center">{image} </div>}
</div>

2
frontend/app/constants/messages.ts
View file

@ -1 +1 @@
export const NO_METRIC_DATA = 'No data available'
export const NO_METRIC_DATA = 'No data available for the selected time period.';

8
tracker/tracker-assist/layout/index-chat.html
View file

@ -40,7 +40,7 @@
/* border: solid thin #ccc; */
/* box-shadow: 0 0 10px #aaa; */
border: solid 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
border-radius: .5rem;
}
.card-footers {
@ -68,7 +68,7 @@
.btn {
padding: 5px 8px;
font-size: 14px;
border-radius: 3px;
border-radius: .5rem;
background-color: transparent;
border: none;
cursor: pointer;
@ -269,7 +269,7 @@
#chat-card .chat-input {
margin: 10px;
border-radius: 3px;
border-radius: .5rem;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #DDDDDD;
position: relative;
@ -314,7 +314,7 @@
font: 14px 'Roboto', sans-serif;
padding: 20px;
background-color: #F3F3F3;
border-radius: 3px;
border-radius: .5rem;
/* position: absolute; */
width: fit-content;
color: #666666;