[15.0] Add VTGate debug/status page link to VTAdmin (vitessio#11541)

* feat: add hyperlink using fqdn in vtgates

Signed-off-by: Manan Gupta <[email protected]>

* feat: provide correct vtgate web address in examples

Signed-off-by: Manan Gupta <[email protected]>

* refactor: fix prettier errors

Signed-off-by: Manan Gupta <[email protected]>

Signed-off-by: Manan Gupta <[email protected]>

Author: GuptaManan100

examples/local/vtadmin/discovery.json

@@ -10,6 +10,7 @@
     "vtgates": [
         {
             "host": {
+                "fqdn": "localhost:15001",
                 "hostname": "localhost:15991"
             }
         }

examples/region_sharding/vtadmin/discovery.json

@@ -10,6 +10,7 @@
     "vtgates": [
         {
             "host": {
+                "fqdn": "localhost:15001",
                 "hostname": "localhost:15991"
             }
         }

web/vtadmin/src/components/routes/Gates.tsx

@@ -41,6 +41,7 @@ export const Gates = () => {
             hostname: g.hostname,
             keyspaces: g.keyspaces,
             pool: g.pool,
+            fqdn: g.FQDN,
         }));
         const filtered = filterNouns(filter, mapped);
         return orderBy(filtered, ['cluster', 'pool', 'hostname', 'cell']);
@@ -53,7 +54,17 @@ export const Gates = () => {
                     <div>{gate.pool}</div>
                     <div className="text-sm text-secondary">{gate.cluster}</div>
                 </DataCell>
-                <DataCell className="whitespace-nowrap">{gate.hostname}</DataCell>
+                <DataCell className="whitespace-nowrap">
+                    {gate.fqdn ? (
+                        <div className="font-bold">
+                            <a href={`//${gate.fqdn}`} rel="noopener noreferrer" target="_blank">
+                                {gate.hostname}
+                            </a>
+                        </div>
+                    ) : (
+                        gate.hostname
+                    )}
+                </DataCell>
                 <DataCell className="whitespace-nowrap">{gate.cell}</DataCell>
                 <DataCell>{(gate.keyspaces || []).join(', ')}</DataCell>
             </tr>