percentile selection

dashboard/src/main/home/cluster-dashboard/dashboard/Metrics.tsx

@@ -46,6 +46,7 @@ const Metrics: React.FC = () => {
   const [selectedMetricLabel, setSelectedMetricLabel] = useState(
     "Latency Histogram"
   );
+  const [selectedPercentile, setSelectedPercentile] = useState("0.99");
   const [data, setData] = useState<NormalizedMetricsData[]>([]);
   const [showMetricsSettings, setShowMetricsSettings] = useState(false);
   const [isLoading, setIsLoading] = useState(0);
@@ -55,7 +56,7 @@ const Metrics: React.FC = () => {
     if (selectedMetric && selectedRange && selectedIngress) {
       getMetrics();
     }
-  }, [selectedMetric, selectedRange, selectedIngress]);
+  }, [selectedMetric, selectedRange, selectedIngress, selectedPercentile]);
 
   useEffect(() => {
     Promise.all([
@@ -142,6 +143,30 @@ const Metrics: React.FC = () => {
               options={ingressOptions}
               width="100%"
             />
+            {selectedMetric == "nginx:latency-histogram" && (
+              <SelectRow
+                label="Percentile"
+                value={selectedPercentile}
+                setActiveValue={(x) => {
+                  setSelectedPercentile(x);
+                }}
+                options={[
+                  {
+                    label: "99",
+                    value: "0.99",
+                  },
+                  {
+                    label: "95",
+                    value: "0.95",
+                  },
+                  {
+                    label: "50",
+                    value: "0.5",
+                  },
+                ]}
+                width="100%"
+              />
+            )}
           </DropdownAlt>
         </>
       );
@@ -210,6 +235,10 @@ const Metrics: React.FC = () => {
           shouldsum: false,
           kind: "Ingress",
           namespace: selectedIngress?.namespace || "default",
+          percentile:
+            selectedMetric == "nginx:latency-histogram"
+              ? parseFloat(selectedPercentile)
+              : undefined,
           startrange: start,
           endrange: end,
           resolution: resolutions[selectedRange],
@@ -248,7 +277,7 @@ const Metrics: React.FC = () => {
     </p>
   ) : (
     <StyledMetricsSection>
-      <MetricsHeader>
+      <Header>
         <Flex>
           <MetricSelector
             onClick={() => setDropdownExpanded(!dropdownExpanded)}
@@ -281,7 +310,7 @@ const Metrics: React.FC = () => {
             setCurrentTab={(x: string) => setSelectedRange(x)}
           />
         </RangeWrapper>
-      </MetricsHeader>
+      </Header>
       {isLoading > 0 && <Loading />}
       {data.length === 0 && isLoading === 0 && (
         <Message>
@@ -513,3 +542,10 @@ const StyledMetricsSection = styled.div`
     }
   }
 `;
+
+const Header = styled.div`
+  font-weight: 500;
+  color: #aaaabb;
+  font-size: 16px;
+  margin-bottom: 15px;
+`;

dashboard/src/shared/api.tsx

@@ -571,6 +571,7 @@ const getMetrics = baseApi<
     pods?: string[];
     kind?: string; // the controller kind
     name?: string;
+    percentile?: number;
     namespace: string;
     startrange: number;
     endrange: number;

internal/kubernetes/prometheus/metrics.go

@@ -86,6 +86,7 @@ type QueryOpts struct {
 	StartRange uint     `schema:"startrange"`
 	EndRange   uint     `schema:"endrange"`
 	Resolution string   `schema:"resolution"`
+	Percentile float64  `schema:"percentile"`
 }
 
 func QueryPrometheus(
@@ -129,7 +130,7 @@ func QueryPrometheus(
 		denom := fmt.Sprintf(`sum(rate(nginx_ingress_controller_request_duration_seconds_count{namespace=~"%s",ingress=~"%s"}[5m]))`, opts.Namespace, selectionRegex)
 		query = fmt.Sprintf(`%s / %s OR on() vector(0)`, num, denom)
 	} else if opts.Metric == "nginx:latency-histogram" {
-		query = fmt.Sprintf(`histogram_quantile(0.99, sum(rate(nginx_ingress_controller_request_duration_seconds_bucket{status!="404",status!="500",namespace=~"%s",ingress=~"%s"}[5m])) by (le, ingress))`, opts.Namespace, selectionRegex)
+		query = fmt.Sprintf(`histogram_quantile(%f, sum(rate(nginx_ingress_controller_request_duration_seconds_bucket{status!="404",status!="500",namespace=~"%s",ingress=~"%s"}[5m])) by (le, ingress))`, opts.Percentile, opts.Namespace, selectionRegex)
 	} else if opts.Metric == "cpu_hpa_threshold" {
 		// get the name of the kube hpa metric
 		metricName, hpaMetricName := getKubeHPAMetricName(clientset, service, opts, "spec_target_metric")