style: add worker ux

src/pages/cluster-management/hooks/use-pools-columns.tsx

@@ -1,13 +1,13 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
+import { SealColumnProps } from '@/components/seal-table/types';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { ColumnsType } from 'antd/es/table';
 import type { SortOrder } from 'antd/es/table/interface';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useMemo } from 'react';
-import { RenderInstanceOption } from '../components/pool-form';
+import { RenderOption } from '../components/pool-form';
 import { NodePoolListItem as ListItem } from '../config/types';
 
 const actionItems = [
@@ -30,7 +30,7 @@ const actionItems = [
 const usePoolsColumns = (
   handleSelect: (val: string, record: ListItem) => void,
   sortOrder?: SortOrder
-): ColumnsType<ListItem & { dataIndex: string }> => {
+): SealColumnProps[] => {
   const intl = useIntl();
 
   return useMemo(() => {
@@ -66,7 +66,7 @@ const usePoolsColumns = (
         render: (text: string, record: ListItem) => (
           <AutoTooltip
             title={
-              <RenderInstanceOption
+              <RenderOption
                 styles={{
                   description: {
                     color: 'var(--color-white-quaternary)'
@@ -180,6 +180,7 @@ const usePoolsColumns = (
       {
         title: intl.formatMessage({ id: 'common.table.operation' }),
         key: 'operations',
+        dataIndex: 'operations',
         span: 3,
         style: {
           paddingLeft: 36

src/pages/cluster-management/hooks/use-provider-regions.ts

@@ -67,15 +67,19 @@ const formatSpec = (spec: ParsedSpec): string => {
 
   if (spec.vram) parts.push(`${spec.vram} VRAM`);
   if (spec.vcpus) parts.push(`${spec.vcpus} vCPUs`);
-  if (spec.bootDisk) parts.push(`${spec.bootDisk} Boot disk`);
   if (spec.ram) parts.push(`${spec.ram} RAM`);
-  if (spec.scratchDisk) {
-    parts.push(`${spec.scratchDisk} Scratch disk`);
-  }
+  // if (spec.bootDisk) parts.push(`${spec.bootDisk} Boot disk`);
+  // if (spec.scratchDisk) {
+  //   parts.push(`${spec.scratchDisk} Scratch disk`);
+  // }
 
   return parts.join(' / ');
 };
 
+const formatLabel = (instanceSpec: any): string => {
+  return `${_.toUpper(instanceSpec.gpu_info?.model.replace(/_/g, ' '))}`;
+};
+
 export const useProviderRegions = () => {
   const [regions, setRegions] = useAtom(regionListAtom);
   const [, setInstanceTypes] = useAtom(regionInstanceTypeListAtom);
@@ -119,10 +123,12 @@ export const useProviderRegions = () => {
         ?.filter((sItem: any) => sItem.gpu_info && sItem.available)
         .map((item: any) => {
           const specInfo = parseSpec(item);
+          const label = formatLabel(item);
+          const description = `${label} ${item.gpu_info?.count}X`;
           return {
-            label: formatSpec(specInfo),
+            label: `${description} - ${formatSpec(specInfo)}`,
             value: item.slug,
-            description: item.description,
+            description: description,
             specInfo: specInfo,
             vendor: _.get(_.split(item.gpu_info?.model, '_'), 0),
             available: item.available,
@@ -148,10 +154,7 @@ export const useProviderRegions = () => {
             name: item.name,
             description: item.description,
             vendor: _.camelCase(item.distribution),
-            specInfo: {
-              size: `${item.size_gigabytes} GiB`,
-              minDiskSize: `${item.min_disk_size} GiB`
-            },
+            specInfo: {},
             regions: item.regions || []
           };
         });