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 f9c0b5a ui: eBPF profile tasks — add refresh button to the task list
head
f9c0b5a is described below
commit f9c0b5afe6b73c52d1bc442c3ae621bceea3bcf3
Author: Wu Sheng <[email protected]>
AuthorDate: Wed May 20 08:22:09 2026 +0800
ui: eBPF profile tasks — add refresh button to the task list head
Operators previously had to reload the whole page (or wait for a service-
selection change) to pick up a newly-created task or one that just
transitioned from PROVISIONING to RUNNING on OAP. Browser reload resets
the selection + filter state in the rest of the view, so the workflow
forced a context loss for what should be a one-button refetch.
Add a small ↻ icon button to the task-list head, sitting next to the
existing "+ New Task" button. Bound to refreshTasks(), disabled while
the fetch is in flight, with a spin animation on the glyph so the
operator sees the refetch is happening (the empty/loading state in the
list body already covers the "no tasks yet" case but doesn't fire when
a refetch happens with a non-empty list — the spin is the only signal).
Disabled when no service is selected (refreshTasks early-returns then).
---
.../src/layer/profiling/LayerEBPFProfilingView.vue | 82 ++++++++++++++++++----
1 file changed, 70 insertions(+), 12 deletions(-)
diff --git a/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
b/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
index 19282af..894aa98 100644
--- a/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
+++ b/apps/ui/src/layer/profiling/LayerEBPFProfilingView.vue
@@ -379,18 +379,39 @@ function toggleNewTaskLabel(l: string): void {
<div class="ebpf-side">
<div class="side-head">
<span>eBPF profile tasks</span>
- <button
- class="btn-new"
- :disabled="!selectedId || !couldProfiling"
- :title="
- !selectedId
- ? 'Pick a service'
- : couldProfiling
- ? 'Create a new eBPF task'
- : 'OAP reports no profilable processes for this service'
- "
- @click="showNewTask = true"
- >+ New Task</button>
+ <div class="side-head-actions">
+ <button
+ class="btn-icon"
+ :disabled="!selectedId || tasksLoading"
+ :title="
+ !selectedId
+ ? 'Pick a service'
+ : tasksLoading
+ ? 'Refreshing…'
+ : 'Refresh task list'
+ "
+ aria-label="Refresh task list"
+ @click="refreshTasks"
+ >
+ <!-- Inline ↻ glyph — avoids pulling an extra icon and stays
+ readable at 10.5px. The CSS spin keyframe runs while
+ `tasksLoading` is true so the operator sees the refetch
+ in-flight. -->
+ <span class="ic" :class="{ spin: tasksLoading }">↻</span>
+ </button>
+ <button
+ class="btn-new"
+ :disabled="!selectedId || !couldProfiling"
+ :title="
+ !selectedId
+ ? 'Pick a service'
+ : couldProfiling
+ ? 'Create a new eBPF task'
+ : 'OAP reports no profilable processes for this service'
+ "
+ @click="showNewTask = true"
+ >+ New Task</button>
+ </div>
</div>
<div v-if="tasksError" class="side-err">{{ tasksError }}</div>
<div v-else-if="tasksLoading && !tasks.length"
class="side-empty">Loading…</div>
@@ -636,6 +657,11 @@ function toggleNewTaskLabel(l: string): void {
font-size: 11.5px;
color: var(--sw-fg-1);
}
+.side-head-actions {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
.btn-new {
font-size: 10.5px;
padding: 2px 8px;
@@ -653,6 +679,38 @@ function toggleNewTaskLabel(l: string): void {
opacity: 0.5;
cursor: not-allowed;
}
+.btn-icon {
+ font-size: 11.5px;
+ line-height: 1;
+ width: 22px;
+ height: 22px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 3px;
+ border: 1px solid var(--sw-line-2);
+ background: var(--sw-bg-1);
+ color: var(--sw-fg-1);
+ cursor: pointer;
+}
+.btn-icon:hover:not(:disabled) {
+ border-color: var(--sw-accent);
+ color: var(--sw-accent);
+}
+.btn-icon:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.btn-icon .ic {
+ display: inline-block;
+ transform-origin: 50% 50%;
+}
+.btn-icon .ic.spin {
+ animation: ebpf-refresh-spin 0.9s linear infinite;
+}
+@keyframes ebpf-refresh-spin {
+ to { transform: rotate(360deg); }
+}
.side-err,
.side-empty {
padding: 12px;
