OpenRow.tsx 7.41 KB
Newer Older
Lijiao's avatar
Lijiao committed
1
import * as React from 'react';
2
import * as copy from 'copy-to-clipboard';
3
import { Stack, PrimaryButton, Pivot, PivotItem } from '@fluentui/react';
4
import { Trial } from '../../static/model/trial';
5
import { MANAGER_IP } from '../../static/const';
6
7
8
9
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import JSONTree from 'react-json-tree';
import PaiTrialLog from '../public-child/PaiTrialLog';
import TrialLog from '../public-child/TrialLog';
10
import MessageInfo from '../modals/MessageInfo';
11
import '../../static/style/overview/overview.scss';
12
import '../../static/style/copyParameter.scss';
13
import '../../static/style/openRow.scss';
Lijiao's avatar
Lijiao committed
14
15

interface OpenRowProps {
16
    trialId: string;
Lijiao's avatar
Lijiao committed
17
18
}

Lijiao's avatar
Lijiao committed
19
interface OpenRowState {
20
21
22
    typeInfo: string;
    info: string;
    isHidenInfo: boolean;
Lijiao's avatar
Lijiao committed
23
24
25
}

class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
Lijiao's avatar
Lijiao committed
26
27
    constructor(props: OpenRowProps) {
        super(props);
Lijiao's avatar
Lijiao committed
28
        this.state = {
29
30
31
            typeInfo: '',
            info: '',
            isHidenInfo: true
Lijiao's avatar
Lijiao committed
32
        };
33
34
    }

35
36
    hideMessageInfo = (): void => {
        this.setState(() => ({ isHidenInfo: true }));
37
    };
Lijiao's avatar
Lijiao committed
38

39
40
41
    /**
     * info: message content
     * typeInfo: message type: success | error...
42
     * continuousTime: show time, 2000ms
43
44
45
46
     */
    getCopyStatus = (info: string, typeInfo: string): void => {
        this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
        setTimeout(this.hideMessageInfo, 2000);
47
    };
Lijiao's avatar
Lijiao committed
48

49
50
51
52
53
    copyParams = (trial: Trial): void => {
        // get copy parameters
        const params = JSON.stringify(trial.description.parameters, null, 4);
        if (copy.default(params)) {
            this.getCopyStatus('Success copy parameters to clipboard in form of python dict !', 'success');
54
        } else {
55
            this.getCopyStatus('Failed !', 'error');
56
        }
57
    };
58

Yuge Zhang's avatar
Yuge Zhang committed
59
60
61
62
63
64
65
    openTrialLog = (filename: string): void => {
        window.open(`${MANAGER_IP}/trial-file/${this.props.trialId}/${filename}`);
    };

    openModelOnnx = (): void => {
        // TODO: netron might need prefix.
        window.open(`/netron/index.html?url=${MANAGER_IP}/trial-file/${this.props.trialId}/model.onnx`);
66
    };
67

Lijiao's avatar
Lijiao committed
68
    render(): React.ReactNode {
69
        const { isHidenInfo, typeInfo, info } = this.state;
70
71
        const trialId = this.props.trialId;
        const trial = TRIALS.getTrial(trialId);
72
        const logPathRow = trial.info.logPath || "This trial's log path is not available.";
Lijiao's avatar
Lijiao committed
73
        return (
74
75
            <Stack className='openRow'>
                <Stack className='openRowContent'>
76
                    <Pivot>
77
78
79
80
81
82
83
84
85
86
                        <PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
                            {trial.info.hyperParameters !== undefined ? (
                                <Stack id='description'>
                                    <Stack className='bgHyper'>
                                        <JSONTree
                                            hideRoot={true}
                                            shouldExpandNode={(): boolean => true} // default expandNode
                                            getItemString={(): null => null} // remove the {} items
                                            data={trial.description.parameters}
                                        />
87
                                    </Stack>
88
89
90
91
92
93
94
95
                                    <Stack horizontal className='copy'>
                                        <PrimaryButton
                                            onClick={this.copyParams.bind(this, trial)}
                                            text='Copy as json'
                                            styles={{ root: { width: 128, marginRight: 10 } }}
                                        />
                                        {/* copy success | failed message info */}
                                        {!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
96
                                    </Stack>
97
98
99
100
101
102
103
                                </Stack>
                            ) : (
                                <Stack className='logpath'>
                                    <span className='logName'>Error: </span>
                                    <span className='error'>{`This trial's parameters are not available.'`}</span>
                                </Stack>
                            )}
104
                        </PivotItem>
105
                        <PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
                            {
                                // FIXME: this should not be handled in web UI side
                                EXPERIMENT.trainingServicePlatform !== 'local' ? (
                                    <PaiTrialLog
                                        logStr={logPathRow}
                                        id={trialId}
                                        logCollection={EXPERIMENT.logCollectionEnabled}
                                    />
                                ) : (
                                    <div>
                                        <TrialLog logStr={logPathRow} id={trialId} />
                                        {/* view each trial log in drawer*/}
                                        <div id='trialog'>
                                            <div className='copy' style={{ marginTop: 15 }}>
                                                <PrimaryButton
Yuge Zhang's avatar
Yuge Zhang committed
121
                                                    onClick={this.openTrialLog.bind(this, 'trial.log')}
122
123
124
                                                    text='View trial log'
                                                />
                                                <PrimaryButton
Yuge Zhang's avatar
Yuge Zhang committed
125
                                                    onClick={this.openTrialLog.bind(this, 'stderr')}
126
127
128
129
                                                    text='View trial error'
                                                    styles={{ root: { marginLeft: 15 } }}
                                                />
                                                <PrimaryButton
Yuge Zhang's avatar
Yuge Zhang committed
130
                                                    onClick={this.openTrialLog.bind(this, 'stdout')}
131
132
133
134
                                                    text='View trial stdout'
                                                    styles={{ root: { marginLeft: 15 } }}
                                                />
                                            </div>
135
136
                                        </div>
                                    </div>
137
138
                                )
                            }
139
                        </PivotItem>
Yuge Zhang's avatar
Yuge Zhang committed
140
141
142
143
144
145
146
147
148
149
150
151
                        {EXPERIMENT.metadata.tag.includes('retiarii') ? (
                            <PivotItem headerText='Visualization' key='3' itemIcon='FlowChart'>
                                <div id='visualization'>
                                    <div id='visualizationText'>Visualize models with 3rd-party tools.</div>
                                    <PrimaryButton
                                        onClick={this.openModelOnnx.bind(this)}
                                        text='Netron'
                                        styles={{ root: { marginLeft: 15 } }}
                                    />
                                </div>
                            </PivotItem>
                        ) : null}
152
                    </Pivot>
153
                </Stack>
154
            </Stack>
Lijiao's avatar
Lijiao committed
155
156
157
158
        );
    }
}

159
export default OpenRow;