25 changed files with 691 additions and 190 deletions
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 233 KiB |
@ -1,49 +1,70 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card } from '@douyinfe/semi-ui'; |
|||
import '../style.less' |
|||
const { Meta } = Card; |
|||
|
|||
const Console = (props) => { |
|||
const { dispatch, actions, user, loading, socket } = props |
|||
|
|||
useEffect(() => { |
|||
// ACTION 示例 |
|||
// dispatch(actions.example.getMembers(user.orgId)) |
|||
}, []) |
|||
|
|||
// websocket 使用测试 |
|||
// useEffect(() => { |
|||
// console.log(socket) |
|||
// if (socket) { |
|||
// socket.on('TEST', function (msg) { |
|||
// console.info(msg); |
|||
// }); |
|||
// return () => { |
|||
// socket.off("TEST"); |
|||
// } |
|||
// } |
|||
|
|||
// }, [socket]) |
|||
|
|||
return ( |
|||
<> |
|||
<div> |
|||
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative",top: -12, left: -8,}} /> |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
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", }}> |
|||
<div style={{ width: '100%', height: 40, display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> |
|||
<a target='_blank' href={pomsNotebook} |
|||
style={{ marginRight: 10 }} |
|||
><Button theme='light' type='secondary'>进入网页</Button></a> |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 40px)', 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='pomsNotebook' |
|||
src={pomsNotebook} |
|||
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> |
|||
{/* <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, |
|||
// socket: webSocket.socket |
|||
}; |
|||
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)(Console); |
|||
export default connect(mapStateToProps)(Grafana); |
|||
|
|||
@ -0,0 +1,52 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Button } from '@douyinfe/semi-ui'; |
|||
|
|||
|
|||
|
|||
const Ambari = (props) => { |
|||
const { dispatch, actions, pomsAmbari, clientHeight } = props |
|||
|
|||
useEffect(() => { |
|||
|
|||
}, []) |
|||
|
|||
|
|||
return ( |
|||
<div style={{ height: clientHeight - 56, width: 'calc(100% + 16px)',margin:"-12px -8px" }}> |
|||
<div style={{ |
|||
height: '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={'pomsAmbari'} |
|||
src={pomsAmbari} |
|||
width={'100%'} |
|||
height={'100%'} |
|||
// wmode="transparent" |
|||
// style={{ pointerEvents: 'none' }} |
|||
/> */} |
|||
|
|||
<a target='_blank' href={pomsAmbari} |
|||
style={{ marginRight: 10 }} |
|||
><Button theme='solid' type='secondary'>进入网页</Button></a> |
|||
</div> |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
pomsAmbari: global.pomsAmbari, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Ambari); |
|||
@ -0,0 +1,55 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { IconReply } from '@douyinfe/semi-icons'; |
|||
import { Button } from '@douyinfe/semi-ui'; |
|||
|
|||
|
|||
|
|||
const Es = (props) => { |
|||
const { dispatch, actions, pomsEs, clientHeight ,history} = 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/other/other1', }) |
|||
}}>返回</Button> |
|||
<a target='_blank' href={pomsEs} |
|||
><Button theme='light' type='secondary'>进入网页</Button></a> |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 40px)', 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={'pomsEs'} |
|||
src={pomsEs} |
|||
width={'100%'} |
|||
height={'100%'} |
|||
// wmode="transparent" |
|||
// style={{ pointerEvents: 'none' }} |
|||
/> |
|||
</div> |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
pomsEs: global.pomsEs, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Es); |
|||
@ -0,0 +1,67 @@ |
|||
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, pomsMonitor, clientHeight,history } = 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% - 40px)', 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={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> |
|||
{/* <iframe frameBorder="0" src={pomsMonitor} style={{height: 'calc(100vh - 80px)', width: 'calc(100%)'}} /> */} |
|||
</div> |
|||
) |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
pomsMonitor: global.pomsMonitor, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Grafana); |
|||
@ -1,6 +1,12 @@ |
|||
'use strict'; |
|||
|
|||
import Other from './other'; |
|||
import Monitor from './monitor'; |
|||
import Other from './other'; |
|||
import Grafana from './grafana'; |
|||
import Kubesphere from './kubesphere'; |
|||
import Ambari from './ambari'; |
|||
import Es from './es'; |
|||
import Pghero from './pghero'; |
|||
import Kowl from './kowl'; |
|||
import MaintenanceRecords from './maintenanceRecords'; |
|||
export { MaintenanceRecords,Monitor,Other}; |
|||
export { MaintenanceRecords,Monitor, Grafana, Other, Kubesphere, Ambari, Es, Pghero, Kowl }; |
|||
@ -0,0 +1,54 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Button } from '@douyinfe/semi-ui'; |
|||
import { IconReply } from '@douyinfe/semi-icons'; |
|||
|
|||
const Kowl = (props) => { |
|||
const { dispatch, actions, pomsKowl, clientHeight ,history} = 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/other/other1', }) |
|||
}}>返回</Button> |
|||
<a target='_blank' href={pomsKowl} |
|||
><Button theme='light' type='secondary'>进入网页</Button></a> |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 40px)', 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={'pomsKowl'} |
|||
src={pomsKowl} |
|||
width={'100%'} |
|||
height={'100%'} |
|||
// wmode="transparent" |
|||
// style={{ pointerEvents: 'none' }} |
|||
/> |
|||
</div> |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
pomsKowl: global.pomsKowl, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Kowl); |
|||
@ -0,0 +1,54 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Button } from '@douyinfe/semi-ui'; |
|||
|
|||
|
|||
const Kubesphere = (props) => { |
|||
const { dispatch, actions, pomsKubesphere, clientHeight,history } = props |
|||
|
|||
useEffect(() => { |
|||
|
|||
}, []) |
|||
|
|||
|
|||
return ( |
|||
<div style={{ height: clientHeight - 56, width: 'calc(100% + 16px)',margin:"-12px -8px" }}> |
|||
<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={pomsKubesphere} |
|||
><Button theme='light' type='secondary'>进入网页</Button></a> |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 40px)', 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={'pomsKubesphere'} |
|||
src={pomsKubesphere} |
|||
width={'100%'} |
|||
height={'100%'} |
|||
// wmode="transparent" |
|||
// style={{ pointerEvents: 'none' }} |
|||
/> |
|||
</div> |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
pomsKubesphere: global.pomsKubesphere, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Kubesphere); |
|||
@ -0,0 +1,55 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { IconReply } from '@douyinfe/semi-icons'; |
|||
import { Button } from '@douyinfe/semi-ui'; |
|||
|
|||
|
|||
const Pghero = (props) => { |
|||
const { dispatch, actions, pomsPghero, clientHeight,history } = 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/other/other1', }) |
|||
}}>返回</Button> |
|||
<a target='_blank' href={pomsPghero} |
|||
><Button theme='light' type='secondary'>进入网页</Button></a> |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 40px)', 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={'pomsPghero'} |
|||
src={pomsPghero} |
|||
width={'100%'} |
|||
height={'100%'} |
|||
// wmode="transparent" |
|||
// style={{ pointerEvents: 'none' }} |
|||
/> |
|||
</div> |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
pomsPghero: global.pomsPghero, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Pghero); |
|||
@ -1,47 +1,77 @@ |
|||
import { MaintenanceRecords, Monitor, Other } from './containers'; |
|||
import { MaintenanceRecords, Grafana, Monitor,Other, Kubesphere, Ambari, Es, Kowl, Pghero } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/facility', |
|||
key: 'facility', |
|||
breadcrumb: '设备', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/deviceQuery', |
|||
key: 'deviceQuery', |
|||
breadcrumb: '设备查询', |
|||
childRoutes: [{ |
|||
path: '/maintenanceRecords1', |
|||
key: 'maintenanceRecords1', |
|||
component: MaintenanceRecords, |
|||
breadcrumb: '维护记录', |
|||
}] |
|||
}, { |
|||
path: '/serverInformation', |
|||
key: 'serverInformation', |
|||
breadcrumb: '服务器信息', |
|||
childRoutes: [{ |
|||
path: '/monitor', |
|||
key: 'monitor', |
|||
component: Monitor, |
|||
breadcrumb: '运维监控', |
|||
}, { |
|||
path: '/maintenanceRecords', |
|||
key: 'maintenanceRecords', |
|||
component: MaintenanceRecords, |
|||
breadcrumb: '维护记录', |
|||
},] |
|||
}, { |
|||
path: '/other', |
|||
key: 'other', |
|||
type: 'inner', |
|||
route: { |
|||
path: '/facility', |
|||
key: 'facility', |
|||
breadcrumb: '设备', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/deviceQuery', |
|||
key: 'deviceQuery', |
|||
breadcrumb: '设备查询', |
|||
childRoutes: [{ |
|||
path: '/maintenanceRecords1', |
|||
key: 'maintenanceRecords1', |
|||
component: MaintenanceRecords, |
|||
breadcrumb: '维护记录', |
|||
}] |
|||
}, { |
|||
path: '/serverInformation', |
|||
key: 'serverInformation', |
|||
breadcrumb: '服务器信息', |
|||
childRoutes: [{ |
|||
path: '/monitor', |
|||
key: 'monitor', |
|||
component: Monitor, |
|||
breadcrumb: 'Monitor', |
|||
},{ |
|||
path: '/grafana', |
|||
key: 'grafana', |
|||
component: Grafana, |
|||
breadcrumb: 'Grafana', |
|||
}, { |
|||
path: '/kubesphere', |
|||
key: 'kubesphere', |
|||
component: Kubesphere, |
|||
breadcrumb: 'Kubesphere', |
|||
}, { |
|||
path: '/ambari', |
|||
key: 'ambari', |
|||
component: Ambari, |
|||
breadcrumb: 'Ambari', |
|||
}, { |
|||
path: '/maintenanceRecords', |
|||
key: 'maintenanceRecords', |
|||
component: MaintenanceRecords, |
|||
breadcrumb: '维护记录', |
|||
},] |
|||
}, { |
|||
path: '/other', |
|||
key: 'other', |
|||
breadcrumb: '其他', |
|||
childRoutes: [{ |
|||
path: '/other1', |
|||
key: 'other1', |
|||
component: Other, |
|||
breadcrumb: '其他', |
|||
childRoutes: [{ |
|||
path: '/other1', |
|||
key: 'other1', |
|||
component: Other, |
|||
breadcrumb: '其他', |
|||
}] |
|||
}] |
|||
} |
|||
}, { |
|||
path: '/kowl', |
|||
key: 'kowl', |
|||
component: Kowl, |
|||
breadcrumb: 'Kowl', |
|||
}, { |
|||
path: '/pghero', |
|||
key: 'pghero', |
|||
component: Pghero, |
|||
breadcrumb: 'Pghero', |
|||
}, { |
|||
path: '/es', |
|||
key: 'es', |
|||
component: Es, |
|||
breadcrumb: 'Es', |
|||
}] |
|||
}] |
|||
} |
|||
}]; |
|||
Loading…
Reference in new issue