fix: single sorted field, remove token
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
};
|
||||
}
|
||||
|
||||
+11
-7
@@ -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;
|
||||
};
|
||||
|
||||
@@ -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'
|
||||
})}
|
||||
|
||||
@@ -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'
|
||||
})
|
||||
|
||||
@@ -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'
|
||||
})
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user