Skip to content

GitLab

Unverified Commit c3b60511 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

Support copy trial id, experiment id in the table (#3378)

parent b1ae52ea
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 27 deletions
ts/webui/src/components/managementExp/ExperimentManager.tsx
View file @ c3b60511
......@@ -12,6 +12,7 @@ import FilterBtns from './FilterBtns';
import { TitleContext } from '../overview/TitleContext';
import { Title } from '../overview/Title';
import '../../App.scss';
import '../../static/style/common.scss';
import '../../static/style/nav/nav.scss';
import '../../static/style/experiment/experiment.scss';
import '../../static/style/overview/probar.scss';
......@@ -173,7 +174,7 @@ class Experiment extends React.Component<{}, ExpListState> {
isResizable: true,
data: 'number',
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => <div className='succeed-padding'>{item.experimentName}</div>
onRender: (item: any): React.ReactNode => <div>{item.experimentName}</div>
},
{
name: 'ID',
......@@ -195,9 +196,7 @@ class Experiment extends React.Component<{}, ExpListState> {
maxWidth: MAXSCREENCOLUMNWIDHT,
isResizable: true,
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => (
<div className={`${item.status} commonStyle succeed-padding`}>{item.status}</div>
)
onRender: (item: any): React.ReactNode => <div className={`${item.status} commonStyle`}>{item.status}</div>
},
{
name: 'Port',
......@@ -209,10 +208,8 @@ class Experiment extends React.Component<{}, ExpListState> {
data: 'number',
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => (
<div className='succeed-padding'>
<div className={item.status === 'STOPPED' ? 'gray-port' : ''}>
{item.port !== undefined ? item.port : '--'}
</div>
<div className={item.status === 'STOPPED' ? 'gray-port' : ''}>
{item.port !== undefined ? item.port : '--'}
</div>
)
},
......@@ -225,7 +222,7 @@ class Experiment extends React.Component<{}, ExpListState> {
isResizable: true,
data: 'string',
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => <div className='commonStyle succeed-padding'>{item.platform}</div>
onRender: (item: any): React.ReactNode => <div className='commonStyle'>{item.platform}</div>
},
{
name: 'Start time',
......@@ -236,11 +233,7 @@ class Experiment extends React.Component<{}, ExpListState> {
isResizable: true,
data: 'number',
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => (
<div className='succeed-padding'>
<div>{expformatTimestamp(item.startTime)}</div>
</div>
)
onRender: (item: any): React.ReactNode => <div>{expformatTimestamp(item.startTime)}</div>
},
{
name: 'End time',
......@@ -251,11 +244,7 @@ class Experiment extends React.Component<{}, ExpListState> {
isResizable: true,
data: 'number',
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => (
<div className='succeed-padding'>
<div>{expformatTimestamp(item.endTime)}</div>
</div>
)
onRender: (item: any): React.ReactNode => <div>{expformatTimestamp(item.endTime)}</div>
}
];
......
ts/webui/src/components/managementExp/TrialIdColumn.tsx
View file @ c3b60511
import * as React from 'react';
import { Stack } from '@fluentui/react';
import CopyButton from '../public-child/CopyButton';
interface TrialIdColumnProps {
port: number;
......@@ -17,7 +19,7 @@ class TrialIdColumn extends React.Component<TrialIdColumnProps, {}> {
const protocol = window.location.protocol;
const webuiPortal = `${protocol}//${hostname}:${port}/oview`;
return (
<div className='succeed-padding ellipsis'>
<Stack horizontal className='ellipsis idCopy'>
{status === 'STOPPED' ? (
<div className='idColor'>{id}</div>
) : (
......@@ -30,7 +32,8 @@ class TrialIdColumn extends React.Component<TrialIdColumnProps, {}> {
{id}
</a>
)}
</div>
<CopyButton value={id} />
</Stack>
);
}
}
......
ts/webui/src/components/overview/table/SuccessTable.tsx
View file @ c3b60511
import * as React from 'react';
import {
Stack,
DetailsList,
IDetailsListProps,
IColumn,
......@@ -14,6 +15,7 @@ import {
} from '@fluentui/react';
import DefaultMetric from '../../public-child/DefaultMetric';
import OpenRow from '../../public-child/OpenRow';
import CopyButton from '../../public-child/CopyButton';
import { convertDuration, copyAndSort } from '../../../static/function';
import { TRIALS } from '../../../static/datamodel';
import { SortInfo } from '../../../static/interface';
......@@ -134,7 +136,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
key: 'sequenceId',
fieldName: 'sequenceId', // required!
minWidth: 60,
maxWidth: 100,
maxWidth: 80,
isResizable: true,
data: 'number',
onColumnClick: this.onColumnClick,
......@@ -144,18 +146,23 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
name: 'ID',
key: 'id',
fieldName: 'id',
minWidth: 60,
maxWidth: 90,
minWidth: 90,
maxWidth: 100,
isResizable: true,
className: 'tableHead leftTitle',
data: 'string',
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => <div className='succeed-padding'>{item.id}</div>
onRender: (item: any): React.ReactNode => (
<Stack horizontal className='idCopy'>
<div className='succeed-padding'>{item.id}</div>
<CopyButton value={item.id} />
</Stack>
)
},
{
name: 'Duration',
key: 'duration',
minWidth: 80,
minWidth: 70,
maxWidth: 120,
isResizable: true,
fieldName: 'duration',
......
ts/webui/src/components/public-child/CopyButton.tsx 0 → 100644
View file @ c3b60511
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import copy from 'copy-to-clipboard';
import { IconButton, FontSizes, TooltipHost } from '@fluentui/react';
import { TOOLTIP_BACKGROUND_COLOR } from '../../static/const';
const COPIED_TOOLTIP_CLOSE_DELAY = 1000;
const CopyButton = ({ value, hideTooltip }): any => {
const ref = useRef(null);
return (
<div>
<IconButton
iconProps={{ iconName: 'Copy' }}
styles={{ icon: [{ fontSize: FontSizes.small }] }}
onClick={(event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation();
copy(value);
ref.current && (ref as any).current.show();
setTimeout(() => {
ref.current !== null && (ref as any).current.dismiss();
}, COPIED_TOOLTIP_CLOSE_DELAY);
}}
onMouseDown={(e): void => {
e.stopPropagation();
}}
onMouseUp={(e): void => {
e.stopPropagation();
}}
/>
<TooltipHost
hidden={hideTooltip}
content='Copied'
componentRef={ref}
delay={0}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
/>
</div>
);
};
CopyButton.propTypes = {
value: PropTypes.string.isRequired,
hideTooltip: PropTypes.bool
};
export default CopyButton;
ts/webui/src/components/trial-detail/TableList.tsx
View file @ c3b60511
......@@ -32,6 +32,7 @@ import Customize from '../modals/CustomizedTrial';
import KillJob from '../modals/Killjob';
import ExpandableDetails from '../public-child/ExpandableDetails';
import PaginationTable from '../public-child/PaginationTable';
import CopyButton from '../public-child/CopyButton';
import { Trial } from '../../static/model/trial';
require('echarts/lib/chart/line');
......@@ -326,6 +327,14 @@ class TableList extends React.Component<TableListProps, TableListState> {
onRender: (record): React.ReactNode => (
<span className='durationsty'>{convertDuration(record[k])}</span>
)
}),
...(k === 'id' && {
onRender: (record): React.ReactNode => (
<Stack horizontal className='idCopy'>
<div>{record.id}</div>
<CopyButton value={record.id} />
</Stack>
)
})
});
}
......
ts/webui/src/static/style/common.scss
View file @ c3b60511
......@@ -25,3 +25,19 @@
cursor: pointer;
}
}
.idCopy {
.ms-Button--icon {
width: 18px;
height: 18px;
margin-left: 4px;
}
i {
color: #33333C;
}
}
.ms-DetailsRow {
height: 32px;
}
ts/webui/src/static/style/succTable.scss
View file @ c3b60511
......@@ -30,4 +30,4 @@ $tableHeight: 432px;
padding-left: 6px;
box-sizing: border-box;
}
}
\ No newline at end of file
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment