From 771cb642904eddd2b67efc74ffbdf0e808ed3bf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=B6=E9=94=8B?= <zhangjf1@gmail.com>
Date: Thu, 8 Apr 2021 09:10:56 +0800
Subject: [PATCH] Solve the situation that the hardware information of the Web
 UI home page cannot be loaded (#5585)

Solve the situation that the hardware information of the Web UI home page cannot be loaded

Co-authored-by: zhangjf@shuhaisc.com <zhangfeng800729>
---
 ui/src/pages/home/index.tsx | 118 +++++++++++++++++++-----------------
 1 file changed, 61 insertions(+), 57 deletions(-)

diff --git a/ui/src/pages/home/index.tsx b/ui/src/pages/home/index.tsx
index d55fecf2a1..d5123e22fc 100644
--- a/ui/src/pages/home/index.tsx
+++ b/ui/src/pages/home/index.tsx
@@ -17,61 +17,65 @@
  * under the License.
  */
  
-import React, {useState, useEffect} from 'react';
-import {Typography, Divider, BackTop, Spin} from 'antd';
-const {Title, Paragraph, Text} = Typography;
-import {getHardwareInfo} from 'Src/api/api';
-
-export default function Home(params: any) {
-    const [hardwareData , setHardwareData] = useState({});
-    const getConfigData = function(){
-        getHardwareInfo().then(res=>{
-            if (res && res.msg === 'success') {
-                setHardwareData(res.data);
-            }
-        })
-            .catch(err=>{
-                setHardwareData({
-                    VersionInfo:{},
-                    HarewareInfo:{},
-                });
-            });
-    };
-    function getItems(data, flag){
-        let arr = [];
-        for (const i in data) {
-            if (flag) {
-                arr.push(
-                    <p key={i} dangerouslySetInnerHTML={createMarkup(i,data[i])} ></p>
-                )
-            } else {
-                arr.push(
-                    <p key={i}>{i + ' : ' + data[i]}</p>
-                )
-            }
-        }
-        return arr;
-    }
-    function createMarkup(key,data) {
-        return {__html:key + ' : ' + String(data)};
-    }
-    useEffect(() => {
-        getConfigData();
-    }, []);
-    return(
-        <Typography style={{padding:'30px'}}>
-            <Title>Version</Title>
-            <Paragraph style={{background: '#f9f9f9',padding: '20px'}}>
-                {...getItems(hardwareData.VersionInfo, false)}
-            </Paragraph>
-            <Divider/>
-            <Title>Hardware Info</Title>
-            <Paragraph style={{background: '#f9f9f9',padding: '20px'}}>
-                {...getItems(hardwareData.HarewareInfo, true)}
-            </Paragraph>
-            <BackTop></BackTop>
-            {hardwareData.HarewareInfo?'':<Spin style={{'position':'relative','top':'50%','left':'50%'}}/>}
-        </Typography>
-    );
-}
+ import React, {useState, useEffect} from 'react';
+ import {Typography, Divider, BackTop, Spin} from 'antd';
+ const {Title, Paragraph, Text} = Typography;
+ import {getHardwareInfo} from 'Src/api/api';
  
+ export default function Home(params: any) {
+     const [hardwareData , setHardwareData] = useState({});
+     const getConfigData = function(){
+         getHardwareInfo().then(res=>{
+             if (res && res.msg === 'success') {
+                 console.log(res.data)
+                 setHardwareData(res.data);
+             }
+         })
+             .catch(err=>{
+                 setHardwareData({
+                     VersionInfo:{},
+                     HardwareInfo:{},
+                 });
+             });
+     };
+     function getItems(data, flag){
+         let arr = [];
+         for (const i in data) {
+             if (flag) {
+                 const dt = data[i].replace(/\&nbsp;/g, "")
+                 dt = dt.replace(/\<br>/g, "\n")
+                 arr.push(<p key={i} dangerouslySetInnerHTML={createMarkup(i,dt)} ></p>
+                 )
+             } else {
+                 const dt = data[i].replace(/\&nbsp;/g, "")
+                 dt = dt.replace(/\<br>/g, "\n")
+                 arr.push(<p key={i}>{i + ' : ' + dt}</p>
+                 )
+             }
+         }
+         return arr;
+     }
+     function createMarkup(key,data) {
+         return {__html:key + ' : ' + String(data)};
+     }
+     useEffect(() => {
+         getConfigData();
+     }, []);
+     return(
+         <Typography style={{padding:'30px'}}>
+             <Title>Version</Title>
+             <Paragraph style={{background: '#f9f9f9',padding: '20px'}}>
+                 {...getItems(hardwareData.VersionInfo, false)}
+             </Paragraph>
+             <Divider/>
+             <Title>Hardware Info</Title>
+             <Paragraph style={{background: '#f9f9f9',padding: '20px'}}>
+                 {...getItems(hardwareData.HardwareInfo, false)}
+             </Paragraph>
+             <BackTop></BackTop>
+             {hardwareData.HarewareInfo ?'':<Spin style={{'position':'relative','top':'50%','left':'50%'}}/>}
+         </Typography>
+     );
+ }
+  
+ 
\ No newline at end of file