[GitHub] [airflow] moshederri opened a new issue, #23850: Tasks with dots are not shown in the grid view

[GitBox]

moshederri opened a new issue, #23850:
URL: https://github.com/apache/airflow/issues/23850

   ### Apache Airflow version
   
   2.3.0 (latest released)
   
   ### What happened
   
   In the new grid view, tasks are not visible if they contain dots in their 
name (but are shown in the details panel and graph view).
   
   <img width="1449" alt="grid" 
src="https://user-images.githubusercontent.com/38216041/169659004-f7c57357-2600-4a76-8cad-9ee073086190.png";>
   <img width="331" alt="graph" 
src="https://user-images.githubusercontent.com/38216041/169659002-0d8359c7-9483-4b69-8bc6-3c15e84f7fbf.png";>
   
   ### What you think should happen instead
   
   All tasks should be displayed, matching the ones in the detailed panel and 
the graph view.
   
   ### How to reproduce
   
   Here is a dag that reproduces the problem:
   
   ```
   from airflow import DAG
   from airflow.operators.dummy_operator import DummyOperator
   from datetime import datetime
   
   
   dag = DAG("some-test-dag",
             start_date=datetime(2021, 0o2, 17),
             schedule_interval="0 10 * * *",
             max_active_runs=1,
             catchup=False)
   
   DummyOperator(task_id=f"task_without_dots", dag=dag)
   DummyOperator(task_id=f"task.with.dots", dag=dag)
   ```
   
   The task without the dot is displayed, however, the other doesn't.
   
   
   ### Operating System
   
   Ubuntu / MacOS
   
   ### Versions of Apache Airflow Providers
   
   _No response_
   
   ### Deployment
   
   Official Apache Airflow Helm Chart
   
   ### Deployment details
   
   EKS / official helm chart
   
   ### Anything else
   
   - no errors are shown in the console (chrome)
   - the response from `api/v1/dags/some-test-dag/tasks` had two elements
   - the div for the missing task is present in the body (just empty)
   - i spotted the block of code (in packed `tree.js`  in chrome) which 
prevents the task from showing:
   ```
               const {task: t, level: n, prevTaskId: a, isParentOpen: i=!0, 
dagRunIds: u} = e
                 // ...
                 , w = Object(r.useCallback)((()=>d && b()), [b, d])
                 , x = t.id.split("."); <----
               x.splice(-1);
               const E = i && x.every((e=>v.some((t=>t === e)))); // <--- 
returns false for tasks containing dots in their name
                // ....
               }, o.a.createElement(Qb, {
                   in: E,
                   unmountOnExit: !0
               }
   ```
   - i couldn't find the split code in 
[Grid](https://github.com/apache/airflow/blob/main/airflow/www/static/js/grid/Grid.jsx#L42)
 or 
[Collapse](https://github.com/apache/airflow/blob/main/airflow/www/static/js/grid/renderTaskRows.jsx#L141)
   
   
   ### Are you willing to submit PR?
   
   - [X] Yes I am willing to submit a PR!
   
   ### Code of Conduct
   
   - [X] I agree to follow this project's [Code of 
Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md)
   


-- 
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-unsubscr...@airflow.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org