Airflow UI Changing Execution Datetime to Readable Format

Question

In Airflow's UI, if I hover over any of my task IDs, it'll show me the "Run", "Started", and "Ended" dates all with a very verbose format i.e. 2021-02-12T18:57:45.314249+00:00.

How do I change the default preferences in Airflow's UI so that it simply shows 2/12/21 6:57:45pm? (i.e. without the fractions of a second)

Additionally, how do I ensure that this time is showing in America/Chicago time as opposed to UTC? I've tried editing the "default_timezone" and the "default_ui_timezone" arguments in my airflow.cfg file to America/Chicago, but the changes don't seem to be reflected on the UI even after rebooting the webserver.

I think you'd have to edit the source code of airflow itself to do this. Is that something you're willing to do? — Simon D, Feb 24 '21 at 12:48
It depends on how long that'd take, do you know where in the source code I could edit it? — kashmoney, Feb 24 '21 at 21:33
which version of Airflow are you using? with 2.0 you have the ability to change the timezone. — neilharia7, Feb 27 '21 at 11:02

BiOS · Answer 1 · 2021-03-01T19:33:56.877

I have managed to achieve the result you wanted. You'll need the edit a javascript file in the source code of airflow to achieve that.

Firstly, locate your module location by launching:

python3 -m pip show apache-airflow

And look for the "Location" attribute, which is the path to where the module is contained. Open that folder, then navigate as follows:

airflow -> www -> static -> dist

Here you need to look for a file named taskInstances.somehash.js

Open it with your IDE and locate the following lines:

const defaultFormat = 'YYYY-MM-DD, HH:mm:ss';
const defaultFormatWithTZ = 'YYYY-MM-DD, HH:mm:ss z';
const defaultTZFormat = 'z (Z)';
const dateTimeAttrFormat = 'YYYY-MM-DDThh:mm:ssTZD';

You can hereby change the format as you please, such as:

const defaultFormat = 'DD/MM/YY hh:mm:ss';
const defaultFormatWithTZ = 'DD/MM/YY hh:mm:ss z';
const defaultTZFormat = 'z (Z)';
const dateTimeAttrFormat = 'DD/MM/YY hh:mm:ss';

Now jump to the makeDateTimeHTML function and modify as follows:

function makeDateTimeHTML(start, end) {
  // check task ended or not
  const isEnded = end && end instanceof moment && end.isValid();
  return `Started: ${start.format('DD/MM/YY hh:mm:ss')}<br>Ended: ${isEnded ? end.format('DD/MM/YY hh:mm:ss') : 'Not ended yet'}<br>`;
}

Lastly, locate these this statement:

if (ti.start_date instanceof moment) {
    tt += `Started: ${Object(_main__WEBPACK_IMPORTED_MODULE_0__["escapeHtml"])(ti.start_date.toISOString())}<br>`;
} else {
    tt += `Started: ${Object(_main__WEBPACK_IMPORTED_MODULE_0__["escapeHtml"])(ti.start_date)}<br>`;
} 
// Calculate duration on the fly if task instance is still running

And change to:

if (ti.start_date instanceof moment) {
    tt += `Started: ${Object(_main__WEBPACK_IMPORTED_MODULE_0__["escapeHtml"])(ti.start_date)}<br>`;
} else {
    tt += `Started: ${Object(_main__WEBPACK_IMPORTED_MODULE_0__["escapeHtml"])(ti.start_date)}<br>`;
} 
// Calculate duration on the fly if task instance is still running

Took me a while to figure out, so hopefully this will be of your liking.

So the "taskInstances.somehash.js" file was in "airflow --> www_rbac --> static --> dist", but the functions you are referring to seemed to be in the "task-instances.js" file as opposed to the "task-instances.hash.js" file (which was a long single line JS file). The defaultFormat / defaultFormatWithTZ definitions were located in "airflow --> www_rbac --> static --> js --> datetime-utils.js. However, when I changed those values and cleared my internet cache, the updates weren't being reflected, and even adding an "alert" statement before the calling function failed to show a notification — kashmoney, Mar 01 '21 at 17:27
Alright @kashmoney, I see that you are experiencing problems with said modification. I have downloaded Airflow and tested the changes myself, so I am pretty sure they will work eventually. I have two suggestion to diagnose the problem: 1. Open the task-instances.hash and paste into an online JS beautifier, to see if you can find what you're looking for in there. 2. Make sure you apply the changes properly in JS, without making a single mistake (otherwise, yes, the popup won't appear). Are you able to cross check the code changes to make sure there were no typos? — BiOS, Mar 01 '21 at 18:21

Airflow UI Changing Execution Datetime to Readable Format

1 Answers1