运维服务中台
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.
 
 
 
 
 

73 lines
2.8 KiB

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Button } from '@douyinfe/semi-ui';
const Grafana = (props) => {
const { dispatch, actions, user, loading, socket, pomsNotebook, clientHeight } = props
useEffect(() => {
}, [])
return (
<div style={{ height: clientHeight - 56, width: 'calc(100% + 16px)', margin: "-12px -8px", position: 'relative' }}>
{/* <div style={{ width: 'calc(100%)', height: 40, padding:'0 10px',display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Button theme='light' type='secondary' onClick={() => {
history.push({ pathname: '/facility/serverInformation/monitor', })
}}>返回</Button>
<a target='_blank' href={pomsMonitor}
><Button theme='light' type='secondary'>进入网页</Button></a>
</div> */}
<div style={{
height: 'calc(100%)', width: '100%',
backgroundImage: "url('/assets/images/background/General.png')",
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
// position: 'relative',
// top: -12, left: -8,
}}>
{/* <iframe
frameBorder="0"
allowFullScreen='true'
id='monitor'
src={pomsMonitor}
width={'100%'}
height={'100%'}
// wmode="transparent"
// style={{ pointerEvents: 'none' }}
/> */}
<div style={{ position: 'absolute', top: 'calc(50%)', left: 'calc(10%)', }}>
<div style={{
width: 184, height: 48, fontWeight: 400, color: '#FFFFFF', lineHeight: '48px', backgroundImage: "url('/assets/images/background/B.png')", textAlign: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
}}>
<a target='_blank' href={pomsNotebook}
style={{ width: '100%', height: '100%', display: 'block' }}
> 进入Notebook</a>
</div>
<div style={{ width: 679, height: 40, fontSize: 28, fontWeight: 400, color: '#146AD7', lineHeight: '40px', marginTop: 40 }}>
点击可跳转 数据分析网站notebook</div>
</div>
</div>
{/* <iframe frameBorder="0" src={pomsMonitor} style={{height: 'calc(100vh - 80px)', width: 'calc(100%)'}} /> */}
</div>
)
}
function mapStateToProps (state) {
const { auth, global, members, webSocket } = state;
return {
// loading: members.isRequesting,
// user: auth.user,
// actions: global.actions,
// members: members.data,
clientHeight: global.clientHeight,
pomsNotebook: global.pomsNotebook,
};
}
export default connect(mapStateToProps)(Grafana);