fix: Bring back the JSON tab

Signed-off-by: Noble Mittal <[email protected]>
vitessio · Jan 3, 2025 · f727d9a · f727d9a
1 parent 0667994
commit f727d9a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 7 deletions.
diff --git a/web/vtadmin/src/components/routes/VTExplain.tsx b/web/vtadmin/src/components/routes/VTExplain.tsx
@@ -26,7 +26,6 @@ import style from './VTExplain.module.scss';
 import { Code } from '../Code';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import { Label } from '../inputs/Label';
-import JSONViewTree from '../jsonViewTree/JSONViewTree';
 
 // TODO(doeg): persist form data in URL, error handling, loading state, um... hm. Most things still need doing.
 // This whole component is the hastiest prototype ever. :')
@@ -108,7 +107,7 @@ export const VTExplain = () => {
 
                 {error && (
                     <section className={style.errorPanel}>
-                        <JSONViewTree data={error} />
+                        <Code code={JSON.stringify(error, null, 2)} />
                     </section>
                 )}
 

diff --git a/web/vtadmin/src/components/routes/keyspace/Keyspace.tsx b/web/vtadmin/src/components/routes/keyspace/Keyspace.tsx
@@ -32,6 +32,7 @@ import style from './Keyspace.module.scss';
 import { KeyspaceShards } from './KeyspaceShards';
 import { KeyspaceVSchema } from './KeyspaceVSchema';
 import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -94,6 +95,7 @@ export const Keyspace = () => {
                     <Tab text="Shards" to={`${url}/shards`} />
                     <Tab text="VSchema" to={`${url}/vschema`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
 
                     <ReadOnlyGate>
                         <Tab text="Advanced" to={`${url}/advanced`} />
@@ -110,6 +112,11 @@ export const Keyspace = () => {
                     </Route>
 
                     <Route path={`${path}/json`}>
+                        <QueryLoadingPlaceholder query={kq} />
+                        <Code code={JSON.stringify(keyspace, null, 2)} />
+                    </Route>
+
+                    <Route path={`${path}/json_tree`}>
                         <QueryLoadingPlaceholder query={kq} />
                         <JSONViewTree data={keyspace} />
                     </Route>

diff --git a/web/vtadmin/src/components/routes/keyspace/KeyspaceVSchema.tsx b/web/vtadmin/src/components/routes/keyspace/KeyspaceVSchema.tsx
@@ -15,7 +15,7 @@
  */
 
 import { useVSchema } from '../../../hooks/api';
-import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 import { QueryErrorPlaceholder } from '../../placeholders/QueryErrorPlaceholder';
 import { QueryLoadingPlaceholder } from '../../placeholders/QueryLoadingPlaceholder';
 
@@ -30,7 +30,7 @@ export const KeyspaceVSchema = ({ clusterID, name }: Props) => {
         <div>
             <QueryLoadingPlaceholder query={query} />
             <QueryErrorPlaceholder query={query} title="Couldn't load VSchema" />
-            {query.isSuccess && <JSONViewTree data={query.data} />}
+            {query.isSuccess && <Code code={JSON.stringify(query.data, null, 2)} />}
         </div>
     );
 };
diff --git a/web/vtadmin/src/components/routes/shard/Shard.tsx b/web/vtadmin/src/components/routes/shard/Shard.tsx
@@ -30,6 +30,7 @@ import { useKeyspace } from '../../../hooks/api';
 import { ShardTablets } from './ShardTablets';
 import Advanced from './Advanced';
 import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -114,6 +115,7 @@ export const Shard = () => {
                 <TabContainer>
                     <Tab text="Tablets" to={`${url}/tablets`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
                     <Tab text="Advanced" to={`${url}/advanced`} />
                 </TabContainer>
 
@@ -122,7 +124,8 @@ export const Shard = () => {
                         <ShardTablets {...params} />
                     </Route>
 
-                    <Route path={`${path}/json`}>{shard && <JSONViewTree data={shard} />}</Route>
+                    <Route path={`${path}/json`}>{shard && <Code code={JSON.stringify(shard, null, 2)} />}</Route>
+                    <Route path={`${path}/json_tree`}>{shard && <JSONViewTree data={shard} />}</Route>
                     <Route path={`${path}/advanced`}>
                         <Advanced />
                     </Route>

diff --git a/web/vtadmin/src/components/routes/stream/Stream.tsx b/web/vtadmin/src/components/routes/stream/Stream.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Link, useParams } from 'react-router-dom';
+import { Link, Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom';
 
 import { useWorkflow } from '../../../hooks/api';
 import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
@@ -24,6 +24,9 @@ import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
 import { WorkspaceTitle } from '../../layout/WorkspaceTitle';
 import style from './Stream.module.scss';
 import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { TabContainer } from '../../tabs/TabContainer';
+import { Tab } from '../../tabs/Tab';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -36,6 +39,7 @@ interface RouteParams {
 
 export const Stream = () => {
     const params = useParams<RouteParams>();
+    const { path, url } = useRouteMatch();
     const { data: workflow } = useWorkflow({
         clusterID: params.clusterID,
         keyspace: params.keyspace,
@@ -72,7 +76,17 @@ export const Stream = () => {
                 </div>
             </WorkspaceHeader>
             <ContentContainer>
-                <JSONViewTree data={stream} />
+                <TabContainer>
+                    <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
+                </TabContainer>
+
+                <Switch>
+                    <Route path={`${path}/json`}>{stream && <Code code={JSON.stringify(stream, null, 2)} />}</Route>
+                    <Route path={`${path}/json_tree`}>{stream && <JSONViewTree data={stream} />}</Route>
+
+                    <Redirect exact from={path} to={`${path}/json`} />
+                </Switch>
             </ContentContainer>
         </div>
     );

diff --git a/web/vtadmin/src/components/routes/tablet/Tablet.tsx b/web/vtadmin/src/components/routes/tablet/Tablet.tsx
@@ -34,6 +34,7 @@ import { TabletCharts } from './TabletCharts';
 import { env } from '../../../util/env';
 import FullStatus from './FullStatus';
 import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     alias: string;
@@ -108,6 +109,7 @@ export const Tablet = () => {
                     <Tab text="QPS" to={`${url}/qps`} />
                     <Tab text="Full Status" to={`${url}/full-status`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
                     <ReadOnlyGate>
                         <Tab text="Advanced" to={`${url}/advanced`} />
                     </ReadOnlyGate>
@@ -119,6 +121,16 @@ export const Tablet = () => {
                     </Route>
 
                     <Route path={`${path}/json`}>
+                        <div>
+                            <Code code={JSON.stringify(tablet, null, 2)} />
+
+                            {env().VITE_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS && (
+                                <Code code={JSON.stringify(debugVars, null, 2)} />
+                            )}
+                        </div>
+                    </Route>
+
+                    <Route path={`${path}/json_tree`}>
                         <div>
                             <JSONViewTree data={tablet} />
 

diff --git a/web/vtadmin/src/components/routes/workflow/Workflow.tsx b/web/vtadmin/src/components/routes/workflow/Workflow.tsx
@@ -35,6 +35,7 @@ import { WorkflowVDiff } from './WorkflowVDiff';
 import { Select } from '../../inputs/Select';
 import { formatDateTimeShort } from '../../../util/time';
 import JSONViewTree from '../../jsonViewTree/JSONViewTree';
+import { Code } from '../../Code';
 
 interface RouteParams {
     clusterID: string;
@@ -168,6 +169,7 @@ export const Workflow = () => {
                     <Tab text="Details" to={`${url}/details`} />
                     <Tab text="VDiff" to={`${url}/vdiff`} />
                     <Tab text="JSON" to={`${url}/json`} />
+                    <Tab text="JSON Tree" to={`${url}/json_tree`} />
                 </TabContainer>
 
                 <Switch>
@@ -189,6 +191,10 @@ export const Workflow = () => {
                     </Route>
 
                     <Route path={`${path}/json`}>
+                        <Code code={JSON.stringify(data, null, 2)} />
+                    </Route>
+
+                    <Route path={`${path}/json_tree`}>
                         <JSONViewTree data={data} />
                     </Route>