Merge pull request #113 from AWS-Cloud-School-6/103-fix-리소스-테이블-수정

103 fix 리소스 테이블 수정
AWS-Cloud-School-6 · Nov 27, 2024 · dc78920 · dc78920
2 parents 95227db + bf82c64
commit dc78920
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 77 deletions.
diff --git a/aiwa-mcp-frontend/src/Console/Console.js b/aiwa-mcp-frontend/src/Console/Console.js
@@ -112,11 +112,15 @@ function MyPage({ provider }) {
         finalProjectId = projectId;
       }
 
-      const url = `${MEMBER_API_URL}/members/add-aws-gcp-key?email=${encodeURIComponent(currentUser?.id)}&companyName=${encodeURIComponent(companyName)}&accessKey=${encodeURIComponent(finalAccessKey)}&secretKey=${encodeURIComponent(finalSecretKey)}&projectId=${encodeURIComponent(finalProjectId)}`;
-
+      // AWS인 경우 먼저 키 값 설정
       if (provider === 'AWS') {
         finalAccessKey = accessKey;
         finalSecretKey = secretKey;
+      }
+
+      const url = `${MEMBER_API_URL}/members/add-aws-gcp-key?email=${currentUser?.id}&companyName=${encodeURIComponent(companyName)}&accessKey=${finalAccessKey}&secretKey=${finalSecretKey}&projectId=${finalProjectId}`;
+
+      if (provider === 'AWS') {
         response = await axios.post(url);
       } else if (provider === 'GCP') {
         // FormData 객체 생성

diff --git a/aiwa-mcp-frontend/src/Console/Features/Instance/Instance.js b/aiwa-mcp-frontend/src/Console/Features/Instance/Instance.js
@@ -12,7 +12,7 @@ function Instance() {
                 <SidebarEc2 />
                 <Flex direction="column" style={{ width: '100%', padding: '20px' }}>
                     <Flex justifyContent="space-between" alignItems="center" marginBottom="20px">
-                        <Heading level={4}>EC2 List</Heading>
+                        <Heading level={4}>Instance List</Heading>
                     </Flex>
                     <EC2Table />
                 </Flex>

diff --git a/aiwa-mcp-frontend/src/Console/Features/Instance/Sidebar/SidebarEc2.jsx b/aiwa-mcp-frontend/src/Console/Features/Instance/Sidebar/SidebarEc2.jsx
@@ -8,15 +8,11 @@ const SidebarEc2 = () => {
   const { currentUser } = useUserContext();
 
   const ec2DashboardLinks = [
-    { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/bdd2aa580982f68651bbe1f2248003bc3f5a8329c4862fc360d2dee52a30ee85?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'EC2s', to: '/console/instances' },
+    { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/bdd2aa580982f68651bbe1f2248003bc3f5a8329c4862fc360d2dee52a30ee85?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'Instances', to: '/console/instances' },
     { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/3a05d5423bb457cad8c1809adec5f15ee3afa9d267f87f2747fd523ed146ebcf?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'ENI'},
     { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/3a05d5423bb457cad8c1809adec5f15ee3afa9d267f87f2747fd523ed146ebcf?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'Security Group', to: '/console/instances/securitygroup'},
   ];
 
-  const settingsLinks = [
-    { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/c43c1f12c1f95349db14ba4298fa5faf344c1e64930460ea19730f667bfb7cca?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'Settings', hasChevron: true }
-  ];
-
 
   return (
     <aside className={styles.sidebarEc2}>
@@ -31,9 +27,8 @@ const SidebarEc2 = () => {
 
       <div className={styles.divider} />
 
-      <NavigationSection title="ec2 dashboard" links={ec2DashboardLinks} />
+      <NavigationSection title="instance dashboard" links={ec2DashboardLinks} />
 
-      <NavigationSection title="settings" links={settingsLinks} />
       </div>
     </aside>
   );

diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/Sidebar/SidebarVpc.jsx b/aiwa-mcp-frontend/src/Console/Features/VPC/Sidebar/SidebarVpc.jsx
@@ -15,15 +15,6 @@ const SidebarVpc = () => {
     { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/3a05d5423bb457cad8c1809adec5f15ee3afa9d267f87f2747fd523ed146ebcf?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'Nat Gateways', to: '/console/vpc/natgateway' },
   ];
 
-  const securityLinks = [
-    { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/85a9fab6c170da55803188d333ca0065bf9f0b257cabea638d1d459cd3e32119?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'NACL' },
-    { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/3a05d5423bb457cad8c1809adec5f15ee3afa9d267f87f2747fd523ed146ebcf?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'Security Group'}
-  ];
-
-  const settingsLinks = [
-    { icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/c43c1f12c1f95349db14ba4298fa5faf344c1e64930460ea19730f667bfb7cca?placeholderIfAbsent=true&apiKey=0aa29cf27c604eac9ac8e5102203c841', label: 'Settings', hasChevron: true }
-  ];
-
 
   return (
     <aside className={styles.sidebarVpc}>
@@ -42,11 +33,6 @@ const SidebarVpc = () => {
 
       <div className={styles.divider} />
 
-      <NavigationSection title="security" links={securityLinks} />
-
-      <div className={styles.divider} />
-
-      <NavigationSection title="settings" links={settingsLinks} />
       </div>
     </aside>
   );

diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/CreateSubnetModal.jsx b/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/CreateSubnetModal.jsx
@@ -23,9 +23,6 @@ export default function CreateSubnetModal({ isOpen, onClose, onSubmit, isLoading
     "ap-northeast-2d"
   ];
 
-  useEffect(() => {
-    fetchVPCs();
-  }, []);
 
   const getApiUrl = (provider) => {
     return provider.toLowerCase() === 'aws' ? AWS_API_URL : GCP_API_URL;

diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/SubnetRow.jsx b/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/SubnetRow.jsx
@@ -1,46 +1,57 @@
 import React from 'react';
 import styles from './SubnetTable.module.css';
+// import awsIcon from '../../../../../images/aws_icon.png';
+// import gcpIcon from '../../../../../images/gcp_icon.png';
+import awsIcon from '../../../../../images/aws_icon.png';
+import gcpIcon from '../../../../../images/gcp_icon.png';
+
+
+
+const PROVIDER_ICONS = {
+  "AWS": awsIcon,
+  "GCP": gcpIcon
+};
 
 function SubnetRow({ customer, isEven, isSelected, onCheckboxChange }) {
   const rowClass = isEven ? styles.SubnetRowEven : styles.SubnetRow;
 
   return (
     <div className={`${styles.tableRow} ${rowClass}`}>
-      <div className={`${styles.cell} ${styles.checkboxCell}`} style={{ width: '5%', textAlign: 'center' }}>
+      <div className={`${styles.cell} ${styles.checkboxCell}`} style={{ width: '6.4%' }}>
         <input
           type="checkbox"
           checked={isSelected}
           onChange={onCheckboxChange}
           className={styles.checkbox}
-          style={{ paddingLeft: 500 }}
         />
       </div>
-      <div className={`${styles.cell} ${styles.idCell}`} style={{ width: '5%', textAlign: 'center' }}>
-        {customer.type}
+      <div className={styles.cell} style={{ width: '6.4%', textAlign: 'center' }}>
+          <img 
+            src={PROVIDER_ICONS[customer.provider]} 
+            alt={`${customer.provider} icon`}
+            className={styles.providerIcon}
+          />
       </div>
-      <div className={`${styles.cell} ${styles.nameCell}`} style={{ width: '15%', textAlign: 'center' }}>
+      <div className={`${styles.cell} ${styles.nameCell}`} style={{ width: '20%', textAlign: 'center' }}>
         <div className={styles.customerName}>{customer.name}</div>
         <div className={styles.customerNumber}>{customer.number}</div>
       </div>
-      {/* <div className={`${styles.cell} ${styles.descriptionCell}`} style={{ width: '20%', textAlign: 'center' }}>
-        <p>{customer.description}</p>
-      </div> */}
-      <div className={`${styles.cell} ${styles.statusCell}`} style={{ width: '8%', textAlign: 'center' }}>
+      <div className={`${styles.cell} ${styles.statusCell}`} style={{ width: '5%', textAlign: 'center' }}>
         <span className={`${styles.tag} ${styles[customer.status.toLowerCase()]}`}>
           {customer.status}
         </span>
       </div>
-      <div className={`${styles.cell} ${styles.vpcCell}`} style={{ width: '20%', textAlign: 'center' }}>
+      <div className={`${styles.cell} ${styles.vpcCell}`} style={{ width: '17%', textAlign: 'center' }}>
         <div className={styles.vpcId}>{customer.vpcId}</div>
       </div>
-      <div className={`${styles.cell} ${styles.cidrCell}`} style={{ width: '15%', textAlign: 'center' }}>
+      <div className={`${styles.cell} ${styles.cidrCell}`} style={{ width: '10%', textAlign: 'center' }}>
         <div className={styles.cidr}>{customer.cidr}</div>
         <div className={styles.cidrv6} style={{ color: 'rgb(25, 104, 110)' }}>{customer.cidrv6 || '-'}</div>
       </div>
       <div className={`${styles.cell} ${styles.availableipCell}`} style={{ width: '10%', textAlign: 'center' }}>
         {customer.availableip}
       </div>
-      <div className={`${styles.cell} ${styles.routingTableCell}`} style={{ width: '11%', textAlign: 'center' }}>
+      <div className={`${styles.cell} ${styles.routingTableCell}`} style={{ width: '20%', textAlign: 'center' }}>
         {customer.az || '-'}
       </div>
     </div>

diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/SubnetTable.jsx b/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/SubnetTable.jsx
@@ -32,6 +32,7 @@ function SubnetTable({ customer, onEdit, onDelete }) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isTableLoading, setIsTableLoading] = useState(true);
   // 리렌더링될 때마다 새로운 함수가 생성되지 않도록 구현
   const addNewSubnet = useCallback((newSubnet) => {
     setAllSubnets(prevSubnets => {
@@ -46,6 +47,7 @@ function SubnetTable({ customer, onEdit, onDelete }) {
     });
   }, []);
   const fetchSubnetData = async () => {
+    setIsTableLoading(true);
     try {
       const [awsResponse, gcpResponse] = await Promise.all([
         accessKey
@@ -63,7 +65,7 @@ function SubnetTable({ customer, onEdit, onDelete }) {
       // AWS Subnet 데이터 처리
       const processedAWSSubnets =
         awsResponse.data.list?.map((subnet) => ({
-          type: "AWS", // GCP 데이터임을 구분하기 위해 추가
+          provider: "AWS", // GCP 데이터임을 구분하기 위해 추가
           number: subnet.subnetId || "N/A",
           name: subnet.tags?.Name || "-",
           status: subnet.status || "available",
@@ -76,7 +78,7 @@ function SubnetTable({ customer, onEdit, onDelete }) {
       // GCP Subnet 데이터 처리
       const processedGCPSubnets =
         gcpResponse.data.list?.map((subnet) => ({
-          type: "GCP", // GCP 데이터임을 구분하기 위해 추가
+          provider: "GCP", // GCP 데이터임을 구분하기 위해 추가
           number: subnet.subnetId || "N/A",
           name: subnet.name || "-",
           status: subnet.status || "available",
@@ -95,6 +97,8 @@ function SubnetTable({ customer, onEdit, onDelete }) {
       localStorage.setItem("allSubnets", JSON.stringify(allSubnets));
     } catch (error) {
       console.error("Subnet 데이터를 가져오는 중 오류 발생:", error);
+    } finally {
+      setIsTableLoading(false);
     }
   };
 
@@ -191,6 +195,7 @@ function SubnetTable({ customer, onEdit, onDelete }) {
         `${apiUrl}/subnet/create?userId=${currentUser.id}`,
         {
           subnetName: subnetData.subnetName,
+          vpcName: subnetData.vpcName,
           cidrBlock: subnetData.cidrBlock,
           vpcId: subnetData.vpcId,
         }
@@ -256,20 +261,29 @@ function SubnetTable({ customer, onEdit, onDelete }) {
           />
         </div>
       </header>
-      <div className={styles.scrollableTable}>
-        <TableHeader
-          onSelectAll={handleSelectAll}
-          allSelected={selectedSubnets.length === displayedSubnets.length && displayedSubnets.length > 0}
-        />
-        {displayedSubnets.map((subnet, index) => (
-          <SubnetRow
-            key={subnet.number}
-            customer={subnet}
-            isEven={index % 2 === 1}
-            isSelected={selectedSubnets.includes(subnet.name)}
-            onCheckboxChange={() => handleCheckboxChange(subnet.name)}
+
+      <div className={styles.tableWrapper}>
+        <div className={styles.scrollableTable}>
+          <TableHeader
+            onSelectAll={handleSelectAll}
+            allSelected={selectedSubnets.length === displayedSubnets.length && displayedSubnets.length > 0}
           />
-        ))}
+          {isTableLoading ? (
+            <div className={styles.loadingContainer}>
+              <p>Loading subnets...</p>
+            </div>
+          ) : (
+            displayedSubnets.map((subnet, index) => (
+              <SubnetRow
+                key={subnet.number}
+                customer={subnet}
+                isEven={index % 2 === 1}
+                isSelected={selectedSubnets.includes(subnet.name)}
+                onCheckboxChange={() => handleCheckboxChange(subnet.name)}
+              />
+            ))
+          )}
+        </div>
       </div>
       <TablePagination />
       <CreateSubnetModal

diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/SubnetTable.module.css b/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/SubnetTable.module.css
@@ -6,6 +6,16 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.tableWrapper {
+  width: 100%;
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  border-collapse: collapse; /* Ensure borders are collapsed to prevent gaps */
 }
 
 .scrollableTable {
@@ -160,7 +170,7 @@
 }
 
 .nameCell {
-  width: 200px;
+  width: 250px;
   /* Name 열의 너비를 늘립니다 */
   flex-shrink: 0;
 }
@@ -178,7 +188,7 @@
 }
 
 .vpcCell {
-  width: 150px;
+  width: 200px;
   /* VPC 열의 너비를 약간 늘립니다 */
   flex-shrink: 0;
 }
@@ -419,4 +429,19 @@
   align-items: center;
   width: 100%;
   border-bottom: 1px solid #e0e0e0;
+}
+
+.providerIcon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  vertical-align: middle;
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  width: 100%;
 }
diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/TableHeader.jsx b/aiwa-mcp-frontend/src/Console/Features/VPC/Subnet/table/TableHeader.jsx
@@ -12,14 +12,14 @@ function TableHeader({ onSelectAll, allSelected }) {
           className={styles.checkbox}
         />
       </div>
-      <div className={`${styles.cell} ${styles.idCell}`} style={{ width: '7.5%', textAlign: 'center' }}>Provider</div>
-      <div className={`${styles.cell} ${styles.nameCell}`} style={{ width: '13.5%', textAlign: 'center' }}>Name</div>
+      <div className={`${styles.cell} ${styles.idCell}`} style={{textAlign: 'center' }}>Provider</div>
+      <div className={`${styles.cell} ${styles.nameCell}`} style={{ width: '20%', textAlign: 'center' }}>Name</div>
       {/* <div className={`${styles.cell} ${styles.descriptionCell}`} style={{ width: '20%' }}>Description</div> */}
-      <div className={`${styles.cell} ${styles.statusCell}`} style={{ width: '12%', textAlign: 'center' }}>Status</div>
-      <div className={`${styles.cell} ${styles.vpcIdCell}`} style={{ width: '17%', textAlign: 'center' }}>VPC ID</div>
-      <div className={`${styles.cell} ${styles.cidrCell}`} style={{ width: '20%' }}>CIDR</div>
+      <div className={`${styles.cell} ${styles.statusCell}`} style={{ width: '7%', textAlign: 'center' }}>Status</div>
+      <div className={`${styles.cell} ${styles.vpcIdCell}`} style={{ width: '15%', textAlign: 'center' }}>VPC ID</div>
+      <div className={`${styles.cell} ${styles.cidrCell}`} style={{ width: '15%' }}>CIDR</div>
       <div className={`${styles.cell} ${styles.availableipCell}`} style={{ width: '8%' }}>Available IP</div>
-      <div className={`${styles.cell} ${styles.azCell}`} style={{ width: '15%' }}>AZ</div>
+      <div className={`${styles.cell} ${styles.azCell}`} style={{ width: '20%' }}>AZ</div>
       {/* <div className={`${styles.cell} ${styles.routingTableCell}`} style={{ width: '22.5%' }}>Routing Table</div> */}
     </div>
   );

diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/table/DeleteVPCModal.jsx b/aiwa-mcp-frontend/src/Console/Features/VPC/table/DeleteVPCModal.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styles from './DeleteVPCModal.module.css';
 import axios from 'axios';
-import { AWS_API_URL } from '../../../../index';
+import { AWS_API_URL, GCP_API_URL } from '../../../../index';
 import { useUserContext } from '../../../../UserContext';
 // import { useNotification } from '../../../../hooks/useNotification';
 import { useNotification } from '../NotificationContext';
@@ -85,7 +85,7 @@ function DeleteVPCModal({ isOpen, onClose, selectedVpcs, setSelectedVpcs }) { //
         // Make a POST request to delete VPCs
         console.log("selected vpc: ", currentVPC);
         const response = await axios.delete(
-          `${AWS_API_URL}/vpc/delete?vpcName=${currentVPC.name}&userId=${currentUser.id}`
+          `${currentVPC.provider === 'AWS' ? AWS_API_URL : GCP_API_URL}/vpc/delete?vpcName=${currentVPC.name}&userId=${currentUser.id}`
         );
 
         // Clear the previous notification by showing success notification
@@ -99,6 +99,7 @@ function DeleteVPCModal({ isOpen, onClose, selectedVpcs, setSelectedVpcs }) { //
       }
     }
   };
+
   const handleSubmit = (e) => {
     e.preventDefault();
     // Add functionality to delete the VPC

diff --git a/aiwa-mcp-frontend/src/Console/Features/VPC/table/TableHeader.jsx b/aiwa-mcp-frontend/src/Console/Features/VPC/table/TableHeader.jsx
@@ -14,10 +14,10 @@ function TableHeader({ onSelectAll, allSelected }) {
       </div>
       <div className={styles.cell} style={{ width: '10%' }}>Provider</div>
       <div className={`${styles.cell} ${styles.idCell}`} style={{ width: '10%' }}>Name</div>
-      <div className={`${styles.cell} ${styles.nameCell}`} style={{ width: '20%' }}>VPC-ID</div>
+      <div className={`${styles.cell} ${styles.nameCell}`} style={{ width: '5%' }}>VPC-ID</div>
       <div className={`${styles.cell} ${styles.statusCell}`} style={{ width: '13%' }}>Status</div>
-      <div className={`${styles.cell} ${styles.cidrCell}`} style={{ width: '20%' }}>CIDR</div>
-      <div className={`${styles.cell} ${styles.routingTableCell}`} style={{ width: '20%' }}>Routing Table</div>
+      <div className={`${styles.cell} ${styles.cidrCell}`} style={{ width: '15%' }}>CIDR</div>
+      <div className={`${styles.cell} ${styles.routingTableCell}`} style={{ width: '40%' }}>Routing Table</div>
     </div>
   );
 }