Skip to content

Commit

Permalink
feat: Move the system page to the home page infiniflow#1841
Browse files Browse the repository at this point in the history
  • Loading branch information
@cike8899
cike8899 committed Oct 8, 2024
1 parent ead2460 commit 9c2d013
Show file tree
Hide file tree
Showing 8 changed files with 508 additions and 51 deletions.
61 changes: 61 additions & 0 deletions gui/app/(dashboard)/databases/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { Card, CardHeader, CardTitle } from '@/components/ui/card';
import AddIcon from '/public/add.svg';

import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@radix-ui/react-select';
import { listDatabase } from '../actions';
import { DatabaseCard } from '../database-card';
import { DatabaseCreatingDialog } from '../database-creating-dialog';

interface IDatabaseSelectProps {
placeholder?: string;
options: Array<{ label: string; value: string }>;
}

export function DatabaseSelect({ placeholder, options }: IDatabaseSelectProps) {
return (
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map(({ value, label }) => (
<SelectItem value={value} key={value}>
{label}
</SelectItem>
))}
</SelectContent>
</Select>
);
}

export default async function HomePage({
searchParams
}: {
searchParams: { q: string; offset: string };
}) {
const ret = await listDatabase();
const search = searchParams.q ?? '';
const offset = searchParams.offset ?? 0;

return (
<div className="grid grid-cols-4 gap-4">
{ret.databases.map((x: string, idx: number) => (
<DatabaseCard key={idx} data={x}></DatabaseCard>
))}
<Card className="w-full max-w-sm">
<DatabaseCreatingDialog>
<CardHeader>
<AddIcon className="w-10 h-10"></AddIcon>
<CardTitle className="text-1xl">Create Database</CardTitle>
</CardHeader>
</DatabaseCreatingDialog>
</Card>
</div>
);
}
9 changes: 5 additions & 4 deletions gui/app/(dashboard)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { SearchInput } from './search';
import { User } from './user';
import DatabaseIcon from '/public/database.svg';
import Logo from '/public/logo.svg';
import TableIcon from '/public/table.svg';

