Skip to content
Snippets Groups Projects
Commit 3c342280 authored by 한동현's avatar 한동현
Browse files

feat: 라우팅 목록 페이지 API 연동

parent e31a719b
No related branches found
No related tags found
No related merge requests found
import { useEffect, useState } from 'react';
import { Link } from 'react-router';
import { Filter, Plus, Check, X, Pencil, Trash } from 'lucide-react'; import { Filter, Plus, Check, X, Pencil, Trash } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'; import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Link } from 'react-router'; import { Skeleton } from '@/components/ui/skeleton';
import { useAuthStore } from '@/stores/authStore';
const routings = [ import { Routing } from '@/types/routing';
{
id: 1,
name: '아올다 프록시 매니저 콘솔',
created_at: '2021-09-01 11:43:00',
updated_at: '2021-09-01 12:00:00',
domain: 'console.ajou.app',
instance_ip: '10.16.0.10',
ssl_id: 10921,
is_cached: false,
},
{
id: 2,
name: '아올다 블로그',
created_at: '2021-09-01 12:00:00',
updated_at: '2021-09-01 12:01:00',
domain: 'blog.ajou.app',
instance_ip: '10.16.0.11',
ssl_id: 10921,
is_cached: true,
},
{
id: 3,
name: '개인 블로그',
created_at: '2021-09-01 12:01:00',
updated_at: '2021-09-01 13:00:00',
domain: 'blog.username.blog',
instance_ip: '10.16.3.23',
ssl_id: 10923,
is_cached: true,
},
{
id: 4,
name: '아올다 테스트 서버',
created_at: '2021-09-01 13:00:00',
updated_at: '2021-09-02 12:00:00',
domain: 'test.aolda.app',
instance_ip: '10.16.32.1',
ssl_id: null,
is_cached: false,
},
];
export default function RoutingList() { export default function RoutingList() {
const { authFetch, selectedProject } = useAuthStore();
const [routings, setRoutings] = useState<Routing[] | null>(null);
useEffect(() => {
authFetch(`/api/routings?projectId=${selectedProject?.id}`)
.then((response) => {
if (!response.ok) {
toast.error('포트포워딩 정보를 조회할 수 없습니다.');
return { contents: [] };
}
return response.json();
})
.then(({ contents }) => {
setRoutings(contents);
});
}, [authFetch, selectedProject]);
return ( return (
<div className="flex flex-1 flex-col gap-4 p-6"> <div className="flex flex-1 flex-col gap-4 p-6">
<div className="flex justify-between mb-2"> <div className="flex justify-between mb-2">
<div> <div>
<h1 className="scroll-m-20 text-3xl font-semibold first:mt-0">웹 라우팅 설정</h1> <h1 className="scroll-m-20 text-3xl font-semibold first:mt-0">웹 라우팅 설정</h1>
<p className="mt-1 text-base text-gray-500">현재 3개의 웹 프록시가 설정되어 있습니다.</p> {routings === null ? (
<Skeleton className="w-[24rem] h-[1rem] mt-2 rounded-full" />
) : (
<p className="mt-1 text-base text-gray-500">
<p className="mt-1 text-base text-gray-500">현재 {routings.length}개의 웹 프록시가 설정되어 있습니다.</p>
</p>
)}
</div> </div>
<Button className="ml-2" asChild> <Button className="ml-2" asChild>
<Link to="./create"> <Link to="./create">
...@@ -82,7 +68,32 @@ export default function RoutingList() { ...@@ -82,7 +68,32 @@ export default function RoutingList() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{routings.map((routing) => ( {routings === null ? (
<>
<TableRow>
<TableCell colSpan={4}>
<Skeleton className="w-full h-[1rem] my-2 rounded-full" />
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4}>
<Skeleton className="w-full h-[1rem] my-2 rounded-full" />
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4}>
<Skeleton className="w-full h-[1rem] my-2 rounded-full" />
</TableCell>
</TableRow>
</>
) : routings.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-center text-muted-foreground">
현재 프로젝트에 등록된 웹 프록시 설정이 없습니다.
</TableCell>
</TableRow>
) : (
routings.map((routing) => (
<TableRow key={routing.id}> <TableRow key={routing.id}>
<TableCell className="truncate max-w-48"> <TableCell className="truncate max-w-48">
<HoverCard> <HoverCard>
...@@ -92,20 +103,20 @@ export default function RoutingList() { ...@@ -92,20 +103,20 @@ export default function RoutingList() {
<div className="space-y-1"> <div className="space-y-1">
<p className="text-sm font-semibold">{routing.name}</p> <p className="text-sm font-semibold">{routing.name}</p>
<p className="text-sm"> <p className="text-sm">
{routing.domain} ({routing.instance_ip}) {routing.domain} ({routing.ip})
</p> </p>
<p className="text-xs text-muted-foreground mt-2">{routing.created_at} 생성</p> <p className="text-xs text-muted-foreground mt-2">{routing.createdAt} 생성</p>
<p className="text-xs text-muted-foreground">{routing.updated_at} 수정</p> <p className="text-xs text-muted-foreground">{routing.updatedAt} 수정</p>
</div> </div>
</div> </div>
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
</TableCell> </TableCell>
<TableCell>{routing.domain}</TableCell> <TableCell>{routing.domain}</TableCell>
<TableCell>{routing.instance_ip}</TableCell> <TableCell>{routing.ip}</TableCell>
<TableCell> <TableCell>
<div className="flex justify-center items-center gap-1"> <div className="flex justify-center items-center gap-1">
{routing.ssl_id !== null ? ( {routing.certificateId !== undefined ? (
<Badge variant="secondary"> <Badge variant="secondary">
<Check className="h-3 w-3" /> <Check className="h-3 w-3" />
SSL SSL
...@@ -116,7 +127,7 @@ export default function RoutingList() { ...@@ -116,7 +127,7 @@ export default function RoutingList() {
SSL SSL
</Badge> </Badge>
)} )}
{routing.is_cached ? ( {routing.caching ? (
<Badge variant="secondary"> <Badge variant="secondary">
<Check className="h-3 w-3" /> <Check className="h-3 w-3" />
캐시 캐시
...@@ -144,7 +155,8 @@ export default function RoutingList() { ...@@ -144,7 +155,8 @@ export default function RoutingList() {
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))
)}
</TableBody> </TableBody>
</Table> </Table>
</CardContent> </CardContent>
......
export interface Routing {
id: number;
name: string;
domain: string;
ip: string;
port: number;
createdAt: string;
updatedAt: string;
certificateId: number | undefined;
caching: boolean;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment