监控工具的嵌套

web/client/src/layout/actions/global.js

@@ -38,10 +38,16 @@ export function initApiRoot () {
             type: INIT_API_ROOT,
             payload: {
                apiRoot: res.root,
-               iotVcmpWeb:res.iotVcmpWeb,
-               pomsMonitor:res.pomsMonitor,
-               dcWeb:res.dcWeb,
-               qiniu:res.qiniu,
+               iotVcmpWeb: res.iotVcmpWeb,
+               pomsMonitor: res.pomsMonitor,
+               pomsKubesphere: res.pomsKubesphere,
+               pomsAmbari: res.pomsAmbari,
+               pomsKowl: res.pomsKowl,
+               pomsPghero: res.pomsPghero,
+               pomsEs: res.pomsEs,
+               pomsNotebook: res.pomsNotebook,
+               dcWeb: res.dcWeb,
+               qiniu: res.qiniu,
             }
          })
       });

web/client/src/layout/reducers/global.js

@@ -1,6 +1,6 @@
 'use strict';
 import Immutable from 'immutable';
-import { INIT_LAYOUT, RESIZE, INIT_API_ROOT,PEPPROJECTID } from '../actions/global';
+import { INIT_LAYOUT, RESIZE, INIT_API_ROOT, PEPPROJECTID } from '../actions/global';
 
 function global (state = {
    title: '',
@@ -12,9 +12,15 @@ function global (state = {
    clientWidth: 1024,
    apiRoot: '',
    iotVcmpWeb: '',
-   pomsMonitor:'',
-   dcWeb:'',
-   qiniu:{}
+   pomsMonitor: '',
+   pomsKubesphere: '',
+   pomsAmbari: '',
+   pomsKowl: '',
+   pomsPghero: '',
+   pomsEs: '',
+   pomsNotebook: '',
+   dcWeb: '',
+   qiniu: {}
 }, action) {
    const payload = action.payload;
    switch (action.type) {
@@ -35,9 +41,15 @@ function global (state = {
          return Immutable.fromJS(state).merge({
             apiRoot: payload.apiRoot,
             iotVcmpWeb: payload.iotVcmpWeb,
-            pomsMonitor:payload.pomsMonitor,
-            dcWeb:payload.dcWeb,
-            qiniu:payload.qiniu,
+            pomsMonitor: payload.pomsMonitor,
+            pomsKubesphere: payload.pomsKubesphere,
+            pomsAmbari: payload.pomsAmbari,
+            pomsKowl: payload.pomsKowl,
+            pomsPghero: payload.pomsPghero,
+            pomsEs: payload.pomsEs,
+            pomsNotebook: payload.pomsNotebook,
+            dcWeb: payload.dcWeb,
+            qiniu: payload.qiniu,
          }).toJS();
       case PEPPROJECTID:
          return Immutable.fromJS(state).merge({

web/client/src/sections/data/containers/notebook.jsx

@@ -1,40 +1,60 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Spin, Card } from '@douyinfe/semi-ui';
-import '../style.less'
-const { Meta } = Card;
+import { Button } from '@douyinfe/semi-ui';
 
-const Console = (props) => {
-    const { dispatch, actions, user, loading, socket } = props
+
+
+const Grafana = (props) => {
+   const { dispatch, actions, user, loading, socket, pomsNotebook, clientHeight } = 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 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 {
@@ -42,8 +62,9 @@ function mapStateToProps (state) {
       //   user: auth.user,
       //   actions: global.actions,
       //   members: members.data,
-        //   socket: webSocket.socket
+      clientHeight: global.clientHeight,
+      pomsNotebook: global.pomsNotebook,
    };
 }
 
-export default connect(mapStateToProps)(Console);
+export default connect(mapStateToProps)(Grafana);

web/client/src/sections/data/nav-item.jsx

@@ -22,11 +22,13 @@ export function getNavItem (user, dispatch) {
                         text: '数据分析',
                         icon: <iconpark-icon style={{ width: 20, height: 20 }} name="iconsjfenxi"></iconpark-icon>,
                         to: '/data/dataAnalysis/dataComparison',
-                        items: [{
-                            itemKey: 'dataComparison', to: '/data/dataAnalysis/dataComparison', text: '数据对比'
-                        },{
-                            itemKey: 'dataAssociation', to: '/data/dataAnalysis/dataAssociation', text: '数据关联'
-                        },{
+                        items: [
+                        //    {
+                        //     itemKey: 'dataComparison', to: '/data/dataAnalysis/dataComparison', text: '数据对比'
+                        // },{
+                        //     itemKey: 'dataAssociation', to: '/data/dataAnalysis/dataAssociation', text: '数据关联'
+                        // },
+                        {
                             itemKey: 'notebook', to: '/data/dataAnalysis/notebook', text: 'notebook'
                         }]
                     },

web/client/src/sections/facility/containers/ambari.jsx

@@ -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);

web/client/src/sections/facility/containers/es.jsx

@@ -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);

web/client/src/sections/facility/containers/grafana.jsx

@@ -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);

web/client/src/sections/facility/containers/index.js

@@ -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 };

web/client/src/sections/facility/containers/kowl.jsx

@@ -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);

web/client/src/sections/facility/containers/kubesphere.jsx

@@ -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);

web/client/src/sections/facility/containers/monitor.jsx

@@ -3,52 +3,71 @@ import { connect } from 'react-redux';
 
 
 
-const Server = (props) => {
-   const { dispatch, actions, user, loading, socket, pomsMonitor } = props
-
+const SetControl = (props) => {
+   const { dispatch, actions, clientHeight, history ,pomsAmbari} = props
    useEffect(() => {
 
    }, [])
 
 
    return (
-      <>
+      <div style={{ height: clientHeight - 70, width: '100%', }}>
+
          <div style={{
-            height: 'calc(100vh - 60px)', width: 'calc(100% + 16px)',
-            backgroundImage: "url('/assets/images/background/General.png')",
-            backgroundSize: 'cover',
+            backgroundImage: "url('/assets/images/background/tool.png')",
+            backgroundSize: '100% 100%',
             backgroundRepeat: 'no-repeat',
-            position: 'relative',
-            top: -12, left: -8,
+            width: 'calc(100% - 20px)',
+            height: 310,
+            margin: "20px 0 0 10px",
+            display: 'flex'
          }}>
-            <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',
+            <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/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',})
                }}>
-                  <a target='_blank' href={pomsMonitor}
-                     style={{ width: '100%', height: '100%', display: 'block' }}
-                  > 进入Grafana</a>
+                  <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>
+            </div>
+
+            <div style={{ width: 'calc(33.3%)', display: 'flex', justifyContent: 'center' }}>
+               <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 }} />
+               <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={{ fontSize: 16, color: '#646566' }}>Hadoop集群管理工具</div>
                </div>
-               <div style={{ width: 679, height: 40, fontSize: 28, fontWeight: 400, color: '#146AD7', lineHeight: '40px', marginTop: 40 }}>
-                  点击可跳转服务器监控网站Grafana</div>
+            </a>
          </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
-      pomsMonitor: global.pomsMonitor,
+      clientHeight: global.clientHeight,
+      pomsAmbari: global.pomsAmbari,
+
    };
 }
 
-export default connect(mapStateToProps)(Server);
+export default connect(mapStateToProps)(SetControl);

web/client/src/sections/facility/containers/other.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 
 
 const SetControl = (props) => {
-   const { dispatch, actions, user, loading, socket } = props
+   const { dispatch, actions, clientHeight, history } = props
 
    useEffect(() => {
 
@@ -12,22 +12,66 @@ const SetControl = (props) => {
 
 
    return (
-      <>
-         <div>
-            <img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} />
+      <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',  })
+               }}>
+                  <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>
+            </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',})
+               }}>
+                  <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>
             </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',  })
+               }}>
+               <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>
+         </div>
+
+      </div>
+      </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
+      clientHeight: global.clientHeight,
+      pomsKowl: global.pomsKowl,
+      pomsPghero: global.pomsPghero,
+      pomsEs: global.pomsEs,
+
    };
 }
 

