@ant-design/icons#RocketOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#RocketOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From juno with Apache License 2.0 | 4 votes |
|
renderForm(editor, addrOptions, metadata, response) {
const { request_loading } = this.props;
return (
<Form ref={this.form} className={styles.layoutContent}>
<div className={styles.caseNameLine}>
<Form.Item
rules={[{ required: true }]}
name={'case_name'}
initialValue={editor.form.case_name}
>
<Input placeholder="请输入用例名称" addonBefore={'Name'} />
</Form.Item>
<Popover content="Ctrl-S">
<Button icon={<FileAddOutlined />} onClick={this.onSave}>
Save
</Button>
</Popover>
</div>
<div className={styles.caseAddrLine}>
<Form.Item name={'address'}>
<AutoComplete optionLabelProp="value" dataSource={addrOptions}>
<Input addonBefore={'Address'} placeholder="请输入地址" />
</AutoComplete>
</Form.Item>
<Button
icon={<RocketOutlined />}
type="primary"
loading={request_loading}
onClick={this.onSendRequest}
>
Send
</Button>
</div>
<div className={styles.basicInfoLine}>
<Descriptions bordered size="small">
<Descriptions.Item label="App">{editor.info.app_name}</Descriptions.Item>
<Descriptions.Item label="Service">{editor.info.service_name}</Descriptions.Item>
<Descriptions.Item label="Method">{editor.info.method_name}</Descriptions.Item>
</Descriptions>
</div>
<div className={styles.inputOutputLayout}>
<div className={styles.inputContainer}>
<Tabs
className={styles.inputTabs}
tabBarStyle={{ height: '100%' }}
defaultActiveKey={'payload'}
onChange={(tab) => {
let dimension = { width: '100%', height: 'auto' };
setTimeout(() => {
switch (tab) {
case 'payload':
this.payloadEditor?.layout();
break;
case 'script':
this.scriptEditor?.layout();
break;
}
});
}}
renderTabBar={(props, DefaultTab) => {
return (
<DefaultTab
{...props}
style={{
padding: '0 10px',
margin: '0',
backgroundColor: 'rgb(250,250,250)',
}}
/>
);
}}
>
<Tabs.TabPane tab={'Payload'} key={'payload'}>
<div className={styles.grpcPayload}>
<MonacoEditor
width={'100%'}
height={'663px'}
value={editor.form.input}
onChange={(val) => {
this.onGrpcInputChange(val);
}}
language={'json'}
theme={'vs'}
options={{
automaticLayout: true,
}}
editorDidMount={(editor) => {
this.payloadEditor = editor;
}}
/>
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={'Metadata'} key={'metadata'}>
<div className={styles.metadataInputLine}>
<KeyValueEditor data={metadata} onChange={this.onMetadataChange} />
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={'Test Script'} key={'script'}>
<MonacoEditor
width={'100%'}
height={'663px'}
value={editor.form.script || DefaultScript}
language={'javascript'}
theme={'vs'}
onChange={(val) => {
this.onTestScriptChange(val);
}}
editorDidMount={(editor) => {
this.scriptEditor = editor;
}}
/>
</Tabs.TabPane>
</Tabs>
</div>
<div className={styles.outputContainer}>
<Tabs
className={styles.outputTabs}
tabBarStyle={{ height: '100%' }}
defaultActiveKey={'response'}
renderTabBar={(props, DefaultTab) => {
return (
<DefaultTab
{...props}
style={{
padding: '0 10px',
margin: '0',
backgroundColor: 'rgb(250,250,250)',
}}
/>
);
}}
>
<Tabs.TabPane tab={'Response'} key={'response'}>
<div className={styles.responseContainer}>
{response === null ? (
<div style={{ textAlign: 'center', padding: '40px', color: '#c3c3c3' }}>
<RocketOutlined style={{ fontSize: '48px' }} />
<p style={{ marginTop: '20px' }}>发起请求获取响应</p>
</div>
) : (
<Spin spinning={request_loading}>
<div
className={
styles.responseStatusBar +
(response.status === 'success' ? '' : ' ' + styles.responseStatusBarFail)
}
>
<span className={styles.statusBlock}>
<span>Test: </span>
<span>
{response.test_passed ? (
<span className={styles.statusSuccess}>passed</span>
) : (
<span className={styles.statusFail}>failed</span>
)}
</span>
</span>
<span className={styles.statusBlock}>
<span>Status: </span>
<span>
{response.status === 'success' ? (
<span className={styles.statusSuccess}>success</span>
) : (
<span className={styles.statusFail}>fail</span>
)}
</span>
</span>
<span className={styles.statusBlock}>
<span>Time: </span>
<span className={styles.statusSuccess}>{response.time_cost}ms</span>
</span>
</div>
{response.status === 'success' ? (
// 成功
<div className={styles.responseSuccess}>
<MonacoEditor
width={'100%'}
height={'621px'}
value={response.output}
language={'json'}
theme={'vs'}
options={{
readOnly: true,
automaticLayout: true,
}}
/>
</div>
) : (
// 失败
<div className={styles.responseFail}>
<Tag color="red">error</Tag>
{response.error}
</div>
)}
</Spin>
)}
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={'Logs'} key={'logs'}>
{response?.logs && Object.keys(response?.logs).length ? (
<Descriptions size={'small'} bordered style={{ margin: '10px' }}>
{Object.keys(response?.logs || {}).map((key, idx) => {
return (
<Descriptions.Item label={key} key={idx} span={24}>
{response.logs[key]}
</Descriptions.Item>
);
})}
</Descriptions>
) : (
<Empty style={{ margin: '10px' }} />
)}
</Tabs.TabPane>
</Tabs>
</div>
</div>
</Form>
);
}
Example #2
| Source File: editor.jsx From juno with Apache License 2.0 | 4 votes |
|
function Editor(props) {
const { request, dispatch, httpPort, addrList, currentAppName, response, sendStatus } = props;
const [nameEditing, nameEditAction] = useBoolean(false);
const onFieldChange = (fields) => {
dispatch({
type: 'HttpDebug/updateCurrentRequest',
payload: {
...fields,
},
});
};
const onSave = () => {
if (request.id) {
dispatch({
type: 'HttpDebug/saveTestCase',
payload: request,
}).then((r) => {
dispatch({
type: 'HttpDebug/fetchCollections',
payload: {
appName: currentAppName,
},
});
});
} else {
dispatch({
type: 'HttpDebug/showModalNewTestCase',
payload: {
visible: true,
},
});
}
};
const onSend = () => {
if (!request.method || !request.url) {
return message.error('请输入Method和 url');
}
dispatch({
type: 'HttpDebug/sendRequest',
payload: request,
});
};
const isSuccessCode = (code) => {
return code >= 200 && code < 300;
};
const renderRequestResult = () => {
const { response, responseStatus, responseError } = props;
if (sendStatus === 'done') {
if (responseStatus === 'success') {
let success = isSuccessCode(response.code);
return (
<div>
{/*<div*/}
{/* className={styles.responseStatusBar + (success ? '' : ' ' + styles.responseStatusBarFail)}>*/}
{/* <span className={styles.statusBlock}>*/}
{/* <span>Status: </span>*/}
{/* <span>*/}
{/* {success ? <span className={styles.statusSuccess}>{response.code}</span>*/}
{/* : <span className={styles.statusFail}>{response.code}</span>}*/}
{/* </span>*/}
{/* </span>*/}
{/* <span className={styles.statusBlock}>*/}
{/* <span>Time: </span>*/}
{/* <span className={styles.statusSuccess}>*/}
{/* {response.time_cost}ms*/}
{/* </span>*/}
{/* </span>*/}
{/*</div>*/}
<div className={styles.responseSuccess}>
<Tabs
size={'small'}
renderTabBar={(props, DefaultTabBar) => {
return (
<DefaultTabBar {...props} style={{ paddingLeft: '10px', margin: '0px' }} />
);
}}
>
<Tabs.TabPane tab={'Body'} key={'body'}>
<MonacoEditor
width={'100%'}
height={'348px'}
language={'javascript'}
value={response.body}
theme={'vs'}
options={{
readOnly: true,
automaticLayout: true,
}}
/>
</Tabs.TabPane>
<Tabs.TabPane tab={'Header'} key={'header'}>
<ResponseHeaders headers={response.headers} style={{ height: '340px' }} />
</Tabs.TabPane>
<Tabs.TabPane tab={'Logs'} key={'logs'}>
<TestLog logs={response.logs} style={{ height: '340px' }} />
</Tabs.TabPane>
</Tabs>
</div>
</div>
);
} else {
// 失败
return (
<div className={styles.responseFail}>
<Tag color={'red'}>{responseStatus}</Tag>
{responseError}
</div>
);
}
}
if (sendStatus === 'not_start') {
return (
<div style={{ textAlign: 'center', padding: '40px', color: '#c3c3c3' }}>
<RocketOutlined />
<p style={{ marginTop: '20px' }}>发起请求获取响应</p>
</div>
);
}
if (sendStatus === 'sending') {
return (
<div style={{ textAlign: 'center', padding: '40px' }}>
<Spin tip={'请求中...'} />
</div>
);
}
};
return (
<div className={styles.httpDebugContainer}>
<div className={styles.nameBar}>
{!nameEditing ? (
<>
{request?.name || 'Untitled'}
<span>
<Button
type={'link'}
onClick={() => {
nameEditAction.setTrue();
}}
>
<EditOutlined />
</Button>
</span>
</>
) : (
<Input
onChange={(ev) => {
onFieldChange({ name: ev.target.value });
}}
onBlur={() => {
onSave();
nameEditAction.setFalse();
}}
style={{ maxWidth: 200 }}
defaultValue={request.name}
/>
)}
</div>
<div className={styles.methodUrlLine}>
<Select
defaultValue={'GET'}
value={request.method}
onChange={(val) => {
onFieldChange({ method: val });
}}
>
{['GET', 'POST', 'PUT', 'PATCH'].map((item, idx) => (
<Select.Option value={item} key={idx}>
{item}
</Select.Option>
))}
</Select>
<AutoComplete
value={request.url}
onChange={(val) => {
onFieldChange({ url: val });
}}
>
{(addrList || []).map((item) => {
return (
<AutoComplete.Option value={`http://${item.addr}:${httpPort}`}>
<Tag>{item.env}</Tag> {`http://${item.addr}:${httpPort}`}
</AutoComplete.Option>
);
})}
</AutoComplete>
<Button
type={'primary'}
onClick={() => {
onSend();
}}
>
Send
</Button>
<Button
onClick={() => {
onSave();
}}
>
Save
</Button>
</div>
<div className={styles.requestParamEditBox}>
<Tabs
size={'small'}
renderTabBar={(tabBarProps, DefaultTabBar) => {
return (
<div style={{ position: 'relative' }}>
<div
style={{
position: 'absolute',
width: '100px',
height: '50px',
right: '10px',
top: '0px',
zIndex: 1,
paddingTop: '10px',
}}
>
<Button
type={'link'}
onClick={() => {
props.dispatch({
type: 'HttpDebug/showModalScriptEditor',
payload: true,
});
}}
>
Test Script
</Button>
</div>
<DefaultTabBar
{...tabBarProps}
style={{
backgroundColor: 'rgb(250,250,250)',
padding: '10px 0 0 10px',
}}
/>
</div>
);
}}
>
<Tabs.TabPane tab={'Params'} key={'params'}>
<ReactScroll horizontal={true} style={{ height: '200px', width: '100%' }}>
<KeyValueEditor
onChange={(data) => {
onFieldChange({ query: data });
}}
data={request.query}
/>
</ReactScroll>
</Tabs.TabPane>
<Tabs.TabPane tab={'Headers'} key={'headers'}>
<ReactScroll style={{ height: '200px', width: '100%' }}>
<KeyValueEditor
onChange={(data) => {
onFieldChange({ headers: data });
}}
data={request.headers}
/>
</ReactScroll>
</Tabs.TabPane>
<Tabs.TabPane tab={'Body'} key={'body'}>
<ReactScroll style={{ height: '200px', width: '100%' }}>
<BodyTabPane />
</ReactScroll>
</Tabs.TabPane>
</Tabs>
</div>
<div className={styles.responseTitleBar}>
<span>Response</span>
{response && sendStatus === 'done' && (
<div style={{ textAlign: 'right' }}>
<span>
{response.success ? (
<span className={styles.statusSuccess}>Test Passed</span>
) : (
<span className={styles.statusFail}>Test Failed</span>
)}
</span>
<span className={styles.statusBlock}>
<span>Status: </span>
<span>{response.code}</span>
</span>
<span className={styles.statusBlock}>
<span>Time: </span>
<span className={styles.statusSuccess}>{response.time_cost}ms</span>
</span>
</div>
)}
</div>
<div>{renderRequestResult()}</div>
</div>
);
}
