style: distribution info table word wrap

src/components/simple-table/index.tsx

@@ -10,6 +10,7 @@ export interface ColumnProps {
   title: string;
   key: string;
   width?: string | number;
+  style?: React.CSSProperties;
   render?: (data: {
     dataIndex: string;
     dataList?: any[];

src/components/simple-table/row.tsx

@@ -52,7 +52,7 @@ const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
         dataList: dataList
       })}
     >
-      <span className="cell-span">
+      <span className="cell-span" style={column.style}>
         {column.render
           ? column.render({
               dataIndex: column.key,

src/pages/llmodels/components/instance-item.tsx

@@ -287,7 +287,10 @@ const renderGpuIndexs = (gpuIndexes: number[]) => {
 const distributeCols: ColumnProps[] = [
   {
     title: 'Worker',
-    key: 'worker_name'
+    key: 'worker_name',
+    style: {
+      wordBreak: 'break-word'
+    }
   },
   {
     title: 'IP',
@@ -301,13 +304,14 @@ const distributeCols: ColumnProps[] = [
     locale: true,
     key: 'gpu_index',
     render: ({ row }) => {
+      const list = _.sortBy(row.gpu_index, (item: number) => item);
       return row.is_main ? (
         <>
-          {renderGpuIndexs(row.gpu_index)}
+          {renderGpuIndexs(list)}
           <span>(main)</span>
         </>
       ) : (
-        renderGpuIndexs(row.gpu_index)
+        renderGpuIndexs(list)
       );
     }
   },