cerc-io/snowballtools-base
11
0
Fork 3
Code Issues 11 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Update UI when DNS record is not present

Browse Source
This commit is contained in:
Shreerang Kale 2025-02-03 11:50:24 +05:30
parent c685b7d5b1
commit ce56a4dc29
14 changed files with 106 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/backend/src/database.ts
View File

@ -642,7 +642,7 @@ export class Database {
return domain; return domain;
} }
async getLatestDNSDataByProjectId( async getLatestDNSRecordByProjectId(
projectId: string, projectId: string,
): Promise<DNSRecordAttributes | null> { ): Promise<DNSRecordAttributes | null> {
const deploymentRepository = this.dataSource.getRepository(Deployment); const deploymentRepository = this.dataSource.getRepository(Deployment);

2
packages/backend/src/registry.ts
View File

@ -16,7 +16,7 @@ import {
ApplicationDeploymentRequest, ApplicationDeploymentRequest,
ApplicationDeploymentRemovalRequest ApplicationDeploymentRemovalRequest
} from './entity/Deployment'; } from './entity/Deployment';
import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord, DNSRecord, RegistryRecord } from './types'; import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord, RegistryRecord } from './types';
import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils'; import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils';
const log = debug('snowball:registry'); const log = debug('snowball:registry');

4
packages/backend/src/resolvers.ts
View File

@ -108,11 +108,11 @@ export const createResolvers = async (service: Service): Promise<any> => {
return service.verifyTx(txHash, amount, senderAddress); return service.verifyTx(txHash, amount, senderAddress);
}, },
getLatestDNSDataByProjectId: async ( latestDNSRecord: async (
_: any, _: any,
{ projectId }: { projectId: string }, { projectId }: { projectId: string },
) => { ) => {
return service.getLatestDNSDataByProjectId(projectId); return service.getLatestDNSRecordByProjectId(projectId);
}, },
}, },

2
packages/backend/src/schema.gql
View File

