style: hidden expand button when no replicas
This commit is contained in:
@@ -3,3 +3,7 @@ node_modules
|
|||||||
.umi-production
|
.umi-production
|
||||||
public/static/*.js
|
public/static/*.js
|
||||||
public/static/*.css
|
public/static/*.css
|
||||||
|
src/components/icon-font/iconfont/iconfont.js
|
||||||
|
src/components/icon-font/iconfont/*.css
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -104,7 +104,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
|
|||||||
{children}
|
{children}
|
||||||
</TitleTip>
|
</TitleTip>
|
||||||
) : (
|
) : (
|
||||||
''
|
false
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{...tooltipProps}
|
{...tooltipProps}
|
||||||
|
|||||||
@@ -1,13 +1,26 @@
|
|||||||
import IconFont from '@/components/icon-font';
|
import IconFont from '@/components/icon-font';
|
||||||
import { Button, Checkbox } from 'antd';
|
import { Button, Checkbox } from 'antd';
|
||||||
|
import classNames from 'classnames';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React from 'react';
|
import React, { useMemo } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
const ButtonWrapper = styled.div`
|
||||||
|
width: 30px;
|
||||||
|
margin-right: 5px;
|
||||||
|
&.disable-expand {
|
||||||
|
.ant-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
interface RowPrefixProps {
|
interface RowPrefixProps {
|
||||||
expandable?: boolean | React.ReactNode;
|
expandable?: boolean | React.ReactNode;
|
||||||
enableSelection?: boolean;
|
enableSelection?: boolean;
|
||||||
expanded?: boolean;
|
expanded?: boolean;
|
||||||
checked?: boolean;
|
checked?: boolean;
|
||||||
|
disableExpand?: boolean;
|
||||||
handleRowExpand?: () => void;
|
handleRowExpand?: () => void;
|
||||||
handleSelectChange?: (e: any) => void;
|
handleSelectChange?: (e: any) => void;
|
||||||
}
|
}
|
||||||
@@ -18,26 +31,33 @@ const RowPrefix: React.FC<RowPrefixProps> = (props) => {
|
|||||||
enableSelection,
|
enableSelection,
|
||||||
expanded,
|
expanded,
|
||||||
checked,
|
checked,
|
||||||
|
disableExpand,
|
||||||
handleRowExpand,
|
handleRowExpand,
|
||||||
handleSelectChange
|
handleSelectChange
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const isExpanded = useMemo(() => {
|
||||||
|
return expanded;
|
||||||
|
}, [expanded]);
|
||||||
|
|
||||||
if (expandable && enableSelection) {
|
if (expandable && enableSelection) {
|
||||||
return (
|
return (
|
||||||
<div className="row-prefix-wrapper">
|
<div className="row-prefix-wrapper">
|
||||||
<span style={{ marginRight: 5 }}>
|
<ButtonWrapper
|
||||||
|
className={classNames({ 'disable-expand': disableExpand })}
|
||||||
|
>
|
||||||
{_.isBoolean(expandable) ? (
|
{_.isBoolean(expandable) ? (
|
||||||
<Button type="text" size="small" onClick={handleRowExpand}>
|
<Button type="text" size="small" onClick={handleRowExpand}>
|
||||||
<IconFont
|
<IconFont
|
||||||
type="icon-down"
|
type="icon-down"
|
||||||
rotate={expanded ? 0 : -90}
|
rotate={isExpanded ? 0 : -90}
|
||||||
className="size-14"
|
className="size-14"
|
||||||
></IconFont>
|
></IconFont>
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
expandable
|
expandable
|
||||||
)}
|
)}
|
||||||
</span>
|
</ButtonWrapper>
|
||||||
<Checkbox onChange={handleSelectChange} checked={checked}></Checkbox>
|
<Checkbox onChange={handleSelectChange} checked={checked}></Checkbox>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -45,17 +65,26 @@ const RowPrefix: React.FC<RowPrefixProps> = (props) => {
|
|||||||
if (expandable) {
|
if (expandable) {
|
||||||
return (
|
return (
|
||||||
<div className="row-prefix-wrapper">
|
<div className="row-prefix-wrapper">
|
||||||
{_.isBoolean(expandable) ? (
|
<ButtonWrapper
|
||||||
<Button type="text" size="small" onClick={handleRowExpand}>
|
className={classNames({ 'disable-expand': disableExpand })}
|
||||||
<IconFont
|
>
|
||||||
type="icon-down"
|
{_.isBoolean(expandable) ? (
|
||||||
rotate={expanded ? 0 : -90}
|
<Button
|
||||||
className="size-14"
|
type="text"
|
||||||
></IconFont>
|
size="small"
|
||||||
</Button>
|
onClick={handleRowExpand}
|
||||||
) : (
|
disabled={disableExpand}
|
||||||
expandable
|
>
|
||||||
)}
|
<IconFont
|
||||||
|
type="icon-down"
|
||||||
|
rotate={isExpanded ? 0 : -90}
|
||||||
|
className="size-14"
|
||||||
|
></IconFont>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
expandable
|
||||||
|
)}
|
||||||
|
</ButtonWrapper>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -42,6 +42,7 @@ const TableRow: React.FC<
|
|||||||
const tableContext: any = React.useContext<{
|
const tableContext: any = React.useContext<{
|
||||||
allChildren?: any[];
|
allChildren?: any[];
|
||||||
allSubChildren?: any[];
|
allSubChildren?: any[];
|
||||||
|
setDisableExpand?: (record: any) => boolean;
|
||||||
}>(TableContext);
|
}>(TableContext);
|
||||||
const { setChunkRequest } = useSetChunkRequest();
|
const { setChunkRequest } = useSetChunkRequest();
|
||||||
const [childrenData, setChildrenData] = useState<any[]>([]);
|
const [childrenData, setChildrenData] = useState<any[]>([]);
|
||||||
@@ -206,6 +207,10 @@ const TableRow: React.FC<
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const disableExpand = useMemo(() => {
|
||||||
|
return tableContext.setDisableExpand?.(record);
|
||||||
|
}, [tableContext.setDisableExpand, record]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleVisibilityChange = async () => {
|
const handleVisibilityChange = async () => {
|
||||||
if (document.visibilityState === 'hidden') {
|
if (document.visibilityState === 'hidden') {
|
||||||
@@ -249,6 +254,7 @@ const TableRow: React.FC<
|
|||||||
checked={checked}
|
checked={checked}
|
||||||
handleRowExpand={handleRowExpand}
|
handleRowExpand={handleRowExpand}
|
||||||
handleSelectChange={handleSelectChange}
|
handleSelectChange={handleSelectChange}
|
||||||
|
disableExpand={disableExpand}
|
||||||
></RowPrefix>
|
></RowPrefix>
|
||||||
<Row className="seal-table-row">
|
<Row className="seal-table-row">
|
||||||
{columns?.map((columnProps) => {
|
{columns?.map((columnProps) => {
|
||||||
|
|||||||
+1
-1
@@ -828,7 +828,7 @@ body {
|
|||||||
|
|
||||||
.ant-tooltip-content {
|
.ant-tooltip-content {
|
||||||
.ant-tooltip-inner {
|
.ant-tooltip-inner {
|
||||||
width: max-content;
|
width: fit-content;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
|
|
||||||
.text-tertiary {
|
.text-tertiary {
|
||||||
|
|||||||
@@ -64,7 +64,8 @@ export default {
|
|||||||
'Non-GGUF models use vox-box for audio and vLLM(x86 Linux only) for others.',
|
'Non-GGUF models use vox-box for audio and vLLM(x86 Linux only) for others.',
|
||||||
'models.search.voxbox.tips':
|
'models.search.voxbox.tips':
|
||||||
'To deploy an audio model, uncheck the checkbox.',
|
'To deploy an audio model, uncheck the checkbox.',
|
||||||
'models.form.ollamalink': 'Find More in Ollama Library',
|
'models.form.ollamalink':
|
||||||
|
'Find More in <a href="https://www.ollama.com/library" target="_blank">Ollama Library</a>.',
|
||||||
'models.form.backend_parameters.llamabox.placeholder':
|
'models.form.backend_parameters.llamabox.placeholder':
|
||||||
'e.g., --ctx-size=8192',
|
'e.g., --ctx-size=8192',
|
||||||
'models.form.backend_parameters.vllm.placeholder':
|
'models.form.backend_parameters.vllm.placeholder':
|
||||||
|
|||||||
@@ -64,7 +64,8 @@ export default {
|
|||||||
'非GGUFモデルは、音声にはvox-boxを、その他にはvLLM(x86 Linuxのみ)を使用します。',
|
'非GGUFモデルは、音声にはvox-boxを、その他にはvLLM(x86 Linuxのみ)を使用します。',
|
||||||
'models.search.voxbox.tips':
|
'models.search.voxbox.tips':
|
||||||
'音声モデルをデプロイするには、GGUFチェックボックスをオフにしてください。',
|
'音声モデルをデプロイするには、GGUFチェックボックスをオフにしてください。',
|
||||||
'models.form.ollamalink': 'Ollamaライブラリでさらに探す',
|
'models.form.ollamalink':
|
||||||
|
'<a href="https://www.ollama.com/library" target="_blank">Ollama</a>ライブラリでさらに探す',
|
||||||
'models.form.backend_parameters.llamabox.placeholder': '例: --ctx-size=8192',
|
'models.form.backend_parameters.llamabox.placeholder': '例: --ctx-size=8192',
|
||||||
'models.form.backend_parameters.vllm.placeholder': '例: --max-model-len=8192',
|
'models.form.backend_parameters.vllm.placeholder': '例: --max-model-len=8192',
|
||||||
'models.form.backend_parameters.vllm.tips': '詳細な{backend}パラメータ情報',
|
'models.form.backend_parameters.vllm.tips': '詳細な{backend}パラメータ情報',
|
||||||
|
|||||||
@@ -64,7 +64,8 @@ export default {
|
|||||||
'Не-GGUF модели используют vox-box для аудио и vLLM (только x86 Linux) для остальных.',
|
'Не-GGUF модели используют vox-box для аудио и vLLM (только x86 Linux) для остальных.',
|
||||||
'models.search.voxbox.tips':
|
'models.search.voxbox.tips':
|
||||||
'Для развертывания аудиомодели снимите отметку GGUF.',
|
'Для развертывания аудиомодели снимите отметку GGUF.',
|
||||||
'models.form.ollamalink': 'Больше моделей в библиотеке Ollama',
|
'models.form.ollamalink':
|
||||||
|
'Больше моделей в библиотеке <a href="https://www.ollama.com/library" target="_blank">Ollama</a>',
|
||||||
'models.form.backend_parameters.llamabox.placeholder':
|
'models.form.backend_parameters.llamabox.placeholder':
|
||||||
'например: --ctx-size=8192',
|
'например: --ctx-size=8192',
|
||||||
'models.form.backend_parameters.vllm.placeholder':
|
'models.form.backend_parameters.vllm.placeholder':
|
||||||
|
|||||||
@@ -64,7 +64,8 @@ export default {
|
|||||||
'models.search.vllm.tips':
|
'models.search.vllm.tips':
|
||||||
' 非 GGUF 的语音模型用 vox-box,其它非 GGUF 的模型用 vLLM(仅支持 x86 Linux)。',
|
' 非 GGUF 的语音模型用 vox-box,其它非 GGUF 的模型用 vLLM(仅支持 x86 Linux)。',
|
||||||
'models.search.voxbox.tips': '若需部署语音模型取消勾选。',
|
'models.search.voxbox.tips': '若需部署语音模型取消勾选。',
|
||||||
'models.form.ollamalink': '在 Ollama Library 中查找',
|
'models.form.ollamalink':
|
||||||
|
'在 <a href="https://www.ollama.com/library" target="_blank">Ollama Library</a> 中查找',
|
||||||
'models.form.backend_parameters.llamabox.placeholder':
|
'models.form.backend_parameters.llamabox.placeholder':
|
||||||
'例如,--ctx-size=8192',
|
'例如,--ctx-size=8192',
|
||||||
'models.form.backend_parameters.vllm.placeholder':
|
'models.form.backend_parameters.vllm.placeholder':
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import IconFont from '@/components/icon-font';
|
|
||||||
import SealAutoComplete from '@/components/seal-form/auto-complete';
|
import SealAutoComplete from '@/components/seal-form/auto-complete';
|
||||||
import useAppUtils from '@/hooks/use-app-utils';
|
import useAppUtils from '@/hooks/use-app-utils';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Form, Typography } from 'antd';
|
import { Form } from 'antd';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { modelSourceMap, ollamaModelOptions } from '../config';
|
import { modelSourceMap, ollamaModelOptions } from '../config';
|
||||||
import { useFormContext, useFormInnerContext } from '../config/form-context';
|
import { useFormContext, useFormInnerContext } from '../config/form-context';
|
||||||
@@ -50,21 +49,11 @@ const OllamaForm: React.FC = () => {
|
|||||||
onSelect={handleModelNameChange}
|
onSelect={handleModelNameChange}
|
||||||
onBlur={handleOnBlur}
|
onBlur={handleOnBlur}
|
||||||
description={
|
description={
|
||||||
<span>
|
<span
|
||||||
<span>
|
dangerouslySetInnerHTML={{
|
||||||
{intl.formatMessage({ id: 'models.form.ollamalink' })}
|
__html: intl.formatMessage({ id: 'models.form.ollamalink' })
|
||||||
</span>
|
}}
|
||||||
<Typography.Link
|
></span>
|
||||||
className="flex-center"
|
|
||||||
href="https://www.ollama.com/library"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<IconFont
|
|
||||||
type="icon-external-link"
|
|
||||||
className="font-size-14"
|
|
||||||
></IconFont>
|
|
||||||
</Typography.Link>
|
|
||||||
</span>
|
|
||||||
}
|
}
|
||||||
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
|
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
|
||||||
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
|
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
|
||||||
|
|||||||
@@ -389,6 +389,10 @@ const Models: React.FC = () => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const setDisableExpand = useCallback((record: any) => {
|
||||||
|
return !record?.replicas;
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleVisibilityChange = async () => {
|
const handleVisibilityChange = async () => {
|
||||||
if (document.visibilityState === 'visible') {
|
if (document.visibilityState === 'visible') {
|
||||||
@@ -419,7 +423,8 @@ const Models: React.FC = () => {
|
|||||||
return (
|
return (
|
||||||
<TableContext.Provider
|
<TableContext.Provider
|
||||||
value={{
|
value={{
|
||||||
allChildren: modelInstances
|
allChildren: modelInstances,
|
||||||
|
setDisableExpand: setDisableExpand
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TableList
|
<TableList
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.code-pre {
|
.code-pre {
|
||||||
white-space: pre-line;
|
white-space: pre-line !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-radio-button-wrapper {
|
.ant-radio-button-wrapper {
|
||||||
|
|||||||
Reference in New Issue
Block a user