VM 메인 페이지 작업 시작

[KwonSunJae]

GitHub Issue: VM 메인 페이지 작업 시작

작업 목표

VM 메인 페이지를 구현하여 사용자가 Private Network을 생성하고, 해당 네트워크에 포함된 VM 정보를 표시합니다. (VM이 해당 네트워크에 종속되어 보일 수 있는 Topology를 UI로 제공되었으면 좋겠음)

주요 기능

1. Private Network 생성 버튼

   • 사용자가 새로운 Private Network을 생성할 수 있는 버튼을 제공합니다.

2. Private Network 정보 불러오기

   • 해당 유저가 가지고 있는 Private Network 정보를 불러옵니다.
   • Private Network 정보는 다음과 같습니다:
     • Subnet Mask
     • Network Name

3. VM 정보 표시

   • 각 Private Network에 포함된 VM 정보를 표시합니다. VM 정보는 다음과 같습니다:
     • VM Name
     • Flavor
     • Keypair Name
     • Security Groups Name
     • Status (Spawning, Pending, Active, Error, ShutDown 등)
     • Network (Floating IPs 등 추가 네트워크)

4. VM 추가하기 버튼

   • 각 Private Network 영역에 "VM 추가하기"라는 버튼을 배치하여 사용자가 해당 네트워크에 VM을 추가할 수 있도록 합니다.

작업 내용

• React를 사용하여 메인 페이지 레이아웃을 구성합니다.
• Private Network과 VM 정보를 불러오기 위한 API 통신 구현합니다.
• 각 Private Network 및 VM 정보를 표시할 컴포넌트를 생성합니다.
• 버튼 클릭 시 해당 기능이 실행되도록 이벤트 핸들러를 설정합니다.

추가 사항

• 이슈에 대한 피드백을 받고, 필요한 경우 추가 기능을 고려할 것입니다.