Add new router page - querytracer

3 files changed, 29 insertions, 4 deletions

diff --git a/client/js/app/src/app/app.jsx b/client/js/app/src/app/app.jsx
index c7a37448395..cb7441a2969 100644
--- a/client/js/app/src/app/app.jsx
+++ b/client/js/app/src/app/app.jsx
@@ -3,6 +3,7 @@ import { BrowserRouter, Route } from 'react-router-dom';
 import { Error, Layout } from 'app/components';
 import { Home } from 'app/pages/home/home';
 import { QueryBuilder } from 'app/pages/querybuilder/query-builder';
+import { QueryTracer } from 'app/pages/querytracer/query-tracer';
 import { AppProvider } from 'app/libs/app-provider';
 import { AppRouter } from 'app/libs/app-router';
 
@@ -14,6 +15,7 @@ export function App() {
           <AppRouter>
             <Route path="/" element={<Home />} />
             <Route path="querybuilder" element={<QueryBuilder />} />
+            <Route path="querytracer" element={<QueryTracer />} />
             <Route path="*" element={<Error code={404} />} />
           </AppRouter>
         </Layout>
diff --git a/client/js/app/src/app/pages/home/home.jsx b/client/js/app/src/app/pages/home/home.jsx
index 4f576fd222c..05e8d91f81f 100644
--- a/client/js/app/src/app/pages/home/home.jsx
+++ b/client/js/app/src/app/pages/home/home.jsx
@@ -1,12 +1,29 @@
 import React from 'react';
-import { Container, Link, CardLink } from 'app/components';
+import { Container, SimpleGrid, Space } from '@mantine/core';
+import { Link, CardLink, Icon } from 'app/components';
 
 export function Home() {
   return (
     <Container>
-      <CardLink component={Link} to="/querybuilder">
-        query builder
-      </CardLink>
+      <Space h={55} />
+      <SimpleGrid
+        style={{ gridAutoRows: 'minmax(0, 144px)' }}
+        breakpoints={[
+          { maxWidth: 'sm', cols: 2, spacing: 'sm' },
+          { maxWidth: 'xs', cols: 1, spacing: 'sm' },
+        ]}
+        spacing="lg"
+        cols={2}
+      >
+        <CardLink component={Link} to="/querybuilder">
+          <Icon name="arrows-to-dot" size="2x" />
+          query builder
+        </CardLink>
+        <CardLink component={Link} to="/querytracer">
+          <Icon name="chart-gantt" size="2x" />
+          query tracer
+        </CardLink>
+      </SimpleGrid>
     </Container>
   );
 }
diff --git a/client/js/app/src/app/pages/querytracer/query-tracer.jsx b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
new file mode 100644
index 00000000000..94c293d37ed
--- /dev/null
+++ b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Container } from 'app/components';
+
+export function QueryTracer() {
+  return <Container>query tracer</Container>;
+}