send application tasks to frontend when updated

packages/backend/src/managers/applicationManager.ts

@@ -256,11 +256,15 @@ export class ApplicationManager {
         }
       }
 
+      let previousProgressValue = -1;
       resp.on('data', chunk => {
         progress += chunk.length;
         const progressValue = (progress * 100) / totalFileSize;
 
-        taskUtil.setTaskProgress(modelId, progressValue);
+        if ((progressValue - previousProgressValue) > 1) {
+          previousProgressValue = progressValue;
+          taskUtil.setTaskProgress(modelId, progressValue);
+        }
 
         // send progress in percentage (ex. 1.2%, 2.6%, 80.1%) to frontend
         //this.sendProgress(progressValue);

packages/backend/src/registries/RecipeStatusRegistry.ts

@@ -18,21 +18,35 @@
 
 import type { RecipeStatus } from '@shared/src/models/IRecipeStatus';
 import type { TaskRegistry } from './TaskRegistry';
+import type { Webview } from '@podman-desktop/api';
+import { MSG_NEW_RECIPE_STATE } from '@shared/Messages';
 
 export class RecipeStatusRegistry {
   private statuses: Map<string, RecipeStatus> = new Map<string, RecipeStatus>();
 
-  constructor(private taskRegistry: TaskRegistry) {}
+  constructor(private taskRegistry: TaskRegistry, private webview: Webview) {}
 
   setStatus(recipeId: string, status: RecipeStatus) {
     // Update the TaskRegistry
     if (status.tasks && status.tasks.length > 0) {
       status.tasks.map(task => this.taskRegistry.set(task));
     }
     this.statuses.set(recipeId, status);
+    this.dispatchState(); // we don't want to wait
   }
 
   getStatus(recipeId: string): RecipeStatus | undefined {
     return this.statuses.get(recipeId);
   }
+
+  getStatuses(): Map<string, RecipeStatus> {
+    return this.statuses;
+  }
+
+  private async dispatchState() {
+    await this.webview.postMessage({
+      id: MSG_NEW_RECIPE_STATE,
+      body: this.statuses,
+    });
+  }
 }

packages/backend/src/studio-api-impl.ts

@@ -53,6 +53,10 @@ export class StudioApiImpl implements StudioAPI {
     return this.recipeStatusRegistry.getStatus(recipeId);
   }
 
+  async getPullingStatuses(): Promise<Map<string, RecipeStatus>> {
+    return this.recipeStatusRegistry.getStatuses();
+  }
+
   async getModelById(modelId: string): Promise<ModelInfo> {
     // TODO: move logic to catalog manager
     const model = this.catalogManager.getModels().find(m => modelId === m.id);

packages/backend/src/studio.ts

@@ -92,7 +92,7 @@ export class Studio {
     this.rpcExtension = new RpcExtension(this.#panel.webview);
     const gitManager = new GitManager();
     const taskRegistry = new TaskRegistry();
-    const recipeStatusRegistry = new RecipeStatusRegistry(taskRegistry);
+    const recipeStatusRegistry = new RecipeStatusRegistry(taskRegistry, this.#panel.webview);
     const applicationManager = new ApplicationManager(gitManager, recipeStatusRegistry, this.#extensionContext);
     this.playgroundManager = new PlayGroundManager(this.#panel.webview);
     // Create catalog manager, responsible for loading the catalog files and watching for changes

packages/frontend/src/pages/Recipe.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
-import { onDestroy, onMount } from 'svelte';
 import { studioClient } from '/@/utils/client';
 import Tab from '/@/lib/Tab.svelte';
 import Route from '/@/Route.svelte';
@@ -12,45 +11,24 @@ import { faDownload, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import TasksProgress from '/@/lib/progress/TasksProgress.svelte';
 import Button from '/@/lib/button/Button.svelte';
 import { getDisplayName } from '/@/utils/versionControlUtils';
-import type { RecipeStatus } from '@shared/src/models/IRecipeStatus';
 import { getIcon } from '/@/utils/categoriesUtils';
 import RecipeModels from './RecipeModels.svelte';
 import { catalog } from '/@/stores/catalog';
+  import { recipes } from '../stores/recipe';
 
 export let recipeId: string;
 
 // The recipe model provided
 $: recipe = $catalog.recipes.find(r => r.id === recipeId);
 $: categories = $catalog.categories;
+$: recipeStatus = $recipes.get(recipeId);
 
-// By default, we are loading the recipe information
-let loading: boolean = true;
-
-// The pulling tasks
-let recipeStatus: RecipeStatus | undefined = undefined;
-
-let intervalId: ReturnType<typeof setInterval> | undefined = undefined;
-
-onMount(async () => {
-  // Pulling update
-  intervalId = setInterval(async () => {
-    recipeStatus = await studioClient.getPullingStatus(recipeId);
-    loading = false;
-  }, 1000);
-})
-
+let loading: boolean = false;
 const onPullingRequest = async () => {
   loading = true;
   await studioClient.pullApplication(recipeId);
 }
 
-onDestroy(() => {
-  if(intervalId !== undefined) {
-    clearInterval(intervalId);
-    intervalId = undefined;
-  }
-});
-
 const onClickRepository = () => {
   if (recipe) {
     studioClient.openURL(recipe.repository);

packages/frontend/src/stores/recipe.ts

@@ -0,0 +1,18 @@
+import type { Readable } from 'svelte/store';
+import { readable } from 'svelte/store';
+import { MSG_NEW_RECIPE_STATE } from '@shared/Messages';
+import { rpcBrowser, studioClient } from '/@/utils/client';
+import type { RecipeStatus } from '@shared/src/models/IRecipeStatus';
+
+export const recipes: Readable<Map<string, RecipeStatus>> = readable<Map<string, RecipeStatus>>(new Map<string, RecipeStatus>(), set => {
+  const sub = rpcBrowser.subscribe(MSG_NEW_RECIPE_STATE, msg => {
+    set(msg);
+  });
+  // Initialize the store manually
+  studioClient.getPullingStatuses().then(state => {
+    set(state);
+  });
+  return () => {
+    sub.unsubscribe();
+  };
+});

packages/shared/Messages.ts

@@ -1,3 +1,4 @@
 export const MSG_PLAYGROUNDS_STATE_UPDATE = 'playgrounds-state-update';
 export const MSG_NEW_PLAYGROUND_QUERIES_STATE = 'new-playground-queries-state';
 export const MSG_NEW_CATALOG_STATE = 'new-catalog-state';
+export const MSG_NEW_RECIPE_STATE = 'new-recipe-state';

packages/shared/src/StudioAPI.ts

@@ -9,6 +9,7 @@ export abstract class StudioAPI {
   abstract ping(): Promise<string>;
   abstract getCatalog(): Promise<Catalog>;
   abstract getPullingStatus(recipeId: string): Promise<RecipeStatus>;
+  abstract getPullingStatuses(): Promise<Map<string, RecipeStatus>>;
   abstract pullApplication(recipeId: string): Promise<void>;
   abstract openURL(url: string): Promise<boolean>;
   /**