+
setIsOpen(!isOpen)}>
+ {nodeTitle}
+
+
+ {isOpen && (
+
+ {node.data ? (
+
+ {node.data}
+
+ ) : (
+ <>
+ {node.children &&
+ node.children.map((child, idx) => {
+ return
;
+ })}
+ >
+ )}
+
+ )}
+
+ );
+};
diff --git a/web/vtadmin/src/components/routes/topologyTree/TopologyTree.tsx b/web/vtadmin/src/components/routes/topologyTree/TopologyTree.tsx
new file mode 100644
index 00000000000..cb27876391e
--- /dev/null
+++ b/web/vtadmin/src/components/routes/topologyTree/TopologyTree.tsx
@@ -0,0 +1,103 @@
+/**
+ * Copyright 2024 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 React, { useEffect, useState } from 'react';
+
+import { useTopologyPath } from '../../../hooks/api';
+import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
+import { ContentContainer } from '../../layout/ContentContainer';
+import { NavCrumbs } from '../../layout/NavCrumbs';
+import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
+import { WorkspaceTitle } from '../../layout/WorkspaceTitle';
+import { Link, useParams } from 'react-router-dom';
+
+import { Node } from './Node';
+import { vtctldata } from '../../../proto/vtadmin';
+
+export interface TopologyNode {
+ name?: string | null;
+ data?: string | null;
+ path: string;
+ children?: TopologyNode[];
+}
+
+export const buildChildNodes = (cell: vtctldata.ITopologyCell | null | undefined, path: string) => {
+ if (cell) {
+ const childNodes: TopologyNode[] | undefined = cell.children
+ ? cell.children.map((child) => {
+ return {
+ name: child,
+ path,
+ };
+ })
+ : undefined;
+ return childNodes;
+ }
+};
+
+export const TopologyTree = () => {
+ interface RouteParams {
+ clusterID: string;
+ }
+ useDocumentTitle('Cluster Topolgy');
+ const { clusterID } = useParams