From 01915d3aa3aef53b80ade4a662aa9489878f2e25 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 5 Dec 2019 14:47:59 +0000 Subject: [PATCH 1/3] Add Settings -> Networking -> Cache tab. Signed-off-by: DL6ER --- public/i18n/en/settings.json | 5 +- src/components/settings/CacheInfo.tsx | 108 ++++++++++++++++++++++++++ src/types/api.d.ts | 6 ++ src/util/api.tsx | 4 + src/views/Networking.tsx | 3 + 5 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 src/components/settings/CacheInfo.tsx diff --git a/public/i18n/en/settings.json b/public/i18n/en/settings.json index aef67ae..c0dd2c9 100644 --- a/public/i18n/en/settings.json +++ b/public/i18n/en/settings.json @@ -28,5 +28,8 @@ "Detected custom upstream server": "Detected custom upstream server", "DNS Options": "DNS Options", "Rapid Commit": "Rapid Commit", - "Prefix length (CIDR)": "Prefix length (CIDR)" + "Prefix length (CIDR)": "Prefix length (CIDR)", + "DNS cache size": "DNS cache size", + "DNS cache evictions": "DNS cache evictions", + "DNS cache insertions": "DNS cache insertions" } \ No newline at end of file diff --git a/src/components/settings/CacheInfo.tsx b/src/components/settings/CacheInfo.tsx new file mode 100644 index 0000000..26e87a1 --- /dev/null +++ b/src/components/settings/CacheInfo.tsx @@ -0,0 +1,108 @@ +/* Pi-hole: A black hole for Internet advertisements + * (c) 2019 Pi-hole, LLC (https://pi-hole.net) + * Network-wide ad blocking via your own hardware. + * + * Web Interface + * Settings :: DNS Cache Information component + * + * This file is copyright under the latest version of the EUPL. + * Please see LICENSE file for your rights under this license. */ + +import React, { Component } from "react"; +import { WithTranslation, withTranslation } from "react-i18next"; +import { Form, Col, Input, FormGroup, Label } from "reactstrap"; +import api from "../../util/api"; +import { + CancelablePromise, + ignoreCancel, + makeCancelable +} from "../../util/CancelablePromise"; + +export interface CacheInfoState { + cache_size: number; + cache_evicted: number; + cache_inserted: number; +} + +class CacheInfo extends Component { + state: CacheInfoState = { + cache_size: 0, + cache_evicted: 0, + cache_inserted: 0 + }; + + componentDidMount() { + this.loadCacheInfo(); + } + + componentWillUnmount() { + if (this.loadHandler) { + this.loadHandler.cancel(); + } + } + + private loadHandler: undefined | CancelablePromise; + + loadCacheInfo = () => { + this.loadHandler = makeCancelable(api.getCacheInfo()); + this.loadHandler.promise + .then(res => { + this.setState({ + cache_size: res.cache_size, + cache_evicted: res.cache_evicted, + cache_inserted: res.cache_inserted + }); + }) + .catch(ignoreCancel); + }; + + render() { + const { t } = this.props; + + return ( +
+ + + + + + + + + + + + + + + + + + +
+ ); + } +} + +export default withTranslation(["settings"])(CacheInfo); diff --git a/src/types/api.d.ts b/src/types/api.d.ts index f7464a2..e819f08 100644 --- a/src/types/api.d.ts +++ b/src/types/api.d.ts @@ -76,6 +76,12 @@ interface ApiFtlDbResponse { sqlite_version: string; } +interface ApiCacheResponse { + cache_size: number; + cache_evicted: number; + cache_inserted: number; +} + interface ApiSuccessResponse { status: "success"; } diff --git a/src/util/api.tsx b/src/util/api.tsx index 6bc5360..593579d 100644 --- a/src/util/api.tsx +++ b/src/util/api.tsx @@ -239,6 +239,10 @@ export class ApiClient { return this.http.get("settings/ftldb"); }; + getCacheInfo = (): Promise => { + return this.http.get("dns/cacheinfo"); + }; + getDNSInfo = (): Promise => { return this.http.get("settings/dns"); }; diff --git a/src/views/Networking.tsx b/src/views/Networking.tsx index 33a0b1d..449606a 100644 --- a/src/views/Networking.tsx +++ b/src/views/Networking.tsx @@ -13,6 +13,7 @@ import { WithTranslation, withTranslation } from "react-i18next"; import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap"; import DHCPInfo from "../components/settings/DHCPInfo"; import DNSInfo from "../components/settings/DNSInfo"; +import CacheInfo from "../components/settings/CacheInfo"; import NetworkInfo from "../components/settings/NetworkInfo"; import FTLInfo from "../components/settings/FTLInfo"; @@ -77,12 +78,14 @@ class Networking extends Component { {this.tab("dhcp", t("DHCP"))} {this.tab("dns", t("DNS"))} {this.tab("ftl", t("FTL"))} + {this.tab("cache", t("Cache"))} {this.tabContent("network", )} {this.tabContent("dhcp", )} {this.tabContent("dns", )} {this.tabContent("ftl", )} + {this.tabContent("cache", )} ); From 8ef87831ebcfa7364da94362cf99b4a4665f0640 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Fri, 6 Dec 2019 11:18:34 +0000 Subject: [PATCH 2/3] Add fake API data for new settings tab Signed-off-by: DL6ER --- scripts/make-fake-data.js | 9 +++++++++ src/components/settings/CacheInfo.tsx | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/scripts/make-fake-data.js b/scripts/make-fake-data.js index 1ef623c..349b91d 100644 --- a/scripts/make-fake-data.js +++ b/scripts/make-fake-data.js @@ -383,6 +383,14 @@ function getPreferences() { } } +function cacheinfo() { + return { + cache_size: faker.random.number(), + cache_evicted: faker.random.number(), + cache_inserted: faker.random.number() + }; +} + console.log("Deleting old fake API data..."); fs.emptyDirSync("public/fakeAPI/dns"); fs.emptyDirSync("public/fakeAPI/stats"); @@ -395,6 +403,7 @@ write("public/fakeAPI/dns/whitelist", list()); write("public/fakeAPI/dns/blacklist", list()); write("public/fakeAPI/dns/regexlist", list()); write("public/fakeAPI/dns/status", status()); +write("public/fakeAPI/dns/cacheinfo", cacheinfo()); write("public/fakeAPI/settings/dhcp", getDHCPInfo()); write("public/fakeAPI/settings/dns", getDNSInfo()); write("public/fakeAPI/settings/network", getNetworkInfo()); diff --git a/src/components/settings/CacheInfo.tsx b/src/components/settings/CacheInfo.tsx index 26e87a1..44c9015 100644 --- a/src/components/settings/CacheInfo.tsx +++ b/src/components/settings/CacheInfo.tsx @@ -96,7 +96,7 @@ class CacheInfo extends Component { plaintext readOnly id="cache_inserted" - value={this.state.cache_inserted} + value={this.state.cache_inserted.toLocaleString()} /> From 4ef82bdbb61236df6d2b0d966ca3fe6adb879aac Mon Sep 17 00:00:00 2001 From: DL6ER Date: Fri, 6 Dec 2019 11:26:54 +0000 Subject: [PATCH 3/3] Add API test for api.getCacheInfo() Signed-off-by: DL6ER --- src/util/__tests__/api.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/util/__tests__/api.test.tsx b/src/util/__tests__/api.test.tsx index f6f3729..b4c4503 100644 --- a/src/util/__tests__/api.test.tsx +++ b/src/util/__tests__/api.test.tsx @@ -394,5 +394,10 @@ describe("ApiClient", () => { await expect(api.updatePreferences(settings)).resolves.toEqual(putData); expect(httpClient.put).toHaveBeenCalledWith("settings/web", settings); }); + + it("should call get dns cache endpoint", async () => { + await expect(api.getCacheInfo()).resolves.toEqual(getData); + expect(httpClient.get).toHaveBeenCalledWith("dns/cacheinfo"); + }); }); });