@ant-design/icons#ClockCircleOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#ClockCircleOutlined.
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.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
</div>
<h5 className="mb-3">
<strong>Alternate</strong>
</h5>
<div className="mb-5">
<Timeline mode="alternate">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
</Timeline.Item>
<Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Technical testing 2015-09-01
</Timeline.Item>
</Timeline>
</div>
</div>
)
}
Example #2
| Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/badge', module).add('basic', () =>
<div>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={0} showZero>
<a href="#" className="head-example" />
</Badge>
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
<a href="#" className="head-example" />
</Badge>
</div>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Simplest Usage. Badge will be hidden when <code>count</code> is <code>0</code>, but we can use <code>showZero</code> to show it.</p></>) } });
Example #3
| Source File: no-wrapper.jsx From virtuoso-design-system with MIT License | 6 votes |
|
Demo = () => {
const [show, setShow] = React.useState(true);
return (
<Space>
<Switch
checked={show}
onChange={() => {
setShow(!show);
}}
/>
<Badge count={show ? 25 : 0} />
<Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
<Badge count={show ? 4 : 0} className="site-badge-count-4" />
<Badge
className="site-badge-count-109"
count={show ? 109 : 0}
style={{ backgroundColor: '#52c41a' }}
/>
</Space>
);
}
Example #4
| Source File: status.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/tag', module).add('status', () =>
<>
<Divider orientation="left">Without icon</Divider>
<div>
<Tag color="success">success</Tag>
<Tag color="processing">processing</Tag>
<Tag color="error">error</Tag>
<Tag color="warning">warning</Tag>
<Tag color="default">default</Tag>
</div>
<Divider orientation="left">With icon</Divider>
<div>
<Tag icon={<CheckCircleOutlined />} color="success">
success
</Tag>
<Tag icon={<SyncOutlined spin />} color="processing">
processing
</Tag>
<Tag icon={<CloseCircleOutlined />} color="error">
error
</Tag>
<Tag icon={<ExclamationCircleOutlined />} color="warning">
warning
</Tag>
<Tag icon={<ClockCircleOutlined />} color="default">
waiting
</Tag>
<Tag icon={<MinusCircleOutlined />} color="default">
stop
</Tag>
</div>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>We preset five different colors, you can set color property such as <code>success</code>,<code>processing</code>,<code>error</code>,<code>default</code> and <code>warning</code> to indicate specific status.</p></>) } });
Example #5
| Source File: alternate.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('alternate', () =>
<Timeline mode="alternate">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</Timeline.Item>
<Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Technical testing 2015-09-01
</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Alternate timeline.</p></>) } });
Example #6
| Source File: custom.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('custom', () =>
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined className="timeline-clock-icon" />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set a node as an icon or other custom element.</p></>) } });
Example #7
| Source File: right.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('right', () =>
<Timeline mode="right">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Right alternate timeline.</p></>) } });
Example #8
| Source File: Event.js From website with MIT License | 5 votes |
|
EventItem = ({
city = 'Em todo o estado',
status = 'F',
title,
description,
event,
hideAuthor = false
}) => {
const { author } = event;
const statusMessages = messages(status);
return (
<Timeline.Item
className={status}
dot={statusMessages.icon}
color={statusMessages.color}
>
<div className='city'>
{city}
{event?.region?.initial && ` - ${event?.region?.initial}`}
{author && !hideAuthor && author?.name && (
<Popover
content={
<div style={{ textAlign: 'center' }}>
Evento criado por {author?.name}. <br />
<a>Clique aqui</a> para fazer parte de nossa equipe de
colaboradores.
</div>
}
>
<span className='info'>
<NotificationOutlined />
<span>{author.name}</span>
</span>
</Popover>
)}
</div>
<div className='meta'>
<Popover content={<span style={{ textAlign: 'center' }}>{title}</span>}>
<span className='label'>{title} - </span>
</Popover>
<span className='status'>{statusMessages.message} - </span>
{(event.from_date !== null || event.to_date !== null) && (
<Popover
content={<span>Período de vigência do evento em questão.</span>}
>
<span className='info'>
<ClockCircleOutlined />
<span>
{event.undefined_ends_date && 'A partir de '}
{event.from_date && formatDate(event.from_date)}
{event.to_date && ` - ${formatDate(event.to_date)}`}
</span>
</span>
</Popover>
)}
{event?.source?.source && (
<span className='info'>
<LinkOutlined />
<span>Fonte: {event.source.source}</span>
</span>
)}
</div>
<Text>{description}</Text>
{event.source?.link && (
<a href={event.source.link} target='__blank' alt={event.source.source}>
Ver mais
</a>
)}
</Timeline.Item>
);
}
Example #9
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<div className="d-inline-block mr-4">
<Badge count={5}>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
<div className="d-inline-block mr-4">
<Badge count={0} showZero>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
<div className="d-inline-block mr-4">
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
<div className="d-inline-block mr-4">
<Badge count={99}>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
<div className="d-inline-block mr-4">
<Badge count={100}>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
<div className="d-inline-block mr-4">
<Badge count={99} overflowCount={10}>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
<div className="d-inline-block mr-4">
<Badge count={1000} overflowCount={999}>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
<div className="d-inline-block mr-4">
<Badge dot>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '3px',
border: '1px solid rgba(150, 150, 150, .2)',
}}
/>
</Badge>
</div>
</div>
<h5 className="mb-3">
<strong>Standalone</strong>
</h5>
<div className="mb-5">
<div className="d-inline-block mr-4">
<Badge count={25} />
</div>
<div className="d-inline-block mr-4">
<Badge
count={4}
style={{
backgroundColor: '#fff',
color: '#999',
boxShadow: '0 0 0 1px #d9d9d9 inset',
}}
/>
</div>
<div className="d-inline-block mr-4">
<Badge count={109} style={{ backgroundColor: '#52c41a' }} />
</div>
</div>
<h5 className="mb-3">
<strong>Badge</strong>
</h5>
<div className="mb-5">
<div className="d-inline-block mr-4">
<Badge status="success" text="Success" />
</div>
<div className="d-inline-block mr-4">
<Badge status="error" text="Error" />
</div>
<div className="d-inline-block mr-4">
<Badge status="default" text="Default" />
</div>
<div className="d-inline-block mr-4">
<Badge status="processing" text="Processing" />
</div>
<div className="d-inline-block mr-4">
<Badge status="warning" text="Warning" />
</div>
</div>
</div>
)
}
Example #10
| Source File: tasks.js From hashcat.launcher with MIT License | 4 votes |
|
reBuildData() {
var data = [
{
key: "Idle",
title: "Idle",
selectable: false,
icon: <LineOutlined />,
children: []
},
{
key: "Queued",
title: "Queued",
selectable: false,
icon: <ClockCircleOutlined />,
children: []
},
{
key: "In Progress",
title: "In Progress",
selectable: false,
icon: <FireOutlined />,
children: []
},
{
key: "Finished",
title: "Finished",
selectable: false,
icon: <CheckCircleOutlined />,
children: []
}
];
Object.values(TasksStats.tasks).forEach(task => {
var category;
switch (task.process.status) {
case PROCESS_STATUS_NOTSTARTED:
if (task.priority >= 0)
category = data[1];
else
category = data[0];
break;
case PROCESS_STATUS_RUNNING:
category = data[2];
break;
case PROCESS_STATUS_FINISHED:
category = data[3];
break;
default:
category = data[0];
message.warning("unrecognized process status");
}
category.children.push({
key: task.id,
title: (
task.stats.hasOwnProperty("progress") ? (
task.id + " (" + Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100) + "%)"
) : (
task.id
)
),
icon: (
task.stats.hasOwnProperty("status") ? (
HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="warning" />
) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="processing" />
) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
<Badge status="error" />
) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
<Badge status="success" />
) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
<Badge color="pink" />
) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
<Badge color="yellow" />
) : (
<Badge status="default" />
)
) : (
<Badge color="#b7b7b7" />
)
),
});
});
for (let i = 0; i < data.length; i++) {
data[i].title = data[i].title + " (" + data[i].children.length + ")";
}
this.setState({
data: data
});
}
Example #11
| Source File: dark.jsx From virtuoso-design-system with MIT License | 4 votes |
|
render() {
const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: null,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: true,
ellipsis: true,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: false,
sortOrder: true,
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: null,
onFilter: (value, record) => record.address.includes(value),
sorter: false,
sortOrder: true,
ellipsis: true,
},
];
return (
<>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.handleDisable}
style={{ marginBottom: 16 }}
/>
<Card title="Card Title">
<Card.Grid>Content</Card.Grid>
<Card.Grid hoverable={false}>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
</Card>
<Collapse>
<Panel header="This is panel header 1" key="1">
<Collapse defaultActiveKey="1">
<Panel header="This is panel nest panel" key="1">
<p>{text}</p>
</Panel>
</Collapse>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
<Transfer
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={this.handleTransferChange}
onSelectChange={this.handleTransferSelectChange}
render={item => item.title}
disabled={disabled}
/>
<TableTransfer
dataSource={mockData}
targetKeys={targetKeys}
disabled={disabled}
showSearch={showSearch}
onChange={this.handleTableTransferChange}
filterOption={(inputValue, item) =>
item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
}
leftColumns={[
{
dataIndex: 'title',
title: 'Name',
},
{
dataIndex: 'description',
title: 'Description',
},
]}
rightColumns={[
{
dataIndex: 'title',
title: 'Name',
},
]}
/>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.triggerDisable}
style={{ marginTop: 16 }}
/>
<Switch
unCheckedChildren="showSearch"
checkedChildren="showSearch"
checked={showSearch}
onChange={this.triggerShowSearch}
style={{ marginTop: 16 }}
/>
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link
href="#components-anchor-demo-basic"
title="Basic demo with Target"
target="_blank"
/>
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
<Tabs type="card">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
<Calendar />
<Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0">
<TreeNode title="leaf" key="0-0-0-0" />
<TreeNode title="leaf" key="0-0-0-1" />
<TreeNode title="leaf" key="0-0-0-2" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title="leaf" key="0-0-1-0" />
</TreeNode>
<TreeNode title="parent 1-2" key="0-0-2">
<TreeNode title="leaf" key="0-0-2-0" />
<TreeNode title="leaf" key="0-0-2-1" />
</TreeNode>
</TreeNode>
</Tree>
<Table columns={columns} dataSource={data} footer={() => 'Footer'} />
<Table
columns={columnsTable}
dataSource={dataTable}
pagination={false}
id="table-demo-summary"
bordered
summary={pageData => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
<tr>
<th>Total</th>
<td>
<Text type="danger">{totalBorrow}</Text>
</td>
<td>
<Text>{totalRepayment}</Text>
</td>
</tr>
<tr>
<th>Balance</th>
<td colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</td>
</tr>
</>
);
}}
/>
<br />
<Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
<Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
<Card
hoverable
style={{ width: 240 }}
cover={
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
}
>
<Meta title="Europe Street beat" description="www.instagram.com" />
</Card>
<Slider defaultValue={30} />
<DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</Modal>
</>
);
}
Example #12
| Source File: MainWindow.js From ikago-web with MIT License | 4 votes |
|
render() {
return (
<Layout>
<Header className="header">
<a className="header-a" href="https://github.com/zhxie/ikago">
<img className="header-icon" src={logo} alt="icon" />
</a>
<p className="header-title">{this.state.name}</p>
<p className="header-subtitle">{this.state.version}</p>
</Header>
<Content className="content">
<Row gutter={16}>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
prefix={(() => {
if (this.state.active) {
return <CheckOutlined />;
} else if (this.state.inactive) {
return <WarningOutlined />;
} else {
return <LoadingOutlined />;
}
})()}
title="Status"
value={(() => {
if (this.state.active) {
return 'Active';
} else if (this.state.inactive) {
return 'Inactive';
} else {
return 'Connecting';
}
})()}
valueStyle={{
color: (() => {
if (!this.state.inactive) {
return '#000';
} else {
return '#cf1322';
}
})()
}}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
precision={2}
prefix={<ClockCircleOutlined />}
title="Operation Time"
value={this.convertTime(this.state.time)}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
showTotal: !this.state.showTotal
});
}}
>
<Statistic
precision={1}
prefix={<ArrowUpOutlined />}
suffix={(() => {
if (this.state.showTotal) {
return this.mapSizeUnit(this.state.outboundSizeTotal);
} else {
return this.mapSizeUnit(this.state.outboundSize) + '/s';
}
})()}
title="Outbound"
value={(() => {
if (this.state.showTotal) {
return this.convertSize(this.state.outboundSizeTotal);
} else {
return this.convertSize(this.state.outboundSize);
}
})()}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
showTotal: !this.state.showTotal
});
}}
>
<Statistic
precision={1}
prefix={<ArrowDownOutlined />}
suffix={(() => {
if (this.state.showTotal) {
return this.mapSizeUnit(this.state.inboundSizeTotal);
} else {
return this.mapSizeUnit(this.state.inboundSize) + '/s';
}
})()}
title="Inbound"
value={(() => {
if (this.state.showTotal) {
return this.convertSize(this.state.inboundSizeTotal);
} else {
return this.convertSize(this.state.inboundSize);
}
})()}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
prefix={<HourglassOutlined />}
suffix={this.state.ping < 0 ? '' : 'ms'}
title="Delay"
value={(() => {
if (this.state.ping === -1) {
return 'N/A';
} else if (this.state.ping === -2) {
return 'Timeout';
} else {
return this.state.ping;
}
})()}
valueStyle={{
color: (() => {
if (this.state.ping === -2) {
return '#cf1322';
} else if (this.state.ping >= 100) {
return '#faad14';
} else {
return '#000';
}
})()
}}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
configure: true
});
}}
>
<Statistic prefix={<SettingOutlined />} title="Configure" value={this.convertPath(this.state.path)} />
</Card>
<ConfigurationForm
visible={this.state.configure}
onOk={(values) => {
localStorage.setItem('path', values.path);
localStorage.setItem('showTotal', values.showTotal ? 'true' : 'false');
this.setState({
configure: false,
path: values.path,
showTotal: values.showTotal,
active: this.state.path !== values.path ? false : this.state.active,
inactive: this.state.path !== values.path ? false : this.state.inactive
});
}}
onCancel={() => {
this.setState({
configure: false
});
}}
initialValues={{ path: this.state.path, showTotal: this.state.showTotal }}
/>
</Col>
</Row>
<Row gutter={16}>
<Col className="content-col-table" sm={24} md={24} lg={12}>
<Table dataSource={this.mapNodes(this.state.local)} pagination={false} size="middle">
<Column title="Source" key="source" align="left" render={this.showNode} />
<Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
<Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
</Table>
</Col>
<Col className="content-col-table" sm={24} md={24} lg={12}>
<Table dataSource={this.mapNodes(this.state.remote)} pagination={false} size="middle">
<Column title="Destination" key="source" align="left" render={this.showNode} />
<Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
<Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
</Table>
</Col>
</Row>
</Content>
</Layout>
);
}
