chore: show error into downloading top area

Signed-off-by: lstocchi <[email protected]>
containers · May 15, 2024 · 7588ef9 · 7588ef9
1 parent fc45ab7
commit 7588ef9
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 144 deletions.
diff --git a/packages/backend/src/managers/modelsManager.ts b/packages/backend/src/managers/modelsManager.ts
@@ -349,6 +349,16 @@ export class ModelsManager implements Disposable {
   }
 
   private createDownloadTask(model: ModelInfo, labels?: { [key: string]: string }): Task {
+    // it may happen that the taskRegistry contains old entries representing an old failing download, we delete them as we are starting a new download
+    const failedPullingTaskIds = this.taskRegistry
+      .getTasksByLabels({
+        'model-pulling': model.id,
+      })
+      .filter(t => t.state === 'error')
+      .map(t => t.id);
+    if (failedPullingTaskIds.length > 0) {
+      this.taskRegistry.deleteAll(failedPullingTaskIds);
+    }
     return this.taskRegistry.createTask(`Downloading model ${model.name}`, 'loading', {
       ...labels,
       'model-pulling': model.id,

diff --git a/packages/backend/src/utils/downloader.ts b/packages/backend/src/utils/downloader.ts
@@ -166,6 +166,9 @@ export class Downloader {
             callback({
               error: `The file's security hash (SHA-256) does not match the expected value. The file may have been altered or corrupted during the download process`,
             });
+            promises.rm(tmpFile).catch((err: unknown) => {
+              console.error(`Something went wrong while trying to delete ${tmpFile}`, err);
+            });
             return;
           }
         }

diff --git a/packages/frontend/src/lib/ErrorMessage.svelte b/packages/frontend/src/lib/ErrorMessage.svelte
@@ -5,24 +5,17 @@ import Tooltip from './Tooltip.svelte';
 
 export let error: string;
 export let icon = false;
-export let tooltipPosition: 'top' | 'topLeft' | 'bottomLeft' = 'top';
-export let tooltipClass = '';
 </script>
 
 {#if icon}
   {#if error !== undefined && error !== ''}
-    <Tooltip
-      top="{tooltipPosition === 'top'}"
-      topLeft="{tooltipPosition === 'topLeft'}"
-      bottomLeft="{tooltipPosition === 'bottomLeft'}">
+    <Tooltip top>
       <svelte:fragment slot="content">
         <Fa size="1.125x" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
       </svelte:fragment>
       <svelte:fragment slot="tip">
         {#if error}
-          <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs {tooltipClass}" aria-label="tooltip">
-            {error}
-          </div>
+          <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs" aria-label="tooltip">{error}</div>
         {/if}
       </svelte:fragment>
     </Tooltip>

diff --git a/packages/frontend/src/lib/progress/TaskItem.svelte b/packages/frontend/src/lib/progress/TaskItem.svelte
@@ -16,7 +16,7 @@ const cancel = () => {
 </script>
 
 <div class="flex flex-row items-center">
-  <div class="min-w-4 mr-2">
+  <div class="min-w-4 mr-2 flex items-center justify-center">
     {#if task.state === 'success'}
       <svg
         role="img"

diff --git a/packages/frontend/src/lib/table/model/ModelColumnAction.spec.ts b/packages/frontend/src/lib/table/model/ModelColumnAction.spec.ts
@@ -19,9 +19,9 @@
 import '@testing-library/jest-dom/vitest';
 import { test, expect, vi, beforeEach } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import ModelColumnActions from '/@/lib/table/model/ModelColumnActions.svelte';
 import { router } from 'tinro';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
 
 const mocks = vi.hoisted(() => ({
   requestRemoveLocalModel: vi.fn(),
@@ -49,7 +49,7 @@ test('Expect folder and delete button in document', async () => {
   const d = new Date();
   d.setDate(d.getDate() - 2);
 
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',
@@ -81,7 +81,7 @@ test('Expect folder and delete button in document', async () => {
 });
 
 test('Expect download button in document', async () => {
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',
@@ -108,7 +108,7 @@ test('Expect download button in document', async () => {
 });
 
 test('Expect downloadModel to be call on click', async () => {
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',
@@ -134,7 +134,7 @@ test('Expect router to be called when rocket icon clicked', async () => {
   const gotoMock = vi.spyOn(router, 'goto');
   const replaceMock = vi.spyOn(router.location.query, 'replace');
 
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',
@@ -160,23 +160,3 @@ test('Expect router to be called when rocket icon clicked', async () => {
     expect(replaceMock).toHaveBeenCalledWith({ 'model-id': 'my-model' });
   });
 });
-
-test('Expect error tooltip to be shown if action failed', async () => {
-  const object: ModelInfoUI = {
-    id: 'my-model',
-    description: '',
-    hw: '',
-    license: '',
-    name: '',
-    registry: '',
-    url: '',
-    file: undefined,
-    memory: 1000,
-    actionError: 'error while executing X',
-  };
-  render(ModelColumnActions, { object });
-
-  const tooltip = screen.getByLabelText('tooltip');
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip.textContent).equals('error while executing X');
-});
diff --git a/packages/frontend/src/lib/table/model/ModelColumnActions.svelte b/packages/frontend/src/lib/table/model/ModelColumnActions.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { faDownload, faRocket, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import ListItemButtonIcon from '../../button/ListItemButtonIcon.svelte';
 import { studioClient } from '/@/utils/client';
 import { router } from 'tinro';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
-import ErrorMessage from '../../ErrorMessage.svelte';
-import { onMount } from 'svelte';
-export let object: ModelInfoUI;
+export let object: ModelInfo;
 
 function deleteModel() {
   studioClient.requestRemoveLocalModel(object.id).catch(err => {
@@ -33,47 +31,20 @@ function createModelService() {
   router.goto('/service/create');
   router.location.query.replace({ 'model-id': object.id });
 }
-
-let container: HTMLDivElement;
-let bottomHalf = false;
-onMount(() => {
-  // if the row is below half page, we move the tooltip position of the error message
-  const bcr = container.getBoundingClientRect();
-  bottomHalf = bcr.top > window.innerHeight / 2;
-});
 </script>
 
-<div class="flex w-full" bind:this="{container}">
-  <div class="flex items-center w-5">
-    {#if object.actionError}
-      <ErrorMessage
-        error="{object.actionError}"
-        icon
-        tooltipPosition="{bottomHalf ? 'topLeft' : 'bottomLeft'}"
-        tooltipClass="text-pretty w-64" />
-    {:else}
-      <div>&nbsp;</div>
-    {/if}
-  </div>
-  <div class="text-right w-full">
-    {#if object.file !== undefined}
-      <ListItemButtonIcon
-        icon="{faRocket}"
-        title="Create Model Service"
-        enabled="{!object.state}"
-        onClick="{() => createModelService()}" />
-      <ListItemButtonIcon
-        icon="{faFolderOpen}"
-        onClick="{() => openModelFolder()}"
-        title="Open Model Folder"
-        enabled="{!object.state}" />
-      <ListItemButtonIcon icon="{faTrash}" onClick="{deleteModel}" title="Delete Model" enabled="{!object.state}" />
-    {:else}
-      <ListItemButtonIcon
-        icon="{faDownload}"
-        onClick="{downloadModel}"
-        title="Download Model"
-        enabled="{!object.state}" />
-    {/if}
-  </div>
-</div>
+{#if object.file !== undefined}
+  <ListItemButtonIcon
+    icon="{faRocket}"
+    title="Create Model Service"
+    enabled="{!object.state}"
+    onClick="{() => createModelService()}" />
+  <ListItemButtonIcon
+    icon="{faFolderOpen}"
+    onClick="{() => openModelFolder()}"
+    title="Open Model Folder"
+    enabled="{!object.state}" />
+  <ListItemButtonIcon icon="{faTrash}" onClick="{deleteModel}" title="Delete Model" enabled="{!object.state}" />
+{:else}
+  <ListItemButtonIcon icon="{faDownload}" onClick="{downloadModel}" title="Download Model" enabled="{!object.state}" />
+{/if}
diff --git a/packages/frontend/src/lib/table/model/ModelColumnAge.spec.ts b/packages/frontend/src/lib/table/model/ModelColumnAge.spec.ts
@@ -19,14 +19,14 @@
 import '@testing-library/jest-dom/vitest';
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import ModelColumnCreation from './ModelColumnAge.svelte';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
 
 test('Expect simple column styling', async () => {
   const d = new Date();
   d.setDate(d.getDate() - 2);
 
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',

diff --git a/packages/frontend/src/lib/table/model/ModelColumnAge.svelte b/packages/frontend/src/lib/table/model/ModelColumnAge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { humanizeAge } from '/@/utils/dimensions';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
-export let object: ModelInfoUI;
+export let object: ModelInfo;
 </script>
 
 <div class="text-sm text-gray-700">

diff --git a/packages/frontend/src/lib/table/model/ModelColumnLabels.svelte b/packages/frontend/src/lib/table/model/ModelColumnLabels.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { faMemory, faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import Fa from 'svelte-fa';
 import { filesize } from 'filesize';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
-export let object: ModelInfoUI;
+export let object: ModelInfo;
 </script>
 
 <div class="text-sm text-gray-700">

diff --git a/packages/frontend/src/lib/table/model/ModelColumnName.spec.ts b/packages/frontend/src/lib/table/model/ModelColumnName.spec.ts
@@ -19,14 +19,14 @@
 import '@testing-library/jest-dom/vitest';
 import { test, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import ModelColumnName from './ModelColumnName.svelte';
 import userEvent from '@testing-library/user-event';
 import { router } from 'tinro';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
 
 test('Expect model info lower bar to be visible', async () => {
   const routerMock = vi.spyOn(router, 'goto');
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',
@@ -58,7 +58,7 @@ test('Expect model info lower bar to be visible', async () => {
 
 test('Expect model info lower bar to be visible', async () => {
   const routerMock = vi.spyOn(router, 'goto');
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',

diff --git a/packages/frontend/src/lib/table/model/ModelColumnName.svelte b/packages/frontend/src/lib/table/model/ModelColumnName.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { router } from 'tinro';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
-export let object: ModelInfoUI;
+export let object: ModelInfo;
 
 function openDetails() {
   router.goto(`/model/${object.id}`);

diff --git a/packages/frontend/src/lib/table/model/ModelColumnSize.spec.ts b/packages/frontend/src/lib/table/model/ModelColumnSize.spec.ts
@@ -19,11 +19,11 @@
 import '@testing-library/jest-dom/vitest';
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import ModelColumnSize from './ModelColumnSize.svelte';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
 
 test('Expect simple column styling', async () => {
-  const object: ModelInfoUI = {
+  const object: ModelInfo = {
     id: 'my-model',
     description: '',
     hw: '',

diff --git a/packages/frontend/src/lib/table/model/ModelColumnSize.svelte b/packages/frontend/src/lib/table/model/ModelColumnSize.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { filesize } from 'filesize';
-import type { ModelInfoUI } from '/@/models/ModelInfoUI';
-export let object: ModelInfoUI;
+export let object: ModelInfo;
 </script>
 
 <div class="text-xs text-gray-700 flex-flex-row">

diff --git a/packages/frontend/src/models/ModelInfoUI.ts b/packages/frontend/src/models/ModelInfoUI.ts
diff --git a/packages/frontend/src/models/RecipeModelInfo.ts b/packages/frontend/src/models/RecipeModelInfo.ts
@@ -16,9 +16,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import type { ModelInfoUI } from './ModelInfoUI';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 
-export interface RecipeModelInfo extends ModelInfoUI {
+export interface RecipeModelInfo extends ModelInfo {
   recommended: boolean;
   inUse: boolean;
 }