@ -273,7 +273,7 @@ type Query {
projectMembers(projectId: String!): [ProjectMember!] projectMembers(projectId: String!): [ProjectMember!]
searchProjects(searchText: String!): [Project!] searchProjects(searchText: String!): [Project!]
getAuctionData(auctionId: String!): Auction! getAuctionData(auctionId: String!): Auction!
getLatestDNSDataByProjectId(projectId: String!): DNSRecordAttributes latestDNSRecord(projectId: String!): DNSRecordAttributes
oldestDomain(projectId: String!): Domain oldestDomain(projectId: String!): Domain
domains(projectId: String!, filter: FilterDomainsInput): [Domain] domains(projectId: String!, filter: FilterDomainsInput): [Domain]
deployers: [Deployer] deployers: [Deployer]

6
packages/backend/src/service.ts
View File

@ -215,7 +215,7 @@ export class Service {
const dnsRecordData: DNSRecordAttributes = { const dnsRecordData: DNSRecordAttributes = {
name: dnsRecord.attributes.name, name: dnsRecord.attributes.name,
request: dnsRecord.attributes.request, request: dnsRecord.attributes.request,
resourceType: dnsRecord.attributes.resourceType, resourceType: dnsRecord.attributes.resource_type,
value: dnsRecord.attributes.value, value: dnsRecord.attributes.value,
version: dnsRecord.attributes.version, version: dnsRecord.attributes.version,
} }
@ -486,8 +486,8 @@ export class Service {
return commitDeployments; return commitDeployments;
} }
async getLatestDNSDataByProjectId(projectId: string): Promise<DNSRecordAttributes | null> { async getLatestDNSRecordByProjectId(projectId: string): Promise<DNSRecordAttributes | null> {
const dnsDeployments = await this.db.getLatestDNSDataByProjectId(projectId); const dnsDeployments = await this.db.getLatestDNSRecordByProjectId(projectId);
return dnsDeployments; return dnsDeployments;
} }

10
packages/backend/src/types.ts
View File

@ -48,6 +48,14 @@ export interface DNSRecordAttributes {
version: string; version: string;
} }
export interface RegistryDNSRecordAttributes {
name: string;
value: string;
request: string;
resource_type: string;
version: string;
}
export interface AppDeploymentRemovalRecordAttributes { export interface AppDeploymentRemovalRecordAttributes {
deployment: string; deployment: string;
request: string; request: string;
@ -73,7 +81,7 @@ export interface AppDeploymentRemovalRecord extends RegistryRecord {
} }
export interface DNSRecord extends RegistryRecord { export interface DNSRecord extends RegistryRecord {
attributes: DNSRecordAttributes attributes: RegistryDNSRecordAttributes
} }
export interface AddProjectFromTemplateInput { export interface AddProjectFromTemplateInput {

30
packages/frontend/src/components/projects/project/settings/DomainCard.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Domain, DomainStatus, Project } from 'gql-client'; import { DNSRecordAttributes, Domain, DomainStatus, Project } from 'gql-client';
import { import {
Typography, Typography,
@ -18,8 +18,8 @@ import { useToast } from 'components/shared/Toast';
import { import {
// CheckIcon, // CheckIcon,
// CrossIcon, // CrossIcon,
GearIcon,
// LoadingIcon, // LoadingIcon,
GearIcon,
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { Heading } from 'components/shared/Heading'; import { Heading } from 'components/shared/Heading';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
@ -61,7 +61,7 @@ const DomainCard = ({
// const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE); // const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [editDialogOpen, setEditDialogOpen] = useState(false); const [editDialogOpen, setEditDialogOpen] = useState(false);
const [IPAddress, setIPAddress] = useState<string>(); const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null);
const client = useGQLClient(); const client = useGQLClient();
@ -98,9 +98,9 @@ const DomainCard = ({
return; return;
} }
const dnsData = await client.getLatestDNSDataByProjectId(id); const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id);
setIPAddress(dnsData.value); setDnsRecord(dnsRecordResponse.latestDNSRecord);
}; };
fetchDNSData(); fetchDNSData();
@ -187,9 +187,9 @@ const DomainCard = ({
{domain.status === DomainStatus.Pending && ( {domain.status === DomainStatus.Pending && (
<Card className="bg-slate-100 p-4 text-sm"> <Card className="bg-slate-100 p-4 text-sm">
{/* {refreshStatus === RefreshStatus.IDLE ? ( */} {/* {refreshStatus === RefreshStatus.IDLE ? ( */}
<Heading> <Heading>
^ Add these records to your domain {/* and refresh to check */} ^ Add these records to your domain {/* and refresh to check */}
</Heading> </Heading>
{/* ) : refreshStatus === RefreshStatus.CHECKING ? ( {/* ) : refreshStatus === RefreshStatus.CHECKING ? (
<Heading className="text-blue-500"> <Heading className="text-blue-500">
^ Checking records for {domain.name} ^ Checking records for {domain.name}
@ -212,11 +212,15 @@ const DomainCard = ({
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> {dnsRecord ? (
<td>{DOMAIN_RECORD.type}</td> <tr>
<td>{DOMAIN_RECORD.name}</td> <td>{dnsRecord.resourceType}</td>
<td>{IPAddress ?? 'Not Configured'}</td> <td>{DOMAIN_RECORD.name}</td>
</tr> <td>{dnsRecord.value ?? 'Not Configured'}</td>
</tr>
) : (
<p className={'text-red-500'}>DNS record data not available</p>
)}
</tbody> </tbody>
</table> </table>
</Card> </Card>

4
packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
View File

@ -1,7 +1,7 @@
import { import {
// useMemo,
useCallback, useCallback,
useEffect, useEffect,
// useMemo
} from 'react'; } from 'react';
import { import {
// Controller, // Controller,
@ -11,9 +11,9 @@ import {
import { Domain } from 'gql-client'; import { Domain } from 'gql-client';
import { import {
Typography,
// Select, // Select,
// Option, // Option,
Typography,
} from '@snowballtools/material-tailwind-react-fork'; } from '@snowballtools/material-tailwind-react-fork';
import { useGQLClient } from 'context/GQLClientContext'; import { useGQLClient } from 'context/GQLClientContext';

4
packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
View File

@ -2,11 +2,11 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { Heading } from 'components/shared/Heading';
// import { InlineNotification } from 'components/shared/InlineNotification'; // import { InlineNotification } from 'components/shared/InlineNotification';
// import { Radio } from 'components/shared/Radio';
import { Heading } from 'components/shared/Heading';
import { Input } from 'components/shared/Input'; import { Input } from 'components/shared/Input';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
// import { Radio } from 'components/shared/Radio';
interface SetupDomainFormValues { interface SetupDomainFormValues {
domainName: string; domainName: string;

14
packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
View File

@ -6,30 +6,30 @@ import {
} from 'react-router-dom'; } from 'react-router-dom';
import { RequestError } from 'octokit'; import { RequestError } from 'octokit';
import { useOctokit } from 'context/OctokitContext';
import { GitCommitWithBranch, OutletContextType } from '../../../../types';
// import { useGQLClient } from 'context/GQLClientContext'; // import { useGQLClient } from 'context/GQLClientContext';
import { import {
// Button, // Button,
// Tag,
Heading, Heading,
Avatar, Avatar,
// Tag
} from 'components/shared'; } from 'components/shared';
import { getInitials } from 'utils/geInitials';
import { import {
BranchStrokeIcon,
// CheckRoundFilledIcon, // CheckRoundFilledIcon,
// ClockIcon, // ClockIcon,
// GlobeIcon,
BranchStrokeIcon,
CursorBoxIcon, CursorBoxIcon,
GithubStrokeIcon, GithubStrokeIcon,
// GlobeIcon,
LinkIcon, LinkIcon,
CalendarDaysIcon, CalendarDaysIcon,
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
// import { Domain, DomainStatus } from 'gql-client';
import { useOctokit } from 'context/OctokitContext';
import { GitCommitWithBranch, OutletContextType } from '../../../../types';
import { getInitials } from 'utils/geInitials';
import { Activity } from 'components/projects/project/overview/Activity'; import { Activity } from 'components/projects/project/overview/Activity';
import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo'; import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
import { relativeTimeMs } from 'utils/time'; import { relativeTimeMs } from 'utils/time';
// import { Domain, DomainStatus } from 'gql-client';
import { AuctionCard } from 'components/projects/project/overview/Activity/AuctionCard'; import { AuctionCard } from 'components/projects/project/overview/Activity/AuctionCard';
const COMMITS_PER_PAGE = 4; const COMMITS_PER_PAGE = 4;

93
packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx
View File

@ -8,6 +8,7 @@ import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer'; import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
import { useToast } from 'components/shared/Toast'; import { useToast } from 'components/shared/Toast';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { DNSRecordAttributes } from 'gql-client';
const Config = () => { const Config = () => {
const { id, orgSlug } = useParams(); const { id, orgSlug } = useParams();
@ -17,7 +18,7 @@ const Config = () => {
const primaryDomainName = searchParams.get('name'); const primaryDomainName = searchParams.get('name');
const { toast, dismiss } = useToast(); const { toast, dismiss } = useToast();
const [IPAddress, setIPAddress] = useState<string>(); const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null);
const handleSubmitDomain = async () => { const handleSubmitDomain = async () => {
if (primaryDomainName === null) { if (primaryDomainName === null) {
@ -74,9 +75,9 @@ const Config = () => {
return; return;
} }
const dnsData = await client.getLatestDNSDataByProjectId(id); const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id);
setIPAddress(dnsData.value); setDnsRecord(dnsRecordResponse.latestDNSRecord);
}; };
fetchDNSData(); fetchDNSData();
@ -85,49 +86,57 @@ const Config = () => {
// TODO: Figure out DNS Provider if possible and update appropriatly // TODO: Figure out DNS Provider if possible and update appropriatly
return ( return (
<ProjectSettingContainer headingText="Setup domain name"> <ProjectSettingContainer headingText="Setup domain name">
<p className="text-blue-gray-500"> {dnsRecord ? (
Add the following records to your domain. <>
</p> <p className="text-blue-gray-500">
Add the following records to your domain.
</p>
<Table> <Table>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell> <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell> <Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell> <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.RowHeaderCell>A</Table.RowHeaderCell> <Table.RowHeaderCell>
<Table.Cell>@</Table.Cell> {dnsRecord.resourceType}
<Table.Cell> </Table.RowHeaderCell>
<p className={!IPAddress ? 'text-red-500' : ''}> <Table.Cell>@</Table.Cell>
{IPAddress ?? 'Not available'} <Table.Cell>
</p> <p className={!dnsRecord.value ? 'text-red-500' : ''}>
</Table.Cell> {dnsRecord.value ?? 'Not available'}
</Table.Row> </p>
</Table.Body> </Table.Cell>
</Table> </Table.Row>
</Table.Body>
</Table>
{IPAddress && ( {dnsRecord?.value && (
<InlineNotification <InlineNotification
variant="info" variant="info"
title={`It can take up to 48 hours for these updates to reflect title={`It can take up to 48 hours for these updates to reflect
globally.`} globally.`}
/> />
)}
<Button
className="w-fit"
disabled={!dnsRecord?.value}
onClick={handleSubmitDomain}
variant="primary"
shape="default"
rightIcon={<ArrowRightCircleIcon />}
>
FINISH
</Button>
</>
) : (
<p className={'text-red-500'}>DNS record data not available</p>
)} )}
<Button
className="w-fit"
disabled={!IPAddress}
onClick={handleSubmitDomain}
variant="primary"
shape="default"
rightIcon={<ArrowRightCircleIcon />}
>
FINISH
</Button>
</ProjectSettingContainer> </ProjectSettingContainer>
); );
}; };

6
packages/gql-client/src/client.ts
View File

@ -467,14 +467,14 @@ export class GQLClient {
return data.verifyTx; return data.verifyTx;
} }
async getLatestDNSDataByProjectId(projectId: string): Promise<types.GetLatestDNSDataResponse> { async getLatestDNSRecordByProjectId(projectId: string): Promise<types.GetLatestDNSDataResponse> {
const { data } = await this.client.query({ const { data } = await this.client.query({
query: queries.getLatestDNSDataByProjectId, query: queries.getLatestDNSRecordByProjectId,
variables: { variables: {
projectId, projectId,
}, },
}); });
return data.getLatestDNSDataByProjectId; return data;
} }
} }

4
packages/gql-client/src/queries.ts
View File

@ -357,9 +357,9 @@ query ($txHash: String!, $amount: String!, $senderAddress: String!) {
} }
`; `;
export const getLatestDNSDataByProjectId = gql` export const getLatestDNSRecordByProjectId = gql`
query($projectId: String!) { query($projectId: String!) {
getLatestDNSDataByProjectId(projectId: $projectId) { latestDNSRecord(projectId: $projectId) {
name name
value value
request request

6
packages/gql-client/src/types.ts
View File

@ -381,10 +381,14 @@ export type AuctionParams = {
numProviders: number; numProviders: number;
}; };
export type GetLatestDNSDataResponse = { export type DNSRecordAttributes = {
name: string; name: string;
value: string; value: string;
request: string; request: string;
resourceType: string; resourceType: string;
version: string; version: string;
} }
export type GetLatestDNSDataResponse = {
latestDNSRecord: DNSRecordAttributes | null
}