You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@airflow.apache.org by "jscheffl (via GitHub)" <gi...@apache.org> on 2025/09/07 19:14:53 UTC
[PR] Add Links to Edge React UI [airflow]
jscheffl opened a new pull request, #55356:
URL: https://github.com/apache/airflow/pull/55356
Some (next) level of beautification to React UI of Edge Provider:
- Adding links from tasks to the Dag pages
- Adding links from a job to worker
- Adding time prints as relative time stamps "N seconds ago" instead of "2025-09-07T23:45:12.12345Z"
- Some more tooltip to worker state
@pierrejeambrun / @shubhamraj-git / @bbovenzi I attempted to use `<Link to=...>` from react-router-dom but seems this is only working inside the plugin but links to core UI generate blank pages. Is there a security barrier I need to break or how can I make internal links working from the plugin? Security barrier? Needed to switch to the `<Link href=...` from React which is always making a full page reload which is un-cool.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Links to Edge React UI [airflow]
Posted by "jscheffl (via GitHub)" <gi...@apache.org>.
jscheffl merged PR #55356:
URL: https://github.com/apache/airflow/pull/55356
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Links to Edge React UI [airflow]
Posted by "dheerajturaga (via GitHub)" <gi...@apache.org>.
dheerajturaga commented on PR #55356:
URL: https://github.com/apache/airflow/pull/55356#issuecomment-3264012056
@jscheffl, I tested this. Couple of observations.
1. The Edge Worker Jobs seem to vanish after a few minutes
<img width="1902" height="647" alt="image" src="https://github.com/user-attachments/assets/527dfe88-d2f4-4373-95fe-c5959a2d654c" />
<img width="1918" height="637" alt="image" src="https://github.com/user-attachments/assets/83756f8c-62b6-49c3-8d93-a66de3da8ad1" />
2. The relative time print updating every second is probably not necessary, We should probably do `less than a minute ago` and then do `x minutes ago` instead. having the page change less often would be my personal nit
<img width="1918" height="743" alt="image" src="https://github.com/user-attachments/assets/366d6828-adb5-4295-a962-05484151e1dd" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Links to Edge React UI [airflow]
Posted by "Copilot (via GitHub)" <gi...@apache.org>.
Copilot commented on code in PR #55356:
URL: https://github.com/apache/airflow/pull/55356#discussion_r2328840532
##########
providers/edge3/src/airflow/providers/edge3/plugins/www/package.json:
##########
@@ -33,11 +33,14 @@
"@emotion/react": "^11.14.0",
"@tanstack/react-query": "^5.75.1",
"axios": "^1.11.0",
+ "i": "^0.3.7",
"next-themes": "^0.3.0",
+ "npm": "^11.6.0",
Review Comment:
The packages "i" and "npm" appear to be accidentally added dependencies. The "i" package is likely a typo from running `npm i` and "npm" shouldn't be listed as a runtime dependency. These should be removed.
```suggestion
"next-themes": "^0.3.0",
```
##########
providers/edge3/src/airflow/providers/edge3/plugins/www/src/components/ui/ScrollToAnchor.tsx:
##########
@@ -0,0 +1,39 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+interface ScrollToAnchorProps {
+ inline?: ScrollLogicalPosition;
+ block?: ScrollLogicalPosition;
+}
+
+export const ScrollToAnchor = ({ block = "start", inline = "nearest" }: ScrollToAnchorProps): null => {
+ const hash = window.location.hash;
+ if (hash) {
+ const element = document.getElementById(hash.slice(1));
+
+ if (element) {
+ element.scrollIntoView({
+ behavior: "auto",
+ block: block,
+ inline: inline,
+ });
+ }
+ }
Review Comment:
This component runs scroll logic on every render. Consider using useEffect to run this logic only on mount or when the hash changes to avoid potential performance issues and unexpected scrolling behavior.
```suggestion
import React, { useEffect, useState } from "react";
export const ScrollToAnchor = ({ block = "start", inline = "nearest" }: ScrollToAnchorProps): null => {
const [hash, setHash] = useState(() => window.location.hash);
useEffect(() => {
const onHashChange = () => setHash(window.location.hash);
window.addEventListener("hashchange", onHashChange);
return () => window.removeEventListener("hashchange", onHashChange);
}, []);
useEffect(() => {
if (hash) {
const element = document.getElementById(hash.slice(1));
if (element) {
element.scrollIntoView({
behavior: "auto",
block: block,
inline: inline,
});
}
}
}, [hash, block, inline]);
```
##########
providers/edge3/src/airflow/providers/edge3/plugins/www/package.json:
##########
@@ -33,11 +33,14 @@
"@emotion/react": "^11.14.0",
"@tanstack/react-query": "^5.75.1",
"axios": "^1.11.0",
+ "i": "^0.3.7",
"next-themes": "^0.3.0",
+ "npm": "^11.6.0",
Review Comment:
The packages "i" and "npm" appear to be accidentally added dependencies. The "i" package is likely a typo from running `npm i` and "npm" shouldn't be listed as a runtime dependency. These should be removed.
```suggestion
"next-themes": "^0.3.0",
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Links to Edge React UI [airflow]
Posted by "dheerajturaga (via GitHub)" <gi...@apache.org>.
dheerajturaga commented on PR #55356:
URL: https://github.com/apache/airflow/pull/55356#issuecomment-3264034635
> > 1. The Edge Worker Jobs seem to vanish after a few minutes
>
>
>
> The jobs are vanishing after completion, the time is configurable - individually for failed and success, see: https://airflow.apache.org/docs/apache-airflow-providers-edge3/stable/configurations-ref.html#job-success-purge
>
>
>
> > 2. The relative time print updating every second is probably not necessary, We should probably do less than a minute ago and then do x minutes ago instead. having the page change less often would be my personal nit
>
>
>
> Pushed an update to disable "live updates", then the time is only calculated on page refresh. Still in seconds - is this OK? Or do you think a string `less than a minute ago` is better? Then I need to wrap the `<TimeAgo>` Component into a custom UI component as it does not support this logic.
Yup! This looks good!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Links to Edge React UI [airflow]
Posted by "jscheffl (via GitHub)" <gi...@apache.org>.
jscheffl commented on PR #55356:
URL: https://github.com/apache/airflow/pull/55356#issuecomment-3264024464
> 1. The Edge Worker Jobs seem to vanish after a few minutes
The jobs are vanishing after completion, the time is configurable - individually for failed and success, see: https://airflow.apache.org/docs/apache-airflow-providers-edge3/stable/configurations-ref.html#job-success-purge
> 2. The relative time print updating every second is probably not necessary, We should probably do less than a minute ago and then do x minutes ago instead. having the page change less often would be my personal nit
Pushed an update to disable "live updates", then the time is only calculated on page refresh. Still in seconds - is this OK? Or do you think a string `less than a minute ago` is better? Then I need to wrap the `<TimeAgo>` Component into a custom UI component as it does not support this logic.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org