diff --git a/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/[notebookId]/dashboard/_components/Configuration.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/[notebookId]/dashboard/_components/Configuration.component.tsx
index 3be287ba8dba..ae21f53f1e81 100644
--- a/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/[notebookId]/dashboard/_components/Configuration.component.tsx
+++ b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/[notebookId]/dashboard/_components/Configuration.component.tsx
@@ -4,21 +4,13 @@ import { useNavigate } from 'react-router-dom';
import { useNotebookData } from '../../Notebook.context';
import { Button } from '@/components/ui/button';
import { useToast } from '@/components/ui/use-toast';
-import DeleteNotebook from '../../_components/DeleteNotebook.component';
-import { useGetNotebooks } from '@/hooks/api/ai/notebook/useGetNotebooks.hook';
-import { useModale } from '@/hooks/useModale';
-import { isRunningNotebook } from '@/lib/notebookHelper';
+import { isStoppedNotebook } from '@/lib/notebookHelper';
const Configurations = () => {
- const { notebook, projectId } = useNotebookData();
+ const { notebook } = useNotebookData();
const { t } = useTranslation('pci-ai-notebooks/notebooks/notebook/dashboard');
const navigate = useNavigate();
const toast = useToast();
- const deleteModale = useModale('delete');
-
- const getNotebooksQuery = useGetNotebooks(projectId, {
- enabled: false,
- });
return (
@@ -46,20 +38,11 @@ const Configurations = () => {
data-testid="service-confi-delete-button"
variant="destructive"
className="w-full bg-background border-2 hover:bg-destructive/10 font-semibold border-destructive text-destructive mt-4"
- onClick={() => deleteModale.open()}
- disabled={isRunningNotebook(notebook.status.state)}
+ onClick={() => navigate('./delete')}
+ disabled={!isStoppedNotebook(notebook.status.state)}
>
{t('deleteNotebookButton')}
- {
- navigate(`../../../`);
- deleteModale.close();
- getNotebooksQuery.refetch();
- }}
- />
);
};
diff --git a/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/[notebookId]/dashboard/delete/Delete.modal.tsx b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/[notebookId]/dashboard/delete/Delete.modal.tsx
new file mode 100644
index 000000000000..406b97e2b709
--- /dev/null
+++ b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/[notebookId]/dashboard/delete/Delete.modal.tsx
@@ -0,0 +1,17 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { useGetNotebook } from '@/hooks/api/ai/notebook/useGetNotebook.hook';
+import DeleteNotebook from '../../_components/DeleteNotebook.component';
+
+const DeleteNotebookModal = () => {
+ const { projectId, notebookId } = useParams();
+ const navigate = useNavigate();
+ const notebookQuery = useGetNotebook(projectId, notebookId);
+ return (
+
navigate('../..')}
+ notebook={notebookQuery.data}
+ />
+ );
+};
+
+export default DeleteNotebookModal;
diff --git a/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListColumns.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListColumns.component.tsx
index 48bfa350dd48..d758528926e3 100644
--- a/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListColumns.component.tsx
+++ b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListColumns.component.tsx
@@ -1,5 +1,12 @@
import { ColumnDef } from '@tanstack/react-table';
-import { Cpu, Globe, LockKeyhole, MoreHorizontal, Zap } from 'lucide-react';
+import {
+ ArrowUpRightFromSquare,
+ Cpu,
+ Globe,
+ LockKeyhole,
+ MoreHorizontal,
+ Zap,
+} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import * as ai from '@/types/cloud/project/ai';
@@ -17,7 +24,12 @@ import { SortableHeader } from '@/components/ui/data-table';
import Link from '@/components/links/Link.component';
import { convertSecondsToTimeString } from '@/lib/durationHelper';
import NotebookStatusBadge from './NotebookStatusBadge.component';
-import { isDeletingNotebook, isRunningNotebook } from '@/lib/notebookHelper';
+import {
+ isDeletingNotebook,
+ isRunningNotebook,
+ isStoppedNotebook,
+} from '@/lib/notebookHelper';
+import A from '@/components/links/A.component';
interface NotebooksListColumnsProps {
onStartClicked: (notebook: ai.notebook.Notebook) => void;
@@ -75,14 +87,46 @@ export const getColumns = ({
),
},
{
- id: 'Environment',
- accessorFn: (row) =>
- `${row.spec.env.frameworkId} - ${row.spec.env.frameworkVersion}`,
+ id: 'Framework',
+ accessorFn: (row) => row.spec.env.frameworkId,
+ header: ({ column }) => (
+
+ {t('tableHeaderFramework')}
+
+ ),
+ cell: ({ row }) => (
+ {row.original.spec.env.frameworkId}
+ ),
+ },
+ {
+ id: 'Editor',
+ accessorFn: (row) => row.spec.env.editorId,
header: ({ column }) => (
- {t('tableHeaderEnvironment')}
+ {t('tableHeaderEditor')}
),
+ cell: ({ row }) => (
+
+ ),
},
{
id: 'Resources',
@@ -226,7 +270,7 @@ export const getColumns = ({
{
diff --git a/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListTable.component.tsx b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListTable.component.tsx
index 46c98d08c738..e67d8cb7ca92 100644
--- a/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListTable.component.tsx
+++ b/packages/manager/apps/pci-ai-notebooks/src/pages/notebooks/_components/NotebooksListTable.component.tsx
@@ -1,93 +1,30 @@
import { ColumnDef } from '@tanstack/react-table';
-import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
import { DataTable } from '@/components/ui/data-table';
import { Skeleton } from '@/components/ui/skeleton';
import * as ai from '@/types/cloud/project/ai';
import { getColumns } from './NotebooksListColumns.component';
-import { useModale } from '@/hooks/useModale';
-import DeleteNotebook from '../[notebookId]/_components/DeleteNotebook.component';
-import StartNotebook from '../[notebookId]/_components/StartNotebook.component';
-import StopNotebook from '../[notebookId]/_components/StopNotebook.component';
interface NotebooksListProps {
notebooks: ai.notebook.Notebook[];
- refetchFn: () => void;
}
-export default function NotebooksList({
- notebooks,
- refetchFn,
-}: NotebooksListProps) {
- const startModale = useModale('start');
- const stopModale = useModale('stop');
- const deleteModale = useModale('delete');
-
- const startingNotebook = useMemo(
- () => notebooks.find((s) => s.id === startModale.value),
- [startModale.value, notebooks],
- );
- const stoppingNotebook = useMemo(
- () => notebooks.find((s) => s.id === stopModale.value),
- [stopModale.value, notebooks],
- );
-
- const deletingNotebook = useMemo(
- () => notebooks.find((s) => s.id === deleteModale.value),
- [deleteModale.value, notebooks],
- );
+export default function NotebooksList({ notebooks }: NotebooksListProps) {
+ const navigate = useNavigate();
const columns: ColumnDef[] = getColumns({
onStartClicked: (notebook: ai.notebook.Notebook) => {
- startModale.open(notebook.id);
+ navigate(`./start/${notebook.id}`);
},
onStopClicked: (notebook: ai.notebook.Notebook) => {
- stopModale.open(notebook.id);
+ navigate(`./stop/${notebook.id}`);
},
onDeleteClicked: (notebook: ai.notebook.Notebook) => {
- deleteModale.open(notebook.id);
+ navigate(`./delete/${notebook.id}`);
},
});
- return (
- <>
-
- {deletingNotebook && (
- {
- deleteModale.close();
- refetchFn();
- }}
- />
- )}
- {startingNotebook && (
- {
- startModale.close();
- refetchFn();
- }}
- />
- )}
- {stoppingNotebook && (
- {
- stopModale.close();
- refetchFn();
- }}
- />
- )}
-
- );
+ return ;
}
NotebooksList.Skeleton = function NotebooksListSkeleton() {
@@ -97,10 +34,10 @@ NotebooksList.Skeleton = function NotebooksListSkeleton() {
data-testid="notebook-list-table-skeleton"
className="flex justify-between w-100 mb-2 items-end"
>
-
+
-
-
+
+