docs: dropdown images

docs/modules/ROOT/images/args/dropdown/.gitignore

@@ -0,0 +1,2 @@
+custom-webui/
+__pycache__/

docs/modules/ROOT/images/args/dropdown/Makefile

@@ -0,0 +1,2 @@
+CONFIGDIR := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
+include ../../screenshots.mk

docs/modules/ROOT/images/args/dropdown/config.yaml

@@ -0,0 +1,32 @@
+---
+listenAddressSingleHTTPFrontend: 0.0.0.0:11337
+
+logLevel: "WARN"
+checkForUpdates: false
+showFooter: false
+
+entities:
+  - file: entities/containers.json
+    name: container
+
+actions:
+  - title: Print a message
+    icon: smile
+    shell: echo "{{ message }}"
+    arguments:
+      - name: message
+        description: The message you want to print out.
+        choices:
+          - title: Hello
+            value: Hello there!
+          - title: Goodbye
+            value: Aww, goodbye. :-(
+  - title: restart container
+    shell: 'docker restart {{ containerToRestart }}'
+    arguments:
+      - name: containerToRestart
+        entity: container
+        title: Select Container
+        choices:
+          - value: '{{ container.Names }}'
+            title: '{{ container.Names }}'

docs/modules/ROOT/images/args/dropdown/entities/containers.json

@@ -0,0 +1,2 @@
+{"Names":"media-indexer"}
+{"Names":"game-server"}

docs/modules/ROOT/images/args/dropdown/screenshots.ini

@@ -0,0 +1,29 @@
+[DEFAULT]
+base_url = http://localhost:11337/
+dir = .
+width = 800
+height = 480
+post_script_sleep = 0.5
+
+[dropdown]
+url = .
+name = dropdown
+script = setup_dropdown.py
+
+[dropdown-logs-list]
+url = .
+name = dropdown-logs-list
+script = setup_dropdown_logs_list.py
+width = 960
+height = 640
+
+[dropdown-logs-detail]
+url = .
+name = dropdown-logs-detail
+script = setup_dropdown_logs_detail.py
+height = 560
+
+[dropdown-entities]
+url = .
+name = dropdown-entities
+script = setup_dropdown_entities.py

docs/modules/ROOT/images/args/dropdown/setup_dropdown.py

@@ -0,0 +1,37 @@
+#!/usr/bin/env python3
+"""Prepare the dropdown argument form screenshot."""
+
+import time
+
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+
+
+def _wait_for_body_attr(driver, attr, timeout=15):
+    WebDriverWait(driver, timeout).until(
+        lambda d: bool(d.find_element(By.TAG_NAME, "body").get_attribute(attr))
+    )
+
+
+def _open_choice_list(driver, input_id):
+    combobox_input = driver.find_element(By.ID, input_id)
+    combobox_input.click()
+    WebDriverWait(driver, 15).until(
+        lambda d: len(
+            d.find_elements(
+                By.CSS_SELECTOR,
+                f"#{input_id}-listbox li, #{input_id} + input + ul li",
+            )
+        )
+        >= 2
+        or len(d.find_elements(By.CSS_SELECTOR, ".choice-combobox-list li")) >= 2
+    )
+
+
+def run(driver):
+    _wait_for_body_attr(driver, "loaded-dashboard")
+
+    driver.find_element(By.CSS_SELECTOR, '[title="Print a message"]').click()
+    _wait_for_body_attr(driver, "loaded-argument-form")
+    _open_choice_list(driver, "message")
+    time.sleep(0.2)

docs/modules/ROOT/images/args/dropdown/setup_dropdown_entities.py

@@ -0,0 +1,30 @@
+#!/usr/bin/env python3
+"""Prepare the entity-backed dropdown screenshot."""
+
+import time
+
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+
+
+def _wait_for_body_attr(driver, attr, timeout=15):
+    WebDriverWait(driver, timeout).until(
+        lambda d: bool(d.find_element(By.TAG_NAME, "body").get_attribute(attr))
+    )
+
+
+def _open_choice_list(driver, input_id):
+    combobox_input = driver.find_element(By.ID, input_id)
+    combobox_input.click()
+    WebDriverWait(driver, 15).until(
+        lambda d: len(d.find_elements(By.CSS_SELECTOR, ".choice-combobox-list li")) >= 2
+    )
+
+
+def run(driver):
+    _wait_for_body_attr(driver, "loaded-dashboard")
+
+    driver.find_element(By.CSS_SELECTOR, '[title="restart container"]').click()
+    _wait_for_body_attr(driver, "loaded-argument-form")
+    _open_choice_list(driver, "containerToRestart")
+    time.sleep(0.2)

docs/modules/ROOT/images/args/dropdown/setup_dropdown_logs_detail.py

@@ -0,0 +1,73 @@
+#!/usr/bin/env python3
+"""Prepare the execution results screenshot for a dropdown action."""
+
+import time
+
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+
+
+def _wait_for_dashboard(driver, timeout=15):
+    WebDriverWait(driver, timeout).until(
+        lambda d: bool(d.find_element(By.TAG_NAME, "body").get_attribute("loaded-dashboard"))
+    )
+    WebDriverWait(driver, timeout).until(
+        lambda d: d.execute_script("return !!window.client")
+    )
+
+
+def _wait_for_logs_page(driver, timeout=15):
+    WebDriverWait(driver, timeout).until(
+        lambda d: "/logs/" in d.current_url and not d.current_url.rstrip("/").endswith("/logs")
+    )
+
+
+def _wait_for_execution_complete(driver, timeout=15):
+    def finished(d):
+        try:
+            status = d.find_element(By.CSS_SELECTOR, ".execution-dialog-status").text
+        except Exception:
+            return False
+        return "Still running" not in status and "Queued" not in status
+
+    WebDriverWait(driver, timeout).until(finished)
+
+
+def _wait_for_terminal_output(driver, expected, timeout=15):
+    WebDriverWait(driver, timeout).until(
+        lambda d: expected
+        in d.execute_script(
+            """
+            if (!window.terminal || !window.terminal.getBufferAsString) {
+              return '';
+            }
+            return window.terminal.getBufferAsString();
+            """
+        )
+    )
+
+
+def run(driver):
+    _wait_for_dashboard(driver)
+
+    driver.execute_async_script(
+        """
+        const done = arguments[arguments.length - 1];
+        const button = document.querySelector('[title="Print a message"]');
+        const bindingId = button.closest('.action-button').id.replace('actionButton-', '');
+
+        window.client.startAction({
+          bindingId: bindingId,
+          arguments: [{ name: 'message', value: 'Hello there!' }],
+          uniqueTrackingId: 'doc-screenshot-' + Date.now(),
+        }).then((response) => {
+          window.location.href = '/logs/' + response.executionTrackingId;
+          done(true);
+        }).catch((err) => done(String(err)));
+        """
+    )
+
+    _wait_for_logs_page(driver)
+    _wait_for_execution_complete(driver)
+    _wait_for_terminal_output(driver, "Hello there!")
+    time.sleep(0.2)

docs/modules/ROOT/images/args/dropdown/setup_dropdown_logs_list.py

@@ -0,0 +1,45 @@
+#!/usr/bin/env python3
+"""Prepare the logs list screenshot after running a dropdown action."""
+
+import time
+
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+
+
+def _wait_for_dashboard(driver, timeout=15):
+    WebDriverWait(driver, timeout).until(
+        lambda d: bool(d.find_element(By.TAG_NAME, "body").get_attribute("loaded-dashboard"))
+    )
+    WebDriverWait(driver, timeout).until(
+        lambda d: d.execute_script("return !!window.client")
+    )
+
+
+def _wait_for_logs_table(driver, timeout=15):
+    WebDriverWait(driver, timeout).until(
+        lambda d: len(d.find_elements(By.CSS_SELECTOR, ".logs-table tbody tr")) >= 1
+    )
+
+
+def run(driver):
+    _wait_for_dashboard(driver)
+
+    driver.execute_async_script(
+        """
+        const done = arguments[arguments.length - 1];
+        const button = document.querySelector('[title="Print a message"]');
+        const bindingId = button.closest('.action-button').id.replace('actionButton-', '');
+
+        window.client.startAction({
+          bindingId: bindingId,
+          arguments: [{ name: 'message', value: 'Hello there!' }],
+          uniqueTrackingId: 'doc-screenshot-' + Date.now(),
+        }).then(() => done(true)).catch((err) => done(String(err)));
+        """
+    )
+
+    time.sleep(0.5)
+    driver.execute_script("window.location.href = '/logs'")
+    _wait_for_logs_table(driver)
+    time.sleep(0.2)

docs/modules/ROOT/pages/args/input_dropdown.adoc

@@ -24,15 +24,15 @@ Note that when predefined choices are used, the argument type is ignored.
 
 This is what it looks like in the web interface;
 
-image::args4.png[]
+image::args/dropdown/dropdown.png[]
 
 Then finally, when you execute this command, it would look something like this (remember that this is just a basic "echo" command).
 
-image::args-choices-exec.png[]
+image::args/dropdown/dropdown-logs-list.png[]
 
 In the logs, you can then click on the log entry link to open the results;
 
-image::args/input/args3.png[]
+image::args/dropdown/dropdown-logs-detail.png[]
 
 [#args-dropdown-entities]
 == Using Entities in Dropdowns
@@ -60,7 +60,7 @@ entities:
 
 This is what it looks like in the web interface;
 
-image::args-choices-entities.png[]
+image::args/dropdown/dropdown-entities.png[]
 
 include::partial$args/reject-null.adoc[]