1- import { useEffect , useState } from "react" ;
1+ import { useMemo , useState } from "react" ;
22import { useTranslation } from "react-i18next" ;
3+ import { Center } from "@chakra-ui/react" ;
4+ import { useQueryClient } from "@tanstack/react-query" ;
5+
6+ import { ErrorIcon } from "@/components/CommonIcon" ;
37
48import AreaCard from "./AreaCard" ;
59import PieCard from "./PieCard" ;
@@ -17,57 +21,79 @@ export default function AppMonitor() {
1721 storageUsage : [ ] ,
1822 } ;
1923 const [ dataNumber , setDataNumber ] = useState ( 0 ) ;
20- const [ podsArray , setPodsArray ] = useState < string [ ] > ( [ ] ) ;
24+ const queryClient = useQueryClient ( ) ;
2125
22- useEffect ( ( ) => {
23- setPodsArray (
24- cpuUsage . map ( ( item ) => item . metric . pod ) . length >
25- memoryUsage . map ( ( item ) => item . metric . pod ) . length
26- ? cpuUsage . map ( ( item ) => item . metric . pod )
27- : memoryUsage . map ( ( item ) => item . metric . pod ) ,
28- ) ;
26+ const podsArray = useMemo ( ( ) => {
27+ return cpuUsage . map ( ( item ) => item . metric . pod ) . length >
28+ memoryUsage . map ( ( item ) => item . metric . pod ) . length
29+ ? cpuUsage . map ( ( item ) => item . metric . pod )
30+ : memoryUsage . map ( ( item ) => item . metric . pod ) ;
2931 } , [ cpuUsage , memoryUsage ] ) ;
3032
3133 return (
3234 < div className = "flex w-full" >
33- < div className = "mr-2 mt-10 h-[404px] w-full rounded-xl border bg-[#F8FAFB] pb-4" >
34- < AreaCard
35- data = { cpuUsage }
36- strokeColor = "#47C8BF"
37- fillColor = "#E6F6F6"
38- setDataNumber = { setDataNumber }
39- dataNumber = { dataNumber }
40- podsArray = { podsArray }
41- title = "CPU"
42- unit = "Core"
43- maxValue = { limitCPU / 1000 }
44- className = "h-1/2 p-4"
45- />
46- < AreaCard
47- data = { memoryUsage }
48- strokeColor = "#9A8EE0"
49- fillColor = "#F2F1FB"
50- title = { t ( "Spec.RAM" ) }
51- unit = "MB"
52- maxValue = { limitMemory }
53- dataNumber = { dataNumber }
54- className = "h-1/2 p-4"
55- />
56- </ div >
57- < div className = "mr-2 mt-10 h-[396px] w-full space-y-2" >
58- < PieCard
59- data = { databaseUsage }
60- maxValue = { databaseCapacity }
61- title = { t ( "Spec.Database" ) }
62- colors = { [ "#47C8BF" , "#D5D6E1" ] }
63- />
64- < PieCard
65- data = { storageUsage }
66- maxValue = { storageCapacity }
67- title = { t ( "Spec.Storage" ) }
68- colors = { [ "#9A8EE0" , "#D5D6E1" ] }
69- />
70- </ div >
35+ { monitorData && Object . keys ( monitorData ) . length !== 0 ? (
36+ < >
37+ < div className = "mr-2 mt-10 h-[404px] w-full rounded-xl border bg-[#F8FAFB] pb-4" >
38+ < AreaCard
39+ data = { cpuUsage }
40+ strokeColor = "#47C8BF"
41+ fillColor = "#E6F6F6"
42+ setDataNumber = { setDataNumber }
43+ dataNumber = { dataNumber }
44+ podsArray = { podsArray }
45+ title = "CPU"
46+ unit = "Core"
47+ maxValue = { limitCPU / 1000 }
48+ className = "h-1/2 p-4"
49+ />
50+ < AreaCard
51+ data = { memoryUsage }
52+ strokeColor = "#9A8EE0"
53+ fillColor = "#F2F1FB"
54+ title = { t ( "Spec.RAM" ) }
55+ unit = "MB"
56+ maxValue = { limitMemory }
57+ dataNumber = { dataNumber }
58+ className = "h-1/2 p-4"
59+ />
60+ </ div >
61+ < div className = "mr-2 mt-10 h-[396px] w-full space-y-2" >
62+ < PieCard
63+ data = { databaseUsage }
64+ maxValue = { databaseCapacity }
65+ title = { t ( "Spec.Database" ) }
66+ colors = { [ "#47C8BF" , "#D5D6E1" ] }
67+ />
68+ < PieCard
69+ data = { storageUsage }
70+ maxValue = { storageCapacity }
71+ title = { t ( "Spec.Storage" ) }
72+ colors = { [ "#9A8EE0" , "#D5D6E1" ] }
73+ />
74+ </ div >
75+ </ >
76+ ) : (
77+ < Center className = "h-[400px] w-full" >
78+ < span className = "flex flex-col items-center" >
79+ < ErrorIcon boxSize = { 16 } />
80+ < span className = "flex pt-2 text-xl" >
81+ < p className = "" > { t ( "Error" ) } </ p >
82+ < u
83+ className = "cursor-pointer text-primary-600"
84+ onClick = { async ( ) => {
85+ await queryClient . invalidateQueries ( {
86+ queryKey : [ "useGetMonitorDataQuery" ] ,
87+ refetchType : "all" ,
88+ } ) ;
89+ } }
90+ >
91+ { t ( "Retry" ) }
92+ </ u >
93+ </ span >
94+ </ span >
95+ </ Center >
96+ ) }
7197 </ div >
7298 ) ;
7399}
0 commit comments