Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

put add/remove columns btn to table column endding #3485

Closed
wants to merge 4 commits into from
Closed

put add/remove columns btn to table column endding #3485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e93878
put add/remove columns btn to table column endding
Mar 28, 2021
e48982b
fix comments
Mar 29, 2021
ea7ee27
del notes
Mar 29, 2021
67408e5
rename to Setting
Mar 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 37 additions & 19 deletions ts/webui/src/components/trial-detail/TableList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,15 +278,20 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: k,
fieldName: k,
minWidth: widths * 0.12,
maxWidth: widths * 0.19,
isResizable: true,
onColumnClick: this._onColumnClick.bind(this),
...(k === 'status' && {
// color status
minWidth: 193,
maxWidth: 267,
onRender: (record): React.ReactNode => (
<span className={`${record.status} commonStyle`}>{record.status}</span>
)
}),
...(k === 'sequenceId' && {
minWidth: 142,
maxWidth: 202
}),
...(k === 'message' && {
onRender: (record): React.ReactNode =>
record.message.length > 15 ? (
Expand Down Expand Up @@ -331,6 +336,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
}),
...(k === 'latestAccuracy' && {
// FIXME: this is ad-hoc
minWidth: 243,
maxWidth: 301,
onRender: (record): React.ReactNode => (
<TooltipHost
content={record._formattedLatestAccuracy}
Expand Down Expand Up @@ -358,6 +365,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
)
}),
...(k === 'id' && {
minWidth: 189,
maxWidth: 272,
onRender: (record): React.ReactNode => (
<Stack horizontal className='idCopy'>
<div>{record.id}</div>
Expand All @@ -368,16 +377,31 @@ class TableList extends React.Component<TableListProps, TableListState> {
});
}
// operations column
columns.push({
name: 'Operation',
key: '_operation',
fieldName: 'operation',
minWidth: 150,
maxWidth: 160,
isResizable: true,
className: 'detail-table',
onRender: this._renderOperationColumn.bind(this)
});
columns.push(
{
name: 'Operation',
key: '_operation',
fieldName: 'operation',
minWidth: 150,
maxWidth: 150,
isResizable: true,
className: 'detail-table',
onRender: this._renderOperationColumn.bind(this)
},
{
name: 'Setting', // add/remove columns setting
key: '_setting',
fieldName: '',
isIconOnly: true,
iconName: 'Settings',
headerClassName: 'addRemoveIcon',
// title: 'Add/Remove columns',
minWidth: 22,
maxWidth: 40,
isResizable: false,
onColumnClick: (): void => this.setState({ customizeColumnsDialogVisible: true })
}
);

const { sortInfo } = this.state;
for (const column of columns) {
Expand Down Expand Up @@ -494,13 +518,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
</StackItem>
<StackItem grow={50}>
<Stack horizontal horizontalAlign='end' className='allList'>
<DefaultButton
className='allList-button-gap'
text='Add/Remove columns'
onClick={(): void => {
this.setState({ customizeColumnsDialogVisible: true });
}}
/>
<Dropdown
selectedKey={searchType}
options={Object.entries(searchOptionLiterals).map(([k, v]) => ({
Expand Down Expand Up @@ -528,7 +545,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
<PaginationTable
columns={columns.filter(
column =>
displayedColumns.includes(column.key) || ['_expand', '_operation'].includes(column.key)
displayedColumns.includes(column.key) ||
['_expand', '_operation', '_setting'].includes(column.key)
)}
items={displayedItems}
compact={true}
Expand Down
12 changes: 6 additions & 6 deletions ts/webui/src/static/style/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@
}

.idCopy {
.ms-Button--icon {
width: 18px;
height: 18px;
margin-left: 4px;
}
.ms-Button--icon {
width: 18px;
height: 18px;
margin-left: 4px;
}

i {
color: #33333C;
color: #33333c;
}
}

Expand Down
10 changes: 10 additions & 0 deletions ts/webui/src/static/style/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,13 @@
max-height: 335px;
overflow-y: auto;
}

.addRemoveIcon {
i { font-size: 20px; }

&:hover {
i {
color: #0071bc;
}
}
}