@ant-design/icons#DownCircleTwoTone JavaScript Examples
The following examples show how to use
@ant-design/icons#DownCircleTwoTone.
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: TopicData.js From kafka-map with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<div className='kd-page-header'>
<PageHeader
className="site-page-header"
onBack={() => {
this.props.history.goBack();
}}
subTitle={<FormattedMessage id="consume-message"/>}
title={this.state.topic}
>
<Row>
<Space size='large'>
{
this.state.topicInfo ?
<>
<Statistic title="Beginning Offset"
value={this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}/>
<Statistic title="End Offset"
value={this.state.topicInfo['partitions'][this.state.partition]['endOffset']}/>
<Statistic title="Size"
value={this.state.topicInfo['partitions'][this.state.partition]['endOffset'] - this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}/>
</>
: undefined
}
</Space>
</Row>
</PageHeader>
</div>
<div className='kd-page-header' style={{padding: 20}}>
<Form ref={this.form} onFinish={this.pullMessage}
initialValues={{
count: this.state.count,
partition: this.state.partition,
autoOffsetReset: this.state.autoOffsetReset,
}}>
<Row gutter={24}>
<Col span={6}>
<Form.Item
name={'partition'}
label={'Partition'}
>
<Select onChange={(value) => {
this.setState({
partition: value
}, this.handlePartitionChange);
}}>
{
this.state.topicInfo ?
this.state.topicInfo['partitions'].map(item => {
return <Select.Option key={'p' + item['partition']}
value={item['partition']}>{item['partition']}</Select.Option>
}) : undefined
}
</Select>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name={'autoOffsetReset'}
label={'Auto Offset Reset'}
>
<Select onChange={(value) => {
this.setState({
autoOffsetReset: value
}, this.handlePartitionChange);
}}>
<Select.Option value="earliest">
<FormattedMessage id="earliest"/>
</Select.Option>
<Select.Option value="newest">
<FormattedMessage id="newest"/>
</Select.Option>
</Select>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name={'offset'}
label={'Offset'}
>
{
this.state.topicInfo ?
<InputNumber
min={this.state.topicInfo['partitions'][this.state.partition]['beginningOffset']}
max={this.state.topicInfo['partitions'][this.state.partition]['endOffset']}
// defaultValue={this.state.topicInfo['partitions'][this.state.partition]['endOffset'] - this.state.count}
value={this.state.offset}
style={{width: '100%'}}
onChange={(value) => {
this.setState({
offset: value
})
}}
/>
: undefined
}
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name={'count'}
label={'Count'}
>
<InputNumber min={1} style={{width: '100%'}}/>
</Form.Item>
</Col>
<Col span={6} key='keyFilter'>
<Form.Item
name={'keyFilter'}
label={'key'}
>
<Input allowClear placeholder="filter key"/>
</Form.Item>
</Col>
<Col span={6} key='valueFilter'>
<Form.Item
name={'valueFilter'}
label={'value'}
>
<Input allowClear placeholder="filter value"/>
</Form.Item>
</Col>
<Col span={12} style={{textAlign: 'right'}}>
<Space>
<Button type="primary" htmlType="submit" loading={this.state.loading}>
<FormattedMessage id="pull"/>
</Button>
<Button type="default" danger onClick={this.handleReset}>
<FormattedMessage id="reset"/>
</Button>
</Space>
</Col>
</Row>
</Form>
</div>
<div className='kd-content'>
<List
itemLayout="horizontal"
dataSource={this.state.items}
loading={this.state.loading}
pagination={{
showSizeChanger: true,
total: this.state.items.length,
showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
}}
renderItem={(item, index) => {
const title = <>
<Space>
<Text code>partition:</Text>
<Text>{item['partition']}</Text>
<Text code>key:</Text>
<Text>{item['key']}</Text>
<Text code>offset:</Text>
<Text>{item['offset']}</Text>
<Text code>timestamp:</Text>:
<Tooltip
title={dayjs(item['timestamp']).format("YYYY-MM-DD HH:mm:ss")}>
<Text>{dayjs(item['timestamp']).fromNow()}</Text>
</Tooltip>
</Space>
</>;
const description = <Row wrap={false}>
<Col flex="none">
<div style={{padding: '0 5px'}}>
{
item['format'] ?
<DownCircleTwoTone onClick={() => {
let items = this.state.items;
items[index]['format'] = undefined;
this.setState({
items: items
})
}}/> :
<RightCircleTwoTone onClick={() => {
let items = this.state.items;
try {
let obj = JSON.parse(items[index]['value']);
items[index]['format'] = JSON.stringify(obj, null, 4);
this.setState({
items: items
})
} catch (e) {
}
}}/>
}
</div>
</Col>
<Col flex="auto">
<pre>{item['format'] ? item['format'] : item['value']}</pre>
</Col>
</Row>;
return <List.Item>
<List.Item.Meta
title={title}
description={description}
/>
</List.Item>;
}}
/>
</div>
</div>
);
}
