root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: custom table sort

Browse Source
This commit is contained in:
jialin
2024-07-16 18:13:34 +08:00
parent a27fa9d56c
commit b05595f84b
8 changed files with 127 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-table/components/table-header.tsx
+42 -3
View File
@@ -1,10 +1,30 @@
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import React from 'react';
import '../styles/header.less';
import { TableHeaderProps } from '../types';
const TableHeader: React.FC<TableHeaderProps> = (props) => {
const { title, style, align, firstCell, lastCell } = props;
const {
title,
style,
align,
firstCell,
lastCell,
sortOrder,
onSort,
sorter,
dataIndex,
defaultSortOrder
} = props;
const handleOnSort = () => {
if (sortOrder === 'ascend') {
onSort?.(dataIndex, 'descend');
} else {
onSort?.(dataIndex, 'ascend');
}
};
return (
<div
style={{ ...style }}
@@ -13,10 +33,29 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
'table-header-center': align === 'center',
'table-header-right': align === 'right',
'table-header-first': firstCell,
'table-header-last': lastCell
'table-header-last': lastCell,
'table-header-sorter': sorter
})}
>
<div className="table-header-cell">{title}</div>
{sorter ? (
<span className="sorter-header" onClick={handleOnSort}>
<span className="table-header-cell">{title}</span>
<span className="sorter">
<CaretUpOutlined
className={classNames('sorter-up', {
'sorter-active': sortOrder === 'ascend'
})}
></CaretUpOutlined>
<CaretDownOutlined
className={classNames('sorter-down', {
'sorter-active': sortOrder === 'descend'
})}
></CaretDownOutlined>
</span>
</span>
) : (
<div className="table-header-cell">{title}</div>
)}
</div>
);
};
src/components/seal-table/index.tsx
+16 -2
View File
@@ -24,6 +24,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
rowKey,
childParentKey,
onExpand,
onSort,
expandedRowKeys,
loading,
expandable,
@@ -117,12 +118,25 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
<Row className="row">
{React.Children.map(props.children, (child, i) => {
const { props: columnProps } = child as any;
const { title, align, span, headerStyle } =
columnProps as SealColumnProps;
const {
title,
dataIndex,
align,
span,
headerStyle,
sortOrder,
sorter,
defaultSortOrder
} = columnProps as SealColumnProps;
if (React.isValidElement(child)) {
return (
<Col span={span} key={i}>
<TableHeader
onSort={onSort}
sorter={sorter}
dataIndex={dataIndex}
sortOrder={sortOrder}
defaultSortOrder={defaultSortOrder}
title={title}
style={headerStyle}
firstCell={i === 0}
src/components/seal-table/styles/header.less
+41
View File
@@ -1,4 +1,5 @@
.table-header {
min-height: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
@@ -8,16 +9,56 @@
&-last {
border-right: none;
}
&-cell {
font-weight: 600;
}
&-left {
justify-content: flex-start;
}
&-right {
justify-content: flex-end;
}
&-center {
justify-content: center;
}
.sorter-header {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
cursor: pointer;
.sorter {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 4px;
.anticon {
font-size: 10px;
color: rgba(0, 0, 0, 29%);
}
.sorter-up {
margin-bottom: -0.125em;
}
.sorter-down {
margin-top: -0.125em;
}
.sorter-active {
color: var(--ant-color-primary);
.anticon {
color: var(--ant-color-primary);
}
}
}
}
}
src/components/seal-table/types.ts
+9
View File
@@ -8,9 +8,17 @@ export interface SealColumnProps {
span: number;
align?: 'left' | 'center' | 'right';
headerStyle?: React.CSSProperties;
sorter?: boolean;
defaultSortOrder?: 'ascend' | 'descend';
sortOrder?: 'ascend' | 'descend' | null;
}
export interface TableHeaderProps {
sorter?: boolean;
defaultSortOrder?: 'ascend' | 'descend';
sortOrder?: 'ascend' | 'descend' | null;
dataIndex: string;
onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
children?: React.ReactNode;
title: string;
style?: React.CSSProperties;
@@ -34,6 +42,7 @@ export interface SealTableProps {
pollingChildren?: boolean;
watchChildren?: boolean;
loading?: boolean;
onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
renderChildren?: (data: any) => React.ReactNode;
loadChildren?: (record: any) => Promise<any[]>;
src/global.less
+6 -1
View File
@@ -32,7 +32,7 @@ html {
--ant-color-fill-secondary: rgba(0, 0, 0, 6%);
--table-td-radius: 8px;
--checkbox-border-radius: 4px;
--ant-table-cell-padding-inline: 8px;
--ant-table-cell-padding-inline: 16px;
--ant-table-cell-padding-block: 8px;
--ant-table-header-border-radius: 8px;
--ant-table-header-split-color: #f0f0f0;
@@ -149,6 +149,11 @@ body {
display: none;
}
.ant-slider:hover .ant-slider-handle::after {
box-shadow: 0 0 0 var(--ant-slider-handle-line-width)
var(--ant-slider-track-hover-bg);
}
.ant-select-selector {
.ant-select-selection-item {
font-weight: var(--font-weight-normal);
src/pages/llmodels/components/table-list.tsx
+6 -6
View File
@@ -110,9 +110,9 @@ const Models: React.FC<ModelsProps> = ({
});
};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
console.log('handleTableChange=======', pagination, filters, sorter);
setSortOrder(sorter.order);
const handleOnSort = (dataIndex: string, order: any) => {
console.log('handleTableChange=======', dataIndex, order);
setSortOrder(order);
};
const handleAddModal = () => {
@@ -326,7 +326,7 @@ const Models: React.FC<ModelsProps> = ({
rowKey="id"
childParentKey="model_id"
expandable={true}
onChange={handleTableChange}
onSort={handleOnSort}
pollingChildren={false}
watchChildren={true}
loadChildren={getModelInstances}
@@ -384,8 +384,7 @@ const Models: React.FC<ModelsProps> = ({
key="created_at"
defaultSortOrder="descend"
sortOrder={sortOrder}
showSorterTooltip={false}
sorter={true}
sorter={false}
render={(text, row) => {
return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
}}
@@ -394,6 +393,7 @@ const Models: React.FC<ModelsProps> = ({
span={4}
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
dataIndex="operation"
render={(text, record) => {
return !record.transition ? (
<DropdownButtons
src/pages/playground/components/view-code-modal.tsx
+6 -5
View File
@@ -31,7 +31,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const [codeValue, setCodeValue] = useState('');
const [lang, setLang] = useState('shell');
const BaseURL = `${window.location.origin}/v1-openai/chat/completions`;
const BaseURL = `${window.location.origin}/v1-openai`;
const langOptions = [
{ label: 'Curl', value: 'shell' },
@@ -69,14 +69,14 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `import OpenAI from "openai";\nconst openai = new OpenAI();\n\nconst baseURL = "${BaseURL}"\n\nasync function main(){\nconst params = ${JSON.stringify(
const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": $\{GUPSTACK_API_KEY},\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify(
{
...parameters,
messages: [...systemList, ...messageList]
},
null,
2
)};\nconst chatCompletion = await openai.chat.completions.create(params);\nfor await (const chunk of chatCompletion) {\n process.stdout.write(chunk.choices[0]?.delta?.content || '');\n}\n}\nmain();`;
)};\nconst chatCompletion = await openai.chat.completions.create(params);\nfor await (const chunk of chatCompletion) {\n process.stdout.write(chunk.choices[0]?.message?.content || '');\n}\n}\nmain();`;
setCodeValue(code);
} else if (lang === 'python') {
const formattedParams = _.keys(parameters).reduce(
@@ -95,7 +95,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `from openai import OpenAI\nclient = OpenAI()\n\nbaseURL = ${BaseURL}\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message)`;
const code = `from openai import OpenAI\n\nbaseURL = ${BaseURL}\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="$\{GUPSTACK_API_KEY}"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message.content)`;
setCodeValue(code);
}
formatCode();
@@ -118,9 +118,10 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
minimap: {
enabled: false
},
readOnly: true,
formatOnType: true,
formatOnPaste: true,
fontWeight: '700',
fontWeight: 700,
scrollbar: {
verticalSliderSize: 8
}
src/pages/resources/components/gpus.tsx
+1 -1
View File
@@ -137,7 +137,7 @@ const GPUList: React.FC = () => {
dataIndex="temperature"
key="Temperature"
render={(text, record: GPUDeviceItem) => {
return <span>{_.round(text, 1)}</span>;
return <span>{text ? _.round(text, 1) : '-'}</span>;
}}
/>
<Column