feat: adding create model service button in services page

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

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

@@ -18,9 +18,10 @@
 
 import '@testing-library/jest-dom/vitest';
 import { vi, test, expect, beforeEach } from 'vitest';
-import { screen, render } from '@testing-library/svelte';
+import { screen, render, fireEvent } from '@testing-library/svelte';
 import InferenceServers from '/@/pages/InferenceServers.svelte';
 import type { InferenceServer } from '@shared/src/models/IInference';
+import { router } from 'tinro';
 
 const mocks = vi.hoisted(() => ({
   inferenceServersSubscribeMock: vi.fn(),
@@ -73,3 +74,15 @@ test('store with inference server should display the table', async () => {
   const table = screen.getByRole('table');
   expect(table).toBeInTheDocument();
 });
+
+test('create service button should redirect to create page', async () => {
+  const gotoSpy = vi.spyOn(router, 'goto');
+  render(InferenceServers);
+  const createBtn = screen.getByTitle('Create a new model service');
+  expect(createBtn).toBeDefined();
+
+  await fireEvent.click(createBtn);
+  await vi.waitFor(() => {
+    expect(gotoSpy).toHaveBeenCalledWith('/service/create');
+  });
+});

packages/frontend/src/pages/InferenceServers.svelte

@@ -8,6 +8,8 @@ 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';
+import Button from '/@/lib/button/Button.svelte';
+import { router } from 'tinro';
 
 const columns: Column<InferenceServer>[] = [
   new Column<InferenceServer>('Status', { width: '50px', renderer: ServiceStatus, align: 'center' }),
@@ -19,9 +21,16 @@ const row = new Row<InferenceServer>({});
 
 let data: InferenceServer[];
 $: data = $inferenceServers;
+
+function createNewService() {
+  router.goto('/service/create');
+}
 </script>
 
 <NavPage title="Model Services" searchEnabled="{false}">
+  <svelte:fragment slot="additional-actions">
+    <Button title="Create a new model service" on:click="{() => createNewService()}">New Model Service</Button>
+  </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">