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

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

Draft
nabarun wants to merge 5 commits from custom-domain-for-auctions into main
pull from: custom-domain-for-auctions
merge into: cerc-io:main
Conversation 0 Commits 5 Files Changed 13 +215 -121
13 changed files with 215 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/backend/src/resolvers.ts
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;

1
packages/backend/src/schema.gql
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!

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

@ -644,15 +644,20 @@ 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;
project: oldDeployment.project,
branch: oldDeployment.branch,
environment: Environment.Production,
commitHash: oldDeployment.commitHash,
commitMessage: oldDeployment.commitMessage,
deployer: oldDeployment.deployer
});
if (oldDeployment.project.auctionId) {
newDeployment = await this.createDeploymentFromAuction(oldDeployment.project, oldDeployment.deployer);
} else {
newDeployment = await this.createDeployment(user.id, octokit, {
project: oldDeployment.project,
branch: oldDeployment.branch,
environment: Environment.Production,
commitHash: oldDeployment.commitHash,
commitMessage: oldDeployment.commitMessage,
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,
}, },

1
packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
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();

107
packages/frontend/src/components/projects/project/settings/DomainCard.tsx
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,11 +201,16 @@ 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">
{/* {refreshStatus === RefreshStatus.IDLE ? ( */} {dnsRecordsWithLRN.length ? (
<Heading> <>
^ Add these records to your domain {/* and refresh to check */} {/* {refreshStatus === RefreshStatus.IDLE ? ( */}
</Heading> <Heading>
{/* ) : refreshStatus === RefreshStatus.CHECKING ? ( <p className="text-blue-gray-500 pb-3">
^ Add these records to your domain{' '}
{/* and refresh to check */}
</p>
</Heading>
{/* ) : refreshStatus === RefreshStatus.CHECKING ? (
<Heading className="text-blue-500"> <Heading className="text-blue-500">
^ Checking records for {domain.name} ^ Checking records for {domain.name}
</Heading> </Heading>
@ -199,26 +223,49 @@ const DomainCard = ({
</div> </div>
)} */} )} */}
<table> <table>
<thead> <thead>
<tr> <tr>
<th className="text-left">Type</th> <th></th>
<th className="text-left">Name</th> <th className="text-left">Type</th>
<th className="text-left">Value</th> <th className="text-left">Name</th>
</tr> <th className="text-left">Value</th>
</thead> </tr>
<tbody> </thead>
{dnsRecord ? ( {dnsRecordsWithLRN.map((record) => {
<tr> return (
<td>{dnsRecord.resourceType}</td> <>
<td>@</td> <tbody>
<td>{dnsRecord.value ?? 'Not Configured'}</td> <tr>
</tr> <Tooltip
) : ( content={
<p className={'text-red-500'}>DNS record data not available</p> <div>
)} <p className="inline text-white">
</tbody> Service Provider:
</table> </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>{record.dnsRecord.value}</td>
</tr>
</tbody>
</>
);
})}
</table>
</>
) : (
<p className="text-red-500">DNS record data not available</p>
)}
</Card> </Card>
)} )}

2
packages/frontend/src/pages/components/modals.tsx
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[] = [

56
packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx
View File

@ -60,39 +60,31 @@ const Domains = () => {
return ( return (
<ProjectSettingContainer <ProjectSettingContainer
headingText="Domains" headingText="Domains"
{...(!project.auctionId && { button={
button: ( <Button
<Button as="a"
as="a" href="add"
href="add" variant="secondary"
variant="secondary" leftIcon={<PlusIcon />}
leftIcon={<PlusIcon />} size="md"
size="md" >
> Add domain
Add domain </Button>
</Button> }
),
})}
> >
{project.auctionId ? ( {domains.map((domain) => {
<p className="text-gray-500"> return (
Custom domains not supported for auction driven deployments. <DomainCard
</p> domains={domains}
) : ( domain={domain}
domains.map((domain) => { key={domain.id}
return ( // TODO: Use github API for getting linked repository
<DomainCard branches={branches}
domains={domains} project={project}
domain={domain} onUpdate={fetchDomains}
key={domain.id} />
// TODO: Use github API for getting linked repository );
branches={branches} })}
project={project}
onUpdate={fetchDomains}
/>
);
})
)}
</ProjectSettingContainer> </ProjectSettingContainer>
); );
}; };

120
packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx
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,57 +105,66 @@ 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) => {
<Table> if (record.dnsRecord.value) {
<Table.Header> return (
<Table.Row> <>
<Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell> <div className="pt-6">
<Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell> <p className="text-gray-100 inline">Service Provider:</p>
<Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell> <p className="text-blue-gray-500 pl-2 inline">
</Table.Row> {record.deployerLRN}
</Table.Header> </p>
</div>
<Table.Body> <Table>
<Table.Row> <Table.Header>
<Table.RowHeaderCell> <Table.Row>
{dnsRecord.resourceType} <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell>
</Table.RowHeaderCell> <Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell>
<Table.Cell>@</Table.Cell> <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
<Table.Cell> </Table.Row>
<p className={!dnsRecord.value ? 'text-red-500' : ''}> </Table.Header>
{dnsRecord.value ?? 'Not available'} <Table.Body>
</p> <Table.Row>
</Table.Cell> <Table.RowHeaderCell>
</Table.Row> {record.dnsRecord.resourceType}
</Table.Body> </Table.RowHeaderCell>
</Table> <Table.Cell>@</Table.Cell>
<Table.Cell>
{dnsRecord?.value && ( <p>{record.dnsRecord.value}</p>
<InlineNotification </Table.Cell>
variant="info" </Table.Row>
title={`It can take up to 48 hours for these updates to reflect </Table.Body>
globally.`} </Table>
/> </>
)} );
<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> <p className={'text-red-500'}>DNS record data not available</p>
)} )}
{dnsRecordsWithLRN.length && (
<InlineNotification
variant="info"
title={`It can take up to 48 hours for these updates to reflect
globally.`}
/>
)}
<Button
className="w-fit"
disabled={!dnsRecordsWithLRN.length}
onClick={handleSubmitDomain}
variant="primary"
shape="default"
rightIcon={<ArrowRightCircleIcon />}
>
FINISH
</Button>
</ProjectSettingContainer> </ProjectSettingContainer>
); );
}; };

2
packages/frontend/src/stories/MockStoriesData.ts
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 = {

4
packages/gql-client/src/client.ts
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,
}, },
}); });

4
packages/gql-client/src/mutations.ts
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)
} }
`; `;

8
packages/gql-client/src/queries.ts
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
}
} }
} }
} }

1
packages/gql-client/src/types.ts
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;
}; };