[GitHub] [airflow] ryanahamilton commented on a change in pull request #11553: Add ability to zoom into Graph view from selection in Tree View

[GitBox]

ryanahamilton commented on a change in pull request #11553:
URL: https://github.com/apache/airflow/pull/11553#discussion_r506633231



##########
File path: airflow/www/templates/airflow/dag.html
##########
@@ -322,21 +322,28 @@ <h4 class="modal-title" id="dagModalLabel">
           </h4>
         </div>
         <div class="modal-body">
-          <form method="POST">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <input type="hidden" name="dag_id" value="{{ dag.dag_id }}">
-            <input type="hidden" name="execution_date">
-            <input type="hidden" name="origin" value="{{ request.base_url }}">
-            <button type="button" id="btn_dagrun_clear" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_clear') }}">
-              Clear
-            </button>
-            <button type="button" id="btn_dagrun_failed" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_failed') }}">
-              Mark Failed
-            </button>
-            <button type="button" id="btn_dagrun_success" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_success') }}">
-              Mark Success
-            </button>
-          </form>
+          <div class="row">
+            <span class="btn-group col-md-8">
+              <form method="POST">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() 
}}">
+                <input type="hidden" name="dag_id" value="{{ dag.dag_id }}">
+                <input type="hidden" name="execution_date">
+                <input type="hidden" name="origin" value="{{ request.base_url 
}}">
+                <button type="button" id="btn_dagrun_clear" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_clear') }}">
+                  Clear
+                </button>
+                <button type="button" id="btn_dagrun_failed" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_failed') }}">
+                  Mark Failed
+                </button>
+                <button type="button" id="btn_dagrun_success" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_success') }}">
+                  Mark Success
+                </button>
+              </form>
+            </span>
+            <span class="col-md-4">

Review comment:
       This will align the button fully to the right.
   ```suggestion
               <span class="col-md-4 text-right">
   ```

##########
File path: airflow/www/templates/airflow/dag.html
##########
@@ -322,21 +322,28 @@ <h4 class="modal-title" id="dagModalLabel">
           </h4>
         </div>
         <div class="modal-body">
-          <form method="POST">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <input type="hidden" name="dag_id" value="{{ dag.dag_id }}">
-            <input type="hidden" name="execution_date">
-            <input type="hidden" name="origin" value="{{ request.base_url }}">
-            <button type="button" id="btn_dagrun_clear" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_clear') }}">
-              Clear
-            </button>
-            <button type="button" id="btn_dagrun_failed" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_failed') }}">
-              Mark Failed
-            </button>
-            <button type="button" id="btn_dagrun_success" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_success') }}">
-              Mark Success
-            </button>
-          </form>
+          <div class="row">
+            <span class="btn-group col-md-8">
+              <form method="POST">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() 
}}">
+                <input type="hidden" name="dag_id" value="{{ dag.dag_id }}">
+                <input type="hidden" name="execution_date">
+                <input type="hidden" name="origin" value="{{ request.base_url 
}}">
+                <button type="button" id="btn_dagrun_clear" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_clear') }}">
+                  Clear
+                </button>
+                <button type="button" id="btn_dagrun_failed" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_failed') }}">
+                  Mark Failed
+                </button>
+                <button type="button" id="btn_dagrun_success" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_success') }}">
+                  Mark Success
+                </button>
+              </form>
+            </span>
+            <span class="col-md-4">
+              <a id="btn_dag_graph_view" class="btn" data-base-url="{{ 
url_for('Airflow.graph') }}" role="button">Show Graph View</a>

Review comment:
       Might make sense to utilize the graph icon in this button?
   
   ```suggestion
                 <a id="btn_dag_graph_view" class="btn" data-base-url="{{ 
url_for('Airflow.graph') }}" role="button">
                   <span class="material-icons" 
aria-hidden="true">account_tree</span>
                   Graph View
                 </a>
   ```
   
![image](https://user-images.githubusercontent.com/3267/96292839-cf858d00-0fb7-11eb-8d0e-aaf37274a9be.png)

##########
File path: airflow/www/templates/airflow/dag.html
##########
@@ -322,21 +322,28 @@ <h4 class="modal-title" id="dagModalLabel">
           </h4>
         </div>
         <div class="modal-body">
-          <form method="POST">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <input type="hidden" name="dag_id" value="{{ dag.dag_id }}">
-            <input type="hidden" name="execution_date">
-            <input type="hidden" name="origin" value="{{ request.base_url }}">
-            <button type="button" id="btn_dagrun_clear" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_clear') }}">
-              Clear
-            </button>
-            <button type="button" id="btn_dagrun_failed" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_failed') }}">
-              Mark Failed
-            </button>
-            <button type="button" id="btn_dagrun_success" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_success') }}">
-              Mark Success
-            </button>
-          </form>
+          <div class="row">
+            <span class="btn-group col-md-8">
+              <form method="POST">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() 
}}">
+                <input type="hidden" name="dag_id" value="{{ dag.dag_id }}">
+                <input type="hidden" name="execution_date">
+                <input type="hidden" name="origin" value="{{ request.base_url 
}}">
+                <button type="button" id="btn_dagrun_clear" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_clear') }}">
+                  Clear
+                </button>
+                <button type="button" id="btn_dagrun_failed" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_failed') }}">
+                  Mark Failed
+                </button>
+                <button type="button" id="btn_dagrun_success" class="btn 
btn-primary" data-action="{{ url_for('Airflow.dagrun_success') }}">
+                  Mark Success
+                </button>
+              </form>
+            </span>
+            <span class="col-md-4">
+              <a id="btn_dag_graph_view" class="btn" data-base-url="{{ 
url_for('Airflow.graph') }}" role="button">Show Graph View</a>

Review comment:
       The Graph view probably does make the most sense since it filters down 
to the single run (that initiated the modal).
   




----------------------------------------------------------------
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:
us...@infra.apache.org