fix: impoer external components
This commit is contained in:
jialin
@@ -1,53 +0,0 @@
|
||||
import { DoubleRightOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, FloatButton } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
useInfiniteScroll,
|
||||
UseInfiniteScrollOptions
|
||||
} from './use-infinite-scroll';
|
||||
|
||||
const InfiniteScroller: React.FC<
|
||||
UseInfiniteScrollOptions & { children: React.ReactNode }
|
||||
> = (props) => {
|
||||
const { children, ...restProps } = props;
|
||||
const intl = useIntl();
|
||||
const { observerRef, throttledLoadMore } = useInfiniteScroll(restProps);
|
||||
|
||||
return (
|
||||
<div className="relative" style={{ width: '100%' }}>
|
||||
{children}
|
||||
<div
|
||||
ref={observerRef}
|
||||
style={{
|
||||
height: 1
|
||||
}}
|
||||
>
|
||||
{restProps.current < restProps.total && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginTop: 24
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={throttledLoadMore}
|
||||
type="text"
|
||||
size="small"
|
||||
disabled={restProps.loading}
|
||||
>
|
||||
{intl.formatMessage({ id: 'common.button.more' })}
|
||||
<DoubleRightOutlined rotate={90} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<FloatButton.BackTop visibilityHeight={1000} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfiniteScroller;
|
||||
@@ -1,49 +0,0 @@
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { throttle } from 'lodash';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
export interface UseInfiniteScrollOptions {
|
||||
total: number;
|
||||
current: number;
|
||||
loading: boolean;
|
||||
refresh: (nextPage: number) => void;
|
||||
onBottom?: () => void;
|
||||
throttleDelay?: number;
|
||||
}
|
||||
|
||||
export function useInfiniteScroll({
|
||||
total,
|
||||
current,
|
||||
loading,
|
||||
refresh,
|
||||
onBottom,
|
||||
throttleDelay = 300
|
||||
}: UseInfiniteScrollOptions) {
|
||||
const { ref: observerRef, inView } = useInView({
|
||||
threshold: 0.2
|
||||
});
|
||||
const isInitialLoad = useRef(true);
|
||||
|
||||
const throttledLoadMore = useMemoizedFn(
|
||||
throttle(() => {
|
||||
if (loading) return;
|
||||
if (current >= total) return;
|
||||
|
||||
onBottom?.();
|
||||
refresh(current + 1);
|
||||
}, throttleDelay)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
if (isInitialLoad.current) {
|
||||
isInitialLoad.current = false;
|
||||
return;
|
||||
}
|
||||
throttledLoadMore();
|
||||
}
|
||||
}, [inView, throttledLoadMore]);
|
||||
|
||||
return { observerRef, throttledLoadMore };
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
|
||||
interface ScrollerContextProps {
|
||||
total: number; // total pages
|
||||
current: number;
|
||||
loading: boolean;
|
||||
refresh: (nextPage: number) => void;
|
||||
onBottom?: () => void;
|
||||
throttleDelay?: number;
|
||||
}
|
||||
|
||||
export const ScrollerContext = createContext<ScrollerContextProps>(
|
||||
{} as ScrollerContextProps
|
||||
);
|
||||
|
||||
export const useScrollerContext = () => {
|
||||
const context = useContext(ScrollerContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
'useScrollerContext must be used within a ScrollerProvider'
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@@ -1,127 +0,0 @@
|
||||
import { Button, Empty, EmptyProps, Typography } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledEmpty = styled(Empty)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-block: 60px 32px;
|
||||
.ant-empty-image {
|
||||
margin-bottom: 0;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
font-size: 42px;
|
||||
.anticon {
|
||||
color: var(--ant-color-primary);
|
||||
}
|
||||
}
|
||||
.ant-empty-footer {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const ImageWrapper = styled.div`
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const SimpleImageWrapper = styled.div`
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Description = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const NoResult: React.FC<
|
||||
EmptyProps & {
|
||||
title?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
noFoundText?: React.ReactNode;
|
||||
filters?: Record<string, any>;
|
||||
loading?: boolean;
|
||||
loadend?: boolean;
|
||||
dataSource?: any[];
|
||||
buttonText?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
> = (props) => {
|
||||
const {
|
||||
filters,
|
||||
noFoundText,
|
||||
loadend,
|
||||
loading,
|
||||
dataSource,
|
||||
buttonText,
|
||||
onClick
|
||||
} = props;
|
||||
|
||||
const hasFilters = useMemo(() => {
|
||||
const filterValues = _.omit(filters, ['page', 'perPage']);
|
||||
|
||||
return Object.values(filterValues || {}).some((value) => {
|
||||
if (Array.isArray(value)) {
|
||||
return value.length > 0;
|
||||
}
|
||||
|
||||
return !!value;
|
||||
});
|
||||
}, [filters]);
|
||||
|
||||
const renderChildren = () => {
|
||||
if (!buttonText || !onClick) return null;
|
||||
return (
|
||||
<Button color="primary" variant="filled" onClick={onClick}>
|
||||
{buttonText}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!loading && loadend && !dataSource?.length ? (
|
||||
<StyledEmpty
|
||||
image={
|
||||
hasFilters ? (
|
||||
<SimpleImageWrapper>
|
||||
{Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
</SimpleImageWrapper>
|
||||
) : (
|
||||
<ImageWrapper>{props.image}</ImageWrapper>
|
||||
)
|
||||
}
|
||||
description={
|
||||
<Description>
|
||||
{!hasFilters && (
|
||||
<Typography.Text style={{ fontSize: '16px', fontWeight: 500 }}>
|
||||
{props.title}
|
||||
</Typography.Text>
|
||||
)}
|
||||
<Typography.Text type="secondary">
|
||||
{hasFilters ? noFoundText : props.subTitle}
|
||||
</Typography.Text>
|
||||
</Description>
|
||||
}
|
||||
>
|
||||
{!hasFilters && renderChildren()}
|
||||
</StyledEmpty>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoResult;
|
||||
@@ -1,13 +0,0 @@
|
||||
.ant-pro-footer-bar {
|
||||
padding-inline: 0;
|
||||
border-block-start: 1px solid rgba(5, 5, 5, 6%);
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
.ant-pro-footer-bar-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-pro-footer-bar-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import './footer.less';
|
||||
import TerminalTabs from './tabs';
|
||||
|
||||
export interface TerminalModalProps {
|
||||
terminals: { url: string; name: string }[];
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
currentActive?: string;
|
||||
}
|
||||
|
||||
const TerminalModal: React.FC<TerminalModalProps> = ({
|
||||
terminals,
|
||||
open,
|
||||
onClose,
|
||||
currentActive
|
||||
}) => {
|
||||
return (
|
||||
<TerminalTabs
|
||||
terminals={terminals}
|
||||
currentActive={currentActive}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default TerminalModal;
|
||||
@@ -1,98 +0,0 @@
|
||||
import { HolderOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
import { Resizable, ResizableProps } from 're-resizable';
|
||||
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: -12px;
|
||||
font-size: var(--font-size-middle);
|
||||
left: calc(50% + 10px);
|
||||
transform: translateX(-50%);
|
||||
background: none !important;
|
||||
cursor: ns-resize;
|
||||
&::hover {
|
||||
background: none !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const ResizeContainer: React.FC<
|
||||
React.PropsWithChildren<
|
||||
ResizableProps & {
|
||||
ref?: any;
|
||||
defaultHeight?: number;
|
||||
defaultWidth?: number;
|
||||
minHeight?: number;
|
||||
maxHeight?: number;
|
||||
onReSize?: (
|
||||
e: MouseEvent | TouchEvent,
|
||||
dir: any,
|
||||
refToElement: HTMLElement
|
||||
) => void;
|
||||
onReSizeStop?: (
|
||||
e: MouseEvent | TouchEvent,
|
||||
dir: any,
|
||||
refToElement: HTMLElement,
|
||||
delta: { width: number; height: number }
|
||||
) => void;
|
||||
}
|
||||
>
|
||||
> = forwardRef((props, ref) => {
|
||||
const {
|
||||
defaultWidth,
|
||||
defaultHeight = 180,
|
||||
minHeight = 180,
|
||||
maxHeight = 400,
|
||||
children,
|
||||
onReSize,
|
||||
onReSizeStop,
|
||||
...restProps
|
||||
} = props;
|
||||
const intl = useIntl();
|
||||
const resizeRef = useRef<Resizable>(null);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
container: resizeRef.current
|
||||
}));
|
||||
|
||||
const dragHanle = (
|
||||
<StyledButton
|
||||
size="small"
|
||||
type="text"
|
||||
icon={
|
||||
<HolderOutlined
|
||||
rotate={90}
|
||||
style={{ fontSize: 'var(--font-size-14)' }}
|
||||
/>
|
||||
}
|
||||
></StyledButton>
|
||||
);
|
||||
|
||||
return (
|
||||
<Resizable
|
||||
ref={resizeRef}
|
||||
enable={{
|
||||
top: true
|
||||
}}
|
||||
defaultSize={{
|
||||
height: defaultHeight,
|
||||
width: defaultWidth
|
||||
}}
|
||||
handleComponent={{
|
||||
top: undefined
|
||||
}}
|
||||
maxHeight={maxHeight}
|
||||
minHeight={minHeight}
|
||||
onResize={onReSize}
|
||||
onResizeStop={onReSizeStop}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
</Resizable>
|
||||
);
|
||||
});
|
||||
|
||||
export default ResizeContainer;
|
||||
@@ -1,138 +0,0 @@
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { XTerminal } from '@gpustack/core-ui';
|
||||
import { Button, Tabs } from 'antd';
|
||||
import { throttle } from 'lodash';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import ResizeContainer from './resize-container';
|
||||
import { TerminalProps } from './types';
|
||||
|
||||
const TabsContainer = styled.div`
|
||||
.ant-tabs {
|
||||
.ant-tabs-tab {
|
||||
positon: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--ant-color-split);
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-nav {
|
||||
.ant-tabs-tab {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
.ant-tabs-tab-remove .anticon-close {
|
||||
// display: none;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
content: '';
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
background-color: var(--ant-color-fill-tertiary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
.ant-tabs-tab-remove .anticon-close {
|
||||
// display: inline-block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab:not(.ant-tabs-tab-active) {
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
background-color: var(--ant-color-bg-elevated);
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export interface TerminalTabsProps {
|
||||
terminals: TerminalProps[];
|
||||
currentActive?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const TerminalTabs: React.FC<TerminalTabsProps> = ({
|
||||
terminals,
|
||||
currentActive,
|
||||
onClose
|
||||
}) => {
|
||||
const [activeKey, setActiveKey] = useState(
|
||||
currentActive || terminals[0]?.url || ''
|
||||
);
|
||||
const [height, setHeight] = useState(300);
|
||||
const resizeRef = React.useRef<any>(null);
|
||||
|
||||
const items = useMemo(() => {
|
||||
return terminals.map((terminal) => {
|
||||
return {
|
||||
key: terminal.url,
|
||||
label: terminal.name,
|
||||
children: <XTerminal height={height} url={terminal.url} />
|
||||
};
|
||||
});
|
||||
}, [terminals, height]);
|
||||
|
||||
const handleOnResize = throttle(() => {
|
||||
const newHeight = resizeRef.current?.container?.state?.height;
|
||||
console.log('newHeight', newHeight);
|
||||
setHeight(newHeight - 43); // 43 is the height of the tabs header
|
||||
}, 200);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentActive) {
|
||||
setActiveKey(currentActive);
|
||||
}
|
||||
}, [currentActive]);
|
||||
|
||||
return (
|
||||
<ResizeContainer onReSize={handleOnResize} ref={resizeRef}>
|
||||
<TabsContainer>
|
||||
<Tabs
|
||||
type="editable-card"
|
||||
hideAdd
|
||||
activeKey={activeKey}
|
||||
onChange={setActiveKey}
|
||||
tabBarStyle={{ marginBottom: 0 }}
|
||||
items={items}
|
||||
tabBarExtraContent={{
|
||||
right: (
|
||||
<Button
|
||||
icon={<CloseOutlined />}
|
||||
type="text"
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={onClose}
|
||||
></Button>
|
||||
)
|
||||
}}
|
||||
></Tabs>
|
||||
</TabsContainer>
|
||||
</ResizeContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TerminalTabs;
|
||||
@@ -1,4 +0,0 @@
|
||||
export interface TerminalProps {
|
||||
url: string;
|
||||
name: string;
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import { EditorWrap } from '@gpustack/core-ui';
|
||||
import Editor, { loader } from '@monaco-editor/react';
|
||||
import * as monaco from 'monaco-editor';
|
||||
import { yamlDefaults } from 'monaco-yaml';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef
|
||||
} from 'react';
|
||||
|
||||
loader.config({
|
||||
monaco
|
||||
});
|
||||
|
||||
interface ViewerProps {
|
||||
ref?: any;
|
||||
defaultLang?: string;
|
||||
config?: any;
|
||||
value: string;
|
||||
height?: string | number;
|
||||
theme?: string;
|
||||
header?: React.ReactNode;
|
||||
placeholder?: string;
|
||||
variant?: 'bordered' | 'borderless';
|
||||
schema?: any;
|
||||
}
|
||||
|
||||
const path = 'inmemory://model/config.yaml';
|
||||
|
||||
const EditorInner: React.FC<ViewerProps> = forwardRef((props, ref) => {
|
||||
const {
|
||||
value,
|
||||
height = 380,
|
||||
theme = 'vs-dark',
|
||||
header,
|
||||
variant = 'borderless',
|
||||
schema,
|
||||
placeholder
|
||||
} = props;
|
||||
|
||||
const editorRef = useRef<any>(null);
|
||||
const monacoRef = useRef<any>(null);
|
||||
const monacoYamlRef = useRef<any>(null);
|
||||
|
||||
const handleBeforeMount = (monaco: any) => {
|
||||
const yamlUri = monaco.Uri.parse(path);
|
||||
|
||||
yamlDefaults.setDiagnosticsOptions({
|
||||
validate: false,
|
||||
enableSchemaRequest: true,
|
||||
hover: false,
|
||||
schemas: [
|
||||
{
|
||||
uri: 'http://example.com/schema-name.json',
|
||||
fileMatch: [yamlUri.toString()],
|
||||
schema: schema
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditorDidMount = (editor: any, monaco: any) => {
|
||||
editorRef.current = editor;
|
||||
monacoRef.current = monaco;
|
||||
};
|
||||
|
||||
const formatCode = () => {
|
||||
if (editorRef.current) {
|
||||
setTimeout(() => {
|
||||
editorRef.current
|
||||
?.getAction?.('editor.action.formatDocument')
|
||||
?.run()
|
||||
.then(() => {
|
||||
console.log('format success');
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// Currently, do not use this function, but keep it for future validation needs
|
||||
const getMarkers = () => {
|
||||
const uri = editorRef.current?.getModel()?.uri;
|
||||
const markers = monacoRef.current?.editor.getModelMarkers({
|
||||
resource: uri
|
||||
});
|
||||
return markers;
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
format: () => {
|
||||
formatCode();
|
||||
},
|
||||
getValue: () => {
|
||||
return editorRef.current?.getValue?.();
|
||||
},
|
||||
setValue: (val: string) => {
|
||||
editorRef.current?.setValue?.(val);
|
||||
},
|
||||
dispose: () => {
|
||||
editorRef.current?.dispose?.();
|
||||
monacoYamlRef.current?.dispose?.();
|
||||
},
|
||||
validate() {
|
||||
return getMarkers();
|
||||
},
|
||||
editor: editorRef.current
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
formatCode();
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<EditorWrap header={header} variant={variant}>
|
||||
<Editor
|
||||
path={path}
|
||||
defaultPath={path}
|
||||
height={height}
|
||||
theme={theme}
|
||||
className="monaco-editor"
|
||||
defaultLanguage={'yaml'}
|
||||
language={'yaml'}
|
||||
value={value}
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
quickSuggestions: true,
|
||||
suggestOnTriggerCharacters: true,
|
||||
fontSize: 14,
|
||||
scrollbar: {
|
||||
verticalScrollbarSize: 6,
|
||||
horizontalScrollbarSize: 6
|
||||
}
|
||||
}}
|
||||
loading={<LoadingOutlined style={{ fontSize: 24 }}></LoadingOutlined>}
|
||||
beforeMount={handleBeforeMount}
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
</EditorWrap>
|
||||
);
|
||||
});
|
||||
|
||||
export default EditorInner;
|
||||
@@ -1,177 +0,0 @@
|
||||
import useUserSettings from '@/hooks/use-user-settings';
|
||||
import { ImportOutlined } from '@ant-design/icons';
|
||||
import { loader } from '@monaco-editor/react';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, message, Typography, Upload } from 'antd';
|
||||
import { RcFile } from 'antd/lib/upload';
|
||||
import * as monaco from 'monaco-editor';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef
|
||||
} from 'react';
|
||||
import styled from 'styled-components';
|
||||
import EditorInner from './editor';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
loader.config({ monaco });
|
||||
|
||||
const Container = styled.div`
|
||||
position: relative;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: var(--ant-border-radius);
|
||||
overflow: hidden;
|
||||
.monaco-editor .scroll-decoration {
|
||||
box-shadow: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const ErrorText = styled(Text)`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 4px 6px;
|
||||
background-color: var(--ant-color-bg-elevated);
|
||||
border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding-inline: 10px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid var(--ant-color-border);
|
||||
background-color: var(--ant-color-fill-quaternary);
|
||||
`;
|
||||
|
||||
interface ViewerProps {
|
||||
ref?: any;
|
||||
title?: React.ReactNode;
|
||||
defaultLang?: string;
|
||||
config?: any;
|
||||
value: string;
|
||||
height?: string | number;
|
||||
placeholder?: string;
|
||||
variant?: 'bordered' | 'borderless';
|
||||
validateMessage?: React.ReactNode;
|
||||
schema?: any;
|
||||
onUpload?: (content: string) => void;
|
||||
}
|
||||
|
||||
const YamlEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
|
||||
const {
|
||||
value,
|
||||
height = 380,
|
||||
variant = 'borderless',
|
||||
schema,
|
||||
placeholder,
|
||||
validateMessage,
|
||||
title,
|
||||
onUpload
|
||||
} = props;
|
||||
|
||||
const intl = useIntl();
|
||||
const { userSettings } = useUserSettings();
|
||||
|
||||
const editorRef = useRef<any>(null);
|
||||
|
||||
const setContent = (val: string) => {
|
||||
editorRef.current?.setValue?.(val);
|
||||
};
|
||||
|
||||
const beforeUpload = (file: RcFile) => {
|
||||
const isYaml =
|
||||
file.type === 'application/x-yaml' ||
|
||||
file.type === 'text/yaml' ||
|
||||
file.name.endsWith('.yaml') ||
|
||||
file.name.endsWith('.yml');
|
||||
if (!isYaml) {
|
||||
message.error('You can only upload YAML file!');
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result;
|
||||
if (typeof content === 'string') {
|
||||
onUpload?.(content);
|
||||
setContent(content);
|
||||
} else {
|
||||
message.error('Failed to read file content!');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
// Prevent upload
|
||||
return false;
|
||||
};
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
<Header>
|
||||
<span className="title">{title || 'YAML'}</span>
|
||||
<Upload
|
||||
name="file"
|
||||
multiple={false}
|
||||
beforeUpload={beforeUpload}
|
||||
showUploadList={false}
|
||||
accept=".yaml,.yml,text/yaml,application/x-yaml"
|
||||
>
|
||||
<Button icon={<ImportOutlined />} type="text" size="small">
|
||||
{intl.formatMessage({ id: 'common.button.import' })}
|
||||
</Button>
|
||||
</Upload>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
format: () => {
|
||||
editorRef.current?.format();
|
||||
},
|
||||
getValue: () => {
|
||||
return editorRef.current?.getValue?.();
|
||||
},
|
||||
setValue: (val: string) => {
|
||||
editorRef.current?.setValue?.(val);
|
||||
},
|
||||
dispose: () => {
|
||||
editorRef.current?.dispose?.();
|
||||
},
|
||||
validate() {
|
||||
return editorRef.current?.validate();
|
||||
},
|
||||
editor: editorRef.current
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
editorRef.current?.format();
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
minHeight: height
|
||||
}}
|
||||
>
|
||||
<EditorInner
|
||||
ref={editorRef}
|
||||
header={renderHeader()}
|
||||
variant={variant}
|
||||
height={height}
|
||||
theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
schema={schema}
|
||||
/>
|
||||
{validateMessage && (
|
||||
<ErrorText type="danger">{validateMessage}</ErrorText>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
|
||||
export default YamlEditor;
|
||||
@@ -4,13 +4,12 @@ import type { PageActionType } from '@/config/types';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import useQueryUserList from '@/pages/users/services/use-query-user-list';
|
||||
import { useModel } from '@@/plugin-model';
|
||||
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
|
||||
import { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
|
||||
import { ConfigProvider, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useState } from 'react';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import { deleteApisKey, queryApisKeysList } from './apis';
|
||||
import AddAPIKeyModal from './components/add-apikey-modal';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { BulbOutlined } from '@ant-design/icons';
|
||||
import { AutoTooltip, FullMarkdown } from '@gpustack/core-ui';
|
||||
import { AutoTooltip } from '@gpustack/core-ui';
|
||||
import { FullMarkdown } from '@gpustack/core-ui/markdown';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Tag } from 'antd';
|
||||
import _ from 'lodash';
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
import { enabledBackendsAtom } from '@/atoms/backend';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { IconFont, ThemeTag } from '@gpustack/core-ui';
|
||||
import {
|
||||
IconFont,
|
||||
InfiniteScrollerProvider,
|
||||
NoResult,
|
||||
ThemeTag
|
||||
} from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Input, Tooltip } from 'antd';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import React, { useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { ScrollerContext } from '../../_components/infinite-scroller/use-scroller-context';
|
||||
import NoResult from '../../_components/no-result';
|
||||
import { INFERENCE_BACKEND_API, queryBackendsList } from '../apis';
|
||||
import BackendCard from '../components/backend-card';
|
||||
import BackendCardList from '../components/backend-list';
|
||||
@@ -144,7 +147,7 @@ const CommunityBackends: React.FC<{
|
||||
onChange={handleNameChange}
|
||||
></Input>
|
||||
</FilterBox>
|
||||
<ScrollerContext.Provider
|
||||
<InfiniteScrollerProvider
|
||||
value={{
|
||||
total: dataSource.totalPage,
|
||||
current: queryParams.page!,
|
||||
@@ -170,7 +173,7 @@ const CommunityBackends: React.FC<{
|
||||
id: 'noresult.backend.nofound'
|
||||
})}
|
||||
></NoResult>
|
||||
</ScrollerContext.Provider>
|
||||
</InfiniteScrollerProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { PageAction } from '@/config';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { YamlEditor } from '@gpustack/core-ui';
|
||||
import useUserSettings from '@/hooks/use-user-settings';
|
||||
import { YamlEditor } from '@gpustack/core-ui/yaml-editor';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import React, {
|
||||
forwardRef,
|
||||
@@ -27,6 +28,7 @@ interface ImportYAMLProps {
|
||||
const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
|
||||
({ actionStatus, content = '', height }, ref) => {
|
||||
const intl = useIntl();
|
||||
const { isDarkTheme } = useUserSettings();
|
||||
const editorRef = useRef<any>(null);
|
||||
const [fileContent, setFileContent] = useState<string>(
|
||||
actionStatus.action === PageAction.CREATE ? yamlTemplate : content
|
||||
@@ -116,6 +118,7 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
|
||||
setError('');
|
||||
setContent(content);
|
||||
}}
|
||||
isDarkTheme={isDarkTheme}
|
||||
schema={
|
||||
actionStatus.action === PageAction.CREATE
|
||||
? createSchema
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import { PageAction } from '@/config';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
|
||||
import {
|
||||
DeleteModal,
|
||||
FilterBar,
|
||||
IconFont,
|
||||
InfiniteScrollerProvider,
|
||||
NoResult
|
||||
} from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
|
||||
import _ from 'lodash';
|
||||
import { useState } from 'react';
|
||||
import { ScrollerContext } from '../_components/infinite-scroller/use-scroller-context';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import {
|
||||
createBackend,
|
||||
@@ -249,7 +253,7 @@ const BackendList = () => {
|
||||
value: item.value
|
||||
}))}
|
||||
></FilterBar>
|
||||
<ScrollerContext.Provider
|
||||
<InfiniteScrollerProvider
|
||||
value={{
|
||||
total: dataSource.totalPage,
|
||||
current: queryParams.page!,
|
||||
@@ -279,7 +283,7 @@ const BackendList = () => {
|
||||
onClick={() => handleAddBackend({ key: 'community' })}
|
||||
buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
|
||||
></NoResult>
|
||||
</ScrollerContext.Provider>
|
||||
</InfiniteScrollerProvider>
|
||||
<AddModal
|
||||
action={openBackendModalStatus.action}
|
||||
onClose={() => closeBackendModal('custom')}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { exportJsonToExcel } from '@/utils/excel-reader';
|
||||
import { exportJsonToExcel } from '@gpustack/core-ui/excel';
|
||||
|
||||
const useExportData = (params: { columns: any[] }) => {
|
||||
const { columns } = params;
|
||||
|
||||
@@ -3,13 +3,12 @@ import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { useBenchmarkTargetInstance } from '@/pages/llmodels/hooks/use-run-benchmark';
|
||||
import { useQueryModelList } from '@/pages/llmodels/services/use-query-model-list';
|
||||
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
|
||||
import { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
|
||||
import { useIntl, useNavigate } from '@umijs/max';
|
||||
import { useMemoizedFn, useToggle } from 'ahooks';
|
||||
import { ConfigProvider, Table, message } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import { useQueryClusterList } from '../cluster-management/services/use-query-cluster-list';
|
||||
import {
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
DeleteModal,
|
||||
FilterBar,
|
||||
IconFont,
|
||||
NoResult,
|
||||
Table as SealTable,
|
||||
TableOrder,
|
||||
TableProvider
|
||||
@@ -19,7 +20,6 @@ import { message } from 'antd';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useState } from 'react';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import useGranfanaLink from '../resources/hooks/use-grafana-link';
|
||||
import {
|
||||
|
||||
@@ -3,14 +3,13 @@ import { PageAction } from '@/config';
|
||||
import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
|
||||
import { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
|
||||
import { useIntl, useNavigate } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { ConfigProvider, Table, message } from 'antd';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import { useState } from 'react';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import {
|
||||
createCredential,
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { PageAction } from '@/config';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { Input as CInput, IconFont, YamlEditor } from '@gpustack/core-ui';
|
||||
import useUserSettings from '@/hooks/use-user-settings';
|
||||
import { Input as CInput, IconFont } from '@gpustack/core-ui';
|
||||
import { YamlEditor } from '@gpustack/core-ui/yaml-editor';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Form } from 'antd';
|
||||
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
|
||||
@@ -31,6 +33,7 @@ const ClusterAdvanceConfig: React.FC<{
|
||||
const [form] = Form.useForm();
|
||||
const intl = useIntl();
|
||||
const editorRef = React.useRef<any>(null);
|
||||
const { isDarkTheme } = useUserSettings();
|
||||
const [fileContent, setFileContent] = React.useState<string>('');
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
@@ -79,6 +82,7 @@ const ClusterAdvanceConfig: React.FC<{
|
||||
</Title>
|
||||
<YamlEditor
|
||||
ref={editorRef}
|
||||
isDarkTheme={isDarkTheme}
|
||||
title={
|
||||
<span className="flex-center">
|
||||
<span>{`YAML`}</span>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { exportJsonToExcel } from '@/utils/excel-reader';
|
||||
import { AutoTooltip, ModalFooter, ScrollerModal } from '@gpustack/core-ui';
|
||||
import { exportJsonToExcel } from '@gpustack/core-ui/excel';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Table, TableColumnType } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
@@ -7,14 +7,14 @@ import { SearchOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
FilterBar,
|
||||
IconFont,
|
||||
InfiniteScrollerProvider
|
||||
InfiniteScrollerProvider,
|
||||
NoResult
|
||||
} from '@gpustack/core-ui';
|
||||
import { useIntl, useNavigate } from '@umijs/max';
|
||||
import { message } from 'antd';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import { createModel, queryCatalogItemSpec, queryCatalogList } from './apis';
|
||||
import CatalogList from './components/catalog/catalog-list';
|
||||
|
||||
@@ -5,16 +5,11 @@ import {
|
||||
FileMarkdownOutlined,
|
||||
RightOutlined
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
IconFont,
|
||||
MarkdownViewer,
|
||||
SimpleOverlay,
|
||||
ThemeTag
|
||||
} from '@gpustack/core-ui';
|
||||
import { IconFont, SimpleOverlay, ThemeTag } from '@gpustack/core-ui';
|
||||
import { MarkdownViewer } from '@gpustack/core-ui/markdown';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Empty, Spin, Tooltip } from 'antd';
|
||||
import { some } from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { Input as CInput, IconFont, YamlEditor } from '@gpustack/core-ui';
|
||||
import useUserSettings from '@/hooks/use-user-settings';
|
||||
import { Input as CInput, IconFont } from '@gpustack/core-ui';
|
||||
import { YamlEditor } from '@gpustack/core-ui/yaml-editor';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Form } from 'antd';
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
@@ -11,6 +13,7 @@ const AdvanceConfig: React.FC<{
|
||||
action: PageActionType;
|
||||
ref?: any;
|
||||
}> = forwardRef(({ action }, ref) => {
|
||||
const { isDarkTheme } = useUserSettings();
|
||||
const form = Form.useFormInstance();
|
||||
const intl = useIntl();
|
||||
const editorRef = React.useRef<any>(null);
|
||||
@@ -48,6 +51,7 @@ const AdvanceConfig: React.FC<{
|
||||
</Form.Item>
|
||||
<YamlEditor
|
||||
ref={editorRef}
|
||||
isDarkTheme={isDarkTheme}
|
||||
title={
|
||||
<span className="flex-center">
|
||||
<span>{`${intl.formatMessage({ id: 'providers.form.customConfig' })} (YAML)`}</span>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { PageAction } from '@/config';
|
||||
import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
|
||||
import { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { ConfigProvider, message, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import {
|
||||
createProvider,
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
DeleteModal,
|
||||
FilterBar,
|
||||
IconFont,
|
||||
NoResult,
|
||||
Table as SealTable,
|
||||
TableOrder,
|
||||
TableProvider
|
||||
@@ -20,7 +21,6 @@ import { message } from 'antd';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useState } from 'react';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import { queryModelsList } from '../llmodels/apis';
|
||||
import AccessControlModal from '../llmodels/components/access-control-modal';
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Spin } from 'antd';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { FullMarkdown, SimpleAudio } from '@gpustack/core-ui';
|
||||
import { SimpleAudio } from '@gpustack/core-ui';
|
||||
import { FullMarkdown } from '@gpustack/core-ui/markdown';
|
||||
import { Input } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Checkbox, Dropdown, Popover, Spin } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { FullMarkdown } from '@gpustack/core-ui';
|
||||
import { FullMarkdown } from '@gpustack/core-ui/markdown';
|
||||
import React from 'react';
|
||||
import '../../style/think-content.less';
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { readBlob } from '@/utils';
|
||||
import readEpubContent from '@/utils/epub-reader';
|
||||
import readExcelContent from '@/utils/excel-reader';
|
||||
import readPDFContent from '@/utils/pdf-reader';
|
||||
import readPptxContent from '@/utils/pptx-reader';
|
||||
import readHtmlContent from '@/utils/read-html';
|
||||
import readWordContent from '@/utils/word-reader';
|
||||
import { PaperClipOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
readEpubContent,
|
||||
readExcelContent,
|
||||
readHtmlContent,
|
||||
readPDFContent,
|
||||
readPptxContent,
|
||||
readWordContent
|
||||
} from '@gpustack/core-ui/file-readers';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Tooltip, Upload } from 'antd';
|
||||
import type { UploadFile } from 'antd/es/upload';
|
||||
|
||||
@@ -18,7 +18,6 @@ import { useIntl } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
|
||||
@@ -7,7 +7,6 @@ import { AlertInfo, IconFont } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
|
||||
@@ -12,7 +12,6 @@ import {
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Divider } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
|
||||
@@ -9,7 +9,6 @@ import { AlertInfo, useOverlayScroller } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Checkbox, Input, Spin, Tag, Tooltip, Typography } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
|
||||
@@ -4,7 +4,6 @@ import { AlertInfo, IconFont, SpeechContent } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Spin } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
|
||||
@@ -6,7 +6,6 @@ import { AlertInfo, IconFont } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Spin, Tooltip } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { exportJsonToExcel } from '@/utils/excel-reader';
|
||||
import { AutoTooltip, ModalFooter, ScrollerModal } from '@gpustack/core-ui';
|
||||
import { exportJsonToExcel } from '@gpustack/core-ui/excel';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Table, TableColumnType } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
modelsTableDataAtom,
|
||||
usersTableDataAtom
|
||||
} from '@/atoms/usage';
|
||||
import { exportJsonToExcel } from '@/utils/excel-reader';
|
||||
import { exportJsonToExcel } from '@gpustack/core-ui/excel';
|
||||
import { useStore } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import useAPIKeysColumns from './use-apikeys-columns';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { exportJsonToExcel } from '@/utils/excel-reader';
|
||||
import { exportJsonToExcel } from '@gpustack/core-ui/excel';
|
||||
import dayjs from 'dayjs';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
|
||||
@@ -2,13 +2,12 @@ import { PageAction } from '@/config';
|
||||
import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
|
||||
import { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
|
||||
import { useIntl, useModel } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { ConfigProvider, message, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { useMemo, useState } from 'react';
|
||||
import NoResult from '../_components/no-result';
|
||||
import PageBox from '../_components/page-box';
|
||||
import {
|
||||
createUser,
|
||||
|
||||
Reference in New Issue
Block a user