fix: trigger external link to tensorboard if link is found instead of…

… trying to render iframe

apps/deepsirius-ui/src/components/gallery-views.tsx

@@ -1,6 +1,9 @@
 import { api } from '~/utils/api';
 import { Textarea } from './ui/textarea';
 import { ImageGallery } from './image-gallery';
+import Link from 'next/link';
+import { cn } from '~/lib/utils';
+import { buttonVariants } from './ui/button';
 
 export function ViewRemoteLog({ path }: { path: string }) {
   const { data, error, isLoading, isError } = api.ssh.catTxt.useQuery({
@@ -99,13 +102,19 @@ export function Tensorboard({ logdir }: { logdir: string }) {
   }
 
   return (
-    <iframe
-      src={tensorboardUrl.data.url}
-      className="h-full w-full rounded-lg"
-      onError={(e) => {
-        console.error('Error loading tensorboard', e);
-      }}
-    />
+    <div className="flex h-full w-full items-center justify-center rounded-lg border border-dashed">
+      <p className="text-center text-muted-foreground">
+        {`Tensorboard should open in a new tab. If it doesn't, click: `}
+        <a
+          href={tensorboardUrl.data.url}
+          target="_blank"
+          rel="noreferrer noopener"
+          className="text-blue-600"
+        >
+          {tensorboardUrl.data.url}
+        </a>
+      </p>
+    </div>
   );
 }
 
@@ -118,3 +127,46 @@ function Loading({ message }: { message?: string }) {
     </div>
   );
 }
+
+export function TensorboardLink({
+  logdir,
+  disabled,
+  onClick,
+}: {
+  logdir: string;
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  const tensorboardUrl = api.ssh.getTensorboardUrlFromPath.useQuery(
+    {
+      path: logdir,
+      lines: 15,
+    },
+    {
+      enabled: !disabled,
+    },
+  );
+
+  return (
+    <Link
+      href={tensorboardUrl.data?.url ?? ''}
+      rel="noreferrer noopener"
+      target="_blank"
+      data-disabled={
+        disabled ||
+        !tensorboardUrl.data?.url.startsWith('http') ||
+        tensorboardUrl.isLoading ||
+        tensorboardUrl.isError
+      }
+      className={cn(
+        buttonVariants({ variant: 'outline' }),
+        '!w-full',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+      )}
+      prefetch={false}
+      onClick={onClick}
+    >
+      Open Tensorboard
+    </Link>
+  );
+}

apps/deepsirius-ui/src/pages/u/[user]/[workspace]/gallery.tsx

@@ -32,6 +32,7 @@ import {
   ViewRemoteLog,
   ViewRemoteImages,
   Tensorboard,
+  TensorboardLink,
 } from '~/components/gallery-views';
 import { StatusBadge } from '~/components/workboard/status-badge';
 import { defaultSlurmLogPath } from '~/lib/utils';
@@ -78,6 +79,17 @@ function Gallery({ user, workspace }: { user: string; workspace: string }) {
   );
 }
 
+function getLogPath(node: Node<NodeData>) {
+  const workspacePath = node.data.workspacePath;
+  const jobId = node.data.jobId;
+  const jobName = node.type ? `deepsirius-${node.type}` : '';
+  return defaultSlurmLogPath({
+    workspacePath,
+    jobId,
+    jobName,
+  });
+}
+
 function SidePanelContent({ node }: { node: Node<NodeData> }) {
   const [status, setStatus] = useState<NodeStatus>(node.data.status);
   const [view, setView] = useQueryState('view');
@@ -148,23 +160,20 @@ function SidePanelContent({ node }: { node: Node<NodeData> }) {
         <Tooltip>
           <TooltipTrigger asChild>
             <span tabIndex={0}>
-              <Button
-                onClick={() => void setView('tensorboard')}
-                variant={(view === 'tensorboard' && 'default') || 'outline'}
+              <TensorboardLink
+                logdir={getLogPath(node).out}
                 disabled={
-                  !['network', 'finetune'].includes(node.type) ||
+                  !(node.type === 'network' || node.type === 'finetune') || 
                   status !== 'busy'
                 }
-                className="!w-full"
-              >
-                Tensorboard
-              </Button>
+                onClick={() => void setView('tensorboard')}
+              />
             </span>
           </TooltipTrigger>
           <TooltipContent>
             <p className="text-muted-foreground">
-              View the tensorboard of the training.
-              Only available for busy network or finetune nodes.
+              View the tensorboard of the training. Only available for busy
+              network or finetune nodes.
             </p>
           </TooltipContent>
         </Tooltip>
@@ -245,11 +254,11 @@ function NodeInfo({
       <div className="flex items-center justify-between">
         <div className="flex flex-row gap-2">
           <NodeIcon nodeType={type} />
-          <p className='text-md font-semibold'>{type}</p>
+          <p className="text-md font-semibold">{type}</p>
         </div>
         <StatusBadge status={status} />
       </div>
-      <p className="text-wrap text-md">{nodeName ?? 'node'}</p>
+      <p className="text-md text-wrap">{nodeName ?? 'node'}</p>
       <p className="text-muted-foreground">{message}</p>
     </div>
   );
@@ -275,14 +284,8 @@ function GalleryView({
   view: string | null;
   node: Node<NodeData>;
 }) {
-  const workspacePath = node.data.workspacePath;
   const jobId = node.data.jobId;
-  const jobName = node.type ? `deepsirius-${node.type}` : '';
-  const { out } = defaultSlurmLogPath({
-    workspacePath,
-    jobId,
-    jobName,
-  });
+  const { out, err } = getLogPath(node);
   switch (view) {
     case 'log-output':
       if (!jobId) return <p>Job Id not found</p>;
@@ -291,11 +294,6 @@ function GalleryView({
     case 'log-err':
       if (!jobId) return <p>Job Id not found</p>;
       if (!node.type) return <p>Node type not found</p>;
-      const { err } = defaultSlurmLogPath({
-        workspacePath,
-        jobId,
-        jobName,
-      });
       return <ViewRemoteLog path={err} />;
     case 'preview-imgs':
       if (!node.data?.augmentationData)