Refactor shared data source selection for dashboard and map
This commit is contained in:
@@ -331,7 +331,11 @@ Rewrite the four hooks listed above as thin wrappers around `useListData`.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### TASK-017 — Move `source` derivation out of page components
|
### TASK-017 — Move `source` derivation out of page components (done)
|
||||||
|
|
||||||
|
**Where fixed:** `frontend/src/utils/queryUtils.ts`, `frontend/src/pages/DashboardPage.tsx`, `frontend/src/pages/MapPage.tsx`
|
||||||
|
|
||||||
|
**Summary:** Added `getDataSource` to `frontend/src/utils/queryUtils.ts` and replaced inline `timeRange === "24h"` ternaries with the shared function in both dashboard and map pages.
|
||||||
|
|
||||||
**Where found:** `frontend/src/pages/DashboardPage.tsx` and `frontend/src/pages/MapPage.tsx` both contain the identical line:
|
**Where found:** `frontend/src/pages/DashboardPage.tsx` and `frontend/src/pages/MapPage.tsx` both contain the identical line:
|
||||||
```ts
|
```ts
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ import { TopCountriesBarChart } from "../components/TopCountriesBarChart";
|
|||||||
import { TopCountriesPieChart } from "../components/TopCountriesPieChart";
|
import { TopCountriesPieChart } from "../components/TopCountriesPieChart";
|
||||||
import { useCommonSectionStyles } from "../components/commonStyles";
|
import { useCommonSectionStyles } from "../components/commonStyles";
|
||||||
import { useDashboardCountryData } from "../hooks/useDashboardCountryData";
|
import { useDashboardCountryData } from "../hooks/useDashboardCountryData";
|
||||||
|
import { getDataSource } from "../utils/queryUtils";
|
||||||
import type { BanOriginFilter, TimeRange } from "../types/ban";
|
import type { BanOriginFilter, TimeRange } from "../types/ban";
|
||||||
|
|
||||||
|
|
||||||
@@ -71,7 +72,7 @@ export function DashboardPage(): React.JSX.Element {
|
|||||||
const [timeRange, setTimeRange] = useState<TimeRange>("24h");
|
const [timeRange, setTimeRange] = useState<TimeRange>("24h");
|
||||||
const [originFilter, setOriginFilter] = useState<BanOriginFilter>("all");
|
const [originFilter, setOriginFilter] = useState<BanOriginFilter>("all");
|
||||||
|
|
||||||
const source = timeRange === "24h" ? "fail2ban" : "archive";
|
const source = getDataSource(timeRange);
|
||||||
|
|
||||||
const { countries, countryNames, isLoading: countryLoading, error: countryError, reload: reloadCountry } =
|
const { countries, countryNames, isLoading: countryLoading, error: countryError, reload: reloadCountry } =
|
||||||
useDashboardCountryData(timeRange, originFilter, source);
|
useDashboardCountryData(timeRange, originFilter, source);
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ import { WorldMap } from "../components/WorldMap";
|
|||||||
import { useMapData } from "../hooks/useMapData";
|
import { useMapData } from "../hooks/useMapData";
|
||||||
import { useMapColorThresholds } from "../hooks/useMapColorThresholds";
|
import { useMapColorThresholds } from "../hooks/useMapColorThresholds";
|
||||||
import { MapBansTable } from "./map/MapBansTable";
|
import { MapBansTable } from "./map/MapBansTable";
|
||||||
|
import { getDataSource } from "../utils/queryUtils";
|
||||||
import type { TimeRange } from "../types/map";
|
import type { TimeRange } from "../types/map";
|
||||||
import type { BanOriginFilter } from "../types/ban";
|
import type { BanOriginFilter } from "../types/ban";
|
||||||
|
|
||||||
@@ -96,7 +97,7 @@ export function MapPage(): React.JSX.Element {
|
|||||||
const [page, setPage] = useState<number>(1);
|
const [page, setPage] = useState<number>(1);
|
||||||
const [pageSize, setPageSize] = useState<number>(100);
|
const [pageSize, setPageSize] = useState<number>(100);
|
||||||
|
|
||||||
const source = range === "24h" ? "fail2ban" : "archive";
|
const source = getDataSource(range);
|
||||||
|
|
||||||
const { countries, countryNames, bans, total, loading, error, refresh } =
|
const { countries, countryNames, bans, total, loading, error, refresh } =
|
||||||
useMapData(range, originFilter, source, selectedCountry ?? undefined);
|
useMapData(range, originFilter, source, selectedCountry ?? undefined);
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { describe, expect, it } from "vitest";
|
import { describe, expect, it } from "vitest";
|
||||||
import { areHistoryQueriesEqual } from "../queryUtils";
|
import { areHistoryQueriesEqual, getDataSource } from "../queryUtils";
|
||||||
import type { HistoryQuery } from "../../types/history";
|
import type { HistoryQuery } from "../../types/history";
|
||||||
|
|
||||||
describe("areHistoryQueriesEqual", () => {
|
describe("areHistoryQueriesEqual", () => {
|
||||||
@@ -38,3 +38,15 @@ describe("areHistoryQueriesEqual", () => {
|
|||||||
).toBe(false);
|
).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("getDataSource", () => {
|
||||||
|
it("returns fail2ban for the 24h range", () => {
|
||||||
|
expect(getDataSource("24h")).toBe("fail2ban");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("returns archive for ranges other than 24h", () => {
|
||||||
|
expect(getDataSource("7d")).toBe("archive");
|
||||||
|
expect(getDataSource("30d")).toBe("archive");
|
||||||
|
expect(getDataSource("365d")).toBe("archive");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import type { HistoryQuery } from "../types/history";
|
import type { HistoryQuery } from "../types/history";
|
||||||
|
import type { TimeRange } from "../types/ban";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Compare two history query objects for semantic equality.
|
* Compare two history query objects for semantic equality.
|
||||||
@@ -25,3 +26,13 @@ export function areHistoryQueriesEqual(
|
|||||||
a.page_size === b.page_size
|
a.page_size === b.page_size
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return the data source for the given dashboard time range.
|
||||||
|
*
|
||||||
|
* @param range - The selected time range.
|
||||||
|
* @returns The backend source to query.
|
||||||
|
*/
|
||||||
|
export function getDataSource(range: TimeRange): "fail2ban" | "archive" {
|
||||||
|
return range === "24h" ? "fail2ban" : "archive";
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user