fix(ui): fix empty metric text, fix metric min height, fix rows etc

2022-08-12 10:57:28 +02:00 · 2022-08-12 10:57:28 +02:00 · 3136ce5a2b
commit 3136ce5a2b
parent 901539f27d
68 changed files with 108 additions and 55 deletions
--- a/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js
+++ b/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js
@ -30,6 +30,7 @@ export default class BreakdownOfLoadedResources extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
+++ b/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
@ -64,6 +64,7 @@ export default class CallWithErrors extends React.PureComponent {
        </div>
        <NoContent
          size="small"
+          title="No recordings found"
          show={ images.size === 0 }
        >
          <Table
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js
+++ b/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js
@ -37,6 +37,7 @@ export default class CallsErrors4xx extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js
+++ b/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js
@ -37,6 +37,7 @@ export default class CallsErrors5xx extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js
+++ b/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js
@ -27,6 +27,7 @@ export default class CpuLoad extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <div className="flex items-center justify-end mb-3">
--- a/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js
+++ b/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js
@ -30,6 +30,7 @@ export default class Crashes extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
@ -34,7 +34,7 @@ function CustomMetricPieChart(props: Props) {
        }
    }
    return (
-        <NoContent size="small" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
+        <NoContent size="small" title="No recordings found" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
            <ResponsiveContainer height={ 220 } width="100%">
                <PieChart>
                    <Pie
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
@ -49,8 +49,8 @@ function CustomMetricTable(props: Props) {
        onClick(filters);
    }
    return (
-        <div className="" style={{ maxHeight: '240px'}}>
-           <NoContent show={data.values && data.values.length === 0} size="small">
+        <div className="" style={{ height: 240 }}>
+           <NoContent show={data.values && data.values.length === 0} size="small" title="No recordings found">
                <Table
                    small
                    cols={ getColumns(metric) }
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@ -104,6 +104,7 @@ function CustomMetricWidget(props: Props) {
        <Loader loading={ loading } size="small">
          <NoContent
            size="small"
+            title="No recordings found"
            show={ data.length === 0 }
          >
            <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js
+++ b/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js
@ -44,6 +44,7 @@ export default class DomBuildingTime extends React.PureComponent {
    return (
      <NoContent
        size="small"
+        title="No recordings found"
        show={ data.chart.length === 0 }
      >
        <React.Fragment>
@ -60,6 +61,7 @@ export default class DomBuildingTime extends React.PureComponent {
          <Loader loading={ loading } size="small">
            <NoContent
              size="small"
+              title="No recordings found"
              show={ data.chart.size === 0 }
            >
              <ResponsiveContainer height={ 200 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js
+++ b/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js
@ -29,6 +29,7 @@ export default class ErrorsByOrigin extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js
+++ b/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js
@ -31,6 +31,7 @@ export default class ErrorsByType extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js
+++ b/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js
@ -15,6 +15,7 @@ export default class ErrorsPerDomain extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.size === 0 }
        >          
          <div className="w-full pt-3" style={{ height: '240px' }}>
--- a/frontend/app/components/Dashboard/Widgets/FPS/FPS.js
+++ b/frontend/app/components/Dashboard/Widgets/FPS/FPS.js
@ -26,6 +26,7 @@ export default class FPS extends React.PureComponent {
    return (
      <Loader loading={ loading } size="small">
        <NoContent
+          title="No recordings found"
          size="small"
          show={ data.chart.length === 0 }
        >
--- a/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js
+++ b/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js
@ -12,6 +12,7 @@ export default class LastFeedbacks extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ sessions.size === 0 }
        >
          { sessions.map(({ 
--- a/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js
+++ b/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js
@ -26,6 +26,7 @@ export default class MemoryConsumption extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.chart.length === 0 }
        >
          <div className="flex items-center justify-end mb-3">
--- a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
+++ b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
@ -48,6 +48,7 @@ export default class MostImpactfulErrors extends React.PureComponent {
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ errors.size === 0 }
        >
          <Table
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
@ -19,6 +19,7 @@ function BreakdownOfLoadedResources(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
@ -46,4 +47,4 @@ function BreakdownOfLoadedResources(props: Props) {
    );
 }

-export default BreakdownOfLoadedResources;
+export default BreakdownOfLoadedResources;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
@ -19,6 +19,7 @@ function CPULoad(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
        >
@ -54,4 +55,4 @@ function CPULoad(props: Props) {
    );
 }

-export default CPULoad;
+export default CPULoad;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
@ -61,6 +61,7 @@ function CallWithErrors(props: Props) {

        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={{ height: '240px'}}
        >
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
@ -16,6 +16,7 @@ function CallsErrors4xx(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
        >
@ -46,4 +47,4 @@ function CallsErrors4xx(props: Props) {
    );
 }

-export default CallsErrors4xx;
+export default CallsErrors4xx;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
@ -16,6 +16,7 @@ function CallsErrors5xx(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
        >
@ -46,4 +47,4 @@ function CallsErrors5xx(props: Props) {
    );
 }

-export default CallsErrors5xx;
+export default CallsErrors5xx;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
@ -18,6 +18,7 @@ function Crashes(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
        >
@ -52,4 +53,4 @@ function Crashes(props: Props) {
    );
 }

-export default Crashes;
+export default Crashes;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
@ -33,6 +33,7 @@ function DomBuildingTime(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
        >
          <>
@ -87,4 +88,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(DomBuildingTime)
+})(DomBuildingTime)
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
@ -17,6 +17,7 @@ function ErrorsByOrigin(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
        >
@ -49,4 +50,4 @@ function ErrorsByOrigin(props: Props) {
    );
 }

-export default ErrorsByOrigin;
+export default ErrorsByOrigin;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
@ -16,6 +16,7 @@ function ErrorsByType(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
        >
@ -48,4 +49,4 @@ function ErrorsByType(props: Props) {
    );
 }

-export default ErrorsByType;
+export default ErrorsByType;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
@ -17,6 +17,7 @@ function ErrorsPerDomain(props: Props) {
          size="small"
          show={ metric.data.chart.length === 0 }
          style={{ height: '240px'}}
+          title="No recordings found"
        >
          <div className="w-full" style={{ height: '240px' }}>
            {metric.data.chart.map((item, i) => 
@ -34,4 +35,4 @@ function ErrorsPerDomain(props: Props) {
    );
 }

-export default ErrorsPerDomain;
+export default ErrorsPerDomain;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
@ -19,6 +19,7 @@ function FPS(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
        >
          <>
@ -57,4 +58,4 @@ function FPS(props: Props) {
    );
 }

-export default FPS;
+export default FPS;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
@ -22,6 +22,7 @@ function MemoryConsumption(props: Props) {
        <NoContent
          size="small"
          show={ metric.data.chart.length === 0 }
+          title="No recordings found"
        >
          <>
            <div className="flex items-center justify-end mb-3">
@ -60,4 +61,4 @@ function MemoryConsumption(props: Props) {
    );
 }

-export default MemoryConsumption;
+export default MemoryConsumption;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
@ -17,6 +17,7 @@ function ResourceLoadedVsResponseEnd(props: Props) {
        <NoContent
          size="small"
          show={ metric.data.chart.length === 0 }
+          title="No recordings found"
        >
          <ResponsiveContainer height={ 246 } width="100%">
            <ComposedChart
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
@ -18,6 +18,7 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
        <NoContent
          size="small"
          show={ metric.data.chart.length === 0 }
+          title="No recordings found"
        >
          <ResponsiveContainer height={ 240 } width="100%">
            <ComposedChart
@ -69,4 +70,4 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
    );
 }

-export default ResourceLoadedVsVisuallyComplete;
+export default ResourceLoadedVsVisuallyComplete;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
@ -53,6 +53,7 @@ function ResourceLoadingTime(props: Props) {
        <NoContent
          size="small"
          show={ metric.data.chart.length === 0 }
+          title="No recordings found"
        >
          <>
            <div className="flex items-center mb-3">
@ -119,4 +120,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(ResourceLoadingTime)
+})(ResourceLoadingTime)
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
@ -34,6 +34,7 @@ function ResponseTime(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
        >
          <>
@ -88,4 +89,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(ResponseTime)
+})(ResponseTime)
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
@ -49,6 +49,7 @@ function ResponseTimeDistribution(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
        >
@ -125,4 +126,4 @@ function ResponseTimeDistribution(props: Props) {
    );
 }

-export default ResponseTimeDistribution;
+export default ResponseTimeDistribution;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
@ -15,6 +15,7 @@ function SessionsAffectedByJSErrors(props: Props) {
    const { data, metric } = props;
    return (
        <NoContent
+          title="No recordings found"
          size="small"
          show={ metric.data.chart.length === 0 }
          style={ { height: '240px' } }
@ -44,4 +45,4 @@ function SessionsAffectedByJSErrors(props: Props) {
    );
 }

-export default SessionsAffectedByJSErrors;
+export default SessionsAffectedByJSErrors;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
@ -18,6 +18,7 @@ function SessionsImpactedBySlowRequests(props: Props) {

    return (
        <NoContent
+        title="No recordings found"
          size="small"
          show={ metric.data.chart.length === 0 }
        >
@ -52,4 +53,4 @@ function SessionsImpactedBySlowRequests(props: Props) {
    );
 }

-export default SessionsImpactedBySlowRequests;
+export default SessionsImpactedBySlowRequests;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
@ -19,6 +19,7 @@ function SessionsPerBrowser(props: Props) {
    return (
        <NoContent
          size="small"
+          title="No recordings found"
          show={ metric.data.chart.length === 0 }
        >
          <div className="w-full" style={{ height: '240px' }}>
@ -38,4 +39,4 @@ function SessionsPerBrowser(props: Props) {
    );
 }

-export default SessionsPerBrowser;
+export default SessionsPerBrowser;
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
@ -16,6 +16,7 @@ function SlowestDomains(props: Props) {
          size="small"
          show={ metric.data.chart.length === 0 }
          style={{ maxHeight: '240px' }}
+          title="No recordings found"
        >
          <div className="w-full" style={{ height: '240px' }}>
            {metric.data.chart.map((item, i) => 
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
@ -63,7 +63,7 @@ function SpeedIndexByLocation(props: Props) {
    };

    return (
-        <NoContent size="small" show={false} style={{ height: '240px' }}>
+        <NoContent size="small" show={false} style={{ height: '240px' }} title="No recordings found">
            <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>
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
@ -35,6 +35,7 @@ function TimeToRender(props: Props) {
        <NoContent
          size="small"
          show={ metric.data.chart.length === 0 }
+          title="No recordings found"
        >
          <>
            <div className="flex items-center mb-3">
@ -88,4 +89,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(TimeToRender)
+})(TimeToRender)
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
+++ b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
@ -28,6 +28,7 @@ export default class ResourceLoadedVsResponseEnd extends React.PureComponent {
        <NoContent
          size="small"
          show={ data.chart.length === 0 }
+          title="No recordings found"
        >
          <ResponsiveContainer height={ 247 } width="100%">
            <ComposedChart
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js
+++ b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js
@ -29,6 +29,7 @@ export default class ResourceLoadedVsVisuallyComplete extends React.PureComponen
      <Loader loading={ loading } size="small">
        <NoContent
          size="small"
+          title="No recordings found"
          show={ data.size === 0 }
        >
          <ResponsiveContainer height={ 240 } width="100%">
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js
+++ b/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js
@ -66,6 +66,7 @@ export default class ResourceLoadingTime extends React.PureComponent {
      <NoContent
        size="small"
        show={ data.chart.length === 0 }
+        title="No recordings found"
      >
        <React.Fragment>
          <div className="flex items-center mb-3">
@ -96,6 +97,7 @@ export default class ResourceLoadingTime extends React.PureComponent {
            <NoContent
              size="small"
              show={ data.chart.size === 0 }
+              title="No recordings found"
            >
              <ResponsiveContainer height={ 200 } width="100%">
                <AreaChart
--- a/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js
+++ b/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js
@ -60,6 +60,7 @@ export default class ResponseTime extends React.PureComponent {
          <NoContent
            size="small"
            show={ data.chart.size === 0 }
+            title="No recordings found"
          >
            <ResponsiveContainer height={ 207 } width="100%">
              <AreaChart
--- a/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js
+++ b/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js
@ -60,6 +60,7 @@ export default class ResponseTimeDistribution extends React.PureComponent {
        <NoContent
          size="small"
          show={ data.chart.length === 0 }
+          title="No recordings found"
        >
          <div className="flex items-center justify-end mb-3">
            <AvgLabel text="Avg" unit="ms" className="ml-3" count={data.avg} />
--- a/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js
+++ b/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js
@ -36,6 +36,7 @@ export default class SessionsAffectedByJSErrors extends React.PureComponent {
          <NoContent
            size="small"
            show={ data.chart.length === 0 }
+            title="No recordings found"
          >
            <ResponsiveContainer height={ 207 } width="100%">
              <ComposedChart
--- a/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js
+++ b/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js
@ -28,6 +28,7 @@ export default class SessionsImpactedBySlowRequests extends React.PureComponent
        <NoContent
          size="small"
          show={ data.chart.length === 0 }
+          title="No recordings found"
        >
          <ResponsiveContainer height={ 240 } width="100%">
            <AreaChart
--- a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js
+++ b/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js
@ -22,6 +22,7 @@ export default class SessionsPerBrowser extends React.PureComponent {
        <NoContent
          size="small"
          show={ data.chart.size === 0 }
+          title="No recordings found"
        >          
          <div className="w-full pt-3" style={{ height: '240px' }}>
            {data.chart.map((item, i) => 
@ -40,4 +41,4 @@ export default class SessionsPerBrowser extends React.PureComponent {
      </Loader>
    );
  }
-}
+}
--- a/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js
@ -16,6 +16,7 @@ export default class ResponseTime extends React.PureComponent {
        <NoContent
          size="small"
          show={ data.partition && data.partition.size === 0 }
+          title="No recordings found"
        >          
          <div className="w-full pt-3" style={{ height: '240px' }}>
            {data.partition && data.partition.map((item, i) => 
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
@ -41,6 +41,7 @@ export default class SlowestImages extends React.PureComponent {
        <NoContent
          size="small"
          show={ images.size === 0 }
+          title="No recordings found"
        >
          <Table
            cols={ cols }
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
@ -87,6 +87,7 @@ export default class SlowestResources extends React.PureComponent {
          <NoContent
            size="small"
            show={ data.size === 0 }
+            title="No recordings found"
          >
            <Table cols={ cols } rows={ data } isTemplate={isTemplate} rowClass="group" compare={compare} />
          </NoContent>
--- a/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js
+++ b/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js
@ -59,6 +59,7 @@ export default class TimeToRender extends React.PureComponent {
          <NoContent
            size="small"
            show={ data.chart.length === 0 }
+            title="No recordings found"
          >
            <ResponsiveContainer height={ 200 } width="100%">
              <AreaChart
--- a/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js
+++ b/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js
@ -24,6 +24,7 @@ export default class TopDomains extends React.PureComponent {
        <NoContent
          size="small"
          show={ data.chart.length === 0 }
+          title="No recordings found"
        >
          <ResponsiveContainer height={ 240 } width="100%">
            <LineChart
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@ -19,8 +19,6 @@ import { Tooltip } from 'react-tippy';
 import Breadcrumb from 'Shared/Breadcrumb';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
-// @ts-ignore
-import stl from './DashboardView.module.css';

 interface IProps {
    siteId: string;
@ -31,7 +29,6 @@ interface IProps {
 type Props = IProps & RouteComponentProps;

 function DashboardView(props: Props) {
-    const [isTooltipShown, setTooltip] = React.useState(false);
    const { siteId, dashboardId } = props;
    const { dashboardStore } = useStore();
    const { showModal } = useModal();
@ -116,7 +113,7 @@ function DashboardView(props: Props) {
                        { label: (dashboard && dashboard.name) || '' },
                    ]}
                />
-                <div className="flex items-center mb-4 justify-between">
+                <div className="flex items-center mb-2 justify-between">
                    <div className="flex items-center" style={{ flex: 3 }}>
                        <PageTitle
                            title={
@ -128,21 +125,22 @@ function DashboardView(props: Props) {
                            onDoubleClick={() => onEdit(true)}
                            className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
                            actionButton={
-                                <OutsideClickDetectingDiv onClickOutside={() => setTooltip(false)}>
-                                    {/* @ts-ignore */}
+                                    /* @ts-ignore */
                                    <Tooltip 
                                        interactive
                                        useContext
                                        // @ts-ignore
                                        theme="nopadding"
-                                        open={isTooltipShown}
+                                        animation="none"
+                                        hideDelay={200}
+                                        duration={0}
+                                        distance={20}
                                        html={<div style={{ padding: 0 }}><AddMetricContainer isPopup siteId={siteId} /></div>}
                                    >
-                                        <Button variant="primary" onClick={() => setTooltip(true)}>
+                                        <Button variant="primary">
                                            Add Metric
                                        </Button>
                                    </Tooltip>
-                                </OutsideClickDetectingDiv>
                            }
                        />
                    </div>
@ -166,7 +164,7 @@ function DashboardView(props: Props) {
                        </div>
                    </div>
                </div>
-                <div>
+                <div className="pb-4">
                    {/* @ts-ignore */}
                    <Tooltip delay={100} arrow title="Double click to rename" className='w-fit !block'>
                        <h2
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx
@ -57,7 +57,7 @@ function AddMetric({ metrics, history, siteId, title, description }: IProps) {
                    
                </div>

-                <div className="grid h-full grid-cols-4 gap-4 px-8 items-start py-1" style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', gridTemplateRows: 'max-content' }}>
+                <div className="grid h-full grid-cols-4 gap-4 px-8 items-start py-1" style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', gridAutoRows: 'max-content' }}>
                    {metrics ? metrics.map((metric: any) => (
                        <WidgetWrapper
                            key={metric.metricId}
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx
@ -88,7 +88,7 @@ function AddMetricContainer({ siteId, isPopup }: any) {
    return (
        <div style={{ borderColor: 'rgb(238, 238, 238)', height: isPopup ? undefined : 300 }} className={classes}>
            <AddMetricButton
-                title="+ Add custom Metric"
+                title="+ Add Custom Metric"
                description="Metrics that are manually created by you or your team"
                iconName="bar-pencil"
                onClick={onAddCustomMetrics}
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddPredefinedMetric.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddPredefinedMetric.tsx
@ -84,17 +84,17 @@ function AddPredefinedMetric({ categories, history, siteId, title, description }
                        <div className="text-disabled-text">{description}</div>
                    </div>

-                    <div className="flex items-center">
-                        Don’t find the one you need?
-                        <Button variant="text-primary" className="font-medium ml-2" onClick={onCreateNew}>
-                            + Create custom metric
-                        </Button>
-                    </div>
+                    <Button variant="text-primary" className="font-medium ml-2" onClick={onCreateNew}>
+                        + Create Custom Metric
+                    </Button>
                </div>

                <div className="flex px-8 h-full" style={{ maxHeight: 'calc(100vh - 160px)' }}>
                    <div style={{ flex: 3 }}>
-                        <div className="grid grid-cols-1 gap-4 py-1 pr-2" style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto' }}>
+                        <div
+                            className="grid grid-cols-1 gap-4 py-1 pr-2"
+                            style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', gridAutoRows: 'max-content' }}
+                        >
                            {activeCategory &&
                                categories.map((category) => (
                                    <WidgetCategoryItem
@ -110,7 +110,7 @@ function AddPredefinedMetric({ categories, history, siteId, title, description }

                    <div
                        className="grid h-full grid-cols-4 gap-4 p-1 items-start"
-                        style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', flex: 9 }}
+                        style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', flex: 9, gridAutoRows: 'max-content' }}
                    >
                        {activeCategory &&
                            activeCategory.widgets.map((metric: any) => (
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@ -179,7 +179,7 @@ function WidgetChart(props: Props) {
    }
    return (
        <Loader loading={loading} style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
-            {renderChart()}
+            <div style={{ minHeight: isOverviewWidget ? 100 : 240 }}>{renderChart()}</div>
        </Loader>
    );
 }
--- a/frontend/app/components/Errors/Error/SideSection.js
+++ b/frontend/app/components/Errors/Error/SideSection.js
@ -87,7 +87,7 @@ export default class SideSection extends React.PureComponent {
 					<h3 className="text-xl mb-2">Overview</h3>
 					<Trend
 						chart={ data.chart24 }
-						title="Last 24 hours"						
+						title="Past 24 hours"
 					/>
 					<div className="mb-6" />
 					<Trend
@ -121,5 +121,3 @@ export default class SideSection extends React.PureComponent {
 		);
 	}
 }
-
-
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@ -30,7 +30,7 @@ function FunnelWidget(props: Props) {
    }, []);

    return useObserver(() => (
-        <NoContent show={!stages || stages.length === 0}>
+        <NoContent show={!stages || stages.length === 0} title="No recordings found">
            <div className="w-full">
                { !isWidget && (
                    stages.map((filter: any, index: any) => (
--- a/frontend/app/components/Session/IOSPlayer/Crashes.js
+++ b/frontend/app/components/Session/IOSPlayer/Crashes.js
@ -31,6 +31,7 @@ function Crashes({ player }) {
 			<PanelLayout.Body>
 				<NoContent
 		      size="small"
+					title="No recordings found"
 		      show={ filtered.length === 0}
 		    >
 		      <Autoscroll>
@ -48,4 +49,4 @@ function Crashes({ player }) {
 	);
 }

-export default observer(Crashes);
+export default observer(Crashes);
--- a/frontend/app/components/Session/IOSPlayer/Logs.js
+++ b/frontend/app/components/Session/IOSPlayer/Logs.js
@ -45,6 +45,7 @@ function Logs({ player }) {
 	      <NoContent
 	        size="small"
 	        show={ filtered.length === 0 }
+					title="No recordings found"
 	      >
 					<Autoscroll>
 						{	filtered.map(log => 
@ -57,4 +58,4 @@ function Logs({ player }) {
 	);
 }

-export default observer(Logs);
+export default observer(Logs);
--- a/frontend/app/components/Session_/Exceptions/Exceptions.js
+++ b/frontend/app/components/Session_/Exceptions/Exceptions.js
@ -97,6 +97,7 @@ export default class Exceptions extends React.PureComponent {
            <NoContent
              size="small"
              show={ filtered.length === 0}
+              title="No recordings found"
            >
              <Autoscroll>
                { filtered.map(e => (
@ -115,4 +116,4 @@ export default class Exceptions extends React.PureComponent {
      </>
    );
  }
-}
+}
--- a/frontend/app/components/Session_/GraphQL/GraphQL.js
+++ b/frontend/app/components/Session_/GraphQL/GraphQL.js
@ -100,6 +100,7 @@ export default class GraphQL extends React.PureComponent {
          <BottomBlock.Content>
            <NoContent
              size="small"
+              title="No recordings found"
              show={ filteredList.length === 0}
            >
              <TimeTable
--- a/frontend/app/components/Session_/LongTasks/LongTasks.js
+++ b/frontend/app/components/Session_/LongTasks/LongTasks.js
@ -75,6 +75,7 @@ export default class GraphQL extends React.PureComponent {
        <BottomBlock.Content>
          <NoContent
            size="small"
+            title="No recordings found"
            show={ filtered.length === 0}
          >
            <TimeTable
--- a/frontend/app/components/Session_/TimeTable/TimeTable.tsx
+++ b/frontend/app/components/Session_/TimeTable/TimeTable.tsx
@ -258,7 +258,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
                    </div>
                </div>

-                <NoContent size="small" show={rows.length === 0}>
+                <NoContent size="small" show={rows.length === 0} title="No recordings found">
                    <div className="relative">
                        <div className={stl.timePart} style={{ left: `${columnsSumWidth}px` }}>
                            {timeColumns.map((_, index) => (
--- a/frontend/app/dateRange.js
+++ b/frontend/app/dateRange.js
@ -9,7 +9,7 @@ export const CUSTOM_RANGE = "CUSTOM_RANGE";
 const DATE_RANGE_LABELS = {
    // LAST_30_MINUTES: '30 Minutes',
    // TODAY: 'Today',
-    LAST_24_HOURS: "Last 24 Hours",
+    LAST_24_HOURS: "Past 24 Hours",
    // YESTERDAY: 'Yesterday',
    LAST_7_DAYS: "Past 7 Days",
    LAST_30_DAYS: "Past 30 Days",
--- a/frontend/app/types/app/period.js
+++ b/frontend/app/types/app/period.js
@ -18,7 +18,7 @@ const RANGE_LABELS = {
    [LAST_30_MINUTES]: "Last 30 Minutes",
    [TODAY]: "Today",
    [YESTERDAY]: "Yesterday",
-    [LAST_24_HOURS]: "Last 24 Hours",
+    [LAST_24_HOURS]: "Past 24 Hours",
    [LAST_7_DAYS]: "Last 7 Days",
    [LAST_30_DAYS]: "Last 30 Days",
    [THIS_MONTH]: "This Month",