Airflow UI Changing Execution Datetime to Readable Format - airflow

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.

Answer 1

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.