Update Console screenshots (#1473)

Author: JakeSCahill

modules/console/images/broker-overview.png

@@ -132,8 +132,9 @@ include::test-resources:attachment$docker-compose/bootstrap.yml[]
 ======
 <3> Start Docker Compose.
 
+// (step {"runShell": {"command": "docker compose down -v", "workingDirectory": "../docker-compose", "timeout": 60000, "exitCodes": [0,1]}})
 // (step {"runShell": {"command": "docker pull docker.redpanda.com/redpandadata/${REDPANDA_DOCKER_REPO:-redpanda}:${REDPANDA_VERSION:-latest} && docker pull docker.redpanda.com/redpandadata/${CONSOLE_DOCKER_REPO:-console}:${REDPANDA_CONSOLE_VERSION:-latest}", "workingDirectory": "../docker-compose", "timeout": 100000, "exitCodes": [0,1]}})
-// (step {"runShell": {"command": "docker compose up -d --wait", "workingDirectory": "../docker-compose", "timeout": 100000, "exitCodes": [0]}})
+// (step {"runShell": {"command": "docker compose up -d --wait", "workingDirectory": "../docker-compose", "timeout": 150000, "exitCodes": [0]}})
 // (step {"wait": 20000})
 
 When the containers are running, you have:
@@ -182,13 +183,13 @@ image::console:overview.png[]
 // (step {"wait": 30000})
 // (step {"goTo": "http://localhost:8080/overview"})
 // (step {"wait": 30000})
-// (step {"screenshot": {"path": "../../modules/console/images/overview.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/overview.png", "overwrite": "always"}})
 
 To view details about a specific broker, click *View* at the end of the row in the *Broker Details* table.
 
 // (step {"find": {"selector": ".chakra-table tbody tr:last-child td:last-child button", "elementText": "View", "click": true}})
 // (step {"wait": 15000})
-// (step {"screenshot": {"path": "../../modules/console/images/broker-overview.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/broker-overview.png", "overwrite": "always"}})
 
 image::console:broker-overview.png[]
 
@@ -212,12 +213,12 @@ Suppose you're asked to find all transactions related to the `.edu` domain. You
 // (step {"goTo": "http://localhost:8080/topics/transactions"})
 // (step {"wait": 5000})
 . Click *Add filter* > *JavaScript Filter*.
-// (step {"screenshot": {"path": "../../modules/console/images/topic.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/topic.png", "overwrite": "always"}})
 // (step {"find": {"selector": "[data-testid='add-topic-filter']", "elementText": "Add filter", "click": true, "timeout": 10000}})
 // (step {"find": {"selector": "[data-testid='add-topic-filter-javascript']", "elementText": "JavaScript Filter", "click": true, "timeout": 10000}})
 . Give your filter a name, such as "Find .edu domains".
 // (step {"find": {"selector": "[data-testid='add-javascript-filter-name']", "click": true, "type": "Find .edu domains", "timeout": 10000}})
-// (step {"screenshot": {"path": "../../modules/console/images/js-filter.png", "overwrite": "aboveVariation", "maxVariation": 30}})
+// (step {"screenshot": {"path": "../../modules/console/images/js-filter.png", "overwrite": "always"}})
 +
 image::console:js-filter.png[]
 
@@ -237,7 +238,7 @@ By default, the filter runs on the newest 50 messages. You can run the filter on
 // (step {"goTo": "http://localhost:8080/topics/transactions"})
 // (step {"find": {"selector": ".chakra-tabs__tablist button[data-index='5']", "elementText": "Documentation", "click": true, "timeout": 15000}})
 // (step {"wait": 15000})
-// (step {"screenshot": {"path": "../../modules/console/images/topic-documentation.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/topic-documentation.png", "overwrite": "always"}})
 
 See also: xref:console:ui/programmable-push-filters.adoc[].
 
@@ -248,7 +249,7 @@ On the *Schema Registry* page, you see an overview of your schemas. You can crea
 // (step {"find": {"selector": "[data-testid='nav-link-Schema Registry']", "elementText": "Schema Registry", "click": true}})
 // (step {"goTo": "http://localhost:8080/schema-registry/subjects/transactions?version=latest"})
 // (step {"wait": 5000})
-// (step {"screenshot": {"path": "../../modules/console/images/schema-reg.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/schema-reg.png", "overwrite": "always"}})
 
 image::console:schema-reg.png[]
 
@@ -283,7 +284,7 @@ Suppose you're onboarding a new team member who needs access to specific topics.
 // (step {"find": {"selector": "[data-testid='test_field']", "click": true}, "variables": {"password": "$$element.text"}})
 // (step {"find": {"selector": "[data-testid='password-input-toggle']", "click": true}})
 // (step {"wait": 5000})
-// (step {"screenshot": {"path": "../../modules/console/images/user.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/user.png", "overwrite": "always"}})
 . Click *Create*.
 
 image::console:user.png[]
@@ -391,7 +392,7 @@ In the menu, click *Transforms*.
 
 On the *Transforms* page, you see your transform. You can use Redpanda Console to manage and monitor your transforms.
 // (step {"wait": 5000})
-// (step {"screenshot": { "path": "../../modules/console/images/transforms.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/transforms.png", "overwrite": "always"}})
 
 NOTE: The source code for the data transform function is in the {test-source}docker-compose/transform/transform.go[`docker-compose/transform/transform.go` file] that you downloaded. This file is commented to explain how it works.
 
@@ -404,7 +405,7 @@ See also:
 
 // (step {"goTo": "http://localhost:8080/upload-license"})
 // (step {"wait": 5000})
-// (step {"screenshot": { "path": "../../modules/console/images/license.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/license.png", "overwrite": "always"}})
 
 === View audit logs
 
@@ -419,7 +420,7 @@ Audit logs provide a record of all user actions. You can use these logs to track
 . Click the *_redpanda.audit_log* topic in the table.
 // (step {"goTo": "http://localhost:8080/topics/_redpanda.audit_log"})
 // (step {"wait": 5000})
-// (step {"screenshot": { "path": "../../modules/console/images/audit-logs.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/audit-logs.png", "overwrite": "always"}})
 
 image::console:audit-logs.png[]
 
@@ -596,7 +597,7 @@ See also: xref:manage:tiered-storage.adoc[].
 // (step {"wait": 5000})
 // (step {"goTo": "http://localhost:8080/overview"})
 // (step {"wait": 5000})
-// (step {"screenshot": { "path": "../../modules/console/images/degraded-cluster.png", "overwrite": "aboveVariation", "maxVariation": 10}})
+// (step {"screenshot": {"path": "../../modules/console/images/degraded-cluster.png", "overwrite": "always"}})
 // (step {"runShell": { "command": "docker start redpanda-2", "workingDirectory": "../docker-compose"}})
 
 == Deploy a pipeline with Redpanda Connect

modules/console/images/overview.png

@@ -87,6 +87,11 @@ services:
       - 28082:28082
       - 29092:29092
       - 29644:9644
+    healthcheck:
+      test: ["CMD", "rpk", "cluster", "info", "-X", "user=superuser", "-X", "pass=secretpassword"]
+      interval: 10s
+      timeout: 15s
+      retries: 10
     depends_on:
       - redpanda-0
       - minio
@@ -119,6 +124,11 @@ services:
       - 38082:38082
       - 39092:39092
       - 39644:9644
+    healthcheck:
+      test: ["CMD", "rpk", "cluster", "info", "-X", "user=superuser", "-X", "pass=secretpassword"]
+      interval: 10s
+      timeout: 15s
+      retries: 10
     depends_on:
       - redpanda-0
       - minio

modules/console/images/topic.png

@@ -13,39 +13,39 @@
         },
         {
           "stepId": "get-console-version",
-          "description": "Run doc-tools to fetch the Redpanda Console version, capture output.",
+          "description": "Get Redpanda Console version from env var or fetch from doc-tools.",
           "runShell": {
-            "command": "npx doc-tools get-console-version --from-antora | grep CONSOLE_VERSION= | cut -d'=' -f2"
+            "command": "if [ -n \"$REDPANDA_CONSOLE_VERSION\" ]; then echo $REDPANDA_CONSOLE_VERSION; else npx doc-tools get-console-version --from-antora | grep CONSOLE_VERSION= | cut -d'=' -f2; fi"
           },
           "variables": {
             "REDPANDA_CONSOLE_VERSION": "$$stdio.stdout"
           }
         },
         {
           "stepId": "get-console-docker-repo",
-          "description": "Run doc-tools to fetch the Redpanda Console Docker repo, capture output.",
+          "description": "Get Redpanda Console Docker repo from env var or fetch from doc-tools.",
           "runShell": {
-            "command": "npx doc-tools get-console-version --from-antora | grep CONSOLE_DOCKER_REPO= | cut -d'=' -f2"
+            "command": "if [ -n \"$CONSOLE_DOCKER_REPO\" ]; then echo $CONSOLE_DOCKER_REPO; else npx doc-tools get-console-version --from-antora | grep CONSOLE_DOCKER_REPO= | cut -d'=' -f2; fi"
           },
           "variables": {
             "CONSOLE_DOCKER_REPO": "$$stdio.stdout"
           }
         },
         {
           "stepId": "get-redpanda-version",
-          "description": "Run doc-tools to fetch the Redpanda version, capture output.",
+          "description": "Get Redpanda version from env var or fetch from doc-tools.",
           "runShell": {
-            "command": "npx doc-tools get-redpanda-version --from-antora | grep REDPANDA_VERSION= | cut -d'=' -f2"
+            "command": "if [ -n \"$REDPANDA_VERSION\" ]; then echo $REDPANDA_VERSION; else npx doc-tools get-redpanda-version --from-antora | grep REDPANDA_VERSION= | cut -d'=' -f2; fi"
           },
           "variables": {
             "REDPANDA_VERSION": "$$stdio.stdout"
           }
         },
         {
           "stepId": "get-redpanda-docker-repo",
-          "description": "Run doc-tools to fetch the Redpanda Docker repo, capture output.",
+          "description": "Get Redpanda Docker repo from env var or fetch from doc-tools.",
           "runShell": {
-            "command": "npx doc-tools get-redpanda-version --from-antora | grep REDPANDA_DOCKER_REPO= | cut -d'=' -f2"
+            "command": "if [ -n \"$REDPANDA_DOCKER_REPO\" ]; then echo $REDPANDA_DOCKER_REPO; else npx doc-tools get-redpanda-version --from-antora | grep REDPANDA_DOCKER_REPO= | cut -d'=' -f2; fi"
           },
           "variables": {
             "REDPANDA_DOCKER_REPO": "$$stdio.stdout"