@@ -2,9 +2,22 @@ import { Button } from '@comp/ui/button';
22import { Card , CardContent , CardHeader , CardTitle } from '@comp/ui/card' ;
33import { cn } from '@comp/ui/cn' ;
44import { ArrowLeft , CheckCircle2 , XCircle } from 'lucide-react' ;
5+ import { useMemo } from 'react' ;
56import type { Host } from '../types' ;
67
78export const HostDetails = ( { host, onClose } : { host : Host ; onClose : ( ) => void } ) => {
9+ const isMacOS = useMemo ( ( ) => {
10+ return host . cpu_type && ( host . cpu_type . includes ( 'arm64' ) || host . cpu_type . includes ( 'intel' ) ) ;
11+ } , [ host ] ) ;
12+
13+ const mdmEnabledStatus = useMemo ( ( ) => {
14+ return {
15+ id : 'mdm' ,
16+ response : host ?. mdm . connected_to_fleet ? 'pass' : 'fail' ,
17+ name : 'MDM Enabled' ,
18+ } ;
19+ } , [ host ] ) ;
20+
821 return (
922 < div className = "space-y-4" >
1023 < Button variant = "outline" className = "w-min" onClick = { onClose } >
@@ -17,28 +30,52 @@ export const HostDetails = ({ host, onClose }: { host: Host; onClose: () => void
1730 </ CardHeader >
1831 < CardContent className = "space-y-3" >
1932 { host . policies . length > 0 ? (
20- host . policies . map ( ( policy ) => (
21- < div
22- key = { policy . id }
23- className = { cn (
24- 'hover:bg-muted/50 flex items-center justify-between rounded-md border border-l-4 p-3 shadow-sm transition-colors' ,
25- policy . response === 'pass' ? 'border-l-primary' : 'border-l-red-500' ,
26- ) }
27- >
28- < p className = "font-medium" > { policy . name } </ p >
29- { policy . response === 'pass' ? (
30- < div className = "flex items-center gap-1 text-primary" >
31- < CheckCircle2 size = { 16 } />
32- < span > Pass</ span >
33- </ div >
34- ) : (
35- < div className = "flex items-center gap-1 text-red-600" >
36- < XCircle size = { 16 } />
37- < span > Fail</ span >
38- </ div >
39- ) }
40- </ div >
41- ) )
33+ < >
34+ { host . policies . map ( ( policy ) => (
35+ < div
36+ key = { policy . id }
37+ className = { cn (
38+ 'hover:bg-muted/50 flex items-center justify-between rounded-md border border-l-4 p-3 shadow-sm transition-colors' ,
39+ policy . response === 'pass' ? 'border-l-primary' : 'border-l-red-500' ,
40+ ) }
41+ >
42+ < p className = "font-medium" > { policy . name } </ p >
43+ { policy . response === 'pass' ? (
44+ < div className = "flex items-center gap-1 text-primary" >
45+ < CheckCircle2 size = { 16 } />
46+ < span > Pass</ span >
47+ </ div >
48+ ) : (
49+ < div className = "flex items-center gap-1 text-red-600" >
50+ < XCircle size = { 16 } />
51+ < span > Fail</ span >
52+ </ div >
53+ ) }
54+ </ div >
55+ ) ) }
56+ { isMacOS && (
57+ < div
58+ key = { mdmEnabledStatus . id }
59+ className = { cn (
60+ 'hover:bg-muted/50 flex items-center justify-between rounded-md border border-l-4 p-3 shadow-sm transition-colors' ,
61+ mdmEnabledStatus . response === 'pass' ? 'border-l-primary' : 'border-l-red-500' ,
62+ ) }
63+ >
64+ < p className = "font-medium" > { mdmEnabledStatus . name } </ p >
65+ { mdmEnabledStatus . response === 'pass' ? (
66+ < div className = "flex items-center gap-1 text-primary" >
67+ < CheckCircle2 size = { 16 } />
68+ < span > Pass</ span >
69+ </ div >
70+ ) : (
71+ < div className = "flex items-center gap-1 text-red-600" >
72+ < XCircle size = { 16 } />
73+ < span > Fail</ span >
74+ </ div >
75+ ) }
76+ </ div >
77+ ) }
78+ </ >
4279 ) : (
4380 < p className = "text-muted-foreground" > No policies found for this device.</ p >
4481 ) }
0 commit comments