Fix layout styles and open web ui page

tapis-project · Jun 27, 2024 · 7fbbabf · 7fbbabf
1 parent 82b8975
commit 7fbbabf
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 27 deletions.
diff --git a/lib/icicle-tapisui-extension/src/index.ts b/lib/icicle-tapisui-extension/src/index.ts
@@ -56,14 +56,14 @@ extension.registerService({
 
 extension.registerService({
   id: 'jupyter-lab',
-  sidebarDisplayName: 'Jupyter',
-  iconName: 'globe',
+  sidebarDisplayName: 'JupyterLab',
+  iconName: 'jupyter',
   component: JupyterLabPage,
 });
 
 extension.registerService({
   id: 'open-web-ui',
-  sidebarDisplayName: 'Open Web UI',
+  sidebarDisplayName: 'Open WebUI',
   iconName: 'globe',
   component: OpenWebUIPage,
 });

diff --git a/lib/icicle-tapisui-extension/src/pages/index.tsx b/lib/icicle-tapisui-extension/src/pages/index.tsx
@@ -21,14 +21,16 @@ export const JupyterLabPage: React.FC = () => {
   return (
     <div>
       <SectionHeader>Jupyter Lab</SectionHeader>
+      <iframe style={{width: "100%", height: "800px", border: "none"}} src="https://jupyterlab.pods.tacc.develop.tapis.io/" />
     </div>
   );
 };
 
 export const OpenWebUIPage: React.FC = () => {
   return (
-    <div>
+    <div style={{width: "100%", height: "100%", display: "flex", flexDirection: "column", overflow: "hidden"}}>
       <SectionHeader>Open Web UI</SectionHeader>
+      <iframe style={{flexGrow: 1, border: "none"}} src="https://openwebui.pods.tacc.develop.tapis.io/" />
     </div>
   );
 };
diff --git a/src/app/_Layout/Layout.tsx b/src/app/_Layout/Layout.tsx
@@ -36,19 +36,11 @@ const Layout: React.FC = () => {
     <div className="tapis-ui__header">
       <div>
         <Link to={'/'}>
-          {extension?.logo?.url ? (
-            <img
-              style={{ height: '30px' }}
-              className="logo"
-              src={extension?.logo.url}
-            />
-          ) : (
-            <img
-              style={{ height: '30px' }}
-              className="logo"
-              src="./tapislogo.png"
-            />
-          )}
+          <img
+            style={{ height: '30px' }}
+            className="logo"
+            src={extension?.logo?.url || "./tapislogo.png"}
+          />
         </Link>
         {extension?.logo?.logoText || 'TapisUI'}
       </div>
@@ -98,16 +90,10 @@ const Layout: React.FC = () => {
     </div>
   );
 
-  const workbenchContent = (
-    <div className="workbench-content">
-      <Router />
-    </div>
-  );
-
   return (
     <NotificationsProvider>
       <div style={{ display: 'flex', flexGrow: 1, height: '100vh' }}>
-        <PageLayout top={header} left={<Sidebar />} right={workbenchContent} />
+        <PageLayout top={header} left={<Sidebar />} right={<Router />} />
       </div>
     </NotificationsProvider>
   );

diff --git a/src/extensions/useExtension.ts b/src/extensions/useExtension.ts
@@ -10,9 +10,9 @@ const useExtension = () => {
   const { extensions } = useContext(ExtensionsContext);
   let basePath = resolveBasePath();
   // TODO Add logic to toggle between baseUrls iff in a local environment
-  // if (basePath == 'https://dev.develop.tapis.io') {
-  //   basePath = 'https://icicleai.tapis.io';
-  // }
+  if (basePath == 'https://dev.develop.tapis.io') {
+    basePath = 'https://icicleai.tapis.io';
+  }
 
   let extension = undefined;
   let extensionName = undefined;