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

style: view instance logs

Browse Source
This commit is contained in:
jialin
2024-12-26 12:15:12 +08:00
parent 00c9ef47e9
commit 972ee69fac
10 changed files with 83 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/copy-button/index.tsx
+14 -1
View File
@@ -11,6 +11,15 @@ type CopyButtonProps = {
type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
size?: 'small' | 'middle' | 'large';
shape?: 'circle' | 'round' | 'default';
placement?:
| 'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight';
style?: React.CSSProperties;
};
@@ -21,6 +30,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
shape = 'default',
fontSize = '14px',
style,
placement,
size = 'middle'
}) => {
const intl = useIntl();
@@ -55,7 +65,10 @@ const CopyButton: React.FC<CopyButtonProps> = ({
}, [buttonRef]);
return (
<Tooltip title={intl.formatMessage({ id: 'common.button.copy' })}>
<Tooltip
title={intl.formatMessage({ id: 'common.button.copy' })}
placement={placement}
>
<Button
className="copy-button"
ref={buttonRef}
src/components/icon-font/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_fabphdpng0n.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_hdf3t88r4j.js'
});
export default IconFont;
src/components/status-tag/copy.less
+12 -8
View File
@@ -1,8 +1,10 @@
:local(.status-content-wrapper) {
// padding-top: 24px;
&:hover {
:global(.copy-button-wrapper) {
display: block;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
}
@@ -12,13 +14,10 @@
background-color: #383838;
position: absolute;
z-index: 10;
right: 0;
right: -28px;
top: 0;
border-radius: 0 8px 0 4px;
}
.simplebar-scrollbar::before {
background: var(--color-scroll-bg);
padding: 2px;
border-radius: 4px;
}
.simplebar-content {
@@ -26,3 +25,8 @@
}
}
}
.simplebar-scrollbar::before {
background: var(--color-scroll-bg);
width: var(--scrollbar-size);
}
src/components/status-tag/index.tsx
+33 -2
View File
@@ -1,9 +1,9 @@
import { StatusColorMap } from '@/config';
import { StatusType } from '@/config/types';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { Button, Divider, Tooltip } from 'antd';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import CopyButton from '../copy-button';
@@ -28,11 +28,19 @@ type StatusTagProps = {
download?: {
percent: number;
};
actions?: {
label: string;
icon?: React.ReactNode;
key: string;
onClick?: () => void;
render?: () => React.ReactNode;
}[];
};
const StatusTag: React.FC<StatusTagProps> = ({
statusValue,
download,
actions = [],
type = 'tag'
}) => {
const { text, status } = statusValue;
@@ -70,7 +78,30 @@ const StatusTag: React.FC<StatusTagProps> = ({
style={{ color: 'rgba(255,255,255,.8)' }}
text={statusValue.message || ''}
size="small"
placement="right"
></CopyButton>
{actions?.map((item) => {
return (
<>
<Divider
style={{
marginBlock: 5,
borderColor: 'rgba(255,255,255,.5)'
}}
/>
<Tooltip title={item.label} key={item.key} placement="right">
<Button
size="small"
type="text"
style={{ color: 'rgba(255,255,255,.8)', padding: 1 }}
onClick={item.onClick}
>
<span className="font-size-14">{item.icon}</span>
</Button>
</Tooltip>
</>
);
})}
</div>
<SimpleBar style={{ maxHeight: 200 }}>
src/locales/en-US/models.ts
+1 -1
View File
@@ -85,6 +85,6 @@ export default {
'vLLM: For non-GGUF format models, supports x86 Linux only.',
'models.form.backend.voxbox': 'vox-box: For non-GGUF format audio models.',
'models.form.search.gguftips':
'Check GGUF on Mac and Windows (uncheck for seaching audio models).',
'If using Mac or Windows as a worker, check GGUF (uncheck for audio models).',
'models.form.button.addlabel': 'Add Label'
};
src/locales/zh-CN/models.ts
+1 -1
View File
@@ -81,6 +81,6 @@ export default {
'models.form.backend.vllm': 'vLLM: 用于非 GGUF 格式模型，仅支持 x86 Linux',
'models.form.backend.voxbox': 'vox-box: 用于非 GGUF 格式的音频模型',
'models.form.search.gguftips':
'在 Mac 和 Windows 上勾选 GGUF（搜索音频模型时取消勾选）。',
'当 Mac 或 Windows 作 worker 时勾选 GGUF（搜索音频模型时取消勾选）',
'models.form.button.addlabel': '添加标签'
};
src/pages/llmodels/components/instance-item.tsx
+16 -2
View File
@@ -10,7 +10,6 @@ import {
} from '@/pages/resources/config/types';
import {
DeleteOutlined,
FieldTimeOutlined,
HddFilled,
InfoCircleOutlined,
ThunderboltFilled
@@ -72,7 +71,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
InstanceStatusMap.Error,
InstanceStatusMap.Downloading
],
icon: <FieldTimeOutlined />
icon: <IconFont type="icon-logs" />
},
{
label: 'common.button.delrecreate',
@@ -260,6 +259,21 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
>
{item.state && (
<StatusTag
actions={
item.state === InstanceStatusMap.Error
? [
{
label: intl.formatMessage({
id: 'common.button.viewlog'
}),
key: 'viewlog',
icon: <IconFont type="icon-logs" />,
onClick: () =>
handleChildSelect('viewlog', item, list)
}
]
: []
}
download={
item.state === InstanceStatusMap.Downloading
? { percent: item.download_progress }
src/pages/llmodels/components/view-logs-modal.tsx
+1
View File
@@ -66,6 +66,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
</span>
</span>
}
zIndex={3000}
open={open}
centered={true}
onCancel={handleCancel}
src/pages/llmodels/style/column-wrapper.less
+1 -2
View File
@@ -1,18 +1,17 @@
.column-wrapper {
flex: 1;
position: relative;
// border-left: 1px solid var(--ant-color-split);
}
.simplebar-scrollbar::before {
width: var(--scrollbar-size);
background: var(--scrollbar-handle-bg);
}
.column-wrapper-footer {
flex: 1;
display: flex;
position: relative;
// border-left: 1px solid var(--ant-color-split);
.column-wrapper {
border-left: none;
src/pages/llmodels/style/search-result.less
+3 -6
View File
@@ -4,14 +4,12 @@
background-color: rgba(255, 255, 255, 100%);
padding: 16px @padding;
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
// overflow-y: auto;
// height: calc(100vh - 194px);
}
.gguf-tips {
display: flex;
align-items: center;
padding: 8px 0;
padding: 7px 0;
color: var(--ant-color-text-tertiary);
.warning {
@@ -24,14 +22,13 @@
right: 0;
padding-inline: @padding;
background: var(--color-white-1);
// border-bottom: 1px solid var(--ant-color-split);
padding-bottom: 16px;
padding-bottom: 10px;
.filter {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
margin-top: 10px;
color: var(--ant-color-text-tertiary);
:global {