From 5d1c9ad3e8bb74d80281683c88c83b2e32a78e98 Mon Sep 17 00:00:00 2001
From: Karakatiza666 <bulakh.96@gmail.com>
Date: Wed, 24 Jun 2026 21:18:32 +0000
Subject: [PATCH] [web-console] Add memory pressure indicator to memory graph

Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
---
 .devcontainer/devcontainer.json               |  2 +-
 .../pipelines/PipelineMemoryGraph.svelte      | 22 ++++++++++++++++---
 .../pipelines/editor/MonitoringPanel.svelte   | 11 ++++++++--
 .../pipelines/editor/TabPerformance.svelte    |  7 +++++-
 .../src/lib/functions/pipelineMetrics.ts      |  3 +--
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 2e721ea10b2..70ac3717fd3 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -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,
diff --git a/js-packages/web-console/src/lib/components/layout/pipelines/PipelineMemoryGraph.svelte b/js-packages/web-console/src/lib/components/layout/pipelines/PipelineMemoryGraph.svelte
index aff4f84b66a..67c733ebce6 100644
--- a/js-packages/web-console/src/lib/components/layout/pipelines/PipelineMemoryGraph.svelte
+++ b/js-packages/web-console/src/lib/components/layout/pipelines/PipelineMemoryGraph.svelte
@@ -16,6 +16,7 @@
   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'
 
@@ -23,13 +24,23 @@
     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,
@@ -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} />
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte
index c43d5d5d14f..e2acfa7bd6d 100755
--- a/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte
+++ b/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte
@@ -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('')
@@ -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}
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
index b0952d05d4e..43a78e592cf 100644
--- a/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
+++ b/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
@@ -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">
diff --git a/js-packages/web-console/src/lib/functions/pipelineMetrics.ts b/js-packages/web-console/src/lib/functions/pipelineMetrics.ts
index da509645838..68b8e38814f 100644
--- a/js-packages/web-console/src/lib/functions/pipelineMetrics.ts
+++ b/js-packages/web-console/src/lib/functions/pipelineMetrics.ts
@@ -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