Fix keys, add image and comments

docs/extending-locust.rst

@@ -53,6 +53,7 @@ To see a full list of available events see :ref:`events`.
 
 .. _request_context:
 
+
 Request context
 ===============
 
@@ -127,18 +128,11 @@ A working example of extending the web UI, complete with HTML and Javascript exa
 in the `examples directory <https://github.com/locustio/locust/tree/master/examples/>`_ of the Locust
 source code.
 
-- `extend_modern_web_ui.py`: Display a table with content-length for each call.
-- `extend_modern_web_ui_cache_stats.py`: Display Varnish Hit/ Miss stats for each call. Could be easly
-extended to other CDN or cache proxies and gather other cache statistics such as cache age, control, ...  
-
-Since 2.22.0, the modern UI is the new default for the web UI, the `extend_web_ui` folder contains a 
-legacy example.
+*  ``extend_modern_web_ui.py``: Display a table with content-length for each call.
 
-If you want to use the legacy UI, use the `--legacy-ui` flag:
+* ``extend_modern_web_ui_cache_stats.py``: Display Varnish Hit/ Miss stats for each call. Could be easly extended to other CDN or cache proxies and gather other cache statistics such as cache age, control, ...
 
-.. code-block:: console
-
-    $ locust -f examples/extend_web_ui/extend.py --legacy-ui
+ .. image:: images/extend_modern_web_ui_cache_stats.png
 
 
 Adding Authentication to the Web UI
@@ -162,8 +156,6 @@ authentication to the app should be granted.
 A full example can be seen `in the auth example <https://github.com/locustio/locust/tree/master/examples/web_ui_auth.py>`_.
 
 
-
-
 Run a background greenlet
 =========================
 
@@ -195,6 +187,7 @@ For example, you can monitor the fail ratio of your test and stop the run if it
 
 .. _parametrizing-locustfiles:
 
+
 Parametrizing locustfiles
 =========================
 
@@ -237,11 +230,13 @@ You can add your own command line arguments to Locust, using the :py:attr:`init_
 
 When running Locust :ref:`distributed <running-distributed>`, custom arguments are automatically forwarded to workers when the run is started (but not before then, so you cannot rely on forwarded arguments *before* the test has actually started).
 
+
 Test data management
 ====================
 
 There are a number of ways to get test data into your tests (after all, your test is just a Python program and it can do whatever Python can). Locust's events give you fine-grained control over *when* to fetch/release test data. You can find a `detailed example here <https://github.com/locustio/locust/tree/master/examples/test_data_management.py>`_.
 
+
 More examples
 =============
 

examples/extend_modern_web_ui_cache_stats.py

@@ -95,8 +95,11 @@ def extend_stats_response(response):
             if request.path != "/stats/requests":
                 return response
 
+            # extended_stats contains the data where extended_tables looks for its data: "cache-statistics"
             response.set_data(
-                json.dumps({**response.json, "extended_stats": [{"key": "name", "data": get_cache_stats()}]})
+                json.dumps(
+                    {**response.json, "extended_stats": [{"key": "cache-statistics", "data": get_cache_stats()}]}
+                )
             )
 
             return response
@@ -115,10 +118,11 @@ def extend_web_ui():
                 "index.html",
                 template_args={
                     **environment.web_ui.template_args,
-                    "extended_tabs": [{"title": "Cache statistics", "key": "name"}],
+                    # extended_tabs and extended_tables keys must match.
+                    "extended_tabs": [{"title": "Cache statistics", "key": "cache-statistics"}],
                     "extended_tables": [
                         {
-                            "key": "name",
+                            "key": "cache-statistics",
                             "structure": [
                                 {"key": "name", "title": "Name"},
                                 {"key": "hit", "title": "Hit"},