feat(FR-1944): support 'tt-n300' accel. in the session launcher (#5105)

Resolves #5100 ([FR-1944](https://lablup.atlassian.net/browse/FR-1944))

# Add support for Tenstorrent TT-N300 accelerator

This PR adds support for the Tenstorrent TT-N300 accelerator device to [Backend.AI](http://Backend.AI). The implementation includes:

- Adding a new device type `tt-n300.device` to the known accelerator resource slot names
- Creating a new Tenstorrent icon component and SVG asset
- Adding device metadata for the TT-N300 with appropriate display settings
- Updating resource broker components to recognize and handle the new device type
- Adding the device to the client-side resource tracking

Test: [session launcher url](http://127.0.0.1:9081/session/start?formValues=%7B%22sessionType%22%3A%22interactive%22%2C%22sessionName%22%3A%22%22%2C%22bootstrap_script%22%3A%22%22%2C%22environments%22%3A%7B%22environment%22%3A%22cr.backend.ai%2Ftesting%2Ffilebrowser%22%2C%22version%22%3A%22cr.backend.ai%2Ftesting%2Ffilebrowser%3A22.03-ubuntu20.04%40x86_64%22%2C%22manual%22%3A%22%22%7D%2C%22resourceGroup%22%3A%22tt%22%2C%22allocationPreset%22%3A%22custom%22%2C%22resource%22%3A%7B%22cpu%22%3A1%2C%22mem%22%3A%220.3125g%22%2C%22shmem%22%3A%2264m%22%2C%22accelerator%22%3A1%2C%22acceleratorType%22%3A%22tt-n300.device%22%7D%2C%22enabledAutomaticShmem%22%3Atrue%2C%22num_of_sessions%22%3A1%2C%22cluster_mode%22%3A%22single-node%22%2C%22cluster_size%22%3A1%2C%22hpcOptimization%22%3A%7B%22autoEnabled%22%3Atrue%7D%2C%22mount_id_map%22%3A%7B%7D%2C%22vfoldersNameMap%22%3A%7B%7D%2C%22mount_ids%22%3A%5B%5D%2C%22ports%22%3A%5B%5D%2C%22agent%22%3A%22auto%22%2C%22envvars%22%3A%5B%5D%7D&step=4)

![image.png](https://app.graphite.com/user-attachments/assets/7d276584-7ea5-4df2-98ec-fd409787cccd.png)

![image.png](https://app.graphite.com/user-attachments/assets/9206e4cf-397e-40c0-8818-2a439ed2f39a.png)

**Checklist:**

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-1944]: https://lablup.atlassian.net/browse/FR-1944?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: agatha197

.cspell.json

@@ -29,7 +29,6 @@
     "backendaiwebui",
     "baseversion",
     "Blocklist",
-    "inactivelist",
     "cooldown",
     "cssinjs",
     "cuda",
@@ -43,6 +42,7 @@
     "Gaudi",
     "hoverable",
     "Hyperaccel",
+    "inactivelist",
     "inmemory",
     "keypair",
     "Keypairs",
@@ -65,6 +65,7 @@
     "superadmin",
     "Talkativot",
     "Tensorboard",
+    "tenstorrent",
     "textbox",
     "Totp",
     "upsert",

packages/backend.ai-ui/src/components/BAIResourceNumberWithIcon.stories.tsx

@@ -126,6 +126,15 @@ const mockDeviceMetaData: DeviceMetaData = {
     number_format: { binary: false, round_length: 0 },
     display_icon: 'hyperaccel',
   },
+  // TT-N300
+  'tt-n300.device': {
+    slot_name: 'tt-n300.device',
+    description: 'Tenstorrent TT-N300',
+    human_readable_name: 'TT-N300',
+    display_unit: 'TT-N300',
+    number_format: { binary: false, round_length: 0 },
+    display_icon: 'tenstorrent',
+  },
 };
 
 const meta: Meta<typeof BAIResourceNumberWithIcon> = {
@@ -317,6 +326,11 @@ export const ResourceTypes: Story = {
         <span style={{ width: 160 }}>Hyperaccel LPU:</span>
         <BAIResourceNumberWithIcon type="hyperaccel-lpu.device" value="4" />
       </BAIFlex>
+      {/* Tenstorrent */}
+      <BAIFlex gap="sm" align="center">
+        <span style={{ width: 160 }}>Tenstorrent TT-N300:</span>
+        <BAIResourceNumberWithIcon type="tt-n300.device" value="2" />
+      </BAIFlex>
     </BAIFlex>
   ),
 };

packages/backend.ai-ui/src/components/BAIResourceNumberWithIcon.tsx

@@ -5,6 +5,7 @@ import BAIGaudiIcon from '../icons/BAIGaudiIcon';
 import BAIIpuIcon from '../icons/BAIIpuIcon';
 import BAIRebelIcon from '../icons/BAIRebelIcon';
 import BAIRocmIcon from '../icons/BAIRocmIcon';
+import BAITenstorrentIcon from '../icons/BAITenstorrentIcon';
 import BAITpuIcon from '../icons/BAITpuIcon';
 import BAIFlex from './BAIFlex';
 import NumberWithUnit from './BAINumberWithUnit';
@@ -118,6 +119,7 @@ const knownDeviceIcons = {
   nvidia: <BAINvidiaIcon />,
   rocm: <BAIRocmIcon />,
   rebel: <BAIRebelIcon />,
+  tenstorrent: <BAITenstorrentIcon />,
 } as const;
 
 interface ResourceTypeIconProps {

packages/backend.ai-ui/src/components/provider/BAIMetaDataProvider/types.ts

@@ -19,6 +19,7 @@ export const knownAcceleratorResourceSlotNames = [
   'warboy.device',
   'rngd.device',
   'hyperaccel-lpu.device',
+  'tt-n300.device',
 ] as const;
 export type KnownAcceleratorResourceSlotName =
   (typeof knownAcceleratorResourceSlotNames)[number];

packages/backend.ai-ui/src/icons/BAITenstorrentIcon.tsx

@@ -0,0 +1,17 @@
+import { default as logo } from './tenstorrent.svg?react';
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface BAITenstorrentIconProps
+  extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {
+  'aria-label'?: string;
+}
+
+const BAITenstorrentIcon: React.FC<BAITenstorrentIconProps> = ({
+  'aria-label': ariaLabel = 'tenstorrent',
+  ...props
+}) => {
+  return <Icon component={logo} aria-label={ariaLabel} {...props} />;
+};
+
+export default BAITenstorrentIcon;

packages/backend.ai-ui/src/icons/tenstorrent.svg

@@ -78,6 +78,7 @@ const resourcesSlots: {
   'warboy.device': 'warboy',
   'rngd.device': 'rngd',
   'hyperaccel-lpu.device': 'hyperaccel_lpu',
+  'tt-n300.device': 'tt_n300',
 };
 
 const ConfigurationsSettingList = () => {

react/src/components/ConfigurationsSettingList.tsx

@@ -32,6 +32,7 @@ export const knownAcceleratorResourceSlotNames = [
   'warboy.device',
   'rngd.device',
   'hyperaccel-lpu.device',
+  'tt-n300.device',
 ] as const;
 export type KnownAcceleratorResourceSlotName =
   (typeof knownAcceleratorResourceSlotNames)[number];

react/src/hooks/backendai.tsx

@@ -154,6 +154,17 @@
         "round_length": 0
       },
       "display_icon": "lpu"
+    },
+    "tt-n300.device": {
+      "slot_name": "tt-n300.device",
+      "description": "Tenstorrent N300",
+      "human_readable_name": "Tenstorrent N300 Device",
+      "display_unit": "N300",
+      "number_format": {
+        "binary": false,
+        "round_length": 0
+      },
+      "display_icon": "tenstorrent"
     }
   }
 }

resources/device_metadata.json

@@ -4027,6 +4027,9 @@ class Resources {
     this.resources['hyperaccel-lpu.device'] = {};
     this.resources['hyperaccel-lpu.device'].total = 0;
     this.resources['hyperaccel-lpu.device'].used = 0;
+    this.resources['tt-n300.device'] = {};
+    this.resources['tt-n300.device'].total = 0;
+    this.resources['tt-n300.device'].used = 0;
 
     this.resources.agents = {};
     this.resources.agents.total = 0;
@@ -4212,6 +4215,16 @@ class Resources {
                 parseInt(this.resources['hyperaccel-lpu.device'].used) +
                 Math.floor(Number(occupied_slots['hyperaccel-lpu.device']));
             }
+            if ('tt-n300.device' in available_slots) {
+              this.resources['tt-n300.device'].total =
+                parseInt(this.resources['tt-n300.device'].total) +
+                Math.floor(Number(available_slots['tt-n300.device']));
+            }
+            if ('tt-n300.device' in occupied_slots) {
+              this.resources['tt-n300.device'].used =
+                parseInt(this.resources['tt-n300.device'].used) +
+                Math.floor(Number(occupied_slots['tt-n300.device']));
+            }
 
             if (isNaN(this.resources.cpu.used)) {
               this.resources.cpu.used = 0;