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 fd7953c traces: render span Type as colored text, not a background
pill
fd7953c is described below
commit fd7953c794d55b399518deb2d904abef83f54442
Author: Wu Sheng <[email protected]>
AuthorDate: Thu May 21 11:42:30 2026 +0800
traces: render span Type as colored text, not a background pill
Span-kind (Entry/Exit/Local) in the span-detail panels now colors the
word instead of painting a background behind it. Also teach TracePopout's
kindColor about the native Entry/Exit/Local types (it only knew the
Zipkin Server/Client spelling, so native types rendered gray).
---
apps/ui/src/layer/traces/LayerTracesView.vue | 2 +-
apps/ui/src/layer/traces/TracePopout.vue | 7 ++++---
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/apps/ui/src/layer/traces/LayerTracesView.vue
b/apps/ui/src/layer/traces/LayerTracesView.vue
index d0f52d0..809ae7e 100644
--- a/apps/ui/src/layer/traces/LayerTracesView.vue
+++ b/apps/ui/src/layer/traces/LayerTracesView.vue
@@ -1669,7 +1669,7 @@ onBeforeUnmount(() =>
window.removeEventListener('keydown', onPageKeyDown, true)
</dd>
<dt>Instance</dt><dd class="mono">{{
openSpan.serviceInstanceName }}</dd>
<dt>Endpoint</dt><dd class="mono">{{ openSpan.endpointName ||
'—' }}</dd>
- <dt>Type</dt><dd><span class="tr-kind" :style="{ background:
kindColor(openSpan.type) }">{{ openSpan.type }}</span></dd>
+ <dt>Type</dt><dd><span class="tr-kind" :style="{ color:
kindColor(openSpan.type) }">{{ openSpan.type }}</span></dd>
<dt>Component</dt><dd class="mono">{{ openSpan.component || '—'
}}</dd>
<dt>Peer</dt><dd class="mono">{{ openSpan.peer || '—' }}</dd>
<dt>Layer</dt><dd class="mono dim">{{ openSpan.layer || '—'
}}</dd>
diff --git a/apps/ui/src/layer/traces/TracePopout.vue
b/apps/ui/src/layer/traces/TracePopout.vue
index efa6bf9..fcfc920 100644
--- a/apps/ui/src/layer/traces/TracePopout.vue
+++ b/apps/ui/src/layer/traces/TracePopout.vue
@@ -134,8 +134,9 @@ function serviceColor(c: string): string {
}
function kindColor(type: string | null | undefined): string {
const t = (type ?? '').toUpperCase();
- if (t.includes('SERVER')) return 'var(--sw-accent)';
- if (t.includes('CLIENT')) return 'var(--sw-info)';
+ if (t.includes('SERVER') || t === 'ENTRY') return 'var(--sw-accent)';
+ if (t.includes('CLIENT') || t === 'EXIT') return 'var(--sw-info)';
+ if (t === 'LOCAL') return 'var(--sw-purple)';
if (t.includes('PRODUCER') || t.includes('CONSUMER')) return
'var(--sw-purple)';
if (t.includes('DATABASE') || t.includes('SQL') || t.includes('CACHE'))
return 'var(--sw-cyan)';
return 'var(--sw-fg-2)';
@@ -334,7 +335,7 @@ function nativeSpanError(s: NativeSpan): boolean { return
s.isError; }
</dd>
<dt>Instance</dt><dd class="mono wba">{{
selectedSpan.serviceInstanceName }}</dd>
<dt>Endpoint</dt><dd class="mono wba">{{
selectedSpan.endpointName || '—' }}</dd>
- <dt>Type</dt><dd><span class="tp-kind" :style="{ background:
kindColor(selectedSpan.type) }">{{ selectedSpan.type }}</span></dd>
+ <dt>Type</dt><dd><span class="tp-kind" :style="{ color:
kindColor(selectedSpan.type) }">{{ selectedSpan.type }}</span></dd>
<dt>Component</dt><dd class="mono">{{ selectedSpan.component
|| '—' }}</dd>
<dt>Peer</dt><dd class="mono wba">{{ selectedSpan.peer ||
'—' }}</dd>
<dt>Layer</dt><dd class="mono dim">{{ selectedSpan.layer ||
'—' }}</dd>
