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

ts/webui/src/components/managementExp/ExperimentManager.tsx

@@ -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

 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

 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

+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

@@ -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

@@ -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

@@ -30,4 +30,4 @@ $tableHeight: 432px;
         padding-left: 6px;
         box-sizing: border-box;
     }
-}
+}
\ No newline at end of file