[GitHub] [airflow] ashb commented on a change in pull request #11652: Support for sorting DAGs in the web UI

[GitBox <gi...@apache.org>]

ashb commented on a change in pull request #11652:
URL: https://github.com/apache/airflow/pull/11652#discussion_r511149526



##########
File path: airflow/www/templates/airflow/dags.html
##########
@@ -78,9 +78,48 @@ <h2>DAGs</h2>
             <th width="12">
               <span id="pause_header" class="material-icons text-muted" title="Use this toggle to pause a DAG. The scheduler won't schedule new tasks instances for a paused DAG. Tasks already running at pause time won't be affected.">info</span>
             </th>
-            <th>DAG</th>
-            <th>Schedule</th>
-            <th>Owner</th>
+            <th>
+              <a href="{{ url_for('Airflow.index', status=request.args.get('status', 'all'), search=request.args.get('search', None), tags=request.args.get('tags', None), sortBy='dag_id', orderBy='asc' if request.args.get('sortBy') != 'dag_id' or request.args.get('orderBy', 'desc') != 'asc' else 'desc' ) }}">
+                DAG
+                <span class="material-icons">
+                  {% if request.args.get('orderBy', 'none') == 'desc' and request.args.get('sortBy') == 'dag_id' %}
+                    expand_less
+                  {% elif request.args.get('orderBy', 'none') == 'asc' and request.args.get('sortBy') == 'dag_id' %}
+                    expand_more
+                  {% else %}
+                    unfold_more
+                  {% endif %}
+                </span>
+              </a>

Review comment:
       This is quite the mouthfull, and repeated three times. Luckily there is `macro` to the rescue.
   
   ```jinja
   {% macro sorted_th_link(name, attr_name) -%}
                  <a href="{{ url_for('Airflow.index',
                                      status=request.args.get('status', 'all'),
                                      search=request.args.get('search', None),
                                      tags=request.args.get('tags', None),
                                      sortBy=attr_name, orderBy='asc' if request.args.get('sortBy') != attr_name or request.args.get('orderBy', 'desc') != 'asc' else 'desc' ) }}"> 
                   {{ name }}
                   <span class="material-icons">
                     {% if request.args.get('orderBy', 'none') == 'desc' and request.args.get('sortBy') == attr_name %}
                       expand_less
                     {% elif request.args.get('orderBy', 'none') == 'asc' and request.args.get('sortBy') == attr_name %}
                       expand_more
                     {% else %}
                       unfold_more
                     {% endif %}
                   </span>
                 </a> 
   {%- endmacro %}
   ```
   
   And then we use it like this:
   
   ```suggestion
                 {{ sorted_th_link("DAG", "dag_id") }}
   ```
   
   Similarly for the other two headers.
   
   @ryanahamilton Should we set aria tags on the span/link?




----------------------------------------------------------------
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.

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