Format DAG run count (#39684)

* format dag run count * Add full count to tooltip and fix linting --------- Co-authored-by: Brent Bovenzi <[email protected]>
apache · Jul 23, 2024 · 460d209 · 460d209
1 parent c2304d2
commit 460d209
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/airflow/www/static/js/dags.js b/airflow/www/static/js/dags.js
@@ -199,6 +199,12 @@ d3.selectAll(".js-last-run-tooltip").on(
   }
 );
 
+function formatCount(count) {
+  if (count >= 1000000) return `${Math.floor(count / 1000000)}M`;
+  if (count >= 1000) return `${Math.floor(count / 1000)}k`;
+  return count;
+}
+
 function drawDagStats(selector, dagId, states) {
   const g = d3
     .select(`svg#${selector}-${dagId.replace(/\./g, "__dot__")}`)
@@ -247,7 +253,7 @@ function drawDagStats(selector, dagId, states) {
     })
     .attr("fill", "#fff")
     .attr("r", diameter / 2)
-    .attr("title", (d) => d.state || "none")
+    .attr("title", (d) => `${d.state || "none"}: ${d.count}`)
     .on("mouseover", (d) => {
       if (d.count > 0) {
         d3.select(d3.event.currentTarget)
@@ -281,7 +287,7 @@ function drawDagStats(selector, dagId, states) {
     .attr("font-size", 9)
     .attr("y", 3)
     .style("pointer-events", "none")
-    .text((d) => (d.count > 0 ? d.count : ""));
+    .text((d) => (d.count > 0 ? formatCount(d.count) : ""));
 }
 
 function dagStatsHandler(selector, json) {