Tables route styling

CHANGES.md

@@ -2,35 +2,37 @@
 
 ## Unreleased
 
+- Added responsive styling to the tables page.
+
 ## 2024-01-26 - 0.2.1
 
 - Added type information to the result table.
-- Add "Cancel" and "Save" buttons into ScheduledJobLogs component
-- SQL Scheduler UI improvements
+- Add "Cancel" and "Save" buttons into ScheduledJobLogs component.
+- SQL Scheduler UI improvements.
 
 ## 2024-01-25 - 0.2.0
 
 - Added a cluster overview page with overall cluster stats.
-- Updated navigation to be fully responsive and branded
+- Updated navigation to be fully responsive and branded.
 - Added charts to the cluster overview.
 - Improved formatting in the results table.
 - Added formatting of Arrays and Objects in the results table.
 - Dynamically showing the header in the SQL Console.
 
 ## 2024-01-22 - 0.1.2
 
-- Improved SQL Scheduler UI and add tests
+- Improved SQL Scheduler UI and add tests.
 
 ## 2024-01-22 - 0.1.1
 
-- Initial release
-- SQL Page
-- Users Page
-- Enterprise Wrapper for pages which require GC
-- Tables Page
-- Implemented navigation (Ctrl+Up/Ctrl+Down) in the SQL Editor
-- Implemented SQL Scheduler UI
+- Initial release.
+- SQL Page.
+- Users Page.
+- Enterprise Wrapper for pages which require GC.
+- Tables Page.
+- Implemented navigation (Ctrl+Up/Ctrl+Down) in the SQL Editor.
+- Implemented SQL Scheduler UI.
 - Added support for displaying certain types differently in the SQLResultsTable.
-- Added a top bar with a logo
-- Added builds for deploying as npm package
-- Added a status bar and calculating cluster data status
+- Added a top bar with a logo.
+- Added builds for deploying as npm package.
+- Added a status bar and calculating cluster data status.

src/components/StatusBar/StatusBar.tsx

