Merge pull request #1880 from MetOffice/1049_cache_busting

Add cache busting to CSET web UI to avoid showing old versions

Author: Sylviabohnenstengel

src/CSET/cset_workflow/app/finish_website/bin/finish_website.py

@@ -21,11 +21,11 @@
 web interface.
 """
 
-import datetime
 import json
 import logging
 import os
 import shutil
+import time
 from importlib.metadata import version
 from pathlib import Path
 
@@ -95,11 +95,30 @@ def construct_index(www_content: Path):
         json.dump(index, fp, indent=2)
 
 
+def bust_cache(www_content: Path):
+    """Add a unique query string to static requests to avoid stale caches.
+
+    We only need to do this for static resources referenced from the index page,
+    as each plot already uses a unique filename based on the recipe.
+    """
+    # Search and replace the string "CACHEBUSTER".
+    CACHEBUSTER = str(int(time.time()))
+    with open(www_content / "index.html", "r+t") as fp:
+        content = fp.read()
+        new_content = content.replace("CACHEBUSTER", CACHEBUSTER)
+        fp.seek(0)
+        fp.truncate()
+        fp.write(new_content)
+
+    # Move plots directory so it has a unique name.
+    os.rename(www_content / "plots", www_content / f"plots-{CACHEBUSTER}")
+
+
 def update_workflow_status(www_content: Path):
     """Update the workflow status on the front page of the web interface."""
     with open(www_content / "placeholder.html", "r+t") as fp:
         content = fp.read()
-        finish_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M")
+        finish_time = time.strftime("%Y-%m-%d %H:%M", time.localtime())
         status = f"Completed at {finish_time} using CSET v{version('CSET')}"
         new_content = content.replace(
             '<p id="workflow-status">Unknown</p>',
@@ -125,9 +144,10 @@ def run():
     www_content = Path(os.environ["CYLC_WORKFLOW_SHARE_DIR"] + "/web")
 
     install_website_skeleton(www_root_link, www_content)
+    copy_rose_config(www_content)
     construct_index(www_content)
+    bust_cache(www_content)
     update_workflow_status(www_content)
-    copy_rose_config(www_content)
 
 
 if __name__ == "__main__":  # pragma: no cover

src/CSET/cset_workflow/app/finish_website/file/html/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSET</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css?v=CACHEBUSTER">
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 </head>
 
@@ -32,7 +32,8 @@ <h1>CSET</h1>
             </article>
         </div>
     </main>
-    <script src="script.js"></script>
+    <script>const PLOTS_PATH = "plots-CACHEBUSTER";</script>
+    <script src="script.js?v=CACHEBUSTER"></script>
 </body>
 
 </html>

src/CSET/cset_workflow/app/finish_website/file/html/script.js

@@ -115,7 +115,7 @@ function construct_sidebar_from_data(data) {
             event.preventDefault();
             // Set the appropriate frame layout.
             position == "full" ? ensure_single_frame() : ensure_dual_frame();
-            document.getElementById(`plot-frame-${position}`).src = `plots/${plot}`;
+            document.getElementById(`plot-frame-${position}`).src = `${PLOTS_PATH}/${plot}`;
           });
 
           // Add button to chooser.
@@ -146,7 +146,7 @@ function setup_plots_sidebar() {
     return;
   }
   // Loading of plot index file, and adding them to the sidebar.
-  fetch("plots/index.json")
+  fetch(`${PLOTS_PATH}/index.json`)
     .then((response) => {
       // Display a message and stop if the fetch fails.
       if (!response.ok) {

tests/workflow_utils/test_finish_website.py

@@ -49,6 +49,22 @@ def test_copy_rose_config(monkeypatch, tmp_path):
         assert fp.read() == "Test rose-suite.conf file\n"
 
 
+def test_bust_cache(tmp_path):
+    """Cache busting query string is added where requested."""
+    with open(tmp_path / "index.html", "wt") as fp:
+        fp.write('<img href="image.jpg?v=CACHEBUSTER" />\n')
+    (tmp_path / "plots").mkdir()
+    finish_website.bust_cache(tmp_path)
+    # Check cache busting query has been added.
+    with open(tmp_path / "index.html", "rt") as fp:
+        content = fp.read()
+    assert "CACHEBUSTER" not in content
+    assert re.search(r"\?v=\d+", content)
+    renamed_plot_dir = list(tmp_path.glob("plots-*"))
+    assert len(renamed_plot_dir) == 1
+    assert renamed_plot_dir[0].is_dir()
+
+
 def test_write_workflow_status(tmp_path):
     """Workflow finish status gets written to placeholder file."""
     web_dir = tmp_path / "web"
@@ -150,22 +166,27 @@ def test_entrypoint(monkeypatch):
     # are all run.
     counter = 0
 
+    def increment_counter(*args, **kwargs):
+        nonlocal counter
+        counter += 1
+
+    def check_single_arg(www_content: Path):
+        assert www_content == Path("/share/web")
+        increment_counter()
+
     def check_args(www_root_link: Path, www_content: Path):
         assert www_root_link == Path("/var/www/cset")
         assert www_content == Path("/share/web")
         increment_counter()
 
-    def increment_counter(*args, **kwargs):
-        nonlocal counter
-        counter += 1
-
     monkeypatch.setattr(finish_website, "install_website_skeleton", check_args)
-    monkeypatch.setattr(finish_website, "construct_index", increment_counter)
-    monkeypatch.setattr(finish_website, "update_workflow_status", increment_counter)
-    monkeypatch.setattr(finish_website, "copy_rose_config", increment_counter)
+    monkeypatch.setattr(finish_website, "copy_rose_config", check_single_arg)
+    monkeypatch.setattr(finish_website, "construct_index", check_single_arg)
+    monkeypatch.setattr(finish_website, "bust_cache", check_single_arg)
+    monkeypatch.setattr(finish_website, "update_workflow_status", check_single_arg)
     monkeypatch.setenv("WEB_DIR", "/var/www/cset")
     monkeypatch.setenv("CYLC_WORKFLOW_SHARE_DIR", "/share")
 
     # Check that it runs all the needed subfunctions.
     finish_website.run()
-    assert counter == 4
+    assert counter == 5