This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 8eb9229 ui: eBPF process picker — dashed ATTRIBUTES separator in the
expand panel
8eb9229 is described below
commit 8eb9229fc79a82d55cf11dc92f4edf6dff219fb1
Author: Wu Sheng <[email protected]>
AuthorDate: Wed May 20 08:48:10 2026 +0800
ui: eBPF process picker — dashed ATTRIBUTES separator in the expand panel
The flattened expand panel reads as a single dl: fixed identity rows
(Process / Service / Instance / Agent / Detect type / Labels) and the
OAP-reported attribute rows (host_ip / container.id / command_line / …)
share the same grid alignment. That alignment is the point — but with
nothing between them, the operator has no quick visual cue for "these
are stack identity vs. these are catch-all attributes".
Add a 1px dashed rule with a small uppercase "ATTRIBUTES" caption sitting
on top of it. Purely a visual divider; the attribute rows below stay at
the dl's first level so the column grid still lines up across both
groups.
Overflow note (not a code change, just docs): the picker popout is
already bounded. Container caps at max-height 480px with the inner
proc-table at `flex: 1 1 auto; overflow: auto`, and the head row is
`position: sticky` so labels stay visible while the body scrolls. Many
processes (with several expanded) scroll inside the popout — they
never spill out of the viewport. Width similarly clamps to
`min(880px, viewport - 16)`.
---
.../src/layer/profiling/LayerEBPFProfilingView.vue | 38 ++++++++++++++++++----
1 file changed, 32 insertions(+), 6 deletions(-)
diff --git a/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
b/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
index a6de8e9..09c19ac 100644
--- a/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
+++ b/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
@@ -676,12 +676,15 @@ function toggleNewTaskLabel(l: string): void {
<span v-for="l in p.labels" :key="l" class="pe-chip">{{
l }}</span>
</dd>
</div>
- <!-- Attributes flattened: each `name=value` is a
- first-level dl row, matching booster-ui's process
- detail card. Nesting them under an "Attributes"
- label added a hierarchy level for no payoff — the
- names (`host_ip`, `container.id`, `command_line`)
- already read as attributes. -->
+ <!-- Attributes flattened to first-level dl rows.
+ A thin "ATTRIBUTES" rule sits above the first one
+ so operators read "these are OAP-reported process
+ attributes" vs. the fixed identity rows above.
+ The label is a divider hint, NOT a header — the
+ rows themselves still live at the same level. -->
+ <div v-if="(p.attributes ?? []).length" class="pe-sep">
+ <span class="pe-sep-label">Attributes</span>
+ </div>
<div v-for="a in p.attributes ?? []" :key="`attr-${a.name}`"
class="pe-row">
<dt>{{ a.name }}</dt>
<dd class="mono">{{ a.value }}</dd>
@@ -1164,6 +1167,29 @@ function toggleNewTaskLabel(l: string): void {
margin: 0 4px 4px 0;
font-size: 10.5px;
}
+/* Separator between the fixed identity rows (Process / Service / …)
+ * and the OAP-reported attribute rows. A 1px dashed rule with a small
+ * uppercase "ATTRIBUTES" caption sitting on top — purely a visual
+ * divider; the attribute rows below it stay structurally at the same
+ * dl level so the grid alignment carries through. */
+.pe-sep {
+ margin: 6px 0 4px;
+ border-top: 1px dashed var(--sw-line);
+ position: relative;
+}
+.pe-sep-label {
+ position: relative;
+ top: -7px;
+ display: inline-block;
+ padding: 0 6px;
+ margin-left: 4px;
+ background: var(--sw-bg-2);
+ color: var(--sw-fg-3);
+ font-size: 9.5px;
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
/* Popout shell — teleported to <body>; Vue scoped CSS data-v-X attrs
* still match because teleport preserves the component's attribute
* assignment. Fixed-positioned, max-height capped so very large process
