docs(monitoring): add yaml and platform ui tabs to connector secret section

Author: johannesfrey

platform/maintenance/monitoring/fleet/install-observability-gateway.mdx

@@ -5,6 +5,12 @@ sidebar_position: 2
 description: Create a fleet observability connector that deploys the Write Gateway and Query Proxy for fleet monitoring.
 ---
 
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import Flow, { Step } from "@site/src/components/Flow";
+import Button from "@site/src/components/Button";
+import Label from "@site/src/components/Label";
+
 The observability gateway runs in the vCluster Platform namespace. It contains two
 containers:
 
@@ -35,6 +41,15 @@ Create one fleet observability connector in the Platform namespace. The fleet co
 must use the name `fleet-observability` and the label
 `loft.sh/fleet-observability-connector: "true"`.
 
+<Tabs
+  defaultValue="yaml"
+  values={[
+    { label: "YAML", value: "yaml" },
+    { label: "Platform UI", value: "ui" },
+  ]}
+>
+  <TabItem value="yaml">
+
 ```yaml title="fleet-observability-connector.yaml"
 apiVersion: v1
 kind: Secret
@@ -56,6 +71,38 @@ Apply the Secret:
 kubectl apply -f fleet-observability-connector.yaml
 ```
 
+  </TabItem>
+  <TabItem value="ui">
+
+<Flow>
+  <Step>
+    Click <Label>Connectors</Label> and select the <Label>Observability</Label> tab.
+  </Step>
+  <Step>
+    Click <Button>Connect Observability</Button>.
+  </Step>
+  <Step>
+    In the <Label>Display name</Label> field, enter a human-readable name for the connector.
+    The <Label>Observability Connector ID</Label> is auto-generated from the display name.
+    For the fleet connector, use a display name that resolves to the ID `fleet-observability`.
+  </Step>
+  <Step>
+    In the <Label>Metrics Backend OTLP Endpoint</Label> field, enter the OTLP endpoint that receives metrics from the Write Gateway.
+  </Step>
+  <Step>
+    In the <Label>Metrics Backend PromQL Endpoint</Label> field, enter the Prometheus HTTP API endpoint queried by the Query Proxy.
+  </Step>
+  <Step>
+    Optionally configure TLS for the metrics backend and the gateway. See [Connector keys](#connector-keys) for the available settings.
+  </Step>
+  <Step>
+    Click <Button>Connect Observability</Button>.
+  </Step>
+</Flow>
+
+  </TabItem>
+</Tabs>
+
 Platform reconciles the following resources:
 
 - `Deployment/gateway-fleet-observability`