Skip to content
This repository was archived by the owner on Mar 7, 2025. It is now read-only.

Commit 0f98179

Browse files
sdairssdairs
authored
Merge pull request #38 from severinlandolt/main
chore: update tremor and tailwindcss
2 parents 125c5bc + 8ca71a4 commit 0f98179

20 files changed

+567
-389
lines changed

‎dashboard/components/Credentials/CredentialsForm.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FormEvent, useState } from 'react'
22
import { useRouter } from 'next/router'
33

4-
import { Button, SelectBox, SelectBoxItem, TextInput } from '@tremor/react'
4+
import { Button, Select, SelectItem, TextInput } from '@tremor/react'
55

66
import { HostType } from '../../lib/types/credentials'
77
import { OptionType } from '../../lib/types/options'
@@ -54,14 +54,16 @@ export default function CredentialsForm() {
5454
<label className="block text-sm font-normal text-neutral-64 mb-1">
5555
Host
5656
</label>
57-
<SelectBox
57+
<Select
5858
value={hostType}
5959
onValueChange={value => setHostType(value as HostType)}
6060
>
6161
{hostOptions.map(({ text, value }) => (
62-
<SelectBoxItem key={value} text={text} value={value} />
62+
<SelectItem key={value} value={value}>
63+
{text}
64+
</SelectItem>
6365
))}
64-
</SelectBox>
66+
</Select>
6567
</div>
6668
<div className="flex-1">
6769
{hostType === HostType.Other && (

‎dashboard/components/DateFilter.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Popover } from '@headlessui/react'
2-
import { DateRangePicker } from '@tremor/react'
2+
import { DateRangePicker, DateRangePickerItem } from '@tremor/react'
33
import moment from 'moment'
44
import { QuestionIcon } from './Icons'
55

@@ -10,26 +10,26 @@ import {
1010
import useDateFilter from '../lib/hooks/use-date-filter'
1111

1212
const dateFilterOptions: DateRangePickerOption[] = [
13-
{ text: 'Today', value: DateFilterType.Today, startDate: new Date() },
13+
{ text: 'Today', value: DateFilterType.Today, from: new Date() },
1414
{
1515
text: 'Yesterday',
1616
value: DateFilterType.Yesterday,
17-
startDate: moment().subtract(1, 'days').toDate(),
17+
from: moment().subtract(1, 'days').toDate(),
1818
},
1919
{
2020
text: '7 days',
2121
value: DateFilterType.Last7Days,
22-
startDate: moment().subtract(7, 'days').toDate(),
22+
from: moment().subtract(7, 'days').toDate(),
2323
},
2424
{
2525
text: '30 days',
2626
value: DateFilterType.Last30Days,
27-
startDate: moment().subtract(30, 'days').toDate(),
27+
from: moment().subtract(30, 'days').toDate(),
2828
},
2929
{
3030
text: '12 months',
3131
value: DateFilterType.Last12Months,
32-
startDate: moment().subtract(12, 'months').toDate(),
32+
from: moment().subtract(12, 'months').toDate(),
3333
},
3434
]
3535

@@ -53,9 +53,14 @@ export default function DateFilter() {
5353
<DateRangePicker
5454
value={dateRangePickerValue}
5555
onValueChange={onDateRangePickerValueChange}
56-
options={dateFilterOptions}
57-
enableYearPagination
58-
/>
56+
enableYearNavigation
57+
>
58+
{dateFilterOptions.map(({ text, value, from }) => (
59+
<DateRangePickerItem key={text} value={value} from={from}>
60+
{text}
61+
</DateRangePickerItem>
62+
))}
63+
</DateRangePicker>
5964
</div>
6065
</div>
6166
)

‎dashboard/components/ErrorModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
33
import { Button } from '@tremor/react'
44
import { useAnalytics } from './Provider'
55
import Modal from './Modal'
6-
import { colors } from '../styles/theme'
6+
import { colorsTinybird } from '../styles/theme'
77

88
export default function ErrorModal() {
99
const router = useRouter()
@@ -30,7 +30,7 @@ export default function ErrorModal() {
3030
fill="none"
3131
xmlns="http://www.w3.org/2000/svg"
3232
>
33-
<rect width="16" height="16" rx="8" fill={colors.error} />
33+
<rect width="16" height="16" rx="8" fill={colorsTinybird.error} />
3434
<path
3535
fillRule="evenodd"
3636
clipRule="evenodd"

‎dashboard/components/ErrorStats/ErrorStats.tsx‎

Lines changed: 60 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@ import { useState } from 'react'
22

33
import {
44
Card,
5-
TabList,
5+
TabGroup,
66
Tab,
77
AreaChart,
88
BarList,
99
Title,
1010
Metric,
1111
Bold,
12-
SelectBox,
13-
SelectBoxItem,
12+
Select,
13+
SelectItem,
14+
TabList,
15+
TabPanel,
16+
TabPanels,
1417
} from '@tremor/react'
1518
import Loader from '../Loader'
1619

@@ -50,69 +53,82 @@ export default function ErrorStats() {
5053
<div className="grid grid-cols-2 gap-10">
5154
<div className="col-span-2 lg:col-span-1 flex flex-col gap-9">
5255
<div className="hidden sm:block">
53-
<TabList
56+
{/* <TabList
5457
defaultValue="ErrorsFrequency"
5558
onValueChange={value =>
5659
setSelectedTab(value as typeof selectedTab)
5760
}
5861
>
5962
<Tab value="ErrorsFrequency" text="Error Frequency" />
6063
<Tab value="FunctionErrors" text="Function Errors" />
61-
</TabList>
64+
</TabList> */}
6265
</div>
6366

64-
<div className="flex flex-col gap-10">
65-
<div
66-
className={cx(
67-
'flex flex-col gap-3 sm:[&>:first-child]:hidden',
68-
selectedTab !== 'ErrorsFrequency' && 'sm:hidden'
69-
)}
67+
<TabGroup defaultIndex={1}>
68+
<TabList>
69+
<Tab>Errors Frequency</Tab>
70+
<Tab>Function Errors</Tab>
71+
</TabList>
72+
<TabPanels
73+
// className="flex flex-col gap-10"
7074
>
71-
<Bold>Error Frequency</Bold>
75+
<TabPanel>
76+
<div
77+
className={cx(
78+
'flex flex-col gap-3 sm:[&>:first-child]:hidden',
79+
selectedTab !== 'ErrorsFrequency' && 'sm:hidden'
80+
)}
81+
>
82+
<Bold>Error Frequency</Bold>
7283

73-
{errorFrequencyStatus === 'loading' ? (
74-
<Loader />
75-
) : (
76-
<AreaChart
77-
data={errorFrequencyData ?? []}
78-
categories={['total']}
79-
index="hour"
80-
colors={['blue']}
81-
/>
82-
)}
83-
</div>
84+
{errorFrequencyStatus === 'loading' ? (
85+
<Loader />
86+
) : (
87+
<AreaChart
88+
data={errorFrequencyData ?? []}
89+
categories={['total']}
90+
index="hour"
91+
colors={['blue']}
92+
/>
93+
)}
94+
</div>
95+
</TabPanel>
96+
<TabPanel>
97+
<div
98+
className={cx(
99+
'flex flex-col gap-3 sm:[&>:first-child]:hidden',
100+
selectedTab !== 'FunctionErrors' && 'sm:hidden'
101+
)}
102+
>
103+
<Bold>Function Errors</Bold>
84104

85-
<div
86-
className={cx(
87-
'flex flex-col gap-3 sm:[&>:first-child]:hidden',
88-
selectedTab !== 'FunctionErrors' && 'sm:hidden'
89-
)}
90-
>
91-
<Bold>Function Errors</Bold>
92-
93-
<div className="max-h-96 overflow-y-auto">
94-
{functionErrorsStatus === 'loading' ? (
95-
<Loader />
96-
) : (
97-
<BarList data={functionErrorsData ?? []} />
98-
)}
99-
</div>
100-
</div>
101-
</div>
105+
<div className="max-h-96 overflow-y-auto">
106+
{functionErrorsStatus === 'loading' ? (
107+
<Loader />
108+
) : (
109+
<BarList data={functionErrorsData ?? []} />
110+
)}
111+
</div>
112+
</div>
113+
</TabPanel>
114+
</TabPanels>
115+
</TabGroup>
102116
</div>
103117

104118
<div className="col-span-2 lg:col-span-1 flex flex-col gap-9">
105119
<div className="grid grid-cols-2 items-center">
106120
<Bold>Error Per</Bold>
107121

108-
<SelectBox defaultValue={errorBy} onValueChange={setErrorBy}>
122+
<Select defaultValue={errorBy} onValueChange={setErrorBy}>
109123
{ERROR_PARAM_OPTIONS.map(({ text, value }) => (
110-
<SelectBoxItem key={value} {...{ text, value }} />
124+
<SelectItem key={value} value={value}>
125+
{text}
126+
</SelectItem>
111127
))}
112-
</SelectBox>
128+
</Select>
113129
</div>
114130

115-
<div className="max-h-96 overflow-y-auto">
131+
<div className="max-h-96 overflow-y-auto pr-2">
116132
{errorsPerParamStatus === 'loading' ? (
117133
<Loader />
118134
) : (

‎dashboard/components/Loader.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { colors } from '../styles/theme'
1+
import { colorsTinybird } from '../styles/theme'
22

33
export default function Loader({ size = 80 }: { size?: number }) {
44
return (
@@ -12,11 +12,11 @@ export default function Loader({ size = 80 }: { size?: number }) {
1212
>
1313
<path
1414
d="M40.666 0C51.2729 0 61.4455 4.2129 68.9467 11.7122C76.4478 19.2115 80.6633 29.383 80.6659 39.9899C80.6686 50.5969 76.4582 60.7705 68.9608 68.2736C61.4634 75.7766 51.2929 79.9946 40.686 79.9999C30.0791 80.0052 19.9043 75.7974 12.3994 68.3019C4.8945 60.8063 0.673982 50.6369 0.666027 40.0299C0.658072 29.423 4.86334 19.2473 12.357 11.7405C19.8506 4.23369 30.0191 0.0106269 40.626 2e-05M40.6324 6.40001C31.7226 6.40892 23.1811 9.95629 16.8864 16.262C10.5918 22.5677 7.05933 31.1153 7.06602 40.0251C7.0727 48.935 10.6179 57.4773 16.9221 63.7736C23.2262 70.0698 31.773 73.6044 40.6828 73.5999C49.5926 73.5954 58.1358 70.0523 64.4336 63.7498C70.7314 57.4473 74.2682 48.9014 74.2659 39.9916C74.2637 31.0817 70.7227 22.5376 64.4218 16.2382C58.1208 9.93882 49.5758 6.39999 40.666 6.39999"
15-
fill={colors['neutral-08']}
15+
fill={colorsTinybird['neutral-08']}
1616
/>
1717
<path
1818
d="M40.666 0C50.6212 0 60.2187 3.7123 67.5828 10.4114C74.9468 17.1105 79.5481 26.3148 80.4875 36.2257C81.4268 46.1365 78.6367 56.0414 72.6624 64.0047C66.688 71.968 57.9589 77.4173 48.1809 79.2876C38.4029 81.158 28.2789 79.3149 19.7874 74.1186C11.2959 68.9223 5.04728 60.7463 2.26268 51.1884C-0.521908 41.6305 0.357686 31.3778 4.72956 22.4338C9.10144 13.4899 16.6514 6.4977 25.9039 2.82368L28.2658 8.77188C20.4937 11.8581 14.1518 17.7315 10.4794 25.2444C6.80702 32.7573 6.06816 41.3696 8.40721 49.3982C10.7463 57.4268 15.9951 64.2947 23.128 68.6596C30.2608 73.0245 38.765 74.5727 46.9785 73.0016C55.192 71.4305 62.5245 66.8531 67.5429 60.164C72.5614 53.4748 74.9051 45.1546 74.1161 36.8296C73.327 28.5045 69.4619 20.7728 63.2761 15.1455C57.0903 9.51832 49.0284 6.39999 40.666 6.39999V0Z"
19-
fill={colors['neutral-12']}
19+
fill={colorsTinybird['neutral-12']}
2020
/>
2121
</svg>
2222
)

‎dashboard/lib/hooks/api/use-average-calls-per-ip.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@ async function getAverageCallsPerIP(
2323
}
2424

2525
export default function useAverageCallsPerIP() {
26-
const { startDate, endDate } = useDateFilter()
27-
return useQuery([startDate, endDate, PIPE_NAME], getAverageCallsPerIP)
26+
const { from, to } = useDateFilter()
27+
return useQuery([from, to, PIPE_NAME], getAverageCallsPerIP)
2828
}

‎dashboard/lib/hooks/api/use-average-error-count.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@ async function getAverageErrorCount(
2323
}
2424

2525
export default function useAverageErrorCount() {
26-
const { startDate, endDate } = useDateFilter()
27-
return useQuery([startDate, endDate, PIPE_NAME], getAverageErrorCount)
26+
const { from, to } = useDateFilter()
27+
return useQuery([from, to, PIPE_NAME], getAverageErrorCount)
2828
}

‎dashboard/lib/hooks/api/use-error-frequency.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@ async function getErrorFrequency(
2323
}
2424

2525
export default function useErrorFrequency() {
26-
const { startDate, endDate } = useDateFilter()
27-
return useQuery([startDate, endDate, PIPE_NAME], getErrorFrequency)
26+
const { from, to } = useDateFilter()
27+
return useQuery([from, to, PIPE_NAME], getErrorFrequency)
2828
}

‎dashboard/lib/hooks/api/use-error-per.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ async function getErrorPer(
3636
}
3737

3838
export default function useErrorPer() {
39-
const { startDate, endDate } = useDateFilter()
39+
const { from, to } = useDateFilter()
4040
const router = useRouter()
4141
const { error_by: errorByParam } = router.query
4242
const errorBy = isErrorParam(errorByParam)
4343
? errorByParam
4444
: ERROR_PARAM_OPTIONS[0].value
45-
const query = useQuery([errorBy, startDate, endDate, PIPE_NAME], getErrorPer)
45+
const query = useQuery([errorBy, from, to, PIPE_NAME], getErrorPer)
4646
const setErrorBy = (errorBy: string) => {
4747
const searchParams = new URLSearchParams(window.location.search)
4848
searchParams.set('error_by', errorBy)

‎dashboard/lib/hooks/api/use-function-calls.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,6 @@ async function getFunctionCalls(
3939
}
4040

4141
export default function useFunctionCalls() {
42-
const { startDate, endDate } = useDateFilter()
43-
return useQuery([startDate, endDate, PIPE_NAME], getFunctionCalls)
42+
const { from, to } = useDateFilter()
43+
return useQuery([from, to, PIPE_NAME], getFunctionCalls)
4444
}

0 commit comments

Comments
 (0)