Skip to content

[web-console] Add memory pressure indicator to memory graph #6534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Karakatiza666 merged 1 commit into from
Jun 25, 2026
Merged

[web-console] Add memory pressure indicator to memory graph #6534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .devcontainer/devcontainer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"biomejs.biome"
],
"settings": {
"editor.formatOnSave": true,
"editor.formatOnSave": false,
"terminal.integrated.defaultProfile.linux": "bash",
"files.exclude": {
"**/CODE_OF_CONDUCT.md": true,
Expand Down
22 changes: 19 additions & 3 deletions js-packages/web-console/src/lib/components/layout/pipelines/PipelineMemoryGraph.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,31 @@
import { humanSize } from '$lib/functions/common/string'
import { tuple } from '$lib/functions/common/tuple'
import { multihostMemoryLimitMb, timeSeriesAxisMax } from '$lib/functions/pipelineMetrics'
import type { MemoryPressure } from '$lib/services/manager'
import type { Pipeline } from '$lib/services/pipelineManager'
import type { TimeSeriesEntry } from '$lib/types/pipelineManager'

const {
pipeline,
metrics,
refetchMs,
keepMs
keepMs,
memoryPressure
}: {
pipeline: { current: Pipeline }
metrics: TimeSeriesEntry[]
refetchMs: number
keepMs: number
memoryPressure?: MemoryPressure
} = $props()

const pressureChips: Record<MemoryPressure, { label: string; class: string }> = {
low: { label: '', class: 'hidden' },
moderate: { label: 'Moderate pressure', class: 'bg-warning-100-900' },
high: { label: 'High pressure', class: 'bg-error-50-950' },
critical: { label: 'Critical pressure', class: 'bg-error-50-950' }
}
const pressureChip = $derived(memoryPressure ? pressureChips[memoryPressure] : undefined)
use([
LineChart,
GridComponent,
Expand Down Expand Up @@ -209,8 +220,13 @@
</script>

<div class="absolute h-full w-full py-4">
<div class="px-4 pb-2">
Used memory: {humanSize(metrics.at(-1)?.m ?? 0)}
<div class="flex items-center justify-between gap-2 px-4 pb-2">
<span>Used memory: {humanSize(metrics.at(-1)?.m ?? 0)}</span>
{#if pressureChip}
<div class="pointer-events-none flex h-5 rounded px-2 text-sm {pressureChip.class}">
{pressureChip.label}
</div>
{/if}
</div>
{#key pipelineName}
<Chart init={(dom, theme, opts) => (ref = init(dom, theme, opts))} {options} />
Expand Down
11 changes: 9 additions & 2 deletions js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,13 @@

const connectorsWithErrorsCount = $derived(numConnectorsWithProblems(metrics.current))

const memoryPressureErrorCount = $derived.by(() => {
const memoryPressure = metrics.current.global?.memory_pressure
return memoryPressure === 'high' || memoryPressure === 'critical' ? 1 : 0
})

const runtimeErrorsCount = $derived(connectorsWithErrorsCount + memoryPressureErrorCount)

// Local input binding. The committed search (what the list actually runs) lives in
// `logSearch` and only advances on Enter — so typing doesn't search as-you-type.
let logSearchInput = $state('')
Expand Down Expand Up @@ -187,9 +194,9 @@

{#snippet TabControlPerformance()}
{@render TabPerformance.Label()}
{#if connectorsWithErrorsCount > 0}
{#if runtimeErrorsCount > 0}
<span class="ml-1 inline-block min-w-6 rounded preset-filled-error-50-950 px-1 font-medium">
{connectorsWithErrorsCount}
{runtimeErrorsCount}
</span>
{/if}
{/snippet}
Expand Down
7 changes: 6 additions & 1 deletion js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,12 @@
></PipelineThroughputGraph>
</div>
<div class="bg-white-dark relative h-52 w-full max-w-[700px] rounded">
<PipelineMemoryGraph {pipeline} metrics={timeSeries} refetchMs={1000} keepMs={60 * 1000}
<PipelineMemoryGraph
{pipeline}
metrics={timeSeries}
refetchMs={1000}
keepMs={60 * 1000}
memoryPressure={global.memory_pressure}
></PipelineMemoryGraph>
</div>
<div class="bg-white-dark relative h-52 w-full max-w-[700px] rounded">
Expand Down
3 changes: 1 addition & 2 deletions js-packages/web-console/src/lib/functions/pipelineMetrics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,8 +228,7 @@ export const timeSeriesAxisMax = (metrics: TimeSeriesEntry[], now: () => number
export const multihostMemoryLimitMb = (
perHostMemoryMb: number | null | undefined,
hosts: number | null | undefined
): number | undefined =>
perHostMemoryMb ? perHostMemoryMb * Math.max(hosts ?? 1, 1) : undefined
): number | undefined => (perHostMemoryMb ? perHostMemoryMb * Math.max(hosts ?? 1, 1) : undefined)

/**
* @returns Time series of throughput with smoothing window over 3 data intervals
Expand Down
Loading