From 01915d3aa3aef53b80ade4a662aa9489878f2e25 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 5 Dec 2019 14:47:59 +0000 Subject: [PATCH 1/6] 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/6] 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/6] 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"); + }); }); }); From 36bae16b8acd56978801a6cf0b6c6222c8d46efc Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 11 Dec 2019 16:35:43 +0200 Subject: [PATCH 4/6] Tweak browserslist config Add `defaults` and `IE 11` Signed-off-by: XhmikosR --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 07527d8..febc681 100644 --- a/package.json +++ b/package.json @@ -90,9 +90,11 @@ "check-format": "prettier --list-different \"src/**/*.tsx\"" }, "browserslist": [ + "defaults", ">0.2%", "not dead", - "not ie <= 11", + "Explorer 11", + "not ExplorerMobile <= 11", "not op_mini all" ] } From 6c43a90d92ce9c7587c4c9b226952f4307b5ff08 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 11 Dec 2019 18:06:24 +0200 Subject: [PATCH 5/6] Run prettier for all js and tsx files Signed-off-by: XhmikosR --- package.json | 4 ++-- scripts/generate-language-list.js | 6 +++--- scripts/make-fake-data.js | 16 +++++++++++----- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 07527d8..499909a 100644 --- a/package.json +++ b/package.json @@ -86,8 +86,8 @@ "test": "react-scripts test --env=jsdom", "coverage": "react-scripts test --env=jsdom --coverage", "eject": "react-scripts eject", - "format": "prettier --write \"src/**/*.tsx\"", - "check-format": "prettier --list-different \"src/**/*.tsx\"" + "format": "prettier --write \"**/*.{js,tsx}\"", + "check-format": "prettier --list-different \"**/*.{js,tsx}\"" }, "browserslist": [ ">0.2%", diff --git a/scripts/generate-language-list.js b/scripts/generate-language-list.js index 292da56..0e7e2c0 100644 --- a/scripts/generate-language-list.js +++ b/scripts/generate-language-list.js @@ -15,9 +15,9 @@ const ISO6391 = require("iso-639-1"); const languages = fs.readdirSync("public/i18n"); const languageMap = languages.map(lang => { return { - "code": lang, - "name": ISO6391.getName(lang) - } + code: lang, + name: ISO6391.getName(lang) + }; }); // Save the language list so the web interface knows what's available diff --git a/scripts/make-fake-data.js b/scripts/make-fake-data.js index 613e2d7..20fc316 100644 --- a/scripts/make-fake-data.js +++ b/scripts/make-fake-data.js @@ -56,8 +56,8 @@ function history(length) { client: isHostname ? faker.internet.domainWord() + ".local" : isIPv4 - ? faker.internet.ip() - : faker.internet.ipv6(), + ? faker.internet.ip() + : faker.internet.ipv6(), dnssec: Math.floor(Math.random() * 5.9), reply: Math.floor(Math.random() * 7.9), response_time: Math.floor(Math.random() * 100.9) @@ -381,7 +381,7 @@ function getPreferences() { return { layout: "boxed", language: "en" - } + }; } console.log("Deleting old fake API data..."); @@ -412,14 +412,20 @@ write("public/fakeAPI/stats/top_domains", topDomains(10)); write("public/fakeAPI/stats/top_clients", topClients(10)); write("public/fakeAPI/stats/top_blocked_clients", topBlockedClients(10)); write("public/fakeAPI/stats/database/overTime/history", historyOverTime(144)); -write("public/fakeAPI/stats/database/overTime/clients", clientsOverTime(144, 5)); +write( + "public/fakeAPI/stats/database/overTime/clients", + clientsOverTime(144, 5) +); write("public/fakeAPI/stats/database/summary", summary()); write("public/fakeAPI/stats/database/query_types", queryTypes()); write("public/fakeAPI/stats/database/upstreams", upstreams(3)); write("public/fakeAPI/stats/database/top_blocked", topBlockedDomains(10)); write("public/fakeAPI/stats/database/top_domains", topDomains(10)); write("public/fakeAPI/stats/database/top_clients", topClients(10)); -write("public/fakeAPI/stats/database/top_blocked_clients", topBlockedClients(10)); +write( + "public/fakeAPI/stats/database/top_blocked_clients", + topBlockedClients(10) +); write("public/fakeAPI/auth", auth()); write("public/fakeAPI/version", getVersionInfo()); From 671cdbb9396817f7ae6f36dd23b1f9194d95a6a6 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 11 Dec 2019 18:32:34 +0200 Subject: [PATCH 6/6] html: minor cleanup * `X-UA-Compatible` is not honored by IE 11 * the type `text/javascript` is unneeded since it's the default * replace the obsolete in HTML5 `align="center"` with inline CSS Signed-off-by: XhmikosR --- public/404.html | 4 ++-- public/index.html | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/public/404.html b/public/404.html index 7ff8725..705a51d 100644 --- a/public/404.html +++ b/public/404.html @@ -1,9 +1,9 @@ - + Pi-hole Web Interface -