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.

Author: XD-DENG

airflow/www/templates/airflow/dags.html

@@ -246,6 +246,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",
@@ -414,7 +415,7 @@ <h2>DAGs</h2>
           })
           .attr('stroke', function(d) {
             if (d.count > 0)
-              return d.color;
+              return STATE_COLOR[d.state];
             else {
               return 'gainsboro';
             }
@@ -491,7 +492,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

@@ -337,6 +337,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,
@@ -353,6 +356,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,
@@ -399,8 +403,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)
@@ -499,8 +502,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

@@ -503,8 +503,23 @@ def test_health(self):
         self.assertIsNone(None, resp_json['scheduler']['latest_scheduler_heartbeat'])
 
     def test_home(self):
-        resp = self.client.get('home', follow_redirects=True)
-        self.check_content_in_response('DAGs', resp)
+        with self.capture_templates() as templates:
+            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)
+
+        self.assertEqual(len(templates), 1)
+        self.assertEqual(templates[0].name, 'airflow/dags.html')
+        state_color_mapping = State.state_color.copy()
+        state_color_mapping["null"] = state_color_mapping.pop(None)
+        self.assertEqual(templates[0].local_context['state_color'], state_color_mapping)
 
     def test_users_list(self):
         resp = self.client.get('users/list', follow_redirects=True)
@@ -585,7 +600,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'})
 
     @conf_vars({("webserver", "show_recent_stats_for_completed_runs"): "False"})
     def test_task_stats_only_noncompleted(self):
@@ -1681,7 +1696,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()