free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

嵌套修改

dev
wenlele 2 years ago
parent
783926c55b
commit
7d459387fe
3 changed files with 73 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      web/client/src/sections/data/containers/notebook.jsx
  2. 16
      web/client/src/sections/facility/containers/monitor.jsx
  3. 28
      web/client/src/sections/facility/containers/other.jsx

55
web/client/src/sections/data/containers/notebook.jsx
View File

@ -12,44 +12,47 @@ const Grafana = (props) => {
}, [])
return (
<div style={{ height: clientHeight - 56, width: 'calc(100% + 16px)', margin: "-12px -8px", }}>
<div style={{ width: '100%', height: 40, display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<a target='_blank' href={pomsNotebook}
style={{ marginRight: 10 }}
<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> */}
<div style={{
height: 'calc(100% - 40px)', width: '100%',
// backgroundImage: "url('/assets/images/background/General.png')",
// backgroundSize: 'cover',
// backgroundRepeat: 'no-repeat',
height: 'calc(100%)', width: '100%',
backgroundImage: "url('/assets/images/background/General.png')",
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
// position: 'relative',
// top: -12, left: -8,
}}>
<iframe
{/* <iframe
frameBorder="0"
allowFullScreen='true'
id='pomsNotebook'
src={pomsNotebook}
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={pomsMonitor}
// style={{ width: '100%', height: '100%', display: 'block' }}
// > 进入Grafana</a>
// </div>
// <div style={{ width: 679, height: 40, fontSize: 28, fontWeight: 400, color: '#146AD7', lineHeight: '40px', marginTop: 40 }}>
// 点击可跳转服务器监控网站Grafana</div>
// </div> */}
/> */}
<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>

16
web/client/src/sections/facility/containers/monitor.jsx
View File

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
const SetControl = (props) => {
const { dispatch, actions, clientHeight, history ,pomsAmbari} = props
const { dispatch, actions, clientHeight, history, pomsAmbari, pomsKubesphere } = props
useEffect(() => {
}, [])
@ -26,24 +26,28 @@ const SetControl = (props) => {
<div style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }} onClick={() => {
history.push({ pathname: '/facility/serverInformation/grafana', })
}}>
<img src='/assets/images/background/grafana.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' }}>grafana</div>
<div style={{ fontSize: 16, color: '#646566' }}>监控可视化工具</div>
</div>
</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/serverInformation/kubesphere',})
}}>
{/* <div style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }} onClick={() => {
history.push({ pathname: '/facility/serverInformation/kubesphere', })
}}> */}
<a target='_blank' href={pomsKubesphere} style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }}>
<img src='/assets/images/background/kubesphere.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' }}>kubesphere</div>
<div style={{ fontSize: 16, color: '#646566' }}>容器应用管理服务</div>
</div>
</div>
</a>
{/* </div> */}
</div>
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}>
@ -66,7 +70,7 @@ function mapStateToProps (state) {
return {
clientHeight: global.clientHeight,
pomsAmbari: global.pomsAmbari,
pomsKubesphere: global.pomsKubesphere,
};
}

28
web/client/src/sections/facility/containers/other.jsx
View File

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
const SetControl = (props) => {
const { dispatch, actions, clientHeight, history } = props
const { dispatch, actions, clientHeight, history, pomsKowl, pomsPghero, pomsEs } = props
useEffect(() => {
@ -24,39 +24,45 @@ const SetControl = (props) => {
display: 'flex'
}}>
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}>
<div style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }} onClick={() => {
{/* <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>
</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',})
}}>
{/* <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>
</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={() => {
{/* <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>
</div>
</a>
{/* </div> */}
</div>
</div>

Write Preview
Loading…
Cancel
Save