fix: single sorted field, remove token

Author: hibig

src/components/seal-table/components/header.tsx

@@ -1,16 +1,17 @@
 import { Col, Row } from 'antd';
 import React from 'react';
-import { OnSortFn, SealColumnProps } from '../types';
+import { OnSortFn, SealColumnProps, TableOrder } from '../types';
 import TableHeader from './table-header';
 
 interface HeaderProps {
   columns: SealColumnProps[];
   sortDirections?: ('ascend' | 'descend' | null)[];
+  sorterList: TableOrder | Array<TableOrder>;
   onSort?: OnSortFn;
 }
 
 const Header: React.FC<HeaderProps> = (props) => {
-  const { onSort, sortDirections } = props;
+  const { onSort, sortDirections, sorterList } = props;
 
   return (
     <Row className="row">
@@ -31,6 +32,7 @@ const Header: React.FC<HeaderProps> = (props) => {
             <TableHeader
               onSort={onSort}
               sorter={sorter}
+              sorterList={sorterList}
               dataIndex={dataIndex}
               sortOrder={sortOrder}
               sortDirections={sortDirections}

src/components/seal-table/components/table-header.tsx

@@ -1,7 +1,7 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect } from 'react';
 import '../styles/header.less';
 
 import { TableHeaderProps } from '../types';
@@ -17,6 +17,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     sortDirections = ['ascend', 'descend', null],
     defaultSortOrder,
     onSort,
+    sorterList,
     sorter = false,
     width,
     dataIndex
@@ -47,6 +48,29 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     });
   };
 
+  useEffect(() => {
+    if (!sorterList) {
+      setCurrentSortOrder(null);
+      return;
+    }
+
+    if (Array.isArray(sorterList)) {
+      const sortItem = sorterList.find(
+        (item) => item.columnKey === dataIndex || item.field === dataIndex
+      );
+      setCurrentSortOrder(sortItem?.order || null);
+    } else {
+      if (
+        sorterList.columnKey === dataIndex ||
+        sorterList.field === dataIndex
+      ) {
+        setCurrentSortOrder(sorterList.order);
+      } else {
+        setCurrentSortOrder(null);
+      }
+    }
+  }, [sorterList]);
+
   return (
     <div
       style={{ width, ...style }}

src/components/seal-table/index.tsx

@@ -49,7 +49,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     loadChildren,
     loadChildrenAPI
   } = props;
