@@ -44,7 +51,7 @@ export const Clusters = () => {
-
+
diff --git a/web/vtadmin/src/components/routes/Gates.tsx b/web/vtadmin/src/components/routes/Gates.tsx
index 5e0f0fefd24..42af8dc0764 100644
--- a/web/vtadmin/src/components/routes/Gates.tsx
+++ b/web/vtadmin/src/components/routes/Gates.tsx
@@ -27,6 +27,8 @@ import { ContentContainer } from '../layout/ContentContainer';
import { WorkspaceHeader } from '../layout/WorkspaceHeader';
import { WorkspaceTitle } from '../layout/WorkspaceTitle';
import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
+import { formatDashboardUrl } from '../../util/dashboards';
+import { getVitessMonitoringDashboardTitle, getVTGateMonitoringTemplate } from '../../util/env';
export const Gates = () => {
useDocumentTitle('Gates');
@@ -38,6 +40,7 @@ export const Gates = () => {
const mapped = (gatesQuery.data || []).map((g) => ({
cell: g.cell,
cluster: g.cluster?.name,
+ cluster_id: g.cluster?.id,
hostname: g.hostname,
keyspaces: g.keyspaces,
pool: g.pool,
@@ -67,9 +70,34 @@ export const Gates = () => {
{gate.cell}
{(gate.keyspaces || []).join(', ')}
+ {getVTGateMonitoringTemplate() && (
+
+
+ {gate.hostname as string}-metrics
+
+
+ )}
));
+ const columns = ['Pool', 'Hostname', 'Cell', 'Keyspaces'];
+ if (getVTGateMonitoringTemplate()) {
+ columns.push(getVitessMonitoringDashboardTitle());
+ }
+
return (
@@ -83,7 +111,7 @@ export const Gates = () => {
placeholder="Filter gates"
value={filter || ''}
/>
-
+
diff --git a/web/vtadmin/src/components/routes/Tablets.tsx b/web/vtadmin/src/components/routes/Tablets.tsx
index 75f0980dd6b..14baee9d481 100644
--- a/web/vtadmin/src/components/routes/Tablets.tsx
+++ b/web/vtadmin/src/components/routes/Tablets.tsx
@@ -35,14 +35,27 @@ import { TabletLink } from '../links/TabletLink';
import { ExternalTabletLink } from '../links/ExternalTabletLink';
import { ShardLink } from '../links/ShardLink';
import InfoDropdown from './tablets/InfoDropdown';
-import { isReadOnlyMode } from '../../util/env';
import { ReadOnlyGate } from '../ReadOnlyGate';
import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
+import { formatDashboardUrl } from '../../util/dashboards';
+import {
+ getVitessMonitoringDashboardTitle,
+ getMysqlMonitoringDashboardTitle,
+ getMysqlMonitoringTemplate,
+ getVTTabletMonitoringTemplate,
+ isReadOnlyMode,
+} from '../../util/env';
const COLUMNS = ['Keyspace', 'Shard', 'Alias', 'Type', 'Tablet State', 'Hostname'];
if (!isReadOnlyMode()) {
COLUMNS.push('Actions');
}
+if (getVTTabletMonitoringTemplate()) {
+ COLUMNS.push(getVitessMonitoringDashboardTitle());
+}
+if (getMysqlMonitoringTemplate()) {
+ COLUMNS.push(getMysqlMonitoringDashboardTitle());
+}
export const Tablets = () => {
useDocumentTitle('Tablets');
@@ -98,12 +111,57 @@ export const Tablets = () => {
{t.hostname}
-
+
+ {getVTTabletMonitoringTemplate() && (
+
+
+ {t.alias as string}-metrics
+
+
+ )}
+
+ {getMysqlMonitoringTemplate() && (
+
+
+ {t.alias as string}-MySQL-metrics
+
+
+ )}
));
},
@@ -151,6 +209,7 @@ export const formatRows = (
return {
alias: formatAlias(t.tablet?.alias),
+ cell: t.tablet?.alias?.cell,
cluster: t.cluster?.name,
hostname: t.tablet?.hostname,
isShardServing: shard?.shard?.is_primary_serving,
diff --git a/web/vtadmin/src/components/routes/clusters/ClusterRow.tsx b/web/vtadmin/src/components/routes/clusters/ClusterRow.tsx
index fba35d5257f..8efa69c7e61 100644
--- a/web/vtadmin/src/components/routes/clusters/ClusterRow.tsx
+++ b/web/vtadmin/src/components/routes/clusters/ClusterRow.tsx
@@ -7,6 +7,8 @@ import { useValidate } from '../../../hooks/api';
import { Label } from '../../inputs/Label';
import Toggle from '../../toggle/Toggle';
import ValidationResults from '../../ValidationResults';
+import { formatDashboardUrl } from '../../../util/dashboards';
+import { getVTClusterMonitoringTemplate } from '../../../util/env';
interface Props {
cluster: pb.Cluster;
@@ -86,6 +88,24 @@ const ClusterRow: React.FC = ({ cluster }) => {
Validate
+ {getVTClusterMonitoringTemplate() && (
+
+
+ {cluster.name as string}-metrics
+
+
+ )}
);
};
diff --git a/web/vtadmin/src/util/dashboards.test.ts b/web/vtadmin/src/util/dashboards.test.ts
new file mode 100644
index 00000000000..fb56a2c2693
--- /dev/null
+++ b/web/vtadmin/src/util/dashboards.test.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2025 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { formatDashboardUrl } from './dashboards';
+
+describe('formatDashboardUrl', () => {
+ it('returns null if template is undefined', () => {
+ expect(formatDashboardUrl(undefined, {})).toBeNull();
+ });
+
+ it('returns the template as-is if no params are provided', () => {
+ const template = 'https://example.com';
+ expect(formatDashboardUrl(template, {})).toBe(template);
+ });
+
+ it('replaces placeholders with values', () => {
+ const template = 'https://example.com/cluster/{cluster}/keyspace/{keyspace}';
+ const params = { cluster: 'prod', keyspace: 'commerce' };
+ expect(formatDashboardUrl(template, params)).toBe('https://example.com/cluster/prod/keyspace/commerce');
+ });
+
+ it('handles multiple occurrences of the same placeholder', () => {
+ const template = 'https://example.com/c/{cluster}/d/{cluster}';
+ const params = { cluster: 'prod' };
+ expect(formatDashboardUrl(template, params)).toBe('https://example.com/c/prod/d/prod');
+ });
+
+ it('ignores placeholders that are not in params', () => {
+ const template = 'https://example.com/{cluster}/{missing}';
+ const params = { cluster: 'prod' };
+ expect(formatDashboardUrl(template, params)).toBe('https://example.com/prod/{missing}');
+ });
+
+ it('ignores params that are undefined or null', () => {
+ const template = 'https://example.com/{cluster}';
+ const params = { cluster: undefined };
+ expect(formatDashboardUrl(template, params)).toBe('https://example.com/{cluster}');
+ });
+});
diff --git a/web/vtadmin/src/util/dashboards.ts b/web/vtadmin/src/util/dashboards.ts
new file mode 100644
index 00000000000..1c93f4b485f
--- /dev/null
+++ b/web/vtadmin/src/util/dashboards.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2025 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Replaces placeholders in a template string with values from a params object.
+ * Only placeholders present in the template will be replaced.
+ * Example: formatDashboardUrl("https://grafana.com/d/123?var-cluster={cluster}", { cluster: "prod" })
+ *
+ * Supported placeholders: {cluster}, {keyspace}, {shard}, {alias}, {hostname}, {type}, {cell}, {pool}
+ */
+export const formatDashboardUrl = (
+ template: string | undefined,
+ params: Record
+): string | null => {
+ if (!template) return null;
+
+ let url = template;
+ Object.entries(params).forEach(([key, value]) => {
+ if (value !== undefined && value !== null) {
+ // Replace all occurrences of {key}
+ url = url.replace(new RegExp(`{${key}}`, 'g'), value);
+ }
+ });
+
+ return url;
+};
diff --git a/web/vtadmin/src/util/env.ts b/web/vtadmin/src/util/env.ts
index e5009d6cb63..19f43874347 100644
--- a/web/vtadmin/src/util/env.ts
+++ b/web/vtadmin/src/util/env.ts
@@ -22,3 +22,16 @@ export const env: () => Vite.ImportMetaEnv = () => {
// to transmute it into a boolean. It is a function, rather than a constant,
// to support dynamic updates to import.meta.env in tests.
export const isReadOnlyMode = (): boolean => env().VITE_READONLY_MODE === 'true';
+
+// Monitoring templates.
+// These functions retrieve the URL templates for various monitoring dashboards from the environment variables.
+export const getVTClusterMonitoringTemplate = (): string | undefined => env().VITE_VITESS_MONITORING_CLUSTER_TEMPLATE;
+export const getVTTabletMonitoringTemplate = (): string | undefined => env().VITE_VITESS_MONITORING_VTTABLET_TEMPLATE;
+export const getVTGateMonitoringTemplate = (): string | undefined => env().VITE_VITESS_MONITORING_VTGATE_TEMPLATE;
+export const getMysqlMonitoringTemplate = (): string | undefined => env().VITE_MYSQL_MONITORING_TEMPLATE;
+
+// Column titles for monitoring dashboards.
+export const getVitessMonitoringDashboardTitle = (): string =>
+ env().VITE_VITESS_MONITORING_DASHBOARD_TITLE || 'Vt Monitoring Dashboard';
+export const getMysqlMonitoringDashboardTitle = (): string =>
+ env().VITE_MYSQL_MONITORING_DASHBOARD_TITLE || 'DB Monitoring Dashboard';
diff --git a/web/vtadmin/vite-env.d.ts b/web/vtadmin/vite-env.d.ts
index 618e9062f4b..3e726c3169b 100644
--- a/web/vtadmin/vite-env.d.ts
+++ b/web/vtadmin/vite-env.d.ts
@@ -44,6 +44,20 @@ declare namespace Vite {
// to also configure vtadmin-api for role-based access control (RBAC) if needed;
// see https://github.com/vitessio/vitess/blob/main/go/vt/vtadmin/rbac/rbac.go
VITE_READONLY_MODE?: string;
+
+ // Optional. Monitoring URL templates.
+ // Supports placeholders like {cluster}, {keyspace}, {shard}, {hostname}, {alias}, {cell}, {pool}
+ VITE_VITESS_MONITORING_CLUSTER_TEMPLATE?: string;
+ VITE_VITESS_MONITORING_VTTABLET_TEMPLATE?: string;
+ VITE_VITESS_MONITORING_VTGATE_TEMPLATE?: string;
+
+ // Optional. MySQL Monitoring URL template (e.g. for vtgates or tablets)
+ VITE_MYSQL_MONITORING_TEMPLATE?: string;
+
+ // Optional. Column titles for monitoring dashboards.
+ // Defaults to "Vt Monitoring Dashboard" and "DB Monitoring Dashboard" respectively.
+ VITE_VITESS_MONITORING_DASHBOARD_TITLE?: string;
+ VITE_MYSQL_MONITORING_DASHBOARD_TITLE?: string;
}
}