feat: remove some cards

This commit is contained in:
Maël Gangloff 2024-08-02 17:23:27 +02:00
parent e15c2e1a17
commit 54614c2aa1
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
6 changed files with 145 additions and 108 deletions

View File

@ -8,10 +8,19 @@ import {
} from "@ant-design/icons"; } from "@ant-design/icons";
import {Timeline} from "antd"; import {Timeline} from "antd";
import React from "react"; import React from "react";
import {Domain} from "../../utils/api"; import {Domain, EventAction} from "../../utils/api";
import {t} from "ttag"; import {t} from "ttag";
import useBreakpoint from "../../hooks/useBreakpoint"; import useBreakpoint from "../../hooks/useBreakpoint";
export function actionToColor(a: EventAction) {
return a === 'registration' ? 'green' :
a === 'reregistration' ? 'cyan' :
a === 'expiration' ? 'red' :
a === 'deletion' ? 'magenta' :
a === 'transfer' ? 'orange' :
a === 'last changed' ? 'blue' : 'default'
}
export function EventTimeline({domain}: { domain: Domain }) { export function EventTimeline({domain}: { domain: Domain }) {
const sm = useBreakpoint('sm') const sm = useBreakpoint('sm')
@ -37,24 +46,18 @@ export function EventTimeline({domain}: { domain: Domain }) {
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime()) .sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
.map(({action, date}) => { .map(({action, date}) => {
let color, dot let dot
if (action === 'registration') { if (action === 'registration') {
color = 'green'
dot = <SignatureOutlined style={{fontSize: '16px'}}/> dot = <SignatureOutlined style={{fontSize: '16px'}}/>
} else if (action === 'expiration') { } else if (action === 'expiration') {
color = 'red'
dot = <ClockCircleOutlined style={{fontSize: '16px'}}/> dot = <ClockCircleOutlined style={{fontSize: '16px'}}/>
} else if (action === 'transfer') { } else if (action === 'transfer') {
color = 'orange'
dot = <ShareAltOutlined style={{fontSize: '16px'}}/> dot = <ShareAltOutlined style={{fontSize: '16px'}}/>
} else if (action === 'last changed') { } else if (action === 'last changed') {
color = 'blue'
dot = <SyncOutlined style={{fontSize: '16px'}}/> dot = <SyncOutlined style={{fontSize: '16px'}}/>
} else if (action === 'deletion') { } else if (action === 'deletion') {
color = 'red'
dot = <DeleteOutlined style={{fontSize: '16px'}}/> dot = <DeleteOutlined style={{fontSize: '16px'}}/>
} else if (action === 'reregistration') { } else if (action === 'reregistration') {
color = 'green'
dot = <ReloadOutlined style={{fontSize: '16px'}}/> dot = <ReloadOutlined style={{fontSize: '16px'}}/>
} }
@ -69,7 +72,7 @@ export function EventTimeline({domain}: { domain: Domain }) {
} }
return { return {
color, color: actionToColor(action),
dot, dot,
pending: new Date(date).getTime() > new Date().getTime(), pending: new Date(date).getTime() > new Date().getTime(),
...text ...text

View File

@ -1,8 +1,9 @@
import {Card, Divider, Popconfirm, theme, Typography} from "antd"; import {Card, Divider, Popconfirm, Table, theme} from "antd";
import {t} from "ttag"; import {t} from "ttag";
import {DeleteFilled} from "@ant-design/icons"; import {DeleteFilled} from "@ant-design/icons";
import React from "react"; import React from "react";
import {Connector, deleteConnector} from "../../utils/api/connectors"; import {Connector, deleteConnector} from "../../utils/api/connectors";
import useBreakpoint from "../../hooks/useBreakpoint";
const {useToken} = theme; const {useToken} = theme;
@ -11,20 +12,38 @@ type ConnectorElement = Connector & { id: string }
export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorElement[], onDelete: () => void }) { export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorElement[], onDelete: () => void }) {
const {token} = useToken() const {token} = useToken()
const sm = useBreakpoint('sm')
const columns = [
{
title: t`Provider`,
dataIndex: 'provider'
}
]
return <> return <>
{connectors.map(connector => {connectors.map(connector =>
<> <>
<Card title={t`Connector ${connector.id}`} extra={<Popconfirm <Card title={t`Connector`}
title={t`Delete the Connector`} size='small'
extra={<Popconfirm title={t`Delete the Connector`}
description={t`Are you sure to delete this Connector?`} description={t`Are you sure to delete this Connector?`}
onConfirm={() => deleteConnector(connector.id).then(onDelete)} onConfirm={() => deleteConnector(connector.id).then(onDelete)}
okText={t`Yes`} okText={t`Yes`}
cancelText={t`No`} cancelText={t`No`}
><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}> ><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}>
<Typography.Paragraph> <Card.Meta description={connector.id} style={{marginBottom: '1em'}}/>
{t`Provider`} : {connector.provider} <Table
</Typography.Paragraph> columns={columns}
pagination={false}
dataSource={[
{
provider: connector.provider
}
]}
{...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
/>
</Card> </Card>
<Divider/> <Divider/>
</> </>

View File

@ -1,21 +1,37 @@
import {Card, Divider, Popconfirm, theme, Typography} from "antd"; import {Card, Divider, Popconfirm, Table, Tag, theme, Typography} from "antd";
import {t} from "ttag"; import {t} from "ttag";
import {deleteWatchlist, EventAction} from "../../utils/api"; import {deleteWatchlist} from "../../utils/api";
import {DeleteFilled} from "@ant-design/icons"; import {DeleteFilled} from "@ant-design/icons";
import React from "react"; import React from "react";
import useBreakpoint from "../../hooks/useBreakpoint";
import {actionToColor} from "../search/EventTimeline";
import {Watchlist} from "../../pages/tracking/WatchlistPage";
const {useToken} = theme; const {useToken} = theme;
type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] }
export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) { export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
const {token} = useToken() const {token} = useToken()
const sm = useBreakpoint('sm')
const columns = [
{
title: t`Domain names`,
dataIndex: 'domains'
},
{
title: t`Tracked events`,
dataIndex: 'events'
}
]
return <> return <>
{watchlists.map(watchlist => {watchlists.map(watchlist =>
<> <>
<Card title={t`Watchlist`} type="inner" extra={<Popconfirm <Card
title={t`Watchlist`}
size='small'
extra={<Popconfirm
title={t`Delete the Watchlist`} title={t`Delete the Watchlist`}
description={t`Are you sure to delete this Watchlist?`} description={t`Are you sure to delete this Watchlist?`}
onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)} onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
@ -24,14 +40,17 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
okButtonProps={{danger: true}} okButtonProps={{danger: true}}
><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}> ><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}>
<Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/> <Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/>
<Typography.Paragraph> <Table
{t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')} columns={columns}
</Typography.Paragraph> pagination={false}
{ dataSource={[{
watchlist.triggers && <Typography.Paragraph> domains: watchlist.domains.map(d =>
{t`Domain triggers`} : {watchlist.triggers.map(t => `${t.event} => ${t.action}`).join(',')} <Typography.Paragraph>{d.ldhName}</Typography.Paragraph>),
</Typography.Paragraph> events: watchlist.triggers?.filter(t => t.action === 'email')
} .map(t => <Tag color={actionToColor(t.event)}>{t.event}</Tag>)
}]}
{...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
/>
</Card> </Card>
<Divider/> <Divider/>
</> </>

View File

@ -45,9 +45,8 @@ export default function ConnectorsPage() {
<Skeleton loading={connectors === undefined} active> <Skeleton loading={connectors === undefined} active>
{connectors && connectors.length > 0 && <Card title={t`My Connectors`} style={{width: '100%'}}> {connectors && connectors.length > 0 &&
<ConnectorsList connectors={connectors} onDelete={refreshConnectors}/> <ConnectorsList connectors={connectors} onDelete={refreshConnectors}/>
</Card>
} }
</Skeleton> </Skeleton>
</Flex> </Flex>

View File

@ -8,7 +8,12 @@ import {WatchlistsList} from "../../components/tracking/WatchlistsList";
import {Connector, getConnectors} from "../../utils/api/connectors"; import {Connector, getConnectors} from "../../utils/api/connectors";
type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] } export type Watchlist = {
token: string,
domains: { ldhName: string }[],
triggers?: { event: EventAction, action: string }[],
connector?: string
}
export default function WatchlistPage() { export default function WatchlistPage() {
@ -66,9 +71,7 @@ export default function WatchlistPage() {
<Divider/> <Divider/>
<Card size="small" loading={!watchlists} title={t`My Watchlists`} style={{width: '100%'}}>
{watchlists && watchlists.length > 0 && {watchlists && watchlists.length > 0 &&
<WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}/>} <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}/>}
</Card>
</Flex> </Flex>
} }

View File

@ -3,47 +3,47 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n" "Content-Type: text/plain; charset=utf-8\n"
"Plural-Forms: nplurals=2; plural=(n!=1);\n" "Plural-Forms: nplurals=2; plural=(n!=1);\n"
#: assets/components/search/EventTimeline.tsx:19 #: assets/components/search/EventTimeline.tsx:28
msgid "Registration" msgid "Registration"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:20 #: assets/components/search/EventTimeline.tsx:29
msgid "Reregistration" msgid "Reregistration"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:21 #: assets/components/search/EventTimeline.tsx:30
msgid "Last changed" msgid "Last changed"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:22 #: assets/components/search/EventTimeline.tsx:31
msgid "Expiration" msgid "Expiration"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:23 #: assets/components/search/EventTimeline.tsx:32
msgid "Deletion" msgid "Deletion"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:24 #: assets/components/search/EventTimeline.tsx:33
msgid "Reinstantiation" msgid "Reinstantiation"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:25 #: assets/components/search/EventTimeline.tsx:34
msgid "Transfer" msgid "Transfer"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:26 #: assets/components/search/EventTimeline.tsx:35
msgid "Locked" msgid "Locked"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:27 #: assets/components/search/EventTimeline.tsx:36
msgid "Unlocked" msgid "Unlocked"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:28 #: assets/components/search/EventTimeline.tsx:37
msgid "Registrar expiration" msgid "Registrar expiration"
msgstr "" msgstr ""
#: assets/components/search/EventTimeline.tsx:29 #: assets/components/search/EventTimeline.tsx:38
msgid "ENUM validation expiration" msgid "ENUM validation expiration"
msgstr "" msgstr ""
@ -59,8 +59,8 @@ msgstr ""
#: assets/components/tracking/WatchlistForm.tsx:110 #: assets/components/tracking/WatchlistForm.tsx:110
#: assets/components/tracking/WatchlistForm.tsx:169 #: assets/components/tracking/WatchlistForm.tsx:169
#: assets/components/tracking/WatchlistForm.tsx:179 #: assets/components/tracking/WatchlistForm.tsx:179
#: assets/pages/LoginPage.tsx:53 #: assets/pages/LoginPage.tsx:60
#: assets/pages/LoginPage.tsx:61 #: assets/pages/LoginPage.tsx:68
msgid "Required" msgid "Required"
msgstr "" msgstr ""
@ -158,11 +158,11 @@ msgid "At least one domain name"
msgstr "" msgstr ""
#: assets/components/tracking/WatchlistForm.tsx:101 #: assets/components/tracking/WatchlistForm.tsx:101
#: assets/components/tracking/WatchlistsList.tsx:19
msgid "Domain names" msgid "Domain names"
msgstr "" msgstr ""
#: assets/components/tracking/WatchlistForm.tsx:119 #: assets/components/tracking/WatchlistForm.tsx:119
#: assets/components/tracking/WatchlistsList.tsx:28
msgid "Domain name" msgid "Domain name"
msgstr "" msgstr ""
@ -190,6 +190,7 @@ msgstr ""
msgid "Add a Trigger" msgid "Add a Trigger"
msgstr "" msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:28
#: assets/components/tracking/WatchlistForm.tsx:210 #: assets/components/tracking/WatchlistForm.tsx:210
#: assets/components/tracking/WatchlistForm.tsx:223 #: assets/components/tracking/WatchlistForm.tsx:223
msgid "Connector" msgid "Connector"
@ -206,7 +207,7 @@ msgid "Reset"
msgstr "" msgstr ""
#: assets/components/tracking/ConnectorForm.tsx:37 #: assets/components/tracking/ConnectorForm.tsx:37
#: assets/components/tracking/ConnectorsList.tsx:21 #: assets/components/tracking/ConnectorsList.tsx:20
msgid "Provider" msgid "Provider"
msgstr "" msgstr ""
@ -256,42 +257,37 @@ msgid ""
"names via the Provider's API" "names via the Provider's API"
msgstr "" msgstr ""
#: assets/components/tracking/WatchlistsList.tsx:18
msgid "Watchlist"
msgstr ""
#: assets/components/tracking/WatchlistsList.tsx:19
msgid "Delete the Watchlist"
msgstr ""
#: assets/components/tracking/WatchlistsList.tsx:20
msgid "Are you sure to delete this Watchlist?"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:17
#: assets/components/tracking/WatchlistsList.tsx:22
msgid "Yes"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:18
#: assets/components/tracking/WatchlistsList.tsx:23 #: assets/components/tracking/WatchlistsList.tsx:23
msgid "No" msgid "Tracked events"
msgstr "" msgstr ""
#: assets/components/tracking/WatchlistsList.tsx:32 #: assets/components/tracking/WatchlistsList.tsx:32
msgid "Domain triggers" msgid "Watchlist"
msgstr "" msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:13 #: assets/components/tracking/WatchlistsList.tsx:35
#, javascript-format msgid "Delete the Watchlist"
msgid "Connector ${ connector.id }"
msgstr "" msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:14 #: assets/components/tracking/WatchlistsList.tsx:36
msgid "Are you sure to delete this Watchlist?"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:33
#: assets/components/tracking/WatchlistsList.tsx:38
msgid "Yes"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:34
#: assets/components/tracking/WatchlistsList.tsx:39
msgid "No"
msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:30
msgid "Delete the Connector" msgid "Delete the Connector"
msgstr "" msgstr ""
#: assets/components/tracking/ConnectorsList.tsx:15 #: assets/components/tracking/ConnectorsList.tsx:31
msgid "Are you sure to delete this Connector?" msgid "Are you sure to delete this Connector?"
msgstr "" msgstr ""
@ -302,9 +298,9 @@ msgstr ""
#: assets/pages/search/DomainSearchPage.tsx:24 #: assets/pages/search/DomainSearchPage.tsx:24
#: assets/pages/tracking/ConnectorsPage.tsx:23 #: assets/pages/tracking/ConnectorsPage.tsx:23
#: assets/pages/tracking/ConnectorsPage.tsx:31 #: assets/pages/tracking/ConnectorsPage.tsx:31
#: assets/pages/tracking/WatchlistPage.tsx:36 #: assets/pages/tracking/WatchlistPage.tsx:41
#: assets/pages/tracking/WatchlistPage.tsx:44 #: assets/pages/tracking/WatchlistPage.tsx:49
#: assets/pages/tracking/WatchlistPage.tsx:54 #: assets/pages/tracking/WatchlistPage.tsx:59
msgid "An error occurred" msgid "An error occurred"
msgstr "" msgstr ""
@ -409,7 +405,7 @@ msgstr ""
msgid "My Account" msgid "My Account"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:51 #: assets/pages/LoginPage.tsx:58
#: assets/pages/watchdog/UserPage.tsx:18 #: assets/pages/watchdog/UserPage.tsx:18
msgid "Username" msgid "Username"
msgstr "" msgstr ""
@ -426,46 +422,36 @@ msgstr ""
msgid "Create a Connector" msgid "Create a Connector"
msgstr "" msgstr ""
#: assets/App.tsx:145 #: assets/pages/tracking/WatchlistPage.tsx:38
#: assets/pages/tracking/ConnectorsPage.tsx:48
msgid "My Connectors"
msgstr ""
#: assets/pages/tracking/WatchlistPage.tsx:33
msgid "Watchlist created !" msgid "Watchlist created !"
msgstr "" msgstr ""
#: assets/pages/tracking/WatchlistPage.tsx:59 #: assets/pages/tracking/WatchlistPage.tsx:64
msgid "Create a Watchlist" msgid "Create a Watchlist"
msgstr "" msgstr ""
#: assets/App.tsx:138
#: assets/pages/tracking/WatchlistPage.tsx:69
msgid "My Watchlists"
msgstr ""
#: assets/pages/NotFoundPage.tsx:10 #: assets/pages/NotFoundPage.tsx:10
msgid "Sorry, the page you visited does not exist." msgid "Sorry, the page you visited does not exist."
msgstr "" msgstr ""
#: assets/App.tsx:205 #: assets/App.tsx:205
#: assets/pages/LoginPage.tsx:31 #: assets/pages/LoginPage.tsx:38
msgid "Log in" msgid "Log in"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:36 #: assets/pages/LoginPage.tsx:43
msgid "Error" msgid "Error"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:59 #: assets/pages/LoginPage.tsx:66
msgid "Password" msgid "Password"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:68 #: assets/pages/LoginPage.tsx:75
msgid "Submit" msgid "Submit"
msgstr "" msgstr ""
#: assets/pages/LoginPage.tsx:73 #: assets/pages/LoginPage.tsx:80
msgid "Log in with SSO" msgid "Log in with SSO"
msgstr "" msgstr ""
@ -553,6 +539,14 @@ msgstr ""
msgid "Tracking" msgid "Tracking"
msgstr "" msgstr ""
#: assets/App.tsx:138
msgid "My Watchlists"
msgstr ""
#: assets/App.tsx:145
msgid "My Connectors"
msgstr ""
#: assets/App.tsx:153 #: assets/App.tsx:153
msgid "My Watchdog" msgid "My Watchdog"
msgstr "" msgstr ""