fix: single sorted field, remove token
This commit is contained in:
@@ -1,16 +1,17 @@
|
|||||||
import { Col, Row } from 'antd';
|
import { Col, Row } from 'antd';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { OnSortFn, SealColumnProps } from '../types';
|
import { OnSortFn, SealColumnProps, TableOrder } from '../types';
|
||||||
import TableHeader from './table-header';
|
import TableHeader from './table-header';
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
columns: SealColumnProps[];
|
columns: SealColumnProps[];
|
||||||
sortDirections?: ('ascend' | 'descend' | null)[];
|
sortDirections?: ('ascend' | 'descend' | null)[];
|
||||||
|
sorterList: TableOrder | Array<TableOrder>;
|
||||||
onSort?: OnSortFn;
|
onSort?: OnSortFn;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Header: React.FC<HeaderProps> = (props) => {
|
const Header: React.FC<HeaderProps> = (props) => {
|
||||||
const { onSort, sortDirections } = props;
|
const { onSort, sortDirections, sorterList } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row className="row">
|
<Row className="row">
|
||||||
@@ -31,6 +32,7 @@ const Header: React.FC<HeaderProps> = (props) => {
|
|||||||
<TableHeader
|
<TableHeader
|
||||||
onSort={onSort}
|
onSort={onSort}
|
||||||
sorter={sorter}
|
sorter={sorter}
|
||||||
|
sorterList={sorterList}
|
||||||
dataIndex={dataIndex}
|
dataIndex={dataIndex}
|
||||||
sortOrder={sortOrder}
|
sortOrder={sortOrder}
|
||||||
sortDirections={sortDirections}
|
sortDirections={sortDirections}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import AutoTooltip from '@/components/auto-tooltip';
|
import AutoTooltip from '@/components/auto-tooltip';
|
||||||
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
|
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import React from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import '../styles/header.less';
|
import '../styles/header.less';
|
||||||
|
|
||||||
import { TableHeaderProps } from '../types';
|
import { TableHeaderProps } from '../types';
|
||||||
@@ -17,6 +17,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
|
|||||||
sortDirections = ['ascend', 'descend', null],
|
sortDirections = ['ascend', 'descend', null],
|
||||||
defaultSortOrder,
|
defaultSortOrder,
|
||||||
onSort,
|
onSort,
|
||||||
|
sorterList,
|
||||||
sorter = false,
|
sorter = false,
|
||||||
width,
|
width,
|
||||||
dataIndex
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{ width, ...style }}
|
style={{ width, ...style }}
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
|
|||||||
loadChildren,
|
loadChildren,
|
||||||
loadChildrenAPI
|
loadChildrenAPI
|
||||||
} = props;
|
} = props;
|
||||||
const { handleOnTableSort } = useSorter({
|
const { handleOnTableSort, sorterList } = useSorter({
|
||||||
onTableSort,
|
onTableSort,
|
||||||
columns
|
columns
|
||||||
});
|
});
|
||||||
@@ -166,6 +166,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
|
|||||||
onSort={handleOnTableSort}
|
onSort={handleOnTableSort}
|
||||||
columns={parsedColumns}
|
columns={parsedColumns}
|
||||||
sortDirections={sortDirections}
|
sortDirections={sortDirections}
|
||||||
|
sorterList={sorterList}
|
||||||
></Header>
|
></Header>
|
||||||
</div>
|
</div>
|
||||||
<Spin spinning={loading}>
|
<Spin spinning={loading}>
|
||||||
|
|||||||
@@ -43,6 +43,7 @@ export interface SealColumnProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface TableHeaderProps {
|
export interface TableHeaderProps {
|
||||||
|
sorterList?: TableOrder | Array<TableOrder>;
|
||||||
sorter?: boolean | { multiple?: number };
|
sorter?: boolean | { multiple?: number };
|
||||||
sortDirections?: ('ascend' | 'descend' | null)[];
|
sortDirections?: ('ascend' | 'descend' | null)[];
|
||||||
defaultSortOrder?: 'ascend' | 'descend' | null;
|
defaultSortOrder?: 'ascend' | 'descend' | null;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { isBoolean } from 'lodash';
|
import { isBoolean } from 'lodash';
|
||||||
import { useRef } from 'react';
|
import { useRef, useState } from 'react';
|
||||||
import { SealColumnProps, TableOrder } from './types';
|
import { SealColumnProps, TableOrder } from './types';
|
||||||
|
|
||||||
const initSorterList = (columns: SealColumnProps[]) => {
|
const initSorterList = (columns: SealColumnProps[]) => {
|
||||||
@@ -23,6 +23,9 @@ export default function useSorter(options: {
|
|||||||
const sorterListRef = useRef<TableOrder | Array<TableOrder>>(
|
const sorterListRef = useRef<TableOrder | Array<TableOrder>>(
|
||||||
initSorterList(columns || [])
|
initSorterList(columns || [])
|
||||||
);
|
);
|
||||||
|
const [sorterList, setSorterList] = useState<TableOrder | Array<TableOrder>>(
|
||||||
|
initSorterList(columns || [])
|
||||||
|
);
|
||||||
|
|
||||||
const handleOnTableSort = (
|
const handleOnTableSort = (
|
||||||
order: TableOrder,
|
order: TableOrder,
|
||||||
@@ -39,6 +42,7 @@ export default function useSorter(options: {
|
|||||||
}
|
}
|
||||||
// single column sort
|
// single column sort
|
||||||
if (isBoolean(sorter)) {
|
if (isBoolean(sorter)) {
|
||||||
|
setSorterList(currentOrder);
|
||||||
sorterListRef.current = currentOrder;
|
sorterListRef.current = currentOrder;
|
||||||
|
|
||||||
onTableSort?.(sorterListRef.current);
|
onTableSort?.(sorterListRef.current);
|
||||||
@@ -73,12 +77,14 @@ export default function useSorter(options: {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
setSorterList(sorterListRef.current);
|
||||||
|
|
||||||
onTableSort?.(sorterListRef.current);
|
onTableSort?.(sorterListRef.current);
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
sorterListRef,
|
sorterListRef,
|
||||||
|
sorterList,
|
||||||
handleOnTableSort
|
handleOnTableSort
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
+11
-7
@@ -15,14 +15,18 @@ type SortDirection = 'ascend' | 'descend' | null;
|
|||||||
export const TABLE_SORT_DIRECTIONS: SortDirection[] = [
|
export const TABLE_SORT_DIRECTIONS: SortDirection[] = [
|
||||||
'ascend',
|
'ascend',
|
||||||
'descend',
|
'descend',
|
||||||
null
|
'ascend'
|
||||||
];
|
];
|
||||||
|
|
||||||
export const tableSorter = (order: number | boolean) => {
|
export const tableSorter = (order: number | boolean) => {
|
||||||
if (typeof order === 'number') {
|
return true;
|
||||||
return {
|
|
||||||
multiple: order
|
// mutiple sorting can be supported in future
|
||||||
};
|
|
||||||
}
|
// if (typeof order === 'number') {
|
||||||
return order;
|
// return {
|
||||||
|
// multiple: order
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// return order;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { PageActionType } from '@/config/types';
|
|||||||
import { createAxiosToken } from '@/hooks/use-chunk-request';
|
import { createAxiosToken } from '@/hooks/use-chunk-request';
|
||||||
import { ClusterStatusValueMap } from '@/pages/cluster-management/config';
|
import { ClusterStatusValueMap } from '@/pages/cluster-management/config';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Button } from 'antd';
|
import { Button, message } from 'antd';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
@@ -96,13 +96,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
|||||||
const selectSpecRef = useRef<CatalogSpec>({} as CatalogSpec);
|
const selectSpecRef = useRef<CatalogSpec>({} as CatalogSpec);
|
||||||
const specListRef = useRef<any[]>([]);
|
const specListRef = useRef<any[]>([]);
|
||||||
const noCompatibleGPUsRef = useRef<boolean>(false);
|
const noCompatibleGPUsRef = useRef<boolean>(false);
|
||||||
const [noCompatibleGPUs, setNoCompatibleGPUs] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const handleSumit = () => {
|
const handleSumit = () => {
|
||||||
form.current?.submit?.();
|
form.current?.submit?.();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmitAnyway = async () => {
|
const handleSubmitAnyway = async () => {
|
||||||
|
if (noCompatibleGPUsRef.current) {
|
||||||
|
message.error(intl.formatMessage({ id: 'models.catalog.nogpus.tips' }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
submitAnyway.current = true;
|
submitAnyway.current = true;
|
||||||
form.current?.submit?.();
|
form.current?.submit?.();
|
||||||
};
|
};
|
||||||
@@ -266,7 +269,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
|||||||
// If no avaliable gpus for the model, show warning message
|
// If no avaliable gpus for the model, show warning message
|
||||||
if (!res.items.length) {
|
if (!res.items.length) {
|
||||||
noCompatibleGPUsRef.current = true;
|
noCompatibleGPUsRef.current = true;
|
||||||
setNoCompatibleGPUs(true);
|
|
||||||
setWarningStatus({
|
setWarningStatus({
|
||||||
show: true,
|
show: true,
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
@@ -275,7 +277,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
noCompatibleGPUsRef.current = false;
|
noCompatibleGPUsRef.current = false;
|
||||||
setNoCompatibleGPUs(false);
|
|
||||||
handleCheckCompatibility(allValues);
|
handleCheckCompatibility(allValues);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// ignore
|
// ignore
|
||||||
@@ -394,11 +395,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
|||||||
showOkBtn={!showExtraButton}
|
showOkBtn={!showExtraButton}
|
||||||
extra={
|
extra={
|
||||||
showExtraButton && (
|
showExtraButton && (
|
||||||
<Button
|
<Button type="primary" onClick={handleSubmitAnyway}>
|
||||||
type="primary"
|
|
||||||
onClick={handleSubmitAnyway}
|
|
||||||
disabled={noCompatibleGPUs}
|
|
||||||
>
|
|
||||||
{intl.formatMessage({
|
{intl.formatMessage({
|
||||||
id: 'models.form.submit.anyway'
|
id: 'models.form.submit.anyway'
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ const useFilterStatus = (options: {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: MyModelsStatusValueMap.Degrade,
|
value: MyModelsStatusValueMap.Degrade,
|
||||||
color: 'var(--ant-color-error)',
|
color: 'var(--ant-color-warning)',
|
||||||
label: intl.formatMessage({
|
label: intl.formatMessage({
|
||||||
id: 'models.mymodels.status.degrade'
|
id: 'models.mymodels.status.degrade'
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ const UserModels: React.FC = () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: MyModelsStatusValueMap.Degrade,
|
value: MyModelsStatusValueMap.Degrade,
|
||||||
color: 'var(--ant-color-error)',
|
color: 'var(--ant-color-warning)',
|
||||||
label: intl.formatMessage({
|
label: intl.formatMessage({
|
||||||
id: 'models.mymodels.status.degrade'
|
id: 'models.mymodels.status.degrade'
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -176,8 +176,7 @@ const setWorkerIPArg = (params: any) => {
|
|||||||
|
|
||||||
const setImageArgs = (params: any) => {
|
const setImageArgs = (params: any) => {
|
||||||
return `${params.image} \\
|
return `${params.image} \\
|
||||||
--server-url ${params.server} \\
|
--server-url ${params.server} \\`;
|
||||||
--token ${params.token} \\`;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// avaliable for NVIDIA、MThreads
|
// avaliable for NVIDIA、MThreads
|
||||||
|
|||||||
Reference in New Issue
Block a user