From f97c1132b9346bc5d0537bb5899b290ca50fb894 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABl=20Gangloff?= Date: Wed, 25 Dec 2024 22:43:34 +0100 Subject: [PATCH] feat: add an interpretation to the table of tracked domains --- .../tracking/watchlist/TrackedDomainTable.tsx | 102 +++++++++++++----- assets/pages/tracking/TrackedDomainPage.tsx | 10 +- translations/translations.pot | 41 +++++-- 3 files changed, 111 insertions(+), 42 deletions(-) diff --git a/assets/components/tracking/watchlist/TrackedDomainTable.tsx b/assets/components/tracking/watchlist/TrackedDomainTable.tsx index 4c141d8..8116d58 100644 --- a/assets/components/tracking/watchlist/TrackedDomainTable.tsx +++ b/assets/components/tracking/watchlist/TrackedDomainTable.tsx @@ -1,26 +1,45 @@ -import React, {useEffect, useState} from "react"; +import React, {ReactElement, useEffect, useState} from "react"; import {Domain, getTrackedDomainList} from "../../../utils/api"; -import {Table, Tag, Tooltip} from "antd"; +import {Button, Empty, Result, Skeleton, Table, Tag, Tooltip} from "antd"; import {t} from "ttag"; -import useBreakpoint from "../../../hooks/useBreakpoint"; import {ColumnType} from "antd/es/table"; import {rdapStatusCodeDetailTranslation} from "../../../utils/functions/rdapTranslation"; import {eppStatusCodeToColor} from "../../../utils/functions/eppStatusCodeToColor"; +import {Link} from "react-router-dom"; +import {ExceptionOutlined, MonitorOutlined} from '@ant-design/icons' + export function TrackedDomainTable() { - const sm = useBreakpoint('sm') - const [dataTable, setDataTable] = useState([]) - const [total, setTotal] = useState() + const REDEMPTION_NOTICE = + redemption period + + const PENDING_DELETE_NOTICE = + pending delete + + + const [dataTable, setDataTable] = useState<(Domain & { domain: Domain })[]>([]) + const [total, setTotal] = useState() + const [specialNotice, setSpecialNotice] = useState([]) const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation() const fetchData = (params: { page: number, itemsPerPage: number }) => { getTrackedDomainList(params).then(data => { setTotal(data['hydra:totalItems']) + + const notices: ReactElement[] = [] setDataTable(data['hydra:member'].map((d: Domain) => { const expirationDate = d.events.find(e => e.action === 'expiration' && !e.deleted)?.date + if (d.status.includes('redemption period')) { + if (!notices.includes(REDEMPTION_NOTICE)) notices.push(REDEMPTION_NOTICE) + } else if (d.status.includes('pending delete')) { + if (!notices.includes(PENDING_DELETE_NOTICE)) notices.push(PENDING_DELETE_NOTICE) + } + return { key: d.ldhName, ldhName: d.ldhName, @@ -35,6 +54,7 @@ export function TrackedDomainTable() { domain: d } })) + setSpecialNotice(notices) }) } @@ -42,6 +62,7 @@ export function TrackedDomainTable() { fetchData({page: 1, itemsPerPage: 30}) }, []) + const columns: ColumnType[] = [ { title: t`Domain`, @@ -59,6 +80,14 @@ export function TrackedDomainTable() { return new Date(expirationDate1).getTime() - new Date(expirationDate2).getTime() } }, + + { + title: t`Updated at`, + dataIndex: 'updatedAt', + sorter: (a: { domain: Domain }, b: { + domain: Domain + }) => new Date(a.domain.updatedAt).getTime() - new Date(b.domain.updatedAt).getTime() + }, { title: t`Status`, dataIndex: 'status', @@ -72,29 +101,48 @@ export function TrackedDomainTable() { value: s, })), onFilter: (value, record: { domain: Domain }) => record.domain.status.includes(value as string) - }, - { - title: t`Updated at`, - dataIndex: 'updatedAt', - sorter: (a: { domain: Domain }, b: { - domain: Domain - }) => new Date(a.domain.updatedAt).getTime() - new Date(b.domain.updatedAt).getTime() } ] + return <> + { + total === 0 ? + + + + : + 0 ? { + icon: , + status: 'warning', + title: t`At least one domain name you are tracking requires special attention`, + extra: specialNotice + } : { + icon: , + status: 'info', + title: t`The domain names below are subject to special monitoring`, + })} + /> - return { - fetchData({page, itemsPerPage}) - } - }} - scroll={{y: '60vh'}} - /> +
{ + fetchData({page, itemsPerPage}) + } + }} + scroll={{y: '50vh'}} + /> + + } + } \ No newline at end of file diff --git a/assets/pages/tracking/TrackedDomainPage.tsx b/assets/pages/tracking/TrackedDomainPage.tsx index 5e1c40e..3209c23 100644 --- a/assets/pages/tracking/TrackedDomainPage.tsx +++ b/assets/pages/tracking/TrackedDomainPage.tsx @@ -1,14 +1,6 @@ -import {Card, Flex} from "antd"; -import {t} from "ttag"; import {TrackedDomainTable} from "../../components/tracking/watchlist/TrackedDomainTable"; import React from "react"; export default function TrackedDomainPage() { - - return - - - - + return } \ No newline at end of file diff --git a/translations/translations.pot b/translations/translations.pot index b5a1b4c..46dd0c0 100644 --- a/translations/translations.pot +++ b/translations/translations.pot @@ -123,7 +123,7 @@ msgid "Search" msgstr "" #: assets/components/Sider.tsx:39 -#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:47 +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:68 msgid "Domain" msgstr "" @@ -150,7 +150,6 @@ msgstr "" #: assets/components/Sider.tsx:87 #: assets/pages/StatisticsPage.tsx:68 -#: assets/pages/tracking/TrackedDomainPage.tsx:9 msgid "Tracked domain names" msgstr "" @@ -377,16 +376,46 @@ msgstr "" msgid ".${ tld.tld } Registry" msgstr "" -#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:51 +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:14 +msgid "" +"At least one domain name is in redemption period and will potentially be " +"deleted soon" +msgstr "" + +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:19 +msgid "" +"At least one domain name is pending deletion and will soon become available " +"for registration again" +msgstr "" + +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:72 msgid "Expiration date" msgstr "" -#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:63 +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:85 +msgid "Updated at" +msgstr "" + +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:92 msgid "Status" msgstr "" -#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:77 -msgid "Updated at" +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:110 +msgid "No tracked domain names were found, please create your first Watchlist" +msgstr "" + +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:118 +msgid "" +"Please note that this table does not include domain names marked as expired " +"or those with an unknown expiration date" +msgstr "" + +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:122 +msgid "At least one domain name you are tracking requires special attention" +msgstr "" + +#: assets/components/tracking/watchlist/TrackedDomainTable.tsx:127 +msgid "The domain names below are subject to special monitoring" msgstr "" #: assets/components/tracking/watchlist/UpdateWatchlistButton.tsx:31