From b691b7fd8b74025afa11bffb3bd6787a7d63b28d Mon Sep 17 00:00:00 2001
From: lstocchi <lstocchi@redhat.com>
Date: Thu, 11 Apr 2024 16:43:48 +0200
Subject: [PATCH] feat: add warning to recipe page

Signed-off-by: lstocchi <lstocchi@redhat.com>
---
 .../src/lib/ContentDetailsLayout.svelte       | 55 ++++++++++---------
 packages/frontend/src/pages/Recipe.svelte     | 17 ++++++
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/packages/frontend/src/lib/ContentDetailsLayout.svelte b/packages/frontend/src/lib/ContentDetailsLayout.svelte
index 034f1967a..51bf2aa4c 100644
--- a/packages/frontend/src/lib/ContentDetailsLayout.svelte
+++ b/packages/frontend/src/lib/ContentDetailsLayout.svelte
@@ -8,34 +8,39 @@ 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>
-</div>
+</div>
\ No newline at end of file
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
index 30b423cd6..ef7072f0f 100644
--- a/packages/frontend/src/pages/Recipe.svelte
+++ b/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}" />