15
15
// limitations under the License.
16
16
17
17
import React , { useState } from 'react' ;
18
- import { Spin , Alert } from 'antd' ;
18
+ import { Alert } from 'antd' ;
19
19
import ServerLogsHeader from './ServerLogsHeader' ;
20
20
import { i18nReact } from '../../../utils/i18nReact' ;
21
21
import useLoadData from '../../../utils/hooks/useLoadData/useLoadData' ;
22
+ import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper' ;
22
23
import HighlightText from '../Components/HighlightText' ;
23
24
import { SERVER_LOGS_API_URL } from '../Components/utils' ;
24
25
import './ServerLogsTab.scss' ;
25
26
26
27
interface ServerLogsData {
27
28
logs : string [ ] ;
28
- hue_hostname : string ;
29
+ hueHostname : string ;
29
30
}
30
31
31
32
const ServerLogs : React . FC = ( ) : JSX . Element => {
32
33
const [ filter , setFilter ] = useState < string > ( '' ) ;
33
34
const [ wrapLogs , setWrapLogs ] = useState ( true ) ;
34
35
const { t } = i18nReact . useTranslation ( ) ;
35
- const {
36
- data : logsData ,
37
- loading,
38
- error
39
- } = useLoadData < ServerLogsData > ( SERVER_LOGS_API_URL , {
36
+ const { data, loading, error } = useLoadData < ServerLogsData > ( SERVER_LOGS_API_URL , {
40
37
params : {
41
38
reverse : true
42
39
}
@@ -54,35 +51,31 @@ const ServerLogs: React.FC = (): JSX.Element => {
54
51
) ;
55
52
}
56
53
54
+ const isEmptyLogs = ! data ?. logs || ! data ?. logs ?. some ( log => log . length ) ;
55
+
57
56
return (
58
57
< div className = "hue-server-logs-component" >
59
- < Spin spinning = { loading } >
60
- { ! loading && (
61
- < >
62
- < ServerLogsHeader
63
- onFilterChange = { setFilter }
64
- onWrapLogsChange = { setWrapLogs }
65
- hostName = { logsData ?. hue_hostname ?? '' }
66
- />
67
- { logsData && ( logsData . logs . length === 0 || logsData . logs [ 0 ] === '' ) && (
68
- < pre className = "server__no-logs-found" > No logs found!</ pre >
69
- ) }
70
-
71
- { logsData && logsData . logs . length > 0 && logsData . logs [ 0 ] !== '' && (
72
- < div className = "server__display-logs" >
73
- { logsData . logs . map ( ( line , index ) => (
74
- < div
75
- className = { `server__log-line ${ wrapLogs ? 'server_wrap' : '' } ` }
76
- key = { 'logs_' + index }
77
- >
78
- < HighlightText text = { line } searchValue = { filter } />
79
- </ div >
80
- ) ) }
58
+ < LoadingErrorWrapper loading = { loading } errors = { [ ] } >
59
+ < ServerLogsHeader
60
+ onFilterChange = { setFilter }
61
+ onWrapLogsChange = { setWrapLogs }
62
+ hostName = { data ?. hueHostname ?? '' }
63
+ />
64
+ { isEmptyLogs ? (
65
+ < pre className = "server__no-logs-found" > No logs found!</ pre >
66
+ ) : (
67
+ < div className = "server__display-logs" >
68
+ { data . logs . map ( ( line , index ) => (
69
+ < div
70
+ className = { `server__log-line ${ wrapLogs ? 'server__log-line--wrap' : '' } ` }
71
+ key = { 'logs_' + index }
72
+ >
73
+ < HighlightText text = { line } searchValue = { filter } />
81
74
</ div >
82
- ) }
83
- </ >
75
+ ) ) }
76
+ </ div >
84
77
) }
85
- </ Spin >
78
+ </ LoadingErrorWrapper >
86
79
</ div >
87
80
) ;
88
81
} ;
0 commit comments