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/UpstreamResponses.tsx
+++ b/client/src/components/Dashboard/UpstreamResponses.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+// @ts-expect-error FIXME: update react-table
+import ReactTable from 'react-table';
+import { withTranslation, Trans } from 'react-i18next';
+
+import { TFunction } from 'i18next';
+import Card from '../ui/Card';
+
+import Cell from '../ui/Cell';
+
+import DomainCell from './DomainCell';
+
+import { getPercent } from '../../helpers/helpers';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
+
+const CountCell = (totalBlocked: any) =>
+    function cell(row: any) {
+        const { value } = row;
+        const percent = getPercent(totalBlocked, value);
+
+        return <Cell value={value} percent={percent} color={STATUS_COLORS.green} />;
+    };
+
+const getTotalUpstreamRequests = (stats: any) => {
+    let total = 0;
+    stats.forEach(({ count }: any) => {
+        total += count;
+    });
+
+    return total;
+};
+
+interface UpstreamResponsesProps {
+    topUpstreamsResponses: { name: string; count: number }[];
+    refreshButton: React.ReactNode;
+    subtitle: string;
+    t: TFunction;
+}
+
+const UpstreamResponses = ({ t, refreshButton, topUpstreamsResponses, subtitle }: UpstreamResponsesProps) => (
+    <Card title={t('top_upstreams')} subtitle={subtitle} bodyType="card-table" refresh={refreshButton}>
+        <ReactTable
+            data={topUpstreamsResponses.map(({ name: domain, count }: { name: string; count: number }) => ({
+                domain,
+                count,
+            }))}
+            columns={[
+                {
+                    Header: <Trans>upstream</Trans>,
+                    accessor: 'domain',
+                    Cell: DomainCell,
+                },
+                {
+                    Header: <Trans>requests_count</Trans>,
+                    accessor: 'count',
+                    maxWidth: 190,
+                    Cell: CountCell(getTotalUpstreamRequests(topUpstreamsResponses)),
+                },
+            ]}
+            showPagination={false}
+            noDataText={t('no_upstreams_data_found')}
+            minRows={TABLES_MIN_ROWS}
+            defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
+            className="-highlight card-table-overflow--limited stats__table"
+        />
+    </Card>
+);
+
+export default withTranslation()(UpstreamResponses);