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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
