From 7b9cb05ad7f2aaf0803f5f0630d9a7f53d834a48 Mon Sep 17 00:00:00 2001 From: veds-g Date: Mon, 3 Feb 2025 19:50:44 +0530 Subject: [PATCH 1/5] processing rate contextual flow Signed-off-by: veds-g --- .../partials/VertexDetails/index.tsx | 1 + .../partials/ProcessingRates/index.tsx | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx index 7cf01e13f2..3619d36410 100644 --- a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx +++ b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx @@ -334,6 +334,7 @@ export function VertexDetails({ {tabValue === PROCESSING_RATES_TAB_INDEX && ( {metric.partition} )} - {formatRate(metric.oneM)} + + + {formatRate(metric.fiveM)} {formatRate(metric.fifteenM)} From 30cd877c176be706fd6e603a6eb9beebb9903fae Mon Sep 17 00:00:00 2001 From: veds-g Date: Wed, 5 Feb 2025 21:27:46 +0530 Subject: [PATCH 2/5] adding CPU and Memory flow Signed-off-by: veds-g --- .../namespaced-numaflow-server.yaml | 110 +++++++++--------- config/advanced-install/numaflow-server.yaml | 110 +++++++++--------- .../numaflow-server-metrics-proxy-config.yaml | 25 ++-- config/install.yaml | 110 +++++++++--------- config/namespace-install.yaml | 110 +++++++++--------- .../common/MetricsModalWrapper/index.tsx | 7 +- .../partials/MetricsModal/index.tsx | 4 +- .../VertexDetails/partials/Buffers/index.tsx | 6 +- .../partials/ProcessingRates/index.tsx | 6 +- .../partials/NodeInfo/partials/Pods/index.tsx | 4 + .../partials/ContainerInfo/index.tsx | 51 +++++++- .../partials/Metrics/utils/constants.ts | 21 ++-- ui/src/types/declarations/pods.d.ts | 4 + 13 files changed, 321 insertions(+), 247 deletions(-) diff --git a/config/advanced-install/namespaced-numaflow-server.yaml b/config/advanced-install/namespaced-numaflow-server.yaml index 3b9a3dd55d..6d097c6111 100644 --- a/config/advanced-install/namespaced-numaflow-server.yaml +++ b/config/advanced-install/namespaced-numaflow-server.yaml @@ -141,15 +141,15 @@ data: which the metrics proxy will connect\n# url: service_name + \".\" + service_namespace + \".svc.cluster.local\" + \":\" + port\n# example for local prometheus service\n# url: http://prometheus-operated.monitoring.svc.cluster.local:9090\npatterns:\n- - name: vertex_gauge\n objects: \n - vertex\n title: Vertex Pending Messages\n - \ description: This query is the total number of pending messages for the vertex\n - \ expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - \ - name: start_time\n required: false\n - name: end_time\n required: - false\n metrics:\n - metric_name: vertex_pending_messages\n display_name: - Vertex Pending Messages\n metric_description: This gauge metric keeps track - of the total number of messages that are waiting to be processed over varying - time frames of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" - or unset for default behaviour\n # unit: Units\n required_filters:\n + name: vertex_gauge\n objects: \n - vertex\n title: Vertex Gauge Metrics\n + \ description: This pattern represents the gauge metrics for a vertex across different + dimensions\n expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n + \ params:\n - name: start_time\n required: false\n - name: end_time\n + \ required: false\n metrics:\n - metric_name: vertex_pending_messages\n + \ display_name: Vertex Pending Messages\n metric_description: This gauge + metric keeps track of the total number of messages that are waiting to be processed + over varying time frames of 1min, 5min, 15min and default period of 2min. \n # + set \"Units\" or unset for default behaviour\n # unit: Units\n required_filters:\n \ - namespace\n - pipeline\n - vertex\n dimensions:\n \ - name: pod\n # expr: optional expression for prometheus query\n \ # overrides the default expression\n filters:\n - @@ -157,23 +157,24 @@ data: false\n - name: vertex\n # expr: optional expression for prometheus query\n # overrides the default expression\n filters:\n - name: period\n required: false\n\n- name: mono_vertex_gauge\n objects: - \n - mono-vertex\n title: Pending Messages Lag\n description: This query - is the total number of pending messages for the mono vertex\n expr: |\n sum($metric_name{$filters}) - by ($dimension, period)\n params:\n - name: start_time\n required: false\n - \ - name: end_time\n required: false\n metrics:\n - metric_name: monovtx_pending\n - \ display_name: MonoVertex Pending Messages\n metric_description: This - gauge metric keeps track of the total number of messages that are waiting to be - processed over varying time frames of 1min, 5min, 15min and default period of - 2min. \n # set \"Units\" or unset for default behaviour\n # unit: Units\n - \ required_filters:\n - namespace\n - mvtx_name\n dimensions:\n - \ - name: pod\n # expr: optional expression for prometheus query\n - \ # overrides the default expression\n filters:\n - - name: pod\n required: false\n - name: period\n required: - false\n - name: mono-vertex\n # expr: optional expression for - prometheus query\n # overrides the default expression\n filters:\n - \ - name: period\n required: false\n\n- name: mono_vertex_histogram\n - \ objects: \n - mono-vertex\n title: Processing Time Latency\n description: - This query pattern is for P99,P90 and P50 quantiles for a mono-vertex across different + \n - mono-vertex\n title: MonoVertex Gauge Metrics\n description: This pattern + represents the gauge metrics for a mono-vertex across different dimensions\n expr: + |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - name: + start_time\n required: false\n - name: end_time\n required: false\n + \ metrics:\n - metric_name: monovtx_pending\n display_name: MonoVertex + Pending Messages\n metric_description: This gauge metric keeps track of the + total number of messages that are waiting to be processed over varying time frames + of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" or unset + for default behaviour\n # unit: Units\n required_filters:\n - + namespace\n - mvtx_name\n dimensions:\n - name: pod\n # + expr: optional expression for prometheus query\n # overrides the default + expression\n filters:\n - name: pod\n required: + false\n - name: period\n required: false\n - name: + mono-vertex\n # expr: optional expression for prometheus query\n # + overrides the default expression\n filters:\n - name: period\n + \ required: false\n\n- name: mono_vertex_histogram\n objects: \n + \ - mono-vertex\n title: MonoVertex Histogram Metrics\n description: This + pattern is for P99, P95, P90 and P50 quantiles for a mono-vertex across different dimensions\n expr: |\n histogram_quantile($quantile, sum by($dimension,le) (rate($metric_name{$filters}[$duration])))\n params:\n - name: quantile\n \ required: true\n - name: duration\n required: true\n - name: @@ -216,37 +217,38 @@ data: behaviour\n # unit: Units\n required_filters:\n - namespace\n \ - mvtx_name\n dimensions:\n - name: mono-vertex\n - name: pod\n filters:\n - name: pod\n required: - false\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n - - vertex\n title: cpu-memory utilization by pod\n description: cpu and memory - utilization by pod for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n - \ params:\n - name: duration\n required: true\n - name: start_time\n - \ required: false\n - name: end_time\n required: false\n metrics: - \n # set your cpu metric name here\n - metric_name: namespace_pod_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of cpu usage over cpu resource limits for a pod.\n required_filters:\n - - namespace\n - pod \n dimensions:\n - name: mono-vertex\n filters: + false\n\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n + \ - vertex\n title: CPU and Memory Utilisation by Pod\n description: This + pattern represents the CPU and Memory utilisation by pod for mono-vertex and vertex\n + \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: + duration\n required: true\n - name: start_time\n required: false\n + \ - name: end_time\n required: false\n metrics: \n # set your cpu metric + name here\n - metric_name: namespace_pod_cpu_utilization\n # set display + name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: + This metric represents the percentage utilization of cpu usage over cpu resource + limits for a pod.\n required_filters:\n - namespace\n - pod + \ \n dimensions:\n - name: mono-vertex\n filters: \n - + name: pod\n # expr: optional expression for prometheus query\n # + overrides the default expression\n required: false\n - name: + vertex\n filters: \n - name: pod\n # expr: optional + expression for prometheus query\n # overrides the default expression + \n required: false\n # set your memory metric name here\n - + metric_name: namespace_pod_memory_utilization\n # set display name as per + metric name\n display_name: Memory Utilization per Pod\n metric_description: + This metric represents the percentage utilization of memory usage in bytes over + memory resource limits for a pod.\n required_filters:\n - namespace\n + \ - pod \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression\n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_pod_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n - \ filters: \n - name: pod\n # expr: optional expression - for prometheus query\n # overrides the default expression \n required: + query\n # overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n- name: container_cpu_memory_utilization\n - \ objects: \n - mono-vertex\n - vertex\n title: cpu-memory utilization - by container for mono-vertex\n description: cpu and memory utilization by container - for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - \ - name: duration\n required: true\n - name: start_time\n required: - false\n - name: end_time\n required: false\n metrics:\n # set your - cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n + overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation + by Container\n description: This pattern represents the CPU and Memory utilisation + by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n + \ params:\n - name: duration\n required: true\n - name: start_time\n + \ required: false\n - name: end_time\n required: false\n metrics:\n + \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n \ # set display name as per metric name\n display_name: CPU Utilization per Container\n metric_description: This metric represents the percentage utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n diff --git a/config/advanced-install/numaflow-server.yaml b/config/advanced-install/numaflow-server.yaml index c5bccc3107..9064a0eb20 100644 --- a/config/advanced-install/numaflow-server.yaml +++ b/config/advanced-install/numaflow-server.yaml @@ -148,15 +148,15 @@ data: which the metrics proxy will connect\n# url: service_name + \".\" + service_namespace + \".svc.cluster.local\" + \":\" + port\n# example for local prometheus service\n# url: http://prometheus-operated.monitoring.svc.cluster.local:9090\npatterns:\n- - name: vertex_gauge\n objects: \n - vertex\n title: Vertex Pending Messages\n - \ description: This query is the total number of pending messages for the vertex\n - \ expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - \ - name: start_time\n required: false\n - name: end_time\n required: - false\n metrics:\n - metric_name: vertex_pending_messages\n display_name: - Vertex Pending Messages\n metric_description: This gauge metric keeps track - of the total number of messages that are waiting to be processed over varying - time frames of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" - or unset for default behaviour\n # unit: Units\n required_filters:\n + name: vertex_gauge\n objects: \n - vertex\n title: Vertex Gauge Metrics\n + \ description: This pattern represents the gauge metrics for a vertex across different + dimensions\n expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n + \ params:\n - name: start_time\n required: false\n - name: end_time\n + \ required: false\n metrics:\n - metric_name: vertex_pending_messages\n + \ display_name: Vertex Pending Messages\n metric_description: This gauge + metric keeps track of the total number of messages that are waiting to be processed + over varying time frames of 1min, 5min, 15min and default period of 2min. \n # + set \"Units\" or unset for default behaviour\n # unit: Units\n required_filters:\n \ - namespace\n - pipeline\n - vertex\n dimensions:\n \ - name: pod\n # expr: optional expression for prometheus query\n \ # overrides the default expression\n filters:\n - @@ -164,23 +164,24 @@ data: false\n - name: vertex\n # expr: optional expression for prometheus query\n # overrides the default expression\n filters:\n - name: period\n required: false\n\n- name: mono_vertex_gauge\n objects: - \n - mono-vertex\n title: Pending Messages Lag\n description: This query - is the total number of pending messages for the mono vertex\n expr: |\n sum($metric_name{$filters}) - by ($dimension, period)\n params:\n - name: start_time\n required: false\n - \ - name: end_time\n required: false\n metrics:\n - metric_name: monovtx_pending\n - \ display_name: MonoVertex Pending Messages\n metric_description: This - gauge metric keeps track of the total number of messages that are waiting to be - processed over varying time frames of 1min, 5min, 15min and default period of - 2min. \n # set \"Units\" or unset for default behaviour\n # unit: Units\n - \ required_filters:\n - namespace\n - mvtx_name\n dimensions:\n - \ - name: pod\n # expr: optional expression for prometheus query\n - \ # overrides the default expression\n filters:\n - - name: pod\n required: false\n - name: period\n required: - false\n - name: mono-vertex\n # expr: optional expression for - prometheus query\n # overrides the default expression\n filters:\n - \ - name: period\n required: false\n\n- name: mono_vertex_histogram\n - \ objects: \n - mono-vertex\n title: Processing Time Latency\n description: - This query pattern is for P99,P90 and P50 quantiles for a mono-vertex across different + \n - mono-vertex\n title: MonoVertex Gauge Metrics\n description: This pattern + represents the gauge metrics for a mono-vertex across different dimensions\n expr: + |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - name: + start_time\n required: false\n - name: end_time\n required: false\n + \ metrics:\n - metric_name: monovtx_pending\n display_name: MonoVertex + Pending Messages\n metric_description: This gauge metric keeps track of the + total number of messages that are waiting to be processed over varying time frames + of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" or unset + for default behaviour\n # unit: Units\n required_filters:\n - + namespace\n - mvtx_name\n dimensions:\n - name: pod\n # + expr: optional expression for prometheus query\n # overrides the default + expression\n filters:\n - name: pod\n required: + false\n - name: period\n required: false\n - name: + mono-vertex\n # expr: optional expression for prometheus query\n # + overrides the default expression\n filters:\n - name: period\n + \ required: false\n\n- name: mono_vertex_histogram\n objects: \n + \ - mono-vertex\n title: MonoVertex Histogram Metrics\n description: This + pattern is for P99, P95, P90 and P50 quantiles for a mono-vertex across different dimensions\n expr: |\n histogram_quantile($quantile, sum by($dimension,le) (rate($metric_name{$filters}[$duration])))\n params:\n - name: quantile\n \ required: true\n - name: duration\n required: true\n - name: @@ -223,37 +224,38 @@ data: behaviour\n # unit: Units\n required_filters:\n - namespace\n \ - mvtx_name\n dimensions:\n - name: mono-vertex\n - name: pod\n filters:\n - name: pod\n required: - false\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n - - vertex\n title: cpu-memory utilization by pod\n description: cpu and memory - utilization by pod for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n - \ params:\n - name: duration\n required: true\n - name: start_time\n - \ required: false\n - name: end_time\n required: false\n metrics: - \n # set your cpu metric name here\n - metric_name: namespace_pod_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of cpu usage over cpu resource limits for a pod.\n required_filters:\n - - namespace\n - pod \n dimensions:\n - name: mono-vertex\n filters: + false\n\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n + \ - vertex\n title: CPU and Memory Utilisation by Pod\n description: This + pattern represents the CPU and Memory utilisation by pod for mono-vertex and vertex\n + \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: + duration\n required: true\n - name: start_time\n required: false\n + \ - name: end_time\n required: false\n metrics: \n # set your cpu metric + name here\n - metric_name: namespace_pod_cpu_utilization\n # set display + name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: + This metric represents the percentage utilization of cpu usage over cpu resource + limits for a pod.\n required_filters:\n - namespace\n - pod + \ \n dimensions:\n - name: mono-vertex\n filters: \n - + name: pod\n # expr: optional expression for prometheus query\n # + overrides the default expression\n required: false\n - name: + vertex\n filters: \n - name: pod\n # expr: optional + expression for prometheus query\n # overrides the default expression + \n required: false\n # set your memory metric name here\n - + metric_name: namespace_pod_memory_utilization\n # set display name as per + metric name\n display_name: Memory Utilization per Pod\n metric_description: + This metric represents the percentage utilization of memory usage in bytes over + memory resource limits for a pod.\n required_filters:\n - namespace\n + \ - pod \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression\n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_pod_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n - \ filters: \n - name: pod\n # expr: optional expression - for prometheus query\n # overrides the default expression \n required: + query\n # overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n- name: container_cpu_memory_utilization\n - \ objects: \n - mono-vertex\n - vertex\n title: cpu-memory utilization - by container for mono-vertex\n description: cpu and memory utilization by container - for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - \ - name: duration\n required: true\n - name: start_time\n required: - false\n - name: end_time\n required: false\n metrics:\n # set your - cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n + overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation + by Container\n description: This pattern represents the CPU and Memory utilisation + by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n + \ params:\n - name: duration\n required: true\n - name: start_time\n + \ required: false\n - name: end_time\n required: false\n metrics:\n + \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n \ # set display name as per metric name\n display_name: CPU Utilization per Container\n metric_description: This metric represents the percentage utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n diff --git a/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml b/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml index 513d19dc67..269132c099 100644 --- a/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml +++ b/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml @@ -12,8 +12,8 @@ data: - name: vertex_gauge objects: - vertex - title: Vertex Pending Messages - description: This query is the total number of pending messages for the vertex + title: Vertex Gauge Metrics + description: This pattern represents the gauge metrics for a vertex across different dimensions expr: | sum($metric_name{$filters}) by ($dimension, period) params: @@ -46,12 +46,12 @@ data: filters: - name: period required: false - + - name: mono_vertex_gauge objects: - mono-vertex - title: Pending Messages Lag - description: This query is the total number of pending messages for the mono vertex + title: MonoVertex Gauge Metrics + description: This pattern represents the gauge metrics for a mono-vertex across different dimensions expr: | sum($metric_name{$filters}) by ($dimension, period) params: @@ -87,8 +87,8 @@ data: - name: mono_vertex_histogram objects: - mono-vertex - title: Processing Time Latency - description: This query pattern is for P99,P90 and P50 quantiles for a mono-vertex across different dimensions + title: MonoVertex Histogram Metrics + description: This pattern is for P99, P95, P90 and P50 quantiles for a mono-vertex across different dimensions expr: | histogram_quantile($quantile, sum by($dimension,le) (rate($metric_name{$filters}[$duration]))) params: @@ -190,12 +190,13 @@ data: filters: - name: pod required: false + - name: pod_cpu_memory_utilization objects: - mono-vertex - vertex - title: cpu-memory utilization by pod - description: cpu and memory utilization by pod for mono-vertex + title: CPU and Memory Utilisation by Pod + description: This pattern represents the CPU and Memory utilisation by pod for mono-vertex and vertex expr: avg_over_time($metric_name{$filters}[$duration]) params: - name: duration @@ -247,12 +248,13 @@ data: # expr: optional expression for prometheus query # overrides the default expression required: false + - name: container_cpu_memory_utilization objects: - mono-vertex - vertex - title: cpu-memory utilization by container for mono-vertex - description: cpu and memory utilization by container for mono-vertex + title: CPU and Memory Utilisation by Container + description: This pattern represents the CPU and Memory utilisation by container for mono-vertex and vertex expr: avg_over_time($metric_name{$filters}[$duration]) params: - name: duration @@ -302,4 +304,3 @@ data: # expr: optional expression for prometheus query # overrides the default expression required: false - diff --git a/config/install.yaml b/config/install.yaml index e22f95c41d..27e46e8f5f 100644 --- a/config/install.yaml +++ b/config/install.yaml @@ -28876,15 +28876,15 @@ data: which the metrics proxy will connect\n# url: service_name + \".\" + service_namespace + \".svc.cluster.local\" + \":\" + port\n# example for local prometheus service\n# url: http://prometheus-operated.monitoring.svc.cluster.local:9090\npatterns:\n- - name: vertex_gauge\n objects: \n - vertex\n title: Vertex Pending Messages\n - \ description: This query is the total number of pending messages for the vertex\n - \ expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - \ - name: start_time\n required: false\n - name: end_time\n required: - false\n metrics:\n - metric_name: vertex_pending_messages\n display_name: - Vertex Pending Messages\n metric_description: This gauge metric keeps track - of the total number of messages that are waiting to be processed over varying - time frames of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" - or unset for default behaviour\n # unit: Units\n required_filters:\n + name: vertex_gauge\n objects: \n - vertex\n title: Vertex Gauge Metrics\n + \ description: This pattern represents the gauge metrics for a vertex across different + dimensions\n expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n + \ params:\n - name: start_time\n required: false\n - name: end_time\n + \ required: false\n metrics:\n - metric_name: vertex_pending_messages\n + \ display_name: Vertex Pending Messages\n metric_description: This gauge + metric keeps track of the total number of messages that are waiting to be processed + over varying time frames of 1min, 5min, 15min and default period of 2min. \n # + set \"Units\" or unset for default behaviour\n # unit: Units\n required_filters:\n \ - namespace\n - pipeline\n - vertex\n dimensions:\n \ - name: pod\n # expr: optional expression for prometheus query\n \ # overrides the default expression\n filters:\n - @@ -28892,23 +28892,24 @@ data: false\n - name: vertex\n # expr: optional expression for prometheus query\n # overrides the default expression\n filters:\n - name: period\n required: false\n\n- name: mono_vertex_gauge\n objects: - \n - mono-vertex\n title: Pending Messages Lag\n description: This query - is the total number of pending messages for the mono vertex\n expr: |\n sum($metric_name{$filters}) - by ($dimension, period)\n params:\n - name: start_time\n required: false\n - \ - name: end_time\n required: false\n metrics:\n - metric_name: monovtx_pending\n - \ display_name: MonoVertex Pending Messages\n metric_description: This - gauge metric keeps track of the total number of messages that are waiting to be - processed over varying time frames of 1min, 5min, 15min and default period of - 2min. \n # set \"Units\" or unset for default behaviour\n # unit: Units\n - \ required_filters:\n - namespace\n - mvtx_name\n dimensions:\n - \ - name: pod\n # expr: optional expression for prometheus query\n - \ # overrides the default expression\n filters:\n - - name: pod\n required: false\n - name: period\n required: - false\n - name: mono-vertex\n # expr: optional expression for - prometheus query\n # overrides the default expression\n filters:\n - \ - name: period\n required: false\n\n- name: mono_vertex_histogram\n - \ objects: \n - mono-vertex\n title: Processing Time Latency\n description: - This query pattern is for P99,P90 and P50 quantiles for a mono-vertex across different + \n - mono-vertex\n title: MonoVertex Gauge Metrics\n description: This pattern + represents the gauge metrics for a mono-vertex across different dimensions\n expr: + |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - name: + start_time\n required: false\n - name: end_time\n required: false\n + \ metrics:\n - metric_name: monovtx_pending\n display_name: MonoVertex + Pending Messages\n metric_description: This gauge metric keeps track of the + total number of messages that are waiting to be processed over varying time frames + of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" or unset + for default behaviour\n # unit: Units\n required_filters:\n - + namespace\n - mvtx_name\n dimensions:\n - name: pod\n # + expr: optional expression for prometheus query\n # overrides the default + expression\n filters:\n - name: pod\n required: + false\n - name: period\n required: false\n - name: + mono-vertex\n # expr: optional expression for prometheus query\n # + overrides the default expression\n filters:\n - name: period\n + \ required: false\n\n- name: mono_vertex_histogram\n objects: \n + \ - mono-vertex\n title: MonoVertex Histogram Metrics\n description: This + pattern is for P99, P95, P90 and P50 quantiles for a mono-vertex across different dimensions\n expr: |\n histogram_quantile($quantile, sum by($dimension,le) (rate($metric_name{$filters}[$duration])))\n params:\n - name: quantile\n \ required: true\n - name: duration\n required: true\n - name: @@ -28951,37 +28952,38 @@ data: behaviour\n # unit: Units\n required_filters:\n - namespace\n \ - mvtx_name\n dimensions:\n - name: mono-vertex\n - name: pod\n filters:\n - name: pod\n required: - false\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n - - vertex\n title: cpu-memory utilization by pod\n description: cpu and memory - utilization by pod for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n - \ params:\n - name: duration\n required: true\n - name: start_time\n - \ required: false\n - name: end_time\n required: false\n metrics: - \n # set your cpu metric name here\n - metric_name: namespace_pod_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of cpu usage over cpu resource limits for a pod.\n required_filters:\n - - namespace\n - pod \n dimensions:\n - name: mono-vertex\n filters: + false\n\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n + \ - vertex\n title: CPU and Memory Utilisation by Pod\n description: This + pattern represents the CPU and Memory utilisation by pod for mono-vertex and vertex\n + \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: + duration\n required: true\n - name: start_time\n required: false\n + \ - name: end_time\n required: false\n metrics: \n # set your cpu metric + name here\n - metric_name: namespace_pod_cpu_utilization\n # set display + name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: + This metric represents the percentage utilization of cpu usage over cpu resource + limits for a pod.\n required_filters:\n - namespace\n - pod + \ \n dimensions:\n - name: mono-vertex\n filters: \n - + name: pod\n # expr: optional expression for prometheus query\n # + overrides the default expression\n required: false\n - name: + vertex\n filters: \n - name: pod\n # expr: optional + expression for prometheus query\n # overrides the default expression + \n required: false\n # set your memory metric name here\n - + metric_name: namespace_pod_memory_utilization\n # set display name as per + metric name\n display_name: Memory Utilization per Pod\n metric_description: + This metric represents the percentage utilization of memory usage in bytes over + memory resource limits for a pod.\n required_filters:\n - namespace\n + \ - pod \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression\n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_pod_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n - \ filters: \n - name: pod\n # expr: optional expression - for prometheus query\n # overrides the default expression \n required: + query\n # overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n- name: container_cpu_memory_utilization\n - \ objects: \n - mono-vertex\n - vertex\n title: cpu-memory utilization - by container for mono-vertex\n description: cpu and memory utilization by container - for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - \ - name: duration\n required: true\n - name: start_time\n required: - false\n - name: end_time\n required: false\n metrics:\n # set your - cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n + overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation + by Container\n description: This pattern represents the CPU and Memory utilisation + by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n + \ params:\n - name: duration\n required: true\n - name: start_time\n + \ required: false\n - name: end_time\n required: false\n metrics:\n + \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n \ # set display name as per metric name\n display_name: CPU Utilization per Container\n metric_description: This metric represents the percentage utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n diff --git a/config/namespace-install.yaml b/config/namespace-install.yaml index 724b99e103..332baac0b9 100644 --- a/config/namespace-install.yaml +++ b/config/namespace-install.yaml @@ -28764,15 +28764,15 @@ data: which the metrics proxy will connect\n# url: service_name + \".\" + service_namespace + \".svc.cluster.local\" + \":\" + port\n# example for local prometheus service\n# url: http://prometheus-operated.monitoring.svc.cluster.local:9090\npatterns:\n- - name: vertex_gauge\n objects: \n - vertex\n title: Vertex Pending Messages\n - \ description: This query is the total number of pending messages for the vertex\n - \ expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - \ - name: start_time\n required: false\n - name: end_time\n required: - false\n metrics:\n - metric_name: vertex_pending_messages\n display_name: - Vertex Pending Messages\n metric_description: This gauge metric keeps track - of the total number of messages that are waiting to be processed over varying - time frames of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" - or unset for default behaviour\n # unit: Units\n required_filters:\n + name: vertex_gauge\n objects: \n - vertex\n title: Vertex Gauge Metrics\n + \ description: This pattern represents the gauge metrics for a vertex across different + dimensions\n expr: |\n sum($metric_name{$filters}) by ($dimension, period)\n + \ params:\n - name: start_time\n required: false\n - name: end_time\n + \ required: false\n metrics:\n - metric_name: vertex_pending_messages\n + \ display_name: Vertex Pending Messages\n metric_description: This gauge + metric keeps track of the total number of messages that are waiting to be processed + over varying time frames of 1min, 5min, 15min and default period of 2min. \n # + set \"Units\" or unset for default behaviour\n # unit: Units\n required_filters:\n \ - namespace\n - pipeline\n - vertex\n dimensions:\n \ - name: pod\n # expr: optional expression for prometheus query\n \ # overrides the default expression\n filters:\n - @@ -28780,23 +28780,24 @@ data: false\n - name: vertex\n # expr: optional expression for prometheus query\n # overrides the default expression\n filters:\n - name: period\n required: false\n\n- name: mono_vertex_gauge\n objects: - \n - mono-vertex\n title: Pending Messages Lag\n description: This query - is the total number of pending messages for the mono vertex\n expr: |\n sum($metric_name{$filters}) - by ($dimension, period)\n params:\n - name: start_time\n required: false\n - \ - name: end_time\n required: false\n metrics:\n - metric_name: monovtx_pending\n - \ display_name: MonoVertex Pending Messages\n metric_description: This - gauge metric keeps track of the total number of messages that are waiting to be - processed over varying time frames of 1min, 5min, 15min and default period of - 2min. \n # set \"Units\" or unset for default behaviour\n # unit: Units\n - \ required_filters:\n - namespace\n - mvtx_name\n dimensions:\n - \ - name: pod\n # expr: optional expression for prometheus query\n - \ # overrides the default expression\n filters:\n - - name: pod\n required: false\n - name: period\n required: - false\n - name: mono-vertex\n # expr: optional expression for - prometheus query\n # overrides the default expression\n filters:\n - \ - name: period\n required: false\n\n- name: mono_vertex_histogram\n - \ objects: \n - mono-vertex\n title: Processing Time Latency\n description: - This query pattern is for P99,P90 and P50 quantiles for a mono-vertex across different + \n - mono-vertex\n title: MonoVertex Gauge Metrics\n description: This pattern + represents the gauge metrics for a mono-vertex across different dimensions\n expr: + |\n sum($metric_name{$filters}) by ($dimension, period)\n params:\n - name: + start_time\n required: false\n - name: end_time\n required: false\n + \ metrics:\n - metric_name: monovtx_pending\n display_name: MonoVertex + Pending Messages\n metric_description: This gauge metric keeps track of the + total number of messages that are waiting to be processed over varying time frames + of 1min, 5min, 15min and default period of 2min. \n # set \"Units\" or unset + for default behaviour\n # unit: Units\n required_filters:\n - + namespace\n - mvtx_name\n dimensions:\n - name: pod\n # + expr: optional expression for prometheus query\n # overrides the default + expression\n filters:\n - name: pod\n required: + false\n - name: period\n required: false\n - name: + mono-vertex\n # expr: optional expression for prometheus query\n # + overrides the default expression\n filters:\n - name: period\n + \ required: false\n\n- name: mono_vertex_histogram\n objects: \n + \ - mono-vertex\n title: MonoVertex Histogram Metrics\n description: This + pattern is for P99, P95, P90 and P50 quantiles for a mono-vertex across different dimensions\n expr: |\n histogram_quantile($quantile, sum by($dimension,le) (rate($metric_name{$filters}[$duration])))\n params:\n - name: quantile\n \ required: true\n - name: duration\n required: true\n - name: @@ -28839,37 +28840,38 @@ data: behaviour\n # unit: Units\n required_filters:\n - namespace\n \ - mvtx_name\n dimensions:\n - name: mono-vertex\n - name: pod\n filters:\n - name: pod\n required: - false\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n - - vertex\n title: cpu-memory utilization by pod\n description: cpu and memory - utilization by pod for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n - \ params:\n - name: duration\n required: true\n - name: start_time\n - \ required: false\n - name: end_time\n required: false\n metrics: - \n # set your cpu metric name here\n - metric_name: namespace_pod_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of cpu usage over cpu resource limits for a pod.\n required_filters:\n - - namespace\n - pod \n dimensions:\n - name: mono-vertex\n filters: + false\n\n- name: pod_cpu_memory_utilization\n objects: \n - mono-vertex\n + \ - vertex\n title: CPU and Memory Utilisation by Pod\n description: This + pattern represents the CPU and Memory utilisation by pod for mono-vertex and vertex\n + \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: + duration\n required: true\n - name: start_time\n required: false\n + \ - name: end_time\n required: false\n metrics: \n # set your cpu metric + name here\n - metric_name: namespace_pod_cpu_utilization\n # set display + name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: + This metric represents the percentage utilization of cpu usage over cpu resource + limits for a pod.\n required_filters:\n - namespace\n - pod + \ \n dimensions:\n - name: mono-vertex\n filters: \n - + name: pod\n # expr: optional expression for prometheus query\n # + overrides the default expression\n required: false\n - name: + vertex\n filters: \n - name: pod\n # expr: optional + expression for prometheus query\n # overrides the default expression + \n required: false\n # set your memory metric name here\n - + metric_name: namespace_pod_memory_utilization\n # set display name as per + metric name\n display_name: Memory Utilization per Pod\n metric_description: + This metric represents the percentage utilization of memory usage in bytes over + memory resource limits for a pod.\n required_filters:\n - namespace\n + \ - pod \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression\n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_pod_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Pod\n metric_description: This metric represents the percentage utilization - of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n - \ filters: \n - name: pod\n # expr: optional expression - for prometheus query\n # overrides the default expression \n required: + query\n # overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n- name: container_cpu_memory_utilization\n - \ objects: \n - mono-vertex\n - vertex\n title: cpu-memory utilization - by container for mono-vertex\n description: cpu and memory utilization by container - for mono-vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - \ - name: duration\n required: true\n - name: start_time\n required: - false\n - name: end_time\n required: false\n metrics:\n # set your - cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n + overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation + by Container\n description: This pattern represents the CPU and Memory utilisation + by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n + \ params:\n - name: duration\n required: true\n - name: start_time\n + \ required: false\n - name: end_time\n required: false\n metrics:\n + \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n \ # set display name as per metric name\n display_name: CPU Utilization per Container\n metric_description: This metric represents the percentage utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n diff --git a/ui/src/components/common/MetricsModalWrapper/index.tsx b/ui/src/components/common/MetricsModalWrapper/index.tsx index fe29be5c7d..609a5f8a3a 100644 --- a/ui/src/components/common/MetricsModalWrapper/index.tsx +++ b/ui/src/components/common/MetricsModalWrapper/index.tsx @@ -6,6 +6,7 @@ import { MetricsModal } from "./partials/MetricsModal"; import "./style.css"; interface MetricsModalWrapperProps { + disableMetricsCharts: boolean; namespaceId: string; pipelineId: string; vertexId: string; @@ -15,6 +16,7 @@ interface MetricsModalWrapperProps { } export function MetricsModalWrapper({ + disableMetricsCharts, namespaceId, pipelineId, vertexId, @@ -42,7 +44,10 @@ export function MetricsModalWrapper({ placement={"top-start"} arrow > - handleOpen()}> + {value} diff --git a/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx b/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx index c3c77405fb..7a3a38d7ac 100644 --- a/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx +++ b/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx @@ -73,7 +73,9 @@ export function MetricsModal({ justifyContent: "space-between", }} > - {metricNameMap[metricName]} + + {metricNameMap[metricName] ?? metricName} + diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx index 2af20243dd..5be7b106e1 100644 --- a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx +++ b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useContext } from "react"; import Box from "@mui/material/Box"; import TableContainer from "@mui/material/TableContainer"; import Table from "@mui/material/Table"; @@ -7,6 +7,8 @@ import TableCell from "@mui/material/TableCell"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { MetricsModalWrapper } from "../../../../../MetricsModalWrapper"; +import { AppContextProps } from "../../../../../../../types/declarations/app"; +import { AppContext } from "../../../../../../../App"; export interface BuffersProps { buffers: any[]; @@ -26,6 +28,7 @@ export function Buffers({ if (!buffers) { return
{`No resources found.`}
; } + const { disableMetricsCharts } = useContext(AppContext); return ( {bufferUsage}% (AppContext); const [foundRates, setFoundRates] = useState([]); useEffect(() => { @@ -97,6 +100,7 @@ export function ProcessingRates({ )} (AppContext); + const resourceUsage = getPodContainerUsePercentages( pod, podDetails, @@ -111,14 +120,30 @@ export function ContainerInfo({ CPU - {`${usedCPU} / ${specCPU}`} {` (${cpuPercent})`} + Memory - {`${usedMem} / ${specMem}`} {` (${memPercent})`} + @@ -195,7 +220,15 @@ export function ContainerInfo({ CPU - {podSpecificInfo?.totalCPU} + )} @@ -204,7 +237,15 @@ export function ContainerInfo({ Memory - {podSpecificInfo?.totalMemory} + )} diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts index 2aa1bfe72a..54cb504862 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts @@ -1,9 +1,9 @@ -export const durationOptions = ["1m", "5m", "10m"]; +export const durationOptions = ["1m", "5m", "15m"]; export const durationMap: { [p: string]: string } = { "1m": "1 min", "5m": "5 mins", - "10m": "10 mins", + "15m": "15 mins", }; export const quantileOptions = ["0.50", "0.90", "0.95", "0.99"]; @@ -20,7 +20,7 @@ export const dimensionMap: { [p: string]: string } = { pod: "Pod", pipeline: "Pipeline", vertex: "Vertex", - container: "Container" + container: "Container", }; export const dimensionReverseMap: { [p: string]: string } = { @@ -30,19 +30,20 @@ export const dimensionReverseMap: { [p: string]: string } = { sink: "vertex", pipeline: "pipeline", pod: "pod", - container: "container" + container: "container", }; export const metricNameMap: { [p: string]: string } = { monovtx_ack_time_bucket: "Mono Vertex Ack Time Latency", monovtx_read_time_bucket: "Mono Vertex Read Time Latency", - monovtx_processing_time_bucket: - "Mono Vertex Processing Time Latency", - monovtx_sink_time_bucket: - "Mono Vertex Sink Write Time Latency", - forwarder_data_read_total: - "Vertex Read Processing Rate", + monovtx_processing_time_bucket: "Mono Vertex Processing Time Latency", + monovtx_sink_time_bucket: "Mono Vertex Sink Write Time Latency", + forwarder_data_read_total: "Vertex Read Processing Rate", monovtx_read_total: "Mono Vertex Read Processing Rate", monovtx_pending: "Mono Vertex Pending Messages", vertex_pending_messages: "Vertex Pending Messages", + namespace_pod_cpu_utilization: "Pod CPU Utilization", + namespace_pod_memory_utilization: "Pod Memory Utilization", + namespace_app_container_cpu_utilization: "Container CPU Utilization", + namespace_app_container_memory_utilization: "Container Memory Utilization", }; diff --git a/ui/src/types/declarations/pods.d.ts b/ui/src/types/declarations/pods.d.ts index d8e022fbee..964d28da21 100644 --- a/ui/src/types/declarations/pods.d.ts +++ b/ui/src/types/declarations/pods.d.ts @@ -125,6 +125,10 @@ export interface PodSpecificInfoProps { totalMemory: string; } export interface PodInfoProps { + namespaceId: string; + pipelineId: string; + vertexId: string; + type: string; pod: Pod; podDetails: PodDetail; containerName: string; From f972b2e9d37b566e60bc5060f094cefcbdd636f3 Mon Sep 17 00:00:00 2001 From: veds-g Date: Thu, 6 Feb 2025 21:31:04 +0530 Subject: [PATCH 3/5] adding preset option for navigation Signed-off-by: veds-g --- .../common/MetricsModalWrapper/index.tsx | 3 + .../partials/MetricsModal/index.tsx | 17 ++++- .../partials/VertexDetails/index.tsx | 8 +++ .../partials/ProcessingRates/index.tsx | 67 ++++++++++--------- .../PodDetails/partials/Metrics/index.tsx | 59 ++++++++++------ .../Metrics/partials/LineChart/index.tsx | 61 ++++++++++------- .../partials/common/Dropdown/index.tsx | 42 ++++++------ 7 files changed, 152 insertions(+), 105 deletions(-) diff --git a/ui/src/components/common/MetricsModalWrapper/index.tsx b/ui/src/components/common/MetricsModalWrapper/index.tsx index 609a5f8a3a..0491c02034 100644 --- a/ui/src/components/common/MetricsModalWrapper/index.tsx +++ b/ui/src/components/common/MetricsModalWrapper/index.tsx @@ -13,6 +13,7 @@ interface MetricsModalWrapperProps { type: string; metricName: string; value: any; + presets?: any; } export function MetricsModalWrapper({ @@ -23,6 +24,7 @@ export function MetricsModalWrapper({ type, metricName, value, + presets, }: MetricsModalWrapperProps) { const [open, setOpen] = useState(false); @@ -59,6 +61,7 @@ export function MetricsModalWrapper({ pipelineId={pipelineId} vertexId={vertexId} type={type} + presets={presets} /> ); diff --git a/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx b/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx index 7a3a38d7ac..ff9c8e874d 100644 --- a/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx +++ b/ui/src/components/common/MetricsModalWrapper/partials/MetricsModal/index.tsx @@ -30,6 +30,7 @@ interface MetricsModalProps { pipelineId: string; vertexId: string; type: string; + presets?: any; } export function MetricsModal({ @@ -40,15 +41,18 @@ export function MetricsModal({ pipelineId, vertexId, type, + presets, }: MetricsModalProps) { const vertexDetailsContext = useContext(VertexDetailsContext); - const { setVertexTab, setPodsViewTab, setExpanded } = vertexDetailsContext; + const { setVertexTab, setPodsViewTab, setExpanded, setPresets } = + vertexDetailsContext; const [metricsFound, setMetricsFound] = useState(false); const handleRedirect = useCallback(() => { handleClose(); + if (presets) setPresets(presets); setVertexTab(0); setPodsViewTab(1); const panelId = `${metricName}-panel`; @@ -57,7 +61,15 @@ export function MetricsModal({ newExpanded.add(panelId); return newExpanded; }); - }, [handleClose, setVertexTab, setPodsViewTab, metricName, setExpanded]); + }, [ + handleClose, + presets, + setPresets, + setVertexTab, + setPodsViewTab, + metricName, + setExpanded, + ]); return ( {metricsFound && ( diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx index 3619d36410..f7f97043a4 100644 --- a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx +++ b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx @@ -57,6 +57,8 @@ export interface VertexDetailsContextProps { setPodsViewTab: Dispatch>; expanded: Set; setExpanded: Dispatch>>; + presets: any; + setPresets: Dispatch>; } export const VertexDetailsContext = createContext({ @@ -68,6 +70,9 @@ export const VertexDetailsContext = createContext({ expanded: new Set(), // eslint-disable-next-line @typescript-eslint/no-empty-function setExpanded: () => {}, + presets: undefined, + // eslint-disable-next-line @typescript-eslint/no-empty-function + setPresets: () => {}, }); export function VertexDetails({ @@ -89,6 +94,7 @@ export function VertexDetails({ const [updateModalOnClose, setUpdateModalOnClose] = useState< SpecEditorModalProps | undefined >(); + const [presets, setPresets] = useState(undefined); const [updateModalOpen, setUpdateModalOpen] = useState(false); const [targetTab, setTargetTab] = useState(); @@ -226,6 +232,8 @@ export function VertexDetails({ setPodsViewTab, expanded, setExpanded, + presets, + setPresets, }} > { const key = type === "monoVertex" ? "monoVertex" : "pipeline"; @@ -48,15 +54,9 @@ export function ProcessingRates({ } rates.push({ partition: index, - oneM: item.processingRates["1m"] - ? item.processingRates["1m"].toFixed(2) - : 0, - fiveM: item.processingRates["5m"] - ? item.processingRates["5m"].toFixed(2) - : 0, - fifteenM: item.processingRates["15m"] - ? item.processingRates["15m"].toFixed(2) - : 0, + oneM: item.processingRates["1m"]?.toFixed(2) || 0, + fiveM: item.processingRates["5m"]?.toFixed(2) || 0, + fifteenM: item.processingRates["15m"]?.toFixed(2) || 0, }); }); setFoundRates(rates); @@ -79,9 +79,9 @@ export function ProcessingRates({ {type !== "monoVertex" && Partition} - 1m - 5m - 15m + {RATE_LABELS.map((label: string) => ( + {label} + ))} @@ -93,28 +93,29 @@ export function ProcessingRates({ )} {!!foundRates.length && - foundRates.map((metric) => ( + foundRates.map((metric: any) => ( {type !== "monoVertex" && ( {metric.partition} )} - - - - {formatRate(metric.fiveM)} - {formatRate(metric.fifteenM)} + {RATE_LABELS?.map((label: string) => ( + + + + ))} ))} diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx index 76fd5f9ff6..d7b5e55341 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx @@ -1,9 +1,15 @@ import React, { Dispatch, SetStateAction, useContext } from "react"; import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; -import { Accordion, AccordionDetails, AccordionSummary, Tooltip, Typography } from "@mui/material"; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Tooltip, + Typography, +} from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import LineChartComponent from "./partials/LineChart"; import { useMetricsDiscoveryDataFetch } from "../../../../../../../../../../../../../utils/fetchWrappers/metricsDiscoveryDataFetch"; import { @@ -21,16 +27,18 @@ export interface MetricsProps { selectedPodName?: string; metricName?: string; setMetricsFound?: Dispatch>; + presets?: any; } export function Metrics({ namespaceId, pipelineId, type, - vertexId, + vertexId, selectedPodName, metricName, setMetricsFound, + presets, }: MetricsProps) { const { metricsDiscoveryData: discoveredMetrics, @@ -40,11 +48,16 @@ export function Metrics({ objectType: dimensionReverseMap[type], }); - const { expanded, setExpanded } = - useContext(VertexDetailsContext); + const { + expanded, + setExpanded, + presets: presetsFromContext, + setPresets, + } = useContext(VertexDetailsContext); const handleAccordionChange = (panel: string) => (_: any, isExpanded: boolean) => { + setPresets(undefined); setExpanded((prevExpanded) => { const newExpanded = new Set(prevExpanded); isExpanded ? newExpanded.add(panel) : newExpanded.delete(panel); @@ -82,7 +95,10 @@ export function Metrics({ (m: any) => m?.metric_name === metricName ); if (discoveredMetric) { - if (setMetricsFound) setMetricsFound(true); + if (setMetricsFound) + setTimeout(() => { + setMetricsFound(true); + }, 100); return ( ); @@ -102,10 +119,7 @@ export function Metrics({ return ( {discoveredMetrics?.data?.map((metric: any) => { - if ( - type === "source" && - metric?.pattern_name === "vertex_gauge" - ) + if (type === "source" && metric?.pattern_name === "vertex_gauge") return null; const panelId = `${metric?.metric_name}-panel`; return ( @@ -119,23 +133,23 @@ export function Metrics({ aria-controls={`${metric?.metric_name}-content`} id={`${metric?.metric_name}-header`} > - - {metric?.display_name || - metricNameMap[metric?.metric_name] || - metric?.metric_name} - + {metric?.display_name || + metricNameMap[metric?.metric_name] || + metric?.metric_name} + - {metric?.metric_description || - metric?.display_name || - metricNameMap[metric?.metric_name] || - metric?.metric_name } + + {metric?.metric_description || + metric?.display_name || + metricNameMap[metric?.metric_name] || + metric?.metric_name} - } + } arrow > - + @@ -148,6 +162,7 @@ export function Metrics({ type={type} metric={metric} vertexId={vertexId} + presets={presetsFromContext} selectedPodName={selectedPodName} /> )} diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx index ed14ccde17..8aa1dc72e1 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx @@ -26,7 +26,12 @@ interface TooltipProps { active?: boolean; } -function CustomTooltip({ payload, label, active, patternName }: TooltipProps & { patternName: string }) { +function CustomTooltip({ + payload, + label, + active, + patternName, +}: TooltipProps & { patternName: string }) { if (active && payload && payload.length) { const maxWidth = Math.max(...payload.map((entry) => entry?.name?.length)) * 9.5; @@ -42,20 +47,20 @@ function CustomTooltip({ payload, label, active, patternName }: TooltipProps & { {label} {payload.map((entry: any, index: any) => { const formattedValue = getDefaultFormatter(entry?.value, patternName); - return( - - - {entry?.name}: + return ( + + + {entry?.name}: + + {formattedValue} - {formattedValue} - ); })} @@ -78,12 +83,12 @@ const getDefaultFormatter = (value: number, patternName: string) => { ? `${Math.floor(formattedValue)}${suffix}` : `${formattedValue}${suffix}`; }; - switch(patternName){ + switch (patternName) { case "mono_vertex_histogram": - if (value === 0){ + if (value === 0) { return "0"; } else if (value < 1000) { - return formatValue(value," μs"); + return formatValue(value, " μs"); } else if (value < 1000000) { return formatValue(value / 1000, " ms"); } else { @@ -91,10 +96,10 @@ const getDefaultFormatter = (value: number, patternName: string) => { } case "container_cpu_memory_utilization": case "pod_cpu_memory_utilization": - if (value === 0){ + if (value === 0) { return "0"; } else if (value < 1000) { - return formatValue(value," %"); + return formatValue(value, " %"); } else if (value < 1000000) { return formatValue(value / 1000, "k %"); } else { @@ -104,7 +109,7 @@ const getDefaultFormatter = (value: number, patternName: string) => { if (value === 0) { return "0"; } else if (value < 1000) { - return formatValue(value,""); + return formatValue(value, ""); } else if (value < 1000000) { return formatValue(value / 1000, " k"); } else { @@ -139,6 +144,7 @@ interface LineChartComponentProps { metric: any; vertexId?: string; selectedPodName?: string; + presets?: any; fromModal?: boolean; } @@ -150,6 +156,7 @@ const LineChartComponent = ({ metric, vertexId, selectedPodName, + presets, fromModal, }: LineChartComponentProps) => { const { addError } = useContext(AppContext); @@ -185,15 +192,14 @@ const LineChartComponent = ({ return vertexId; case "pod": // based on pattern names, update filter based on pod value or multiple pods based on regex - if (metric?.pattern_name === "pod_cpu_memory_utilization"){ - switch(type){ + if (metric?.pattern_name === "pod_cpu_memory_utilization") { + switch (type) { case "monoVertex": return `${pipelineId}-.*`; default: return `${pipelineId}-${vertexId}-.*`; } - } - else { + } else { return selectedPodName; } default: @@ -268,7 +274,7 @@ const LineChartComponent = ({ }, [error, addError]); const groupByLabel = useCallback((dimension: string, patternName: string) => { - switch(patternName){ + switch (patternName) { case "pod_cpu_memory_utilization": return ["pod"]; case "container_cpu_memory_utilization": @@ -374,6 +380,7 @@ const LineChartComponent = ({ type={type} field={param?.name} setMetricReq={setMetricsReq} + presets={presets} /> ); @@ -478,7 +485,9 @@ const LineChartComponent = ({ /> ))} - }/> + } + /> diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx index fc24878314..7c3e852053 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx @@ -17,6 +17,7 @@ export interface MetricDropDownProps { type: string; field: string; setMetricReq: any; + presets?: any; } const Dropdown = ({ @@ -24,39 +25,36 @@ const Dropdown = ({ type, field, setMetricReq, + presets, }: MetricDropDownProps) => { - // to handle cases there is no "mono-vertex" as dimension at top level (for eg: container level cpu/memory) - let initialDimensionVal = ""; - if (metric?.dimensions.length > 0) { - metric?.dimensions?.map((val: any)=>{ - if (val.name === dimensionReverseMap[type]){ - initialDimensionVal = val.name; - return; - } - }) - if (initialDimensionVal === ""){ - initialDimensionVal = metric?.dimensions[0]?.name - } - } + const initialDimensionValue = useMemo(() => { + if (!metric?.dimensions?.length) return metric?.dimensions[0]?.name; + + return metric?.dimensions?.find( + (val: any) => val?.name === dimensionReverseMap[type] + )?.name; + }, [metric, type]); + const getInitialValue = useMemo(() => { switch (field) { case "dimension": - return initialDimensionVal; + return initialDimensionValue; case "quantile": - return quantileOptions[quantileOptions.length-1]; + return presets?.quantile ?? quantileOptions[quantileOptions.length - 1]; case "duration": - return durationOptions[0]; + return presets?.duration ?? durationOptions[0]; default: return ""; } - }, [field, dimensionReverseMap, type, quantileOptions, durationOptions]); + }, [field, initialDimensionValue, quantileOptions, durationOptions, presets]); const [value, setValue] = useState(getInitialValue); - let fieldName = field.charAt(0).toUpperCase() + field.slice(1); - if (fieldName == "Duration"){ - fieldName = "Query Window" - } + + const fieldName = useMemo(() => { + const capitalizedField = field.charAt(0).toUpperCase() + field.slice(1); + return capitalizedField === "Duration" ? "Query Window" : capitalizedField; + }, [field]); // Update metricsReq with the initial value useEffect(() => { @@ -122,7 +120,7 @@ const Dropdown = ({ setValue(e.target.value); setMetricReq((prev: any) => ({ ...prev, [field]: e.target.value })); }} - sx={{ fontSize: "1.6rem", height: '50px' }} + sx={{ fontSize: "1.6rem", height: "50px" }} > {getDropDownEntries} From ceef5782668d311c3693e4f61c354a99cccc0a62 Mon Sep 17 00:00:00 2001 From: veds-g Date: Sun, 9 Feb 2025 21:55:01 +0530 Subject: [PATCH 4/5] removed pattern name usage from UI Signed-off-by: veds-g --- .../namespaced-numaflow-server.yaml | 66 +++++++++-------- config/advanced-install/numaflow-server.yaml | 66 +++++++++-------- .../numaflow-server-metrics-proxy-config.yaml | 12 ++-- config/install.yaml | 66 +++++++++-------- config/namespace-install.yaml | 66 +++++++++-------- .../common/MetricsModalWrapper/index.tsx | 72 ++++++++++++------- .../partials/MetricsModal/index.tsx | 53 +++++++------- .../VertexDetails/partials/Buffers/index.tsx | 3 +- .../partials/ProcessingRates/index.tsx | 10 ++- .../partials/ContainerInfo/index.tsx | 14 ++-- .../PodDetails/partials/Metrics/index.tsx | 27 ++++--- .../Metrics/partials/LineChart/index.tsx | 61 ++++++++++------ .../partials/common/FiltersDropdown/index.tsx | 55 +++++++++----- .../partials/Metrics/utils/constants.ts | 26 ++++--- ui/src/utils/fetchWrappers/metricsFetch.ts | 13 +++- 15 files changed, 340 insertions(+), 270 deletions(-) diff --git a/config/advanced-install/namespaced-numaflow-server.yaml b/config/advanced-install/namespaced-numaflow-server.yaml index 6d097c6111..66d8305ff1 100644 --- a/config/advanced-install/namespaced-numaflow-server.yaml +++ b/config/advanced-install/namespaced-numaflow-server.yaml @@ -223,52 +223,50 @@ data: \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: duration\n required: true\n - name: start_time\n required: false\n \ - name: end_time\n required: false\n metrics: \n # set your cpu metric - name here\n - metric_name: namespace_pod_cpu_utilization\n # set display - name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: - This metric represents the percentage utilization of cpu usage over cpu resource + name here\n - metric_name: namespace_pod_cpu_utilization\n display_name: + Pod CPU Utilization\n metric_description: This metric represents the percentage + utilization of cpu usage over cpu resource limits for a pod.\n required_filters:\n + \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n + \ filters: \n - name: pod\n # expr: optional expression + for prometheus query\n # overrides the default expression\n required: + false\n - name: vertex\n filters: \n - name: pod\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n # set your + memory metric name here\n - metric_name: namespace_pod_memory_utilization\n + \ display_name: Pod Memory Utilization\n metric_description: This metric + represents the percentage utilization of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - namespace\n - pod \ \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # - overrides the default expression\n required: false\n - name: + overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # overrides the default expression - \n required: false\n # set your memory metric name here\n - - metric_name: namespace_pod_memory_utilization\n # set display name as per - metric name\n display_name: Memory Utilization per Pod\n metric_description: - This metric represents the percentage utilization of memory usage in bytes over - memory resource limits for a pod.\n required_filters:\n - namespace\n - \ - pod \n dimensions:\n - name: mono-vertex\n filters: - \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression \n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \n required: false\n\n- name: container_cpu_memory_utilization\n \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation by Container\n description: This pattern represents the CPU and Memory utilisation by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n \ params:\n - name: duration\n required: true\n - name: start_time\n \ required: false\n - name: end_time\n required: false\n metrics:\n \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Container\n metric_description: This metric represents the percentage - utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n - \ - namespace\n dimensions:\n - name: mono-vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n - name: vertex\n filters:\n - name: container\n + \ display_name: Container CPU Utilization\n metric_description: This + metric represents the percentage utilization of cpu usage over cpu resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_app_container_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Container\n metric_description: This metric represents the percentage - utilization of memory usage in bytes over memory resource limits for a container.\n - \ required_filters:\n - namespace\n dimensions:\n - name: - mono-vertex\n filters: \n - name: container\n # - expr: optional expression for prometheus query\n # overrides the - default expression \n required: false\n - name: vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n" + overrides the default expression \n required: false\n - name: + vertex\n filters:\n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n # set your memory metric name + here\n - metric_name: namespace_app_container_memory_utilization\n display_name: + Container Memory Utilization\n metric_description: This metric represents + the percentage utilization of memory usage in bytes over memory resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n - name: + vertex\n filters: \n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n" kind: ConfigMap metadata: name: numaflow-server-metrics-proxy-config diff --git a/config/advanced-install/numaflow-server.yaml b/config/advanced-install/numaflow-server.yaml index 9064a0eb20..cd37a124e1 100644 --- a/config/advanced-install/numaflow-server.yaml +++ b/config/advanced-install/numaflow-server.yaml @@ -230,52 +230,50 @@ data: \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: duration\n required: true\n - name: start_time\n required: false\n \ - name: end_time\n required: false\n metrics: \n # set your cpu metric - name here\n - metric_name: namespace_pod_cpu_utilization\n # set display - name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: - This metric represents the percentage utilization of cpu usage over cpu resource + name here\n - metric_name: namespace_pod_cpu_utilization\n display_name: + Pod CPU Utilization\n metric_description: This metric represents the percentage + utilization of cpu usage over cpu resource limits for a pod.\n required_filters:\n + \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n + \ filters: \n - name: pod\n # expr: optional expression + for prometheus query\n # overrides the default expression\n required: + false\n - name: vertex\n filters: \n - name: pod\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n # set your + memory metric name here\n - metric_name: namespace_pod_memory_utilization\n + \ display_name: Pod Memory Utilization\n metric_description: This metric + represents the percentage utilization of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - namespace\n - pod \ \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # - overrides the default expression\n required: false\n - name: + overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # overrides the default expression - \n required: false\n # set your memory metric name here\n - - metric_name: namespace_pod_memory_utilization\n # set display name as per - metric name\n display_name: Memory Utilization per Pod\n metric_description: - This metric represents the percentage utilization of memory usage in bytes over - memory resource limits for a pod.\n required_filters:\n - namespace\n - \ - pod \n dimensions:\n - name: mono-vertex\n filters: - \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression \n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \n required: false\n\n- name: container_cpu_memory_utilization\n \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation by Container\n description: This pattern represents the CPU and Memory utilisation by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n \ params:\n - name: duration\n required: true\n - name: start_time\n \ required: false\n - name: end_time\n required: false\n metrics:\n \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Container\n metric_description: This metric represents the percentage - utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n - \ - namespace\n dimensions:\n - name: mono-vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n - name: vertex\n filters:\n - name: container\n + \ display_name: Container CPU Utilization\n metric_description: This + metric represents the percentage utilization of cpu usage over cpu resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_app_container_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Container\n metric_description: This metric represents the percentage - utilization of memory usage in bytes over memory resource limits for a container.\n - \ required_filters:\n - namespace\n dimensions:\n - name: - mono-vertex\n filters: \n - name: container\n # - expr: optional expression for prometheus query\n # overrides the - default expression \n required: false\n - name: vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n" + overrides the default expression \n required: false\n - name: + vertex\n filters:\n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n # set your memory metric name + here\n - metric_name: namespace_app_container_memory_utilization\n display_name: + Container Memory Utilization\n metric_description: This metric represents + the percentage utilization of memory usage in bytes over memory resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n - name: + vertex\n filters: \n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n" kind: ConfigMap metadata: name: numaflow-server-metrics-proxy-config diff --git a/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml b/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml index 269132c099..d07de90769 100644 --- a/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml +++ b/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml @@ -208,8 +208,7 @@ data: metrics: # set your cpu metric name here - metric_name: namespace_pod_cpu_utilization - # set display name as per metric name - display_name: CPU Utilization per Pod + display_name: Pod CPU Utilization metric_description: This metric represents the percentage utilization of cpu usage over cpu resource limits for a pod. required_filters: - namespace @@ -229,8 +228,7 @@ data: required: false # set your memory metric name here - metric_name: namespace_pod_memory_utilization - # set display name as per metric name - display_name: Memory Utilization per Pod + display_name: Pod Memory Utilization metric_description: This metric represents the percentage utilization of memory usage in bytes over memory resource limits for a pod. required_filters: - namespace @@ -266,8 +264,7 @@ data: metrics: # set your cpu metric name here - metric_name: namespace_app_container_cpu_utilization - # set display name as per metric name - display_name: CPU Utilization per Container + display_name: Container CPU Utilization metric_description: This metric represents the percentage utilization of cpu usage over cpu resource limits for a container. required_filters: - namespace @@ -286,8 +283,7 @@ data: required: false # set your memory metric name here - metric_name: namespace_app_container_memory_utilization - # set display name as per metric name - display_name: Memory Utilization per Container + display_name: Container Memory Utilization metric_description: This metric represents the percentage utilization of memory usage in bytes over memory resource limits for a container. required_filters: - namespace diff --git a/config/install.yaml b/config/install.yaml index 27e46e8f5f..e932871dfd 100644 --- a/config/install.yaml +++ b/config/install.yaml @@ -28958,52 +28958,50 @@ data: \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: duration\n required: true\n - name: start_time\n required: false\n \ - name: end_time\n required: false\n metrics: \n # set your cpu metric - name here\n - metric_name: namespace_pod_cpu_utilization\n # set display - name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: - This metric represents the percentage utilization of cpu usage over cpu resource + name here\n - metric_name: namespace_pod_cpu_utilization\n display_name: + Pod CPU Utilization\n metric_description: This metric represents the percentage + utilization of cpu usage over cpu resource limits for a pod.\n required_filters:\n + \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n + \ filters: \n - name: pod\n # expr: optional expression + for prometheus query\n # overrides the default expression\n required: + false\n - name: vertex\n filters: \n - name: pod\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n # set your + memory metric name here\n - metric_name: namespace_pod_memory_utilization\n + \ display_name: Pod Memory Utilization\n metric_description: This metric + represents the percentage utilization of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - namespace\n - pod \ \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # - overrides the default expression\n required: false\n - name: + overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # overrides the default expression - \n required: false\n # set your memory metric name here\n - - metric_name: namespace_pod_memory_utilization\n # set display name as per - metric name\n display_name: Memory Utilization per Pod\n metric_description: - This metric represents the percentage utilization of memory usage in bytes over - memory resource limits for a pod.\n required_filters:\n - namespace\n - \ - pod \n dimensions:\n - name: mono-vertex\n filters: - \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression \n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \n required: false\n\n- name: container_cpu_memory_utilization\n \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation by Container\n description: This pattern represents the CPU and Memory utilisation by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n \ params:\n - name: duration\n required: true\n - name: start_time\n \ required: false\n - name: end_time\n required: false\n metrics:\n \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Container\n metric_description: This metric represents the percentage - utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n - \ - namespace\n dimensions:\n - name: mono-vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n - name: vertex\n filters:\n - name: container\n + \ display_name: Container CPU Utilization\n metric_description: This + metric represents the percentage utilization of cpu usage over cpu resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_app_container_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Container\n metric_description: This metric represents the percentage - utilization of memory usage in bytes over memory resource limits for a container.\n - \ required_filters:\n - namespace\n dimensions:\n - name: - mono-vertex\n filters: \n - name: container\n # - expr: optional expression for prometheus query\n # overrides the - default expression \n required: false\n - name: vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n" + overrides the default expression \n required: false\n - name: + vertex\n filters:\n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n # set your memory metric name + here\n - metric_name: namespace_app_container_memory_utilization\n display_name: + Container Memory Utilization\n metric_description: This metric represents + the percentage utilization of memory usage in bytes over memory resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n - name: + vertex\n filters: \n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n" kind: ConfigMap metadata: name: numaflow-server-metrics-proxy-config diff --git a/config/namespace-install.yaml b/config/namespace-install.yaml index 332baac0b9..3bdb14aa39 100644 --- a/config/namespace-install.yaml +++ b/config/namespace-install.yaml @@ -28846,52 +28846,50 @@ data: \ expr: avg_over_time($metric_name{$filters}[$duration])\n params:\n - name: duration\n required: true\n - name: start_time\n required: false\n \ - name: end_time\n required: false\n metrics: \n # set your cpu metric - name here\n - metric_name: namespace_pod_cpu_utilization\n # set display - name as per metric name\n display_name: CPU Utilization per Pod\n metric_description: - This metric represents the percentage utilization of cpu usage over cpu resource + name here\n - metric_name: namespace_pod_cpu_utilization\n display_name: + Pod CPU Utilization\n metric_description: This metric represents the percentage + utilization of cpu usage over cpu resource limits for a pod.\n required_filters:\n + \ - namespace\n - pod \n dimensions:\n - name: mono-vertex\n + \ filters: \n - name: pod\n # expr: optional expression + for prometheus query\n # overrides the default expression\n required: + false\n - name: vertex\n filters: \n - name: pod\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n # set your + memory metric name here\n - metric_name: namespace_pod_memory_utilization\n + \ display_name: Pod Memory Utilization\n metric_description: This metric + represents the percentage utilization of memory usage in bytes over memory resource limits for a pod.\n required_filters:\n - namespace\n - pod \ \n dimensions:\n - name: mono-vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # - overrides the default expression\n required: false\n - name: + overrides the default expression \n required: false\n - name: vertex\n filters: \n - name: pod\n # expr: optional expression for prometheus query\n # overrides the default expression - \n required: false\n # set your memory metric name here\n - - metric_name: namespace_pod_memory_utilization\n # set display name as per - metric name\n display_name: Memory Utilization per Pod\n metric_description: - This metric represents the percentage utilization of memory usage in bytes over - memory resource limits for a pod.\n required_filters:\n - namespace\n - \ - pod \n dimensions:\n - name: mono-vertex\n filters: - \n - name: pod\n # expr: optional expression for prometheus - query\n # overrides the default expression \n required: - false\n - name: vertex\n filters: \n - name: pod\n - \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n\n- name: container_cpu_memory_utilization\n + \n required: false\n\n- name: container_cpu_memory_utilization\n \ objects: \n - mono-vertex\n - vertex\n title: CPU and Memory Utilisation by Container\n description: This pattern represents the CPU and Memory utilisation by container for mono-vertex and vertex\n expr: avg_over_time($metric_name{$filters}[$duration])\n \ params:\n - name: duration\n required: true\n - name: start_time\n \ required: false\n - name: end_time\n required: false\n metrics:\n \ # set your cpu metric name here\n - metric_name: namespace_app_container_cpu_utilization\n - \ # set display name as per metric name\n display_name: CPU Utilization - per Container\n metric_description: This metric represents the percentage - utilization of cpu usage over cpu resource limits for a container.\n required_filters:\n - \ - namespace\n dimensions:\n - name: mono-vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n - name: vertex\n filters:\n - name: container\n + \ display_name: Container CPU Utilization\n metric_description: This + metric represents the percentage utilization of cpu usage over cpu resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n \ # expr: optional expression for prometheus query\n # - overrides the default expression \n required: false\n # set your - memory metric name here\n - metric_name: namespace_app_container_memory_utilization\n - \ # set display name as per metric name\n display_name: Memory Utilization - per Container\n metric_description: This metric represents the percentage - utilization of memory usage in bytes over memory resource limits for a container.\n - \ required_filters:\n - namespace\n dimensions:\n - name: - mono-vertex\n filters: \n - name: container\n # - expr: optional expression for prometheus query\n # overrides the - default expression \n required: false\n - name: vertex\n filters: - \n - name: container\n # expr: optional expression for - prometheus query\n # overrides the default expression \n required: - false\n" + overrides the default expression \n required: false\n - name: + vertex\n filters:\n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n # set your memory metric name + here\n - metric_name: namespace_app_container_memory_utilization\n display_name: + Container Memory Utilization\n metric_description: This metric represents + the percentage utilization of memory usage in bytes over memory resource limits + for a container.\n required_filters:\n - namespace\n dimensions:\n + \ - name: mono-vertex\n filters: \n - name: container\n + \ # expr: optional expression for prometheus query\n # + overrides the default expression \n required: false\n - name: + vertex\n filters: \n - name: container\n # expr: + optional expression for prometheus query\n # overrides the default + expression \n required: false\n" kind: ConfigMap metadata: name: numaflow-server-metrics-proxy-config diff --git a/ui/src/components/common/MetricsModalWrapper/index.tsx b/ui/src/components/common/MetricsModalWrapper/index.tsx index 0491c02034..6f7028dbb2 100644 --- a/ui/src/components/common/MetricsModalWrapper/index.tsx +++ b/ui/src/components/common/MetricsModalWrapper/index.tsx @@ -1,7 +1,9 @@ -import React, { useCallback, useState } from "react"; +import React, { useCallback, useMemo, useState } from "react"; import Tooltip from "@mui/material/Tooltip"; import Box from "@mui/material/Box"; import { MetricsModal } from "./partials/MetricsModal"; +import { useMetricsDiscoveryDataFetch } from "../../../utils/fetchWrappers/metricsDiscoveryDataFetch"; +import { dimensionReverseMap } from "../../pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants"; import "./style.css"; @@ -11,7 +13,7 @@ interface MetricsModalWrapperProps { pipelineId: string; vertexId: string; type: string; - metricName: string; + metricDisplayName: string; value: any; presets?: any; } @@ -22,41 +24,59 @@ export function MetricsModalWrapper({ pipelineId, vertexId, type, - metricName, + metricDisplayName, value, presets, }: MetricsModalWrapperProps) { - const [open, setOpen] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); - const handleOpen = useCallback(() => { - setOpen(true); + const handleOpenModal = useCallback(() => { + setIsModalOpen(true); }, []); - const handleClose = useCallback(() => { - setOpen(false); + const handleCloseModal = useCallback(() => { + setIsModalOpen(false); }, []); + const { + metricsDiscoveryData: discoveredMetrics, + error: discoveredMetricsError, + loading: discoveredMetricsLoading, + } = useMetricsDiscoveryDataFetch({ + objectType: dimensionReverseMap[type], + }); + + const isClickable = useMemo(() => { + return ( + !discoveredMetricsError && + !discoveredMetricsLoading && + !disableMetricsCharts + ); + }, [discoveredMetricsError, discoveredMetricsLoading, disableMetricsCharts]); + return ( - - Click to get more information about the trend - - } - placement={"top-start"} - arrow - > - + Click to get more information about the trend + + } + placement="top-start" + arrow > - {value} - - + + {value} + + + ) : ( + {value} + )} void; - metricName: string; + isModalOpen: boolean; + handleCloseModal: () => void; + metricDisplayName: string; + discoveredMetrics: any; namespaceId: string; pipelineId: string; vertexId: string; @@ -34,61 +34,62 @@ interface MetricsModalProps { } export function MetricsModal({ - open, - handleClose, - metricName, + isModalOpen, + handleCloseModal, + metricDisplayName, + discoveredMetrics, namespaceId, pipelineId, vertexId, type, presets, }: MetricsModalProps) { - const vertexDetailsContext = - useContext(VertexDetailsContext); const { setVertexTab, setPodsViewTab, setExpanded, setPresets } = - vertexDetailsContext; + useContext(VertexDetailsContext); const [metricsFound, setMetricsFound] = useState(false); const handleRedirect = useCallback(() => { - handleClose(); + handleCloseModal(); if (presets) setPresets(presets); setVertexTab(0); setPodsViewTab(1); - const panelId = `${metricName}-panel`; - setExpanded((prevExpanded) => { - const newExpanded = new Set(prevExpanded); - newExpanded.add(panelId); - return newExpanded; - }); + // expand the respective metrics accordion + const discoveredMetric = discoveredMetrics?.data?.find( + (m: any) => m?.display_name === metricDisplayName + ); + const panelId = `${discoveredMetric?.metric_name}-panel`; + setExpanded((prevExpanded) => new Set(prevExpanded).add(panelId)); }, [ - handleClose, + handleCloseModal, presets, setPresets, setVertexTab, setPodsViewTab, - metricName, + discoveredMetrics, + metricDisplayName, setExpanded, ]); return ( - + - {metricNameMap[metricName] ?? metricName} + {metricDisplayName} - + @@ -98,7 +99,7 @@ export function MetricsModal({ pipelineId={pipelineId} vertexId={vertexId} type={type} - metricName={metricName} + metricDisplayName={metricDisplayName} setMetricsFound={setMetricsFound} presets={presets} /> diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx index 5be7b106e1..b2553c7828 100644 --- a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx +++ b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.tsx @@ -7,6 +7,7 @@ import TableCell from "@mui/material/TableCell"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { MetricsModalWrapper } from "../../../../../MetricsModalWrapper"; +import { VERTEX_PENDING_MESSAGES } from "../../../../../../pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants"; import { AppContextProps } from "../../../../../../../types/declarations/app"; import { AppContext } from "../../../../../../../App"; @@ -92,7 +93,7 @@ export function Buffers({ pipelineId={pipelineId} vertexId={vertexId} type={type} - metricName={"vertex_pending_messages"} + metricDisplayName={VERTEX_PENDING_MESSAGES} value={buffer?.totalMessages} /> diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx index 9444ccef9c..2f66f84cba 100644 --- a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx +++ b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx @@ -8,6 +8,10 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { MetricsModalWrapper } from "../../../../../MetricsModalWrapper"; import { PipelineVertexMetric } from "../../../../../../../types/declarations/pipeline"; +import { + MONO_VERTEX_PROCESSING_RATE, + VERTEX_PROCESSING_RATE, +} from "../../../../../../pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants"; import { AppContextProps } from "../../../../../../../types/declarations/app"; import { AppContext } from "../../../../../../../App"; @@ -106,10 +110,10 @@ export function ProcessingRates({ pipelineId={pipelineId} vertexId={vertexId} type={type} - metricName={ + metricDisplayName={ type === "monoVertex" - ? "monovtx_read_total" - : "forwarder_data_read_total" + ? MONO_VERTEX_PROCESSING_RATE + : VERTEX_PROCESSING_RATE } value={formatRate(metric?.[RATE_LABELS_MAP[label]])} presets={{ duration: label }} diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/ContainerInfo/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/ContainerInfo/index.tsx index aba498134d..56f9bbcc2c 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/ContainerInfo/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/ContainerInfo/index.tsx @@ -3,6 +3,12 @@ import Box from "@mui/material/Box"; import { MetricsModalWrapper } from "../../../../../../../../../../../../common/MetricsModalWrapper"; import { getPodContainerUsePercentages } from "../../../../../../../../../../../../../utils"; import { PodInfoProps } from "../../../../../../../../../../../../../types/declarations/pods"; +import { + CONTAINER_CPU_UTILIZATION, + CONTAINER_MEMORY_UTILIZATION, + POD_CPU_UTILIZATION, + POD_MEMORY_UTILIZATION, +} from "../Metrics/utils/constants"; import { AppContextProps } from "../../../../../../../../../../../../../types/declarations/app"; import { AppContext } from "../../../../../../../../../../../../../App"; @@ -126,7 +132,7 @@ export function ContainerInfo({ pipelineId={pipelineId} vertexId={vertexId} type={type} - metricName={"namespace_app_container_cpu_utilization"} + metricDisplayName={CONTAINER_CPU_UTILIZATION} value={`${usedCPU} / ${specCPU} (${cpuPercent})`} /> @@ -141,7 +147,7 @@ export function ContainerInfo({ pipelineId={pipelineId} vertexId={vertexId} type={type} - metricName={"namespace_app_container_memory_utilization"} + metricDisplayName={CONTAINER_MEMORY_UTILIZATION} value={`${usedMem} / ${specMem} (${memPercent})`} /> @@ -226,7 +232,7 @@ export function ContainerInfo({ pipelineId={pipelineId} vertexId={vertexId} type={type} - metricName={"namespace_pod_cpu_utilization"} + metricDisplayName={POD_CPU_UTILIZATION} value={podSpecificInfo?.totalCPU} /> @@ -243,7 +249,7 @@ export function ContainerInfo({ pipelineId={pipelineId} vertexId={vertexId} type={type} - metricName={"namespace_pod_memory_utilization"} + metricDisplayName={POD_MEMORY_UTILIZATION} value={podSpecificInfo?.totalMemory} /> diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx index d7b5e55341..24c23a4fe9 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/index.tsx @@ -12,11 +12,15 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import LineChartComponent from "./partials/LineChart"; import { useMetricsDiscoveryDataFetch } from "../../../../../../../../../../../../../utils/fetchWrappers/metricsDiscoveryDataFetch"; +import { + dimensionReverseMap, + VERTEX_PENDING_MESSAGES, +} from "./utils/constants"; import { VertexDetailsContext, VertexDetailsContextProps, } from "../../../../../../../../../../../../common/SlidingSidebar/partials/VertexDetails"; -import { dimensionReverseMap, metricNameMap } from "./utils/constants"; + import "./style.css"; export interface MetricsProps { @@ -25,7 +29,7 @@ export interface MetricsProps { type: string; vertexId?: string; selectedPodName?: string; - metricName?: string; + metricDisplayName?: string; setMetricsFound?: Dispatch>; presets?: any; } @@ -36,7 +40,7 @@ export function Metrics({ type, vertexId, selectedPodName, - metricName, + metricDisplayName, setMetricsFound, presets, }: MetricsProps) { @@ -90,9 +94,9 @@ export function Metrics({ if (discoveredMetrics == undefined) return No metrics found; - if (metricName) { + if (metricDisplayName) { const discoveredMetric = discoveredMetrics?.data?.find( - (m: any) => m?.metric_name === metricName + (m: any) => m?.display_name === metricDisplayName ); if (discoveredMetric) { if (setMetricsFound) @@ -119,7 +123,10 @@ export function Metrics({ return ( {discoveredMetrics?.data?.map((metric: any) => { - if (type === "source" && metric?.pattern_name === "vertex_gauge") + if ( + type === "source" && + metric?.display_name === VERTEX_PENDING_MESSAGES + ) return null; const panelId = `${metric?.metric_name}-panel`; return ( @@ -134,19 +141,17 @@ export function Metrics({ id={`${metric?.metric_name}-header`} > - {metric?.display_name || - metricNameMap[metric?.metric_name] || - metric?.metric_name} + {metric?.display_name || metric?.metric_name} + {metric?.metric_description || metric?.display_name || - metricNameMap[metric?.metric_name] || metric?.metric_name} } arrow + placement={"top-start"} > diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx index 8aa1dc72e1..f527a7a57c 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/LineChart/index.tsx @@ -17,6 +17,16 @@ import FiltersDropdown from "../common/FiltersDropdown"; import EmptyChart from "../EmptyChart"; import { useMetricsFetch } from "../../../../../../../../../../../../../../../utils/fetchWrappers/metricsFetch"; import TimeSelector from "../common/TimeRange"; +import { + CONTAINER_CPU_UTILIZATION, + CONTAINER_MEMORY_UTILIZATION, + MONO_VERTEX_PENDING_MESSAGES, + MONO_VERTEX_PROCESSING_TIME_LATENCY, + MONO_VERTEX_SINK_WRITE_TIME_LATENCY, + POD_CPU_UTILIZATION, + POD_MEMORY_UTILIZATION, + VERTEX_PENDING_MESSAGES, +} from "../../utils/constants"; import { AppContext } from "../../../../../../../../../../../../../../../App"; import { AppContextProps } from "../../../../../../../../../../../../../../../types/declarations/app"; @@ -30,8 +40,8 @@ function CustomTooltip({ payload, label, active, - patternName, -}: TooltipProps & { patternName: string }) { + displayName, +}: TooltipProps & { displayName: string }) { if (active && payload && payload.length) { const maxWidth = Math.max(...payload.map((entry) => entry?.name?.length)) * 9.5; @@ -46,7 +56,7 @@ function CustomTooltip({ > {label} {payload.map((entry: any, index: any) => { - const formattedValue = getDefaultFormatter(entry?.value, patternName); + const formattedValue = getDefaultFormatter(entry?.value, displayName); return ( { return ""; }; -const getDefaultFormatter = (value: number, patternName: string) => { +const getDefaultFormatter = (value: number, displayName: string) => { const formatValue = (value: number, suffix: string) => { const formattedValue = parseFloat(value?.toFixed(2)); return formattedValue % 1 === 0 ? `${Math.floor(formattedValue)}${suffix}` : `${formattedValue}${suffix}`; }; - switch (patternName) { - case "mono_vertex_histogram": + switch (displayName) { + case MONO_VERTEX_PROCESSING_TIME_LATENCY: + case MONO_VERTEX_SINK_WRITE_TIME_LATENCY: if (value === 0) { return "0"; } else if (value < 1000) { @@ -94,8 +105,10 @@ const getDefaultFormatter = (value: number, patternName: string) => { } else { return formatValue(value / 1000000, " s"); } - case "container_cpu_memory_utilization": - case "pod_cpu_memory_utilization": + case POD_CPU_UTILIZATION: + case POD_MEMORY_UTILIZATION: + case CONTAINER_CPU_UTILIZATION: + case CONTAINER_MEMORY_UTILIZATION: if (value === 0) { return "0"; } else if (value < 1000) { @@ -118,7 +131,7 @@ const getDefaultFormatter = (value: number, patternName: string) => { } }; -const getTickFormatter = (unit: string, patternName: string) => { +const getTickFormatter = (unit: string, displayName: string) => { const formatValue = (value: number) => { const formattedValue = parseFloat(value?.toFixed(2)); // Format to 2 decimal places return formattedValue % 1 === 0 @@ -132,7 +145,7 @@ const getTickFormatter = (unit: string, patternName: string) => { case "ms": return `${formatValue(value / 1000)}`; default: - return getDefaultFormatter(value, patternName); + return getDefaultFormatter(value, displayName); } }; }; @@ -165,6 +178,7 @@ const LineChartComponent = ({ const [metricsReq, setMetricsReq] = useState({ metric_name: metric?.metric_name, pattern_name: metric?.pattern_name, + display_name: metric?.display_name, }); const [paramsList, setParamsList] = useState([]); // store all filters for each selected dimension @@ -191,8 +205,11 @@ const LineChartComponent = ({ case "vertex": return vertexId; case "pod": - // based on pattern names, update filter based on pod value or multiple pods based on regex - if (metric?.pattern_name === "pod_cpu_memory_utilization") { + if ( + [POD_CPU_UTILIZATION, POD_MEMORY_UTILIZATION].includes( + metric?.display_name + ) + ) { switch (type) { case "monoVertex": return `${pipelineId}-.*`; @@ -273,14 +290,16 @@ const LineChartComponent = ({ } }, [error, addError]); - const groupByLabel = useCallback((dimension: string, patternName: string) => { - switch (patternName) { - case "pod_cpu_memory_utilization": + const groupByLabel = useCallback((dimension: string, displayName: string) => { + switch (displayName) { + case POD_CPU_UTILIZATION: + case POD_MEMORY_UTILIZATION: return ["pod"]; - case "container_cpu_memory_utilization": + case CONTAINER_CPU_UTILIZATION: + case CONTAINER_MEMORY_UTILIZATION: return ["container"]; - case "mono_vertex_gauge": - case "vertex_gauge": + case VERTEX_PENDING_MESSAGES: + case MONO_VERTEX_PENDING_MESSAGES: return dimension === "pod" ? ["pod", "period"] : ["period"]; } switch (dimension) { @@ -297,7 +316,7 @@ const LineChartComponent = ({ const transformedData: any[] = []; const label = groupByLabel( metricsReq?.dimension, - metricsReq?.pattern_name + metricsReq?.display_name ); chartData?.forEach((item) => { let labelVal = ""; @@ -470,7 +489,7 @@ const LineChartComponent = ({ } tickFormatter={getTickFormatter( metric?.unit, - metric?.pattern_name + metric?.display_name )} /> @@ -486,7 +505,7 @@ const LineChartComponent = ({ ))} } + content={} /> diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/FiltersDropdown/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/FiltersDropdown/index.tsx index 08b0bb30b9..1ea27e7226 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/FiltersDropdown/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/FiltersDropdown/index.tsx @@ -16,6 +16,10 @@ import { import AddIcon from "@mui/icons-material/Add"; import CloseIcon from "@mui/icons-material/Close"; import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; +import { + POD_CPU_UTILIZATION, + POD_MEMORY_UTILIZATION, +} from "../../../utils/constants"; import { AppContextProps } from "../../../../../../../../../../../../../../../../types/declarations/app"; import { AppContext } from "../../../../../../../../../../../../../../../../App"; import { getBaseHref } from "../../../../../../../../../../../../../../../../utils"; @@ -46,7 +50,7 @@ const FiltersDropdown = ({ vertexId, setFilters, selectedPodName, - metric + metric, }: FiltersDropdownProps) => { const { host } = useContext(AppContext); const [anchorEl, setAnchorEl] = useState(null); @@ -85,17 +89,24 @@ const FiltersDropdown = ({ return; } const data = await response.json(); - const formattedData = data && data.data - ? data.data - .filter((pod: any) => !pod?.metadata?.name.includes("daemon")) - .map((pod: any) => ({ - containerNames: [ - ...pod?.spec?.containers?.map((ele: any) => ele.name) || [], - ...pod?.spec?.initContainers?.filter((initContainer: any) => initContainer?.restartPolicy === "Always")?.map((ele: any) => ele.name) || [] - ], - name: pod?.metadata?.name, - })) - : []; + const formattedData = + data && data.data + ? data.data + .filter((pod: any) => !pod?.metadata?.name.includes("daemon")) + .map((pod: any) => ({ + containerNames: [ + ...(pod?.spec?.containers?.map((ele: any) => ele.name) || + []), + ...(pod?.spec?.initContainers + ?.filter( + (initContainer: any) => + initContainer?.restartPolicy === "Always" + ) + ?.map((ele: any) => ele.name) || []), + ], + name: pod?.metadata?.name, + })) + : []; callback(formattedData); } catch (error) { callback(null); @@ -120,7 +131,11 @@ const FiltersDropdown = ({ switch (filterName) { case "container": // get containers of selected pod - return podsData.find((pod: any) => pod.name === selectedPodName)?.containerNames?.map((containerName: any) => ({name: containerName})); + return podsData + .find((pod: any) => pod.name === selectedPodName) + ?.containerNames?.map((containerName: any) => ({ + name: containerName, + })); case "pod": return podsData; case "period": @@ -175,10 +190,16 @@ const FiltersDropdown = ({ // eslint-disable-next-line @typescript-eslint/no-unused-vars const { [key]: _, ...rest } = prev; // Check if the key is "pod" and the pattern name is "pod_cpu_memory_utilization" - if (key === "pod" && metric?.pattern_name === "pod_cpu_memory_utilization") { - const newValue = type === "monoVertex" - ? `${pipelineId}-.*` - : `${pipelineId}-${vertexId}-.*`; + if ( + key === "pod" && + [POD_CPU_UTILIZATION, POD_MEMORY_UTILIZATION]?.includes( + metric?.display_name + ) + ) { + const newValue = + type === "monoVertex" + ? `${pipelineId}-.*` + : `${pipelineId}-${vertexId}-.*`; return { ...rest, [key]: newValue }; } return rest; diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts index 54cb504862..e1f2ac01e3 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/utils/constants.ts @@ -33,17 +33,15 @@ export const dimensionReverseMap: { [p: string]: string } = { container: "container", }; -export const metricNameMap: { [p: string]: string } = { - monovtx_ack_time_bucket: "Mono Vertex Ack Time Latency", - monovtx_read_time_bucket: "Mono Vertex Read Time Latency", - monovtx_processing_time_bucket: "Mono Vertex Processing Time Latency", - monovtx_sink_time_bucket: "Mono Vertex Sink Write Time Latency", - forwarder_data_read_total: "Vertex Read Processing Rate", - monovtx_read_total: "Mono Vertex Read Processing Rate", - monovtx_pending: "Mono Vertex Pending Messages", - vertex_pending_messages: "Vertex Pending Messages", - namespace_pod_cpu_utilization: "Pod CPU Utilization", - namespace_pod_memory_utilization: "Pod Memory Utilization", - namespace_app_container_cpu_utilization: "Container CPU Utilization", - namespace_app_container_memory_utilization: "Container Memory Utilization", -}; +export const VERTEX_PENDING_MESSAGES = "Vertex Pending Messages"; +export const VERTEX_PROCESSING_RATE = "Vertex Read Processing Rate"; +export const MONO_VERTEX_PENDING_MESSAGES = "MonoVertex Pending Messages"; +export const MONO_VERTEX_PROCESSING_RATE = "MonoVertex Read Processing Rate"; +export const MONO_VERTEX_PROCESSING_TIME_LATENCY = + "MonoVertex Processing Time Latency"; +export const MONO_VERTEX_SINK_WRITE_TIME_LATENCY = + "MonoVertex Sink Write Time Latency"; +export const POD_CPU_UTILIZATION = "Pod CPU Utilization"; +export const POD_MEMORY_UTILIZATION = "Pod Memory Utilization"; +export const CONTAINER_CPU_UTILIZATION = "Container CPU Utilization"; +export const CONTAINER_MEMORY_UTILIZATION = "Container Memory Utilization"; diff --git a/ui/src/utils/fetchWrappers/metricsFetch.ts b/ui/src/utils/fetchWrappers/metricsFetch.ts index 69c7bdd7c7..3c968d90a3 100644 --- a/ui/src/utils/fetchWrappers/metricsFetch.ts +++ b/ui/src/utils/fetchWrappers/metricsFetch.ts @@ -21,14 +21,21 @@ export const useMetricsFetch = ({ useEffect(() => { const fetchData = async () => { setIsLoading(true); - if ( Object.keys(filters).length > 0 && metricReq?.dimension !== undefined) { + if ( + Object.keys(filters).length > 0 && + metricReq?.dimension !== undefined + ) { try { const response = await fetch(urlPath, { method: "POST", headers: { "Content-Type": "application/json", }, - body: JSON.stringify({ ...metricReq, filters }), + body: JSON.stringify({ + ...metricReq, + filters, + display_name: undefined, + }), }); const data = await response.json(); if (data?.data === null) { @@ -48,7 +55,7 @@ export const useMetricsFetch = ({ } finally { setIsLoading(false); } - } else{ + } else { setIsLoading(false); } }; From d3478648cb391c4abca7c8ef311d7466b7b3300d Mon Sep 17 00:00:00 2001 From: veds-g Date: Sun, 9 Feb 2025 23:08:19 +0530 Subject: [PATCH 5/5] updating initial dropdown filter val Signed-off-by: veds-g --- .../Metrics/partials/common/Dropdown/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx index 7c3e852053..2f201c1d87 100644 --- a/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx +++ b/ui/src/components/pages/Pipeline/partials/Graph/partials/NodeInfo/partials/Pods/partials/PodDetails/partials/Metrics/partials/common/Dropdown/index.tsx @@ -29,11 +29,13 @@ const Dropdown = ({ }: MetricDropDownProps) => { // to handle cases there is no "mono-vertex" as dimension at top level (for eg: container level cpu/memory) const initialDimensionValue = useMemo(() => { - if (!metric?.dimensions?.length) return metric?.dimensions[0]?.name; + if (!metric?.dimensions?.length) return dimensionReverseMap[type]; - return metric?.dimensions?.find( - (val: any) => val?.name === dimensionReverseMap[type] - )?.name; + return ( + metric?.dimensions?.find( + (val: any) => val?.name === dimensionReverseMap[type] + )?.name || metric?.dimensions[0]?.name + ); }, [metric, type]); const getInitialValue = useMemo(() => {