You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
3.9 KiB
84 lines
3.9 KiB
import React, { useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
|
|
|
|
const SetControl = (props) => {
|
|
const { dispatch, actions, clientHeight, history, pomsKowl, pomsPghero, pomsEs } = props
|
|
|
|
useEffect(() => {
|
|
|
|
}, [])
|
|
|
|
|
|
return (
|
|
<div style={{ height: clientHeight - 70, width: '100%', }}>
|
|
|
|
<div style={{
|
|
backgroundImage: "url('/assets/images/background/tool.png')",
|
|
backgroundSize: '100% 100%',
|
|
backgroundRepeat: 'no-repeat',
|
|
width: 'calc(100% - 20px)',
|
|
height: 310,
|
|
margin: "20px 0 0 10px",
|
|
display: 'flex'
|
|
}}>
|
|
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}>
|
|
{/* <div style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }} onClick={() => {
|
|
history.push({ pathname: '/facility/other/kowl', })
|
|
}}> */}
|
|
<a target='_blank' href={pomsKowl} style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }}>
|
|
<img src='/assets/images/background/kowl.png' style={{ width: 200, height: 200, marginBottom: 20 }} />
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ fontWeight: 500, fontSize: 18, color: '#000', width: 75, height: 25, margin: '16px 0 8px' }}>kowl监控</div>
|
|
<div style={{ fontSize: 16, color: '#646566' }}>kafka消息可视化工具</div>
|
|
</div>
|
|
</a>
|
|
{/* </div> */}
|
|
</div>
|
|
|
|
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}>
|
|
{/* <div style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }} onClick={() => {
|
|
history.push({ pathname: '/facility/other/pghero', })
|
|
}}> */}
|
|
<a target='_blank' href={pomsPghero} style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }}>
|
|
<img src='/assets/images/background/pghero.png' style={{ width: 200, height: 200, marginBottom: 20 }} />
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ fontWeight: 500, fontSize: 18, color: '#000', width: 75, height: 25, margin: '16px 0 8px' }}>pghero</div>
|
|
<div style={{ fontSize: 16, color: '#646566' }}>PostgreSQL 性能监控工具</div>
|
|
</div>
|
|
</a>
|
|
{/* </div> */}
|
|
</div>
|
|
|
|
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}>
|
|
{/* <div style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }} onClick={() => {
|
|
history.push({ pathname: '/facility/other/es', })
|
|
}}> */}
|
|
<a target='_blank' href={pomsEs} style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }}>
|
|
<img src='/assets/images/background/es.png' style={{ width: 200, height: 200, marginBottom: 20 }} />
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ fontWeight: 500, fontSize: 18, color: '#000', width: 75, height: 25, margin: '16px 0 8px' }}>es监控</div>
|
|
<div style={{ fontSize: 16, color: '#646566' }}>es可视化管理工具</div>
|
|
</div>
|
|
</a>
|
|
{/* </div> */}
|
|
</div>
|
|
|
|
</div>
|
|
</div >
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, members, webSocket } = state;
|
|
return {
|
|
clientHeight: global.clientHeight,
|
|
pomsKowl: global.pomsKowl,
|
|
pomsPghero: global.pomsPghero,
|
|
pomsEs: global.pomsEs,
|
|
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(SetControl);
|
|
|