feat: improve ui

2025-12-29 16:15:04 +00:00 · 2024-12-20 19:41:48 +01:00
parent 1dc16d769b
commit 425071bc23
6 changed files with 124 additions and 55 deletions
--- a/assets/components/search/DomainResult.tsx
+++ b/assets/components/search/DomainResult.tsx
@@ -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>
 }
--- a/assets/components/search/EntitiesList.tsx
+++ b/assets/components/search/EntitiesList.tsx
@@ -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>
        }
+        }
    />
 }
--- a/assets/utils/functions/entityToName.tsx
+++ b/assets/utils/functions/entityToName.tsx
@@ -7,5 +7,7 @@ export const entityToName = (e: { entity: Entity }): string => {
    const jCard = vCard.fromJSON(e.entity.jCard)
    let name = e.entity.handle
    if (jCard.data.fn && !Array.isArray(jCard.data.fn) && jCard.data.fn.valueOf() !== '') name = jCard.data.fn.valueOf()
+    if (jCard.data.org && !Array.isArray(jCard.data.org) && jCard.data.org.valueOf() !== '') name = jCard.data.org.valueOf()
+
    return name
 }
--- a/assets/utils/functions/extractDetailsFromJCard.tsx
+++ b/assets/utils/functions/extractDetailsFromJCard.tsx
@@ -0,0 +1,14 @@
+import vCard from "vcf";
+import {Entity} from "../api";
+
+export const extractDetailsFromJCard = (e: { entity: Entity }): {
+    fn?: string
+    organization?: string;
+} => {
+    if (e.entity.jCard.length === 0) return {fn: e.entity.handle}
+    const jCard = vCard.fromJSON(e.entity.jCard)
+    const fn = jCard.data.fn && !Array.isArray(jCard.data.fn) ? jCard.data.fn.valueOf() : undefined
+    const organization = jCard.data.org && !Array.isArray(jCard.data.org) ? jCard.data.org.valueOf() : undefined
+
+    return {fn, organization}
+}
--- a/src/Repository/EntityRepository.php
+++ b/src/Repository/EntityRepository.php
@@ -4,6 +4,7 @@ namespace App\Repository;

 use App\Entity\Entity;
 use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\DBAL\Exception;
 use Doctrine\Persistence\ManagerRegistry;

 /**
@@ -16,6 +17,17 @@ class EntityRepository extends ServiceEntityRepository
        parent::__construct($registry, Entity::class);
    }

+    /**
+     * @throws Exception
+     */
+    public function findByjCard(array $vCardArray): array
+    {
+        return $this->getEntityManager()->getConnection()
+            ->prepare('SELECT * FROM entity WHERE j_Card @> :data')
+            ->executeQuery(['data' => json_encode($vCardArray)])
+            ->fetchAllAssociative();
+    }
+
    //    /**
    //     * @return Entity[] Returns an array of Entity objects
    //     */
--- a/src/Service/RDAPService.php
+++ b/src/Service/RDAPService.php
@@ -252,11 +252,11 @@ readonly class RDAPService

        if (array_key_exists('entities', $res) && is_array($res['entities'])) {
            foreach ($res['entities'] as $rdapEntity) {
+                if ((!array_key_exists('handle', $rdapEntity) || '' === $rdapEntity['handle']) && !array_key_exists('vcardArray', $rdapEntity)) {
+                    continue;
+                }
                $entity = $this->registerEntity($rdapEntity);

-                $this->em->persist($entity);
-                $this->em->flush();
-
                $domainEntity = $this->domainEntityRepository->findOneBy([
                    'domain' => $domain,
                    'entity' => $entity,
@@ -323,14 +323,11 @@ readonly class RDAPService
                }

                foreach ($rdapNameserver['entities'] as $rdapEntity) {
-                    if (!array_key_exists('handle', $rdapEntity) || '' === $rdapEntity['handle']) {
+                    if ((!array_key_exists('handle', $rdapEntity) || '' === $rdapEntity['handle']) && !array_key_exists('vcardArray', $rdapEntity)) {
                        continue;
                    }
                    $entity = $this->registerEntity($rdapEntity);

-                    $this->em->persist($entity);
-                    $this->em->flush();
-
                    $nameserverEntity = $this->nameserverEntityRepository->findOneBy([
                        'nameserver' => $nameserver,
                        'entity' => $entity,
@@ -391,20 +388,31 @@ readonly class RDAPService
     */
    private function registerEntity(array $rdapEntity): Entity
    {
-        $conn = $this->em->getConnection();
-        $sql = 'SELECT * FROM entity WHERE j_Card @> :data';
-        $stmt = $conn->prepare($sql)->executeQuery(['data' => json_encode($rdapEntity['vcardArray'])]);
+        if (array_key_exists('vcardArray', $rdapEntity)) {
+            $result = $this->entityRepository->findByjCard($rdapEntity['vcardArray']);

-        $result = $stmt->fetchAllAssociative();
+            if (!array_key_exists('handle', $rdapEntity) || '' === $rdapEntity['handle']) {
+                if (count($result) > 0) {
+                    $rdapEntity['handle'] = $result[0]['handle'];
+                } else {
+                    $rdapEntity['handle'] = 'DW-NOHANDLE-'.hash('md5', json_encode($rdapEntity['vcardArray']));
+                }
+            } else {
+                if (count($result) > 0) {
+                    $entity = $this->entityRepository->findOneBy(['handle' => $result[0]['handle']]);

-        $rdapEntity['handle'] = array_key_exists('handle', $rdapEntity) && '' !== $rdapEntity['handle']
-            ? $rdapEntity['handle']
-            : (
-                count($result) > 0
-                    ? $result[0]['handle']
-                    : 'DW-NOHANDLE-'.hash('md5', json_encode($rdapEntity)
-                    )
-            );
+                    if (null !== $entity) {
+                        $domainEntities = $this->domainEntityRepository->findBy([
+                            'entity' => $entity,
+                        ]);
+
+                        $nameserverEntities = $this->nameserverEntityRepository->findBy([
+                            'entity' => $entity,
+                        ]);
+                    }
+                }
+            }
+        }

        $entity = $this->entityRepository->findOneBy([
            'handle' => $rdapEntity['handle'],
@@ -468,6 +476,23 @@ readonly class RDAPService
                    ->setDeleted(false));
        }

+        $this->em->persist($entity);
+        $this->em->flush();
+
+        if (isset($domainEntities)) {
+            /** @var DomainEntity[] $domainEntities */
+            foreach ($domainEntities as $domainEntity) {
+                $domainEntity->setEntity($entity);
+            }
+        }
+
+        if (isset($nameserverEntities)) {
+            /** @var NameserverEntity[] $nameserverEntities */
+            foreach ($nameserverEntities as $nameserverEntity) {
+                $nameserverEntity->setEntity($entity);
+            }
+        }
+
        return $entity;
    }