This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new ea3f21df32 Add legend for duration markline. (#38434)
ea3f21df32 is described below
commit ea3f21df3209369a7fe1e7f4c87802b313b4ed4f
Author: Karthikeyan Singaravelan <[email protected]>
AuthorDate: Tue Mar 26 00:46:47 2024 +0530
Add legend for duration markline. (#38434)
* Add legend for duration markline.
* Change mean to median. Remove markline from run duration due to echarts
sync issues toggling landing times.
---
.../static/js/dag/details/dag/RunDurationChart.tsx | 12 ---------
.../static/js/dag/details/task/TaskDuration.tsx | 30 ++++++++++++++++++++--
2 files changed, 28 insertions(+), 14 deletions(-)
diff --git a/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
b/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
index 29a09b7792..023e099051 100644
--- a/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
+++ b/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
@@ -163,10 +163,6 @@ const RunDurationChart = ({ showLandingTimes }: Props) => {
opacity: 0.6,
},
stack: "x",
- markLine: {
- silent: true,
- data: [{ type: "median" }],
- },
} as SeriesOption,
]
: []),
@@ -178,10 +174,6 @@ const RunDurationChart = ({ showLandingTimes }: Props) => {
opacity: 0.6,
},
stack: "x",
- markLine: {
- silent: true,
- data: [{ type: "median" }],
- },
},
{
type: "bar",
@@ -192,10 +184,6 @@ const RunDurationChart = ({ showLandingTimes }: Props) => {
color: (params) => stateColors[params.data.state],
},
stack: "x",
- markLine: {
- silent: true,
- data: [{ type: "median" }],
- },
},
],
// @ts-ignore
diff --git a/airflow/www/static/js/dag/details/task/TaskDuration.tsx
b/airflow/www/static/js/dag/details/task/TaskDuration.tsx
index 0808f7d4f6..f3a6ba0531 100644
--- a/airflow/www/static/js/dag/details/task/TaskDuration.tsx
+++ b/airflow/www/static/js/dag/details/task/TaskDuration.tsx
@@ -146,7 +146,33 @@ const TaskDuration = () => {
`;
}
+ function formatMarkLineLegendName(name: string) {
+ switch (name) {
+ case "runDurationUnit":
+ return "Median total duration";
+ case "queuedDurationUnit":
+ return "Median queued duration";
+ default:
+ return name;
+ }
+ }
+
const option: ReactEChartsProps["option"] = {
+ legend: {
+ orient: "horizontal",
+ icon: "circle",
+ formatter: formatMarkLineLegendName,
+ data: [
+ {
+ name: "runDurationUnit",
+ itemStyle: { color: "blue" },
+ },
+ {
+ name: "queuedDurationUnit",
+ itemStyle: { color: stateColors.queued },
+ },
+ ],
+ },
series: [
{
type: "bar",
@@ -158,7 +184,7 @@ const TaskDuration = () => {
stack: "x",
markLine: {
silent: true,
- data: [{ type: "median" }],
+ data: [{ type: "median", lineStyle: { color: stateColors.queued } }],
},
},
{
@@ -171,7 +197,7 @@ const TaskDuration = () => {
stack: "x",
markLine: {
silent: true,
- data: [{ type: "median" }],
+ data: [{ type: "median", lineStyle: { color: "blue" } }],
},
},
],
