<h3 dir="auto">Apache Airflow version</h3>
<p dir="auto">2.3.0 (latest released)</p>
<h3 dir="auto">What happened</h3>
<p dir="auto">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).</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/38216041/169659004-f7c57357-2600-4a76-8cad-9ee073086190.png"><img width="1449" alt="grid" src="https://user-images.githubusercontent.com/38216041/169659004-f7c57357-2600-4a76-8cad-9ee073086190.png" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/38216041/169659002-0d8359c7-9483-4b69-8bc6-3c15e84f7fbf.png"><img width="331" alt="graph" src="https://user-images.githubusercontent.com/38216041/169659002-0d8359c7-9483-4b69-8bc6-3c15e84f7fbf.png" style="max-width: 100%;"></a></p>
<h3 dir="auto">What you think should happen instead</h3>
<p dir="auto">All tasks should be displayed, matching the ones in the detailed panel and the graph view.</p>
<h3 dir="auto">How to reproduce</h3>
<p dir="auto">Here is a dag that reproduces the problem:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="from airflow import DAG
from airflow.operators.dummy_operator import DummyOperator
from datetime import datetime


dag = DAG(&quot;some-test-dag&quot;,
          start_date=datetime(2021, 0o2, 17),
          schedule_interval=&quot;0 10 * * *&quot;,
          max_active_runs=1,
          catchup=False)

