feat: adding model name column in service page (#541)

* feat: adding mode name column Signed-off-by: axel7083 <[email protected]> * test: ensuring the model name is displayed Signed-off-by: axel7083 <[email protected]> * fix: prettier Signed-off-by: axel7083 <[email protected]> * fix: Signed-off-by: axel7083 <[email protected]> * fix: prettier Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
containers · Mar 14, 2024 · ab5fbf8 · ab5fbf8
1 parent 039b7ca
commit ab5fbf8
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 1 deletion.
diff --git a/packages/frontend/src/lib/table/service/ServiceColumnModelName.spec.ts b/packages/frontend/src/lib/table/service/ServiceColumnModelName.spec.ts
@@ -0,0 +1,73 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import { expect, test, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import ServiceColumnModelName from '/@/lib/table/service/ServiceColumnModelName.svelte';
+import type { ModelInfo } from '@shared/src/models/IModelInfo';
+
+beforeEach(() => {
+  vi.resetAllMocks();
+});
+
+test('the model name should be displayed', async () => {
+  render(ServiceColumnModelName, {
+    object: {
+      health: undefined,
+      models: [
+        {
+          name: 'dummyName',
+        } as unknown as ModelInfo,
+      ],
+      connection: { port: 8888 },
+      status: 'running',
+      container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
+    },
+  });
+
+  const modelName = screen.getByText('dummyName');
+  expect(modelName).toBeDefined();
+  expect(modelName.localName).toBe('span');
+});
+
+test('multiple models name should be displayed as list', async () => {
+  render(ServiceColumnModelName, {
+    object: {
+      health: undefined,
+      models: [
+        {
+          name: 'dummyName-1',
+        } as unknown as ModelInfo,
+        {
+          name: 'dummyName-2',
+        } as unknown as ModelInfo,
+      ],
+      connection: { port: 8888 },
+      status: 'running',
+      container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
+    },
+  });
+
+  const model1Name = screen.getByText('dummyName-1');
+  expect(model1Name).toBeDefined();
+  expect(model1Name.localName).toBe('li');
+
+  const model2Name = screen.getByText('dummyName-2');
+  expect(model2Name).toBeDefined();
+  expect(model2Name.localName).toBe('li');
+});
diff --git a/packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte b/packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+import type { InferenceServer } from '@shared/src/models/IInference';
+export let object: InferenceServer;
+</script>
+
+{#if object.models.length === 1}
+  <span class="text-sm text-gray-700">
+    {object.models[0].name}
+  </span>
+{:else}
+  <ul>
+    {#each object.models as model}
+      <li class="text-sm text-gray-700">{model.name}</li>
+    {/each}
+  </ul>
+{/if}
diff --git a/packages/frontend/src/pages/InferenceServers.svelte b/packages/frontend/src/pages/InferenceServers.svelte
@@ -7,10 +7,12 @@ import Table from '/@/lib/table/Table.svelte';
 import { inferenceServers } from '/@/stores/inferenceServers';
 import ServiceStatus from '/@/lib/table/service/ServiceStatus.svelte';
 import ServiceAction from '/@/lib/table/service/ServiceAction.svelte';
+import ServiceColumnModelName from '/@/lib/table/service/ServiceColumnModelName.svelte';
 
 const columns: Column<InferenceServer>[] = [
   new Column<InferenceServer>('Status', { width: '50px', renderer: ServiceStatus, align: 'center' }),
-  new Column<InferenceServer>('Name', { width: '3fr', renderer: ServiceColumnName, align: 'center' }),
+  new Column<InferenceServer>('Name', { width: '1fr', renderer: ServiceColumnName, align: 'center' }),
+  new Column<InferenceServer>('Model', { width: '3fr', renderer: ServiceColumnModelName, align: 'center' }),
   new Column<InferenceServer>('Action', { width: '50px', renderer: ServiceAction, align: 'center' }),
 ];
 const row = new Row<InferenceServer>({});