diff --git a/airflow/www/static/js/dag.js b/airflow/www/static/js/dag.js
index b716c206f11b5..bc897c346e7d5 100644
--- a/airflow/www/static/js/dag.js
+++ b/airflow/www/static/js/dag.js
@@ -20,7 +20,7 @@
/* global document, window, $ */
import getMetaValue from './meta_value';
-import { formatDateTime } from './datetime_utils';
+import { approxTimeFromNow, formatDateTime } from './datetime_utils';
function updateQueryStringParameter(uri, key, value) {
const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
@@ -283,7 +283,10 @@ $('#pause_resume').on('change', function onChange() {
$('#next-run').on('mouseover', () => {
$('#next-run').attr('data-original-title', () => {
let newTitle = '';
- if (nextRun.createAfter) newTitle += `Run After: ${formatDateTime(nextRun.createAfter)}
`;
+ if (nextRun.createAfter) {
+ newTitle += `Run After: ${formatDateTime(nextRun.createAfter)}
`;
+ newTitle += `Next Run: ${approxTimeFromNow(nextRun.createAfter)}
`;
+ }
if (nextRun.intervalStart && nextRun.intervalEnd) {
newTitle += 'Data Interval
';
newTitle += `Start: ${formatDateTime(nextRun.intervalStart)}
`;
diff --git a/airflow/www/static/js/dags.js b/airflow/www/static/js/dags.js
index 012aa16d61ea0..b9309de775fcc 100644
--- a/airflow/www/static/js/dags.js
+++ b/airflow/www/static/js/dags.js
@@ -21,7 +21,7 @@
import getMetaValue from './meta_value';
import tiTooltip from './task_instances';
-import { formatDateTime } from './datetime_utils';
+import { approxTimeFromNow, formatDateTime } from './datetime_utils';
const DAGS_INDEX = getMetaValue('dags_index');
const ENTER_KEY_CODE = 13;
@@ -371,7 +371,8 @@ $('.js-next-run-tooltip').each((i, run) => {
const nextRunData = $(run).attr('data-nextrun');
const [createAfter, intervalStart, intervalEnd] = nextRunData.split(',');
let newTitle = '';
- newTitle += `Run After: ${formatDateTime(createAfter)}
`;
+ newTitle += `Run After: ${formatDateTime(createAfter)}
`;
+ newTitle += `Next Run: ${approxTimeFromNow(createAfter)}
`;
newTitle += 'Data Interval
';
newTitle += `Start: ${formatDateTime(intervalStart)}
`;
newTitle += `End: ${formatDateTime(intervalEnd)}`;
diff --git a/airflow/www/static/js/datetime_utils.js b/airflow/www/static/js/datetime_utils.js
index 8efd3fde28241..3b89374fea7b4 100644
--- a/airflow/www/static/js/datetime_utils.js
+++ b/airflow/www/static/js/datetime_utils.js
@@ -109,3 +109,8 @@ export const formatDuration = (dur) => {
// .as('milliseconds') is necessary for .format() to work correctly
return `${days > 0 ? `${days}d` : ''}${moment.utc(duration.as('milliseconds')).format('HH:mm:ss')}`;
};
+
+export const approxTimeFromNow = (dur) => {
+ const timefromNow = moment(dur);
+ return `${timefromNow.fromNow()}`;
+};