diff --git a/config/advanced-install/namespaced-numaflow-server.yaml b/config/advanced-install/namespaced-numaflow-server.yaml index 7cb350b07..afad0b497 100644 --- a/config/advanced-install/namespaced-numaflow-server.yaml +++ b/config/advanced-install/namespaced-numaflow-server.yaml @@ -156,6 +156,9 @@ data: required: false metrics: - metric_name: vertex_pending_messages + display_name: Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -189,6 +192,9 @@ data: required: false metrics: - metric_name: monovtx_pending + display_name: Mono Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name @@ -225,6 +231,10 @@ data: required: false metrics: - metric_name: monovtx_processing_time_bucket + display_name: Mono Vertex Processing Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: s required_filters: - namespace - mvtx_name @@ -235,6 +245,10 @@ data: - name: pod required: false - metric_name: monovtx_sink_time_bucket + display_name: Mono Vertex Sink Write Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: ms required_filters: - namespace - mvtx_name @@ -259,6 +273,9 @@ data: required: false metrics: - metric_name: forwarder_data_read_total + display_name: Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -284,6 +301,9 @@ data: required: false metrics: - metric_name: monovtx_read_total + display_name: Mono Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name diff --git a/config/advanced-install/numaflow-server.yaml b/config/advanced-install/numaflow-server.yaml index fcb283f11..ffce78124 100644 --- a/config/advanced-install/numaflow-server.yaml +++ b/config/advanced-install/numaflow-server.yaml @@ -163,6 +163,9 @@ data: required: false metrics: - metric_name: vertex_pending_messages + display_name: Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -196,6 +199,9 @@ data: required: false metrics: - metric_name: monovtx_pending + display_name: Mono Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name @@ -232,6 +238,10 @@ data: required: false metrics: - metric_name: monovtx_processing_time_bucket + display_name: Mono Vertex Processing Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: s required_filters: - namespace - mvtx_name @@ -242,6 +252,10 @@ data: - name: pod required: false - metric_name: monovtx_sink_time_bucket + display_name: Mono Vertex Sink Write Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: ms required_filters: - namespace - mvtx_name @@ -266,6 +280,9 @@ data: required: false metrics: - metric_name: forwarder_data_read_total + display_name: Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -291,6 +308,9 @@ data: required: false metrics: - metric_name: monovtx_read_total + display_name: Mono Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name 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 fe634f5f1..9d1abf171 100644 --- a/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml +++ b/config/base/numaflow-server/numaflow-server-metrics-proxy-config.yaml @@ -22,6 +22,9 @@ data: required: false metrics: - metric_name: vertex_pending_messages + display_name: Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -55,6 +58,9 @@ data: required: false metrics: - metric_name: monovtx_pending + display_name: Mono Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name @@ -91,6 +97,10 @@ data: required: false metrics: - metric_name: monovtx_processing_time_bucket + display_name: Mono Vertex Processing Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: s required_filters: - namespace - mvtx_name @@ -101,6 +111,10 @@ data: - name: pod required: false - metric_name: monovtx_sink_time_bucket + display_name: Mono Vertex Sink Write Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: ms required_filters: - namespace - mvtx_name @@ -125,6 +139,9 @@ data: required: false metrics: - metric_name: forwarder_data_read_total + display_name: Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -150,6 +167,9 @@ data: required: false metrics: - metric_name: monovtx_read_total + display_name: Mono Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name diff --git a/config/install.yaml b/config/install.yaml index 69fbd4ca4..6410435be 100644 --- a/config/install.yaml +++ b/config/install.yaml @@ -28576,6 +28576,9 @@ data: required: false metrics: - metric_name: vertex_pending_messages + display_name: Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -28609,6 +28612,9 @@ data: required: false metrics: - metric_name: monovtx_pending + display_name: Mono Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name @@ -28645,6 +28651,10 @@ data: required: false metrics: - metric_name: monovtx_processing_time_bucket + display_name: Mono Vertex Processing Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: s required_filters: - namespace - mvtx_name @@ -28655,6 +28665,10 @@ data: - name: pod required: false - metric_name: monovtx_sink_time_bucket + display_name: Mono Vertex Sink Write Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: ms required_filters: - namespace - mvtx_name @@ -28679,6 +28693,9 @@ data: required: false metrics: - metric_name: forwarder_data_read_total + display_name: Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -28704,6 +28721,9 @@ data: required: false metrics: - metric_name: monovtx_read_total + display_name: Mono Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name diff --git a/config/namespace-install.yaml b/config/namespace-install.yaml index 810422a7c..25de004c4 100644 --- a/config/namespace-install.yaml +++ b/config/namespace-install.yaml @@ -28464,6 +28464,9 @@ data: required: false metrics: - metric_name: vertex_pending_messages + display_name: Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -28497,6 +28500,9 @@ data: required: false metrics: - metric_name: monovtx_pending + display_name: Mono Vertex Pending Messages + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name @@ -28533,6 +28539,10 @@ data: required: false metrics: - metric_name: monovtx_processing_time_bucket + display_name: Mono Vertex Processing Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: s required_filters: - namespace - mvtx_name @@ -28543,6 +28553,10 @@ data: - name: pod required: false - metric_name: monovtx_sink_time_bucket + display_name: Mono Vertex Sink Write Time Latency + # set "Units" or unset for default behaviour otherwise set "s" or "ms" for latency metrics + # Note: latency values are in μs + # unit: ms required_filters: - namespace - mvtx_name @@ -28567,6 +28581,9 @@ data: required: false metrics: - metric_name: forwarder_data_read_total + display_name: Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - pipeline @@ -28592,6 +28609,9 @@ data: required: false metrics: - metric_name: monovtx_read_total + display_name: Mono Vertex Read Processing Rate + # set "Units" or unset for default behaviour + # unit: Units required_filters: - namespace - mvtx_name diff --git a/server/apis/v1/handler.go b/server/apis/v1/handler.go index 17f0322c2..8f50136b1 100644 --- a/server/apis/v1/handler.go +++ b/server/apis/v1/handler.go @@ -1340,7 +1340,7 @@ func (h *handler) DiscoverMetrics(c *gin.Context) { }) } - discoveredMetrics = append(discoveredMetrics, NewDiscoveryResponse(metric.Name, dimensionData)) + discoveredMetrics = append(discoveredMetrics, NewDiscoveryResponse(metric.Name, metric.DisplayName, metric.Unit, dimensionData)) } } } diff --git a/server/apis/v1/response_metrics.go b/server/apis/v1/response_metrics.go index 3b4a26507..685e9f0d4 100644 --- a/server/apis/v1/response_metrics.go +++ b/server/apis/v1/response_metrics.go @@ -32,7 +32,9 @@ type Dimension struct { } type Metric struct { - Name string `yaml:"metric_name"` + Name string `yaml:"metric_name"` + DisplayName string `yaml:"display_name"` + Unit string `yaml:"unit"` // array of required labels. Filters []string `yaml:"required_filters"` //array of dimensions and their data diff --git a/server/apis/v1/response_metrics_discovery.go b/server/apis/v1/response_metrics_discovery.go index ef2a160e1..9c0e09acc 100644 --- a/server/apis/v1/response_metrics_discovery.go +++ b/server/apis/v1/response_metrics_discovery.go @@ -7,17 +7,21 @@ type Dimensions struct { } type DiscoveryResponse struct { - MetricName string `json:"metric_name"` - Dimensions []Dimensions `json:"dimensions"` + MetricName string `json:"metric_name"` + DisplayName string `json:"display_name"` + Unit string `json:"unit"` + Dimensions []Dimensions `json:"dimensions"` } // MetricsDiscoveryResponse is a list of DiscoveryResponse type MetricsDiscoveryResponse []DiscoveryResponse // NewDiscoveryResponse creates a new DiscoveryResponse object for each metric. -func NewDiscoveryResponse(metricName string, dimensions []Dimensions) DiscoveryResponse { +func NewDiscoveryResponse(metricName, displayName, unitName string, dimensions []Dimensions) DiscoveryResponse { return DiscoveryResponse{ - MetricName: metricName, - Dimensions: dimensions, + MetricName: metricName, + DisplayName: displayName, + Unit: unitName, + Dimensions: dimensions, } } 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 71f5ee862..fdb32539f 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 @@ -83,7 +83,7 @@ export function Metrics({ namespaceId, pipelineId, type, vertexId }: MetricsProp id={`${metric?.metric_name}-header`} > - {metricNameMap[metric?.metric_name] || metric?.metric_name} + {metric?.display_name || metricNameMap[metric?.metric_name] || metric?.metric_name} 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 9a8f4a443..403cd082f 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 @@ -8,6 +8,7 @@ import { Tooltip, XAxis, YAxis, + Text } from "recharts"; import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; @@ -17,6 +18,94 @@ import EmptyChart from "../EmptyChart"; import { useMetricsFetch } from "../../../../../../../../../../../../../../../utils/fetchWrappers/metricsFetch"; import TimeSelector from "../common/TimeRange"; +interface TooltipProps { + payload?: any[]; + label?: string; + active?: boolean; +} + +function CustomTooltip({ payload, label, active }: TooltipProps) { + if (active && payload && payload.length) { + const maxWidth = Math.max(...payload.map(entry => entry.name.length)) * 9.5; + console.log("max width: ", maxWidth) + return ( +
+

