External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-29 16:15:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve ui

Browse Source
This commit is contained in:
Maël Gangloff
2024-12-20 19:41:48 +01:00
parent 1dc16d769b
commit 425071bc23
6 changed files with 124 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
assets/components/search/DomainResult.tsx
View File

@@ -1,4 +1,4 @@
import {Badge, Card, Divider, Flex, Space, Tag, Tooltip, Typography} from "antd";
import {Badge, Card, Col, Divider, Flex, Row, Space, Tag, Tooltip, Typography} from "antd";
import {t} from "ttag";
import {EventTimeline} from "./EventTimeline";
import {EntitiesList} from "./EntitiesList";
@@ -11,12 +11,14 @@ import {regionNames} from "../../i18n";
import {getCountryCode} from "../../utils/functions/getCountryCode";
import {eppStatusCodeToColor} from "../../utils/functions/eppStatusCodeToColor";
import {DomainLifecycleSteps} from "./DomainLifecycleSteps";
import useBreakpoint from "../../hooks/useBreakpoint";
export function DomainResult({domain}: { domain: Domain }) {
const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
const {tld, events} = domain
const domainEvents = events.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
const xxl = useBreakpoint('xxl')
return <Space direction="vertical" size="middle" style={{width: '100%'}}>
@@ -40,37 +42,46 @@ export function DomainResult({domain}: { domain: Domain }) {
{
domain.events.length > 0 && <DomainLifecycleSteps status={domain.status}/>
}
{domain.status.length > 0 &&
<>
<Divider orientation="left">{t`EPP Status Codes`}</Divider>
<Flex gap="4px 0" wrap>
{
domain.status.map(s =>
<Tooltip
placement='bottomLeft'
title={s in rdapStatusCodeDetailTranslated ? rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] : undefined}>
<Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
</Tooltip>
)
}
</Flex>
</>
}
{
domain.events.length > 0 && <>
<Divider orientation="left">{t`Timeline`}</Divider>
<EventTimeline events={domainEvents}/>
</>
}
{
domain.entities.length > 0 &&
<>
<Divider orientation="left">{t`Entities`}</Divider>
<EntitiesList domain={domain}/>
</>
}
<Row gutter={8}>
<Col span={xxl ? 24 : 12}>
{domain.status.length > 0 &&
<>
<Divider orientation="left">{t`EPP Status Codes`}</Divider>
<Flex gap="4px 0" wrap>
{
domain.status.map(s =>
<Tooltip
placement='bottomLeft'
title={s in rdapStatusCodeDetailTranslated ? rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] : undefined}>
<Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
</Tooltip>
)
}
</Flex>
</>
}
{
domain.events.length > 0 && <>
<Divider orientation="left">{t`Timeline`}</Divider>
<EventTimeline events={domainEvents}/>
</>
}
{
domain.entities.length > 0 &&
<>
<Divider orientation="left">{t`Entities`}</Divider>
<EntitiesList domain={domain}/>
</>
}
</Col>
{!xxl &&
<Col span={12}>
<DomainDiagram domain={domain}/>
</Col>
}
</Row>
</Card>
</Badge.Ribbon>
<DomainDiagram domain={domain}/>
{xxl && <DomainDiagram domain={domain}/>}
</Space>
}

15
assets/components/search/EntitiesList.tsx
View File

@@ -4,9 +4,8 @@ import {Domain} from "../../utils/api";
import {rdapRoleDetailTranslation, rdapRoleTranslation} from "../../utils/functions/rdapTranslation";
import {roleToAvatar} from "../../utils/functions/roleToAvatar";
import {rolesToColor} from "../../utils/functions/rolesToColor";
import {entityToName} from "../../utils/functions/entityToName";
import {sortDomainEntities} from "../../utils/functions/sortDomainEntities";
import {extractDetailsFromJCard} from "../../utils/functions/extractDetailsFromJCard";
export function EntitiesList({domain}: { domain: Domain }) {
const rdapRoleTranslated = rdapRoleTranslation()
@@ -23,15 +22,21 @@ export function EntitiesList({domain}: { domain: Domain }) {
className="demo-loadmore-list"
itemLayout="horizontal"
dataSource={sortDomainEntities(domain)}
renderItem={(e) =>
<List.Item>
renderItem={(e) => {
const details = extractDetailsFromJCard(e)
return <List.Item>
<List.Item.Meta
avatar={roleToAvatar(e)}
title={e.entity.handle}
description={entityToName(e)}
description={<>
{details.fn && <div>👤 {details.fn}</div>}
{details.organization && <div>🏢 {details.organization}</div>}
</>}
/>
{e.roles.map(roleToTag)}
</List.Item>
}
}
/>
}