DummyOperator(task_id=f&quot;task_without_dots&quot;, dag=dag)
DummyOperator(task_id=f&quot;task.with.dots&quot;, dag=dag)"><pre class="notranslate"><code class="notranslate">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)
</code></pre></div>
<p dir="auto">The task without the dot is displayed, however, the other doesn't.</p>
<h3 dir="auto">Operating System</h3>
<p dir="auto">Ubuntu / MacOS</p>
<h3 dir="auto">Versions of Apache Airflow Providers</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Deployment</h3>
<p dir="auto">Official Apache Airflow Helm Chart</p>
<h3 dir="auto">Deployment details</h3>
<p dir="auto">EKS / official helm chart</p>
<h3 dir="auto">Anything else</h3>
<ul dir="auto">
<li>no errors are shown in the console (chrome)</li>
<li>the response from <code class="notranslate">api/v1/dags/some-test-dag/tasks</code> had two elements</li>
<li>the div for the missing task is present in the body (just empty)</li>
<li>i spotted the block of code (in packed <code class="notranslate">tree.js</code>  in chrome) which prevents the task from showing:</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="            const {task: t, level: n, prevTaskId: a, isParentOpen: i=!0, dagRunIds: u} = e
              // ...
              , w = Object(r.useCallback)((()=&gt;d &amp;&amp; b()), [b, d])
              , x = t.id.split(&quot;.&quot;); &lt;----
            x.splice(-1);
            const E = i &amp;&amp; x.every((e=&gt;v.some((t=&gt;t === e)))); // &lt;--- returns false for tasks containing dots in their name
             // ....
            }, o.a.createElement(Qb, {
                in: E,
                unmountOnExit: !0
            }"><pre class="notranslate"><code class="notranslate">            const {task: t, level: n, prevTaskId: a, isParentOpen: i=!0, dagRunIds: u} = e
              // ...
              , w = Object(r.useCallback)((()=&gt;d &amp;&amp; b()), [b, d])
              , x = t.id.split("."); &lt;----
            x.splice(-1);
            const E = i &amp;&amp; x.every((e=&gt;v.some((t=&gt;t === e)))); // &lt;--- returns false for tasks containing dots in their name
             // ....
            }, o.a.createElement(Qb, {
                in: E,
                unmountOnExit: !0
            }
</code></pre></div>
<ul dir="auto">
<li>i couldn't find the split code in <a href="https://github.com/apache/airflow/blob/main/airflow/www/static/js/grid/Grid.jsx#L42">Grid</a> or <a href="https://github.com/apache/airflow/blob/main/airflow/www/static/js/grid/renderTaskRows.jsx#L141">Collapse</a></li>
</ul>
<h3 dir="auto">Are you willing to submit PR?</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Yes I am willing to submit a PR!</li>
</ul>
<h3 dir="auto">Code of Conduct</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I agree to follow this project's <a href="https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md">Code of Conduct</a></li>
</ul>
<h3 dir="auto">Apache Airflow version</h3>
<p dir="auto">2.3.0 (latest released)</p>
<h3 dir="auto">What happened</h3>
<p dir="auto"><code class="notranslate">task_id</code> with <code class="notranslate">.</code> e.g. <code class="notranslate">hello.world</code> is not rendered in grid view.</p>
<h3 dir="auto">What you think should happen instead</h3>
<p dir="auto">The task should be rendered just fine in Grid view.</p>
<h3 dir="auto">How to reproduce</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="#
# 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
# &quot;License&quot;); 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
# &quot;AS IS&quot; 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.

&quot;&quot;&quot;Example DAG demonstrating the usage of the BashOperator.&quot;&quot;&quot;

from datetime import datetime, timedelta

from airflow import DAG
from airflow.operators.bash import BashOperator
from airflow.operators.dummy import DummyOperator

with DAG(
    dag_id=&quot;example_bash_operator&quot;,
    schedule_interval=&quot;0 0 * * *&quot;,
    start_date=datetime(2021, 1, 1),
    catchup=False,
    dagrun_timeout=timedelta(minutes=60),
    tags=[&quot;example&quot;, &quot;example2&quot;],
    params={&quot;example_key&quot;: &quot;example_value&quot;},
) as dag:
    run_this_last = DummyOperator(
        task_id=&quot;run.this.last&quot;,
    )

    # [START howto_operator_bash]
    run_this = BashOperator(
        task_id=&quot;run.after.loop&quot;,
        bash_command=&quot;echo 1&quot;,
    )
    # [END howto_operator_bash]

    run_this &gt;&gt; run_this_last

    for i in range(3):
        task = BashOperator(
            task_id=&quot;runme.&quot; + str(i),
            bash_command='echo &quot;{{ task_instance_key_str }}&quot; &amp;&amp; sleep 1',
        )
        task &gt;&gt; run_this

    # [START howto_operator_bash_template]
    also_run_this = BashOperator(
        task_id=&quot;also.run.this&quot;,
        bash_command='echo &quot;run_id={{ run_id }} | dag_run={{ dag_run }}&quot;',
    )
    # [END howto_operator_bash_template]
    also_run_this &gt;&gt; run_this_last

# [START howto_operator_bash_skip]
this_will_skip = BashOperator(
    task_id=&quot;this.will.skip&quot;,
    bash_command='echo &quot;hello world&quot;; exit 99;',
    dag=dag,
)
# [END howto_operator_bash_skip]
this_will_skip &gt;&gt; run_this_last

if __name__ == &quot;__main__&quot;:
    dag.cli()"><pre class="notranslate"><code class="notranslate">#
# 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.

"""Example DAG demonstrating the usage of the BashOperator."""

from datetime import datetime, timedelta

from airflow import DAG
from airflow.operators.bash import BashOperator
from airflow.operators.dummy import DummyOperator

with DAG(
    dag_id="example_bash_operator",
    schedule_interval="0 0 * * *",
    start_date=datetime(2021, 1, 1),
    catchup=False,
    dagrun_timeout=timedelta(minutes=60),
    tags=["example", "example2"],
    params={"example_key": "example_value"},
) as dag:
    run_this_last = DummyOperator(
        task_id="run.this.last",
    )

    # [START howto_operator_bash]
    run_this = BashOperator(
        task_id="run.after.loop",
        bash_command="echo 1",
    )
    # [END howto_operator_bash]

    run_this &gt;&gt; run_this_last

    for i in range(3):
        task = BashOperator(
            task_id="runme." + str(i),
            bash_command='echo "{{ task_instance_key_str }}" &amp;&amp; sleep 1',
        )
        task &gt;&gt; run_this

    # [START howto_operator_bash_template]
    also_run_this = BashOperator(
        task_id="also.run.this",
        bash_command='echo "run_id={{ run_id }} | dag_run={{ dag_run }}"',
    )
    # [END howto_operator_bash_template]
    also_run_this &gt;&gt; run_this_last

# [START howto_operator_bash_skip]
this_will_skip = BashOperator(
    task_id="this.will.skip",
    bash_command='echo "hello world"; exit 99;',
    dag=dag,
)
# [END howto_operator_bash_skip]
this_will_skip &gt;&gt; run_this_last

if __name__ == "__main__":
    dag.cli()
</code></pre></div>
<h3 dir="auto">Operating System</h3>
<p dir="auto">Debian GNU/Linux 11 (bullseye)</p>
<h3 dir="auto">Versions of Apache Airflow Providers</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Deployment</h3>
<p dir="auto">Official Apache Airflow Helm Chart</p>
<h3 dir="auto">Deployment details</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Anything else</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Are you willing to submit PR?</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Yes I am willing to submit a PR!</li>
</ul>
<h3 dir="auto">Code of Conduct</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I agree to follow this project's <a href="https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md">Code of Conduct</a></li>
</ul>