[DRAFT] [AIRFLOW-3891] Make the Graph View time-zone aware #4893

astahlman · 2019-03-10T20:24:16Z

Note: this PR isn't fit to be merged, as it only addresses the Graph
view page. I'm sharing this for early review to make sure it's on the
right track. If there are no major objections to this approach, then
I'll apply similar changes to the other views.

Make sure you have checked all steps below.

Jira

[ X ] My PR addresses the following Airflow Jira issues and references them in the PR title. For example, "[AIRFLOW-XXX] My Airflow PR"
- https://issues.apache.org/jira/browse/AIRFLOW-3891
- In case you are fixing a typo in the documentation you can prepend your commit with [AIRFLOW-XXX], code changes always need a Jira issue.
- In case you are proposing a fundamental code change, you need to create an Airflow Improvement Proposal(AIP).

Description

[ X ] Here are some details about my PR, including screenshots of any UI changes:

The clock element in the navbar is now a drop-down that allows time-zone
selection from two options: 'UTC' or 'Local' (the browser default). The
default is UTC, and this selection does not persist across page
refreshes. I'm open to suggestions here on whether the time-zone
selection should be "sticky", and if so, what's the right way to make it
so.

The Base date: datetimepicker requires a bit of hackery, since the
datetimepicker element bundled with Flask-AppBuilder doesn't seem to
have time zone support (see [1]). To work around this, we have to add an
offset to the (UTC) value in the picker so that the date string
displayed in the picker appears to be in the selected time zone, then
subtract the offset when we read the actual (UTC) value from the picker.

[1] dpgaspar/Flask-AppBuilder#920

Tests

My PR adds the following unit tests OR does not need testing for this extremely good reason:

Front-end changes only

Commits

[ X ] My commits all reference Jira issues in their subject lines, and I have squashed multiple commits if they address the same issue. In addition, my commits follow the guidelines from "How to write a good git commit message":
1. Subject is separated from body by a blank line
2. Subject is limited to 50 characters (not including Jira issue reference)
3. Subject does not end with a period
4. Subject uses the imperative mood ("add", not "adding")
5. Body wraps at 72 characters
6. Body explains "what" and "why", not "how"

Documentation

In case of new functionality, my PR adds documentation that describes how to use it.
- When adding new operators/hooks/sensors, the autoclass documentation generation needs to be added.
- All the public functions and the classes in the PR contain docstrings that explain what it does
- If you implement backwards incompatible changes, please leave a note in the Updating.md so we can assign it to a appropriate release

Code Quality

[ X ] Passes flake8

Note: this PR isn't fit to be merged, as it only addresses the Graph view page. I'm sharing this for early review to make sure it's on the right track. If there are no major objections to this approach, then I'll apply similar changes to the other views. The clock element in the navbar is now a drop-down that allows time-zone selection from two options: 'UTC' or 'Local' (the browser default). The default is UTC, and this selection does not persist across page refreshes. I'm open to suggestions here on whether the time-zone selection should be "sticky", and if so, what's the right way to make it so. The `Base date:` datetimepicker requires a bit of hackery, since the datetimepicker element bundled with Flask-AppBuilder doesn't seem to have time zone support (see [1]). To work around this, we have to add an offset to the (UTC) value in the picker so that the date string displayed in the picker appears to be in the selected time zone, then subtract the offset when we read the actual (UTC) value from the picker. [1] dpgaspar/Flask-AppBuilder#920

astahlman · 2019-03-10T20:26:16Z

codecov-io · 2019-03-10T21:05:03Z

Codecov Report

Merging #4893 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #4893   +/-   ##
======================================
  Coverage    75.3%   75.3%           
======================================
  Files         450     450           
  Lines       29023   29023           
======================================
  Hits        21855   21855           
  Misses       7168    7168

