[WIP] Add custom domain support for auctions flow #50

Draft
nabarun wants to merge 5 commits from custom-domain-for-auctions into main
13 changed files with 215 additions and 121 deletions

View File

@ -345,10 +345,11 @@ export const createResolvers = async (service: Service): Promise<any> => {
{ {
projectId, projectId,
deploymentId, deploymentId,
}: { deploymentId: string; projectId: string }, deployerLrn,
}: { deploymentId: string; projectId: string, deployerLrn: string },
) => { ) => {
try { try {
return await service.rollbackDeployment(projectId, deploymentId); return await service.rollbackDeployment(projectId, deploymentId, deployerLrn);
} catch (err) { } catch (err) {
log(err); log(err);
return false; return false;

View File

@ -111,6 +111,7 @@ type Deployment {
isCurrent: Boolean! isCurrent: Boolean!
baseDomain: String baseDomain: String
status: DeploymentStatus! status: DeploymentStatus!
dnsRecordData: DNSRecordAttributes
createdAt: String! createdAt: String!
updatedAt: String! updatedAt: String!
createdBy: User! createdBy: User!

View File

@ -644,7 +644,12 @@ export class Service {
const octokit = await this.getOctokit(user.id); const octokit = await this.getOctokit(user.id);
const newDeployment = await this.createDeployment(user.id, octokit, { let newDeployment: Deployment;
if (oldDeployment.project.auctionId) {
newDeployment = await this.createDeploymentFromAuction(oldDeployment.project, oldDeployment.deployer);
} else {
newDeployment = await this.createDeployment(user.id, octokit, {
project: oldDeployment.project, project: oldDeployment.project,
branch: oldDeployment.branch, branch: oldDeployment.branch,
environment: Environment.Production, environment: Environment.Production,
@ -652,7 +657,7 @@ export class Service {
commitMessage: oldDeployment.commitMessage, commitMessage: oldDeployment.commitMessage,
deployer: oldDeployment.deployer deployer: oldDeployment.deployer
}); });
}
return newDeployment; return newDeployment;
} }
@ -1188,6 +1193,7 @@ export class Service {
async rollbackDeployment( async rollbackDeployment(
projectId: string, projectId: string,
deploymentId: string, deploymentId: string,
deployerLrn: string,
): Promise<boolean> { ): Promise<boolean> {
// TODO: Implement transactions // TODO: Implement transactions
const oldCurrentDeployment = await this.db.getDeployment({ const oldCurrentDeployment = await this.db.getDeployment({
@ -1199,6 +1205,9 @@ export class Service {
project: { project: {
id: projectId, id: projectId,
}, },
deployer: {
deployerLrn
},
isCurrent: true, isCurrent: true,
isCanonical: false, isCanonical: false,
}, },

View File

@ -99,6 +99,7 @@ export const DeploymentMenu = ({
const isRollbacked = await client.rollbackDeployment( const isRollbacked = await client.rollbackDeployment(
project.id, project.id,
deployment.id, deployment.id,
deployment.deployer.deployerLrn
); );
if (isRollbacked.rollbackDeployment) { if (isRollbacked.rollbackDeployment) {
await onUpdate(); await onUpdate();

View File

@ -8,13 +8,14 @@ import {
MenuList, MenuList,
MenuItem, MenuItem,
Card, Card,
Tooltip,
} from '@snowballtools/material-tailwind-react-fork'; } from '@snowballtools/material-tailwind-react-fork';
import EditDomainDialog from './EditDomainDialog'; import EditDomainDialog from './EditDomainDialog';
import { useGQLClient } from 'context/GQLClientContext'; import { useGQLClient } from 'context/GQLClientContext';
import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog'; import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
import { useToast } from 'components/shared/Toast'; import { useToast } from 'components/shared/Toast';
import { GearIcon } from 'components/shared/CustomIcon'; import { GearIcon, InfoRoundFilledIcon } 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';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
@ -44,7 +45,6 @@ interface DomainCardProps {
onUpdate: () => Promise<void>; onUpdate: () => Promise<void>;
} }
const DomainCard = ({ const DomainCard = ({
domains, domains,
domain, domain,
@ -56,7 +56,9 @@ const DomainCard = ({
const { id } = useParams(); const { id } = useParams();
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [editDialogOpen, setEditDialogOpen] = useState(false); const [editDialogOpen, setEditDialogOpen] = useState(false);
const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null); const [dnsRecordsWithLRN, setDnsRecordsWithLRN] = useState<
{ dnsRecord: DNSRecordAttributes; deployerLRN: string }[]
>([]);
// const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE); // const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
const client = useGQLClient(); const client = useGQLClient();
@ -94,9 +96,26 @@ const DomainCard = ({
return; return;
} }
const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id); const dnsRecordResponse = await client.getProject(id);
setDnsRecord(dnsRecordResponse.latestDNSRecord); if (!dnsRecordResponse.project) {
return;
}
const tempDNSRecords: {
dnsRecord: DNSRecordAttributes;
deployerLRN: string;
}[] = [];
for (const deployment of dnsRecordResponse.project.deployments) {
if (deployment.dnsRecordData.value) {
tempDNSRecords.push({
dnsRecord: deployment.dnsRecordData,
deployerLRN: deployment.deployer.deployerLrn,
});
}
}
setDnsRecordsWithLRN(tempDNSRecords);
}; };
fetchDNSData(); fetchDNSData();
@ -182,9 +201,14 @@ const DomainCard = ({
<Typography variant="small">Production</Typography> <Typography variant="small">Production</Typography>
{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">
{dnsRecordsWithLRN.length ? (
<>
{/* {refreshStatus === RefreshStatus.IDLE ? ( */} {/* {refreshStatus === RefreshStatus.IDLE ? ( */}
<Heading> <Heading>
^ Add these records to your domain {/* and refresh to check */} <p className="text-blue-gray-500 pb-3">
^ Add these records to your domain{' '}
{/* and refresh to check */}
</p>
</Heading> </Heading>
{/* ) : refreshStatus === RefreshStatus.CHECKING ? ( {/* ) : refreshStatus === RefreshStatus.CHECKING ? (
<Heading className="text-blue-500"> <Heading className="text-blue-500">
@ -202,23 +226,46 @@ const DomainCard = ({
<table> <table>
<thead> <thead>
<tr> <tr>
<th></th>
<th className="text-left">Type</th> <th className="text-left">Type</th>
<th className="text-left">Name</th> <th className="text-left">Name</th>
<th className="text-left">Value</th> <th className="text-left">Value</th>
</tr> </tr>
</thead> </thead>
{dnsRecordsWithLRN.map((record) => {
return (
<>
<tbody> <tbody>
{dnsRecord ? (
<tr> <tr>
<td>{dnsRecord.resourceType}</td> <Tooltip
content={
<div>
<p className="inline text-white">
Service Provider:
</p>
<p className="text-blue-gray-300 pl-2 inline">
{record.deployerLRN}
</p>
</div>
}
>
<td>
<InfoRoundFilledIcon />
</td>
</Tooltip>
<td>{record.dnsRecord.resourceType}</td>
<td>@</td> <td>@</td>
<td>{dnsRecord.value ?? 'Not Configured'}</td> <td>{record.dnsRecord.value}</td>
</tr> </tr>
) : (
<p className={'text-red-500'}>DNS record data not available</p>
)}
</tbody> </tbody>
</>
);
})}
</table> </table>
</>
) : (
<p className="text-red-500">DNS record data not available</p>
)}
</Card> </Card>
)} )}

View File

@ -13,6 +13,7 @@ import {
AppDeploymentRecordAttributes, AppDeploymentRecordAttributes,
Deployment, Deployment,
DeploymentStatus, DeploymentStatus,
DNSRecordAttributes,
Domain, Domain,
DomainStatus, DomainStatus,
Environment, Environment,
@ -50,6 +51,7 @@ const deployment: Deployment = {
applicationDeploymentRequestId: applicationDeploymentRequestId:
'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize', 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes, applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes,
dnsRecordData: {} as DNSRecordAttributes,
}; };
const domains: Domain[] = [ const domains: Domain[] = [

View File

@ -60,8 +60,7 @@ const Domains = () => {
return ( return (
<ProjectSettingContainer <ProjectSettingContainer
headingText="Domains" headingText="Domains"
{...(!project.auctionId && { button={
button: (
<Button <Button
as="a" as="a"
href="add" href="add"
@ -71,15 +70,9 @@ const Domains = () => {
> >
Add domain Add domain
</Button> </Button>
), }
})}
> >
{project.auctionId ? ( {domains.map((domain) => {
<p className="text-gray-500">
Custom domains not supported for auction driven deployments.
</p>
) : (
domains.map((domain) => {
return ( return (
<DomainCard <DomainCard
domains={domains} domains={domains}
@ -91,8 +84,7 @@ const Domains = () => {
onUpdate={fetchDomains} onUpdate={fetchDomains}
/> />
); );
}) })}
)}
</ProjectSettingContainer> </ProjectSettingContainer>
); );
}; };

View File

@ -18,7 +18,9 @@ const Config = () => {
const primaryDomainName = searchParams.get('name'); const primaryDomainName = searchParams.get('name');
const { toast, dismiss } = useToast(); const { toast, dismiss } = useToast();
const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null); const [dnsRecordsWithLRN, setDnsRecordsWithLRN] = useState<
{ dnsRecord: DNSRecordAttributes; deployerLRN: string }[]
>([]);
const handleSubmitDomain = async () => { const handleSubmitDomain = async () => {
if (primaryDomainName === null) { if (primaryDomainName === null) {
@ -75,9 +77,26 @@ const Config = () => {
return; return;
} }
const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id); const dnsRecordResponse = await client.getProject(id);
setDnsRecord(dnsRecordResponse.latestDNSRecord); if (!dnsRecordResponse.project) {
return;
}
const tempDNSRecords: {
dnsRecord: DNSRecordAttributes;
deployerLRN: string;
}[] = [];
for (const deployment of dnsRecordResponse.project.deployments) {
if (deployment.dnsRecordData.value) {
tempDNSRecords.push({
dnsRecord: deployment.dnsRecordData,
deployerLRN: deployment.deployer.deployerLrn,
});
}
}
setDnsRecordsWithLRN(tempDNSRecords);
}; };
fetchDNSData(); fetchDNSData();
@ -86,12 +105,21 @@ 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">
{dnsRecord ? ( {dnsRecordsWithLRN.length ? (
<> <>
<p className="text-blue-gray-500"> <p className="text-blue-gray-500">
Add the following records to your domain. Add the following records to your domain.
</p> </p>
{dnsRecordsWithLRN.map((record) => {
if (record.dnsRecord.value) {
return (
<>
<div className="pt-6">
<p className="text-gray-100 inline">Service Provider:</p>
<p className="text-blue-gray-500 pl-2 inline">
{record.deployerLRN}
</p>
</div>
<Table> <Table>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
@ -100,23 +128,27 @@ const Config = () => {
<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> <Table.RowHeaderCell>
{dnsRecord.resourceType} {record.dnsRecord.resourceType}
</Table.RowHeaderCell> </Table.RowHeaderCell>
<Table.Cell>@</Table.Cell> <Table.Cell>@</Table.Cell>
<Table.Cell> <Table.Cell>
<p className={!dnsRecord.value ? 'text-red-500' : ''}> <p>{record.dnsRecord.value}</p>
{dnsRecord.value ?? 'Not available'}
</p>
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
</Table.Body> </Table.Body>
</Table> </Table>
</>
{dnsRecord?.value && ( );
}
})}
</>
) : (
<p className={'text-red-500'}>DNS record data not available</p>
)}
{dnsRecordsWithLRN.length && (
<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
@ -125,7 +157,7 @@ const Config = () => {
)} )}
<Button <Button
className="w-fit" className="w-fit"
disabled={!dnsRecord?.value} disabled={!dnsRecordsWithLRN.length}
onClick={handleSubmitDomain} onClick={handleSubmitDomain}
variant="primary" variant="primary"
shape="default" shape="default"
@ -133,10 +165,6 @@ const Config = () => {
> >
FINISH FINISH
</Button> </Button>
</>
) : (
<p className={'text-red-500'}>DNS record data not available</p>
)}
</ProjectSettingContainer> </ProjectSettingContainer>
); );
}; };

View File

@ -13,6 +13,7 @@ import {
Environment, Environment,
Permission, Permission,
AppDeploymentRecordAttributes, AppDeploymentRecordAttributes,
DNSRecordAttributes,
} from 'gql-client'; } from 'gql-client';
export const user: User = { export const user: User = {
@ -112,6 +113,7 @@ export const deployment0: Deployment = {
applicationDeploymentRequestId: applicationDeploymentRequestId:
'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize', 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes, applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes,
dnsRecordData: {} as DNSRecordAttributes,
}; };
export const project: Project = { export const project: Project = {

View File

@ -337,13 +337,15 @@ export class GQLClient {
async rollbackDeployment( async rollbackDeployment(
projectId: string, projectId: string,
deploymentId: string deploymentId: string,
deployerLrn: string,
): Promise<types.RollbackDeploymentResponse> { ): Promise<types.RollbackDeploymentResponse> {
const { data } = await this.client.mutate({ const { data } = await this.client.mutate({
mutation: mutations.rollbackDeployment, mutation: mutations.rollbackDeployment,
variables: { variables: {
projectId, projectId,
deploymentId, deploymentId,
deployerLrn,
}, },
}); });

View File

@ -95,8 +95,8 @@ export const deleteDomain = gql`
`; `;
export const rollbackDeployment = gql` export const rollbackDeployment = gql`
mutation ($projectId: String!, $deploymentId: String!) { mutation ($projectId: String!, $deployerLrn: String!) {
rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId) rollbackDeployment(projectId: $projectId, deployerLrn: $deployerLrn)
} }
`; `;

View File

@ -62,11 +62,19 @@ query ($projectId: String!) {
} }
deployer { deployer {
baseDomain baseDomain
deployerLrn
} }
createdBy { createdBy {
id id
name name
} }
dnsRecordData {
name
value
request
resourceType
version
}
} }
} }
} }

View File

@ -112,6 +112,7 @@ export type Deployment = {
createdBy: User; createdBy: User;
createdAt: string; createdAt: string;
updatedAt: string; updatedAt: string;
dnsRecordData: DNSRecordAttributes;
applicationDeploymentRequestId: string; applicationDeploymentRequestId: string;
}; };