嵌套修改

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

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

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

@@ -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(() => {
 
    }, [])
@@ -24,39 +24,43 @@ const SetControl = (props) => {
          }}>
             <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',  })
+                  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' }}>
                <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>
-            </a>
-         </div>
+                  <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>
+               </a>
+            </div>
 
-      </div>
+         </div>
       </div >
    )
 }
@@ -66,7 +70,7 @@ function mapStateToProps (state) {
    return {
       clientHeight: global.clientHeight,
       pomsAmbari: global.pomsAmbari,
-
+      pomsKubesphere: global.pomsKubesphere,
    };
 }
 

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

@@ -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,42 +24,48 @@ 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={() => {
-                  history.push({ pathname: '/facility/other/kowl',  })
-               }}>
+               {/* <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={() => {
-                  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 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>
+               </a>
+               {/* </div> */}
             </div>
-         </div>
 
-      </div>
+         </div>
       </div >
    )
 }