@@ -50,7 +44,7 @@ export const Clusters = () => {
-
+
diff --git a/web/vtadmin/src/components/routes/Gates.tsx b/web/vtadmin/src/components/routes/Gates.tsx
index 354d4507a3e..5e0f0fefd24 100644
--- a/web/vtadmin/src/components/routes/Gates.tsx
+++ b/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 = () => {
{gate.pool}
{gate.cluster}
-
{gate.hostname}
+
+ {gate.fqdn ? (
+
+ ) : (
+ gate.hostname
+ )}
+
{gate.cell}
{(gate.keyspaces || []).join(', ')}
diff --git a/web/vtadmin/src/components/routes/clusters/ClusterRow.tsx b/web/vtadmin/src/components/routes/clusters/ClusterRow.tsx
new file mode 100644
index 00000000000..fba35d5257f
--- /dev/null
+++ b/web/vtadmin/src/components/routes/clusters/ClusterRow.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { DataCell } from '../../dataTable/DataCell';
+import { vtadmin as pb } from '../../../proto/vtadmin';
+import Dialog from '../../dialog/Dialog';
+import { Icon, Icons } from '../../Icon';
+import { useValidate } from '../../../hooks/api';
+import { Label } from '../../inputs/Label';
+import Toggle from '../../toggle/Toggle';
+import ValidationResults from '../../ValidationResults';
+
+interface Props {
+ cluster: pb.Cluster;
+}
+
+const ClusterRow: React.FC
= ({ cluster }) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [pingTablets, setPingTablets] = useState(false);
+
+ const { mutate, error, data, isIdle, reset } = useValidate({ clusterID: cluster.id, pingTablets });
+ const closeDialog = () => {
+ setIsOpen(false);
+ reset();
+ };
+ return (
+
+
+ {cluster.name}
+ {cluster.id}
+
+
+
+
+ );
+};
+
+export default ClusterRow;
diff --git a/web/vtadmin/src/components/routes/shard/Advanced.tsx b/web/vtadmin/src/components/routes/shard/Advanced.tsx
index 3bf8b0ade6b..fc765e848a1 100644
--- a/web/vtadmin/src/components/routes/shard/Advanced.tsx
+++ b/web/vtadmin/src/components/routes/shard/Advanced.tsx
@@ -8,6 +8,8 @@ import {
useReloadSchemaShard,
useTabletExternallyPromoted,
useTablets,
+ useValidateShard,
+ useValidateVersionShard,
} from '../../../hooks/api';
import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
import ActionPanel from '../../ActionPanel';
@@ -19,9 +21,10 @@ import { TextInput } from '../../TextInput';
import { NumberInput } from '../../NumberInput';
import { Select } from '../../inputs/Select';
import { formatAlias, formatDisplayType } from '../../../util/tablets';
-import { logutil, vtadmin } from '../../../proto/vtadmin';
+import { logutil, vtadmin, vtctldata } from '../../../proto/vtadmin';
import Dialog from '../../dialog/Dialog';
import EventLogEntry from './EventLogEntry';
+import ValidationResults from '../../ValidationResults';
interface RouteParams {
clusterID: string;
keyspace: string;
@@ -40,7 +43,7 @@ const Advanced: React.FC = () => {
const { data: tablets = [] } = useTablets();
// dialog parameters
- const [isOpen, setIsOpen] = useState(false);
+ const [failoverDialogIsOpen, setFailoverDialogIsOpen] = useState(false);
const [dialogTitle, setDialogTitle] = useState('');
const [dialogDescription, setDialogDescription] = useState('');
const [events, setEvents] = useState([]);
@@ -117,7 +120,7 @@ const Advanced: React.FC = () => {
plannedReparentTablet?.tablet?.alias
)}.`
);
- setIsOpen(true);
+ setFailoverDialogIsOpen(true);
setEvents(result.events);
},
onError: (error) =>
@@ -142,7 +145,7 @@ const Advanced: React.FC = () => {
emergencyReparentTablet?.tablet?.alias
)}.`
);
- setIsOpen(true);
+ setFailoverDialogIsOpen(true);
setEvents(result.events);
},
onError: (error) =>
@@ -154,6 +157,62 @@ const Advanced: React.FC = () => {
}
);
+ // validation dialog parameters
+ const [validateDialogTitle, setValidateDialogTitle] = useState('');
+ const [validateDialogDescription, setValidateDialogDescription] = useState('');
+ const onCloseValidateDialog = () => {
+ setValidateDialogIsOpen(false);
+ setValidateDialogTitle('');
+ setValidateDialogDescription('');
+ setValidateShardResponse(null);
+ setValidateVersionShardResponse(null);
+ };
+
+ // validateShard parameters
+ const [pingTablets, setPingTablets] = useState(false);
+ const [validateDialogIsOpen, setValidateDialogIsOpen] = useState(false);
+ const [validateShardResponse, setValidateShardResponse] = useState(null);
+
+ const validateShardMutation = useValidateShard(
+ {
+ clusterID: params.clusterID,
+ keyspace: params.keyspace,
+ shard: params.shard,
+ pingTablets,
+ },
+ {
+ onSuccess: (result) => {
+ setValidateDialogTitle('Validate Shard');
+ setValidateDialogDescription(`Successfully validated ${params.shard}.`);
+ setValidateDialogIsOpen(true);
+ setValidateShardResponse(result);
+ },
+ onError: (error) => warn(`There was an error validating shard ${params.shard}: ${error}`),
+ }
+ );
+
+ const [
+ validateVersionShardResponse,
+ setValidateVersionShardResponse,
+ ] = useState(null);
+
+ const validateVersionShardMutation = useValidateVersionShard(
+ {
+ clusterID: params.clusterID,
+ keyspace: params.keyspace,
+ shard: params.shard,
+ },
+ {
+ onSuccess: (result) => {
+ setValidateDialogTitle('Validate Version Shard');
+ setValidateDialogDescription(`Successfully validated versions on ${params.shard}.`);
+ setValidateDialogIsOpen(true);
+ setValidateShardResponse(result);
+ },
+ onError: (error) => warn(`There was an error validating versions on shard ${params.shard}: ${error}`),
+ }
+ );
+
if (kq.error) {
return (
@@ -171,8 +230,9 @@ const Advanced: React.FC = () => {
<>
+
Status
+
+
+ Validates that all nodes reachable from the specified shard{' '}
+ {shardName} are consistent.
+
+ }
+ documentationLink="https://vitess.io/docs/reference/programs/vtctldclient/vtctldclient_validateshard/#vtctldclient-validateshard"
+ loadingText="Validating shard..."
+ loadedText="Validate"
+ mutation={validateShardMutation as UseMutationResult}
+ title="Validate Shard"
+ body={
+ <>
+
+
+ setPingTablets(!pingTablets)}
+ />
+
+
+ When set, all tablets are pinged during the validation process.
+
@@ -281,6 +403,7 @@ const Advanced: React.FC = () => {
selectedItem={tablet}
placeholder="Tablet"
description="This chosen tablet will be considered the shard primary (but Vitess won't change the replication setup)."
+ required
/>