Cluster
{spin(cluster?.name)}
diff --git a/src/components/StatusBar/index.ts b/src/components/StatusBar/index.ts
new file mode 100644
index 0000000..07cdd6f
--- /dev/null
+++ b/src/components/StatusBar/index.ts
@@ -0,0 +1,3 @@
+import StatusBar from './StatusBar';
+
+export default StatusBar;
diff --git a/src/constants/defaults.ts b/src/constants/defaults.ts
index 5175168..554932b 100644
--- a/src/constants/defaults.ts
+++ b/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;
diff --git a/src/constants/routes.tsx b/src/constants/routes.tsx
index 4db494c..8392baf 100644
--- a/src/constants/routes.tsx
+++ b/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: (
-
- ),
+ element:
,
label: 'Tables',
key: 'tables',
},
diff --git a/src/routes/Tables/TableDetail.tsx b/src/routes/Tables/TableDetail.tsx
new file mode 100644
index 0000000..615254e
--- /dev/null
+++ b/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
();
+ const [createTableSQL, setCreateTableSQL] = useState();
+
+ 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 (
+
+ {record.column_name}{' '}
+ {record.constraint_type ? {record.constraint_type} : null}
+
+ );
+ },
+ },
+ {
+ title: 'Type',
+ key: 'data_type',
+ dataIndex: 'data_type',
+ width: '70%',
+ render: (dataType: string) => {
+ return {dataType.toUpperCase()};
+ },
+ },
+ ];
+
+ const tabs = [
+ {
+ key: 'columns',
+ label: 'Columns',
+ children: (
+
+ ),
+ },
+ ];
+
+ if (createTableSQL) {
+ tabs.push({
+ key: 'SQL',
+ label: 'SQL',
+ children: (
+
+ ),
+ });
+ }
+
+ return (
+
+ {activeTable && (
+ <>
+
setActiveTable(undefined)}
+ >
+ Back to list
+
+
+ {activeTable.table_schema}.{activeTable.table_name}
+
+
+
+ r.key == 'sql')?.path,
+ search: `?q=SELECT * FROM "${activeTable.table_schema}"."${activeTable.table_name}" LIMIT 100;`,
+ }}
+ >
+
+
+
+
+ )}
+ {!activeTable &&
No table selected
}
+
+ No tables found
+
+ );
+ }
+
+ return output.map(schema => (
+
+
expandCollapseSingle(schema.name)}
+ >
+
+ {expandedSchemas?.includes(schema.name) ? (
+
+ ) : (
+
+ )}
+
+ {schema.name}
+
+ {schema.tables?.length}
+
+
+
+
+ {renderSchemaBadge(schema.name)}
+
+
+ {expandedSchemas?.includes(schema.name) && (
+
+ {schema.tables?.map(table => renderTable(table))}
+
+ )}
+
setActiveTable(table)}
+ key={table.table_name}
+ >
+
+ {table.table_name}
+ {renderTableBadge(table)}
+
+ {size && (
+ <>
+
+ {formatHumanReadable(size.records)}{' '}
+ {size.records !== 1 ? 'Records' : 'Record'} ({prettyBytes(size.bytes)})
+
+
+ {table.number_of_shards} shards / {table.number_of_replicas} replicas
+
+
+ )}
+
+
+
+
+ setFilter(event.target.value)}
+ onFocus={() => setFilterFocused(true)}
+ onBlur={() => setFilterFocused(false)}
+ value={filter}
+ />
+
+
+
+
expandCollapseAll()}
+ >
+ {(expandedSchemas?.length || 0) < schemas.length ? (
+
+ ) : (
+
+ )}
+
+
+
+
{
- const size = getTableSize(item.table_schema, item.table_name);
- return (
- {
- setActiveTableInfo([]);
- setActiveTable(item);
- }}
- >
-
-
-
{item.table_name}
- {size && (
-
- {formatHumanReadable(size.records)} Records (
- {prettyBytes(size.bytes)})
-
- )}
- {item.number_of_replicas && (
-
- {item.number_of_shards} Shards / {item.number_of_replicas}{' '}
- Replicas
-
- )}
-
-
{tableBadge(item)}
-
-
{s}
-
{schemaBadge(s)}
-
-
- Table: {activeTable?.table_schema}.{activeTable?.table_name}
+
+
+ Tables
-
-
-
r.key == 'sql')?.path,
- search: `?q=SELECT * FROM "${activeTable.table_schema}"."${activeTable.table_name}" LIMIT 100;`,
- }}
- >
-
-
+
+
);
- };
+ }
+ // render for desktop
return (
- <>
-
Tables
-
-
-
- setFilter(v.target.value)} />
-
- {getSchemasSection()}
+
+
+
+
Tables
+
-
{getActiveTableSection()}
-
+
);
}