Skip to content

Commit 2800846

Browse files
Karakatiza666Karakatiza666
committed
[web-console] Add transaction status UI - global progress and per-connector icon
Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
1 parent f116754 commit 2800846

19 files changed

+508
-254
lines changed

‎js-packages/web-console/src/assets/fonts/feldera-material-icons.css‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
font-family: "feldera-material-icons";
33
font-display: block;
44
src:
5-
url("feldera-material-icons.woff2?4c3909dc70a1c11a0527de502c9f5a92") format("woff2"),
6-
url("feldera-material-icons.woff?4c3909dc70a1c11a0527de502c9f5a92") format("woff");
5+
url("feldera-material-icons.woff2?415be23e038ee760b279ee35224ed390") format("woff2"),
6+
url("feldera-material-icons.woff?415be23e038ee760b279ee35224ed390") format("woff");
77
}
88

99
.fd {
@@ -170,33 +170,39 @@
170170
.fd-info:before {
171171
content: "\f133";
172172
}
173-
.fd-rocket:before {
173+
.fd-construction:before {
174174
content: "\f134";
175175
}
176-
.fd-circle-plus:before {
176+
.fd-rocket:before {
177177
content: "\f135";
178178
}
179-
.fd-server:before {
179+
.fd-circle-plus:before {
180180
content: "\f136";
181181
}
182-
.fd-circle-stop-locked:before {
182+
.fd-server:before {
183183
content: "\f137";
184184
}
185-
.fd-check:before {
185+
.fd-circle-stop-locked:before {
186186
content: "\f138";
187187
}
188-
.fd-book-open:before {
188+
.fd-receipt-text:before {
189189
content: "\f139";
190190
}
191-
.fd-user:before {
191+
.fd-check:before {
192192
content: "\f13a";
193193
}
194-
.fd-sliders-horizontal:before {
194+
.fd-book-open:before {
195195
content: "\f13b";
196196
}
197-
.fd-mic:before {
197+
.fd-user:before {
198198
content: "\f13c";
199199
}
200-
.fd-circle-alert:before {
200+
.fd-sliders-horizontal:before {
201201
content: "\f13d";
202202
}
203+
.fd-mic:before {
204+
content: "\f13e";
205+
}
206+
.fd-circle-alert:before {
207+
content: "\f13f";
208+
}

‎js-packages/web-console/src/assets/fonts/feldera-material-icons.svg‎

Lines changed: 22 additions & 10 deletions
Loading

‎js-packages/web-console/src/assets/fonts/feldera-material-icons.ttf‎

700 Bytes
Binary file not shown.

‎js-packages/web-console/src/assets/fonts/feldera-material-icons.woff‎

312 Bytes
Binary file not shown.

‎js-packages/web-console/src/assets/fonts/feldera-material-icons.woff2‎

164 Bytes
Binary file not shown.

‎js-packages/web-console/src/assets/icons/feldera-material-icons/construction.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎js-packages/web-console/src/assets/icons/feldera-material-icons/receipt-text.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎js-packages/web-console/src/lib/components/layout/pipelines/PipelineEditLayout.svelte‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44

55
<script lang="ts">
66
import { PaneGroup, Pane, PaneResizer, type PaneAPI } from 'paneforge'
7-
import MonitoringPanel from '$lib/components/pipelines/editor/MonitoringPanel.svelte'
7+
import MonitoringPanel, {
8+
type MonitoringTabs
9+
} from '$lib/components/pipelines/editor/MonitoringPanel.svelte'
810
import PipelineActions from '$lib/components/pipelines/list/Actions.svelte'
911
import { resolve } from '$lib/functions/svelte'
1012
import {
@@ -62,6 +64,10 @@
6264
import StorageInUseBanner from '$lib/components/pipelines/editor/StorageInUseBanner.svelte'
6365
import { getRuntimeVersion } from '$lib/functions/pipelines/runtimeVersion'
6466
import InteractionPanel from '$lib/components/pipelines/editor/InteractionPanel.svelte'
67+
import PipelineTransactionStatus from '$lib/components/pipelines/list/PipelineTransactionStatus.svelte'
68+
import * as TabPerformance from '$lib/components/pipelines/editor/TabPerformance.svelte'
69+
import { untrack } from 'svelte'
70+
import { singleton } from '$lib/functions/common/array'
6571
6672
let {
6773
preloaded,
@@ -288,7 +294,21 @@ example = "1.0"`
288294
}
289295
}
290296
297+
let currentMonitoringTab: MonitoringTabs | null = $state(null)
291298
let currentInteractionTab: string | null = $state(null)
299+
300+
const monitoringTabSwitchTo = async () => {
301+
if (currentMonitoringTab === 'Errors') {
302+
currentMonitoringTab = 'Performance'
303+
}
304+
}
305+
$effect(() => {
306+
pipelineName
307+
untrack(() => pipelineActionCallbacks.add(pipelineName, 'start', monitoringTabSwitchTo))
308+
return () => {
309+
pipelineActionCallbacks.remove(pipelineName, 'start', monitoringTabSwitchTo)
310+
}
311+
})
292312
</script>
293313

294314
{#snippet reviewPipelineChanges()}
@@ -372,6 +392,12 @@ example = "1.0"`
372392
{/snippet}
373393
</PipelineBreadcrumbs>
374394
<PipelineStatus class="h-6" status={pipeline.current.status}></PipelineStatus>
395+
<PipelineTransactionStatus
396+
globalMetrics={metrics.current.global}
397+
onClick={() => {
398+
currentMonitoringTab = TabPerformance.id
399+
}}
400+
></PipelineTransactionStatus>
375401
</div>
376402
{/snippet}
377403
{#snippet beforeEnd()}
@@ -554,7 +580,12 @@ example = "1.0"`
554580
{#if showMonitoringPanel.value && pipeline.current.name}
555581
<PaneResizer class="pane-divider-horizontal my-2" />
556582
<Pane minSize={15} class="flex flex-col !overflow-visible">
557-
<MonitoringPanel {pipeline} {metrics} {currentInteractionTab}></MonitoringPanel>
583+
<MonitoringPanel
584+
{pipeline}
585+
{metrics}
586+
hiddenTabs={singleton(currentInteractionTab)}
587+
bind:currentTab={currentMonitoringTab}
588+
></MonitoringPanel>
558589
</Pane>
559590
{/if}
560591
</PaneGroup>

‎js-packages/web-console/src/lib/components/pipelines/editor/InteractionPanel.svelte‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
1212
let {
1313
pipeline,
14-
metrics,
1514
currentTab: _currentTab = $bindable()
1615
}: {
1716
pipeline: { current: ExtendedPipeline }
@@ -24,12 +23,7 @@
2423
2524
const tabs = $derived([
2625
tuple('Ad-Hoc Queries' as const, TabControlAdhoc, PanelAdHocQuery, false),
27-
tuple(
28-
'Profile Visualizer' as const,
29-
TabProfileVisualizer.Label,
30-
TabProfileVisualizer.default,
31-
true
32-
),
26+
tuple(TabProfileVisualizer.id, TabProfileVisualizer.Label, TabProfileVisualizer.default, true),
3327
tuple('Samply' as const, TabSamplyProfile.Label, TabSamplyProfile.default, false)
3428
])
3529

‎js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
<script lang="ts" module>
2-
const pipelineActionCallbacks = usePipelineActionCallbacks()
2+
export type MonitoringTabs =
3+
| 'Errors'
4+
| 'Performance'
5+
| 'Ad-Hoc Queries'
6+
| 'Changes Stream'
7+
| 'Profile Visualizer'
8+
| 'Samply'
9+
| 'Logs'
310
</script>
411
512
<script lang="ts">
613
import { useLocalStorage } from '$lib/compositions/localStore.svelte'
714
import PanelAdHocQuery from '$lib/components/pipelines/editor/TabAdHocQuery.svelte'
815
import PanelChangeStream from '$lib/components/pipelines/editor/TabChangeStream.svelte'
9-
import PanelPerformance from '$lib/components/pipelines/editor/TabPerformance.svelte'
16+
import * as TabPerformance from '$lib/components/pipelines/editor/TabPerformance.svelte'
1017
import PanelPipelineErrors from '$lib/components/pipelines/editor/TabPipelineErrors.svelte'
1118
import * as TabProfileVisualizer from '$lib/components/pipelines/editor/TabProfileVisualizer.svelte'
1219
import * as TabSamplyProfile from '$lib/components/pipelines/editor/TabSamplyProfile.svelte'
1320
import PanelLogs from '$lib/components/pipelines/editor/TabLogs.svelte'
1421
import { tuple } from '$lib/functions/common/tuple'
1522
import type { ExtendedPipeline } from '$lib/services/pipelineManager'
1623
import type { PipelineMetrics } from '$lib/functions/pipelineMetrics'
17-
import { usePipelineActionCallbacks } from '$lib/compositions/pipelines/usePipelineActionCallbacks.svelte'
1824
import { count } from '$lib/functions/common/array'
1925
import { untrack } from 'svelte'
26+
import { usePipelineActionCallbacks } from '$lib/compositions/pipelines/usePipelineActionCallbacks.svelte'
2027
import ClipboardCopyButton from '$lib/components/other/ClipboardCopyButton.svelte'
2128
import Tooltip from '$lib/components/common/Tooltip.svelte'
2229
import DownloadSupportBundle from '$lib/components/pipelines/editor/DownloadSupportBundle.svelte'
@@ -30,55 +37,52 @@
3037
let {
3138
pipeline,
3239
metrics,
33-
currentInteractionTab
40+
hiddenTabs,
41+
currentTab = $bindable(null)
3442
}: {
3543
pipeline: { current: ExtendedPipeline }
3644
metrics: { current: PipelineMetrics }
37-
currentInteractionTab: string | null
45+
hiddenTabs: string[]
46+
currentTab: MonitoringTabs | null
3847
} = $props()
3948
4049
const pipelineName = $derived(pipeline.current.name)
4150
4251
let tabs = $derived(
4352
[
4453
tuple('Errors' as const, TabControlPipelineErrors, PanelPipelineErrors, false),
45-
tuple('Performance' as const, TabControlPerformance, PanelPerformance, false),
54+
tuple(TabPerformance.id, TabPerformance.Label, TabPerformance.default, false),
4655
tuple('Ad-Hoc Queries' as const, TabControlAdhoc, PanelAdHocQuery, false),
4756
tuple('Changes Stream' as const, TabControlChangeStream, PanelChangeStream, true),
4857
tuple(
49-
'Profile Visualizer' as const,
58+
TabProfileVisualizer.id,
5059
TabProfileVisualizer.Label,
5160
TabProfileVisualizer.default,
5261
true
5362
),
5463
tuple('Samply' as const, TabSamplyProfile.Label, TabSamplyProfile.default, false),
5564
tuple('Logs' as const, TabLogs, PanelLogs, false)
56-
].filter((tab) => tab[0] !== currentInteractionTab)
65+
].filter((tab) => !hiddenTabs.includes(tab[0]))
5766
)
58-
let currentTab = $derived(
59-
useLocalStorage<(typeof tabs)[number][0]>(
60-
'pipelines/' + pipelineName + '/currentMonitoringTab',
61-
'Errors'
62-
)
67+
const currentTabStorage = $derived(
68+
useLocalStorage<MonitoringTabs>('pipelines/' + pipelineName + '/currentMonitoringTab', 'Errors')
6369
)
6470
$effect.pre(() => {
65-
// Switch to the first available tab if the current tab was opened in another panel
66-
if (!tabs.some((tab) => tab[0] === currentTab.value)) currentTab.value = tabs[0][0]
67-
})
68-
69-
const switchTo = async () => {
70-
if (currentTab.value === 'Errors') {
71-
currentTab.value = 'Performance'
71+
// Initialize from storage, or reset to first available tab if current is hidden
72+
if (!tabs.some((t) => t[0] === currentTab)) {
73+
currentTab = tabs.some((t) => t[0] === currentTabStorage.value)
74+
? currentTabStorage.value
75+
: tabs[0][0]
7276
}
73-
}
77+
})
7478
$effect(() => {
75-
pipelineName
76-
untrack(() => pipelineActionCallbacks.add(pipelineName, 'start', switchTo))
77-
return () => {
78-
pipelineActionCallbacks.remove(pipelineName, 'start', switchTo)
79+
if (currentTab !== null) {
80+
currentTabStorage.value = currentTab
7981
}
8082
})
81-
const forgetCurrentTab = async () => currentTab.remove()
83+
84+
const pipelineActionCallbacks = usePipelineActionCallbacks()
85+
const forgetCurrentTab = async () => currentTabStorage.remove()
8286
$effect(() => {
8387
untrack(() => pipelineActionCallbacks.add('', 'delete', forgetCurrentTab))
8488
return () => {
@@ -114,11 +118,6 @@
114118
{/if}
115119
{/snippet}
116120

117-
{#snippet TabControlPerformance()}
118-
<span class="inline sm:hidden"> Perf </span>
119-
<span class="hidden sm:inline"> Performance </span>
120-
{/snippet}
121-
122121
{#snippet TabControlAdhoc()}
123122
<span class="inline sm:hidden"> Ad-Hoc </span>
124123
<span class="hidden sm:inline"> Ad-Hoc Queries </span>
@@ -133,9 +132,9 @@
133132
<span>Logs</span>
134133
{/snippet}
135134

136-
<TabsPanel {tabs} bind:currentTab={currentTab.value} tabProps={{ metrics, pipeline, errors }}>
135+
<TabsPanel {tabs} bind:currentTab={currentTab!} tabProps={{ metrics, pipeline, errors }}>
137136
{#snippet tabBarEnd()}
138-
{#if currentTab.value !== 'Errors'}
137+
{#if currentTab !== 'Errors'}
139138
<div class="ml-auto flex">
140139
<ClipboardCopyButton
141140
value={pipeline.current.id}

0 commit comments

Comments
 (0)