Pull request #2231: ADG-8368 Frontend rewritten in TypeScript, added Node 18 support

Merge in DNS/adguard-home from ADG-8368-typescript-node-18 to master Squashed commit of the following: commit daa288ae0d76178af24595cc807055902e6f09ab Merge: 4c89cf720 1085d59a6 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Mon Jun 10 17:22:20 2024 +0200 merge commit 4c89cf7209 Author: Ildar Kamalov <ik@adguard.com> Date: Thu Jun 6 13:27:18 2024 +0300 remove install from initial state commit b943f2011f Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 23:10:55 2024 +0200 frontend production build fix commit cd1be2d66d Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 20:23:14 2024 +0200 production build quickfix commit 7b8ac01fc2 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Wed Jun 5 19:57:31 2024 +0300 all: upd node docker commit 02afed66d5 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:23:12 2024 +0200 changelog fixes commit 9c0f736f0c Merge: 62c4fbf1e e04775c4f Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:18:29 2024 +0200 merge commit 62c4fbf1e3 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:22:22 2024 +0200 empty line in changelog commit 76b1e44a93 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:20:37 2024 +0200 changelog commit f783e90040 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:19:13 2024 +0200 filters.js -> filters.ts commit 3d4ce6554c Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:18:03 2024 +0200 generated file removed commit e35ba58f2a Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:45:21 2024 +0200 rollback unwanted changes commit 1f30d4216d Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:27:36 2024 +0200 review fix commit 6cd4e44f07 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:55:39 2024 +0200 missing generated file restoresd commit 2ab738b303 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:40:32 2024 +0200 Frontend rewritten in TypeScript, added Node 18 support
2024-06-10 18:42:23 +03:00
parent 1085d59a65
commit 1afe226ce8
296 changed files with 32122 additions and 32651 deletions
--- a/client/src/components/Dashboard/Statistics.tsx
+++ b/client/src/components/Dashboard/Statistics.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+import { withTranslation, Trans } from 'react-i18next';
+
+import StatsCard from './StatsCard';
+
+import { getPercent, normalizeHistory } from '../../helpers/helpers';
+import { RESPONSE_FILTER } from '../../helpers/constants';
+
+const getNormalizedHistory = (data: any, interval: any, id: any) => [{ data: normalizeHistory(data), id }];
+
+interface StatisticsProps {
+    interval: number;
+    dnsQueries: number[];
+    blockedFiltering: unknown[];
+    replacedSafebrowsing: unknown[];
+    replacedParental: unknown[];
+    numDnsQueries: number;
+    numBlockedFiltering: number;
+    numReplacedSafebrowsing: number;
+    numReplacedParental: number;
+    refreshButton: React.ReactNode;
+}
+
+const Statistics = ({
+    interval,
+    dnsQueries,
+    blockedFiltering,
+    replacedSafebrowsing,
+    replacedParental,
+    numDnsQueries,
+    numBlockedFiltering,
+    numReplacedSafebrowsing,
+    numReplacedParental,
+}: StatisticsProps) => (
+    <div className="row">
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numDnsQueries}
+                lineData={getNormalizedHistory(dnsQueries, interval, 'dnsQuery')}
+                title={
+                    <Link to="logs">
+                        <Trans>dns_query</Trans>
+                    </Link>
+                }
+                color="blue"
+            />
+        </div>
+
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numBlockedFiltering}
+                lineData={getNormalizedHistory(blockedFiltering, interval, 'blockedFiltering')}
+                percent={getPercent(numDnsQueries, numBlockedFiltering)}
+                title={
+                    <Trans
+                        components={[
+                            <Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED.QUERY}`} key="0">
+                                link
+                            </Link>,
+                        ]}>
+                        blocked_by
+                    </Trans>
+                }
+                color="red"
+            />
+        </div>
+
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numReplacedSafebrowsing}
+                lineData={getNormalizedHistory(replacedSafebrowsing, interval, 'replacedSafebrowsing')}
+                percent={getPercent(numDnsQueries, numReplacedSafebrowsing)}
+                title={
+                    <Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_THREATS.QUERY}`}>
+                        <Trans>stats_malware_phishing</Trans>
+                    </Link>
+                }
+                color="green"
+            />
+        </div>
+
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numReplacedParental}
+                lineData={getNormalizedHistory(replacedParental, interval, 'replacedParental')}
+                percent={getPercent(numDnsQueries, numReplacedParental)}
+                title={
+                    <Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.QUERY}`}>
+                        <Trans>stats_adult</Trans>
+                    </Link>
+                }
+                color="yellow"
+            />
+        </div>
+    </div>
+);
+
+export default withTranslation()(Statistics);