Impacted Files	Coverage Δ
airflow/models/__init__.py	`92.85% <0%> (-0.06%)`	⬇️
airflow/contrib/operators/ssh_operator.py	`83.54% <0%> (+1.26%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e220ac5...5fbfc7a. Read the comment docs.

feng-tao · 2019-03-11T03:47:14Z

hey @astahlman , does the default timezone in UI based on a config? Currently there is a config(https://github.com/apache/airflow/blob/master/airflow/config_templates/default_airflow.cfg#L78) to decide the default timezone for scheduler. I wonder whether we could do something similar in webserver as well.

ashb · 2019-03-13T11:10:42Z

I'm open to suggestions here on whether the time-zone selection should be "sticky", and if so, what's the right way to make it so.

Yes, it probably should be. Using a (client-side) cookie would be the way to go.

I agree with Feng - the default TZ should probably be what is in the config file. So we possibly need three options (depending on the values of the tzs): UTC, Airflow configured, Browser local.

ashb · 2019-03-13T11:12:47Z

airflow/www/static/js/index.js

@@ -0,0 +1,21 @@
+/**


Should probably call this "base" or "common" or something - "index" is a unmeaningful to work out what might be in it.

I picked 'index' only because that's the file name that the webpack docs on Libraries used. I'm guessing there's a way to override that - I'll dig in a bit more and see if I can use base.js instead.

Not that important actually.

ashb · 2019-03-13T11:13:57Z

airflow/www/templates/airflow/graph.html

 <script src="{{ url_for_asset('graph.js') }}"></script>
+<script src="{{ url_for_asset('index.js') }}"></script>
+<script type="text/javascript">
+  let dagTz = '{{ dag.timezone.name }}';


We've started putting thins like this in <meta> tags, rather than blocks of JS (or we have open PRs by @mik-laj to do that. I forget if we've merged them yet)

@ashb PR is still waiting for you. :-) #4787

Cool, @mik-laj's PR looks good to me. I'll be happy to update this once #4787 is merged.

ashb · 2019-03-13T11:14:46Z

I like where this is going though.

ashb · 2019-03-14T21:59:21Z

airflow/www/templates/airflow/graph.html


 </script>
 <script src="{{ url_for_asset('graph.js') }}"></script>
+<script src="{{ url_for_asset('index.js') }}"></script>


How does this play with the import of export { initRefreshButton, update_nodes_states } from './graph'; inside index.js? Is the include of graph.js on the previous line the same file?

stale · 2019-09-03T17:42:23Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ashb reviewed Mar 13, 2019

View reviewed changes

ashb reviewed Mar 14, 2019

View reviewed changes

astahlman mentioned this pull request Mar 16, 2019

[AIRFLOW-3967] Extract Jinja directive from Javascript #4787

Closed

5 tasks

stale bot added the stale Stale PRs per the .github/workflows/stale.yml policy file label Sep 3, 2019

stale bot closed this Sep 11, 2019

eschachar deleted the astahlman/airflow-3981 branch September 24, 2022 22:39

[DRAFT] [AIRFLOW-3891] Make the Graph View time-zone aware #4893

[DRAFT] [AIRFLOW-3891] Make the Graph View time-zone aware #4893

Uh oh!

Conversation

astahlman commented Mar 10, 2019

Jira

Description

Tests

Commits

Documentation

Code Quality

Uh oh!

astahlman commented Mar 10, 2019

Uh oh!

codecov-io commented Mar 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

feng-tao commented Mar 11, 2019

Uh oh!

ashb commented Mar 13, 2019

Uh oh!

ashb Mar 13, 2019

Choose a reason for hiding this comment

Uh oh!

astahlman Mar 14, 2019

Choose a reason for hiding this comment

Uh oh!

ashb Mar 14, 2019

Choose a reason for hiding this comment

Uh oh!

ashb Mar 13, 2019

Choose a reason for hiding this comment

Uh oh!

mik-laj Mar 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

astahlman Mar 14, 2019

Choose a reason for hiding this comment

Uh oh!

ashb commented Mar 13, 2019

Uh oh!

ashb Mar 14, 2019

Choose a reason for hiding this comment

Uh oh!

stale bot commented Sep 3, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codecov-io commented Mar 10, 2019 •

edited

Loading

mik-laj Mar 14, 2019 •

edited

Loading