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/Logs/index.tsx
+++ b/client/src/components/Logs/index.tsx
@@ -0,0 +1,241 @@
+import React, { useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
+
+import Modal from 'react-modal';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
+import { useHistory } from 'react-router-dom';
+import queryString from 'query-string';
+import classNames from 'classnames';
+import { BLOCK_ACTIONS, MEDIUM_SCREEN_SIZE } from '../../helpers/constants';
+
+import Loading from '../ui/Loading';
+
+import Filters from './Filters';
+
+import Disabled from './Disabled';
+import { getFilteringStatus } from '../../actions/filtering';
+
+import { getClients } from '../../actions';
+import { getDnsConfig } from '../../actions/dnsConfig';
+import { getAccessList } from '../../actions/access';
+import { getAllBlockedServices } from '../../actions/services';
+import { getLogsConfig, resetFilteredLogs, setFilteredLogs, toggleDetailedLogs } from '../../actions/queryLogs';
+
+import InfiniteTable from './InfiniteTable';
+import './Logs.css';
+import { BUTTON_PREFIX } from './Cells/helpers';
+
+import AnonymizerNotification from './AnonymizerNotification';
+import { RootState } from '../../initialState';
+
+const processContent = (data: any, buttonType: string) =>
+    Object.entries(data).map(([key, value]) => {
+        if (!value) {
+            return null;
+        }
+
+        const isTitle = value === 'title';
+        const isButton = key.startsWith(BUTTON_PREFIX);
+        const isBoolean = typeof value === 'boolean';
+        const isHidden = isBoolean && value === false;
+
+        let keyClass = 'key-colon';
+
+        if (isTitle) {
+            keyClass = 'title--border';
+        }
+        if (isButton || isBoolean) {
+            keyClass = '';
+        }
+
+        return isHidden ? null : (
+            <div className="grid__row" key={key}>
+                <div
+                    className={classNames(`key__${key}`, keyClass, {
+                        'font-weight-bold': isBoolean && value === true,
+                    })}>
+                    <Trans>{isButton ? value : key}</Trans>
+                </div>
+
+                <div className={`value__${key} text-pre text-truncate`}>
+                    <Trans>{isTitle || isButton || isBoolean ? '' : value || '—'}</Trans>
+                </div>
+            </div>
+        );
+    });
+
+const Logs = () => {
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    const { response_status: response_status_url_param, search: search_url_param } = queryString.parse(
+        history.location.search,
+    );
+
+    const {
+        enabled,
+        processingGetConfig,
+        // processingAdditionalLogs,
+        processingGetLogs,
+        anonymize_client_ip: anonymizeClientIp,
+    } = useSelector((state: RootState) => state.queryLogs, shallowEqual);
+
+    const filter = useSelector((state: RootState) => state.queryLogs.filter, shallowEqual);
+
+    const logs = useSelector((state: RootState) => state.queryLogs.logs, shallowEqual);
+
+    const search = search_url_param || filter?.search || '';
+    const response_status = response_status_url_param || filter?.response_status || '';
+
+    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= MEDIUM_SCREEN_SIZE);
+    const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
+    const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
+    const [isModalOpened, setModalOpened] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const closeModal = () => setModalOpened(false);
+
+    useEffect(() => {
+        (async () => {
+            setIsLoading(true);
+            await dispatch(
+                setFilteredLogs({
+                    search,
+                    response_status,
+                }),
+            );
+            setIsLoading(false);
+        })();
+    }, [response_status, search]);
+
+    const mediaQuery = window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`);
+    const mediaQueryHandler = (e: any) => {
+        setIsSmallScreen(e.matches);
+        if (e.matches) {
+            dispatch(toggleDetailedLogs(false));
+        } else {
+            dispatch(toggleDetailedLogs(true));
+        }
+    };
+
+    useEffect(() => {
+        try {
+            mediaQuery.addEventListener('change', mediaQueryHandler);
+        } catch (e1) {
+            try {
+                // Safari 13.1 do not support mediaQuery.addEventListener('change', handler)
+                mediaQuery.addListener(mediaQueryHandler);
+            } catch (e2) {
+                console.error(e2);
+            }
+        }
+
+        (async () => {
+            setIsLoading(true);
+            dispatch(getFilteringStatus());
+            dispatch(getClients());
+            dispatch(getAllBlockedServices());
+            try {
+                await Promise.all([dispatch(getLogsConfig()), dispatch(getDnsConfig()), dispatch(getAccessList())]);
+            } catch (err) {
+                console.error(err);
+            } finally {
+                setIsLoading(false);
+            }
+        })();
+
+        return () => {
+            try {
+                mediaQuery.removeEventListener('change', mediaQueryHandler);
+            } catch (e1) {
+                try {
+                    // Safari 13.1 do not support mediaQuery.addEventListener('change', handler)
+                    mediaQuery.removeListener(mediaQueryHandler);
+                } catch (e2) {
+                    console.error(e2);
+                }
+            }
+
+            dispatch(resetFilteredLogs());
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!history.location.search) {
+            (async () => {
+                setIsLoading(true);
+
+                await dispatch(setFilteredLogs());
+                setIsLoading(false);
+            })();
+        }
+    }, [history.location.search]);
+
+    const renderPage = () => (
+        <>
+            <Filters
+                filter={{
+                    response_status,
+                    search,
+                }}
+                setIsLoading={setIsLoading}
+                processingGetLogs={processingGetLogs}
+                // processingAdditionalLogs={processingAdditionalLogs}
+            />
+
+            <InfiniteTable
+                isLoading={isLoading}
+                items={logs}
+                isSmallScreen={isSmallScreen}
+                setDetailedDataCurrent={setDetailedDataCurrent}
+                setButtonType={setButtonType}
+                setModalOpened={setModalOpened}
+            />
+
+            <Modal
+                portalClassName="grid"
+                isOpen={isSmallScreen && isModalOpened}
+                onRequestClose={closeModal}
+                style={{
+                    content: {
+                        width: 'calc(100% - 32px)',
+                        height: 'fit-content',
+                        left: '50%',
+                        top: 47,
+                        padding: '0',
+                        maxWidth: '720px',
+                        transform: 'translateX(-50%)',
+                    },
+                    overlay: {
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                    },
+                }}>
+                <div className="logs__modal-wrap">
+                    <svg className="icon icon--24 icon-cross d-block cursor--pointer" onClick={closeModal}>
+                        <use xlinkHref="#cross" />
+                    </svg>
+
+                    {processContent(detailedDataCurrent, buttonType)}
+                </div>
+            </Modal>
+        </>
+    );
+
+    return (
+        <>
+            {enabled && (
+                <>
+                    {processingGetConfig && <Loading />}
+
+                    {anonymizeClientIp && <AnonymizerNotification />}
+                    {!processingGetConfig && renderPage()}
+                </>
+            )}
+
+            {!enabled && !processingGetConfig && <Disabled />}
+        </>
+    );
+};
+
+export default Logs;