From 27091ff1996cffa52a5fb7791b6b9e69354d4f1f Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Mon, 27 May 2024 10:45:33 +0200
Subject: [PATCH] feat: improve inference server details page (#1113)

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
---
 .../lib/table/service/ServiceAction.spec.ts   | 17 +++++++
 .../lib/table/service/ServiceAction.svelte    | 17 +++++--
 .../src/pages/InferenceServerDetails.spec.ts  | 27 ++++++++++-
 .../src/pages/InferenceServerDetails.svelte   | 48 +++++++++++--------
 4 files changed, 86 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/lib/table/service/ServiceAction.spec.ts b/packages/frontend/src/lib/table/service/ServiceAction.spec.ts
index c5b3604ea..b2ff0bd53 100644
--- a/packages/frontend/src/lib/table/service/ServiceAction.spec.ts
+++ b/packages/frontend/src/lib/table/service/ServiceAction.spec.ts
@@ -131,3 +131,20 @@ test('should be disabled on transition', async () => {
   const deleteBtn = screen.getByTitle('Delete service');
   expect(deleteBtn.classList).toContain('text-gray-900');
 });
+
+test('should have background on details', async () => {
+  render(ServiceAction, {
+    object: {
+      health: undefined,
+      models: [],
+      connection: { port: 8888 },
+      status: 'stopped',
+      container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
+    },
+    detailed: true,
+  });
+
+  const startBtn = screen.getByTitle('Start service');
+  expect(startBtn.classList).toContain('bg-charcoal-800');
+  expect(startBtn.classList).toContain('rounded-lg');
+});
diff --git a/packages/frontend/src/lib/table/service/ServiceAction.svelte b/packages/frontend/src/lib/table/service/ServiceAction.svelte
index 0b4a00cf1..457fec493 100644
--- a/packages/frontend/src/lib/table/service/ServiceAction.svelte
+++ b/packages/frontend/src/lib/table/service/ServiceAction.svelte
@@ -4,6 +4,7 @@ import { studioClient } from '/@/utils/client';
 import { faPlay, faStop, faTrash } from '@fortawesome/free-solid-svg-icons';
 import ListItemButtonIcon from '/@/lib/button/ListItemButtonIcon.svelte';
 export let object: InferenceServer;
+export let detailed: boolean = false;
 
 function stopInferenceServer() {
   studioClient.stopInferenceServer(object.container.containerId).catch((err: unknown) => {
@@ -30,8 +31,18 @@ $: {
 </script>
 
 {#if object.status === 'running'}
-  <ListItemButtonIcon icon="{faStop}" onClick="{stopInferenceServer}" title="Stop service" />
+  <ListItemButtonIcon detailed="{detailed}" icon="{faStop}" onClick="{stopInferenceServer}" title="Stop service" />
 {:else}
-  <ListItemButtonIcon enabled="{!loading}" icon="{faPlay}" onClick="{startInferenceServer}" title="Start service" />
+  <ListItemButtonIcon
+    detailed="{detailed}"
+    enabled="{!loading}"
+    icon="{faPlay}"
+    onClick="{startInferenceServer}"
+    title="Start service" />
 {/if}
-<ListItemButtonIcon enabled="{!loading}" icon="{faTrash}" onClick="{deleteInferenceServer}" title="Delete service" />
+<ListItemButtonIcon
+  detailed="{detailed}"
+  enabled="{!loading}"
+  icon="{faTrash}"
+  onClick="{deleteInferenceServer}"
+  title="Delete service" />
diff --git a/packages/frontend/src/pages/InferenceServerDetails.spec.ts b/packages/frontend/src/pages/InferenceServerDetails.spec.ts
index 732bdc126..ee9591c7e 100644
--- a/packages/frontend/src/pages/InferenceServerDetails.spec.ts
+++ b/packages/frontend/src/pages/InferenceServerDetails.spec.ts
@@ -24,6 +24,7 @@ import InferenceServerDetails from '/@/pages/InferenceServerDetails.svelte';
 import type { Language } from 'postman-code-generators';
 import { studioClient } from '/@/utils/client';
 import { router } from 'tinro';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
 
 const mocks = vi.hoisted(() => {
   return {
@@ -99,7 +100,12 @@ beforeEach(() => {
         Log: [],
         FailingStreak: 0,
       },
-      models: [],
+      models: [
+        {
+          id: 'dummyModelId',
+          name: 'Dummy model id',
+        } as unknown as ModelInfo,
+      ],
       connection: { port: 9999 },
       status: 'running',
       container: {
@@ -181,3 +187,22 @@ test('copy snippet should call copyToClipboard', async () => {
     expect(studioClient.copyToClipboard).toHaveBeenCalledWith('dummy generated snippet');
   });
 });
+
+test('ensure dummyContainerId is visible', async () => {
+  render(InferenceServerDetails, {
+    containerId: 'dummyContainerId',
+  });
+
+  const span = screen.getByText('dummyContainerId');
+  expect(span).toBeDefined();
+});
+
+test('ensure models to be clickable', async () => {
+  render(InferenceServerDetails, {
+    containerId: 'dummyContainerId',
+  });
+
+  const a = screen.getByText('Dummy model id');
+  expect(a).toBeDefined();
+  expect(a.getAttribute('href')).toBe('/model/dummyModelId');
+});
diff --git a/packages/frontend/src/pages/InferenceServerDetails.svelte b/packages/frontend/src/pages/InferenceServerDetails.svelte
index 76ebefb97..88d111bbd 100644
--- a/packages/frontend/src/pages/InferenceServerDetails.svelte
+++ b/packages/frontend/src/pages/InferenceServerDetails.svelte
@@ -12,6 +12,7 @@ import { studioClient } from '/@/utils/client';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
 import Button from '/@/lib/button/Button.svelte';
+import Badge from '/@/lib/Badge.svelte';
 
 export let containerId: string | undefined = undefined;
 
@@ -118,35 +119,44 @@ onMount(() => {
 });
 </script>
 
-<NavPage lastPage="{{ name: 'Model Services', path: '/services' }}" title="Service Details" searchEnabled="{false}">
+<NavPage lastPage="{{ name: 'Model Services', path: '/services' }}" title="Service details" searchEnabled="{false}">
+  <svelte:fragment slot="icon">
+    <div class="mr-3">
+      {#if service !== undefined}
+        <ServiceStatus object="{service}" />
+      {/if}
+    </div>
+  </svelte:fragment>
+  <svelte:fragment slot="subtitle">
+    <div class="flex gap-x-2 items-center">
+      {#if service}
+        <span class="text-xs">{service.container.containerId}</span>
+        {#each service.models as model}
+          <Badge icon="{faMicrochip}" content="{model.hw}" background="bg-charcoal-700" />
+        {/each}
+      {/if}
+    </div>
+  </svelte:fragment>
+  <svelte:fragment slot="additional-actions">
+    {#if service !== undefined}
+      <ServiceAction detailed object="{service}" />
+    {/if}
+  </svelte:fragment>
   <svelte:fragment slot="content">
     <div slot="content" class="flex flex-col min-w-full min-h-full">
       <div class="min-w-full min-h-full flex-1">
         <div class="mt-4 px-5 space-y-5">
           {#if service !== undefined}
-            <!-- container details -->
+            <!-- models info -->
             <div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4">
-              <!-- container info -->
-              <span class="text-sm">Container</span>
-              <div class="w-full bg-charcoal-600 rounded-md p-2 flex items-center">
-                <div class="grow ml-2 flex flex-row">
-                  {#key service.health?.Status}
-                    <ServiceStatus object="{service}" />
-                  {/key}
-                  <div class="flex flex-col text-xs ml-2 items-center justify-center">
-                    <span>{service.container.containerId}</span>
-                  </div>
-                </div>
-                <ServiceAction object="{service}" />
-              </div>
-
-              <!-- models info -->
-              <div class="mt-4">
+              <div>
                 <span class="text-sm">Models</span>
                 <div class="w-full bg-charcoal-600 rounded-md p-2 flex flex-col gap-y-4">
                   {#each service.models as model}
                     <div class="flex flex-row gap-2 items-center">
-                      <div class="grow text-sm">{model.name}</div>
+                      <div class="grow text-sm" aria-label="Model name">
+                        <a href="/model/{model.id}">{model.name}</a>
+                      </div>
                       <div>
                         <div
                           class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">