fix(o11y): add connections to footer

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/ComputeMetricsFooter.tsx

@@ -10,7 +10,11 @@ import { useComputeMetrics } from '@/hooks/analytics/useComputeMetrics'
  * to the database report. Metrics are project-scoped, which reports the
  * primary on both standard and High Availability projects.
  */
-export const ComputeMetricsFooter = ({ showConnections = true }: { showConnections?: boolean }) => {
+export const ComputeMetricsFooter = ({
+  isConnectionsAvailable = true,
+}: {
+  isConnectionsAvailable?: boolean
+}) => {
   const { ref } = useParams()
 
   const {
@@ -25,6 +29,7 @@ export const ComputeMetricsFooter = ({ showConnections = true }: { showConnectio
   })
 
   const observabilityUrl = `/project/${ref}/observability/database`
+  const hasConnectionMetrics = isConnectionsAvailable && connections !== null && connections.max > 0
 
   return (
     <Tooltip>
@@ -41,7 +46,8 @@ export const ComputeMetricsFooter = ({ showConnections = true }: { showConnectio
               <>
                 {cpu === null && 'CPU unavailable. '}
                 {disk === null && 'Disk unavailable. '}
-                {memory === null && 'RAM unavailable.'}
+                {memory === null && 'RAM unavailable. '}
+                {!hasConnectionMetrics && 'Connection metrics unavailable.'}
               </>
             )}
           </span>
@@ -70,14 +76,18 @@ export const ComputeMetricsFooter = ({ showConnections = true }: { showConnectio
               <span>
                 RAM <MetricValue value={memory} />
               </span>
-              {showConnections && connections !== null && connections.max > 0 && (
-                <>
-                  <span className="text-foreground-lighter">·</span>
-                  <span className="text-foreground-light">
+              <span className="text-foreground-lighter">·</span>
+              <span className="text-foreground-light">
+                {hasConnectionMetrics ? (
+                  <>
                     {connections.peak}/{connections.max} conns
-                  </span>
-                </>
-              )}
+                  </>
+                ) : (
+                  <>
+                    Conns <span className="text-foreground-lighter">Unavailable</span>
+                  </>
+                )}
+              </span>
             </>
           )}
         </Link>

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/HaInstanceNode.tsx

@@ -115,8 +115,8 @@ export const HaPrimaryNode = ({ data }: NodeProps<Node<HaPoolerNodeData>>) => {
           )}
         </div>
         {/* Whether connection metrics are meaningful through the multigateway
-            is unconfirmed, so they're left off for HA projects. */}
-        <ComputeMetricsFooter showConnections={false} />
+            is unconfirmed, so they're marked unavailable for HA projects. */}
+        <ComputeMetricsFooter isConnectionsAvailable={false} />
       </div>
       <Handle type="source" position={Position.Bottom} style={{ background: 'transparent' }} />
     </>