chore: update

2026-08-02 16:54:09 +02:00
parent 09928c0d76
commit 6992e505ae
26 changed files with 681 additions and 695 deletions
@@ -0,0 +1,100 @@
+import { Badge, Box, Flex, HStack, Icon, Progress, SimpleGrid, Stack, Text } from '@chakra-ui/react'
+import type { ComponentState, DemoDetails } from '../lib/api'
+import { podStatusColor, podStatusLabel } from '../lib/format'
+
+export const PODSTATUS_COMPONENTS: { key: keyof DemoDetails['state']; label: string }[] = [
+  { key: 'api', label: 'Backend' },
+  { key: 'web', label: 'Frontend' },
+  { key: 'db', label: 'PostgreSQL' },
+  { key: 'dbm', label: 'Redis' },
+]
+
+// PodStatusPanel : vue d'ensemble des 4 composants d'une démo (statut + CPU/mémoire live).
+export function PodStatusPanel({ state }: { state: DemoDetails['state'] }) {
+  const allRunning = PODSTATUS_COMPONENTS.every((c) => state[c.key].phase === 'Running')
+  const downCount = PODSTATUS_COMPONENTS.filter((c) => state[c.key].phase !== 'Running').length
+
+  return (
+    <Stack spacing={3}>
+      <HStack spacing={2}>
+        <Box
+          w="8px"
+          h="8px"
+          borderRadius="full"
+          bg={allRunning ? 'green.400' : 'red.400'}
+          flexShrink={0}
+        />
+        <Text fontSize="sm" fontWeight="medium">
+          {allRunning
+            ? 'Tous les services sont opérationnels'
+            : `${downCount} service${downCount > 1 ? 's' : ''} indisponible${downCount > 1 ? 's' : ''}`}
+        </Text>
+      </HStack>
+      <SimpleGrid columns={{ base: 1, sm: 2, lg: 4 }} spacing={3}>
+        {PODSTATUS_COMPONENTS.map((c) => (
+          <ComponentCard key={c.key} title={c.label} cs={state[c.key]} />
+        ))}
+      </SimpleGrid>
+    </Stack>
+  )
+}
+
+function ComponentCard({ title, cs }: { title: string; cs: ComponentState }) {
+  const cpuPct = cs.cpu_limit_milli > 0 ? Math.min(100, Math.round((cs.cpu_milli / cs.cpu_limit_milli) * 100)) : 0
+  const memPct = cs.memory_limit_mi > 0 ? Math.min(100, Math.round((cs.memory_mi / cs.memory_limit_mi) * 100)) : 0
+
+  return (
+    <Box p={3} borderWidth="1px" borderRadius="lg" bg="bg-surface">
+      <HStack justify="space-between" mb={3}>
+        <Text fontSize="sm" fontWeight="semibold">
+          {title}
+        </Text>
+        <HStack spacing={1.5}>
+          <Box w="7px" h="7px" borderRadius="full" bg={`${podStatusColor(cs.phase)}.400`} flexShrink={0} />
+          <Badge colorScheme={podStatusColor(cs.phase)} fontSize="10px">
+            {podStatusLabel(cs.phase)}
+          </Badge>
+        </HStack>
+      </HStack>
+
+      <Stack spacing={2}>
+        <Box>
+          <Flex justify="space-between" fontSize="xs" color="gray.500" mb={1}>
+            <Text>CPU</Text>
+            <Text fontFamily="mono">
+              {cs.cpu_milli}m / {cs.cpu_limit_milli}m
+            </Text>
+          </Flex>
+          <Progress
+            value={cpuPct}
+            size="xs"
+            borderRadius="full"
+            colorScheme={cpuPct > 85 ? 'red' : cpuPct > 60 ? 'orange' : 'primary'}
+          />
+        </Box>
+        <Box>
+          <Flex justify="space-between" fontSize="xs" color="gray.500" mb={1}>
+            <Text>Mémoire</Text>
+            <Text fontFamily="mono">
+              {cs.memory_mi}Mi / {cs.memory_limit_mi}Mi
+            </Text>
+          </Flex>
+          <Progress
+            value={memPct}
+            size="xs"
+            borderRadius="full"
+            colorScheme={memPct > 85 ? 'red' : memPct > 60 ? 'orange' : 'primary'}
+          />
+        </Box>
+      </Stack>
+    </Box>
+  )
+}
+
+export function ChevronIcon(props: React.ComponentProps<typeof Icon>) {
+  return (
+    <Icon viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3} {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 18l6-6-6-6" />
+    </Icon>
+  )
+}