export default function DashboardLayout({
children
Expand Down Expand Up @@ -75,12 +76,12 @@ function DesktopNav() {
<Home className="h-5 w-5" />
</NavItem>

<NavItem href="/database" label="Database">
<DatabaseIcon className="h-5 w-5"></DatabaseIcon>
<NavItem href="/databases" label="Databases">
<DatabaseIcon className="h-5 w-5" />
</NavItem>

<NavItem href="/system" label="System">
<Package className="h-5 w-5" />
<NavItem href="/tables" label="Tables">
<TableIcon className="h-5 w-5" />
</NavItem>

<NavItem href="/customers" label="Customers">
Expand Down
165 changes: 118 additions & 47 deletions gui/app/(dashboard)/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,131 @@
import { Card, CardHeader, CardTitle } from '@/components/ui/card';
import AddIcon from '/public/add.svg';

import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@radix-ui/react-select';
import { listDatabase } from './actions';
import { DatabaseCard } from './database-card';
import { DatabaseCreatingDialog } from './database-creating-dialog';

interface IDatabaseSelectProps {
placeholder?: string;
options: Array<{ label: string; value: string }>;
}

export function DatabaseSelect({ placeholder, options }: IDatabaseSelectProps) {
return (
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map(({ value, label }) => (
<SelectItem value={value} key={value}>
{label}
</SelectItem>
))}
</SelectContent>
</Select>
);
}
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle
} from '@/components/ui/card';
import { showConfigs, showVariables } from './actions';
// import { getProducts } from '@/lib/db';

export default async function HomePage({
export default async function ProductsPage({
searchParams
}: {
searchParams: { q: string; offset: string };
}) {
const ret = await listDatabase();
const search = searchParams.q ?? '';
const offset = searchParams.offset ?? 0;
const configs = await showConfigs();
const variables = await showVariables();
// const { products, newOffset, totalProducts } = await getProducts(
// search,
// Number(offset)
// );
console.log(variables);
// const products = await request('http://localhost:3000/products');

const { newOffset, totalProducts, products } = {
newOffset: 0,
totalProducts: 0,
products: []
};

return (
<div className="grid grid-cols-4 gap-4">
{ret.databases.map((x: string, idx: number) => (
<DatabaseCard key={idx} data={x}></DatabaseCard>
))}
<Card className="w-full max-w-sm">
<DatabaseCreatingDialog>
<CardHeader>
<AddIcon className="w-10 h-10"></AddIcon>
<CardTitle className="text-1xl">Create Database</CardTitle>
</CardHeader>
</DatabaseCreatingDialog>
<div>
<Card>
<CardHeader>
<CardTitle>Briefs</CardTitle>
<CardDescription>Node briefs.</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle>Configures</CardTitle>
<CardDescription>System configures.</CardDescription>
</CardHeader>
<CardContent>
<p> buffer_manager_size: {configs['buffer_manager_size']} </p>
<p> cleanup_interval: {configs['cleanup_interval']} </p>
<p> client_port: {configs['client_port']} </p>
<p> compact_interval: {configs['compact_interval']} </p>
<p> connection_pool_size: {configs['connection_pool_size']} </p>
<p> cpu_limit: {configs['cpu_limit']} </p>
<p> data_dir: {configs['data_dir']} </p>
<p>
{' '}
delta_checkpoint_interval: {
configs['delta_checkpoint_interval']
}{' '}
</p>
<p>
{' '}
delta_checkpoint_threshold: {
configs['delta_checkpoint_threshold']
}{' '}
</p>
<p>
{' '}
full_checkpoint_interval: {configs['full_checkpoint_interval']}{' '}
</p>
<p> http_port: {configs['http_port']} </p>
<p> log_dir: {configs['log_dir']} </p>
<p> log_file_max_size: {configs['log_file_max_size']} </p>
<p> log_file_rotate_count: {configs['log_file_rotate_count']} </p>
<p> log_filename: {configs['log_filename']} </p>
<p> log_level: {configs['log_level']} </p>
<p> log_to_stdout: {configs['log_to_stdout']} </p>
<p> mem_index_capacity: {configs['mem_index_capacity']} </p>
<p> optimize_interval: {configs['optimize_interval']} </p>
<p> peer_ip: {configs['peer_ip']} </p>
<p> peer_port: {configs['peer_port']} </p>
<p>
{' '}
peer_server_connection_pool_size:{' '}
{configs['peer_server_connection_pool_size']}{' '}
</p>
<p> postgres_port: {configs['postgres_port']} </p>
<p> record_running_query: {configs['record_running_query']} </p>
<p> resource_dir: {configs['resource_dir']} </p>
<p> server_address: {configs['server_address']} </p>
<p> temp_dir: {configs['temp_dir']} </p>
<p> time_zone: {configs['time_zone']} </p>
<p> version: {configs['version']} </p>
<p> wal_compact_threshold: {configs['wal_compact_threshold']} </p>
<p> wal_dir: {configs['wal_dir']} </p>
<p> wal_flush: {configs['wal_flush']} </p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Variables</CardTitle>
<CardDescription>System global variables.</CardDescription>
</CardHeader>
<CardContent>
<p> active_txn_count: {variables['active_txn_count:']} </p>
<p> active_wal_filename: {variables['active_wal_filename']} </p>
<p> bg_task_count: {variables['bg_task_count']} </p>
<p> buffer_object_count: {variables['buffer_object_count']} </p>
<p> buffer_usage: {variables['buffer_usage']} </p>
<p> cpu_usage: {variables['cpu_usage']} </p>
<p> current_timestamp: {variables['current_timestamp']} </p>
<p> delta_log_count: {variables['delta_log_count']} </p>
<p> jeprof: {variables['jeprof']} </p>
<p> next_transaction_id: {variables['next_transaction_id']} </p>
<p> open_file_count: {variables['open_file_count']} </p>
<p>
{' '}
profile_record_capacity: {variables['profile_record_capacity']}{' '}
</p>
<p> query_count: {variables['query_count']} </p>
<p> running_bg_task: {variables['running_bg_task']} </p>
<p> running_compact_task: {variables['running_compact_task']} </p>
<p> schedule_policy: {variables['schedule_policy']} </p>
<p> session_count: {variables['session_count']} </p>
<p> system_memory_usage: {variables['system_memory_usage']} </p>
<p> total_commit_count: {variables['total_commit_count']} </p>
<p> total_rollback_count: {variables['total_rollback_count']} </p>
<p> unused_buffer_object: {variables['unused_buffer_object']} </p>
</CardContent>
</Card>
</div>
);
Expand Down
33 changes: 33 additions & 0 deletions gui/app/(dashboard)/tables/context-menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
'use client';

import {
ContextMenuContent,
ContextMenuItem
} from '@/components/ui/context-menu';
import { useSeDialogState } from '@/lib/hooks';
import { TableCreatingDialog } from './table-creating-dialog';
import AddIcon from '/public/add.svg';

export function InfinityContextMenuContent({
databaseName
}: {
databaseName: string;
}) {
const { showDialog, visible, hideDialog, switchVisible } = useSeDialogState();
return (
<>
<ContextMenuContent>
<ContextMenuItem>
<div className="flex justify-between w-full" onClick={showDialog}>
Add <AddIcon className="w-5 h-5"></AddIcon>
</div>
</ContextMenuItem>
</ContextMenuContent>
<TableCreatingDialog
visible={visible}
hideDialog={hideDialog}
switchVisible={switchVisible}
></TableCreatingDialog>
</>
);
}
Loading

0 comments on commit 9c2d013

Please sign in to comment.