|
| 1 | +import { type FC } from "react"; |
| 2 | +import dayjs from "dayjs"; |
| 3 | +import relativeTime from "dayjs/plugin/relativeTime"; |
| 4 | +import { useTheme } from "@emotion/react"; |
| 5 | +import { Stack } from "components/Stack/Stack"; |
| 6 | + |
| 7 | +dayjs.extend(relativeTime); |
| 8 | + |
| 9 | +interface ConnectionStatusProps { |
| 10 | + lastUsedAt: string; |
| 11 | +} |
| 12 | + |
| 13 | +export const ConnectionStatus: FC<ConnectionStatusProps> = ({ lastUsedAt }) => { |
| 14 | + const theme = useTheme(); |
| 15 | + const t = dayjs(lastUsedAt); |
| 16 | + const now = dayjs(); |
| 17 | + let message = t.fromNow(); |
| 18 | + let circle = ( |
| 19 | + <Circle color={theme.palette.text.secondary} variant="outlined" /> |
| 20 | + ); |
| 21 | + |
| 22 | + if (t.isAfter(now.subtract(1, "hour"))) { |
| 23 | + circle = <Circle color={theme.roles.success.fill.solid} />; |
| 24 | + // Since the agent reports on a 10m interval, |
| 25 | + // the last_used_at can be inaccurate when recent. |
| 26 | + message = "Now"; |
| 27 | + } else if (t.isAfter(now.subtract(3, "day"))) { |
| 28 | + circle = <Circle color={theme.palette.text.secondary} />; |
| 29 | + } else if (t.isAfter(now.subtract(1, "month"))) { |
| 30 | + circle = <Circle color={theme.roles.warning.fill.solid} />; |
| 31 | + } else if (t.isAfter(now.subtract(100, "year"))) { |
| 32 | + circle = <Circle color={theme.roles.error.fill.solid} />; |
| 33 | + } else { |
| 34 | + message = "Never"; |
| 35 | + } |
| 36 | + |
| 37 | + return ( |
| 38 | + <Stack |
| 39 | + style={{ color: theme.palette.text.secondary }} |
| 40 | + direction="row" |
| 41 | + spacing={1} |
| 42 | + alignItems="center" |
| 43 | + > |
| 44 | + {circle} |
| 45 | + <span data-chromatic="ignore">{message}</span> |
| 46 | + </Stack> |
| 47 | + ); |
| 48 | +}; |
| 49 | + |
| 50 | +type CircleProps = { |
| 51 | + color: string; |
| 52 | + variant?: "solid" | "outlined"; |
| 53 | +}; |
| 54 | + |
| 55 | +const Circle: FC<CircleProps> = ({ color, variant = "solid" }) => { |
| 56 | + return ( |
| 57 | + <div |
| 58 | + aria-hidden |
| 59 | + css={{ |
| 60 | + width: 8, |
| 61 | + height: 8, |
| 62 | + backgroundColor: variant === "solid" ? color : undefined, |
| 63 | + border: variant === "outlined" ? `1px solid ${color}` : undefined, |
| 64 | + borderRadius: 9999, |
| 65 | + }} |
| 66 | + /> |
| 67 | + ); |
| 68 | +}; |
0 commit comments