feat: adding imported tab in models page (#981)

* fix: creating imported tab Signed-off-by: axel7083 <[email protected]> * Update packages/frontend/src/pages/Models.svelte Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
containers · Apr 29, 2024 · 1360863 · 1360863
1 parent b9420b5
commit 1360863
Show file tree

Hide file tree

Showing 2 changed files with 167 additions and 65 deletions.
diff --git a/packages/frontend/src/pages/Models.spec.ts b/packages/frontend/src/pages/Models.spec.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import { vi, test, expect } from 'vitest';
+import { vi, test, expect, describe } from 'vitest';
 import { screen, render, waitFor, within } from '@testing-library/svelte';
 import Models from './Models.svelte';
 import { router } from 'tinro';
@@ -145,91 +145,182 @@ test('should display one model', async () => {
   expect(name).toBeDefined();
 });
 
-test('should display no model in downloaded tab', async () => {
-  mocks.modelsInfoSubscribeMock.mockReturnValue([
-    {
-      id: 'dummy-id',
-      name: 'dummy-name',
-      memory: 1024,
-    },
-  ]);
-  mocks.tasksSubscribeMock.mockReturnValue([]);
+describe('downloaded models', () => {
+  test('should display no model in downloaded tab', async () => {
+    mocks.modelsInfoSubscribeMock.mockReturnValue([
+      {
+        id: 'dummy-id',
+        name: 'dummy-name',
+        memory: 1024,
+      },
+    ]);
+    mocks.tasksSubscribeMock.mockReturnValue([]);
 
-  render(Models);
+    render(Models);
 
-  router.goto('downloaded');
+    router.goto('downloaded');
 
-  await waitFor(() => {
-    const status = screen.getByRole('status');
-    expect(status).toBeDefined();
+    await waitFor(() => {
+      const status = screen.getByRole('status');
+      expect(status).toBeDefined();
+    });
   });
-});
 
-test('should display a model in downloaded tab', async () => {
-  mocks.modelsInfoSubscribeMock.mockReturnValue([
-    {
-      id: 'dummy-id',
-      name: 'dummy-name',
-      file: {
-        file: 'dummy',
-        path: 'dummy',
+  test('should display a model in downloaded tab', async () => {
+    mocks.modelsInfoSubscribeMock.mockReturnValue([
+      {
+        id: 'dummy-id',
+        name: 'dummy-name',
+        file: {
+          file: 'dummy',
+          path: 'dummy',
+        },
+        memory: 1024,
+        url: 'http://url',
       },
-      memory: 1024,
-    },
-  ]);
-  mocks.tasksSubscribeMock.mockReturnValue([]);
+    ]);
+    mocks.tasksSubscribeMock.mockReturnValue([]);
 
-  render(Models);
+    render(Models);
 
-  router.goto('downloaded');
+    router.goto('downloaded');
 
-  await waitFor(() => {
-    const table = screen.getByRole('table');
-    expect(table).toBeDefined();
+    await waitFor(() => {
+      const table = screen.getByRole('table');
+      expect(table).toBeDefined();
+    });
+  });
+
+  test('should display only downloaded models', async () => {
+    mocks.modelsInfoSubscribeMock.mockReturnValue([
+      {
+        id: 'dummy-id-downloaded',
+        name: 'dummy-downloaded-1',
+        file: {
+          file: 'dummy',
+          path: 'dummy',
+        },
+        memory: 1024,
+        url: 'http://url',
+      },
+      {
+        id: 'dummy-id-downloaded-2',
+        name: 'dummy-downloaded-2',
+        file: {
+          file: 'dummy',
+          path: 'dummy',
+        },
+        memory: 1024,
+        url: 'http://url',
+      },
+      {
+        id: 'dummy-id-imported',
+        name: 'dummy-imported',
+        file: {
+          file: 'dummy',
+          path: 'dummy',
+        },
+        memory: 1024,
+      },
+    ]);
+    mocks.tasksSubscribeMock.mockReturnValue([]);
+
+    render(Models);
+
+    router.goto('downloaded');
+
+    await waitFor(() => expect(screen.getByRole('table')).toBeDefined());
+
+    const rows = screen.getAllByRole('cell', { name: 'Model Name' });
+    expect(rows.length).toBe(2);
+    expect((rows[0].firstChild as HTMLElement).title).toBe('dummy-downloaded-1');
+    expect((rows[1].firstChild as HTMLElement).title).toBe('dummy-downloaded-2');
   });
 });
 
-test('should display a model in available tab', async () => {
-  mocks.modelsInfoSubscribeMock.mockReturnValue([
-    {
-      id: 'dummy-id',
-      name: 'dummy-name',
-      memory: 1024,
-    },
-  ]);
-  mocks.tasksSubscribeMock.mockReturnValue([]);
+describe('imported models', () => {
+  test('should display no model in imported tab', async () => {
+    mocks.modelsInfoSubscribeMock.mockReturnValue([]);
+    mocks.tasksSubscribeMock.mockReturnValue([]);
 
-  render(Models);
+    render(Models);
 
-  router.goto('available');
+    router.goto('imported');
 
-  await waitFor(() => {
-    const table = screen.getByRole('table');
-    expect(table).toBeDefined();
+    await waitFor(() => {
+      const status = screen.getByRole('status');
+      expect(status).toBeDefined();
+    });
+  });
+
+  test('should display a model in imported tab', async () => {
+    mocks.modelsInfoSubscribeMock.mockReturnValue([
+      {
+        id: 'dummy-id',
+        name: 'dummy-name',
+        file: {
+          file: 'dummy',
+          path: 'dummy',
+        },
+        memory: 1024,
+      },
+    ]);
+    mocks.tasksSubscribeMock.mockReturnValue([]);
+
+    render(Models);
+
+    router.goto('imported');
+
+    await waitFor(() => {
+      const table = screen.getByRole('table');
+      expect(table).toBeDefined();
+    });
   });
 });
 
-test('should display no model in available tab', async () => {
-  mocks.modelsInfoSubscribeMock.mockReturnValue([
-    {
-      id: 'dummy-id',
-      name: 'dummy-name',
-      file: {
-        file: 'dummy',
-        path: 'dummy',
+describe('available models', () => {
+  test('should display a model in available tab', async () => {
+    mocks.modelsInfoSubscribeMock.mockReturnValue([
+      {
+        id: 'dummy-id',
+        name: 'dummy-name',
+        memory: 1024,
       },
-      memory: 1024,
-    },
-  ]);
-  mocks.tasksSubscribeMock.mockReturnValue([]);
+    ]);
+    mocks.tasksSubscribeMock.mockReturnValue([]);
 
-  render(Models);
+    render(Models);
 
-  router.goto('available');
+    router.goto('available');
 
-  await waitFor(() => {
-    const status = screen.getByRole('status');
-    expect(status).toBeDefined();
+    await waitFor(() => {
+      const table = screen.getByRole('table');
+      expect(table).toBeDefined();
+    });
+  });
+
+  test('should display no model in available tab', async () => {
+    mocks.modelsInfoSubscribeMock.mockReturnValue([
+      {
+        id: 'dummy-id',
+        name: 'dummy-name',
+        file: {
+          file: 'dummy',
+          path: 'dummy',
+        },
+        memory: 1024,
+      },
+    ]);
+    mocks.tasksSubscribeMock.mockReturnValue([]);
+
+    render(Models);
+
+    router.goto('available');
+
+    await waitFor(() => {
+      const status = screen.getByRole('status');
+      expect(status).toBeDefined();
+    });
   });
 });
 

diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
@@ -51,8 +51,9 @@ let models: ModelInfo[] = [];
 // filtered mean, we remove the models that are being downloaded
 let filteredModels: ModelInfo[] = [];
 
-$: localModels = filteredModels.filter(model => model.file);
+$: localModels = filteredModels.filter(model => model.file && model.url);
 $: remoteModels = filteredModels.filter(model => !model.file);
+$: importedModels = filteredModels.filter(model => !model.url);
 
 function filterModels(): void {
   // Let's collect the models we do not want to show (loading, error).
@@ -108,6 +109,7 @@ async function importModel() {
   <svelte:fragment slot="tabs">
     <Tab title="All" url="models" />
     <Tab title="Downloaded" url="models/downloaded" />
+    <Tab title="Imported" url="models/imported" />
     <Tab title="Available" url="models/available" />
   </svelte:fragment>
   <svelte:fragment slot="additional-actions">
@@ -145,6 +147,15 @@ async function importModel() {
               {/if}
             </Route>
 
+            <!-- Imported models -->
+            <Route path="/imported">
+              {#if importedModels.length > 0}
+                <Table kind="model" data="{importedModels}" columns="{columns}" row="{row}"></Table>
+              {:else}
+                <div role="status">There are no models yet</div>
+              {/if}
+            </Route>
+
             <!-- Available models (from catalogs)-->
             <Route path="/available">
               {#if remoteModels.length > 0}