Avoid color info in response of /dag_stats & /task_stats (apache#8742)

* Avoid color info in response of /dag_stats & /task_stats

Currently the color for each state is repeatedly appearing
in the response payload of endpoints /dag_stats and /task_stats.

This can be avoided by having the mapping between state and color in the
static file, and map each state into different color at client side after
client receives the necessary info, instead of passing duplicated
color information in the response payload.

This significantly reduces the size of data to be transferred from
server to client.

(cherry-picked from bed1995)

Author: XD-DENG

airflow/www/templates/airflow/dags.html

@@ -217,6 +217,7 @@ <h2>DAGs</h2>
 
       const DAGS_INDEX = "{{ url_for('admin.index') }}";
       const ENTER_KEY_CODE = 13;
+      const STATE_COLOR = {{ state_color|tojson }};
 
       $('#dag_query').on('keypress', function (e) {
         // check for key press on ENTER (key code 13) to trigger the search
@@ -349,7 +350,7 @@ <h2>DAGs</h2>
               })
               .attr('stroke', function(d) {
                   if (d.count > 0)
-                    return d.color;
+                    return STATE_COLOR[d.state];
                   else {
                     return 'gainsboro';
                   }
@@ -428,7 +429,7 @@ <h2>DAGs</h2>
               })
               .attr('stroke', function(d) {
                   if (d.count > 0)
-                    return d.color;
+                    return STATE_COLOR[d.state];
                   else {
                     return 'gainsboro';
                   }

airflow/www/views.py

@@ -603,8 +603,7 @@ def dag_stats(self, session=None):
                 count = d.get(state, 0)
                 payload[dag_id].append({
                     'state': state,
-                    'count': count,
-                    'color': State.color(state)
+                    'count': count
                 })
         return wwwutils.json_response(payload)
 
@@ -686,8 +685,7 @@ def task_stats(self, session=None):
                 count = data.get(dag_id, {}).get(state, 0)
                 payload[dag_id].append({
                     'state': state,
-                    'count': count,
-                    'color': State.color(state)
+                    'count': count
                 })
         return wwwutils.json_response(payload)
 
@@ -2330,11 +2328,15 @@ def get_int_arg(value, default=0):
             auto_complete_data.add(row.dag_id)
             auto_complete_data.add(row.owners)
 
+        state_color_mapping = State.state_color.copy()
+        state_color_mapping["null"] = state_color_mapping.pop(None)
+
         return self.render(
             'airflow/dags.html',
             dags=dags,
             hide_paused=hide_paused,
             current_page=current_page,
+            state_color=state_color_mapping,
             search_query=arg_search_query if arg_search_query else '',
             page_size=dags_per_page,
             num_of_pages=num_of_pages,

airflow/www_rbac/templates/airflow/dags.html

@@ -244,6 +244,7 @@ <h2>DAGs</h2>
 
     const DAGS_INDEX = "{{ url_for('Airflow.index') }}";
     const ENTER_KEY_CODE = 13;
+    const STATE_COLOR = {{ state_color|tojson }};
 
     $('#tags_filter').select2({
       placeholder: "Filter dags",
@@ -412,7 +413,7 @@ <h2>DAGs</h2>
           })
           .attr('stroke', function(d) {
             if (d.count > 0)
-              return d.color;
+              return STATE_COLOR[d.state];
             else {
               return 'gainsboro';
             }
@@ -489,7 +490,7 @@ <h2>DAGs</h2>
           })
           .attr('stroke', function(d) {
             if (d.count > 0)
-              return d.color;
+              return STATE_COLOR[d.state];
             else {
               return 'gainsboro';
             }

airflow/www_rbac/views.py

@@ -333,6 +333,9 @@ def get_int_arg(value, default=0):
 
         num_of_pages = int(math.ceil(num_of_all_dags / float(dags_per_page)))
 
+        state_color_mapping = State.state_color.copy()
+        state_color_mapping["null"] = state_color_mapping.pop(None)
+
         return self.render_template(
             'airflow/dags.html',
             dags=dags,
@@ -349,6 +352,7 @@ def get_int_arg(value, default=0):
                                            status=arg_status_filter if arg_status_filter else None),
             num_runs=num_runs,
             tags=tags,
+            state_color=state_color_mapping,
             status_filter=arg_status_filter,
             status_count_all=all_dags_count,
             status_count_active=status_count_active,
@@ -396,8 +400,7 @@ def dag_stats(self, session=None):
                 count = data.get(dag_id, {}).get(state, 0)
                 payload[dag_id].append({
                     'state': state,
-                    'count': count,
-                    'color': State.color(state)
+                    'count': count
                 })
 
         return wwwutils.json_response(payload)
@@ -490,8 +493,7 @@ def task_stats(self, session=None):
                 count = data.get(dag_id, {}).get(state, 0)
                 payload[dag_id].append({
                     'state': state,
-                    'count': count,
-                    'color': State.color(state)
+                    'count': count
                 })
         return wwwutils.json_response(payload)
 

tests/www/test_views.py

@@ -1308,7 +1308,7 @@ def test_all_dags(self):
         self.assertIn('example_bash_operator', stats)
         self.assertIn('example_xcom', stats)
         self.assertEqual(set(stats['example_bash_operator'][0].keys()),
-                         {'state', 'count', 'color'})
+                         {'state', 'count'})
 
     def test_selected_dags(self):
         resp = self.app.get(
@@ -1336,7 +1336,7 @@ def test_dag_stats(self):
         self.assertEqual(resp.status_code, 200)
         stats = json.loads(resp.data.decode('utf-8'))
         self.assertEqual(set(list(stats.items())[0][1][0].keys()),
-                         {'state', 'count', 'color'})
+                         {'state', 'count'})
 
 
 if __name__ == '__main__':

tests/www_rbac/test_views.py

@@ -487,6 +487,14 @@ def test_health(self):
     def test_home(self):
         resp = self.client.get('home', follow_redirects=True)
         self.check_content_in_response('DAGs', resp)
+        val_state_color_mapping = 'const STATE_COLOR = {"failed": "red", ' \
+                                  '"null": "lightblue", "queued": "gray", ' \
+                                  '"removed": "lightgrey", "running": "lime", ' \
+                                  '"scheduled": "tan", "shutdown": "blue", ' \
+                                  '"skipped": "pink", "success": "green", ' \
+                                  '"up_for_reschedule": "turquoise", ' \
+                                  '"up_for_retry": "gold", "upstream_failed": "orange"};'
+        self.check_content_in_response(val_state_color_mapping, resp)
 
     def test_home_filter_tags(self):
         from airflow.www_rbac.views import FILTER_TAGS_COOKIE
@@ -548,7 +556,7 @@ def test_task_stats(self):
         resp = self.client.post('task_stats', follow_redirects=True)
         self.assertEqual(resp.status_code, 200)
         self.assertEqual(set(list(resp.json.items())[0][1][0].keys()),
-                         {'state', 'count', 'color'})
+                         {'state', 'count'})
 
     def test_task_stats_only_noncompleted(self):
         conf.set("webserver", "show_recent_stats_for_completed_runs", "False")
@@ -1538,7 +1546,7 @@ def test_dag_stats_success(self):
         resp = self.client.post('dag_stats', follow_redirects=True)
         self.check_content_in_response('example_bash_operator', resp)
         self.assertEqual(set(list(resp.json.items())[0][1][0].keys()),
-                         {'state', 'count', 'color'})
+                         {'state', 'count'})
 
     def test_dag_stats_failure(self):
         self.logout()