improvement(dashboard): add interval selector on dashboard page

This commit is contained in:
Carl-Gerhard Lindesvärd
2025-01-21 15:18:30 +00:00
parent 54d1f9b6d6
commit 08bfff94cf

View File

@@ -32,6 +32,7 @@ import {
} from '@openpanel/constants'; } from '@openpanel/constants';
import type { IServiceDashboard, getReportsByDashboardId } from '@openpanel/db'; import type { IServiceDashboard, getReportsByDashboardId } from '@openpanel/db';
import { OverviewInterval } from '@/components/overview/overview-interval';
import { OverviewRange } from '@/components/overview/overview-range'; import { OverviewRange } from '@/components/overview/overview-range';
interface ListReportsProps { interface ListReportsProps {
@@ -42,7 +43,7 @@ interface ListReportsProps {
export function ListReports({ reports, dashboard }: ListReportsProps) { export function ListReports({ reports, dashboard }: ListReportsProps) {
const router = useRouter(); const router = useRouter();
const params = useAppParams<{ dashboardId: string }>(); const params = useAppParams<{ dashboardId: string }>();
const { range, startDate, endDate } = useOverviewOptions(); const { range, startDate, endDate, interval } = useOverviewOptions();
const deletion = api.report.delete.useMutation({ const deletion = api.report.delete.useMutation({
onError: handleError, onError: handleError,
onSuccess() { onSuccess() {
@@ -56,6 +57,7 @@ export function ListReports({ reports, dashboard }: ListReportsProps) {
<h1 className="text-3xl font-semibold">{dashboard.name}</h1> <h1 className="text-3xl font-semibold">{dashboard.name}</h1>
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
<OverviewRange /> <OverviewRange />
<OverviewInterval />
<Button <Button
icon={PlusIcon} icon={PlusIcon}
onClick={() => { onClick={() => {
@@ -146,11 +148,7 @@ export function ListReports({ reports, dashboard }: ListReportsProps) {
range: range ?? report.range, range: range ?? report.range,
startDate: startDate ?? report.startDate, startDate: startDate ?? report.startDate,
endDate: endDate ?? report.endDate, endDate: endDate ?? report.endDate,
interval: interval: interval ?? report.interval,
getDefaultIntervalByDates(startDate, endDate) ||
(range
? getDefaultIntervalByRange(range)
: report.interval),
}} }}
/> />
</div> </div>