web/client/src/sections/facility/containers/pghero.jsx

@@ -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);

web/client/src/sections/facility/nav-item.jsx

@@ -24,10 +24,10 @@ export function getNavItem (user, dispatch) {
                   to: '/facility/serverInformation/monitor',
                   items: [{
                      itemKey: 'monitor', to: '/facility/serverInformation/monitor', text: '运维监控'
-                        },{
+                  }, {
                      itemKey: 'maintenanceRecords', to: '/facility/serverInformation/maintenanceRecords', text: '维护记录'
                   }]
-                    },{
+               }, {
                   itemKey: 'other',
                   text: '其他',
                   icon: <iconpark-icon style={{ width: 20, height: 20 }} name="iconjianshezhong"></iconpark-icon>,

web/client/src/sections/facility/routes.js

@@ -1,4 +1,4 @@
-import { MaintenanceRecords, Monitor, Other } from './containers';
+import { MaintenanceRecords, Grafana, Monitor,Other, Kubesphere, Ambari, Es, Kowl, Pghero } from './containers';
 
 export default [{
    type: 'inner',
@@ -25,7 +25,22 @@ export default [{
             path: '/monitor',
             key: 'monitor',
             component: Monitor,
-                breadcrumb: '运维监控',
+            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',
@@ -41,6 +56,21 @@ export default [{
             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',
          }]
       }]
    }

web/config.js

@@ -17,6 +17,12 @@ args.option('apiAnxinyunUrl', '安心云 api');
 args.option('apiEmisUrl', '企业管理 api');
 args.option('iotVcmpWeb', 'IOT 视频服务');
 args.option('pomsMonitor', '运维监控 web');
+args.option('pomsKubesphere', 'kubesphere web');
+args.option('pomsAmbari', 'ambari web');
+args.option('pomsKowl', '运维监控 web');
+args.option('pomsPghero', 'pghero web');
+args.option('pomsEs', 'es监控 web');
+args.option('pomsNotebook', 'notebook web');
 args.option('dcWeb', '报表中心web');
 
 
@@ -34,6 +40,12 @@ const API_EMIS_URL = process.env.API_EMIS_URL || flags.apiEmisUrl;
 const API_ANXINYUN_URL = process.env.API_ANXINYUN_URL || flags.apiAnxinyunUrl;
 const IOT_VIDEO_WEB = process.env.IOT_VIDEO_WEB || flags.iotVcmpWeb;
 const POMS_MONITOR = process.env.POMS_MONITOR || flags.pomsMonitor;
+const POMS_KUBESPHERE = process.env.POMS_KUBESPHERE || flags.pomsKubesphere;
+const POMS_AMBARI = process.env.POMS_AMBARI || flags.pomsAmbari;
+const POMS_KOWL = process.env.POMS_KOWL || flags.pomsKowl;
+const POMS_PGHERO = process.env.POMS_PGHERO || flags.pomsPghero;
+const POMS_ES = process.env.POMS_ES || flags.pomsEs;
+const POMS_NOTEBOOK = process.env.POMS_NOTEBOOK || flags.pomsNotebook;
 const DC_WEB = process.env.DC_WEB || flags.dcWeb;
 
 // 七牛
@@ -92,6 +104,12 @@ const product = {
          apiUrl: API_POMS_URL,
          iotVcmpWeb: IOT_VIDEO_WEB,
          pomsMonitor: POMS_MONITOR,
+         pomsKubesphere: POMS_KUBESPHERE,
+         pomsAmbari: POMS_AMBARI,
+         pomsKowl: POMS_KOWL,
+         pomsPghero: POMS_PGHERO,
+         pomsEs: POMS_ES,
+         pomsNotebook: POMS_NOTEBOOK,
          dcWeb: DC_WEB,
          staticRoot: './client',
          qiniu: {

web/package.json

@@ -7,7 +7,7 @@
       "test": "mocha",
       "start-vite": "cross-env NODE_ENV=developmentVite npm run start-params",
       "start": "cross-env NODE_ENV=development npm run start-params",
-      "start-params": "node server -p 5600 -u http://localhost:4600 --apiPomsUrl http://localhost:4600 --apiAnxinyunUrl http://10.8.30.112:4100 --apiEmisUrl http://10.8.30.112:14000  --qnak 5XrM4wEB9YU6RQwT64sPzzE6cYFKZgssdP5Kj3uu --qnsk w6j2ixR_i-aelc6I7S3HotKIX-ukMzcKmDfH6-M5 --qnbkt anxinyun-test --qndmn http://test.resources.anxinyun.cn --iotVcmpWeb https://mediaconsole.ngaiot.com  --pomsMonitor https://monitor.anxinyun.cn  --dcWeb  https://fsiot-oamss.anxinyun.cn",
+      "start-params": "node server -p 5600 -u http://localhost:4600 --apiPomsUrl http://localhost:4600 --apiAnxinyunUrl http://10.8.30.112:4100 --apiEmisUrl http://10.8.30.112:14000  --qnak 5XrM4wEB9YU6RQwT64sPzzE6cYFKZgssdP5Kj3uu --qnsk w6j2ixR_i-aelc6I7S3HotKIX-ukMzcKmDfH6-M5 --qnbkt anxinyun-test --qndmn http://test.resources.anxinyun.cn --iotVcmpWeb https://mediaconsole.ngaiot.com  --pomsMonitor http://monitor.anxinyun.cn/goto/PaEDLE84z?orgId=1  --pomsKubesphere https://k8sadmin.anxinyun.cn/  --pomsAmbari https://ambari.anxinyun.cn/  --pomsKowl https://kafka.anxinyun.cn/  --pomsPghero https://pghero.anxinyun.cn/  --pomsEs https://esc.anxinyun.cn/  --pomsNotebook https://inotebook.anxinyun.cn/  --dcWeb  https://fsiot-oamss.anxinyun.cn",
       "deploy": "export NODE_ENV=production&& npm run build && node server",
       "build-dev": "cross-env NODE_ENV=development&&webpack --config webpack.config.js",
       "build": "cross-env NODE_ENV=production&&webpack --config webpack.config.prod.js"

web/routes/attachment/index.js

@@ -19,13 +19,19 @@ module.exports = {
    entry: function (app, router, opts) {
 
       const getApiRoot = async function (ctx) {
-         const { apiUrl, iotVcmpWeb, pomsMonitor, dcWeb, qiniu } = opts;
+         const { apiUrl, iotVcmpWeb, pomsMonitor, pomsKubesphere, pomsAmbari, pomsKowl, pomsPghero, pomsEs, pomsNotebook, dcWeb, qiniu } = opts;
 
          ctx.status = 200;
          ctx.body = {
             root: apiUrl,
             iotVcmpWeb: iotVcmpWeb,
+            pomsKubesphere: pomsKubesphere,
+            pomsAmbari: pomsAmbari,
+            pomsKowl: pomsKowl,
+            pomsPghero: pomsPghero,
+            pomsEs: pomsEs,
             pomsMonitor: pomsMonitor,
+            pomsNotebook: pomsNotebook,
             dcWeb: dcWeb,
             qiniu: qiniu
          };