CONSOLE-5298: enable http2 on the backend

cmd/bridge/main.go

@@ -34,6 +34,7 @@ import (
 	ctrlmetrics "sigs.k8s.io/controller-runtime/pkg/metrics/server"
 
 	"github.com/patrickmn/go-cache"
+	"golang.org/x/net/http2"
 	kruntime "k8s.io/apimachinery/pkg/runtime"
 	"k8s.io/client-go/rest"
 	klog "k8s.io/klog/v2"
@@ -734,6 +735,13 @@ func main() {
 
 	httpsrv := &http.Server{Handler: handler}
 
+	if listenURL.Scheme == "https" {
+		if err := http2.ConfigureServer(httpsrv, &http2.Server{}); err != nil {
+			klog.Fatalf("failed to configure HTTP/2: %v", err)
+		}
+		klog.Info("HTTP/2 enabled")
+	}
+
 	listener, err := listen(listenURL.Scheme, listenURL.Host, *fTLSCertFile, *fTLSKeyFile)
 	if err != nil {
 		klog.Fatalf("error getting listener, %v", err)
@@ -781,7 +789,7 @@ func listen(scheme, host, certFile, keyFile string) (net.Listener, error) {
 	}
 	klog.Info("Using TLS")
 	tlsConfig := &tls.Config{
-		NextProtos: []string{"http/1.1"},
+		NextProtos: []string{"h2", "http/1.1"},
 		GetCertificate: func(_ *tls.ClientHelloInfo) (*tls.Certificate, error) {
 			klog.V(4).Infof("Getting TLS certs.")
 			cert, err := tls.LoadX509KeyPair(certFile, keyFile)

frontend/packages/console-shared/src/components/loading/LoadingBox.tsx

@@ -1,10 +1,12 @@
 import type { FC, ReactNode } from 'react';
+import { useEffect, useId } from 'react';
 import { ConsoleEmptyState } from '../empty-state/ConsoleEmptyState';
 import { Loading } from './Loading';
 
-// We do not use react-router here as LoadingBox may be used outside the router context scope
-// This const will only be evaluated once on first load. We mess with the query params a lot
-// so this would be easily lost otherwise.
+// Enables critical rendering path (CRP) blame mode, which helps with debugging
+// performance issues related to the loading state. Adds extra profiling information
+// to the browser devtools Performance tab, and shows the loading component's `blame`
+// prop as the title of the loading box.
 const IS_BLAME_ENABLED = new URLSearchParams(window.location.search).has('crp-blame');
 
 interface LoadingBoxProps {
@@ -18,6 +20,20 @@ interface LoadingBoxProps {
 }
 
 export const LoadingBox: FC<LoadingBoxProps> = ({ blame = 'LoadingBox', children }) => {
+  const id = useId();
+
+  useEffect(() => {
+    if (!IS_BLAME_ENABLED) {
+      return undefined;
+    }
+    const markName = `LoadingBox:${blame}:${id}`;
+    performance.mark(`${markName}:start`);
+    return () => {
+      performance.mark(`${markName}:end`);
+      performance.measure(markName, `${markName}:start`, `${markName}:end`);
+    };
+  }, [blame, id]);
+
   return (
     <ConsoleEmptyState
       data-test="loading-box"