@@ -116,7 +116,7 @@ function StatusBar() {
   return (
     <>
       <div
-        className="gap-3 flex leading-tight text-white md:hidden"
+        className="gap-3 flex leading-tight select-none text-white md:hidden"
         onClick={() => setMobileVisible(true)}
       >
         <div>
@@ -127,7 +127,7 @@ function StatusBar() {
           <DownOutlined className="opacity-50 text-xs" />
         </div>
       </div>
-      <div className="hidden gap-8 leading-snug text-white md:flex">
+      <div className="hidden gap-8 leading-snug select-none text-white md:flex">
         <div>
           <div className="opacity-50 text-xs uppercase">Cluster</div>
           <div>{spin(cluster?.name)}</div>

src/components/StatusBar/index.ts

@@ -0,0 +1,3 @@
+import StatusBar from './StatusBar';
+
+export default StatusBar;

src/constants/defaults.ts

@@ -3,3 +3,5 @@
 // -------------------------------------
 export const SHORT_MESSAGE_NOTIFICATION_DURATION = 7;
 export const LONG_MESSAGE_NOTIFICATION_DURATION = 15;
+
+export const TAILWIND_BREAKPOINT_MD = 768;

src/constants/routes.tsx

@@ -1,7 +1,7 @@
 import SQLConsole from '../routes/SQLConsole/SQLConsole';
 import Users from '../routes/Users/Users';
 import EnterpriseScreen from '../components/EnterpriseScreen/EnterpriseScreen';
-import Tables from '../routes/Tables/Tables';
+import Tables from '../routes/Tables';
 import { Route } from '../types';
 import ScheduledJobs from '../routes/JobScheduler';
 import Overview from '../routes/Overview/Overview.tsx';
@@ -29,11 +29,7 @@ const routes: Route[] = [
   },
   {
     path: '/tables',
-    element: (
-      <div className="p-4">
-        <Tables />
-      </div>
-    ),
+    element: <Tables />,
     label: 'Tables',
     key: 'tables',
   },

src/routes/Tables/TableDetail.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { LeftOutlined } from '@ant-design/icons';
+import { Button, Heading } from '@crate.io/crate-ui-components';
+import { Table, Tabs, Tag } from 'antd';
+import { useGCContext } from '../../contexts';
+import routes from '../../constants/routes';
+import { format as formatSQL } from 'sql-formatter';
+import {
+  getTableInformation,
+  showCreateTable,
+  TableInfo,
+  TableListEntry,
+} from '../../utils/queries';
+
+function TableDetail({
+  activeTable,
+  setActiveTable,
+  systemSchemas,
+}: {
+  activeTable: TableListEntry | undefined;
+  setActiveTable: (table: TableListEntry | undefined) => void;
+  systemSchemas: string[];
+}) {
+  const { sqlUrl } = useGCContext();
+  const [activeTableInfo, setActiveTableInfo] = useState<TableInfo[] | undefined>();
+  const [createTableSQL, setCreateTableSQL] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (!activeTable) {
+      setActiveTableInfo(undefined);
+      return;
+    }
+
+    getTableInformation(
+      sqlUrl,
+      activeTable.table_schema,
+      activeTable.table_name,
+    ).then(setActiveTableInfo);
+
+    setCreateTableSQL(undefined);
+    if (!systemSchemas.includes(activeTable.table_schema)) {
+      showCreateTable(sqlUrl, activeTable.table_schema, activeTable.table_name).then(
+        res => setCreateTableSQL(res ? formatSQL(res) : undefined),
+      );
+    }
+  }, [activeTable]);
+
+  const columns = [
+    {
+      title: '#',
+      key: 'ordinal_position',
+      dataIndex: 'ordinal_position',
+      width: '5%',
+    },
+    {
+      title: 'Name',
+      key: 'column_name',
+      dataIndex: 'column_name',
+      width: '25%',
+      render: (_: string, record: TableInfo) => {
+        return (
+          <span>
+            {record.column_name}{' '}
+            {record.constraint_type ? <Tag>{record.constraint_type}</Tag> : null}
+          </span>
+        );
+      },
+    },
+    {
+      title: 'Type',
+      key: 'data_type',
+      dataIndex: 'data_type',
+      width: '70%',
+      render: (dataType: string) => {
+        return <span>{dataType.toUpperCase()}</span>;
+      },
+    },
+  ];
+
+  const tabs = [
+    {
+      key: 'columns',
+      label: 'Columns',
+      children: (
+        <Table
+          columns={columns}
+          dataSource={activeTableInfo}
+          rowKey="ordinal_position"
+          pagination={false}
+        />
+      ),
+    },
+  ];
+
+  if (createTableSQL) {
+    tabs.push({
+      key: 'SQL',
+      label: 'SQL',
+      children: (
+        <div className="">
+          <pre>{createTableSQL}</pre>
+        </div>
+      ),
+    });
+  }
+
+  return (
+    <div>
+      {activeTable && (
+        <>
+          <div
+            className="block text-crate-blue md:hidden"
+            onClick={() => setActiveTable(undefined)}
+          >
+            <LeftOutlined className="text-xs" /> Back to list
+          </div>
+          <Heading level="h2">
+            {activeTable.table_schema}.{activeTable.table_name}
+          </Heading>
+          <Tabs defaultActiveKey="columns" items={tabs} />
+          <div className="mt-4">
+            <Link
+              to={{
+                pathname: routes.find(r => r.key == 'sql')?.path,
+                search: `?q=SELECT * FROM "${activeTable.table_schema}"."${activeTable.table_name}" LIMIT 100;`,
+              }}
+            >
+              <Button kind="primary">Query</Button>
+            </Link>
+          </div>
+        </>
+      )}
+      {!activeTable && <div>No table selected</div>}
+    </div>
+  );
+}
+
+export default TableDetail;