From cab066f8ceae49459c05f61baf7bcaa8dc5de996 Mon Sep 17 00:00:00 2001
From: Marcus Andersson <marcus.andersson@grafana.com>
Date: Wed, 13 May 2020 07:26:03 +0200
Subject: [PATCH] TimePicker: some fixes and polish after testing feedback
 (#24585)

* make sure we render the delaynow value from dashboard to the time picker settings.

* Added the time zone in the tooltip.
---
 .../grafana-data/src/datetime/timezones.ts    | 15 +++++++++++-
 .../components/TimePicker/TimeRangePicker.tsx | 24 ++++++++++++-------
 .../DashboardSettings/TimePickerSettings.tsx  |  1 +
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-data/src/datetime/timezones.ts b/packages/grafana-data/src/datetime/timezones.ts
index c9f01072621..d763fb3a995 100644
--- a/packages/grafana-data/src/datetime/timezones.ts
+++ b/packages/grafana-data/src/datetime/timezones.ts
@@ -1,5 +1,18 @@
-// List taken from https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript
+import { TimeZone } from '../types';
+import { getTimeZone } from './common';
 
+export const timeZoneFormatUserFriendly = (timeZone: TimeZone | undefined) => {
+  switch (getTimeZone({ timeZone })) {
+    case 'browser':
+      return 'Local browser time';
+    case 'utc':
+      return 'UTC';
+    default:
+      return timeZone;
+  }
+};
+
+// List taken from https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript
 export const getTimeZoneGroups = () => {
   const europeZones = [
     'Europe/Amsterdam',
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
index 88b15f0e915..e3fc1e64ef0 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
@@ -13,7 +13,7 @@ import { stylesFactory } from '../../themes/stylesFactory';
 import { withTheme, useTheme } from '../../themes/ThemeContext';
 
 // Types
-import { isDateTime, rangeUtil, GrafanaTheme, dateTimeFormatWithAbbrevation } from '@grafana/data';
+import { isDateTime, rangeUtil, GrafanaTheme, dateTimeFormat, timeZoneFormatUserFriendly } from '@grafana/data';
 import { TimeRange, TimeOption, TimeZone, dateMath } from '@grafana/data';
 import { Themeable } from '../../types';
 
@@ -206,13 +206,21 @@ const ZoomOutTooltip = () => (
   </>
 );
 
-const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => (
-  <>
-    {dateTimeFormatWithAbbrevation(timeRange.from, { timeZone })}
-    <div className="text-center">to</div>
-    {dateTimeFormatWithAbbrevation(timeRange.to, { timeZone })}
-  </>
-);
+const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {
+  const theme = useTheme();
+  const styles = getLabelStyles(theme);
+
+  return (
+    <>
+      {dateTimeFormat(timeRange.from, { timeZone })}
+      <div className="text-center">to</div>
+      {dateTimeFormat(timeRange.to, { timeZone })}
+      <div className="text-center">
+        <span className={styles.utc}>{timeZoneFormatUserFriendly(timeZone)}</span>
+      </div>
+    </>
+  );
+};
 
 const TimePickerButtonLabel = memo<Props>(({ hideText, value, timeZone }) => {
   const theme = useTheme();
diff --git a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
index 968eace84f1..34fee56a7e8 100644
--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
@@ -133,6 +133,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
                 invalid={!this.state.isNowDelayValid}
                 placeholder="0m"
                 onChange={this.onNowDelayChange}
+                defaultValue={dashboard.timepicker.nowDelay}
               />
             </Tooltip>
           </div>