feat: Add lxd instance frontend, integrate the page and Spice module

ideafast · Sep 13, 2024 · fbd7935 · fbd7935
1 parent 3c990a6
commit fbd7935
Show file tree

Hide file tree

Showing 48 changed files with 12,430 additions and 5 deletions.
diff --git a/packages/itmat-ui-react/proxy.conf.js b/packages/itmat-ui-react/proxy.conf.js
@@ -49,5 +49,19 @@ module.exports = {
         changeOrigin: true,
         autoRewrite: true,
         ws: true
+    },
+    '/rtc': {
+        target: API_SERVER,
+        secure: false,
+        changeOrigin: true,
+        autoRewrite: true,
+        ws: true
+    },
+    '/jupyter': {
+        target: API_SERVER,
+        secure: false,
+        changeOrigin: true,
+        autoRewrite: true,
+        ws: true
     }
 };
diff --git a/packages/itmat-ui-react/src/Fence.tsx b/packages/itmat-ui-react/src/Fence.tsx
@@ -41,7 +41,7 @@ export const Fence: FunctionComponent = () => {
         } else {
             setIsUserLogin(false);
         }
-    }, [whoAmI.data]);
+    }, [setIsUserLogin, whoAmI.data]);
 
     useEffect(() => {
         if (isAnyLoading) {

diff --git a/packages/itmat-ui-react/src/components/drive/file.tsx b/packages/itmat-ui-react/src/components/drive/file.tsx
@@ -261,9 +261,22 @@ export const MyFile: FunctionComponent = () => {
                                 </Menu>
                             } trigger={['click']}>
                                 <Tooltip title="More actions">
-                                    <a onClick={(e) => e.stopPropagation()}>
+                                    {/* <a href="#" onClick={(e) => e.stopPropagation()}>
                                         <MoreOutlined className={css.cellIcon} />
-                                    </a>
+                                    </a> */}
+                                    <button
+                                        onClick={(e) => e.stopPropagation()}
+                                        style={{
+                                            background: 'none',
+                                            border: 'none',
+                                            padding: 0,
+                                            cursor: 'pointer',
+                                            textDecoration: 'underline',
+                                            color: 'inherit'
+                                        }}
+                                    >
+                                        <MoreOutlined className={css.cellIcon} />
+                                    </button>
                                 </Tooltip>
                             </Dropdown>
                         </div>
@@ -832,9 +845,22 @@ export const SharedFiles: FunctionComponent<{ users: IUserWithoutToken[], shared
                                 </Menu>
                             } trigger={['click']}>
                                 <Tooltip title="More actions">
-                                    <a onClick={(e) => e.stopPropagation()}>
+                                    {/* <a onClick={(e) => e.stopPropagation()}>
+                                        <MoreOutlined className={css.cellIcon} />
+                                    </a> */}
+                                    <button
+                                        onClick={(e) => e.stopPropagation()}
+                                        style={{
+                                            background: 'none',
+                                            border: 'none',
+                                            padding: 0,
+                                            cursor: 'pointer',
+                                            textDecoration: 'underline',
+                                            color: 'inherit'
+                                        }}
+                                    >
                                         <MoreOutlined className={css.cellIcon} />
-                                    </a>
+                                    </button>
                                 </Tooltip>
                             </Dropdown>
                         </div>

diff --git a/packages/itmat-ui-react/src/components/instance/index.tsx b/packages/itmat-ui-react/src/components/instance/index.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { InstanceSection } from './instance'; // Assuming InstanceSection is the component we're about to create
+
+export const InstancePage: FunctionComponent = () => {
+    return (
+        <InstanceSection />
+    );
+};
diff --git a/packages/itmat-ui-react/src/components/instance/instance.module.css b/packages/itmat-ui-react/src/components/instance/instance.module.css
@@ -0,0 +1,25 @@
+.page_container {
+    /* padding: 2rem; */
+    padding: 20px; /* Adjust as needed */
+    overflow: auto; /* Ensures that scrolling is possible */
+    height: calc(100vh - 100px);
+}
+
+.createButton {
+    margin-bottom: 1rem;
+}
+
+.table {
+    margin-top: 1rem;
+}
+
+/* Style for cards, adjust as needed */
+.cardContainer {
+    max-height: 300px; /* Example height */
+    overflow: auto; /* Allows scrolling within the card */
+    margin-bottom: 20px; /* Adds space between cards */
+}
+
+.marginBottom {
+    margin-bottom: 20px; /* Adjust the value as needed */
+}