feat: add warning banner to recipe page (#881)

* feat: add warning to recipe page

Signed-off-by: lstocchi <[email protected]>

* fix: format after rebase

Signed-off-by: Jeff MAURY <[email protected]>

* fix: unit tests

Signed-off-by: Jeff MAURY <[email protected]>

---------

Signed-off-by: lstocchi <[email protected]>
Signed-off-by: Jeff MAURY <[email protected]>
Co-authored-by: Jeff MAURY <[email protected]>

Author: lstocchi

packages/frontend/src/lib/ContentDetailsLayout.svelte

@@ -8,33 +8,38 @@ const toggle = () => {
 };
 </script>
 
-<div class="grid w-full overflow-y-auto lg:grid-cols-[1fr_auto] max-lg:grid-cols-[auto]">
-  <div class="p-5 inline-grid">
-    <slot name="content" />
+<div class="flex flex-col w-full overflow-y-auto">
+  <div class="p-5">
+    <slot name="header" />
   </div>
-  <div class="inline-grid max-lg:order-first">
-    <div class="max-lg:w-full max-lg:min-w-full" class:w-[375px]="{open}" class:min-w-[375px]="{open}">
-      <div
-        class:hidden="{!open}"
-        class:block="{open}"
-        class="h-fit lg:bg-charcoal-800 lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
-        aria-label="{`${detailsLabel} panel`}">
-        <div class="flex flex-col px-4 space-y-4 mx-auto">
-          <div class="w-full flex flex-row justify-between max-lg:hidden">
-            <span class="text-base">{detailsTitle}</span>
-            <button on:click="{toggle}" aria-label="{`hide ${detailsLabel}`}"
-              ><i class="fas fa-angle-right text-gray-900"></i></button>
+  <div class="grid w-full lg:grid-cols-[1fr_auto] max-lg:grid-cols-[auto]">
+    <div class="p-5 inline-grid">
+      <slot name="content" />
+    </div>
+    <div class="inline-grid max-lg:order-first">
+      <div class="max-lg:w-full max-lg:min-w-full" class:w-[375px]="{open}" class:min-w-[375px]="{open}">
+        <div
+          class:hidden="{!open}"
+          class:block="{open}"
+          class="h-fit lg:bg-charcoal-800 lg:rounded-l-md lg:mt-5 lg:py-4 max-lg:block"
+          aria-label="{`${detailsLabel} panel`}">
+          <div class="flex flex-col px-4 space-y-4 mx-auto">
+            <div class="w-full flex flex-row justify-between max-lg:hidden">
+              <span class="text-base">{detailsTitle}</span>
+              <button on:click="{toggle}" aria-label="{`hide ${detailsLabel}`}"
+                ><i class="fas fa-angle-right text-gray-900"></i></button>
+            </div>
+            <slot name="details" />
           </div>
-          <slot name="details" />
         </div>
-      </div>
-      <div
-        class:hidden="{open}"
-        class:block="{!open}"
-        class="bg-charcoal-800 mt-5 p-4 rounded-md h-fit max-lg:hidden"
-        aria-label="{`toggle ${detailsLabel}`}">
-        <button on:click="{toggle}" aria-label="{`show ${detailsLabel}`}"
-          ><i class="fas fa-angle-left text-gray-900"></i></button>
+        <div
+          class:hidden="{open}"
+          class:block="{!open}"
+          class="bg-charcoal-800 mt-5 p-4 rounded-md h-fit max-lg:hidden"
+          aria-label="{`toggle ${detailsLabel}`}">
+          <button on:click="{toggle}" aria-label="{`show ${detailsLabel}`}"
+            ><i class="fas fa-angle-left text-gray-900"></i></button>
+        </div>
       </div>
     </div>
   </div>

packages/frontend/src/pages/Recipe.spec.ts

@@ -33,6 +33,7 @@ const mocks = vi.hoisted(() => {
     getApplicationsStateMock: vi.fn(),
     getLocalRepositoriesMock: vi.fn(),
     getTasksMock: vi.fn(),
+    getModelsInfo: vi.fn(),
   };
 });
 
@@ -62,6 +63,7 @@ vi.mock('../utils/client', async () => {
       pullApplication: mocks.pullApplicationMock,
       telemetryLogUsage: mocks.telemetryLogUsageMock,
       getApplicationsState: mocks.getApplicationsStateMock,
+      getModelsInfo: mocks.getModelsInfo,
     },
     rpcBrowser: {
       subscribe: () => {
@@ -179,6 +181,7 @@ test('should display recipe information', async () => {
   vi.mocked(catalogStore).catalog = readable<ApplicationCatalog>(initialCatalog);
   mocks.getApplicationsStateMock.mockResolvedValue([]);
   mocks.getPullingStatusesMock.mockResolvedValue([]);
+  mocks.getModelsInfo.mockResolvedValue([]);
   render(Recipe, {
     recipeId: 'recipe 1',
   });
@@ -192,6 +195,7 @@ test('should display updated recipe information', async () => {
   const customCatalog = writable<ApplicationCatalog>(initialCatalog);
   vi.mocked(catalogStore).catalog = customCatalog;
   mocks.getPullingStatusesMock.mockResolvedValue([]);
+  mocks.getModelsInfo.mockResolvedValue([]);
   render(Recipe, {
     recipeId: 'recipe 1',
   });
@@ -209,7 +213,7 @@ test('should send telemetry data', async () => {
   vi.mocked(catalogStore).catalog = readable<ApplicationCatalog>(initialCatalog);
   mocks.getPullingStatusesMock.mockResolvedValue([]);
   mocks.pullApplicationMock.mockResolvedValue(undefined);
-
+  mocks.getModelsInfo.mockResolvedValue([]);
   render(Recipe, {
     recipeId: 'recipe 1',
   });

packages/frontend/src/pages/Recipe.svelte

@@ -10,6 +10,10 @@ import RecipeModels from './RecipeModels.svelte';
 import { catalog } from '/@/stores/catalog';
 import RecipeDetails from '/@/lib/RecipeDetails.svelte';
 import ContentDetailsLayout from '../lib/ContentDetailsLayout.svelte';
+import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
+import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnectionStatusInfo.svelte';
+import { modelsInfo } from '../stores/modelsInfo';
+import { checkContainerConnectionStatus } from '../utils/connectionUtils';
 
 export let recipeId: string;
 
@@ -18,6 +22,12 @@ $: recipe = $catalog.recipes.find(r => r.id === recipeId);
 $: categories = $catalog.categories;
 let selectedModelId: string;
 $: selectedModelId = recipe?.models?.[0] ?? '';
+let connectionInfo: ContainerConnectionInfo | undefined;
+$: if ($modelsInfo && selectedModelId) {
+  checkContainerConnectionStatus($modelsInfo, selectedModelId, 'recipe')
+    .then(value => (connectionInfo = value))
+    .catch((e: unknown) => console.log(String(e)));
+}
 
 // Send recipe info to telemetry
 let recipeTelemetry: string | undefined = undefined;
@@ -44,6 +54,13 @@ function setSelectedModel(modelId: string) {
   </svelte:fragment>
   <svelte:fragment slot="content">
     <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
+      <svelte:fragment slot="header">
+        {#if connectionInfo}
+          <div class="mx-5">
+            <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
+          </div>
+        {/if}
+      </svelte:fragment>
       <svelte:fragment slot="content">
         <Route path="/">
           <MarkdownRenderer source="{recipe?.readme}" />