feat: add container image cleanup and etag logic

.github/workflows/preview-image-cleanup.yml → .github/workflows/container-image-cleanup.yml

@@ -1,4 +1,4 @@
-name: Preview Image Cleanup
+name: Container Image Cleanup
 
 on:
   workflow_dispatch: {}
@@ -9,7 +9,7 @@ permissions:
   packages: write
 
 jobs:
-  preview-image:
+  container-image-cleanup:
     runs-on: ubuntu-latest
     env:
       CLOSED_PR_RETENTION_DAYS: 14
@@ -59,3 +59,8 @@ jobs:
           package-name: lyne-components/storybook-preview
           package-type: container
           delete-only-untagged-versions: 'true'
+      - uses: actions/delete-package-versions@v4
+        with:
+          package-name: lyne-components/visual-regression
+          package-type: container
+          delete-only-untagged-versions: 'true'

.github/workflows/continuous-integration.yml

@@ -196,3 +196,5 @@ jobs:
             --tag $IMAGE_REPO_VISUAL_REGRESSION:baseline \
             .
           docker push $IMAGE_REPO_VISUAL_REGRESSION:baseline
+        env:
+          DOCKER_BUILDKIT: 1

tools/visual-regression-testing/baseline.Dockerfile

@@ -4,7 +4,15 @@ COPY ./tools/visual-regression-testing/baseline.nginx.conf /etc/nginx/conf.d/def
 COPY ./dist/screenshots /usr/share/nginx/html
 
 USER root
-RUN find /usr/share/nginx/html/*/ -type f ! -iname "*.png" -delete && \
-  find /usr/share/nginx/html/*/ -type d -name failed -prune -exec rm -rf {} \; && \
-  find /usr/share/nginx/html/*/ -type d -name .cache -prune -exec rm -rf {} \;
+# We calculate the sha1 hashes of the png files in order to use it as etag values.
+# This allows us to use HTTP caching mechanisms, which should reduce network traffic
+# for the baseline comparison.
+RUN cd /usr/share/nginx/html && \
+  find ./*/ -type f ! -iname "*.png" -delete && \
+  find ./*/ -type d -name failed -prune -exec rm -rf {} \; && \
+  find ./*/ -type d -name .cache -prune -exec rm -rf {} \; && \
+  echo 'map_hash_bucket_size 16384;' > /etc/nginx/conf.d/1etags.conf && \
+  echo 'map $uri $pngetag {' >> /etc/nginx/conf.d/1etags.conf && \
+  find . -type f -name '*.png' -exec bash -c 'echo "  \"${1:1}\" $(sha1sum $1 | cut -d " " -f 1);"' _ {} \; >> /etc/nginx/conf.d/1etags.conf && \
+  echo '}' >> /etc/nginx/conf.d/1etags.conf
 USER $UID

tools/visual-regression-testing/baseline.nginx.conf

@@ -22,9 +22,22 @@ server {
   location ~* \.(?:png)$ {
     expires 1y;
     access_log off;
+    # We are using a custom etag logic, which uses the sha1 hash of the image as etag.
+    # The default etag from nginx uses file modified time and file size, which is not good
+    # enough for our purposes.
+    etag off;
     add_header Cache-Control "public";
     add_header X-Frame-Options DENY;
     add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
+    add_header Etag $pngetag;
+
+    set $request_etag $http_if_none_match;
+    if ($request_etag = false) {
+      set $request_etag "-";
+    }
+    if ($request_etag = $pngetag) {
+      return 304 "";
+    }
   }
 
   location ~* \.(?:css|js)$ {