diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
index 0765d7940..a453222e5 100644
--- 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" title="No recordings found" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
+        <NoContent size="small" title="No data available" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
             <ResponsiveContainer height={ 220 } width="100%">
                 <PieChart>
                     <Pie
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
index 30dff93db..62e8dc2e5 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@@ -1,18 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { Loader, NoContent, Icon, Popup } from 'UI';
 import { Styles } from '../../common';
 import { ResponsiveContainer } from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
 import stl from './CustomMetricWidget.module.css';
-import { getChartFormatter, getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
+import { getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
 import { init, edit, remove, setAlertMetricId, setActiveWidget, updateActiveState } from 'Duck/customMetrics';
-import APIClient from 'App/api_client';
 import { setShowAlerts } from 'Duck/dashboard';
 import CustomMetriLineChart from '../CustomMetriLineChart';
 import CustomMetricPieChart from '../CustomMetricPieChart';
 import CustomMetricPercentage from '../CustomMetricPercentage';
 import CustomMetricTable from '../CustomMetricTable';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 const customParams = rangeName => {
   const params = { density: 70 }
@@ -104,7 +103,7 @@ function CustomMetricWidget(props: Props) {
         <Loader loading={ loading } size="small">
           <NoContent
             size="small"
-            title="No recordings found"
+            title={NO_METRIC_DATA}
             show={ data.length === 0 }
           >
             <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
index cc2e2e6ad..f29ef22ac 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
@@ -19,7 +19,7 @@ function BreakdownOfLoadedResources(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title="No data available"
           show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
index b397f4d30..0ddfd0d1d 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
@@ -19,7 +19,7 @@ function CPULoad(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title="No data available"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
index d85512786..47c88c0aa 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
@@ -6,6 +6,7 @@ import ImageInfo from './ImageInfo';
 import MethodType from './MethodType';
 import cn from 'classnames';
 import stl from './callWithErrors.module.css';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 const cols = [
   {
@@ -61,7 +62,7 @@ function CallWithErrors(props: Props) {
 
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
           style={{ height: '240px'}}
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
index ce62bedff..cd1bc6716 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
@@ -6,6 +6,7 @@ import {
     LineChart, Line, Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -16,7 +17,7 @@ function CallsErrors4xx(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
index 9792e9fce..09c86b60c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
@@ -16,7 +16,7 @@ function CallsErrors5xx(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title="No data available"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
index ee222ea1c..30463860c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
@@ -7,6 +7,7 @@ import {
     LineChart, Line, Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -18,7 +19,7 @@ function Crashes(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
index 07265cb93..0fdf5a97c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
@@ -4,12 +4,12 @@ import { Styles, AvgLabel } from '../../common';
 import { withRequest } from 'HOCs'
 import { 
     AreaChart, Area,
-    BarChart, Bar, CartesianGrid, Tooltip,
-    LineChart, Line, Legend, ResponsiveContainer, 
+    CartesianGrid, Tooltip,
+    ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
 import { toUnderscore } from 'App/utils';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 const WIDGET_KEY = 'pagesDomBuildtime';
 
@@ -21,30 +21,17 @@ interface Props {
     metric?: any
 }
 function DomBuildingTime(props: Props) {
-    const { data, optionsLoading, metric } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
 
-    const onSelect = (params) => {
-      // const _params = { density: 70 }
-      // TODO reload the data with new params;
-      // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
-    }
-
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
         >
           <>
             <div className="flex items-center mb-3">
-              {/* <WidgetAutoComplete
-                loading={optionsLoading}
-                fetchOptions={props.fetchOptions}
-                options={props.options}
-                onSelect={onSelect}
-                placeholder="Search for Page"
-              /> */}
               <AvgLabel className="ml-auto" text="Avg" count={Math.round(metric.data.value)} unit="ms" />
             </div>
             <ResponsiveContainer height={ 207 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
index c3f683fc7..e405ba422 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
@@ -7,6 +7,7 @@ import {
     Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -18,7 +19,7 @@ function ErrorsByOrigin(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
index f3d4a6f0b..ec952487c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
@@ -6,6 +6,7 @@ import {
     LineChart, Line, Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -16,7 +17,7 @@ function ErrorsByType(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
index d58effb2b..13643c769 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
@@ -3,6 +3,7 @@ import { NoContent } from 'UI';
 import { Styles } from '../../common';
 import { numberWithCommas } from 'App/utils';
 import Bar from 'App/components/Dashboard/Widgets/ErrorsPerDomain/Bar';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -17,7 +18,7 @@ function ErrorsPerDomain(props: Props) {
           size="small"
           show={ metric.data.chart.length === 0 }
           style={{ height: '240px'}}
-          title="No recordings found"
+          title={NO_METRIC_DATA}
         >
           <div className="w-full" style={{ height: '240px' }}>
             {metric.data.chart.map((item, i) => 
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
index 818ff2573..5a5efb961 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
@@ -7,6 +7,7 @@ import {
     LineChart, Line, Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -19,7 +20,7 @@ function FPS(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
         >
           <>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
index e20cac3d4..6fb22c784 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
@@ -7,6 +7,7 @@ import {
     LineChart, Line, Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -22,7 +23,7 @@ function MemoryConsumption(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
-          title="No recordings found"
+          title={NO_METRIC_DATA}
         >
           <>
             <div className="flex items-center justify-end mb-3">
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
index ae2f1d27e..aef9bbec0 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
@@ -50,9 +50,10 @@ function MissingResources(props: Props) {
     
     return (
         <NoContent
-          title="No resources missing."
+          title="No resources missing"
           size="small"
           show={ metric.data.chart.length === 0 }
+          style={{ minHeight: 220 }}
         >
           <div style={{ height: '240px'}}>
             <Table
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
index 74ae4c997..83fe4a006 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
@@ -5,6 +5,7 @@ import {
   ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer, 
   XAxis, YAxis, Tooltip
 } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -17,7 +18,7 @@ function ResourceLoadedVsResponseEnd(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
-          title="No recordings found"
+          title={NO_METRIC_DATA}
         >
           <ResponsiveContainer height={ 246 } width="100%">
             <ComposedChart
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
index a786b7da0..63af7adac 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
@@ -5,20 +5,20 @@ import {
   ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer, 
   XAxis, YAxis, Tooltip
 } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
     metric?: any
 }
 function ResourceLoadedVsVisuallyComplete(props: Props) {
-    const { data, metric } = props;
-    const gradientDef = Styles.gradientDef();
+    const { metric } = props;
 
     return (
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
-          title="No recordings found"
+          title={NO_METRIC_DATA}
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <ComposedChart
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
index 68db8eff5..d60ee3d60 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { NoContent, DropdownPlain } from 'UI';
+import { NoContent } from 'UI';
 import { Styles, AvgLabel } from '../../common';
 import { withRequest } from 'HOCs'
 import { 
     AreaChart, Area,
-    BarChart, Bar, CartesianGrid, Tooltip,
-    LineChart, Line, Legend, ResponsiveContainer, 
+   CartesianGrid, Tooltip,
+     ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
 import { toUnderscore } from 'App/utils';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 const WIDGET_KEY = 'resourcesLoadingTime';
 export const RESOURCE_OPTIONS = [
@@ -30,53 +30,17 @@ interface Props {
     metric?: any
 }
 function ResourceLoadingTime(props: Props) {
-    const { data, optionsLoading, metric } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
-    const [autoCompleteSelected, setSutoCompleteSelected] = React.useState('');
-    const [type, setType] = React.useState('');
-
-    const onSelect = (params) => {
-      // const _params = { density: 70 }
-      setSutoCompleteSelected(params.value);
-      // TODO reload the data with new params;
-      // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
-    }
-
-    const writeOption = (e, { name, value }) => {
-      // this.setState({ [name]: value })
-      setType(value);
-      const _params = { density: 70 } // TODO reload the data with new params;
-      // this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { ..._params, [ name ]: value === 'all' ? null : value  })
-    }
 
     return (
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
-          title="No recordings found"
+          title={NO_METRIC_DATA}
         >
           <>
             <div className="flex items-center mb-3">
-              {/* <WidgetAutoComplete
-                loading={optionsLoading}
-                fetchOptions={props.fetchOptions}
-                options={props.options}
-                onSelect={onSelect}
-                placeholder="Search for Page"
-              />
-              <DropdownPlain
-                disabled={!!autoCompleteSelected}
-                name="type"
-                label="Resource"
-                options={ RESOURCE_OPTIONS }
-                onChange={ writeOption }
-                defaultValue={'all'}
-                wrapperStyle={{
-                  position: 'absolute',
-                  top: '12px',
-                  left: '170px',
-                }}
-              /> */}
               <AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
             </div>
             <ResponsiveContainer height={ 207 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
index f9201e262..fabb85787 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
@@ -4,12 +4,11 @@ import { Styles, AvgLabel } from '../../common';
 import { withRequest } from 'HOCs'
 import { 
     AreaChart, Area,
-    BarChart, Bar, CartesianGrid, Tooltip,
-    LineChart, Line, Legend, ResponsiveContainer, 
+    CartesianGrid, Tooltip,
+    ResponsiveContainer, 
     XAxis, YAxis
-  } from 'recharts';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
-import { toUnderscore } from 'App/utils';
+  } from 'recharts';import { toUnderscore } from 'App/utils';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 const WIDGET_KEY = 'pagesResponseTime';
 
@@ -21,20 +20,13 @@ interface Props {
     metric?: any
 }
 function ResponseTime(props: Props) {
-    const { data, optionsLoading, metric } = props;
+    const { data, metric } = props;
     const gradientDef = Styles.gradientDef();
 
-
-    const onSelect = (params) => {
-      // const _params = { density: 70 }
-      // TODO reload the data with new params;
-      // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
-    }
-
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
         >
           <>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
index 8021b9f7d..548a229ab 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
@@ -5,6 +5,7 @@ import {
   ComposedChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, 
   XAxis, YAxis, ReferenceLine, Tooltip, Legend
 } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 
 const PercentileLine = props => {
@@ -49,7 +50,7 @@ function ResponseTimeDistribution(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
index 495ac5126..e798d5b4c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
@@ -6,6 +6,7 @@ import {
     LineChart, Line, Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+  import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -15,7 +16,7 @@ function SessionsAffectedByJSErrors(props: Props) {
     const { data, metric } = props;
     return (
         <NoContent
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           size="small"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
index 695bcb6c8..def859f10 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
@@ -7,6 +7,7 @@ import {
     LineChart, Line, Legend, ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -18,7 +19,7 @@ function SessionsImpactedBySlowRequests(props: Props) {
 
     return (
         <NoContent
-        title="No recordings found"
+        title={NO_METRIC_DATA}
           size="small"
           show={ metric.data.chart.length === 0 }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
index 48db4f67c..ca6c836e3 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { NoContent } from 'UI';
 import { Styles } from '../../common';
 import Bar from './Bar';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -19,8 +20,9 @@ function SessionsPerBrowser(props: Props) {
     return (
         <NoContent
           size="small"
-          title="No recordings found"
+          title={NO_METRIC_DATA}
           show={ metric.data.chart.length === 0 }
+          style={{ minHeight: 220 }}
         >
           <div className="w-full" style={{ height: '240px' }}>
             {metric.data.chart.map((item, i) => 
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
index 1291305ed..fa4b703f2 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
@@ -3,6 +3,7 @@ import { NoContent } from 'UI';
 import { Styles } from '../../common';
 import { numberWithCommas } from 'App/utils';
 import Bar from 'App/components/Dashboard/Widgets/SlowestDomains/Bar';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     data: any
@@ -15,8 +16,8 @@ function SlowestDomains(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
-          style={{ maxHeight: '240px' }}
-          title="No recordings found"
+          style={{ minHeight: 220 }}
+          title={NO_METRIC_DATA}
         >
           <div className="w-full" style={{ height: '240px' }}>
             {metric.data.chart.map((item, i) => 
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
index 9cdf60514..97aebc599 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
@@ -8,6 +8,7 @@ import Chart from './Chart';
 import ImageInfo from './ImageInfo';
 import ResourceType from './ResourceType';
 import CopyPath from './CopyPath';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 export const RESOURCE_OPTIONS = [
   { text: 'All', value: 'ALL', },
@@ -68,9 +69,10 @@ function SlowestResources(props: Props) {
     
     return (
         <NoContent
-          title="No resources missing."
+          title={NO_METRIC_DATA}
           size="small"
           show={ metric.data.chart.length === 0 }
+          style={{ minHeight: 220 }}
         >
           <div style={{ height: '240px', marginBottom:'10px'}}>
             <Table
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
index 6661623c2..82603eee5 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
@@ -8,6 +8,7 @@ import WorldMap from '@svg-maps/world';
 import { SVGMap } from 'react-svg-map';
 import stl from './SpeedIndexByLocation.module.css';
 import cn from 'classnames';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 interface Props {
     metric?: any;
@@ -63,7 +64,7 @@ function SpeedIndexByLocation(props: Props) {
     };
 
     return (
-        <NoContent size="small" show={false} style={{ height: '240px' }} title="No recordings found">
+        <NoContent size="small" show={false} style={{ height: '240px' }} title={NO_METRIC_DATA}>
             <div className="absolute right-0 mr-4 top=0 w-full flex justify-end">
                 <AvgLabel text="Avg" count={Math.round(metric.data.value)} unit="ms" />
             </div>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
index 9d98d5428..20cdc1f51 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
@@ -4,12 +4,12 @@ import { Styles, AvgLabel } from '../../common';
 import { withRequest } from 'HOCs'
 import { 
     AreaChart, Area,
-    BarChart, Bar, CartesianGrid, Tooltip,
-    LineChart, Line, Legend, ResponsiveContainer, 
+    CartesianGrid, Tooltip,
+    ResponsiveContainer, 
     XAxis, YAxis
   } from 'recharts';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
 import { toUnderscore } from 'App/utils';
+import { NO_METRIC_DATA } from 'App/constants/messages'
 
 const WIDGET_KEY = 'timeToRender';
 
@@ -35,7 +35,7 @@ function TimeToRender(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
-          title="No recordings found"
+          title={NO_METRIC_DATA}
         >
           <>
             <div className="flex items-center mb-3">
diff --git a/frontend/app/constants/messages.ts b/frontend/app/constants/messages.ts
new file mode 100644
index 000000000..32817b99c
--- /dev/null
+++ b/frontend/app/constants/messages.ts
@@ -0,0 +1 @@
+export const NO_METRIC_DATA = 'No data available'