feat: make api port configurable (#1570)

Signed-off-by: Philippe Martin <phmartin@redhat.com>

Author: feloy

packages/backend/package.json

@@ -24,6 +24,13 @@
           "type": "boolean",
           "default": false,
           "description": "Experimental GPU support for inference servers"
+        },
+        "ai-lab.apiPort": {
+          "type": "number",
+          "default": 10434,
+          "minimum": 1024,
+          "maximum": 65535,
+          "description": "Port on which the API is listening (requires restart of extension)"
         }
       }
     },

packages/backend/src/managers/apiServer.spec.ts

@@ -17,14 +17,15 @@
  ***********************************************************************/
 
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
-import { ApiServer } from './apiServer';
+import { ApiServer, PREFERENCE_RANDOM_PORT } from './apiServer';
 import request from 'supertest';
 import type * as podmanDesktopApi from '@podman-desktop/api';
 import path from 'path';
 import type { Server } from 'http';
 import type { ModelsManager } from './modelsManager';
 import type { EventEmitter } from 'node:events';
 import { once } from 'node:events';
+import type { ConfigurationRegistry } from '../registries/ConfigurationRegistry';
 
 class TestApiServer extends ApiServer {
   public override getListener(): Server | undefined {
@@ -40,12 +41,20 @@ const modelsManager = {
   getModelsInfo: vi.fn(),
 } as unknown as ModelsManager;
 
+const configurationRegistry = {
+  getExtensionConfiguration: () => {
+    return {
+      apiPort: PREFERENCE_RANDOM_PORT,
+    };
+  },
+} as unknown as ConfigurationRegistry;
 beforeEach(async () => {
-  server = new TestApiServer(extensionContext, modelsManager);
+  server = new TestApiServer(extensionContext, modelsManager, configurationRegistry);
   vi.spyOn(server, 'displayApiInfo').mockReturnValue();
   vi.spyOn(server, 'getSpecFile').mockReturnValue(path.join(__dirname, '../../../../api/openapi.yaml'));
   vi.spyOn(server, 'getPackageFile').mockReturnValue(path.join(__dirname, '../../../../package.json'));
   await server.init();
+  await new Promise(resolve => setTimeout(resolve, 0)); // wait for random port to be set
 });
 
 afterEach(async () => {

packages/backend/src/managers/apiServer.ts

@@ -23,15 +23,18 @@ import type { Server } from 'http';
 import path from 'node:path';
 import http from 'node:http';
 import { existsSync } from 'fs';
-import { getFreeRandomPort } from '../utils/ports';
 import * as podmanDesktopApi from '@podman-desktop/api';
 import { readFile } from 'fs/promises';
 import type { ModelsManager } from './modelsManager';
 import type { components } from '../../src-generated/openapi';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import type { ConfigurationRegistry } from '../registries/ConfigurationRegistry';
+import { getFreeRandomPort } from '../utils/ports';
 
-const DEFAULT_PORT = 10434;
 const SHOW_API_INFO_COMMAND = 'ai-lab.show-api-info';
+const SHOW_API_ERROR_COMMAND = 'ai-lab.show-api-error';
+
+export const PREFERENCE_RANDOM_PORT = 0;
 
 type ListModelResponse = components['schemas']['ListModelResponse'];
 
@@ -52,6 +55,7 @@ export class ApiServer implements Disposable {
   constructor(
     private extensionContext: podmanDesktopApi.ExtensionContext,
     private modelsManager: ModelsManager,
+    private configurationRegistry: ConfigurationRegistry,
   ) {}
 
   protected getListener(): Server | undefined {
@@ -72,22 +76,25 @@ export class ApiServer implements Disposable {
     app.use('/spec', this.getSpec.bind(this));
 
     const server = http.createServer(app);
-    let listeningOn = DEFAULT_PORT;
+    let listeningOn = this.configurationRegistry.getExtensionConfiguration().apiPort;
     server.on('listening', () => {
       this.displayApiInfo(listeningOn);
     });
     server.on('error', () => {
+      this.displayApiError(listeningOn);
+    });
+    if (listeningOn === PREFERENCE_RANDOM_PORT) {
       getFreeRandomPort('0.0.0.0')
         .then((randomPort: number) => {
-          console.warn(`port ${DEFAULT_PORT} in use, using ${randomPort} for API server`);
           listeningOn = randomPort;
-          this.#listener = server.listen(randomPort);
+          this.#listener = server.listen(listeningOn);
         })
         .catch((e: unknown) => {
           console.error('unable to get a free port for the api server', e);
         });
-    });
-    this.#listener = server.listen(DEFAULT_PORT);
+    } else {
+      this.#listener = server.listen(listeningOn);
+    }
   }
 
   displayApiInfo(port: number): void {
@@ -111,6 +118,23 @@ export class ApiServer implements Disposable {
     apiStatusBarItem.show();
   }
 
+  displayApiError(port: number): void {
+    const apiStatusBarItem = podmanDesktopApi.window.createStatusBarItem();
+    apiStatusBarItem.text = `AI Lab API listening error`;
+    apiStatusBarItem.command = SHOW_API_ERROR_COMMAND;
+    this.extensionContext.subscriptions.push(
+      podmanDesktopApi.commands.registerCommand(SHOW_API_ERROR_COMMAND, async () => {
+        const address = `http://localhost:${port}`;
+        await podmanDesktopApi.window.showErrorMessage(
+          `AI Lab API failed to listen on\n${address}\nYou can change the port in the Preferences then restart the extension.`,
+          'OK',
+        );
+      }),
+      apiStatusBarItem,
+    );
+    apiStatusBarItem.show();
+  }
+
   private getFile(filepath: string): string {
     // when plugin is installed, the file is placed in the plugin directory (~/.local/share/containers/podman-desktop/plugins/<pluginname>/)
     const prodFile = path.join(__dirname, filepath);

packages/backend/src/registries/ConfigurationRegistry.ts

@@ -21,7 +21,9 @@ import type { ExtensionConfiguration } from '@shared/src/models/IExtensionConfig
 import { Messages } from '@shared/Messages';
 import path from 'node:path';
 
-const CONFIGURATION_SECTIONS: string[] = ['ai-lab.models.path', 'ai-lab.experimentalGPU'];
+const CONFIGURATION_SECTIONS: string[] = ['ai-lab.models.path', 'ai-lab.experimentalGPU', 'ai-lab.apiPort'];
+
+const API_PORT_DEFAULT = 10434;
 
 export class ConfigurationRegistry extends Publisher<ExtensionConfiguration> implements Disposable {
   #configuration: Configuration;
@@ -40,6 +42,7 @@ export class ConfigurationRegistry extends Publisher<ExtensionConfiguration> imp
     return {
       modelsPath: this.getModelsPath(),
       experimentalGPU: this.#configuration.get<boolean>('experimentalGPU') ?? false,
+      apiPort: this.#configuration.get<number>('apiPort') ?? API_PORT_DEFAULT,
     };
   }
 

packages/backend/src/studio.ts

@@ -328,7 +328,7 @@ export class Studio {
     // Register the instance
     this.#rpcExtension.registerInstance<StudioApiImpl>(StudioApiImpl, this.#studioApi);
 
-    const apiServer = new ApiServer(this.#extensionContext, this.#modelsManager);
+    const apiServer = new ApiServer(this.#extensionContext, this.#modelsManager, this.#configurationRegistry);
     await apiServer.init();
     this.#extensionContext.subscriptions.push(apiServer);
   }

packages/backend/src/workers/provider/LlamaCppPython.spec.ts

@@ -95,6 +95,7 @@ beforeEach(() => {
   vi.mocked(configurationRegistry.getExtensionConfiguration).mockReturnValue({
     experimentalGPU: false,
     modelsPath: 'model-path',
+    apiPort: 10434,
   });
   vi.mocked(podmanConnection.findRunningContainerProviderConnection).mockReturnValue(dummyConnection);
   vi.mocked(podmanConnection.getContainerProviderConnection).mockReturnValue(dummyConnection);
@@ -271,6 +272,7 @@ describe('perform', () => {
     vi.mocked(configurationRegistry.getExtensionConfiguration).mockReturnValue({
       experimentalGPU: true,
       modelsPath: '',
+      apiPort: 10434,
     });
 
     vi.mocked(gpuManager.collectGPUs).mockResolvedValue([
@@ -300,6 +302,7 @@ describe('perform', () => {
     vi.mocked(configurationRegistry.getExtensionConfiguration).mockReturnValue({
       experimentalGPU: true,
       modelsPath: '',
+      apiPort: 10434,
     });
 
     vi.mocked(gpuManager.collectGPUs).mockResolvedValue([
@@ -331,6 +334,7 @@ describe('perform', () => {
     vi.mocked(configurationRegistry.getExtensionConfiguration).mockReturnValue({
       experimentalGPU: true,
       modelsPath: '',
+      apiPort: 10434,
     });
 
     vi.mocked(gpuManager.collectGPUs).mockResolvedValue([

packages/shared/src/models/IExtensionConfiguration.ts

@@ -19,4 +19,5 @@
 export interface ExtensionConfiguration {
   experimentalGPU: boolean;
   modelsPath: string;
+  apiPort: number;
 }