Small improvements for Airflow UI (#18715)

mnojek · web-flow · commit 2a6cadbd587b · 2021-10-06T14:00:03.000+05:30
I slightly improved some small UI elements that were a bit off. Changes: - Removed `btn-sm` class that made the buttons next to each DAG on DAGs list not centered perfectly. - Changed everywhere the spelling of DAGs (made the last letter lowercase in 'DAGS' word) - Changed the 'Conn Type' and 'Conn Id' to 'Connection Type' Connection Id' (not sure why this was abbreviated everywhere, but if I am not aware of something, let me know and I can revert this change) - Fixed strange use of punctuation marks inside a view when trying to mark DAG run as failed - Changed font size inside DAG run circle from 8 to 9. It makes it a lot more readable and it can still fit even 4-digit numbers. I think we can even go with 10, but then 4-digit numbers slightly overlay the circle (who have 4-digit runs though?). Here I highlighted with red color the old font size and misaligned icons inside button. The green highlights the elements after changes. ![image](https://user-images.githubusercontent.com/7412964/135896512-7b44b5d0-9cda-42d5-a8ea-3151c0dde2a1.png) If there are any other places that I missed or there is something that shouldn't be changed or maybe the change should be reflected in some places that I missed - let me know!
diff --git a/UPDATING.md b/UPDATING.md
@@ -3249,7 +3249,7 @@ Please read through the new scheduler options, defaults have changed since 1.7.1
 
 #### child_process_log_directory
 
-In order to increase the robustness of the scheduler, DAGS are now processed in their own process. Therefore each
+In order to increase the robustness of the scheduler, DAGs are now processed in their own process. Therefore each
 DAG has its own log file for the scheduler. These log files are placed in `child_process_log_directory` which defaults to
 `<AIRFLOW_HOME>/scheduler/latest`. You will need to make sure these log files are removed.
 
diff --git a/airflow/hooks/filesystem.py b/airflow/hooks/filesystem.py
@@ -27,8 +27,8 @@ class FSHook(BaseHook):
     Connection should have a name and a path specified under extra:
 
     example:
-    Conn Id: fs_test
-    Conn Type: File (path)
+    Connection Id: fs_test
+    Connection Type: File (path)
     Host, Schema, Login, Password, Port: empty
     Extra: {"path": "/tmp"}
     """
diff --git a/airflow/models/baseoperator.py b/airflow/models/baseoperator.py
@@ -308,7 +308,7 @@ class derived from this one results in the creation of a task object,
         you know exactly what priority weight each task should have.
         Additionally, when set to ``absolute``, there is bonus effect of
         significantly speeding up the task creation process as for very large
-        DAGS. Options can be set as string or using the constants defined in
+        DAGs. Options can be set as string or using the constants defined in
         the static class ``airflow.utils.WeightRule``
     :type weight_rule: str
     :param queue: which queue to target when running this job. Not
diff --git a/airflow/models/dag.py b/airflow/models/dag.py
@@ -290,7 +290,7 @@ class DAG(LoggingMixin):
         to render templates as native Python types. If False, a Jinja
         ``Environment`` is used to render templates as string values.
     :type render_template_as_native_obj: bool
-    :param tags: List of tags to help filtering DAGS in the UI.
+    :param tags: List of tags to help filtering DAGs in the UI.
     :type tags: List[str]
     """
 
diff --git a/airflow/providers/openfaas/hooks/openfaas.py b/airflow/providers/openfaas/hooks/openfaas.py
@@ -33,7 +33,7 @@ class OpenFaasHook(BaseHook):
     :param function_name: Name of the function, Defaults to None
     :type function_name: str
     :param conn_id: openfaas connection to use, Defaults to open_faas_default
-        for example host : http://openfaas.faas.com, Conn Type : Http
+        for example host : http://openfaas.faas.com, Connection Type : Http
     :type conn_id: str
     """
 
diff --git a/airflow/utils/file.py b/airflow/utils/file.py
@@ -213,7 +213,7 @@ def might_contain_dag(file_path: str, safe_mode: bool, zip_file: Optional[zipfil
     :param file_path: Path to the file to be checked.
     :param safe_mode: Is safe mode active?. If no, this function always returns True.
     :param zip_file: if passed, checks the archive. Otherwise, check local filesystem.
-    :return: True, if file might contain DAGS.
+    :return: True, if file might contain DAGs.
     """
     if not safe_mode:
         return True
diff --git a/airflow/www/forms.py b/airflow/www/forms.py
@@ -176,7 +176,9 @@ class TaskInstanceEditForm(DynamicForm):
 class ConnectionForm(DynamicForm):
     """Form for editing and adding Connection"""
 
-    conn_id = StringField(lazy_gettext('Conn Id'), validators=[InputRequired()], widget=BS3TextFieldWidget())
+    conn_id = StringField(
+        lazy_gettext('Connection Id'), validators=[InputRequired()], widget=BS3TextFieldWidget()
+    )
     description = StringField(lazy_gettext('Description'), widget=BS3TextAreaFieldWidget())
     host = StringField(lazy_gettext('Host'), widget=BS3TextFieldWidget())
     schema = StringField(lazy_gettext('Schema'), widget=BS3TextFieldWidget())
diff --git a/airflow/www/static/js/dags.js b/airflow/www/static/js/dags.js
@@ -233,7 +233,7 @@ function drawDagStatsForDag(dagId, states) {
     .attr('fill', '#51504f')
     .attr('text-anchor', 'middle')
     .attr('vertical-align', 'middle')
-    .attr('font-size', 8)
+    .attr('font-size', 9)
     .attr('y', 3)
     .style('pointer-events', 'none')
     .text((d) => (d.count > 0 ? d.count : ''));
@@ -303,7 +303,7 @@ function drawTaskStatsForDag(dagId, states) {
     .attr('fill', '#51504f')
     .attr('text-anchor', 'middle')
     .attr('vertical-align', 'middle')
-    .attr('font-size', 8)
+    .attr('font-size', 9)
     .attr('y', 3)
     .style('pointer-events', 'none')
     .text((d) => (d.count > 0 ? d.count : ''));
diff --git a/airflow/www/templates/airflow/confirm.html b/airflow/www/templates/airflow/confirm.html
@@ -21,7 +21,7 @@
 
 {% block content %}
   {{ super() }}
-  <h2>Wait a minute.</h2>
+  <h2>Wait a minute</h2>
   <div class="panel">
     <p>{{ message }}</p>
     {% if details %}
@@ -38,7 +38,7 @@ <h2>Wait a minute.</h2>
     {% for name,val in request.values.items() if name != "csrf_token" %}
       <input type="hidden" name="{{ name }}" value="{{ val }}">
     {% endfor %}
-    <button type="submit" class="btn btn-primary">OK!</button>
+    <button type="submit" class="btn btn-primary">OK</button>
     <button type="button" class="btn" onclick="window.history.back(); return false">Cancel</button>
   </form>
 {% endblock %}
diff --git a/airflow/www/templates/airflow/dags.html b/airflow/www/templates/airflow/dags.html
@@ -74,9 +74,9 @@ <h2>{{ page_title }}</h2>
       <div class="row dags-table-header">
         <div class="col-md-4">
           <div class="form-group btn-group">
-            <a href="{{ url_for('Airflow.index', status='all', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'all' else 'btn-default'}}" title="Show active and paused DAGS">All <span class="badge">{{ "{:,}".format(status_count_all) }}</span></a>
-            <a href="{{ url_for('Airflow.index', status='active', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'active' else 'btn-default'}}" title="Show only active DAGS">Active <span class="badge">{{ "{:,}".format(status_count_active) }}</span></a>
-            <a href="{{ url_for('Airflow.index', status='paused', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'paused' else 'btn-default'}}" title="Show only paused DAGS">Paused <span class="badge">{{ "{:,}".format(status_count_paused) }}</span></a>
+            <a href="{{ url_for('Airflow.index', status='all', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'all' else 'btn-default'}}" title="Show active and paused DAGs">All <span class="badge">{{ "{:,}".format(status_count_all) }}</span></a>
+            <a href="{{ url_for('Airflow.index', status='active', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'active' else 'btn-default'}}" title="Show only active DAGs">Active <span class="badge">{{ "{:,}".format(status_count_active) }}</span></a>
+            <a href="{{ url_for('Airflow.index', status='paused', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'paused' else 'btn-default'}}" title="Show only paused DAGs">Paused <span class="badge">{{ "{:,}".format(status_count_paused) }}</span></a>
           </div>
         </div>
         <div class="col-sm-6 col-md-3">
@@ -238,7 +238,7 @@ <h2>{{ page_title }}</h2>
                     </div>
                     {% endif %}
                     {# Use dag_id instead of dag.dag_id, because the DAG might not exist in the webserver's DagBag #}
-                    <a href="{{ url_for('Airflow.delete', dag_id=dag.dag_id) }}" onclick="return confirmDeleteDag(this, '{{ dag.dag_id }}')" title="Delete&nbsp;DAG" aria-label="Delete DAG" class="btn btn-sm btn-default btn-icon-only {{ ' disabled' if not dag.can_delete }}">
+                    <a href="{{ url_for('Airflow.delete', dag_id=dag.dag_id) }}" onclick="return confirmDeleteDag(this, '{{ dag.dag_id }}')" title="Delete&nbsp;DAG" aria-label="Delete DAG" class="btn btn-default btn-icon-only {{ ' disabled' if not dag.can_delete }}">
                       <span class="material-icons text-danger" aria-hidden="true">delete_outline</span>
                     </a>
                   </div>
diff --git a/airflow/www/views.py b/airflow/www/views.py
@@ -3297,12 +3297,12 @@ def _get_connection_types() -> List[Tuple[str, str]]:
         return _connection_types
 
     ConnectionForm.conn_type = SelectField(
-        lazy_gettext('Conn Type'),
+        lazy_gettext('Connection Type'),
         choices=sorted(_get_connection_types(), key=itemgetter(1)),
         widget=Select2Widget(),
         validators=[InputRequired()],
         description="""
-            Conn Type missing?
+            Connection Type missing?
             Make sure you've installed the corresponding Airflow Provider Package.
         """,
     )
diff --git a/docs/apache-airflow-providers-google/example-dags.rst b/docs/apache-airflow-providers-google/example-dags.rst
@@ -15,7 +15,7 @@
     specific language governing permissions and limitations
     under the License.
 
-Example DAGS
+Example DAGs
 ============
 
 You can learn how to use Google integrations by analyzing the source code of the example DAGs:
diff --git a/docs/apache-airflow-providers-google/operators/cloud/dataprep.rst b/docs/apache-airflow-providers-google/operators/cloud/dataprep.rst
@@ -38,7 +38,7 @@ See following example:
 Set values for these fields:
 .. code-block::
 
-  Conn Id: "your_conn_id"
+  Connection Id: "your_conn_id"
   Extra: {"extra__dataprep__token": "TOKEN",
           "extra__dataprep__base_url": "https://api.clouddataprep.com"}
 
diff --git a/docs/apache-airflow-providers-google/secrets-backends/google-cloud-secret-manager-backend.rst b/docs/apache-airflow-providers-google/secrets-backends/google-cloud-secret-manager-backend.rst
@@ -160,8 +160,8 @@ You can use the ``airflow connections get`` command to check if the connection i
 
     $ airflow connections get first-connection
     Id: null
-    Conn Id: first-connection
-    Conn Type: mysql
+    Connection Id: first-connection
+    Connection Type: mysql
     Host: example.org
     Schema: ''
     Login: null
diff --git a/docs/apache-airflow-providers-microsoft-azure/operators/azure_blob_to_gcs.rst b/docs/apache-airflow-providers-microsoft-azure/operators/azure_blob_to_gcs.rst
@@ -38,7 +38,7 @@ Set values for these fields:
 
 .. code-block::
 
-  Conn Id: wasb_default
+  Connection Id: wasb_default
   Login: Storage Account Name
   Password: KEY1
   Extra: {"sas_token": "TOKEN"}
diff --git a/docs/apache-airflow/howto/connection.rst b/docs/apache-airflow/howto/connection.rst
@@ -41,10 +41,10 @@ to create a new connection.
 
 .. image:: ../img/connection_create.png
 
-1. Fill in the ``Conn Id`` field with the desired connection ID. It is
+1. Fill in the ``Connection Id`` field with the desired connection ID. It is
    recommended that you use lower-case characters and separate words with
    underscores.
-2. Choose the connection type with the ``Conn Type`` field.
+2. Choose the connection type with the ``Connection Type`` field.
 3. Fill in the remaining fields. See
    :ref:`manage-connections-connection-types` for a description of the fields
    belonging to the different connection types.
@@ -269,8 +269,8 @@ Additionally, if you have created a connection, you can use ``airflow connection
 
     $ airflow connections get sqlite_default
     Id: 40
-    Conn Id: sqlite_default
-    Conn Type: sqlite
+    Connection Id: sqlite_default
+    Connection Type: sqlite
     Host: /tmp/sqlite_default.db
     Schema: null
     Login: null
diff --git a/docs/apache-airflow/logging-monitoring/logging-tasks.rst b/docs/apache-airflow/logging-monitoring/logging-tasks.rst
@@ -63,7 +63,7 @@ the example below.
     Executor: [SequentialExecutor]
     Task Logging Handlers: [StackdriverTaskHandler]
     SQL Alchemy Conn: [sqlite://///root/airflow/airflow.db]
-    DAGS Folder: [/root/airflow/dags]
+    DAGs Folder: [/root/airflow/dags]
     Plugins Folder: [/root/airflow/plugins]
     Base Log Folder: [/root/airflow/logs]
 
diff --git a/docs/helm-chart/quick-start.rst b/docs/helm-chart/quick-start.rst
@@ -87,7 +87,7 @@ Extending Airflow Image
 -----------------------
 
 The Apache Airflow community, releases Docker Images which are ``reference images`` for Apache Airflow.
-However when you try it out you want to add your own DAGS, custom dependencies,
+However when you try it out you want to add your own DAGs, custom dependencies,
 packages or even custom providers.
 
 The best way to achieve it, is to build your own, custom image.
diff --git a/tests/core/test_impersonation_tests.py b/tests/core/test_impersonation_tests.py
@@ -120,7 +120,7 @@ def setUpClass(cls):
             dag_folder=TEST_DAG_FOLDER,
             include_examples=False,
         )
-        logger.info('Loaded DAGS:')
+        logger.info('Loaded DAGs:')
         logger.info(cls.dagbag.dagbag_report())
 
     def setUp(self):
@@ -187,7 +187,7 @@ def setUp(self):
             dag_folder=TEST_DAG_CORRUPTED_FOLDER,
             include_examples=False,
         )
-        logger.info('Loaded DAGS:')
+        logger.info('Loaded DAGs:')
         logger.info(self.dagbag.dagbag_report())
 
         create_user()
diff --git a/tests/jobs/test_scheduler_job.py b/tests/jobs/test_scheduler_job.py
@@ -1420,7 +1420,7 @@ def evaluate_dagrun(
     ):
 
         """
-        Helper for testing DagRun states with simple two-task DAGS.
+        Helper for testing DagRun states with simple two-task DAGs.
         This is hackish: a dag run is created but its tasks are
         run by a backfill.
         """
@@ -1596,7 +1596,7 @@ def test_dagrun_deadlock_ignore_depends_on_past(self):
 
     def test_scheduler_start_date(self):
         """
-        Test that the scheduler respects start_dates, even when DAGS have run
+        Test that the scheduler respects start_dates, even when DAGs have run
         """
         with create_session() as session:
             dag_id = 'test_start_date_scheduling'
diff --git a/tests/www/views/test_views_tasks.py b/tests/www/views/test_views_tasks.py
@@ -208,12 +208,12 @@ def client_ti_without_dag_edit(app):
         pytest.param(
             f'confirm?task_id=runme_0&dag_id=example_bash_operator&state=success'
             f'&execution_date={DEFAULT_VAL}',
-            ['Wait a minute.'],
+            ['Wait a minute'],
             id="confirm-success",
         ),
         pytest.param(
             f'confirm?task_id=runme_0&dag_id=example_bash_operator&state=failed&execution_date={DEFAULT_VAL}',
-            ['Wait a minute.'],
+            ['Wait a minute'],
             id="confirm-failed",
         ),
         pytest.param(
