所属实例组
-
diff --git a/app/static/styles.css b/app/static/styles.css
index 1de7e59..b0cf39c 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -1181,16 +1181,6 @@ input:checked + .toggle::after { transform: translateX(16px); }
}
/* Multi-instance control plane */
-select {
- font: inherit;
- letter-spacing: 0;
-}
-
-select:focus-visible {
- outline: 2px solid rgba(71, 118, 231, 0.62);
- outline-offset: 2px;
-}
-
.sidebar-action {
display: flex;
width: 100%;
@@ -1355,61 +1345,14 @@ select:focus-visible {
grid-template-columns: repeat(3, minmax(150px, 1fr));
}
+.group-toolbar {
+ grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) 40px;
+}
+
.search-shell {
max-width: 460px;
}
-.select-shell {
- display: grid;
- width: 100%;
- min-height: 44px;
- grid-template-columns: 16px minmax(0, 1fr) 14px;
- align-items: center;
- gap: 8px;
- padding: 0 11px;
- border: 1px solid var(--line);
- border-radius: 7px;
- background: rgba(255, 255, 255, 0.72);
- transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
-}
-
-.select-shell:focus-within {
- border-color: rgba(71, 118, 231, 0.5);
- background: #fff;
- box-shadow: 0 0 0 3px rgba(71, 118, 231, 0.1);
-}
-
-.select-shell svg {
- width: 15px;
- height: 15px;
- color: var(--ink-faint);
-}
-
-.select-shell select {
- width: 100%;
- min-width: 0;
- height: 42px;
- padding: 0;
- border: 0;
- outline: 0;
- appearance: none;
- color: var(--ink);
- background: transparent;
- font-size: 11px;
- font-weight: 600;
- text-overflow: ellipsis;
-}
-
-.field-select {
- min-height: 44px;
-}
-
-.field-select select {
- height: 42px;
- font-size: 13px;
- font-weight: 500;
-}
-
.custom-select {
position: relative;
width: 100%;
@@ -1457,7 +1400,7 @@ select:focus-visible {
color: var(--ink-faint);
}
-#instance-group-select-value {
+.custom-select-value {
overflow: hidden;
font-size: 13px;
font-weight: 550;
@@ -1492,6 +1435,8 @@ select:focus-visible {
border-radius: 8px;
background: rgba(251, 252, 250, 0.96);
box-shadow: 0 18px 48px rgba(33, 42, 33, 0.16);
+ scrollbar-color: rgba(29, 33, 29, 0.22) transparent;
+ scrollbar-width: thin;
backdrop-filter: blur(22px) saturate(1.12);
-webkit-backdrop-filter: blur(22px) saturate(1.12);
animation: custom-select-enter 150ms ease both;
@@ -1501,6 +1446,19 @@ select:focus-visible {
display: none;
}
+.custom-select-menu::-webkit-scrollbar {
+ width: 6px;
+}
+
+.custom-select-menu::-webkit-scrollbar-thumb {
+ border-radius: 3px;
+ background: rgba(29, 33, 29, 0.22);
+}
+
+.custom-select-menu::-webkit-scrollbar-track {
+ background: transparent;
+}
+
@keyframes custom-select-enter {
from { opacity: 0; transform: translateY(-4px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
@@ -1544,11 +1502,31 @@ select:focus-visible {
background: rgba(29, 33, 29, 0.055);
}
-.custom-select-option-icon.is-enabled {
+.custom-select-option-icon.is-success {
color: #4f6c13;
background: rgba(184, 235, 54, 0.24);
}
+.custom-select-option-icon.is-info {
+ color: #3156ad;
+ background: #dfe8ff;
+}
+
+.custom-select-option-icon.is-warning {
+ color: #795410;
+ background: #fff0ca;
+}
+
+.custom-select-option-icon.is-danger {
+ color: #9a352c;
+ background: rgba(217, 79, 67, 0.13);
+}
+
+.custom-select-option-icon.is-muted {
+ color: var(--ink-faint);
+ background: rgba(29, 33, 29, 0.055);
+}
+
.custom-select-option-icon svg,
.custom-select-option-check svg {
width: 15px;
@@ -1591,6 +1569,46 @@ select:focus-visible {
transform: scale(1);
}
+.custom-select-compact .custom-select-trigger {
+ grid-template-columns: 15px minmax(0, 1fr) 14px;
+ gap: 8px;
+ padding: 0 11px;
+}
+
+.custom-select-compact .custom-select-value {
+ font-size: 11px;
+ font-weight: 620;
+}
+
+.custom-select-compact .custom-select-menu {
+ min-width: max(100%, 180px);
+ max-height: min(260px, calc(100dvh - 150px));
+ gap: 2px;
+ padding: 5px;
+}
+
+.custom-select-compact .custom-select-option {
+ min-height: 42px;
+ grid-template-columns: 28px minmax(0, 1fr) 15px;
+ gap: 8px;
+ padding: 5px 7px;
+}
+
+.custom-select-compact .custom-select-option-icon {
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
+}
+
+.custom-select-compact .custom-select-option-copy strong {
+ font-size: 11px;
+ font-weight: 650;
+}
+
+.custom-select-compact .custom-select-option-copy small {
+ display: none;
+}
+
.resource-loading {
margin-bottom: 13px;
}
@@ -2013,6 +2031,14 @@ select:focus-visible {
.history-toolbar {
grid-template-columns: repeat(2, minmax(160px, 1fr));
}
+
+ .group-toolbar {
+ grid-template-columns: minmax(230px, 1fr) minmax(140px, 170px) 40px;
+ }
+
+ .history-toolbar .custom-select:last-child {
+ grid-column: 1 / -1;
+ }
}
@media (max-width: 760px) {
@@ -2020,11 +2046,19 @@ select:focus-visible {
grid-template-columns: repeat(2, minmax(0, 1fr)) 40px;
}
+ .resource-toolbar.group-toolbar {
+ grid-template-columns: minmax(0, 1fr) 40px;
+ }
+
.resource-toolbar .search-shell {
max-width: none;
grid-column: 1 / -1;
}
+ .custom-select-compact .custom-select-menu {
+ min-width: 100%;
+ }
+
.history-toolbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -2072,7 +2106,11 @@ select:focus-visible {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
}
- .resource-toolbar .select-shell {
+ .resource-toolbar.group-toolbar {
+ grid-template-columns: minmax(0, 1fr) 40px;
+ }
+
+ .resource-toolbar .custom-select {
min-width: 0;
}
diff --git a/tests/test_static_frontend.py b/tests/test_static_frontend.py
new file mode 100644
index 0000000..3e53934
--- /dev/null
+++ b/tests/test_static_frontend.py
@@ -0,0 +1,186 @@
+from __future__ import annotations
+
+import shutil
+import subprocess
+from dataclasses import dataclass, field
+from html.parser import HTMLParser
+from pathlib import Path
+
+PROJECT_ROOT = Path(__file__).resolve().parents[1]
+INDEX_HTML = PROJECT_ROOT / "app" / "static" / "index.html"
+APP_JS = PROJECT_ROOT / "app" / "static" / "app.js"
+
+FILTER_INPUT_IDS = {
+ "instance-group-filter",
+ "instance-status-filter",
+ "group-status-filter",
+ "history-instance-filter",
+ "history-group-filter",
+ "history-status-filter",
+}
+
+VOID_ELEMENTS = {
+ "area",
+ "base",
+ "br",
+ "col",
+ "embed",
+ "hr",
+ "img",
+ "input",
+ "link",
+ "meta",
+ "param",
+ "source",
+ "track",
+ "wbr",
+}
+
+
+@dataclass
+class HtmlNode:
+ tag: str
+ attrs: dict[str, str | None]
+ children: list[HtmlNode] = field(default_factory=list)
+
+
+class HtmlTreeParser(HTMLParser):
+ def __init__(self) -> None:
+ super().__init__(convert_charrefs=True)
+ self.root = HtmlNode("document", {})
+ self._stack = [self.root]
+
+ def handle_starttag(
+ self, tag: str, attrs: list[tuple[str, str | None]]
+ ) -> None:
+ self._append_node(tag, attrs, push=tag not in VOID_ELEMENTS)
+
+ def handle_startendtag(
+ self, tag: str, attrs: list[tuple[str, str | None]]
+ ) -> None:
+ self._append_node(tag, attrs, push=False)
+
+ def handle_endtag(self, tag: str) -> None:
+ for index in range(len(self._stack) - 1, 0, -1):
+ if self._stack[index].tag == tag:
+ del self._stack[index:]
+ return
+
+ def _append_node(
+ self,
+ tag: str,
+ attrs: list[tuple[str, str | None]],
+ *,
+ push: bool,
+ ) -> None:
+ node = HtmlNode(tag, dict(attrs))
+ self._stack[-1].children.append(node)
+ if push:
+ self._stack.append(node)
+
+
+def parse_index() -> HtmlNode:
+ parser = HtmlTreeParser()
+ parser.feed(INDEX_HTML.read_text(encoding="utf-8"))
+ parser.close()
+ return parser.root
+
+
+def descendants(node: HtmlNode) -> list[HtmlNode]:
+ result: list[HtmlNode] = []
+ pending = list(reversed(node.children))
+ while pending:
+ current = pending.pop()
+ result.append(current)
+ pending.extend(reversed(current.children))
+ return result
+
+
+def has_class(node: HtmlNode, class_name: str) -> bool:
+ return class_name in (node.attrs.get("class") or "").split()
+
+
+def test_all_native_selects_are_replaced_by_custom_selects() -> None:
+ nodes = descendants(parse_index())
+
+ assert not [node for node in nodes if node.tag == "select"]
+ assert len([node for node in nodes if "data-custom-select" in node.attrs]) == 7
+
+
+def test_every_custom_select_has_scoped_hidden_input_and_valid_aria() -> None:
+ nodes = descendants(parse_index())
+ roots = [node for node in nodes if "data-custom-select" in node.attrs]
+ controlled_ids: list[str] = []
+ hidden_inputs: list[HtmlNode] = []
+
+ for index, root in enumerate(roots, start=1):
+ scoped_nodes = descendants(root)
+ scoped_hidden = [
+ node
+ for node in scoped_nodes
+ if node.tag == "input"
+ and (node.attrs.get("type") or "").lower() == "hidden"
+ ]
+ triggers = [
+ node
+ for node in scoped_nodes
+ if node.tag == "button" and has_class(node, "custom-select-trigger")
+ ]
+ listboxes = [
+ node for node in scoped_nodes if node.attrs.get("role") == "listbox"
+ ]
+ description = root.attrs.get("id") or f"custom select #{index}"
+
+ assert len(scoped_hidden) == 1, description
+ assert len(triggers) == 1, description
+ assert len(listboxes) == 1, description
+
+ hidden_inputs.extend(scoped_hidden)
+ trigger = triggers[0]
+ listbox = listboxes[0]
+ controls = trigger.attrs.get("aria-controls")
+ listbox_id = listbox.attrs.get("id")
+
+ assert trigger.attrs.get("aria-haspopup") == "listbox", description
+ assert trigger.attrs.get("aria-expanded") in {"true", "false"}, description
+ assert controls, description
+ assert controls == listbox_id, description
+ assert "data-custom-select-menu" in listbox.attrs, description
+ controlled_ids.append(controls)
+
+ assert len(controlled_ids) == len(set(controlled_ids)) == 7
+ assert {
+ node.attrs["id"] for node in hidden_inputs if node.attrs.get("id")
+ } == FILTER_INPUT_IDS
+ assert len(
+ [node for node in hidden_inputs if node.attrs.get("name") == "group_id"]
+ ) == 1
+
+
+def test_shared_option_template_keeps_listbox_option_aria_contract() -> None:
+ source = APP_JS.read_text(encoding="utf-8")
+ marker = "function customSelectOptionMarkup("
+ start = source.index(marker)
+ end = source.index("\nfunction ", start + len(marker))
+ function_source = source[start:end]
+
+ assert source.count(marker) == 1
+ assert source.count("customSelectOptionMarkup(") >= 2
+ assert 'role="option"' in function_source
+ assert 'aria-selected="${selected}"' in function_source
+ assert 'tabindex="-1"' in function_source
+
+
+def test_app_javascript_has_valid_syntax() -> None:
+ node = shutil.which("node")
+ assert node is not None, "Node.js is required to validate app/static/app.js"
+
+ result = subprocess.run(
+ [node, "--check", str(APP_JS)],
+ capture_output=True,
+ text=True,
+ timeout=30,
+ check=False,
+ )
+
+ assert result.returncode == 0, result.stderr or result.stdout