konnosDashboard
ChartIntervalDropdown.tsx101 lines · main
1import { ChevronDown } from 'lucide-react'
2import {
3 Button,
4 DropdownMenu,
5 DropdownMenuContent,
6 DropdownMenuRadioGroup,
7 DropdownMenuRadioItem,
8 DropdownMenuTrigger,
9 Tooltip,
10 TooltipContent,
11 TooltipTrigger,
12} from 'ui'
13
14import { CHART_INTERVALS } from './logs.utils'
15import { InlineLink } from '@/components/ui/InlineLink'
16import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
17
18function getDaysRequired(startValue: number, startUnit: string): number {
19 if (startUnit === 'day') return startValue
20 if (startUnit === 'hour') return startValue / 24
21 return 0
22}
23
24interface ChartIntervalDropdownProps {
25 value: string
26 onChange: (value: string) => void
27 organizationSlug?: string
28 dropdownAlign?: 'start' | 'center' | 'end'
29 tooltipSide?: 'left' | 'right' | 'top' | 'bottom'
30}
31
32export const ChartIntervalDropdown = ({
33 value,
34 onChange,
35 organizationSlug,
36 dropdownAlign = 'start',
37 tooltipSide = 'right',
38}: ChartIntervalDropdownProps) => {
39 const selectedInterval = CHART_INTERVALS.find((i) => i.key === value) || CHART_INTERVALS[1]
40
41 const { getEntitlementMax } = useCheckEntitlements('log.retention_days')
42 const retentionDays = getEntitlementMax()
43
44 return (
45 <DropdownMenu>
46 <DropdownMenuTrigger asChild>
47 <Button type="default" iconRight={<ChevronDown size={14} />}>
48 <span>{selectedInterval.label}</span>
49 </Button>
50 </DropdownMenuTrigger>
51 <DropdownMenuContent side="bottom" align={dropdownAlign} className="w-40">
52 <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
53 {CHART_INTERVALS.map((i) => {
54 const daysRequired = getDaysRequired(i.startValue, i.startUnit)
55 const disabled = retentionDays !== undefined && daysRequired > retentionDays
56
57 if (disabled) {
58 return (
59 <Tooltip key={i.key}>
60 <TooltipTrigger asChild>
61 <DropdownMenuRadioItem disabled value={i.key} className="pointer-events-auto!">
62 {i.label}
63 </DropdownMenuRadioItem>
64 </TooltipTrigger>
65 <TooltipContent side={tooltipSide}>
66 <p>
67 Your plan only includes up to {retentionDays} day
68 {retentionDays !== undefined && retentionDays > 1 ? 's' : ''} of log retention
69 </p>
70 <p className="text-foreground-light">
71 {organizationSlug ? (
72 <>
73 <InlineLink
74 className="text-foreground-light hover:text-foreground"
75 href={`/org/${organizationSlug}/billing?panel=subscriptionPlan`}
76 >
77 Upgrade your plan
78 </InlineLink>{' '}
79 to increase log retention and view statistics for the{' '}
80 {i.label.toLowerCase()}
81 </>
82 ) : (
83 `Upgrade your plan to increase log retention and view statistics for the ${i.label.toLowerCase()}`
84 )}
85 </p>
86 </TooltipContent>
87 </Tooltip>
88 )
89 } else {
90 return (
91 <DropdownMenuRadioItem key={i.key} value={i.key}>
92 {i.label}
93 </DropdownMenuRadioItem>
94 )
95 }
96 })}
97 </DropdownMenuRadioGroup>
98 </DropdownMenuContent>
99 </DropdownMenu>
100 )
101}