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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      web/client/src/sections/data/containers/notebook.jsx
  2. 34
      web/client/src/sections/facility/containers/monitor.jsx
  3. 44
      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 ( return (
<div style={{ height: clientHeight - 56, width: 'calc(100% + 16px)', margin: "-12px -8px", }}> <div style={{ height: clientHeight - 56, width: 'calc(100% + 16px)', margin: "-12px -8px", position: 'relative' }}>
<div style={{ width: '100%', height: 40, display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> {/* <div style={{ width: 'calc(100%)', height: 40, padding:'0 10px',display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<a target='_blank' href={pomsNotebook} <Button theme='light' type='secondary' onClick={() => {
style={{ marginRight: 10 }} history.push({ pathname: '/facility/serverInformation/monitor', })
}}>返回</Button>
<a target='_blank' href={pomsMonitor}
><Button theme='light' type='secondary'>进入网页</Button></a> ><Button theme='light' type='secondary'>进入网页</Button></a>
</div> </div> */}
<div style={{ <div style={{
height: 'calc(100% - 40px)', width: '100%', height: 'calc(100%)', width: '100%',
// backgroundImage: "url('/assets/images/background/General.png')", backgroundImage: "url('/assets/images/background/General.png')",
// backgroundSize: 'cover', backgroundSize: 'cover',
// backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
// position: 'relative', // position: 'relative',
// top: -12, left: -8, // top: -12, left: -8,
}}> }}>
<iframe {/* <iframe
frameBorder="0" frameBorder="0"
allowFullScreen='true' allowFullScreen='true'
id='pomsNotebook' id='monitor'
src={pomsNotebook} src={pomsMonitor}
width={'100%'} width={'100%'}
height={'100%'} height={'100%'}
// wmode="transparent" // wmode="transparent"
// style={{ pointerEvents: 'none' }} // style={{ pointerEvents: 'none' }}
/> /> */}
{/* // <div style={{ position: 'absolute', top: 'calc(50%)', left: 'calc(10%)', }}> <div style={{ position: 'absolute', top: 'calc(50%)', left: 'calc(10%)', }}>
// <div style={{ <div style={{
// width: 184, height: 48, fontWeight: 400, color: '#FFFFFF', lineHeight: '48px', backgroundImage: "url('/assets/images/background/B.png')", textAlign: 'center', width: 184, height: 48, fontWeight: 400, color: '#FFFFFF', lineHeight: '48px', backgroundImage: "url('/assets/images/background/B.png')", textAlign: 'center',
// backgroundSize: 'cover', backgroundSize: 'cover',
// backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
// }}> }}>
// <a target='_blank' href={pomsMonitor} <a target='_blank' href={pomsNotebook}
// style={{ width: '100%', height: '100%', display: 'block' }} style={{ width: '100%', height: '100%', display: 'block' }}
// > 进入Grafana</a> > 进入Notebook</a>
// </div> </div>
// <div style={{ width: 679, height: 40, fontSize: 28, fontWeight: 400, color: '#146AD7', lineHeight: '40px', marginTop: 40 }}> <div style={{ width: 679, height: 40, fontSize: 28, fontWeight: 400, color: '#146AD7', lineHeight: '40px', marginTop: 40 }}>
// 点击可跳转服务器监控网站Grafana</div> 点击可跳转服务器监控网站Notebook</div>
// </div> */} </div>
</div> </div>
{/* <iframe frameBorder="0" src={pomsMonitor} style={{height: 'calc(100vh - 80px)', width: 'calc(100%)'}} /> */} {/* <iframe frameBorder="0" src={pomsMonitor} style={{height: 'calc(100vh - 80px)', width: 'calc(100%)'}} /> */}
</div> </div>

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

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

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

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
const SetControl = (props) => { const SetControl = (props) => {
const { dispatch, actions, clientHeight, history } = props const { dispatch, actions, clientHeight, history, pomsKowl, pomsPghero, pomsEs } = props
useEffect(() => { useEffect(() => {
@ -24,42 +24,48 @@ const SetControl = (props) => {
display: 'flex' display: 'flex'
}}> }}>
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}> <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', }) 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 }} /> <img src='/assets/images/background/kowl.png' style={{ width: 200, height: 200, marginBottom: 20 }} />
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <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={{ 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 style={{ fontSize: 16, color: '#646566' }}>kafka消息可视化工具</div>
</div> </div>
</div> </a>
{/* </div> */}
</div> </div>
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}> <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/pghero',}) 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 }} /> <img src='/assets/images/background/pghero.png' style={{ width: 200, height: 200, marginBottom: 20 }} />
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <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={{ 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 style={{ fontSize: 16, color: '#646566' }}>PostgreSQL 性能监控工具</div>
</div> </div>
</div> </a>
{/* </div> */}
</div> </div>
<div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}> <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', }) history.push({ pathname: '/facility/other/es', })
}}> }}> */}
<img src='/assets/images/background/es.png' style={{ width: 200, height: 200, marginBottom: 20 }} /> <a target='_blank' href={pomsEs} style={{ display: 'flex', flexDirection: 'column', width: 200, height: 310 }}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <img src='/assets/images/background/es.png' style={{ width: 200, height: 200, marginBottom: 20 }} />
<div style={{ fontWeight: 500, fontSize: 18, color: '#000', width: 75, height: 25, margin: '16px 0 8px' }}>es监控</div> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div style={{ fontSize: 16, color: '#646566' }}>es可视化管理工具</div> <div style={{ fontWeight: 500, fontSize: 18, color: '#000', width: 75, height: 25, margin: '16px 0 8px' }}>es监控</div>
</div> <div style={{ fontSize: 16, color: '#646566' }}>es可视化管理工具</div>
</div>
</a>
{/* </div> */}
</div> </div>
</div>
</div> </div>
</div > </div >
) )
} }

Write Preview
Loading…
Cancel
Save