{label}

+ {payload.map((entry: any, index: any) => ( +
+ {entry.name}: + {entry.value} +
+ ))} +
+ ); + } + + return null; +} + +const getYAxisLabel = (unit: string) => { + if (unit !== "") { + return unit + } + return "Units" +}; + +const getDefaultFormatter = (value: number, metricName: string) => { + const formatValue = (value: number, suffix: string) => { + const formattedValue = parseFloat(value.toFixed(2)); + return formattedValue % 1 === 0 + ? `${Math.floor(formattedValue)}${suffix}` + : `${formattedValue}${suffix}`; + }; + switch(metricName){ + case "monovtx_ack_time_bucket": + case "monovtx_read_time_bucket": + case "monovtx_processing_time_bucket": + case "monovtx_sink_time_bucket": + case "numaflow_monovtx_processing_time_bucket": + case "numaflow_monovtx_sink_time_bucket": + case "numaflow_monovtx_read_time_bucket": + case "numaflow_monovtx_ack_time_bucket": + if (value === 0){ + return "0"; + } else if (value < 1000) { + return `${value} μs`; + } else if (value < 1000000) { + return formatValue(value / 1000, " ms"); + } else { + return formatValue(value / 1000000, " s"); + } + default: + if (value === 0){ + return "0"; + } else if (value < 1000) { + return `${value}`; + } else if (value < 1000000) { + return formatValue(value / 1000, " k"); + } else { + return formatValue(value / 1000000, " M"); + } + } +} + +const getTickFormatter = (unit: string, metricName: string) => { + const formatValue = (value: number) => { + const formattedValue = parseFloat(value.toFixed(2)); // Format to 2 decimal places + return formattedValue % 1 === 0 ? Math.floor(formattedValue) : formattedValue; // Remove trailing .0 + }; + return (value: number) => { + switch (unit) { + case 's': + return `${formatValue(value / 1000000)}`; + case 'ms': + return `${formatValue(value / 1000)}`; + default: + return getDefaultFormatter(value, metricName); + } + } +}; + // TODO have a check for metricReq against metric object to ensure required fields are passed const LineChartComponent = ({ namespaceId, @@ -40,7 +129,7 @@ const LineChartComponent = ({ const getRandomColor = useCallback((index: number) => { const hue = (index * 137.508) % 360; - return `hsl(${hue}, 70%, 50%)`; + return `hsl(${hue}, 50%, 50%)`; }, []); const getFilterValue = useCallback( @@ -226,29 +315,29 @@ const LineChartComponent = ({ {filtersList?.filter((filterEle: any) => !filterEle?.required)?.length > 0 && ( - - Filters - !filterEle?.required - )} - namespaceId={namespaceId} - pipelineId={pipelineId} - type={type} - vertexId={vertexId} - setFilters={setFilters} - /> - - )} + + Filters + !filterEle?.required + )} + namespaceId={namespaceId} + pipelineId={pipelineId} + type={type} + vertexId={vertexId} + setFilters={setFilters} + /> + + )} {isLoading && ( - - - + + + {getYAxisLabel(metric?.unit)}} + tickFormatter={getTickFormatter(metric?.unit, metric?.metric_name)} + /> + + + {chartLabels?.map((value, index) => ( ))} - + }/> 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 b953f217e..723c49ab0 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 @@ -32,15 +32,15 @@ export const dimensionReverseMap: { [p: string]: string } = { }; export const metricNameMap: { [p: string]: string } = { - monovtx_ack_time_bucket: "Mono Vertex Ack Time Latency (in micro seconds)", - monovtx_read_time_bucket: "Mono Vertex Read Time Latency (in micro seconds)", + 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 (in micro seconds)", + "Mono Vertex Processing Time Latency", monovtx_sink_time_bucket: - "Mono Vertex Sink Write Time Latency (in micro seconds)", + "Mono Vertex Sink Write Time Latency", forwarder_data_read_total: - "Vertex Read Processing Rate (messages per second)", - monovtx_read_total: "Mono Vertex Read Processing Rate (messages per second)", + "Vertex Read Processing Rate", + monovtx_read_total: "Mono Vertex Read Processing Rate", monovtx_pending: "Mono Vertex Pending Messages", vertex_pending_messages: "Vertex Pending Messages", };