-  const { handleOnTableSort } = useSorter({
+  const { handleOnTableSort, sorterList } = useSorter({
     onTableSort,
     columns
   });
@@ -166,6 +166,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
             onSort={handleOnTableSort}
             columns={parsedColumns}
             sortDirections={sortDirections}
+            sorterList={sorterList}
           ></Header>
         </div>
         <Spin spinning={loading}>

src/components/seal-table/types.ts

@@ -43,6 +43,7 @@ export interface SealColumnProps {
 }
 
 export interface TableHeaderProps {
+  sorterList?: TableOrder | Array<TableOrder>;
   sorter?: boolean | { multiple?: number };
   sortDirections?: ('ascend' | 'descend' | null)[];
   defaultSortOrder?: 'ascend' | 'descend' | null;

src/components/seal-table/use-sorter.ts

@@ -1,5 +1,5 @@
 import { isBoolean } from 'lodash';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { SealColumnProps, TableOrder } from './types';
 
 const initSorterList = (columns: SealColumnProps[]) => {
@@ -23,6 +23,9 @@ export default function useSorter(options: {
   const sorterListRef = useRef<TableOrder | Array<TableOrder>>(
     initSorterList(columns || [])
   );
+  const [sorterList, setSorterList] = useState<TableOrder | Array<TableOrder>>(
+    initSorterList(columns || [])
+  );
 
   const handleOnTableSort = (
     order: TableOrder,
@@ -39,6 +42,7 @@ export default function useSorter(options: {
     }
     // single column sort
     if (isBoolean(sorter)) {
+      setSorterList(currentOrder);
       sorterListRef.current = currentOrder;
 
       onTableSort?.(sorterListRef.current);
@@ -73,12 +77,14 @@ export default function useSorter(options: {
         }
       }
     }
+    setSorterList(sorterListRef.current);
 
     onTableSort?.(sorterListRef.current);
   };
 
   return {
     sorterListRef,
+    sorterList,
     handleOnTableSort
   };
 }

src/config/settings.ts

@@ -15,14 +15,18 @@ type SortDirection = 'ascend' | 'descend' | null;
 export const TABLE_SORT_DIRECTIONS: SortDirection[] = [
   'ascend',
   'descend',
-  null
+  'ascend'
 ];
 
 export const tableSorter = (order: number | boolean) => {
-  if (typeof order === 'number') {
-    return {
-      multiple: order
-    };
-  }
-  return order;
+  return true;
+
+  // mutiple sorting can be supported in future
+
+  // if (typeof order === 'number') {
+  //   return {
+  //     multiple: order
+  //   };
+  // }
+  // return order;
 };

src/pages/llmodels/components/deploy-builtin-modal.tsx

@@ -4,7 +4,7 @@ import { PageActionType } from '@/config/types';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { ClusterStatusValueMap } from '@/pages/cluster-management/config';
 import { useIntl } from '@umijs/max';
-import { Button } from 'antd';
+import { Button, message } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -96,13 +96,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const selectSpecRef = useRef<CatalogSpec>({} as CatalogSpec);
   const specListRef = useRef<any[]>([]);
   const noCompatibleGPUsRef = useRef<boolean>(false);
-  const [noCompatibleGPUs, setNoCompatibleGPUs] = useState<boolean>(false);
 
   const handleSumit = () => {
     form.current?.submit?.();
   };
 
   const handleSubmitAnyway = async () => {
+    if (noCompatibleGPUsRef.current) {
+      message.error(intl.formatMessage({ id: 'models.catalog.nogpus.tips' }));
+      return;
+    }
     submitAnyway.current = true;
     form.current?.submit?.();
   };
@@ -266,7 +269,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       // If no avaliable gpus for the model, show warning message
       if (!res.items.length) {
         noCompatibleGPUsRef.current = true;
-        setNoCompatibleGPUs(true);
         setWarningStatus({
           show: true,
           type: 'warning',
@@ -275,7 +277,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         return;
       }
       noCompatibleGPUsRef.current = false;
-      setNoCompatibleGPUs(false);
       handleCheckCompatibility(allValues);
     } catch (error) {
       // ignore
@@ -394,11 +395,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                   showOkBtn={!showExtraButton}
                   extra={
                     showExtraButton && (
-                      <Button
-                        type="primary"
-                        onClick={handleSubmitAnyway}
-                        disabled={noCompatibleGPUs}
-                      >
+                      <Button type="primary" onClick={handleSubmitAnyway}>
                         {intl.formatMessage({
                           id: 'models.form.submit.anyway'
                         })}

src/pages/llmodels/hooks/use-filter-status.tsx

@@ -38,7 +38,7 @@ const useFilterStatus = (options: {
     },
     {
       value: MyModelsStatusValueMap.Degrade,
-      color: 'var(--ant-color-error)',
+      color: 'var(--ant-color-warning)',
       label: intl.formatMessage({
         id: 'models.mymodels.status.degrade'
       })

src/pages/llmodels/user-models.tsx

@@ -81,7 +81,7 @@ const UserModels: React.FC = () => {
       },
       {
         value: MyModelsStatusValueMap.Degrade,
-        color: 'var(--ant-color-error)',
+        color: 'var(--ant-color-warning)',
         label: intl.formatMessage({
           id: 'models.mymodels.status.degrade'
         })

src/pages/resources/config/gpu-driver.ts

@@ -176,8 +176,7 @@ const setWorkerIPArg = (params: any) => {
 
 const setImageArgs = (params: any) => {
   return `${params.image} \\
-      --server-url ${params.server} \\
-      --token ${params.token} \\`;
+      --server-url ${params.server} \\`;
 };
 
 // avaliable for  NVIDIA、MThreads