diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
index 2dca730667..47c9459678 100644
--- a/public/components/custom_panels/helpers/utils.tsx
+++ b/public/components/custom_panels/helpers/utils.tsx
@@ -143,8 +143,12 @@ const pplServiceRequestor = async (
       setVisualizationData(res);
     })
     .catch((error: Error) => {
-      setIsError(error.stack || 'Issue in fetching visualization');
-      console.error(error);
+      const errorMessage = JSON.parse(error.body.message);
+      setIsError(
+        errorMessage.error.reason + '. ' + errorMessage.error.details ||
+          'Issue in fetching visualization'
+      );
+      console.error(error.body);
     })
     .finally(() => {
       setIsLoading(false);
@@ -435,7 +439,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
 
   const mixedUserConfigs = {
     availabilityConfig: {
-      ...(metaData.user_configs?.availabilityConfig || {})
+      ...(metaData.user_configs?.availabilityConfig || {}),
     },
     dataConfig: {
       ...finalDataConfig,
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
index 7c1f2dc9ba..290765b801 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
@@ -24,6 +24,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiToolTip,
   ShortDate,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -180,33 +181,39 @@ export const VisaulizationFlyout = ({
   };
 
   const timeRange = (
-    <EuiFormRow label="Panel Time Range" fullWidth>
-      <EuiDatePickerRange
-        className="date-picker-preview"
-        fullWidth
-        readOnly
-        startDateControl={
-          <EuiDatePicker
-            selected={startDate}
-            startDate={startDate}
-            endDate={endDate}
-            isInvalid={startDate > endDate}
-            aria-label="Start date"
-            dateFormat={uiSettingsService.get('dateFormat')}
-          />
-        }
-        endDateControl={
-          <EuiDatePicker
-            selected={endDate}
-            startDate={startDate}
-            endDate={endDate}
-            isInvalid={startDate > endDate}
-            aria-label="End date"
-            dateFormat={uiSettingsService.get('dateFormat')}
-          />
-        }
-      />
-    </EuiFormRow>
+    <EuiToolTip
+      position="bottom"
+      content="Picker is disabled. Please edit date/time from panel"
+      display="block"
+    >
+      <EuiFormRow label="Panel Time Range" fullWidth>
+        <EuiDatePickerRange
+          className="date-picker-preview"
+          fullWidth
+          readOnly
+          startDateControl={
+            <EuiDatePicker
+              selected={startDate}
+              startDate={startDate}
+              endDate={endDate}
+              isInvalid={startDate > endDate}
+              aria-label="Start date"
+              dateFormat={uiSettingsService.get('dateFormat')}
+            />
+          }
+          endDateControl={
+            <EuiDatePicker
+              selected={endDate}
+              startDate={startDate}
+              endDate={endDate}
+              isInvalid={startDate > endDate}
+              aria-label="End date"
+              dateFormat={uiSettingsService.get('dateFormat')}
+            />
+          }
+        />
+      </EuiFormRow>
+    </EuiToolTip>
   );
 
   const flyoutHeader = (
diff --git a/public/components/metrics/view/__tests__/metrics_grid.test.tsx b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
index 2cf11a5014..cf3a3f57b9 100644
--- a/public/components/metrics/view/__tests__/metrics_grid.test.tsx
+++ b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
@@ -11,7 +11,11 @@ import { MetricsGrid } from '../metrics_grid';
 import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
 import { coreStartMock } from '../../../../../test/__mocks__/coreMocks';
 import PPLService from '../../../../services/requests/ppl';
-import { sampleMetric, sampleMetricsVisualizations } from '../../../../../test/metrics_contants';
+import {
+  sampleMetric,
+  sampleMetricsVisualizations,
+  samplePPLResponse,
+} from '../../../../../test/metrics_contants';
 import { createStore } from '@reduxjs/toolkit';
 import rootReducer from '../../../../framework/redux/reducers';
 import { Provider } from 'react-redux';
@@ -23,6 +27,9 @@ describe('Metrics Grid Component', () => {
 
   it('renders Metrics Grid Component', async () => {
     httpClientMock.get = jest.fn(() => Promise.resolve((sampleMetric as unknown) as HttpResponse));
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve((samplePPLResponse as unknown) as HttpResponse)
+    );
 
     const http = httpClientMock;
     const core = coreStartMock;