You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@flink.apache.org by "featzhang (via GitHub)" <gi...@apache.org> on 2026/02/07 17:17:31 UTC
[PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
featzhang opened a new pull request, #27552:
URL: https://github.com/apache/flink/pull/27552
## Overview
This PR implements timezone-aware timestamp display and configurable timezone selection for Flink Web UI, addressing JIRA issue FLINK-39042.
## Changes Made
### 1. Core Services and Utilities
#### New Files Created:
- **`timezone.service.ts`**: Core timezone configuration service
- Manages timezone state (UTC, Local, Custom)
- Provides timezone formatting functionality
- Persists timezone preference in localStorage
- Formats timestamps with explicit timezone labels (e.g., "2026-02-05 09:58:50 (UTC+8)")
### 2. UI Components
#### New Components:
- **`timezone-selector` component**: Reusable timezone picker component
- Dropdown with predefined options (UTC, Browser Local, UTC+8, UTC-5, UTC-8, Custom)
- Custom offset input for fine-grained control
- Consistent UI across all pages
### 3. Pipes (Formatters)
#### Modified:
- **`HumanizeWatermarkToDatetimePipe`**: Updated to use `TimezoneService`
- Changed from `pure: true` to `pure: false` to react to timezone changes
- Now displays timestamps with timezone information
#### New:
- **`FormatTimestampPipe`**: Generic timestamp formatter
- Used for Checkpoints and other timestamp displays
- Handles null/invalid values gracefully
- Uses `TimezoneService` for consistent formatting
### 4. Pages Updated
#### Watermarks Page
- **Files Modified:**
- `job-overview-drawer-watermarks.component.html`
- `job-overview-drawer-watermarks.component.ts`
- **Changes:**
- Added timezone selector at the top
- Updated tooltip text to reflect configurable timezone
- Timestamps now show with timezone label
#### Checkpoints Page
- **Files Modified:**
- `job-checkpoints.component.html`
- `job-checkpoints.component.ts`
- `job-checkpoints-detail.component.html`
- `job-checkpoints-detail.component.ts`
- `job-checkpoints-subtask.component.html`
- `job-checkpoints-subtask.component.ts`
- **Changes:**
- Added timezone selector at the top
- Replaced all `date: 'yyyy-MM-dd HH:mm:ss.SSS'` with `formatTimestamp` pipe
- Covers all checkpoint timestamps:
- Latest completed checkpoint completion time
- Failed checkpoint failure time
- Savepoint completion time
- Restore time
- Trigger timestamps in history table
- Acknowledgment timestamps
#### Profiler Pages
- **Files Modified:**
- `job-manager-profiler.component.html`
- `job-manager-profiler.component.ts`
- `task-manager-profiler.component.html`
- `task-manager-profiler.component.ts`
- **Changes:**
- Added timezone selector at the top
- Trigger and finished times automatically use updated pipe
### 5. Key Features Implemented
1. **Explicit Timezone Display**
- All timestamps now show timezone information
- Format: `YYYY-MM-DD HH:mm:ss (Timezone)`
- Example: `2026-02-05 09:58:50 (UTC+8)`
2. **Configurable Timezone Selection**
- Users can switch between:
- UTC
- Browser Local Time
- Predefined offsets (UTC+8, UTC-5, UTC-8)
- Custom offset (any timezone)
- Selection persists across page reloads (localStorage)
3. **Reactive Updates**
- All timestamps update immediately when timezone changes
- No page refresh required
- Consistent across all pages
4. **User Experience**
- Timezone selector prominently placed at the top of relevant pages
- Clear labels and tooltips
- Intuitive custom offset input
## Technical Implementation Details
### Timezone Service Architecture
```typescript
TimezoneService
├── getTimezoneConfig(): Observable<TimezoneConfig>
├── setTimezoneConfig(config: TimezoneConfig): void
├── formatTimestampWithTimezone(timestamp: number): string
└── Storage: localStorage ('flink-webui-timezone-config')
```
### Supported Timezone Types
1. **UTC**: Standard UTC time
2. **Local**: Browser's local timezone
3. **Custom**: User-defined offset in minutes
### Format Functions
- `formatUTC()`: Formats to UTC time
- `formatLocal()`: Formats to browser local time
- `formatCustom()`: Formats to custom offset
- `getLocalTimezoneLabel()`: Gets browser timezone label (e.g., "UTC+8")
- `getCustomTimezoneLabel()`: Converts offset to label
## Pages Not Modified
The following pages display timestamps but were not modified in this PR as they are less critical or may be addressed in future work:
- Exceptions page
- Job Status page
- Task Manager Status/List pages
- Log List pages
These can be easily updated in the future by:
1. Adding `<flink-timezone-selector>` component
2. Replacing date pipes with `formatTimestamp` pipe
## Testing Recommendations
1. **Functional Testing:**
- Verify timezone selector appears on all modified pages
- Test switching between different timezones
- Verify timestamps update immediately
- Verify timezone persistence across page reloads
2. **Edge Cases:**
- Test with invalid timestamps (null, NaN, LONG_MIN_VALUE)
- Test custom offset with decimal hours (e.g., UTC+5.5)
- Test extreme offsets (UTC-12 to UTC+14)
3. **Cross-Page Consistency:**
- Change timezone on Watermarks page
- Navigate to Checkpoints page
- Verify same timezone is selected and applied
## Future Enhancements
Potential improvements for future PRs:
1. Add timezone selector to remaining timestamp-displaying pages
2. Add more predefined timezone options
3. Add timezone name display (e.g., "PST", "JST")
4. Add date range filtering with timezone awareness
5. Add user preference for default timezone
## Notes
- All changes are backward compatible
- No changes to backend APIs
- No changes to Flink's watermark/checkpoint logic
- Pure UI enhancement focused on user experience
Flink-39042
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2792592910
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -62,7 +100,27 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
private readonly cdr: ChangeDetectorRef
) {}
+ private getBrowserTimezone(): string {
+ // Get browser's IANA timezone identifier
+ // This will properly handle DST changes
+ try {
+ const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+ // Check if the browser timezone exists in the options list
+ const exists = this.timezoneOptions.some(option => option.value === browserTimezone);
+
+ // If browser timezone exists in the list, use it; otherwise default to UTC
+ return exists ? browserTimezone : 'UTC';
+ } catch (error) {
+ console.error('[getBrowserTimezone] Error getting browser timezone:', error);
+ return 'UTC';
+ }
+ }
+
public ngOnInit(): void {
+ // Set default timezone to browser's timezone
Review Comment:
nit: expand comment , or UTC if cannot find appropriate browser timezone.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2788058437
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -54,38 +67,112 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
public virtualItemSize = 36;
public readonly narrowLogData = typeDefinition<WatermarkData>();
+ // Timezone related properties
+ public timezoneOptions = [
Review Comment:
Hi I am wondering about how daylight savings effects this. I assume the local time in daylight saving is what the users might expect to see.
also I think we should provide a reference in the comments as to where we got the below comments.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl merged PR #27552:
URL: https://github.com/apache/flink/pull/27552
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "flinkbot (via GitHub)" <gi...@apache.org>.
flinkbot commented on PR #27552:
URL: https://github.com/apache/flink/pull/27552#issuecomment-3864899768
<!--
Meta data
{
"version" : 1,
"metaDataEntries" : [ {
"hash" : "3747f5bd3ac1da1b84d003c92d4b81cca56904ab",
"status" : "UNKNOWN",
"url" : "TBD",
"triggerID" : "3747f5bd3ac1da1b84d003c92d4b81cca56904ab",
"triggerType" : "PUSH"
} ]
}-->
## CI report:
* 3747f5bd3ac1da1b84d003c92d4b81cca56904ab UNKNOWN
<details>
<summary>Bot commands</summary>
The @flinkbot bot supports the following commands:
- `@flinkbot run azure` re-run the last Azure build
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "ferenc-csaky (via GitHub)" <gi...@apache.org>.
ferenc-csaky commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2799018441
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -54,6 +67,31 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
public virtualItemSize = 36;
public readonly narrowLogData = typeDefinition<WatermarkData>();
+ // Timezone related properties
+ // Using IANA timezone names to properly handle Daylight Saving Time (DST)
+ // Reference: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+ public timezoneOptions = [
Review Comment:
Modern browsers support `Intl.supportedValuesOf('timeZone')` which will return a complete timezone list, so I'd rather use that. Or if the browser does not support that, I'd restrict this behavior to borwser local or UTC.
I don't think a curated list can be a good solution here, cause by what criteria we select that "few"? Including tech oriented regions would be obvious, sure, but that does not help on someone who would require another TZ.
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,68 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true,
+ pure: false
Review Comment:
Why `pure: false`? The template already passes `selectedTimezone` as an argument. A pure pipe will re-run when either `watermark.watermark` or `selectedTimezone` changes, so the impure pipe seems to be an unnecessary overhead.
##########
flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less:
##########
Review Comment:
This file has no relevant change, just a reorder. Let's leave it as it was then.
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -62,7 +100,28 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
private readonly cdr: ChangeDetectorRef
) {}
+ private getBrowserTimezone(): string {
Review Comment:
By default I'd keep browser local instead of UTC, no matter what. But based on my other comment, the browser timezone not being part of a curated list should not be a problem if we do not have that hardcoded list.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on PR #27552:
URL: https://github.com/apache/flink/pull/27552#issuecomment-4108660182
Hi @ferenc-csaky @davidradl , PTAL at this PR #27552 (FLINK-39042) which makes Flink WebUI watermark timestamps timezone-aware & configurable. Any comments or suggestions are greatly appreciated!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2791809003
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,64 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true
})
export class HumanizeWatermarkToDatetimePipe implements PipeTransform {
constructor(private readonly configService: ConfigService) {}
- public transform(value: number): number | string {
+ public transform(value: number, timezone: string = 'auto'): number | string {
+ console.log('[HumanizeWatermarkToDatetimePipe] Transform called with value:', value, 'timezone:', timezone);
+
if (value == null || isNaN(value) || value <= this.configService.LONG_MIN_VALUE) {
+ console.log('[HumanizeWatermarkToDatetimePipe] Invalid value, returning N/A');
return 'N/A';
} else {
- return new Date(value).toLocaleString();
+ let timezoneOffsetMinutes: number;
+
+ // Parse timezone format, e.g. UTC+8, UTC-5, UTC+5:30, etc.
+ const match = timezone.match(/UTC([+-])(\d+)(?::(\d+))?/);
+ if (match) {
+ const sign = match[1] === '+' ? 1 : -1;
+ const hours = parseInt(match[2]);
+ const minutes = match[3] ? parseInt(match[3]) : 0;
+ timezoneOffsetMinutes = sign * (hours * 60 + minutes);
+ console.log('[HumanizeWatermarkToDatetimePipe] Parsed timezone offset:', timezoneOffsetMinutes, 'minutes');
+ } else {
+ // Default to browser timezone if format is not recognized
+ const browserOffset = new Date().getTimezoneOffset();
+ timezoneOffsetMinutes = -browserOffset; // Convert to UTC offset format
+ console.log(
+ '[HumanizeWatermarkToDatetimePipe] Using browser timezone offset:',
+ timezoneOffsetMinutes,
+ 'minutes'
+ );
+ }
+
+ // Calculate the datetime in the target timezone
+ // value is timestamp in milliseconds (UTC)
+ const utcDate = new Date(value);
+ const targetDate = new Date(utcDate.getTime() + timezoneOffsetMinutes * 60 * 1000);
+
+ const year = targetDate.getUTCFullYear();
Review Comment:
<img width="1199" height="400" alt="image" src="https://github.com/user-attachments/assets/f3cc7666-bed1-434a-97ae-19abf1d93dcd" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on PR #27552:
URL: https://github.com/apache/flink/pull/27552#issuecomment-4109650285
@featzhang tested locally and it is working well.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2924877449
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,67 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true
})
export class HumanizeWatermarkToDatetimePipe implements PipeTransform {
constructor(private readonly configService: ConfigService) {}
- public transform(value: number): number | string {
+ public transform(value: number, timezone: string = 'UTC'): number | string {
if (value == null || isNaN(value) || value <= this.configService.LONG_MIN_VALUE) {
return 'N/A';
- } else {
- return new Date(value).toLocaleString();
+ }
+
+ try {
+ const date = new Date(value);
+
+ // Use Intl.DateTimeFormat for proper timezone handling including DST
+ // This native browser API automatically handles daylight saving time transitions
+ // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+ const dateFormatter = new Intl.DateTimeFormat('en-US', {
+ timeZone: timezone,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ hour12: false,
+ minute: '2-digit',
+ second: '2-digit'
+ });
+
+ // Get timezone abbreviation (e.g., PST, PDT, EST, EDT)
+ // The abbreviation automatically reflects DST status (e.g., PST vs PDT)
+ const timezoneFormatter = new Intl.DateTimeFormat('en-US', {
Review Comment:
I thought we were going to interrogate the browser for its timezone and use that if possible, and if we cannot then use UTF. It looks like we are hard coding en-US - this is not what I expected. Have I understood this correctly?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on PR #27552:
URL: https://github.com/apache/flink/pull/27552#issuecomment-4004144420
@flinkbot run azure
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2788127341
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,64 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true
})
export class HumanizeWatermarkToDatetimePipe implements PipeTransform {
constructor(private readonly configService: ConfigService) {}
- public transform(value: number): number | string {
+ public transform(value: number, timezone: string = 'auto'): number | string {
+ console.log('[HumanizeWatermarkToDatetimePipe] Transform called with value:', value, 'timezone:', timezone);
+
if (value == null || isNaN(value) || value <= this.configService.LONG_MIN_VALUE) {
+ console.log('[HumanizeWatermarkToDatetimePipe] Invalid value, returning N/A');
return 'N/A';
} else {
- return new Date(value).toLocaleString();
+ let timezoneOffsetMinutes: number;
+
+ // Parse timezone format, e.g. UTC+8, UTC-5, UTC+5:30, etc.
+ const match = timezone.match(/UTC([+-])(\d+)(?::(\d+))?/);
+ if (match) {
+ const sign = match[1] === '+' ? 1 : -1;
+ const hours = parseInt(match[2]);
+ const minutes = match[3] ? parseInt(match[3]) : 0;
+ timezoneOffsetMinutes = sign * (hours * 60 + minutes);
+ console.log('[HumanizeWatermarkToDatetimePipe] Parsed timezone offset:', timezoneOffsetMinutes, 'minutes');
+ } else {
+ // Default to browser timezone if format is not recognized
+ const browserOffset = new Date().getTimezoneOffset();
+ timezoneOffsetMinutes = -browserOffset; // Convert to UTC offset format
+ console.log(
+ '[HumanizeWatermarkToDatetimePipe] Using browser timezone offset:',
+ timezoneOffsetMinutes,
+ 'minutes'
+ );
+ }
+
+ // Calculate the datetime in the target timezone
+ // value is timestamp in milliseconds (UTC)
+ const utcDate = new Date(value);
+ const targetDate = new Date(utcDate.getTime() + timezoneOffsetMinutes * 60 * 1000);
+
+ const year = targetDate.getUTCFullYear();
Review Comment:
my suggestion is that we should use a library for all date manipulation. I have used date-fns in the past, though I see moment.js is also used.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on PR #27552:
URL: https://github.com/apache/flink/pull/27552#issuecomment-3882681765
@yuchen-ecnu Could you please review this submission?
This time, I mainly adjusted the time processing logic and timezone-related implementation. I'd like to confirm if the design and implementation are reasonable.
I will promptly follow up on any suggestions for improvement. Thank you! 🙏
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on PR #27552:
URL: https://github.com/apache/flink/pull/27552#issuecomment-4005492777
@ferenc-csaky @yuchen-ecnu @davidradl
PTAL again, thanks!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2792588528
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -62,7 +100,27 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
private readonly cdr: ChangeDetectorRef
) {}
+ private getBrowserTimezone(): string {
+ // Get browser's IANA timezone identifier
+ // This will properly handle DST changes
+ try {
+ const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+ // Check if the browser timezone exists in the options list
+ const exists = this.timezoneOptions.some(option => option.value === browserTimezone);
+
+ // If browser timezone exists in the list, use it; otherwise default to UTC
+ return exists ? browserTimezone : 'UTC';
+ } catch (error) {
+ console.error('[getBrowserTimezone] Error getting browser timezone:', error);
Review Comment:
nit: Maybe expand the error to add - so using UTC.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2924877449
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,67 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true
})
export class HumanizeWatermarkToDatetimePipe implements PipeTransform {
constructor(private readonly configService: ConfigService) {}
- public transform(value: number): number | string {
+ public transform(value: number, timezone: string = 'UTC'): number | string {
if (value == null || isNaN(value) || value <= this.configService.LONG_MIN_VALUE) {
return 'N/A';
- } else {
- return new Date(value).toLocaleString();
+ }
+
+ try {
+ const date = new Date(value);
+
+ // Use Intl.DateTimeFormat for proper timezone handling including DST
+ // This native browser API automatically handles daylight saving time transitions
+ // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+ const dateFormatter = new Intl.DateTimeFormat('en-US', {
+ timeZone: timezone,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ hour12: false,
+ minute: '2-digit',
+ second: '2-digit'
+ });
+
+ // Get timezone abbreviation (e.g., PST, PDT, EST, EDT)
+ // The abbreviation automatically reflects DST status (e.g., PST vs PDT)
+ const timezoneFormatter = new Intl.DateTimeFormat('en-US', {
Review Comment:
I am wondering why we hard code en-US here, should this be localised - so we get the expected local day month ordering. I assume this would match the timezone. WDYT?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2924877449
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,67 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true
})
export class HumanizeWatermarkToDatetimePipe implements PipeTransform {
constructor(private readonly configService: ConfigService) {}
- public transform(value: number): number | string {
+ public transform(value: number, timezone: string = 'UTC'): number | string {
if (value == null || isNaN(value) || value <= this.configService.LONG_MIN_VALUE) {
return 'N/A';
- } else {
- return new Date(value).toLocaleString();
+ }
+
+ try {
+ const date = new Date(value);
+
+ // Use Intl.DateTimeFormat for proper timezone handling including DST
+ // This native browser API automatically handles daylight saving time transitions
+ // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+ const dateFormatter = new Intl.DateTimeFormat('en-US', {
+ timeZone: timezone,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ hour12: false,
+ minute: '2-digit',
+ second: '2-digit'
+ });
+
+ // Get timezone abbreviation (e.g., PST, PDT, EST, EDT)
+ // The abbreviation automatically reflects DST status (e.g., PST vs PDT)
+ const timezoneFormatter = new Intl.DateTimeFormat('en-US', {
Review Comment:
I am wondering why we hard code en-US here, should this be localised - so we get the expected local day month ordering
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "yuchen-ecnu (via GitHub)" <gi...@apache.org>.
yuchen-ecnu commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2888626773
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -62,7 +83,56 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
private readonly cdr: ChangeDetectorRef
) {}
+ private getBrowserTimezone(): string {
+ // Get browser's IANA timezone identifier
+ // This will properly handle DST changes
+ // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+ try {
+ return Intl.DateTimeFormat().resolvedOptions().timeZone;
+ } catch (error) {
+ console.error('[getBrowserTimezone] Error getting browser timezone, falling back to UTC:', error);
+ // As a last resort, rely on runtime environment offset
+ const offset = -new Date().getTimezoneOffset();
+ const sign = offset >= 0 ? '+' : '-';
Review Comment:
According to the [IANA Time Zone Database (etcetera)](https://github.com/eggert/tz/blob/main/etcetera) and [Wikipedia](https://en.wikipedia.org/wiki/Tz_database#Area), the Etc/GMT area uses POSIX-style signs, which are the opposite of ISO-8601:
* Etc/GMT-8 = UTC+8 (East of Greenwich)
* Etc/GMT+8 = UTC-8 (West of Greenwich)
Let's try following code,
```javascript
> console.log("PR (+8):", new Date().toLocaleString('en-US', { timeZone: 'Etc/GMT+8' }));
PR (+8): 3/5/2026, 12:50:03 AM
> console.log("Correct (-8):", new Date().toLocaleString('en-US', { timeZone: 'Etc/GMT-8' }));
Correct (-8): 3/5/2026, 4:50:18 PM
> new Date()
Thu Mar 05 2026 16:50:35 GMT+0800 (中国标准时间)
```
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -62,7 +83,56 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
private readonly cdr: ChangeDetectorRef
) {}
+ private getBrowserTimezone(): string {
+ // Get browser's IANA timezone identifier
+ // This will properly handle DST changes
+ // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+ try {
+ return Intl.DateTimeFormat().resolvedOptions().timeZone;
+ } catch (error) {
+ console.error('[getBrowserTimezone] Error getting browser timezone, falling back to UTC:', error);
+ // As a last resort, rely on runtime environment offset
+ const offset = -new Date().getTimezoneOffset();
+ const sign = offset >= 0 ? '+' : '-';
+ const hours = String(Math.floor(Math.abs(offset) / 60)).padStart(2, '0');
Review Comment:
The `padStart(2, '0')` produces strings like `Etc/GMT+08`, which causes a RangeError: Invalid time zone specified in most browsers. Canonical Etc/GMT names do not have leading zeros (it should be Etc/GMT+8)."
You can verify by following code in the browser developer console:
```javascript
const timezoneFormatter = new Intl.DateTimeFormat('en-US', {
timeZone: 'Etc/GMT+08',
timeZoneName: 'short'
});
```
<img width="510" height="184" alt="Image" src="https://github.com/user-attachments/assets/cd06c9a6-2065-4e75-be8c-ff1b05a0ade6" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on PR #27552:
URL: https://github.com/apache/flink/pull/27552#issuecomment-4047474278
> LGTM. If you’re open to it, you might consider submitting another PR to make the timezone a global setting, rather than exposing a dropdown specifically in the watermark section. This could help keep the configuration more consistent across the UI.
>
> Thanks again for your contribution!
Thank you for the review! Glad it looks good. I think making the timezone a global setting is a great idea for improving overall UI consistency. I'll follow up with a separate PR to address that. Thanks again for the suggestion!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2925262299
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,67 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true
})
export class HumanizeWatermarkToDatetimePipe implements PipeTransform {
constructor(private readonly configService: ConfigService) {}
- public transform(value: number): number | string {
+ public transform(value: number, timezone: string = 'UTC'): number | string {
if (value == null || isNaN(value) || value <= this.configService.LONG_MIN_VALUE) {
return 'N/A';
- } else {
- return new Date(value).toLocaleString();
+ }
+
+ try {
+ const date = new Date(value);
+
+ // Use Intl.DateTimeFormat for proper timezone handling including DST
+ // This native browser API automatically handles daylight saving time transitions
+ // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+ const dateFormatter = new Intl.DateTimeFormat('en-US', {
+ timeZone: timezone,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ hour12: false,
+ minute: '2-digit',
+ second: '2-digit'
+ });
+
+ // Get timezone abbreviation (e.g., PST, PDT, EST, EDT)
+ // The abbreviation automatically reflects DST status (e.g., PST vs PDT)
+ const timezoneFormatter = new Intl.DateTimeFormat('en-US', {
Review Comment:
Good point! I've updated this to use `undefined` instead of `'en-US'`,
which falls back to the browser's default locale. This ensures the date
ordering matches the user's local preference. Thank you for the suggestion!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2788058437
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/watermarks/job-overview-drawer-watermarks.component.ts:
##########
@@ -54,38 +67,112 @@ export class JobOverviewDrawerWatermarksComponent implements OnInit, OnDestroy {
public virtualItemSize = 36;
public readonly narrowLogData = typeDefinition<WatermarkData>();
+ // Timezone related properties
+ public timezoneOptions = [
Review Comment:
Hi I am wondering about how daylight savings effects this. I assume the local time in daylight saving is what the users might expect to see.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39042][webui] Make watermark timestamps timezone-aware and configurable [flink]
Posted by "davidradl (via GitHub)" <gi...@apache.org>.
davidradl commented on code in PR #27552:
URL: https://github.com/apache/flink/pull/27552#discussion_r2792622360
##########
flink-runtime-web/web-dashboard/src/app/components/humanize-watermark.pipe.ts:
##########
@@ -36,16 +37,65 @@ export class HumanizeWatermarkPipe implements PipeTransform {
}
@Pipe({
- name: 'humanizeWatermarkToDatetime'
+ name: 'humanizeWatermarkToDatetime',
+ standalone: true,
+ pure: false
})
export class HumanizeWatermarkToDatetimePipe implements PipeTransform {
constructor(private readonly configService: ConfigService) {}
- public transform(value: number): number | string {
+ public transform(value: number, timezone: string = 'UTC'): number | string {
if (value == null || isNaN(value) || value <= this.configService.LONG_MIN_VALUE) {
return 'N/A';
- } else {
- return new Date(value).toLocaleString();
+ }
+
+ try {
+ const date = new Date(value);
+
+ // Use Intl.DateTimeFormat for proper timezone handling including DST
+ // This native browser API automatically handles daylight saving time transitions
+ const dateFormatter = new Intl.DateTimeFormat('en-US', {
+ timeZone: timezone,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ hour12: false,
+ minute: '2-digit',
+ second: '2-digit'
+ });
+
+ // Get timezone abbreviation (e.g., PST, PDT, EST, EDT)
+ const timezoneFormatter = new Intl.DateTimeFormat('en-US', {
+ timeZone: timezone,
+ timeZoneName: 'short'
+ });
+
+ // Format the date parts
+ const parts = dateFormatter.formatToParts(date);
+ const year = parts.find(p => p.type === 'year')?.value;
+ const month = parts.find(p => p.type === 'month')?.value;
+ const day = parts.find(p => p.type === 'day')?.value;
+ const hour = parts.find(p => p.type === 'hour')?.value;
+ const minute = parts.find(p => p.type === 'minute')?.value;
+ const second = parts.find(p => p.type === 'second')?.value;
+
+ // Extract timezone abbreviation
+ const timezoneParts = timezoneFormatter.formatToParts(date);
+ const timezoneAbbr = timezoneParts.find(p => p.type === 'timeZoneName')?.value || timezone;
+
+ return `${year}-${month}-${day} ${hour}:${minute}:${second} (${timezoneAbbr})`;
Review Comment:
can we return whether we are in DST in the format?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org