chore: logs
This commit is contained in:
jialin
@@ -1,193 +0,0 @@
|
||||
import Wrapper from '@/components/label-selector/wrapper';
|
||||
import { DeleteOutlined } from '@ant-design/icons';
|
||||
import { useHover } from 'ahooks';
|
||||
import { Button, Divider, Flex, Input, Popover } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const ItemContainer = styled.div`
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.seprator {
|
||||
display: flex;
|
||||
flex: none;
|
||||
width: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 24px;
|
||||
margin-left: 10px;
|
||||
flex: none;
|
||||
}
|
||||
`;
|
||||
|
||||
interface MetadataListProps {
|
||||
dataList: any[];
|
||||
label: React.ReactNode;
|
||||
description?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
btnText?: string;
|
||||
onAdd?: () => void;
|
||||
onDelete?: (index: number, item: any) => void;
|
||||
children?: (item: any, index: number) => React.ReactNode;
|
||||
}
|
||||
|
||||
const MetadataList: React.FC<MetadataListProps> = ({
|
||||
dataList,
|
||||
label,
|
||||
description,
|
||||
disabled,
|
||||
btnText,
|
||||
children,
|
||||
onDelete,
|
||||
onAdd
|
||||
}) => {
|
||||
return (
|
||||
<Wrapper
|
||||
label={label}
|
||||
description={description}
|
||||
onAdd={onAdd}
|
||||
disabled={disabled}
|
||||
btnText={btnText}
|
||||
styles={{
|
||||
wrapper: {
|
||||
padding: 0,
|
||||
border: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{dataList.map((item, index) => (
|
||||
<ItemContainer key={index}>{children?.(item, index)}</ItemContainer>
|
||||
))}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const DeleteWrapper = styled.span`
|
||||
cursor: pointer;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
&:hover {
|
||||
color: var(--ant-color-error-text-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
const Box = styled.div`
|
||||
width: 100%;
|
||||
.ant-input-suffix {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
.ant-input-suffix {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: 4px;
|
||||
padding: 8.5px 11px;
|
||||
height: 40px;
|
||||
width: 240px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border-color: var(--ant-color-primary-hover);
|
||||
}
|
||||
&:active {
|
||||
box-shadow: var(--ant-input-active-shadow);
|
||||
}
|
||||
.holder {
|
||||
color: var(--ant-color-text-placeholder);
|
||||
}
|
||||
`;
|
||||
const CompareConditions: React.FC = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [filters, setFilters] = useState<string[]>([]);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const isHovering = useHover(containerRef);
|
||||
|
||||
const onAdd = () => {
|
||||
setFilters((prev) => [...prev, '']);
|
||||
};
|
||||
|
||||
const onDelete = (index: number, item: any) => {
|
||||
setFilters((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleOnChange = (value: string, index: number) => {
|
||||
const newFilters = [...filters];
|
||||
newFilters[index] = value;
|
||||
setFilters(newFilters);
|
||||
};
|
||||
|
||||
const FiltersDrop = () => {
|
||||
return (
|
||||
<>
|
||||
<MetadataList
|
||||
dataList={filters}
|
||||
onAdd={onAdd}
|
||||
onDelete={onDelete}
|
||||
btnText="Add Filter"
|
||||
label=""
|
||||
>
|
||||
{(item, index) => (
|
||||
<Box>
|
||||
<Input
|
||||
key={index}
|
||||
value={item}
|
||||
placeholder="enter a model name"
|
||||
suffix={
|
||||
filters.length > 1 ? (
|
||||
<DeleteWrapper>
|
||||
<DeleteOutlined onClick={() => onDelete?.(index, item)} />
|
||||
</DeleteWrapper>
|
||||
) : null
|
||||
}
|
||||
onChange={(e) => handleOnChange(e.target.value, index)}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</MetadataList>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
<Flex justify="end" gap={8}>
|
||||
<Button size="middle" type="text">
|
||||
Clear
|
||||
</Button>
|
||||
<Button type="primary" size="middle">
|
||||
Confirm
|
||||
</Button>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
trigger={'click'}
|
||||
arrow={false}
|
||||
placement="bottom"
|
||||
content={FiltersDrop()}
|
||||
styles={{
|
||||
root: {
|
||||
width: '240px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Container>
|
||||
<span className="holder">Export filter</span>
|
||||
</Container>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompareConditions;
|
||||
@@ -8,7 +8,6 @@ import { BenchmarkListItem } from '../config/types';
|
||||
import useQueryDetail from '../services/use-query-detail';
|
||||
import Configure from './configure';
|
||||
import Environment from './environment';
|
||||
import Logs from './logs';
|
||||
import Summary from './summary';
|
||||
|
||||
const Details: React.FC<{ currentData?: BenchmarkListItem }> = ({
|
||||
@@ -43,13 +42,13 @@ const Details: React.FC<{ currentData?: BenchmarkListItem }> = ({
|
||||
label: intl.formatMessage({ id: 'benchmark.detail.environment.title' }),
|
||||
children: <Environment />,
|
||||
icon: <IconFont type="icon-server02" />
|
||||
},
|
||||
{
|
||||
key: 'logs',
|
||||
label: intl.formatMessage({ id: 'benchmark.detail.logs.title' }),
|
||||
children: <Logs />,
|
||||
icon: <IconFont type="icon-logs" />
|
||||
}
|
||||
// {
|
||||
// key: 'logs',
|
||||
// label: intl.formatMessage({ id: 'benchmark.detail.logs.title' }),
|
||||
// children: <Logs />,
|
||||
// icon: <IconFont type="icon-logs" />
|
||||
// }
|
||||
];
|
||||
|
||||
const handleChangeTab = (key: string) => {
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import icons from '@/components/icon-font/icons';
|
||||
import useDownloadLogs from '@/hooks/use-download-logs';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { BENCHMARKS_API } from '../apis';
|
||||
import { BenchmarkStatusValueMap } from '../config';
|
||||
import { BenchmarkListItem as ListItem } from '../config/types';
|
||||
|
||||
const actionList = [
|
||||
{
|
||||
key: 'edit',
|
||||
label: 'common.button.edit',
|
||||
icon: icons.EditOutlined
|
||||
},
|
||||
{
|
||||
label: 'common.button.viewlog',
|
||||
key: 'viewlog',
|
||||
status: [
|
||||
BenchmarkStatusValueMap.Claimed,
|
||||
BenchmarkStatusValueMap.Running,
|
||||
BenchmarkStatusValueMap.Error,
|
||||
BenchmarkStatusValueMap.Completed
|
||||
],
|
||||
icon: <IconFont type="icon-logs" />
|
||||
},
|
||||
{
|
||||
label: 'common.button.downloadLog',
|
||||
key: 'download',
|
||||
status: [
|
||||
BenchmarkStatusValueMap.Claimed,
|
||||
BenchmarkStatusValueMap.Running,
|
||||
BenchmarkStatusValueMap.Error,
|
||||
BenchmarkStatusValueMap.Completed
|
||||
],
|
||||
icon: <DownloadOutlined />
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: 'common.button.delete',
|
||||
icon: icons.DeleteOutlined,
|
||||
props: {
|
||||
danger: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
interface RowActionsProps {
|
||||
record: ListItem;
|
||||
handleSelect: (key: string, record: ListItem) => void;
|
||||
}
|
||||
|
||||
const RowActions: React.FC<RowActionsProps> = (props) => {
|
||||
const { record, handleSelect } = props;
|
||||
const { onDownloadLog, contextHolder } = useDownloadLogs();
|
||||
|
||||
const actions = actionList.filter((action) => {
|
||||
if (action.key === 'viewlog' || action.key === 'download') {
|
||||
return action.status?.includes(record.state);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
const handleDownloadLog = async () => {
|
||||
onDownloadLog({
|
||||
url: `${BENCHMARKS_API}/${record.id}/logs`,
|
||||
name: record.name
|
||||
});
|
||||
};
|
||||
|
||||
const onSelect = (val: string) => {
|
||||
if (val === 'download') {
|
||||
handleDownloadLog();
|
||||
return;
|
||||
}
|
||||
handleSelect(val, record);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<DropdownButtons items={actions} onSelect={onSelect}></DropdownButtons>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RowActions;
|
||||
@@ -0,0 +1,104 @@
|
||||
import LogsViewer from '@/components/logs-viewer/virtual-log-list';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Modal } from 'antd';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
|
||||
type ViewModalProps = {
|
||||
open: boolean;
|
||||
url: string;
|
||||
tail?: number;
|
||||
status?: string;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const { open, onCancel, tail, url, status } = props || {};
|
||||
const logsViewerRef = React.useRef<any>(null);
|
||||
const requestRef = React.useRef<any>(null);
|
||||
const contentRef = React.useRef<any>(null);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
logsViewerRef.current?.abort();
|
||||
onCancel();
|
||||
}, [onCancel]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: any) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
||||
e.preventDefault();
|
||||
if (contentRef.current) {
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(contentRef.current);
|
||||
const selection = window.getSelection();
|
||||
selection?.removeAllRanges();
|
||||
selection?.addRange(range);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (open) {
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!url) return;
|
||||
if (!open) {
|
||||
logsViewerRef.current?.abort();
|
||||
requestRef.current?.current?.cancel?.();
|
||||
}
|
||||
|
||||
return () => {
|
||||
logsViewerRef.current?.abort();
|
||||
requestRef.current?.current?.cancel?.();
|
||||
};
|
||||
}, [url, open]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<span className="flex flex-center">
|
||||
<span style={{ fontWeight: 'var(--font-weight-bold)' }}>
|
||||
{intl.formatMessage({ id: 'common.button.viewlog' })}
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
zIndex={3000}
|
||||
open={open}
|
||||
centered={true}
|
||||
onCancel={handleCancel}
|
||||
destroyOnHidden={true}
|
||||
closeIcon={true}
|
||||
maskClosable={false}
|
||||
keyboard={true}
|
||||
styles={{
|
||||
wrapper: {
|
||||
borderRadius: 0
|
||||
}
|
||||
}}
|
||||
width="100%"
|
||||
footer={null}
|
||||
>
|
||||
<div ref={contentRef}>
|
||||
<LogsViewer
|
||||
ref={logsViewerRef}
|
||||
diffHeight={78}
|
||||
url={url}
|
||||
tail={undefined}
|
||||
enableScorllLoad={true}
|
||||
isDownloading={false}
|
||||
params={{
|
||||
follow: true
|
||||
}}
|
||||
></LogsViewer>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewLogsModal;
|
||||
Reference in New Issue
Block a user