From fa0276c1b27da8e01873f0e3229f2cffd96272ce Mon Sep 17 00:00:00 2001 From: Sudheer Salavadi Date: Mon, 8 Jul 2024 14:54:03 +0530 Subject: [PATCH] Blank state of cards, and colors --- .../Integrations/integrationItem.module.css | 2 +- .../ClickMapCard/ClickMapCard.tsx | 4 ++-- .../CustomMetricTable/CustomMetricTable.tsx | 4 ++-- .../CustomMetricTableErrors.tsx | 2 +- .../InsightsCard/InsightsCard.tsx | 2 +- .../Widgets/CustomMetricsWidgets/SessionsBy.tsx | 4 ++-- .../BreakdownOfLoadedResources.tsx | 4 ++-- .../PredefinedWidgets/CPULoad/CPULoad.tsx | 4 ++-- .../CallWithErrors/CallWithErrors.tsx | 7 ++++++- .../CallsErrors4xx/CallsErrors4xx.tsx | 10 ++++++++-- .../CallsErrors5xx/CallsErrors5xx.tsx | 4 ++-- .../PredefinedWidgets/Crashes/Crashes.tsx | 9 +++++++-- .../DomBuildingTime/DomBuildingTime.tsx | 7 ++++++- .../ErrorsByOrigin/ErrorsByOrigin.tsx | 11 +++++++---- .../ErrorsByType/ErrorsByType.tsx | 17 +++++++++++------ .../ErrorsPerDomain/ErrorsPerDomain.tsx | 7 ++++++- .../Widgets/PredefinedWidgets/FPS/FPS.tsx | 9 +++++++-- .../MemoryConsumption/MemoryConsumption.tsx | 9 +++++++-- .../ResourceLoadedVsResponseEnd.tsx | 9 +++++++-- .../ResourceLoadedVsVisuallyComplete.tsx | 9 +++++++-- .../ResourceLoadingTime/ResourceLoadingTime.tsx | 9 +++++++-- .../ResponseTime/ResponseTime.tsx | 9 +++++++-- .../ResponseTimeDistribution.tsx | 9 +++++++-- .../SessionsAffectedByJSErrors.tsx | 9 +++++++-- .../SessionsImpactedBySlowRequests.tsx | 9 +++++++-- .../SessionsPerBrowser/SessionsPerBrowser.tsx | 9 +++++++-- .../SlowestDomains/SlowestDomains.tsx | 7 ++++++- .../SlowestResources/SlowestResources.tsx | 7 ++++++- .../SpeedIndexByLocation.tsx | 8 +++++++- .../TimeToRender/TimeToRender.tsx | 9 +++++++-- .../Dashboard/Widgets/common/Styles.js | 4 ++-- .../DashboardList/NewDashModal/CreateCard.tsx | 2 +- .../NewDashModal/Examples/AreaChartCard.tsx | 7 ++++++- .../NewDashModal/Examples/BarChart.tsx | 2 +- .../DashboardList/NewDashModal/SelectCard.tsx | 4 +++- .../Funnels/FunnelWidget/FunnelWidget.tsx | 4 ++-- .../Fetch/components/Headers/Headers.tsx | 4 ++-- .../Filters/FilterModal/FilterModal.module.css | 2 +- .../LiveFilterModal/LiveFilterModal.module.css | 2 +- .../shared/Insights/SankeyChart/SankeyChart.tsx | 4 ++-- .../shared/SelectDateRange/SelectDateRange.tsx | 2 +- .../components/SessionList/SessionDateRange.tsx | 2 +- .../components/SessionList/SessionList.tsx | 4 ++-- .../app/components/ui/NoContent/NoContent.tsx | 5 +++-- frontend/app/constants/messages.ts | 2 +- tracker/tracker-assist/layout/index-chat.html | 8 ++++---- 46 files changed, 195 insertions(+), 82 deletions(-) diff --git a/frontend/app/components/Client/Integrations/integrationItem.module.css b/frontend/app/components/Client/Integrations/integrationItem.module.css index 72b3be522..037b895dd 100644 --- a/frontend/app/components/Client/Integrations/integrationItem.module.css +++ b/frontend/app/components/Client/Integrations/integrationItem.module.css @@ -1,5 +1,5 @@ .wrapper { - border-radius: 3px; + border-radius: .5rem; /* border: solid thin $gray-light-shade; */ padding: 20px; cursor: pointer; diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx index b5acb47a7..a2b5c4e57 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx @@ -44,8 +44,8 @@ function ClickMapCard({ - +
+ No data available for the selected period.
} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx index 02febea23..d876ee5ba 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx @@ -57,8 +57,8 @@ function CustomMetricTable(props: Props) { show={data.values && data.values.length === 0} size="small" title={ -
- +
+ No data available for the selected period.
} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx index ffa9cf436..d22f351d9 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx @@ -45,7 +45,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) { return ( No data available for the selected period.
} + title={
No data available for the selected period.
} show={!data.errors || data.errors.length === 0} size="small" style={{ minHeight: 220 }} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx index 3124ea53b..b3219ae3b 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx @@ -60,7 +60,7 @@ function InsightsCard({ data }: any) { style={{ minHeight: 220 }} title={
- + No data available for the selected period.
} diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx index 2ce690680..66efee122 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx @@ -60,8 +60,8 @@ function SessionsBy(props: Props) { className="flex flex-col items-center justify-center" imageStyle={{ height: 0}} description={ -
- +
+ No data available for the selected period.
} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx index a08bf610f..3a86cfe84 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx @@ -19,8 +19,8 @@ function BreakdownOfLoadedResources(props: Props) { - +
+ No data available for the selected period.
} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx index a6906ca9a..1bd165878 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx @@ -20,8 +20,8 @@ function CPULoad(props: Props) { - +
+ No data available for the selected period.
} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx index 56baccb08..84b6472e9 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx @@ -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 ( + { NO_METRIC_DATA } +
+ } show={ data.chart.length === 0 } style={{ height: '240px'}} > diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx index d39ef59af..56b821045 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx @@ -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 ( + { NO_METRIC_DATA } + + } show={ metric.data.chart.length === 0 } style={ { height: '240px' } } > diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx index 37900565f..7a8fa1150 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx @@ -17,8 +17,8 @@ function CallsErrors5xx(props: Props) { - +
+ No data available for the selected period.
} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx index ff801eb07..6d260dfac 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx @@ -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 ( + { NO_METRIC_DATA } + + } show={ metric.data.chart.length === 0 } style={ { height: '240px' } } > diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx index 0fdf5a97c..1d4ab85f3 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx @@ -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 ( + { NO_METRIC_DATA } + } + + show={ metric.data.chart.length === 0 } > <> diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx index cd95853fe..6f3cd24a7 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx @@ -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 ( + { NO_METRIC_DATA } + } show={ metric.data.chart && metric.data.chart.length === 0 } style={ { height: '240px' } } > @@ -42,8 +45,8 @@ function ErrorsByOrigin(props: Props) { /> - 1st Party} dataKey="firstParty" stackId="a" fill={Styles.colors[0]} /> - 3rd Party} dataKey="thirdParty" stackId="a" fill={Styles.colors[2]} /> + 1st Party} dataKey="firstParty" stackId="a" fill={Styles.compareColors[0]} /> + 3rd Party} dataKey="thirdParty" stackId="a" fill={Styles.compareColors[2]} /> {/* 1st Party} dataKey="firstParty" stackId="a" fill={Styles.colors[0]} /> 3rd Party} dataKey="thirdParty" stackId="a" fill={Styles.colors[2]} /> */} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx index d2acb58a5..5ccafee9c 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx @@ -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 ( + { NO_METRIC_DATA } + + } show={ metric.data.chart.length === 0 } style={ { height: '240px' } } > @@ -40,10 +45,10 @@ function ErrorsByType(props: Props) { /> - - - - + + + + diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx index ab2e4b6b3..51d4c4e31 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx @@ -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={ +
+ { NO_METRIC_DATA } +
+ } >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx index 2c534a7fa..fe710a827 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx @@ -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 ( + { NO_METRIC_DATA } +
+ } show={ metric.data.chart.length === 0 } > <> diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx index 3a3a491b0..e12061997 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx @@ -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) { + { NO_METRIC_DATA } + + } > <>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx index 83fe4a006..5a85af7e3 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx @@ -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) { + { NO_METRIC_DATA } +
+ } > + { NO_METRIC_DATA } + + } > + { NO_METRIC_DATA } + + } > <>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx index fabb85787..83b78cc81 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx @@ -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 ( + { NO_METRIC_DATA } +
+ } show={ metric.data.chart.length === 0 } > <> diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx index 6386748d4..d167137cb 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx @@ -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 ( + { NO_METRIC_DATA } + + } show={ data.chart.length === 0 } style={ { height: '240px' } } > diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx index 8dd76ffea..a60fb9803 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx @@ -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 ( + { NO_METRIC_DATA } + + } size="small" show={ metric.data.chart.length === 0 } style={ { height: '240px' } } diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx index 492bc73fe..08717ff1f 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx @@ -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 ( + { NO_METRIC_DATA } + + } size="small" show={ metric.data.chart.length === 0 } > diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx index 1644d77d1..3b32f62e5 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx @@ -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 ( + { NO_METRIC_DATA } + + } 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} /> )} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx index 7a2afeb9d..1c9e75c8e 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx @@ -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={ +
+ { NO_METRIC_DATA } +
+ } >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx index e514d9c18..a17d91633 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx @@ -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 ( + { NO_METRIC_DATA } +
+ } size="small" show={metric.data.chart.length === 0} style={{ minHeight: 220 }} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx index cd30de44a..039d02e04 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx @@ -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 ( - + + { NO_METRIC_DATA } + + }>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx index 20cdc1f51..19a0f7233 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx @@ -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) { + { NO_METRIC_DATA } + + } > <>
diff --git a/frontend/app/components/Dashboard/Widgets/common/Styles.js b/frontend/app/components/Dashboard/Widgets/common/Styles.js index 0f8854911..0a24a29a7 100644 --- a/frontend/app/components/Dashboard/Widgets/common/Styles.js +++ b/frontend/app/components/Dashboard/Widgets/common/Styles.js @@ -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, diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx index ee76fee04..7b9cf56b6 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx @@ -90,7 +90,7 @@ function CreateCard(props: Props) {
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx index 871c4519d..03c083ff2 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx @@ -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) { > + { NO_METRIC_DATA } + + } show={data?.chart.length === 0} > <> diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx index 836cc4211..8d426ec6f 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx @@ -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} /> ))} diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx index 160445f06..97e0e3d70 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx @@ -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 = (props: SelectCardProps) => { )} {isCreatingDashboard && ( - )} diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx index 77467e59e..432f38b79 100644 --- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx +++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx @@ -52,8 +52,8 @@ function FunnelWidget(props: Props) { - +
+ No data available for the selected period.
} diff --git a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx index 0f48fb792..6d8980454 100644 --- a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx +++ b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx @@ -9,8 +9,8 @@ function Headers(props) { - -
No data available
+ +
No data available for the selected period.
} size="small" diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css b/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css index 3ac2578b8..077a57370 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.module.css @@ -1,5 +1,5 @@ .wrapper { - border-radius: 3px; + border-radius: .5rem; border: solid thin $gray-light; padding: 20px; overflow: hidden; diff --git a/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.module.css b/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.module.css index 463a7a2a9..5810a0a38 100644 --- a/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.module.css +++ b/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.module.css @@ -1,5 +1,5 @@ .wrapper { - border-radius: 3px; + border-radius: .5rem; border: solid thin $gray-light; padding: 20px; overflow: hidden; diff --git a/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx b/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx index e99780d26..6835898da 100644 --- a/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx +++ b/frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx @@ -102,8 +102,8 @@ const SankeyChart: React.FC = ({data, height = 240, onChartClick}: Props) style={{paddingTop: '80px'}} show={!data.nodes.length || !data.links.length} title={ -
- +
+ No data available for the selected period.
} diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx index b1173b315..60e457179 100644 --- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx +++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx @@ -74,7 +74,7 @@ function SelectDateRange(props: Props) {
{useButtonStyle ? ( - diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx index 700e05e6c..2c02b1d6e 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx @@ -21,7 +21,7 @@ function SessionDateRange(props: Props) { return (
No sessions {isCustom ? 'between' : 'in the'} -
+
); } diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx index 0f95dd232..275641058 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx @@ -217,8 +217,8 @@ function SessionList(props: Props) {
-
- {NO_CONTENT.message} +
+ {NO_CONTENT.message }
} diff --git a/frontend/app/components/ui/NoContent/NoContent.tsx b/frontend/app/components/ui/NoContent/NoContent.tsx index ae26731be..b4eb0eddd 100644 --- a/frontend/app/components/ui/NoContent/NoContent.tsx +++ b/frontend/app/components/ui/NoContent/NoContent.tsx @@ -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 ) : (
- {icon && } - {title &&
{title}
} + {icon && } + {title &&
{title}
} {subtext &&
{subtext}
} {image &&
{image}
}
diff --git a/frontend/app/constants/messages.ts b/frontend/app/constants/messages.ts index 32817b99c..b3837c0e8 100644 --- a/frontend/app/constants/messages.ts +++ b/frontend/app/constants/messages.ts @@ -1 +1 @@ -export const NO_METRIC_DATA = 'No data available' +export const NO_METRIC_DATA = 'No data available for the selected time period.'; diff --git a/tracker/tracker-assist/layout/index-chat.html b/tracker/tracker-assist/layout/index-chat.html index ef87c6b06..16681f0dd 100644 --- a/tracker/tracker-assist/layout/index-chat.html +++ b/tracker/tracker-assist/layout/index-chat.html @@ -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;