dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Frontend for port range

Browse Source
This commit is contained in:
Andras Bacsai
2022-02-22 10:35:39 +01:00
parent 80cb1bc129
commit 0c2e028b38
10 changed files with 188 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/CopyPasswordField.svelte
View File

@@ -20,7 +20,7 @@
function copyToClipboard() { function copyToClipboard() {
if (isHttps && navigator.clipboard) { if (isHttps && navigator.clipboard) {
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
toast.push('Copied to clipboard'); toast.push('Copied to clipboard.');
} }
} }
</script> </script>

7
src/lib/components/Setting.svelte
View File

@@ -15,7 +15,12 @@
<Explainer text={description} /> <Explainer text={description} />
</div> </div>
</div> </div>
<div class:tooltip={dataTooltip} class:text-center={isCenter} data-tooltip={dataTooltip}> <div
class:tooltip={dataTooltip}
class:text-center={isCenter}
data-tooltip={dataTooltip}
class="flex justify-center"
>
<div <div
type="button" type="button"
on:click on:click

2
src/routes/__layout.svelte
View File

@@ -98,7 +98,7 @@
updateStatus.loading = true; updateStatus.loading = true;
try { try {
await post(`/update.json`, { type: 'update', latestVersion }); await post(`/update.json`, { type: 'update', latestVersion });
toast.push('Update completed.<br>Waiting for the new version to start...'); toast.push('Update completed.<br><br>Waiting for the new version to start...');
let reachable = false; let reachable = false;
let tries = 0; let tries = 0;
do { do {

2
src/routes/applications/[id]/check.json.ts
View File

@@ -16,7 +16,7 @@ export const post: RequestHandler = async (event) => {
const found = await db.isDomainConfigured({ id, fqdn }); const found = await db.isDomainConfigured({ id, fqdn });
if (found) { if (found) {
throw { throw {
message: `Domain ${getDomain(fqdn).replace('www.', '')} is already configured.` message: `Domain ${getDomain(fqdn).replace('www.', '')} is already used.`
}; };
} }
return { return {

288
src/routes/applications/[id]/index.svelte
View File

@@ -173,81 +173,71 @@
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-3 items-center"> <div class="mt-2 grid grid-cols-2 items-center">
<label for="name">Name</label> <label for="name">Name</label>
<div class="col-span-2 "> <input
<input readonly={!$session.isAdmin}
readonly={!$session.isAdmin} name="name"
name="name" id="name"
id="name" bind:value={application.name}
bind:value={application.name} required
required />
/>
</div>
</div> </div>
<div class="grid grid-cols-3 items-center"> <div class="grid grid-cols-2 items-center">
<label for="gitSource">Git Source</label> <label for="gitSource">Git Source</label>
<div class="col-span-2"> <a
<a href={$session.isAdmin
href={$session.isAdmin ? `/applications/${id}/configuration/source?from=/applications/${id}`
? `/applications/${id}/configuration/source?from=/applications/${id}` : ''}
: ''} class="no-underline"
class="no-underline" ><input
><input value={application.gitSource.name}
value={application.gitSource.name} id="gitSource"
id="gitSource" disabled
disabled class="cursor-pointer hover:bg-coolgray-500"
class="cursor-pointer hover:bg-coolgray-500" /></a
/></a >
>
</div>
</div> </div>
<div class="grid grid-cols-3 items-center"> <div class="grid grid-cols-2 items-center">
<label for="repository">Git Repository</label> <label for="repository">Git Repository</label>
<div class="col-span-2"> <a
<a href={$session.isAdmin
href={$session.isAdmin ? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`
? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack` : ''}
: ''} class="no-underline"
class="no-underline" ><input
><input value="{application.repository}/{application.branch}"
value="{application.repository}/{application.branch}" id="repository"
id="repository" disabled
disabled class="cursor-pointer hover:bg-coolgray-500"
class="cursor-pointer hover:bg-coolgray-500" /></a
/></a >
>
</div>
</div> </div>
<div class="grid grid-cols-3 items-center"> <div class="grid grid-cols-2 items-center">
<label for="buildPack">Build Pack</label> <label for="buildPack">Build Pack</label>
<div class="col-span-2"> <a
<a href={$session.isAdmin
href={$session.isAdmin ? `/applications/${id}/configuration/buildpack?from=/applications/${id}`
? `/applications/${id}/configuration/buildpack?from=/applications/${id}` : ''}
: ''} class="no-underline "
class="no-underline " >
> <input
<input value={application.buildPack}
value={application.buildPack} id="buildPack"
id="buildPack" disabled
disabled class="cursor-pointer hover:bg-coolgray-500"
class="cursor-pointer hover:bg-coolgray-500" /></a
/></a >
>
</div>
</div> </div>
<div class="grid grid-cols-3 items-center pb-8"> <div class="grid grid-cols-2 items-center pb-8">
<label for="destination">Destination</label> <label for="destination">Destination</label>
<div class="col-span-2"> <div class="no-underline">
<div class="no-underline"> <input
<input value={application.destinationDocker.name}
value={application.destinationDocker.name} id="destination"
id="destination" disabled
disabled class="bg-transparent "
class="bg-transparent " />
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -255,24 +245,24 @@
<div class="title">Application</div> <div class="title">Application</div>
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-cols-3"> <div class="grid grid-cols-2">
<label for="fqdn" class="relative pt-2">Domain (FQDN)</label> <div class="flex-col">
<div class="col-span-2"> <label for="fqdn" class="relative pt-2">Domain (FQDN)</label>
<input
readonly={!$session.isAdmin || isRunning}
disabled={!$session.isAdmin || isRunning}
bind:this={domainEl}
name="fqdn"
id="fqdn"
bind:value={application.fqdn}
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
placeholder="eg: https://coollabs.io"
required
/>
<Explainer <Explainer
text="If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application." text="If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application."
/> />
</div> </div>
<input
readonly={!$session.isAdmin || isRunning}
disabled={!$session.isAdmin || isRunning}
bind:this={domainEl}
name="fqdn"
id="fqdn"
bind:value={application.fqdn}
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
placeholder="eg: https://coollabs.io"
required
/>
</div> </div>
<div class="grid grid-cols-2 items-center pb-8"> <div class="grid grid-cols-2 items-center pb-8">
<Setting <Setting
@@ -286,89 +276,77 @@
/> />
</div> </div>
{#if !staticDeployments.includes(application.buildPack)} {#if !staticDeployments.includes(application.buildPack)}
<div class="grid grid-cols-3 items-center"> <div class="grid grid-cols-2 items-center">
<label for="port">Port</label> <label for="port">Port</label>
<div class="col-span-2">
<input
readonly={!$session.isAdmin}
name="port"
id="port"
bind:value={application.port}
placeholder="default: 3000"
/>
</div>
</div>
{/if}
{#if !notNodeDeployments.includes(application.buildPack)}
<div class="grid grid-cols-3 items-center">
<label for="installCommand">Install Command</label>
<div class="col-span-2">
<input
readonly={!$session.isAdmin}
name="installCommand"
id="installCommand"
bind:value={application.installCommand}
placeholder="default: yarn install"
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="buildCommand">Build Command</label>
<div class="col-span-2">
<input
readonly={!$session.isAdmin}
name="buildCommand"
id="buildCommand"
bind:value={application.buildCommand}
placeholder="default: yarn build"
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="startCommand" class="">Start Command</label>
<div class="col-span-2">
<input
readonly={!$session.isAdmin}
name="startCommand"
id="startCommand"
bind:value={application.startCommand}
placeholder="default: yarn start"
/>
</div>
</div>
{/if}
<div class="grid grid-cols-3">
<label for="baseDirectory" class="pt-2">Base Directory</label>
<div class="col-span-2">
<input <input
readonly={!$session.isAdmin} readonly={!$session.isAdmin}
name="baseDirectory" name="port"
id="baseDirectory" id="port"
bind:value={application.baseDirectory} bind:value={application.port}
placeholder="default: /" placeholder="default: 3000"
/>
<Explainer
text="Directory to use as the base of all commands. <br> Could be useful with monorepos."
/> />
</div> </div>
{/if}
{#if !notNodeDeployments.includes(application.buildPack)}
<div class="grid grid-cols-2 items-center">
<label for="installCommand">Install Command</label>
<input
readonly={!$session.isAdmin}
name="installCommand"
id="installCommand"
bind:value={application.installCommand}
placeholder="default: yarn install"
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="buildCommand">Build Command</label>
<input
readonly={!$session.isAdmin}
name="buildCommand"
id="buildCommand"
bind:value={application.buildCommand}
placeholder="default: yarn build"
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="startCommand" class="">Start Command</label>
<input
readonly={!$session.isAdmin}
name="startCommand"
id="startCommand"
bind:value={application.startCommand}
placeholder="default: yarn start"
/>
</div>
{/if}
<div class="grid grid-cols-2 items-center">
<label for="baseDirectory" class="pt-2">Base Directory</label>
<input
readonly={!$session.isAdmin}
name="baseDirectory"
id="baseDirectory"
bind:value={application.baseDirectory}
placeholder="default: /"
/>
<Explainer
text="Directory to use as the base of all commands. <br> Could be useful with monorepos."
/>
</div> </div>
{#if !notNodeDeployments.includes(application.buildPack)} {#if !notNodeDeployments.includes(application.buildPack)}
<div class="grid grid-cols-3"> <div class="grid grid-cols-2">
<label for="publishDirectory" class="pt-2">Publish Directory</label> <label for="publishDirectory" class="pt-2">Publish Directory</label>
<div class="col-span-2"> <input
<input readonly={!$session.isAdmin}
readonly={!$session.isAdmin} name="publishDirectory"
name="publishDirectory" id="publishDirectory"
id="publishDirectory" bind:value={application.publishDirectory}
bind:value={application.publishDirectory} placeholder=" default: /"
placeholder=" default: /" />
/> <Explainer
<Explainer text="Directory containing all the assets for deployment. <br> For example: <span class='text-green-600 font-bold'>dist</span>,<span class='text-green-600 font-bold'>_site</span> or <span class='text-green-600 font-bold'>public</span>."
text="Directory containing all the assets for deployment. <br> For example: <span class='text-green-600 font-bold'>dist</span>,<span class='text-green-600 font-bold'>_site</span> or <span class='text-green-600 font-bold'>public</span>." />
/>
</div>
</div> </div>
{/if} {/if}
</div> </div>

4
src/routes/destinations/[id]/_FoundApp.svelte
View File

@@ -61,12 +61,12 @@
<div class="w-full text-center font-bold">Loading...</div> <div class="w-full text-center font-bold">Loading...</div>
{:else if app.foundByDomain} {:else if app.foundByDomain}
<div class="w-full bg-coolgray-200 text-xs"> <div class="w-full bg-coolgray-200 text-xs">
<span class="text-red-500">Domain</span> already configured for <span class="text-red-500">Domain</span> already used for
<span class="text-red-500">{app.foundName}</span> <span class="text-red-500">{app.foundName}</span>
</div> </div>
{:else if app.foundByRepository} {:else if app.foundByRepository}
<div class="w-full bg-coolgray-200 text-xs"> <div class="w-full bg-coolgray-200 text-xs">
<span class="text-red-500">Repository</span> already configured for <span class="text-red-500">Repository</span> already used for
<span class="text-red-500">{app.foundName}</span> <span class="text-red-500">{app.foundName}</span>
</div> </div>
{:else} {:else}

2
src/routes/services/[id]/check.json.ts
View File

@@ -17,7 +17,7 @@ export const post: RequestHandler = async (event) => {
return { return {
status: found ? 500 : 200, status: found ? 500 : 200,
body: { body: {
error: found && `Domain ${getDomain(fqdn).replace('www.', '')} is already configured` error: found && `Domain ${getDomain(fqdn).replace('www.', '')} is already used.`
} }
}; };
} catch (error) { } catch (error) {

2
src/routes/settings/check.json.ts
View File

@@ -16,7 +16,7 @@ export const post: RequestHandler = async (event) => {
return { return {
status: found ? 500 : 200, status: found ? 500 : 200,
body: { body: {
error: found && `Domain ${fqdn.replace('www.', '')} is already configured` error: found && `Domain ${fqdn.replace('www.', '')} is already used.`
} }
}; };
} catch (error) { } catch (error) {

5
src/routes/settings/index.json.ts
View File

@@ -78,7 +78,7 @@ export const post: RequestHandler = async (event) => {
}; };
if (status === 401) return { status, body }; if (status === 401) return { status, body };
const { fqdn, isRegistrationEnabled, dualCerts } = await event.request.json(); const { fqdn, isRegistrationEnabled, dualCerts, minPort, maxPort } = await event.request.json();
try { try {
const { const {
id, id,
@@ -119,6 +119,9 @@ export const post: RequestHandler = async (event) => {
data: { isCoolifyProxyUsed: true } data: { isCoolifyProxyUsed: true }
}); });
} }
if (minPort && maxPort) {
await db.prisma.setting.update({ where: { id }, data: { minPort, maxPort } });
}
return { return {
status: 201 status: 201

43
src/routes/settings/index.svelte
View File

@@ -35,6 +35,9 @@
let isRegistrationEnabled = settings.isRegistrationEnabled; let isRegistrationEnabled = settings.isRegistrationEnabled;
let dualCerts = settings.dualCerts; let dualCerts = settings.dualCerts;
let minPort = settings.minPort;
let maxPort = settings.maxPort;
let fqdn = settings.fqdn; let fqdn = settings.fqdn;
let isFqdnSet = !!settings.fqdn; let isFqdnSet = !!settings.fqdn;
let loading = { let loading = {
@@ -75,7 +78,11 @@
if (fqdn) { if (fqdn) {
await post(`/settings/check.json`, { fqdn }); await post(`/settings/check.json`, { fqdn });
await post(`/settings.json`, { fqdn }); await post(`/settings.json`, { fqdn });
return window.location.reload(); }
if (minPort !== settings.minPort || maxPort !== settings.maxPort) {
await post(`/settings.json`, { minPort, maxPort });
settings.minPort = minPort;
settings.maxPort = maxPort;
} }
} catch ({ error }) { } catch ({ error }) {
return errorNotification(error); return errorNotification(error);
@@ -112,7 +119,12 @@
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-cols-2 items-start"> <div class="grid grid-cols-2 items-start">
<div class="pt-2 text-base font-bold text-stone-100">Domain (FQDN)</div> <div class="flex-col">
<div class="pt-2 text-base font-bold text-stone-100">Domain (FQDN)</div>
<Explainer
text="If you specify <span class='text-yellow-500 font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-yellow-500 font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa."
/>
</div>
<div class="justify-start text-left"> <div class="justify-start text-left">
<input <input
bind:value={fqdn} bind:value={fqdn}
@@ -122,10 +134,31 @@
id="fqdn" id="fqdn"
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$" pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
placeholder="eg: https://coolify.io" placeholder="eg: https://coolify.io"
required
/> />
</div>
</div>
<div class="grid grid-cols-2 items-start py-6">
<div class="flex-col">
<div class="pt-2 text-base font-bold text-stone-100">Public Port Range</div>
<Explainer <Explainer
text="If you specify <span class='text-yellow-500 font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-yellow-500 font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa." text="Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-yellow-500 font-bold'>9000-9100</span>"
/>
</div>
<div class="mx-auto flex-row items-center justify-center space-y-2">
<input
class="h-8 w-20 px-2"
type="number"
bind:value={minPort}
min="1024"
max={maxPort}
/>
-
<input
class="h-8 w-20 px-2"
type="number"
bind:value={maxPort}
min={minPort}
max="65543"
/> />
</div> </div>
</div> </div>
@@ -135,7 +168,7 @@
disabled={isFqdnSet} disabled={isFqdnSet}
bind:setting={dualCerts} bind:setting={dualCerts}
title="Generate SSL for www and non-www?" title="Generate SSL for www and non-www?"
description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-yellow-400'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both." description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-yellow-500'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
on:click={() => !isFqdnSet && changeSettings('dualCerts')} on:click={() => !isFqdnSet && changeSettings('dualCerts')}
/> />
</div> </div>